/* Mobile refinements shared by the preview and WooCommerce theme. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body:has(#modal[open]){overflow:hidden}
.mobile-region{display:none}

@media(max-width:1150px){
  .header .icon{width:44px;height:44px;flex-shrink:0}
  .header #navigation{overscroll-behavior:contain;scrollbar-width:thin}
  .header #navigation>a,.header #navigation>.nav-link,.category-menu>summary{min-height:48px;display:flex;align-items:center;font-size:14px}
  .header nav .category-dropdown a{min-height:44px;display:flex;align-items:center;font-size:13px}
  .header #navigation .mobile-region{display:none}
  body:has(#navigation.open){overflow:hidden}
}

@media(max-width:1000px){
  /* Keep copy in normal flow, above the dedicated mobile artwork. */
  .hero-carousel .hero:not(.hero-artwork){display:flex;flex-direction:column;height:auto;min-height:0;max-height:none}
  .hero-carousel .hero-content{position:relative;inset:auto;order:0;width:100%;max-width:none;padding:36px 6% 24px}
  .hero-carousel .hero-title{font-size:clamp(36px,6.8vw,60px);margin-bottom:18px}
  .hero-carousel .hero-copy{font-size:15px;max-width:520px;margin-bottom:22px}
  .hero-carousel .hero-slide:not(.hero-artwork)>picture{position:relative;inset:auto;order:1;display:block;width:100%;height:clamp(260px,43vw,360px);flex-shrink:0}
  .hero-carousel .hero-slide:not(.hero-artwork) picture img{object-position:center 64%}
  .hero-carousel .hero:not(.hero-artwork) .hero-shade{display:none}
  .hero-carousel .hero-bottom{z-index:1;bottom:20px;max-width:44%;text-shadow:0 1px 8px #faf8f2}
  .hero-carousel .hero-artwork{height:auto;min-height:0;aspect-ratio:1/1}
  .hero-carousel .hero-artwork picture{inset:0;height:100%}
  .hero-controls>button{min-width:44px;min-height:44px}
  .hero-controls .promo-dots button{min-width:24px;min-height:44px;border:0;border-radius:0;background:none;position:relative}
  .hero-controls .promo-dots button[aria-pressed="true"]{background:none}
  .hero-controls .promo-dots button:after{content:"";position:absolute;width:7px;height:7px;border:1px solid currentColor;border-radius:50%;inset:0;margin:auto}
  .hero-controls .promo-dots button[aria-pressed="true"]:after{background:currentColor}
  .hero-controls .promo-play{min-height:44px}
}

@media(max-width:800px){
  .header #navigation .mobile-region{display:flex;border-top:1px solid var(--line);margin-top:10px}
  .header{height:72px;padding:0 16px;gap:8px}
  .header .wordmark{font-size:clamp(28px,7.8vw,38px)}
  .header-actions{gap:2px}
  .bag-button span{top:1px;right:0}
  .announcement{justify-content:space-between;gap:16px;padding:9px 16px;font-size:9px;line-height:1.5;letter-spacing:.04em}
  .announcement>span{max-width:50%}
  .announcement-right{display:inline;text-align:right;max-width:50%}
  .section-heading{align-items:flex-start;flex-wrap:wrap}
  .section-heading .section-intro{max-width:100%}
}

@media(max-width:700px){
  :root{--mobile-bar-height:68px}
  html{scroll-padding-top:88px;scroll-padding-bottom:calc(var(--mobile-bar-height) + 16px + env(safe-area-inset-bottom))}
  .section{padding:44px 20px}
  .eyebrow{font-size:10px;letter-spacing:.12em}
  .header #navigation{padding:12px 20px calc(20px + env(safe-area-inset-bottom));max-height:calc(100dvh - 192px - env(safe-area-inset-bottom))}
  .category-dropdown{max-height:none;overflow:visible}
  .hero-carousel .hero-content{padding:30px 20px 20px}
  .hero-carousel .hero-title{font-size:clamp(32px,9.5vw,54px);line-height:1.04}
  .hero-carousel .eyebrow{font-size:9px;margin-bottom:16px;max-width:32em}
  .hero-carousel .hero-copy{font-size:14px;line-height:1.6;margin-bottom:20px}
  .hero-carousel .hero-links{gap:10px 16px}
  .hero-carousel .hero-links .button{padding:14px 18px;gap:18px;min-height:48px}
  .hero-carousel .hero-links .text-link{font-size:11px;min-height:44px;gap:9px;padding:0}
  .hero-carousel .hero-slide:not(.hero-artwork)>picture{height:clamp(240px,64vw,340px)}
  .hero-carousel .hero-bottom{font-size:8px;left:20px;bottom:18px}
  .hero-controls{right:12px;bottom:10px;padding:2px 5px;gap:0}
  .hero-controls .promo-dots{gap:0}
  .combined-collection{padding-top:36px}
  .combined-collection .section-heading{margin-bottom:22px}
  .collection-switcher h2{font-size:clamp(34px,9vw,44px);margin-bottom:8px}
  .collection-switcher h2 button{min-height:44px}
  .collection-all-link{min-height:44px;font-size:clamp(22px,5.8vw,30px);gap:16px}
  .catalogue-tools{margin-top:20px}
  .filters{gap:8px;padding:4px 2px 10px;scroll-padding-inline:2px;overscroll-behavior-x:contain;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filter{min-height:44px;font-size:12px;padding:10px 16px}
  .catalogue-search{padding:0 0 8px;gap:12px}
  .catalogue-search input{font-size:16px;min-height:44px;padding:8px 0}
  .field-select{font-size:12px;gap:10px;margin-bottom:18px}
  .field-select select{font-size:16px;min-height:48px;padding:12px 16px}
  .preview-note{font-size:10px;line-height:1.6;margin-bottom:20px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  .product-heading{margin-top:12px}
  .product-heading h3{font-size:18px;letter-spacing:-.03em;overflow-wrap:anywhere}
  .product-heading .product-link{min-height:44px;display:flex;align-items:center}
  .product-info{font-size:11px;line-height:1.5;letter-spacing:0;gap:4px;margin:6px 0 12px;min-height:34px;align-content:flex-start}
  .product-price{font-size:15px;margin-bottom:12px}
  .price-pending{font-size:12px;line-height:1.6}
  .price-pending small{font-size:10px;margin-left:0;display:inline-block}
  .product-card .basket-add{min-height:48px;padding:12px 8px;font-size:12px;white-space:normal;line-height:1.4;flex:none;width:100%}
  .product-card>.basket-add{margin-top:auto}
  .product-card .purchase-row{gap:8px}
  .product-card .quantity-control,.quantity-control{height:46px;min-width:134px}
  .product-card .quantity-control button,.quantity-control button{min-width:44px;width:44px;height:44px}
  .quantity-control input{font-size:16px;min-height:44px;min-width:40px}
  .product-image .quick-view{min-height:44px;right:6px;bottom:6px;padding:10px 12px;font-size:11px}
  .combined-collection .product-image img{padding:6px}
  .collection-foot{gap:16px;align-items:flex-start}
  .collection-foot>span{font-size:12px;padding-top:12px}
  .collection-foot .text-link{min-height:44px;font-size:12px}
  .research-category-section{padding:44px 20px 28px}
  .research-category-grid{gap:16px}
  .research-category-heading h2{font-size:clamp(35px,9vw,46px)}
  .research-category-heading>p{font-size:13px;margin-top:18px}
  .research-category-card{aspect-ratio:auto;height:clamp(300px,80vw,380px);min-height:0;width:100%;min-width:0}
  .research-category-number{left:24px;top:25px}
  .research-category-copy{left:24px;right:24px;bottom:26px}
  .research-category-copy h3{font-size:clamp(28px,8vw,44px);max-width:calc(100% - 34px);line-height:1.07}
  .research-category-copy>p{font-size:10px;letter-spacing:.13em;margin-bottom:14px}
  .research-category-arrow{width:38px;height:38px;right:22px;bottom:27px}
  .research-category-footer>p{font-size:11px}
  .trust-strip{padding:22px 20px;gap:20px;font-size:11px;line-height:1.5}
  .trust-strip>span{min-width:0;gap:8px}
  .concentration-heading{display:block}
  .concentration-heading h2{font-size:38px}
  .concentration-heading p:not(.eyebrow){font-size:14px}
  .calc-symbols{display:flex;gap:10px;padding:22px 0 0;justify-content:flex-start}
  .calc-symbols>span{width:40px;height:40px;font-size:26px}
  .calc-symbols .calc-symbol-divide,.calc-symbols .calc-symbol-equals{display:grid;width:16px;height:auto;font-size:20px}
  .concentration-workspace{padding:10px;gap:12px}
  .calc-input-card{padding:20px 16px}
  .calc-presets>span{width:100%;font-size:11px}
  .calc-presets button{min-height:44px;min-width:52px;font-size:12px;padding:10px}
  .calc-unit-label select{min-height:44px;font-size:16px}
  .calc-reset,.calc-copy{min-height:44px;font-size:12px}
  .calc-input-footer p{font-size:11px}
  .calc-live{font-size:10px;letter-spacing:.08em}
  .calc-result-top{gap:8px}
  .concentration-result{padding:22px 18px;min-height:360px}
  .calc-result-label{margin-top:24px}
  .calc-output{min-height:150px}
  .calc-section-footer p{font-size:12px}
  .calc-section-footer .text-link{min-height:44px;font-size:12px}
  .documents h2,.faq h2{font-size:38px}
  .document-panel{padding:24px 20px}
  .document-panel label{font-size:12px}
  .coa-input input{font-size:16px;min-height:44px}
  .coa-input button{width:44px;height:44px}
  .document-hint{font-size:12px!important}
  .faq-list details{padding:12px 0}
  .faq-list summary{display:flex;align-items:center;min-height:48px;font-size:14px;padding-right:30px}
  .faq-list summary:after{top:12px}
  .faq-list p{font-size:14px;margin-right:0}
  .wholesale-teaser p{font-size:14px}
  .brand-ending{align-items:flex-start;flex-direction:column;padding:36px 20px;gap:24px}
  .brand-ending p{font-size:36px;max-width:none}
  .footer{padding:40px 20px calc(var(--mobile-bar-height) + 32px + env(safe-area-inset-bottom))}
  .footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .footer-links>div{gap:0;min-width:0;font-size:12px;line-height:1.5}
  .footer-links>div:last-child{grid-column:1/-1}
  .footer-links h3{margin-bottom:12px;font-size:11px}
  .footer-links a,.footer-links button{min-height:44px;display:flex;align-items:center;font-size:12px;line-height:1.5;padding:8px 0}
  .footer-links span,.footer-brand>span,.footer-bottom{font-size:11px;line-height:1.6}
  .footer-payments li{font-size:11px;padding:10px 12px}
  .store-policy-links ul{flex-wrap:wrap;gap:8px 18px}
  .store-policy-links a{display:inline-flex;align-items:center;min-height:44px}
  .mobile-shopbar{min-height:var(--mobile-bar-height);padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
  .mobile-shopbar a,.mobile-shopbar button{font-size:11px;gap:4px;min-height:56px}
  .mobile-shopbar svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  #toast{bottom:calc(var(--mobile-bar-height) + 16px + env(safe-area-inset-bottom));font-size:13px;padding:14px 20px;line-height:1.5}
  dialog,#modal.quick-view-dialog{width:calc(100% - 16px);max-width:100%;max-height:calc(100dvh - 16px);padding:12px 20px 24px;border-radius:18px;overscroll-behavior:contain;scroll-padding-block:64px 24px}
  #modal .modal-close{position:sticky;top:0;right:auto;margin:0 -6px 8px auto;width:44px;height:44px;min-height:44px;background:var(--paper);border:1px solid var(--line);border-radius:50%;z-index:5}
  .quick-view-dialog .modal-product{gap:24px}
  .quick-view-media{width:100%;max-width:360px;max-height:330px}
  .quick-view-dialog .modal-product h2{font-size:32px;overflow-wrap:anywhere}
  .modal-product p,.modal-product .product-description{font-size:14px}
  .modal-product .purchase-row{display:grid;grid-template-columns:134px minmax(0,1fr);gap:10px}
  .modal-product .quantity-control{width:134px;justify-content:space-between}
  .modal-product .quantity-control button{width:44px;min-width:44px}
  .modal-product .quantity-control input{width:44px;min-width:0;font-size:16px}
  .modal-product .basket-add{font-size:13px;padding:12px;min-height:48px;max-width:none}
  .purchase-dock{border-block:1px solid var(--line);background:var(--cream);padding:12px 0}
  .product-accordions summary{display:flex;align-items:center;min-height:44px;font-size:14px}
  .product-accordions p,.product-accordions a{font-size:13px}
  .modal-list h2,.region-content h2{font-size:32px;overflow-wrap:anywhere}
  .basket-item-name{flex-wrap:wrap;gap:8px}
  .basket-item-name .product-link{min-height:44px}
  .modal-list li .basket-remove{min-height:44px;padding:8px 0;font-size:12px}
  .basket-items li>.quantity-control{justify-content:space-between}
  .basket-items li>span{max-width:100%;overflow-wrap:anywhere}
  .region-content select,.customer-form input,.customer-form textarea,.customer-form select,.product-question-form input,.product-question-form textarea{font-size:16px;min-height:48px}
  .strength-option{font-size:16px;min-height:48px}
  .unit-offer-grid{gap:6px}
  .unit-option strong{font-size:13px}
  .unit-option small{font-size:11px}
  .unit-option>span:not(.unit-vials){font-size:11px}
  .unit-offer-note{font-size:12px}
  .age-gate{padding:24px;scroll-padding-top:24px}
  .age-gate h2{font-size:32px}
  .age-gate .wordmark{margin-bottom:22px}
  .age-confirm-label{font-size:14px;min-height:48px}
  .age-confirm-label input{width:22px;height:22px}
  .age-gate .research-use{font-size:12px}
  .age-leave{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:12px}
  .customer-page h1{font-size:38px;overflow-wrap:anywhere}
  .customer-form.wholesale-form{padding:22px 16px}
  .pmst-support{right:12px;bottom:calc(var(--mobile-bar-height) + 12px + env(safe-area-inset-bottom))}
  .pmst-chat-panel{width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 180px - env(safe-area-inset-bottom))}
  .pmst-chat-panel input{font-size:16px}
  .pmst-chat-topics button{min-height:44px;font-size:12px}
  .pmst-chat-heading button{min-width:44px;min-height:44px}
  .woocommerce div.product .product_title{font-size:36px;overflow-wrap:anywhere}
  .woocommerce div.product div.images,.woocommerce div.product div.summary{width:100%;float:none}
  .woocommerce .variations_form .variations select,.woocommerce .quantity .qty,.woocommerce form input.input-text,.woocommerce form textarea,.woocommerce select{font-size:16px;min-height:48px;max-width:100%}
  .woocommerce .single_add_to_cart_button,.woocommerce #place_order{min-height:48px;font-size:14px}
  .woocommerce table.shop_table td{overflow-wrap:anywhere}
  .woocommerce .woocommerce-tabs ul.tabs{padding-left:0;display:flex;overflow:auto;gap:4px}
  .woocommerce .woocommerce-tabs ul.tabs li{flex-shrink:0;margin:0}
  .woocommerce .woocommerce-tabs ul.tabs li a{min-height:44px;display:flex;align-items:center;font-size:13px}
  .woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{float:none;width:100%}
}

@media(max-width:360px){
  .header{padding-inline:10px;gap:0}
  .header .wordmark{font-size:27px}
  .header .icon{width:44px;min-width:44px;height:44px}
  .announcement{font-size:8px;padding-inline:12px;gap:10px}
  .hero-carousel .hero-links{align-items:flex-start;flex-direction:column;gap:8px}
  .hero-carousel .hero-links .text-link{min-height:44px}
  .product-heading h3{font-size:17px}
  .product-grid{gap:26px 10px}
  .product-info{font-size:10px}
  .product-card .basket-add{font-size:11px}
  .modal-product .purchase-row{grid-template-columns:1fr}
  .modal-product .quantity-control{width:100%}
  .calc-copy{font-size:11px;padding-inline:9px}
}

@media(max-height:500px) and (max-width:1000px){
  .age-gate{padding:20px;max-height:calc(100dvh - 16px)}
  .age-gate .wordmark{font-size:26px;margin-bottom:16px}
  .age-gate h2{font-size:28px;margin-bottom:16px}
}

@media(prefers-reduced-motion:reduce){
  .button,.collection-all-link span,.product-image img{transition:none}
}
