/* =========================================================
   CONTATO BEBIDAS — Design System
   Tokens derived from the brand mark (gold #AB7B25 / charcoal)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Brand palette (from logo) ---- */
  --gold-700:#8C6015;
  --gold-600:#AB7B25;   /* primary brand gold */
  --gold-500:#C79A45;
  --gold-300:#DFBD7C;
  --gold-100:#F3E7CC;   /* pale gold tint */
  --gold-050:#FAF3E4;

  --charcoal-950:#1B1917;  /* hero / footer background */
  --charcoal-900:#232120;
  --charcoal-800:#312E2B;
  --charcoal-600:#5B5651;

  --cream:#FBF9F5;
  --white:#FFFFFF;
  --ink:#211F1D;
  --ink-soft:#57524C;
  --line: rgba(171,123,37,.28);
  --line-soft: rgba(27,25,23,.10);

  /* ---- Type ---- */
  --font-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:'Manrope', 'Segoe UI', Arial, sans-serif;

  /* ---- Layout ---- */
  --maxw: 1180px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --shadow-1: 0 1px 2px rgba(27,25,23,.06);
  --shadow-2: 0 18px 40px -20px rgba(27,25,23,.35);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; font-weight:600; color:var(--charcoal-950); }
p{ margin:0; }
.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }

:focus-visible{ outline:3px solid var(--gold-500); outline-offset:3px; border-radius:4px; }

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

/* ---- eyebrow / kicker ---- */
.eyebrow{
  font-family:var(--font-body);
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-600);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:26px; height:2px;
  background:var(--gold-600);
  display:inline-block;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:80;
  background:rgba(251,249,245,.86);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:126px;
}
.brand{ display:flex; align-items:center; gap:16px; }
.brand img{ height:96px; width:auto; }
.brand-word{ font-family:var(--font-display); font-weight:600; font-size:26px; line-height:1.1; color:var(--charcoal-950); }
.brand-word span{ display:block; font-family:var(--font-body); font-weight:800; font-size:12px; letter-spacing:.18em; color:var(--gold-600); }

@media (max-width:560px){
  .site-header .container{ height:96px; }
  .brand img{ height:68px; }
  .brand-word{ font-size:18px; }
  .brand-word span{ font-size:9.5px; }
}

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  font-weight:700; font-size:14.5px; color:var(--charcoal-900);
  position:relative; padding:6px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--gold-600); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.main-nav a:hover::after, .main-nav a.active::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none; background:none; border:none; padding:8px;
}
.nav-toggle svg{ width:26px; height:26px; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px;
  font-weight:800; font-size:14.5px; letter-spacing:.01em;
  border:1.5px solid transparent; white-space:nowrap;
  transition:transform .18s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn-gold{ background:var(--gold-600); color:var(--white); }
.btn-gold:hover{ background:var(--gold-700); transform:translateY(-2px); }
.btn-outline{ border-color:var(--gold-500); color:var(--charcoal-950); background:transparent; }
.btn-outline:hover{ background:var(--gold-100); transform:translateY(-2px); }
.btn-ghost-dark{ border-color:rgba(255,255,255,.35); color:var(--white); }
.btn-ghost-dark:hover{ background:rgba(255,255,255,.1); transform:translateY(-2px); }
.btn-sm{ padding:10px 18px; font-size:13px; }
.btn-block{ width:100%; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 140% at 82% 0%, #29251f 0%, var(--charcoal-950) 55%);
  color:var(--white);
  padding-top:96px; padding-bottom:88px;
}
.hero .container{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }

/* Hero simplificado — usado abaixo do carrossel, sem ilustração lateral */
.hero.hero-simple{ padding-top:72px; padding-bottom:76px; }
.hero.hero-simple .container{ display:block; max-width:760px; }
.hero.hero-simple .hero-sub{ max-width:60ch; }
.hero-copy .eyebrow{ color:var(--gold-300); }
.hero-copy .eyebrow::before{ background:var(--gold-300); }
.hero h1{
  color:var(--white);
  font-size:clamp(38px,5vw,60px);
  line-height:1.04;
  letter-spacing:-.01em;
  margin-top:18px;
}
.hero h1 em{ font-style:italic; color:var(--gold-300); font-weight:500; }
.hero-sub{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(17px,1.8vw,20px); color:#E7DFD1;
  max-width:46ch; margin-top:22px;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-strip{
  margin-top:44px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:28px;
}
.hero-strip a, .hero-strip .strip-item{
  display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:#EDE7DB;
}
.hero-strip svg{ width:19px; height:19px; color:var(--gold-300); flex-shrink:0; }
.hero-strip a:hover{ color:var(--gold-300); }

.hero-art{ position:relative; height:100%; min-height:360px; display:flex; align-items:center; justify-content:center; }
.hero-art svg{ width:100%; max-width:420px; opacity:.95; }

@media (max-width: 940px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-art{ order:-1; min-height:220px; }
  .hero-art svg{ max-width:220px; }
  .hero{ padding-top:44px; padding-bottom:56px; }
}

/* =========================================================
   BANNER CAROUSEL
   Banners são imagens simples (sem texto sobreposto), enviadas
   pelo admin.html. A proporção é fixa para manter o carrossel
   consistente independente do tamanho da imagem enviada.
   ========================================================= */
.carousel{
  position:relative; overflow:hidden;
  background:var(--charcoal-950);
}
.carousel-track{
  display:flex; align-items:flex-start;
  transition:transform .65s cubic-bezier(.65,0,.35,1);
  will-change:transform;
}
.carousel-slide{
  min-width:100%;
  display:block; line-height:0;
}
.carousel-slide img{
  width:100%; height:auto; display:block;
}

.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.28);
  color:var(--white); display:flex; align-items:center; justify-content:center;
  z-index:5; transition:background .2s ease, border-color .2s ease;
  backdrop-filter:blur(4px);
}
.carousel-arrow:hover{ background:rgba(255,255,255,.22); border-color:var(--gold-300); }
.carousel-arrow svg{ width:20px; height:20px; }
.carousel-arrow.prev{ left:20px; }
.carousel-arrow.next{ right:20px; }

.carousel-dots{
  position:absolute; left:0; right:0; bottom:18px; z-index:5;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.carousel-dots button{
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4);
  border:none; padding:0; transition:background .2s ease, transform .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.carousel-dots button.active{ background:var(--gold-300); transform:scale(1.25); }

@media (max-width:860px){
  .carousel-slide{
    height:260px; display:flex; align-items:center; justify-content:center;
    background:var(--charcoal-950);
  }
  .carousel-slide img{ width:auto; height:100%; max-width:100%; object-fit:contain; }
  .carousel-arrow{ width:38px; height:38px; }
  .carousel-arrow.prev{ left:10px; }
  .carousel-arrow.next{ right:10px; }
  .carousel-dots{ bottom:12px; }
}
@media (max-width:480px){
  .carousel-slide{ height:210px; }
}

/* =========================================================
   INFO STRIP (contato rápido — abaixo do carrossel)
   ========================================================= */
.info-strip{
  background:var(--cream); border-bottom:1px solid var(--line-soft);
  padding:24px 0;
}
.info-strip .container{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px 44px;
}
.info-strip a, .info-strip .info-item{
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:700; color:var(--charcoal-900);
}
.info-strip svg{ width:19px; height:19px; color:var(--gold-600); flex-shrink:0; }
.info-strip a:hover{ color:var(--gold-700); }

/* =========================================================
   SECTION SCAFFOLDING
   ========================================================= */
.section{ padding:96px 0; }
.section-tight{ padding:72px 0; }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(28px,3.4vw,40px); margin-top:16px; line-height:1.12; }
.section-head p{ margin-top:16px; color:var(--ink-soft); font-size:16.5px; }
.section-dark{ background:var(--charcoal-950); color:var(--white); }
.section-dark h2{ color:var(--white); }
.section-dark .section-head p{ color:#C9C2B4; }
.section-gold{ background:var(--gold-050); }

.divider-mark{ display:flex; align-items:center; justify-content:center; padding:6px 0; }
.divider-mark svg{ width:46px; height:46px; color:var(--gold-500); }

/* =========================================================
   CATEGORY GRID (home teaser)
   ========================================================= */
.cat-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.cat-card{
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:var(--radius-md); padding:26px 20px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--gold-300); }
.cat-card .icon-wrap{
  width:64px; height:64px; border-radius:50%;
  background:var(--gold-100); display:flex; align-items:center; justify-content:center;
}
.cat-card .icon-wrap svg{ width:34px; height:34px; color:var(--gold-600); }

/* Category color tints — adds visual variety without using brand photography */
.cat-card h3{ font-size:17px; }
.cat-card p{ font-size:13.5px; color:var(--ink-soft); }
.cat-card .cat-link{ margin-top:auto; font-size:12.5px; font-weight:800; letter-spacing:.04em; color:var(--gold-700); text-transform:uppercase; display:inline-flex; align-items:center; gap:6px; }
.cat-card .cat-link svg{ width:14px; height:14px; transition:transform .2s ease; }
.cat-card:hover .cat-link svg{ transform:translateX(3px); }

@media (max-width:980px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cat-grid{ grid-template-columns:1fr; } }

/* =========================================================
   STEPS
   ========================================================= */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; counter-reset:step; }
.step{ position:relative; padding-top:8px; }
.step .step-num{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--gold-600);
  margin-bottom:14px;
}
.step .step-num .glyph{ width:34px; height:34px; }
.step h3{ font-size:19px; margin-bottom:8px; }
.step p{ color:var(--ink-soft); font-size:14.5px; }
.step:not(:last-child)::after{
  content:""; position:absolute; top:16px; left:calc(100% - 4px); width:calc(28px* 2);
  border-top:1.5px dashed var(--gold-300);
  display:none;
}
@media (min-width:820px){ .step:not(:last-child)::after{ display:block; } }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; gap:34px; } }

/* =========================================================
   ABOUT / HISTÓRIA
   ========================================================= */
.about-grid{ display:grid; grid-template-columns:1fr .8fr; gap:64px; align-items:center; }
.about-copy p{ color:var(--ink-soft); font-size:16px; margin-top:16px; }
.about-copy p:first-of-type{ margin-top:20px; }
.about-figure{ display:flex; align-items:center; justify-content:center; position:relative; }
.about-figure .ring{
  width:100%; max-width:340px; aspect-ratio:1/1; border-radius:50%;
  border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.about-figure .ring::before{
  content:""; position:absolute; inset:18px; border-radius:50%; border:1px solid var(--line-soft);
}
.about-figure svg{ width:46%; color:var(--gold-600); }
.stat-row{ display:flex; gap:34px; margin-top:34px; flex-wrap:wrap; }
.stat{ min-width:110px; }
.stat b{ display:block; font-family:var(--font-display); font-size:30px; color:var(--charcoal-950); }
.stat span{ font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }

@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } .about-figure{ order:-1; } }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; }
.contact-cards{ display:flex; flex-direction:column; gap:14px; }
.contact-card{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px; border-radius:var(--radius-md);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
.contact-card .icon-wrap{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:rgba(199,154,69,.16); display:flex; align-items:center; justify-content:center;
}
.contact-card .icon-wrap svg{ width:21px; height:21px; color:var(--gold-300); }
.contact-card h4{ color:var(--white); font-size:15px; font-family:var(--font-body); font-weight:800; }
.contact-card a, .contact-card p{ color:#D8D1C2; font-size:14.5px; margin-top:3px; }
.contact-card a:hover{ color:var(--gold-300); }

.contact-form{
  background:var(--cream); color:var(--ink); border-radius:var(--radius-lg);
  padding:34px; box-shadow:var(--shadow-2);
}
.contact-form h3{ font-size:22px; }
.contact-form p.hint{ color:var(--ink-soft); font-size:14px; margin-top:8px; }
.field{ margin-top:18px; display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:12.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--charcoal-800); }
.field input, .field select, .field textarea{
  border:1.5px solid var(--line-soft); background:var(--white);
  border-radius:var(--radius-sm); padding:12px 14px; font-family:inherit; font-size:14.5px; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold-500); outline:none; }
.field textarea{ resize:vertical; min-height:96px; }
.contact-form .btn{ margin-top:22px; }
.form-note{ font-size:12px; color:var(--ink-soft); margin-top:12px; }

@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:#161412; color:#C9C2B4; padding:56px 0 26px; }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand{ display:flex; align-items:center; gap:16px; }
.footer-brand img{ height:66px; }
.footer-brand-word{ font-family:var(--font-display); color:var(--white); font-size:20px; }
.footer-about{ margin-top:14px; font-size:13.5px; line-height:1.7; max-width:32ch; }
.footer-col h5{ color:var(--white); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; margin-bottom:16px; }
.footer-col li{ margin-bottom:10px; font-size:14px; }
.footer-col a:hover{ color:var(--gold-300); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:22px; font-size:12.5px; color:#8A8377; }
@media (max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

/* =========================================================
   WHATSAPP FLOAT
   ========================================================= */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:58px; height:58px; border-radius:50%;
  background:var(--gold-600); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px -8px rgba(171,123,37,.65);
  transition:transform .2s ease, background .2s ease;
}
.wa-float:hover{ background:var(--gold-700); transform:translateY(-3px) scale(1.04); }
.wa-float svg{ width:27px; height:27px; }

/* =========================================================
   MOBILE NAV
   ========================================================= */
@media (max-width:940px){
  .main-nav{
    position:fixed; top:126px; right:0; left:0;
    height:calc(100vh - 126px); height:calc(100dvh - 126px);
    background:var(--cream);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px 24px 24px; transform:translateX(100%);
    transition:transform .28s ease; overflow-y:auto;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ width:100%; padding:16px 0; border-bottom:1px solid var(--line-soft); font-size:16px; }
  .header-actions .btn-label{ display:none; }
  .nav-toggle{ display:inline-flex; }
}
@media (min-width:941px){ .nav-toggle{ display:none; } }

/* Small screens: header shrinks to 96px — re-align the fixed nav panel and sticky filter bar */
@media (max-width:560px){
  .main-nav{ top:96px; height:calc(100vh - 96px); height:calc(100dvh - 96px); }
  .filter-bar{ top:96px; }
}

/* =========================================================
   CATALOG PAGE
   ========================================================= */
.catalog-banner{
  background:linear-gradient(180deg, var(--charcoal-950) 0%, #241f1a 100%);
  color:var(--white); padding:64px 0 46px;
}
.catalog-banner h1{ color:var(--white); font-size:clamp(30px,4vw,44px); margin-top:14px; }
.catalog-banner p{ color:#D8D1C2; max-width:56ch; margin-top:14px; font-size:15.5px; }

.search-row{
  margin-top:30px; display:flex; gap:12px; background:var(--white);
  padding:8px; border-radius:999px; max-width:520px; box-shadow:var(--shadow-2);
}
.search-row input{
  flex:1; border:none; padding:10px 16px; font-family:inherit; font-size:14.5px; background:transparent; color:var(--ink);
}
.search-row input:focus{ outline:none; }
.search-row button{ background:var(--gold-600); color:var(--white); border:none; border-radius:999px; padding:0 22px; font-weight:800; font-size:13.5px; display:flex; align-items:center; gap:8px; }
.search-row button svg{ width:16px; height:16px; }

.filter-bar{
  position:sticky; top:126px; z-index:60;
  background:rgba(251,249,245,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);
  padding:16px 0;
}
.filter-scroll{ display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin; }
.filter-scroll::-webkit-scrollbar{ height:5px; }
.filter-scroll::-webkit-scrollbar-thumb{ background:var(--gold-300); border-radius:10px; }
.pill{
  flex:0 0 auto; padding:10px 18px; border-radius:999px; border:1.5px solid var(--line-soft);
  font-size:13.5px; font-weight:700; color:var(--charcoal-900); background:var(--white);
  display:flex; align-items:center; gap:8px; transition:all .18s ease; white-space:nowrap;
}
.pill svg{ width:16px; height:16px; color:var(--gold-600); }
.pill:hover{ border-color:var(--gold-500); }
.pill.active{ background:var(--charcoal-950); border-color:var(--charcoal-950); color:var(--white); }
.pill.active svg{ color:var(--gold-300); }
.pill .count{ opacity:.6; font-weight:600; }

.catalog-results-info{ padding:22px 0 6px; font-size:13.5px; color:var(--ink-soft); }
.catalog-results-info b{ color:var(--charcoal-950); }

.cat-section{ padding:38px 0 8px; scroll-margin-top:150px; }
.cat-section-head{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.cat-section-head .icon-wrap{
  width:48px; height:48px; border-radius:50%; background:var(--gold-100); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cat-section-head .icon-wrap svg{ width:26px; height:26px; color:var(--gold-600); }
.cat-section-head .icon-wrap{ width:56px; height:56px; }
.cat-section-head h2{ font-size:22px; }
.cat-section-head .muted{ font-size:13px; color:var(--ink-soft); font-family:var(--font-body); font-weight:600; }

.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1080px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .product-grid{ grid-template-columns:1fr 1fr; gap:10px; } }

.product-card{
  background:var(--white); border:1px solid var(--line-soft); border-radius:var(--radius-md);
  padding:18px; display:flex; flex-direction:column; gap:10px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--gold-300); }
.product-card .p-icon{ width:44px; height:44px; color:var(--gold-600); }
.product-card .p-photo{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-sm);
  background:var(--gold-050);
}
.product-card h4{ font-size:14.5px; font-family:var(--font-body); font-weight:800; color:var(--charcoal-950); line-height:1.3; }
.product-card .tag{ font-size:12px; color:var(--ink-soft); }
.product-card .p-actions{ margin-top:auto; display:flex; }
.product-card .p-actions a{
  width:100%; justify-content:center; padding:9px 14px; font-size:12.5px; border-radius:999px;
  border:1.5px solid var(--line); color:var(--gold-700); font-weight:800; display:flex; align-items:center; gap:6px;
}
.product-card .p-actions a:hover{ background:var(--gold-600); border-color:var(--gold-600); color:var(--white); }
.product-card .p-actions a svg{ width:14px; height:14px; }

.empty-state{ text-align:center; padding:70px 20px; color:var(--ink-soft); display:none; }
.empty-state svg{ width:56px; height:56px; color:var(--gold-300); margin:0 auto 16px; }
.empty-state h3{ font-size:19px; margin-bottom:8px; color:var(--charcoal-950); }

.catalog-cta{
  margin-top:60px; background:var(--gold-050); border-radius:var(--radius-lg);
  padding:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.catalog-cta h3{ font-size:22px; max-width:36ch; }
.catalog-cta p{ color:var(--ink-soft); margin-top:8px; font-size:14.5px; }

/* utility */
.hide{ display:none !important; }

/* Category tints — placed late in the cascade so they win over base icon-wrap rules */
.icon-wrap.tint-ice{ background:linear-gradient(150deg,#DFF3F6,#BCE3EA); }
.icon-wrap.tint-ice svg{ color:#2E7A88; }
.icon-wrap.tint-wine{ background:linear-gradient(150deg,#F3DEE1,#E3B7BE); }
.icon-wrap.tint-wine svg{ color:#7A2035; }
.icon-wrap.tint-amber{ background:linear-gradient(150deg,#F6E6C7,#EACB8F); }
.icon-wrap.tint-amber svg{ color:#8A5A1E; }
.icon-wrap.tint-fizz{ background:linear-gradient(150deg,#FDEBC7,#F7CE84); }
.icon-wrap.tint-fizz svg{ color:#B5791C; }
.icon-wrap.tint-hops{ background:linear-gradient(150deg,#F4E5C4,#E8C87C); }
.icon-wrap.tint-hops svg{ color:#9C6A16; }
.icon-wrap.tint-mint{ background:linear-gradient(150deg,#DFEFE0,#B9DCC0); }
.icon-wrap.tint-mint svg{ color:#3D7A4B; }
.icon-wrap.tint-berry{ background:linear-gradient(150deg,#EEDCEF,#D9B6E0); }
.icon-wrap.tint-berry svg{ color:#7A2E82; }
.icon-wrap.tint-cola{ background:linear-gradient(150deg,#E9D9CB,#D4B394); }
.icon-wrap.tint-cola svg{ color:#6B3B1C; }