.product-page { min-height: 100vh; }
.product-page .site-header { background: rgba(248,250,252,.92); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(16px); }
.icon-button { position: relative; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-count { position: absolute; top: -8px; right: -9px; min-width: 15px; height: 15px; padding-inline: 3px; display: grid; place-items: center; border-radius: 20px; background: var(--ink); color: white; font-size: .55rem; }
.product-hero { padding-top: 152px; padding-bottom: 58px; }
.product-hero h1 { max-width: 850px; margin-top: 20px; font-size: clamp(3rem, 5.6vw, 5.6rem); }
.product-hero h1 em { color: #6b7632; }
.product-intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-top: 45px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); }
.product-intro p { max-width: 460px; margin: 0; }
.product-intro span { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.catalog { padding-bottom: 120px; }
.catalog-toolbar { position: sticky; top: 92px; z-index: 10; display: flex; gap: 25px; padding-block: 20px; border-block: 1px solid var(--line); background: rgba(248,250,252,.94); backdrop-filter: blur(14px); overflow-x: auto; }
.filter { padding: 0 0 3px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.filter:hover, .filter.active { border-color: var(--ink); color: var(--ink); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 20px; padding-top: 38px; }
.product-card { position: relative; }
.product-card[hidden] { display: none; }
.product-media { position: relative; display:block; width:100%; aspect-ratio:4/5; padding:0; overflow:hidden; border:0; background:var(--media-bg,var(--cream)); color:inherit; text-decoration:none; cursor:pointer; }
.product-media img { width:100%;height:100%;max-width:none;display:block;object-fit:var(--media-fit,cover);object-position:var(--media-x,50%) var(--media-y,50%);transform:scale(var(--media-zoom,1));transform-origin:var(--media-x,50%) var(--media-y,50%);transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.product-media:hover img { transform:scale(calc(var(--media-zoom,1) * 1.04)); }
.tea-media img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.05) translate(5%, 3%); }
.tea-media:hover img { transform: scale(1.1) translate(5%, 3%); }
.strip-media img { position: absolute; top: 0; width: 500%; max-width: none; height: 100%; object-fit: fill; }
.panel-1 img { left: 0; }.panel-2 img { left: -100%; }.panel-3 img { left: -200%; }.panel-4 img { left: -300%; }.panel-5 img { left: -400%; }
.product-meta { display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; }
.product-meta small { color: var(--muted); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.product-meta h2 { margin-top: 7px; font-size: 1.15rem; letter-spacing: -.03em; }
.product-meta > span { padding-top: 22px; font-weight: 600; }
.favourite-button { position: absolute; z-index: 2; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(248,250,252,.88); font-size: 1.35rem; cursor: pointer; transition: transform .2s, background .2s; }
.favourite-button:hover { transform: scale(1.08); }
.favourite-button.saved { background: var(--ink); color: white; }
.empty-state { padding-block: 90px; color: var(--muted); text-align: center; }
.search-panel { position: fixed; inset: 0 0 auto; z-index: 80; padding: 38px 0; background: var(--surface); box-shadow: 0 15px 40px rgba(11,11,11,.12); transform: translateY(-110%); transition: transform .35s; }
.search-panel.open { transform: none; }
.search-inner { position: relative; display: grid; grid-template-columns: 210px 1fr 36px; gap: 20px; align-items: center; }
.search-inner label { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.search-inner input { padding: 10px 0; border: 0; border-bottom: 1px solid var(--ink); outline: none; background: transparent; font: 500 clamp(1.4rem,3vw,2.4rem) "Manrope"; }
.search-inner button, .drawer-header button, .dialog-close { border: 0; background: transparent; font-size: 1.8rem; cursor: pointer; }
.page-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(11,11,11,.35); backdrop-filter: blur(2px); }
.cart-drawer { position: fixed; inset: 0 0 0 auto; z-index: 70; width: min(440px, 100%); display: flex; flex-direction: column; padding: 30px; background: var(--surface); transform: translateX(105%); transition: transform .38s cubic-bezier(.2,.7,.2,1); }
.cart-drawer.open { transform: none; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.drawer-header h2 { font-size: 1.7rem; }
.cart-items { flex: 1 1 auto; min-height: 80px; overflow-y: auto; padding-block: 12px; }
.cart-item { display: flex; justify-content: space-between; gap: 15px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.cart-item p { margin: 3px 0 0; color: var(--muted); font-size: .78rem; }
.cart-item button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.cart-empty { margin-top: 40px; color: var(--muted); text-align: center; }
.cart-footer { padding-top: 20px; border-top: 1px solid var(--line); }
.cart-footer > div { display: flex; justify-content: space-between; margin-bottom: 18px; }
.checkout-button { width: 100%; }
.cart-footer small { display: block; margin-top: 12px; color: var(--muted); text-align: center; }
.cart-shipping-progress,.global-cart-shipping { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: .78rem; }
.cart-shipping-progress p,.global-cart-shipping p { margin: 0 0 10px; }
.cart-shipping-progress > span,.global-cart-shipping > span { display: block; height: 3px; overflow: hidden; background: var(--line); }
.cart-shipping-progress i,.global-cart-shipping i { display: block; height: 100%; background: var(--olive); }
.cart-extras { flex: 0 0 auto; margin: 0 -30px; padding: 18px 0 18px 30px; overflow: hidden; border-top: 1px solid var(--line); background: rgba(112,114,83,.06); }
.cart-extras header h3 { margin: 0 0 4px; font-size: .9rem; text-transform: uppercase; }
.cart-extras header p { margin: 0 0 13px; color: var(--muted); font-size: .72rem; }
#cart-extra-list { display: flex; gap: 10px; padding: 0 30px 8px 0; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.cart-extra-item { flex: 0 0 min(300px,82vw); display: grid; grid-template-columns: 58px 1fr auto; gap: 4px 12px; align-items: center; min-height: 84px; padding: 9px; border: 1px solid transparent; background: var(--paper); color: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
.cart-extra-item:focus-visible,.cart-extra-item:hover { border-color: var(--olive); }
.cart-extra-item + .cart-extra-item { margin-top: 0; }
.cart-extra-image { grid-column: 1; grid-row: 1 / 3; height: 58px; overflow: hidden; background: var(--cream); }
.cart-extra-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-extra-image.tea img { object-fit: contain; }
.cart-extra-item > span:nth-child(2) { display: grid; gap: 3px; font-size: .76rem; }
.cart-extra-item em { font-style: normal; font-weight: 700; text-transform: uppercase; }
.cart-extra-state { padding-right: 30px; color: var(--muted); }
.quick-view-dialog { width: min(960px, calc(100% - 32px)); padding: 0; border: 0; background: var(--paper); color: var(--ink); }
.quick-view-dialog[open] { display: grid; grid-template-columns: 1.1fr .9fr; }
.quick-view-dialog::backdrop { background: rgba(11,11,11,.55); backdrop-filter: blur(4px); }
.dialog-close { position: absolute; z-index: 3; top: 14px; right: 18px; }
.dialog-image { min-height: 580px; overflow: hidden; background: var(--cream); }
.dialog-image .product-media { height: 100%; aspect-ratio: auto; cursor: default; }
.dialog-copy { align-self: center; padding: 55px; }
.dialog-copy h2 { margin-top: 20px; font-size: clamp(2.5rem,4vw,4.2rem); }
.dialog-copy > strong { display: block; margin-top: 22px; font-size: 1.1rem; }
.dialog-copy > p:not(.section-number) { margin: 28px 0; color: var(--muted); }
.dialog-actions { display: grid; gap: 14px; }
.buy-now { padding: 14px; border: 1px solid var(--ink); background: transparent; cursor: pointer; font-weight: 600; }
.product-footer { padding-block: 34px; background: var(--ink); color: var(--paper); }
.product-footer > div { display: flex; justify-content: space-between; gap: 20px; color: #aaa; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 820px) { .product-grid { grid-template-columns: repeat(2,1fr); } .search-inner { grid-template-columns: 1fr 36px; } .search-inner label { grid-column: 1 / -1; } .quick-view-dialog[open] { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; } .dialog-image { min-height: 420px; } .catalog-toolbar { top: 91px; } }
@media (max-width: 520px) { .product-grid { grid-template-columns: 1fr; } .product-hero { padding-top: 128px; padding-bottom: 46px; } .product-hero h1 { margin-top: 16px; font-size: clamp(2.65rem, 13vw, 3.35rem); } .product-intro { align-items: flex-start; flex-direction: column; } .dialog-copy { padding: 35px 24px; } .dialog-image { min-height: 350px; } .product-footer > div { flex-direction: column; } }

.subcategory-toolbar { display: flex; align-items: flex-start; gap: 28px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.subcategory-toolbar[hidden] { display: none; }
.subcategory-toolbar > span { flex: 0 0 auto; padding-top: 5px; color: var(--muted); font: 600 .65rem "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.subcategory-toolbar > div { display: flex; flex-wrap: wrap; gap: 8px; }
.subfilter { padding: 6px 11px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font-size: .76rem; cursor: pointer; transition: background .2s,color .2s,border-color .2s; }
.subfilter:hover,.subfilter.active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
@media (max-width:520px) { .subcategory-toolbar { flex-direction: column; gap: 10px; } }

.type-toolbar { display:flex;align-items:flex-start;gap:28px;padding:14px 0;border-bottom:1px solid var(--line); }
.type-toolbar[hidden]{display:none}.type-toolbar>span{padding-top:5px;color:var(--muted);font:600 .65rem "Manrope";letter-spacing:.1em;text-transform:uppercase}.type-toolbar>div{display:flex;flex-wrap:wrap;gap:8px}.type-filter{padding:6px 11px;border:1px solid var(--line);border-radius:99px;background:var(--cream);color:var(--muted);font-size:.76rem;cursor:pointer}.type-filter:hover,.type-filter.active{border-color:#6b7632;background:#6b7632;color:white}
.catalog-seo-intro{max-width:720px;margin-top:28px;color:var(--muted);font-size:clamp(.92rem,1.3vw,1.08rem);line-height:1.7}