@import './_variables.css';
@import './home.css';
@import './personal-acc.css';
@import './cards.css';
@import './contacts.css';

html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100%;
}
html {
  overflow-x: clip !important;   /* modern — doesn't create scroll container (better than hidden) */
}
body {
  position: relative;
  overflow-x: clip !important;
}
/* Top-level wrappers — any child that tries to exceed viewport gets clipped */
body > .wrap,
body > main,
.wrap {
  max-width: 100% !important;
  overflow-x: clip !important;
  min-width: 0;
}
/* Header module wrapper too — .onetap-header renders at top, if any inner row overflows
   (long phone list, many top-bar elements), this cap prevents it from trigger doc scroll. */
.onetap-header-wrapper,
[id^="onetap-header-"] {
  max-width: 100% !important;
  overflow-x: clip;
}
.onetap-header-wrapper .header-top-row,
.onetap-header-wrapper .header-main-row,
.onetap-header-wrapper .header-bottom-row,
[id^="onetap-header-"] .header-top-row,
[id^="onetap-header-"] .header-main-row,
[id^="onetap-header-"] .header-bottom-row{
  max-width: 100%;
  overflow-x: clip;
}
/* Full-viewport decoration — 100vw includes scrollbar width, so 100vw > clientWidth and
   forces a horizontal scrollbar. Cap to parent width (100%) instead. */
.list-group::after {
  width: 100% !important;
  left: 0 !important;
  transform: none !important;
}
/* ═════════════════════════════════════════════════════════════════
   Popup cart (slide-in drawer) — constrain overlay itself to viewport
   width (was `width:100vw` + implicit horizontal scroll) but DO NOT
   touch .popup-cart-container — it has max-width:700px + margin:auto
   for the drawer layout with recommendation sidebar. The display:none
   default is set directly in stylesheet.css on .popup-cart.
   ═════════════════════════════════════════════════════════════════ */
.popup-cart {
  left: 0 !important;
  right: 0 !important;
  overflow-x: hidden !important;
}
/* Product page container: clamp to parent so children can't push it beyond viewport */
#product-product {
  max-width: 100%;
  box-sizing: border-box;
}
#product-product .prod-page-layout,
#product-product .prod-content,
#product-product .prod-v2-layout,
#product-product .prod-v2-row,
#product-product .prod-columns {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Product page — cap main image to gallery column width at all breakpoints */
#product-product .prod-main-slide img,
#product-product .prod-thumb img,
#product-product .prod-thumb {
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   Product-card inside any slider/column on the product page must
   never exceed its parent's width. --otc-card-w (global card-width
   admin setting) can be larger than the column, which is what pushes
   the related-products card past the viewport on laptop.
   ══════════════════════════════════════════════════════════════ */
#product-product .prod-col-right .product-card-wrapper,
#product-product .prod-col-right .product-card-rating,
#product-product .prod-content-right .product-card-wrapper,
#product-product .prod-content-right .product-card-rating,
#product-product .prod-v2-cell--related .product-card-wrapper,
#product-product .prod-v2-cell--related .product-card-rating,
#product-product .prod-side-swiper .product-card-wrapper,
#product-product .prod-side-swiper .product-card-rating,
#product-product .prod-related-swiper .product-card-wrapper,
#product-product .prod-related-swiper .product-card-rating,
#product-product .prod-yml-swiper .product-card-wrapper,
#product-product .prod-yml-swiper .product-card-rating {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* Right column on laptop — allow shrinking when the configured 400px
   doesn't leave enough room for gallery/info in the left column.
   NOTE: target .prod-columns directly (not via .prod-page-style--v1)
   because product.twig has a default-value mismatch — the CSS class may
   be prod-page-style--v2 while the rendered layout is still V1 columns. */
@media (min-width:992px) and (max-width:1199px){
  #product-product .prod-columns{flex-wrap:wrap !important;}
  #product-product .prod-col-right{
    flex:0 1 380px !important;
    max-width:380px !important;
    min-width:0 !important;
  }
  #product-product .prod-col-left{
    flex:1 1 520px !important;
    min-width:0 !important;
    max-width:100% !important;
  }
}

/* Below 1100px laptop — 2-col still too cramped for jewelry gallery + 400-sidebar,
   stack to single column so nothing clips outside viewport. */
@media (min-width:992px) and (max-width:1099px){
  #product-product .prod-columns{flex-direction:column !important;gap:24px !important;}
  #product-product .prod-col-left,
  #product-product .prod-col-right{
    flex:1 1 auto !important;
    max-width:100% !important;
    width:100% !important;
  }
}

/* V2 layout uses .prod-v2-row — also allow wrap and shrink at cramped laptop widths */
@media (min-width:992px) and (max-width:1199px){
  #product-product .prod-v2-row{flex-wrap:wrap !important;}
  #product-product .prod-v2-cell--related{
    flex:0 1 380px !important;
    max-width:380px !important;
    min-width:0 !important;
  }
}
@media (min-width:992px) and (max-width:1099px){
  #product-product .prod-v2-row{flex-direction:column !important;gap:24px !important;}
  #product-product .prod-v2-cell,
  #product-product .prod-v2-cell--gallery,
  #product-product .prod-v2-cell--info,
  #product-product .prod-v2-cell--sections,
  #product-product .prod-v2-cell--related{
    flex:1 1 auto !important;
    max-width:100% !important;
    width:100% !important;
    min-width:0 !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   Card max-width fix — .prod-gallery/.prod-info-card/.prod-side-card
   have hard-coded `max-width:695px` in product.css (designed for 2-col
   desktop). When columns stack on cramped screens, these cards stay at
   695 instead of filling the row, leaving empty right side (File
   guidelines not full-width bug). Force them to fill the stacked row.
   ═════════════════════════════════════════════════════════════════ */
@media (max-width:1199px){
  #product-product .prod-gallery,
  #product-product .prod-info-card,
  #product-product .prod-side-card,
  #product-product .prod-file-guidelines-card{
    max-width:100% !important;
    width:100% !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   Belt-and-suspenders: at every product-page breakpoint, every direct
   child of the layout grid must be constrained to its parent. This
   catches anything with a hard-coded px width that exceeds its column
   (admin-configurable card width, banner break-outs, etc.)
   ═════════════════════════════════════════════════════════════════ */
#product-product .prod-col-left > *,
#product-product .prod-col-right > *,
#product-product .prod-v2-cell > *,
#product-product .prod-v2-cell--gallery > *,
#product-product .prod-v2-cell--info > *,
#product-product .prod-v2-cell--sections > *,
#product-product .prod-v2-cell--related > *,
#product-product .prod-info-wrap > *,
#product-product .prod-sections-wrap > *{
  max-width:100% !important;
  min-width:0;
  box-sizing:border-box;
}

h1, h2, h3, h4, h5, ul {
  motion: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #000;
}
a:hover {
  color: var(--color-main);
}