/* ==========================================================================
   inna.pl — drukarnia odzieży | wspólne style dla wszystkich podstron
   ========================================================================== */

:root{
  --yellow:#FFED00;
  --yellow-dark:#F5D900;
  --yellow-soft:#FFF8B8;
  --ink:#1A1A1A;
  --gray-900:#222221;
  --gray-700:#575756;
  --gray-500:#8A8A89;
  --gray-300:#D9D9D6;
  --gray-100:#F4F4F1;
  --gray-50:#FAFAF7;
  --white:#FFFFFF;
  --accent-blue:#1F3A8A;
  --green:#16A085;
  --red:#E74C3C;
  --shadow-sm: 0 2px 8px rgba(20,20,20,.06);
  --shadow-md: 0 8px 24px rgba(20,20,20,.08);
  --shadow-lg: 0 18px 50px rgba(20,20,20,.12);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--gray-900);
  background:var(--white);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans','Inter',sans-serif; line-height:1.15; letter-spacing:-0.02em; color:var(--gray-900);}
h1{font-size:clamp(2.2rem, 4.5vw, 3.6rem); font-weight:800;}
h2{font-size:clamp(1.8rem, 3.2vw, 2.6rem); font-weight:800;}
h3{font-size:1.25rem; font-weight:700;}
h4{font-size:1.05rem; font-weight:700;}
p{color:var(--gray-700);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.container{max-width:1280px; margin:0 auto; padding:0 24px;}
.container-wide{max-width:1440px; margin:0 auto; padding:0 24px;}

/* ====== BUTTONS ====== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:999px; font-weight:700; font-size:.95rem;
  cursor:pointer; border:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--yellow); color:var(--gray-900); box-shadow:0 6px 0 rgba(20,20,20,.08);}
.btn-primary:hover{background:var(--yellow-dark); transform:translateY(-1px);}
.btn-dark{background:var(--gray-900); color:#fff;}
.btn-dark:hover{background:#000;}
.btn-ghost{background:transparent; color:var(--gray-900); border:1.5px solid var(--gray-300);}
.btn-ghost:hover{border-color:var(--gray-900);}
.btn-white{background:#fff; color:var(--gray-900);}
.btn-white:hover{background:var(--gray-100);}
.btn-sm{padding:10px 16px; font-size:.85rem;}
.btn-lg{padding:18px 28px; font-size:1rem;}

/* ====== TOP STRIP ====== */
.topbar{
  background:var(--gray-900); color:#fff;
  font-size:.88rem; padding:11px 0;
}
.topbar .container{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;}
.topbar-left{justify-self:start; opacity:.6; font-weight:500; letter-spacing:.04em;}
.topbar-center{
  justify-self:center; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;
  letter-spacing:.04em; font-size:.95rem;
}
.topbar-right{justify-self:end; display:flex; gap:22px;}
.topbar-right a{opacity:.9; display:inline-flex; align-items:center; gap:6px; font-weight:600;}
.topbar-right a:hover{color:var(--yellow); opacity:1;}
.topbar-right a strong{color:var(--yellow); font-weight:700;}

/* ====== HEADER ====== */
header.site{
  background:#fff; border-bottom:1px solid var(--gray-100);
  position:sticky; top:0; z-index:50;
}
.nav-wrap{display:flex; align-items:center; gap:32px; padding:18px 0;}
.logo{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.logo svg{height:42px; width:auto;}
nav.main{display:flex; gap:2px; margin-left:10px;}
nav.main > a, nav.main > .nav-item > a{
  padding:10px 14px; font-size:.95rem; font-weight:500; color:var(--gray-700);
  border-radius:999px; transition:all .15s; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap;
}
nav.main > a:hover, nav.main > .nav-item > a:hover{background:var(--gray-100); color:var(--gray-900);}
nav.main a.active{color:var(--gray-900); font-weight:600; background:var(--gray-100);}
nav.main .nav-item{position:static;}
nav.main .nav-item > a .caret{
  display:inline-block; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:.2s;
}
nav.main .nav-item:hover > a, nav.main .nav-item:focus-within > a{background:var(--gray-100); color:var(--gray-900);}
nav.main .nav-item:hover > a .caret, nav.main .nav-item:focus-within > a .caret{transform:rotate(-135deg) translateY(2px);}

/* MEGA MENU PANEL */
.mega-panel{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-top:1px solid var(--gray-100);
  box-shadow:0 30px 60px rgba(20,20,20,.12);
  padding:36px 0; opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-8px); transition:all .25s ease;
  z-index:60;
}
.nav-item:hover > .mega-panel,
.nav-item:focus-within > .mega-panel,
.mega-panel:hover{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.mega-panel .mega-inner{max-width:1280px; margin:0 auto; padding:0 24px;}

/* WARIANT 1 — USŁUGI: jeden wyróżniony hero + grid kafelków */
.mega-services{display:grid; grid-template-columns:1.1fr 1.9fr; gap:36px;}
.mega-hero{
  background:linear-gradient(135deg, var(--yellow) 0%, var(--yellow-dark) 100%);
  border-radius:var(--radius); padding:30px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:280px;
}
.mega-hero::before{
  content:""; position:absolute; right:-40px; bottom:-40px; width:160px; height:160px;
  background:rgba(0,0,0,.08); border-radius:50%;
}
.mega-hero .badge{
  display:inline-block; background:var(--gray-900); color:var(--yellow);
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.72rem;
  padding:5px 12px; border-radius:6px; letter-spacing:.08em; text-transform:uppercase;
  align-self:flex-start; position:relative;
}
.mega-hero h3{font-family:'Plus Jakarta Sans',sans-serif; font-size:1.6rem; line-height:1.1; margin:14px 0 8px; position:relative;}
.mega-hero p{color:var(--gray-900); opacity:.85; font-size:.92rem; max-width:280px; position:relative;}
.mega-hero .arrow{
  position:relative; margin-top:16px;
  display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--gray-900); font-size:.92rem;
}
.mega-grid-services{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-content:start;}
.mega-tile{
  background:var(--gray-50); border:1px solid var(--gray-100); border-radius:12px;
  padding:18px; transition:.15s; cursor:pointer; display:block;
}
.mega-tile:hover{background:#fff; border-color:var(--gray-900); transform:translateY(-2px); box-shadow:var(--shadow-sm);}
.mega-tile .label{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.72rem;
  letter-spacing:.12em; color:var(--gray-500); text-transform:uppercase; margin-bottom:6px;
}
.mega-tile h4{font-size:1rem; margin-bottom:4px;}
.mega-tile p{font-size:.82rem; color:var(--gray-700); line-height:1.4;}
.mega-tile:hover h4{color:var(--gray-900);}
.mega-footer{
  grid-column:1/-1; margin-top:10px; padding-top:18px; border-top:1px solid var(--gray-100);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.mega-footer .note{font-size:.85rem; color:var(--gray-700);}
.mega-footer .note strong{color:var(--gray-900);}

/* WARIANT 2 — KATEGORIE PRODUKTÓW: 4 kolumny równoległe */
.mega-catalog{display:grid; grid-template-columns:repeat(4, 1fr) 1.3fr; gap:30px;}
.mega-col h4{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gray-500); font-weight:800;
  margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--gray-100);
}
.mega-col ul{list-style:none;}
.mega-col ul li{margin-bottom:8px;}
.mega-col ul li a{
  font-size:.92rem; color:var(--gray-900); font-weight:500; transition:.12s;
  display:flex; justify-content:space-between; align-items:center; padding:4px 0;
}
.mega-col ul li a:hover{color:var(--yellow-dark); padding-left:4px;}
.mega-col ul li a .count{font-size:.75rem; color:var(--gray-500); font-weight:500;}
.mega-promo{
  background:var(--gray-900); color:#fff; border-radius:var(--radius); padding:24px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.mega-promo .lbl{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--yellow); font-weight:800; margin-bottom:10px;
}
.mega-promo h4{color:#fff; font-size:1.2rem; line-height:1.2; margin-bottom:8px;}
.mega-promo p{color:rgba(255,255,255,.7); font-size:.85rem; margin-bottom:14px;}
.mega-promo .btn-mini{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px;
  background:var(--yellow); color:var(--gray-900); border-radius:8px;
  font-weight:700; font-size:.82rem; align-self:flex-start;
}

/* WARIANT 3 — DLA KOGO: prosta lista z opisami */
.mega-simple{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.mega-row{
  display:flex; align-items:flex-start; gap:14px; padding:14px;
  border-radius:10px; transition:.15s; cursor:pointer;
}
.mega-row:hover{background:var(--gray-50);}
.mega-row .num{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.85rem;
  color:var(--gray-500); flex-shrink:0; padding-top:2px; min-width:32px;
}
.mega-row strong{display:block; color:var(--gray-900); font-size:.95rem; margin-bottom:2px;}
.mega-row span{font-size:.82rem; color:var(--gray-700); line-height:1.4;}

/* Średnia rozdzielczość — kompresja nawigacji */
@media (max-width:1300px){
  nav.main{margin-left:6px; gap:0;}
  nav.main > a, nav.main > .nav-item > a{padding:9px 10px; font-size:.88rem;}
  .nav-actions{gap:8px;}
  .nav-actions .phone{font-size:.85rem;}
}
@media (max-width:1180px){
  .nav-actions .phone{display:none;}
  nav.main > a, nav.main > .nav-item > a{padding:9px 9px; font-size:.85rem;}
}

/* ====== MOBILE NAV / HAMBURGER ====== */
.nav-toggle{
  display:none; width:42px; height:42px; border:none; background:transparent;
  cursor:pointer; padding:0; position:relative; z-index:101;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:""; position:absolute; left:10px; right:10px; height:2px;
  background:var(--gray-900); border-radius:2px; transition:.25s ease;
}
.nav-toggle::before{top:13px;}
.nav-toggle span{top:20px;}
.nav-toggle::after{top:27px;}
body.nav-open .nav-toggle::before{top:20px; transform:rotate(45deg);}
body.nav-open .nav-toggle span{opacity:0;}
body.nav-open .nav-toggle::after{top:20px; transform:rotate(-45deg);}

@media (max-width:1024px){
  .nav-toggle{display:block;}
  .nav-wrap{gap:12px;}
  nav.main{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; top:0; right:0; bottom:0; width:min(420px, 88vw);
    background:#fff; padding:80px 24px 30px; margin:0;
    box-shadow:-20px 0 50px rgba(0,0,0,.12);
    transform:translateX(100%); transition:transform .3s ease;
    z-index:100; overflow-y:auto;
  }
  body.nav-open nav.main{transform:translateX(0);}
  body.nav-open::before{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:99;
  }
  nav.main > a, nav.main > .nav-item > a{
    padding:16px 14px; font-size:1rem; border-radius:10px; border-bottom:1px solid var(--gray-100);
    justify-content:space-between; width:100%;
  }
  nav.main > .nav-item{position:relative;}
  nav.main .nav-item > a .caret{margin-left:auto;}
  /* Mobile - accordion mega-panel */
  .mega-panel{
    position:static; box-shadow:none; border-top:none; padding:0;
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
    background:var(--gray-50); border-radius:10px; margin-top:4px;
  }
  .nav-item.open > .mega-panel{max-height:2000px; padding:16px 0;}
  .nav-item:hover > .mega-panel,
  .nav-item:focus-within > .mega-panel{max-height:0; padding:0;}
  .nav-item.open:hover > .mega-panel,
  .nav-item.open:focus-within > .mega-panel{max-height:2000px; padding:16px 0;}
  .mega-panel .mega-inner{padding:0 16px;}
  .mega-services, .mega-catalog, .mega-simple{grid-template-columns:1fr; gap:14px;}
  .mega-hero{min-height:auto; padding:22px;}
  .mega-grid-services{grid-template-columns:1fr 1fr;}
  .mega-promo{padding:18px;}
  .topbar .container{grid-template-columns:1fr; gap:6px; text-align:center;}
  .topbar-left, .topbar-right{justify-self:center;}
  .topbar-right{flex-wrap:wrap; justify-content:center;}
  .topbar-left{font-size:.78rem;}
  .nav-actions .phone{display:none;}
}
@media (max-width:600px){
  .topbar-left{display:none;}
  .nav-wrap{padding:14px 0;}
  .logo svg{height:36px;}
  .hero-visual{aspect-ratio:1/1.05; padding:50px 24px 60px;}
  .hero-bullets{grid-template-columns:1fr;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero-actions .btn{width:100%;}
}
.nav-actions{margin-left:auto; display:flex; gap:10px; align-items:center; flex-shrink:0;}
.nav-actions .phone{
  font-weight:700; color:var(--gray-900); display:flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.nav-actions .phone svg{width:18px; height:18px; flex-shrink:0;}
.nav-actions .btn{white-space:nowrap;}

/* ====== HERO ====== */
.hero{
  background:linear-gradient(180deg, var(--gray-50) 0%, #fff 100%);
  padding:70px 0 80px;
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; right:-150px; top:-150px; width:520px; height:520px;
  background:var(--yellow); border-radius:50%; opacity:.16; filter:blur(20px);
}
.hero .container{position:relative; display:grid; grid-template-columns: 1.1fr 1fr; gap:70px; align-items:center;}
.hero h1{font-size:clamp(2.4rem, 4.8vw, 4rem); letter-spacing:-0.025em;}
.hero h1 span.hl{
  background:linear-gradient(180deg, transparent 62%, var(--yellow) 62%);
  padding:0 6px;
}
.hero p.lead{
  font-size:1.1rem; color:var(--gray-700); margin-top:26px; max-width:560px; line-height:1.6;
}
.hero-bullets{display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; margin-top:26px; max-width:560px;}
.hero-bullets .bullet{
  display:flex; align-items:flex-start; gap:10px; font-size:.95rem; color:var(--gray-900); font-weight:500;
}
.hero-bullets .bullet::before{
  content:""; width:6px; height:6px; background:var(--gray-900); border-radius:50%;
  margin-top:9px; flex-shrink:0;
}
.hero-actions{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap;}

/* ====== HERO VISUAL (prawa kolumna) ====== */
.hero-visual{
  position:relative; aspect-ratio:5/6; width:100%; max-width:520px; justify-self:end;
  border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(135deg, #B33A2E 0%, #8B2A22 100%);
  display:flex; align-items:center; justify-content:center;
  padding:70px 36px 80px;
}
.hero-visual::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0, transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.05) 0, transparent 40%);
  pointer-events:none;
}
.hero-stack{
  position:relative; width:100%;
  display:flex; flex-direction:column; gap:0;
}
.hero-stack .layer{
  background:linear-gradient(135deg, #C44539 0%, #9B2F26 100%);
  border-radius:8px; padding:11px 16px; margin-top:-8px;
  color:rgba(255,255,255,.95); font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; letter-spacing:.04em; font-size:.78rem;
  box-shadow:0 -2px 0 rgba(0,0,0,.15);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  transform:rotate(-1deg);
  white-space:nowrap; overflow:hidden;
}
.hero-stack .layer span:first-child{
  overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.hero-stack .layer:first-child{margin-top:0;}
.hero-stack .layer:nth-child(odd){transform:rotate(.7deg); background:linear-gradient(135deg, #D04A3D 0%, #A0322A 100%);}
.hero-stack .layer:nth-child(3n){transform:rotate(-.5deg);}
.hero-stack .layer .lbl-num{color:rgba(255,255,255,.55); font-size:.68rem; letter-spacing:.12em; flex-shrink:0;}
.hero-visual .stamp{
  position:absolute; top:22px; right:22px; padding:8px 12px;
  background:var(--yellow); color:var(--gray-900);
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  border-radius:6px; transform:rotate(6deg);
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  z-index:2;
}
.hero-visual .caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:18px 28px; color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 100%);
  z-index:2;
}

/* Hero order card */
.order-card{
  background:#fff; border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-lg);
  border:1px solid var(--gray-100); position:relative;
}
.order-card::before{
  content:""; position:absolute; inset:auto -8px -8px auto; width:88px; height:88px; background:var(--yellow);
  border-radius:50%; z-index:-1; opacity:.6;
}
.order-card h3{font-size:1.35rem; margin-bottom:8px;}
.order-card .sub{color:var(--gray-700); font-size:.92rem; margin-bottom:22px;}
.order-card .field{margin-bottom:14px;}
.order-card label{display:block; font-size:.78rem; font-weight:600; color:var(--gray-700); margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em;}
.order-card .field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.order-card input, .order-card select, .order-card textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--gray-300); border-radius:10px;
  font-family:inherit; font-size:.94rem; color:var(--gray-900); background:#fff; transition:.15s;
}
.order-card input:focus, .order-card select:focus, .order-card textarea:focus{
  outline:none; border-color:var(--gray-900); box-shadow:0 0 0 3px rgba(255,237,0,.4);
}
.order-card .chip-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.order-card .chip{
  padding:7px 12px; border:1.5px solid var(--gray-300); border-radius:999px;
  font-size:.82rem; font-weight:600; color:var(--gray-700); cursor:pointer; transition:.15s;
}
.order-card .chip.on, .order-card .chip:hover{background:var(--gray-900); color:#fff; border-color:var(--gray-900);}
.order-card .submit{width:100%; margin-top:10px;}

/* ====== TRUST BAR ====== */
.trust{padding:30px 0; background:#fff; border-bottom:1px solid var(--gray-100);}
.trust .container{display:flex; gap:32px; align-items:center; flex-wrap:wrap; justify-content:center;}
.trust .label{font-size:.82rem; font-weight:600; color:var(--gray-500); text-transform:uppercase; letter-spacing:.08em;}
.trust .brands{display:flex; gap:38px; align-items:center; flex-wrap:wrap;}
.trust .brand-pill{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.95rem;
  color:var(--gray-500); opacity:.7; transition:.15s;
}
.trust .brand-pill:hover{opacity:1; color:var(--gray-900);}

/* ====== SECTION GENERIC ====== */
section{padding:80px 0;}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:40px; flex-wrap:wrap;}
.eyebrow{
  display:inline-block; font-size:.82rem; font-weight:700; color:var(--gray-900);
  background:var(--yellow); padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.section-head h2{max-width:680px;}
.section-head p{max-width:520px; font-size:1rem;}

/* ====== PRODUCTS ====== */
.product-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;}
.product{
  background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius);
  padding:18px; transition:.2s; cursor:pointer;
  display:block;
}
.product:hover{border-color:var(--gray-900); box-shadow:var(--shadow-md); transform:translateY(-3px);}
.product .ph{
  aspect-ratio:1/1; border-radius:10px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:24px;
}
.product .ph .ph-label{
  font-family:'Plus Jakarta Sans',sans-serif;
  color:rgba(255,255,255,.95); text-align:center;
  font-weight:800; letter-spacing:-0.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.15);
}
.product .ph .ph-label .ph-sku{
  display:block; font-size:1.6rem; line-height:1;
}
.product .ph .ph-label .ph-cat{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; margin-top:10px; opacity:.85;
}
.product .badge-new{
  position:absolute; top:10px; left:10px; background:var(--yellow); color:var(--gray-900);
  font-size:.7rem; font-weight:700; padding:4px 8px; border-radius:6px;
}
.product .badge-hot{
  position:absolute; top:10px; left:10px; background:var(--red); color:#fff;
  font-size:.7rem; font-weight:700; padding:4px 8px; border-radius:6px;
}
.product .name{font-weight:700; color:var(--gray-900); font-size:.98rem; margin-bottom:4px;}
.product .sku{font-size:.8rem; color:var(--gray-500); margin-bottom:10px;}
.product .price{display:flex; justify-content:space-between; align-items:center;}
.product .price strong{font-family:'Plus Jakarta Sans',sans-serif; font-size:1.15rem; color:var(--gray-900);}
.product .price .from{font-size:.75rem; color:var(--gray-500);}
.product .colors{display:flex; gap:5px; margin-top:10px;}
.product .colors span{width:14px; height:14px; border-radius:50%; border:1.5px solid var(--gray-300);}
.product-cta{text-align:center; margin-top:42px;}

/* ====== CALCULATOR ====== */
.calc-wrap{background:linear-gradient(135deg, var(--gray-900) 0%, #2c2c2b 100%); border-radius:var(--radius-lg); padding:50px; color:#fff; position:relative; overflow:hidden;}
.calc-wrap::before{
  content:""; position:absolute; right:-80px; top:-80px; width:300px; height:300px;
  background:var(--yellow); opacity:.08; border-radius:50%;
}
.calc-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:40px; position:relative;}
.calc-wrap h2{color:#fff;}
.calc-wrap .eyebrow{background:var(--yellow); color:var(--gray-900);}
.calc-wrap p{color:rgba(255,255,255,.75);}
.calc-form{display:grid; gap:18px; margin-top:30px;}
.calc-form label{display:block; font-size:.78rem; font-weight:600; color:rgba(255,255,255,.7); margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em;}
.calc-form input, .calc-form select{
  width:100%; padding:14px 16px; border:1.5px solid rgba(255,255,255,.2); border-radius:10px;
  font-family:inherit; font-size:1rem; color:#fff; background:rgba(255,255,255,.05);
}
.calc-form input:focus, .calc-form select:focus{outline:none; border-color:var(--yellow);}
.calc-chips{display:flex; gap:8px; flex-wrap:wrap;}
.calc-chips .chip{
  padding:10px 14px; border:1.5px solid rgba(255,255,255,.2); border-radius:10px;
  font-size:.88rem; font-weight:600; color:#fff; cursor:pointer; transition:.15s;
  display:flex; align-items:center; gap:6px;
}
.calc-chips .chip:hover{border-color:var(--yellow);}
.calc-chips .chip.on{background:var(--yellow); color:var(--gray-900); border-color:var(--yellow);}
.estimate{
  background:#fff; border-radius:var(--radius); padding:30px; color:var(--gray-900);
  box-shadow:var(--shadow-lg);
}
.estimate h4{
  display:flex; align-items:center; margin-bottom:18px;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.estimate h4::before{
  content:""; width:24px; height:3px; background:var(--yellow); margin-right:12px; border-radius:2px;
}
.est-row{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--gray-300); font-size:.92rem;}
.est-row.total{border-bottom:none; padding-top:18px; font-size:1.15rem; font-weight:700;}
.est-row.total strong{font-family:'Plus Jakarta Sans',sans-serif; font-size:1.6rem; color:var(--gray-900);}
.est-price-each{background:var(--yellow-soft); padding:14px 16px; border-radius:10px; margin-top:18px; display:flex; justify-content:space-between; align-items:center;}
.est-price-each .lbl{font-size:.82rem; color:var(--gray-700);}
.est-price-each .val{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.4rem;}
.estimate .btn{width:100%; margin-top:18px;}
.estimate .call{text-align:center; margin-top:14px; font-size:.85rem; color:var(--gray-700);}

/* ====== SERVICES ====== */
.services{background:var(--gray-50);}
.svc-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:18px;}
.svc{
  background:#fff; border-radius:var(--radius); padding:0; overflow:hidden;
  border:1px solid var(--gray-100); transition:.2s; cursor:pointer;
}
.svc:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gray-300);}
.svc-img{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; padding:24px;
}
.svc-img .svc-num{
  position:absolute; top:14px; left:18px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  color:rgba(255,255,255,.7); font-size:.85rem; letter-spacing:.08em;
}
.svc-img .svc-headline{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:900;
  color:#fff; text-align:center; letter-spacing:-0.03em; line-height:1;
  font-size:clamp(1.6rem, 3vw, 2.4rem);
  text-shadow:0 2px 16px rgba(0,0,0,.15);
}
.svc-body{padding:18px 20px 22px;}
.svc-body h3{font-size:1.1rem; margin-bottom:6px;}
.svc-body p{font-size:.86rem; color:var(--gray-700); line-height:1.5;}
.svc-body .arrow{margin-top:14px; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.85rem; color:var(--gray-900);}

.svc-img.sitodruk{background:linear-gradient(135deg, #FFE600 0%, #FFB800 100%);}
.svc-img.dtf{background:linear-gradient(135deg, #1F3A8A 0%, #3B5BDB 100%);}
.svc-img.flex{background:linear-gradient(135deg, #16A085 0%, #1ABC9C 100%);}
.svc-img.haft{background:linear-gradient(135deg, #C0392B 0%, #E74C3C 100%);}
.svc-img.pak{background:linear-gradient(135deg, #444 0%, #888 100%);}

/* ====== DESIGN CTA ====== */
.design-cta{padding:70px 0;}
.design-intro{max-width:780px; margin:0 auto 40px; text-align:center;}
.design-intro .eyebrow{margin:0 auto 14px;}
.design-intro h2{margin-bottom:14px;}
.design-intro p{margin:0 auto; max-width:600px;}

/* PROCESS 3 STEPS */
.design-process{
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:20px; align-items:center;
  margin:0 auto 50px; max-width:1100px;
}
.design-step{
  background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius);
  padding:24px; text-align:center; min-height:280px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  transition:.2s;
}
.design-step:hover{border-color:var(--gray-900); box-shadow:var(--shadow-md);}
.design-step .step-num{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.75rem;
  letter-spacing:.14em; color:var(--gray-500); text-transform:uppercase; margin-bottom:14px;
}
.design-step h4{font-size:1.05rem; margin-bottom:6px;}
.design-step p{font-size:.86rem; color:var(--gray-700); margin-bottom:14px;}

/* Step visualizations */
.step-visual{
  width:100%; aspect-ratio:1/1; max-width:160px; border-radius:10px;
  margin:0 auto 16px; position:relative; overflow:hidden;
}
/* Step 1 — sketch on notepad */
.step-sketch{
  background:#FFF7C2;
  background-image:repeating-linear-gradient(180deg, transparent 0, transparent 16px, rgba(180,150,80,.25) 16px, rgba(180,150,80,.25) 17px);
  border-left:3px solid rgba(180,30,30,.5);
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-2deg); box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.step-sketch::before{
  content:""; position:absolute; left:8px; top:14px; bottom:14px; width:1px;
  background:rgba(180,30,30,.4);
}
.step-sketch .scribble{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:900;
  color:rgba(40,30,20,.85); font-size:1.6rem; letter-spacing:-0.02em;
  text-align:center; line-height:.95; transform:rotate(2deg);
}
.step-sketch .scribble small{display:block; font-size:.6rem; font-weight:600; margin-top:6px; opacity:.7; letter-spacing:.08em;}

/* Step 2 — designer mockup (monitor) */
.step-monitor{
  background:var(--gray-900); padding:14px 14px 0; border-radius:10px;
  display:flex; flex-direction:column; align-items:center;
}
.step-monitor .screen{
  width:100%; flex:1; background:linear-gradient(135deg, #16A085 0%, #1ABC9C 100%);
  border-radius:6px; display:flex; align-items:center; justify-content:center; position:relative;
}
.step-monitor .screen-content{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:900;
  color:#fff; font-size:1.4rem; letter-spacing:-0.02em; text-align:center; line-height:1;
  text-shadow:0 2px 8px rgba(0,0,0,.2);
}
.step-monitor .screen-content small{display:block; font-size:.55rem; font-weight:700; margin-top:5px; letter-spacing:.14em; opacity:.85;}
.step-monitor .base{
  width:60%; height:6px; background:#000; border-radius:0 0 4px 4px; margin-top:-1px;
}

/* Step 3 — finished t-shirt */
.step-tshirt{
  background:linear-gradient(135deg, #16A085 0%, #0E7361 100%);
  display:flex; align-items:center; justify-content:center;
}
.step-tshirt .print{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:900;
  color:rgba(255,255,255,.95); font-size:1.4rem; letter-spacing:-0.02em; text-align:center; line-height:1;
  text-shadow:0 2px 6px rgba(0,0,0,.15);
}
.step-tshirt .print small{display:block; font-size:.6rem; font-weight:700; margin-top:6px; letter-spacing:.12em; opacity:.85;}

/* Arrow between steps */
.design-arrow{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.5rem;
  color:var(--gray-300); align-self:center;
}

.design-box{
  background:var(--yellow); border-radius:var(--radius-lg); padding:50px;
  display:grid; grid-template-columns:1.2fr 1fr; gap:50px; align-items:center;
  position:relative; overflow:hidden;
}
.design-box::before{
  content:""; position:absolute; left:-60px; bottom:-60px; width:240px; height:240px;
  background:rgba(0,0,0,.05); border-radius:50%;
}
.design-box h2{position:relative; max-width:520px;}
.design-box p{color:var(--gray-900); opacity:.85; margin-top:14px; max-width:480px; position:relative;}
.design-form{
  background:#fff; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-md); position:relative;
}
.design-form .field{margin-bottom:12px;}
.design-form label{display:block; font-size:.78rem; font-weight:600; color:var(--gray-700); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em;}
.design-form input, .design-form textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--gray-300); border-radius:10px;
  font-family:inherit; font-size:.94rem;
}
.design-form textarea{min-height:80px; resize:vertical;}
.upload-zone{
  border:2px dashed var(--gray-300); border-radius:10px; padding:18px; text-align:center;
  font-size:.85rem; color:var(--gray-700); cursor:pointer; transition:.15s; background:var(--gray-50);
}
.upload-zone:hover{border-color:var(--gray-900); background:#fff;}
.upload-zone svg{width:28px; height:28px; margin:0 auto 6px; display:block;}

/* ====== PORTFOLIO ====== */
.portfolio-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px; grid-auto-rows:200px;}
.pf{border-radius:var(--radius); overflow:hidden; position:relative; cursor:pointer;}
.pf::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.6));
  opacity:0; transition:.2s;
}
.pf:hover::after{opacity:1;}
.pf .ttl{
  position:absolute; left:18px; bottom:18px; color:#fff; font-weight:700;
  opacity:0; transition:.2s; z-index:2; transform:translateY(8px);
}
.pf:hover .ttl{opacity:1; transform:translateY(0);}
.pf-1{grid-column:span 5; grid-row:span 2;}
.pf-2{grid-column:span 4;}
.pf-3{grid-column:span 3; grid-row:span 2;}
.pf-4{grid-column:span 4;}
.pf-5{grid-column:span 3;}
.pf-6{grid-column:span 4;}
.pf-7{grid-column:span 5;}
.pf-8{grid-column:span 4;}

.img-1{background:linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);}
.img-2{background:linear-gradient(135deg, #2C3E50 0%, #34495E 100%);}
.img-3{background:linear-gradient(135deg, #F39C12 0%, #E67E22 100%);}
.img-4{background:linear-gradient(135deg, #16A085 0%, #1ABC9C 100%);}
.img-5{background:linear-gradient(135deg, #8E44AD 0%, #9B59B6 100%);}
.img-6{background:linear-gradient(135deg, #2980B9 0%, #3498DB 100%);}
.img-7{background:linear-gradient(135deg, #D35400 0%, #E67E22 100%);}
.img-8{background:linear-gradient(135deg, #27AE60 0%, #2ECC71 100%);}
.img-9{background:linear-gradient(135deg, #16A085 0%, #2C3E50 100%);}
.img-10{background:linear-gradient(135deg, #E91E63 0%, #FF5722 100%);}
.img-11{background:linear-gradient(135deg, #607D8B 0%, #455A64 100%);}
.img-12{background:linear-gradient(135deg, #FF6B6B 0%, #C44569 100%);}

/* ====== APPAREL BRANDS ====== */
.brands-bar{background:var(--gray-50); padding:50px 0;}
.brands-bar .row{display:grid; grid-template-columns:repeat(6,1fr); gap:24px; align-items:center;}
.brand-card{
  background:#fff; border:1px solid var(--gray-100); border-radius:12px;
  height:90px; display:flex; align-items:center; justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1rem;
  color:var(--gray-700); transition:.15s;
}
.brand-card:hover{border-color:var(--gray-300); color:var(--gray-900);}

/* ====== AUDIENCES ====== */
.audience-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.audience{
  padding:30px; border-radius:var(--radius); border:1px solid var(--gray-100);
  transition:.2s; cursor:pointer; background:#fff; position:relative; overflow:hidden;
}
.audience:hover{border-color:var(--gray-900); box-shadow:var(--shadow-md);}
.audience .num-badge{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:.95rem; color:var(--gray-900);
  background:var(--yellow); padding:6px 12px; border-radius:999px;
  margin-bottom:18px; letter-spacing:.04em;
}
.audience h3{font-size:1.15rem; margin-bottom:8px;}
.audience ul{list-style:none; margin-top:10px;}
.audience ul li{font-size:.88rem; color:var(--gray-700); padding:2px 0; display:flex; align-items:center; gap:8px;}
.audience ul li::before{content:""; width:4px; height:4px; background:var(--gray-900); border-radius:50%;}

/* ====== TESTIMONIAL ====== */
.testimonials{background:var(--gray-50);}
.test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.test{
  background:#fff; border-radius:var(--radius); padding:30px; border:1px solid var(--gray-100);
}
.test .stars{color:var(--yellow); font-size:1.05rem; letter-spacing:2px; margin-bottom:14px;}
.test p{font-size:1rem; color:var(--gray-900); margin-bottom:18px;}
.test .who{display:flex; align-items:center; gap:12px;}
.test .who .av{width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg, #FFD600, #FF9100); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff;}
.test .who .nm{font-weight:700; font-size:.92rem;}
.test .who .ti{font-size:.8rem; color:var(--gray-500);}

/* ====== EXPRESS BANNER ====== */
.express-banner{
  background:linear-gradient(90deg, var(--yellow) 0%, var(--yellow-dark) 100%);
  padding:14px 0; position:relative; overflow:hidden;
}
.express-banner .container{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.express-banner .text{font-weight:600; font-size:.95rem; color:var(--gray-900); display:flex; align-items:center; gap:14px;}
.express-banner .text .tag{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:.08em;
  background:var(--gray-900); color:var(--yellow); padding:5px 12px; border-radius:6px;
  font-size:.78rem; text-transform:uppercase;
}
.express-banner .text strong{font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;}

/* ====== BREADCRUMB ====== */
.breadcrumb{padding:18px 0; background:var(--gray-50); border-bottom:1px solid var(--gray-100); font-size:.85rem;}
.breadcrumb .container{display:flex; align-items:center; gap:8px; color:var(--gray-500);}
.breadcrumb a{color:var(--gray-500); transition:.15s;}
.breadcrumb a:hover{color:var(--gray-900);}
.breadcrumb .sep{opacity:.4;}
.breadcrumb .current{color:var(--gray-900); font-weight:600;}

/* ====== CATALOG (katalog.html) ====== */
.catalog-layout{display:grid; grid-template-columns:280px 1fr; gap:36px; padding:50px 0;}
.filters{position:sticky; top:90px; align-self:start; background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius); padding:24px;}
.filters h3{font-size:1rem; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--gray-100); display:flex; justify-content:space-between; align-items:center;}
.filter-group{border-bottom:1px solid var(--gray-100); padding:16px 0;}
.filter-group:last-child{border-bottom:none;}
.filter-group h4{font-size:.92rem; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; cursor:pointer;}
.filter-group h4 .count{color:var(--gray-500); font-size:.78rem; font-weight:500;}
.filter-list{list-style:none; max-height:180px; overflow-y:auto;}
.filter-list li{padding:6px 0; font-size:.88rem; color:var(--gray-700); display:flex; align-items:center; gap:8px; cursor:pointer;}
.filter-list li:hover{color:var(--gray-900);}
.filter-list input[type="checkbox"]{accent-color:var(--gray-900);}
.filter-list .num{margin-left:auto; color:var(--gray-500); font-size:.78rem;}
.color-swatches{display:grid; grid-template-columns:repeat(6,1fr); gap:8px;}
.color-swatches span{aspect-ratio:1/1; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:.15s; box-shadow:inset 0 0 0 1px var(--gray-300);}
.color-swatches span:hover{border-color:var(--gray-900);}
.price-range{display:flex; gap:8px; margin-top:8px;}
.price-range input{flex:1; padding:8px; border:1.5px solid var(--gray-300); border-radius:8px; font-size:.85rem;}
.filters-clear{background:none; border:none; color:var(--gray-700); font-size:.82rem; cursor:pointer; text-decoration:underline;}

.catalog-toolbar{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 18px; background:#fff; border:1px solid var(--gray-100); border-radius:var(--radius); margin-bottom:22px; flex-wrap:wrap;}
.catalog-toolbar .count-result{font-size:.92rem; color:var(--gray-700);}
.catalog-toolbar .count-result strong{color:var(--gray-900);}
.catalog-toolbar .right{display:flex; gap:12px; align-items:center;}
.catalog-toolbar select{padding:8px 12px; border:1.5px solid var(--gray-300); border-radius:8px; font-size:.88rem; background:#fff; cursor:pointer;}
.view-toggle{display:flex; gap:0; border:1.5px solid var(--gray-300); border-radius:8px; overflow:hidden;}
.view-toggle button{padding:8px 10px; background:#fff; border:none; cursor:pointer; color:var(--gray-700); transition:.15s;}
.view-toggle button.on{background:var(--gray-900); color:#fff;}

.catalog-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
.pagination{display:flex; justify-content:center; gap:6px; margin-top:50px;}
.pagination button{
  min-width:40px; height:40px; border:1.5px solid var(--gray-300); border-radius:8px;
  background:#fff; cursor:pointer; font-weight:600; transition:.15s; color:var(--gray-700);
}
.pagination button:hover{border-color:var(--gray-900); color:var(--gray-900);}
.pagination button.on{background:var(--gray-900); color:#fff; border-color:var(--gray-900);}

/* ====== PRODUCT PAGE (produkt.html) ====== */
.product-page{padding:40px 0 80px;}
.product-page-grid{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:50px;
  align-items:start;
}
.gallery{
  display:grid; grid-template-columns:72px minmax(0, 1fr); gap:14px;
  max-width:520px;
}
.thumbs{display:flex; flex-direction:column; gap:10px;}
.thumbs .thumb{
  width:72px; height:72px; border-radius:10px; cursor:pointer;
  border:2px solid transparent; transition:.15s; display:flex; align-items:center; justify-content:center;
  padding:6px;
}
.thumbs .thumb.on{border-color:var(--gray-900);}
.thumbs .thumb .thumb-lbl{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  color:rgba(255,255,255,.95); font-size:.65rem; letter-spacing:.04em; text-align:center;
}
.main-image{
  aspect-ratio:1/1; border-radius:var(--radius); position:relative;
  display:flex; align-items:center; justify-content:center; padding:30px;
  max-width:440px; max-height:440px; width:100%;
}
.main-image .main-lbl{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:900;
  color:rgba(255,255,255,.95); text-align:center; line-height:1; letter-spacing:-0.03em;
  text-shadow:0 4px 20px rgba(0,0,0,.18);
}
.main-image .main-lbl .ml-sku{display:block; font-size:2.6rem;}
.main-image .main-lbl .ml-name{display:block; font-size:.82rem; font-weight:600; margin-top:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.85;}
.zoom-icon{position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); cursor:pointer;}

.product-info h1{font-size:2rem; line-height:1.2; margin-bottom:8px;}
.product-info .sku-line{display:flex; gap:16px; align-items:center; margin-bottom:16px; flex-wrap:wrap;}
.product-info .sku-line .sku{font-size:.85rem; color:var(--gray-500);}
.product-info .sku-line .stars{color:var(--yellow); letter-spacing:1px;}
.product-info .sku-line .reviews{font-size:.85rem; color:var(--gray-700);}
.price-block{background:var(--gray-50); padding:20px 22px; border-radius:var(--radius); margin-bottom:22px;}
.price-block .from{font-size:.78rem; color:var(--gray-500); text-transform:uppercase; letter-spacing:.04em;}
.price-block .price{font-family:'Plus Jakarta Sans',sans-serif; font-size:2.2rem; font-weight:800; color:var(--gray-900); line-height:1;}
.price-block .vat{font-size:.85rem; color:var(--gray-700); margin-top:4px;}

.option-block{margin-bottom:22px;}
.option-block .lbl-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.option-block label{font-size:.85rem; font-weight:600; color:var(--gray-700); text-transform:uppercase; letter-spacing:.04em;}
.option-block .picked{font-size:.85rem; color:var(--gray-900); font-weight:600;}
.color-grid{display:flex; gap:8px; flex-wrap:wrap;}
.color-grid span{
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; box-shadow:inset 0 0 0 1px var(--gray-300);
  transition:.15s;
}
.color-grid span.on{border-color:var(--gray-900); transform:scale(1.05);}
.color-grid span:hover{border-color:var(--gray-700);}
.size-grid{display:flex; gap:8px; flex-wrap:wrap;}
.size-grid span{
  min-width:48px; padding:10px 14px; border:1.5px solid var(--gray-300); border-radius:8px;
  text-align:center; font-weight:600; cursor:pointer; transition:.15s; font-size:.92rem;
}
.size-grid span:hover{border-color:var(--gray-900);}
.size-grid span.on{background:var(--gray-900); color:#fff; border-color:var(--gray-900);}
.size-grid span.disabled{opacity:.3; cursor:not-allowed; text-decoration:line-through;}

.qty-row{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; margin-bottom:18px;}
.qty-control{display:flex; align-items:center; border:1.5px solid var(--gray-300); border-radius:8px; overflow:hidden;}
.qty-control button{width:42px; height:42px; background:#fff; border:none; cursor:pointer; font-weight:800; font-size:1.1rem;}
.qty-control button:hover{background:var(--gray-100);}
.qty-control input{width:60px; text-align:center; border:none; padding:10px; font-size:1rem; font-weight:600; -moz-appearance:textfield;}
.qty-control input::-webkit-outer-spin-button, .qty-control input::-webkit-inner-spin-button{-webkit-appearance:none;}

.actions-row{display:flex; gap:10px; margin-top:6px;}
.actions-row .btn{flex:1;}

.features-list{margin-top:30px; padding-top:24px; border-top:1px solid var(--gray-100);}
.features-list .feat{display:flex; gap:14px; padding:10px 0; align-items:start;}
.features-list .feat .ico{
  width:36px; height:36px; flex-shrink:0; background:var(--yellow); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:.95rem; color:var(--gray-900);
}
.features-list .feat strong{display:block; color:var(--gray-900); margin-bottom:2px;}
.features-list .feat span{font-size:.85rem; color:var(--gray-700);}

/* Product page tabs */
.tabs{margin-top:60px; border-top:1px solid var(--gray-100); padding-top:40px;}
.tab-nav{display:flex; gap:6px; border-bottom:1px solid var(--gray-100); margin-bottom:30px; overflow-x:auto;}
.tab-nav button{
  padding:14px 22px; background:transparent; border:none; border-bottom:2px solid transparent;
  font-weight:600; cursor:pointer; color:var(--gray-700); transition:.15s; white-space:nowrap;
}
.tab-nav button.on{color:var(--gray-900); border-color:var(--yellow);}
.tab-content{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.tab-content h3{margin-bottom:14px;}
.spec-table{width:100%;}
.spec-table tr{border-bottom:1px solid var(--gray-100);}
.spec-table td{padding:10px 0; font-size:.9rem;}
.spec-table td:first-child{color:var(--gray-700); width:40%;}
.spec-table td:last-child{color:var(--gray-900); font-weight:600;}

/* ====== EKSPRES PAGE ====== */
.hero-ekspres{
  background:linear-gradient(135deg, var(--yellow) 0%, var(--yellow-dark) 100%);
  padding:70px 0 90px; position:relative; overflow:hidden;
}
.hero-ekspres::before{
  content:""; position:absolute; right:-100px; bottom:-100px; width:400px; height:400px;
  background:rgba(0,0,0,.05); border-radius:50%;
}
.hero-ekspres .container{position:relative;}
.hero-ekspres .eyebrow{background:var(--gray-900); color:var(--yellow);}
.hero-ekspres h1{max-width:780px;}
.hero-ekspres p.lead{font-size:1.1rem; color:var(--gray-900); margin-top:18px; max-width:600px;}
.hero-ekspres .countdown{
  display:inline-flex; align-items:center; gap:18px; background:var(--gray-900); color:#fff;
  padding:14px 24px; border-radius:14px; margin-top:30px; font-weight:700;
}
.hero-ekspres .countdown .num{font-family:'Plus Jakarta Sans',sans-serif; font-size:1.5rem; color:var(--yellow);}

.conditions-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
.condition{
  padding:30px; border-radius:var(--radius); border:1px solid var(--gray-100); background:#fff;
  position:relative; transition:.2s;
}
.condition:hover{border-color:var(--gray-900); box-shadow:var(--shadow-md);}
.condition .num{
  position:absolute; top:-18px; right:24px;
  width:42px; height:42px; background:var(--yellow); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1.15rem;
}
.condition h3{margin-bottom:8px;}
.condition p{font-size:.92rem;}

.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; margin-top:40px;}
.timeline::before{content:""; position:absolute; top:24px; left:5%; right:5%; height:2px; background:var(--gray-300); z-index:0;}
.tl-step{position:relative; z-index:1; text-align:center;}
.tl-step .circle{
  width:48px; height:48px; background:var(--yellow); border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; border:4px solid #fff;
}
.tl-step strong{display:block; color:var(--gray-900); font-size:1rem; margin-bottom:4px;}
.tl-step span{font-size:.85rem; color:var(--gray-700);}
.tl-step .time{
  display:inline-block; background:var(--gray-900); color:var(--yellow); padding:2px 8px;
  border-radius:6px; font-size:.72rem; font-weight:700; margin-top:8px;
}

/* ====== FAQ ====== */
.faq-list{max-width:780px; margin:0 auto;}
.faq-item{
  border:1px solid var(--gray-100); border-radius:var(--radius); margin-bottom:12px;
  background:#fff; overflow:hidden;
}
.faq-q{
  padding:20px 24px; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  font-weight:600; color:var(--gray-900); transition:.15s;
}
.faq-q:hover{background:var(--gray-50);}
.faq-q .icon{
  width:28px; height:28px; background:var(--yellow); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0;
}
.faq-a{padding:0 24px 22px; color:var(--gray-700); font-size:.95rem; display:none;}
.faq-item.open .faq-a{display:block;}
.faq-item.open .faq-q .icon{background:var(--gray-900); color:var(--yellow);}

/* ====== FOOTER ====== */
footer{background:var(--gray-900); color:#bcbcbc; padding:70px 0 0;}
.ftr-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:50px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1);}
.ftr-brand p{color:#9a9a9a; margin-top:18px; font-size:.92rem; max-width:320px;}
.ftr-socials{display:flex; gap:10px; margin-top:18px;}
.ftr-socials a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.ftr-socials a:hover{background:var(--yellow); color:var(--gray-900);}
.ftr-col h4{color:#fff; margin-bottom:18px; font-size:1rem;}
.ftr-col ul{list-style:none;}
.ftr-col ul li{margin-bottom:10px;}
.ftr-col ul li a{font-size:.92rem; transition:.15s;}
.ftr-col ul li a:hover{color:var(--yellow);}
.ftr-contact div{margin-bottom:14px; font-size:.92rem;}
.ftr-contact strong{color:#fff; display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px;}
.ftr-bottom{display:flex; justify-content:space-between; padding:24px 0; font-size:.85rem; flex-wrap:wrap; gap:14px;}
.ftr-bottom .links{display:flex; gap:22px;}
.ftr-bottom .links a:hover{color:var(--yellow);}

/* ====== RESPONSIVE ====== */
@media (max-width:1024px){
  .design-process{grid-template-columns:1fr; gap:14px;}
  .design-arrow{transform:rotate(90deg); justify-self:center;}
  .hero .container, .calc-grid, .design-box, .ftr-grid, .product-page-grid{grid-template-columns:1fr;}
  .product-page-grid{gap:30px;}
  .gallery{max-width:100%; margin:0 auto;}
  .main-image{max-width:380px; max-height:380px; margin:0 auto;}
  .product-grid, .svc-grid, .audience-grid, .test-grid, .brands-bar .row{grid-template-columns:repeat(2, 1fr);}
  .portfolio-grid{grid-template-columns:repeat(6,1fr);}
  .pf-1, .pf-2, .pf-3, .pf-4, .pf-5, .pf-6, .pf-7, .pf-8{grid-column:span 3; grid-row:span 1;}
  .catalog-layout{grid-template-columns:1fr;}
  .filters{position:static;}
  .catalog-grid{grid-template-columns:repeat(2, 1fr);}
  .conditions-grid, .timeline{grid-template-columns:repeat(2, 1fr);}
  .timeline::before{display:none;}
  .tab-content{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .product-grid, .svc-grid, .audience-grid, .test-grid, .brands-bar .row{grid-template-columns:1fr 1fr;}
  .hero-stats{flex-wrap:wrap; gap:18px;}
  section{padding:60px 0;}
  .calc-wrap, .design-box{padding:28px;}
  .catalog-grid, .conditions-grid, .timeline{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr;}
  .thumbs{flex-direction:row; overflow-x:auto;}
}