:root{
    --bg:#F7F9F4;
    --surface:#FFFFFF;
    --surface-2:#EDF3E8;
    --ink:#1C2A1F;
    --ink-soft:#5E6B5B;
    --line:#DEE7D6;
    --primary:#1E7A4C;
    --primary-dark:#155A38;
    --primary-soft:#DEF0E5;
    --accent:#C9962E;
    --accent-dark:#A67720;
    --accent-soft:#F6EAD0;
    --danger:#C0392B;
    /* Faixa de marca (header + hero) — replica o degradê/luz do site de referência (Agrolaf) */
    --brand-deep:#0D0628;
    --brand-mid:#2C1240;
    --brand-glow:#4C1F60;
    --brand-gold:#CE9C1C;
    --brand-gold-bright:#E8C34A;
    --brand-gold-dark:#8B6B0E;
    --brand-cream:#F6F1E7;
    --shadow: 0 14px 34px -16px rgba(28,42,31,.35);
    --shadow-sm: 0 6px 16px -10px rgba(28,42,31,.3);
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 9px;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#101911;
      --surface:#182319;
      --surface-2:#1D2A1E;
      --ink:#EDF1E9;
      --ink-soft:#AAB6A4;
      --line:#2A3A2B;
      --primary:#6FCB98;
      --primary-dark:#4FAE79;
      --primary-soft:#1C3327;
      --accent:#E0B156;
      --accent-dark:#F2C879;
      --accent-soft:#3A2C13;
      --danger:#E5766A;
      --shadow: 0 16px 36px -16px rgba(0,0,0,.6);
      --shadow-sm: 0 8px 18px -10px rgba(0,0,0,.55);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#101911;
    --surface:#182319;
    --surface-2:#1D2A1E;
    --ink:#EDF1E9;
    --ink-soft:#AAB6A4;
    --line:#2A3A2B;
    --primary:#6FCB98;
    --primary-dark:#4FAE79;
    --primary-soft:#1C3327;
    --accent:#E0B156;
    --accent-dark:#F2C879;
    --accent-soft:#3A2C13;
    --danger:#E5766A;
    --shadow: 0 16px 36px -16px rgba(0,0,0,.6);
    --shadow-sm: 0 8px 18px -10px rgba(0,0,0,.55);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  body{background:var(--bg); color:var(--ink);}
  #app{
    font-family:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 1160px;
    margin: 0 auto;
    padding-inline: 20px;
    line-height:1.55;
    overflow-x:clip;
  }
  h1,h2,h3{
    font-family:'Fraunces', 'Iowan Old Style', Georgia, serif;
    font-weight:600;
    text-wrap:balance;
    margin: 0;
    color: var(--ink);
  }
  a{color:inherit;}
  button{font-family:inherit;}
  .eyebrow{
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--primary);
  }
  :root[data-theme="dark"] .eyebrow, @media (prefers-color-scheme:dark){ .eyebrow{ color:var(--primary);} }
  .muted{color:var(--ink-soft);}
  .tnum{font-variant-numeric:tabular-nums;}
  .visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

  /* ---------- Header ---------- */
  .site-header{
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 40;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 16px 20px;
    margin-inline: -20px;
    background:
      radial-gradient(ellipse 900px 70px at 50% -40%, var(--brand-glow), transparent 70%),
      linear-gradient(165deg, var(--brand-mid), var(--brand-deep) 85%);
    border-bottom: 1px solid rgba(246,241,231,.1);
    transition: padding .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
  }
  .site-header.scrolled{
    padding-block: 10px;
    box-shadow: var(--shadow);
    border-color: rgba(246,241,231,.18);
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Fraunces', serif;
    font-weight:700;
    font-size:1.15rem;
    text-decoration:none;
    color: var(--brand-cream);
  }
  .brand-mark{
    width:38px; height:38px;
    border-radius:11px;
    background: linear-gradient(150deg, var(--brand-gold-bright), var(--brand-gold-dark));
    display:grid; place-items:center;
    font-size:1.1rem;
    box-shadow: 0 6px 16px -8px rgba(0,0,0,.6);
    border:1px solid rgba(246,241,231,.35);
    flex-shrink:0;
  }
  .brand small{
    display:block;
    font-family:'Manrope',sans-serif;
    font-weight:600;
    font-size:.62rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color: rgba(246,241,231,.65);
  }
  .nav-links{
    display:flex;
    gap:26px;
    list-style:none;
    margin:0; padding:0;
  }
  .nav-links a{
    text-decoration:none;
    font-weight:600;
    font-size:.92rem;
    color: rgba(246,241,231,.82);
    padding-block:6px;
    border-bottom:2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
  }
  .nav-links a:hover{ color: var(--brand-cream); border-color: var(--brand-gold); }
  .header-actions{ display:flex; align-items:center; gap:8px; }
  .icon-btn{
    width:42px; height:42px;
    border-radius:50%;
    border:1px solid rgba(246,241,231,.3);
    background: rgba(246,241,231,.1);
    display:grid; place-items:center;
    cursor:pointer;
    font-size:1.05rem;
    color: var(--brand-cream);
    backdrop-filter: blur(6px);
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  }
  .icon-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); border-color: var(--brand-gold); }
  .icon-btn:active{ transform:translateY(0) scale(.94); }
  .icon-btn[hidden]{ display:none; }
  .cart-btn{ position:relative; }
  .cart-count{
    position:absolute; top:-6px; right:-6px;
    min-width:20px; height:20px; padding:0 5px;
    border-radius:999px;
    background:var(--accent);
    color:#fff;
    font-size:.68rem; font-weight:800;
    display:grid; place-items:center;
    transform:scale(0);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  }
  .cart-count.show{ transform:scale(1); }
  .cart-count.bump{ animation: bump .4s cubic-bezier(.34,1.56,.64,1); }
  @keyframes bump{ 0%{transform:scale(1);} 40%{transform:scale(1.45);} 100%{transform:scale(1);} }

  /* ---------- Hero ---------- */
  .hero{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap:40px;
    align-items:center;
    padding-block: 52px 46px;
    padding-inline: 20px;
    margin-inline: -20px;
    background:
      radial-gradient(ellipse 780px 360px at 50% -10%, var(--brand-glow), transparent 62%),
      linear-gradient(165deg, var(--brand-mid) 0%, var(--brand-deep) 78%);
  }
  .hero-copy{ animation: rise .7s ease both; }
  .hero .eyebrow{ color: var(--brand-gold-bright); }
  .hero-copy p.lede{
    font-size:1.06rem;
    color: rgba(246,241,231,.78);
    max-width:46ch;
    margin: 14px 0 26px;
  }
  .hero h1{ font-size:clamp(2.1rem, 3.2vw + 1rem, 3.2rem); line-height:1.08; margin-top:10px; color: var(--brand-cream); }
  .hero-script{
    display:block;
    font-family:'Caveat', cursive;
    font-weight:700;
    font-size:1.5rem;
    color: var(--brand-gold-bright);
    margin-top:2px;
  }
  .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding: 13px 22px;
    border-radius: 999px;
    font-weight:700;
    font-size:.95rem;
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
  }
  .btn:active{ transform: scale(.97); }
  .btn-primary{ background:var(--primary); color:#fff; box-shadow: var(--shadow-sm); }
  .btn-primary:hover{ background:var(--primary-dark); box-shadow:var(--shadow); transform:translateY(-2px); }
  .btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
  .btn-ghost:hover{ border-color:var(--primary); color:var(--primary); }
  .btn-accent{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
  .btn-accent:hover{ background:var(--accent-dark); box-shadow:var(--shadow); transform:translateY(-2px); }
  .btn-gold{ background: linear-gradient(160deg, var(--brand-gold-bright), var(--brand-gold-dark)); color:var(--brand-deep); box-shadow:0 10px 22px -10px rgba(0,0,0,.55); }
  .btn-gold:hover{ box-shadow:0 14px 28px -10px rgba(0,0,0,.6); transform:translateY(-2px); }
  .hero .btn-ghost{ border-color: rgba(246,241,231,.4); color: var(--brand-cream); }
  .hero .btn-ghost:hover{ border-color: var(--brand-gold); color: var(--brand-gold-bright); }
  .btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important;}
  .ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.55); transform:scale(0); animation: ripple .6s ease-out; pointer-events:none; }
  @keyframes ripple{ to{ transform:scale(2.6); opacity:0; } }

  .proto-note{
    margin-top:22px;
    display:inline-flex; gap:8px; align-items:center;
    font-size:.78rem; color: rgba(246,241,231,.85);
    background: rgba(246,241,231,.08);
    border:1px dashed var(--brand-gold);
    padding:8px 14px;
    border-radius:999px;
  }

  .hero-art{
    position:relative;
    width:100%;
    aspect-ratio: 1/1;
    max-width:380px;
    justify-self:center;
    animation: rise .8s .1s ease both;
  }
  .crate{
    position:absolute; inset:8%;
    border-radius: 34px;
    background: linear-gradient(160deg, var(--brand-cream), #fff);
    border: 1px solid var(--brand-gold);
    box-shadow: 0 24px 50px -20px rgba(0,0,0,.65);
    display:grid; place-items:center;
    overflow:hidden;
  }
  .crate::before{
    content:"";
    position:absolute; inset:0;
    z-index:1;
    pointer-events:none;
    background:
      repeating-linear-gradient(115deg, transparent 0 26px, color-mix(in srgb, var(--brand-gold) 25%, transparent) 26px 28px);
    opacity:.32;
  }
  .crate-photos{ position:absolute; inset:0; z-index:0; }
  .crate-photos img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    opacity:0;
    animation: cratefade 18s infinite;
  }
  .crate-photos img:nth-child(1){ animation-delay:0s; }
  .crate-photos img:nth-child(2){ animation-delay:3s; }
  .crate-photos img:nth-child(3){ animation-delay:6s; }
  .crate-photos img:nth-child(4){ animation-delay:9s; }
  .crate-photos img:nth-child(5){ animation-delay:12s; }
  .crate-photos img:nth-child(6){ animation-delay:15s; }
  @keyframes cratefade{
    0%{ opacity:0; }
    4%{ opacity:1; }
    14%{ opacity:1; }
    18%{ opacity:0; }
    100%{ opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .crate-photos img{ animation:none !important; opacity:0; }
    .crate-photos img:first-child{ opacity:1; }
  }
  .float-badge{
    position:absolute;
    background:var(--brand-cream);
    color:var(--brand-deep);
    border:1px solid var(--brand-gold);
    box-shadow:0 14px 30px -14px rgba(0,0,0,.6);
    border-radius: var(--radius-md);
    padding:9px 13px;
    font-size:.8rem;
    font-weight:700;
    display:flex; align-items:center; gap:6px;
    animation: float 6s ease-in-out infinite;
  }
  .float-badge.b1{ top:2%; left:-6%; animation-delay:.3s; }
  .float-badge.b2{ bottom:6%; right:-8%; animation-delay:1s; }
  @media (max-width: 860px){
    .float-badge{ font-size:.74rem; padding:7px 10px; }
    .float-badge.b1{ left:2%; }
    .float-badge.b2{ right:2%; }
  }
  @keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
  @keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }

  /* ---------- Reveal on scroll ---------- */
  .reveal{ opacity:0; transform:translateY(22px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in-view{ opacity:1; transform:translateY(0); }
  .stagger > *{ transition-delay: calc(var(--i,0) * 70ms); }

  /* ---------- Steps ---------- */
  .steps{
    padding-block:34px;
    margin-inline:-20px; padding-inline:20px;
    background:
      radial-gradient(520px 320px at 90% -15%, color-mix(in srgb, var(--brand-gold) 16%, transparent), transparent 68%),
      radial-gradient(460px 320px at 4% 110%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 68%);
  }
  .steps-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:18px;
    margin-top:26px;
  }
  .step-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius: var(--radius-lg);
    padding:22px;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .step-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
  .step-num{
    width:34px; height:34px; border-radius:50%;
    background:var(--primary-soft); color:var(--primary-dark);
    display:grid; place-items:center; font-weight:800; font-family:'Fraunces',serif;
    margin-bottom:14px;
  }
  .step-card h3{ font-size:1.05rem; margin-bottom:6px; }
  .step-card p{ margin:0; color:var(--ink-soft); font-size:.9rem; }

  /* ---------- Menu / Cardapio ---------- */
  .menu{
    padding-block:44px 32px;
    margin-inline:-20px; padding-inline:20px;
    background:
      radial-gradient(640px 440px at 2% -4%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 62%),
      radial-gradient(560px 440px at 100% 38%, color-mix(in srgb, var(--brand-gold) 14%, transparent), transparent 62%),
      radial-gradient(620px 460px at 12% 102%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 62%);
  }
  .section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
  .section-head h2{ font-size:clamp(1.5rem,2vw + 1rem,2rem); margin-top:6px; }

  .tabs{
    display:flex; gap:8px; overflow-x:auto;
    padding-bottom:10px; margin-bottom:26px;
    position:relative;
    scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs-track{ display:flex; gap:8px; position:relative; }
  .tab-indicator{
    position:absolute; bottom:-10px; left:0; height:3px;
    background:var(--accent);
    border-radius:3px;
    transition: transform .35s cubic-bezier(.65,0,.35,1), width .35s cubic-bezier(.65,0,.35,1);
  }
  .tab{
    flex:none;
    padding:10px 18px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink-soft);
    font-weight:700;
    font-size:.88rem;
    cursor:pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
  }
  .tab:hover{ color:var(--ink); }
  .tab[aria-selected="true"]{ color:#fff; background:var(--primary); border-color:var(--primary); }

  .grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    align-items:start;
    gap:18px;
  }
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow:hidden;
    display:flex; flex-direction:column;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
  .card-media{
    flex:0 0 128px;
    height:128px;
    min-height:0;
    overflow:hidden;
    box-sizing:border-box;
    display:grid; place-items:center;
    font-size:2.6rem;
    background: var(--cat-bg, var(--surface-2));
    position:relative;
  }
  .card-media.has-photo{
    flex:none;
    height:auto;
    aspect-ratio: 1 / 1;
    padding:0;
  }
  .card-media img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1; }
  .card-body h3{ font-size:1rem; font-family:'Manrope',sans-serif; font-weight:700; }
  .price-row{ display:flex; align-items:baseline; gap:6px; margin-top:auto; }
  .price{ font-family:'Fraunces',serif; font-weight:700; font-size:1.15rem; color:var(--primary-dark); }
  :root[data-theme="dark"] .price, @media (prefers-color-scheme:dark){ .price{ color:var(--primary);} }
  .unit{ font-size:.76rem; color:var(--ink-soft); }
  .card-footer{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .stepper{ display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
  .stepper button{
    width:30px; height:30px; border:none; background:var(--surface-2); cursor:pointer;
    font-size:1rem; font-weight:700; color:var(--ink);
    display:grid; place-items:center;
    transition: background .15s ease;
  }
  .stepper button:hover{ background:var(--primary-soft); color:var(--primary-dark); }
  .stepper span{ width:26px; text-align:center; font-weight:700; font-size:.85rem; }
  .add-btn{
    width:38px; height:38px; border-radius:50%;
    background:var(--primary); color:#fff; border:none;
    display:grid; place-items:center; cursor:pointer; flex-shrink:0;
    position:relative; overflow:hidden;
    box-shadow:var(--shadow-sm);
    transition: transform .18s ease, background .2s ease;
  }
  .add-btn:hover{ background:var(--primary-dark); transform:scale(1.06); }
  .add-btn:active{ transform:scale(.92); }

  .empty-state{ text-align:center; padding:40px 20px; color:var(--ink-soft); }

  /* ---------- About ---------- */
  .about{
    padding-block:50px;
    margin-inline:-20px; padding-inline:20px;
    display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
    background:
      radial-gradient(560px 420px at 100% -6%, color-mix(in srgb, var(--brand-glow) 15%, transparent), transparent 65%),
      radial-gradient(500px 380px at 0% 108%, color-mix(in srgb, var(--brand-gold) 12%, transparent), transparent 65%);
  }
  .about p{ color:var(--ink-soft); margin:14px 0 20px; max-width:52ch; }
  .stat-row{ display:flex; gap:28px; flex-wrap:wrap; }
  .stat b{ display:block; font-family:'Fraunces',serif; font-size:1.7rem; color:var(--primary-dark); }
  :root[data-theme="dark"] .stat b, @media (prefers-color-scheme:dark){ .stat b{ color:var(--primary);} }
  .stat span{ font-size:.78rem; color:var(--ink-soft); }
  .about-card{
    background: linear-gradient(160deg, var(--primary-soft), var(--surface));
    border:1px solid var(--line);
    border-radius: var(--radius-lg);
    padding:30px;
    box-shadow:var(--shadow-sm);
  }
  .about-card ul{ margin:14px 0 0; padding-left:1.1em; color:var(--ink-soft); font-size:.92rem; display:flex; flex-direction:column; gap:8px;}

  .pillars{ margin-top:16px; display:flex; flex-direction:column; gap:14px; }
  .pillar{
    display:flex; align-items:flex-start; gap:14px;
    padding:14px; margin-inline:-14px;
    border-radius: var(--radius-md);
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .pillar:hover{
    background: var(--surface);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
  }
  .pillar-icon{
    flex:none;
    display:grid; place-items:center;
    width:44px; height:44px;
    border-radius:50%;
    font-size:1.25rem;
    background: linear-gradient(160deg, var(--brand-gold-bright), var(--brand-gold-dark));
    box-shadow:0 8px 16px -8px rgba(0,0,0,.4);
    transition: transform .3s ease;
  }
  .pillar:hover .pillar-icon{ transform: scale(1.12) rotate(-6deg); }
  .pillar-text h4{ font-family:'Fraunces',serif; font-size:1rem; margin:0 0 4px; color:var(--ink); }
  .pillar-text p{ margin:0; color:var(--ink-soft); font-size:.88rem; max-width:40ch; }
  @media (prefers-reduced-motion: reduce){
    .pillar, .pillar-icon{ transition:none; }
  }

  /* ---------- Contact ---------- */
  .contact{
    padding-block:50px;
    margin-inline:-20px; padding-inline:20px;
    background:
      radial-gradient(560px 400px at 4% 6%, color-mix(in srgb, var(--primary) 13%, transparent), transparent 65%),
      radial-gradient(520px 380px at 98% 96%, color-mix(in srgb, var(--brand-gold) 12%, transparent), transparent 65%);
  }
  .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; }
  .info-card{
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius-lg); padding:26px;
    display:flex; flex-direction:column; gap:14px;
  }
  .info-line{ display:flex; gap:12px; align-items:flex-start; }
  .info-line .ic{ font-size:1.2rem; }
  .info-line b{ display:block; font-size:.85rem; }
  .info-line span{ color:var(--ink-soft); font-size:.85rem; }
  .contact-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
  .map-wrap{ grid-column: 1 / -1; margin-top:4px; }
  .map-card{
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    background:var(--surface-2);
    height:320px;
    position:relative;
    overflow:hidden;
    z-index:0;
  }
  .map-card.map-offline{ display:grid; place-items:center; text-align:center; padding:20px; }
  .map-card .map-pin{ font-size:2.4rem; animation: float 4s ease-in-out infinite; }
  /* Deixa os mapas (tiles) mais discretos no tema escuro, sem afetar o círculo/pino do mapa */
  :root[data-theme="dark"] .map-card .leaflet-tile-pane{ filter: brightness(.68) invert(1) contrast(.86) hue-rotate(180deg) saturate(.9); }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .map-card .leaflet-tile-pane{ filter: brightness(.68) invert(1) contrast(.86) hue-rotate(180deg) saturate(.9); }
  }
  .map-card .leaflet-control-attribution{ font-size:.66rem; background:color-mix(in srgb, var(--surface) 85%, transparent); color:var(--ink-soft); }
  .map-card .delivery-pin{ font-size:1.6rem; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

  /* ---------- Footer ---------- */
  footer{
    margin-top:30px; padding: 34px 0 40px;
    border-top:1px solid var(--line);
    display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
    color:var(--ink-soft); font-size:.85rem;
  }
  footer a{ color:var(--ink-soft); text-decoration:none; }
  footer a:hover{ color:var(--primary); }
  .footer-links{ display:flex; gap:16px; flex-wrap:wrap; }
  .footer-credit{ margin:10px 0 0; font-size:.72rem; opacity:.85; text-align:right; }
  .footer-credit a{
    display:inline-flex; align-items:center; gap:8px;
    font-size:.88rem; font-weight:700;
    text-decoration:underline; text-underline-offset:3px;
  }
  .footer-credit a:hover{ color:var(--primary); }
  .footer-credit-icon{ height:26px; width:auto; display:block; }

  /* ---------- Cart FAB & Drawer ---------- */
  .cart-fab{
    position:fixed;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right:20px;
    z-index:50;
    width:60px; height:60px; border-radius:50%;
    background:var(--accent); color:#fff; border:none;
    font-size:1.5rem;
    display:grid; place-items:center;
    box-shadow: var(--shadow);
    cursor:pointer;
    transition: transform .2s ease;
  }
  .cart-fab:hover{ transform:translateY(-3px); }
  .cart-fab.bump{ animation: fabbump .45s ease; }
  @keyframes fabbump{ 0%{transform:scale(1);} 35%{transform:scale(1.18) rotate(-6deg);} 70%{transform:scale(.96) rotate(3deg);} 100%{transform:scale(1) rotate(0);} }
  .fab-count{
    position:absolute; top:-4px; right:-4px;
    background:var(--primary); color:#fff;
    min-width:22px; height:22px; padding:0 5px; border-radius:999px;
    font-size:.72rem; font-weight:800; display:grid; place-items:center;
    transform:scale(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .fab-count.show{ transform:scale(1); }

  .overlay{
    position:fixed; inset:0; background:rgba(15,20,13,.45);
    z-index:60; opacity:0; transition:opacity .3s ease;
  }
  .overlay.open{ opacity:1; }

  .cart-drawer{
    position:fixed; top:0; right:0; bottom:0;
    width:min(400px, 92vw);
    background:var(--surface);
    z-index:70;
    display:flex; flex-direction:column;
    transform:translateX(100%);
    transition: transform .35s cubic-bezier(.65,0,.35,1);
    box-shadow: -20px 0 40px rgba(0,0,0,.15);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cart-drawer.open{ transform:translateX(0); }
  .drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 20px 14px; border-bottom:1px solid var(--line); }
  .drawer-head h3{ font-size:1.15rem; }
  .drawer-list{ flex:1; overflow-y:auto; padding:14px 20px; display:flex; flex-direction:column; gap:14px; }
  .drawer-item{ display:flex; align-items:center; gap:12px; }
  .drawer-item .di-icon{ width:44px; height:44px; border-radius:12px; background:var(--surface-2); display:grid; place-items:center; font-size:1.3rem; flex-shrink:0; }
  .drawer-item .di-info{ flex:1; min-width:0; }
  .drawer-item .di-info b{ display:block; font-size:.9rem; }
  .drawer-item .di-info span{ font-size:.78rem; color:var(--ink-soft); }
  .drawer-item .di-remove{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:.95rem; padding:6px; }
  .drawer-item .di-remove:hover{ color:var(--danger); }
  .drawer-foot{ border-top:1px solid var(--line); padding:16px 20px 22px; display:flex; flex-direction:column; gap:12px; }
  .subtotal-row{ display:flex; justify-content:space-between; font-weight:700; font-size:1.05rem; }
  .drawer-foot .btn{ width:100%; justify-content:center; }
  .drawer-foot .hint{ font-size:.74rem; color:var(--ink-soft); text-align:center; }

  /* ---------- Modal ---------- */
  .modal-overlay{ position:fixed; inset:0; background:rgba(15,20,13,.5); z-index:80; display:grid; place-items:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
  .modal-overlay.open{ opacity:1; pointer-events:auto; }
  .modal{
    background:var(--surface); border-radius:var(--radius-lg); max-width:420px; width:100%;
    padding:26px; box-shadow:var(--shadow); transform:scale(.92); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    max-height:85vh; overflow-y:auto;
  }
  .modal-overlay.open .modal{ transform:scale(1); }
  .modal h3{ font-size:1.2rem; margin-bottom:4px; }
  .order-code{ display:inline-block; background:var(--accent-soft); color:var(--accent-dark); font-weight:800; padding:4px 12px; border-radius:999px; font-size:.85rem; margin-top:8px; }
  .modal-list{ list-style:none; margin:18px 0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:.9rem; }
  .modal-list li{ display:flex; justify-content:space-between; }
  .modal-actions{ display:flex; gap:10px; margin-top:16px; }
  .modal-actions .btn{ flex:1; justify-content:center; }

  /* ---------- Toast ---------- */
  .toast{
    position:fixed; left:50%; bottom: calc(94px + env(safe-area-inset-bottom, 0px));
    transform:translate(-50%, 20px);
    background:var(--ink); color:var(--bg);
    padding:12px 20px; border-radius:999px;
    font-size:.86rem; font-weight:600;
    box-shadow:var(--shadow);
    z-index:90; opacity:0; pointer-events:none;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
    display:flex; align-items:center; gap:8px;
  }
  .toast.show{ opacity:1; transform:translate(-50%, 0); }

  /* ---------- Fly clone ---------- */
  .fly{ position:fixed; z-index:95; font-size:1.6rem; pointer-events:none; transition: transform .6s cubic-bezier(.3,.6,.3,1), opacity .6s ease; }

  @media (max-width: 860px){
    .hero{ grid-template-columns:1fr; padding-block:34px 20px; }
    .hero-art{ order:-1; max-width:230px; margin-bottom:18px; }
    .nav-links{ display:none; }
    .steps-grid{ grid-template-columns:1fr; }
    .about{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .map-card{ height:240px; }
  }

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