/* ==========================================================
   COSTAN V6.1 — FULL RESPONSIVE LAYER
   Design is preserved. This file only fixes layout behavior
   for desktop, laptop, tablet, mobile and very small phones.
   Load this file LAST.
   ========================================================== */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
*,*::before,*::after{box-sizing:border-box}
img,video,svg,canvas,iframe{
  max-width:100%;
}
img{height:auto}
button,input,select,textarea{max-width:100%}

/* ---------- common containers ---------- */
.wrap,
.section,
.section-wrap,
.product-shell,
.page-hero,
.common-header,
.common-footer{
  width:100%;
  min-width:0;
}
.wrap,
.section-wrap,
.product-shell{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* ---------- shared header ---------- */
.common-header{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
}
.common-nav,
.common-tools{
  min-width:0!important;
}
.common-nav a,
.common-tools a{
  white-space:nowrap!important;
}
.common-logo img{
  width:min(225px,18vw)!important;
  height:auto!important;
  object-fit:contain!important;
}

/* ---------- homepage: hero ---------- */
.hero-premium,
.domani-hero{
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
.hero-premium-video,
.domani-hero video{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}
.domani-center,
.domani-bottom{
  max-width:100%!important;
}

/* ---------- homepage: grids ---------- */
.product-grid,
.category-grid,
.motion-grid,
.review-grid,
.instagram-grid,
.ig-grid{
  min-width:0!important;
}
.product,
.cat,
.motion-card,
.review,
.instagram-card,
.ig-card{
  min-width:0!important;
}
.product-media,
.cat-media,
.motion-media,
.brand-media{
  overflow:hidden!important;
}
.product-media img,
.product-media video{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Category/motion videos should fill their existing cards without stretching */
.cat video,
.category-grid video,
.motion-media video,
.brand-media video{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* ---------- shop ---------- */
.shop-toolbar{
  min-width:0!important;
}
.shop-grid{
  min-width:0!important;
}
.shop-card{
  min-width:0!important;
}
.shop-card .prod-stage{
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
.shop-card .prod-stage img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
.shop-info,
.shop-row,
.shop-actions{
  min-width:0!important;
}
.shop-info h3,
.shop-meta{
  overflow-wrap:anywhere!important;
}

/* ---------- product details ---------- */
.product-hero-grid,
.product-layout{
  min-width:0!important;
}
.product-media-column,
.product-info-panel,
.detail{
  min-width:0!important;
}
.product-stage,
.product-main.prod-stage{
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
.product-stage img,
.product-main.prod-stage img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
.product-thumbs,
.gallery-thumbs{
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-snap-type:x proximity!important;
}
.product-thumb,
.gallery-thumb{
  scroll-snap-align:start!important;
  flex-shrink:0!important;
}
.product-video,
.product-video video{
  width:100%!important;
}
.product-video video{
  height:auto!important;
  object-fit:contain!important;
}
.detail-showcase-grid,
.lifestyle-grid,
.reviews-grid,
.close-grid,
.community-grid,
.review-cards{
  min-width:0!important;
}
.detail-card,
.lifestyle-card,
.review-card-premium,
.close-card,
.community-card,
.review-card{
  min-width:0!important;
}

/* ---------- cart ---------- */
.cart-list,
.cart-line,
.cart-summary{
  min-width:0!important;
}
.cart-thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

/* ---------- checkout ---------- */
.checkout-grid,
.checkout-box,
.form-grid{
  min-width:0!important;
}
.form-grid input,
.form-grid textarea,
.form-grid select{
  width:100%!important;
}

/* ---------- CMS/content pages ---------- */
.page-copy,
.thank,
.faq-list,
.faq-list-premium{
  max-width:100%!important;
}

/* ---------- footer ---------- */
.common-footer-grid{
  min-width:0!important;
}
.common-footer-brand,
.common-footer-col{
  min-width:0!important;
}
.common-footer-brand p{
  max-width:100%!important;
}

/* ==========================================================
   LARGE DESKTOP / LAPTOP
   ========================================================== */
@media (min-width:1281px){
  .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.ecom .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* ==========================================================
   SMALL DESKTOP / LARGE TABLET LANDSCAPE
   ========================================================== */
@media (max-width:1280px){
  .common-header{
    padding-left:24px!important;
    padding-right:24px!important;
    gap:18px!important;
  }
  .common-nav,
  .common-tools{
    gap:16px!important;
  }
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.ecom .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .detail-showcase-grid,
  .lifestyle-grid,
  .community-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* ==========================================================
   TABLET LANDSCAPE / SMALL LAPTOP
   ========================================================== */
@media (max-width:1024px){
  .common-header{
    grid-template-columns:auto 1fr auto!important;
    padding-left:18px!important;
    padding-right:18px!important;
    gap:14px!important;
  }
  .common-menu-btn{display:block!important}
  .common-nav{display:none!important}
  .common-logo{
    grid-column:2!important;
    justify-self:center!important;
  }
  .common-tools{
    grid-column:3!important;
    justify-content:flex-end!important;
    gap:12px!important;
  }
  .common-mobile-nav.open{display:block!important}

  .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .motion-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .brand{grid-template-columns:1fr!important}

  body.ecom .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .product-hero-grid,
  body.ecom .product-layout{
    grid-template-columns:1fr!important;
    gap:34px!important;
  }
  .product-info-panel,
  body.ecom .detail{
    position:relative!important;
    top:auto!important;
  }

  .detail-showcase-grid,
  .lifestyle-grid,
  .community-grid,
  .reviews-grid,
  body.ecom .close-grid,
  body.ecom .community-grid,
  body.ecom .review-cards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.ecom .checkout-grid{grid-template-columns:1fr!important}
  .common-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ==========================================================
   TABLET PORTRAIT
   ========================================================== */
@media (max-width:820px){
  .section,
  .wrap,
  .section-wrap,
  .product-shell{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  .hero-premium,
  .domani-hero{
    min-height:72svh!important;
  }
  .domani-center{
    width:100%!important;
    max-width:760px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .domani-bottom{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  .motion-grid{grid-template-columns:1fr!important}
  .review-grid{grid-template-columns:1fr!important}

  .shop-toolbar{
    grid-template-columns:1fr 180px 110px!important;
  }

  .cart-line{
    grid-template-columns:90px minmax(0,1fr) auto!important;
    gap:14px!important;
    align-items:start!important;
  }
  .cart-line .qty-cell{
    grid-column:2!important;
  }
  .cart-summary{
    width:100%!important;
    max-width:none!important;
    position:relative!important;
    bottom:auto!important;
  }

  .form-grid{grid-template-columns:1fr 1fr!important}
}

/* ==========================================================
   MOBILE
   ========================================================== */
@media (max-width:700px){
  body{
    padding-left:0!important;
    padding-right:0!important;
  }

  .common-topbar{
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .common-header{
    padding-left:14px!important;
    padding-right:14px!important;
    gap:10px!important;
  }
  .common-tools a:first-child,
  .common-tools a:nth-child(2){
    display:none!important;
  }
  .common-logo img{
    width:145px!important;
    max-width:145px!important;
  }

  .section,
  .wrap,
  .section-wrap,
  .product-shell{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .hero-premium,
  .domani-hero{
    min-height:70svh!important;
  }
  .hero-premium-video,
  .domani-hero video{
    object-fit:cover!important;
    object-position:center!important;
  }
  .domani-center{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .domani-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  .category-grid,
  .product-grid{
    grid-template-columns:1fr!important;
  }

  body.ecom .shop-grid{
    grid-template-columns:1fr!important;
  }
  .shop-toolbar{
    grid-template-columns:1fr!important;
  }
  body.ecom .shop-actions.three{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .product-stage,
  .product-main.prod-stage{
    aspect-ratio:1/1!important;
  }
  .product-actions-desktop,
  body.ecom .detail-actions{
    grid-template-columns:1fr 1fr!important;
  }
  .product-trust-row{
    grid-template-columns:1fr!important;
  }
  .detail-showcase-grid,
  .lifestyle-grid,
  .community-grid,
  .reviews-grid,
  body.ecom .close-grid,
  body.ecom .community-grid,
  body.ecom .review-cards{
    grid-template-columns:1fr!important;
  }
  .reviews-header{
    display:block!important;
  }

  .cart-line{
    grid-template-columns:76px minmax(0,1fr)!important;
  }
  .cart-line .qty-cell,
  .cart-line > div:last-child{
    grid-column:2!important;
  }

  .form-grid{
    grid-template-columns:1fr!important;
  }
  .form-grid .full{
    grid-column:auto!important;
  }
  .checkout-box{
    padding:18px!important;
  }

  .common-footer{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .common-footer-grid{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .common-footer-bottom{
    display:block!important;
    line-height:2!important;
  }

  .mobile-purchase-bar,
  body.ecom .mobile-buybar{
    padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
  }
}

/* ==========================================================
   SMALL MOBILE
   ========================================================== */
@media (max-width:430px){
  .domani-actions{
    grid-template-columns:1fr!important;
  }
  body.ecom .shop-actions.three{
    grid-template-columns:1fr!important;
  }
  .product-actions-desktop,
  body.ecom .detail-actions{
    grid-template-columns:1fr!important;
  }
  .product-sizes span,
  body.ecom .size-list span{
    width:44px!important;
    height:44px!important;
  }
}

/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */
@media (max-width:360px){
  .common-logo img{
    width:128px!important;
    max-width:128px!important;
  }
  .common-tools a{
    font-size:9px!important;
  }
  .common-menu-btn{
    font-size:10px!important;
  }
}