button, input, select, textarea { font: inherit; }

.reveal-delay-1 { --reveal-delay: 90ms; }
.reveal-delay-2 { --reveal-delay: 170ms; }
.reveal-delay-3 { --reveal-delay: 260ms; }
.reveal-delay-4 { --reveal-delay: 320ms; }
.reveal-delay-5 { --reveal-delay: 380ms; }

:is(.button, .cart-button, .product-card-actions button, .chip, .model-tabs button, .shipping-card button, .coupon-field button, .solid-link, .line-link)::before { z-index: 0; }

.catalog-is-hidden { display: none !important; }
.product-card-actions button { min-width: 0; }
.product-card-actions .detail-product span { line-height: 1; }

.cart-drawer .cart-item { grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; }
.cart-drawer .cart-item img { width: 4.5rem; height: 5rem; object-fit: cover; }
.cart-drawer .cart-item strong, .cart-drawer .cart-item small { display: block; }
.cart-drawer .cart-item small { color: var(--muted); }
.cart-drawer .cart-item > button { width: 32px; height: 32px; padding: 0; color: #9f3d33; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.cart-drawer .cart-item > button:hover, .cart-drawer .cart-item > button:focus-visible { color: white; background: #9f3d33; }

.checkout-dialog { width: min(94rem, calc(100% - 2rem)); max-height: calc(100svh - 2rem); padding: 0; color: var(--ink); border: 0; border-radius: .45rem; background: var(--paper); box-shadow: var(--shadow); }
.checkout-dialog::backdrop { background: rgba(5,23,20,.65); backdrop-filter: blur(3px); }
.checkout-shell { padding: 1.5rem; }
.checkout-head { position: sticky; z-index: 3; top: -1.5rem; margin: -1.5rem -1.5rem 0; padding: 1.5rem; background: rgba(247,248,245,.96); backdrop-filter: blur(14px); }
.checkout-head button { width: 44px; height: 44px; padding: 0; border: 0; background: none; font-size: 1.8rem; cursor: pointer; }
.checkout-columns { margin-top: 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.checkout-section { min-width: 0; padding: 1.3rem; display: flex; flex-direction: column; gap: .8rem; background: white; border: 1px solid var(--line); border-radius: .45rem; }
.checkout-section h3 { margin: 0 0 .2rem; color: var(--forest); font-size: 1.05rem; }
.checkout-section > label:not(.terms), .card-fields label { display: grid; gap: .3rem; color: var(--muted); font-size: .78rem; font-weight: 600; }
.checkout-section input, .checkout-section select { width: 100%; min-height: 44px; padding: .6rem .7rem; color: var(--ink); border: 1px solid var(--line); border-radius: .35rem; background: white; }
.field-pair { display: grid; grid-template-columns: 1fr .4fr; gap: .6rem; }
.text-action { justify-self: start; padding: .6rem 0; color: var(--teal); border: 0; background: transparent; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.shipping-options { display: grid; gap: .5rem; }
.shipping-option { padding: .75rem; display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; color: var(--forest); border: 1px solid #cbd9d1; background: #eaf2ef; font-size: .8rem; }
.shipping-option input { width: auto; min-height: 0; }
.checkout-bonus { padding: 1rem; color: var(--forest); background: #f1efdf; border: 1px solid #e5e0ca; border-radius: .45rem; }
.checkout-bonus p { margin: .35rem 0 0; color: #53615b; font-size: .82rem; }
.checkout-total { padding: 1rem 0; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); font-size: 1.05rem; }
.card-fields { padding: 1rem; display: grid; gap: .8rem; background: #f2f4f0; border: 1px solid var(--line); }
.payment-mode, .form-message { color: var(--muted); font-size: .78rem; }
.payment-result { margin-top: 1rem; padding: 1rem; display: grid; justify-items: start; gap: .8rem; color: white; background: var(--forest); }
.payment-result img { width: 12rem; height: 12rem; background: white; }
.payment-result a, .payment-result button { padding: .7rem 1rem; color: var(--forest); border: 0; border-radius: 99px; background: #aee9cf; font-weight: 700; cursor: pointer; }
.terms { display: flex; gap: .6rem; align-items: start; font-size: .75rem; }
.terms input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--forest); }
.terms a { color: var(--teal); text-decoration: underline; }

.product-detail { padding: 9rem clamp(1.25rem, 6vw, 7rem) clamp(5rem, 9vw, 9rem); }
.model-modal-body .product-detail { padding-top: clamp(2rem, 4vw, 4rem); }
.model-modal-body .back-link { display: none; }
.back-link { margin-bottom: 2rem; display: inline-block; color: var(--teal); font-weight: 700; }
.product-detail-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.product-detail-image { min-height: 38rem; overflow: hidden; background: #dfe6df; }
.product-detail-image img { width: 100%; height: 100%; object-fit: cover; }
.product-detail-copy { padding-block: clamp(1rem, 3vw, 3rem); display: flex; align-items: flex-start; flex-direction: column; }
.product-detail-copy h1 { max-width: 760px; margin-bottom: 1rem; color: var(--forest); font-size: clamp(3rem, 5.4vw, 5.8rem); }
.lead { color: #52605b; font-size: clamp(1rem, 1.3vw, 1.2rem); }
.detail-price { margin: 1.2rem 0; display: grid; }
.detail-price small { color: var(--muted); text-decoration: line-through; }
.detail-price strong { color: var(--forest); font: 700 2rem Poppins, Arial, sans-serif; }
.product-detail-copy dl { width: 100%; margin: 1.5rem 0 2rem; border-top: 1px solid var(--line); }
.product-detail-copy dl div { padding: .8rem 0; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); }
.product-detail-copy dd { margin: 0; text-align: right; }
.composition { padding: clamp(6rem, 9vw, 9rem) 0; }
.composition .section-heading h2 span { color: #118970; background: linear-gradient(105deg,#0b725d 4%,#2ba276 49%,#a8bd80 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.component-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.component-grid article { padding: 1.3rem; display: flex; gap: 1rem; border: 1px solid var(--line); background: white; }
.component-icon { width: 3rem; height: 3rem; flex: 0 0 3rem; display: grid; place-items: center; color: #bfe9d4; background: var(--forest); }
.component-icon svg { width: 2rem; height: 2rem; }
.component-grid h3 { margin-bottom: .35rem; }
.component-grid p { color: var(--muted); }
.component-choice { margin-top: .75rem; display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; color: var(--teal); font-size: .82rem; font-weight: 700; }
.component-choice select { min-width: 4.5rem; padding: .45rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--paper); }
.detail-bonus { padding: clamp(2rem, 5vw, 4rem); color: white; background: var(--forest); }
.detail-bonus h2 { font-size: clamp(2rem, 4vw, 4rem); }
.detail-bonus p:last-child { max-width: 58rem; color: #bfd0ca; }

.auth-page { min-height: 75vh; padding: 11rem clamp(1.25rem, 6vw, 7rem) 7rem; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); }
.auth-page h1, .account-page h1 { color: var(--forest); font-size: clamp(2.8rem, 6vw, 6rem); }
.auth-page form { padding: 2rem; display: grid; align-self: start; gap: 1rem; border: 1px solid var(--line); background: white; }
.auth-page label { display: grid; gap: .35rem; font-weight: 600; }
.auth-page input { padding: .8rem; border: 1px solid var(--line); border-radius: .35rem; }
.auth-page form a { color: var(--teal); font-weight: 700; }
.form-error { padding: .75rem; color: #781f1f; background: #fbe8e8; }
.account-page, .legal-page, .error-page { min-height: 75vh; padding: 11rem clamp(1.25rem, 6vw, 7rem) 7rem; }
.account-page header { margin-bottom: 3rem; display: flex; align-items: end; justify-content: space-between; }
.account-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 2rem; }
.account-grid > section, .account-grid > aside { padding: 2rem; border: 1px solid var(--line); background: white; }
.legal-page { max-width: 78rem; margin: 0 auto; }
.legal-page > header { max-width: 58rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.legal-page h1, .error-page h1 { color: var(--forest); font-size: clamp(2.8rem, 6vw, 6rem); }
.legal-sections { display: grid; grid-template-columns: 1fr 1fr; }
.legal-sections section { min-height: 14rem; padding: 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.legal-sections section:nth-child(even) { border-right: 0; }
.order-row { padding: 1rem 0; display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; border-top: 1px solid var(--line); }
.member-content-list { display: grid; gap: 1rem; }
.member-content-list article { padding-top: 1rem; border-top: 1px solid var(--line); }

@media (max-width: 1050px) {
  .checkout-columns { grid-template-columns: 1fr 1fr; }
  .checkout-summary { grid-column: 1 / -1; }
  .product-detail-grid { grid-template-columns: 1fr; }
  .product-detail-image { min-height: 0; height: min(38rem, 68vh); }
  .component-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .product-card-actions { grid-template-columns: 1fr 1fr; }
  .checkout-dialog { width: 100%; max-width: none; max-height: 100svh; margin: 0; border-radius: 0; }
  .checkout-shell { padding: 1rem; }
  .checkout-head { top: -1rem; margin: -1rem -1rem 0; padding: 1rem; }
  .checkout-columns { grid-template-columns: 1fr; }
  .checkout-summary { grid-column: auto; }
  .field-pair { grid-template-columns: 1fr; }
  .product-detail { padding: 7rem 1.25rem 5rem; }
  .product-detail-image { height: min(28rem, 62vh); }
  .component-grid { grid-template-columns: 1fr; }
  .auth-page, .account-grid, .legal-sections { grid-template-columns: 1fr; }
  .auth-page, .account-page, .legal-page, .error-page { min-height: 0; padding: 7rem 1.25rem 4.5rem; }
  .auth-page { gap: 2rem; }
  .auth-page form, .account-grid > section, .account-grid > aside { padding: 1.25rem; }
  .account-page header { align-items: start; gap: 1rem; flex-direction: column; }
  .legal-sections section { min-height: 0; padding: 1.5rem 0; border-right: 0; }
  .order-row { grid-template-columns: 1fr; }
}