/* OyeKudiye — product listing page. Header/footer/type scale come from the shared homepage
   partials + motion.css/responsive.css; this file only adds listing-specific layout & states. */
[hidden]{display:none !important}
body:has(.lst-drawer:not([hidden])),body:has(.lst-overlay:not([hidden])){overflow:hidden}

/* content gutters: 1440 column flush on desktop (same edges as homepage sections) */
.lst,.lst-about{padding-left:0;padding-right:0}
@media (max-width:1199px){.lst,.lst-about{padding-left:56px;padding-right:56px}}
@media (max-width:1024px){.lst,.lst-about{padding-left:32px;padding-right:32px}}
@media (max-width:640px){.lst,.lst-about{padding-left:16px;padding-right:16px}}

.lst-cat.is-active .lst-cat-ring{border-color:#3B0B3E !important}
.lst-cat.is-active .lst-cat-label{color:#3B0B3E !important}
.lst-cats{scrollbar-width:none}.lst-cats::-webkit-scrollbar{display:none}
@media (max-width:900px){.lst-cats{justify-content:flex-start !important}}

.lst-herotoggle[aria-expanded="true"] .lst-chev{transform:rotate(180deg)}
.lst-activecount{display:inline-grid}
.lst-activecount[hidden]{display:none}
.lst-active:not([hidden]){display:flex}
.lst-chip-x{display:flex;align-items:center;gap:8px;padding:8px 9px 8px 15px;border-radius:999px;background:rgba(230,21,127,.08);
  border:1px solid rgba(230,21,127,.3);font:400 13px/1 'Jost',sans-serif;color:#B00A60;cursor:pointer}
.lst-clearall{background:none;border:none;font:500 13px/1 'Jost',sans-serif;letter-spacing:.06em;color:rgba(59,11,62,.55);text-decoration:underline;cursor:pointer}

/* ---- Product cards (elegant, square-edged, thin-line icons; masonry columns) ---- */
.lst-card.is-hidden{display:none}
/* each fetched page is its own column block (.lst-batch), so appending a page never re-balances the cards above it (no CLS) */
.lst-grid{display:block !important}
.lst-batch{column-count:4;column-gap:12px}
.lst-card{position:relative;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;background:#fff;box-shadow:0 0 10px rgba(59,11,62,.11);
  break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:12px;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease}
.lst-media{position:relative;overflow:hidden;background:#FDE4EF}
.lst-media.has-img{aspect-ratio:auto !important}
.lst-media img{display:block;width:100%;height:auto}
.lst-img{position:relative;width:100%;height:100%}

/* Premium gold glaze on hover - ported faithfully from manekratna.com's homepage "Curated by Craft &
   Tradition" cards (.mr-craft-card in /Users/jimitjain/Documents/mr/app/Views/home/index.php:51-58), the
   effect the owner actually meant. Same gradient stops, same timings/easing, same gold ring color - the
   ONLY change is which color the LIFT shadow tints (plum, matching this site's own hover shadows elsewhere,
   in place of MR's brown-toned one) since that is chrome/UI, not the glaze itself. Ported onto .lst-media
   (the photo tile) rather than the whole .lst-card, because MR's card IS just an image tile with text
   overlaid on it - OyeKudiye's card has a separate white info/price section below the photo that this
   effect should not sweep across. The lift+shadow stays on .lst-card, same as MR combines both on one
   element. Deliberately NOT ported: MR's own .mr-craft-bg zoom(1.14) - the owner asked for no zoom. */
.lst-media::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.65) 44%,rgba(250,224,166,.95) 52%,rgba(255,255,255,.65) 60%,transparent 78%);
  transform:translateX(-150%);transition:transform 1s cubic-bezier(.22,1,.36,1)}
.lst-media::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 2px rgba(216,184,113,0);transition:box-shadow .5s ease}
@media (hover:hover){
  .lst-card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -14px rgba(59,11,62,.4)}
  .lst-card:hover .lst-media::before{transform:translateX(150%)}
  .lst-card:hover .lst-media::after{box-shadow:inset 0 0 0 2px rgba(216,184,113,.85)}
  @media (prefers-reduced-motion:reduce){
    .lst-card:hover{transform:none}
    .lst-card:hover .lst-media::before{transition:opacity .2s ease;transform:translateX(-150%);opacity:0}
  }
}
.lst-card .oye-slot-ring{display:none}
.lst-card .oye-slot{height:100%}

/* Hover carousel (card-hover.js): matches manekratna.com's product-card hover slideshow mechanism 1:1 -
   a sliding flex track (translateX) with a cloned first slide for a seamless forward-only loop, plus dot
   pagination overlaid on a dark scrim at the bottom of the image. Built into the card's .lst-img box (already
   position:relative) on hover and torn down on leave, so the primary photo's own box (and the masonry column
   height it set) never changes size. Inert until JS builds it (data-hover-imgs cards only); on
   prefers-reduced-motion the script never runs at all. Colors are OyeKudiye's own (pink #E6157F active dot in
   place of Manek Ratna's maroon); the scrim and inactive-dot treatment are kept neutral/white as in the
   reference, since they are a generic photo-contrast device rather than a brand color. */
.lst-hstage{position:absolute;inset:0;overflow:hidden;z-index:2;opacity:0;transition:opacity .15s ease}
.lst-hstage.is-ready{opacity:1}
.lst-htrack{display:flex;height:100%;width:100%;will-change:transform}
.lst-htrack.is-animating{transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.lst-hslide{flex:0 0 100%;width:100%;height:100%}
.lst-hslide img{width:100%;height:100%;object-fit:cover;display:block}
.lst-hdots{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:center;align-items:center;gap:6px;
  pointer-events:none;padding:8px 0 7px;background:linear-gradient(to top,rgba(0,0,0,.38),rgba(0,0,0,.22) 60%,rgba(0,0,0,0))}
.lst-hdot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.28);
  transition:background .2s ease,width .2s ease}
.lst-hdot.is-on{width:16px;border-radius:3px;background:#E6157F;box-shadow:0 0 0 1px rgba(255,255,255,.85),0 1px 2px rgba(0,0,0,.35)}

/* corner ribbon (top-left) */
.lst-ribbon{position:absolute;top:0;left:0;width:86px;height:86px;overflow:hidden;pointer-events:none}
.lst-ribbon span{position:absolute;top:17px;left:-26px;width:112px;padding:5px 0;transform:rotate(-45deg);text-align:center;
  background:#3B0B3E;color:#FDF0F8;font:500 11px/1 'Jost',sans-serif;letter-spacing:.1em;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.lst-ribbon-new span{background:#E6157F}

.lst-info{padding:14px 14px 14px;display:flex;flex-direction:column;gap:10px}
.lst-title{margin:0;font:400 16px/1.3 'Marcellus',serif;color:#3B0B3E;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lst-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}
.lst-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.lst-price b{font:500 17px/1 'Jost',sans-serif;color:#3B0B3E}
.lst-price s{font:400 14px/1 'Jost',sans-serif;color:rgba(59,11,62,.4)}
.lst-price em{font:500 13px/1 'Jost',sans-serif;color:#E6157F;font-style:normal}
.lst-tools{display:flex;align-items:center;gap:2px;flex:none}
.lst-tools button{width:32px;height:32px;padding:0;border:0;background:none;color:#B00A60;cursor:pointer;
  display:grid;place-items:center;line-height:0;transition:color .2s,transform .2s}
.lst-tools svg{display:block}
.lst-wish.is-on svg{fill:#E6157F;stroke:#E6157F}
.lst-play{color:#E6157F !important}

.lst-cta{display:flex;gap:6px}
.lst-quickadd,.lst-buynow{flex:1;height:34px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:500 12px/1 'Jost',sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.lst-quickadd{background:none;border:1px solid rgba(59,11,62,.2);color:#3B0B3E}
.lst-buynow{background:#3B0B3E;border:1px solid #3B0B3E;color:#FDF0F8}
/* Persists once the product has at least one unit in the cart - not a transient flash, stays until it is removed */
.lst-quickadd.is-in-cart{background:#E6157F;border-color:#E6157F;color:#fff}
.lst-ico{display:block;flex:none;width:15px;height:15px}
@media (hover:hover){
  /* .lst-card:hover's lift+shadow now lives with the gold-glaze block above, ported alongside it */
  .lst-tools button:hover{transform:scale(1.12);color:#E6157F}
  .lst-quickadd:hover{background:#3B0B3E;border-color:#3B0B3E;color:#FDF0F8}
  .lst-quickadd.is-in-cart:hover{background:#B00A60;border-color:#B00A60;color:#fff}
  .lst-buynow:hover{background:#E6157F;border-color:#E6157F}
  .lst-sortopt:hover{background:rgba(230,21,127,.06) !important}
}
.lst-sortopt.is-on{background:rgba(230,21,127,.08) !important}
@media (max-width:1024px){.lst-batch{column-count:3}}
@media (max-width:640px){
  .lst-batch{column-count:2;column-gap:8px}
  .lst-card{margin-bottom:8px}
  .lst-ribbon{width:70px;height:70px}
  .lst-ribbon span{top:13px;left:-22px;width:92px;padding:4px 0;font-size:10px}
  .lst-info{padding:10px 10px 12px;gap:8px}
  .lst-title{font-size:14px}
  .lst-row{flex-direction:column;align-items:flex-start;gap:4px}
  .lst-price{gap:8px;flex-wrap:nowrap}
  .lst-price b{font-size:16px}
  .lst-price em{display:none}
  .lst-tools{align-self:center;justify-content:center;margin-top:-2px}
  .lst-tools button{width:30px;height:30px}
  .lst-tools svg{width:18px;height:18px}
  .lst-play svg{width:21px;height:21px}
  /* icon-only action buttons */
  .lst-cta{gap:6px}
  .lst-quickadd,.lst-buynow{height:34px;padding:0}
  .lst-txt{display:none}
  .lst-ico{width:17px;height:17px}
}

/* filter drawer */
.lst-fsec .lst-fbody{display:none}
.lst-fsec.is-open .lst-fbody{display:block}
.lst-fsec.is-open .lst-chev{transform:rotate(180deg)}
.lst-chip{background:rgba(253,240,248,.06);color:#FDF0F8;border:1px solid rgba(253,240,248,.22)}
.lst-chip.is-on{background:#E6157F;border-color:#E6157F}
.lst-swatch{border:2px solid rgba(253,240,248,.3)}
.lst-swatch.is-on{border-color:#E6157F}

/* premium custom checkbox row (Occasion / Colour / Collection / Size / etc.) */
.lst-checkrow{transition:background .15s;min-width:0}
.lst-checkrow > span:last-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lst-checkrow:hover{background:rgba(253,240,248,.06)}
.lst-checkbox{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(253,240,248,.35);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.lst-checkbox svg{opacity:0;transition:opacity .1s}
.lst-checkrow:hover .lst-checkbox{border-color:rgba(253,240,248,.6)}
.lst-checkrow.is-on .lst-checkbox{background:#E6157F;border-color:#E6157F}
.lst-checkrow.is-on .lst-checkbox svg{opacity:1}
.lst-checkdot{flex:none;width:15px;height:15px;border-radius:50%;border:1px solid rgba(253,240,248,.3);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}

/* list-style facets (Occasion / Colour / Collection / Size / etc.): first 5 rows visible, own scroll after that -
   own scrollbar means the drawer itself never has to grow past a handful of open sections at once */
.lst-fopts-scroll{max-height:152px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(253,240,248,.35) transparent}
.lst-fhide{display:none !important}
.lst-fopts,.lst-fbody,.lst-drawer{overflow-x:hidden}
.lst-fopts-scroll::-webkit-scrollbar{width:5px}
.lst-fopts-scroll::-webkit-scrollbar-track{background:transparent}
.lst-fopts-scroll::-webkit-scrollbar-thumb{background:rgba(253,240,248,.3);border-radius:999px}
.lst-fopts-scroll::-webkit-scrollbar-thumb:hover{background:rgba(253,240,248,.5)}

/* facet search (Occasion / Colour / Collection): magnifier reveals a live-filter input, premium feel */
.lst-fsearch-btn{border-radius:999px;transition:background .15s,color .15s}
.lst-fsearch-btn:hover,.lst-fsearch-btn:focus-visible{background:rgba(253,240,248,.1);color:#FDF0F8}
.lst-fsearch-input{transition:border-color .15s,background .15s}
.lst-fsearch-input:focus{outline:none;border-color:#E6157F !important;background:rgba(253,240,248,.1) !important}
.lst-fsearch-input::placeholder{color:rgba(253,240,248,.4)}

/* motion */
.lst-overlay:not([hidden]){animation:okFadeIn .3s ease}
.lst-drawer:not([hidden]){animation:okSlideLeft .38s cubic-bezier(.22,.9,.32,1)}
.lst-drawer.no-anim{animation:none !important}
.lst-sortpanel,.lst-qvpanel{animation:okPop .32s cubic-bezier(.22,.9,.32,1)}
@keyframes okFadeIn{from{opacity:0}to{opacity:1}}
@keyframes okSlideLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes okPop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media (prefers-reduced-motion:reduce){.lst-overlay,.lst-drawer,.lst-sortpanel,.lst-qvpanel{animation:none !important}}

/* sticky bar: background bleeds into the gutters so cards don't show beside it while stuck */
.lst-bar{box-shadow:0 0 0 100vmax #FDF0F8;clip-path:inset(0 -100vmax)}
@media (max-width:640px){
  .lst-bar{gap:10px !important;flex-wrap:nowrap !important}
  .lst-results{font-size:13px !important;white-space:nowrap}
  .lst-sortbtn .lst-sortprefix{display:none}
}

/* The header wrap (z-index:5) holds the nav + cart drawers, so the sticky bar must stay below it
   or it paints over an open drawer/scrim. */
.lst-bar{z-index:4 !important}

/* Compact filter bar (Filters / Sort match the compact card buttons) */
.lst-bar{padding-top:8px !important;padding-bottom:8px !important;gap:10px !important}
.lst-filterbtn,.lst-sortbtn{height:30px;padding:0 13px !important;gap:5px !important;font-size:11.5px !important;letter-spacing:.07em !important}
.lst-filterbtn svg{width:12px;height:12px}
.lst-sortbtn svg{width:9px;height:9px}
.lst-activecount{min-width:16px !important;height:16px !important;font-size:10px !important}
.lst-results{font-size:12.5px !important}

/* ---- Compact buttons everywhere on the listing page (filter panel, sort, quick view, load more) ---- */
.lst-chip{padding:7px 12px !important;font-size:12px !important}
.lst-metal{padding:6px 12px 6px 6px !important;gap:6px !important}
.lst-metal > span:first-child{width:14px !important;height:14px !important}
.lst-metal > span:last-child{font-size:12px !important}
.lst-swatch{width:26px !important;height:26px !important}
.lst-fhead > div{font-size:13px !important}
.lst-clear,.lst-show{height:36px;padding:0 16px !important;font-size:12px !important;letter-spacing:.08em !important;display:flex !important;align-items:center;justify-content:center}
.lst-drawer > div:last-child{padding:14px 22px !important;gap:10px !important}
.lst-sortopt{padding:10px 14px !important;font-size:14px !important}
.lst-chip-x{padding:6px 8px 6px 12px;font-size:12px}
.lst-clearall{font-size:12px}
.lst-qvpanel button[style*="padding:15px"]{height:36px;padding:0 14px !important;font-size:12px !important;letter-spacing:.08em !important;border-radius:999px !important}
.lst-herotoggle{padding-top:12px !important;padding-bottom:12px !important}

/* price slider: two overlapping range inputs, only their thumbs are clickable so the top layer never blocks
   the one underneath; a pink fill bar (positioned by JS) shows the selected span between them */
.lst-prange{position:absolute;left:0;top:0;width:100%;margin:0;height:16px;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.lst-prange::-webkit-slider-runnable-track{-webkit-appearance:none;background:none;height:16px}
.lst-prange::-moz-range-track{background:none;height:16px;border:none}
.lst-prange::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#FDF0F8;border:2px solid #E6157F;margin-top:2px;cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.lst-prange::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#FDF0F8;border:2px solid #E6157F;cursor:grab;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.lst-prange-min{z-index:3}
.lst-prange-max{z-index:4}
.lst-pfield{display:flex;align-items:center;gap:4px;flex:1;min-width:0;padding:0 10px;height:34px;border-radius:9px;border:1px solid rgba(253,240,248,.22);background:rgba(253,240,248,.06);transition:border-color .15s}
.lst-pfield:focus-within{border-color:#E6157F}
.lst-pfield > span{font:400 13px/1 'Jost',sans-serif;color:rgba(253,240,248,.45);flex:none}
.lst-pfield > input{width:100%;min-width:0;border:none;background:none;outline:none;color:#FDF0F8;font:400 13px/1 'Jost',sans-serif;-moz-appearance:textfield}
.lst-pfield > input::-webkit-outer-spin-button,.lst-pfield > input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lst-pfield > input::placeholder{color:rgba(253,240,248,.35)}

/* card links to the product page */
.lst-imglink{display:block;width:100%;height:100%;color:inherit}
.lst-title a{color:inherit;text-decoration:none}
.lst-title a:hover{color:#B00A60}
.lst-imglink:focus-visible{outline-offset:-3px !important}
.lst-play{cursor:pointer !important}