/* ==========================================================================
   Cygnik storefront — light-commerce theme on the Cygnik design system.
   Navy brand, teal accent, Geist Mono for all data (SKU / price / spec).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;

  /* Brand (from Cygnik Tech logo) */
  --navy-900: #0A1E3F;
  --navy-700: #143063;
  --navy-500: #1F3A73;
  --teal-700: #1A8A8A;
  --teal-500: #2DC4C4;
  --teal-300: #8EE2E2;
  --teal-050: #E7F8F8;

  /* Light commerce canvas */
  --paper:     #FBFBF9;   /* page */
  --surface:   #FFFFFF;   /* cards */
  --surface-2: #F4F4F1;   /* tinted blocks */
  --surface-3: #ECECE7;

  --ink-1: #0C1626;   /* primary text — near navy-black */
  --ink-2: #3A4658;   /* secondary */
  --ink-3: #6B7689;   /* meta */
  --ink-4: #9AA3B2;   /* muted */

  --line:   #E4E5E0;
  --line-2: #D3D5CF;
  --line-navy: rgba(10,30,63,0.12);

  --ok:     #1B9E5A;
  --ok-bg:  #E6F6EC;
  --warn:   #B6791E;
  --warn-bg:#FCF2DC;
  --danger: #C8412F;
  --sale:   #C8412F;

  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 22px; --r-pill: 999px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px; --s-11:96px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-xs: 0 1px 2px rgba(12,22,38,0.06);
  --shadow-sm: 0 1px 3px rgba(12,22,38,0.08), 0 1px 2px rgba(12,22,38,0.04);
  --shadow-md: 0 10px 28px -12px rgba(12,22,38,0.18), 0 2px 6px rgba(12,22,38,0.06);
  --shadow-lg: 0 30px 70px -28px rgba(12,22,38,0.32);
  --shadow-teal: 0 8px 24px -8px rgba(45,196,196,0.5);

  --wrap: 1240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--ink-1);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5 { margin: 0; font-weight: 600; color: var(--ink-1); letter-spacing: -0.02em; text-wrap: balance; line-height: 1.1; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--teal-700);
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  border-radius: var(--r-pill); padding: 11px 20px; border: 1.5px solid transparent;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  transition: transform .25s var(--ease-out), background .15s, box-shadow .25s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-teal { background: var(--teal-500); color: var(--navy-900); box-shadow: var(--shadow-teal); }
.btn-teal:hover { background: var(--teal-300); transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(45,196,196,0.65); }
.btn-navy { background: var(--navy-900); color: #fff; }
.btn-navy:hover { background: var(--navy-700); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--navy-900); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--navy-900); background: #fff; }
.btn-lg { padding: 15px 28px; font-size: 15px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Badges / pills ---------------------------------------------------- */
.pill {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 9px; border-radius: var(--r-pill); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.pill-teal { background: var(--teal-050); color: var(--teal-700); }
.pill-navy { background: rgba(10,30,63,0.07); color: var(--navy-700); }
.pill-sale { background: #FBE9E6; color: var(--sale); }
.pill-new  { background: #EFEAFB; color: #6B46C1; }
.pill-stock { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dot-live { background: var(--ok); box-shadow: 0 0 0 0 rgba(27,158,90,.5); animation: livepulse 2.4s ease-in-out infinite; }
@keyframes livepulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(27,158,90,.45);} 50%{ box-shadow: 0 0 0 5px rgba(27,158,90,0);} }

.stars { display: inline-flex; gap: 1px; color: #F2A93B; }
.stars svg { width: 14px; height: 14px; }

/* ============================ HEADER =================================== */
.announce {
  background: var(--navy-900); color: #DCE6F5;
  font-size: 12.5px; text-align: center; padding: 8px 16px;
  font-family: var(--font-mono); letter-spacing: .02em;
}
.announce strong { color: var(--teal-300); font-weight: 600; }
.header { position: sticky; top: 0; z-index: 50; background: rgba(251,251,249,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; gap: 24px; height: 88px; }
.logo { height: 70px; width: auto; flex: none; }
.search-wrap { flex: 1; position: relative; max-width: 560px; }
.search-input {
  width: 100%; height: 44px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill);
  padding: 0 18px 0 44px; font-family: var(--font-sans); font-size: 14px; background: #fff; color: var(--ink-1);
  transition: border-color .15s, box-shadow .15s;
}
.search-input:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(45,196,196,0.15); }
.search-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.header-actions { display: flex; align-items: center; gap: 6px; flex: none; }
/* Cisco co-brand lockup: Cygnik logo left, Cisco Partner logo right, equal scale (Cisco guide p.20). */
.header-cobrand { margin-left: auto; flex: none; display: flex; align-items: center; text-decoration: none; padding: 4px 8px; border-radius: 10px; transition: background .15s; }
.header-cobrand:hover { background: rgba(13,39,77,.06); }
.cobrand-logo { height: 64px; width: auto; display: block; }
.icon-btn { position: relative; width: 42px; height: 42px; border-radius: var(--r-pill); border: none; background: transparent; color: var(--ink-1); display: grid; place-items: center; transition: background .15s; }
.icon-btn:hover { background: var(--surface-2); }
.cart-count { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-pill); background: var(--teal-500); color: var(--navy-900); font-family: var(--font-mono); font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.nav { display: flex; gap: 2px; height: 48px; align-items: center; border-top: 1px solid var(--line); }
.nav a { font-size: 13.5px; font-weight: 500; color: var(--ink-2); padding: 8px 14px; border-radius: var(--r-2); transition: background .15s, color .15s; display: inline-flex; align-items: center; gap: 7px; }
.nav a:hover { background: var(--surface-2); color: var(--navy-900); }
.nav a.soon { color: var(--ink-4); }
.nav-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; background: var(--surface-3); color: var(--ink-3); padding: 2px 5px; border-radius: var(--r-1); }

/* ============================ HERO ===================================== */
.hero { position: relative; background: var(--navy-900); color: #fff; overflow: hidden; }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 90% at 70% 10%, #000 30%, transparent 75%); }
.hero-glow { position: absolute; top: -20%; right: -5%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(45,196,196,0.28), transparent 60%); pointer-events: none; }
.hero-inner { position: relative; padding: 72px 0 80px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.02; letter-spacing: -0.035em; color: #fff; }
.hero h1 .out { -webkit-text-stroke: 1.4px rgba(255,255,255,.55); color: transparent; }
.hero h1 .teal { color: var(--teal-300); }
.hero p.lede { font-size: 18px; color: #B9C6DC; max-width: 30em; margin-top: 20px; }
.hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 22px; margin-top: 36px; flex-wrap: wrap; }
.hero-trust .ht { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #C7D2E4; }
.hero-trust .ht svg { color: var(--teal-300); flex: none; }
.hero-card-stack { position: relative; min-height: 340px; }

/* ============================ TRUST STRIP ============================== */
.trust-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.trust-strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust-item { display: flex; align-items: center; gap: 13px; padding: 22px 20px; border-right: 1px solid var(--line); }
.trust-item:last-child { border-right: none; }
.trust-item svg { color: var(--teal-700); flex: none; }
.trust-item .tt { font-size: 13.5px; font-weight: 600; color: var(--ink-1); }
.trust-item .ts { font-size: 12px; color: var(--ink-3); }

/* ============================ SECTIONS ================================= */
.section { padding: 64px 0; }
.section.tight { padding: 44px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 20px; }
.section-head h2 { font-size: clamp(26px, 3vw, 34px); }
.section-head .sub { color: var(--ink-3); font-size: 14.5px; margin-top: 6px; }
.section-head a.more { font-size: 13.5px; font-weight: 600; color: var(--teal-700); display: inline-flex; align-items: center; gap: 6px; flex: none; }
.section-head a.more:hover { gap: 9px; }

/* ============================ PRODUCT CARD ============================= */
.grid-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1080px){ .grid-cards { grid-template-columns: repeat(3,1fr);} }
@media (max-width: 820px){ .grid-cards { grid-template-columns: repeat(2,1fr);} .trust-strip .wrap{grid-template-columns:repeat(2,1fr);} .trust-item:nth-child(2){border-right:none;} }
@media (max-width: 520px){ .grid-cards { grid-template-columns: 1fr;} }

.pcard {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-4); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .2s;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); cursor: pointer; }
.pcard-media { position: relative; aspect-ratio: 4/3; background: linear-gradient(160deg, #F7F8F7, #ECEEEE); display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.pcard-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; z-index: 2; }
.pcard-rank { position: absolute; top: 12px; right: 12px; z-index: 2; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-3); background: rgba(255,255,255,.85); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 9px; }
.pcard-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcard-sku { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); letter-spacing: .02em; }
.pcard-name { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink-1); }
.pcard-tag { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); }
.pcard-foot { margin-top: auto; padding-top: 10px; }
.price-row { display: flex; align-items: baseline; gap: 8px; }
.price { font-family: var(--font-mono); font-size: 21px; font-weight: 600; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.price-cur { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); align-self: flex-start; margin-top: 3px; }
.price-was { font-family: var(--font-mono); font-size: 13px; color: var(--ink-4); text-decoration: line-through; }
.price-list { font-size: 11px; color: var(--ink-4); }
.stock-line { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11.5px; margin-top: 4px; }
.stock-line.ok { color: var(--ok); }
.stock-line.low { color: var(--warn); }
.pcard-add { margin-top: 12px; display: flex; gap: 8px; }
.add-mini { flex: 1; }

/* card style variants (Tweaks) */
.cards-b .pcard { border-radius: var(--r-2); }
.cards-b .pcard-media { aspect-ratio: 16/10; background: #fff; }
.cards-b .pcard:hover { box-shadow: var(--shadow-lg); }
.cards-c .pcard { border: 1px solid var(--line); }
.cards-c .pcard-media { background: var(--navy-900); }
.cards-c .pcard-media .device-glyph { filter: none; }
.cards-minimal .pcard { box-shadow: none; }
.cards-minimal .pcard-add { display: none; }
.cards-minimal .pcard:hover .pcard-add { display: flex; }
.hide-ranks .pcard-rank { display: none; }

/* device glyph (placeholder product visual) */
.device-glyph { width: 70%; max-width: 200px; }
.device-glyph .stroke { stroke: var(--navy-700); }
.cards-c .device-glyph .stroke { stroke: var(--teal-300); }
.device-glyph .accent { stroke: var(--teal-500); }
.device-glyph .fill-soft { fill: rgba(45,196,196,0.08); }

/* ============================ CATEGORY TILES =========================== */
.cat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
@media (max-width: 880px){ .cat-grid { grid-template-columns: repeat(2,1fr);} }
.cat-tile { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-4); padding: 24px; min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s, border-color .2s; }
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal-300); }
.cat-tile .cat-ico { width: 40px; height: 40px; color: var(--teal-700); }
.cat-tile h3 { font-size: 18px; margin-top: 14px; }
.cat-tile p { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.cat-tile .cat-short { position: absolute; top: 20px; right: 22px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); letter-spacing: .04em; }
.cat-tile.soon { opacity: .82; }
.cat-tile.soon::after { content: "COMING SOON"; position: absolute; bottom: 20px; right: 22px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--ink-4); }

/* ============================ DECISION RAIL ============================ */
.decide { background: var(--navy-900); color: #fff; border-radius: var(--r-5); padding: 44px; position: relative; overflow: hidden; }
.decide .hero-grid { mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 20%, transparent 70%); }
.decide-head { position: relative; text-align: center; max-width: 640px; margin: 0 auto 36px; }
.decide-head h2 { color: #fff; font-size: 30px; }
.decide-head p { color: #B9C6DC; margin-top: 12px; }
.decide-cols { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 880px; margin: 0 auto; }
@media (max-width: 760px){ .decide-cols { grid-template-columns: 1fr; } }
.decide-col { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-4); padding: 26px; }
.decide-col h3 { color: #fff; font-size: 19px; }
.decide-col .dsub { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 4px; }
.decide-col.meraki .dsub { color: var(--teal-300); }
.decide-col.cat .dsub { color: #F2C879; }
.decide-col ul { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.decide-col li { display: flex; gap: 10px; font-size: 13.5px; color: #C7D2E4; align-items: flex-start; }
.decide-col li svg { color: var(--teal-300); flex: none; margin-top: 2px; }
.decide-col.cat li svg { color: #F2C879; }
.decide-col .btn { margin-top: 22px; }

/* ============================ LISTING PAGE ============================= */
.listing { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
@media (max-width: 880px){ .listing { grid-template-columns: 1fr; } .filters { position: static !important; } }
.filters { position: sticky; top: 130px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-4); padding: 6px 20px 20px; }
.filter-group { padding: 18px 0; border-bottom: 1px solid var(--line); }
.filter-group:last-child { border-bottom: none; }
.filter-group h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 12px; }
.check { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--teal-700); cursor: pointer; flex: none; }
.check > span:not(.cnt) { white-space: nowrap; }
.check .cnt { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.check:hover { color: var(--ink-1); }
.listing-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.listing-top .count { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
.sortsel { font-family: var(--font-sans); font-size: 13px; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); padding: 9px 16px; background: #fff; color: var(--ink-1); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { font-family: var(--font-mono); font-size: 12px; padding: 6px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: #fff; color: var(--ink-2); transition: all .15s; }
.chip:hover { border-color: var(--navy-900); }
.chip.active { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

/* ============================ PDP ====================================== */
.pdp { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: start; }
@media (max-width: 920px){ .pdp { grid-template-columns: 1fr; gap: 28px; } }
.pdp-media { position: sticky; top: 130px; background: linear-gradient(160deg,#F7F8F7,#ECEEEE); border: 1px solid var(--line); border-radius: var(--r-4); aspect-ratio: 1/1; display: grid; place-items: center; overflow: hidden; }
@media (max-width: 920px){ .pdp-media { position: static; aspect-ratio: 16/10; } }
.pdp-media .device-glyph { max-width: 340px; width: 64%; }
.pdp h1 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 8px; }
.pdp-sku { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.pdp-tag { font-size: 16px; color: var(--ink-2); margin-top: 14px; line-height: 1.5; }
.pdp-price { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 4px; }
.pdp-price .price { font-size: 34px; }
.pdp-stock { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; margin: 10px 0 22px; }
.pdp-hi { display: flex; flex-direction: column; gap: 10px; margin: 22px 0; }
.pdp-hi li { display: flex; gap: 11px; font-size: 14.5px; color: var(--ink-2); align-items: flex-start; }
.pdp-hi li svg { color: var(--teal-700); flex: none; margin-top: 3px; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: var(--r-pill); overflow: hidden; }
.qty button { width: 38px; height: 44px; border: none; background: #fff; font-size: 18px; color: var(--ink-2); }
.qty button:hover { background: var(--surface-2); }
.qty span { width: 40px; text-align: center; font-family: var(--font-mono); font-weight: 600; }
.buy-row { display: flex; gap: 12px; align-items: stretch; margin: 22px 0; }
.cisco-note { background: var(--warn-bg); border: 1px solid #E6D49B; border-radius: var(--r-3); padding: 12px 14px; display: flex; gap: 10px; font-size: 13px; color: #6B4E14; margin: 10px 0; align-items: flex-start; }
.cisco-note svg { flex: none; color: var(--warn); margin-top: 1px; }
.cisco-note.good { background: var(--ok-bg); border-color: #B7E3C6; color: #14663B; }
.cisco-note.good svg { color: var(--ok); }

/* attach widget */
.attach { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-4); padding: 20px; margin: 24px 0; }
.attach-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.attach-head h3 { font-size: 16px; }
.attach .req { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; background: var(--navy-900); color: #fff; padding: 3px 8px; border-radius: var(--r-1); }
.attach-row { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-3); padding: 13px 15px; margin-top: 12px; }
.attach-row.sel { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(45,196,196,.14); }
.attach-row .ar-glyph { width: 40px; height: 40px; flex: none; background: var(--surface-2); border-radius: var(--r-2); display: grid; place-items: center; color: var(--teal-700); }
.attach-row .ar-name { font-size: 13.5px; font-weight: 600; }
.attach-row .ar-sku { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.attach-row .ar-price { margin-left: auto; font-family: var(--font-mono); font-weight: 600; }
.term-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
.term-seg button { border: none; background: transparent; font-family: var(--font-mono); font-size: 12px; padding: 7px 13px; border-radius: var(--r-pill); color: var(--ink-2); position: relative; }
.term-seg button.on { background: var(--navy-900); color: #fff; }
.term-seg button .save { display: block; font-size: 8.5px; color: var(--ok); margin-top: 1px; }
.term-seg button.on .save { color: var(--teal-300); }

/* spec & tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 40px 0 0; }
.tabs button { border: none; background: transparent; padding: 14px 18px; font-size: 14px; font-weight: 600; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: var(--navy-900); border-bottom-color: var(--teal-500); }
.spec-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table td { padding: 13px 4px; font-size: 14px; vertical-align: top; }
.spec-table td:first-child { color: var(--ink-3); width: 42%; }
.spec-table td:last-child { font-family: var(--font-mono); color: var(--ink-1); font-variant-numeric: tabular-nums; }

/* ============================ CART ===================================== */
.cart-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }
@media (max-width: 860px){ .cart-wrap { grid-template-columns: 1fr; } }
.cart-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-item .ci-media { width: 84px; height: 84px; background: linear-gradient(160deg,#F7F8F7,#ECEEEE); border: 1px solid var(--line); border-radius: var(--r-3); display: grid; place-items: center; }
.cart-item .ci-media .device-glyph { width: 64%; }
.cart-item .ci-name { font-weight: 600; font-size: 14.5px; }
.cart-item .ci-sku { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.cart-item .ci-attach { font-family: var(--font-mono); font-size: 11px; color: var(--teal-700); margin-top: 4px; }
.ci-right { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ci-price { font-family: var(--font-mono); font-weight: 600; font-size: 16px; }
.link-rm { font-size: 12px; color: var(--ink-3); background: none; border: none; padding: 0; }
.link-rm:hover { color: var(--danger); }
.summary { position: sticky; top: 130px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-4); padding: 24px; }
.summary h3 { font-size: 17px; margin-bottom: 16px; }
.sum-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: var(--ink-2); }
.sum-row .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sum-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; font-size: 18px; font-weight: 600; color: var(--ink-1); }
.sum-row.total .v { font-size: 22px; }
.freeship-bar { height: 7px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; margin: 6px 0 4px; }
.freeship-bar > div { height: 100%; background: var(--teal-500); border-radius: inherit; transition: width .5s var(--ease-out); }

/* empty state */
.empty { text-align: center; padding: 80px 20px; }
.empty svg { color: var(--ink-4); }
.empty h3 { margin: 18px 0 8px; }
.empty p { color: var(--ink-3); }

/* breadcrumb */
.crumb { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding: 18px 0; display: flex; gap: 8px; align-items: center; }
.crumb a:hover { color: var(--teal-700); }
.crumb .sep { color: var(--ink-4); }

/* ============================ INDUSTRY RAIL ============================ */
.vert-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 980px){ .vert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .vert-grid { grid-template-columns: 1fr; } }
.vert-tile { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); padding: 18px; transition: transform .25s var(--ease-out), box-shadow .25s, border-color .2s; color: var(--teal-700); }
.vert-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--teal-300); }
.vert-tile .vt-name { font-size: 13.5px; font-weight: 600; color: var(--ink-1); line-height: 1.2; }
.vert-tile .vt-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.vert-tile .vt-arrow { margin-left: auto; color: var(--ink-4); flex: none; }

/* ============================ RENEWALS PAGE ============================ */
.renew-hero { background: var(--navy-900); color: #fff; border-radius: var(--r-5); padding: 44px; position: relative; overflow: hidden; margin-bottom: 32px; }
.renew-hero h1 { color: #fff; font-size: clamp(28px, 4vw, 40px); max-width: 16em; position: relative; }
.renew-hero p { color: #B9C6DC; max-width: 44em; margin-top: 14px; font-size: 16px; position: relative; }
.renew-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 28px 0 8px; }
@media (max-width: 760px){ .renew-steps { grid-template-columns: 1fr; } }
.renew-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-4); padding: 22px; }
.renew-step .rn-num { font-family: var(--font-mono); font-size: 12px; color: var(--teal-700); font-weight: 600; }
.renew-step h3 { font-size: 16px; margin: 8px 0 6px; }
.renew-step p { font-size: 13.5px; color: var(--ink-3); }
.eos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 760px){ .eos-grid { grid-template-columns: 1fr; } }
.eos-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-4); padding: 22px; }
.eos-card h3 { font-size: 15px; display: flex; align-items: center; gap: 9px; }
.eos-card h3 .dot { background: var(--danger); }
.eos-card ul { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.eos-card li { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 10px; }
.eos-card .eos-note { font-size: 12.5px; color: var(--ink-3); margin-top: 12px; }

/* ============================ FOOTER =================================== */
.footer { background: var(--navy-900); color: #B9C6DC; margin-top: 72px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0 40px; }
@media (max-width: 760px){ .footer-top { grid-template-columns: 1fr 1fr; } }
.footer h4 { color: #fff; font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 16px; font-weight: 600; }
.footer a { display: block; font-size: 13.5px; color: #B9C6DC; padding: 5px 0; }
.footer a:hover { color: var(--teal-300); }
.footer .flogo { height: 40px; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: .95; }
.footer .fdesc { font-size: 13.5px; max-width: 30em; }
.footer .fserif { font-family: var(--font-serif); font-style: italic; color: var(--teal-300); font-size: 19px; margin-top: 16px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; font-family: var(--font-mono); color: #7E8DA6; }

/* toast */
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast { background: var(--navy-900); color: #fff; border-radius: var(--r-3); padding: 13px 20px; box-shadow: var(--shadow-lg); font-size: 13.5px; display: flex; align-items: center; gap: 12px; animation: toastin .4s var(--ease-out); }
.toast svg { color: var(--teal-300); }
@keyframes toastin { from { opacity: 0; transform: translateY(16px); } }

/* entrance is intentionally a no-op: content is always visible.
   (A hide-then-animate entrance can freeze invisible in throttled iframes.) */
.reveal { }
.reveal.in { }

/* ============================================================
   Phone refinements (iOS + Android) — added at code handoff.
   The design shipped grid breakpoints but left the header nav
   and the hero's two-column layout without a phone treatment.
   ============================================================ */
@media (max-width: 760px){
  /* Header top row: tighten so brand + search + icons fit a phone */
  .header-row { gap: 10px; height: 64px; }
  .logo { height: 50px; }          /* keep the bigger desktop logo from overflowing the phone header */
  .header-cobrand { display: none; }  /* phone header is too tight for a 2nd logo — footer badge carries trust on mobile */
  .search-input { font-size: 13px; }

  /* Category nav: 7–8 links can't fit a phone — make it a horizontal
     scroll strip so every category stays one swipe away, with no
     page-wide horizontal overflow. */
  .nav {
    height: 46px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; white-space: nowrap; scroll-snap-align: start; }

  /* Hero: stack the headline above the product card */
  .hero-inner { grid-template-columns: 1fr; gap: 28px; padding: 44px 0 52px; }
  .hero-card-stack { min-height: 0; }
  .hero h1 { font-size: clamp(32px, 8.5vw, 46px); }
  .hero p.lede { font-size: 16px; }
}

/* Small phones (≤380px): a little more breathing room */
@media (max-width: 380px){
  .header-row { gap: 8px; }
  .nav a { padding: 8px 11px; font-size: 13px; }
}

/* ============================================================
   Mobile overflow hardening — stops iOS/Android "shrink-to-fit"
   (where any element wider than the screen makes the whole page
   render zoomed-out: 3 cramped card columns, clipped prices).
   `overflow-x: clip` does NOT create a scroll container, so the
   sticky header keeps working (unlike overflow-x: hidden).
   ============================================================ */
html { overflow-x: clip; }
img, video { max-width: 100%; height: auto; }

/* The category listing grid is hard-coded to repeat(3,1fr) via an inline
   style in the JSX, which overrides the media queries. Beat it on phones. */
@media (max-width: 820px){ .grid-cards[style]{ grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 520px){ .grid-cards[style]{ grid-template-columns: 1fr !important; } }

/* Mobile filter drawer — on a phone, don't push products below a long filter
   list. A "Filters" toggle collapses the rail by default; tap to expand. */
.filter-toggle { display: none; }
@media (max-width: 880px){
  .filter-toggle {
    display: flex; align-items: center; width: 100%; margin-bottom: 14px;
    padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); font-weight: 600; font-size: 14px; cursor: pointer;
    color: var(--ink-1); -webkit-tap-highlight-color: transparent;
  }
  .filters { display: none; }
  .filters.open { display: block; margin-bottom: 18px; }
  /* roomier tap targets on phones */
  .check { padding: 9px 2px; }
  .sortsel { min-height: 42px; }
}

/* Form rows (checkout, inquiry) — fixed-width inline grids overflow a phone, so
   use classes that stack on small screens. */
.fgrid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fgrid-3 { display: grid; grid-template-columns: 1fr 160px 120px; gap: 14px; }
@media (max-width: 560px){ .fgrid-2, .fgrid-3 { grid-template-columns: 1fr; gap: 10px; } }

/* S3: neutral lead-time chips (no day counts) */
.stock-line.note{color:#64748b}
.stock-line.note svg{opacity:.7}
.stock-line .dot{background:#cbd5e1}

/* S6: starter-kit bundles */
.bundle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;padding:8px 0 44px}
.bundle-page{max-width:740px;margin:0 auto;padding:22px 0 52px}
.qty-step{display:inline-flex;align-items:center;gap:8px;margin:0 14px}
.qty-step button{width:26px;height:26px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;font-size:16px;line-height:1}
.qty-step span{min-width:18px;text-align:center}
.bundle-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}

/* Content protection — block selection site-wide, keep it in form fields (search/checkout/qty). */
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}

/* .copyable — contact info etc. stays selectable despite the site-wide block (playbook §8/§16). */
.copyable,.copyable *{-webkit-user-select:text !important;-moz-user-select:text !important;-ms-user-select:text !important;user-select:text !important}

/* Contact page */
.contact-wrap{max-width:1040px;margin:0 auto;padding:40px 24px 64px}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
.ci-row{display:flex;gap:13px;align-items:flex-start;margin:18px 0}
.ci-row .ci-ico{color:var(--teal-700);flex:none;margin-top:2px}
.ci-row a,.ci-val{color:var(--ink-1);font-weight:500}
.contact-map iframe{width:100%;height:240px;border:0;border-radius:12px;margin-top:20px;filter:grayscale(.15)}
.contact-form{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow-sm)}
.contact-form label{display:block;font-size:13px;font-weight:600;margin:15px 0 6px}
.contact-form label .req{color:var(--sale)}
.contact-form input,.contact-form textarea{width:100%;border:1.5px solid var(--line-2);border-radius:10px;padding:11px 12px;font-family:var(--font-sans);font-size:14px;background:#fff;color:var(--ink-1)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--teal-500);box-shadow:0 0 0 4px rgba(45,196,196,.15)}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-hint{font-size:12.5px;color:var(--ink-3);margin-top:6px}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;gap:28px}.contact-wrap{padding:24px 16px 48px}}
.contact-form select{width:100%;border:1.5px solid var(--line-2);border-radius:10px;padding:11px 12px;font-family:var(--font-sans);font-size:14px;background:#fff;color:var(--ink-1)}

/* ===== Phase B: researched PDP content (gallery, markdown body, blocks, FAQ) ===== */
.pdp-gallery { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.pdp-gallery-main { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  display: flex; align-items: center; justify-content: center; padding: 18px; min-height: 300px; }
.pdp-gallery-main img { max-width: 100%; max-height: 360px; object-fit: contain; }
.pdp-gallery-main .img-tag { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 600;
  background: rgba(10,30,63,.78); color: #fff; padding: 3px 8px; border-radius: 6px; letter-spacing: .02em; }
.pdp-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp-thumb { width: 60px; height: 60px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pdp-thumb.on { border-color: var(--teal-700); box-shadow: 0 0 0 1px var(--teal-700); }
.pdp-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.img-note { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); display: flex; align-items: flex-start; gap: 6px; }
.img-note svg { flex: none; margin-top: 2px; }

.md-body { color: var(--ink-2); }
.md-body .md-h { font-size: 16px; font-weight: 700; color: var(--ink-1); margin: 20px 0 8px; }
.md-p { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 12px; }
.md-ul { margin: 0 0 14px; padding-left: 20px; }
.md-ul li { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin-bottom: 6px; }
.md-note { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; margin: 0 0 16px; }
.md-note svg { flex: none; margin-top: 2px; color: var(--teal-700); }
.pdp-block { margin-top: 22px; }

.faq { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq-q { font-size: 15px; font-weight: 650; color: var(--ink-1); margin-bottom: 7px; }
.faq-a { font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* ===== Phase B: real product image on cards (responsive, contained, mobile-light) ===== */
.pcard-img { width: 100%; height: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; display: block; }
.cards-c .pcard-media:has(.pcard-img) { background: #fff; }   /* product photos read on the dark card variant */
@media (max-width: 600px) { .pcard-img { padding: 10px; } }

/* ===== Chat assistant: agentic "thinking" dots ===== */
.think-dots { display: inline-flex; gap: 4px; align-items: center; }
.think-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-700); display: inline-block; animation: thinkpulse 1.1s infinite ease-in-out; }
.think-dots i:nth-child(2) { animation-delay: .18s; }
.think-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes thinkpulse { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* ===== Fix: bundle / attach line overflow on narrow screens (price escaping the card) ===== */
.attach-row > .check { min-width: 0; }                 /* let the name column actually shrink */
.attach-row .ar-name { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .attach-row { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .attach-row > .check { flex: 1 1 100%; }             /* name takes row 1; qty + price wrap to row 2 */
  .attach-row .qty-step { margin: 0; }                  /* ar-price keeps margin-left:auto → stays right */
}

/* ===== Fix: PDP must not overflow on narrow screens (grid items + inner rows shrink) ===== */
.pdp { min-width: 0; }
.pdp > * { min-width: 0; }                 /* grid items default to min-width:auto → let them shrink */
.pdp-media, .pdp-gallery, .pdp-gallery-main { max-width: 100%; min-width: 0; }
.pdp-gallery-main img { max-width: 100%; }
.term-seg { flex-wrap: wrap; }             /* license term buttons (3/5/7/10-yr) wrap instead of forcing width */
.attach, .buy-row { min-width: 0; max-width: 100%; }
.attach .mono, .pdp-sku, .md-body, .spec-table { overflow-wrap: anywhere; }
.spec-table { width: 100%; table-layout: fixed; }
.spec-table td { word-break: break-word; }
.pdp-price { flex-wrap: wrap; }            /* price + strikethrough + SAVE pill wrap on narrow screens */

/* ===== Cisco Verified Partner badge (links to the official Cisco Partner Locator listing) ===== */
.cisco-badge { display: inline-flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px 9px 9px; background: #fff; text-decoration: none; transition: box-shadow .15s, border-color .15s, transform .15s; max-width: 100%; }
.cisco-badge:hover { border-color: #00BCEB; box-shadow: 0 6px 20px rgba(10,30,63,.12); transform: translateY(-1px); }
.cisco-badge .cb-mark { width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
.cisco-badge .cb-shield { width: 38px; height: 38px; border-radius: 9px; background: #00BCEB; color: #fff; display: grid; place-items: center; }  /* Cisco blue */
.cisco-badge .cb-logo { width: 38px; height: 38px; object-fit: contain; }
.cisco-badge .cb-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cisco-badge .cb-title { font-weight: 700; font-size: 13px; color: var(--ink-1); white-space: nowrap; }
.cisco-badge .cb-sub { font-size: 11px; color: #0D8FC4; font-weight: 600; }
.cisco-badge-dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.cisco-badge-dark:hover { border-color: #5ec5e8; background: rgba(255,255,255,.10); }
.cisco-badge-dark .cb-title { color: #fff; }
.cisco-badge-dark .cb-sub { color: #7fd3ef; }

/* Cisco Partner logo tile inside the verified badge (white tile so the logo reads on dark hero/footer) */
.cisco-badge .cb-logotile { background: #fff; border-radius: 8px; padding: 5px 9px; display: grid; place-items: center; flex: none; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.cisco-badge .cb-logo { height: 36px; width: auto; display: block; }