:root{
    --ivory:#FBF6EE;
    --ivory-deep:#F3E9D8;
    --maroon:#7A1F1F;
    --maroon-deep:#561414;
    --navy:#16213D;
    --gold:#C8932E;
    --gold-light:#E8C77A;
    --ink:#3A2A20;
    --ink-soft:#736054;
    --line:rgba(122,31,31,0.14);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',sans-serif;
    background:var(--ivory);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Playfair Display',serif;
    color:var(--maroon-deep);
    line-height:1.15;
    font-weight:600;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

  /* ---------- Header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(251,246,238,0.94);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 24px; max-width:1180px; margin:0 auto;
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand img{ height:46px; width:auto; flex-shrink:0; }
  .brand-text{
    font-family:'Playfair Display',serif; font-weight:700;
    font-size:17px; color:var(--maroon-deep);
  }
  .brand-text span{
    display:block; font-family:'Inter',sans-serif; font-weight:500;
    font-size:9.5px; letter-spacing:0.18em; color:var(--gold);
    text-transform:uppercase; margin-top:2px;
  }
  nav ul{ display:flex; gap:28px; list-style:none; font-size:14px; font-weight:500; }
  nav ul a{ position:relative; transition:color .2s; }
  nav ul a:hover{ color:var(--maroon); }
  nav ul a::after{
    content:''; position:absolute; left:0; bottom:-6px;
    width:0; height:2px; background:var(--gold); transition:width .25s;
  }
  nav ul a:hover::after{ width:100%; }
  .nav-actions{ display:flex; align-items:center; gap:16px; }
  .icon-btn{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; background:transparent;
    cursor:pointer; transition:border-color .2s, background .2s;
  }
  .icon-btn:hover{ border-color:var(--gold); background:var(--ivory-deep); }
  .icon-btn svg{ width:18px; height:18px; stroke:var(--maroon-deep); fill:none; stroke-width:1.8; }
  .menu-toggle{
    display:none; width:42px; height:42px; border:1px solid var(--line);
    border-radius:50%; background:transparent; cursor:pointer;
    align-items:center; justify-content:center;
  }
  .menu-toggle svg{ width:20px; height:20px; stroke:var(--maroon-deep); fill:none; stroke-width:2; }

  /* ---------- Hero (real banner photo) ---------- */
  .hero{
    position:relative;
    min-height:560px;
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0;
    background-image:url('../images/range.jpeg');
    background-size:cover;
    background-position:center 30%;
  }
  .hero-overlay{
    position:absolute; inset:0;
    background:rgba(20,10,8,0.92);
  }
  .hero-content{
    position:relative; z-index:2;
    max-width:640px;
    padding:80px 24px;
    margin:0 auto;
    width:100%;
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:12px; font-weight:600; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--gold-light); margin-bottom:18px;
  }
  .eyebrow::before{ content:''; width:28px; height:1px; background:var(--gold-light); }
  .hero h1{
    font-size:clamp(32px, 4.6vw, 50px);
    color:#FBF6EE;
    margin-bottom:14px;
  }
  .hero h1 em{ font-style:italic; color:var(--gold-light); }
  .hero p.lead{
    font-size:16px; color:rgba(251,246,238,0.85);
    max-width:480px; margin-bottom:30px;
  }
  .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
  .btn{
    display:inline-flex; align-items:center; gap:8px; padding:14px 28px;
    border-radius:2px; font-weight:600; font-size:14px; letter-spacing:0.02em;
    border:1px solid transparent; cursor:pointer;
    transition:transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
  }
  .btn-primary{ background:var(--gold); color:var(--maroon-deep); }
  .btn-primary:hover{ background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 20px -8px rgba(200,147,46,0.6); }
  .btn-outline{ background:transparent; border-color:rgba(251,246,238,0.6); color:#FBF6EE; }
  .btn-outline:hover{ background:#FBF6EE; color:var(--maroon-deep); transform:translateY(-2px); border-color:#FBF6EE; }

  /* ---------- Trust strip ---------- */
  .trust-strip{
    background:var(--navy); color:var(--ivory); padding:0;
  }
  .trust-strip .wrap{
    display:grid; grid-template-columns:repeat(6,1fr);
    text-align:center;
  }
  .trust-item{
    padding:22px 12px;
    border-right:1px solid rgba(251,246,238,0.1);
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .trust-item:last-child{ border-right:none; }
  .trust-item svg{ width:24px; height:24px; stroke:var(--gold-light); fill:none; stroke-width:1.6; }
  .trust-item span{ font-size:11.5px; letter-spacing:0.03em; color:rgba(251,246,238,0.85); font-weight:500; line-height:1.4; }

  /* ---------- Section heading ---------- */
  .section{ padding:80px 0; }
  .section-head{ text-align:center; max-width:660px; margin:0 auto 52px; }
  .section-head .eyebrow{ justify-content:center; color:var(--gold); }
  .section-head .eyebrow::before{ display:none; }
  .section-head .eyebrow::after{ content:''; width:28px; height:1px; background:var(--gold); }
  .section-head h2{ font-size:clamp(26px,3.6vw,36px); }
  .section-head p{ color:var(--ink-soft); margin-top:14px; font-size:15px; }

  /* ---------- Category grid (real categories from doc) ---------- */
  .cat-grid{
    display:grid; grid-template-columns:repeat(6,1fr); gap:16px;
  }
  .cat-card{
    background:#fff; border:1px solid var(--line); border-radius:4px;
    padding:26px 12px; text-align:center;
    transition:transform .25s, box-shadow .25s, border-color .25s; cursor:pointer;
  }
  .cat-card:hover{ transform:translateY(-6px); box-shadow:0 16px 32px -20px rgba(122,31,31,0.35); border-color:var(--gold); }
  .cat-icon{
    width:100px; height:100px; margin:0 auto 14px; border-radius:50%;
    background:var(--ivory-deep); display:flex; align-items:center; justify-content:center;
  }
  .cat-icon svg{ width:22px; height:22px; stroke:var(--maroon); fill:none; stroke-width:1.6; }
  .cat-card h4{ font-family:'Inter',sans-serif; font-weight:600; font-size:13px; color:var(--ink); }
  .cat-card p{ font-size:11px; color:var(--ink-soft); margin-top:4px; line-height:1.4; }

  /* ---------- Product showcase (real photos) ---------- */
  .product-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  }
  .product-card{
    background:#fff; border:1px solid var(--line); border-radius:4px;
    overflow:hidden; transition:box-shadow .25s, transform .25s;
  }
  .product-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px -24px rgba(122,31,31,0.4); }
  .product-thumb{
    height:200px; overflow:hidden; background:var(--ivory-deep);
    display:flex; align-items:center; justify-content:center;
  }
  .product-thumb img{ width:100%; height:100%; object-fit:cover; }
  .product-body{ padding:16px 18px; }
  .product-body h4{ font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; margin-bottom:4px; }
  .product-body .tag{ font-size:11.5px; color:var(--gold); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }

  /* ---------- Legacy / About (real photo + real names) ---------- */
  .legacy{ background:var(--ivory-deep); }
  .legacy .wrap{
    display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:center;
  }
  .legacy-photo{
    border-radius:4px; overflow:hidden;
    box-shadow:0 24px 48px -28px rgba(122,31,31,0.4);
    border:1px solid var(--line);
  }
  .legacy-photo img{ width:100%; height:auto; object-fit:cover; }
  .legacy-quote{
    font-family:'Playfair Display',serif; font-size:clamp(20px,2.6vw,26px);
    font-style:italic; color:var(--maroon-deep); line-height:1.45; margin-bottom:22px;
    padding-left:24px; border-left:3px solid var(--gold);
  }
  .legacy-body p{ color:var(--ink-soft); margin-bottom:16px; font-size:14.5px; }
  .legacy-body p strong{ color:var(--maroon-deep); font-weight:600; }
  .generations{ display:flex; margin-top:24px; }
  .gen{ flex:1; text-align:center; padding:20px 12px; border-right:1px solid var(--line); }
  .gen:last-child{ border-right:none; }
  .gen-name{ font-weight:600; font-size:13.5px; color:var(--maroon-deep); margin-bottom:4px; }
  .gen-role{ font-size:11.5px; color:var(--ink-soft); letter-spacing:0.03em; }

  /* ---------- Manufacturing ---------- */
  .manufacturing .wrap{
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  }
  .feature-list{ list-style:none; margin-top:24px; }
  .feature-list li{
    display:flex; align-items:flex-start; gap:14px; padding:13px 0;
    border-bottom:1px solid var(--line); font-size:14.5px;
  }
  .feature-list li:last-child{ border-bottom:none; }
  .feature-list .tick{
    width:22px; height:22px; flex-shrink:0; border-radius:50%; background:var(--maroon);
    display:flex; align-items:center; justify-content:center; margin-top:2px;
  }
  .feature-list .tick svg{ width:11px; height:11px; stroke:var(--gold-light); fill:none; stroke-width:3; }
  .map-card{ background:#fff; border:1px solid var(--line); border-radius:4px; padding:32px; }
  .map-card h4{
    font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:20px;
  }
  .loc-row{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line); }
  .loc-row:last-child{ border-bottom:none; }
  .loc-row .city{ font-family:'Playfair Display',serif; font-size:18px; font-weight:600; color:var(--maroon-deep); }
  .loc-row .country{ font-size:12px; color:var(--ink-soft); letter-spacing:0.05em; text-transform:uppercase; }

  /* ---------- CTA banner ---------- */
  .cta-banner{
    background:var(--maroon); color:var(--ivory); border-radius:4px; padding:44px;
    display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  }
  .cta-banner h3{ color:var(--ivory); font-size:clamp(21px,2.8vw,28px); max-width:480px; }
  .cta-banner p{ color:var(--gold-light); margin-top:8px; font-size:13.5px; }

  /* ---------- Footer ---------- */
  footer{ background:var(--maroon-deep); color:rgba(251,246,238,0.78); padding:60px 0 28px; }
  .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px;
    padding-bottom:36px; border-bottom:1px solid rgba(251,246,238,0.12);
  }
  .footer-grid h4{
    color:var(--gold-light); font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px;
    letter-spacing:0.12em; text-transform:uppercase; margin-bottom:16px;
  }
  .footer-grid ul{ list-style:none; font-size:13.5px; }
  .footer-grid ul li{ margin-bottom:9px; }
  .footer-grid ul a:hover{ color:var(--gold-light); }
  .footer-brand .brand{ margin-bottom:14px; }
  .footer-brand .brand img{ filter:brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(0deg); height:40px; }
  .footer-brand .brand-text{ color:var(--ivory); }
  .footer-brand p{ font-size:13.5px; max-width:280px; color:rgba(251,246,238,0.6); }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; padding-top:26px;
    font-size:12.5px; color:rgba(251,246,238,0.5); flex-wrap:wrap; gap:12px;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    .hero-content{ max-width:100%; text-align:center; padding:64px 24px; }
    .eyebrow{ justify-content:center; }
    .eyebrow::before{ display:none; }
    .hero p.lead{ margin:0 auto 30px; }
    .hero-ctas{ justify-content:center; }
    .trust-strip .wrap{ grid-template-columns:repeat(3,1fr); }
    .trust-item{ border-bottom:1px solid rgba(251,246,238,0.1); }
    .cat-grid{ grid-template-columns:repeat(3,1fr); }
    .legacy .wrap{ grid-template-columns:1fr; gap:36px; }
    .manufacturing .wrap{ grid-template-columns:1fr; gap:36px; }
    .product-grid{ grid-template-columns:repeat(2,1fr); }
    .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  }

  @media (max-width: 680px){
    nav ul{ display:none; }
    .menu-toggle{ display:flex; }
    .hero{ min-height:480px; }
    .hero-bg{ background-position:center 20%; }
    .cat-grid{ grid-template-columns:repeat(2,1fr); }
    .trust-strip .wrap{ grid-template-columns:repeat(2,1fr); }
    .generations{ flex-wrap:wrap; }
    .gen{ flex:1 1 50%; border-right:none; border-bottom:1px solid var(--line); }
    .cta-banner{ flex-direction:column; text-align:center; padding:32px 22px; }
    .footer-grid{ grid-template-columns:1fr; gap:28px; }
    .footer-bottom{ flex-direction:column; text-align:center; }
    .section{ padding:52px 0; }
  }

  @media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto; } }






  /* ---------- Page header / breadcrumb ---------- */
  .page-header{
    background:var(--navy);
    color:var(--ivory);
    padding:44px 0 38px;
  }
  .breadcrumb{
    font-size:12.5px; color:rgba(251,246,238,0.6); margin-bottom:10px;
    display:flex; gap:8px; align-items:center;
  }
  .breadcrumb a:hover{ color:var(--gold-light); }
  .page-header h1{
    color:var(--ivory);
    font-size:clamp(28px, 3.6vw, 38px);
  }
  .page-header p{
    color:rgba(251,246,238,0.7);
    margin-top:8px;
    font-size:14.5px;
    max-width:560px;
  }

  /* ---------- Shop layout ---------- */
  .shop-section{ padding:48px 0 80px; }
  .shop-layout{
    display:grid;
    grid-template-columns:240px 1fr;
    gap:40px;
    align-items:start;
  }

  /* Sidebar filters */
  .filters{
    border:1px solid var(--line);
    border-radius:4px;
    background:#fff;
    padding:24px;
    position:sticky;
    top:96px;
  }
  .filters h4{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:16px;
  }
  .filter-group{ margin-bottom:28px; }
  .filter-group:last-child{ margin-bottom:0; }
  .filter-list{ list-style:none; display:flex; flex-direction:column; gap:10px; }
  .filter-list button{
    background:none; border:none; cursor:pointer; text-align:left;
    font-size:13.5px; color:var(--ink-soft); padding:4px 0;
    display:flex; justify-content:space-between; width:100%;
    transition:color .2s;
  }
  .filter-list button:hover{ color:var(--maroon); }
  .filter-list button.active{ color:var(--maroon); font-weight:600; }
  .filter-list button .count{ color:var(--ink-soft); font-weight:400; font-size:12px; }
  .filter-list button.active .count{ color:var(--gold); }
  .clear-filters{
    margin-top:18px; font-size:12.5px; color:var(--maroon);
    text-decoration:underline; cursor:pointer; background:none; border:none; padding:0;
  }

  /* Toolbar */
  .shop-toolbar{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:28px; flex-wrap:wrap; gap:12px;
  }
  .result-count{ font-size:13.5px; color:var(--ink-soft); }
  .result-count strong{ color:var(--maroon-deep); }
  .sort-select{
    font-size:13.5px; color:var(--ink); border:1px solid var(--line);
    border-radius:2px; padding:8px 12px; background:#fff; cursor:pointer;
  }

  /* Mobile filter toggle */
  .mobile-filter-btn{
    display:none;
    align-items:center; gap:8px;
    border:1px solid var(--line); border-radius:2px;
    padding:9px 16px; font-size:13.5px; color:var(--maroon-deep);
    background:#fff; cursor:pointer;
  }
  .mobile-filter-btn svg{ width:15px; height:15px; stroke:var(--maroon-deep); fill:none; stroke-width:1.8; }

  /* Product grid */
  .product-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .product-card{
    background:#fff; border:1px solid var(--line); border-radius:4px;
    overflow:hidden; transition:box-shadow .25s, transform .25s;
    display:flex; flex-direction:column;
  }
  .product-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px -24px rgba(122,31,31,0.4); }
  .product-thumb{
    height:220px; overflow:hidden; background:var(--ivory-deep);
    position:relative;
  }
  .product-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
  .product-card:hover .product-thumb img{ transform:scale(1.05); }
  .badge{
    position:absolute; top:12px; left:12px;
    background:var(--gold); color:var(--maroon-deep);
    font-size:10.5px; font-weight:600; letter-spacing:0.04em;
    text-transform:uppercase; padding:5px 10px; border-radius:2px;
  }
  .product-body{ padding:18px 18px 20px; flex:1; display:flex; flex-direction:column; }
  .product-body .tag{
    font-size:11px; color:var(--gold); font-weight:600;
    letter-spacing:0.05em; text-transform:uppercase; margin-bottom:6px;
  }
  .product-body h4{
    font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px; margin-bottom:8px;
  }
  .product-body .desc{ font-size:12.5px; color:var(--ink-soft); margin-bottom:14px; flex:1; }
  .product-footer{
    display:flex; align-items:center; justify-content:space-between; margin-top:auto;
  }
  .price{ font-size:14.5px; color:var(--maroon-deep); font-weight:600; }
  .price span{ font-size:11.5px; color:var(--ink-soft); font-weight:400; }
  .add-btn{
    border:1px solid var(--maroon); background:transparent; color:var(--maroon-deep);
    font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:2px;
    cursor:pointer; transition:background .2s, color .2s;
  }
  .add-btn:hover{ background:var(--maroon); color:var(--ivory); }

  /* Pagination */
  .pagination{
    display:flex; justify-content:center; gap:8px; margin-top:48px;
  }
  .page-btn{
    width:38px; height:38px; border-radius:2px; border:1px solid var(--line);
    background:#fff; color:var(--ink-soft); font-size:13.5px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s, background .2s, color .2s;
  }
  .page-btn.active{ background:var(--maroon); border-color:var(--maroon); color:var(--ivory); }
  .page-btn:hover:not(.active){ border-color:var(--gold); }

  /* CTA banner (reused style) */
  .cta-banner{
    background:var(--maroon); color:var(--ivory); border-radius:4px; padding:44px;
    display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
    margin-top:60px;
  }
  .cta-banner h3{ color:var(--ivory); font-size:clamp(21px,2.8vw,28px); max-width:480px; }
  .cta-banner p{ color:var(--gold-light); margin-top:8px; font-size:13.5px; }
  .btn{
    display:inline-flex; align-items:center; gap:8px; padding:13px 26px;
    border-radius:2px; font-weight:600; font-size:13.5px; letter-spacing:0.02em;
    border:1px solid transparent; cursor:pointer;
    transition:transform .2s, box-shadow .2s, background .2s, color .2s;
  }
  .btn-primary{ background:var(--gold); color:var(--maroon-deep); }
  .btn-primary:hover{ background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 20px -8px rgba(200,147,46,0.6); }

  /* ---------- Footer (shared) ---------- */
  footer{ background:var(--maroon-deep); color:rgba(251,246,238,0.78); padding:60px 0 28px; }
  .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px;
    padding-bottom:36px; border-bottom:1px solid rgba(251,246,238,0.12);
  }
  .footer-grid h4{
    color:var(--gold-light); font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px;
    letter-spacing:0.12em; text-transform:uppercase; margin-bottom:16px;
  }
  .footer-grid ul{ list-style:none; font-size:13.5px; }
  .footer-grid ul li{ margin-bottom:9px; }
  .footer-grid ul a:hover{ color:var(--gold-light); }
  .footer-brand .brand{ margin-bottom:14px; }
  .footer-brand .brand img{ filter:brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(0deg); height:40px; }
  .footer-brand .brand-text{ color:var(--ivory); }
  .footer-brand p{ font-size:13.5px; max-width:280px; color:rgba(251,246,238,0.6); }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; padding-top:26px;
    font-size:12.5px; color:rgba(251,246,238,0.5); flex-wrap:wrap; gap:12px;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    .shop-layout{ grid-template-columns:1fr; }
    .filters{
      display:none;
      position:fixed; inset:0; z-index:100; border-radius:0;
      top:0; height:100vh; overflow-y:auto; max-width:320px;
      box-shadow:0 0 40px rgba(0,0,0,0.2);
    }
    .filters.open{ display:block; }
    .mobile-filter-btn{ display:flex; }
    .product-grid{ grid-template-columns:repeat(2,1fr); }
    .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  }

  @media (max-width: 680px){
    nav ul{ display:none; }
    .menu-toggle{ display:flex; }
    .product-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
    .product-thumb{ height:160px; }
    .shop-toolbar{ flex-direction:column; align-items:flex-start; }
    .cta-banner{ flex-direction:column; text-align:center; padding:32px 22px; }
    .footer-grid{ grid-template-columns:1fr; gap:28px; }
    .footer-bottom{ flex-direction:column; text-align:center; }
    .page-header{ padding:32px 0 28px; }
  }

  @media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto; } }

  .filter-overlay{
    display:none; position:fixed; inset:0; background:rgba(20,10,8,0.5); z-index:90;
  }
  .filter-overlay.open{ display:block; }
  .filters-close{
    display:none; width:36px; height:36px; border-radius:50%; border:1px solid var(--line);
    background:transparent; align-items:center; justify-content:center; cursor:pointer;
    margin-bottom:16px;
  }
  @media (max-width: 980px){ .filters-close{ display:flex; } }