/* OyeKudiye — responsive adaptation of the fixed 1440px "dark bento" design.
   Desktop (>=1200px) renders the design pixel-for-pixel; below that we reflow.
   Overrides target the design's inline-style patterns, so they must use !important. */

/* ---- Full-bleed elements (announcement marquee + hero) escape the 1440 frame ---- */
/* clip kills any stray horizontal overflow (e.g. the fixed drawer sized to 100vw,
   which is wider than the content area on mobile) without creating a scroll container. */
html{overflow-x:hidden;overflow-x:clip}
body{overflow-x:hidden;overflow-x:clip}
.oye-root{overflow:visible !important}
/* Full-bleed only on desktop, where the canvas is a fixed 1440 frame. Below 1200 the
   root already fills the viewport, so we must NOT use the 100vw hack — 100vw counts the
   scrollbar and was wider than the content area, causing a horizontal scroll on mobile. */
@media (min-width:1200px){
  .oye-announce,.oye-hero,.oye-band{
    width:100vw !important;max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;
  }
  /* keep the light bands' inner content readable when the bg goes edge-to-edge */
  .oye-band > *{max-width:1440px;margin-left:auto;margin-right:auto}
}
@media (max-width:1199px){
  .oye-announce,.oye-hero{width:auto !important;margin-left:0 !important;margin-right:0 !important}
}
/* Hero: 30% shorter (660 -> 462) */
.oye-hero{height:462px !important}
/* Symmetric breathing room around the menu pill: match the gap above it below it */
.oye-headwrap{padding-bottom:26px !important}

/* ---- Make the fixed canvas fluid below the design width ---- */
@media (max-width:1199px){
  body{display:block !important}
  body>.oye-canvas{width:100% !important}
  .oye-root{width:100% !important;min-width:0 !important}
}

/* ---- Tablet ---- */
@media (max-width:1024px){
  /* section horizontal padding 56px -> 32px */
  [style*="padding:70px 56px"]{padding:52px 32px !important}
  [style*="padding:0 56px"]{padding-left:32px !important;padding-right:32px !important}
  [style*="padding:70px 0"]{padding-top:52px !important;padding-bottom:52px !important}
  [style*="margin:0 56px 60px"]{margin:0 32px 48px !important}
  .oye-collections{margin:32px 32px 48px !important}
  .oye-headwrap{padding:20px 24px 20px !important}
  .oye-atrack{padding-left:32px !important}
  /* section-header splits (heading + "ALL …" link) stack */
  [style*="align-items:flex-end;justify-content:space-between"]{
    flex-direction:column !important;align-items:flex-start !important;gap:16px !important}
  /* grids -> 2/3 up columns */
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  [style*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:repeat(3,1fr) !important}
  [style*="grid-template-columns:1.1fr repeat(3,1fr) 1.1fr"]{grid-template-columns:repeat(2,1fr) !important}
  [style*="grid-template-columns:.62fr 1fr 1fr 1fr"]{grid-template-columns:repeat(2,1fr) !important}
  [style*="grid-template-columns:1.25fr 1fr 1fr"]{grid-template-columns:repeat(2,1fr) !important}
  [style*="grid-template-columns:.8fr 1.2fr"]{grid-template-columns:1fr !important}
  .oye-hero{height:364px !important}
}

/* ---- Mobile ---- */
@media (max-width:640px){
  [style*="padding:70px 56px"]{padding:36px 16px !important}
  [style*="padding:0 56px"]{padding-left:16px !important;padding-right:16px !important}
  [style*="padding:70px 0"]{padding-top:40px !important;padding-bottom:40px !important}
  [style*="margin:0 56px 60px"]{margin:0 16px 36px !important}
  .oye-collections{margin:24px 16px 36px !important}
  .oye-headwrap{padding:14px 12px 14px !important}
  .oye-atrack{padding-left:16px !important;gap:28px !important}

  /* collapse every multi-column grid to 1–2 cols */
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  [style*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1.1fr repeat(3,1fr) 1.1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:.62fr 1fr 1fr 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1.25fr 1fr 1fr"]{grid-template-columns:1fr !important}

  /* hero shorter, headings scale down a touch */
  .oye-hero{height:252px !important}
  h1[style*="40px"]{font-size:30px !important;line-height:1.14 !important}

  /* ---- Mobile header: hamburger + OK avatar, search + cart(count badge) ---- */
  .oye-header{gap:10px !important;padding:8px 10px !important;
    width:100% !important;box-sizing:border-box !important}
  .oye-hamburger{display:inline-flex !important}
  .oye-logo-word,.oye-hdr-divider,.oye-hdr-nav{display:none !important}
  .oye-actions{gap:8px !important}
  .oye-wish,.oye-search-text{display:none !important}
  .oye-acct{width:40px !important;height:40px !important}   /* sign-in / account stays reachable on phones */
  .oye-search{padding:0 !important;width:40px !important;height:40px !important;
    border-radius:50% !important;justify-content:center !important;gap:0 !important}
  .oye-cart{padding:0 !important;width:40px !important;height:40px !important;
    border-radius:50% !important;justify-content:center !important;gap:0 !important;
    background:transparent !important;border:1px solid rgba(253,240,248,.16) !important;color:#FDF0F8 !important}
  .oye-cart-label{display:none !important}
  .oye-cart-badge{display:grid !important}

  /* let any fixed-width inner card breathe on very small screens */
  [style*="width:1100px"]{width:100% !important}

  /* ---- Collections above the hero on mobile, as a manekratna-style category row ---- */
  .oye-root{display:flex !important;flex-direction:column !important}
  .oye-root > *,.oye-root > main > *{order:5}   /* main is display:contents, so its sections are the flex items (pages without a hero rendered above the header) */
  .oye-announce{order:1 !important}
  .oye-headwrap{order:2 !important}
  .oye-collections{order:3 !important}
  .oye-hero-wrap{order:4 !important}

  /* strip the card chrome -> a clean compact row of small circles + label.
     Sized so ~3.5 circles show (next one half-visible) to signal horizontal scroll. */
  .oye-collections{background:transparent !important;border-radius:0 !important;box-shadow:none !important;
    margin:0 !important;padding:2px 0 2px !important;overflow:visible !important}
  #oye-rail-col{gap:10px !important;padding:0 0 0 16px !important;padding-top:0 !important}
  #oye-rail-col > *{width:78px !important;gap:2px !important}
  #oye-rail-col [style*="width:210px;height:210px"]{width:78px !important;height:78px !important}
  #oye-rail-col [style*="bottom:-13px"]{display:none !important}          /* piece-count badge */
  #oye-rail-col [style*="font:400 11px/1.6"]{display:none !important}     /* description */
  #oye-rail-col .oye-slot-cap{display:none !important}                    /* placeholder text inside circle */
  #oye-rail-col .oye-slot-empty svg{width:20px !important;height:20px !important}
  #oye-rail-col h3{font-size:11px !important;font-family:'Jost',sans-serif !important;font-weight:500 !important;
    letter-spacing:.02em !important;margin-top:0 !important;line-height:1.3 !important;color:#FDF0F8 !important}
  .oye-col-foot{display:none !important}                                  /* hide progress + arrows on mobile */
}

/* Carousel rails start at the same left edge as the section title (rail inline style is
   rewritten by JS, so the attribute-based padding rules above can't reach it). */
@media (max-width:1024px){.oye-carousel .oye-rail{padding-left:32px !important;padding-right:32px !important}}
@media (max-width:640px){.oye-carousel .oye-rail{padding-left:16px !important;padding-right:16px !important}}

/* ---- Footer: same gutters as the sections; link columns become accordions on mobile ---- */
@media (max-width:1024px){.oye-footer{padding-left:32px !important;padding-right:32px !important}}
@media (max-width:640px){
  .oye-footer{padding-left:16px !important;padding-right:16px !important;padding-top:36px !important}
  .oye-footer > div:first-child{gap:0 !important;padding-bottom:28px !important}
  .oye-footer > div:first-child > div:first-child{padding-bottom:24px}
  .oye-fcol{border-top:1px solid rgba(253,240,248,.16);gap:0 !important}
  .oye-fcol .oye-foot-label{display:flex !important;align-items:center;justify-content:space-between;
    padding:18px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .oye-fcol .oye-foot-label::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .25s ease}
  .oye-fcol.is-open .oye-foot-label::after{transform:rotate(-135deg);margin-top:4px}
  .oye-fcol:not(.is-open) > :not(.oye-foot-label){display:none !important}
  .oye-fcol.is-open > :not(.oye-foot-label):last-child{padding-bottom:20px}
  .oye-fcol.is-open > .oye-foot-link:nth-child(2),.oye-fcol.is-open > div:nth-child(2){margin-top:0}
}