/* Premium Tech Store — component styles. Load after tokens.css. */
.pcard {
  position: relative; isolation: isolate;
  min-height: 380px;                 /* keep height ≥ 1.1 × width or the skewed block shows */
  padding: 0 18px 18px;
  margin-top: 56px;                  /* room for the image breakout */
  display: flex; flex-direction: column; justify-content: flex-end;
}
.pcard::before,
.pcard::after { content: ""; position: absolute; left: 0; right: 0; background: var(--card); z-index: -1; }
.pcard::before {                     /* slanted top */
  top: 0; height: 62%;
  border-radius: var(--r-card);
  transform: skewY(var(--slant)); transform-origin: 0 0;
}
.pcard::after {                      /* straight bottom */
  top: 36%; bottom: 0;
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.pcard__media { position: absolute; left: 10%; right: 10%; top: -56px; height: 58%;
  display: grid; place-items: center; }
.pcard__media img { max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.14)); }
.pcard__title { font: 700 var(--fs-card-title)/1.2 var(--font); text-transform: uppercase; color: var(--ink); margin: 0 0 6px; letter-spacing: .01em; }
.pcard__meta  { font: 600 var(--fs-card-meta)/1.4 var(--font); color: var(--ink-2); margin: 0 0 10px; }
.pcard__row   { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1.5px solid var(--line); }
.pcard__foot  { display: flex; align-items: center; gap: 6px; padding-top: 14px; white-space: nowrap; }
.price        { font: 700 var(--fs-card-price)/1 var(--font); color: var(--ink); }
.price-was    { font: 600 12px/1 var(--font); color: var(--ink-strike); }
.stars        { color: transparent; -webkit-text-stroke: 1px var(--star); letter-spacing: 2px; font-size: 15px; } /* outline stars = unrated; fill with color: var(--star) when rated */
.swatches     { display: flex; gap: 6px; }
.swatches i   { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px rgba(0,0,0,.08); }

.ribbon {
  position: absolute; left: -19px; top: 44%;
  writing-mode: vertical-rl; transform: rotate(180deg);   /* reads upward */
  /* rotated 180°, so the gradient and the rounded side are written mirrored */
  background: linear-gradient(180deg, #03AEE6 0%, #0661D4 100%);
  border-radius: 0 12px 12px 0;                            /* shows on the visual LEFT */
  padding: 12px 4px; color: #fff;
  font: 700 var(--fs-ribbon)/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}

.gcard { position: relative; min-height: 190px; padding: 0 16px 18px; display: flex; align-items: flex-end; justify-content: center;
  background: var(--glass-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  color: #fff; font: 600 16px/1.25 var(--font); text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.gcard-wrap { position: relative; padding-top: 60px; }            /* image sits in the wrapper, above the clip */
.gcard-wrap img { position: absolute; top: 0; left: 50%; translate: -50% 0; height: 150px; z-index: 1; }

.ccard { background: var(--white); border-radius: var(--r-card-compact); overflow: hidden; }
.ccard__media { position: relative; aspect-ratio: 4 / 3; background: #222; }
.ccard__media img { width: 100%; height: 100%; object-fit: cover; }
.ccard__tag {
  position: absolute; right: 0; bottom: 0;
  background: var(--white); padding: 7px 12px 3px 10px;
  border-top-left-radius: 14px;
  font: 500 12.5px/1 var(--font);
}
.ccard__tag::before {                /* concave join to the left */
  content: ""; position: absolute; left: -14px; bottom: 0; width: 14px; height: 14px;
  background: radial-gradient(circle at 0 0, transparent 13.5px, var(--white) 14px);
}
.ccard__tag span { background: var(--grad-heading); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ccard__body { padding: 10px 16px 0; }
.ccard__title { display: flex; justify-content: space-between; align-items: center; font: 700 20px/1.2 var(--font); color: var(--ink); text-transform: uppercase; }
.ccard__meta { font: 400 13px/1.4 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 8px 0 12px; }
.ccard__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-top: 1px solid #D6D6D6; padding: 12px 16px 14px; white-space: nowrap; }
.ccard__price { font: 700 17px/1 var(--font); color: var(--accent-price); }
.ccard__was { font: 400 14px/1 var(--font); color: var(--ink-strike); }

.dots { position: absolute; left: 24px; bottom: 20px; display: flex; gap: var(--dot-gap); z-index: 2; }
.dot  { width: var(--dot); height: var(--dot); padding: 0; border: 0; border-radius: var(--r-pill);
  background: var(--dot-idle-dark); cursor: pointer;
  transition: width var(--t-med) var(--ease), background-color var(--t-med) var(--ease); }
.on-light .dot { background: var(--dot-idle-light); }
.dot[aria-selected="true"] { width: var(--dot-active-w); background: var(--accent-red); }
.dot:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 3px; }

.nav { position: absolute; top: var(--nav-inset); left: var(--nav-inset); right: var(--nav-inset); z-index: 5;
  height: var(--nav-h); border-radius: var(--r-pill); display: flex; align-items: center; gap: 6px;
  padding: 0 10px 0 26px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-nav); }
.nav__cats { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.navbtn { height: 42px; min-width: 42px; padding: 0 10px; border: 0; border-radius: var(--r-pill); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0; color: #fff; cursor: pointer;
  font: 500 16px/1 var(--font); transition: background-color var(--t-fast), gap var(--t-med) var(--ease); }
.navbtn svg { width: 24px; height: 24px; filter: var(--shadow-icon); flex: none; }
.navbtn span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width var(--t-med) var(--ease); }
.navbtn:hover, .navbtn[aria-expanded="true"] { background: rgba(255,255,255,.28); gap: 8px; }
.navbtn:hover span, .navbtn[aria-expanded="true"] span { max-width: 140px; }
.navbtn--all { background: var(--glass-strong); gap: 8px; padding: 0 18px 0 12px; }
.navbtn--all span { max-width: none; }
/* search, account, bag (and a menu button on mobile) get .navbtn--util so they survive the mobile collapse */

.utility { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px 32px; padding: 14px 40px 16px; font: var(--fw-utility) var(--fs-utility)/1 var(--font); }
.utility a { color: var(--utility); text-decoration: none; }
.utility .gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.utility .green { color: var(--promo-green); font-weight: 700; }

.shell { position: relative; margin: 0 var(--gutter); border-radius: var(--r-shell); overflow: hidden;
  min-height: 460px; background: linear-gradient(180deg, #FAFAFA 0%, #D9DCDC 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center;
  padding: calc(var(--nav-h) + var(--nav-inset) + 24px) 56px 56px; }
.slide[hidden] { display: none; }

.cats { display: flex; justify-content: center; gap: 56px; padding: 40px 0; }
.cat  { display: grid; justify-items: center; gap: 14px; font: var(--fw-cat) var(--fs-cat)/1 var(--font); color: #111; text-decoration: none; }
.cat__ring { position: relative; width: var(--cat-size); height: var(--cat-size); border-radius: 50%;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--page), var(--page)) padding-box,
              linear-gradient(200deg, rgba(151,184,153,.15) 10%, var(--ring) 55%, rgba(151,184,153,.55) 100%) border-box; }
.cat__ring img { position: absolute; left: 50%; top: 46%; width: 112%; translate: -50% -50%; }  /* breaks out of the ring */

.sec-head { display: flex; justify-content: space-between; align-items: center; margin: 48px 0 8px; }
.sec-title { font: var(--fw-section) var(--fs-section)/1.1 var(--font); text-transform: uppercase; letter-spacing: .01em;
  background: var(--grad-heading); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.viewall { border-radius: var(--r-pill); padding: 9px 22px; background: #F4F4F5; box-shadow: var(--shadow-soft);
  font: 500 13px/1 var(--font); text-decoration: none; }
.viewall span { background: var(--grad-heading); -webkit-background-clip: text; background-clip: text; color: transparent; }

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 22vw, 290px); gap: 22px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 0 24px calc(var(--gutter) + 20px);            /* +20px leaves room for the ribbons */
  scroll-padding-left: calc(var(--gutter) + 20px); }
/* The rail is full-bleed (a direct child of the page, no side margin), so the last card is cut off by the viewport edge. */
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

.trust { display: flex; align-items: center; justify-content: space-between; gap: 32px;
  margin: 32px var(--gutter); padding: 22px 44px; border-radius: var(--r-pill);
  background: var(--page); box-shadow: var(--shadow-float); }
.trust__title { font: 700 20px/1.2 var(--font); background: var(--grad-heading); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trust__items { display: flex; gap: 40px; }
.trust__item { display: flex; align-items: center; gap: 12px; font: 500 12px/1.35 var(--font); color: var(--ink-muted); }
.trust__item svg { width: 36px; height: 36px; }

.btn-card { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: 34px; padding: 0 11px; white-space: nowrap; flex: none;
  border: 0; border-radius: var(--r-btn-sm); background: var(--grad-cta-soft); color: #fff; font: 500 14px/1 var(--font); cursor: pointer; }
.btn-buy  { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px;
  border: 0; border-radius: var(--r-btn); background: var(--grad-cta); color: #fff; font: 400 var(--fs-btn-lg)/1 var(--font); cursor: pointer; }
.btn-cart { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px; margin-top: 14px;
  border: 0; border-radius: var(--r-btn); background: var(--white); box-shadow: var(--shadow-soft);
  color: #222; font: 400 19px/1 var(--font); cursor: pointer; }
.btn-cart .plus { width: 22px; height: 22px; border-radius: 50%; background: #222; color: #fff; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.btn-pill { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 20px; border: 0;
  border-radius: var(--r-pill); background: var(--grad-cta-soft); color: #fff; font: 500 15px/1 var(--font); }  /* corporate "Order in bulk", form "Send" */
.btn-buy:hover, .btn-card:hover, .btn-pill:hover { filter: brightness(1.06); }
:where(button, a):focus-visible { outline: 2px solid #2350C8; outline-offset: 3px; }

.offer { border: 1px solid var(--cream-line); border-radius: var(--r-box); overflow: hidden; background: var(--panel); }
.offer__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--cream); font: 700 16px/1.2 var(--font); color: var(--ink); }
.offer__body { display: flex; justify-content: space-between; padding: 14px 16px; font: 400 15px/1.3 var(--font); color: var(--ink); }
.gift { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--r-box); background: var(--grad-cream);
  font: 400 15px/1 var(--font); color: var(--ink); }
.gift b { font-weight: 700; }
.sw-tiles { display: flex; gap: 12px; }
.sw-tile { width: var(--swatch); height: var(--swatch); border-radius: var(--r-swatch); background: var(--page); box-shadow: var(--shadow-soft);
  display: grid; place-items: center; border: 1px solid transparent; }
.sw-tile[aria-checked="true"] { border-color: #909090; background: var(--panel); box-shadow: none; }
.thumbs { display: flex; gap: 12px; }
.thumb { width: 92px; height: 92px; border-radius: var(--r-box); background: var(--page); border: 1px solid transparent; display: grid; place-items: center; }
.thumb[aria-current="true"] { border-color: #909090; background: var(--panel); }

.scrim { position: fixed; inset: 0; background: rgba(40,40,40,.42); display: grid; place-items: start center; padding-top: 90px; }
.search { width: min(820px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; background: var(--page); border-radius: var(--r-modal); padding: 20px; }
.search__field { display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 18px; border-radius: var(--r-pill); background: var(--field); color: #818181; font: 400 17px var(--font); }
.search__field input { flex: 1; border: 0; background: none; font: inherit; color: var(--ink); outline: none; }
.search__label { display: inline-flex; align-items: baseline; gap: 12px; margin: 16px 0; padding: 10px 18px; border-radius: var(--r-pill); background: var(--white);
  font: 700 14px/1 var(--font); text-transform: uppercase; }
.search__label b { background: var(--grad-heading); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.search__label button { border: 0; background: none; color: #818181; font: 400 14px var(--font); text-transform: none; cursor: pointer; }
.search__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px var(--gutter); }
.promo { position: relative; min-height: 210px; border-radius: 28px; transform: skewY(-2.5deg); background: #111; color: #fff; }
.promo__inner { transform: skewY(2.5deg); padding: 44px 26px 26px; }
.promo__img { position: absolute; right: 6%; top: -34px; width: 48%; }
.promo__kicker { display: inline-block; padding: 5px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.85); font: 600 11px/1 var(--font); }
.promo__kicker span { background: var(--grad-heading); -webkit-background-clip: text; background-clip: text; color: transparent; }
.promo__name { font: 400 38px/1 var(--font-display); letter-spacing: .02em; margin: 18px 0 14px; }
.promo__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.promo__chip { padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); font: 500 11px/1 var(--font); }

.footer { margin: 48px var(--gutter) 0; padding: 56px 56px 44px; border-radius: var(--r-shell); background: var(--navy-deep); color: #fff;
  display: grid; grid-template-columns: 1.4fr 1.4fr 1fr 1.3fr; gap: 40px; }
.footer h4 { font: 500 14px/1 var(--font); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 20px; }
.footer a { display: block; color: var(--navy-link); font: 400 13px/1 var(--font); text-decoration: none; margin: 0 0 14px; }
.footer a:hover { color: #fff; }
.newsletter { display: flex; align-items: center; height: 46px; padding: 0 5px 0 20px; border: 1px solid rgba(255,255,255,.75); border-radius: var(--r-pill); }
.newsletter input { flex: 1; background: none; border: 0; color: #fff; font: 400 13px var(--font); outline: none; }
.newsletter button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--navy-deep); display: grid; place-items: center; }
.subfooter { display: flex; justify-content: space-between; align-items: center; margin: 14px var(--gutter) 24px; color: var(--ink-muted); font: 400 11px var(--font); }

.panel { margin: 0 var(--gutter) var(--gap-panel); padding: 40px; border-radius: var(--r-panel); background: var(--white); }
.h-navy { font: 400 40px/1.15 var(--font); color: var(--navy); margin: 0; }
.h-navy strong { font-weight: 700; }
.h-navy--caps { text-transform: uppercase; font-size: 40px; }
.label-chip { display: inline-block; padding: 5px 10px; border-radius: var(--r-label); background: #EDEDED; font: 400 12px/1 var(--font); color: var(--ink); }
.badge-grad { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-pill); background: var(--grad-cta-soft); color: #fff; font: 500 13px/1 var(--font); }
.chip { display: inline-grid; place-items: center; height: 43px; padding: 0 26px; border-radius: var(--r-pill); background: var(--chip); font: 600 14px/1 var(--font); color: var(--ink); }
.field label { display: block; font: 500 12px/1 var(--font); color: var(--form-label); margin-bottom: 8px; }
.field label i { color: var(--form-required); font-style: normal; }
.field input, .field textarea { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--form-line); border-radius: var(--r-input);
  font: 400 14px var(--font); color: var(--ink); background: #fff; }
.field textarea { height: 160px; padding: 12px; resize: vertical; }
.quote { font: 400 44px/1.3 var(--font); color: var(--navy); text-align: center; }
.quote strong { font-weight: 700; }
.corp-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.pdp { display: grid; grid-template-columns: 1.45fr 1fr; gap: 24px; margin: 24px var(--gutter); align-items: start; }
.pdp > * { min-width: 0; }
.pdp__gallery { position: relative; background: var(--panel); border-radius: var(--r-panel); padding: 48px 72px 40px; }
.pdp__stage { display: grid; place-items: center; height: 420px; }
.pdp__chev { position: absolute; top: 45%; width: 36px; height: 36px; border: 0; background: none; color: #111; cursor: pointer; }
.pdp__chev--prev { left: 36px; } .pdp__chev--next { right: 36px; }
.pdp__gallery .thumbs { justify-content: center; margin-top: 32px; }
.pdp__info { background: var(--panel); border-radius: var(--r-panel); padding: 8px 0 24px; }
.pdp__sec { padding: 20px 24px; }
.pdp__sec + .pdp__sec { border-top: 1px solid var(--line); }
.crumbs { display: flex; gap: 10px; align-items: center; font: 400 14px/1 var(--font); color: var(--ink); }
.pdp__title { font: 600 var(--fs-pdp-title)/1.15 var(--font); text-transform: uppercase; color: var(--ink); margin: 16px 0 8px; letter-spacing: .01em; }
.pdp__sub { font: 500 15px/1.4 var(--font); color: var(--ink); margin: 0; }
.pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; }
.pdp__price b { font: 700 var(--fs-pdp-price)/1 var(--font); color: var(--ink); }
.pdp__price s { font: 700 28px/1 var(--font); color: var(--ink-strike); }
.rating { margin-left: auto; display: flex; gap: 6px; align-items: center; font: 400 16px/1 var(--font); color: var(--ink); }
.rating .star { color: var(--star); font-size: 20px; } .rating small { color: var(--ink-meta); font-size: 14px; }
.opt-label { font: 400 16px/1 var(--font); color: var(--ink); margin: 18px 0 14px; } .opt-label b { font-weight: 600; margin-left: 6px; }
.sub-head { display: flex; justify-content: space-between; font: 400 15px/1 var(--font); color: var(--ink-muted); margin: 20px 0 12px; }
.sub-head a { color: #8D8D8D; font-size: 13px; }

@media (max-width: 767px) {
  :root { --gutter: 12px; --r-shell: 28px; --nav-h: 52px; --nav-inset: 10px; }
  .utility { display: none; }
  .nav { padding: 0 6px 0 18px; }
  .navbtn:not(.navbtn--util) { display: none; }
  .slide { grid-template-columns: 1fr; padding: calc(var(--nav-h) + var(--nav-inset) + 16px) 22px 48px; }
  .dots { left: 16px; bottom: 14px; }
  .cats { justify-content: flex-start; overflow-x: auto; gap: 24px; padding: 28px var(--gutter); scrollbar-width: none; }
  .cat { flex: none; }
  .rail { grid-auto-columns: 62vw; gap: 14px; }
  .trust { flex-direction: column; align-items: flex-start; gap: 18px; border-radius: var(--r-panel); padding: 22px; }
  .trust__items { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .promos { grid-template-columns: 1fr; gap: 36px; }
  .pdp { grid-template-columns: 1fr; }
  .pdp__gallery { padding: 32px 20px 24px; }
  .pdp__stage { height: 280px; }
  .pdp__chev--prev { left: 6px; } .pdp__chev--next { right: 6px; }
  .pdp__gallery .thumbs { justify-content: flex-start; overflow-x: auto; }
  .thumb { flex: none; width: 72px; height: 72px; }
  .pdp__price b { font-size: 30px; } .pdp__price s { font-size: 22px; }
  .search__grid { grid-template-columns: 1fr 1fr; }
  .panel { padding: 24px; }
  .corp-row, .form-row { grid-template-columns: 1fr; }
  .h-navy, .h-navy--caps { font-size: 28px; } .quote { font-size: 28px; }
  .footer { grid-template-columns: 1fr; gap: 28px; padding: 36px 24px; border-radius: var(--r-panel); }
}