/* ==========================================================================
   Winfrey Publishing — Global chrome: header, navigation, overlays, footer
   ========================================================================== */

/* ------------------------------------------------------------ Utility bar */
.utility-bar {
  background: var(--ink);
  color: var(--text-invert-muted);
  font-size: var(--fs-xs);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--utility-h);
  flex-wrap: wrap;
}
.utility-bar a { color: var(--text-invert-muted); text-decoration: none; display: inline-flex; align-items: center; gap: .45em; }
.utility-bar a:hover { color: var(--lantern-300); }
.utility-bar__group { display: flex; align-items: center; gap: var(--sp-5); }
.utility-bar__group--right { gap: var(--sp-4); }
.utility-bar__divider { width: 1px; height: 14px; background: rgba(255,255,255,.16); }
.utility-bar__cta { color: var(--lantern-300) !important; font-weight: 600; }

@media (max-width: 899px) {
  .utility-bar { display: none; }
}

/* --------------------------------------------------------------- Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--parchment);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.site-header.is-stuck {
  background: rgba(251, 247, 241, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px -8px rgba(28,27,25,.22);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand img, .brand svg { height: clamp(34px, 3.4vw, 46px); width: auto; transition: height var(--dur) var(--ease); }
.is-stuck .brand img, .is-stuck .brand svg { height: clamp(30px, 3vw, 40px); }

/* ------------------------------------------------------------ Primary nav */
.primary-nav { margin-left: auto; }
.primary-nav__list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .7em .78em;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: .78em; right: .78em;
  bottom: .35em;
  height: 1.5px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--bronze-700); }
.nav-link:hover::after, .nav-link[aria-expanded="true"]::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--bronze-700); font-weight: 600; }
.nav-link__chevron { transition: transform var(--dur) var(--ease); }
.nav-link[aria-expanded="true"] .nav-link__chevron { transform: rotate(180deg); }

.header__actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

.icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: none;
  color: var(--text);
  cursor: pointer;
  position: relative;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  text-decoration: none;
}
.icon-btn:hover { background: var(--parchment-200); color: var(--bronze-700); }

.cart-count {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--bronze-700);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: grid; place-items: center;
  line-height: 1;
}
.cart-count[data-count="0"] { display: none; }

@media (max-width: 1199px) {
  .primary-nav { display: none; }
}
@media (min-width: 1200px) {
  .nav-toggle { display: none; }
}

/* Small phones: the logo plus four 44px controls no longer fit on one row.
   The account link is dropped here because it is already the first item in
   the drawer footer, and the remaining targets stay at the 44px minimum. */
@media (max-width: 420px) {
  .header__inner { gap: var(--sp-3); }
  .header__actions { gap: 0; }
  .header__actions .icon-btn[href*="account"] { display: none; }
  .brand img, .brand svg { height: 32px; }
  .is-stuck .brand img, .is-stuck .brand svg { height: 29px; }
}

/* ----------------------------------------------------------- Mega menu */
.mega {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: var(--z-mega);
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.mega[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

.mega__inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: var(--sp-7);
}
.mega__inner--wide { grid-template-columns: 1fr 260px; }

.mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
.mega__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mega__heading {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-soft);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

.mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mega__item {
  display: block;
  padding: .5em .6em;
  margin-left: -.6em;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.mega__item:hover { background: var(--bronze-50); color: var(--bronze-700); transform: translateX(3px); }
.mega__item strong { display: block; font-weight: 600; }
.mega__item span { display: block; font-size: var(--fs-xs); color: var(--text-soft); line-height: 1.4; margin-top: 1px; }
.mega__item:hover span { color: var(--bronze-600); }

.mega__promo {
  background: var(--grad-ink);
  color: var(--text-invert);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
  overflow: hidden;
}
.mega__promo::after {
  content: "";
  position: absolute;
  inset: auto -30% -50% auto;
  width: 220px; height: 220px;
  background: var(--grad-glow);
  pointer-events: none;
}
.mega__promo h3 { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0; color: #fff; }
.mega__promo p { font-size: var(--fs-sm); color: var(--text-invert-muted); margin: 0; }

@media (max-width: 1279px) {
  .mega__inner { grid-template-columns: 1fr; }
  .mega__promo { display: none; }
}

/* ------------------------------------------------------- Mobile drawer */
/* Off-canvas panels.
   `visibility: hidden` while closed does three jobs that transform alone
   cannot: it keeps the panel's links out of the tab order, hides it from the
   accessibility tree, and stops an element parked at translateX(100%) from
   widening the document. Visibility is delayed on close so the slide-out
   animation still plays. */
.nav-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(420px, 100%);
  z-index: var(--z-drawer);
  background: var(--parchment);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              visibility 0s linear var(--dur-slow);
  box-shadow: var(--sh-xl);
}
.nav-drawer[data-open="true"] {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.nav-drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5) var(--sp-8); overscroll-behavior: contain; }
.nav-drawer__foot { flex: none; padding: var(--sp-5); border-top: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; gap: var(--sp-3); }

.m-nav { list-style: none; margin: 0; padding: 0; }
.m-nav__item { border-bottom: 1px solid var(--line); }
.m-nav__link, .m-nav__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.m-nav__toggle svg { transition: transform var(--dur) var(--ease); color: var(--bronze-700); flex: none; }
.m-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.m-nav__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.m-nav__panel[data-open="true"] { grid-template-rows: 1fr; }
.m-nav__panel > div { overflow: hidden; }
.m-nav__sub { list-style: none; margin: 0; padding: 0 0 var(--sp-4); }
.m-nav__sub-heading {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-soft);
  font-weight: 700;
  padding: var(--sp-3) 0 var(--sp-2);
}
.m-nav__sub a {
  display: block;
  padding: .55em 0 .55em var(--sp-4);
  border-left: 2px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: none;
}
.m-nav__sub a:hover, .m-nav__sub a:focus-visible { color: var(--bronze-700); border-left-color: var(--bronze); }

.scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(20, 18, 16, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* -------------------------------------------------------- Search overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(28, 27, 25, .96);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  overflow-y: auto;
}
.search-overlay[data-open="true"] { opacity: 1; visibility: visible; }
.search-overlay__head { display: flex; justify-content: flex-end; }
.search-overlay__body { max-width: 720px; width: 100%; margin: clamp(2rem, 10vh, 7rem) auto 0; }
.search-overlay label { color: var(--text-invert); }
.search-overlay__field { position: relative; display: flex; align-items: center; gap: var(--sp-3); border-bottom: 2px solid rgba(255,255,255,.28); padding-bottom: var(--sp-3); }
.search-overlay__field:focus-within { border-bottom-color: var(--lantern); }
.search-overlay__input {
  flex: 1;
  background: none;
  border: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  padding: 0;
}
.search-overlay__input:focus { outline: none; box-shadow: none; }
.search-overlay__input::placeholder { color: rgba(255,255,255,.36); }
.search-suggest { margin-top: var(--sp-6); }
.search-suggest__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: rgba(255,255,255,.5); margin-bottom: var(--sp-3); }
.search-suggest__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.search-suggest__links a {
  padding: .45em 1em;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-pill);
  color: rgba(255,255,255,.82);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease);
}
.search-suggest__links a:hover { background: var(--lantern); border-color: var(--lantern); color: var(--ink); }

/* ------------------------------------------------------------ Cart drawer */
.cart-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, 100%);
  z-index: var(--z-drawer);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out),
              visibility 0s linear var(--dur-slow);
  box-shadow: var(--sh-xl);
}
.cart-drawer[data-open="true"] {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
}
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5); border-bottom: 1px solid var(--line); flex: none; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-5); overscroll-behavior: contain; }
.cart-drawer__foot { flex: none; padding: var(--sp-5); border-top: 1px solid var(--line); background: var(--parchment); display: flex; flex-direction: column; gap: var(--sp-3); }

.mini-line { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--sp-3); padding-block: var(--sp-4); border-bottom: 1px solid var(--line); align-items: start; }
.mini-line:last-child { border-bottom: 0; }
.mini-line__media { border-radius: var(--r-xs); overflow: hidden; background: var(--parchment-200); }
.mini-line__title { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; margin: 0 0 2px; }
.mini-line__title a { color: inherit; text-decoration: none; }
.mini-line__meta { font-size: var(--fs-xs); color: var(--text-soft); }
.mini-line__price { font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }

/* ---------------------------------------------------- Sticky mobile CTA */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(251, 247, 241, .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { flex: 1; min-height: 46px; }
@media (min-width: 900px) { .sticky-cta { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 0; } }

/* ------------------------------------------------------------- Page hero */
.page-hero {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--grad-ink);
  color: var(--text-invert);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: 620px; height: 620px;
  background: var(--grad-glow);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lede { color: var(--text-invert-muted); }
.page-hero__crumbs { margin-bottom: var(--sp-5); }
.page-hero--split { }
.page-hero--split .page-hero__inner { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 1023px) { .page-hero--split .page-hero__inner { grid-template-columns: 1fr; } }

.page-hero--light { background: var(--grad-warm); color: var(--text); }
.page-hero--light h1 { color: var(--text); }
.page-hero--light .lede { color: var(--text-muted); }
.page-hero--light::before { opacity: .5; }

/* ---------------------------------------------------------------- Footer */
.site-footer { background: var(--ink); color: var(--text-invert-muted); font-size: var(--fs-sm); }
.site-footer a { color: var(--text-invert-muted); text-decoration: none; }
.site-footer a:hover { color: var(--lantern-300); text-decoration: underline; }

.footer__top { padding-block: var(--section-y) var(--sp-8); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: clamp(2rem, 3.5vw, 3.5rem) var(--sp-6);
}
/* Scoped to the logo link only. This previously read `.footer__brand svg`,
   which also matched every contact and social icon in that column and forced
   them all to 44px. */
.footer__logo { display: inline-block; margin-bottom: var(--sp-4); }
.footer__logo img, .footer__logo svg { height: 48px; width: auto; }

.footer__tagline { font-family: var(--font-display); font-size: var(--fs-md); color: var(--text-invert); line-height: 1.45; margin-bottom: var(--sp-4); }
.footer__desc { max-width: 42ch; margin-bottom: var(--sp-5); }

.footer__heading {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-invert);
  margin-bottom: var(--sp-4);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }

/* Contact details sit in their own full-width band rather than stacked inside
   the brand column, where they made that column roughly three times the height
   of the link columns and left a large void beside them. */
.footer__contact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
  padding-block: var(--sp-7);
  border-top: 1px solid rgba(255, 255, 255, .1);
  list-style: none;
  margin: 0;
}
.footer__contact-strip li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.footer__contact-strip svg { color: var(--lantern); flex: none; margin-top: 3px; }
.footer__contact-strip .label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-invert);
  font-weight: 700;
  margin-bottom: 3px;
}
.footer__contact-strip a { text-decoration: none; }
.footer__contact-strip a:hover { text-decoration: underline; }

@media (max-width: 899px) { .footer__contact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .footer__contact-strip { grid-template-columns: minmax(0, 1fr); } }

.social-row { display: flex; gap: var(--sp-2); }
.social-row a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  transition: all var(--dur-fast) var(--ease);
}
.social-row a:hover { background: var(--lantern); border-color: var(--lantern); color: var(--ink); }

.footer__newsletter {
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-block: var(--sp-7);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-6);
  align-items: center;
}
.footer__newsletter h3 { font-family: var(--font-display); color: #fff; font-size: var(--fs-xl); margin: 0 0 var(--sp-2); }
.newsletter-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.newsletter-form .input {
  flex: 1;
  min-width: 200px;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.newsletter-form .input::placeholder { color: rgba(255,255,255,.4); }
.newsletter-form .input:focus { border-color: var(--lantern); box-shadow: 0 0 0 3px rgba(233,161,59,.2); }

.footer__bottom {
  padding-block: var(--sp-5) var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); list-style: none; margin: 0; padding: 0; }
.payment-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.pay-mark {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 .7em;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-xs);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(248, 244, 238, .68);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .footer__newsletter { grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: flex-start; }
}