@font-face { font-family:"Scarlet Edit Heading"; src:url("../fonts/bricolage-grotesque-bold.woff2") format("woff2"); font-style:normal; font-weight:700; font-display:swap; }
@font-face { font-family:"Scarlet Edit Text"; src:url("../fonts/geist-regular.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
.scarlet-jewelry-edit { width:100%; margin:0; padding:10px 0; background:#fff; color:#4e351e; font-family:"Scarlet Edit Text",Arial,sans-serif; }
.scarlet-jewelry-edit *, .scarlet-jewelry-edit *::before, .scarlet-jewelry-edit *::after { box-sizing:border-box; }
.scarlet-jewelry-edit__layout { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,3fr); align-items:stretch; width:100%; }
.scarlet-jewelry-edit__media { position:relative; min-width:0; aspect-ratio:16 / 8; overflow:hidden; background:#ece8df; }
.scarlet-jewelry-edit__background { display:block; width:100%; height:100%; object-fit:cover; }
.scarlet-jewelry-edit__pin { position:absolute; z-index:1; display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:0; background:rgba(255,255,255,.93); color:#806132; font-family:Arial,sans-serif; font-size:22px; font-weight:400; line-height:1; transform:translate(-50%,-50%); cursor:pointer; transition:background .2s ease,color .2s ease,transform .2s ease; }
.scarlet-jewelry-edit__pin.is-active, .scarlet-jewelry-edit__pin:hover { background:#806132; color:#fff; transform:translate(-50%,-50%) scale(1.15); }
.scarlet-jewelry-edit__pin:focus-visible { outline:2px solid #4e351e; outline-offset:3px; }
.scarlet-jewelry-edit__aside { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; padding:32px clamp(20px,3vw,52px); background:#f8f7f4; }
.scarlet-jewelry-edit__heading { margin:0 0 26px; font-family:"Scarlet Edit Heading",Arial,sans-serif; font-size:clamp(24px,2vw,34px); font-weight:700; line-height:1.2; text-align:center; color:#4e351e; }
.scarlet-jewelry-edit__product { width:100%; max-width:340px; margin:0; text-align:center; }
.scarlet-jewelry-edit__product[hidden] { display:none; }
.scarlet-jewelry-edit__product-image { display:block; width:100%; aspect-ratio:1; overflow:hidden; background:#fff; text-decoration:none; }
.scarlet-jewelry-edit__product-image img { display:block; width:100%; height:100%; object-fit:contain; }
.scarlet-jewelry-edit__details { padding:18px 0 0; }
.scarlet-jewelry-edit__details h3 { margin:0 0 8px; font-family:"Scarlet Edit Heading",Arial,sans-serif; font-size:18px; font-weight:700; line-height:1.35; }
.scarlet-jewelry-edit__details h3 a { color:#4e351e; text-decoration:none; }
.scarlet-jewelry-edit__details h3 a:hover, .scarlet-jewelry-edit__details h3 a:focus-visible { color:#806132; }
.scarlet-jewelry-edit__prices { display:flex; justify-content:center; gap:10px; color:#806132; font-size:16px; }
.scarlet-jewelry-edit__prices del { color:#ad9674; }
@media(max-width:989px) {
  .scarlet-jewelry-edit { padding:5px 0; }
  .scarlet-jewelry-edit__layout { grid-template-columns:minmax(0,1fr); }
  .scarlet-jewelry-edit__media { aspect-ratio:4 / 2.3; }
  .scarlet-jewelry-edit__aside { padding:30px 15px 36px; }
  .scarlet-jewelry-edit__heading { margin-bottom:20px; font-size:24px; }
  .scarlet-jewelry-edit__product { max-width:300px; }
  .scarlet-jewelry-edit__pin { width:30px; height:30px; font-size:20px; }
}
@media(prefers-reduced-motion:reduce) { .scarlet-jewelry-edit__pin { transition:none; } }

.scarlet-jewelry-edit__image-wrap { position:relative; width:100%; }
.scarlet-jewelry-edit__arrow { position:absolute; z-index:2; top:50%; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:0; background:rgba(255,255,255,.88); color:#806132; transform:translateY(-50%); cursor:pointer; }
.scarlet-jewelry-edit__arrow--prev { left:8px; }
.scarlet-jewelry-edit__arrow--next { right:8px; }
.scarlet-jewelry-edit__arrow::before { content:""; width:10px; height:10px; border-top:2px solid currentColor; border-right:2px solid currentColor; }
.scarlet-jewelry-edit__arrow--prev::before { transform:rotate(-135deg); margin-left:4px; }
.scarlet-jewelry-edit__arrow--next::before { transform:rotate(45deg); margin-right:4px; }
.scarlet-jewelry-edit__arrow:hover, .scarlet-jewelry-edit__arrow:focus-visible { background:#806132; color:#fff; }
.scarlet-jewelry-edit__arrow:focus-visible { outline:2px solid #4e351e; outline-offset:2px; }

/* Give the product image more room and place navigation outside it. */
.scarlet-jewelry-edit__product { width:calc(100% - 88px); max-width:440px; }
.scarlet-jewelry-edit__arrow--prev { left:-44px; }
.scarlet-jewelry-edit__arrow--next { right:-44px; }
@media (max-width:989px) {
  .scarlet-jewelry-edit__aside { padding-left:8px; padding-right:8px; }
  .scarlet-jewelry-edit__product { width:calc(100% - 72px); max-width:340px; }
  .scarlet-jewelry-edit__arrow { width:32px; height:32px; }
  .scarlet-jewelry-edit__arrow--prev { left:-36px; }
  .scarlet-jewelry-edit__arrow--next { right:-36px; }
}

.scarlet-jewelry-edit__shop { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:160px; max-width:100%; min-height:44px; margin-top:20px; padding:10px 16px; border:1px solid #806132; border-radius:4px; background:#806132; color:#fff; font:400 14px/1.4 Arial,sans-serif; text-decoration:none; text-transform:uppercase; transition:background-color .2s ease,border-color .2s ease; }
.scarlet-jewelry-edit__shop:hover, .scarlet-jewelry-edit__shop:focus-visible, .scarlet-jewelry-edit__shop:active { background:#4e351e; border-color:#4e351e; color:#fff; text-decoration:none; }
.scarlet-jewelry-edit__shop:focus-visible { outline:2px solid #806132; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .scarlet-jewelry-edit__shop { transition:none; } }