/* ============================================================
   Seed'n'Seeds — shared brand stylesheet
   Tokens below are the ones defined in brand.html (the identity
   source of truth). Do not introduce new colours or typefaces
   here; if the identity changes, change brand.html and mirror it.
   ============================================================ */

:root{
  /* --- palette (brand.html) --- */
  --aubergine:#2E1B2E;
  --wine:#8B3A52;
  --rose:#C98B92;
  --blush:#F7ECE8;
  --champagne:#C4A063;

  /* --- derived neutrals (brand.html) --- */
  --line:#EADCD6;
  --line-2:#F0E4DF;
  --muted:#9a8290;
  --body:#5c4453;
  --paper:#FFFFFF;
  --ink-mono:#1a1a1a;

  /* --- type --- */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,sans-serif;

  --maxw:1180px;
  --shadow:0 18px 44px rgba(46,27,46,.10);
  --shadow-sm:0 8px 20px rgba(46,27,46,.07);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;
  background:var(--blush);color:var(--aubergine);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
.serif{font-family:var(--serif);font-weight:400}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:var(--wine);text-decoration:none}
main{display:block}

/* --- accessibility --- */
:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--aubergine);color:var(--blush);padding:12px 18px;z-index:200}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* --- shared type --- */
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--wine)}
.label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose)}
.note{font-size:12.5px;color:var(--muted);line-height:1.6;text-wrap:pretty}
.lead{font-size:16.5px;color:var(--body);max-width:66ch;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.15}
h2.sec{font-size:clamp(26px,3.6vw,38px);margin:10px 0 12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}

section{padding:64px 0}
.panel{background:var(--paper);border:1px solid var(--line);padding:32px}

/* ============ the mark ============ */
/* var() is not valid in SVG presentation attributes — the symbol in
   each page sets stroke/fill through style="" for this reason. */
.m{--ring:var(--champagne);--rw:1.2;--s1:var(--aubergine);--s2:var(--wine);--sw:6.6;display:block;flex:none}
.m.rev{--s1:var(--blush);--s2:var(--rose)}
.m.foil{--s1:var(--champagne);--s2:var(--blush)}
.m.noring{--ring:none}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:400;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid transparent;padding:14px 26px;cursor:pointer;text-decoration:none;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn-primary{background:var(--aubergine);color:var(--blush);border-color:var(--aubergine)}
.btn-primary:hover{background:var(--wine);border-color:var(--wine)}
.btn-ghost{background:transparent;color:var(--aubergine);border-color:var(--aubergine)}
.btn-ghost:hover{background:var(--aubergine);color:var(--blush)}
.btn-wine{background:var(--wine);color:#fff;border-color:var(--wine)}
.btn-wine:hover{background:var(--aubergine);border-color:var(--aubergine)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.btn-block{width:100%}
.btn-sm{padding:10px 18px;font-size:12.5px}

/* ============ header ============ */
.site-head{position:sticky;top:0;z-index:60;background:rgba(247,236,232,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:22px;height:74px}
.brand-lockup{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--aubergine);flex:none}
.brand-lockup .txt{display:flex;flex-direction:column}
.brand-lockup .wordmark{font-family:var(--serif);font-size:23px;line-height:1}
.brand-lockup .tagline{font-size:7.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--wine);margin-top:4px}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav a{font-size:13.5px;letter-spacing:.06em;color:var(--aubergine);padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--champagne);color:var(--wine)}
.head-actions{display:flex;align-items:center;gap:10px;flex:none}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);padding:9px 14px;cursor:pointer;font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--aubergine)}
.cart-btn:hover{border-color:var(--champagne)}
/* Always-visible bag icon. Below 520px the "Cart" label is hidden and the
   count is hidden at zero, so without this the button renders as an empty
   box. Masked rather than inlined so it inherits colour and stays in CSS. */
.cart-btn::before{
  content:"";width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1 12H7L6 8Z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M9.2 8V6.2a2.8 2.8 0 0 1 5.6 0V8' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 8h12l-1 12H7L6 8Z' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M9.2 8V6.2a2.8 2.8 0 0 1 5.6 0V8' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cart-count{min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--wine);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.cart-count[hidden]{display:none}
.burger{display:none;background:none;border:1px solid var(--line);width:42px;height:40px;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--aubergine);transition:.2s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:19.5px}.burger span:nth-child(3){top:25px}

@media(max-width:940px){
  .burger{display:block}
  .nav{
    position:absolute;top:74px;left:0;right:0;background:var(--blush);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 24px 18px;margin-left:0;display:none;
  }
  .nav.open{display:flex}
  .nav a{width:100%;padding:13px 0;border-bottom:1px solid var(--line-2)}
  .head-actions{margin-left:auto}
}
@media(max-width:520px){
  .brand-lockup .wordmark{font-size:19px}
  .brand-lockup .tagline{display:none}
  .cart-btn .cart-label{display:none}
}

/* ============ age gate ============ */
.agegate{position:fixed;inset:0;z-index:300;background:rgba(46,27,46,.93);display:flex;align-items:center;justify-content:center;padding:24px}
.agegate[hidden]{display:none}
.agegate .box{background:var(--blush);max-width:430px;width:100%;padding:40px 34px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.agegate h2{font-size:25px}
.agegate .row{display:flex;gap:10px;width:100%;margin-top:6px}
.agegate .row .btn{flex:1}

/* ============ hero ============ */
.hero{padding:78px 0 64px;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:52px;align-items:center}
.hero h1{font-size:clamp(36px,5.6vw,62px);line-height:1.06;margin:14px 0 18px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-art{display:flex;align-items:center;justify-content:center}
/* The symbol's shapes carry pathLength="100", so one dash length draws all
   three regardless of their real lengths. stroke-dasharray/dashoffset are
   inherited properties, so setting them here reaches into the <use> shadow
   tree. The global prefers-reduced-motion rule collapses the duration, and
   `both` leaves the mark fully drawn. */
.hero-mark{stroke-dasharray:100;stroke-dashoffset:100;animation:markdraw 1.5s .15s both cubic-bezier(.4,0,.2,1)}
@keyframes markdraw{to{stroke-dashoffset:0}}
@media(max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}.hero-art{order:-1}}

/* ============ trust strip ============ */
.trust{background:var(--aubergine);color:var(--blush);padding:0}
.trust-in{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(247,236,232,.14)}
.trust .t{background:var(--aubergine);padding:24px 18px;text-align:center;display:flex;flex-direction:column;gap:7px;align-items:center}
.trust .t b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--blush)}
.trust .t span{font-size:11.5px;color:var(--rose);line-height:1.45}
@media(max-width:900px){.trust-in{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.trust-in{grid-template-columns:1fr}}

/* ============ shelves ============ */
.shelves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.shelf{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;padding:36px;text-decoration:none;border:1px solid var(--line);overflow:hidden}
.shelf.oils{background:var(--paper)}
.shelf.essentials{background:var(--aubergine)}
.shelf h3{font-size:30px;margin-bottom:8px}
.shelf.oils h3{color:var(--aubergine)}
.shelf.essentials h3{color:var(--blush)}
.shelf p{font-size:14.5px;max-width:38ch}
.shelf.oils p{color:var(--body)}
.shelf.essentials p{color:var(--rose)}
.shelf .go{margin-top:18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.shelf.oils .go{color:var(--wine)}
.shelf.essentials .go{color:var(--champagne)}
.shelf .shelf-mark{position:absolute;top:28px;right:28px;opacity:.5}
.shelf:hover{border-color:var(--champagne)}
@media(max-width:820px){.shelves{grid-template-columns:minmax(0,1fr)}}

/* ============ product grid ============ */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.pgrid{grid-template-columns:minmax(0,1fr)}}

.pcard{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .16s ease}
.pcard:hover{border-color:var(--champagne)}
.pcard .thumb{display:block;aspect-ratio:1;background:var(--blush);border-bottom:1px solid var(--line-2);overflow:hidden}
.pcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.pcard .brandline{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--rose)}
.pcard h3{font-size:17px;line-height:1.25}
.pcard h3 a{color:var(--aubergine)}
.pcard h3 a:hover{color:var(--wine)}
.pcard .desc{font-size:13px;color:var(--muted);line-height:1.5;flex:1}
.pcard .price{display:flex;align-items:baseline;gap:9px;margin-top:4px}
.pcard .price .now{font-family:var(--serif);font-size:19px;color:var(--aubergine)}
.pcard .price .was{font-size:13px;color:var(--muted);text-decoration:line-through}
.pcard .btn{margin-top:10px}
.badge-out{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:9px;text-align:center;margin-top:10px}
.badge-ph{display:inline-block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--champagne);border:1px solid var(--champagne);padding:2px 6px}

/* ============ pressed-by-us ============ */
.pressed{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pressed-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:52px;align-items:center}
.pressed-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pressed-list .it{border-left:1px solid var(--champagne);padding-left:16px}
.pressed-list .it b{font-family:var(--serif);font-weight:400;font-size:17px;display:block;margin-bottom:3px}
.pressed-list .it span{font-size:13px;color:var(--muted);line-height:1.5}
@media(max-width:900px){.pressed-grid{grid-template-columns:minmax(0,1fr);gap:32px}}
@media(max-width:480px){.pressed-list{grid-template-columns:minmax(0,1fr)}}

/* ============ discretion band ============ */
.discretion{background:var(--aubergine);color:var(--blush)}
.discretion h2{color:var(--blush)}
.discretion .d-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:30px}
.discretion .d{border-top:1px solid rgba(196,160,99,.45);padding-top:16px}
.discretion .d b{font-family:var(--serif);font-weight:400;font-size:16px;display:block;margin-bottom:6px;color:var(--champagne)}
.discretion .d span{font-size:13.5px;color:var(--rose);line-height:1.55}
@media(max-width:860px){.discretion .d-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.discretion .d-grid{grid-template-columns:minmax(0,1fr)}}

/* ============ safety callout ============ */
.safety{border:1px solid var(--champagne);background:#FBF4EC;padding:20px 22px;display:flex;gap:14px;align-items:flex-start}
.safety .ic{flex:none;width:26px;height:26px;border:1px solid var(--champagne);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--champagne);font-family:var(--serif)}
.safety b{font-family:var(--serif);font-weight:400;font-size:15.5px;display:block;margin-bottom:4px}
.safety p{font-size:13.5px;color:var(--body);line-height:1.6;text-wrap:pretty}

/* ============ reviews ============ */
.reviews-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.review{background:var(--paper);border:1px solid var(--line);padding:26px}
.review p{font-family:var(--serif);font-size:16.5px;line-height:1.55;color:var(--aubergine);font-style:italic}
.review .who{margin-top:14px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:820px){.reviews-grid{grid-template-columns:minmax(0,1fr)}}

/* ============ product detail ============ */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:start}
.pdp .media{background:var(--paper);border:1px solid var(--line);aspect-ratio:1;overflow:hidden}
.pdp .media img{width:100%;height:100%;object-fit:cover}
.pdp h1{font-size:clamp(28px,4vw,40px);margin:10px 0 12px}
.pdp .price{font-family:var(--serif);font-size:27px;margin:18px 0}
.pdp .price .was{font-size:17px;color:var(--muted);text-decoration:line-through;margin-left:10px}
.pdp .longdesc{font-size:15px;color:var(--body);line-height:1.7;margin:16px 0;text-wrap:pretty}
.variants{display:flex;flex-wrap:wrap;gap:9px;margin:8px 0 20px}
.variants button{
  font-family:var(--sans);font-size:13.5px;padding:10px 16px;background:var(--paper);
  border:1px solid var(--line);cursor:pointer;color:var(--aubergine);
}
.variants button[aria-pressed=true]{border-color:var(--aubergine);background:var(--aubergine);color:var(--blush)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--paper)}
.qty button{width:40px;height:44px;border:none;background:none;cursor:pointer;font-size:17px;color:var(--aubergine);font-family:var(--sans)}
.qty input{width:48px;height:44px;border:none;text-align:center;font-family:var(--sans);font-size:15px;color:var(--aubergine);background:none;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buy-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
@media(max-width:860px){.pdp{grid-template-columns:minmax(0,1fr);gap:30px}}

/* ============ cart ============ */
.cart-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:34px;align-items:start}
@media(max-width:900px){.cart-layout{grid-template-columns:minmax(0,1fr)}}
.line{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--line-2);align-items:center}
.line .lthumb{width:88px;height:88px;background:var(--blush);border:1px solid var(--line-2);overflow:hidden}
.line .lthumb img{width:100%;height:100%;object-fit:cover}
.line h3{font-size:16px;margin-bottom:3px}
.line h3 a{color:var(--aubergine)}
.line .vlabel{font-size:12.5px;color:var(--muted)}
.line .lright{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.line .lprice{font-family:var(--serif);font-size:17px}
.link-remove{background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:2px 0;border-bottom:1px solid var(--line)}
.link-remove:hover{color:var(--wine);border-bottom-color:var(--wine)}
@media(max-width:560px){
  .line{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .line .lthumb{width:64px;height:64px}
  .line .lright{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;width:100%}
}
.summary{background:var(--paper);border:1px solid var(--line);padding:26px;position:sticky;top:98px}
.summary .srow{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:14.5px;color:var(--body)}
.summary .srow.total{border-top:1px solid var(--line);margin-top:9px;padding-top:15px;font-size:17px;color:var(--aubergine)}
.summary .srow.total b{font-family:var(--serif);font-weight:400;font-size:22px}
.empty{text-align:center;padding:70px 20px;display:flex;flex-direction:column;align-items:center;gap:16px}

/* ============ forms ============ */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--wine)}
.field input,.field textarea,.field select{
  font-family:var(--sans);font-weight:300;font-size:15px;padding:13px 14px;
  border:1px solid var(--line);background:var(--paper);color:var(--aubergine);width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--wine);outline:none;box-shadow:0 0 0 3px rgba(139,58,82,.12)}
.field textarea{min-height:110px;resize:vertical}
.field .hint{font-size:12px;color:var(--muted)}
.field.invalid input{border-color:#b3261e}
.field .err{font-size:12px;color:#b3261e;display:none}
.field.invalid .err{display:block}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:560px){.row2{grid-template-columns:minmax(0,1fr)}}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-msg{margin-top:14px;padding:13px 15px;font-size:14px;display:none}
.form-msg.ok{display:block;background:#EDF4EE;border:1px solid #BBD6C1;color:#245c33}
.form-msg.err{display:block;background:#FBECEA;border:1px solid #E7BDB7;color:#9c2b1e}

/* ============ confirmation ============ */
.confirm{text-align:center;max-width:620px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px;padding:40px 0}
.confirm .ref{font-family:ui-monospace,monospace;font-size:19px;letter-spacing:.14em;border:1px solid var(--champagne);padding:12px 22px;color:var(--aubergine)}

/* ============ footer ============ */
.site-foot{background:var(--aubergine);color:var(--rose);padding:56px 0 30px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.site-foot h4{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--blush);margin-bottom:13px}
.site-foot a{color:var(--rose);display:block;padding:4px 0}
.site-foot a:hover{color:var(--champagne)}
.site-foot .about{max-width:34ch;line-height:1.65}
.foot-bottom{border-top:1px solid rgba(196,160,99,.3);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.legal{font-size:12px;color:var(--muted);line-height:1.65;max-width:78ch;margin-top:14px}
@media(max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

/* ============ misc ============ */
.crumb{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--wine)}
.page-head{padding:44px 0 8px}
.page-head h1{font-size:clamp(30px,4.6vw,44px);margin:8px 0 10px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 30px}
.filters a{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--line);color:var(--aubergine);background:var(--paper)}
.filters a[aria-current=page]{background:var(--aubergine);color:var(--blush);border-color:var(--aubergine)}
.filters a:hover{border-color:var(--champagne)}