:root {
    --espresso: #241810;
    --walnut: #4a3222;
    --brass: #b8874b;
    --brass-light: #d4a86a;
    --parchment: #f3ecdf;
    --moss: #5f6b4c;
    --charcoal: #1a1410;
    color-scheme: light;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  * { box-sizing: inherit; }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--parchment);
    color: var(--charcoal);
    font-family: 'Work Sans', system-ui, sans-serif;
    line-height: 1.5;
  }
  h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; margin: 0; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

  .topbar {
    background: var(--brass); color: var(--espresso);
    font-size: 0.82rem; text-align: center; padding: 7px 0;
    font-weight: 500; letter-spacing: 0.01em;
  }
  header {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
    background: #fff; color: var(--charcoal);
    padding: 14px 0; border-bottom: 1px solid #e4dac6;
  }
  header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .brand { font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
  .brand span { color: var(--moss); }
  nav { display: flex; gap: 22px; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; flex-wrap: wrap; }
  nav a { opacity: 0.85; color: var(--walnut); }
  nav a.active { color: var(--brass); }
  nav a:hover { opacity: 1; }
  .has-sub { position: relative; }
  .has-sub > a::after { content: " \25BE"; font-size: 0.7em; }
  .sub {
    display: none; position: absolute; top: 100%; left: 0; margin-top: 10px;
    background: #fff; border: 1px solid #e4dac6; min-width: 180px; padding: 6px 0;
    box-shadow: 0 8px 20px rgba(36,24,16,0.08);
  }
  .has-sub:hover .sub { display: block; }
  .sub a { display: block; padding: 9px 16px; font-weight: 400; font-size: 0.85rem; }
  .sub a:hover { background: var(--parchment); }

  /* WordPress default wp_nav_menu() equivalents, so dropdowns work with no custom Walker */
  nav > ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; align-items: center; }
  nav .menu-item-has-children { position: relative; }
  nav .menu-item-has-children > a::after { content: " \25BE"; font-size: 0.7em; }
  nav ul.sub-menu {
    display: none; position: absolute; top: 100%; left: 0; margin-top: 10px;
    background: #fff; border: 1px solid #e4dac6; min-width: 180px; padding: 6px 0; list-style: none;
    box-shadow: 0 8px 20px rgba(36,24,16,0.08); z-index: 20;
  }
  nav .menu-item-has-children:hover > ul.sub-menu { display: block; }
  nav ul.sub-menu a { display: block; padding: 9px 16px; font-weight: 400; font-size: 0.85rem; }
  nav ul.sub-menu a:hover { background: var(--parchment); }
  @media (max-width: 880px) {
    nav > ul { flex-direction: column; align-items: flex-start; width: 100%; }
    nav .menu-item-has-children { position: static; width: 100%; }
    nav .menu-item-has-children > a::after { display: none; }
    nav ul.sub-menu { position: static; display: block !important; box-shadow: none; border: none; margin-top: 0; padding-left: 14px; min-width: 0; }
    nav ul.sub-menu a { padding: 8px 2px; font-size: 0.82rem; opacity: 0.8; }
  }
  .cart {
    display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600;
    color: var(--walnut); white-space: nowrap;
  }
  .cart .bubble {
    position: relative; font-size: 1.1rem;
  }
  .cart .badge {
    position: absolute; top: -8px; right: -9px; background: var(--brass);
    color: var(--espresso); font-size: 0.62rem; font-weight: 700;
    width: 16px; height: 16px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
  }
  .btn {
    display: inline-block; padding: 11px 22px; border-radius: 2px;
    font-size: 0.92rem; font-weight: 500; border: 1px solid transparent;
  }
  .btn-brass { background: var(--brass); color: var(--espresso); }
  .btn-brass:hover { background: var(--brass-light); }
  .btn-outline { border-color: rgba(243,236,223,0.4); color: var(--parchment); }
  .btn-outline:hover { border-color: var(--parchment); }

  .hero { position: relative; overflow: hidden; color: var(--parchment); padding: 92px 0 76px; }
  .hero-slides { position: absolute; inset: 0; z-index: 0; }
  .hero-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; animation: heroFade 20s infinite;
  }
  .hero-slide:nth-child(1) { animation-delay: 0s; }
  .hero-slide:nth-child(2) { animation-delay: -5s; }
  .hero-slide:nth-child(3) { animation-delay: -10s; }
  .hero-slide:nth-child(4) { animation-delay: -15s; }
  @keyframes heroFade {
    0%   { opacity: 0; transform: scale(1.0); }
    4%   { opacity: 1; }
    21%  { opacity: 1; transform: scale(1.07); }
    27%  { opacity: 0; transform: scale(1.09); }
    100% { opacity: 0; }
  }
  .hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(160deg, rgba(36,24,16,0.62) 0%, rgba(74,50,34,0.50) 78%); }
  .hero > .wrap { position: relative; z-index: 2; }
  @media (prefers-reduced-motion: reduce) { .hero-slide { animation: none; opacity: 0; } .hero-slide:first-child { opacity: 1; } }

  .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.12; margin-bottom: 22px; text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
  .hero p { font-size: 1.08rem; color: rgba(243,236,223,0.92); max-width: 46ch; margin-bottom: 34px; text-shadow: 0 1px 10px rgba(0,0,0,0.4); }
  .hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; }

  section { padding: 68px 0; }
  .section-head { max-width: 56ch; margin-bottom: 42px; }
  .section-head .eyebrow { color: var(--moss); font-weight: 500; font-size: 0.92rem; margin-bottom: 10px; }
  .section-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
  .section-head p { color: #5a4d3f; margin-top: 12px; }

  .featured { background: #fff; border-top: 1px solid #e4dac6; border-bottom: 1px solid #e4dac6; }
  .featured-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-auto-rows: 210px; gap: 18px; }
  @media (max-width: 860px) { .featured-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } }
  @media (max-width: 560px) { .featured-grid { grid-template-columns: 1fr; } }
  .feat-card {
    position: relative; overflow: hidden; background: var(--walnut);
    display: flex; align-items: flex-end; min-height: 210px; border: 1px solid #e4dac6;
  }
  .feat-card.tall { grid-row: span 3; min-height: 660px; }
  @media (max-width: 860px) { .feat-card.tall { grid-row: auto; min-height: 260px; } }
  .feat-card .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
  .feat-card .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,24,16,0) 30%, rgba(24,16,10,0.88) 100%); }
  .feat-card .content { position: relative; z-index: 1; padding: 20px 22px; color: var(--parchment); width: 100%; }
  .feat-card .badge-tag {
    display: inline-block; background: var(--brass); color: var(--espresso);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 4px 10px; margin-bottom: 10px;
  }
  .feat-card h3 { font-size: 1.25rem; margin-bottom: 6px; }
  .feat-card.tall h3 { font-size: 1.55rem; }
  .feat-card p { font-size: 0.85rem; color: rgba(243,236,223,0.85); margin: 0 0 14px; max-width: 34ch; }
  .feat-card a.feat-cta {
    display: inline-block; font-size: 0.82rem; font-weight: 600; color: var(--parchment);
    border-bottom: 1px solid var(--brass-light);
  }
  .feat-card a.feat-cta:hover { color: var(--brass-light); }

  .categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  @media (max-width: 760px) { .categories { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .categories { grid-template-columns: 1fr; } }

  /* WooCommerce's own shop-loop wrapper — mirrors .categories so Shop matches the design */
  ul.products {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
    list-style: none; padding: 0; margin: 0 0 40px;
  }
  @media (max-width: 760px) { ul.products { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { ul.products { grid-template-columns: 1fr; } }
  ul.products li.product { width: 100%; }
  .cat-card { background: #fff; border: 1px solid #e4dac6; overflow: hidden; }
  .cat-thumb {
    aspect-ratio: 4/3; position: relative;
    background: repeating-linear-gradient(100deg, var(--walnut) 0 14px, #5c4128 14px 28px);
  }
  .cat-thumb::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(36,24,16,0) 40%, rgba(36,24,16,0.55) 100%);
  }
  .cat-thumb span {
    position: absolute; left: 16px; bottom: 14px; color: var(--parchment);
    font-family: 'Fraunces', serif; font-size: 1.05rem; z-index: 1;
  }
  .cat-body { padding: 16px 18px 20px; }
  .cat-body p { font-size: 0.88rem; color: #6b5c49; margin: 0 0 14px; }
  .cat-body a { font-size: 0.88rem; font-weight: 500; color: var(--moss); }

  .why { background: var(--moss); color: var(--parchment); }
  .why .section-head .eyebrow { color: var(--brass-light); }
  .why .section-head p { color: rgba(243,236,223,0.8); }
  .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
  @media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } }
  .why-item h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--brass-light); }
  .why-item p { font-size: 0.93rem; color: rgba(243,236,223,0.82); margin: 0; }

  .quote-band {
    background: #fff; border-top: 1px solid #e4dac6; border-bottom: 1px solid #e4dac6;
  }
  .quote-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; }
  @media (max-width: 760px) { .quote-grid { grid-template-columns: 1fr; } }
  .quote-grid h2 { font-size: 1.8rem; margin-bottom: 14px; }
  .quote-grid p { color: #5a4d3f; margin-bottom: 26px; }
  .quote-options { display: flex; flex-direction: column; gap: 12px; }
  .quote-opt {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    border: 1px solid #e4dac6; background: var(--parchment);
  }
  .quote-opt .ico { color: var(--moss); font-family: 'Fraunces', serif; font-size: 1.1rem; }
  .quote-opt .txt { font-size: 0.9rem; }
  .quote-opt .txt b { display: block; font-size: 0.95rem; margin-bottom: 2px; }

  footer { background: var(--espresso); color: rgba(243,236,223,0.75); padding: 44px 0 calc(30px + env(safe-area-inset-bottom, 0px)); }
  .foot-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; font-size: 0.88rem; }
  .foot-grid .brand { margin-bottom: 8px; }
  footer a:hover { color: var(--parchment); }
  /* motion */
  .cat-card .cat-thumb { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .cat-card:hover .cat-thumb { transform: scale(1.06); }
  .feat-card .bg { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .feat-card:hover .bg { transform: scale(1.08); }
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in-view { opacity: 1; transform: translateY(0); }

  /* mobile nav */
  .nav-toggle-checkbox { display: none; }
  .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; order: 3; }
  .hamburger span { width: 22px; height: 2px; background: var(--walnut); display: block; border-radius: 2px; }
  @media (max-width: 880px) {
    header .wrap { flex-wrap: wrap; row-gap: 8px; }
    .brand { order: 1; }
    .cart { order: 2; margin-left: auto; }
    .hamburger { display: flex; order: 3; }
    nav {
      display: none; order: 4; width: 100%; flex-direction: column; align-items: flex-start;
      gap: 2px; background: #fff; border-top: 1px solid #e4dac6; margin-top: 10px; padding-top: 8px;
    }
    .nav-toggle-checkbox:checked ~ .wrap nav,
    .nav-toggle-checkbox:checked ~ nav { display: flex; }
    nav a { width: 100%; padding: 10px 2px; }
    .has-sub { position: static; width: 100%; }
    .has-sub > a::after { display: none; }
    .sub { position: static; display: block !important; box-shadow: none; border: none; margin-top: 0; padding-left: 14px; min-width: 0; }
    .sub a { padding: 8px 2px; font-size: 0.82rem; opacity: 0.8; }
  }