/* responsive.css — Mobile/tablet responsiveness for the CupCorn static Wix mirror.
   The site is a FIXED 980px "Thunderbolt mesh" canvas (nested CSS-grid/flex
   containers with data-mesh-id) that does not reflow. Every rule here is gated
   behind a max-width media query so DESKTOP (>1000px) stays 100% untouched.
   Technique: "un-mesh" the fixed grid into a single stacking column on small
   screens. */

/* ================= MOBILE + TABLET (<=1000px) =================
   Desktop is defined as >1000px and is left 100% untouched (this media query
   never matches there). Everything from phones up through tablets un-meshes the
   fixed 980px canvas into a single stacking column so nothing is clipped. */
@media (max-width:1000px){
  html,body{
    overflow-x:hidden!important;
    max-width:100vw!important;
  }

  /* Structural containers span the viewport instead of a fixed 980px. */
  #SITE_CONTAINER,#masterPage,#PAGES_CONTAINER,#SITE_PAGES,#site-root,
  #SITE_HEADER,#SITE_FOOTER,#SITE_HEADER-placeholder,
  [id^="Containers"],[id^="pinnedBottomRight"],[data-mesh-id]{
    width:100%!important;
    min-width:0!important;
    max-width:100vw!important;
  }

  /* Wix repeater/full-bleed "_wrapper" elements carry large negative left/right
     margins (e.g. -190px) that expand their box well past the viewport. */
  [id$="_wrapper"]{
    margin-left:0!important;
    margin-right:0!important;
    /* the matching +190px side padding (content-box) must go too, else the box
       balloons back to full-bleed width and overflows. */
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  /* Multi-column repeaters (fluid-columns / wixui-repeater) lay their items in a
     horizontal row that is far wider than the viewport. Stack them vertically. */
  fluid-columns-repeater,
  [class*="wixui-repeater"],
  [data-hook="columns"],
  [class*="fluidColumns"]{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    gap:12px!important;
  }
  [id*="__item"],
  fluid-columns-repeater > *,
  [class*="wixui-repeater"] > *{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* The page-content wrapper (.wixui-page) is position:absolute at a fixed 980px
     with a big negative margin-left to center it on the old canvas. Reset it. */
  [class*="wixui-page"]{
    position:relative!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    left:auto!important;right:auto!important;
    margin-left:0!important;margin-right:0!important;
  }

  /* Safety net: nothing inside the page/header/footer may exceed its parent's
     content box. Caps any remaining fixed-width (980px, or padded inner menus
     wider than their box) wrapper we didn't name explicitly. Using 100% (not
     100vw) also respects ancestor padding so left-offset lists can't spill. */
  #PAGES_CONTAINER *,#SITE_HEADER *,#SITE_FOOTER *{
    max-width:100%!important;
  }

  /* Collapse every mesh grid to a single stacking column. */
  [data-mesh-id]{
    grid-template-columns:100%!important;
    grid-template-rows:auto!important;
    display:block!important;
    height:auto!important;
    min-height:0!important;
  }
  [data-mesh-id]>*{
    grid-area:auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    position:relative!important;
    left:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    /* Wix uses negative horizontal margins for full-bleed components; these
       push content off-screen once the canvas is only 100vw wide. */
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Sections/strips: let content dictate height instead of clipping.
     Sections and their background-photo layers are NOT data-mesh-id elements,
     so they keep the fixed 980px width unless we override them here. */
  section,[class*="wixui-section"],[id^="comp-"],
  [id^="pageBackground"],
  [id^="bgLayers"],[id^="bgMedia"],[id^="bgLayers"] > *,
  #PAGES_CONTAINER wow-image,#SITE_HEADER wow-image,#SITE_FOOTER wow-image{
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    left:auto!important;right:auto!important;
  }
  section,[class*="wixui-section"]{
    height:auto!important;
    min-height:0!important;
  }
  /* Absolute background layers keep covering their section (they inset:0), just
     no longer at a fixed 980px. */
  [id^="bgLayers"] > *{height:100%!important;}

  /* Media never overflows. Regular content images scale to their natural aspect. */
  img,wow-image,[data-hook="image-wrapper"],video,iframe,picture,canvas,svg{
    max-width:100%!important;
  }
  img,[data-hook="image-wrapper"] img{
    height:auto!important;
  }

  /* Hero background photos must COVER the (now content-sized) section, so they
     fill height rather than shrink to natural aspect. Scoped to bg layers only
     so ordinary content images are unaffected. */
  [id^="bgLayers"] wow-image,[id^="bgMedia"] wow-image{
    height:100%!important;
    min-height:100%!important;
  }
  [id^="bgLayers"] img,[id^="bgMedia"] img,
  [id^="bgLayers"] wow-image img,[id^="bgMedia"] wow-image img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }
  section[id^="comp-"]{
    background-size:cover!important;
    background-position:center!important;
  }

  /* ---- Header: keep logo + nav + language + currency + cart usable ---- */
  #SITE_HEADER,#SITE_HEADER wix-header,#SITE_HEADER > *{
    height:auto!important;
    min-height:0!important;
  }
  /* The header's own mesh cells stack (inherited from the global un-mesh); the
     inner nav menu is laid out as a centered wrapping row. */
  #SITE_HEADER nav,
  #SITE_HEADER [data-testid="menuContainer"],
  #SITE_HEADER [role="menubar"],
  #SITE_HEADER nav ul,
  #SITE_HEADER [role="menubar"] > *{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px 14px!important;
    width:100%!important;
    max-width:100vw!important;
  }
  #SITE_HEADER nav li,
  #SITE_HEADER [role="menuitem"]{
    position:relative!important;
    left:auto!important;top:auto!important;right:auto!important;
    width:auto!important;
    display:inline-flex!important;
    float:none!important;
  }
  /* Header links (nav items AND the language/currency dropdown entries) must
     flow inline, never sit at an absolute off-canvas offset. */
  #SITE_HEADER a,
  #SITE_HEADER [role="menuitem"],
  #SITE_HEADER [class*="menu"] li{
    position:relative!important;
    left:auto!important;top:auto!important;right:auto!important;
    font-size:14px!important;
    white-space:nowrap!important;
  }

  /* ---- Wix menu components (site menu / footer menu / currency+language
     dropdowns) use inner containers with a fixed 32px indent + fixed-width
     lists that spill ~18-32px past the viewport once un-meshed. Relax them. */
  [class*="sGbfIQF"]{
    padding-left:0!important;
    padding-right:0!important;
    min-width:0!important;
  }
  [class*="sSChNLR"],[class*="sGfVBG4"],
  [class*="shKyaQK"],[class*="sswsyHn"]{
    width:auto!important;
    min-width:0!important;
    left:auto!important;right:auto!important;
  }

  /* ---- Absolutely-positioned overlay text/cards inside mesh cells ---- */
  [data-mesh-id] [class*="txtNew"],
  [data-mesh-id] [data-testid="richTextElement"]{
    position:relative!important;
    left:auto!important;top:auto!important;right:auto!important;
    width:100%!important;max-width:100%!important;
  }

  /* Centered white text cards over hero photos: shrink to ~90vw. */
  [class*="comp-"] [class*="bgLayers"]{width:100%!important;}

  /* Long words / headings must not blow out the viewport. */
  h1,h2,h3,[class*="font_"],[data-testid="richTextElement"]{
    overflow-wrap:break-word!important;
    word-break:break-word!important;
    hyphens:auto!important;
    max-width:100%!important;
  }

  /* ---- Product page (Wix Stores widget) ----
     The layout is a flex ROW that splits the gallery column and the info column
     into two ~half-width cells (187px each on a 375 viewport). Stack them into
     one full-width column so the image, title, price, size dropdown, colour
     swatches, quantity and buttons are all usable. */
  [data-hook="product-page"],
  [class*="product-page"]{width:100%!important;max-width:100%!important;}

  /* Force the gallery|info flex row to a single stacking column. */
  [data-hook="product-page"] .tfRE5M,
  [data-hook="product-page"] [class*="layout__classic"] > *,
  [data-hook="product-page"] > article > div{
    flex-direction:column!important;
    flex-wrap:wrap!important;
    align-items:stretch!important;
  }
  /* Each half becomes full width. */
  [data-hook="product-page"] .cell,
  [data-hook="product-page"] [class*=" cell"],
  [data-hook="product-page"] [class$="cell"]{
    width:100%!important;
    max-width:100%!important;
    flex:0 0 auto!important;
    min-width:0!important;
  }
  [data-hook="mobile-title"],[data-hook="product-title"]{width:100%!important;}

  /* The main-image swiper lays every slide in an endless horizontal row; clip it
     so only the active slide shows (the carousel JS was stripped) and it never
     spills. */
  [data-hook="product-page"] .swiper,
  [data-hook="main-media-swiper-root"],
  [data-hook="main-media"],
  [data-hook="main-media-container"]{
    overflow:hidden!important;
    width:100%!important;
    max-width:100%!important;
  }
  [data-hook="product-gallery-composite"],
  [data-hook="product-gallery-root"]{
    width:100%!important;
    max-width:100%!important;
  }
}