/* ZeroMDroid Gear pages: light, bright and made for looking at products. Loaded only by the Gear pages (the layout adds it), after site.css. Our own file, no fonts or pictures from
   anywhere else, and nothing inline: the site's policy does not allow it. */

/* ---------- the site's tokens, redefined: these pages are light even when the visitor chose the dark theme ---------- */
body.gear-page {
  --bg: #fffdf9;
  --bg-2: #f4f3ff;
  --card: #ffffff;
  --text: #14172b;
  --text-2: #3f4463;
  --text-3: #5b6080;
  --line: rgba(32, 38, 100, 0.1);
  --line-2: rgba(32, 38, 100, 0.17);
  --accent: #4f5bff;
  --accent-2: #3b7bff;
  --accent-text: #3640d9;
  --accent-soft: rgba(79, 91, 255, 0.09);
  --ok: #0f7a57;
  --ok-soft: rgba(15, 122, 87, 0.1);
  --shadow: 0 1px 2px rgba(20, 24, 70, 0.05), 0 10px 30px rgba(20, 24, 70, 0.08);
  --shadow-l: 0 2px 6px rgba(20, 24, 70, 0.07), 0 26px 60px rgba(40, 50, 140, 0.2);
  /* the one warm colour: only the buttons that go to Amazon.in use it */
  --buy: #ffb020;
  --buy-2: #ffa000;
  --buy-ink: #1d1500;
  --g-card: 22px;
  color-scheme: light;
}
html:has(body.gear-page) { color-scheme: light; }
/* the toggle would do nothing here (the page stays light): it is left out */
body.gear-page [data-theme-toggle] { display: none; }
.gear-nb { white-space: nowrap; }
.gear-page .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- buttons: the amber one is the way to the product, the others are ours ---------- */
.gear-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--card); color: var(--accent-text); font: inherit; font-weight: 650; font-size: 0.92rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 0.12s, box-shadow 0.18s, background 0.18s, border-color 0.18s; }
.gear-btn:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.gear-btn:active, .gear-buy:active { transform: scale(0.98); }
.gear-btn--solid { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(79, 91, 255, 0.32); }
.gear-btn--solid:hover { background: #4450f0; border-color: #4450f0; color: #fff; }
.gear-buy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 99px; border: 0; background: var(--buy); color: var(--buy-ink); font: inherit; font-weight: 750; font-size: 0.92rem; line-height: 1.2; text-decoration: none; cursor: pointer; box-shadow: 0 6px 16px rgba(255, 160, 0, 0.34), inset 0 -2px 0 rgba(0, 0, 0, 0.07); transition: transform 0.12s, box-shadow 0.18s, background 0.18s; }
.gear-buy:hover { background: var(--buy-2); color: var(--buy-ink); text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 160, 0, 0.46), inset 0 -2px 0 rgba(0, 0, 0, 0.07); }
.gear-buy .i { transition: transform 0.18s ease; }
.gear-buy:hover .i { transform: translate(2px, -2px); }
.gear-buy:focus-visible, .gear-btn:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.gear-buy--lg { padding: 15px 28px; font-size: 1.06rem; }
.gear-micro { margin: 8px 0 0; color: var(--text-3); font-size: 0.78rem; line-height: 1.4; }

/* ---------- the note about the links, and the closing one ---------- */
.gear-note { display: flex; gap: 12px; align-items: flex-start; max-width: 880px; margin: 28px 0 0; padding: 12px 16px; border-radius: 14px; background: rgba(79, 91, 255, 0.07); border: 1px solid rgba(79, 91, 255, 0.16); color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }
.gear-note p { margin: 0; }
.gear-note b { color: var(--text); }
.gear-note__icon { flex: none; color: var(--accent-text); margin-top: 1px; }
.gear-end { padding: clamp(36px, 5vw, 60px) 0; background: linear-gradient(180deg, var(--bg-2), #ecebff); border-top: 1px solid var(--line); }
.gear-end h2 { margin: 0 0 12px; font-size: 1.3rem; letter-spacing: -0.02em; }
.gear-end p { max-width: 72ch; color: var(--text-2); font-size: 0.97rem; }
.gear-end b { color: var(--text); }
.gear-end__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }

/* ---------- the Gear page: the hero ---------- */
.gear-hero { position: relative; padding: clamp(32px, 5vw, 64px) 0 clamp(8px, 2vw, 24px); background: radial-gradient(60% 90% at 90% -10%, rgba(111, 118, 255, 0.2), transparent 70%), radial-gradient(45% 70% at 0% 100%, rgba(255, 176, 32, 0.13), transparent 70%); overflow: hidden; }
.gear-hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.gear-hero h1 { margin: 0 0 0.35em; font-size: clamp(2.4rem, 5.6vw, 4.1rem); line-height: 1.04; letter-spacing: -0.042em; text-wrap: balance; }
.gear-hero .lead { max-width: 58ch; margin-bottom: 0; }
.gear-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.gear-hero--list { padding-bottom: clamp(8px, 2vw, 20px); }
.gear-hero--list h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.gear-hero__art { position: relative; aspect-ratio: 1 / 0.84; min-width: 0; }
.gear-hero__pic { position: absolute; width: 64%; overflow: hidden; border-radius: 22px; background: #e8ecff; box-shadow: 0 2px 6px rgba(20, 24, 70, 0.08), 0 26px 60px rgba(40, 50, 140, 0.22); transition: translate 0.35s ease-out; }
.gear-hero__pic img { display: block; width: 100%; height: auto; }
.gear-hero__pic--1 { left: 0; top: 5%; rotate: -5deg; z-index: 2; }
.gear-hero__pic--2 { right: 0; top: 0; rotate: 4deg; z-index: 1; }
.gear-hero__pic--3 { left: 22%; bottom: 0; width: 56%; rotate: -1.5deg; z-index: 3; }

/* ---------- the Gear page: the shelf (chips, count, products) ---------- */
.gear-shelf { padding: clamp(24px, 4vw, 44px) 0 clamp(40px, 6vw, 80px); scroll-margin-top: 80px; }
.gear-shelf__head { margin-bottom: 26px; }
.gear-shelf h2 { margin: 0 0 16px; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.gear-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gear-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-weight: 600; font-size: 0.92rem; line-height: 1.2; text-decoration: none; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.12s; }
.gear-chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); text-decoration: none; }
.gear-chip:active { transform: scale(0.97); }
.gear-chip[aria-current='true'] { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(79, 91, 255, 0.3); }
.gear-chip__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.76rem; font-weight: 700; }
.gear-chip[aria-current='true'] .gear-chip__n { background: rgba(255, 255, 255, 0.24); color: #fff; }
.gear-chips--links .gear-chip { font-weight: 550; }
.gear-status { margin: 14px 0 0; color: var(--text-3); font-size: 0.92rem; }
.gear-shelf > .wrap > .gear-status { margin: 0 0 18px; }
.gear-clear { margin-left: 8px; font-weight: 600; }
.gear-clear[hidden] { display: none; }

.gear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 345px), 1fr)); gap: 24px; }
.gear-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--g-card); background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 24, 70, 0.04), 0 10px 28px rgba(20, 24, 70, 0.06); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.18s ease; }
.gear-card[hidden] { display: none; }
.gear-card:focus-within { border-color: rgba(79, 91, 255, 0.35); }
.gear-card:hover { transform: translateY(-5px); border-color: rgba(79, 91, 255, 0.35); box-shadow: 0 2px 6px rgba(20, 24, 70, 0.06), 0 22px 50px rgba(50, 60, 160, 0.18); }
/* a card that is the one the address points at (/gear#cable) */
.gear-card:target { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); scroll-margin-top: 90px; }
.gear-card.is-out { opacity: 0; transform: scale(0.96); }
.gear-card.is-entering { opacity: 0; transform: translateY(12px) scale(0.98); }
.gear-card__art, .gear-mini__art { display: block; aspect-ratio: 8 / 5; overflow: hidden; background: linear-gradient(135deg, #e4ecff, #efe3ff); }
.gear-card__art img, .gear-mini__art img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translate(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -6px)) scale(1.03); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.gear-card:hover .gear-card__art img, .gear-mini:hover .gear-mini__art img { transform: translate(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -6px)) scale(1.08); }
.gear-art-missing { display: grid; place-items: center; width: 100%; height: 100%; color: var(--accent-text); }
.gear-card__body, .gear-mini__body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.gear-card__title { margin: 0 0 6px; font-size: 1.16rem; line-height: 1.25; letter-spacing: -0.02em; }
.gear-card__title a, .gear-mini h3 a { color: var(--text); text-decoration: none; }
.gear-card__title a:hover, .gear-mini h3 a:hover { color: var(--accent-text); }
.gear-card__short, .gear-mini__short { flex: 1; margin: 0 0 16px; color: var(--text-2); font-size: 0.96rem; line-height: 1.5; }
.gear-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gear-card__actions .gear-btn, .gear-card__actions .gear-buy { flex: 1 1 auto; }

/* ---------- choosing well ---------- */
.gear-tips { padding: clamp(40px, 6vw, 72px) 0; background: var(--bg-2); }
.gear-tips h2 { margin: 0 0 24px; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.gear-tips__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.gear-tips__list li { padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.gear-tips__list h3 { margin: 14px 0 6px; font-size: 1.08rem; }
.gear-tips__list p { margin: 0; color: var(--text-2); font-size: 0.96rem; }
.gear-tips--more { padding: clamp(28px, 4vw, 44px) 0; }
.gear-tips--more h2 { font-size: 1.3rem; margin-bottom: 14px; }
.gear-more { margin: 22px 0 0; font-weight: 600; }
.gear-more a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.gear-more a:hover { text-decoration: underline; }
.gear-tile { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(70, 90, 240, 0.28); }
.gear-tile--soft { width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
.gear-tile--lg { width: 56px; height: 56px; border-radius: 18px; }

/* ---------- a product's page ---------- */
.gear-top { padding-top: 18px; }
.gear-crumbs ol { display: flex; flex-wrap: wrap; margin: 0 0 6px; padding: 0; list-style: none; color: var(--text-3); font-size: 0.9rem; }
.gear-crumbs li + li::before { content: '/'; margin: 0 9px; color: var(--line-2); }
.gear-crumbs a { color: var(--accent-text); text-decoration: none; }
.gear-crumbs a:hover { text-decoration: underline; }
.gear-top .gear-note { margin-top: 12px; }
.gear-pdp-bg { background: radial-gradient(55% 70% at 100% 20%, rgba(111, 118, 255, 0.15), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(255, 176, 32, 0.1), transparent 70%); }
.gear-pdp { padding: clamp(24px, 4vw, 44px) 0 clamp(36px, 6vw, 72px); }
.gear-pdp__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.gear-pdp__art { overflow: hidden; border-radius: 28px; background: linear-gradient(135deg, #e4ecff, #efe3ff); box-shadow: var(--shadow-l); aspect-ratio: 8 / 5; transform: perspective(1100px) rotateX(calc(var(--ry, 0) * -3.5deg)) rotateY(calc(var(--rx, 0) * 4.5deg)); transition: transform 0.3s ease-out; }
.gear-pdp__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gear-pdp h1 { display: flex; flex-direction: column; gap: 8px; margin: 0 0 0.5em; }
.gear-pdp__kicker { color: var(--accent-text); font-size: 1.02rem; font-weight: 700; letter-spacing: 0; }
.gear-pdp__hook { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.gear-pdp .lead { margin: 0 0 22px; font-size: clamp(1.04rem, 1.4vw, 1.18rem); }
.gear-pdp__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gear-pdp .gear-micro { margin-top: 10px; }
.gear-example { margin: 14px 0 0; color: var(--text-2); font-size: 0.92rem; }
.gear-perfect { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 20px; }
.gear-perfect__label { color: var(--text-3); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.gear-perfect .gear-chip { padding: 6px 12px; font-size: 0.86rem; }

.gear-sec { padding: clamp(40px, 6vw, 76px) 0; scroll-margin-top: 70px; }
.gear-sec--tint { background: var(--bg-2); }
.gear-sec h2 { margin: 0 0 clamp(20px, 3vw, 32px); font-size: clamp(1.6rem, 3vw, 2.3rem); text-wrap: balance; }
.gear-page p, .gear-page li { text-wrap: pretty; }
.gear-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.gear-benefits li { padding: 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 24, 70, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.gear-benefits li:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.gear-benefits h3 { margin: 16px 0 6px; font-size: 1.1rem; }
.gear-benefits p { margin: 0; color: var(--text-2); font-size: 0.97rem; }
.gear-moments { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: m; }
.gear-moments li { position: relative; padding: 24px 24px 24px 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.gear-moments__n { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); font-weight: 800; font-size: 0.95rem; }
.gear-moments p { margin: 0; color: var(--text); font-size: 1.04rem; line-height: 1.5; }
.gear-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.gear-split__lead h2 { margin-bottom: 12px; }
.gear-split__lead > p { color: var(--text-2); max-width: 40ch; }
.gear-check { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gear-check li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.gear-check h3 { margin: 0 0 4px; font-size: 1.04rem; }
.gear-check p { margin: 0; color: var(--text-2); font-size: 0.97rem; }
.gear-trust { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); color: var(--text-2); font-size: 0.93rem; max-width: 46ch; }
.gear-trust .i { margin-top: 3px; color: var(--accent-text); }
.gear-fit { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(24px, 3.5vw, 40px); border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.gear-fit h2 { margin-bottom: 10px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.gear-fit p { color: var(--text-2); max-width: 62ch; }
.gear-fit__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.gear-fit__art { display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: center; gap: 10px 14px; padding: 22px; border-radius: 22px; background: linear-gradient(135deg, #eef0ff, #f6ecff); }
.gear-fit__art small { grid-column: 1 / -1; color: var(--text-3); font-size: 0.82rem; text-align: center; }
.gear-fit__swap { display: grid; place-items: center; width: 100%; color: var(--accent-text); border-top: 2px dashed rgba(79, 91, 255, 0.35); height: 2px; position: relative; }
.gear-fit__swap .i { position: absolute; top: 50%; left: 50%; translate: -50% -50%; padding: 3px; border-radius: 99px; background: #f1edff; box-sizing: content-box; }
.gear-faq { border-top: 1px solid var(--line); }
.gear-faq summary { font-size: 1.04rem; }
.gear-faq details p { max-width: 68ch; }

.gear-close { padding: clamp(36px, 5vw, 60px) 0; background: linear-gradient(135deg, #e6e9ff 0%, #f0e6ff 55%, #fff1dc 100%); }
.gear-close__in { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; }
.gear-close__text { flex: 1 1 380px; }
.gear-close h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.gear-close p { margin: 0; color: var(--text-2); max-width: 56ch; }
.gear-close__cta { flex: none; }
.gear-close__cta .gear-micro { margin-top: 10px; }

.gear-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; }
.gear-mini { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 24, 70, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.gear-mini:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.gear-mini__body { padding: 16px 18px 18px; }
.gear-mini h3 { margin: 0 0 4px; font-size: 1.06rem; line-height: 1.25; }
.gear-mini__short { font-size: 0.92rem; }

/* the bar at the bottom of a small screen: the product's name and the way to it, while the page's own buttons are out of sight */
.gear-bar { display: none; }

/* ---------- the script's part: things that come in as they are scrolled to, and the tilt ---------- */
.g-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.g-reveal.is-in { opacity: 1; transform: none; }

/* ---------- small screens ---------- */
@media (min-width: 600px) and (max-width: 760px) {
  .gear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .gear-hero__in, .gear-pdp__in, .gear-split, .gear-fit { grid-template-columns: minmax(0, 1fr); }
  .gear-hero__art { max-width: 560px; margin-inline: auto; width: 100%; aspect-ratio: 1 / 0.7; }
  .gear-pdp__art { max-width: 640px; }
}
@media (max-width: 760px) {
  .gear-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; gap: 4px; padding: 10px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -8px 26px rgba(20, 24, 70, 0.12); transition: transform 0.25s ease, visibility 0s; }
  .gear-bar.is-hidden { transform: translateY(110%); visibility: hidden; transition: transform 0.25s ease, visibility 0s 0.25s; }
  .gear-bar__row { display: flex; align-items: center; gap: 12px; }
  .gear-bar__row strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
  .gear-bar .gear-micro { margin: 0; text-align: center; font-size: 0.72rem; }
  .gear-bar .gear-buy { flex: none; padding: 10px 14px; }
  body.gear-product { padding-bottom: 92px; }
  .gear-close__cta { width: 100%; }
  .gear-close__cta .gear-buy { width: 100%; }
  .gear-pdp__cta .gear-buy { width: 100%; }
  .gear-pdp__cta .gear-btn { flex: 1 1 100%; }
}
@media (max-width: 760px) {
  /* the filter chips of the Gear page are one row that is swiped sideways (it would be five rows of chips before the first product) */
  .gear-filter .gear-chips { flex-wrap: nowrap; margin-inline: -16px; padding: 4px 16px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gear-filter .gear-chips::-webkit-scrollbar { display: none; }
  .gear-filter .gear-chips li { flex: none; scroll-snap-align: start; }
}
@media (max-width: 560px) {
  /* the cards of reasons and tips: the icon beside the words, not above them (the page would be twice as long) */
  .gear-benefits, .gear-tips__list { gap: 14px; }
  .gear-benefits li, .gear-tips__list li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px; }
  .gear-benefits li .gear-tile, .gear-tips__list li .gear-tile { grid-row: 1 / span 2; }
  .gear-benefits h3, .gear-tips__list h3 { margin: 2px 0 4px; }
  .gear-check li { padding: 16px; gap: 12px; }
}
@media (max-width: 480px) {
  .gear-hero__cta .gear-btn { flex: 1 1 100%; }
  .gear-card__body, .gear-mini__body { padding: 16px 16px 18px; }
  .gear-note { padding: 10px 12px; font-size: 0.84rem; gap: 10px; }
}

/* people who asked for less motion get a still page */
@media (prefers-reduced-motion: reduce) {
  .gear-card, .gear-card__art img, .gear-mini, .gear-mini__art img, .gear-benefits li, .gear-pdp__art, .gear-hero__pic { transition: none; }
  .gear-card:hover, .gear-mini:hover, .gear-benefits li:hover { transform: none; }
  .gear-card:hover .gear-card__art img, .gear-mini:hover .gear-mini__art img { transform: scale(1.03); }
  .g-reveal { opacity: 1; transform: none; }
}
@media print {
  .gear-bar { display: none; }
  .g-reveal { opacity: 1; transform: none; }
}