/* Andrea's Masterpiece - design system and chrome.
   Measured from the live site: see docs/DESIGN.md for the sources. */

:root{
  --bronze:#89754F; --bronze-dark:#6F5E3F;
  --sage:#A1A685; --sage-dark:#8A8F6E;
  --olive:#83912C; --olive-deep:#636B2F;
  --gold:#FFCD57; --gold-dark:#F5BE3B;
  --taupe:#A2977F;
  --ink:#1E293B; --body:#67768E;
  --cream:#F7F5EE; --cream-2:#EDECE1; --cream-3:#F1F0E3; --cream-4:#EEEFE8;
  --white:#fff; --line:#E3E0D2;
  --radius:12px; --radius-lg:30px;
  --shadow:0 10px 30px rgba(50,45,30,.10);
  --serif:"Abhaya Libre",Georgia,"Times New Roman",serif;
  --ui:"Onest","Segoe UI",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Parisienne","Brush Script MT",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--body);background:var(--white)}
img{max-width:100%;height:auto}
a{color:var(--olive);text-decoration:none}
a:hover{color:var(--olive-deep)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5vw,4rem);font-weight:800;letter-spacing:-1.5px}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;letter-spacing:-1px;color:var(--taupe)}
h3{font-family:var(--ui);font-size:1.375rem;font-weight:600;color:var(--taupe)}
p{margin:0 0 1rem}
.script{font-family:var(--script);font-weight:400;color:var(--olive);letter-spacing:0}
.muted{color:var(--body)}
.center{text-align:center}
i[class*="fa-"]{display:inline-block;min-width:1em;text-align:center}
:focus-visible{outline:3px solid var(--bronze);outline-offset:2px}
[hidden]{display:none!important}

/* ---- Buttons: single-color pills, three colorways ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ui);font-weight:500;font-size:.9375rem;line-height:1;
  padding:13px 26px;border-radius:50px;border:0;cursor:pointer;text-align:center;
  transition:background .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-bronze{background:var(--bronze);color:#fff}
.btn-bronze:hover{background:var(--bronze-dark);color:#fff}
.btn-sage{background:var(--sage);color:#fff}
.btn-sage:hover{background:var(--sage-dark);color:#fff}
.btn-gold{background:var(--gold);color:var(--ink);font-weight:700}
.btn-gold:hover{background:var(--gold-dark);color:var(--ink)}
.btn-lg{padding:18px 38px;font-size:1rem}
.btn-block{display:flex;width:100%}
.btn.is-busy{opacity:.65;pointer-events:none}

/* ---- Announcement ---- */
.announce{background:var(--olive-deep);color:#fff;text-align:center;
  font-family:var(--ui);font-size:.875rem;padding:8px 16px}

/* ---- Header ---- */
.site-head{background:transparent;display:flex;align-items:center;gap:18px;
  padding:6px 28px;position:absolute;left:0;right:0;top:0;z-index:80}
body:has(.announce) .site-head{top:37px}
.brand{flex:0 0 auto;display:flex;align-items:center;position:relative;width:86px;height:88px}
.brand img{width:86px;height:auto}
/* On a page that opens on a title band, the logo fills the band it sits over.
   It is taken out of the bar's flow, so the nav, the icons and the page title
   keep the positions they have on every other page. */
body:has(.title-band) .brand img{position:absolute;top:12px;left:0;width:200px;max-width:none}
@media (max-width:1250px){body:has(.title-band) .brand img{width:160px}}
/* Under this width the nav closes on the logo, so the bar goes back to the
   small mark it carries everywhere else. */
@media (max-width:1100px){body:has(.title-band) .brand img{position:static;width:86px}}
/* The home page opens on the hero rather than a band, and the logo sits over
   it at the size the hero was built around. */
.site-head.over-hero .brand img{position:absolute;top:12px;left:0;width:150px;max-width:none}
@media (max-width:1100px){.site-head.over-hero .brand img{position:static;width:86px}}
.site-nav{display:flex;gap:26px;margin:0 auto}
.site-nav a{font-family:var(--ui);font-size:.9375rem;font-weight:500;color:#fff;padding:8px 2px}
.site-nav a:hover,.site-nav a.active{color:var(--gold)}
.head-actions{display:flex;align-items:center;gap:6px}
.head-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;background:transparent;border:0;border-radius:50%;
  color:#fff;font-size:1.05rem;cursor:pointer}
.head-icon:hover{background:rgba(255,255,255,.14);color:#fff}
.head-badge{position:absolute;top:2px;right:0;min-width:17px;height:17px;border-radius:9px;
  background:var(--gold);color:var(--ink);font:700 .68rem/17px var(--ui);padding:0 4px;text-align:center}
.menu-btn{display:none}

/* ---- Search bar ---- */
.search-bar{position:sticky;top:0;z-index:90;background:var(--white);box-shadow:var(--shadow)}
.search-inner{display:flex;align-items:center;gap:12px;max-width:860px;margin:0 auto;padding:16px 24px}
.search-inner i{color:var(--taupe)}
.search-inner input{flex:1;border:0;outline:0;font:500 1.05rem var(--ui);color:var(--ink);background:transparent}
.search-close{background:transparent;border:0;color:var(--body);font-size:1.1rem;cursor:pointer;padding:8px}
.search-results{max-width:860px;margin:0 auto;padding:0 24px 14px}
.search-hit{display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:var(--radius)}
.search-hit:hover{background:var(--cream)}
.search-hit img{width:48px;height:48px;object-fit:cover;border-radius:8px}
.search-hit strong{font-family:var(--ui);font-weight:600;color:var(--ink)}
.search-hit span{margin-left:auto;color:var(--body);font-size:.9rem}
.search-none{padding:10px 8px;color:var(--body)}

/* ---- Mobile nav drawer ---- */
.mobile-nav{position:fixed;top:0;left:0;bottom:0;width:290px;max-width:85vw;z-index:120;
  background:var(--bronze);padding:70px 10px 24px;display:flex;flex-direction:column;gap:2px;
  transform:translateX(-102%);transition:transform .22s ease;visibility:hidden}
.mobile-nav.open{transform:none;visibility:visible}
.mobile-nav a{color:#fff;font-family:var(--ui);font-size:1.05rem;font-weight:500;
  padding:13px 18px;border-radius:10px}
.mobile-nav a:hover,.mobile-nav a.active{background:rgba(255,255,255,.13);color:#fff}
.scrim{position:fixed;inset:0;background:rgba(20,18,10,.45);z-index:110;opacity:0;transition:opacity .2s}
.scrim.show{opacity:1}

/* ---- Page title band ---- */
.title-band{background:var(--sage);text-align:center;padding:132px 20px 64px}
.title-band h1{color:#fff;font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:.06em;
  text-transform:uppercase;margin:0}

/* ---- Sections ---- */
.section{padding:76px 24px}
.section-tight{padding:48px 24px}
.wrap{max-width:1200px;margin:0 auto}
.wrap-narrow{max-width:860px;margin:0 auto}
.bg-cream{background:var(--cream)}
.bg-cream-2{background:var(--cream-2)}
.section-head{text-align:center;max-width:640px;margin:0 auto 40px}
.section-head p{color:var(--body)}

/* ---- Product cards ---- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
/* A short row centers itself rather than hugging the left edge. */
.product-grid.grid-center{grid-template-columns:repeat(3,minmax(0,300px));justify-content:center}
@media (max-width:900px){.product-grid.grid-center{grid-template-columns:repeat(2,minmax(0,300px))}}
@media (max-width:600px){.product-grid.grid-center{grid-template-columns:minmax(0,340px)}}
.product-card{display:flex;flex-direction:column;position:relative}
.product-card .card-media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1;background:var(--cream-2)}
.product-card .card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.product-card:hover .card-media img{transform:scale(1.04)}
.wish-btn{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.92);border:0;color:var(--bronze);font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.wish-btn:hover{background:#fff}
.wish-btn.on{color:#C0392B}
.card-cat{font-family:var(--ui);font-size:.8125rem;color:var(--taupe);margin:14px 0 2px}
.card-title{font-family:var(--ui);font-size:1.0625rem;font-weight:600;color:var(--ink);margin:0}
.card-title a{color:inherit}
.card-price{color:var(--body);font-size:.9375rem;margin:4px 0 12px}
.product-card .btn{align-self:flex-start}

/* ---- Content cards ---- */
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}

/* ---- Forms ---- */
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--ui);font-size:.875rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;font:400 1rem var(--sans);color:var(--ink);background:#fff}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--sage);border-color:var(--sage)}
.field textarea{min-height:130px;resize:vertical}
.field-error{color:#97231C;font-size:.85rem;margin-top:5px}
.form-note{font-size:.875rem;color:var(--body)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Option pills and quantity stepper ---- */
.opt-group{margin-bottom:18px}
.opt-name{font-family:var(--ui);font-weight:600;font-size:.9375rem;color:var(--ink);margin-bottom:8px}
.opt-pills{display:flex;flex-wrap:wrap;gap:8px}
.opt-pill{font-family:var(--ui);font-size:.875rem;font-weight:500;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:50px;padding:9px 16px;cursor:pointer}
.opt-pill:hover{border-color:var(--sage)}
.opt-pill.on{background:var(--sage);border-color:var(--sage);color:#fff}
.opt-pill.off{opacity:.4;text-decoration:line-through;cursor:not-allowed}
.qty-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:50px;overflow:hidden}
.qty-step button{width:38px;height:40px;background:#fff;border:0;color:var(--ink);font-size:1rem;cursor:pointer}
.qty-step button:hover{background:var(--cream)}
.qty-step input{width:44px;height:40px;border:0;text-align:center;font:600 1rem var(--ui);color:var(--ink)}
.qty-step input:focus{outline:none}

/* ---- Cart drawer ---- */
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:96vw;z-index:120;
  background:#fff;box-shadow:-12px 0 40px rgba(20,18,10,.18);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .22s ease;visibility:hidden}
.cart-drawer.open{transform:none;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:1.3rem;color:var(--ink);margin:0}
.drawer-close{background:transparent;border:0;font-size:1.2rem;color:var(--body);cursor:pointer;padding:6px}
.drawer-body{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column}
.drawer-line{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--cream-2)}
.drawer-line img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.drawer-line .dl-info{flex:1;min-width:0}
.drawer-line .dl-title{font-family:var(--ui);font-weight:600;color:var(--ink);font-size:.9375rem}
.drawer-line .dl-opts{font-size:.8125rem;color:var(--body)}
.drawer-line .dl-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.drawer-line .dl-price{margin-left:auto;font-family:var(--ui);font-weight:600;color:var(--ink)}
.dl-remove{background:transparent;border:0;color:var(--body);cursor:pointer;font-size:.9rem;padding:4px}
.dl-remove:hover{color:#97231C}
.drawer-totals{padding:16px 0 6px}
.tot-row{display:flex;justify-content:space-between;font-size:.9375rem;padding:3px 0}
.tot-row.save{color:var(--olive-deep)}
.tot-row.grand{font-family:var(--ui);font-weight:700;font-size:1.1rem;color:var(--ink);padding-top:8px}
.drawer-empty{text-align:center;color:var(--body);margin:auto 0}
.drawer-body .btn{margin-top:10px}
.free-ship-note{text-align:center;font-size:.8125rem;color:var(--olive-deep);margin:10px 0 0}

/* ---- Toasts ---- */
.toast-stack{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink);color:#fff;font-family:var(--ui);font-size:.9rem;
  padding:11px 20px;border-radius:50px;box-shadow:var(--shadow);animation:toast-in .18s ease}
.toast.ok{background:var(--olive-deep)}
.toast.bad{background:#7A1F19}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- Footer ---- */
.site-foot{background:var(--white);padding:64px 28px 0;margin-top:0}
.foot-disc{text-align:center;margin-bottom:44px}
.foot-disc img{width:150px;height:150px;border-radius:50%}
.foot-cols{max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr 1.2fr 1.2fr 1.8fr;gap:34px;padding-bottom:48px}
.foot-col h3{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--taupe);margin-bottom:14px}
.foot-col a{display:block;color:var(--body);font-size:.9375rem;padding:5px 0}
.foot-col a:hover{color:var(--olive-deep)}
.foot-social{display:flex;gap:10px;align-items:center}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--ink);color:#fff;font-size:1rem}
.foot-social a:hover{background:var(--bronze);color:#fff}
.foot-handle{color:var(--body);font-size:.9375rem}
.foot-handle:hover{color:var(--olive-deep)}
.foot-news p{font-size:.9375rem}
.news-form{display:flex;gap:8px;margin-bottom:14px}
.news-form input{flex:1;padding:12px 16px;border:1px solid var(--line);border-radius:50px;font:400 .9375rem var(--sans);color:var(--ink)}
.news-form input:focus{outline:2px solid var(--sage);border-color:var(--sage)}
.news-form button{width:52px;border:0;border-radius:50px;background:var(--sage);color:#fff;font-size:1rem;cursor:pointer}
.news-form button:hover{background:var(--sage-dark)}
.pay-icons{display:flex;gap:10px;margin-top:16px;color:var(--body);font-size:1.6rem;flex-wrap:wrap}
.foot-bar{background:var(--cream-4);margin:0 -28px;padding:18px 28px;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.875rem;color:var(--taupe)}
.foot-bar a{color:var(--taupe);text-decoration:underline}

/* ---- Breadcrumb ---- */
.crumbs{font-family:var(--ui);font-size:.8125rem;color:var(--body);margin-bottom:14px}
.crumbs a{color:var(--body)}
.crumbs a:hover{color:var(--olive-deep)}

/* ---- Tables ---- */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-family:var(--ui);font-size:.8125rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--body);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:14px 12px;border-bottom:1px solid var(--cream-2);vertical-align:middle}

/* ---- Responsive ---- */
@media (max-width:1080px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .foot-cols{grid-template-columns:1fr 1fr 1fr;row-gap:26px}
}
@media (max-width:900px){
  .site-nav{display:none}
  .menu-btn{display:inline-flex}
  .site-head{padding:6px 14px}
}
@media (max-width:760px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .section{padding:52px 18px}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-news{grid-column:1 / -1}
}
@media (max-width:430px){
  .product-grid{grid-template-columns:1fr 1fr;gap:12px}
  .brand img{width:64px}
}