@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,300..700&display=swap');

/* storefront.css: home page, product cards, carousel, catalogue (clinical precision).
   Tokens live in site.css :root; this file no longer redeclares --blue. */

/* ---------- Home hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:var(--s-8);align-items:center;padding-top:var(--s-8);padding-bottom:var(--s-8)}
.hero h1{font-size:clamp(3rem,5.4vw,4.75rem);letter-spacing:-.034em;line-height:.98;margin-bottom:var(--s-5)}
.hero .intro{max-width:420px}
.hero-img{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--plate)}
.button-icon,.link-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;transition:transform var(--t) var(--ease)}
.button-icon svg,.link-icon svg{width:16px;height:16px}
.button:hover .button-icon,.secondary-link:hover .link-icon{transform:translate(2px,-2px)}
.meta{display:flex;gap:var(--s-5);margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);max-width:420px;font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--ink-2)}
.meta span{display:inline-flex;align-items:center;gap:var(--s-2)}
.meta span::before{content:"";width:5px;height:5px;background:var(--blue);border-radius:1px}

/* ---------- Ribbon: a three-cell spec bar ---------- */
.ribbon{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;background:var(--paper)}
.ribbon .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.ribbon strong{font-family:var(--sans);font-weight:500;font-size:.8125rem;letter-spacing:.01em;color:var(--ink-2);padding:var(--s-4) var(--s-5);border-left:1px solid var(--line);text-align:center}
.ribbon strong:first-child{border-left:0;text-align:left;padding-left:0}
.ribbon strong:last-child{text-align:right;padding-right:0}

/* ---------- Featured carousel ---------- */
.catalogue{padding-top:var(--s-8);padding-bottom:var(--s-8)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s-5);margin-bottom:var(--s-6)}
.section-head .eyebrow{margin-bottom:var(--s-4)}
.section-head h2{font-size:var(--fs-h2)}
.section-head p:not(.eyebrow),.section-head .section-intro{color:var(--muted);font-size:.9375rem;line-height:1.6;margin:var(--s-3) 0 0}
.carousel-controls{display:flex;gap:var(--s-2)}
.carousel-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line-strong);border-radius:var(--r);color:var(--ink);background:var(--paper);cursor:pointer;transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background var(--t) var(--ease)}
.carousel-controls button:hover:not(:disabled){border-color:var(--ink);background:var(--ink);color:#fff}
.carousel-controls button:disabled{opacity:.35;cursor:default}
.featured-track{display:flex;gap:var(--s-5);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 2px;padding:2px 2px var(--s-5);margin:0 -2px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.featured-track>.product{flex:0 0 calc((100% - 2*var(--s-5))/3);scroll-snap-align:start}

/* ---------- Product card ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.product{position:relative;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.product:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.product-link{display:flex;flex-direction:column;height:100%;padding:0;border-radius:0}
.product figure{margin:0;position:relative;background:var(--plate);border-bottom:1px solid var(--line);border-radius:0;overflow:hidden}
.product img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;}
.tag{position:absolute;top:var(--s-3);left:var(--s-3);font-family:var(--sans);font-size:var(--fs-fine);font-weight:500;letter-spacing:.01em;line-height:1.2;color:var(--ink-2);background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--r-xs);padding:5px 8px}
.product .product-title{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);margin:0;padding:var(--s-4) var(--s-5) 0}
.product h3{font-size:1.125rem;line-height:1.3;transition:color var(--t) var(--ease)}
.product-link:hover h3{color:var(--blue)}
.product .amount{font-family:var(--mono);font-size:var(--fs-fine);color:var(--blue);white-space:normal;margin:0}
.product p{padding:0 var(--s-5);font-size:var(--fs-small);line-height:1.6;color:var(--muted);margin:var(--s-2) 0 0}
.product-link>p:not(.state){flex:1}
.product .state{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-2) 0 0;padding:0 var(--s-5);border:0;font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--ink-2)}
.stock-dot{display:inline-block;flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--blue);margin:0}
.product .details-link{display:flex;align-items:center;justify-content:space-between;margin:var(--s-4) var(--s-5) var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--line);font-size:var(--fs-small);font-weight:500;color:var(--blue)}

.explore-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line)}
.explore-row p{font-size:.9375rem;color:var(--muted);margin:0}

/* ---------- Home lower sections ---------- */
.home-about{padding:var(--s-8) 0;background:var(--paper);border-top:0}
.home-about .wrap{display:grid;grid-template-columns:5fr 7fr;column-gap:var(--s-8)}
.home-about .eyebrow{grid-column:1/-1}
.home-about h2{grid-column:1;font-size:clamp(1.75rem,2.4vw,2.25rem)}
.home-about p:not(.eyebrow){grid-column:2;max-width:620px;color:var(--muted);line-height:1.75;margin:0}
.home-actions{grid-column:2;display:flex;align-items:center;gap:var(--s-6);flex-wrap:wrap;margin-top:var(--s-5)}
.secondary-link{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;font-size:.9375rem;font-weight:500;color:var(--ink);border-bottom:1px solid transparent;transition:color var(--t) var(--ease)}
.secondary-link:hover{color:var(--blue)}
.secondary-link .link-icon{color:var(--blue)}

/* ---------- Collection page ---------- */
.inventory-hero{padding-top:var(--s-8);padding-bottom:var(--s-7);border-bottom:1px solid var(--line);margin-bottom:var(--s-6)}
.inventory-hero h1{font-size:clamp(2.75rem,4.8vw,4.25rem);max-width:820px;line-height:1.02;margin-bottom:var(--s-5)}
.inventory-hero h1 span{color:var(--muted)}
.inventory-hero>p:not(.eyebrow){font-size:var(--fs-lead);line-height:1.65;color:var(--muted);max-width:540px;margin:0}
.inventory-pills{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-5)}
.inventory-pills span{border:1px solid var(--line-strong);border-radius:var(--r-xs);padding:5px 10px;background:var(--paper);font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--ink-2)}
.full-catalogue{padding-top:0}
.catalogue-tools{display:flex;align-items:end;flex-wrap:wrap;gap:var(--s-4);margin:0 0 var(--s-4);padding:var(--s-5);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r)}
.catalogue-tools label{display:grid;gap:var(--s-2);min-width:0;font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--ink-2)}
.catalogue-tools .search-control{flex:2 1 280px}
.catalogue-tools .select-control{flex:1 1 180px}
.input-shell{position:relative;display:flex;align-items:center}
.input-shell>svg{position:absolute;left:14px;color:var(--muted);pointer-events:none;width:16px;height:16px}
.catalogue-tools input,.catalogue-tools select{width:100%;height:48px;min-height:44px;padding:0 var(--s-4);border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:.9375rem;letter-spacing:0;text-transform:none;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.catalogue-tools input{padding-left:42px}
.catalogue-tools input::placeholder{color:var(--soft)}
.catalogue-tools input:hover,.catalogue-tools select:hover{border-color:var(--ink-2)}
.catalogue-tools input:focus,.catalogue-tools select:focus{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);outline:none}
.catalogue-tools input:focus-visible,.catalogue-tools select:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.catalogue-tools select{appearance:none;padding-right:40px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2339465e' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center}
.catalogue-tools .reset-button{height:48px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);white-space:nowrap;padding:0 var(--s-5);border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);color:var(--ink);font-size:var(--fs-small);font-weight:500;cursor:pointer;transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.catalogue-tools .reset-button svg{width:16px;height:16px;color:var(--blue)}
.catalogue-tools .reset-button:hover{border-color:var(--ink);color:var(--ink)}
.catalogue-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin:0 0 var(--s-5);padding:var(--s-2) 0}
.result-count{margin:0;font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--ink-2);font-variant-numeric:tabular-nums}
.inventory-note{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--ink-2)}
.full-catalogue .grid{gap:var(--s-5)}

@media(min-width:951px){
  .inventory-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s-8);align-items:end}
  .inventory-hero .eyebrow{grid-column:1/-1}
  .inventory-hero h1{grid-column:1;grid-row:2/4;margin-bottom:0}
  .inventory-hero>p:not(.eyebrow){grid-column:2;grid-row:2;align-self:end}
  .inventory-hero .inventory-pills{grid-column:2;grid-row:3;margin-top:var(--s-4)}
}

/* ---------- Placeholder art (legacy preview products) ---------- */
.placeholder-art{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);padding:var(--s-6) var(--s-4);text-align:center;background:var(--plate);border-radius:0;position:relative;overflow:hidden}
.placeholder-mark{font-size:3rem;line-height:1;font-weight:500;color:var(--ink-2);letter-spacing:-.06em}
.placeholder-mark>span{display:block;font-family:var(--mono);font-size:var(--fs-fine);letter-spacing:.3em;margin-top:var(--s-3)}
.placeholder-name{font-size:1.2rem;letter-spacing:-.02em;color:var(--ink)}
.placeholder-caption{font-family:var(--mono);font-size:var(--fs-fine);letter-spacing:.1em;color:var(--muted)}
.upcoming-detail .placeholder-art{border:1px solid var(--line);border-radius:var(--r)}

/* ---------- Tablet ---------- */
@media(max-width:950px){
  .hero{gap:var(--s-6)}
  .featured-track>.product{flex-basis:calc((100% - var(--s-5))/2)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-about .wrap{grid-template-columns:1fr}
  .home-about h2,.home-about p:not(.eyebrow),.home-actions{grid-column:1}
  .home-about p:not(.eyebrow){margin-top:var(--s-4)}
}

/* ---------- Phone: compact, fold-first ---------- */
@media(max-width:700px){
  /* hero: text + portrait vial plate side by side */
  .hero{grid-template-columns:minmax(0,1fr) clamp(88px,28%,120px);grid-template-areas:"eyebrow eyebrow" "title art" "intro art" "cta cta" "meta meta";gap:0 var(--s-4);align-items:start;padding-top:var(--s-4);padding-bottom:var(--s-3)}
  .hero>div{display:contents}
  .hero .eyebrow{grid-area:eyebrow;margin:0 0 var(--s-3)}
  .hero h1{grid-area:title;font-size:clamp(1.875rem,9vw,2.5rem);letter-spacing:-.04em;line-height:1.02;margin:0}
  .hero .intro{grid-area:intro;font-size:.9375rem;line-height:1.55;margin:var(--s-3) 0 0;max-width:none}
  .hero .button{grid-area:cta;justify-self:stretch;margin-top:var(--s-3)}
  .hero .eyebrow{letter-spacing:.08em}
  .hero .meta{grid-area:meta;margin:var(--s-2) 0 0;padding-top:0;border-top:0;gap:var(--s-1) var(--s-4);flex-wrap:wrap;max-width:none;font-size:var(--fs-fine)}
  .hero-img{grid-area:art;align-self:stretch;width:100%;height:100%;min-height:0;object-fit:cover}
  .button{min-height:46px;padding:0 var(--s-4) 0 var(--s-5);font-size:.9375rem}

  .ribbon .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--s-4);padding-top:6px;padding-bottom:6px}
  .ribbon strong,.ribbon strong:first-child,.ribbon strong:last-child{padding:0;border:0;text-align:center;font-size:var(--fs-fine);line-height:1.5}
  .catalogue{padding-top:var(--s-4);padding-bottom:var(--s-6)}
  .section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--s-3);align-items:end;margin-bottom:var(--s-3)}
  .section-head>div:first-child{display:contents}
  .section-head .eyebrow{grid-column:1;grid-row:1;margin:0 0 6px}
  .section-head h2{grid-column:1;grid-row:2;font-size:1.5rem;line-height:1.1}
  .section-head .section-intro{grid-column:1/-1;grid-row:3;margin:6px 0 0;font-size:var(--fs-small);line-height:1.5}
  .section-head .carousel-controls{grid-column:2;grid-row:1/3;align-self:end}
  .featured-track{gap:var(--s-3);padding-bottom:var(--s-4);scroll-snap-type:none}
  .featured-track>.product{flex-basis:58%;scroll-snap-align:none}
  .section-head .carousel-controls{display:none}
  .product .product-title{padding-top:var(--s-2)}
  .product figure{aspect-ratio:1.08/1}
  .product .product-title{padding:var(--s-3) var(--s-4) 0}
  .product h3{font-size:1.0625rem}
  .product p{padding:0 var(--s-4);font-size:var(--fs-small)}
  .product .state{padding:0 var(--s-4)}
  .tag{top:var(--s-2);left:var(--s-2);padding:4px 7px}
  .explore-row{flex-direction:column;align-items:stretch;gap:var(--s-3);margin-top:var(--s-3);padding-top:var(--s-4)}
  .explore-row .button{width:100%}

  .home-about{padding:var(--s-6) 0}
  .home-about h2{font-size:1.5rem;line-height:1.15}
  .home-about p:not(.eyebrow){font-size:.9375rem;line-height:1.65;margin-top:var(--s-3)}
  .home-actions{gap:var(--s-2) var(--s-5);margin-top:var(--s-4)}

  .inventory-hero{padding-top:var(--s-6);padding-bottom:var(--s-5);margin-bottom:var(--s-4)}
  .inventory-hero h1{font-size:2.125rem;line-height:1.05;margin-bottom:var(--s-3)}
  .inventory-hero>p:not(.eyebrow){font-size:.9375rem;line-height:1.6}
  .inventory-pills{margin-top:var(--s-4)}
  .catalogue-tools{padding:var(--s-4);gap:var(--s-3)}
  .catalogue-tools .search-control{flex:0 0 100%}
  .catalogue-tools .select-control{flex:1 1 150px}
  .catalogue-tools select{padding-left:var(--s-3);padding-right:34px;background-position:right 10px center;font-size:var(--fs-small)}
  .catalogue-tools .reset-button{padding:0 var(--s-3)}
  .catalogue-meta{margin-bottom:var(--s-3)}
  .full-catalogue .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
  .full-catalogue .product .product-title{padding:var(--s-3) var(--s-3) 0;display:block}
  .full-catalogue .product h3{font-size:.9375rem}
  .full-catalogue .product p{padding:0 var(--s-3)}
  .full-catalogue .product .state{padding:0 var(--s-3)}
  .full-catalogue .tag{top:6px;left:6px;padding:3px 6px}
}
@media(max-width:350px){
  .hero{grid-template-columns:minmax(0,1fr) 84px;gap:0 var(--s-3)}
  .hero h1{font-size:1.625rem}
  .hero .intro{font-size:.875rem}
  .hero .eyebrow,.hero .meta{letter-spacing:.02em}

}

/* Product photography blends into the white page; shadows are in the image. */
.hero-img{border-color:transparent;background:#fff}
.product figure{background:#fff}