/* Site-wide refinements layered over the Shopify theme copy and the hand-built pages.
   Loaded last on every page. Keep rules scoped and small. */

/* Typography: no single-word last lines, balanced headlines. */
h1, h2, h3, h4, summary, .faq-question, .product-title, .section-title, .hero-title { text-wrap: balance; }
p, li, blockquote, figcaption, .product-desc, .body-copy { text-wrap: pretty; }

/* Product page hero: show the whole device at a composed size.
   The original 130x500 cut-out was stretched to ~850px tall and went soft. */
.pdp-hero .product-photo-wrap {
  max-width: none;
  width: min(100%, 440px);
  aspect-ratio: 1 / 1;
}
.pdp-hero .product-img {
  -webkit-mask-image: none;
  mask-image: none;
}
.pdp-hero .laser-beam-effect { display: none; }
.pdp-hero .product-glow-ring { width: 420px; height: 420px; }

/* Bundle: one wide image of both devices instead of two stretched cut-outs. */
.pdp-hero .pdp-dual-image .product-photo-wrap {
  flex: 1 1 auto;
  width: min(100%, 520px);
  max-width: none;
  aspect-ratio: 1400 / 468;
}

/* Desktop: image aligns with the top of the buying column and stays in view. */
@media (min-width: 1025px) {
  .pdp-hero .product-grid { align-items: start; }
  .pdp-hero .product-image-wrap { position: sticky; top: 120px; padding-top: 24px; }
}
.pdp-hero .product-title { margin-bottom: 14px; }
.pdp-hero:has(.pdp-dual-image) .product-title { font-size: clamp(2.5rem, 4.6vw, 4.25rem); line-height: 1.04; }

@media (max-width: 1024px) {
  .pdp-hero { padding-top: 104px; }
  .pdp-hero .pdp-breadcrumb { margin-bottom: 8px; }
  .pdp-hero .product-photo-wrap { width: min(80vw, 340px); }
  .pdp-hero .pdp-dual-image .product-photo-wrap { width: min(92vw, 460px); }
  .pdp-hero .product-glow-ring { width: 300px; height: 300px; }
  .pdp-hero .product-grid { gap: 28px; }
}

/* Announcement bar: first thing in <body> on every page. It stays pinned above the nav,
   so each page's nav/header is offset by its height. Desktop shows both messages in a row;
   phones rotate them in place (CSS only), or stack them when motion is reduced. */
:root { --announce-h: 36px; }
.announce {
  position: sticky; top: 0; z-index: 400;
  height: var(--announce-h); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
  background: rgb(var(--dark-rgb, 16, 36, 20));
  border-bottom: 1px solid rgba(232, 197, 71, .22);
  color: rgba(243, 240, 223, .9);
  font: 500 13px/1.3 'DM Sans', Inter, sans-serif; letter-spacing: .02em;
}
.announce-track { display: flex; align-items: center; justify-content: center; gap: 22px; min-width: 0; }
.announce-msg { margin: 0; white-space: nowrap; }
.announce-msg + .announce-msg { display: flex; align-items: center; gap: 22px; }
.announce-msg + .announce-msg::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #E8C547; box-shadow: 0 0 8px #E8C547; flex: none; }
.announce a { color: #E8C547; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.announce a:hover, .announce a:focus-visible { color: #f3e3a0; }
.announce a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; border-radius: 2px; }

#mainNav { top: var(--announce-h); }
body > header { top: var(--announce-h); }
html:has(body > header) { scroll-padding-top: calc(105px + var(--announce-h)); }
@media (min-width: 1025px) { .pdp-hero .product-image-wrap { top: calc(120px + var(--announce-h)); } }

@media (max-width: 720px) {
  :root { --announce-h: 40px; }
  html:has(body > header) { scroll-padding-top: calc(85px + var(--announce-h)); }
  .announce { padding: 0; font-size: 12px; }
  .announce-track { position: relative; width: 100%; height: 100%; }
  .announce-msg, .announce-msg + .announce-msg {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 0 14px; text-align: center; white-space: normal; text-wrap: balance;
    opacity: 0; visibility: hidden; animation: announce-cycle 10s infinite;
  }
  .announce-msg + .announce-msg { animation-delay: 5s; }
  .announce-msg + .announce-msg::before { display: none; }
  .announce-msg:only-child { opacity: 1; visibility: visible; animation: none; transform: none; }
}
@keyframes announce-cycle {
  0% { opacity: 0; transform: translateY(6px); visibility: visible; }
  5%, 45% { opacity: 1; transform: none; visibility: visible; }
  50% { opacity: 0; transform: translateY(-6px); visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  :root { --announce-h: 52px; }
  .announce-track { flex-direction: column; justify-content: center; gap: 2px; }
  .announce-msg, .announce-msg + .announce-msg { position: static; opacity: 1; visibility: visible; animation: none; font-size: 11.5px; padding: 0 12px; }
}

/* Launch pricing note, shown by live pricing while the Shopify sale is on */
.launch-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #E8C547; }
.launch-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; flex: none; }
.launch-note[hidden] { display: none; }
.product-price-row + .launch-note { margin: -14px 0 28px; }
.offer-note + .launch-note { margin-top: 10px; }

/* A shopping arrival should expose the offer before the device details. */
#product { padding-block: 48px 72px; }
#product .set-head { max-width: 740px; }
#product h2 { font-size: clamp(2.75rem, 4.5vw, 3.75rem); }
#product .body-copy,
#product .device p:not(.device-type),
#product .offer-note,
#product .set-note { color: var(--cream); }
#product .body-copy { max-width: 620px; line-height: 1.7; }
#product .offer {
  margin-top: 28px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
}
#product .offer-note { font-size: 14px; }
#product .offer-price s { color: var(--cream); }
#product .set-grid { margin-top: 28px; }
#product .device .device-type { color: var(--g5); }
#product .device.red .device-type { color: var(--cream); }
#product .device .text-link { min-height: 44px; }
#product .btn { animation: none; }
/* The two device choices are already visible here. Keep the floating theme
   switch from covering the offer when a shopping link opens this section. */
html:has(#product:target) { scroll-behavior: auto !important; }
html:has(#product:target) .theme-toggle-wrap { display: none; }

@media (max-width: 720px) {
  #product { padding-block: 24px 48px; }
  #product .eyebrow { margin-bottom: 16px; }
  #product .body-copy { margin-top: 18px; }
  #product .offer { gap: 18px; margin-top: 22px; padding-block: 20px; }
  #product .offer-price { font-size: 42px; }
  #product .device { padding: 24px; }
  #product .set-note { font-size: 14px; padding-right: 44px; }
}

/* Legal drawer: the theme caps it at 500px, which clipped the last line on phones. */
.disclaimer-body.open { max-height: 2400px; }

/* Policy pages (Refund, Shipping, Privacy, Terms). The markup is Shopify's
   shopify-policy__* container with the copy pasted from Word, so it arrives with
   MsoNormal classes and inline margins and no room for our fixed nav. These rules
   give the title the same clearance every other page gets, put the type back on
   the site's scale, and hold the measure to something readable. Copy is untouched. */
body.template-policy .shopify-policy__container {
  max-width: 760px;
  margin-inline: auto;
  padding: calc(132px + var(--announce-h)) 24px 96px;
}
body.template-policy .shopify-policy__title { margin-bottom: 8px; }
body.template-policy .shopify-policy__title h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.1;
  margin: 0;
  text-align: left;
}
body.template-policy .shopify-policy__body .rte { font-size: 1rem; line-height: 1.8; }
body.template-policy .shopify-policy__body h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  margin: 44px 0 10px !important;
}
/* Word leaves its own margins on every paragraph; ours should win. */
body.template-policy .shopify-policy__body p,
body.template-policy .shopify-policy__body .MsoNormal {
  margin: 0 0 16px !important;
  max-width: 70ch;
}
body.template-policy .shopify-policy__body ul,
body.template-policy .shopify-policy__body ol { margin: 0 0 16px; padding-left: 22px; max-width: 70ch; }
body.template-policy .shopify-policy__body li { margin-bottom: 8px; }
body.template-policy .shopify-policy__body a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
  body.template-policy .shopify-policy__container {
    padding: calc(96px + var(--announce-h)) 20px 72px;
  }
  body.template-policy .shopify-policy__body .rte { font-size: 0.98rem; }
}

/* Desktop Shop menu. The header listed content pages only, so a desktop
   shopper had no route to the single devices without going through the duo.
   Opens on hover and on keyboard focus; the trigger is itself a link to the
   duo, so it still works if the menu never opens. */
.nav-shop { position: relative; }
.nav-shop-trigger { display: inline-flex; align-items: center; gap: 7px; }
.nav-shop-caret { width: 10px; height: 6px; flex: none; transition: transform .2s var(--ease, ease); }
.nav-shop:hover .nav-shop-caret,
.nav-shop:focus-within .nav-shop-caret { transform: rotate(180deg); }
.nav-shop-menu {
  position: absolute; top: calc(100% + 14px); left: 50%; z-index: 60;
  min-width: 200px; display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--bg-deep, #0b150f); border: 1px solid var(--line, rgba(255,255,255,.14));
  border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
/* Bridges the gap under the trigger so the menu survives the trip down to it. */
.nav-shop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-shop:hover .nav-shop-menu,
.nav-shop:focus-within .nav-shop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-shop-menu a {
  display: block; padding: 9px 14px; border-radius: 9px; white-space: nowrap;
  color: var(--cream, #F3EFE4); font-size: 14px; line-height: 1.2; text-decoration: none;
}
.nav-shop-menu a:hover,
.nav-shop-menu a:focus-visible { background: rgba(var(--lime-rgb, 163,255,18), .1); color: var(--lime, #A3FF12); }
@media (prefers-reduced-motion: reduce) { .nav-shop-caret, .nav-shop-menu { transition: none; } }