/* Inner pages + commerce chrome — same design language as the home redesign. */

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --header-h: 62px;
    --header-height: 62px;
  }
  body.theme .hd-in {
    height: 62px;
  }
  body.theme .og-read-progress {
    top: 62px;
  }
}

/* Cart drawer / search / toast — match reference drawer language */
body.theme .cdr,
body.theme .search-panel,
body.theme .mnav {
  border: 0;
}
body.theme .cdr .dr-head,
body.theme .search-panel .dr-head,
body.theme .mnav .dr-head {
  padding: 20px 24px;
}
body.theme .cdr .dr-body {
  padding: 8px 24px 20px;
}
body.theme .cdr .drawer-item {
  grid-template-columns: 72px minmax(0, 1fr) 36px;
  align-items: center;
}
body.theme .cdr .drawer-gift {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
}
body.theme .cdr .drawer-thumb {
  width: 72px;
  height: 80px;
  overflow: hidden;
  flex: none;
}
body.theme .cdr .drawer-thumb img {
  width: 72px;
  height: 80px;
  max-width: 72px;
  object-fit: contain;
}
body.theme .cdr .btn-block {
  width: 100% !important;
  min-height: 52px;
}
body.theme .cdr .dr-foot {
  padding: 20px 24px 24px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
}
body.theme .hd-badge {
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  transform-origin: center;
}
body.theme .hd-badge.is-bump,
body.theme .hd-badge.bump {
  animation: og-bump 0.45s var(--ease);
}
@keyframes og-bump {
  40% {
    transform: scale(1.35);
  }
}
body.theme .toast {
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
}
/* Tile wishlist only — do not force .card .wishlist-btn (shop cards use dist hover). */
body.theme .tile .wishlist-btn {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), background 0.2s, color 0.2s;
}
body.theme .tile:hover .wishlist-btn,
body.theme .tile .wishlist-btn.active,
body.theme .tile .wishlist-btn:focus-visible {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  body.theme .tile .wishlist-btn {
    opacity: 1;
    transform: none;
  }
}

/* Club page */
body.theme .club-hero {
  background: var(--ink) !important;
  color: #f6f4ea;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 8vw, 88px);
  position: relative;
  overflow: hidden;
}
body.theme .club-hero::before,
body.theme .club-hero::after {
  display: none !important;
}
body.theme .club-hero h1 {
  font: 500 clamp(36px, 5vw, 64px) / 1.05 var(--f-sans) !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
  color: #fff !important;
  margin: 0;
}
body.theme .club-hero h1 sub {
  font-size: 0.55em;
}
body.theme .club-top {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: flex-end;
  flex-wrap: wrap;
}
body.theme .club-join {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink) !important;
  font-weight: 500;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
body.theme .club-join:hover {
  background: #b88a00;
}
body.theme .club-cta p,
body.theme .club-cta a {
  color: #c9c6b0;
}
body.theme .club-gift {
  display: inline-flex;
  margin: 28px 0 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--gold-on-dark);
  font-size: 14px;
  font-weight: 500;
}
body.theme .club-lead,
body.theme .club-note,
body.theme .club-kicker {
  color: #c9c6b0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.65;
}
body.theme .club-lead {
  font-size: clamp(18px, 2vw, 22px);
  margin-top: 22px;
}
body.theme .club-kicker {
  margin: 40px 0 16px;
  color: var(--gold-on-dark);
  font-weight: 500;
}
body.theme .club-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.theme .club-pills span {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  color: #f6f4ea;
}
body.theme .club-ways {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}
body.theme .club-way {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 24px 20px;
  color: #fff !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  transition: background 0.35s var(--ease), transform 0.45s var(--ease);
}
body.theme .club-way:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}
body.theme .club-way b {
  font: 500 20px / 1.2 var(--f-sans);
  letter-spacing: -0.02em;
}
body.theme .club-way small,
body.theme .club-way strong {
  color: var(--gold-on-dark);
  font-size: 13px;
}
body.theme .club-way svg {
  width: 36px;
  height: 28px;
  color: var(--gold-on-dark);
}
body.theme .club-stars {
  color: var(--gold);
  letter-spacing: 2px;
}
body.theme .club-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
body.theme .club-trust > div {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  color: #c9c6b0;
}
body.theme .club-trust svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--gold-on-dark);
}
body.theme .club-earn {
  padding-top: clamp(48px, 7vw, 88px);
}
body.theme .club-forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
body.theme .club-form,
body.theme .club-login {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: none;
}
body.theme .club-form h3 {
  font: 500 24px / 1.2 var(--f-sans);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
body.theme .club-form p,
body.theme .club-login {
  color: var(--ink-2);
  font-size: 15px;
}
body.theme .club-form label {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
body.theme .club-form input,
body.theme .club-form select,
body.theme .club-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 14px 16px;
  font: 400 15px / 1.4 var(--f-sans);
}
body.theme .club-form textarea {
  border-radius: 18px;
  resize: vertical;
}
body.theme .club-form .btn {
  margin-top: 8px;
}

/* Quiz / why-ozone / info / auth */
body.theme .quiz-card,
body.theme .info-card,
body.theme .auth-box,
body.theme .form-card,
body.theme .legal-intro,
body.theme .faq-item,
body.theme .why-card,
body.theme .knowledge-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
  background: #fff;
}
body.theme .quiz-opt,
body.theme .faq-item summary {
  border-radius: 16px;
  border-color: var(--line);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
body.theme .quiz-opt:hover,
body.theme .quiz-opt.is-on,
body.theme .faq-item[open] summary {
  background: var(--surface);
  border-color: var(--ink);
}
body.theme .page-header {
  background: #fff !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line);
  padding: clamp(40px, 6vw, 72px) 0 !important;
}
body.theme .page-header::before,
body.theme .page-header::after {
  display: none !important;
}
body.theme .page-header h1 {
  color: var(--ink) !important;
  font: 500 clamp(36px, 5vw, 64px) / 1.05 var(--f-sans) !important;
  letter-spacing: -0.04em !important;
  max-width: 18ch;
}
body.theme .page-header p,
body.theme .page-header .breadcrumb,
body.theme .page-header .breadcrumb a {
  color: var(--ink-2) !important;
}
body.theme .account-nav a,
body.theme .side-chip,
body.theme .pill {
  border-radius: 999px;
}
body.theme .account-nav a.is-active,
body.theme .side-chip.is-active,
body.theme .pill.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Cart + checkout */
body.theme .commerce-page .page-hero,
body.theme .cart-box,
body.theme .checkout-box {
  border-radius: var(--radius-lg);
}
body.theme .cart-row {
  border-color: var(--line);
}
body.theme .cart-row img {
  border-radius: 14px;
  background: var(--surface);
  padding: 8px;
}
body.theme .qty {
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
body.theme .qty button {
  background: #fff;
}
body.theme .co-form h2 span,
body.theme .co-steps .is-on b {
  background: var(--ink);
  border-color: var(--ink);
}
body.theme .co-line img {
  background: var(--surface);
}

/* Product page polish */
body.theme .pd-buy .btn,
body.theme .pd-actions .btn {
  border-radius: 999px;
}
body.theme .routine {
  background: var(--surface);
  border: 0 !important;
  overflow: hidden;
}
body.theme .routine-item {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--line);
}

/* Why ozone editorial */
body.theme .why-grid {
  gap: 20px;
}
body.theme .why-card {
  padding: 28px !important;
  transition: transform 0.45s var(--ease), background 0.35s var(--ease);
}
body.theme .why-card:hover {
  transform: translateY(-4px);
  background: var(--surface) !important;
}
body.theme .why-card h3 {
  font: 500 22px / 1.2 var(--f-sans);
  letter-spacing: -0.02em;
}

@media (max-width: 1100px) {
  body.theme .club-ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.theme .club-trust {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  body.theme .club-forms {
    grid-template-columns: 1fr;
  }
  body.theme .club-top {
    align-items: flex-start;
  }
}
@media (max-width: 760px) {
  body.theme .club-ways {
    grid-template-columns: 1fr;
  }
  body.theme .club-hero {
    border-radius: 0 0 24px 24px;
    padding: 40px 0 48px;
  }
  body.theme .club-hero h1 {
    font-size: 34px !important;
  }
  body.theme .club-way {
    min-height: 0;
  }
  body.theme .og-newsletter form {
    flex-direction: column;
  }
}
@media (max-width: 480px) {
  body.theme .btn {
    width: auto;
  }
  body.theme .btn-block,
  body.theme .cdr .btn-block,
  body.theme .co-form .btn-block {
    width: 100% !important;
  }
  body.theme .og-newsletter .btn,
  body.theme .club-join {
    width: 100%;
    justify-content: center;
  }
  body.theme .hd-logo {
    width: 156px;
    min-width: 140px;
  }
}



/* ---- Site-wide responsive + overflow bugfixes (v102) ---- */
html{overflow-x:clip}
body.theme{overflow-x:clip}
body.theme .hd{position:sticky;top:0;z-index:60}
body.theme .ann{position:relative;z-index:61}
body.theme .mega{z-index:70}
body.theme img,body.theme svg,body.theme video{max-width:100%}
body.theme .wrap{width:100%;box-sizing:border-box}

/* Hero must not spill under header or cause horizontal scroll */
.og-hero,.og-hero-field{max-width:100vw}
.og-pf{max-width:min(46vw,420px)}
@media(max-width:760px){
  .og-pf{max-width:42vw}
  .og-hero-copy{z-index:6}
  .og-need-boxes{grid-template-columns:1fr 1fr}
  .og-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  body.theme .tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 12px}
  body.theme .shop-layout,body.theme .shop-grid{grid-template-columns:1fr}
  body.theme .cart-row{grid-template-columns:64px minmax(0,1fr) 36px;gap:12px;align-items:start;padding:14px 0}
  body.theme .cart-thumb{width:64px;height:72px}
  body.theme .cart-name{font:500 15px/1.3 var(--f-sans)}
  body.theme .cart-line{font-size:15px;min-width:0}
  body.theme .cart-row .qty button{min-height:36px;width:36px}
  body.theme .sum h2{font-size:20px}
  body.theme .pd-layout,body.theme .product-layout{grid-template-columns:1fr!important}
}

@media(max-width:480px){
  :root{--gutter:16px}
  body.theme .hd-in{height:58px;gap:8px}
  body.theme .hd-logo{width:148px;min-width:132px}
  body.theme .btn{padding:14px 20px;min-height:46px}
  /* Keep sslip mobile hero title size (clamp 38–48 via home-redesign). */
  .og-products,.og-need-boxes{gap:12px}
  body.theme .tile-add{width:100%}
  body.theme .tile-action-slot{flex-direction:column;align-items:stretch}
}

/* Prevent sticky header + drawers stacking bugs */
body.theme .mnav,body.theme .cdr,body.theme .search-ov,body.theme .scrim{z-index:90}
body.theme.is-locked{overflow:hidden;touch-action:none}

/* Club demo shouldn't overflow on narrow phones */
.og-club-demo{max-width:100%}
.og-demo-card{width:100%;box-sizing:border-box}
.og-demo-line .nm{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

dialog.birth-pop{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  margin:0;border:0;padding:0;background:transparent;
  width:min(420px,calc(100vw - 32px));max-width:none;height:fit-content
}
.birth-pop::backdrop{background:rgba(47,47,24,.45)}
.birth-pop form{width:min(420px,100%);background:#fff;border-radius:24px;padding:28px 24px;box-shadow:0 24px 60px rgba(47,47,24,.2)}
.birth-pop h2{margin:0 0 8px;font:500 26px/1.15 var(--f-sans);letter-spacing:-.03em;color:var(--ink,#2f2f18)}
.birth-pop p{margin:0 0 16px;color:var(--ink-2,#57563f);font-size:15px;line-height:1.5}
.birth-pop label{display:block;margin:0 0 6px;font-size:13px;font-weight:600}
.birth-pop input[type=date]{width:100%;height:48px;border:1px solid var(--line,#e6e3d8);border-radius:14px;padding:0 14px;font:400 16px var(--f-sans);background:#fff}
.birth-pop-actions{display:flex;gap:10px;margin-top:18px}
.birth-pop-actions .btn{flex:1}