/* =====================================================
     TOKENS — convert to WP theme.json / variables.css later
     ===================================================== */
  :root{
    --color-bg:            #F7F8F5;
    --color-surface:       #FFFFFF;
    --color-surface-alt:   #EFF3EF;
    --color-ink:           #14231F;
    --color-ink-soft:      #4B5A55;
    --color-border:        #DCE3DE;
    --color-primary:       #1F5C50;
    --color-primary-dark:  #123A32;
    --color-primary-tint:  #E4EEEA;
    --color-accent:        #C8863B;
    --color-accent-tint:   #F7EADA;
    --color-sale:          #B4483A;

    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --shadow-card: 0 1px 2px rgba(20,35,31,0.06), 0 8px 24px -12px rgba(20,35,31,0.12);
    --shadow-card-hover: 0 4px 8px rgba(20,35,31,0.08), 0 20px 32px -16px rgba(20,35,31,0.20);

    --ease: cubic-bezier(.4,0,.2,1);
    --container-max: 1240px;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--color-bg);
    color:var(--color-ink);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; margin:0; padding:0; }
  h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:var(--color-primary-dark); }
  button{ font-family:inherit; cursor:pointer; }
  :focus-visible{ outline:2px solid var(--color-primary); outline-offset:3px; }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }

  .wrap{ max-width:var(--container-max); margin:0 auto; padding:0 24px; }

  /* =====================================================
     HEADER
     ===================================================== */
  .site-header{
    background:var(--color-surface);
    border-bottom:1px solid var(--color-border);
    position:sticky; top:0; z-index:40;
  }
  .site-header__bar{
    display:flex; align-items:center; justify-content:space-between;
    gap:32px; padding:18px 0;
  }
  .site-logo{
    display:flex; align-items:baseline; gap:8px;
    font-family:var(--font-display); font-weight:600; font-size:1.5rem;
    color:var(--color-primary-dark); flex-shrink:0;
  }
  .site-logo span{ color:var(--color-accent); font-size:1.5rem; line-height:1; }

  .main-nav ul{ display:flex; gap:28px; }
  .main-nav a{
    font-size:0.94rem; font-weight:500; color:var(--color-ink-soft);
    transition:color .2s var(--ease);
  }
  .main-nav a:hover, .main-nav a.is-active{ color:var(--color-primary); }

  /* Search box — design only, no logic yet */
  .search-box{
    display:flex; align-items:center; gap:10px;
    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    border-radius:999px;
    padding:10px 16px;
    width:260px;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease), width .25s var(--ease);
  }
  .search-box:focus-within{
    border-color:var(--color-primary);
    box-shadow:0 0 0 4px var(--color-primary-tint);
    width:300px;
    background:var(--color-surface);
  }
  .search-box__icon{ flex-shrink:0; color:var(--color-ink-soft); display:flex; }
  .search-box__input{
    border:0; background:transparent; outline:none;
    font-family:var(--font-body); font-size:0.92rem; color:var(--color-ink);
    width:100%;
  }
  .search-box__input::placeholder{ color:#8A968F; }
  /* Loading state: add class="search-box is-loading" to preview */
  .search-box__loader{
    width:16px; height:16px; flex-shrink:0; display:none;
    border:2px solid var(--color-border);
    border-top-color:var(--color-primary);
    border-radius:50%;
    animation:spin .7s linear infinite;
  }
  .search-box.is-loading .search-box__loader{ display:block; }
  .search-box.is-loading .search-box__icon{ display:none; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .nav-toggle{ display:none; }

  /* Dynamic-only states */
  .empty-state{
    grid-column:1/-1;
    text-align:center; padding:48px 20px;
    color:var(--color-ink-soft); background:var(--color-surface);
    border:1px dashed var(--color-border); border-radius:var(--radius-lg);
  }
  .blog-grid[aria-busy="true"]{ opacity:0.5; pointer-events:none; transition:opacity .2s var(--ease); }
  .category-card.is-active{ box-shadow:0 0 0 2px var(--color-accent) inset; }

  /* =====================================================
     HERO
     ===================================================== */
  .blog-hero{ padding:56px 0 40px; }
  .blog-hero__eyebrow{
    color:var(--color-accent); font-weight:600; font-size:0.85rem;
    letter-spacing:0.02em; margin-bottom:10px;
  }
  .blog-hero h1{
    font-size:clamp(2.1rem, 3.6vw, 3rem);
    font-weight:600; line-height:1.15; max-width:18ch;
    hyphens:none; -webkit-hyphens:none; word-break:normal; overflow-wrap:normal;
  }
  .blog-hero p{
    margin-top:14px; max-width:56ch; color:var(--color-ink-soft); font-size:1.05rem;
  }

  /* Hero search — bigger, standalone bar under the title */
  .hero-search{
    display:flex; align-items:center; gap:12px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:999px;
    padding:14px 22px;
    max-width:480px;
    margin-top:28px;
    box-shadow:var(--shadow-card);
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  }
  .hero-search:focus-within{
    border-color:var(--color-primary);
    box-shadow:0 0 0 4px var(--color-primary-tint);
  }
  .hero-search__icon{ flex-shrink:0; color:var(--color-ink-soft); display:flex; }
  .hero-search__input{
    border:0; background:transparent; outline:none; flex:1;
    font-family:var(--font-body); font-size:1rem; color:var(--color-ink);
  }
  .hero-search__input::placeholder{ color:#8A968F; }
  .hero-search__loader{
    width:18px; height:18px; flex-shrink:0; display:none;
    border:2px solid var(--color-border);
    border-top-color:var(--color-primary);
    border-radius:50%;
    animation:spin .7s linear infinite;
  }
  .hero-search.is-loading .hero-search__loader{ display:block; }
  .hero-search.is-loading .hero-search__icon{ display:none; }

  /* =====================================================
     CONTENT LAYOUT — main + sidebar
     ===================================================== */
  .content-layout{
    display:grid;
    grid-template-columns: 1fr 320px;
    grid-template-areas: "main aside";
    gap:48px;
    padding-bottom:64px;
    align-items:start;
  }
  .blog-main{ grid-area:main; min-width:0; }
  .sidebar{ grid-area:aside; }

  /* Blog grid */
  .blog-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
  }
  .blog-card{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    display:flex; flex-direction:column;
    box-shadow:var(--shadow-card);
    transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  }
  .blog-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-card-hover);
    border-color:#C7D6CF;
  }
  .blog-card__media{
    position:relative; aspect-ratio:4/3; overflow:hidden;
    background:var(--color-surface-alt);
  }
  .blog-card__media img{
    width:100%; height:100%; object-fit:cover;
    transition:transform .5s var(--ease);
  }
  .blog-card:hover .blog-card__media img{ transform:scale(1.06); }
  .blog-card__tag{
    position:absolute; top:14px; left:14px;
    background:rgba(20,35,31,0.82); backdrop-filter:blur(3px);
    color:#fff; font-size:0.72rem; font-weight:600;
    letter-spacing:0.02em; padding:5px 11px; border-radius:999px;
  }
  .blog-card__body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
  .blog-card__title{ font-size:1.15rem; font-weight:600; line-height:1.32; }
  .blog-card__title a{ transition:color .2s var(--ease); }
  .blog-card__title a:hover{ color:var(--color-primary); }
  .blog-card__excerpt{
    color:var(--color-ink-soft); font-size:0.92rem; line-height:1.55;
    flex:1;
  }
  .blog-card__meta{
    display:flex; align-items:center; gap:10px;
    font-size:0.8rem; color:#7C8A83;
    margin-top:4px; padding-top:14px; border-top:1px solid var(--color-border);
  }
  .blog-card__meta .dot{ width:3px; height:3px; border-radius:50%; background:#B7C2BB; }

  /* =====================================================
     SIDEBAR — Popular posts
     ===================================================== */
  .sidebar__panel{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:26px 24px;
  }
  .sidebar__title{
    font-size:1.05rem; font-weight:600;
    display:flex; align-items:center; gap:8px;
    margin-bottom:20px; color:var(--color-primary-dark);
  }
  .sidebar__title::before{
    content:""; width:4px; height:18px; border-radius:2px;
    background:var(--color-accent); display:inline-block;
  }
  .popular-posts{ display:flex; flex-direction:column; gap:18px; }
  .popular-post{
    display:grid; grid-template-columns:64px 1fr; gap:14px;
    padding-bottom:18px; border-bottom:1px solid var(--color-border);
  }
  .popular-post:last-child{ border-bottom:0; padding-bottom:0; }
  .popular-post__thumb{
    width:64px; height:64px; border-radius:var(--radius-sm); overflow:hidden;
    background:var(--color-surface-alt); flex-shrink:0;
  }
  .popular-post__thumb img{ width:100%; height:100%; object-fit:cover; }
  .popular-post__title{
    font-size:0.9rem; font-weight:600; line-height:1.35;
    font-family:var(--font-body);
  }
  .popular-post__title a:hover{ color:var(--color-primary); }
  .popular-post__meta{
    margin-top:5px; font-size:0.76rem; color:#8A968F;
    display:flex; gap:8px; align-items:center;
  }

  .sidebar__cta{ margin-top:24px; text-align:center; }
  .sidebar__cta-box{
    background:var(--color-primary); color:#fff;
    border-radius:var(--radius-md); padding:24px 20px;
  }
  .sidebar__cta-box h4{ color:#fff; font-size:1.05rem; margin-bottom:8px; }
  .sidebar__cta-box p{ font-size:0.85rem; color:#CFE1DA; margin:0 0 16px; }
  .sidebar__cta-box .btn{ width:100%; }

  /* =====================================================
     BUTTONS
     ===================================================== */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 22px; border-radius:999px; border:1px solid transparent;
    font-size:0.88rem; font-weight:600; white-space:nowrap;
    transition:transform .18s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
  }
  .btn-accent{ background:var(--color-accent); color:#fff; }
  .btn-accent:hover{ background:#B4762F; transform:translateY(-1px); box-shadow:0 8px 16px -6px rgba(200,134,59,0.5); }
  .btn-outline{ background:transparent; border-color:#fff; color:#fff; }
  .btn-outline:hover{ background:rgba(255,255,255,0.12); }
  .btn-ghost{ background:var(--color-primary-tint); color:var(--color-primary-dark); }
  .btn-ghost:hover{ background:#D9E7E1; }

  /* =====================================================
     CATEGORY SECTION
     ===================================================== */
  .section{ padding:56px 0; }
  .section--alt{ background:var(--color-surface); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
  .section__head{
    display:flex; align-items:flex-end; justify-content:space-between;
    margin-bottom:32px; gap:20px; flex-wrap:wrap;
  }
  .section__eyebrow{ color:var(--color-accent); font-weight:600; font-size:0.82rem; margin-bottom:8px; }
  .section__head h2{ font-size:1.8rem; font-weight:600; }
  .section__head p{ color:var(--color-ink-soft); margin-top:8px; max-width:48ch; }

  .category-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
  }
  .category-card{
    position:relative; border-radius:var(--radius-lg); overflow:hidden;
    background:var(--color-primary-dark);
    min-height:150px; padding:22px;
    display:flex; flex-direction:column; justify-content:flex-end;
    transition:transform .28s var(--ease), box-shadow .28s var(--ease);
  }
  .category-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }
  .category-card::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(155deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    opacity:0.94; z-index:0;
  }
  .category-card::after{
    content:""; position:absolute; right:-18px; top:-18px; width:100px; height:100px;
    border-radius:50%; background:rgba(255,255,255,0.07); z-index:0;
  }
  .category-card__icon{
    position:relative; z-index:1; font-size:1.6rem; margin-bottom:auto;
  }
  .category-card__name{
    position:relative; z-index:1; color:#fff; font-family:var(--font-display);
    font-weight:600; font-size:1.15rem;
  }
  .category-card__count{
    position:relative; z-index:1; color:#B7D2C7; font-size:0.8rem; margin-top:4px;
  }
  .category-card.accent::before{
    background:linear-gradient(155deg, var(--color-accent) 0%, #A46326 100%);
  }
  .category-card.accent .category-card__count{ color:#F3DDBC; }

  /* =====================================================
     PRODUCTS SECTION
     ===================================================== */
  .product-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:20px;
  }
  .product-card{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:18px 18px 22px;
    display:flex; flex-direction:column;
    position:relative;
    transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  }
  .product-card:hover{
    transform:translateY(-4px); box-shadow:var(--shadow-card-hover); border-color:#C7D6CF;
  }
  .product-card__badge{
    position:absolute; top:14px; left:14px; z-index:1;
    background:var(--color-sale); color:#fff; font-size:0.7rem; font-weight:700;
    padding:4px 10px; border-radius:999px; letter-spacing:0.02em;
  }
  .product-card__media{
    aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden;
    background:var(--color-surface-alt); margin-bottom:14px;
  }
  .product-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
  .product-card:hover .product-card__media img{ transform:scale(1.05); }
  .product-card__name{ font-size:0.95rem; font-weight:600; line-height:1.35; font-family:var(--font-body); min-height:2.6em; }
  .product-card__rating{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:0.78rem; color:#8A968F; }
  .product-card__stars{ color:var(--color-accent); letter-spacing:1px; font-size:0.85rem; }
  .product-card__price{ margin-top:10px; display:flex; align-items:baseline; gap:8px; }
  .product-card__price .current{ font-size:1.1rem; font-weight:700; color:var(--color-primary-dark); }
  .product-card__price .was{ font-size:0.85rem; color:#A6B1AB; text-decoration:line-through; }
  .product-card .btn{ margin-top:14px; width:100%; }

  /* =====================================================
     FOOTER (minimal, for context only)
     ===================================================== */
  .site-footer{
    background:var(--color-primary-dark); color:#CFE1DA;
    padding:36px 0; margin-top:24px;
  }
  .site-footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
  .site-footer p{ font-size:0.85rem; margin:0; }

  /* =====================================================
     RESPONSIVE
     ===================================================== */
  @media (max-width:1100px){
    .blog-grid{ grid-template-columns:repeat(2, 1fr); }
    .product-grid{ grid-template-columns:repeat(3, 1fr); }
    .category-grid{ grid-template-columns:repeat(2, 1fr); }
  }

  @media (max-width:900px){
    .content-layout{
      grid-template-columns:1fr;
      grid-template-areas:
        "main"
        "aside";
      gap:40px;
    }
    .search-box{ width:200px; }
    .search-box:focus-within{ width:220px; }
  }

  @media (max-width:720px){
    .main-nav{ display:none; }
    .site-header__bar{ gap:14px; }
    .blog-grid{ grid-template-columns:1fr; }
    .product-grid{ grid-template-columns:repeat(2, 1fr); }
    .category-grid{ grid-template-columns:1fr; }
    .blog-hero{ padding:36px 0 28px; }
    .section{ padding:40px 0; }
    .search-box{ width:auto; flex:1; }
  }

  @media (max-width:480px){
    .wrap{ padding:0 16px; }
    .product-grid{ grid-template-columns:1fr 1fr; }
    .section__head{ flex-direction:column; align-items:flex-start; }
  }