/* Commerce sections, drawers and responsive finishing layers */
.shop-section{background:linear-gradient(158deg,#15100d,#0b0a09);border-top:1px solid var(--line);padding-top:75px}
.section-heading h2,.styling-card h2,.about-section h2,.dialog-heading h2,.drawer-header h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;line-height:1}
.section-heading h2 em,.about-section h2 em{color:var(--gold-light);font-weight:500}
.filter{background:transparent;color:#edddc7;border-color:rgba(220,176,103,.35);font-size:.76rem}
.filter.active,.filter:hover{background:var(--gold);border-color:var(--gold);color:#110c09}
.product-media{border-radius:2px;background:linear-gradient(130deg,#2e241b,#080808);border:1px solid rgba(216,171,105,.28)}
.product-placeholder{background:radial-gradient(circle at 35% 13%,#75634c,#171412 62%,#090808);color:var(--gold);font-family:"Cormorant Garamond",Georgia,serif}
.product-card{color:#f5e9d6}
.product-body{padding:15px 3px 8px}
.product-meta h3{font-family:"Cormorant Garamond",serif;font-size:1.68rem;font-weight:500}
.product-category,.product-description{color:var(--muted)}
.product-price{color:var(--gold-light)}
.product-badge{background:var(--gold);color:#17100a;border-radius:2px}
.product-actions select,.product-actions button{border-color:rgba(220,176,103,.35);border-radius:3px}
.product-actions select{background:#1e1915;color:#f8ead5}
.product-actions button{background:var(--gold);color:#17100a}
.empty-state{background:rgba(37,29,21,.62);border-radius:3px}
.styling-section{gap:24px;max-width:1460px;padding-top:86px;padding-bottom:92px}
.styling-card{position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(225,182,112,.36);border-radius:3px;background:linear-gradient(100deg,rgba(0,0,0,.84),rgba(0,0,0,.52)),url('https://images.unsplash.com/photo-1785088602399-ada20c21caf2?auto=format&fit=crop&w=1050&q=80') center 30%/cover}
.styling-card:after{content:"";position:absolute;inset:0;border:10px solid rgba(220,181,116,.035);pointer-events:none}
.styling-card p:not(.eyebrow){color:#e2d2be}
.styling-card .button{background:linear-gradient(110deg,#f3d39b,#b07d41);color:#17100b;border:1px solid #e3bc79}
.styling-list{border-top-color:var(--line)}
.styling-list article{border-bottom-color:var(--line)}
.styling-list article span{color:var(--gold)}
.styling-list h3{font-weight:500;font-size:2.1rem;color:#f1e5d2}
.styling-list p{color:var(--muted)}
.about-section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,90px);max-width:none;align-items:center;text-align:left;padding:70px clamp(20px,6vw,120px);background:radial-gradient(circle at 74% 18%,rgba(202,151,66,.12),transparent 38%),#070707;border-top:1px solid var(--line)}
.about-portrait{width:100%;min-height:380px;aspect-ratio:4/5;max-height:620px;background:linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.12)),url('https://images.unsplash.com/photo-1771012266130-435928e57460?auto=format&fit=crop&w=900&q=80') center/cover;filter:saturate(.82);border:1px solid rgba(228,185,117,.3)}
.about-story{max-width:700px}
.about-section h2{font-size:clamp(3.2rem,6vw,6.6rem);line-height:.9;margin-bottom:26px}
.about-section>p:last-child{max-width:none}
.about-story>p:last-child{max-width:620px;color:#c9b7a0;font-size:1.06rem;line-height:1.8}
.prime-footer{background:#080707;border-top-color:var(--line);color:#ddcdb8}
.prime-footer p.small{color:#ad9a83}
.prime-command-pill{background:rgba(12,10,9,.96);border-color:rgba(226,181,113,.43)}
.prime-command-pill button:hover,.prime-command-pill button:focus-visible,.prime-command-pill button[aria-current="page"]{background:var(--gold);color:#110d09}
.prime-command-pill b{background:var(--gold);color:#100b07}
.prime-command-pill button:hover b,.prime-command-pill button[aria-current="page"] b{background:#110d09;color:var(--gold)}
.cart-drawer,.dialog-card{background:#16120e;color:#f7e7d1;border:1px solid rgba(231,187,113,.28)}
.cart-item,.payment-choice{background:#211b16}
.field input,.field select,.field textarea,.checkout-panel select{background:#241d17;color:#fff4e4;border-color:rgba(226,184,116,.35)}
.payment-choice{background:#211b16}
.payment-choice:hover{border-color:var(--gold)}
.payment-choice:has(.payment-radio:checked){border-color:var(--gold);box-shadow:0 0 0 1px rgba(225,181,106,.65)}
.payment-selected{background:var(--gold);color:#17100b}
.toast{background:linear-gradient(95deg,#36271b,#17110d);border:1px solid var(--gold);color:#fff1d6}
@media(max-width:760px){.about-section{grid-template-columns:1fr;text-align:left;padding:55px 24px}.about-portrait{min-height:330px;max-height:430px;aspect-ratio:5/4}.styling-section{padding:56px 18px;gap:22px}}


/* ATELIER SFX: understated sound control, tap-safe down to compact phones. */
.prime-command-pill .oc-sound-toggle{
  position:relative;
  flex:0 0 42px;
  min-width:42px;
  width:42px;
  min-height:42px;
  margin-left:2px;
  padding:0;
  border:1px solid rgba(221,177,110,.33);
  border-radius:999px;
  background:rgba(217,165,94,.07);
  color:#edd2a5;
  font-size:1.11rem;
  font-family:Georgia,serif;
  line-height:1;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.prime-command-pill .oc-sound-toggle:hover,
.prime-command-pill .oc-sound-toggle:focus-visible{
  background:rgba(229,185,114,.20);
  border-color:rgba(242,209,146,.7);
  color:#fff0cf;
}
.prime-command-pill .oc-sound-toggle:focus-visible{
  outline:2px solid #f6d29c;
  outline-offset:3px;
}
.prime-command-pill .oc-sound-toggle.is-muted{
  opacity:.65;
  color:#ac9c89;
}
.prime-command-pill .oc-sound-toggle.is-muted::after{
  content:"";
  position:absolute;
  width:18px;
  height:1px;
  background:currentColor;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-40deg);
}
@media(max-width:380px){
  .prime-command-pill .oc-sound-toggle{
    flex-basis:40px;
    min-width:40px;
    width:40px;
    margin-left:0;
  }
  .prime-command-pill button:not(.oc-sound-toggle){
    padding-left:7px;
    padding-right:7px;
  }
}


/* OrganizedChaos / Atelier Portrait Reveal
   A midnight-champagne sweep frames the garment only while pixels are loading.
   The final image remains untouched after the brief reveal. */
.product-gallery{
  isolation:isolate;
  background:#100e0d;
  /* Horizontal gestures belong to the gallery; vertical scrolling stays native. */
  touch-action:pan-y pinch-zoom;
}
.product-gallery .product-main-image{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
}
.product-gallery .atelier-image-loader{
  position:absolute;
  z-index:1;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(149,112,65,.17),transparent 64%),
    linear-gradient(140deg,#18130f 0%,#09090a 55%,#16110e 100%);
  opacity:0;
  visibility:hidden;
  transition:opacity .5s ease,visibility .5s;
}
.product-gallery.is-loading .atelier-image-loader{
  opacity:1;
  visibility:visible;
}
.product-gallery .atelier-image-loader::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(220,178,111,.28);
  border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,245,212,.045);
}
.product-gallery .atelier-image-loader::after{
  content:"";
  position:absolute;
  width:52%;
  height:160%;
  top:-30%;
  left:-72%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent 0%,rgba(236,197,132,.015) 18%,rgba(248,219,165,.18) 51%,rgba(255,250,236,.28) 55%,rgba(222,182,110,.05) 82%,transparent 100%);
  filter:blur(8px);
  animation:oc-atelier-portrait-sweep 2.3s cubic-bezier(.45,.02,.32,1) infinite;
  will-change:transform;
}
.product-gallery .atelier-image-loader-mark{
  position:relative;
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border:1px solid rgba(231,194,126,.3);
  border-radius:50%;
  color:rgba(237,207,156,.72);
  box-shadow:0 0 24px rgba(226,183,114,.04);
  font:italic 400 19px/1 Georgia,serif;
  letter-spacing:-.09em;
  transform:translateY(-4px);
  animation:oc-atelier-monogram-breathe 2.3s ease-in-out infinite;
}
.product-gallery .product-main-image{
  display:block;
  position:relative;
  z-index:0;
  opacity:1;
  transition:opacity .58s cubic-bezier(.16,1,.3,1),transform .4s ease;
}
.product-gallery.is-loading .product-main-image{
  opacity:0;
}
.product-gallery.is-error .product-main-image{
  opacity:0;
}
.product-gallery.is-error .atelier-image-loader{
  opacity:1;
  visibility:visible;
  background:linear-gradient(135deg,#17120e,#080809);
}
.product-gallery.is-error .atelier-image-loader::after,
.product-gallery.is-error .atelier-image-loader-mark{
  animation:none;
}
.product-gallery.is-error .atelier-image-loader-mark::after{
  content:"";
  position:absolute;
  width:40px;
  height:1px;
  background:rgba(237,207,156,.8);
  transform:rotate(-43deg);
}
.product-gallery.is-loading .gallery-arrow,
.product-gallery.is-loading .gallery-dots{
  opacity:.8;
}
@keyframes oc-atelier-portrait-sweep{
  0%,8%{transform:translateX(0) skewX(-18deg)}
  68%,100%{transform:translateX(460%) skewX(-18deg)}
}
@keyframes oc-atelier-monogram-breathe{
  0%,100%{opacity:.45;transform:translateY(-4px) scale(.99)}
  50%{opacity:.85;transform:translateY(-4px) scale(1.03)}
}
@media(prefers-reduced-motion:reduce){
  .product-gallery .atelier-image-loader::after,
  .product-gallery .atelier-image-loader-mark{
    animation:none!important;
  }
  .product-gallery .product-main-image,
  .product-gallery .atelier-image-loader{transition:none!important}
}


/* Matching editorial-card image loading state, below readable category labels. */
.category-card.oc-category-image-loading{
  background:
    radial-gradient(ellipse at 50% 50%,rgba(185,140,79,.22),transparent 70%),
    linear-gradient(135deg,#1c1510,#090909 58%,#1b1510);
}
.category-card.oc-category-image-loading img{
  opacity:0;
}
.category-card.oc-category-image-ready img{
  opacity:1;
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .5s,filter .3s;
}
.category-card.oc-category-image-loading::before{
  content:"";
  position:absolute;
  inset:-20% auto -20% -70%;
  z-index:1;
  width:54%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(243,204,139,.14) 45%,rgba(255,244,222,.25) 52%,transparent);
  transform:skewX(-15deg);
  animation:oc-atelier-category-sweep 2.6s ease-in-out infinite;
}
@keyframes oc-atelier-category-sweep{
  0%,12%{transform:translateX(0) skewX(-15deg)}
  70%,100%{transform:translateX(470%) skewX(-15deg)}
}
@media(prefers-reduced-motion:reduce){
  .category-card.oc-category-image-loading::before{animation:none!important}
  .category-card.oc-category-image-ready img{transition:none!important}
}

/* ORGANIZEDCHAOS // Atelier Rotary Gallery v1
   Page 04-inspired depth, confined entirely to existing product-media geometry.
   Artwork is 100% contain-fit. No image crop, layout expansion or new UI layer. */
.product-gallery{
  overflow:hidden;
  perspective:1100px;
  perspective-origin:50% 49%;
  background:radial-gradient(ellipse at 50% 42%,#29211a 0%,#100e0d 70%,#080808 100%);
  --oc-look-x:0deg;
  --oc-look-y:0deg;
}
.product-gallery .oc-rotary-scene{
  position:absolute;
  inset:0;
  z-index:0;
  display:grid;
  place-items:center;
  padding:clamp(4px,.55vw,8px);
  perspective:1100px;
  perspective-origin:center;
  pointer-events:none;
  overflow:hidden;
}
.product-gallery .oc-rotary-card{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  transform-style:preserve-3d;
  transform:rotateX(var(--oc-look-y)) rotateY(var(--oc-look-x)) translateZ(6px);
  transform-origin:center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transition:transform 240ms cubic-bezier(.18,.8,.22,1),box-shadow 320ms ease;
  border:1px solid rgba(223,179,109,.52);
  border-radius:clamp(7px,1.3vw,14px);
  background:radial-gradient(ellipse at 50% 38%,#34291e 0%,#100e0d 72%,#080808 100%);
  box-shadow:0 15px 28px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,244,218,.055);
}
/* Reflection lives on the frame rim, not across the product. */
.product-gallery .oc-rotary-card::before,
.product-gallery .oc-rotary-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  pointer-events:none;
}
.product-gallery .oc-rotary-card::before{
  border:1px solid rgba(249,221,170,.2);
  box-shadow:inset 1px 1px 0 rgba(255,251,230,.18),inset -1px -1px 0 rgba(92,57,21,.27);
}
.product-gallery .oc-rotary-card::after{
  background:
    linear-gradient(135deg,rgba(252,222,160,.13),transparent 11%,transparent 89%,rgba(200,150,79,.12));
  opacity:.76;
}
.product-gallery .oc-rotary-card .product-main-image{
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
  width:100%!important;
  height:100%!important;
  max-width:100%;
  max-height:100%;
  padding:0;
  margin:0;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent;
  transform:none!important;
  -webkit-user-drag:none;
}
.product-card:hover .product-gallery .product-main-image,
.product-card:focus-within .product-gallery .product-main-image{
  transform:none!important;
  filter:none;
}
.product-gallery .gallery-arrow{
  z-index:4;
  border:1px solid rgba(240,203,144,.72);
  color:#fbe6bd;
  background:linear-gradient(145deg,rgba(35,27,21,.92),rgba(9,9,10,.83));
  box-shadow:0 5px 18px rgba(0,0,0,.33),inset 0 1px 0 rgba(255,243,212,.18);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  touch-action:manipulation;
}
.product-gallery .gallery-arrow:hover,
.product-gallery .gallery-arrow:focus-visible{
  border-color:#f3cf94;
  color:#fff8ed;
  background:rgba(59,41,25,.95);
}
.product-gallery .gallery-arrow:focus-visible{
  outline:2px solid #f7d59c;
  outline-offset:2px;
}
.product-gallery .gallery-dots{
  z-index:4;
  background:rgba(13,11,10,.75);
  border:1px solid rgba(216,178,119,.32);
  box-shadow:0 4px 18px rgba(0,0,0,.3);
}
.product-gallery .gallery-dot{background:rgba(252,224,183,.41);}
.product-gallery .gallery-dot.active{background:#f6d49b;box-shadow:0 0 7px rgba(241,196,122,.42);}
@media (prefers-reduced-motion:reduce){
  .product-gallery .oc-rotary-card{
    transform:none!important;
    transition:none!important;
  }
}


/* ORGANIZEDCHAOS // Atelier Oblique v3
   Full garments stay visible. Architectural depth and matte champagne trim,
   not heavy bevels or reflections over the textile itself. */
.product-gallery {
  --oc-look-x:-4.25deg;
  --oc-look-y:1.1deg;
  perspective:1050px;
  perspective-origin:50% 50%;
  overflow:hidden;
  background:radial-gradient(ellipse at 48% 44%,#251e19 0%,#110f0e 59%,#090909 100%);
}
.product-gallery .oc-rotary-scene {
  padding:clamp(4px,.7vw,8px);
  transform-style:preserve-3d;
}
.product-gallery .oc-rotary-scene::before {
  content:"";
  position:absolute;
  inset:clamp(10px,2.3%,16px) clamp(8px,1.9%,14px);
  z-index:0;
  border:1px solid rgba(218,176,115,.42);
  border-radius:clamp(7px,1vw,13px);
  background:linear-gradient(135deg,#372c23 0%,#191512 47%,#0c0b0a 100%);
  transform:translateX(5px) translateY(3px) translateZ(-17px) rotateY(6deg);
  box-shadow:6px 10px 25px rgba(0,0,0,.43);
  pointer-events:none;
}
.product-gallery .oc-rotary-card {
  z-index:1;
  transform:rotateX(var(--oc-look-y)) rotateY(var(--oc-look-x)) translateZ(5px);
  border:1px solid rgba(232,194,134,.7);
  border-radius:clamp(7px,1vw,13px);
  background:radial-gradient(ellipse at 50% 43%,#302720 0%,#15110f 70%,#0c0b0a);
  box-shadow:5px 12px 28px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,237,200,.07);
}
.product-gallery .oc-rotary-card::before {
  border:1px solid rgba(255,232,185,.2);
  box-shadow:inset 1px 0 0 rgba(255,242,214,.21),inset -1px 0 0 rgba(40,27,17,.2);
}
.product-gallery .oc-rotary-card::after {
  background:linear-gradient(130deg,rgba(250,227,190,.08),transparent 9%,transparent 92%,rgba(217,171,98,.08));
  opacity:.56;
}
.product-gallery .oc-rotary-card .product-main-image {
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
  transform:none!important;
  image-rendering:auto;
}
.product-gallery .gallery-arrow {
  width:42px;
  height:42px;
  border:1px solid rgba(231,197,144,.44);
  color:#f9e9ce;
  font-size:1.35rem;
  background:rgba(15,13,12,.76);
  box-shadow:0 3px 14px rgba(0,0,0,.24);
  transition:background .18s ease,border-color .18s ease;
}
.product-gallery .gallery-arrow:hover,
.product-gallery .gallery-arrow:focus-visible {
  color:#fff7e8;
  border-color:rgba(251,220,169,.85);
  background:rgba(43,32,25,.93);
}
.product-gallery .gallery-prev{left:clamp(7px,1vw,12px)}
.product-gallery .gallery-next{right:clamp(7px,1vw,12px)}
.product-gallery .gallery-dots {
  bottom:12px;
  z-index:5;
  gap:6px;
  border:1px solid rgba(234,193,134,.18);
  padding:7px 10px;
  background:rgba(13,11,10,.76);
}
.product-gallery .gallery-dot {
  width:5px;
  height:5px;
  background:rgba(241,215,176,.48);
}
.product-gallery .gallery-dot.active {
  background:#f1d4a9;
  box-shadow:0 0 5px rgba(246,205,145,.27);
}
.product-gallery .gallery-count {
  position:absolute;
  z-index:5;
  top:clamp(10px,2%,16px);
  right:clamp(10px,2%,16px);
  padding:5px 8px;
  border:1px solid rgba(226,190,136,.33);
  border-radius:20px;
  color:rgba(252,227,187,.88);
  background:rgba(13,11,10,.68);
  font:600 10px/1.2 Manrope,system-ui,sans-serif;
  letter-spacing:.1em;
  pointer-events:none;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
@media(max-width:600px) {
  .product-gallery {--oc-look-x:-3.5deg;--oc-look-y:.9deg}
  .product-gallery .oc-rotary-scene {padding:5px}
  .product-gallery .oc-rotary-scene::before {transform:translateX(4px) translateY(3px) translateZ(-12px) rotateY(5deg)}
}
@media(prefers-reduced-motion:reduce) {
  .product-gallery .oc-rotary-card {transform:none!important;transition:none!important}
  .product-gallery .oc-rotary-scene::before {transform:translate(3px,3px)!important}
}


/* ORGANIZEDCHAOS / Revolving Atelier v4
   True front/back photo planes; single revolving 3D leaf with no clipped garments. */
.product-gallery .oc-rotary-card {
  overflow:visible;
  isolation:auto;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
  will-change:transform;
}
.product-gallery .oc-rotary-face {
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 43%,#302720 0%,#15110f 70%,#0c0b0a);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}
.product-gallery .oc-face-front {
  transform:rotateY(0deg) translateZ(1px);
}
.product-gallery .oc-face-back {
  transform:rotateY(180deg) translateZ(1px);
}
.product-gallery .oc-rotary-face :is(.product-main-image,.product-back-image) {
  display:block;
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  max-width:100%;
  max-height:100%;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent;
  -webkit-user-drag:none;
  transform:none!important;
  filter:none!important;
}
.product-gallery.is-rotating .oc-rotary-card {
  transition:none;
}
.product-gallery.is-rotating .oc-rotary-scene::before {
  opacity:.84;
}
@media(prefers-reduced-motion:reduce) {
  .product-gallery .oc-face-back{display:none}
  .product-gallery .oc-rotary-card{will-change:auto}
}


/* ORGANIZEDCHAOS / Couture Navigation v5
   Champagne-finished precision controls: drawn arrow stems and heads,
   a fine internal bezel and quiet optical highlights. */
.product-gallery .gallery-arrow {
  width:46px;
  height:46px;
  min-width:44px;
  min-height:44px;
  padding:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(229,192,138,.68);
  border-radius:50%;
  color:#f9e6c4;
  font-size:0;
  background:
    radial-gradient(circle at 25% 18%,rgba(240,211,157,.17),transparent 56%),
    linear-gradient(150deg,rgba(37,30,26,.97) 0%,rgba(11,10,10,.94) 78%);
  box-shadow:0 7px 21px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,232,189,.22),
    inset 0 -1px 0 rgba(103,70,42,.38);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:background .22s ease,box-shadow .22s ease,border-color .22s ease,transform .22s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.product-gallery .gallery-arrow::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(235,199,145,.2);
  border-radius:50%;
  pointer-events:none;
}
.product-gallery .gallery-arrow::after{
  content:"";
  position:absolute;
  top:5px;
  left:50%;
  width:8px;
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(251,232,198,.67),transparent);
  pointer-events:none;
}
.product-gallery .gallery-prev{left:clamp(7px,1.3vw,12px)}
.product-gallery .gallery-next{right:clamp(7px,1.3vw,12px)}
.product-gallery .oc-fashion-arrow{
  position:relative;
  display:block;
  width:22px;
  height:16px;
  color:#f8ddb2;
  transform:translateX(0);
  transition:transform .24s cubic-bezier(.19,1,.22,1),color .2s ease;
  pointer-events:none;
}
.product-gallery .oc-fashion-arrow::before{
  content:"";
  position:absolute;
  left:1px;
  top:50%;
  width:20px;
  height:1px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(222,176,111,.35),currentColor);
  box-shadow:0 1px 0 rgba(10,8,7,.5);
}
.product-gallery .oc-fashion-arrow::after{
  content:"";
  position:absolute;
  right:1px;
  top:50%;
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.product-gallery .gallery-prev .oc-fashion-arrow{transform:scaleX(-1)}
.product-gallery .gallery-arrow:hover,
.product-gallery .gallery-arrow:focus-visible{
  border-color:rgba(255,222,166,.92);
  background:linear-gradient(145deg,rgba(77,56,39,.97),rgba(23,19,17,.97));
  box-shadow:0 8px 25px rgba(0,0,0,.43),0 0 0 1px rgba(222,174,109,.13),
    inset 0 1px 0 rgba(255,239,204,.24);
}
.product-gallery .gallery-arrow:hover .oc-fashion-arrow,
.product-gallery .gallery-arrow:focus-visible .oc-fashion-arrow{
  color:#fff2d8;
  transform:translateX(2px);
}
.product-gallery .gallery-prev:hover .oc-fashion-arrow,
.product-gallery .gallery-prev:focus-visible .oc-fashion-arrow{
  transform:scaleX(-1) translateX(2px);
}
.product-gallery .gallery-arrow:active{
  border-color:#f7d9a7;
  background:rgba(72,53,38,.95);
}
.product-gallery .gallery-arrow:focus-visible{
  outline:2px solid #f7d9a7;
  outline-offset:2px;
}
@media(max-width:600px) {
 .product-gallery .gallery-arrow{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce) {
 .product-gallery .gallery-arrow,.product-gallery .oc-fashion-arrow{transition:none!important}
}