:root{
    --cacao:#241512;
    --cacao-soft:#2f1c17;
    --marigold:#E8631A;
    --marigold-deep:#C74B0F;
    --magenta:#C81E5C;
    --agave:#3D7A4F;
    --azul:#1E5AA8;
    --chalk:#FBF3E4;
    --chalk-dim:#e9dcc1;
    --line: rgba(251,243,228,0.14);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--cacao);
    color:var(--chalk);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:'Fraunces', serif; font-weight:700; letter-spacing:-0.01em;}
  .eyebrow{
    font-family:'Space Mono', monospace;
    text-transform:uppercase;
    letter-spacing:0.18em;
    font-size:0.72rem;
    color:var(--marigold);
  }
  a{color:inherit;}
  img{max-width:100%; display:block;}

  /* ---------- Papel picado banner (signature element) ---------- */
  .picado-strip{
    width:100%;
    height:64px;
    background:var(--marigold);
    display:flex;
    position:sticky; top:0; z-index:50;
    box-shadow:0 4px 20px rgba(0,0,0,0.35);
  }
  .picado-strip svg{height:100%; width:100%; display:block;}
  nav{
    position:sticky; top:64px; z-index:49;
    background:var(--cacao);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 6vw;
  }
  .brand{
    font-family:'Fraunces', serif;
    font-weight:900;
    font-size:1.35rem;
    letter-spacing:-0.02em;
  }
  .brand span{color:var(--marigold);}
  .nav-links{display:flex; gap:28px; font-size:0.88rem; font-weight:500;}
  .nav-links a{opacity:0.8; text-decoration:none; transition:opacity .2s;}
  .nav-links a:hover{opacity:1; color:var(--marigold);}
  .nav-cta{
    background:var(--magenta);
    color:var(--chalk);
    padding:10px 20px;
    border-radius:2px;
    font-weight:600;
    font-size:0.85rem;
    text-decoration:none;
    border:1px solid var(--magenta);
    transition:background .2s, color .2s;
  }
  .nav-cta:hover{background:transparent; color:var(--magenta);}
  @media(max-width:820px){ .nav-links{display:none;} }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    padding:9vw 6vw 7vw;
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:40px;
    align-items:center;
    border-bottom:1px solid var(--line);
    background:
      radial-gradient(circle at 85% 20%, rgba(200,30,92,0.35), transparent 45%),
      radial-gradient(circle at 10% 90%, rgba(61,122,79,0.32), transparent 40%),
      linear-gradient(180deg, rgba(36,21,18,0.88), rgba(36,21,18,0.94)),
      url('https://images.unsplash.com/photo-1686448921254-b326a7914d2f?fm=jpg&q=70&w=2400&auto=format&fit=crop');
    background-size:cover;
    background-position:center;
  }
  .hero h1{
    font-size:clamp(2.6rem, 5.4vw, 5rem);
    line-height:0.98;
    color:var(--chalk);
  }
  .hero h1 em{
    font-style:italic;
    color:var(--marigold);
  }
  .hero p{
    margin-top:22px;
    max-width:46ch;
    font-size:1.08rem;
    line-height:1.6;
    color:var(--chalk-dim);
  }
  .hero-actions{margin-top:34px; display:flex; gap:16px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--marigold);
    color:var(--cacao);
    padding:15px 26px;
    font-weight:700;
    text-decoration:none;
    border-radius:2px;
    font-size:0.95rem;
    transition:transform .2s;
    display:inline-block;
  }
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-ghost{
    border:1px solid var(--line);
    padding:15px 26px;
    font-weight:600;
    text-decoration:none;
    border-radius:2px;
    font-size:0.95rem;
    color:var(--chalk);
    transition:border-color .2s;
  }
  .btn-ghost:hover{border-color:var(--marigold);}

  .hero-stamp{
    justify-self:end;
    position:relative;
    width:290px; height:290px;
    border:2px solid var(--marigold);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    transform:rotate(-6deg);
  }
  .hero-stamp::before{
    content:"";
    position:absolute; inset:14px;
    border:1px dashed rgba(232,99,26,0.5);
    border-radius:50%;
  }
  .hero-stamp .stamp-text{
    font-family:'Space Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    line-height:2;
  }
  .hero-stamp .stamp-num{
    font-family:'Fraunces', serif;
    font-size:3.2rem;
    font-weight:900;
    color:var(--marigold);
    display:block;
  }
  @media(max-width:900px){
    .hero{grid-template-columns:1fr; padding-top:12vw;}
    .hero-stamp{justify-self:center; margin-top:20px;}
  }

  /* ---------- Section shell ---------- */
  section{padding:6vw 6vw;}
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:44px;
    border-bottom:1px solid var(--line);
    padding-bottom:22px;
  }
  .section-head h2{font-size:clamp(1.8rem, 3vw, 2.6rem);}
  .section-head p{max-width:38ch; color:var(--chalk-dim); font-size:0.95rem; line-height:1.5;}

  .catalogue-callout{
    background:rgba(232,99,26,0.12);
    border:1px solid rgba(232,99,26,0.4);
    border-left:4px solid var(--marigold);
    color:var(--chalk);
    font-family:'Fraunces', serif;
    font-size:clamp(1.05rem, 1.6vw, 1.35rem);
    line-height:1.5;
    padding:20px 24px;
    margin:-16px 0 36px;
    border-radius:2px;
  }
  .catalogue-callout strong{color:var(--marigold); font-weight:700;}

  /* ---------- Market stalls (product categories) ---------- */
  .stalls{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .stall{
    background:var(--cacao);
    padding:38px 30px;
    position:relative;
    overflow:hidden;
    transition:background .35s;
    min-height:340px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  .stall::before{
    content:"";
    position:absolute; inset:0;
    opacity:0.16;
    background-size:cover;
    background-position:center;
    transition:transform .6s ease, opacity .4s;
  }
  .stall:nth-child(1)::before{background:linear-gradient(160deg, var(--marigold), transparent 70%);}
  .stall:nth-child(2)::before{background:linear-gradient(160deg, var(--agave), transparent 70%);}
  .stall:nth-child(3)::before{background:linear-gradient(160deg, var(--azul), transparent 70%);}
  .stall:hover::before{transform:scale(1.15); opacity:0.3;}
  .stall .eyebrow{position:relative;}
  .stall h3{font-size:1.7rem; margin-top:10px; position:relative;}
  .stall ul{
    list-style:none;
    margin-top:16px;
    font-size:0.9rem;
    color:var(--chalk-dim);
    position:relative;
    line-height:1.9;
  }
  .stall ul li::before{content:"— "; color:var(--marigold);}
  .stalls-4{grid-template-columns:repeat(4, 1fr);}
  @media(max-width:900px){ .stalls{grid-template-columns:1fr;} }
  @media(min-width:901px) and (max-width:1180px){ .stalls-4{grid-template-columns:repeat(2, 1fr);} }

  /* ---------- Catalogue ---------- */
  .cat-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
    flex-wrap:wrap;
  }
  .cat-search-wrap{
    position:relative;
    flex:1;
    min-width:260px;
  }
  .cat-search-icon{
    position:absolute;
    left:16px; top:50%;
    transform:translateY(-50%);
    width:20px; height:20px;
    color:var(--marigold);
    pointer-events:none;
  }
  .cat-search{
    width:100%;
    background:var(--cacao-soft);
    border:1.5px solid rgba(232,99,26,0.45);
    color:var(--chalk);
    padding:16px 16px 16px 48px;
    font-family:'Inter', sans-serif;
    font-size:1rem;
    border-radius:3px;
    outline:none;
    transition:border-color .2s, box-shadow .2s;
  }
  .cat-search::placeholder{color:var(--chalk-dim);}
  .cat-search:focus{border-color:var(--marigold); box-shadow:0 0 0 3px rgba(232,99,26,0.18);}
  .cat-count{
    font-family:'Space Mono', monospace;
    font-size:0.78rem;
    color:var(--chalk-dim);
    white-space:nowrap;
  }
  .cat-count span{color:var(--marigold); font-weight:700;}

  .cat-pills{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:36px;
    padding-bottom:28px;
    border-bottom:1px solid var(--line);
  }
  .pill{
    background:transparent;
    border:1px solid var(--line);
    color:var(--chalk-dim);
    padding:8px 14px;
    font-family:'Inter', sans-serif;
    font-size:0.82rem;
    font-weight:500;
    border-radius:20px;
    cursor:pointer;
    transition:border-color .2s, color .2s, background .2s;
  }
  .pill span{opacity:0.6; font-size:0.76rem;}
  .pill:hover{border-color:var(--marigold); color:var(--chalk);}
  .pill.active{
    background:var(--marigold);
    border-color:var(--marigold);
    color:var(--cacao);
    font-weight:700;
  }
  .pill.active span{opacity:0.7;}

  .cat-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .prod-card{
    background:var(--cacao);
    padding:20px 18px;
    min-height:132px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    transition:background .25s, box-shadow .2s;
    position:relative;
  }
  .prod-card:hover{background:var(--cacao-soft);}
  .prod-card.selected{
    background:var(--cacao-soft);
    box-shadow:inset 0 0 0 1.5px var(--marigold);
  }
  .prod-icon{
    width:26px; height:26px;
    color:var(--marigold);
    opacity:0.85;
    margin-bottom:2px;
  }
  .prod-icon svg{width:100%; height:100%;}
  .prod-check{
    position:absolute;
    top:16px; right:16px;
    width:24px; height:24px;
    border:1.5px solid var(--line);
    border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s, background .2s;
    flex-shrink:0;
    background:transparent;
    cursor:pointer;
    z-index:2;
  }
  .prod-check:hover{border-color:var(--marigold);}
  .prod-card.selected .prod-check{
    background:var(--marigold);
    border-color:var(--marigold);
  }
  .prod-check svg{
    width:12px; height:12px;
    opacity:0;
    transition:opacity .15s;
    pointer-events:none;
  }
  .prod-card.selected .prod-check svg{opacity:1;}
  .prod-link{text-decoration:none;}
  .prod-card h4{
    font-family:'Fraunces', serif;
    font-size:0.94rem;
    font-weight:600;
    line-height:1.3;
    margin-top:6px;
    padding-right:28px;
    color:var(--chalk);
    transition:color .2s;
  }
  .prod-link:hover h4{color:var(--marigold);}
  .prod-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
  }
  .prod-brand, .prod-pack{
    font-family:'Space Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.03em;
    color:var(--chalk-dim);
    background:rgba(251,243,228,0.06);
    padding:3px 7px;
    border-radius:2px;
  }
  .prod-brand{color:var(--agave);}
  .cat-empty{
    grid-column:1/-1;
    background:var(--cacao);
    padding:40px;
    text-align:center;
    color:var(--chalk-dim);
  }
  @media(max-width:1100px){ .cat-grid{grid-template-columns:repeat(3, 1fr);} }
  @media(max-width:820px){ .cat-grid{grid-template-columns:repeat(2, 1fr);} }
  @media(max-width:560px){ .cat-grid{grid-template-columns:1fr;} }

  /* ---------- Quote selection bar ---------- */
  .quote-bar{
    position:sticky;
    bottom:0;
    z-index:40;
    background:var(--marigold-deep);
    border-top:1px solid rgba(0,0,0,0.2);
    transform:translateY(100%);
    opacity:0;
    transition:transform .3s ease, opacity .3s ease;
    pointer-events:none;
  }
  .quote-bar.visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .quote-bar-inner{
    max-width:1400px;
    margin:0 auto;
    padding:16px 6vw;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }
  .quote-count{
    color:var(--chalk);
    font-size:0.92rem;
  }
  .quote-count strong{
    font-family:'Fraunces', serif;
    font-size:1.2rem;
  }
  .quote-bar-actions{display:flex; gap:12px;}
  .btn-primary.small, .btn-ghost.small{
    padding:10px 18px;
    font-size:0.85rem;
    cursor:pointer;
    border:none;
    font-family:'Inter', sans-serif;
  }
  .btn-primary.small{background:var(--cacao); color:var(--chalk);}
  .btn-ghost.small{
    background:transparent;
    border:1px solid rgba(251,243,228,0.4);
    color:var(--chalk);
  }
  .btn-ghost.small:hover{border-color:var(--chalk);}

  /* ---------- Tableware grid (unused, kept for safety) ---------- */
  .ware-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .ware-card{
    background:var(--cacao);
    padding:26px 22px;
    min-height:190px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    transition:background .3s;
  }
  .ware-card:hover{background:var(--cacao-soft);}
  .ware-card h4{
    font-family:'Fraunces', serif;
    font-size:1.08rem;
    font-weight:600;
    margin-top:8px;
    color:var(--chalk);
  }
  .ware-card p:last-child{
    font-size:0.84rem;
    color:var(--chalk-dim);
    margin-top:10px;
    line-height:1.5;
  }
  @media(max-width:900px){ .ware-grid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:560px){ .ware-grid{grid-template-columns:1fr;} }

  /* ---------- Values strip ---------- */
  .values{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .value{
    padding:34px 26px;
    border-right:1px solid var(--line);
  }
  .value:last-child{border-right:none;}
  .value .num{font-family:'Space Mono', monospace; color:var(--marigold); font-size:0.85rem;}
  .value h4{font-family:'Fraunces', serif; font-size:1.15rem; margin-top:10px; font-weight:600;}
  .value p{font-size:0.87rem; color:var(--chalk-dim); margin-top:8px; line-height:1.5;}
  @media(max-width:900px){ .values{grid-template-columns:1fr 1fr;} .value{border-bottom:1px solid var(--line);} }
  @media(max-width:560px){ .values{grid-template-columns:1fr;} }

  /* ---------- Featured / sourcing ---------- */
  .sourcing{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
  }
  .sourcing-visual{
    aspect-ratio:4/5;
    background:
      linear-gradient(180deg, rgba(36,21,18,0.05), rgba(36,21,18,0.55)),
      url('https://images.unsplash.com/photo-1706888135824-20ec9010b7bc?fm=jpg&q=70&w=1600&auto=format&fit=crop') center/cover;
    border:1px solid var(--line);
    position:relative;
  }
  .sourcing-visual .badge{
    position:absolute; bottom:24px; left:24px;
    background:var(--magenta);
    color:var(--chalk);
    padding:10px 16px;
    font-family:'Space Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
  }
  .sourcing h2{font-size:clamp(1.9rem,3vw,2.5rem); margin-bottom:20px;}
  .sourcing p{color:var(--chalk-dim); line-height:1.7; margin-bottom:16px; font-size:1rem;}
  @media(max-width:900px){ .sourcing{grid-template-columns:1fr;} }

  /* ---------- CTA ---------- */
  .cta{
    text-align:center;
    padding:8vw 6vw;
    background:radial-gradient(circle at 50% 30%, rgba(200,30,92,0.28), transparent 60%);
    border-top:1px solid var(--line);
  }
  .cta h2{font-size:clamp(2.2rem,4.5vw,3.6rem); margin-bottom:20px;}
  .cta p{color:var(--chalk-dim); max-width:50ch; margin:0 auto 34px; font-size:1.05rem;}

  footer{
    padding:36px 6vw;
    border-top:1px solid var(--line);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
    font-size:0.82rem; color:var(--chalk-dim);
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; scroll-behavior:auto !important;}
  }
  /* ---------- Product detail page ---------- */
  .breadcrumb{
    padding:26px 6vw 0;
    font-size:0.8rem;
    color:var(--chalk-dim);
  }
  .breadcrumb a{color:var(--chalk-dim); text-decoration:none;}
  .breadcrumb a:hover{color:var(--marigold);}
  .breadcrumb span{color:var(--chalk);}
  .prod-detail{padding-bottom:5vw;}
  .prod-detail-grid{
    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    gap:50px;
    padding:30px 6vw 0;
    align-items:start;
  }
  .prod-detail-visual{
    aspect-ratio:1/1;
    background:
      repeating-linear-gradient(135deg, rgba(232,99,26,0.14) 0 22px, transparent 22px 44px),
      var(--cacao-soft);
    border:1px solid var(--line);
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .prod-detail-icon{
    width:34%;
    color:var(--marigold);
    opacity:0.9;
  }
  .prod-detail-icon svg{width:100%; height:100%;}
  .prod-detail-badge{
    position:absolute; bottom:20px; left:20px;
    background:var(--magenta);
    color:var(--chalk);
    padding:8px 14px;
    font-family:'Space Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .prod-detail-info h1{
    font-size:clamp(1.7rem, 3vw, 2.3rem);
    line-height:1.15;
    margin-top:10px;
    color:var(--chalk);
  }
  .prod-detail-meta{
    margin-top:24px;
    border-top:1px solid var(--line);
  }
  .pd-row{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid var(--line);
    font-size:0.9rem;
  }
  .pd-row span{color:var(--chalk-dim);}
  .pd-row strong{color:var(--chalk); font-weight:600; text-align:right;}
  .prod-detail-text{
    margin-top:22px;
    color:var(--chalk-dim);
    line-height:1.7;
    font-size:0.98rem;
    max-width:56ch;
  }
  .prod-detail-info .btn-primary, .prod-detail-info .btn-ghost{
    margin-top:30px;
    display:inline-block;
  }
  @media(max-width:820px){
    .prod-detail-grid{grid-template-columns:1fr;}
  }