/*
Theme Name: Astra Child
Theme URI: https://xadsites.com/
Author: XAD
Author URI: https://xadsites.com/
Description: Premium comfort bakery theme for Cravié — Barcelona. Four crafted pages (Home, Menu, About, Contact) plus a hidden Link-in-Bio landing page, hand-drawn brand illustrations, floating pill header, Elementor widget set, and a WooCommerce-ready structure for adding a shop later without rebuilding.
Version: 1.0.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cravie
Tags: custom-menu, custom-logo, featured-images, full-width-template, e-commerce
WC requires at least: 8.0
WC tested up to: 9.9
*/

/* ============================================================
   1. Design tokens
   ============================================================ */
:root{
  --cream-50:#FFF8F0;          /* page background            */
  --cream-100:#FBEFDC;         /* soft band                  */
  --cream-200:#F7E5C6;         /* hero band                  */
  --cream-card:#FFFCF6;        /* card surface               */
  --choc:#351019;              /* deep chocolate maroon      */
  --choc-2:#421722;            /* raised dark surface        */
  --ink:#43191F;               /* heading colour             */
  --body:#7A675E;              /* body text                  */
  --body-dark:#CDB3A7;         /* body text on chocolate     */
  --cream-on-dark:#F6E7CE;     /* headings on chocolate      */
  --gold:#B98E52;              /* accents, italic words      */
  --gold-deep:#9C7238;
  --tan:#C9A874;               /* primary button             */
  --tan-soft:#EFDFBD;          /* badges / chips             */
  --gold-line:#E5D1A8;         /* hairlines                  */

  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Quicksand",system-ui,sans-serif;
  --font-script:"Dancing Script",cursive;

  --r-card:26px;
  --r-big:34px;
  --shadow-card:0 18px 44px rgba(53,16,25,.09);
  --shadow-soft:0 10px 26px rgba(53,16,25,.07);
  --wrap:1240px;
  --head-h:76px;
}

/* ============================================================
   2. Reset / base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{scroll-padding-top:calc(var(--head-h) + 28px)}
body{
  background:var(--cream-50);
  color:var(--body);
  font-family:var(--font-body);
  font-size:17px;font-weight:500;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--choc);color:var(--cream-on-dark);padding:10px 18px;border-radius:0 0 12px 0;z-index:999}
.skip-link:focus{left:0}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--tan);color:var(--choc)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4.5vw,48px)}
.wrap-narrow{max-width:900px}

/* ============================================================
   3. Type
   ============================================================ */
h1,h2,h3,.h-display{font-family:var(--font-display);font-weight:600;color:var(--ink);line-height:1.12;letter-spacing:-.01em}
.h-hero{font-size:clamp(42px,6.2vw,76px)}
.h-xl{font-size:clamp(34px,4.6vw,58px)}
.h-lg{font-size:clamp(28px,3.6vw,44px)}
.h-md{font-size:clamp(22px,2.5vw,29px)}
.h-sm{font-size:clamp(19px,2vw,23px)}
h1 em,h2 em,h3 em,.h-display em,.em-gold{font-style:italic;font-weight:500;color:var(--gold)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.card-dark h2,.card-dark h3{color:var(--cream-on-dark)}
.sec-dark h2 em,.card-dark h2 em,.sec-dark h3 em{color:var(--tan)}

.eyebrow{
  font-family:var(--font-body);font-weight:700;font-size:12px;
  letter-spacing:.38em;text-transform:uppercase;color:var(--gold);
  margin-bottom:22px;display:block;
}
.sec-dark .eyebrow,.card-dark .eyebrow{color:var(--tan)}

.lead{font-size:clamp(17px,1.6vw,19px);max-width:640px}
.sec-dark p,.card-dark p{color:var(--body-dark)}

.script{font-family:var(--font-script);font-weight:600;color:var(--gold);line-height:1.25;letter-spacing:0}
.script-xl{font-size:clamp(30px,4.5vw,46px)}
.script-lg{font-size:clamp(24px,3vw,32px)}
.script-md{font-size:clamp(20px,2.2vw,25px)}

/* ============================================================
   4. Buttons / links / badges
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:700;font-size:15px;
  padding:15px 27px;border-radius:999px;line-height:1;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .arr{transition:transform .18s ease;font-weight:600}
.btn:hover .arr{transform:translateX(4px)}
.btn-tan{background:var(--tan);color:var(--choc);box-shadow:0 10px 24px rgba(185,142,82,.35)}
.btn-tan:hover{background:#BE9A61}
.btn-dark{background:var(--choc);color:var(--cream-on-dark);box-shadow:0 12px 26px rgba(53,16,25,.28)}
.btn-dark:hover{background:#4A1B27}
.btn-ghost{border:1.6px solid rgba(67,25,31,.28);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(67,25,31,.04)}
.btn-ghost-cream{border:1.6px solid rgba(246,231,206,.4);color:var(--cream-on-dark)}
.btn-ghost-cream:hover{border-color:var(--cream-on-dark);background:rgba(246,231,206,.08)}
.btn-lg{padding:18px 32px;font-size:16px}

.link-arrow{
  font-weight:700;font-size:15px;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
  border-bottom:2px solid var(--gold-line);padding-bottom:3px;
  transition:border-color .18s ease,color .18s ease;
}
.link-arrow:hover{border-color:var(--gold);color:var(--gold-deep)}
.link-arrow .arr{transition:transform .18s ease}
.link-arrow:hover .arr{transform:translateX(4px)}
.sec-dark .link-arrow,.card-dark .link-arrow{color:var(--cream-on-dark);border-color:rgba(246,231,206,.3)}
.sec-dark .link-arrow:hover,.card-dark .link-arrow:hover{border-color:var(--tan);color:var(--tan)}

.badge{
  display:inline-block;background:var(--tan-soft);color:var(--ink);
  font-weight:700;font-size:13px;letter-spacing:.02em;
  padding:8px 17px;border-radius:999px;
}
.card-dark .badge,.sec-dark .badge{background:var(--tan-soft)}
.pill-dot{display:inline-flex;align-items:center;gap:9px;background:var(--cream-200);color:var(--ink);font-weight:700;font-size:13px;padding:9px 18px;border-radius:999px}
.pill-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.tag-soon{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-left:12px}

/* ============================================================
   5. Header
   ============================================================ */
.site-head{position:sticky;top:14px;z-index:120;margin-top:14px}
.site-head .bar{
  display:flex;align-items:center;gap:clamp(16px,2.6vw,34px);
  background:rgba(253,244,230,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(53,16,25,.06);
  border-radius:999px;
  box-shadow:0 14px 34px rgba(53,16,25,.09);
  padding:10px 12px 10px 22px;
  min-height:var(--head-h);
  transition:box-shadow .25s ease,background .25s ease;
}
.is-scrolled .site-head .bar{background:rgba(253,244,230,.97);box-shadow:0 16px 40px rgba(53,16,25,.13)}

.brand{display:flex;align-items:center;gap:13px;margin-right:auto}
.brand .seal{width:46px;height:46px;flex:0 0 auto;color:var(--gold-deep)}
.brand .word{font-family:var(--font-display);font-weight:600;font-size:23px;letter-spacing:.24em;color:var(--ink);transform:translateY(-1px)}
.brand img.custom-logo{max-height:48px;width:auto}

.nav-main{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.nav-main a{
  font-weight:700;font-size:13.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#7A625B;padding:8px 2px;position:relative;transition:color .18s ease;
}
.nav-main a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.nav-main a:hover{color:var(--ink)}
.nav-main a:hover::after{transform:scaleX(1)}
.nav-main .current-menu-item a,.nav-main .current_page_item a,.nav-main a[aria-current="page"]{color:var(--ink)}
.nav-main .current-menu-item a::after,.nav-main .current_page_item a::after,.nav-main a[aria-current="page"]::after{transform:scaleX(1)}

.head-actions{display:flex;align-items:center;gap:12px}
.head-translate:empty{display:none}
.head-ig{background:var(--tan);color:var(--choc);font-weight:700;font-size:13.5px;padding:12px 20px;border-radius:999px;transition:background .18s ease,transform .18s ease}
.head-ig:hover{background:#BE9A61;transform:translateY(-1px)}

.burger{display:none;width:46px;height:46px;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:var(--choc)}
.burger span{display:block;width:20px;height:2.2px;background:var(--cream-on-dark);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.2px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.2px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:110;background:var(--cream-50);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
  padding:100px 30px 50px;text-align:center;
}
.drawer.open{opacity:1;visibility:visible}
.drawer a.d-link{font-family:var(--font-display);font-weight:600;font-size:34px;color:var(--ink);padding:10px;display:block}
.drawer a.d-link:hover{color:var(--gold)}
.drawer .d-social{display:flex;gap:12px;margin-top:26px}
.drawer .d-illo{width:110px;opacity:.85;margin-bottom:8px}

/* ============================================================
   6. Sections — shared
   ============================================================ */
.sec{padding-block:clamp(72px,9vw,118px);position:relative}
.sec-tight{padding-block:clamp(50px,6vw,80px)}
.sec-band{background:var(--cream-200)}
.sec-soft{background:var(--cream-100)}
.sec-dark{background:var(--choc);color:var(--body-dark)}
.sec-center{text-align:center}
.sec-center .lead{margin-inline:auto}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,74px);align-items:center}
.grid-2.flip>.col-media{order:2}
@media(max-width:920px){
  .grid-2{grid-template-columns:1fr}
  .grid-2.flip>.col-media{order:0}
}

[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .btn,.btn .arr{transition:none}
}

/* Media slots: photo if set, brand illustration fallback */
.media{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  background:var(--cream-card);border:1px solid rgba(53,16,25,.06);
  box-shadow:var(--shadow-soft);
  display:grid;place-items:center;
}
.media .photo{width:100%;height:100%;object-fit:cover}
.media.media--illo .illo{width:52%;max-width:300px;opacity:.92}
.media--dark{background:var(--choc-2);border-color:rgba(246,231,206,.08)}
.media--band{background:var(--cream-200)}
.media--wide{aspect-ratio:16/7}
.media--land{aspect-ratio:4/3}
.media--tall{aspect-ratio:4/5}
.media--sq{aspect-ratio:1/1}
.media--sq .illo,.media--land .illo{width:46%}
@media(max-width:640px){.media--wide{aspect-ratio:16/10}}

/* Founder name tag */
.tagname{
  position:absolute;z-index:2;background:var(--choc);color:var(--cream-on-dark);
  border-radius:20px;padding:15px 24px;box-shadow:0 14px 30px rgba(53,16,25,.3);
  left:-14px;bottom:34px;
}
.tagname .nm{font-family:var(--font-script);font-weight:600;font-size:25px;color:var(--tan);line-height:1}
.tagname .rl{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-top:6px;color:var(--cream-on-dark)}
.tagname--cream{background:var(--tan-soft);color:var(--ink)}
.tagname--cream .nm{color:var(--ink)}
.tagname--cream .rl{color:var(--ink)}
.tagname--right{left:auto;right:-14px;bottom:auto;top:26px}
@media(max-width:640px){.tagname{left:14px}.tagname--right{right:14px;left:auto}}

.has-tag{position:relative}

/* Decorative corner illustrations */
.decor{position:absolute;pointer-events:none;opacity:.10;width:clamp(120px,14vw,210px);z-index:0}
.decor--tl{top:34px;left:26px}
.decor--br{bottom:30px;right:30px}
.decor--tr{top:34px;right:30px}
.sec>.wrap{position:relative;z-index:1}
@media(max-width:760px){.decor{display:none}}

/* ============================================================
   7. Home — hero
   ============================================================ */
.hero{
  position:relative;margin-top:calc((var(--head-h) + 28px) * -1);
  padding-top:calc(var(--head-h) + 28px);
  background:var(--cream-200);
  overflow:hidden;
}
.hero-inner{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,4vw,60px);align-items:center;padding-block:clamp(56px,7vw,96px)}
.hero-copy .lead{margin-top:26px}
.hero-copy .btn{margin-top:38px}
.hero-illo{position:relative;display:grid;place-items:center}
.hero-illo img{width:min(100%,470px);filter:drop-shadow(0 26px 40px rgba(53,16,25,.14))}
.hero-dot{position:absolute;border-radius:50%;background:rgba(185,142,82,.14)}
.hero-dot.a{width:340px;height:340px;top:-40px;right:-60px}
.hero-dot.b{width:150px;height:150px;bottom:-20px;left:0}
@media(max-width:920px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-copy .lead{margin-inline:auto}
  .hero-illo img{width:min(78%,380px)}
}
/* Photo hero variant (used when a hero photo is set in the Customizer) */
.hero--photo{background:var(--choc)}
.hero--photo .hero-bg{position:absolute;inset:0}
.hero--photo .hero-bg img{width:100%;height:100%;object-fit:cover}
.hero--photo .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(38,10,16,.82) 8%,rgba(38,10,16,.5) 46%,rgba(38,10,16,.14) 78%)}
.hero--photo .hero-inner{position:relative;grid-template-columns:minmax(0,700px);padding-block:clamp(90px,12vw,150px)}
.hero--photo h1{color:#FBEEDA}
.hero--photo h1 em{color:var(--tan)}
.hero--photo .eyebrow{color:var(--tan-soft)}
.hero--photo .lead{color:#EBD8C4}

/* ============================================================
   8. Home — no shortcuts pillars
   ============================================================ */
.pillars{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,90px);align-items:start}
.pillar-list li{
  display:grid;grid-template-columns:52px 1fr;gap:8px 20px;
  padding-block:26px;border-top:1px solid rgba(246,231,206,.16);
}
.pillar-list li:last-child{border-bottom:1px solid rgba(246,231,206,.16)}
.pillar-list .no{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--tan)}
.pillar-list h3{font-size:clamp(20px,2.1vw,25px)}
.pillar-list p{grid-column:2;font-size:16px}
@media(max-width:920px){.pillars{grid-template-columns:1fr}}

/* ============================================================
   9. Home — statement / what we bake / cards
   ============================================================ */
.statement{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:clamp(27px,3.9vw,46px);line-height:1.3;max-width:1020px;margin-inline:auto}
.statement em{font-style:italic;color:var(--gold);font-weight:500}
.statement-script{margin-top:34px}
.statement-sub{margin-top:16px}

.bake-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:44px}
.card-feature{
  background:var(--choc);border-radius:var(--r-big);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;box-shadow:var(--shadow-card);
}
.card-feature .cf-media{min-height:330px;background:var(--choc-2);display:grid;place-items:center}
.card-feature .cf-media .photo{width:100%;height:100%;object-fit:cover}
.card-feature .cf-media .illo{width:56%;max-width:320px}
.card-feature .cf-body{padding:clamp(30px,4vw,54px);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.card-feature h3{font-size:clamp(27px,3vw,40px);line-height:1.1}
@media(max-width:840px){.card-feature{grid-template-columns:1fr}.card-feature .cf-media{min-height:230px}}

.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:22px}
@media(max-width:1080px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.card-grid{grid-template-columns:1fr}}
.card{
  background:var(--cream-card);border:1px solid rgba(53,16,25,.06);
  border-radius:var(--r-card);box-shadow:var(--shadow-soft);
  padding:14px 14px 24px;display:flex;flex-direction:column;
  transition:transform .22s ease,box-shadow .22s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)}
.card .badge{position:absolute;top:24px;left:24px;z-index:2}
.card .c-media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1/1;background:var(--cream-100);display:grid;place-items:center;margin-bottom:20px}
.card .c-media .photo{width:100%;height:100%;object-fit:cover}
.card .c-media .illo{width:46%}
.card .c-body{padding-inline:10px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-size:22px}
.card .script{font-size:19px;line-height:1.3}
.card p{font-size:15px}
.card .link-arrow{margin-top:auto;align-self:flex-start;padding-top:12px}

/* ============================================================
   10. Home — about teaser & community
   ============================================================ */
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-block:44px 40px}
@media(max-width:840px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
.ig-grid a.media{transition:transform .22s ease}
.ig-grid a.media:hover{transform:translateY(-4px)}

/* ============================================================
   11. Inner page hero
   ============================================================ */
.page-hero{
  background:var(--cream-200);
  margin-top:calc((var(--head-h) + 28px) * -1);
  padding-top:calc(var(--head-h) + 28px + clamp(50px,6vw,84px));
  padding-bottom:clamp(56px,7vw,90px);
  text-align:center;position:relative;overflow:hidden;
}
.page-hero .lead{margin:24px auto 0}
.page-hero .seal-lg{width:76px;height:76px;color:var(--gold-deep);margin:0 auto 26px}

/* ============================================================
   12. Menu page
   ============================================================ */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;margin-top:36px}
.chips a{
  border:1.5px solid rgba(67,25,31,.2);border-radius:999px;
  padding:11px 21px;font-weight:700;font-size:14px;color:var(--ink);
  background:rgba(255,252,246,.6);transition:all .18s ease;
}
.chips a:hover,.chips a.active{background:var(--choc);border-color:var(--choc);color:var(--cream-on-dark)}

.mi-sec{padding-block:clamp(56px,7vw,92px);border-top:1px solid rgba(67,25,31,.07)}
.mi-sec:first-of-type{border-top:0}
.mi-head{display:flex;align-items:center;gap:15px;margin-bottom:18px}
.mi-num{
  width:44px;height:44px;border:1.6px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-display);font-size:19px;color:var(--gold-deep);flex:0 0 auto;
}
.mi-copy h2{font-size:clamp(30px,3.6vw,46px)}
.mi-copy .script{display:block;margin:10px 0 22px}
.mi-bullets{margin-top:20px;display:grid;gap:13px}
.mi-bullets li{position:relative;padding-left:24px;font-size:16px}
.mi-bullets li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.mi-bullets b{color:var(--ink);font-weight:700}
.mi-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--gold-line);font-style:italic;color:var(--gold-deep);font-size:15px}
.mi-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:20px}
.mi-cols h3{font-size:21px;margin-bottom:8px}
.mi-cols p{font-size:15.5px}
@media(max-width:560px){.mi-cols{grid-template-columns:1fr}}
.mi-media-stack{display:grid;gap:18px}
.mi-media-stack .media--mini{aspect-ratio:16/9}
.mi-media-stack .media--mini .illo{width:34%}

.tipband{
  background:#FBE9C7;border:1px solid var(--gold-line);border-radius:var(--r-card);
  padding:clamp(28px,3.4vw,42px) clamp(26px,4vw,52px);
}
.tipband .eyebrow{margin-bottom:12px}
.tipband p{color:#6E5747;font-size:16.5px}
.tipband b{color:var(--ink)}

.rotate-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.rotate-grid .media{aspect-ratio:1/1}
.rotate-grid .media .cap{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--body-dark)}
@media(max-width:560px){.rotate-grid{gap:12px}}

/* ============================================================
   13. About page
   ============================================================ */
.pullquote{
  border-left:3px solid var(--gold);padding:8px 0 8px 26px;margin-block:30px;
  font-family:var(--font-display);font-weight:600;font-size:clamp(21px,2.4vw,28px);
  color:var(--ink);line-height:1.42;
}
.byline{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-top:26px}
.sec-dark .byline{color:var(--tan)}
.prose p+p{margin-top:18px}
.prose{font-size:16.5px}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,54px);margin-top:54px;text-align:left}
@media(max-width:880px){.values{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.values{grid-template-columns:1fr}}
.value{border-top:2px solid var(--tan);padding-top:22px}
.value .no{font-family:var(--font-display);font-size:21px;color:var(--gold-deep);display:block;margin-bottom:10px}
.value h3{font-size:clamp(21px,2.2vw,26px);margin-bottom:10px}
.value p{font-size:15.5px}

.about-close .statement{color:var(--cream-on-dark);font-size:clamp(26px,3.6vw,42px)}
.about-close .statement em{color:var(--tan)}
.about-close .btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:44px}

/* ============================================================
   14. Contact page
   ============================================================ */
.contact-open{
  background:var(--choc);border-radius:var(--r-big);color:var(--body-dark);
  text-align:center;padding:clamp(44px,6vw,72px) clamp(24px,5vw,70px);
  box-shadow:var(--shadow-card);
}
.contact-open h2{color:var(--cream-on-dark);font-size:clamp(27px,3.5vw,44px);margin-top:22px}
.contact-open h2 em{color:var(--tan)}
.contact-open p{max-width:560px;margin:20px auto 30px}

.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
.map-frame{border-radius:var(--r-card);overflow:hidden;min-height:420px;border:1px solid rgba(53,16,25,.08);box-shadow:var(--shadow-soft);background:var(--cream-card)}
.map-frame iframe{width:100%;height:100%;min-height:420px;border:0;display:block}
.info-stack{display:grid;gap:22px;align-content:start}
.info-card{
  background:var(--cream-card);border:1px solid rgba(53,16,25,.07);
  border-radius:var(--r-card);box-shadow:var(--shadow-soft);
  padding:clamp(26px,3vw,36px) clamp(24px,3vw,38px);
}
.info-card .eyebrow{margin-bottom:14px}
.info-card h3{font-size:clamp(21px,2.3vw,27px);line-height:1.3}
.info-card p{font-size:15.5px;margin-top:10px}
.info-card--band{background:var(--cream-200);border-color:transparent}
.hello-line{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:baseline;font-size:16px;padding-block:9px}
.hello-line .lb{color:var(--body)}
.hello-line a{font-weight:700;color:var(--ink);border-bottom:2px solid var(--gold-line)}
.hello-line a:hover{border-color:var(--gold);color:var(--gold-deep)}
.hello-note{font-style:italic;color:var(--gold-deep);font-size:14.5px;margin-top:14px}
.hello-addr{margin-top:18px;padding-top:18px;border-top:1px solid var(--gold-line);font-size:15px;color:var(--body)}

.allergen-card{
  background:#FBE9C7;border:1px solid var(--gold-line);border-radius:var(--r-big);
  padding:clamp(30px,4vw,52px) clamp(26px,4.5vw,60px);
}
.allergen-card .eyebrow{display:flex;align-items:center;gap:10px}
.allergen-card p{color:#6E5747;font-size:16.5px}
.allergen-card p+p{margin-top:16px}
.allergen-card b{color:var(--ink)}
.allergen-card .script{display:block;margin-top:26px}

.signoff{text-align:center}
.signoff .seal-lg{width:64px;height:64px;color:var(--gold-deep);margin:0 auto 20px}
.signoff .script{color:var(--ink);font-size:clamp(30px,4.4vw,44px)}
.signoff .sub{margin-top:14px;letter-spacing:.06em;font-size:15px}

/* ============================================================
   15. Footer
   ============================================================ */
.site-foot{background:#2C0C14;color:#C9AFA3;margin-top:clamp(70px,9vw,110px)}
.foot-top{display:grid;grid-template-columns:1.3fr .8fr .8fr;gap:clamp(34px,5vw,80px);padding-block:clamp(56px,7vw,84px) clamp(40px,5vw,60px)}
@media(max-width:880px){.foot-top{grid-template-columns:1fr}}
.foot-brand .word{font-family:var(--font-display);font-weight:600;font-size:clamp(40px,4.4vw,58px);letter-spacing:.1em;color:#F3E3CC;line-height:1}
.foot-brand .tg{font-size:11px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:var(--tan);margin-top:14px}
.foot-brand p{margin-top:26px;font-size:15.5px;max-width:340px}
.foot-col h4{font-size:12px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--tan);margin-bottom:22px;font-family:var(--font-body)}
.foot-col li{margin-bottom:13px;font-size:15.5px}
.foot-col a{transition:color .16s ease}
.foot-col a:hover{color:#F3E3CC}
.foot-bottom{border-top:1px solid rgba(246,231,206,.12);padding-block:26px 36px;font-size:13.5px}
.foot-bottom .allergen{max-width:560px;margin-bottom:18px;line-height:1.7}
.foot-bottom .allergen b{color:#EBD8C4}
.foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;letter-spacing:.04em}
.foot-row .hnd{letter-spacing:.16em;font-weight:700;color:#B79C8F}

/* ============================================================
   16. Link in Bio page
   ============================================================ */
.bio-body{background:var(--cream-50);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:clamp(44px,7vw,80px) 22px 46px;font-family:var(--font-body)}
.bio{width:100%;max-width:460px;text-align:center}
.bio .seal-lg{width:74px;height:74px;color:var(--gold-deep);margin:0 auto 24px}
.bio h1{font-size:clamp(27px,7vw,33px);line-height:1.28}
.bio .sub{margin:14px auto 34px;font-size:15.5px;max-width:320px}
.bio-list{display:grid;gap:14px}
.bio-btn{
  display:flex;align-items:center;gap:14px;
  background:var(--cream-card);border:1.5px solid rgba(53,16,25,.1);
  border-radius:999px;padding:17px 24px;
  font-weight:700;font-size:15.5px;color:var(--ink);
  box-shadow:0 6px 18px rgba(53,16,25,.05);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.bio-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(53,16,25,.1);border-color:rgba(53,16,25,.22)}
.bio-btn .ic{font-size:19px;width:26px;text-align:center}
.bio-btn .arr{margin-left:auto;color:var(--gold-deep)}
.bio-btn--gold{background:var(--tan);border-color:var(--tan);box-shadow:0 12px 26px rgba(185,142,82,.35)}
.bio-btn--gold .arr{color:var(--choc)}
.bio-sep{border:0;border-top:1px solid rgba(53,16,25,.1);margin:30px 0 22px}
.bio-social{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bio-foot{margin-top:38px;font-size:13.5px;color:var(--body)}

/* ============================================================
   17. Generic content / blog fallback / Woo-ready shell
   ============================================================ */
.entry-shell{padding-top:clamp(46px,6vw,70px)}
.entry-content{max-width:820px;margin-inline:auto}
.entry-content p+p{margin-top:18px}
.entry-content h2,.entry-content h3{margin:38px 0 14px}
.entry-content a{color:var(--gold-deep);border-bottom:2px solid var(--gold-line)}
.entry-content ul{list-style:disc;padding-left:22px}
.entry-content ol{padding-left:22px}

.woocommerce .wrap a.button,.woocommerce .wrap button.button{
  background:var(--choc);color:var(--cream-on-dark);border-radius:999px;font-family:var(--font-body);font-weight:700;
}
.woocommerce .wrap a.button:hover,.woocommerce .wrap button.button:hover{background:#4A1B27;color:var(--cream-on-dark)}

/* ============================================================
   18. Responsive header
   ============================================================ */
@media(max-width:1020px){
  .nav-main{display:none}
  .head-ig{display:none}
  .burger{display:flex}
  .site-head{top:10px;margin-top:10px}
  :root{--head-h:66px}
  .brand .seal{width:40px;height:40px}
  .brand .word{font-size:20px;letter-spacing:.2em}
}
@media(max-width:640px){
  body{font-size:16px}
  .btn{padding:14px 22px;font-size:14.5px}
  .hero-copy .btn{width:100%;justify-content:center}
  .about-close .btns .btn{width:100%;justify-content:center}
  .card .badge{top:22px;left:22px}
}

/* ============ 19. Late additions: seal size, bio button internals ============ */

.seal--lg{width:92px;height:92px;margin:0 auto 26px}

.bio-lang{display:flex;justify-content:center;margin:0 0 22px}
.bio-head{text-align:center;margin-bottom:30px}
.bio-head .h-md{margin:0 0 10px}
.bio-head .lead{margin:0 auto;max-width:34ch}

.bio-btn{display:flex;align-items:center;gap:14px;text-align:left}
.bio-ico{flex:0 0 auto;font-size:20px;line-height:1;width:38px;height:38px;display:grid;place-items:center;background:var(--cream-100);border-radius:50%}
.bio-btn--gold .bio-ico{background:rgba(255,255,255,.4)}
.bio-txt{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.bio-txt strong{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.02rem;letter-spacing:.01em}
.bio-txt small{font-family:'Quicksand',system-ui,sans-serif;font-size:.8rem;color:var(--body);opacity:.9}
.bio-btn--gold .bio-txt small{color:var(--choc);opacity:.75}
.bio-arrow{flex:0 0 auto;opacity:.45;font-size:1rem}
.bio-social .bio-btn{justify-content:center}
.bio-social .bio-txt{flex:0 0 auto}

/* ============================================================
   20. v1.1 — Refinement layer
   ============================================================ */

/* ---- 20.1 Icons ---- */
.ico{flex:0 0 auto;display:inline-block;vertical-align:middle}

/* ---- 20.2 Announcement bar ---- */
.notice-bar{background:var(--choc);color:var(--body-dark);font-size:13px;font-weight:600;letter-spacing:.03em}
.notice-bar .wrap{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding-block:11px;text-align:center}
.notice-bar .nb-dot{width:7px;height:7px;border-radius:50%;background:var(--tan);flex:0 0 auto;animation:nbPulse 2.6s ease-in-out infinite}
.notice-bar .nb-txt{color:#E4CDBF}
.notice-bar .nb-link{color:var(--tan);font-weight:700;display:inline-flex;align-items:center;gap:7px;border-bottom:1px solid rgba(201,168,116,.4);padding-bottom:1px;transition:color .18s ease,border-color .18s ease}
.notice-bar .nb-link:hover{color:#E9D3AC;border-color:#E9D3AC}
.notice-bar .nb-link .arr{transition:transform .18s ease}
.notice-bar .nb-link:hover .arr{transform:translateX(3px)}
@keyframes nbPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
@media(max-width:560px){
  .notice-bar{font-size:11.5px}
  .notice-bar .wrap{gap:8px;padding-block:9px}
  .notice-bar .nb-link{width:100%;justify-content:center;border:0;padding-bottom:0}
}

/* ---- 20.3 Header refinements ---- */
.site-head .bar{transition:box-shadow .3s ease,background .3s ease,padding .3s ease,min-height .3s ease}
.is-scrolled .site-head .bar{padding-block:7px;min-height:calc(var(--head-h) - 8px)}
.is-scrolled .brand .seal{transform:scale(.92);transition:transform .3s ease}
.brand .seal{transition:transform .3s ease}
.brand:hover .seal{transform:rotate(-8deg)}
.brand .word{transition:letter-spacing .3s ease}

.head-progress{position:absolute;left:26px;right:26px;bottom:0;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
.head-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--tan));transform:scaleX(0);transform-origin:left;transition:transform .1s linear}
.is-scrolled .head-progress{opacity:1}
.head-progress{opacity:0;transition:opacity .3s ease}

.head-ig{display:inline-flex;align-items:center;gap:8px}
.head-ig .ico{width:16px;height:16px}

/* ---- 20.4 Drawer refinements ---- */
.drawer{background:linear-gradient(170deg,var(--cream-50) 0%,var(--cream-100) 100%);overflow-y:auto;padding:0}
.drawer .d-inner{width:100%;max-width:460px;margin:auto;padding:110px 28px 56px;text-align:center;display:flex;flex-direction:column;align-items:center}
.drawer .d-illo{width:clamp(88px,26vw,132px);opacity:.9;margin-bottom:18px}
.drawer .d-nav{display:flex;flex-direction:column;width:100%}
.drawer a.d-link{
  font-family:var(--font-display);font-weight:600;font-size:clamp(28px,8vw,38px);
  color:var(--ink);padding:11px 0;display:block;position:relative;
  opacity:0;transform:translateY(14px);
}
.drawer.open a.d-link{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
.drawer.open a.d-link:nth-child(1){transition-delay:.06s}
.drawer.open a.d-link:nth-child(2){transition-delay:.12s}
.drawer.open a.d-link:nth-child(3){transition-delay:.18s}
.drawer.open a.d-link:nth-child(4){transition-delay:.24s}
.drawer a.d-link::after{content:"";position:absolute;left:50%;right:50%;bottom:6px;height:2px;background:var(--gold);transition:left .25s ease,right .25s ease}
.drawer a.d-link:hover::after{left:32%;right:32%}
.drawer .d-social{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.drawer .d-social .btn{gap:9px}
.drawer .d-meta{margin-top:34px;font-size:13.5px;color:var(--body);display:flex;flex-direction:column;gap:6px}
.drawer .d-meta .d-open{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:11.5px;color:var(--gold-deep)}
body.nav-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){.drawer a.d-link{opacity:1;transform:none}}

/* ---- 20.5 Section polish ---- */
.sec-dark{position:relative}
.sec-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 15% 0%,rgba(201,168,116,.09),transparent 62%);
}
.sec-dark>*{position:relative;z-index:1}
.sec-band+.sec-band,.sec-soft+.sec-soft{padding-top:0}

/* Card hover lift + image zoom */
.card,.mi-card,.value{transition:transform .28s ease,box-shadow .28s ease}
.card:hover,.mi-card:hover{transform:translateY(-5px);box-shadow:0 26px 54px rgba(53,16,25,.14)}
.media{transition:box-shadow .3s ease}
.media .photo{transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.card:hover .media .photo,.media:hover .photo{transform:scale(1.05)}
.media--illo .illo{transition:transform .5s ease}
.media--illo:hover .illo{transform:translateY(-5px) rotate(-2deg)}

/* Staggered reveal children */
[data-stagger]>*{transition-delay:var(--d,0ms)}

/* Numbered lists get a gold rule that grows in */
.pillar,.menu-num{position:relative}

/* ---- 20.6 Footer CTA band ---- */
.foot-cta{
  background:linear-gradient(160deg,var(--cream-200) 0%,var(--cream-100) 100%);
  text-align:center;padding-block:clamp(58px,7vw,92px);
  position:relative;overflow:hidden;
}
.foot-cta .eyebrow{margin-bottom:16px}
.foot-cta h2{max-width:20ch;margin:0 auto 30px}
.foot-cta .btn{gap:10px;flex-wrap:wrap;justify-content:center;text-align:center;white-space:normal}
.foot-cta .btn .ico{width:18px;height:18px}
@media(max-width:560px){.foot-cta .btn{width:100%;font-size:14px;padding:16px 20px}}

/* ---- 20.7 Footer refinements ---- */
.site-foot{position:relative;overflow:hidden;margin-top:0}
.foot-decor{position:absolute;right:-40px;bottom:-30px;width:clamp(150px,18vw,260px);opacity:.07;pointer-events:none}
.foot-social{display:flex;gap:11px;margin-top:26px}
.foot-social a{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(246,231,206,.18);color:#D9C0B2;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.foot-social a:hover{background:var(--tan);border-color:var(--tan);color:var(--choc);transform:translateY(-3px)}
.foot-social .ico{width:19px;height:19px}
.foot-open{color:var(--tan);font-weight:700;letter-spacing:.04em}
.foot-dir{display:inline-flex;align-items:center;gap:7px;color:var(--tan)!important;font-weight:700;border-bottom:1px solid rgba(201,168,116,.35);padding-bottom:2px}
.foot-dir .arr{transition:transform .18s ease}
.foot-dir:hover .arr{transform:translateX(3px)}
.foot-col li{margin-bottom:12px}
@media(max-width:880px){
  .foot-top{gap:40px}
  .foot-brand p{max-width:none}
}

/* ---- 20.8 Back to top ---- */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:48px;height:48px;border-radius:50%;
  background:var(--choc);color:var(--cream-on-dark);
  display:grid;place-items:center;font-size:19px;
  box-shadow:0 12px 28px rgba(53,16,25,.3);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease,background .2s ease;
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold-deep)}
body.nav-open .to-top{opacity:0;visibility:hidden}
@media(max-width:640px){.to-top{width:42px;height:42px;right:14px;bottom:14px}}

/* ---- 20.9 Link in Bio polish ---- */
.bio-body{
  background:
    radial-gradient(90% 55% at 50% 0%,var(--cream-200) 0%,transparent 60%),
    var(--cream-50);
}
.bio-btn{position:relative;overflow:hidden}
.bio-btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .7s ease;
}
.bio-btn:hover::after{transform:translateX(120%)}
.bio-btn:active{transform:translateY(0) scale(.99)}
.bio-social .bio-btn{padding-inline:18px}
@media(max-width:380px){
  .bio-social{grid-template-columns:1fr}
  .bio-btn{padding:15px 18px;font-size:14.5px}
}

/* ---- 20.10 Typography rhythm ---- */
.h-hero{text-wrap:balance}
.h-xl,.h-lg{text-wrap:balance}
.lead,.foot-cta h2{text-wrap:pretty}
p{text-wrap:pretty}

/* ---- 20.11 Breakpoint tuning ---- */
@media(max-width:1180px){
  :root{--wrap:1100px}
}
@media(max-width:1020px){
  .hero-inner{grid-template-columns:1fr;gap:34px}
  .hero-copy{text-align:center}
  .hero-copy .lead{margin-inline:auto}
}
@media(max-width:820px){
  .sec{padding-block:clamp(58px,8vw,84px)}
  .foot-cta h2{max-width:none}
}
@media(max-width:640px){
  :root{--r-card:20px;--r-big:26px}
  .eyebrow{letter-spacing:.28em;font-size:11px;margin-bottom:16px}
  .tagname{padding:12px 18px}
  .tagname .nm{font-size:21px}
  .tagname .rl{font-size:10px;letter-spacing:.18em}
  .grid-2{gap:30px}
}
@media(max-width:420px){
  .brand .word{font-size:17px;letter-spacing:.16em}
  .brand .seal{width:34px;height:34px}
  .btn{font-size:14px;padding:13px 20px}
}

/* ---- 20.12 Print ---- */
@media print{
  .notice-bar,.site-head,.drawer,.to-top,.foot-cta,.foot-social,.head-progress{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .sec-dark{background:#fff!important;color:#000!important}
  .sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark p{color:#000!important}
  .media,.card{box-shadow:none;border:1px solid #ddd}
  a{text-decoration:underline}
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* ---- 20.13 Bio labelled divider ---- */
.bio-sep{
  display:flex;align-items:center;gap:14px;
  margin:32px 0 20px;border:0;
  font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);
}
.bio-sep::before,.bio-sep::after{content:"";flex:1;height:1px;background:rgba(53,16,25,.12)}
.bio-sep span{flex:0 0 auto}
.bio-social .bio-ico{background:transparent}
.bio-social .bio-btn .ico{color:var(--gold-deep)}

/* ---- 20.14 Stagger children of a revealed group ---- */
[data-reveal][data-stagger]>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0ms)}
[data-reveal][data-stagger].in>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  [data-reveal][data-stagger]>*{opacity:1;transform:none;transition:none}
}

/* ============================================================
   21. Elementor integration
   ============================================================ */

/* Full-bleed shell: let Elementor sections run edge to edge */
.elementor-shell{width:100%}
.elementor-shell>.elementor{width:100%}

/* Keep Elementor's default container matched to the theme wrap */
.elementor-section.elementor-section-boxed>.elementor-container,
.e-con{--container-max-width:1240px}

/* Elementor resets that fight the theme */
.elementor-widget-container p:last-child{margin-bottom:0}
.elementor a{color:inherit}
.elementor-widget-text-editor a,
.elementor-widget-theme-post-content a{color:var(--gold-deep);border-bottom:2px solid var(--gold-line)}

/* Cravié widget wrappers */
.cravie-heading .eyebrow{margin-bottom:18px}
.cravie-heading .lead{margin-top:20px}
.cravie-heading[class*="sec-dark"] .lead,
.cravie-heading.sec-dark p{color:var(--body-dark)}
.cravie-heading .script{margin-top:10px}
.cravie-statement .statement-script{margin-top:18px}
.cravie-media-wrap{position:relative}
.cravie-btn-wrap{line-height:1}
.cravie-seal-wrap .seal{color:var(--gold-deep)}

/* Cravié widgets need the section-dark colour context when dropped
   into a dark Elementor section without the .sec-dark wrapper */
.elementor-section[data-cravie-dark] :is(h1,h2,h3){color:var(--cream-on-dark)}
.elementor-section[data-cravie-dark] p{color:var(--body-dark)}

/* Utility classes for Elementor's "CSS Classes" field */
.cravie-band{background:var(--cream-200)}
.cravie-soft{background:var(--cream-100)}
.cravie-dark{background:var(--choc);color:var(--body-dark)}
.cravie-dark :is(h1,h2,h3){color:var(--cream-on-dark)}
.cravie-dark :is(h1,h2,h3) em{color:var(--tan)}
.cravie-dark p{color:var(--body-dark)}
.cravie-dark .eyebrow{color:var(--tan)}
.cravie-card-surface{background:var(--cream-card);border:1px solid rgba(53,16,25,.06);border-radius:var(--r-card);box-shadow:var(--shadow-soft)}
.cravie-round{border-radius:var(--r-big);overflow:hidden}
.cravie-shadow{box-shadow:var(--shadow-card)}
.cravie-center{text-align:center}
.cravie-narrow{max-width:820px;margin-inline:auto}

/* Editor-only: make empty Cravié widgets visible while building */
.elementor-editor-active .cravie-heading:empty::before,
.elementor-editor-active .cravie-statement:empty::before{
  content:"Cravié block — add content in the panel";
  display:block;padding:22px;border:1px dashed var(--gold-line);
  border-radius:14px;color:var(--gold-deep);font-size:14px;text-align:center;
}

/* Elementor Pro Theme Builder: hide the theme header/footer when
   a custom Pro header or footer is in play */
body.elementor-page .site-head.is-replaced,
body.elementor-page .site-foot.is-replaced{display:none}

/* ---- 21.1 Cravié widgets used outside their designed sections ---- */
.cravie-heading .pillar-list,
.elementor .pillar-list{margin:0}
.elementor .pillar-list.sec-dark{background:transparent}
.elementor .card{height:100%}
.elementor .cravie-statement .statement{margin-inline:auto}
.elementor .bio-btn{width:100%}

/* ============================================================
   22. v1.4 — Header hardening & spacing fixes
   ============================================================ */

/* ---- 22.1 Primary nav: real list, no markers, no inherited padding ----
   WordPress adds .menu-item to every nav <li>; nothing in the theme may
   style that class or the header inflates. These resets are defensive
   against plugin CSS too. */
.nav-main>ul,
.nav-main .nav-list{
  display:flex;align-items:center;
  gap:clamp(16px,2.2vw,30px);
  list-style:none;margin:0;padding:0;
}
.nav-main li,
.nav-main .menu-item{
  list-style:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  display:block;
  line-height:1;
}
.nav-main li::marker{content:none}
.nav-main li::before{display:none!important;content:none!important}
.nav-main a{display:inline-block;line-height:1.2}

/* ---- 22.2 Lock the header bar height ---- */
.site-head .bar{
  height:var(--head-h);
  min-height:var(--head-h);
  max-height:var(--head-h);
  overflow:visible;
  flex-wrap:nowrap;
}
.is-scrolled .site-head .bar{
  height:calc(var(--head-h) - 8px);
  min-height:calc(var(--head-h) - 8px);
  max-height:calc(var(--head-h) - 8px);
  padding-block:0;
}
.site-head .bar>*{min-width:0}
.head-actions{flex:0 0 auto}
.brand{flex:0 1 auto;overflow:hidden}
.brand .word{white-space:nowrap}
.nav-main{flex:0 1 auto}

/* ---- 22.3 Button rows ---- */
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.sec-center .btn-row,
.btn-row.is-center{justify-content:center}
@media(max-width:560px){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%;justify-content:center}
}

/* ---- 22.4 Statement block rhythm ---- */
.statement{margin-inline:auto;max-width:22ch}
.sec-center .statement{max-width:26ch}
.statement-sub{margin-top:26px;max-width:60ch;margin-inline:auto;font-size:16.5px}
.statement-script{margin-top:34px}
.statement-script+.statement-sub{margin-top:18px}
.sec-band .statement-sub:last-child{padding-bottom:4px}

/* ---- 22.5 Dark sections with an empty media slot ---- */
.sec-dark .media--illo{min-height:220px}
.sec-dark .grid-2{align-items:center}

/* ---- 22.6 Section spacing consistency ---- */
.sec+.sec{padding-top:clamp(64px,8vw,104px)}
.sec-band+.sec,
.sec-dark+.sec{padding-top:clamp(72px,9vw,118px)}
.page-hero{padding-block:clamp(64px,8vw,110px)}
.page-hero .lead{margin-top:24px;margin-inline:auto}

/* ---- 22.7 Menu page sections (renamed from .menu-item) ---- */
.mi-sec>.wrap{position:relative;z-index:1}

/* ---- 22.8 Language switcher — sliding flag toggle ---- */
.lang-switch{
  display:inline-flex;align-items:center;gap:2px;
  background:var(--cream-100);
  border:1px solid rgba(53,16,25,.08);
  border-radius:999px;padding:3px;flex:0 0 auto;
}
.lang-switch:empty{display:none}

/* Google-mode: a real two-state toggle with a sliding highlight */
.lang-switch--google{position:relative;gap:0;padding:4px}
.lang-switch--google .lang-btn{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.06em;
  padding:7px 13px;border-radius:999px;line-height:1;color:#8A756B;
  background:transparent;border:0;cursor:pointer;white-space:nowrap;
  transition:color .2s ease;
}
.lang-switch--google .lang-btn .flag{
  width:19px;height:13px;border-radius:2px;display:block;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(53,16,25,.12);overflow:hidden;
  transition:transform .2s ease;
}
.lang-switch--google .lang-btn .lang-code{line-height:1}
.lang-switch--google .lang-btn:hover{color:var(--ink)}
.lang-switch--google .lang-btn:hover .flag{transform:scale(1.08)}
.lang-switch--google .lang-btn.is-on{color:var(--cream-on-dark)}
.lang-switch--google .lang-btn.is-on .flag{box-shadow:0 0 0 1px rgba(246,231,206,.35)}

/* The pill that slides beneath the active option */
.lang-slide{
  position:absolute;top:4px;bottom:4px;left:0;z-index:1;
  border-radius:999px;background:var(--choc);
  box-shadow:0 6px 16px rgba(53,16,25,.22);
  transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
/* Hide the slider until JS has measured it (prevents a flash at 0,0) */
.lang-switch--google:not(.is-ready) .lang-slide{opacity:0}
.lang-switch--google.is-ready .lang-slide{opacity:1;transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1),opacity .2s ease}

/* Generic button styling for non-toggle (plugin) modes */
.lang-btn{
  font-family:var(--font-body);font-weight:700;font-size:12.5px;letter-spacing:.06em;
  padding:8px 15px;border-radius:999px;line-height:1;color:#8A756B;
  background:transparent;border:0;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.lang-switch:not(.lang-switch--google) .lang-btn:hover{color:var(--ink)}
.lang-switch:not(.lang-switch--google) .lang-btn.is-on{background:var(--choc);color:var(--cream-on-dark)}

/* Plugin switchers dropped into the same slot */
.lang-switch .pll-switcher-select,
.lang-switch select{border:0;background:transparent;font-family:var(--font-body);font-weight:700;font-size:12.5px;color:var(--ink);padding:6px 10px}
.lang-switch ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.lang-switch li{list-style:none;margin:0}
.lang-switch a{font-weight:700;font-size:12.5px;padding:8px 14px;border-radius:999px;color:#8A756B}
.lang-switch a.is-on,.lang-switch .current-lang a{background:var(--choc);color:var(--cream-on-dark)}

@media(max-width:1180px){
  .lang-btn{padding:7px 12px;font-size:12px}
}
@media(max-width:1020px){
  .lang-switch{order:-1}
}
@media(max-width:420px){
  .lang-switch{display:none}
}

/* Drawer copy of the switcher */
.drawer .lang-switch{margin-top:26px;display:inline-flex}

/* ============================================================
   23. v1.0.3 — Responsive centering fixes
   ============================================================ */

/* ---- 23.1 Letter-spacing pushes centred text to the right ----
   letter-spacing adds trailing space after the LAST letter too, so any
   centred uppercase label (eyebrow, tag) drifts right — most visible on
   mobile and in longer Spanish words. Pull that trailing space back. */
.sec-center .eyebrow,
.page-hero .eyebrow,
.contact-open .eyebrow,
.foot-cta .eyebrow,
[style*="text-align:center"] .eyebrow,
.cravie-heading[style*="center"] .eyebrow{
  margin-right:calc(-1 * .38em);
  padding-left:.38em; /* balances the block so the text optically centres */
}
.tag-soon{margin-right:calc(-1 * .14em)}

/* Eyebrows that sit in a flex/inline context shouldn't inherit the pull */
.info-card .eyebrow,
.allergen-card .eyebrow{margin-right:0;padding-left:0}

/* ---- 23.2 Google Translate wraps text in <font> tags ----
   Those inline wrappers can add stray width. Keep them inert. */
font{all:unset;font:inherit;color:inherit}
.goog-text-highlight{background:none!important;box-shadow:none!important;padding:0!important}
body{top:0!important} /* cancel Google's banner offset */
html[data-lang] .skiptranslate{display:none!important}

/* ---- 23.3 Nothing may cause a horizontal scroll on mobile ---- */
html,body{overflow-x:hidden;max-width:100%}
.wrap{width:100%}
img,svg,video{max-width:100%}

/* ---- 23.4 Centred sections: make sure every child centres ---- */
.sec-center>.wrap>*,
.page-hero .wrap>*{margin-inline:auto}
.sec-center .lead,
.page-hero .lead,
.contact-open p{max-width:60ch;margin-inline:auto}
.sec-center .btn-row,
.page-hero .btn-row,
.contact-open .btn-row{justify-content:center}

/* ---- 23.5 Mobile: tighten the centred rhythm ---- */
@media(max-width:640px){
  .sec-center .statement,
  .statement{max-width:100%}
  .btn-row{justify-content:center;align-items:center}
  .btn-row .btn{width:100%;max-width:340px;margin-inline:auto}

  /* eyebrows: on small screens the drift is worst — recentre hard */
  .eyebrow{
    letter-spacing:.28em;
    margin-right:calc(-1 * .28em);
    padding-left:.28em;
  }

  .pill-dot{margin-inline:auto}
  .contact-open{padding-inline:22px}
  .info-card{text-align:left}
}

/* ---- 23.6 Contact page: centre the intro + hello card properly ---- */
.contact-open>*{margin-inline:auto}
.card-dark{text-align:center}
.card-dark>*{margin-inline:auto}
.card-dark .hello-line,
.card-dark p{max-width:52ch;margin-inline:auto}

/* ---- 23.7 Menu page hero + chips centring on mobile ---- */
@media(max-width:640px){
  .chips{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;margin-inline:calc(-1 * clamp(20px,4.5vw,48px));
    padding-inline:clamp(20px,4.5vw,48px);
    scrollbar-width:none;
  }
  .chips::-webkit-scrollbar{display:none}
  .chips a{flex:0 0 auto}
  .page-hero .seal-lg{margin-inline:auto}
}

/* ============================================================
   23. v1.0.3 — Mobile centering + Google-translate alignment
   ============================================================ */

/* ---- 23.1 Google Translate must not shift or restyle text ----
   Google wraps every translated run in <font> tags. Left unchecked they
   add spacing and can knock centred blocks to the right. Neutralise them. */
font{font:inherit!important;color:inherit!important;background:none!important;
  vertical-align:baseline!important;letter-spacing:inherit!important;margin:0!important;padding:0!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
/* Google can add a top offset to <body>; force it flush */
body{top:0!important;position:relative}

/* ---- 23.2 Kill any horizontal drift on small screens ----
   A single overflowing element makes the whole page scroll sideways, which
   reads as "everything is shifted right". Contain it. */
html{overflow-x:hidden}
body{max-width:100%;overflow-x:hidden}
.wrap{width:100%}
*{min-width:0}

/* ---- 23.3 Centre the centred sections properly on mobile ----
   max-width + margin-inline:auto only centres if the box is narrower than
   its parent; at small widths some blocks hit 100% and the auto margins do
   nothing, so we add explicit centering with padding safety. */
.sec-center{padding-inline:0}
.sec-center>.wrap,
.wrap.sec-center{text-align:center}
.sec-center .statement,
.sec-center .statement-sub,
.sec-center .lead,
.sec-center .eyebrow,
.sec-center .statement-script,
.sec-center h1,.sec-center h2,.sec-center h3{
  margin-left:auto;margin-right:auto;
}
.sec-center .btn-row{justify-content:center}

/* Notice bar text truly centred even when it wraps */
.notice-bar .wrap{justify-content:center;text-align:center}

@media(max-width:760px){
  /* Give every centred section symmetric breathing room */
  .sec-center .statement{max-width:100%;padding-inline:6px}
  .sec-center .statement-sub,
  .sec-center .lead{max-width:100%;padding-inline:4px}

  /* Hero / statement type sizes that don't overflow narrow screens */
  .statement{font-size:clamp(24px,7.2vw,34px);line-height:1.32}
  .h-hero{font-size:clamp(32px,9vw,46px)}
  .h-xl{font-size:clamp(28px,8vw,40px)}

  /* Button rows: full-width, stacked, centred */
  .btn-row{justify-content:center}
  .sec-center .btn-row .btn{margin-inline:auto}
}

@media(max-width:560px){
  .wrap{padding-inline:20px}
  .btn-row{flex-direction:column;align-items:center}
  .btn-row .btn{width:100%;max-width:340px;justify-content:center}

  /* Contact + about closing blocks centre cleanly */
  .contact-grid,.about-close .wrap,.foot-cta .wrap{text-align:center}
  .contact-card{text-align:left}

  /* Name tags don't hang off the edge */
  .tagname{left:12px;right:auto}
  .tagname--right{right:12px;left:auto}
}

/* ---- 23.4 Contact page: centre the intro on desktop too ---- */
.contact-hero .wrap,
.page-hero.sec-center .wrap{margin-inline:auto}
.contact-hero .lead{margin-inline:auto}

/* ---- 23.5 Language pills sit inside the drawer neatly ---- */
.drawer .lang-switch{align-self:center}

/* ---- 23.6 Contact "open" panel: keep the button centred on desktop ---- */
.contact-open{text-align:center}
.contact-open .btn-row{
  max-width:none;margin:26px auto 0;
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
}
.contact-open .btn-row .btn{margin:0}

/* ============================================================
   24. v1.0.1 — Button centering + section padding polish
   ============================================================ */

/* ---- 24.1 Contact "finishing touches" button: truly centred ----
   The button lives in a <p class="btn-row">, which also matches
   ".contact-open p { max-width:560px }". That narrow, auto-centred box
   made justify-content:center centre the button inside 560px, not inside
   the whole dark band — so it sat left of centre. Force full width. */
.contact-open .btn-row,
.contact-open p.btn-row{
  max-width:100%!important;
  width:100%;
  margin-left:0;margin-right:0;
  display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;gap:14px;
  text-align:center;
}
.contact-open .btn-row .btn{margin:0 auto;flex:0 0 auto}

/* Same guarantee for every centred button row across the site */
.sec-center .btn-row,
.page-hero .btn-row,
.about-close .btn-row{
  max-width:100%;width:100%;
  justify-content:center;margin-inline:auto;
}
.sec-center .btn-row .btn,
.about-close .btn-row .btn{flex:0 0 auto}

/* ---- 24.2 Even section padding on the finishing-touches band ---- */
.contact-open{padding-block:clamp(48px,6vw,74px)}

@media(max-width:560px){
  .contact-open{padding-inline:22px}
  .contact-open .btn-row .btn{width:100%;max-width:340px}
}

/* ============================================================
   25. Contact "Say hello" card — proper padding + contrast
   ============================================================
   Was .card.card-dark: light-text colours on a light card = washed
   out, and .card's 14px product-card padding was far too tight for a
   text box. This is a clean light card with dark, readable text. */
.hello-card{
  padding:clamp(34px,5vw,56px) clamp(28px,5vw,60px);
  text-align:center;align-items:center;
  border-radius:var(--r-card);
}
.hello-card:hover{transform:none;box-shadow:var(--shadow-soft)}
.hello-card .eyebrow{margin:0 0 14px}
.hello-card .h-md{margin:0 0 8px;color:var(--ink)}
.hello-card .h-md em{color:var(--gold-deep)}

.hello-card .hello-lines{
  margin:22px auto 0;width:100%;max-width:340px;
  display:flex;flex-direction:column;gap:2px;
}
.hello-card .hello-line{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:16px;padding:12px 4px;margin:0;
  border-bottom:1px solid rgba(53,16,25,.07);
}
.hello-card .hello-lines .hello-line:last-child{border-bottom:0}
.hello-card .hello-line .lb{color:var(--body);font-weight:600;letter-spacing:.01em}
.hello-card .hello-line a{
  font-weight:700;color:var(--ink);
  border-bottom:2px solid var(--gold-line);white-space:nowrap;
}
.hello-card .hello-line a:hover{border-color:var(--gold);color:var(--gold-deep)}

.hello-card .hello-note{
  font-style:italic;color:var(--gold-deep);font-size:14.5px;
  margin:22px auto 0;max-width:44ch;
}
.hello-card .hello-addr{
  margin:24px auto 0;padding-top:22px;
  border-top:1px solid var(--gold-line);
  font-size:15px;color:var(--body);width:100%;
}

@media(max-width:560px){
  .hello-card .hello-line{flex-direction:column;align-items:center;gap:4px;text-align:center}
}

/* ============================================================
   22. Cravié × Elementor — type & colour defaults (kit-proof, editable)
   Every selector below is specificity (0,3,0): high enough to beat
   Elementor's Global Kit defaults (~0,2,0), but LOWER than Elementor's
   per-widget CSS (0,4,0) — so the design is correct out of the box AND
   any size/colour you set on a widget in the editor still wins. No !important.
   ============================================================ */

/* base: all Elementor headings use the display font + ink colour */
.elementor .elementor-widget-heading .elementor-heading-title{font-family:var(--font-display);font-weight:600;color:var(--ink)}

/* size classes */
.elementor .h-hero .elementor-heading-title{font-size:clamp(42px,6.2vw,76px);line-height:1.12}
.elementor .h-xl   .elementor-heading-title{font-size:clamp(34px,4.6vw,58px);line-height:1.12}
.elementor .h-lg   .elementor-heading-title{font-size:clamp(28px,3.6vw,44px);line-height:1.12}
.elementor .h-md   .elementor-heading-title{font-size:clamp(22px,2.5vw,29px);line-height:1.2}
.elementor .h-sm   .elementor-heading-title{font-size:clamp(19px,2vw,23px);line-height:1.25}

/* bare titles (no h-* class) — size only */
.card .c-body .elementor-heading-title{font-size:22px}
.card-feature .cf-body .elementor-heading-title{font-size:clamp(27px,3vw,40px);line-height:1.1}
.mi-copy .elementor-widget-heading .elementor-heading-title{font-size:clamp(30px,3.6vw,46px)}
.mi-cols .elementor-widget-heading .elementor-heading-title{font-size:21px}

/* eyebrow */
.elementor .eyebrow .elementor-heading-title,.elementor.eyebrow .elementor-heading-title{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);line-height:1.4}

/* gold italic emphasis */
.elementor .elementor-heading-title em{color:var(--gold);font-style:italic;font-weight:500}

/* body copy */
.elementor .elementor-widget-text-editor{font-family:var(--font-body);color:var(--body);font-size:17px;line-height:1.75;font-weight:500}
.elementor .lead p,.elementor .lead{font-size:clamp(17px,1.6vw,19px);color:var(--body)}
.elementor .prose p{margin-bottom:14px}

/* statement + script */
.elementor .statement p,.elementor .statement{font-family:var(--font-display);font-weight:600;font-size:clamp(27px,3.9vw,46px);line-height:1.3;color:var(--ink)}
.elementor .script p,.elementor .script{font-family:var(--font-script);color:var(--gold);font-weight:600}
.elementor .script-xl{font-size:clamp(30px,4.5vw,46px)}
.elementor .script-lg{font-size:clamp(24px,3vw,32px)}
.elementor .script-md{font-size:clamp(20px,2.2vw,25px)}

/* dark sections → cream text */
.elementor .sec-dark .elementor-heading-title{color:var(--cream-on-dark)}
.elementor .sec-dark .elementor-widget-text-editor{color:var(--body-dark)}
.sec-dark .lead p{color:var(--body-dark)}
.sec-dark .eyebrow .elementor-heading-title{color:var(--tan)}
.sec-dark .elementor-heading-title em{color:var(--tan)}
.elementor .card-dark .elementor-heading-title{color:var(--cream-on-dark)}
.card-dark .elementor-widget-text-editor{color:var(--body-dark)}
.card-dark .eyebrow .elementor-heading-title{color:var(--tan)}

/* hero photo variant → cream text over the image */
.hero--photo .h-hero .elementor-heading-title{color:#FBEEDA}
.hero--photo .h-hero em{color:var(--tan)}
.hero--photo .eyebrow .elementor-heading-title{color:var(--tan-soft)}
.elementor .hero--photo .lead p{color:#EBD8C4}
/* ============================================================
   23. Final polish — mobile responsive, footer legal, smoothness
   ============================================================ */

/* Footer legal links */
.foot-legal{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.foot-legal a{color:var(--body);border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.foot-legal a:hover{color:var(--gold-deep);border-bottom-color:var(--gold-line)}

/* Header + drawer smoothness (reinforce) */
.site-head,.site-head .bar,.notice-bar{transition:background .3s ease,box-shadow .3s ease,padding .28s ease,transform .3s ease}
.drawer{transition:opacity .32s ease,visibility .32s ease}
.to-top{transition:opacity .25s ease,transform .25s ease,background .2s ease}

/* ---- Mobile type scale for Elementor headings (match the theme's mobile scale) ---- */
@media (max-width:640px){
  .elementor .h-hero .elementor-heading-title{font-size:clamp(30px,8.6vw,44px);line-height:1.14}
  .elementor .h-xl  .elementor-heading-title{font-size:clamp(26px,7vw,38px)}
  .elementor .h-lg  .elementor-heading-title{font-size:clamp(24px,6.2vw,32px)}
  .elementor .h-md  .elementor-heading-title{font-size:clamp(21px,5.4vw,26px)}
  .elementor .statement,.elementor .statement p{font-size:clamp(22px,6.2vw,32px)}
  .elementor .mi-copy>.elementor-widget-heading .elementor-heading-title{font-size:clamp(26px,7vw,36px)}
  .elementor .card-feature .cf-body .elementor-heading-title{font-size:clamp(24px,6.6vw,32px)}
  .elementor .hero.hero--photo{min-height:auto}
  .elementor .hero.hero--photo .hero-inner{padding-block:clamp(54px,15vw,88px)}
}

/* ---- Mobile UX:tap targets, spacing, media ---- */
@media (max-width:781px){
  .elementor .e-con.grid-2,
  .elementor .e-con.contact-grid,
  .elementor .e-con.card-feature{gap:26px!important}
  .elementor .btn-row{flex-wrap:wrap;gap:12px}
  .elementor .card-feature.card-dark{border-radius:24px}
  .foot-row{flex-direction:column;gap:12px;text-align:center;align-items:center}
  .foot-legal{justify-content:center}
}
@media (max-width:480px){
  .elementor .btn.btn-lg,
  .elementor .btn-row .btn{width:100%;justify-content:center}
  .elementor .e-con.wrap{padding-inline:20px}
  .bio{padding-left:16px;padding-right:16px}
}

/* Smooth focus + hover on interactive elements inside Elementor */
.elementor .btn,.elementor .link-arrow,.elementor .bio-btn{transition:transform .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease,border-color .18s ease}