/*
 * PremiumCommerce responsive + PWA presentation layer
 * v1.0.163 - additive only: existing frontend rules remain untouched.
 */
:root{
  --pc-fluid-gutter:clamp(24px,3.6vw,72px);
  --pc-app-safe-bottom:env(safe-area-inset-bottom,0px);
}

/* Desktop / laptop fluid sizing. */
@media (min-width:901px){
  :root{--container:min(1680px,calc(100% - var(--pc-fluid-gutter)))}
  .header-main{
    grid-template-columns:minmax(180px,260px) minmax(280px,1fr) auto;
    gap:clamp(14px,2.25vw,42px);
  }
  .brand img{height:clamp(48px,4vw,58px);max-width:clamp(178px,17vw,250px)}
  .search-wrap form{height:clamp(45px,3.5vw,50px)}
  .header-actions>a{width:clamp(52px,4.4vw,70px)}
  .desktop-categories{gap:clamp(13px,1.5vw,25px)}
  .section{padding-block:clamp(48px,4.3vw,76px)}
  .product-grid{gap:clamp(12px,1.25vw,18px)}
}

/* Common laptop resolutions: 1024/1280/1366/1440. */
@media (min-width:901px) and (max-width:1399px){
  :root{--pc-fluid-gutter:clamp(30px,3vw,48px)}
  .header-main{grid-template-columns:minmax(165px,220px) minmax(280px,1fr) auto;gap:clamp(12px,1.65vw,24px)}
  .brand img{max-width:clamp(165px,16vw,215px)}
  .header-actions>a{width:clamp(48px,4.2vw,58px);font-size:9px}
  .header-actions svg{width:20px}
  .desktop-categories{gap:clamp(10px,1.1vw,16px)}
  .category-inner a,.category-inner button{font-size:12px}
  .category-inner{gap:clamp(12px,1.4vw,20px)}
  .hero-shell{gap:clamp(12px,1.4vw,18px)}
  .product-media{height:clamp(215px,18.5vw,255px)}
}

/* Short laptop displays (e.g. 1366x768) stay proportionate without giant blocks. */
@media (min-width:901px) and (max-height:820px){
  .header-main{height:clamp(70px,9.5vh,80px)}
  .category-inner{height:44px}
  .v83-hero .hero-slider,.hero-slider{height:clamp(385px,58vh,460px)}
  .v83-hero{padding-top:16px}
  .section{padding-block:clamp(40px,5.5vh,58px)}
}

/* Large desktop screens scale up gently rather than stretching content edge-to-edge. */
@media (min-width:1600px){
  :root{--pc-fluid-gutter:clamp(64px,4vw,96px)}
  .header-main{grid-template-columns:270px minmax(360px,1fr) auto}
  .hero-slider{max-height:590px}
}

/* Mobile web-app presentation. */
@media (max-width:900px){
  :root{--container:calc(100% - clamp(20px,5vw,30px))}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#f3f6f4}
  body{
    background:#f3f6f4;
    padding-bottom:calc(78px + var(--pc-app-safe-bottom));
    overscroll-behavior-y:none;
  }
  .site-header{
    top:0;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid rgba(225,231,227,.92);
    box-shadow:0 7px 26px rgba(14,38,24,.075);
    -webkit-backdrop-filter:saturate(150%) blur(14px);
    backdrop-filter:saturate(150%) blur(14px);
  }
  .header-main{
    grid-template-columns:40px minmax(0,1fr) 44px;
    gap:9px;
    padding-top:calc(9px + env(safe-area-inset-top,0px));
  }
  .mobile-menu-button{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--surface)}
  .mobile-menu-button svg{width:21px}
  .brand{justify-content:center;overflow:hidden}
  .brand img{height:42px;max-width:min(62vw,230px);object-fit:contain}
  .header-actions .cart-link{width:42px!important;height:42px!important;border-radius:12px;background:var(--surface)}
  .search-wrap{padding-bottom:10px}
  .search-wrap form{
    height:46px;
    border-radius:14px;
    background:#f5f7f6;
    box-shadow:inset 0 0 0 1px rgba(225,231,227,.3);
  }
  .search-wrap button{height:36px;border-radius:10px;padding-inline:16px}
  .search-wrap input{font-size:16px}
  input,select,textarea{font-size:16px}

  main{min-height:55vh}
  .section{padding-block:36px}
  .section-sm{padding-block:20px}
  .hero,.v83-hero{padding-top:12px;background:#f3f6f4}
  .hero-slider,.v83-hero .hero-slider{box-shadow:0 14px 36px rgba(10,35,23,.12)}
  .product-card,.customer-card,.checkout-card,.order-summary,.cart-items,.filters,.content-card{
    border-radius:16px;
  }
  .btn,.icon-button,button{touch-action:manipulation}
  .btn{min-height:44px}
  .product-card{box-shadow:0 4px 16px rgba(16,42,26,.045)}

  .mobile-bottom{
    height:calc(72px + var(--pc-app-safe-bottom));
    padding:5px 7px var(--pc-app-safe-bottom);
    border-top:1px solid rgba(217,226,220,.92);
    border-radius:20px 20px 0 0;
    box-shadow:0 -10px 34px rgba(15,35,24,.10);
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:saturate(160%) blur(16px);
    backdrop-filter:saturate(160%) blur(16px);
  }
  .mobile-bottom a,.mobile-bottom button{min-height:58px;border-radius:12px;font-size:9px;font-weight:700}
  .mobile-bottom svg{width:20px;height:20px}
  .mobile-bottom .mobile-search-action b{
    bottom:30px;
    width:48px;
    height:48px;
    border:4px solid #fff;
    box-shadow:0 9px 22px rgba(18,63,43,.28);
  }
  .floating-contact{bottom:calc(88px + var(--pc-app-safe-bottom))}
  .v42-cookie-settings{bottom:calc(84px + var(--pc-app-safe-bottom))!important}

  .mobile-drawer{
    inset:0 min(18vw,78px) 0 0;
    padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(20px + var(--pc-app-safe-bottom));
    border-radius:0 22px 22px 0;
    box-shadow:20px 0 55px rgba(10,25,16,.18);
  }
  .drawer-head{position:sticky;top:0;background:#fff;z-index:2}
  .drawer-links a{min-height:48px}
  .drawer-help{bottom:calc(20px + var(--pc-app-safe-bottom))}

  .cookie-consent{bottom:calc(82px + var(--pc-app-safe-bottom))!important}
  .v42-cookie-center{bottom:calc(80px + var(--pc-app-safe-bottom))!important;max-height:calc(100dvh - 110px);overflow:auto}
}

@media (max-width:640px){
  :root{--container:calc(100% - 20px)}
  .header-main{grid-template-columns:38px minmax(0,1fr) 40px}
  .brand img{height:39px;max-width:min(65vw,210px)}
  .search-wrap form{grid-template-columns:40px minmax(0,1fr) auto}
  .search-wrap form>svg{margin-left:13px}
  .search-wrap button{padding-inline:13px;font-size:12px}
  .section{padding-block:30px}
  .product-grid,.catalog-main .product-grid{gap:10px}
  .product-media{height:clamp(155px,46vw,190px)}
  .product-body{padding:11px}
  .product-card .btn{min-height:40px}
  .trust-grid>div{min-height:70px;padding:12px 8px}
  .footer{padding-bottom:28px}
}

@media (max-width:390px){
  :root{--container:calc(100% - 16px)}
  .brand img{max-width:62vw}
  .search-wrap button{padding-inline:10px}
  .product-media{height:155px}
  .mobile-bottom a,.mobile-bottom button{font-size:8px}
}

/* Standalone installed PWA tweaks. */
html.pwa-standalone .site-header{top:0}
html.pwa-standalone .pwa-install-card{display:none!important}

/* Mobile install invitation. */
.pwa-install-card{
  position:fixed;
  z-index:10010;
  left:50%;
  bottom:calc(82px + var(--pc-app-safe-bottom));
  transform:translate(-50%,18px);
  width:min(520px,calc(100% - 24px));
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:13px;
  color:#fff;
  background:linear-gradient(145deg,#0d2016,#123f2b);
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  box-shadow:0 20px 55px rgba(5,22,13,.35);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
}
.pwa-install-card.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.pwa-install-card>img{width:52px;height:52px;border-radius:14px;object-fit:cover;background:#fff}
.pwa-install-copy{min-width:0}
.pwa-install-copy strong{display:block;font-size:13px;line-height:1.25}
.pwa-install-copy small{display:block;margin-top:4px;color:#d9e8df;font-size:10px;line-height:1.35}
.pwa-install-actions{display:flex;align-items:center;gap:6px}
.pwa-install-button,.pwa-install-close{
  border:0;
  cursor:pointer;
  font-weight:800;
}
.pwa-install-button{min-height:38px;padding:0 12px;border-radius:10px;background:var(--accent,#d8792b);color:#fff;font-size:10px;white-space:nowrap}
.pwa-install-close{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.10);color:#fff;font-size:20px;line-height:1}
.pwa-install-help{
  position:fixed;
  z-index:10030;
  inset:0;
  display:grid;
  place-items:end center;
  padding:18px 12px calc(92px + var(--pc-app-safe-bottom));
  background:rgba(3,12,8,.48);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
.pwa-install-help[hidden]{display:none}
.pwa-install-help-card{width:min(520px,100%);background:#fff;border-radius:20px;padding:18px;box-shadow:0 22px 70px rgba(5,22,13,.3)}
.pwa-install-help-card h3{margin:0 0 7px;font-size:17px}
.pwa-install-help-card p{margin:0;color:#59665f;font-size:13px;line-height:1.55}
.pwa-install-help-card button{width:100%;margin-top:15px;min-height:44px;border:0;border-radius:12px;background:var(--primary,#123f2b);color:#fff;font-weight:800}

@media (max-width:520px){
  .pwa-install-card{grid-template-columns:46px minmax(0,1fr);gap:10px;padding:11px}
  .pwa-install-card>img{width:46px;height:46px;border-radius:12px}
  .pwa-install-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 40px}
  .pwa-install-button{min-height:40px}
  .pwa-install-close{width:40px;height:40px}
}

@media (prefers-reduced-motion:reduce){
  .pwa-install-card{transition:none}
}