/* ============================================================
   Deviceland - shared chrome
   ============================================================

   Derived from deviceland.css: masthead, call bar, nav sheet, footer, and the
   type and button primitives those bands use. Nothing else.

   Every bare element selector is excluded on purpose. deviceland.css opens
   with a reset over *, html, body, a, ul, img and button. That is correct on
   the homepage, where all the markup is ours, and destructive on the product
   page, where all the markup is Elessi's - it reset the gallery images, the
   link colours and the attribute lists underneath it.

   Load this ALONGSIDE the parent theme stylesheet, never instead of it.
   Regenerate rather than hand-edit.
   ============================================================ */

:focus-visible {  outline: 2px solid var(--ember-lift);
  outline-offset: 3px;
  border-radius: 4px;}
.display {  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.95;
  text-wrap: balance;}
.display em {  font-style: italic;
  letter-spacing: -0.004em;
  color: var(--ember);}
.h-xl {  font-size: clamp(3.1rem, 8.4vw, 7.5rem);
  line-height: 0.86;}
.h-lg {  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.025em;}
.h-md {  font-size: clamp(2.05rem, 3.78vw, 3.4rem);
  line-height: 0.95;}
.h-sm {  font-size: clamp(1.5rem, 2.1vw, 2.05rem);
  line-height: 1;}
.h-picks {  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 0.96;}
.eyebrow {  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  line-height: 1;}
.lede {  font-size: 15px;
  line-height: 1.62;
  text-wrap: pretty;}
.num {  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;}
.on-ink-dim {  color: rgba(42, 32, 24, 0.74);}
.on-ink-dimmer {  color: rgba(42, 32, 24, 0.68);}
.on-paper-dim {  color: rgba(22, 19, 15, 0.66);}
.on-ember-dim {  color: rgba(255, 249, 245, 0.92);}
.on-ember-dimmer {  color: rgba(255, 249, 245, 0.78);}
.ember-text {  color: var(--ember);}
.tint {  color: var(--ember);}
.shell {  width: 100%;
  max-width: var(--shell);
  margin-left: auto; margin-right: auto;
  padding-left: var(--gut); padding-right: var(--gut);}
.skip {  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 999;
  background: var(--on-ink);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  transition: top 0.2s var(--ease);}
.skip:focus {  top: 16px;}
.grain {  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");}
.btn {  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 50px;
  padding-left: 26px; padding-right: 26px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease),
    border-color 0.35s var(--ease), box-shadow 0.35s var(--ease),
    color 0.35s var(--ease);}
.btn svg {  transition: transform 0.4s var(--ease);}
.btn:hover svg {  transform: translateX(3px);}
.btn:active {  transform: scale(0.985);}
.btn-ember {  background: linear-gradient(168deg, var(--ember-lift), var(--ember) 62%, var(--ember-deep));
  color: var(--on-ember);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 10px 30px -12px rgba(201, 89, 40, 0.6);}
.btn-ember:hover {  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 16px 40px -12px rgba(201, 89, 40, 0.72);
  transform: translateY(-1px);}
.btn-outline {  border: 1px solid var(--hair-light-2);
  color: var(--on-paper);}
.btn-outline:hover {  background: rgba(20, 17, 14, 0.05);
  border-color: rgba(20, 17, 14, 0.38);}
.btn-ink {  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--sh-1);}
.btn-ink:hover {  transform: translateY(-1px);
  box-shadow: var(--sh-2);}
.btn-light {  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--sh-1);}
.btn-light:hover {  transform: translateY(-1px);
  box-shadow: var(--sh-2);}
.btn-ghost-ink {  border: 1px solid var(--hair-dark-2);
  color: var(--on-sand);}
.btn-ghost-ink:hover {  background: rgba(42, 32, 24, 0.06);
  border-color: rgba(42, 32, 24, 0.4);}
.btn-on-ember {  background: var(--on-ember);
  color: var(--ember-field-2);
  box-shadow: var(--e3-warm);}
.btn-on-ember:hover {  transform: translateY(-1px);
  box-shadow: var(--e4-warm);}
.btn-ghost-ember {  border: 1px solid rgba(255, 249, 245, 0.42);
  color: var(--on-ember);}
.btn-ghost-ember:hover {  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 249, 245, 0.75);}
.link-quiet {  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);}
.link-quiet svg {  transition: transform 0.4s var(--ease);}
.link-quiet:hover {  border-bottom-color: currentColor;}
.link-quiet:hover svg {  transform: translate(2px, -2px);}
.masthead {  position: fixed;
  left: 0; right: 0;
  /* WordPress's admin bar is fixed above 600px and absolute below it, and it
     is 32px tall on a desktop but 46px on a phone. A fixed header at top:0
     therefore sat underneath it and lost the wordmark for any logged-in
     member of staff. deviceland.js publishes the bar's real bottom edge, which
     is 0 once an absolute bar has scrolled away. */
  top: var(--dl-admin-offset, 0px);
  z-index: 800;
  background: transparent;}
.masthead-inner {  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--bar-h);
  transition: height var(--dur-reveal) var(--ease);}
.masthead.is-stuck .masthead-inner {  height: var(--head-h-stuck);}
/* Full-bleed flush bar, not a floating capsule. The house radius is 2px, so an
   inset "island" renders as a floating rectangle and loses the whole point of
   the shape; and the folio below has to sit flush, which an inset pill with
   transparent margins cannot carry. Matches deviceland.css. */
.island {  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  left: 50%;
  right: auto;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  border-radius: 0;
  opacity: 0;
  background: rgba(248, 242, 232, 0.92);
  border-bottom: 1px solid rgba(20, 17, 14, 0.1);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  transition: opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);}
@media (min-width: 1024px) {
.island {    top: 0; right: 0; bottom: 0; left: 0;
  }
}
.masthead.is-stuck .island {  opacity: 1;}
@media (max-width: 767px) {
.masthead-inner,
  .masthead.is-stuck .masthead-inner {    height: var(--bar-h);
    transition: none;
  }
.masthead-inner {    width: auto;
    margin-left: 0; margin-right: 0;
  }
/* inset:0, not 6px.
     The 6px was there to make the bar read as a floating island. On a fixed
     header it is a 6px window across the full width of the screen, and the
     page scrolls behind it — the breadcrumb and body copy were visibly
     sliding through a slit above the wordmark. Same reason the 4px side
     margins above are now 0. A flush bar on a phone; the floating treatment
     survives from 768px up, where the header does not overlap content. */
.island {    top: 0; right: 0; bottom: 0; left: 0;
  }
.masthead.is-stuck {    background: transparent;
    box-shadow: none;
  }
.masthead-inner {    gap: 16px;
  }
.logo .logo-full,
  .masthead.is-stuck .logo .logo-full {    display: none;
  }
.logo .logo-word,
  .masthead.is-stuck .logo .logo-word {    display: block;
  }
.masthead-inner {    flex-wrap: nowrap;
  }
.masthead-actions {    flex: 0 0 auto;
  }
.logo {    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }
.logo .logo-img {    max-width: 100%;
  }
}
@media (max-width: 359px) {
.masthead-inner {    gap: 12px;
  }
}
.masthead {  padding-top: env(safe-area-inset-top, 0px);}
.logo,
.masthead-actions {  transition: padding var(--dur-reveal) var(--ease);}
.masthead.is-stuck .logo {  margin-left: 16px;}
.masthead.is-stuck .masthead-actions {  padding-right: 12px;}
.logo {  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--on-paper);}
.logo svg {  height: 52px;
  width: auto;
  transition: height var(--dur-reveal) var(--ease);}
.masthead.is-stuck .logo svg {  height: 36px;}
.logo .logo-mark {  transition: transform 0.6s var(--ease);
  transform-origin: 26px 30px;}
.logo:hover .logo-mark {  transform: rotate(-6deg) scale(1.06);}
.logo-img {  display: block;
  width: auto;
  max-width: none;
  transition: height var(--dur-reveal) var(--ease);}
.logo-full {  display: none;
  height: 48px;}
.logo-word {  display: block;
  height: 20px;}
@media (min-width: 1024px) {
.logo-word {    height: 22px;
  }
}
.masthead.is-stuck .logo-full {  display: none;}
.masthead.is-stuck .logo-word {  display: block;
  height: 18px;}
.logo-invert {  filter: none;}
.badge-apple {  position: relative;
  display: block;
  box-sizing: content-box;
  width: 86px;
  padding: 18px;
  flex-shrink: 0;}
.badge-apple img {  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0);}
.badge-apple.is-reversed img {  filter: brightness(0) invert(1);}
.foot .logo {  color: var(--on-sand);}
.nav {  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;}
@media (min-width: 1200px) {
.nav {    display: flex;
  }
}
.nav a {  position: relative;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 450;
  color: rgba(20, 17, 14, 0.64);
  border-radius: var(--r-pill);
  transition: color 0.3s var(--ease);}
.nav a::after {  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 1px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-ui) var(--ease);}
.nav a:hover {  color: var(--on-paper);}
.nav a.is-active {  color: var(--on-paper);}
.nav a:hover::after,
.nav a.is-active::after {  transform: scaleX(1);
  transform-origin: left;}
.callbar {  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 880;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair-light);
  border-top: 1px solid var(--hair-light);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 -12px 30px -18px rgba(20, 17, 14, 0.35);

  
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  
  transform: translateY(calc(100% + 14px));
  transition: transform 420ms var(--ease);
  will-change: transform;}
.callbar.is-in {  transform: none;}
/* Elessi's own phone bar (Home / Categories / Search) sat under the call bar,
   4px taller, so a strip of it showed above it, and all of it at the top of a
   page where the call bar waits for the first scroll (Nov 11). The masthead and
   the call bar replace it. */
html body .nasa-bottom-bar {  display: none;}
@media (prefers-reduced-motion: reduce) {
.callbar {    transition: none;
  }
}
@media (min-width: 1024px) {
.callbar {    display: none;
  }
}
.callbar-btn {  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 56px;
  padding: 8px 12px;
  background: rgba(248, 242, 232, 0.94);
  color: var(--on-paper);
  text-align: left;
  
  min-width: 0;}
.callbar-call {  background: var(--ember-deep);
  color: var(--on-ember);}
.callbar-btn:active {  filter: brightness(0.94);}
.callbar-btn svg {  flex: 0 0 auto;}
.callbar-txt {  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;}
.callbar-txt b {  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}
.callbar-txt i {  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}
/* The address wraps instead of ending "20790 Hawthorne Bl..." on phones (owner,
   Nov 11): two lines fit the bar's 56px, as the call button's two lines do. */
.callbar-map .callbar-txt b {  white-space: normal;}
@media (max-width: 1023px) {
.foot {    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}
.masthead-where {  display: none;
  margin-left: auto;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: rgba(20, 17, 14, 0.58);
  transition: color var(--dur-ui) var(--ease);}
.masthead-where svg {  color: var(--ember);
  flex-shrink: 0;}
.masthead-where:hover {  color: var(--on-paper);}
@media (min-width: 1024px) {
.masthead-where {    display: inline-flex;
  }
}
.masthead-call {  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(20, 17, 14, 0.16);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--on-paper);
  transition: background var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);}
.masthead-call svg {  color: var(--ember-deep);}
.masthead-call:hover {  background: rgba(20, 17, 14, 0.04);
  border-color: rgba(20, 17, 14, 0.28);}
@media (max-width: 599px) {
.masthead-call span {    display: none;
  }
.masthead-call {    padding: 0 11px;
  }
}
.masthead-actions {  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;}
@media (min-width: 1024px) {
.masthead-where ~ .masthead-actions {    margin-left: 22px;
  }
}
@media (max-width: 767px) {
.masthead-call {    display: none;
  }
.masthead-where ~ .masthead-actions {    margin-left: auto;
  }
.masthead.is-stuck .logo {    margin-left: 0;
  }
.masthead.is-stuck .masthead-actions,
  .masthead-actions {    padding-right: 0;
  }
}
.masthead a,
.nav-sheet a,
.callbar a,
.foot a {  text-decoration: none;}
.nav-sheet-nav a,
.foot-legal a,
.footnotes a,
.foot-bar a {  color: inherit;}
.masthead ul,
.nav-sheet ul,
.callbar ul,
.foot ul {  margin: 0;
  padding: 0;
  list-style: none;}
.foot p,
.foot h1,
.foot h2,
.foot h3,
.foot dl,
.foot dd,
.foot dt,
.nav-sheet p {  margin: 0;}
.masthead svg,
.nav-sheet svg,
.callbar svg,
.foot svg {  display: block;
  max-width: 100%;}
.masthead button,
.nav-sheet button,
.callbar button,
.foot button,
.icon-btn {  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  text-transform: none;
  letter-spacing: inherit;
  line-height: normal;
  min-height: 0;}
.icon-btn {  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  color: rgba(20, 17, 14, 0.66);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);}
.icon-btn:hover {  background: rgba(20, 17, 14, 0.07);
  color: var(--on-paper);}
@media (max-width: 420px) {
.icon-btn {    width: 36px;
    height: 36px;
  }
}
@media (max-width: 359px) {
.icon-btn {    width: 34px;
    height: 34px;
  }
}
.masthead-search {  display: none;}
@media (min-width: 1024px) {
.masthead-search {    display: grid;
  }
}
.find-overlay {  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 900;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: 11vh 24px 24px;
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease);}
.find-overlay[hidden],
.find-results[hidden] {  display: none;}
.find-overlay.is-open {  opacity: 1;}
.find-scrim {  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(20, 17, 14, 0.44);
  backdrop-filter: blur(7px) saturate(1.2);
  -webkit-backdrop-filter: blur(7px) saturate(1.2);}
.find-panel {  position: relative;
  width: 100%;
  max-width: 620px;
  background: var(--paper);
  border: 1px solid var(--hair-light);
  border-radius: var(--r-lg);
  box-shadow: var(--e4);
  overflow: hidden;
  transform: translateY(-10px) scale(0.985);
  transition: transform var(--dur-reveal) var(--ease);}
.find-overlay.is-open .find-panel {  transform: none;}
.find-field {  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 0 20px;
  height: 62px;
  border-bottom: 1px solid var(--hair-light);}
.find-field-icon,
.find-sheet-icon {  flex: 0 0 auto;
  color: var(--muted-fg);}
.find-input,
.find-sheet-input {  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 450;
  letter-spacing: -0.011em;
  color: var(--on-paper);
  -webkit-appearance: none;
  appearance: none;}
.find-input::placeholder,
.find-sheet-input::placeholder {  color: rgba(20, 17, 14, 0.42);}
.find-input::-webkit-search-decoration,
.find-input::-webkit-search-cancel-button,
.find-sheet-input::-webkit-search-decoration,
.find-sheet-input::-webkit-search-cancel-button {  -webkit-appearance: none;
  appearance: none;}
.find-esc {  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--hair-light-2);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted-fg);
  background: none;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);}
.find-esc:hover {  color: var(--on-paper);
  border-color: var(--hair-light-2);}
.find-results {  max-height: min(56vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;}
.find-item {  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--hair-light);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease);}
.find-item:last-of-type {  border-bottom: 0;}
.find-item:hover,
.find-item.is-active {  background: var(--paper-2);}
.find-item-img {  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: #fff;
  border: 1px solid var(--hair-light);
  border-radius: var(--r-sm);
  overflow: hidden;}
.find-item-img img {  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;}
.find-item-body {  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;}
.find-item-body b {  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.3;}
.find-item-sku {  font-size: 11.5px;
  font-style: normal;
  color: var(--muted-fg);}
.find-item-price {  flex: 0 0 auto;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: right;}
.find-item-price del {  display: none;}
.find-item-state {  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted-fg);}
.find-item-price ins {  text-decoration: none;}
.find-all {  display: block;
  padding: 13px 20px;
  border-top: 1px solid var(--hair-light);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted-fg);
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease);}
.find-all:hover {  color: var(--on-paper);}
.find-empty {  padding: 26px 20px 24px;
  text-align: center;}
.find-empty p {  font-size: 14.5px;
  line-height: 1.5;
  color: var(--on-paper);}
.find-empty .btn {  margin-top: 14px;}
.find-empty-note {  margin-top: 12px;
  font-size: 12px;
  color: var(--muted-fg);}
.find-hint {  display: none;
  gap: 16px;
  padding: 11px 20px;
  border-top: 1px solid var(--hair-light);
  background: var(--paper-2);
  font-size: 11px;
  color: var(--muted-fg);}
@media (pointer: fine) {
.find-hint {    display: flex;
  }
}
.find-hint b {  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  margin-right: 2px;
  padding-left: 4px; padding-right: 4px;
  border: 1px solid var(--hair-light-2);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 500;}
.find-sheet {  display: flex;
  align-items: center;
  gap: 11px;
  height: 52px;
  padding-left: 16px; padding-right: 16px;
  margin-bottom: 18px;
  background: var(--paper-2);
  border: 1px solid var(--hair-light);
  border-radius: var(--r-pill);}
.find-sheet:focus-within {  border-color: var(--hair-light-2);
  background: var(--paper);}
.find-results-sheet {  margin-bottom: 18px;
  background: var(--paper);
  border: 1px solid var(--hair-light);
  border-radius: var(--r-md);
  overflow: hidden;
  overflow-y: auto;}
.nav-sheet.find-active .nav-sheet-nav {  display: none;}
.dl-drawer[hidden] {  display: none;}
.dl-drawer {  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 910;
  display: grid;
  justify-items: end;}
.dl-drawer-scrim {  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(20, 17, 14, 0.44);
  backdrop-filter: blur(7px) saturate(1.2);
  -webkit-backdrop-filter: blur(7px) saturate(1.2);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease);}
.dl-drawer.is-open .dl-drawer-scrim {  opacity: 1;}
.dl-drawer-panel {  position: relative;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 44px));
  height: 100%;
  background: var(--paper);
  border-left: 1px solid var(--hair-light);
  box-shadow: var(--e4);
  transform: translateX(100%);
  transition: transform var(--dur-reveal) var(--ease);}
.dl-drawer.is-open .dl-drawer-panel {  transform: none;}
@media (prefers-reduced-motion: reduce) {
.dl-drawer-panel {    transition: none;
  }
}
.dl-drawer-head {  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hair-light);}
.dl-drawer-title {  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--on-paper);}
.dl-drawer-body {  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 20px;}
.dl-drawer-body > .widget_shopping_cart_content,
.dl-drawer .nasa-minicart-items {  display: block;
  padding: 0;
  margin: 0;}
.dl-drawer-note {  margin: 0;
  padding: 12px 20px 18px;
  font-size: 11.5px;
  color: var(--muted-fg);}
.dl-drawer .woocommerce-mini-cart,
.dl-drawer ul.cart_list {  margin: 0;
  padding: 0;
  list-style: none;}
.dl-drawer .mini_cart_item {  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair-light);
  list-style: none;}
.dl-drawer .nasa-image-cart-item {  flex: 0 0 56px;}
.dl-drawer .nasa-image-cart-item img,
.dl-drawer .mini_cart_item > a img {  width: 56px;
  height: 56px;
  object-fit: contain;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--hair-light);
  border-radius: var(--r-sm);}
.dl-drawer .nasa-info-cart-item {  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;}
.dl-drawer .mini-cart-info > .nasa-flex {  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;}
.dl-drawer .product-name,
.dl-drawer .mini_cart_item > a:not(.remove) {  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.006em;
  line-height: 1.35;
  color: var(--on-paper);
  text-decoration: none;}
.dl-drawer .product-name:hover {  color: var(--ember-deep);}
.dl-drawer dl.variation {  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-fg);}
.dl-drawer dl.variation dt {  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;}
.dl-drawer dl.variation dd {  display: inline;
  margin: 0;
  font-weight: 400;}
.dl-drawer dl.variation dd p {  display: inline;
  margin: 0;}
.dl-drawer dl.variation dd::after {  content: "\00a0·\00a0";}
.dl-drawer dl.variation dd:last-of-type::after {  content: "";}
.dl-drawer .mini-cart-item-price {  align-items: center;
  margin-top: 9px;}
.dl-drawer .mini-cart-item-price .amount {  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--on-paper);}
.dl-drawer .dl-drawer-panel .product-remove a.remove,
.dl-drawer .dl-drawer-panel a.remove_from_cart_button,
.dl-drawer .product-remove a.remove,
.dl-drawer a.remove_from_cart_button {  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: rgba(20, 17, 14, 0.4);
  font-size: 0;
  line-height: 1;
  text-decoration: none;
  text-indent: 0;
  overflow: hidden;
  transition: color var(--dur-micro) var(--ease),
    background var(--dur-micro) var(--ease);}
.dl-drawer .dl-drawer-panel .product-remove a.remove::before,
.dl-drawer .dl-drawer-panel a.remove_from_cart_button::before,
.dl-drawer .product-remove a.remove::before,
.dl-drawer a.remove_from_cart_button::before {  content: "";
  width: 11px;
  height: 11px;
  background: currentColor;
  transform: none;
  -webkit-mask: no-repeat center / 11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask: no-repeat center / 11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");}
.dl-drawer .product-remove a.remove::after,
.dl-drawer a.remove_from_cart_button::after {  display: none;
  content: none;}
.dl-drawer .product-remove a.remove:hover,
.dl-drawer a.remove_from_cart_button:hover {  background: var(--paper-2);
  color: var(--ember-deep);}
.dl-drawer .quantity {  position: relative;
  float: none;
  display: inline-block;
  width: 76px;
  height: 46px;
  margin: 0;
  border: 1px solid var(--hair-light-2);
  border-radius: var(--r-sm);
  background: var(--bone);
  overflow: hidden;}
.dl-drawer .quantity input.qty,
.dl-drawer .quantity input[type="number"] {  width: 48px;
  height: 44px;
  min-height: 0;
  line-height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--on-paper);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;}
.dl-drawer .quantity input[type="number"]::-webkit-outer-spin-button,
.dl-drawer .quantity input[type="number"]::-webkit-inner-spin-button {  -webkit-appearance: none;
  appearance: none;
  margin: 0;}
.dl-drawer .quantity .plus,
.dl-drawer .quantity .minus {  position: absolute;
  right: 0;
  left: auto;
  display: grid;
  place-items: center;
  width: 27px;
  height: 22px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--hair-light-2);
  border-radius: 0;
  background: transparent;
  color: var(--muted-fg);
  text-decoration: none;}
.dl-drawer .quantity .plus {  top: 0;
  bottom: auto;
  border-bottom: 1px solid var(--hair-light-2);}
.dl-drawer .quantity .minus {  bottom: 0;
  top: auto;}
.dl-drawer .quantity .plus svg,
.dl-drawer .quantity .minus svg {  width: 11px;
  height: 11px;}
.dl-drawer .quantity .plus:hover,
.dl-drawer .quantity .minus:hover {  background: rgba(20, 17, 14, 0.05);
  color: var(--on-paper);}
.dl-drawer .cart_list_product_quantity {  display: none;}
.dl-drawer .mini-cart-item-price {  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;}
.dl-drawer .quantity-wrap {  display: flex;
  align-items: center;
  flex: 0 0 auto;}
.dl-drawer .mini-cart-item-subtotal {  flex: 0 0 auto;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--on-paper);}
.dl-drawer .nasa-minicart-footer {  position: static;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;}
.dl-drawer .woocommerce-mini-cart__total,
.dl-drawer .minicart_total_checkout {  position: static;
  float: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair-light);
  font-size: 13.5px;
  text-align: left;
  color: var(--muted-fg);}
.dl-drawer .woocommerce-mini-cart__total strong {  font-weight: 400;}
.dl-drawer .total-price-label {  flex: 0 0 auto;}
.dl-drawer .total-price {  float: none;
  flex: 0 0 auto;
  text-align: right;}
.dl-drawer .woocommerce-mini-cart__total .amount,
.dl-drawer .total-price .amount {  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--on-paper);}
.dl-drawer .btn-mini-cart {  position: static;
  float: none;
  width: auto;
  padding: 0;
  text-align: left;}
.dl-drawer .dl-drawer-panel .woocommerce-mini-cart__buttons,
.dl-drawer .dl-drawer-panel .btn-mini-cart {  display: grid;
  gap: 8px;
  margin: 0;
  padding: 16px 0 4px;}
.dl-drawer .dl-drawer-panel .btn-mini-cart .woocommerce-mini-cart__buttons {  padding: 0;}
.dl-drawer .dl-drawer-panel a.button,
.dl-drawer .dl-drawer-panel .woocommerce-mini-cart__buttons a,
.dl-drawer .dl-drawer-panel .btn-mini-cart a.button,
.dl-drawer .dl-drawer-panel .btn-mini-cart .woocommerce-mini-cart__buttons a.button {  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--hair-light-2);
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--on-paper);
  transition: background var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);}
.dl-drawer .dl-drawer-panel a.button.checkout,
.dl-drawer .dl-drawer-panel .woocommerce-mini-cart__buttons a.checkout,
.dl-drawer .dl-drawer-panel .btn-mini-cart .woocommerce-mini-cart__buttons a.checkout {  order: -1;
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);}
.dl-drawer .dl-drawer-panel a.button.checkout:hover,
.dl-drawer .dl-drawer-panel .woocommerce-mini-cart__buttons a.checkout:hover {  background: var(--ink-3);
  border-color: var(--ink-3);
  color: var(--on-ink);}
.dl-drawer .dl-drawer-panel a.button:not(.checkout):hover,
.dl-drawer .dl-drawer-panel .woocommerce-mini-cart__buttons a:not(.checkout):hover {  background: var(--paper-2);
  color: var(--on-paper);}
.dl-drawer .dl-drawer-panel .woocommerce-mini-cart__empty-message {  margin: 0;
  padding: 34px 0 18px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--on-paper);
  text-align: left;}
.dl-drawer .dl-drawer-panel .woocommerce-mini-cart__empty-message i,
.dl-drawer .dl-drawer-panel .woocommerce-mini-cart__empty-message svg,
.dl-drawer .dl-drawer-panel .nasa-icon-mini-cart,
.dl-drawer .dl-drawer-panel .empty-mini-cart-icon {  display: none;}
.bag-count {  position: absolute;
  top: 4px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding-left: 4px; padding-right: 4px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--ember);
  color: var(--on-ember);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--paper);}
.nav-toggle {  display: grid;}
@media (min-width: 1200px) {
.nav-toggle {    display: none;
  }
}
.nav-toggle .i-x {  display: none;}
.nav-open .nav-toggle .i-bars {  display: none;}
.nav-open .nav-toggle .i-x {  display: block;}
.nav-sheet {  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 780;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(248, 242, 232, 0.97);
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease);}
.nav-sheet[hidden] {  display: none;}
.nav-sheet.is-open {  opacity: 1;}
.nav-sheet-inner {  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-top: calc(var(--head-h) + 18px); padding-bottom: 40px;}
.nav-sheet-nav {  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hair-light);}
.nav-sheet-nav a {  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 2px;
  border-bottom: 1px solid var(--hair-light);
  font-family: var(--display);
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  line-height: 1;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease), color var(--dur-micro) var(--ease);
  transition-delay: var(--d, 0ms);}
.nav-sheet.is-open .nav-sheet-nav a {  opacity: 1;
  transform: none;}
.nav-sheet-nav a:hover {  color: var(--ember);}
.nav-sheet-note {  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(20, 17, 14, 0.62);
  text-align: right;}
.nav-sheet-foot {  margin-top: auto;
  padding-top: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;}
.nav-sheet-tel {  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(20, 17, 14, 0.62);}
.pip-live {  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--ember);
  box-shadow: 0 0 0 0 rgba(228, 113, 60, 0.7);
  animation: pulse 2.8s var(--ease-io) infinite;}
.hero-media.has-photo .tableau,
.tile.has-photo .tile-stage,
.prod-media.has-photo .dev,
.svc-media.has-photo .bench,
.logo.has-photo svg {  display: none;}
.visit-now .pip-live,
[data-open-state].is-shut .pip-live {  animation: none;}
[data-open-state].is-shut {  opacity: 0.78;}
.foot {  border-top: 1px solid var(--hair-dark);
  background: var(--paper-3);
  color: var(--on-sand);
  padding-top: 74px; padding-bottom: 34px;}
.foot-grid {  display: grid;
  grid-template-columns: 1fr;
  gap: 46px;}
@media (min-width: 1024px) {
.foot-grid {    grid-template-columns: 4fr 8fr;
    gap: 40px;
  }
}
.foot-cols {  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 24px;}
@media (min-width: 760px) {
.foot-cols {    grid-template-columns: repeat(4, 1fr);
  }
}
.foot-col .eyebrow {  margin-bottom: 18px;
  color: rgba(42, 32, 24, 0.52);}
.foot-col li + li {  margin-top: 11px;}
.foot-col a {  font-size: 13px;
  color: rgba(42, 32, 24, 0.74);
  transition: color 0.3s var(--ease);}
.foot-col a:hover {  color: var(--on-sand);}
.foot-bar {  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid var(--hair-dark);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(42, 32, 24, 0.52);}
@media (min-width: 760px) {
.foot-bar {    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.foot-bar nav {  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;}
.foot-bar a:hover {  color: var(--on-sand);}
.sr-only {  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;}
.eyebrow {  display: inline-flex;
  align-items: baseline;}
.chapter {  position: relative;
  margin-right: 15px;
  padding-right: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--ember);}
.chapter::after {  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;}
.link-store {  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(20, 17, 14, 0.7);}
.link-store:hover {  color: var(--on-paper);}
.link-caps {  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;}
.footnotes {  counter-reset: fn;
  margin: 34px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--hair-dark);
  display: grid;
  gap: 9px 34px;
  list-style: none;}
@media (min-width: 900px) {
.footnotes {    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.footnotes li {  position: relative;
  padding-left: 22px;
  max-width: 66ch;
  font-size: 11.5px;
  line-height: 1.62;
  color: rgba(42, 32, 24, 0.62);
  text-wrap: pretty;}
.footnotes li::before {  counter-increment: fn;
  content: counter(fn);
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: rgba(42, 32, 24, 0.58);}
.pay {  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--hair-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;}
.pay-label {  color: rgba(42, 32, 24, 0.56);}
.pay-marks {  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;}
.pay-mark {  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 27px;
  padding-left: 11px; padding-right: 11px;
  border: 1px solid var(--hair-dark);
  border-radius: var(--r-sm);
  background: rgba(255, 253, 248, 0.66);
  color: rgba(42, 32, 24, 0.74);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;}
/* Card brands as their own marks (same as deviceland.css). */
.pay-mark:has(.pay-logo) {  height: 32px;
  padding-left: 10px; padding-right: 10px;
  gap: 6px;
  background: #fff;}
.pay-logo {  display: block;
  flex: 0 0 auto;}
.pay-word {  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: #1d1d1f;}
.pay-mc {  display: inline-flex;}
.pay-mc i {  display: block;
  width: 11px;
  height: 11px;
  border-radius: var(--r-pill);}
.pay-mc i:first-child {  background: #eb001b;}
.pay-mc i:last-child {  background: #f79e1b;
  margin-left: -4px;}
.foot-legal {  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hair-dark);
  display: grid;
  gap: 10px;}
.foot-legal p {  max-width: 68ch;
  font-size: 11.5px;
  line-height: 1.68;
  color: rgba(42, 32, 24, 0.6);
  text-wrap: pretty;}
.foot-soon {  color: rgba(42, 32, 24, 0.42);
  cursor: default;}
.foot-soon::after {  content: "soon";
  margin-left: 7px;
  padding: 2px 5px;
  border: 1px solid rgba(42, 32, 24, 0.18);
  border-radius: var(--r-sm);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: 1px;
  color: rgba(42, 32, 24, 0.5);}
.foot-legal a {  border-bottom: 1px solid rgba(42, 32, 24, 0.3);}
.foot-legal a:hover {  color: var(--on-sand);}
@media (prefers-reduced-motion: reduce) {
.nav-sheet-nav a {    opacity: 1;
    transform: none;
  }
}


/* The phone, quieter. Production gave it a border, a background and an ember
   icon — the same visual weight as the bag. It is worth keeping in the bar
   because this business converts on calls, but on a page that also sells
   online it should not out-shout the shopping controls. Rule underneath
   instead of a box: still obviously a link, no longer a button. */
.masthead-call {
  border: 0;
  background: none;
  padding-left: 0; padding-right: 0;
  border-radius: 0;
}

.masthead-call span {
  border-bottom: 1px solid var(--hair-light-2);
  padding-bottom: 1px;
}

.masthead-call:hover span {
  border-bottom-color: var(--ember-deep);
}


/* ------------------------------------------------------------
   The folio — ported from deviceland.css
   ------------------------------------------------------------
   The masthead template is shared by the homepage and every shop page, so this
   markup renders on the PDP too. Without these rules it appeared there as
   unstyled inline text across the top of the page, over the breadcrumb.

   ONE DELIBERATE DIFFERENCE from the homepage. There, the folio collapses on
   scroll: the credentials do their work in the opening view and a permanent
   band of small caps over the content is chrome for its own sake.

   Shop pages render with the masthead already pinned (data-pinned, set when
   $dl_pinned is true), so the same rule would collapse the folio before anyone
   saw it — and a product page is exactly where "Apple Premier Partner" and
   "Authorized Service Provider" are worth most, because that is where the
   decision happens. So a pinned masthead keeps its folio. */
.folio {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  /* The credentials sit on the right (owner, Oct 11). */
  justify-content: flex-end;
  height: var(--folio-h);
  border-bottom: 1px solid var(--hair-light);
  /* The railing needs its own surface.
     ------------------------------------------------------------
     The island is absolutely positioned inside .masthead-inner, so it only
     ever covered the logo bar — the folio sat one row below it with nothing
     behind it. At rest on the homepage the page ground happens to be cream so
     it looked intentional, but the masthead is fixed: the moment anything
     scrolls under it, and on every page that starts pinned, the credentials
     were reading straight over the hero and over product imagery.
     Same values as .island so the two rows read as one bar. */
  background: rgba(248, 242, 232, 0.92);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  overflow: hidden;
  transition: height var(--dur-reveal) var(--ease),
    opacity var(--dur-reveal) var(--ease);
}

.folio-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: clamp(14px, 1.8vw, 26px); padding-right: clamp(14px, 1.8vw, 26px);
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.folio-cell + .folio-cell {
  border-left: 1px solid var(--hair-light);
}

/* first and last take the page gutter, so the folio's type starts on the same
   vertical as the wordmark above it */
.folio-cell:first-child {
  padding-left: clamp(26px, 3vw, 54px);
}

.folio-cell:last-child {
  padding-right: clamp(26px, 3vw, 54px);
}

.folio-cell.is-right {
  margin-left: auto;
  border-left: 1px solid var(--hair-light);
}

.folio-pip {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ember);
  flex: 0 0 auto;
}

.folio-cell .is-shut .folio-pip,
.folio-cell.is-shut .folio-pip {
  background: var(--muted-fg);
}

.masthead.is-stuck .folio {
  height: 0;
  opacity: 0;
  border-bottom-color: transparent;
}

/* ...except on a page that starts pinned. See the note above. */
.masthead[data-pinned] .folio {
  height: var(--folio-h);
  opacity: 1;
  border-bottom-color: var(--hair-light);
}

@media (max-width: 1023px) {
  .folio-cell.is-optional {
    display: none;
  }
}

@media (max-width: 767px) {
  .folio,
  .masthead[data-pinned] .folio {
    height: 34px;
  }

  .folio-cell {
    padding-left: 14px; padding-right: 14px;
    font-size: 9px;
    letter-spacing: 0.2em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .folio-cell.is-optional-sm {
    display: none;
  }

  .folio {
    max-width: 100%;
  }
}

/* The fact tick, for parity with the homepage's credential cells. */
.fact-tick {
  display: block;
  width: 14px;
  height: 2px;
  margin-bottom: 11px;
  background: var(--ember);
  flex: 0 0 auto;
}


/* ------------------------------------------------------------
   Full-bleed chrome on shop pages — parity with deviceland.css
   ------------------------------------------------------------
   .masthead-inner carries .shell, which caps content at --shell and centres
   it. That cap was removed for the homepage in Phase 3 and not here, so the
   product page kept a 1480px bar sitting inside a full-width folio and a
   full-width island: measured 1480 against a 1520 viewport, which is the
   "header is not full width like the homepage" defect.

   The padding matches .hero-ed-panel's padding-left so the wordmark, the
   folio's first cell and the breadcrumb all start on one vertical. */
.masthead-inner.shell {
  max-width: none;
  margin-left: 0; margin-right: 0;
  padding-left: clamp(26px, 3vw, 54px); padding-right: clamp(26px, 3vw, 54px);
}

/* The island can now be a plain inset:0 box.
   ------------------------------------------------------------
   It was left:50% / width:100vw / margin-left:-50vw to escape the shell's
   max-width. Two problems: the trick is only needed because of the cap that
   has just been removed, and a later `@media (min-width:1024px) { .island {
   inset: 0 } }` reset `left` back to 0 while leaving the -50vw margin in
   place — which measured the surface at L-748 R773, i.e. half of it off the
   left edge of the screen.

   With a full-width bar, inset:0 IS full width. Simpler, and nothing to
   re-break. */
.island {
  left: 0;
  right: 0;
  width: auto;
  margin-left: 0;
}

/* The folio needs its own surface when the header floats.
   ------------------------------------------------------------
   .island is inside .masthead-inner, so it only ever covers the BAR row. On
   the homepage that is fine: the folio collapses on scroll, so it is never
   over content. Shop pages keep the folio (see the note where that rule
   lives), and there it was transparent — scrolled product content showed
   straight through the credential row.

   The island's bottom hairline is dropped at the same time. With a surface on
   both rows it drew a line THROUGH the middle of the header; the folio's own
   bottom border is the header's edge. */
.masthead[data-pinned] .folio {
  background: rgba(248, 242, 232, 0.92);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
}

.masthead[data-pinned] .island {
  border-bottom: 0;
}


/* One folio behaviour on every page.
   ------------------------------------------------------------
   The collapse used to hang off .is-stuck, which shop pages have from the
   server (data-pinned) — so the credentials vanished before they were seen and
   those pages had to keep the folio on permanently. The header then behaved
   one way on the homepage and another on a product page.

   .is-scrolled comes from scroll position alone, so both pages agree: the
   folio is present on arrival and collapses once reading starts. */
.masthead.is-scrolled .folio,
.masthead[data-pinned].is-scrolled .folio {
  height: 0;
  opacity: 0;
  border-bottom-color: transparent;
}

.masthead[data-pinned]:not(.is-scrolled) .folio {
  height: var(--folio-h);
  opacity: 1;
  border-bottom-color: var(--hair-light);
}

/* ------------------------------------------------------------
   Bag drawer: keep the footer reachable, and clear the admin bar
   ------------------------------------------------------------
   Measured with eight items in the bag at 375x780: the panel grew to 1088px
   and "View cart"/"Checkout" sat at y=984, off the bottom of the screen with
   no way to scroll to them. Only .dl-drawer-panel was a flex column; the node
   WooCommerce replaces on every fragment refresh —
   .widget_shopping_cart_content — is a plain block, so nothing bounded the
   item list and the whole column simply grew past the viewport.

   The chain has to be unbroken for the scroller to have a height to work
   with: panel -> content -> item list, each flex with min-height:0. */
.dl-drawer .dl-drawer-panel {
  min-height: 0;
}

/* .dl-drawer-body was already the scroller, and it scrolls the footer along
   with the list — so with a full bag the total and the two buttons were simply
   below the fold. An earlier attempt made .woocommerce-mini-cart a second
   scroller inside it, which is worse: two nested scroll areas with
   overscroll-behavior:contain trap the gesture at the inner edge, so the
   footer became unreachable rather than merely distant.

   One scroll area only: the item list. The footer is pinned beside it. */
.dl-drawer .dl-drawer-panel .dl-drawer-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dl-drawer .dl-drawer-panel .widget_shopping_cart_content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.dl-drawer .dl-drawer-panel .nasa-minicart-items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Total and buttons: always on screen, never scrolled away. */
.dl-drawer .dl-drawer-panel .nasa-minicart-footer,
.dl-drawer .dl-drawer-panel .woocommerce-mini-cart__total,
.dl-drawer .dl-drawer-panel .woocommerce-mini-cart__buttons {
  flex: 0 0 auto;
}

/* WordPress's admin bar covered the drawer's own head — the title and the
   close control — for any logged-in member of staff. Same measured offset the
   masthead uses. */
.dl-drawer {
  top: var(--dl-admin-offset, 0px);
}

/* The fixed call bar sits over the drawer's bottom edge, which is exactly
   where the two buttons now live. It is redundant while the bag is open. */
body:has(#dl-bag-drawer.is-open) .callbar {
  opacity: 0;
  pointer-events: none;
}

/* Quantity stepper: grid, not absolute positioning.
   ------------------------------------------------------------
   Measured in the drawer: the control is 76x46 but the input inside it
   rendered 25x18, because Elessi sizes .qty from its own rules and ours were
   only setting a width on a statically-positioned box. The digit therefore sat
   off-centre in an oversized white field with the +/- column floating beside
   it — the "padding isn't right" in the bag.

   Laying it out as a two-column grid makes the input fill its cell whatever
   Elessi asks for, so the digit is centred by construction. */
.dl-drawer .dl-drawer-panel .quantity {
  display: grid;
  grid-template-columns: 1fr 28px;
  grid-template-rows: 1fr 1fr;
  width: 78px;
  height: 46px;
}

.dl-drawer .dl-drawer-panel .quantity input.qty,
.dl-drawer .dl-drawer-panel .quantity input[type="number"],
.dl-drawer .dl-drawer-panel .quantity input[type="text"] {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0;
  line-height: normal;
  text-align: center;
}

.dl-drawer .dl-drawer-panel .quantity .plus,
.dl-drawer .dl-drawer-panel .quantity .minus {
  position: static;
  grid-column: 2;
  width: auto;
  height: auto;
  min-height: 0;
}

.dl-drawer .dl-drawer-panel .quantity .plus {
  grid-row: 1;
}

.dl-drawer .dl-drawer-panel .quantity .minus {
  grid-row: 2;
}

/* ------------------------------------------------------------
   Nav sheet: reachable from end to end
   ------------------------------------------------------------
   The sheet is a full-screen scroller, but its top padding came from the
   --head-h token while the real header is taller than that token and is
   itself offset for the admin bar — so the first categories were cut off
   above. At the other end the fixed call bar sits over the last rows, which
   is why "Call the store" could not be reached by scrolling: it was under an
   overlay, not below the scroll extent. */
.nav-sheet .nav-sheet-inner {
  padding-top: calc(var(--dl-admin-offset, 0px) + var(--head-measured, 108px) + 18px); padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}

/* The call bar duplicates the sheet's own "Call the store" and "Visit" rows
   while covering them, so it stands down whenever the sheet is open. */
body:has(#nav-sheet.is-open) .callbar,
body.nav-open .callbar {
  opacity: 0;
  pointer-events: none;
}

/* WordPress's admin bar, pinned on small screens.
   ------------------------------------------------------------
   Below 600px WordPress switches the bar to position:absolute. Its static
   position then falls after our own fixed header markup, so it rendered as a
   black band sitting in the middle of the hero rather than at the top of the
   screen. WordPress still reserves the space for it with html{margin-top},
   so pinning it puts it where that reserved space is and restores the same
   behaviour it has on a desktop. deviceland.js already offsets the masthead
   by the bar's height whenever the bar is fixed, so nothing else changes.

   Staff-only chrome: no logged-out visitor sees this element at all. */
@media screen and (max-width: 600px) {
  body.admin-bar #wpadminbar {
    position: fixed;
    top: 0;
  }
}

/* ------------------------------------------------------------
   Quantity update feedback
   ------------------------------------------------------------ */

.dl-bag-update-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.dl-bag-update-state[hidden] {
  display: none;
}

.dl-bag-update-state {
  margin-left: auto;
}

.dl-bag-update-state i {
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--hair-light-2);
  border-top-color: var(--ember-deep);
  border-radius: 50%;
  animation: dl-update-spin 0.7s linear infinite;
}

@keyframes dl-update-spin {
  to { transform: rotate(360deg); }
}

.dl-drawer-panel.is-updating .quantity {
  opacity: 0.45;
  pointer-events: none;
}

html body .dl-drawer-panel.is-updating .woocommerce-mini-cart__total .amount,
html body .dl-drawer-panel.is-updating .mini-cart-total .amount {
  opacity: 0.3;
}

.dl-drawer-panel .quantity,
.dl-drawer-panel .woocommerce-mini-cart__total .amount {
  transition: opacity var(--dur-micro) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .dl-bag-update-state i {
    animation: none;
    border-color: var(--ember-deep);
  }
}

/* Legal links beside the copyright (Terms, Returns), as on apple.com.
   Kept in chrome.css and deviceland.css alike: the footer is on both. */
.foot-legal {
  margin-left: 18px;
}

.foot-legal a {
  margin-right: 16px;
  color: inherit;
  text-decoration: none;
}

.foot-legal a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   Tooltips, everywhere Elessi draws one (owner feedback, Oct 15)
   Solid ink with white type, room to read, above everything around it,
   and wrapped rather than run past the edge. Elessi's own bubble was a
   5px-padded #333 that its swatch faded to 38% (fixed in pdp.css). The
   arrow follows the bubble's colour on every side Elessi places it.
   ------------------------------------------------------------ */
html body .nasa-tip .nasa-tip-content,
html body .nasa-tip-content {
  z-index: 10000;
  width: max-content;
  max-width: 260px;
  padding: 7px 11px;
  border-radius: 8px;
  background: #16130f;
  box-shadow: 0 6px 18px rgba(22, 19, 15, 0.22);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  white-space: normal;
  color: #fff;
  opacity: 1;
}

html body .nasa-tip-top .nasa-tip-content::after,
html body .nasa-tip .nasa-tip-content::after {
  border-top-color: #16130f;
}

html body .nasa-tip-bottom .nasa-tip-content::after {
  border-top-color: transparent;
  border-bottom-color: #16130f;
}

html body .nasa-tip-left .nasa-tip-content::after {
  border-top-color: transparent;
  border-left-color: #16130f;
}

html body .nasa-tip-right .nasa-tip-content::after {
  border-top-color: transparent;
  border-right-color: #16130f;
}

/* Bag line facts (inc/reserve.php, deviceland_bag_line_facts; owner, Oct 24):
   the AppleCare+ part and Ready to ship / Additional processing time, each on
   its own row under the options. Same rules in deviceland.css (the homepage
   loads that, not this) and bag.css (bag and checkout pages). */
.dl-drawer dl.variation dd.variation-Part,
.dl-drawer dl.variation dd.variation-AppleCarepart,
.dl-drawer dl.variation dd.variation-Availability {
  display: block;
  margin-top: 3px;
}
.dl-drawer dl.variation dd.variation-Part::after,
.dl-drawer dl.variation dd.variation-AppleCarepart::after,
.dl-drawer dl.variation dd.variation-Availability::after,
.dl-drawer dl.variation dd:has(+ dt.variation-Part)::after,
.dl-drawer dl.variation dd:has(+ dt.variation-AppleCarepart)::after,
.dl-drawer dl.variation dd:has(+ dt.variation-Availability)::after {
  content: "";
}
.dl-drawer .dl-ship {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.dl-drawer .dl-ship.is-ready {
  color: var(--ember-deep);
}
.dl-drawer .dl-ship.is-ready::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
}

/* Apple's AppleCare+ mark before "AppleCare+ part …" (owner, Oct 24): small,
   the tile alone, a hairline on its rounded shape. */
.dl-drawer .dl-line-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dl-drawer .dl-applecare-mark {
  height: 18px;
  width: 18px;
  max-width: none;
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  flex: none;
  object-fit: contain;
  border-radius: 23%;
  box-shadow: 0 0 0 0.5px rgba(22, 19, 15, 0.14);
}

.dl-drawer .dl-line-fact {
  align-items: flex-start;
}
.dl-drawer .dl-part {
  white-space: nowrap;
}

/* Each fact on its own full row: the details list is a flex row in the
   drawer and checkout, where a short "Ready to ship" sat beside the
   AppleCare+ line (owner's screenshot, Oct 24). */
.dl-drawer dl.variation dd.variation-Part,
.dl-drawer dl.variation dd.variation-AppleCarepart,
.dl-drawer dl.variation dd.variation-Availability {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

/* Vertical rhythm: the AppleCare+ row sat 3px under the line above with a
   tile taller than the text; 7px above it, 5px above availability, and an
   18px tile that sits inside the line. */
.dl-drawer dl.variation dd.variation-Part,
.dl-drawer dl.variation dd.variation-AppleCarepart {
  margin-top: 7px;
}

/* "Part" (Oct 25) is now the first fact under the options; the AppleCare+
   line after it is a step down, as availability is. */
.dl-drawer dl.variation dd.variation-Part ~ dd.variation-AppleCarepart {
  margin-top: 5px;
}

/* A line with no options (an accessory): "Part" is the first detail, right
   under the name, so it takes no gap of its own (owner, Oct 25: the drawer
   read as padded around it; the bag page's own spacing was right). */
.dl-drawer dl.variation dd.variation-Part:first-of-type {
  margin-top: 0;
}

.dl-drawer dl.variation dd.variation-Availability {
  margin-top: 5px;
}

.dl-drawer img.dl-applecare-mark,
.dl-drawer dl.variation img.dl-applecare-mark {
  width: 18px;
  height: 18px;
}

/* The drawer's option list is a wrapping row of whole values, set here
   rather than inherited: Elessi's style.css (dl.variation flex + wrap) is
   not loaded on the homepage, where the list fell back to plain text and
   broke values mid-value ("40W USB-C / Power Adapter", Oct 24). */
.dl-drawer dl.variation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

/* Elessi's own rules reach inside this list on inner pages: its global `p`
   sets Jost on every value and a cart rule paints the values #555. One face
   and one taupe for every spec line, as on the homepage (Oct 24). */
html body .dl-drawer dl.variation dd,
html body .dl-drawer dl.variation dd p {
  font-family: inherit;
  text-transform: none;
  color: var(--muted-fg);
}

/* Spec lines wrap as whole values with a dot BETWEEN values, never at the
   start or end of a line (owner, Oct 24; "512GB SSD ·" used to end a line).
   Each dot sits in the 14px gap to the LEFT of its value; the list is shifted
   left by that gap and clipped there, so the dot in front of the first value
   on every line is never drawn. Same rule as the bag and checkout (bag.css). */
html body .dl-drawer dl.variation {
  margin-left: -14px;
  clip-path: inset(-6px -6px -6px 12px);
}

html body .dl-drawer dl.variation dd {
  position: relative;
  display: block;
  margin-left: 14px;
}

html body .dl-drawer dl.variation dd::after,
html body .dl-drawer dl.variation dd:has(+ dt)::after {
  content: none;
}

html body .dl-drawer dl.variation dd::before {
  content: "\00b7";
  display: block;
  position: absolute;
  top: 0;
  left: -14px;
  width: 14px;
  text-align: center;
  color: rgba(20, 17, 14, 0.35);
}

html body .dl-drawer dl.variation dd.variation-Part,
html body .dl-drawer dl.variation dd.variation-AppleCarepart,
html body .dl-drawer dl.variation dd.variation-Availability {
  flex: 0 0 calc(100% - 14px);
}

html body .dl-drawer dl.variation dd.variation-Part::before,
html body .dl-drawer dl.variation dd.variation-AppleCarepart::before,
html body .dl-drawer dl.variation dd.variation-Availability::before {
  content: none;
}

/* Product names in full in every product loop: Pairs well with, Related,
   the bag's Worth adding, search results. Elessi puts .nasa-show-one-line on
   each name, which cut them to "AirPods 4 with Active Noise Cancel..." (owner,
   Nov 11). Two lines are kept so a one-line name's price stays level with its
   neighbours'. Here, not in shelf.css: search and checkout do not load that. */
html body .product-item .name.nasa-show-one-line,
html body .woocommerce-loop-product__title.nasa-show-one-line {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  min-height: 2.7em;
}