/* ============================================================
   Pikselis — component layer on top of the Taisyk kit
   (loads AFTER kit.css + pages.css; same-specificity later wins)
   ============================================================ */

/* header accent token (active/hover colour that must stay visible on a dark header) */
:root,[data-theme="teal"]{--header-accent:var(--teal);--hero-sub:var(--fg-1)}
[data-theme="navy"]{--header-accent:var(--orange);--hero-sub:rgba(255,255,255,.82)}
[data-theme="cyan"]{--header-accent:var(--teal);--hero-sub:var(--fg-1)}

body{-webkit-font-smoothing:antialiased;background:var(--white)}
.page{background:var(--white)}

/* ---------- buttons: gradient / branded CTA ---------- */
.btn{border-radius:var(--r-sm);font-weight:var(--w-semibold)}
.btn--orange{background:var(--cta-bg);border-color:transparent;color:#fff;box-shadow:var(--cta-shadow)}
.btn--orange:hover{background:var(--cta-bg);border-color:transparent;filter:brightness(.96)}
.btn--orange:active{filter:brightness(.9)}
.btn--teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.btn--ghost{background:#fff;color:var(--teal);border-color:var(--teal)}
.btn--ghost:hover{background:var(--teal-tint)}
.link{font-weight:var(--w-semibold)}

/* ---------- header (token-driven; navy theme goes dark) ---------- */
.appheader{background:var(--header-bg);position:relative;z-index:30}
.appheader .topstrip{color:var(--header-dim)}
.appheader .topstrip .cell{color:var(--header-dim)}
.appheader .topstrip .cell .material-symbols-rounded{color:var(--header-dim)}
.appheader .nav{border-top:1px solid var(--header-line)}
.appheader .nav .links a{color:var(--header-fg)}
.appheader .nav .links a:hover,.appheader .nav .links a.active{color:var(--header-accent)}
.appheader .nav .links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--header-accent)}
.appheader .brand .wm{color:var(--header-fg)}
.appheader .nav .tools .ic{color:var(--header-icon)}
.appheader .nav .tools .ic:hover{color:var(--header-accent)}
.badge{background:var(--orange);font-weight:var(--w-bold)}
[data-theme="navy"] .appheader .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
[data-theme="navy"] .appheader .btn--ghost:hover{background:rgba(255,255,255,.12)}
.langsel{cursor:pointer}

/* theme switcher (lives in the top strip) */
.themesw{display:flex;align-items:center;gap:9px}
.themesw .lbl{font:var(--w-medium) 13px/1 var(--font);color:var(--header-dim)}
.themesw .sw{width:20px;height:20px;border-radius:6px;cursor:pointer;border:2px solid transparent;outline:1.5px solid var(--header-line);outline-offset:1px;transition:.15s;padding:0}
.themesw .sw:hover{transform:scale(1.08)}
.themesw .sw.on{border-color:var(--header-bg);outline-color:var(--header-accent);outline-width:2px}
.themesw .sw.s-navy{background:linear-gradient(135deg,#204282,#0F3171)}
.themesw .sw.s-teal{background:linear-gradient(135deg,#00A79D,#80C08A)}
.themesw .sw.s-cyan{background:linear-gradient(135deg,#0099CF,#44D3E2)}

/* ---------- brand mark ---------- */
.pmark{display:block;flex:none}

/* ============================================================
   GLYPH-TILE IMAGERY SYSTEM  (Pikselis = "pixel")
   consistent placeholder used everywhere a product photo would go
   ============================================================ */
.ptile{width:100%;height:100%;border-radius:var(--r-md);background:var(--tile-grad);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ptile::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(20,35,59,.05) 1.3px, transparent 1.6px);
  background-size:13px 13px;opacity:.7}
.ptile::after{content:"";position:absolute;right:12px;top:12px;width:22px;height:22px;border-radius:4px;
  background:
    linear-gradient(var(--tile-glyph),var(--tile-glyph)) 0 0/9px 9px no-repeat,
    linear-gradient(var(--tile-glyph),var(--tile-glyph)) 13px 13px/9px 9px no-repeat;
  opacity:.35}
.ptile .material-symbols-rounded{font-size:84px;color:var(--tile-glyph);position:relative;
  font-variation-settings:'wght' 250,'opsz' 48,'GRAD' 0}
.ptile--xl .material-symbols-rounded{font-size:168px}
.ptile--cart .material-symbols-rounded{font-size:46px}
.ptile--sm .material-symbols-rounded{font-size:26px}
.ptile--sm::after,.ptile--cart::after{display:none}
.ptile--ghost{background:rgba(255,255,255,.13)}
.ptile--ghost .material-symbols-rounded{color:rgba(255,255,255,.92)}
.ptile--ghost::before{background-image:radial-gradient(circle, rgba(255,255,255,.18) 1.3px, transparent 1.6px)}
.ptile--photo{background:#fff;border:1px solid var(--line)}
.ptile--photo::before,.ptile--photo::after{display:none}
.ptile--photo img{max-width:84%;max-height:84%;object-fit:contain;position:relative}
.ptile--xl.ptile--photo img{max-width:78%;max-height:78%}
.ptile--cart.ptile--photo img{max-width:80%;max-height:80%}
.ptile--sm.ptile--photo img{max-width:86%;max-height:86%}
.ptile--ghost::after{opacity:.3;
  background:
    linear-gradient(#fff,#fff) 0 0/9px 9px no-repeat,
    linear-gradient(#fff,#fff) 13px 13px/9px 9px no-repeat}

/* kit.css `.section{padding:72px 0 8px}` shorthand zeroes the horizontal
   .wrap padding; restore it for every section that is also a .wrap */
.section.wrap{padding-left:clamp(40px,7.2vw,130px);padding-right:clamp(40px,7.2vw,130px)}

/* product card uses the tile in its photo slot */
.prod{position:relative}
.prod .ph{height:184px;padding:0;position:relative;z-index:1}
.prod .name{font-weight:var(--w-bold)}
.prod .tag{background:var(--orange);z-index:4}
.prod .sale{color:var(--sale)}
.prod .fav{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(20,35,59,.16);
  display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:20px;z-index:4;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.prod .fav:hover{background:#fff;transform:scale(1.06)}
.gallery .main{background:transparent;padding:0}
.gallery .main .ptile{height:100%}
.gallery .main .tag{z-index:2}
.thumb .ptile{width:100%;height:100%}
.citem .img .ptile,.sitem .ph .ptile,.order .ob .img .ptile{border-radius:var(--r-sm)}
.pdp-info .sale{color:var(--sale)}
.summary .total .big{color:var(--sale)}

/* ============================================================
   HERO
   ============================================================ */
.phero{position:relative;background:var(--hero-grad);overflow:hidden}
/* The platform caps every <section> inside #container at 1440px and centers it.
   The hero is a full-bleed <div> (background must reach the edges), so its
   inner content is pinned to the same 1440 rail by hand — otherwise the hero
   text and the sections below start at different x. */
.phero .inner{max-width:1440px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
.phero .inner{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center;min-height:480px;padding-top:60px;padding-bottom:60px}
.phero .eyebrow{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.6);color:var(--teal);font:var(--w-semibold) 13px/1 var(--font);margin-bottom:20px}
[data-theme="navy"] .phero .eyebrow{background:rgba(255,255,255,.14);color:#fff}
.phero .eyebrow .material-symbols-rounded{font-size:17px}
.phero h1{font:var(--w-semibold) 54px/1.08 var(--font);color:var(--hero-ink);letter-spacing:-.025em;margin:0 0 18px;max-width:560px}
.phero .lede{font:var(--w-regular) 18px/1.6 var(--font);color:var(--hero-sub);margin:0 0 30px;max-width:460px}
.phero .hcta{display:flex;gap:14px;flex-wrap:wrap}
.phero .htrust{display:flex;gap:26px;margin-top:30px;flex-wrap:wrap}
.phero .htrust .ht{display:flex;align-items:center;gap:9px;font:var(--w-medium) 14px/1.3 var(--font);color:var(--hero-sub)}
.phero .htrust .ht .material-symbols-rounded{font-size:20px;color:var(--hero-ink);opacity:.85}

/* floating product-card composition */
.hstage{position:relative;height:440px}
.htile{position:absolute;width:212px;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-float);padding:14px;transition:transform .25s}
.htile:hover{transform:translateY(-4px)}
.htile .hph{height:128px;margin-bottom:10px}
.htile .hn{font:var(--w-bold) 14px/1.3 var(--font);color:var(--ink)}
.htile .hp{font:var(--w-bold) 15px/1 var(--font);color:var(--sale);margin-top:7px}
.htile.t1{left:18px;top:24px;z-index:2}
.htile.t2{right:6px;top:90px;z-index:3;width:224px}
.htile.t3{left:64px;bottom:8px;z-index:4;width:204px}
.hbubble{position:absolute;right:30px;top:18px;z-index:5;width:78px;height:78px;border-radius:50%;
  background:var(--cta-bg);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:var(--cta-shadow);transform:rotate(8deg)}
.hbubble b{font:var(--w-bold) 22px/1 var(--font)}
.hbubble span{font:var(--w-semibold) 10px/1.2 var(--font);margin-top:2px}
.hpix{position:absolute;left:-6px;bottom:46px;z-index:1;display:grid;grid-template-columns:repeat(3,16px);gap:6px}
.hpix i{width:16px;height:16px;border-radius:4px;background:var(--teal);opacity:.9}
.hpix i:nth-child(2){background:var(--orange-soft)}
.hpix i:nth-child(3){opacity:0}
.hpix i:nth-child(4){background:var(--orange);opacity:.55}
.hpix i:nth-child(5){opacity:0}
.hpix i:nth-child(7){opacity:0}

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.catgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.catcard{background:var(--bg-soft);border-radius:var(--r-lg);padding:24px 16px;text-align:center;cursor:pointer;
  border:1px solid transparent;transition:.18s}
.catcard:hover{background:#fff;border-color:var(--line);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.catcard .cic{width:56px;height:56px;margin:0 auto 14px;border-radius:14px;background:var(--teal-tint);
  display:flex;align-items:center;justify-content:center}
.catcard .cic .material-symbols-rounded{font-size:30px;color:var(--teal);font-variation-settings:'wght' 300}
.catcard .cn{font:var(--w-semibold) 15px/1.25 var(--font);color:var(--ink)}
.catcard .cc{font:var(--w-regular) 13px/1 var(--font);color:var(--fg-3);margin-top:5px}

/* ============================================================
   BENEFITS / TRUST ROW
   ============================================================ */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 30px}
.benefit{display:flex;align-items:center;gap:15px}
.benefit .bic{width:46px;height:46px;flex:none;border-radius:12px;background:var(--teal-tint);
  display:flex;align-items:center;justify-content:center}
.benefit .bic .material-symbols-rounded{font-size:24px;color:var(--teal)}
.benefit .bt b{display:block;font:var(--w-semibold) 15px/1.3 var(--font);color:var(--ink)}
.benefit .bt span{display:block;font:var(--w-regular) 13px/1.4 var(--font);color:var(--fg-2);margin-top:3px}

/* ============================================================
   PROMO (Pikselis variants)
   ============================================================ */
.promo--brand{background:var(--promo-grad)}
.promo--navy{background:linear-gradient(120deg,#243A76 0%,#204282 55%,#0F3171 100%)}
.promo .device{width:280px}
.promo .device .ptile{width:200px;height:200px}
.promo .btn--white{font-weight:var(--w-semibold);box-shadow:0 6px 18px rgba(16,33,71,.18)}
.promo--brand .btn--white,.promo--navy .btn--white{color:var(--pk-navy-ink)}

/* ---------- reviews quote colour follows accent ---------- */
.rev .q{color:var(--teal)}
.rev .q.alt{color:var(--orange)}
.stars{color:var(--orange);font-size:15px;letter-spacing:1.5px}
.rev .stars{font-size:14px}

/* ---------- checkout extras ---------- */
.summary .pay-icons{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.summary .pay-icons span{height:26px;padding:0 9px;border-radius:5px;border:1px solid var(--line-2);background:#fff;
  display:flex;align-items:center;font:var(--w-bold) 11px/1 var(--font);color:var(--fg-2);letter-spacing:.02em}
.secure-note{display:flex;align-items:center;gap:8px;margin-top:16px;font:var(--w-regular) 13px/1.4 var(--font);color:var(--fg-3)}
.secure-note .material-symbols-rounded{font-size:18px;color:var(--success)}

/* delivery step (checkout) reuse */
.checkout-grid{display:grid;grid-template-columns:1fr 372px;gap:36px;align-items:start;padding-bottom:64px}
.cform{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 30px}
.cform h3{font:var(--w-semibold) 19px/1 var(--font);color:var(--ink);margin:0 0 20px;display:flex;align-items:center;gap:10px}
.cform h3 .material-symbols-rounded{font-size:22px;color:var(--teal)}
.cform .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.cform + .cform{margin-top:20px}
.deliv-row{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line-2);border-radius:var(--r-md);padding:16px 18px;cursor:pointer;transition:.15s;margin-bottom:12px}
.deliv-row:hover{border-color:var(--teal)}
.deliv-row.on{border-color:var(--teal);background:var(--teal-tint)}
.deliv-row .radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;display:flex;align-items:center;justify-content:center}
.deliv-row.on .radio{border-color:var(--teal)}
.deliv-row.on .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--teal)}
.deliv-row .dn{font:var(--w-semibold) 15px/1.3 var(--font);color:var(--ink)}
.deliv-row .ds{font:var(--w-regular) 13px/1.3 var(--font);color:var(--fg-3);margin-top:2px}
.deliv-row .dp{margin-left:auto;font:var(--w-bold) 15px/1 var(--font);color:var(--ink)}

/* order-success */
.success{text-align:center;padding:30px 0 60px;max-width:560px;margin:0 auto}
.success .ok{width:88px;height:88px;border-radius:50%;background:var(--teal-tint);color:var(--teal);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.success .ok .material-symbols-rounded{font-size:50px}
.success h1{font:var(--w-semibold) 34px/1.15 var(--font);color:var(--ink);margin:0 0 12px}
.success p{font:var(--w-regular) 16px/1.6 var(--font);color:var(--fg-2);margin:0 0 8px}
.success .ordno{font:var(--w-bold) 16px/1 var(--font);color:var(--teal)}
.success .acts{display:flex;gap:14px;justify-content:center;margin-top:30px}

/* card-style tweak: outlined instead of soft shadow */
.cards-outline .prod{box-shadow:none;border:1px solid var(--line)}
.cards-outline .prod:hover{box-shadow:none;border-color:var(--teal);transform:translateY(-2px)}

/* headings a touch bolder for retail punch */
.sec-head h2{font-weight:var(--w-semibold);letter-spacing:-.01em}
.pagehead h1{font-weight:var(--w-semibold)}

/* footer tweaks */
.footer{margin-top:80px;background:var(--bg-soft)}
.footer .tagline{font:var(--w-regular) 14px/1.6 var(--font);color:var(--fg-2);margin-top:16px;max-width:240px}
.footer .made{font:var(--w-medium) 13px/1 var(--font);color:var(--fg-3)}
.footer .made b{color:var(--teal);font-weight:var(--w-semibold)}

/* responsive niceties */
@media (max-width:1080px){
  .phero .inner{grid-template-columns:1fr;gap:24px;min-height:0;padding-top:44px;padding-bottom:44px}
  .hstage{height:360px;max-width:480px}
  .catgrid{grid-template-columns:repeat(3,1fr)}
  .benefits{grid-template-columns:repeat(2,1fr);gap:18px}
  .prod-rail{grid-template-columns:repeat(2,1fr)}
  .shop{grid-template-columns:1fr}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .pdp{grid-template-columns:1fr;gap:32px}
  .cart,.checkout-grid{grid-template-columns:1fr}
}