/* ShipItAll design system — v1.0.0.31 Refined retail aesthetic: green ink, honey accent, elevated cards, Fraunces / Spline Sans type pairing, staggered reveals. */ :root{ --sia-primary:#1e3a8a; --sia-primary-deep:#16306e; --sia-cta:#2563eb; --sia-accent:#2563eb; --sia-ink:#16213a; --sia-muted:#6e7689; --sia-line:#e2e6ee; --sia-bg:#fcfdff; --sia-surface:#ffffff; --sia-surface-alt:#eef2f8; --sia-radius:14px; --sia-radius-sm:10px; --sia-max:1320px; --sia-shadow:0 1px 2px rgba(22,33,58,.06),0 8px 24px rgba(22,33,58,.06); --sia-shadow-lg:0 12px 40px rgba(22,33,58,.15); --sia-display:"Fraunces",Georgia,serif; --sia-body:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;font-size:90%} body{margin:0;font-family:var(--sia-body);color:var(--sia-ink);background:var(--sia-bg);line-height:1.55;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:var(--sia-display);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0} .sia-container{width:100%;max-width:var(--sia-max);margin:0 auto;padding:0 20px} .sia-skip{position:absolute;left:-9999px} .sia-skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:1000} /* ---------- Announcement ---------- */ .sia-announce{background:var(--sia-accent);color:#fff;font-size:0.833rem;font-weight:500;text-align:center;padding:9px 0;letter-spacing:.01em;overflow:hidden} .sia-announce .sia-container{display:flex;align-items:center;justify-content:center;gap:14px} .sia-announce-msg,.sia-announce-pill{display:inline-block} /* 1 Classic = base */ /* 2 Gradient */ .sia-announce--gradient{background:linear-gradient(90deg,var(--sia-accent),var(--sia-primary));background-size:200% 100%;animation:siaAnnGrad 8s ease infinite} @keyframes siaAnnGrad{0%,100%{background-position:0 50%}50%{background-position:100% 50%}} /* 3 Marquee */ .sia-announce--marquee .sia-container{justify-content:flex-start;overflow:hidden;white-space:nowrap} .sia-announce-marquee{display:inline-flex;gap:60px;padding-left:100%;animation:siaMarquee 18s linear infinite} .sia-announce--marquee:hover .sia-announce-marquee{animation-play-state:paused} @keyframes siaMarquee{to{transform:translateX(-100%)}} /* 4 Ticker */ .sia-announce--ticker .sia-announce-msg{position:relative;padding:0 22px} .sia-announce--ticker .sia-announce-msg::before,.sia-announce--ticker .sia-announce-msg::after{content:"•";position:absolute;top:50%;transform:translateY(-50%);opacity:.7} .sia-announce--ticker .sia-announce-msg::before{left:0}.sia-announce--ticker .sia-announce-msg::after{right:0} /* 5 Pill */ .sia-announce--pill{background:var(--sia-bg);padding:8px 0} .sia-announce--pill .sia-announce-pill{background:var(--sia-accent);color:#fff;padding:5px 18px;border-radius:999px;font-weight:600} /* 6 Split */ .sia-announce--split .sia-container{justify-content:space-between} .sia-announce--split .sia-announce-phone{color:#fff;font-weight:700} .sia-announce--split .sia-announce-phone:hover{text-decoration:underline} /* 7 Outline / minimal */ .sia-announce--outline{background:transparent;color:var(--sia-ink);border-bottom:1px solid var(--sia-line)} .sia-announce--outline .sia-announce-msg{position:relative;padding-bottom:3px} .sia-announce--outline .sia-announce-msg::after{content:"";position:absolute;left:50%;bottom:0;width:34px;height:2px;background:var(--sia-primary);transform:translateX(-50%)} /* 8 Dark */ .sia-announce--dark{background:#101317;color:#f4f4f5} .sia-announce--dark .sia-announce-msg{font-weight:600} /* 9 Badge tag */ .sia-announce--badge .sia-announce-tag{background:#fff;color:var(--sia-accent);font-weight:800;font-size:0.833rem;letter-spacing:.04em;padding:3px 8px;border-radius:4px;margin-right:4px} /* 10 Glow */ .sia-announce--glow{background:#0c0e12;color:#fff;animation:siaGlow 3.2s ease-in-out infinite} .sia-announce--glow .sia-announce-msg{font-weight:600;text-shadow:0 0 8px rgba(255,255,255,.25)} @keyframes siaGlow{0%,100%{box-shadow:inset 0 -2px 0 var(--sia-primary)}50%{box-shadow:inset 0 -2px 0 var(--sia-accent),0 0 22px rgba(91,140,255,.35)}} @media(prefers-reduced-motion:reduce){.sia-announce--gradient,.sia-announce--glow{animation:none}.sia-announce-marquee{animation-duration:40s}} /* ---------- Header ---------- */ .sia-header{background:var(--sia-surface);position:sticky;top:0;z-index:60;box-shadow:0 1px 0 var(--sia-line)} .sia-header-inner{display:flex;align-items:center;gap:20px;padding:16px 20px;max-width:var(--sia-max);margin:0 auto} .sia-nav-toggle{display:none;font-size:1.5rem;background:none;border:0;cursor:pointer;line-height:1;color:var(--sia-ink)} .sia-branding .sia-logo-text{font-family:var(--sia-display);font-weight:800;font-size:1.625rem;letter-spacing:-.03em;color:var(--sia-ink)} .sia-branding .sia-logo-text::after{content:".";color:var(--sia-primary)} .sia-header-search{flex:1;max-width:620px} .sia-header-search form{display:flex;box-shadow:var(--sia-shadow);border-radius:999px;overflow:hidden;border:1px solid var(--sia-line)} .sia-header-search input[type=search]{flex:1;padding:13px 20px;border:0;width:100%;font-size:0.938rem;font-family:var(--sia-body);outline:none} .sia-header-search button{border:0;background:var(--sia-primary);color:#fff;padding:0 26px;cursor:pointer;font-weight:600} .sia-header-actions{display:flex;align-items:center;gap:18px;font-size:0.875rem;font-weight:600} .sia-action{display:inline-flex;align-items:center;gap:6px;color:var(--sia-ink)} .sia-action:hover{color:var(--sia-primary)} .sia-cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;font-size:0.833rem;color:#fff;background:var(--sia-primary);border-radius:10px;padding:0 6px} /* ---------- Primary nav ---------- */ .sia-primary-nav{background:var(--sia-surface);border-top:1px solid var(--sia-line)} .sia-menu{display:flex;flex-wrap:wrap;gap:2px;list-style:none;margin:0;padding:0;max-width:var(--sia-max)} .sia-menu a{display:block;padding:14px 16px;font-weight:600;font-size:0.875rem;color:var(--sia-ink);position:relative} .sia-menu a:hover{color:var(--sia-primary)} .sia-menu a:hover::after{content:"";position:absolute;left:16px;right:16px;bottom:8px;height:2px;background:var(--sia-primary);border-radius:2px} /* ==================================================================== Header layouts (data-layout on .sia-header) — v1.0.0.47 Layout 1 "classic" = the base styles above. ==================================================================== */ /* 2 Centered logo */ .sia-header[data-layout="centered"] .sia-header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center} .sia-header[data-layout="centered"] .sia-header-search{order:1;max-width:420px} .sia-header[data-layout="centered"] .sia-branding{order:2;text-align:center} .sia-header[data-layout="centered"] .sia-header-actions{order:3;justify-content:flex-end} /* 3 Search-dominant */ .sia-header[data-layout="searchbig"] .sia-header-search{max-width:none} .sia-header[data-layout="searchbig"] .sia-header-search form{box-shadow:var(--sia-shadow-lg)} /* 4 Floating pill */ .sia-header[data-layout="pill"]{background:transparent;box-shadow:none;padding:14px 0} .sia-header[data-layout="pill"] .sia-header-inner{background:var(--sia-surface);border-radius:999px;box-shadow:var(--sia-shadow-lg);padding:12px 22px;max-width:1100px} .sia-header[data-layout="pill"] .sia-header-search form{box-shadow:none} .sia-header[data-layout="pill"]+.sia-primary-nav{border:0;margin-top:6px} /* 5 Dark — matched to .sia-footer (accent bg, #aeb6c8 text, white/.08 lines) */ .sia-header[data-layout="dark"]{background:var(--sia-accent);box-shadow:none} .sia-header[data-layout="dark"] .sia-logo-text{color:#fff} .sia-header[data-layout="dark"] .sia-action{color:#aeb6c8} .sia-header[data-layout="dark"] .sia-action:hover{color:#fff} .sia-header[data-layout="dark"] .sia-nav-toggle{color:#fff} .sia-header[data-layout="dark"] .sia-header-search form{border:1px solid rgba(255,255,255,.12);box-shadow:none} .sia-header[data-layout="dark"]+.sia-primary-nav{background:var(--sia-accent);border-top:1px solid rgba(255,255,255,.08)} .sia-header[data-layout="dark"]+.sia-primary-nav .sia-menu a{color:#aeb6c8} .sia-header[data-layout="dark"]+.sia-primary-nav .sia-menu a:hover{color:#fff} /* 6 Boxed */ .sia-header[data-layout="boxed"]{background:transparent;box-shadow:none;padding-top:14px} .sia-header[data-layout="boxed"] .sia-header-inner{background:var(--sia-surface);border:1px solid var(--sia-line);border-radius:var(--sia-radius);box-shadow:var(--sia-shadow)} /* 7 Two-row */ .sia-header[data-layout="tworow"] .sia-header-inner{flex-wrap:wrap} .sia-header[data-layout="tworow"] .sia-branding{order:1} .sia-header[data-layout="tworow"] .sia-header-actions{order:2;margin-left:auto} .sia-header[data-layout="tworow"] .sia-header-search{order:3;flex:1 0 100%;max-width:none;margin-top:4px} /* 8 Minimal */ .sia-header[data-layout="minimal"] .sia-header-search{display:none} .sia-header[data-layout="minimal"] .sia-header-inner{justify-content:space-between} /* 9 Mega-store */ .sia-header[data-layout="megastore"]+.sia-primary-nav{background:var(--sia-primary)} .sia-header[data-layout="megastore"]+.sia-primary-nav .sia-menu a{color:#fff} .sia-header[data-layout="megastore"]+.sia-primary-nav .sia-menu a:hover{color:#ffd2da} .sia-header[data-layout="megastore"]+.sia-primary-nav .sia-menu a:hover::after{background:#fff} /* 10 Square rail */ .sia-header[data-layout="rail"] .sia-header-search form{border-radius:var(--sia-radius-sm);box-shadow:none} .sia-header[data-layout="rail"] .sia-action{color:var(--sia-muted)} .sia-header[data-layout="rail"] .sia-action:hover{color:var(--sia-ink)} /* 11 Gradient */ .sia-header[data-layout="gradient"]{background:linear-gradient(90deg,var(--sia-accent),var(--sia-primary));box-shadow:none} .sia-header[data-layout="gradient"] .sia-logo-text,.sia-header[data-layout="gradient"] .sia-action,.sia-header[data-layout="gradient"] .sia-nav-toggle{color:#fff} .sia-header[data-layout="gradient"] .sia-logo-text::after{color:#fff} .sia-header[data-layout="gradient"] .sia-header-search form{border:0} /* 12 Stacked center */ .sia-header[data-layout="stacked"] .sia-header-inner{flex-direction:column;gap:14px;text-align:center} .sia-header[data-layout="stacked"] .sia-header-actions{order:-1;align-self:flex-end} .sia-header[data-layout="stacked"] .sia-header-search{width:100%;max-width:560px} /* 13 Action pills */ .sia-header[data-layout="actionpills"] .sia-action{padding:9px 16px;border-radius:999px;background:var(--sia-bg)} .sia-header[data-layout="actionpills"] .sia-cart{background:var(--sia-primary);color:#fff} .sia-header[data-layout="actionpills"] .sia-cart:hover{color:#fff;filter:brightness(.94)} .sia-header[data-layout="actionpills"] .sia-cart .sia-cart-count{background:#fff;color:var(--sia-primary)} /* 14 Underline XL */ .sia-header[data-layout="underline"] .sia-logo-text{font-size:1.875rem} .sia-header[data-layout="underline"]+.sia-primary-nav .sia-menu a{padding:16px} .sia-header[data-layout="underline"]+.sia-primary-nav .sia-menu a:hover::after{left:0;right:0;bottom:0;height:3px} /* 15 Icon actions */ .sia-header[data-layout="iconactions"] .sia-action{font-size:1.125rem} .sia-header[data-layout="iconactions"] .sia-header-search{max-width:none} /* 16 Inline (no second nav bar on desktop) */ .sia-header[data-layout="inline"]+.sia-primary-nav{display:none} .sia-header[data-layout="inline"] .sia-header-inner{flex-wrap:wrap} /* 17 Soft tinted */ .sia-header[data-layout="tinted"]{background:#fff5f6} .sia-header[data-layout="tinted"] .sia-header-search form{background:#fff} /* 18 Big CTA */ .sia-header[data-layout="cta"] .sia-header-cta{display:inline-flex;align-items:center;padding:10px 18px;background:var(--sia-primary);color:#fff;border-radius:999px;font-weight:700} .sia-header[data-layout="cta"] .sia-header-cta:hover{filter:brightness(.94);color:#fff} /* 19 Editorial */ .sia-header[data-layout="editorial"] .sia-header-inner{padding:24px 20px} .sia-header[data-layout="editorial"] .sia-logo-text{font-size:2.125rem;letter-spacing:-.04em} .sia-header[data-layout="editorial"]+.sia-primary-nav{border-top:1px solid var(--sia-ink)} .sia-header[data-layout="editorial"]+.sia-primary-nav .sia-menu a{text-transform:uppercase;letter-spacing:.08em;font-size:0.833rem;color:var(--sia-muted)} /* ---------- Hero row (rail + hero + side) ---------- */ .sia-hero-row{display:grid;grid-template-columns:280px 1fr 300px;gap:20px;margin-top:24px} .sia-hero-rail{position:relative} .sia-rail{background:var(--sia-surface);border-radius:var(--sia-radius);box-shadow:var(--sia-shadow);padding:8px;height:100%} .sia-rail-list{list-style:none;margin:0;padding:0} .sia-rail-item{position:relative} .sia-rail-link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px;border-radius:var(--sia-radius-sm);font-size:0.875rem;font-weight:600;color:var(--sia-ink);transition:background .15s,color .15s} .sia-rail-item:hover>.sia-rail-link{background:var(--sia-bg);color:var(--sia-primary)} .sia-chev{font-style:normal;color:var(--sia-muted);font-size:1.125rem} .sia-rail-empty{padding:18px;color:var(--sia-muted);font-size:0.875rem;background:var(--sia-surface);border-radius:var(--sia-radius);box-shadow:var(--sia-shadow)} .sia-flyout{position:absolute;left:100%;top:-8px;min-width:560px;max-width:720px;background:var(--sia-surface);border-radius:var(--sia-radius);box-shadow:var(--sia-shadow-lg);padding:22px;opacity:0;visibility:hidden;transform:translateX(8px);transition:opacity .18s,transform .18s;z-index:70} .sia-rail-item.has-flyout:hover .sia-flyout{opacity:1;visibility:visible;transform:translateX(8px)} .sia-flyout-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 26px} .sia-flyout-head{display:block;font-weight:700;font-size:0.833rem;color:var(--sia-ink);margin-bottom:8px;letter-spacing:-.01em} .sia-flyout-head:hover{color:var(--sia-primary)} .sia-flyout-col ul{list-style:none;margin:0;padding:0} .sia-flyout-col li a{display:block;padding:3px 0;font-size:0.833rem;color:var(--sia-muted)} .sia-flyout-col li a:hover{color:var(--sia-primary)} /* Hero banner */ .sia-hero{position:relative;border-radius:var(--sia-radius);overflow:hidden;background:linear-gradient(135deg,#16306e 0%,#1e3a8a 55%,#1e2f6b 100%);color:#fff;min-height:380px;display:flex;align-items:center;box-shadow:var(--sia-shadow)} .sia-hero-content{position:relative;z-index:2;padding:48px 44px;max-width:560px} .sia-eyebrow{display:inline-block;font-size:0.833rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sia-primary);margin-bottom:14px} .sia-eyebrow.light{color:#fff;opacity:.9} .sia-hero-title{font-size:clamp(1.875rem,4vw,2.875rem);margin-bottom:14px} .sia-hero-sub{font-size:1rem;color:rgba(255,255,255,.78);margin:0 0 26px;max-width:440px} .sia-hero-glow{position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.5),transparent 65%);filter:blur(8px);z-index:1} /* Buttons */ .sia-btn{display:inline-flex;align-items:center;gap:8px;background:var(--sia-primary);color:#fff;padding:12px 22px;border-radius:999px;font-weight:700;font-size:0.875rem;transition:transform .15s,box-shadow .15s} .sia-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,58,138,.3)} .sia-btn-lg{padding:15px 30px;font-size:0.938rem} /* Side promos */ .sia-hero-side{display:grid;grid-template-rows:1fr 1fr;gap:20px} .sia-promo-mini{position:relative;border-radius:var(--sia-radius);padding:24px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--sia-shadow);overflow:hidden;transition:transform .15s} .sia-promo-mini:hover{transform:translateY(-3px)} .sia-promo-a{background:linear-gradient(150deg,#1d4ed8,#0ea5e9)} .sia-promo-b{background:linear-gradient(150deg,#059669,#10b981)} .sia-promo-kicker{position:absolute;top:16px;left:16px;font-size:0.833rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.22);padding:4px 10px;border-radius:999px} .sia-promo-mini strong{font-family:var(--sia-display);font-size:1.125rem;line-height:1.1} .sia-promo-mini em{font-style:normal;font-size:0.833rem;opacity:.9;margin-top:4px} /* ---------- Trust ---------- */ .sia-trust{margin-top:24px} .sia-trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;background:var(--sia-surface);border:1px solid var(--sia-line);border-radius:var(--sia-radius);box-shadow:var(--sia-shadow);padding:18px 22px} .sia-trust-item{display:flex;align-items:center;gap:11px;color:var(--sia-ink)} .sia-trust-ico{font-size:1.375rem;flex:0 0 auto} .sia-trust-text{display:flex;flex-direction:column;line-height:1.25} .sia-trust-text b{font-size:13.5px;font-weight:700} .sia-trust-text small{font-size:0.833rem;color:var(--sia-muted)} /* ---------- Sections ---------- */ .sia-section{margin-top:44px} .sia-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .sia-h2{font-size:clamp(1.375rem,2.4vw,1.875rem)} .sia-link-arrow{font-weight:700;font-size:0.875rem} /* Category grid */ .sia-cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .sia-cat-tile{position:relative;background:var(--sia-surface);border-radius:var(--sia-radius);box-shadow:var(--sia-shadow);padding:20px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;transition:transform .15s,box-shadow .15s;overflow:hidden;min-height:160px;justify-content:center} .sia-cat-tile:hover{transform:translateY(-4px);box-shadow:var(--sia-shadow-lg)} .sia-cat-media{width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;overflow:hidden} .sia-cat-media img{width:100%;height:100%;object-fit:cover} .sia-cat-tile .sia-cat-media:empty::before{content:"";display:block;width:100%;height:100%;border-radius:18px} .sia-cat-tile.g1 .sia-cat-media:empty::before{background:linear-gradient(135deg,#1e3a8a,#3b82f6)} .sia-cat-tile.g2 .sia-cat-media:empty::before{background:linear-gradient(135deg,#1d4ed8,#22d3ee)} .sia-cat-tile.g3 .sia-cat-media:empty::before{background:linear-gradient(135deg,#059669,#a3e635)} .sia-cat-tile.g4 .sia-cat-media:empty::before{background:linear-gradient(135deg,#7c3aed,#ec4899)} .sia-cat-tile.g5 .sia-cat-media:empty::before{background:linear-gradient(135deg,#ea580c,#f59e0b)} .sia-cat-tile.g6 .sia-cat-media:empty::before{background:linear-gradient(135deg,#0f766e,#14b8a6)} .sia-cat-name{font-weight:700;font-size:0.875rem;line-height:1.2} .sia-cat-count{font-size:0.833rem;color:var(--sia-muted)} /* Promo banners */ .sia-banner-row{display:grid;grid-template-columns:1fr 1fr;gap:20px} .sia-banner{position:relative;border-radius:var(--sia-radius);min-height:200px;display:flex;align-items:flex-end;padding:28px;color:#fff;box-shadow:var(--sia-shadow);overflow:hidden;transition:transform .15s} .sia-banner:hover{transform:translateY(-3px)} .sia-banner-1{background:linear-gradient(120deg,#111827,#374151)} .sia-banner-2{background:linear-gradient(120deg,#1e3a8a,#16306e)} .sia-banner h3{font-size:1.625rem;margin:6px 0 10px} /* Brand strip */ .sia-brand-strip{display:flex;flex-wrap:wrap;gap:12px} .sia-brand-pill{background:var(--sia-surface);border:1px solid var(--sia-line);border-radius:999px;padding:12px 22px;font-weight:700;font-size:0.875rem;color:var(--sia-ink);box-shadow:var(--sia-shadow);transition:transform .15s,color .15s} .sia-brand-pill:hover{transform:translateY(-2px);color:var(--sia-primary)} /* ---------- Generic main / archives ---------- */ .sia-main{padding:28px 20px;min-height:50vh} .sia-home{padding-bottom:32px} .sia-page-title{font-size:1.875rem;margin:0 0 18px} /* ---------- Footer ---------- */ .sia-footer{background:var(--sia-accent);color:#aeb6c8;margin-top:56px} .sia-footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:48px 20px} .sia-widget-title{color:#fff;font-size:0.938rem;margin:0 0 12px;font-family:var(--sia-display)} .sia-footer-bar{border-top:1px solid rgba(255,255,255,.08)} .sia-footer-bar .sia-container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:18px 20px} .sia-footer-menu{display:flex;gap:18px;list-style:none;margin:0;padding:0;font-size:0.833rem} .sia-copy{font-size:0.833rem;margin:0;color:#79839a} /* ---------- Back to top ---------- */ .sia-to-top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border:0;border-radius:50%;background:var(--sia-primary);color:#fff;font-size:1.25rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;box-shadow:var(--sia-shadow-lg)} .sia-to-top.is-visible{opacity:1;pointer-events:auto} .sia-to-top:hover{transform:translateY(-3px)} /* ---------- Reveal animation ---------- */ .sia-reveal{opacity:0;transform:translateY(18px);animation:siaUp .6s ease forwards} .sia-reveal:nth-child(2){animation-delay:.08s} .sia-reveal:nth-child(3){animation-delay:.16s} .sia-reveal:nth-child(4){animation-delay:.24s} .sia-reveal:nth-child(5){animation-delay:.32s} @keyframes siaUp{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.sia-reveal{animation:none;opacity:1;transform:none}} /* ---------- Responsive ---------- */ @media(max-width:1100px){ .sia-hero-row{grid-template-columns:240px 1fr} .sia-hero-side{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-column:1/-1} .sia-cat-grid{grid-template-columns:repeat(4,1fr)} } @media(max-width:880px){ .sia-nav-toggle{display:block;order:1} .sia-header-inner{flex-wrap:nowrap;gap:12px;padding:10px 16px} .sia-branding{order:2;flex:1;min-width:0} .sia-branding .sia-logo-text{font-size:1.375rem} .sia-header-search{display:none} /* search moves into the off-canvas drawer on mobile */ .sia-header-actions{order:3;gap:14px;font-size:0.833rem;flex:0 0 auto} .sia-primary-nav{display:none} /* mega bar hidden on mobile; off-canvas drawer takes over */ .sia-hero-row{grid-template-columns:1fr} .sia-hero-rail{display:none} .sia-hero-side{grid-template-columns:1fr 1fr} .sia-trust-grid{grid-template-columns:repeat(3,1fr)} .sia-cat-grid{grid-template-columns:repeat(3,1fr)} .sia-banner-row{grid-template-columns:1fr} .sia-footer-cols{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .sia-header-actions{gap:11px;font-size:0.833rem} .sia-branding .sia-logo-text{font-size:1.25rem} .sia-hero-side{grid-template-columns:1fr} .sia-cat-grid{grid-template-columns:repeat(2,1fr)} .sia-trust-grid{grid-template-columns:1fr 1fr} .sia-footer-cols{grid-template-columns:1fr} .sia-hero-content{padding:34px 26px} } /* ---- Hero slider (Step 4a) ---- */ .sia-slider{position:relative} .sia-slides{position:relative;width:100%;min-height:380px} .sia-slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .5s ease} .sia-slide.is-active{position:relative;opacity:1;visibility:visible} .sia-slide-bg{position:absolute;inset:0;z-index:0} .sia-slide-bg img{width:100%;height:100%;object-fit:cover;display:block} .sia-slide::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,12,24,.82) 0%,rgba(8,12,24,.5) 45%,rgba(8,12,24,.08) 100%)} .sia-slide .sia-hero-content{position:relative;z-index:2} .sia-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:1.625rem;line-height:1;cursor:pointer;backdrop-filter:blur(4px);transition:background .15s} .sia-slider-arrow:hover{background:rgba(255,255,255,.34)} .sia-slider-arrow.prev{left:14px} .sia-slider-arrow.next{right:14px} .sia-dots{position:absolute;left:0;right:0;bottom:16px;z-index:5;display:flex;justify-content:center;gap:8px} .sia-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:background .15s,transform .15s} .sia-dot.is-active{background:#fff;transform:scale(1.25)} @media(max-width:768px){ .sia-slides{min-height:0} .sia-slide-bg{position:relative} .sia-slide-bg img{height:auto;aspect-ratio:4/5} .sia-slide{flex-direction:column} .sia-slide .sia-hero-content{padding:26px} .sia-slider-arrow{display:none} } @media(prefers-reduced-motion:reduce){.sia-slide{transition:none}} /* ---- Promo / banner background-image variants (Step 4b) ---- */ .sia-promo-mini.has-bg{background-size:cover;background-position:center} .sia-promo-mini.has-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.62));z-index:0} .sia-promo-mini.has-bg > *{position:relative;z-index:1} .sia-banner.has-bg{background-size:cover;background-position:center} .sia-banner.has-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(0,0,0,.6),rgba(0,0,0,.18));z-index:0} .sia-banner.has-bg .sia-banner-txt{position:relative;z-index:1} /* ---- Deal carousels (Step 4d) ---- */ .sia-deals .sia-carousel{margin-top:26px} .sia-deals .sia-carousel:first-of-type{margin-top:6px} .sia-carousel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .sia-carousel-title{font-family:var(--sia-display);font-size:clamp(1.063rem,1.7vw,1.313rem);font-weight:700;letter-spacing:-.01em} .sia-carousel-nav{display:flex;align-items:center;gap:8px} .sia-carousel-all{font-size:0.833rem;font-weight:700;color:var(--sia-primary);white-space:nowrap} .sia-carousel-all:hover{text-decoration:underline} .sia-car-arrow{width:34px;height:34px;border:1px solid var(--sia-line);background:var(--sia-surface);border-radius:50%;font-size:1.25rem;line-height:1;color:var(--sia-ink);cursor:pointer;box-shadow:var(--sia-shadow);transition:color .15s,transform .15s} .sia-car-arrow:hover{color:var(--sia-primary);transform:translateY(-1px)} .sia-car-arrow[disabled]{opacity:.35;cursor:default;transform:none} .sia-carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*16px)/5);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 8px;-ms-overflow-style:none;scrollbar-width:none} @media(max-width:1100px){.sia-carousel-track{grid-auto-columns:calc((100% - 3*16px)/4)}} @media(max-width:860px){.sia-carousel-track{grid-auto-columns:calc((100% - 2*16px)/3)}} @media(max-width:600px){.sia-carousel-track{grid-auto-columns:calc((100% - 16px)/2)}} @media(max-width:600px){.sia-carousel-track{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto;overflow-x:visible;scroll-snap-type:none} .sia-carousel-track.is-capped>*{display:none} .sia-carousel-track.is-capped>.sia-cap-show{display:flex} .sia-carousel .sia-car-arrow{display:none} .sia-car-more{display:block;width:100%;margin:14px auto 0;max-width:280px;padding:12px;border:1px solid var(--sia-line);background:var(--sia-surface);border-radius:999px;font-weight:700;font-size:0.875rem;color:var(--sia-ink);cursor:pointer} .sia-car-more:hover{border-color:var(--sia-primary);color:var(--sia-primary)}} .sia-carousel-track::-webkit-scrollbar{display:none} .sia-carousel-track>*{scroll-snap-align:start} /* ---- 2-per-row homepage product grid (Featured / Best sellers / Recent) ---- */ .sia-pgrid-block{margin-top:26px} .sia-pgrid-block:first-of-type{margin-top:6px} .sia-pgrid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .sia-pgrid-cell{display:flex} .sia-pgrid-cell>*{width:100%} .sia-pgrid-hidden{display:none} .sia-pgrid-block.is-expanded .sia-pgrid-hidden{display:flex} .sia-pgrid-more{display:block;margin:22px auto 0;min-width:200px;justify-content:center} .sia-pgrid-block.is-expanded .sia-pgrid-more{display:none} @media(max-width:600px){.sia-pgrid-2{gap:12px}} /* ---- Product card (compact deal card; reusable card lands in Step 5) ---- */ .sia-pcard{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--sia-surface);border-radius:var(--sia-radius);box-shadow:var(--sia-shadow);padding:12px;transition:transform .15s,box-shadow .15s} .sia-pcard:hover{transform:translateY(-4px);box-shadow:var(--sia-shadow-lg)} .sia-pcard-link{display:flex;flex-direction:column;flex:1;color:var(--sia-ink)} .sia-pcard-badges{position:absolute;top:14px;left:14px;display:flex;flex-direction:column;gap:6px;z-index:2} .sia-badge{display:inline-block;font-size:0.833rem;font-weight:800;letter-spacing:.02em;color:#fff;padding:4px 9px;border-radius:999px;line-height:1.2} .sia-badge.sale{background:var(--sia-primary)} .sia-badge.hot{background:var(--sia-accent)} .sia-pcard-media{position:relative;aspect-ratio:1/1;flex:0 0 auto;border-radius:var(--sia-radius-sm);overflow:hidden;background:var(--sia-surface-alt);margin-bottom:10px} .sia-pcard-img,.sia-pcard-media img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .25s} .sia-pcard:hover .sia-pcard-media img{transform:scale(1.04)} .sia-pcard-title{font-family:var(--sia-body);font-size:0.875rem;font-weight:600;line-height:1.35;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px} .sia-pcard-price{font-family:var(--sia-display);font-weight:700;font-size:1rem;color:var(--sia-ink);margin-top:auto} .sia-pcard-price del{color:var(--sia-muted);font-weight:500;font-size:0.833rem;margin-right:6px} .sia-pcard-price ins{text-decoration:none;color:var(--sia-primary)} .sia-pcard-cart{justify-content:center;margin-top:auto;padding:9px 14px;font-size:0.833rem} .sia-pcard-cart.ghost{background:var(--sia-primary);color:#fff;border:1px solid var(--sia-primary)} .sia-pcard-cart.ghost:hover{color:#fff;border-color:var(--sia-primary-deep);background:var(--sia-primary-deep);box-shadow:none} @media(max-width:1100px){.sia-carousel-track{grid-auto-columns:calc((100% - 3*16px)/4)}} @media(max-width:880px){.sia-carousel-track{grid-auto-columns:calc((100% - 2*16px)/3)}} @media(max-width:600px){ .sia-carousel-track{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto;overflow-x:visible;scroll-snap-type:none;gap:12px} .sia-car-arrow{display:none} .sia-pcard-title{min-height:0;-webkit-line-clamp:2} } /* ============================================================ Step 5 Reusable card actions, wishlist, AJAX side cart, quick view, toasts ============================================================ */ .sia-locked{overflow:hidden} /* Card actions + hover reveal */ .sia-pcard-actions{display:flex;gap:8px;margin-top:10px} .sia-pcard-actions .sia-pcard-cart{flex:1;margin-top:0} .sia-icon-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--sia-line);border-radius:999px;background:var(--sia-surface);color:var(--sia-ink);cursor:pointer;font-size:0.938rem;transition:color .15s,border-color .15s,transform .15s} .sia-icon-btn:hover{color:var(--sia-primary);border-color:var(--sia-primary);transform:translateY(-2px)} .sia-add-cart.is-loading{opacity:.7;pointer-events:none} .sia-badge.new{background:#0e9f6e} .sia-badge.oos{background:var(--sia-muted)} .sia-pcard-rating{margin:0 0 6px;font-size:0.833rem} .sia-pcard-rating .star-rating,.sia-qv-rating .star-rating{font-size:0.875rem;color:#f5a623} @media(hover:hover){ .sia-pcard.has-hover-actions .sia-pcard-actions{opacity:1;transform:none} } /* Wishlist heart */ .sia-wish{position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--sia-muted);cursor:pointer;font-size:1.125rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--sia-shadow);transition:color .15s,transform .15s} .sia-wish:hover{transform:scale(1.1);color:var(--sia-primary)} .sia-wish.is-on{color:var(--sia-primary)} .sia-wish.is-on .sia-wish-ico::before{content:"\2665"} .sia-wish.is-on .sia-wish-ico{font-size:0} .sia-wish.is-on .sia-wish-ico::before{font-size:1.125rem} .sia-wishlink{position:relative} .sia-wish-count,.sia-cart-count[hidden]{display:none} .sia-wish-count:not([hidden]){display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;font-size:0.833rem;color:#fff;background:var(--sia-accent);border-radius:10px;padding:0 6px;margin-left:4px} /* Overlay */ .sia-overlay{position:fixed;inset:0;background:rgba(8,12,24,.5);opacity:0;transition:opacity .25s;z-index:90} .sia-overlay.is-on{opacity:1} /* Side cart drawer */ .sia-sidecart{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--sia-surface);box-shadow:var(--sia-shadow-lg);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:100;display:flex;flex-direction:column} .sia-sidecart.is-open{transform:none} .sia-sidecart-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--sia-line)} .sia-sidecart-head h2{font-size:1.125rem} .sia-sidecart-close,.sia-modal-close{border:0;background:none;font-size:1.625rem;line-height:1;cursor:pointer;color:var(--sia-muted)} .sia-sidecart-close:hover,.sia-modal-close:hover{color:var(--sia-ink)} .sia-sidecart-body{flex:1;overflow-y:auto;display:flex;flex-direction:column} .sia-sidecart-items{list-style:none;margin:0;padding:8px 20px;flex:1} .sia-sidecart-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--sia-line)} .sia-mini-media{width:64px;height:64px;border-radius:var(--sia-radius-sm);overflow:hidden;background:var(--sia-surface-alt)} .sia-mini-thumb{width:100%;height:100%;object-fit:contain} .sia-mini-name{font-size:0.875rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sia-mini-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px} .sia-mini-line{font-weight:700;font-family:var(--sia-display)} .sia-mini-remove{border:0;background:none;font-size:1.25rem;line-height:1;color:var(--sia-muted);cursor:pointer} .sia-mini-remove:hover{color:var(--sia-primary)} .sia-sidecart-empty{padding:48px 24px;text-align:center;color:var(--sia-muted);display:flex;flex-direction:column;gap:16px;align-items:center} .sia-sidecart-foot{padding:16px 20px;border-top:1px solid var(--sia-line);background:var(--sia-surface);position:sticky;bottom:0} .sia-sidecart-subtotal{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:1rem} .sia-sidecart-subtotal strong{font-family:var(--sia-display);font-size:1.188rem} .sia-sidecart-cta{display:flex;gap:10px} .sia-sidecart-cta .sia-btn{flex:1;justify-content:center} /* Quantity stepper */ .sia-qty{display:inline-flex;align-items:center;border:1px solid var(--sia-line);border-radius:999px;overflow:hidden} .sia-qty button{width:30px;height:30px;border:0;background:none;cursor:pointer;font-size:0.938rem;color:var(--sia-ink)} .sia-qty button:hover{color:var(--sia-primary)} .sia-qty-in{width:34px;height:30px;border:0;text-align:center;font-size:0.875rem;background:none;-moz-appearance:textfield} .sia-qty-in::-webkit-outer-spin-button,.sia-qty-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* Quick view modal */ .sia-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px} .sia-modal.is-open{display:flex} .sia-modal-panel{position:relative;background:var(--sia-surface);border-radius:var(--sia-radius);max-width:880px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--sia-shadow-lg);animation:siaPop .25s ease} @keyframes siaPop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}} .sia-modal-close{position:absolute;top:12px;right:14px;z-index:2} .sia-qv-grid{display:grid;grid-template-columns:1fr 1fr;gap:0} .sia-qv-media{background:var(--sia-surface-alt);display:flex;align-items:center;justify-content:center;padding:28px;border-radius:var(--sia-radius) 0 0 var(--sia-radius)} .sia-qv-media img{max-height:380px;width:auto;object-fit:contain} .sia-qv-info{padding:34px 30px} .sia-qv-title{font-size:1.5rem;margin-bottom:10px} .sia-qv-price{font-family:var(--sia-display);font-size:1.5rem;margin:12px 0} .sia-qv-price del{color:var(--sia-muted);font-size:1.125rem;font-weight:500;margin-right:8px} .sia-qv-price ins{text-decoration:none;color:var(--sia-primary)} .sia-qv-desc{color:var(--sia-muted);font-size:0.875rem;margin-bottom:18px} .sia-qv-buy{display:flex;align-items:center;gap:12px;margin-bottom:16px} .sia-qv-full{font-weight:700;color:var(--sia-primary);font-size:0.875rem} .sia-qv-skel{height:360px;border-radius:var(--sia-radius);background:linear-gradient(90deg,#eef0f4 25%,#f6f7fb 37%,#eef0f4 63%);background-size:400% 100%;animation:siaSkel 1.4s ease infinite} @keyframes siaSkel{0%{background-position:100% 0}100%{background-position:-100% 0}} /* Product-grid skeletons (load-more) */ .sia-skel{display:block;background:linear-gradient(90deg,#eef0f4 25%,#f6f7fb 37%,#eef0f4 63%);background-size:400% 100%;animation:siaSkel 1.4s ease infinite;border-radius:8px} .sia-skel-li{list-style:none} .sia-skel-card{display:flex;flex-direction:column;gap:10px;background:var(--sia-surface);border-radius:var(--sia-radius);box-shadow:var(--sia-shadow);padding:12px} .sia-skel-img{width:100%;aspect-ratio:1/1;border-radius:10px} .sia-skel-line{height:13px;width:90%} .sia-skel-line.short{width:55%} .sia-skel-price{height:18px;width:40%;margin-top:4px} @media(prefers-reduced-motion:reduce){.sia-skel,.sia-qv-skel{animation:none}} /* Toasts */ .sia-toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none} .sia-toast{background:var(--sia-accent);color:#fff;padding:11px 20px;border-radius:999px;font-size:0.875rem;font-weight:600;box-shadow:var(--sia-shadow-lg);opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s} .sia-toast.in{opacity:1;transform:none} .sia-toast.is-error{background:#b32d2e} /* WooCommerce loop grid using canonical cards */ /* Mobile-first: base = 2 columns, scales UP to 3 (tablet) then 4 (desktop). Correct mobile rendering is the default — never a max-width correction. */ .sia-woo ul.products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .sia-woo ul.products li.product{width:auto!important;float:none!important;margin:0!important;clear:none!important} .sia-woo ul.products li.product{margin:0;width:auto;float:none;display:flex} /* Neutralise WooCommerce clearfix pseudo-elements — as a grid container these ::before/::after become phantom grid items, leaving an empty first cell. */ .sia-woo ul.products::before,.sia-woo ul.products::after{content:none;display:none} .sia-wish-grid{margin-top:8px} .sia-wish-empty,.sia-wish-loading{padding:48px 0;text-align:center;color:var(--sia-muted)} @media(max-width:768px){ .sia-qv-grid{grid-template-columns:1fr} .sia-qv-media{border-radius:var(--sia-radius) var(--sia-radius) 0 0;padding:20px} .sia-qv-media img{max-height:240px} .sia-qv-info{padding:22px} } @media(min-width:769px){.sia-woo ul.products{grid-template-columns:repeat(3,1fr);gap:18px}} @media(min-width:1025px){.sia-woo ul.products{grid-template-columns:repeat(4,1fr)}} /* ============================================================ Step 6 Shop layout, filter sidebar, toolbar/chips, load-more, sticky add-to-cart ============================================================ */ .sia-shop .sia-page-title{font-size:1.875rem;margin:22px 0 6px} .sia-term-desc{color:var(--sia-muted);margin-bottom:14px;max-width:70ch} .sia-shop-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start} .sia-shop-main{min-width:0} /* Sidebar — base = mobile off-canvas drawer (slides in over content) */ .sia-shop-sidebar{position:fixed;top:0;left:0;height:100%;width:min(340px,90vw);background:var(--sia-surface);z-index:100;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:var(--sia-shadow-lg)} .sia-shop-sidebar.is-open{transform:none} .sia-filters{padding:14px 16px} .sia-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--sia-line);font-weight:700} .sia-sidebar-close{border:0;background:none;font-size:1.625rem;line-height:1;cursor:pointer;color:var(--sia-muted)} .sia-filter-panel{border:1px solid var(--sia-line);border-radius:var(--sia-radius-sm);background:var(--sia-surface);margin-bottom:12px;overflow:hidden} .sia-filter-panel>summary{list-style:none;cursor:pointer;padding:13px 16px;font-weight:700;font-size:0.875rem;display:flex;align-items:center;justify-content:space-between} .sia-filter-panel>summary::-webkit-details-marker{display:none} .sia-filter-panel>summary::after{content:"−";color:var(--sia-muted);font-size:1.125rem} .sia-filter-panel:not([open])>summary::after{content:"+"} .sia-filter-body{padding:6px 16px 16px} .sia-filter-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto} .sia-filter-list a{display:flex;justify-content:space-between;gap:8px;font-size:0.875rem;color:var(--sia-ink)} .sia-filter-list a:hover{color:var(--sia-primary)} .sia-filter-checks label{display:flex;align-items:center;gap:8px;font-size:0.875rem;cursor:pointer} .sia-filter-count{color:var(--sia-muted);font-size:0.833rem} .sia-price-fields{display:flex;gap:10px} .sia-price-fields label{flex:1;display:flex;align-items:center;gap:6px;border:1px solid var(--sia-line);border-radius:8px;padding:4px 8px} .sia-price-fields span{color:var(--sia-muted);font-size:0.833rem} .sia-price-fields input{border:0;width:100%;font-size:0.875rem;padding:5px 0;background:none} .sia-price-fields input:focus{outline:none} .sia-filter-actions{display:flex;gap:10px;margin-top:4px} .sia-filter-actions .sia-btn{flex:1;justify-content:center;padding:11px 14px;font-size:0.833rem} /* Toolbar + chips */ .sia-shop-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 16px;padding-bottom:14px;border-bottom:1px solid var(--sia-line)} .sia-shop-toolbar .woocommerce-result-count{margin:0;color:var(--sia-muted);font-size:0.875rem} .sia-shop-toolbar .woocommerce-ordering{margin:0 0 0 auto} .sia-shop-toolbar .woocommerce-ordering select{padding:9px 12px;border:1px solid var(--sia-line);border-radius:999px;font-size:0.875rem;background:var(--sia-surface)} .sia-filter-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--sia-line);background:var(--sia-surface);border-radius:999px;padding:9px 16px;font-weight:700;font-size:0.875rem;cursor:pointer} .sia-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} .sia-chip{display:inline-flex;align-items:center;gap:6px;background:var(--sia-surface);border:1px solid var(--sia-line);border-radius:999px;padding:6px 12px;font-size:0.833rem;font-weight:600} .sia-chip:hover{border-color:var(--sia-primary);color:var(--sia-primary)} .sia-chip-clear{align-self:center;font-size:0.833rem;font-weight:700;color:var(--sia-primary)} @media(max-width:600px){ .sia-shop-toolbar{gap:12px} .sia-shop-toolbar .woocommerce-result-count{order:3;flex:1 0 100%;margin-top:2px} .sia-filter-toggle{order:1} .sia-shop-toolbar .woocommerce-ordering{order:2;margin:0 0 0 auto} .sia-shop-toolbar .woocommerce-ordering select{width:auto} } /* Load more */ .sia-loadmore-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:32px 0 8px} .sia-loadmore{min-width:230px;justify-content:center} .sia-loadmore.is-loading{opacity:.7;pointer-events:none} .sia-loadmore-wrap.is-infinite .sia-loadmore{display:none} .sia-loadmore-status{color:var(--sia-muted);font-size:0.875rem;min-height:18px} .sia-woo .woocommerce-pagination ul{display:flex;gap:6px;list-style:none;padding:0;justify-content:center;margin:28px 0} .sia-woo .woocommerce-pagination a,.sia-woo .woocommerce-pagination span{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--sia-line);border-radius:10px;background:var(--sia-surface)} .sia-woo .woocommerce-pagination .current{background:var(--sia-primary);color:#fff;border-color:var(--sia-primary)} /* Sticky mobile add-to-cart */ .sia-sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:85;background:var(--sia-surface);border-top:1px solid var(--sia-line);box-shadow:0 -6px 20px rgba(22,33,58,.1);transform:translateY(110%);transition:transform .25s} .sia-sticky-atc.is-on{transform:none} .sia-sticky-inner{display:flex;align-items:center;gap:12px;padding:10px 16px} .sia-sticky-media{width:46px;height:46px;flex:0 0 auto;border-radius:8px;overflow:hidden;background:var(--sia-surface-alt)} .sia-sticky-thumb{width:100%;height:100%;object-fit:contain} .sia-sticky-info{flex:1;min-width:0;display:flex;flex-direction:column} .sia-sticky-name{font-size:0.833rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sia-sticky-price{font-family:var(--sia-display);font-weight:700;font-size:0.938rem} .sia-sticky-price del{color:var(--sia-muted);font-weight:500;font-size:0.833rem;margin-right:5px} .sia-sticky-price ins{text-decoration:none;color:var(--sia-primary)} .sia-sticky-atc .sia-btn{flex:0 0 auto;padding:11px 18px} @media(min-width:769px){.sia-sticky-atc{display:none!important}} @media(max-width:768px){.single-product{padding-bottom:84px}} @media(min-width:981px){ .sia-shop.has-filters .sia-shop-grid{grid-template-columns:268px 1fr;gap:28px} .sia-shop-sidebar{position:sticky;top:16px;height:auto;width:auto;background:none;z-index:auto;transform:none;overflow:visible;box-shadow:none} .sia-shop-sidebar.is-open{transform:none} .sia-sidebar-head{display:none} .sia-filter-toggle{display:none} .sia-filters{padding:0} } /* ============================================================ Step 3 — Mega menu, off-canvas drawer, live search (v1.0.0.29) ============================================================ */ /* Search submit: ensure WP's input[type=submit] gets the brand pill too */ .sia-header-search button,.sia-header-search input[type=submit], .sia-header-search .search-submit{border:0;background:var(--sia-primary);color:#fff;padding:0 26px;cursor:pointer;font-weight:600;font-family:var(--sia-body);font-size:0.938rem} .sia-header-search .search-field{flex:1;width:100%;border:0;padding:13px 20px;font-size:0.938rem;font-family:var(--sia-body);outline:none} .sia-header-search label{flex:1;display:flex;margin:0} /* ---------- Desktop mega menu ---------- */ .sia-primary-nav{position:relative} .sia-mega{position:relative} .sia-mega-item{position:static} .sia-mega-link{display:flex;align-items:center;gap:6px;padding:14px 16px;font-weight:600;font-size:0.875rem;color:var(--sia-ink)} .sia-mega-item.has-panel:hover .sia-mega-link,.sia-mega-item.has-panel.is-open .sia-mega-link{color:var(--sia-primary)} .sia-mega-caret{font-size:0.833rem;transition:transform .15s} .sia-mega-item.is-open .sia-mega-caret{transform:rotate(180deg)} .sia-mega-panel{position:absolute;left:0;right:0;top:100%;background:var(--sia-surface);box-shadow:var(--sia-shadow-lg);border-top:1px solid var(--sia-line);border-radius:0 0 var(--sia-radius) var(--sia-radius);padding:26px max(20px,calc((100% - var(--sia-max))/2 + 20px));opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s;z-index:70} .sia-mega-item.has-panel:hover .sia-mega-panel,.sia-mega-item.has-panel:focus-within .sia-mega-panel,.sia-mega-item.has-panel.is-open .sia-mega-panel{opacity:1;visibility:visible;transform:none} .sia-mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px 30px} .sia-mega-col-title{display:block;font-weight:700;font-size:0.875rem;color:var(--sia-ink);margin-bottom:8px} .sia-mega-col-title:hover{color:var(--sia-primary)} .sia-mega-sub{list-style:none;margin:0;padding:0} .sia-mega-sub li{margin:0} .sia-mega-sub a{display:block;padding:4px 0;font-size:0.833rem;color:var(--sia-muted)} .sia-mega-sub a:hover{color:var(--sia-primary)} .sia-mega-all{display:inline-block;margin-top:18px;font-weight:600;font-size:0.833rem;color:var(--sia-primary)} @media(prefers-reduced-motion:reduce){.sia-mega-panel{transition:none}} /* ---------- Live search dropdown ---------- */ .sia-header-search[data-sia-search-wrap],.sia-drawer-search[data-sia-search-wrap]{position:relative} .sia-search-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--sia-surface);border:1px solid var(--sia-line);border-radius:var(--sia-radius-sm);box-shadow:var(--sia-shadow-lg);z-index:95;max-height:72vh;overflow-y:auto;padding:6px} .sia-search-results.is-loading{opacity:.6} .sia-search-cats{display:flex;flex-wrap:wrap;gap:6px;padding:8px 8px 4px} .sia-search-cat{font-size:0.833rem;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--sia-bg);color:var(--sia-ink)} .sia-search-cat:hover{background:var(--sia-primary);color:#fff} .sia-search-prod{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--sia-radius-sm)} .sia-search-prod:hover,.sia-search-prod.is-active{background:var(--sia-bg)} .sia-search-prod img{width:46px;height:46px;object-fit:cover;border-radius:8px;flex:0 0 auto;background:var(--sia-surface-alt)} .sia-search-prod .t{font-size:0.833rem;font-weight:600;line-height:1.3;color:var(--sia-ink);display:block} .sia-search-prod .p{font-size:0.833rem;color:var(--sia-muted)} .sia-search-prod .p del{opacity:.6;margin-right:4px} .sia-search-more{display:block;text-align:center;padding:11px;font-weight:600;font-size:0.833rem;color:var(--sia-primary);border-top:1px solid var(--sia-line);margin-top:4px} .sia-search-empty{padding:16px;text-align:center;font-size:0.833rem;color:var(--sia-muted)} /* ---------- Off-canvas mobile drawer ---------- */ .sia-drawer{position:fixed;top:0;left:0;height:100%;width:min(86vw,360px);max-width:100%;background:var(--sia-surface);box-shadow:var(--sia-shadow-lg);transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:100;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch} .sia-drawer.is-open{transform:none} .sia-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--sia-line);position:sticky;top:0;background:var(--sia-surface);z-index:2} .sia-drawer-title{font-family:var(--sia-display);font-weight:700;font-size:1.125rem} .sia-drawer-close{background:none;border:0;font-size:1.875rem;line-height:1;cursor:pointer;color:var(--sia-ink);padding:0 4px} .sia-drawer-search{padding:14px 16px;border-bottom:1px solid var(--sia-line)} .sia-drawer-search form{display:flex;box-shadow:var(--sia-shadow);border-radius:999px;overflow:hidden;border:1px solid var(--sia-line)} .sia-drawer-search label{flex:1;display:flex;margin:0} .sia-drawer-search .search-field{flex:1;width:100%;border:0;padding:11px 16px;font-size:0.938rem;font-family:var(--sia-body);outline:none} .sia-drawer-search .search-submit,.sia-drawer-search button,.sia-drawer-search input[type=submit]{border:0;background:var(--sia-primary);color:#fff;padding:0 18px;font-weight:600;cursor:pointer} .sia-drawer-nav{padding:6px 0 30px} .sia-drawer-list,.sia-drawer-sublist{list-style:none;margin:0;padding:0} .sia-drawer-flat{display:block;padding:13px 18px;font-weight:600;font-size:0.938rem;color:var(--sia-ink);border-bottom:1px solid var(--sia-line)} .sia-drawer-flat:hover{color:var(--sia-primary)} .sia-drawer-flat.is-all{color:var(--sia-primary);font-size:0.875rem} .sia-drawer-acc>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;font-weight:600;font-size:0.938rem;color:var(--sia-ink);cursor:pointer;list-style:none;border-bottom:1px solid var(--sia-line)} .sia-drawer-acc>summary::-webkit-details-marker{display:none} .sia-drawer-acc>summary:hover{color:var(--sia-primary)} .sia-acc-icon{font-size:1.25rem;font-weight:400;line-height:1;color:var(--sia-muted);transition:transform .15s} .sia-drawer-acc[open]>summary .sia-acc-icon{transform:rotate(45deg)} .sia-drawer-sublist{background:var(--sia-bg)} .sia-drawer-sublist .sia-drawer-flat{padding-left:32px;font-weight:500;font-size:0.875rem} .sia-drawer-sublist>summary,.sia-drawer-sublist .sia-drawer-acc>summary{padding-left:32px;font-weight:500;font-size:0.875rem} .sia-drawer-sublist .sia-drawer-sublist .sia-drawer-flat{padding-left:46px;font-size:0.833rem;color:var(--sia-muted)} .sia-drawer-sublist .sia-drawer-sublist>li>summary{padding-left:46px} @media(min-width:881px){.sia-drawer{display:none}} .sia-search-prod .meta{display:flex;flex-direction:column;min-width:0} .sia-search-prod .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sia-search-prod .img{flex:0 0 auto} /* ============================================================ v1.0.0.48 — Cart / Checkout / My Account styling + empty states + global :focus-visible accessibility pass. Targets WooCommerce default markup so it works with no template overrides. Reuses .sia-* tokens for full cohesion. ============================================================ */ /* ---- Shared page shell for WC pages ---- */ .woocommerce-cart .sia-main, .woocommerce-checkout .sia-main, .woocommerce-account .sia-main{background:var(--sia-bg)} .woocommerce form .form-row{margin:0 0 16px} .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error, .woocommerce-noreviews{border:1px solid var(--sia-line);border-left:3px solid var(--sia-primary);background:var(--sia-surface);box-shadow:var(--sia-shadow);border-radius:var(--sia-radius-sm);padding:14px 18px;color:var(--sia-ink);font-size:0.875rem;list-style:none;margin:0 0 20px} .woocommerce .woocommerce-error{border-left-color:#c0392b;background:#fdf3f2} .woocommerce .woocommerce-message{border-left-color:#1e9e60} .woocommerce .woocommerce-info a,.woocommerce-message a{color:var(--sia-primary);font-weight:700} .woocommerce-message .button,.woocommerce-info .button{float:right} /* ---- Branded inputs (match search-bar feel) ---- */ .woocommerce form .form-row label, .woocommerce-EditAccountForm label, .woocommerce-checkout label{display:block;font-size:0.833rem;font-weight:600;color:var(--sia-ink);margin-bottom:6px} .woocommerce form .form-row .required{color:var(--sia-primary);border:0} .woocommerce input.input-text, .woocommerce textarea, .woocommerce select, .woocommerce .select2-selection, .woocommerce-checkout input.input-text{width:100%;font-family:var(--sia-body);font-size:0.938rem;color:var(--sia-ink);background:var(--sia-surface);border:1px solid var(--sia-line);border-radius:var(--sia-radius-sm);padding:12px 14px;transition:border-color .15s,box-shadow .15s} .woocommerce input.input-text:focus, .woocommerce textarea:focus, .woocommerce select:focus{border-color:var(--sia-primary);box-shadow:0 0 0 3px rgba(30,58,138,.12);outline:none} .woocommerce .select2-container--default .select2-selection--single{height:auto;border:1px solid var(--sia-line);border-radius:var(--sia-radius-sm);padding:6px 4px} .select2-container--default .select2-selection--single .select2-selection__arrow{top:10px} /* ---- Brand buttons across WC ---- */ .woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce #respond input#submit,.woocommerce .button.alt, .woocommerce-cart .actions .button,.woocommerce-checkout #place_order{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--sia-primary);color:#fff;border:0;padding:13px 24px;border-radius:999px;font-family:var(--sia-body);font-weight:700;font-size:0.875rem;cursor:pointer;transition:transform .15s,box-shadow .15s,filter .15s} .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover, .woocommerce .button.alt:hover,.woocommerce-checkout #place_order:hover{color:#fff;filter:brightness(.95);transform:translateY(-1px);box-shadow:var(--sia-shadow)} .woocommerce a.button:active,.woocommerce button.button:active,.woocommerce input.button:active{transform:translateY(0) scale(.98)} .woocommerce a.button.wc-backward,.woocommerce .button.outline{background:transparent;color:var(--sia-ink);border:1px solid var(--sia-line)} .woocommerce a.button.wc-backward:hover{color:var(--sia-primary);border-color:var(--sia-primary);filter:none} /* ---- CART ---- */ .woocommerce-cart .woocommerce{display:grid;grid-template-columns:1fr;gap:24px;max-width:var(--sia-max);margin:32px auto;padding:0 20px} .woocommerce-cart table.shop_table{background:var(--sia-surface);border:1px solid var(--sia-line);border-radius:var(--sia-radius);border-collapse:separate;border-spacing:0;overflow:hidden;box-shadow:var(--sia-shadow);width:100%} .woocommerce-cart table.shop_table thead th{background:var(--sia-bg);font-family:var(--sia-display);font-size:0.833rem;letter-spacing:.02em;text-transform:uppercase;color:var(--sia-muted);padding:14px 16px;text-align:left;border:0} .woocommerce-cart table.shop_table td{padding:16px;border-top:1px solid var(--sia-line);vertical-align:middle} .woocommerce-cart table.shop_table .product-thumbnail img{width:64px;height:64px;object-fit:cover;border-radius:var(--sia-radius-sm);border:1px solid var(--sia-line)} .woocommerce-cart table.shop_table .product-name a{font-weight:600;color:var(--sia-ink)} .woocommerce-cart table.shop_table .product-name a:hover{color:var(--sia-primary)} .woocommerce-cart .product-remove a.remove{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--sia-bg);color:var(--sia-muted)!important;font-size:1.125rem;line-height:1;text-decoration:none} .woocommerce-cart .product-remove a.remove:hover{background:var(--sia-primary);color:#fff!important} .woocommerce-cart .quantity .qty{width:64px;text-align:center;padding:10px 6px;border:1px solid var(--sia-line);border-radius:999px;font-family:var(--sia-body)} .woocommerce-cart .cart-collaterals,.woocommerce-cart .cart_totals{background:var(--sia-surface);border:1px solid var(--sia-line);border-radius:var(--sia-radius);padding:22px;box-shadow:var(--sia-shadow)} .woocommerce-cart .cart_totals h2{font-size:1.125rem;margin-bottom:14px} .woocommerce-cart .cart_totals table{width:100%;border-collapse:collapse} .woocommerce-cart .cart_totals th,.woocommerce-cart .cart_totals td{padding:12px 0;border-bottom:1px solid var(--sia-line);font-size:0.875rem;text-align:left} .woocommerce-cart .cart_totals tr.order-total td,.woocommerce-cart .cart_totals tr.order-total th{font-family:var(--sia-display);font-size:1.125rem;border-bottom:0;padding-top:16px} .woocommerce-cart .wc-proceed-to-checkout{margin-top:18px} .woocommerce-cart .wc-proceed-to-checkout .checkout-button{width:100%} .woocommerce-cart .cart .actions .coupon{display:flex;gap:10px;margin-bottom:16px} .woocommerce-cart .cart .actions .coupon .input-text{max-width:220px} @media(min-width:981px){.woocommerce-cart .woocommerce{grid-template-columns:1fr 360px;align-items:start} .woocommerce-cart form.woocommerce-cart-form{grid-column:1} .woocommerce-cart .cart-collaterals{grid-column:2;position:sticky;top:96px}} /* ---- CHECKOUT ---- */ .woocommerce-checkout form.checkout{display:grid;grid-template-columns:1fr;gap:26px;max-width:var(--sia-max);margin:32px auto;padding:0 20px} .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review, .woocommerce-checkout #order_review_heading + #order_review{background:var(--sia-surface);border:1px solid var(--sia-line);border-radius:var(--sia-radius);padding:24px;box-shadow:var(--sia-shadow)} .woocommerce-checkout h3,.woocommerce-checkout #order_review_heading{font-size:1.125rem;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--sia-line)} .woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2{width:100%;float:none} .woocommerce-checkout table.shop_table{width:100%;border-collapse:collapse} .woocommerce-checkout #order_review table.shop_table th, .woocommerce-checkout #order_review table.shop_table td{padding:12px 0;border-bottom:1px solid var(--sia-line);font-size:0.875rem;text-align:left} .woocommerce-checkout .order-total .amount{font-family:var(--sia-display);font-size:1.125rem;color:var(--sia-ink)} .woocommerce-checkout #payment{background:var(--sia-bg);border-radius:var(--sia-radius-sm);padding:18px;margin-top:8px} .woocommerce-checkout #payment ul.payment_methods{list-style:none;margin:0 0 14px;padding:0;border:0} .woocommerce-checkout #payment ul.payment_methods li{padding:10px 0;border-bottom:1px solid var(--sia-line)} .woocommerce-checkout #payment div.payment_box{background:var(--sia-surface);border-radius:var(--sia-radius-sm);font-size:0.833rem;color:var(--sia-muted);margin-top:8px;padding:12px} .woocommerce-checkout #place_order{width:100%;padding:15px} @media(min-width:981px){.woocommerce-checkout form.checkout{grid-template-columns:1fr 400px;align-items:start} .woocommerce-checkout #customer_details{grid-column:1} .woocommerce-checkout #order_review_heading,.woocommerce-checkout #order_review{grid-column:2} .woocommerce-checkout #order_review{position:sticky;top:96px} .woocommerce-checkout #order_review_heading{margin-bottom:-10px}} /* ---- MY ACCOUNT ---- */ .woocommerce-account .woocommerce{max-width:var(--sia-max);margin:32px auto;padding:0 20px} .woocommerce-account .woocommerce-MyAccount-navigation{margin-bottom:24px} .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .woocommerce-account .woocommerce-MyAccount-navigation li a{display:inline-block;padding:9px 16px;border-radius:999px;background:var(--sia-surface);border:1px solid var(--sia-line);font-weight:600;font-size:0.875rem;color:var(--sia-ink)} .woocommerce-account .woocommerce-MyAccount-navigation li a:hover{border-color:var(--sia-primary);color:var(--sia-primary)} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--sia-primary);color:#fff;border-color:var(--sia-primary)} .woocommerce-account .woocommerce-MyAccount-content{background:var(--sia-surface);border:1px solid var(--sia-line);border-radius:var(--sia-radius);padding:26px;box-shadow:var(--sia-shadow)} .woocommerce-account .woocommerce-MyAccount-content h2,.woocommerce-account .woocommerce-MyAccount-content h3{font-size:1.125rem;margin-bottom:14px} .woocommerce-account table.woocommerce-orders-table,.woocommerce-account table.shop_table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--sia-line);border-radius:var(--sia-radius-sm);overflow:hidden} .woocommerce-account table.shop_table th{background:var(--sia-bg);font-size:0.833rem;text-transform:uppercase;letter-spacing:.02em;color:var(--sia-muted);padding:12px 14px;text-align:left} .woocommerce-account table.shop_table td{padding:14px;border-top:1px solid var(--sia-line);font-size:0.875rem} .woocommerce-account .order-actions .button{padding:8px 14px;font-size:0.833rem} /* login / register cards */ .woocommerce-account:not(.logged-in) .woocommerce>.u-columns, .woocommerce-account .woocommerce>.col2-set.addresses{display:grid;grid-template-columns:1fr;gap:24px} .woocommerce-account form.login,.woocommerce-account form.register, .woocommerce-account .woocommerce-Address{background:var(--sia-surface);border:1px solid var(--sia-line);border-radius:var(--sia-radius);padding:26px;box-shadow:var(--sia-shadow)} @media(min-width:721px){.woocommerce-account:not(.logged-in) .woocommerce>.u-columns{grid-template-columns:1fr 1fr} .woocommerce-account .woocommerce>.col2-set.addresses{grid-template-columns:1fr 1fr} .woocommerce-account .woocommerce-MyAccount-navigation{float:none} .woocommerce-account .woocommerce-MyAccount-content{width:100%}} .woocommerce-account .woocommerce-form-login__rememberme, .woocommerce-account .woocommerce-form-register__honeypot{font-weight:500} /* ---- Empty states (cart / orders / downloads / wishlist) ---- */ .sia-empty,.woocommerce-cart .cart-empty + .return-to-shop, .woocommerce .woocommerce-info.cart-empty{margin:0} .sia-empty,.woocommerce-cart-form ~ .cart-empty{text-align:center} .woocommerce .cart-empty,.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info, .woocommerce .wishlist-empty{display:block;text-align:center;background:var(--sia-surface);border:1px dashed var(--sia-line);border-radius:var(--sia-radius);padding:48px 24px;font-size:1rem;color:var(--sia-muted);box-shadow:none;border-left:1px dashed var(--sia-line)} .woocommerce .cart-empty::before,.woocommerce .wishlist-empty::before{content:"🛒";display:block;font-size:2.625rem;margin-bottom:12px} .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before{content:"📦";display:block;font-size:2.625rem;margin-bottom:12px} .woocommerce .return-to-shop{text-align:center;margin-top:18px} .woocommerce .return-to-shop .button{display:inline-flex} /* ============================================================ Accessibility — global :focus-visible ring + contrast tune ============================================================ */ :where(a,button,input,select,textarea,summary,[tabindex],.sia-btn,.button):focus-visible{outline:2px solid var(--sia-primary);outline-offset:2px;border-radius:4px} /* don't double-ring native search bar pill (already styled) */ .sia-header-search :focus-visible{outline-offset:-2px} /* keep skip-link visible on focus */ .sia-skip:focus{outline:2px solid var(--sia-primary);outline-offset:2px} /* darken muted text slightly to clear 4.5:1 on white for small text */ /* ============================================================ v1.0.0.50 — Single-product (PDP) polish. Two-column layout, branded gallery (zoom/lightbox already on via theme support — this styles it), price scale, qty+ATC, trust row, branded tabs, desktop sticky ATC. WC default markup. ============================================================ */ .single-product .sia-main{background:var(--sia-bg)} .single-product div.product{max-width:var(--sia-max);margin:28px auto;padding:0 20px;display:grid;grid-template-columns:1fr;gap:30px} .single-product div.product .woocommerce-product-gallery{margin:0;float:none;width:100%!important} .single-product div.product .summary{margin:0;float:none;width:100%!important} @media(min-width:861px){.single-product div.product{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}} /* Gallery */ .single-product .woocommerce-product-gallery{position:relative;max-width:100%;overflow:hidden} .single-product .woocommerce-product-gallery__wrapper{margin:0;max-width:100%!important} .single-product .woocommerce-product-gallery__image{border:1px solid var(--sia-line);border-radius:var(--sia-radius);overflow:hidden;background:var(--sia-surface-alt);max-width:100%!important} .single-product .woocommerce-product-gallery__image a{display:block;max-width:100%} /* Override flexslider's inline pixel width/height on the active image so it can never exceed the column. Stable square frame also prevents CLS. */ .single-product .woocommerce-product-gallery__image img{display:block;width:100%!important;height:auto;max-width:100%!important;border-radius:var(--sia-radius)} .single-product .woocommerce-product-gallery__wrapper{display:block} .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image{aspect-ratio:1/1;padding:18px} .single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img{width:100%!important;height:100%!important;object-fit:contain} .single-product .woocommerce-product-gallery .flex-control-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:0;list-style:none} .single-product .woocommerce-product-gallery .flex-control-thumbs li{width:auto;margin:0} .single-product .woocommerce-product-gallery .flex-control-thumbs img{width:66px;height:66px;object-fit:cover;border:1px solid var(--sia-line);border-radius:var(--sia-radius-sm);cursor:pointer;opacity:.7;transition:opacity .15s,border-color .15s} .single-product .woocommerce-product-gallery .flex-control-thumbs img:hover, .single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--sia-primary)} .single-product .woocommerce-product-gallery__trigger{position:absolute;top:14px;right:14px;z-index:5;width:42px;height:42px;border-radius:50%;background:var(--sia-surface);box-shadow:var(--sia-shadow);display:flex;align-items:center;justify-content:center;font-size:0} .single-product .woocommerce-product-gallery__trigger::before{content:"🔍";font-size:1.125rem} .single-product .onsale{position:absolute;top:14px;left:14px;z-index:5;background:var(--sia-primary);color:#fff;border:0;min-height:0;min-width:0;padding:5px 12px;border-radius:999px;font-size:0.833rem;font-weight:700;font-family:var(--sia-body)} /* Summary */ .single-product .summary .product_title{font-size:clamp(1.5rem,3vw,2.125rem);line-height:1.1;margin:0 0 12px} .single-product .summary .woocommerce-product-rating{display:flex;align-items:center;gap:8px;margin:0 0 14px} .single-product .summary .woocommerce-product-rating .woocommerce-review-link{color:var(--sia-muted);font-size:0.833rem} .single-product .summary p.price,.single-product .summary .price{color:var(--sia-primary);font-family:var(--sia-display);margin:0 0 18px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .single-product .summary .price ins{text-decoration:none;font-size:1.875rem;font-weight:700;color:var(--sia-primary)} .single-product .summary .price .amount{font-size:1.875rem;font-weight:700;color:var(--sia-primary)} .single-product .summary .price del{font-size:1.125rem;color:var(--sia-muted);opacity:.8;font-family:var(--sia-body)} .single-product .summary .price del .amount{font-size:1.125rem;font-weight:500} .single-product .summary .woocommerce-product-details__short-description{color:var(--sia-muted);font-size:0.938rem;margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid var(--sia-line)} .single-product .summary .woocommerce-product-details__short-description p{margin:0 0 8px} /* Add-to-cart form */ .single-product .summary form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 8px} .single-product .summary form.cart .quantity{display:inline-flex} .single-product .summary form.cart .quantity .qty{width:72px;text-align:center;padding:13px 8px;border:1px solid var(--sia-line);border-radius:999px;font-family:var(--sia-body);font-size:0.938rem} .single-product .summary form.cart .single_add_to_cart_button{flex:1;min-width:200px;padding:15px 26px;font-size:0.938rem;background:var(--sia-primary)!important;color:#fff!important;border:0!important;border-radius:999px!important;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s} .single-product .summary form.cart .single_add_to_cart_button:hover{background:var(--sia-primary)!important;transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,58,138,.3)} .single-product .summary form.cart.variations_form{flex-direction:column;align-items:stretch} .single-product .summary .variations{width:100%;border-collapse:collapse;margin-bottom:8px} .single-product .summary .variations th,.single-product .summary .variations td{text-align:left;padding:8px 0;vertical-align:middle} .single-product .summary .variations select{width:100%;border:1px solid var(--sia-line);border-radius:var(--sia-radius-sm);padding:11px 12px;font-family:var(--sia-body)} .single-product .summary .single_variation_wrap .woocommerce-variation-price .price{margin:8px 0} .single-product .summary .stock{font-size:0.833rem;font-weight:600} .single-product .summary .stock.in-stock{color:#1e9e60} .single-product .summary .stock.out-of-stock{color:var(--sia-primary)} /* Product meta (SKU / cats / tags) */ .single-product .summary .product_meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--sia-line);font-size:0.833rem;color:var(--sia-muted)} .single-product .summary .product_meta>span{display:block;margin-bottom:4px} .single-product .summary .product_meta a{color:var(--sia-ink)} .single-product .summary .product_meta a:hover{color:var(--sia-primary)} /* Trust row under the buy button */ .sia-pdp-trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--sia-line)} .sia-pdp-trust li{display:flex;align-items:center;gap:9px;font-size:0.833rem;font-weight:600;color:var(--sia-ink)} .sia-pdp-trust-ico{display:inline-flex;align-items:center;justify-content:center;color:var(--sia-primary);flex:0 0 auto} .sia-pdp-trust-ico svg{display:block} /* Tabs (description / additional info / reviews) */ .single-product .woocommerce-tabs{grid-column:1/-1;width:100%;margin-top:40px;background:var(--sia-surface);border:1px solid var(--sia-line);border-radius:var(--sia-radius);overflow:hidden;box-shadow:var(--sia-shadow)} .single-product .woocommerce-tabs ul.tabs{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-wrap:nowrap;gap:0;background:var(--sia-surface)!important;border-bottom:1px solid var(--sia-line)!important;overflow-x:auto;scrollbar-width:none} .single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none} .single-product .woocommerce-tabs ul.tabs::before,.single-product .woocommerce-tabs ul.tabs::after,.single-product .woocommerce-tabs ul.tabs li::before,.single-product .woocommerce-tabs ul.tabs li::after{content:none!important;display:none!important;border:0!important} .single-product .woocommerce-tabs ul.tabs li{margin:0!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important;flex:0 0 auto} .single-product .woocommerce-tabs ul.tabs li a{display:block!important;padding:15px 22px!important;font-weight:700;font-size:0.875rem;color:var(--sia-muted)!important;border:0!important;border-bottom:2px solid transparent!important;white-space:nowrap;background:none!important;text-shadow:none!important} .single-product .woocommerce-tabs ul.tabs li a:hover{color:var(--sia-ink)!important} .single-product .woocommerce-tabs ul.tabs li.active a{color:var(--sia-primary)!important;background:none!important;border-bottom-color:var(--sia-primary)!important} .single-product .woocommerce-tabs .panel{background:var(--sia-surface)!important;border:0!important;border-radius:0!important;padding:26px 24px!important;margin:0!important;box-shadow:none!important;max-width:100%} @media(min-width:1100px){.single-product .woocommerce-tabs .panel{max-width:980px}} .single-product .woocommerce-tabs .panel h2:first-child{font-size:1.25rem;margin-bottom:14px} .single-product .woocommerce-tabs table.shop_attributes{width:100%;border-collapse:collapse} .single-product .woocommerce-tabs table.shop_attributes th, .single-product .woocommerce-tabs table.shop_attributes td{padding:10px 12px;border-bottom:1px solid var(--sia-line);font-size:0.875rem;text-align:left} .single-product .woocommerce-tabs table.shop_attributes th{background:var(--sia-bg);width:30%;font-weight:600} .single-product #reviews .comment-text{background:var(--sia-bg);border-radius:var(--sia-radius-sm);padding:14px 16px} .single-product #reviews .star-rating{color:var(--sia-primary)} /* Desktop sticky add-to-cart bar (mobile bar already styled above) */ @media(min-width:769px){ .sia-sticky-atc{display:block} .sia-sticky-atc .sia-sticky-inner{display:flex;align-items:center;gap:18px;padding:12px 20px} .sia-sticky-atc .sia-sticky-thumb{width:46px;height:46px;object-fit:cover;border-radius:var(--sia-radius-sm);border:1px solid var(--sia-line)} .sia-sticky-atc .sia-sticky-info{display:flex;flex-direction:column;line-height:1.2} .sia-sticky-atc .sia-sticky-name{font-weight:700;font-size:0.938rem;color:var(--sia-ink)} .sia-sticky-atc .sia-sticky-price{font-size:0.875rem;color:var(--sia-muted)} .sia-sticky-atc .sia-btn{margin-left:auto} } /* ============================================================ v1.0.0.52 — Product card upgrades: second-image hover swap, low-stock urgency pill, price scale. ============================================================ */ /* Second-image hover swap (falls back to the existing zoom). */ .sia-pcard-media.has-swap .sia-pcard-img--swap{position:absolute;inset:0;opacity:0;transition:opacity .28s ease} .sia-pcard-media.has-swap:hover .sia-pcard-img--swap, .sia-pcard:hover .sia-pcard-media.has-swap .sia-pcard-img--swap{opacity:1} /* When a swap image exists, don't also zoom the primary (cleaner). */ .sia-pcard:hover .sia-pcard-media.has-swap img{transform:none} @media(hover:none){.sia-pcard-media.has-swap .sia-pcard-img--swap{display:none}} /* Low-stock urgency pill (bottom-left over the image). */ .sia-pcard-stock{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:5px;background:rgba(20,25,37,.85);color:#fff;font-size:0.833rem;font-weight:700;letter-spacing:.01em;padding:4px 10px;border-radius:999px;backdrop-filter:blur(2px)} .sia-pcard-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sia-primary);box-shadow:0 0 0 0 rgba(30,58,138,.6);animation:siaStockPulse 1.8s ease-out infinite} @keyframes siaStockPulse{0%{box-shadow:0 0 0 0 rgba(30,58,138,.55)}70%{box-shadow:0 0 0 6px rgba(30,58,138,0)}100%{box-shadow:0 0 0 0 rgba(30,58,138,0)}} @media(prefers-reduced-motion:reduce){.sia-pcard-stock::before{animation:none}} /* Price scale: emphasise the sale (ins) price, de-emphasise the struck original. */ .sia-pcard-price ins{font-size:1.063rem;font-weight:800} .sia-pcard-price del{font-size:0.833rem;opacity:.85} .sia-pcard-price ins .amount{font-weight:800} /* ============================================================ v1.0.0.53 — Shop filter polish: dual-handle price slider, grid-density toggle, branded empty-results state. ============================================================ */ /* Dual-handle price slider (overlaid range inputs + fill track). */ .sia-price-slider{position:relative;height:34px;margin:6px 2px 10px} .sia-price-slider[aria-hidden="true"]{display:none} .sia-price-track{position:absolute;top:15px;left:0;right:0;height:4px;border-radius:999px;background:var(--sia-line)} .sia-price-fill{position:absolute;top:0;bottom:0;background:var(--sia-primary);border-radius:999px} .sia-price-range{position:absolute;top:8px;left:0;width:100%;height:18px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none} .sia-price-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--sia-surface);border:2px solid var(--sia-primary);box-shadow:var(--sia-shadow);cursor:pointer} .sia-price-range::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--sia-surface);border:2px solid var(--sia-primary);box-shadow:var(--sia-shadow);cursor:pointer} .sia-price-range::-webkit-slider-runnable-track{background:none} .sia-price-range:focus-visible::-webkit-slider-thumb{outline:2px solid var(--sia-primary);outline-offset:2px} /* Grid-density toggle (desktop only — hidden on small screens). */ .sia-density{display:none} @media(min-width:1025px){ .sia-density{display:inline-flex;gap:2px;margin-left:8px;border:1px solid var(--sia-line);border-radius:999px;padding:3px;background:var(--sia-surface)} .sia-density-btn{border:0;background:none;width:32px;height:30px;border-radius:999px;cursor:pointer;font-size:0.938rem;line-height:1;color:var(--sia-muted)} .sia-density-btn:hover{color:var(--sia-ink)} .sia-density-btn.is-active{background:var(--sia-primary);color:#fff} .sia-woo ul.products.sia-cols-3{grid-template-columns:repeat(3,1fr)} .sia-woo ul.products.sia-cols-4{grid-template-columns:repeat(4,1fr)} } /* Branded empty-results state. */ .sia-noresults{text-align:center;background:var(--sia-surface);border:1px dashed var(--sia-line);border-radius:var(--sia-radius);padding:56px 24px;margin:8px 0} .sia-noresults-ico{font-size:2.75rem;display:block;margin-bottom:10px} .sia-noresults h2{font-size:1.375rem;margin-bottom:8px} .sia-noresults p{color:var(--sia-muted);margin:0 auto 18px;max-width:46ch} .sia-noresults .sia-btn{display:inline-flex} /* ---- Step 6: USP strip, newsletter, free-shipping bar ---- */ .sia-usp-strip{border-bottom:1px solid var(--sia-border);background:#fff} .sia-usp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 20px} .sia-usp{display:flex;align-items:center;gap:10px;justify-content:center;min-width:0} .sia-usp-ico{font-size:1.375rem;line-height:1;color:var(--sia-primary);flex:none} .sia-usp-ico.dashicons{width:22px;height:22px;font-size:1.375rem} .sia-usp-txt{display:flex;flex-direction:column;min-width:0} .sia-usp-txt strong{font-size:0.833rem;font-weight:600;line-height:1.2} .sia-usp-txt small{font-size:0.833rem;color:var(--sia-muted,#6b7280);line-height:1.2} @media(max-width:880px){.sia-usp-row{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.sia-usp-txt small{display:none}.sia-usp{justify-content:flex-start}} .sia-newsletter{background:var(--sia-accent);color:#fff} .sia-newsletter-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 20px;flex-wrap:wrap} .sia-newsletter-copy h2{margin:0 0 4px;font-size:1.375rem;color:#fff} .sia-newsletter-copy p{margin:0;opacity:.8;font-size:0.875rem} .sia-newsletter-form{display:flex;gap:8px;flex:1;min-width:280px;max-width:460px} .sia-newsletter-form input{flex:1;min-width:0;padding:12px 14px;border:1px solid rgba(255,255,255,.25);border-radius:var(--sia-radius-sm);background:rgba(255,255,255,.08);color:#fff;font-size:0.875rem} .sia-newsletter-form input::placeholder{color:rgba(255,255,255,.6)} .sia-newsletter-form input:focus{outline:2px solid var(--sia-primary);outline-offset:1px} @media(max-width:680px){.sia-newsletter-inner{flex-direction:column;align-items:stretch;text-align:center}.sia-newsletter-form{max-width:none}} .sia-freeship{margin:0 0 12px} .sia-freeship-msg{margin:0 0 6px;font-size:0.833rem;color:var(--sia-accent)} .sia-freeship-msg strong{color:var(--sia-primary)} .sia-freeship.is-complete .sia-freeship-msg strong{color:#16a34a} .sia-freeship-track{height:7px;border-radius:999px;background:var(--sia-border);overflow:hidden} .sia-freeship-fill{display:block;height:100%;border-radius:999px;background:var(--sia-primary);transition:width .4s ease} .sia-freeship.is-complete .sia-freeship-fill{background:#16a34a} /* ============================================================ Kevro branding + product features (phase 2) */ .sia-pf{margin-top:24px;padding-top:20px;border-top:1px solid var(--sia-line)} .sia-pf-title{font-family:var(--sia-display);font-size:1.125rem;font-weight:600;margin:0 0 12px} .sia-pf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .sia-pf-list li{position:relative;padding-left:22px;font-size:0.875rem;line-height:1.5;color:var(--sia-ink)} .sia-pf-list li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--sia-primary)} .sia-brand{margin-top:26px;padding:20px;border:1px solid var(--sia-line);border-radius:var(--sia-radius);background:var(--sia-surface);box-shadow:var(--sia-shadow)} .sia-brand-title{font-family:var(--sia-display);font-size:1.125rem;font-weight:600;margin:0 0 8px} .sia-brand-note{font-size:0.8125rem;line-height:1.5;color:var(--sia-muted);background:var(--sia-surface-alt);border-radius:var(--sia-radius-sm);padding:12px 14px;margin:0 0 16px} .sia-brand-grid{display:flex;flex-direction:column;gap:0} .sia-brand-head{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;padding:0 0 10px;font-size:0.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sia-muted);border-bottom:1px solid var(--sia-line)} .sia-brand-row{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--sia-line)} .sia-brand-row:last-child{border-bottom:0} .sia-brand-pos{font-size:0.875rem;font-weight:600;color:var(--sia-ink)} .sia-brand-sel{width:100%;border:1px solid var(--sia-line);border-radius:var(--sia-radius-sm);padding:11px 12px;font-family:var(--sia-body);font-size:0.875rem;background:var(--sia-surface);color:var(--sia-ink);cursor:pointer} .sia-brand-sel:focus{outline:none;border-color:var(--sia-primary);box-shadow:0 0 0 3px rgba(30,58,138,.12)} .sia-brand-help{margin:14px 0 0;font-size:0.8125rem;color:var(--sia-muted)} .sia-brand-help a{color:var(--sia-primary);font-weight:600} /* Kevro branding artwork upload */ .sia-brand-upload{margin-top:16px;padding-top:16px;border-top:1px solid var(--sia-line)} .sia-brand-upload .sia-brand-pos{display:block;margin-bottom:8px} .sia-brand-file{display:block;width:100%;font-family:var(--sia-body);font-size:0.8125rem;color:var(--sia-ink);padding:10px;border:1px dashed var(--sia-line);border-radius:var(--sia-radius-sm);background:var(--sia-surface-alt);cursor:pointer} .sia-brand-file::file-selector-button{font-family:var(--sia-body);font-weight:600;font-size:0.8125rem;color:#fff;background:var(--sia-primary);border:0;border-radius:999px;padding:8px 14px;margin-right:12px;cursor:pointer} .sia-brand-upload-status{margin:8px 0 0;font-size:0.8125rem;font-weight:600;min-height:1em} .sia-brand-upload-hint{margin:6px 0 0;font-size:0.75rem;color:var(--sia-muted)}