/* Shared responsive layer — loaded last on every frontend page. */
html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; overflow-x: clip; }
main, section, article, aside, header, footer, nav, form, dialog, div { min-width: 0; }
img, video, canvas, svg { max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea, a { touch-action: manipulation; }
input, select, textarea { max-width: 100%; }
dialog { max-width: calc(100vw - 24px); }

.registration-mobile-help { display: none; }
@media (max-width: 768px) {
  #register-panel .auth-form { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #register-panel .auth-field, #register-panel .verification-row { min-width: 0; }
  #register-panel .verification-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #register-panel .auth-field input { min-width: 0; font-size: 16px; min-height: 48px; }
  #register-panel #send-verification { justify-self: start; max-width: 100%; min-height: 44px; padding: 10px 14px; font-size: .875rem; white-space: normal; }
  #register-panel .registration-mobile-help { display: block; overflow-wrap: anywhere; line-height: 1.6; }
  #register-panel .registration-mobile-help:empty { display: none; }
  #register-panel #verification-code { max-width: 100%; width: 12rem; padding: 12px; border: 1px solid var(--line); font-size: 1.25rem; letter-spacing: .25em; font-variant-numeric: tabular-nums; }
  #register-panel input:focus-visible, #register-panel button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
}
@media (max-width: 1024px) {
  button, input:not([type="checkbox"]):not([type="radio"]), select, textarea, .button, .text-link, summary { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
  .nav-links a, .footer-column a { min-height: 44px; }
  .container { width: 100%; padding-inline: 20px; }
  .section { padding-block: clamp(72px, 9vw, 96px); }
  .logo { width: 112px; height: 46px; flex: 0 0 auto; }
  .hero { min-height: auto; padding-top: 132px; padding-bottom: 88px; }
  .hero::before { background-image: url("assets/hero-mountain-hd.png"); background-size: min(90vw, 920px) auto; }
  .membership-inner, .tea-quiz-intro, .tea-quiz-result { grid-template-columns: 1fr; gap: 44px; }
  .carousel-slide { grid-template-columns: 1fr; gap: 36px; }
  .collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 28px 16px; padding-bottom: 0; }
  .collection-image { aspect-ratio: .66; }
  .footer-main { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 52px 34px; }
  .footer-column a { display: inline-flex; align-items: center; min-height: 44px; }
  .product-hero, .destination-hero { padding-top: 142px; }
  .catalog-toolbar { top: 81px; }
  .product-grid, .favourites-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detail-layout { grid-template-columns: 1fr; gap: 46px; }
  .detail-gallery { position: static; }
  .recommendation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; }
  .auth-shell { grid-template-columns: 1fr; gap: 48px; }
  .dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-membership-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .checkout-layout { grid-template-columns: 1fr; gap: 38px; }
  .order-summary { position: static; }
  .information-hero { grid-template-columns: 1fr; gap: 28px; }
  .information-layout { grid-template-columns: minmax(170px, .4fr) 1fr; gap: 55px; }
}

@media (max-width: 768px) {
  .container { width: 100%; padding-inline: 16px; }
  .section { padding-block: 72px; }
  h1, .product-hero h1, .destination-hero h1, .information-hero h1 { overflow-wrap: normal; word-break: normal; hyphens: none; font-size: clamp(2.75rem, 11vw, 5rem); line-height: .96; }
  .hero-actions { flex-wrap: wrap; row-gap: 20px; }
  .membership-grid { grid-template-columns: 1fr 1fr; }
  .slide-image { height: min(78vw, 500px); }
  .tea-quiz-options { grid-template-columns: 1fr; }
  .tea-quiz-option { min-height: 88px; }
  .tea-result-mark { min-height: 230px; }
  .product-intro { align-items: flex-start; flex-direction: column; }
  .catalog-toolbar { gap: 20px; padding-block: 14px; scrollbar-width: thin; }
  .filter, .subfilter, .type-filter { min-height: 44px; padding-block: 10px; }
  .subcategory-toolbar, .type-toolbar { gap: 14px; }
  .quick-view-dialog[open] { width: calc(100% - 24px); max-height: calc(100dvh - 24px); grid-template-columns: 1fr; overflow-y: auto; }
  .dialog-image { min-height: min(55vh, 420px); }
  .dialog-copy { padding: 34px 28px; }
  .cart-drawer, .global-cart { width: min(430px,100%); padding: 24px; }
  .search-panel, .global-search { max-height: 100dvh; overflow-y: auto; padding: 24px 0; }
  .back-row { padding-top: 112px; }
  .purchase-row { grid-template-columns: 112px 1fr; }
  .image-lightbox { width: calc(100% - 20px); max-height: calc(100dvh - 20px); padding: 12px; }
  .image-lightbox .lightbox-media { height: min(76dvh,700px); }
  .account-dialog, .footer-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
  body.is-authenticated .member-dashboard { padding-top: 82px; }
  body.is-authenticated .dashboard-top { top: 81px; }
  .wallet-voucher { grid-template-columns: 92px 1fr auto; }
  .checkout-heading { grid-template-columns: 1fr; gap: 24px; }
  .checkout-heading > .section-number, .checkout-heading > h1, .checkout-heading > p:last-child { grid-column: 1; grid-row: auto; }
  .balance-option { grid-template-columns: minmax(0,1fr) minmax(210px,.75fr); gap: 16px; }
  .information-layout { grid-template-columns: 1fr; }
  .information-index { position: static; }
}

@media (max-width: 430px) {
  :root { --mobile-gutter: 20px; }
  .balance-option { grid-template-columns: 1fr; }
  .container { width: 100%; padding-inline: var(--mobile-gutter); }
  body { font-size: 15px; line-height: 1.65; }
  .nav { height: 74px; }
  .logo { width: 100px; height: 42px; }
  .hero { padding-top: 112px; padding-bottom: 68px; }
  .hero::before { background-image: url("assets/hero-mountain-source.png"); background-size: 118vw auto; }
  h1, .hero h1, .product-hero h1, .destination-hero h1, .information-hero h1 { font-size: clamp(2.35rem, 12.5vw, 3.35rem); line-height: .98; }
  .hero-intro { margin-top: 24px; font-size: 1rem; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 14px; margin-top: 28px; }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-link { width: max-content; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }
  .section { padding-block: 62px; }
  .membership { padding-block: 58px; }
  .membership-heading { padding-right: 0; }
  .membership-heading h2, .tea-quiz-intro h2 { font-size: clamp(2.35rem, 12vw, 3.25rem); }
  .membership-grid { grid-template-columns: 1fr; }
  .membership-item { min-height: auto; padding: 24px 20px; }
  .about.section { padding-block: 66px; }
  .section-heading { margin-bottom: 42px; }
  .carousel-slide { gap: 28px; }
  .slide-image { height:min(var(--carousel-mobile-image-height,320px),88vw,560px); }
  .slide-copy h3 { font-size: clamp(2.15rem, 11vw, 3.1rem); }
  .carousel-controls { justify-content: space-between; }
  .carousel-arrow { width: 44px; height: 44px; }
  .carousel-dot { width:44px; height:44px; padding:0; background:linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25)) center/28px 2px no-repeat; }
  .carousel-dot.active { width:44px; background:linear-gradient(#f5f4ef,#f5f4ef) center/38px 2px no-repeat; }
  .collections-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 12px; }
  .collection-image { aspect-ratio: .62; }
  .collection-name { min-height: 44px; margin-top: 8px; display: inline-flex; align-items: center; }
  .shop-all-link { min-height: 44px; display: inline-flex; align-items: center; }
  .tea-quiz { padding: 28px 0 72px; }
  .tea-quiz-intro, .tea-quiz-result { padding-block: 38px; gap: 30px; }
  .tea-quiz-progress { grid-template-columns: 96px 1fr; gap: 14px; }
  .tea-quiz-question { margin: 36px 0 32px; }
  .tea-quiz-question h3 { font-size: clamp(2rem,10vw,2.8rem); }
  .tea-quiz-option { min-height: 84px; padding: 17px; }
  .tea-result-actions { align-items: stretch; flex-direction: column; gap: 4px; }
  .tea-result-actions .button { width: 100%; }
  .site-footer { padding-top: 62px; }
  .footer-main { grid-template-columns: 1fr; gap: 32px; padding-bottom: 54px; }
  .footer-column h2 { margin-bottom: 12px; }
  .footer-column li + li { margin-top: 0; }
  .footer-bottom { gap: 22px; }
  .footer-commerce, .payment-methods { max-width: 100%; flex-wrap: wrap; }
  .product-hero, .destination-hero { padding-top: 116px; padding-bottom: 48px; }
  .catalog { padding-bottom: 82px; }
  .catalog-toolbar { top: 73px; margin-inline: calc(var(--mobile-gutter) * -1); padding-inline: var(--mobile-gutter); }
  .catalog-sort { margin-left: auto; }
  .product-grid, .favourites-grid { grid-template-columns: 1fr; gap: 46px; }
  .product-media { aspect-ratio:4/5; }.saved-image { aspect-ratio:.82; }
  .product-meta { gap: 12px; }
  .favourite-button, .remove-saved { width: 44px; height: 44px; top: 10px; right: 10px; }
  .subcategory-toolbar, .type-toolbar { align-items: stretch; flex-direction: column; }
  .subcategory-toolbar > div, .type-toolbar > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .subfilter, .type-filter { width:100%; }
  .quick-view-dialog[open] { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .dialog-image { min-height: 285px; }
  .dialog-copy { padding: 28px 20px; }
  .dialog-copy h2 { font-size: 2.4rem; }
  .cart-drawer, .global-cart { padding: 20px; }
  .global-search form, .search-inner { grid-template-columns: 1fr 44px; gap: 12px; }
  .global-search label, .search-inner label { grid-column: 1/-1; }
  .global-search input, .search-inner input { min-width:0; font-size:1.25rem; }
  .back-row { padding-top: 102px; }
  .detail-layout { padding-top: 24px; padding-bottom: 75px; gap: 34px; }
  .detail-copy h1 { font-size: clamp(2.65rem,13vw,3.5rem); }
  .purchase-row { grid-template-columns: 1fr; }
  .quantity-picker, .purchase-row button, .detail-buy-now { min-height: 48px; }
  .recommendations { padding-block: 70px; }
  .recommendation-heading { align-items:flex-start; flex-direction:column; gap:14px; }
  .recommendation-grid { grid-template-columns: 1fr; gap:32px; }
  .auth-shell { gap: 36px; padding-bottom: 80px; }
  .auth-panel { padding: 24px 20px; }
  .auth-form { grid-template-columns: 1fr; }
  .auth-field.full, .auth-submit { grid-column:auto; }
  .verification-row { grid-template-columns: 1fr; }
  .verification-row button { min-height:44px; }
  .account-benefits, .dashboard-grid, .dashboard-membership-grid { grid-template-columns: 1fr; }
  .dashboard-card.wide, .gift-card { grid-column:auto; }
  body.is-authenticated .member-dashboard { padding-top: 76px; }
  body.is-authenticated .dashboard-top { position:relative; top:auto; min-height:0; padding:20px 0; flex-direction:column; gap:18px; }
  body.is-authenticated .dashboard-actions { grid-template-columns:repeat(3,44px) 1fr; gap:8px; }
  .dashboard-icon { width:44px; height:44px; }
  .profile-list p { align-items:flex-start; flex-direction:column; gap:4px; }
  .profile-list strong { text-align:left; overflow-wrap:anywhere; }
  .gift-form { grid-template-columns:1fr; }
  .gift-form textarea, .gift-form .button { grid-column:auto; }
  .account-dialog, .footer-dialog { width: calc(100% - 12px); max-height: calc(100dvh - 12px); }
  .account-dialog-header, .account-dialog-body, .footer-dialog-header, .footer-dialog-body { padding: 20px; }
  .wallet-voucher { grid-template-columns: 72px 1fr; gap: 14px; padding:14px; }
  .wallet-voucher > button { grid-column:2; width:max-content; min-height:44px; }
  .share-methods { grid-template-columns:1fr; }
  .setting-link, .setting-toggle-row { min-height:52px; }
  .checkout-main { padding-top: 112px; padding-bottom: 80px; }
  .checkout-panel, .order-summary { padding: 22px 18px; }
  .checkout-fields { grid-template-columns: 1fr; }
  .checkout-fields label.full { grid-column:auto; }
  .checkout-vouchers { grid-template-columns:1fr; }
  .checkout-voucher { min-height:100px; }
  .balance-entry { grid-template-columns:auto minmax(0,1fr) auto; }
  .balance-entry button { min-height:44px; }
  .information-main { padding-top: 112px; padding-bottom: 80px; }
  .information-block { padding-bottom:34px; margin-bottom:34px; }
  .information-block h2 { font-size:clamp(2rem,10vw,2.8rem); }
  .footer-form { grid-template-columns:1fr; }
  .footer-form label.full, .footer-form .button, .footer-form-note { grid-column:auto; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height:44px; font-size:16px; }
  button, .button, .text-link, summary { min-height:44px; }
}

@media (max-width: 340px) {
  :root { --mobile-gutter: 16px; }
  .logo { width: 92px; height: 39px; }
  h1, .hero h1, .product-hero h1, .destination-hero h1, .information-hero h1 { font-size: 2.25rem; }
  .collections-grid { grid-template-columns: 1fr; }
  .payment-methods span { min-width: 0; }
  body.is-authenticated .dashboard-actions { grid-template-columns:repeat(3,44px); }
  body.is-authenticated .dashboard-actions .signout-button { grid-column:1/-1; justify-self:start; }
  .wallet-voucher { grid-template-columns:1fr; }
  .wallet-voucher-value { min-height:70px; border-right:0; border-bottom:1px dashed var(--line); }
  .wallet-voucher > button { grid-column:auto; }
}

@media (hover: none) and (pointer: coarse) {
  .collection-image > span { opacity:1; transform:none; align-content:end; padding-bottom:16px; }
  .collection-image::after { opacity:.14; }
  .button:hover, .membership-link:hover, .product-media:hover img, .recommendation-card:hover img { transform:none; }
}

/* Product purchase controls need a shrinkable fieldset and a full-width frequency picker. */
@media (max-width: 600px) {
  #purchase-mode-options { min-inline-size: 0; width: 100%; gap: 12px; margin-block: 24px; }
  #purchase-mode-options > label { min-width: 0; min-height: 48px; gap: 12px; line-height: 1.5; }
  #purchase-mode-options input[type="radio"] { flex: 0 0 auto; margin: 0; }
  #subscription-frequency-label { flex-direction: column; align-items: stretch; margin-top: 8px; }
  #subscription-frequency-label[hidden] { display: none; }
  #subscription-frequency { overflow: hidden; text-overflow: ellipsis; appearance: none; width: 100%; min-width: 0; margin: 0; padding: 12px 36px 12px 12px; font-size: 16px; background: linear-gradient(45deg, transparent 50%, currentColor 50%) right 18px center / 5px 5px no-repeat, linear-gradient(135deg, currentColor 50%, transparent 50%) right 13px center / 5px 5px no-repeat; }
  #subscription-summary { min-width: 0; padding: 16px 14px; font-size: .875rem; line-height: 1.65; overflow-wrap: anywhere; }
  #subscription-summary strong { font-size: 1rem; line-height: 1.5; }
  #subscription-summary .subscription-summary-line { display: block; margin-top: 12px; }
  #subscription-summary .subscription-summary-line:empty { display: none; }
}

/* Homepage mobile hierarchy: use the full text column and clear the fixed header. */
@media (max-width: 600px) {
  #home { padding-top: 120px; padding-bottom: 64px; }
  #home h1 { max-width: 100%; font-size: clamp(2.25rem, 10.5vw, 3rem); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
  #home .hero-intro { margin-top: 24px; }
  #home .hero-actions { margin-top: 24px; gap: 14px; }
  #membership { padding-block: 56px; }
  #membership .membership-inner { gap: 32px; }
  #membership .membership-heading { padding-right: 0; }
  #membership .membership-heading h2 { max-width: 100%; margin-top: 16px; font-size: clamp(2rem, 8.5vw, 2.5rem); line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
  #membership .membership-heading > p:not(.section-number) { margin-top: 20px; }
  #membership .membership-link { min-width: 0; max-width: 100%; margin-top: 24px; gap: 16px; }
  #membership .membership-item h3 { margin-top: 18px; }
  #membership .membership-item p { margin-top: 12px; }
}

/* Editorial headings keep natural word boundaries; only data-like content may break anywhere. */
.journal-hero h1,.guide h2,.information-hero h1,.information-block h2,.cms-dynamic-copy h2,
.detail-copy h1,.product-hero h1,.destination-hero h1,.section-heading h2{
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
}
.guide,.guide>*,.guide article,.information-layout,.information-content,.cms-dynamic-section>*{min-width:0}
.guide img,.information-content img,.cms-dynamic-section img{display:block;max-width:100%;height:auto}
.guide table{max-width:100%}
@media(max-width:760px){
  .guide{grid-template-columns:minmax(0,1fr)}
  .guide>header,.guide>article{width:100%;max-width:100%}
  .guide h2{font-size:clamp(2.2rem,11.5vw,3.4rem);line-height:.98}
  .journal-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
}

/* Real-device audit fixes: touch widths, off-canvas containment and unified navigation. */
@media (max-width:1024px){
  body.nav-open{overflow:hidden}
  button:not(.button),.filter,.subfilter,.type-filter,.carousel-arrow,.carousel-dot,.favourite-button,.remove-saved,.global-cart-close,.dialog-close,.footer-dialog-close{min-width:44px}
  .logo{min-width:100px;min-height:44px}
  .collection-name,.shop-all-link,.credits-shop-link,.recommendation-heading a,.product-detail-footer a,.product-footer a,.information-index a,.footer-column a,.footer-bottom a{min-width:44px;min-height:44px;display:inline-flex;align-items:center}
  .carousel-arrow{width:44px;height:44px}
  .carousel-dot{width:44px;height:44px;padding:0;background:linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25)) center/28px 2px no-repeat}
  .carousel-dot.active{width:44px;background:linear-gradient(#f5f4ef,#f5f4ef) center/38px 2px no-repeat}
  .global-cart:not(.open),.cart-drawer:not(.open){display:none}
  .global-cart.open,.cart-drawer.open{display:flex}
}
@media(max-width:340px){.logo{width:104px;height:44px}}

@media(max-width:1024px){
  html{max-width:100%;overflow-x:hidden}
  .nav-links:not(.open),.global-search:not(.open),.search-panel:not(.open){overflow:hidden}
  .global-search:not(.open),.search-panel:not(.open){display:none}
  .global-search.open,.search-panel.open{display:block}
  .nav-links .store-badge,.nav-links .icon-count,.nav-links .detail-cart-count{top:0;right:0}
  .recommendation-card h2 a{min-width:44px;min-height:44px;display:inline-flex;align-items:center}
}

@media(max-width:1024px){.order-summary::after{display:none}}

@media(max-width:430px){body.is-authenticated .member-dashboard{padding-top:96px}}

@media(max-width:768px){
  .catalog-toolbar{display:flex;flex-wrap:wrap;overflow-x:visible;gap:10px 16px}
  .catalog-sort{position:static!important;margin-left:auto}
}
@media(max-width:430px){
  .catalog-sort{width:100%;justify-content:space-between}
  .catalog-sort select{margin-left:auto}
}

/* Published CMS appearance values remain authoritative for dynamic sections. */
.cms-dynamic-section[data-cms-styled="true"]{margin-block:0;padding-block:var(--cms-section-spacing,70px);overflow:visible}.cms-dynamic-section[data-cms-styled="true"] .section-number{color:var(--cms-accent,currentColor)}.cms-dynamic-section[data-cms-styled="true"] .button{background:var(--cms-accent,var(--ink))}
.cms-dynamic-section[data-cms-styled="true"] .cms-dynamic-copy{overflow-wrap:normal;word-break:normal}
.cms-dynamic-section[data-cms-styled="true"] .cms-dynamic-copy h2{font-family:var(--cms-heading-font,inherit);font-size:var(--cms-heading-size,64px);font-weight:var(--cms-heading-weight,inherit);line-height:var(--cms-heading-line-height,1.05);overflow-wrap:normal;word-break:normal}
.cms-dynamic-section[data-cms-styled="true"] .cms-dynamic-copy p,.cms-dynamic-section[data-cms-styled="true"] .cms-dynamic-copy td,.cms-dynamic-section[data-cms-styled="true"] .cms-dynamic-copy th{font-family:var(--cms-body-font,inherit);font-size:var(--cms-body-size,16px);font-weight:var(--cms-body-weight,inherit);line-height:var(--cms-body-line-height,1.6)}
@media(max-width:760px){.cms-dynamic-section[data-cms-styled="true"]{padding-block:var(--cms-mobile-section-spacing,48px)}.cms-dynamic-section[data-cms-styled="true"] .cms-dynamic-copy h2{font-size:var(--cms-mobile-heading-size,40px)}.cms-dynamic-section[data-cms-styled="true"] .cms-dynamic-copy p,.cms-dynamic-section[data-cms-styled="true"] .cms-dynamic-copy td,.cms-dynamic-section[data-cms-styled="true"] .cms-dynamic-copy th{font-size:var(--cms-mobile-body-size,16px)}}