/* TrendishShop v186 — responsive hardening layer
   Public storefront only. Loaded after style.css so these rules safely override older breakpoints. */

:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px)
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip
}
body{
  min-width:0!important;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased
}
body,main,.site-header,.footer,.container,.header-main,.header-actions,
.grid,.products-grid,.categories-grid,.features,.shop-layout,.product-detail,
.panel,.sidebar,.detail-box,.product-card,.category-card,.product-body,
.customer-service-card,.account-card-v114,.account-layout-v114{
  min-width:0
}
img,picture,video,canvas,svg,iframe{max-width:100%}
img{height:auto}
input,select,textarea,button{max-width:100%}
textarea{resize:vertical}
pre,code{max-width:100%;overflow-wrap:anywhere}
.long-text,.product-summary,.product-content-card,.customer-service-card-content,
.account-card-v114,.footer,.panel{overflow-wrap:anywhere}

/* Better focus + touch behavior across iOS, Android and desktop browsers. */
a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,.btn,a,input,select,textarea{touch-action:manipulation}
:focus-visible{outline:2px solid rgba(124,58,237,.45);outline-offset:2px}

/* Keep the centered layout polished on 2K/4K/ultrawide monitors. */
@media (min-width:1800px){
  .container{width:min(1600px,calc(100% - 128px))}
  .header-main{grid-template-columns:220px minmax(480px,1fr) auto}
  .hero{height:clamp(540px,31vw,690px)}
  .slide-content{max-width:680px}
  .products-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
  .categories-grid{gap:24px}
  .section{padding-block:66px}
}

/* Laptop / small desktop hardening. */
@media (max-width:1180px){
  .header-main{grid-template-columns:140px minmax(220px,1fr) auto}
  .header-actions{min-width:0}
  .header-standard-search{min-width:0}
  .search input{min-width:0}
  .footer-grid>*{min-width:0}
}

/* Tablets, iPad, Surface portrait and touch laptops. */
@media (max-width:900px){
  .container{width:min(calc(100% - 28px),840px)}
  .site-header{top:0}
  .header-main{width:100%;grid-template-columns:minmax(96px,1fr) auto auto}
  .header-standard-logo,.header-standard-actions,.mobile-nav-toggle{min-width:0}
  .header-actions{gap:8px}
  .profile-login-link,.profile-menu-trigger,.contact-menu-trigger,.cart-link-minimal{
    min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center
  }
  .main-nav .nav-container{
    padding-left:max(14px,var(--safe-left));
    padding-right:max(14px,var(--safe-right));
    overscroll-behavior:contain
  }
  .submenu{overscroll-behavior:contain}
  .hero{min-height:300px}
  .slide-content{max-width:min(560px,calc(100% - 36px))}
  .shop-layout,.product-detail{min-width:0}
  .product-gallery,.detail-box{width:100%;min-width:0}
  .product-thumbnails{overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .product-thumb{flex:0 0 auto}
  .footer-grid{align-items:start}
  .auth-modal-card,.cart-added-card-v176{max-width:calc(100vw - 24px)}
}

/* Phones: prevent Safari zoom, clipped controls and accidental horizontal scroll. */
@media (max-width:767px){
  html,body{width:100%}
  .container{width:calc(100% - 24px)}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
  .btn,button{min-height:42px}
  .header-main{padding-top:10px;padding-bottom:10px}
  .search{min-height:42px}
  .search input{font-size:16px!important}
  .search button{min-width:44px;padding-inline:13px}
  .mobile-nav-toggle{min-width:40px;min-height:40px}
  .profile-menu-dropdown,.contact-menu-dropdown{max-width:calc(100vw - 24px)}
  .section{padding-block:34px}
  .section-head{min-width:0}
  .section-head h1,.section-head h2,.detail-box h1,.customer-service-hero h1{
    word-break:normal;overflow-wrap:anywhere
  }
  .category-card,.product-card{min-width:0}
  .product-image img,.category-card img{max-width:none;width:100%}
  .price-row strong,.price-row del{max-width:100%;overflow-wrap:anywhere}
  .sidebar,.panel,.detail-box,.product-content-card{max-width:100%}
  .input,select,textarea{min-height:44px}
  .buy-button,.summary .btn,.account-form-actions-v114 .btn{min-height:46px}
  .responsive-table{max-width:100%;-webkit-overflow-scrolling:touch}
  table{max-width:100%}
  .cart-product{min-width:0}
  .cart-product>div{min-width:0}
  .cart-product a,.cart-product strong{overflow-wrap:anywhere}
  .checkout-summary-row{min-width:0}
  .checkout-summary-row>span{overflow-wrap:anywhere}
  .customer-service-page{padding-block:42px 54px}
  .customer-service-shell{width:calc(100% - 24px)}
  .customer-service-card{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:17px 16px;border-radius:17px}
  .customer-service-card-index{width:38px;height:38px;border-radius:12px}
  .customer-service-card-content h2{font-size:16px}
  .customer-service-card-content p{font-size:13px;line-height:2}
  .account-page-v114,.auth-wrap{max-width:100%}
  .auth-modal{padding-left:max(10px,var(--safe-left));padding-right:max(10px,var(--safe-right))}
  .auth-modal-card{width:100%;max-height:calc(100dvh - 20px);overflow:auto}
  .cart-added-modal-v176{padding-left:max(10px,var(--safe-left));padding-right:max(10px,var(--safe-right));padding-bottom:max(10px,var(--safe-bottom))}
  .header-cart-dropdown-v175{padding-bottom:max(0px,var(--safe-bottom))}
  .loyalty-shipping-card-v185{bottom:max(12px,calc(var(--safe-bottom) + 8px));right:max(12px,var(--safe-right));left:auto}
  .footer{overflow:hidden}
  .footer-grid{width:100%}
  .newsletter{width:100%;max-width:100%}
  .newsletter input{min-width:0}
}

/* Common 360–430 px phones (iPhone mini/SE, Galaxy S, Pixel, Xiaomi). */
@media (max-width:480px){
  .container{width:calc(100% - 20px)}
  .topbar .container{padding-block:4px}
  .header-main{
    grid-template-columns:minmax(72px,1fr) auto auto!important;
    column-gap:6px!important;
    row-gap:8px!important
  }
  .header-actions{gap:3px!important}
  .profile-login-link,.profile-menu-trigger,.contact-menu-trigger,.cart-link-minimal{
    min-width:36px;min-height:36px;padding:0!important
  }
  .profile-menu-chevron,.contact-menu-chevron{display:none!important}
  .profile-menu-icon{width:21px;height:21px}
  .mobile-nav-toggle{min-width:36px;min-height:36px;padding:6px 7px!important}
  .mobile-nav-icon{font-size:17px}
  .header-standard-logo .site-logo-visual{max-width:100%}
  .header-standard-logo .site-logo-visual img{max-width:90px!important;height:32px!important}
  .search{border-radius:10px}
  .search input{padding:9px 10px!important}
  .hero{height:clamp(285px,82vw,360px);min-height:285px}
  .slide-content{right:15px!important;left:15px!important;bottom:18px!important}
  .slide-content h1{font-size:clamp(22px,7.2vw,28px)!important;line-height:1.45}
  .slide-content p{font-size:12px!important;line-height:1.75}
  .section-head h1,.section-head h2{font-size:21px}
  .category-card h3{font-size:12px}
  .product-card{min-width:0}
  .product-body{min-width:0}
  .product-body h3{overflow-wrap:anywhere}
  .product-card .btn{white-space:normal;line-height:1.55}
  .product-detail{padding-block:22px}
  .detail-box{padding:14px}
  .detail-box h1{font-size:21px!important}
  .product-detail-price .final-price{font-size:24px}
  .product-content-card h2{font-size:18px}
  .quick-product-info>div{min-width:0}
  .cart-product img{flex:0 0 66px;width:66px;height:66px}
  .cart-items-table td,.account-orders-table td{gap:8px}
  .account-order-v114{min-width:0}
  .account-order-main-v114{min-width:0}
  .account-order-main-v114 strong{overflow-wrap:anywhere}
  .account-order-price-v114{padding-right:0!important}
  .footer-grid{padding-block:30px;gap:18px}
  .newsletter{display:grid!important;grid-template-columns:minmax(0,1fr) auto}
  .newsletter input{border-radius:0 10px 10px 0!important}
  .newsletter button{min-width:72px;border-radius:10px 0 0 10px!important;padding-inline:12px}
  .copyright{padding-left:max(12px,var(--safe-left));padding-right:max(12px,var(--safe-right))}
  .loyalty-shipping-card-v185{
    width:auto!important;max-width:none!important;left:max(10px,var(--safe-left));right:max(10px,var(--safe-right));
    padding:10px 12px 11px
  }
}

/* Very narrow/folded displays. Keep everything usable down to ~280 CSS px. */
@media (max-width:340px){
  body{min-width:0!important}
  .container{width:calc(100% - 16px)}
  .header-main{grid-template-columns:minmax(62px,1fr) auto auto!important}
  .header-standard-logo .site-logo-visual img{max-width:70px!important;height:29px!important}
  .profile-login-link,.profile-menu-trigger,.contact-menu-trigger,.cart-link-minimal,.mobile-nav-toggle{min-width:34px;min-height:34px}
  .categories-grid{grid-template-columns:1fr!important}
  .product-card{grid-template-columns:40% 60%!important}
  .product-body{padding:9px!important}
  .product-body h3{font-size:12px!important}
  .feature{padding-inline:6px}
  .customer-service-card{grid-template-columns:1fr}
  .customer-service-card-index{margin-bottom:2px}
  .newsletter{grid-template-columns:1fr!important;gap:7px}
  .newsletter input,.newsletter button{border-radius:10px!important;width:100%}
}

/* Short landscape phones: reduce chrome and keep content above the fold. */
@media (orientation:landscape) and (max-height:520px) and (max-width:950px){
  .topbar{display:none}
  .header-main{padding-block:6px}
  .header-standard-logo .site-logo-visual img{height:30px!important}
  .search{min-height:38px}
  .main-nav .nav-container{max-height:calc(100dvh - 70px)}
  .hero{height:min(72dvh,330px);min-height:230px}
  .slide-content{bottom:14px!important}
  .slide-content h1{font-size:22px!important;margin-bottom:4px}
  .slide-content p{font-size:11px!important;margin-bottom:8px}
  .section{padding-block:26px}
  .auth-modal-card,.cart-added-card-v176{max-height:calc(100dvh - 12px)}
}

/* Do not leave hover transforms stuck on touchscreens. */
@media (hover:none),(pointer:coarse){
  .category-card:hover,.product-card:hover{transform:none;box-shadow:none}
  .btn,.menu-item>a,.profile-menu-trigger,.contact-menu-trigger{-webkit-user-select:none;user-select:none}
}

/* Accessibility and low-motion OS settings. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}