/* ---- from head_style.html ---- */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

  :root{
    /* Redesign palette — same variable names used throughout every
       page on the site, so remapping these values alone reskins
       the whole storefront without touching individual templates. */
    --ink: #121E2E;         /* brand navy, was #0F2030 */
    --ink-soft: #5B6472;    /* was #1C3550 */
    --sand: #F7F8FA;        /* was #F5F3EE */
    --paper: #FFFFFF;       /* was #FFFDF9 */
    --leaf: #2F8F5B;        /* now sage green, was slate #4C5C6E */
    --leaf-pale: #FDEEE2;   /* soft orange tint, was pale blue-grey */
    --gold: #F07822;        /* brand orange "clay", was #EF7510 */
    --gold-deep: #D5651A;   /* clay hover state, was #D4650A */
    --charcoal: #121E2E;    /* body text = brand navy now, was near-black */
    --line: #E4E7EC;        /* solid line colour, was translucent navy */
    --radius: 2px;          /* new design uses sharper corners than the old 6px */

    /* Standardized form-field tokens — every form styling block in this
       file and in admin.css (.field-group, .admin-form, .form-group/
       .form-control) references these same values, rather than each
       maintaining its own separate padding/radius/color that drifts
       out of sync over time. Change a value here and every form on
       the site — customer-facing and admin — updates together. */
    --field-radius: var(--radius);
    --field-padding: 13px 16px;
    --field-border: 1.5px solid var(--line);
    --field-label-color: var(--ink);
    --field-label-size: 13.5px;
    --field-font-size: 14.5px;
    --field-margin-bottom: 20px;
    --field-focus-shadow: 0 0 0 3px rgba(18, 30, 46, 0.08);

    /* New aliases matching the redesign file's own variable names,
       for any new component styles that reference them directly. */
    --pine: #121E2E;
    --pine-dark: #0B141F;
    --clay: #F07822;
    --clay-dark: #D5651A;
    --sage: #2F8F5B;
    --sage-light: #FDEEE2;
    --grey-badge: #8B93A0;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--sand);
    color: var(--charcoal);
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    line-height: 1.55;
  }
  h1,h2,h3,.display{
    font-family: 'Fraunces', serif;
    color: var(--ink);
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  a{ color: inherit; text-decoration: none; }
  img,svg{ display:block; max-width:100%; }
  .wrap{ max-width: 1180px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 640px){ .wrap{ padding: 0 20px; } }

  button, .btn{
    font-family:'Work Sans',sans-serif;
    font-weight:600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    border-radius: var(--radius);
    padding: 13px 24px;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .btn-primary{ background: var(--ink); color: var(--paper); }
  .btn-primary:hover{ background: var(--ink-soft); }  .btn-gold:hover{ background: var(--gold-deep); }
  .btn-ghost, .btn-view{ background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
  .btn-ghost:hover, .btn-view:hover{ border-color: var(--ink); }
  .btn-block{ width:100%; justify-content:center; }

  /* ---------- Nav ---------- */
  header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--sand);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
  }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:700; font-size:22px; color:var(--ink); }

  nav.wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    flex-wrap: wrap;
    gap: 10px 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .logo .mark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .navlinks {
    display: flex;
    gap: 34px;
    font-weight: 500;
    font-size: 15px;
  }

  .navlinks a {
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .navlinks a:hover {
    border-color: var(--gold);
  }

  .navcta .btn {
    padding: 10px 20px;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
  }

  .cart-icon .cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--gold);
    color: var(--paper);
    font-size: 10px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 860px) {
    .navlinks {
      display: none;
    }

    .menu-toggle {
      display: block;
    }
  }

  /* ---------- Breadcrumb ---------- */
  .breadcrumb-band{
    background: linear-gradient(135deg, var(--leaf-pale) 0%, var(--paper) 100%);
    border-bottom: 1px solid var(--line);
  }
  .breadcrumb{
    padding-top: 16px; padding-bottom: 16px;
    font-size:13.5px; color:#6B6B60;
    display:flex; align-items:center; flex-wrap:wrap; gap:2px;
  }
  .breadcrumb a{ display:inline-flex; align-items:center; gap:6px; font-weight:500; }
  .breadcrumb a:hover{ color: var(--ink); }
  .breadcrumb .current{ color: var(--ink); font-weight:600; }
  .breadcrumb .sep{ margin: 0 10px; opacity:0.45; font-size:12px; }
  .breadcrumb svg{ width:14px; height:14px; flex-shrink:0; }

  /* ---------- Product hero ---------- */
  .pdp{ padding: 34px 0 70px; }
  .pdp-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:flex-start; }
  @media (max-width:900px){ .pdp-grid{ grid-template-columns:1fr; gap:34px; } }

  .gallery-main{
    background: linear-gradient(155deg, #F3E4DE 0%, var(--paper) 65%);
    border-radius: 16px; border:1px solid var(--line);
    aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
  }
  .gallery-main svg{ width:52%; height:52%; }
  .gallery-main .stock-tag{
    position:absolute; top:18px; left:18px; background: var(--gold); color: var(--paper);
    font-size:12px; font-weight:700; padding:6px 12px; border-radius:40px; z-index:2;
  }
  .thumbs{ display:flex; flex-wrap: wrap; gap:12px; margin-top:14px; }
  .thumbs .thumb{
    width:76px; height:76px; border-radius:10px; border:1.5px solid var(--line);
    background: var(--paper); display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .thumbs .thumb.active{ border-color: var(--ink); }
  .thumbs .thumb svg{ width:60%; height:60%; }

  .pdp-info .cat-label{ font-size:13px; font-weight:600; color: var(--gold-deep); text-transform:none; margin-bottom:10px; display:block; }
  .pdp-info h1{ font-size: clamp(30px, 4vw, 42px); line-height:1.08; }
  .rating-row{ display:flex; align-items:center; gap:10px; margin-top:14px; }
  .stars{ display:flex; gap:2px; }
  .stars svg{ width:16px; height:16px; }
  .rating-row span{ font-size:13.5px; color:#6B6B60; }

  .price-row{ display:flex; align-items:baseline; gap:12px; margin-top:22px; }
  .price-row .price{ font-family:'Fraunces',serif; font-size:30px; color:var(--ink); }
  .price-row .status{ font-size:13.5px; color: var(--gold-deep); font-weight:600; background:#FBEADD; padding:4px 10px; border-radius:20px; }

  .variant-select-group{ margin:18px 0; }
  .variant-select-label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; }
  .variant-options{ display:flex; flex-wrap:wrap; gap:8px; }
  .variant-option-btn{
    padding:9px 16px; border-radius:4px; border:1.5px solid var(--line); background:var(--paper);
    font-size:13.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:all .15s ease;
  }
  .variant-option-btn:hover{ border-color:var(--ink); color:var(--ink); }
  .variant-option-btn.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

  /* Push notification opt-in prompt — a fixed bottom banner, dismissible */
  .push-prompt{
    position:fixed; bottom:20px; left:20px; right:20px; z-index:150;
    display:flex; justify-content:center;
  }
  .push-prompt-inner{
    background:var(--paper); border-radius:6px; box-shadow:0 8px 30px rgba(18,30,46,0.18);
    padding:16px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    max-width:480px; font-size:13.5px; color:var(--ink);
  }
  @media (max-width:520px){ .push-prompt-inner{ flex-direction:column; align-items:flex-start; } }

  /* Quick View modal */
  .qv-overlay{
    position:fixed; inset:0; background:rgba(18,30,46,0.55); z-index:200;
    display:none; align-items:center; justify-content:center; padding:24px;
  }
  .qv-overlay.open{ display:flex; }
  .qv-box{
    background:var(--paper); border-radius:6px; max-width:820px; width:100%; max-height:88vh;
    overflow-y:auto; position:relative; box-shadow:0 24px 60px rgba(18,30,46,0.3);
  }
  .qv-loading{ padding:60px; text-align:center; color:var(--ink-soft); font-size:14px; }
  .qv-content{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
  @media (max-width:680px){ .qv-content{ grid-template-columns:1fr; } }
  .qv-close{
    position:absolute; top:14px; right:14px; z-index:5; width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,0.92); border:none; color:var(--ink-soft); font-size:15px; cursor:pointer;
    box-shadow:0 1px 3px rgba(18,30,46,0.12);
  }
  .qv-media{
    aspect-ratio:1/1; background:var(--sage-light); position:relative; display:flex;
    align-items:center; justify-content:center; overflow:hidden;
  }
  .qv-media svg{ width:50%; height:50%; color:var(--pine); opacity:0.75; }
  .qv-info{ padding:32px; display:flex; flex-direction:column; gap:10px; }
  .qv-title{ font-size:22px; margin:0; }
  .qv-price{ font-size:19px; font-weight:600; color:var(--ink); }
  .qv-price .was{ text-decoration:line-through; opacity:0.6; margin-right:8px; font-size:15px; font-weight:400; }
  .qv-desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0; }
  .qv-actions{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
  .qv-actions form{ flex:1; min-width:140px; }
  .qv-actions .btn-add{ width:100%; }

  .pdp-desc{ margin-top:18px; color:#4A4A42; font-size:15px; max-width:460px; }

  .option-block{ margin-top:28px; }
  .option-block > label{ font-size:13.5px; font-weight:600; color: var(--ink); display:block; margin-bottom:10px; }
  .chip-row{ display:flex; gap:10px; flex-wrap:wrap; }
  .chip{
    padding:10px 18px; border-radius:40px; border:1.5px solid var(--line); font-size:14px; font-weight:500;
    cursor:pointer; background: var(--paper);
  }
  .chip.selected{ border-color: var(--ink); background: var(--ink); color: var(--paper); }

  .qty-row{ display:flex; align-items:center; gap:16px; margin-top:26px; }
  .stepper{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius: var(--radius); overflow:hidden; }
  .stepper button{ background:var(--paper); padding:10px 16px; font-size:16px; border-radius:0; }
  .stepper button:hover{ background: var(--leaf-pale); }
  .stepper span{ padding:0 18px; font-weight:600; min-width:20px; text-align:center; }

  .pdp-actions{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
  .pdp-actions .btn{ flex:1; min-width:180px; }

  .notify-inline{ display:flex; gap:10px; margin-top:14px; }
  .notify-inline input{
    flex:1; padding:12px 16px; border-radius: var(--radius); border:1.5px solid var(--line);
    background: var(--paper); font-size:14px;
  }

  .feature-list{ margin-top:32px; display:grid; gap:14px; border-top:1px solid var(--line); padding-top:26px; }
  .feature-item{ display:flex; gap:12px; align-items:flex-start; font-size:14px; }
  .feature-item svg{ width:20px; height:20px; color: var(--gold); flex-shrink:0; margin-top:1px; }

  .trust-mini{ display:flex; gap:22px; margin-top:26px; flex-wrap:wrap; }
  .trust-mini div{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#6B6B60; }
  .trust-mini svg{ width:16px; height:16px; color:var(--leaf); }

  /* ---------- Tabs ---------- */
  .detail-section{ padding: 70px 0; }
  .tabs{ display:flex; gap:8px; border-bottom:1px solid var(--line); margin-bottom:36px; flex-wrap:wrap; }
  .tab-btn{
    background:none; border:none; padding:14px 6px; margin-right:26px; font-size:15px; font-weight:600;
    color:#8A8A7E; border-bottom:2px solid transparent; border-radius:0; cursor:pointer;
  }
  .tab-btn.active{ color: var(--ink); border-color: var(--gold); }
  @media (max-width:600px){
    /* Dropdown pattern, matching the account sidebar: collapsed to
       just the active tab (styled as a toggle button with a chevron)
       by default, expanding to a stacked list of every tab when
       tapped - replaces the horizontal row that was overflowing into
       a scrolling strip on narrow screens. Toggling is handled by one
       shared script in the main layout (see app.blade.php), not
       per-page JS, so this needs no changes to any of the four pages
       using .tabs. */
    .tabs {
      display: block;
      position: relative;
      border-bottom: none;
      margin-bottom: 24px;
    }
    .tab-btn {
      display: none;
      width: 100%;
      margin: 0;
      padding: 12px 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      text-align: left;
      background: var(--paper);
    }
    .tab-btn.active {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .tab-btn.active::after {
      content: '';
      width: 9px; height: 9px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform .2s ease;
      flex-shrink: 0;
    }
    .tabs.mobile-tabs-open .tab-btn.active::after { transform: rotate(225deg); }
    /* Once open, every tab (including the active one) shows stacked
       as a dropdown list anchored below where the toggle sits. */
    .tabs.mobile-tabs-open {
      display: flex; flex-direction: column; gap: 4px;
    }
    .tabs.mobile-tabs-open .tab-btn {
      display: flex; align-items: center; justify-content: space-between;
    }
    .tabs.mobile-tabs-open .tab-btn:not(.active)::after { display: none; }
  }
  .tab-panel{ display:none; }
  .tab-panel.active{ display:block; }
  .tab-panel .cols{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:50px; }
  @media (max-width:820px){ .tab-panel .cols{ grid-template-columns:1fr; } }
  .tab-panel h3{ font-size:19px; margin-bottom:12px; }
  .tab-panel p{ color:#4A4A42; font-size:15px; max-width:520px; }
  .ing-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
  .ing-list li{ display:flex; justify-content:space-between; font-size:14px; border-bottom:1px dashed var(--line); padding-bottom:10px; }
  .ing-list li span:last-child{ color:#8A8A7E; }
  .steps-list{ list-style:none; padding:0; margin:0; display:grid; gap:20px; }
  .steps-list li{ display:flex; gap:16px; }
  .steps-list .num{ font-family:'Fraunces',serif; font-size:20px; color: var(--gold-deep); min-width:28px; }
  .faq-item{ border-bottom:1px solid var(--line); padding:18px 0; }
  .faq-item summary{ cursor:pointer; font-weight:600; font-size:15px; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{ content:'+'; font-size:20px; color:var(--gold); }
  .faq-item[open] summary::after{ content:'–'; }
  .faq-item p{ margin-top:12px; color:#4A4A42; font-size:14.5px; max-width:560px; }

  /* ---------- Benefits ---------- */
  .benefits{ background: var(--leaf-pale); border-radius:20px; }
  .benefits .wrap{ padding:60px 0; }
  .benefit-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
  @media (max-width:760px){ .benefit-grid{ grid-template-columns:1fr; } }
  .benefit-card{ background: var(--paper); border-radius:12px; padding:26px 22px; border:1px solid var(--line); }
  .benefit-card svg{ width:32px; height:32px; color:var(--gold); margin-bottom:16px; }
  .benefit-card h3{ font-size:16px; margin-bottom:6px; }
  .benefit-card p{ font-size:13.5px; color:#5C5C52; margin:0; }

  /* ---------- Related ---------- */
  .prod-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
  @media (max-width:960px){ .prod-grid{ grid-template-columns: repeat(2,1fr);} }
  @media (max-width:620px){ .prod-grid{ grid-template-columns: 1fr;} }
  .prod-card{ background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; }  .prod-media svg{ width:56%; height:56%; }
  .label-stack{ position:absolute; top:14px; left:14px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; z-index:2; }
    .prod-tag.promo{ background: #C0392B; color: #fff; border:none; }
  .prod-tag.scarcity{ background: #FBEADD; color: var(--gold-deep); border:none; font-weight:700; }
  .prod-tag.out-of-stock{ background: var(--grey-badge); color: #fff; border:none; }
  .prod-body{ padding: 20px 22px 24px; border-top:1px solid var(--line); flex:1; display:flex; flex-direction:column; }
  .prod-foot{ display:flex; justify-content:space-between; align-items:center; }
  .price{ font-family:'Fraunces',serif; font-size:19px; color: var(--ink); }
  .prod-foot .btn{ padding:9px 16px; font-size:13.5px; }
  .bg-2{ background: #F2E9DB; }
  .bg-3{ background: #E4EEF0; }
  .bg-5{ background: #EDE7F2; }

  /* ---------- CTA band ---------- */
  /* ---------- Footer ---------- */
  footer{ padding-top: 70px; }
/* =================================================================
   Modern Footer Redesign 
   ================================================================= */
.modern-foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr; /* Precise 4-column layout */
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--line);
}

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

/* Category Headings */
.modern-foot-grid h4 {
  font-family: 'Work Sans', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modern-foot-grid ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Link Hover Animation */
.modern-foot-grid a {
  font-size: 14.5px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.modern-foot-grid ul a:hover {
  color: var(--gold);
  transform: translateX(5px); /* Gentle slide to the right */
}

/* Brand Text */
.foot-brand p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 290px;
  margin-top: 18px;
}

/* Social Media Circular Buttons */
.social-row {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.social-row a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.social-row a:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--paper);
  transform: translateY(-4px); /* Lifts up off the page */
  box-shadow: 0 6px 16px rgba(240, 120, 34, 0.25);
}

.social-row svg {
  width: 18px;
  height: 18px;
}

/* Bottom Bar */
.foot-bottom {
  padding: 24px 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: #8A8A7E;
}

/* ---- from common_extra_css.html, collection_extra_css.html ---- */

.page-hero{ padding: 34px 0 10px; }
  .page-hero h1{ font-size: clamp(30px,4vw,42px); }
  .page-hero p{ color:#5C5C52; margin-top:10px; max-width:520px; font-size:15px; }

  .shop-layout{ display:grid; grid-template-columns: 240px 1fr; gap:44px; padding: 34px 0 90px; align-items:flex-start; }
  @media (max-width:900px){ .shop-layout{ grid-template-columns:1fr; } }

  .filters{ position: sticky; top: 100px; }
  @media (max-width:900px){ .filters{ position:static; } }
  .filter-group{ padding: 20px 0; border-bottom:1px solid var(--line); }
  .filter-group:first-child{ padding-top:0; }
  .filter-group h4{ font-size:14px; font-weight:700; color:var(--ink); margin-bottom:14px; }
  .filter-option{ display:flex; align-items:center; gap:10px; font-size:14px; color:#4A4A42; padding:6px 0; cursor:pointer; }
  .filter-option input{ width:16px; height:16px; accent-color: var(--ink); }
  .clear-filters{ font-size:13px; color: var(--gold-deep); font-weight:600; margin-top:16px; display:inline-block; cursor:pointer; }

  .toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; flex-wrap:wrap; gap:14px; }
  .toolbar .count{ font-size:14px; color:#6B6B60; }
  .sort-select{
    padding:10px 14px; border-radius: var(--radius); border:1.5px solid var(--line);
    background: var(--paper); font-size:14px; font-family:'Work Sans',sans-serif; color:var(--ink);
  }
  .active-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
  .active-chip{
    display:flex; align-items:center; gap:6px; background: var(--leaf-pale); border-radius:40px;
    padding:6px 12px; font-size:13px; color: var(--ink); font-weight:500;
  }
  .active-chip button{ background:none; border:none; padding:0; cursor:pointer; font-size:14px; line-height:1; color:#6B6B60; }

  .pagination{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:50px; }
  .pagination button{
    width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); background:var(--paper);
    font-size:14px; font-weight:600; color:var(--ink); padding:0;
  }
  .pagination button.active{ background: var(--ink); color: var(--paper); border-color:var(--ink); }
  .pagination .arrow{ border:none; background:none; font-size:16px; }

  /* Filter sidebar items — the actual classes shop/index.blade.php
     uses (filter-list/filter-cat-link/etc.), separate from the older
     .filter-option rule above which nothing currently references.
     Note: filter-list/filter-cat-link/filter-count/filter-brand-
     filter-tag-chip are also redefined later in the file (Shop Layout
     Enhancements section) which wins in the cascade — kept only here
     since filter-subcat-list/sidebar-best-sellers below have no
     counterpart there and are what's actually rendering. */
  .filter-subcat-list{ padding-left:16px; border-left:2px solid var(--line); margin:2px 0 6px 4px; }
  .filter-subcat-link{ font-size:13px; padding:5px 0; }

  .sidebar-best-sellers{ display:flex; flex-direction:column; gap:14px; }
  .sidebar-best-seller-item{ display:flex; gap:12px; align-items:flex-start; text-decoration:none; }
  .sidebar-bs-thumb{
    width:56px; height:56px; flex-shrink:0; border-radius:4px; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .sidebar-bs-thumb svg{ width:60%; height:60%; }
  .sidebar-best-seller-item > div:last-child{ display:flex; flex-direction:column; gap:2px; }
  .sidebar-bs-name{ font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.3; }
  .sidebar-bs-rating{ font-size:11.5px; color:#8A8A7E; }
  .sidebar-bs-price{ font-size:13px; font-weight:700; color:var(--ink); }
  .filter-brand-input input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--ink); margin-right:0; }

  /* Toolbar grid/list view toggle */
  .toolbar-icon-btn{
    width:38px; height:38px; border-radius:4px; border:1.5px solid var(--line); background:var(--paper);
    color:var(--ink-soft); display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .toolbar-icon-btn.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .product-grid.list-view{ grid-template-columns:1fr; gap:16px; }
  .product-grid.list-view .card{ flex-direction:row; }
  .product-grid.list-view .card-media{ width:200px; flex-shrink:0; aspect-ratio:auto; }
  .product-grid.list-view .card-body{ flex:1; }

  /* Promo banners at the top of the shop page */
  @media (max-width:760px){ .promo-grid{ grid-template-columns:1fr; } }

  /* Custom pagination partial's actual classes */
  .petdash-pagination-wrapper{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:50px; }
  .petdash-pagination-wrapper .page-link{
    width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); background:var(--paper);
    font-size:14px; font-weight:600; color:var(--ink); display:flex; align-items:center; justify-content:center;
    text-decoration:none;
  }
  .petdash-pagination-wrapper .page-link.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .petdash-pagination-wrapper .page-link.disabled{ opacity:0.4; pointer-events:none; }
  .petdash-pagination-wrapper .page-link svg{ width:16px; height:16px; }

/* ---- from contact_extra_css.html ---- */

  .field-group{ margin-bottom: var(--field-margin-bottom); }
  .field-group label{ display:block; font-size: var(--field-label-size); font-weight:600; color: var(--field-label-color); margin-bottom:8px; }
  .field-group input, .field-group textarea, .field-group select{
    width:100%; padding: var(--field-padding); border-radius: var(--field-radius); border: var(--field-border);
    background: var(--paper); font-size: var(--field-font-size); font-family:'Work Sans',sans-serif; color:var(--charcoal);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .field-group input:focus, .field-group textarea:focus, .field-group select:focus{
    outline:none; border-color: var(--pine); box-shadow: var(--field-focus-shadow);
  }
  .field-group textarea{ min-height:140px; resize:vertical; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

  /* Consistent spacing between a checkbox and its label text —
     applied globally since many checkbox instances across admin forms
     had no spacing rule at all, while a few used inline flex+gap.
     The second rule prevents double-spacing on those already-correct
     flex-label instances — both the ones using an inline style AND
     the ones using a CSS class (.tag-checks, .checkbox-label) to set
     display:flex, since a class-based flex label was being missed
     here and getting BOTH the flex gap and this margin at once,
     visually crowding the checkbox against the label text. */
  input[type="checkbox"]{ margin-right:8px; vertical-align:middle; }
  label[style*="display:flex"] input[type="checkbox"],
  label[style*="display: flex"] input[type="checkbox"],
  .tag-checks input[type="checkbox"],
  .checkbox-label input[type="checkbox"]{ 
    width:auto;
    margin-right:0; 
  
  }
  @media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }

  .info-card{ background: var(--paper); border:1px solid var(--line); border-radius:14px; padding:30px 28px; }

  /* Utility classes extracted from the most frequently repeated exact
     inline style="" strings across the project (found via a project-wide
     audit) — each replaces a pattern copy-pasted 10+ times verbatim. */
  .text-meta{ font-size:12.5px; color:#6B6B60; }
  .text-underline{ text-decoration:underline; }
  .form-contents{ display:contents; }
  .text-optional{ font-weight:400; color:#8A8A7E; }
  .field-label-sm{ font-size:11px; text-transform:uppercase; color:#8A8A7E; margin-bottom:4px; }

  /* .login-error moved here from admin.css — customer-facing pages
     (this stylesheet only) need it too (auth pages, product review
     errors), and it was previously invisible there since
     app.blade.php never loads admin.css. Single definition now
     works everywhere. */
  .login-error{ background:#FBEADD; color:var(--gold-deep); padding:12px 16px; border-radius:10px; font-size:13.5px; margin-bottom:18px; }
  .alert-success{ background:#E4F0E9; color:#1F7A4C; padding:12px 16px; border-radius:10px; font-size:13.5px; margin-bottom:18px; }
  .info-row{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
  .info-row:last-child{ border-bottom:none; }
  .info-row svg{ width:20px; height:20px; color: var(--gold); flex-shrink:0; margin-top:2px; }
  .info-row h4{ font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:3px; }
  .info-row p{ font-size:13.5px; color:#6B6B60; margin:0; }
  .info-row a{ color:#6B6B60; }
  .info-row a:hover{ color:var(--ink); }

/* ---- from about_extra_css.html ---- */

.about-hero{ padding: 34px 0 60px; }
  .about-hero .wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
  @media (max-width:860px){ .about-hero .wrap{ grid-template-columns:1fr; } }
  .about-hero h1{ font-size: clamp(32px,4.4vw,48px); line-height:1.08; }
  .about-hero p{ color:#4A4A42; font-size:16px; margin-top:18px; max-width:460px; }
  .about-art{
    aspect-ratio: 4/3; border-radius:16px; border:1px solid var(--line);
    background: linear-gradient(155deg, var(--leaf-pale) 0%, var(--paper) 65%);
    display:flex; align-items:center; justify-content:center;
  }
  .about-art svg{ width:56%; }

  .timeline{ display:grid; gap:0; border-left: 2px solid var(--line); padding-left:34px; margin-left:6px; }
  .timeline-item{ position:relative; padding-bottom:38px; }
  .timeline-item:last-child{ padding-bottom:0; }
  .timeline-item::before{
    content:''; position:absolute; left:-40px; top:4px; width:12px; height:12px; border-radius:50%;
    background: var(--gold); border:3px solid var(--sand);
  }
  .timeline-item .year{ font-family:'Fraunces',serif; font-size:15px; color: var(--gold-deep); font-weight:600; margin-bottom:6px; display:block; }
  .timeline-item h3{ font-size:17px; margin-bottom:6px; }
  .timeline-item p{ font-size:14.5px; color:#5C5C52; margin:0; max-width:460px; }

/* ---- from shipping_extra_css.html ---- */

.policy-table{ width:100%; border-collapse:collapse; margin-top:18px; }
  .policy-table th, .policy-table td{ text-align:left; padding:14px 16px; font-size:14px; border-bottom:1px solid var(--line); }
  .policy-table th{ color:var(--ink); font-weight:700; background: var(--leaf-pale); }
  .policy-table td{ color:#4A4A42; }
  .policy-table tr:last-child td{ border-bottom:none; }

  .step-num-list{ list-style:none; padding:0; margin:0; display:grid; gap:22px; }
  .step-num-list li{ display:flex; gap:16px; }
  .step-num-list .num{
    width:32px; height:32px; border-radius:50%; background: var(--ink); color: var(--paper);
    display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:14px;
    flex-shrink:0;
  }
  .step-num-list h4{ font-size:15.5px; color:var(--ink); margin-bottom:4px; }
  .step-num-list p{ font-size:14px; color:#5C5C52; margin:0; max-width:460px; }

/* ---- from faq_extra_css.html ---- */

.faq-search{ max-width:560px; margin: 26px auto 0; }
  .faq-search input{
    width:100%; padding:15px 20px; border-radius:40px; border:1.5px solid var(--line);
    background: var(--paper); font-size:15px; font-family:'Work Sans',sans-serif;
  }
  .page-hero.center{ text-align:center; }
  .page-hero.center p{ margin-left:auto; margin-right:auto; }

  .faq-nav{ position:sticky; top:100px; display:grid; gap:6px; }
  @media (max-width:820px){ .faq-nav{ position:static; display:flex; overflow-x:auto; gap:10px; } }
  .faq-nav a{
    padding:10px 14px; border-radius:8px; font-size:14px; font-weight:500; color:#5C5C52;
  }
  .faq-nav a:hover, .faq-nav a.active{ background: var(--leaf-pale); color: var(--ink); }

  .faq-category{ margin-bottom:50px; }
  .faq-category h2{ font-size:20px; margin-bottom:6px; }
  .faq-category .cat-count{ font-size:13px; color:#8A8A7E; margin-bottom:20px; display:block; }

/* ---- from legal_extra_css.html ---- */

.legal-body h2{ font-size:19px; margin-top:36px; margin-bottom:12px; }
  .legal-body h2:first-child{ margin-top:0; }
  .legal-body p{ font-size:14.5px; color:#4A4A42; margin:0 0 14px; max-width:680px; }
  .legal-body ul{ margin:0 0 14px; padding-left:20px; color:#4A4A42; font-size:14.5px; max-width:680px; }
  .legal-body li{ margin-bottom:6px; }

/* ---- from cart_extra_css.html ---- */

.cart-layout{ display:grid; grid-template-columns: 1.5fr 1fr; gap:50px; padding: 30px 0 90px; align-items:flex-start; }
  @media (max-width:860px){ .cart-layout{ grid-template-columns:1fr; } }

  .cart-line{ display:grid; grid-template-columns: 88px 1fr auto auto; gap:18px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); }
  @media (max-width:560px){ .cart-line{ grid-template-columns: 64px 1fr; grid-template-areas: "img title" "img qty" "img price"; row-gap:8px; } }
  .cart-thumb{ width:88px; height:88px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
  .cart-thumb svg{ width:60%; height:60%; }
  @media (max-width:560px){ .cart-thumb{ width:64px; height:64px; grid-area: img; } }

  .cart-item-info h4{ font-size:15.5px; color:var(--ink); margin-bottom:4px; }
  .cart-item-info span{ font-size:13px; color:#8A8A7E; }
  .cart-item-info .remove-link{ font-size:12.5px; color:var(--gold-deep); font-weight:600; cursor:pointer; display:inline-block; margin-top:6px; }

  .cart-line .stepper{ height:40px; }
  .cart-line .stepper button{ padding:8px 14px; }

  .cart-line .line-price{ font-family:'Fraunces',serif; font-size:17px; color:var(--ink); text-align:right; min-width:70px; }

  .cart-empty-note{ font-size:14px; color:#6B6B60; margin-top:16px; }

  .summary-card{ background: var(--paper); border:1px solid var(--line); border-radius:14px; padding:28px; position:sticky; top:100px; }
  .summary-row{ display:flex; justify-content:space-between; font-size:14.5px; color:#4A4A42; padding:10px 0; }
  .summary-row.total{ border-top:1px solid var(--line); margin-top:8px; padding-top:18px; font-size:17px; color:var(--ink); font-weight:600; }
  .summary-row.total span:last-child{ font-family:'Fraunces',serif; }

  .promo-row{ display:flex; gap:10px; margin: 18px 0; }
  .promo-row input{ flex:1; padding:11px 14px; border-radius: var(--radius); border:1.5px solid var(--line); font-size:13.5px; }

  .trust-mini-cart{ display:grid; gap:10px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
  .trust-mini-cart div{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#6B6B60; }
  .trust-mini-cart svg{ width:16px; height:16px; color:var(--leaf); }

/* ---- homepage-only sections (hero, trust, categories, why) ---- */


  @media (max-width: 640px){ .wrap{ padding: 0 20px; } }

  .btn-gold{ background: var(--gold); color: var(--ink); }
  .btn-gold:hover{ background: var(--gold-deep); color: var(--paper); }  .btn-ghost:hover{ border-color: var(--ink); }

  /* ---------- Hero ---------- */
  .hero{ padding: 76px 0 60px; }
  .hero .wrap{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items:center; }
  .eyebrow-row{ display:flex; align-items:center; gap:10px; margin-bottom:20px; color: var(--leaf); font-weight:600; font-size:14px; }
  .eyebrow-row svg{ width:18px; height:18px; }
  .hero h1{ font-size: clamp(36px, 5vw, 58px); line-height: 1.06; }
  .hero p.lead{ font-size:18px; color:#4A4A42; max-width: 480px; margin-top:20px; }
  .hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
  .hero-stats{ display:flex; gap:36px; margin-top:46px; }
  .hero-stats div strong{ display:block; font-family:'Fraunces',serif; font-size:26px; color:var(--ink); }
  .hero-stats div span{ font-size:13px; color:#6B6B60; }

  .hero-art{ position:relative; }
  .hero-art .frame{
    background: linear-gradient(155deg, var(--leaf-pale) 0%, var(--paper) 65%);
    border-radius: 16px;
    aspect-ratio: 1/1;
    display:flex; align-items:center; justify-content:center;
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
  }
  .hero-art .badge{
    position:absolute; top:22px; left:22px;
    background: var(--paper); border:1px solid var(--line);
    border-radius: 40px; padding:8px 16px 8px 10px;
    display:flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; color:var(--ink);
    box-shadow: 0 6px 16px rgba(30,58,52,0.08);
  }
  .hero-art .badge .dot{ width:10px; height:10px; border-radius:50%; background: var(--gold); }
  .hero-art .hero-badge{
    position:absolute; top:22px; left:22px; width:64px; height:64px; border-radius:50%;
    box-shadow: 0 8px 20px rgba(15,32,48,0.16); background: var(--paper);
  }
  .hero-art .float-card{
    position:absolute; bottom:22px; right:22px;
    background: var(--ink); color: var(--paper);
    border-radius: 12px; padding:14px 18px;
    font-size:13px; max-width:180px;
    box-shadow: 0 10px 24px rgba(30,58,52,0.22);
  }
  .hero-art .float-card strong{ display:block; font-family:'Fraunces',serif; font-size:16px; margin-bottom:2px; }

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

  /* ---------- Trust strip ---------- */
  .trust{ background: var(--ink); color: var(--paper); padding: 22px 0; }
  .trust .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px 40px; }
  .trust-item{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; opacity:0.95; }
  .trust-item svg{ width:20px; height:20px; flex-shrink:0; color: var(--gold); }

  /* ---------- Section shell ---------- */
  section{ padding: 84px 0; }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap; }
  .section-head h2{ font-size: clamp(28px,3.4vw,38px); max-width:560px; }
  .section-head p{ color:#5C5C52; max-width:420px; font-size:15px; }

  /* ---------- Categories ---------- */
  .cat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
  @media (max-width:860px){ .cat-grid{ grid-template-columns: repeat(2,1fr);} }
  .cat-card{
    background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
    padding: 28px 22px; transition: border-color .18s ease, transform .18s ease;
  }
  .cat-card:hover{ border-color: var(--leaf); transform: translateY(-3px); }
  .cat-card .icon{ width:44px; height:44px; margin-bottom:20px; color: var(--leaf); }
  .cat-card h3{ font-size:18px; margin-bottom:6px; }
  .cat-card p{ font-size:13.5px; color:#6B6B60; margin:0; }

  /* ---------- Products ---------- */

  .prod-card{
    background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
    overflow:hidden; display:flex; flex-direction:column;
  }
  .prod-media{
    aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .prod-media svg{ width:56%; height:56%; }
  .prod-tag{
    background: var(--paper); font-size:11.5px; font-weight:700; letter-spacing:0.02em;
    padding: 5px 10px; border-radius: 40px; color: var(--ink); border:1px solid var(--line);
  }
  .prod-tag.new{ background: var(--gold); color: var(--ink); border:none; }
  .prod-body h3{ font-size:17px; font-weight:600; margin-bottom:6px; line-height:1.3; }
  .prod-body p{ font-size:13.5px; color:#6B6B60; margin:0 0 16px; flex:1; }  .prod-foot .btn{ padding:9px 16px; font-size:13.5px; }

  /* backgrounds per icon */
  .bg-1{ background: #EAF0E5; }  .bg-4{ background: #F3E4DE; }
  /* ---------- Why us ---------- */
  .why{ background: var(--leaf-pale); border-radius: 20px; padding: 56px 40px; }
  .why-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:56px; align-items:start; }
  @media (max-width:860px){ .why-grid{ grid-template-columns:1fr; } }
  .why-list{ display:grid; gap:26px; }
  .why-item{ display:flex; gap:16px; }
  .why-item .num{ font-family:'Fraunces',serif; font-size:22px; color: var(--gold-deep); min-width:34px; }
  .why-item h3{ font-size:17px; margin-bottom:5px; }
  .why-item p{ margin:0; font-size:14px; color:#4C4C42; max-width:440px; }

  /* ---------- Newsletter / CTA ---------- */
  .cta-band{ background: var(--ink); border-radius: 20px; color: var(--paper); padding: 60px 40px; display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
  .cta-band h2{ color: var(--paper); font-size: clamp(24px,3vw,32px); max-width:420px; }
  .cta-band p{ color: #C8D6D0; margin-top:10px; font-size:14.5px; max-width:420px;}
  .cta-form{ display:flex; gap:10px; }
  .cta-form input{
    padding: 13px 16px; border-radius: var(--radius); border:1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.06); color: var(--paper); font-size:14px; min-width:230px;
  }
  .cta-form input::placeholder{ color: #9FB3AC; }
  @media (max-width:560px){ .cta-form{ flex-direction:column; } .cta-form input{ min-width:0; } }


/* =================================================================
   Redesign refresh — sharp corners, subtle elevation, matching the
   navy/orange/sage palette and Fraunces+Work Sans typography above.
   Deliberately replaces the earlier "pill button" refresh: the new
   design language uses crisp 2-4px corners, not fully-rounded pills.
   ================================================================= */

:root{
  --shadow-sm: 0 1px 3px rgba(18,30,46,0.06);
  --shadow-md: 0 16px 32px rgba(18,30,46,0.12);
  --shadow-lg: 0 18px 44px rgba(18,30,46,0.14);
}

.prod-card, .cat-card, .benefit-card, .info-card, .summary-card,
.gallery-main, .hero-art .frame, .about-art{
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.prod-card:hover, .cat-card:hover, .benefit-card:hover{
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* ---- Announcement bar ---- */
.announce-bar{
  background: var(--ink); color: var(--paper);
  font-size: 13px; font-weight: 500;
  text-align: center; padding: 10px 20px;
}
.announce-bar .wrap{
  display:flex; align-items:center; justify-content:center; gap:28px;
  flex-wrap:wrap;
}
.announce-bar span{ display:flex; align-items:center; gap:7px; opacity:0.95; }
.announce-bar svg{ width:14px; height:14px; color: var(--gold); flex-shrink:0; }

/* ---- Category circles (shop-by-category avatars) ---- */
.cat-circles{
  display:flex; gap:34px; overflow-x:auto; padding: 6px 2px 14px;
  scrollbar-width:none;
}
.cat-circles::-webkit-scrollbar{ display:none; }
.cat-circle-item{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center; flex-shrink:0; width:132px; color:inherit;
}
.cat-circle{
  width:104px; height:104px; border-radius:50%;
  background: var(--leaf-pale);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s ease, transform .22s ease, background .22s ease;
}
.cat-circle svg{ width:42px; height:42px; color: var(--ink); }
.cat-circle-item:hover .cat-circle{
  background: var(--gold); box-shadow: var(--shadow-md); transform: translateY(-4px);
}
.cat-circle-item:hover .cat-circle svg{ color: var(--paper); }
.cat-circle-item span{ font-size:13.5px; font-weight:600; color: var(--ink); line-height:1.3; }

/* ---- Quick-add hover overlay on product media ---- */
.prod-media{ overflow:hidden; }
.prod-media .quick-add{
  position:absolute; left:50%; bottom:14px; transform:translate(-50%,14px);
  opacity:0; transition: opacity .2s ease, transform .2s ease;
  background: var(--ink); color: var(--paper); font-size:12.5px; font-weight:600;
  padding:9px 18px; border-radius:999px; white-space:nowrap; pointer-events:none;
  z-index:2;
}
.prod-card:hover .prod-media .quick-add{ opacity:1; transform:translate(-50%,0); }

/* ---- Comparison strip ("us vs typical pet stores") ---- */
.compare-wrap{
  background: var(--ink); border-radius: 24px; color: var(--paper);
  overflow:hidden;
}
.compare-grid{ display:grid; grid-template-columns: 1.1fr 1fr 1fr; }
@media (max-width:760px){ .compare-grid{ grid-template-columns: 1.3fr 1fr; } .compare-col.typical{ display:none; } }
.compare-col{ padding: 30px 24px; }
.compare-col.label{ display:flex; flex-direction:column; justify-content:center; padding-left:32px; }
.compare-col.label h2{ color: var(--paper); font-size: clamp(22px,2.6vw,28px); }
.compare-col.label p{ color:#9FADBC; font-size:13.5px; margin-top:10px; }
.compare-col.us{ background: rgba(239,117,16,0.12); border-left:1px solid rgba(255,255,255,0.08); border-right:1px solid rgba(255,255,255,0.08); }
.compare-col h3{ color: var(--paper); font-size:15px; margin-bottom:18px; }
.compare-col.us h3{ color: var(--gold); }
.compare-row{ display:flex; align-items:flex-start; gap:10px; padding:9px 0; font-size:13.5px; color:#D7DEE6; }
.compare-row svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; }
.compare-col.us .compare-row svg{ color: var(--gold); }
.compare-col.typical .compare-row svg{ color:#5C6B78; }
.compare-col.typical .compare-row{ color:#8A96A3; }

/* ---- Rating stars used on product cards ---- */
.mini-rating{ display:flex; align-items:center; gap:5px; margin-bottom:6px; }
.mini-rating svg{ width:13px; height:13px; }
.mini-rating span{ font-size:12px; color:#8A8A7E; }

.tag-chip{ display:inline-flex; padding:4px 12px; border-radius:999px; background: var(--leaf-pale); color:var(--ink); font-size:12px; font-weight:600; }

/* ---- Real product photos (uploaded via admin) ---- */
.prod-media, .gallery-main, .cart-thumb{ position:relative; }
.prod-img{
  width:100%; height:100%; object-fit:contain; display:block;
  position:absolute; inset:0; border-radius:inherit;
}
.gallery-main .prod-img{ border-radius:4px; }
.cart-thumb .prod-img{ border-radius:10px; }

.thumbs .thumb{ overflow:hidden; padding:0; }
.thumbs .thumb img{ width:100%; height:100%; object-fit:contain; display:block; }

.admin-thumb{
  width:40px; height:40px; border-radius:8px; overflow:hidden; position:relative;
  background: var(--leaf-pale); display:flex; align-items:center; justify-content:center;
}
.admin-thumb svg{ width:60%; height:60%; }
.admin-thumb-img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

/* ---- Admin: product image upload manager ---- */
.image-manager{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:16px; }
.image-manager-item{
  width:140px; border:1.5px solid var(--line); border-radius:12px; overflow:hidden;
  background: var(--paper);
}
.image-manager-item .thumb-frame{ aspect-ratio:1/1; position:relative; background: var(--leaf-pale); }
.image-manager-item .thumb-frame img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.image-manager-item .thumb-controls{ padding:8px 10px; display:grid; gap:6px; font-size:12px; }
.image-manager-item label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
.image-manager-item.is-main{ border-color: var(--gold); box-shadow: 0 0 0 2px rgba(239,117,16,0.18); }
.main-flag{
  position:absolute; top:6px; left:6px; background: var(--gold); color:#fff;
  font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px;
}
.upload-requirements{
  font-size:12.5px; color:#6B6B60; background: var(--leaf-pale); border-radius:10px;
  padding:12px 16px; margin-bottom:16px; line-height:1.6;
}
.new-upload-previews{ display:flex; flex-wrap:wrap; gap:16px; margin-top:16px; }

/* ---- Sale pricing (auto-applied promotions) ---- */
.price-was{ text-decoration:line-through; color:#B0AFA5; font-size:13px; margin-right:6px; font-weight:500; }
.price-sale{ color:var(--gold-deep); }
.sale-flag{ display:inline-block; background:var(--gold); color:var(--paper); font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle; }

/* ---- Rich text (admin-authored HTML: descriptions, marketing content) ---- */
.rich-text{ font-size:15px; color:#4A4A42; line-height:1.7; }
.rich-text p{ margin:0 0 14px; }
.rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4{ font-family:'Fraunces',serif; color:var(--ink); margin:22px 0 10px; }
.rich-text h1:first-child, .rich-text h2:first-child, .rich-text h3:first-child{ margin-top:0; }
.rich-text ul, .rich-text ol{ margin:0 0 14px; padding-left:22px; }
.rich-text li{ margin-bottom:6px; }
.rich-text a{ color:var(--ink); text-decoration:underline; }
.rich-text strong{ color:var(--ink); }
.rich-text img{ max-width:100%; border-radius:12px; margin:14px 0; }

/* ---- Site-wide nav search ---- */
/* ---- Site-wide nav search: icon by default, expands on click ---- */
.nav-search{ display:flex; align-items:center; flex-shrink:0; }
.nav-search .search-toggle{
  background:none; border:none; border-radius:50%; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  flex-shrink:0; transition: background .15s ease;
}
.nav-search .search-toggle:hover{ background: var(--leaf-pale); }
.nav-search input{
  border:none; background: var(--sand); outline:none; font-size:13.5px;
  border-radius:999px; padding: 8px 16px;
  width:0; opacity:0; margin-left:0;
  transition: width .22s ease, opacity .18s ease, margin-left .22s ease, padding .22s ease;
}
.nav-search.open input{ width:190px; opacity:1; margin-left:6px; }

.nav-text-link{ font-size:14px; font-weight:600; color: var(--ink); white-space:nowrap; flex-shrink:0; }
.nav-text-link:hover{ text-decoration: underline; }

/* ---- Shared table/badge styles (also used in customer account area) ---- */
.admin-table{ width:100%; border-collapse:collapse; }
.admin-table th, .admin-table td{ text-align:left; padding:14px 12px; font-size:13.5px; border-bottom:1px solid var(--line); vertical-align:middle; }
.admin-table th{ color:#8A8A7E; font-weight:600; text-transform:uppercase; font-size:11.5px; letter-spacing:0.03em; }
.admin-table tr:last-child td{ border-bottom:none; }
.badge-pill{ display:inline-flex; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:600; }
.badge-in_stock{ background:#E4F0E9; color:#1F7A4C; }
.badge-launching_soon{ background:#FBEADD; color:var(--gold-deep); }
.badge-pending{ background:#FBEADD; color:var(--gold-deep); }
.badge-processing{ background:#E4EEF0; color:#1E5C6E; }
.badge-shipped{ background:#E4E9F0; color:#2A4A8A; }
.badge-completed{ background:#E4F0E9; color:#1F7A4C; }
.badge-cancelled{ background:#F3E4E4; color:#A33A3A; }

/* ---- Customer account area ---- */
.account-section{ padding: 34px 0 90px; }
.account-layout{ display:grid; grid-template-columns: 240px 1fr; gap:44px; align-items:flex-start; }
@media (max-width:820px){ .account-layout{ grid-template-columns:1fr; } }

.account-sidebar{
  background: var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:22px; position:sticky; top:100px;
}
@media (max-width:820px){ .account-sidebar{ position:static; } }
.account-sidebar-name{ font-family:'Fraunces',serif; font-size:17px; color:var(--ink); margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.account-sidebar nav{ display:grid; gap:4px; }
.account-sidebar nav a{
  padding:10px 12px; border-radius:10px; font-size:14px; font-weight:500; color:#4A4A42;
}
.account-sidebar nav a:hover{ background: var(--leaf-pale); color: var(--ink); }
.account-sidebar nav a.active{ background: var(--ink); color: var(--paper); font-weight:600; }
.account-sidebar nav a.logout-link{ margin-top:10px; padding-top:14px; border-top:1px solid var(--line); color:#A33A3A; border-radius:0; }
.account-sidebar nav a.logout-link:hover{ background:none; text-decoration:underline; }

.account-content .info-card{ margin-bottom:24px; }

.account-stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
@media (max-width:640px){ .account-stat-grid{ grid-template-columns:1fr; } }
.account-stat-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .account-stat-grid.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .account-stat-grid.cols-4{ grid-template-columns:1fr; } }
.account-stat-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:640px){ .account-stat-grid.cols-2{ grid-template-columns:1fr; } }
.account-stat-grid.cols-auto{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.account-stat-card{ background: var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px; }
.account-stat-card .label{ font-size:12px; color:#8A8A7E; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
.account-stat-card .value{ font-family:'Fraunces',serif; font-size:28px; color:var(--ink); margin:6px 0 10px; }
.account-stat-card a{ font-size:13px; font-weight:600; color: var(--gold-deep); }

.address-card{ background: var(--paper); border:1.5px solid var(--line); border-radius:14px; padding:20px; position:relative; }
.address-card.is-default{ border-color: var(--gold); }
.address-card .default-flag{ position:absolute; top:16px; right:16px; background:var(--gold); color:#fff; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:999px; }
.address-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:20px; }
@media (max-width:640px){ .address-grid{ grid-template-columns:1fr; } }

.sub-product-row{ display:flex; align-items:center; gap:16px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin-bottom:12px; }
.sub-product-row .sub-thumb{ width:56px; height:56px; border-radius:10px; overflow:hidden; position:relative; flex-shrink:0; }

.account-icon{ display:flex; align-items:center; gap:6px; flex-shrink:0; padding:6px; border-radius:999px; }
.account-icon:hover{ background: var(--leaf-pale); }
.account-icon .account-name{ font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; }

.address-choice{
  display:flex; align-items:flex-start; gap:12px; padding:14px 16px;
  border:1.5px solid var(--line); border-radius:12px; cursor:pointer; font-size:14px;
  transition: border-color .15s ease;
}
.address-choice input{ margin-top:3px; accent-color: var(--ink); flex-shrink:0; }
.address-choice.selected{ border-color: var(--ink); background: var(--leaf-pale); }
.address-choice:hover{ border-color: var(--ink); }

/* ---- Order status tracker (Ordered -> Packed -> In Transit -> Delivered) ---- */
.order-tracker{ display:flex; align-items:flex-start; margin: 6px 0 24px; }
.tracker-step{ display:flex; flex-direction:column; align-items:center; gap:10px; flex-shrink:0; width:88px; }
.tracker-icon{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--leaf-pale); color:#ADB8A9; flex-shrink:0; transition: background .2s ease, color .2s ease;
}
.tracker-icon svg{ width:24px; height:24px; }
.tracker-step.completed .tracker-icon{ background: var(--ink); color: var(--paper); }
.tracker-step.active .tracker-icon{ background: var(--gold); color: var(--paper); }
.tracker-step span{ font-size:12px; font-weight:600; color:#8A8A7E; text-align:center; }
.tracker-step.completed span, .tracker-step.active span{ color: var(--ink); }
.tracker-line{ flex:1; height:3px; background: var(--line); margin-top:26px; min-width:16px; }
.tracker-line.completed{ background: var(--ink); }

.tracker-cancelled{
  display:flex; align-items:center; gap:10px; background:#F3E4E4; color:#A33A3A;
  padding:14px 18px; border-radius:12px; font-size:14px; font-weight:600; margin: 6px 0 24px;
}
.tracker-cancelled svg{ width:20px; height:20px; flex-shrink:0; }

@media (max-width:520px){
  .tracker-step{ width:auto; }
  .tracker-step span{ font-size:10.5px; }
  .tracker-icon{ width:42px; height:42px; }
  .tracker-icon svg{ width:20px; height:20px; }
}

/* =================================================================
   DYNAMIC HERO SLIDER (MODERNIZED)
   ================================================================= */
/* =================================================================
   DYNAMIC HERO SLIDER (MODERNIZED)
   ================================================================= */
.hero-slider { position: relative; overflow: hidden; padding: 0; background: var(--ink); }

/* 1. Make the track a CSS Grid */
.slider-track { 
  display: grid; 
  width: 100%; 
  min-height: 520px; 
}

/* 2. Stack all slides in the exact same grid cell (grid-area: 1 / 1) */
.slide {
  grid-area: 1 / 1;
  opacity: 0; 
  visibility: hidden; 
  pointer-events: none;
  display: flex; 
  align-items: center; 
  transition: opacity .6s ease;
  z-index: 1;
}

/* 3. The active slide simply becomes visible, no position changes needed */
.slide.active { 
  opacity: 1; 
  visibility: visible; 
  pointer-events: auto; 
  z-index: 2; 
}

/* Background Images & Overlays */
.slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.slide-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.slide-overlay { position: absolute; inset: 0; background: #000; z-index: 1; }
/* Slide Content Alignment */
.slide-inner {
  position: relative; z-index: 3; display: flex; flex-direction: column; width: 100%;
  padding-top: 80px; padding-bottom: 80px;
}
.align-top { justify-content: flex-start; }
.align-center { justify-content: center; }
.align-bottom { justify-content: flex-end; }
.justify-left { align-items: flex-start; text-align: left; }
.justify-center { align-items: center; text-align: center; }
.justify-right { align-items: flex-end; text-align: right; }

/* Modern Typography Inside Slider */
.slide-inner h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.05; font-family: 'Fraunces', serif; margin: 0 0 16px; max-width: 680px; }
.slide-inner p { font-size: 17.5px; margin: 0 0 32px; max-width: 560px; line-height: 1.6; }
.slide-inner.text-light h1, .slide-inner.text-light p, .slide-inner.text-light .hero-social-proof { color: var(--paper); }
.slide-inner.text-dark h1, .slide-inner.text-dark p, .slide-inner.text-dark .hero-social-proof { color: var(--ink); }

/* Buttons & Social Proof */
.hero-social-proof { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); font-size: 13.5px; font-weight: 600; margin-bottom: 24px; }
.hero-social-proof .stars { color: var(--gold); letter-spacing: 2px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-lg { padding: 16px 32px; font-size: 16px; border-radius: 8px; font-weight: 600; }
.btn-primary { background: var(--ink); color: var(--paper); border: none; }
.btn-primary:hover { background: var(--gold); color: var(--paper); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(240, 120, 34, 0.25); }
.slide-inner.text-light .btn-ghost { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); color: var(--paper); }
.slide-inner.text-light .btn-ghost:hover { background: var(--paper); color: var(--ink); }

/* Slider Controls */
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
  background-color: rgba(255,255,255,0.15); backdrop-filter: blur(4px);
  background-position: center; background-repeat: no-repeat; background-size: 24px 24px;
  cursor: pointer; transition: all 0.2s ease;
}
.slider-arrow svg, .slider-arrow::before { display: none !important; }
.slider-arrow.prev { left: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E"); }
.slider-arrow.next { right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.slider-arrow:hover { background-color: var(--ink); border-color: var(--ink); transform: translateY(-50%) scale(1.05); }

.slider-dots { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 15; }
.slider-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.3); border: none; padding: 0; cursor: pointer; transition: all 0.25s ease; }
.slider-dot:hover, .slider-dot.active { background: var(--gold); transform: scale(1.3); }

@media (max-width: 640px) {
  .slider-track { min-height: 460px; }
  .slider-arrow { width: 40px; height: 40px; }
  .slider-arrow.prev { left: 16px; }
  .slider-arrow.next { right: 16px; }
  .slide-inner h1 { font-size: clamp(32px, 8vw, 42px); }
  .hero-social-proof { display: flex; text-align: left; }
}

/* Elevated Hero Stats Card */
.hero-stats-wrapper {
  position: relative;
  z-index: 10;
  margin-top: -30px; /* Overlaps the slider slightly */
  margin-bottom: 40px;
}

.hero-stats-card {
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(18, 30, 46, 0.08);
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.hero-stats-item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  transition: transform 0.2s ease;
}

.hero-stats-item:hover {
  transform: translateY(-3px);
}

.hero-stats-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-stats-icon svg {
  width: 24px;
  height: 24px;
}

.bg-leaf-pale { background-color: var(--leaf-pale); }
.text-gold { color: var(--gold); }
.bg-sand { background-color: var(--sand); }
.text-ink { color: var(--ink); }

.hero-stats-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero-stats-stars {
  display: flex;
  gap: 2px;
  color: var(--gold);
  margin-bottom: 2px;
}
.hero-stats-stars svg {
  width: 14px;
  height: 14px;
}

.hero-stats-text strong {
  font-family: 'Work Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.hero-stats-text span {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.2;
}

.hero-stats-divider {
  width: 1px;
  height: 48px;
  background: var(--line);
}

/* Mobile Responsive */
@media (max-width: 900px) {
  .hero-stats-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 24px;
    margin-top: 20px; /* Removes overlap on mobile for cleaner spacing */
  }
  
  .hero-stats-wrapper {
    margin-top: 0;
  }
  
  .hero-stats-divider {
    display: none;
  }
  
  .hero-stats-item {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .slider-track { min-height: 380px; }
  .slide-inner { padding-top: 50px; padding-bottom: 50px; }
  .slider-arrow { width: 36px; height: 36px; }
  .slider-arrow.prev { left: 12px; }
  .slider-arrow.next { right: 12px; }
}

/* Custom Editorial Slide Layouts for Hero */
@media (max-width: 900px) {
  .editorial-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .editorial-grid .slide-content {
    order: 2; /* Forces text card below the image on mobile */
    padding: 24px 20px !important;
    text-align: center !important;
  }
  .editorial-grid .slide-media-wrap {
    order: 1; /* Forces image on top on mobile */
    min-height: 280px !important;
  }
  .editorial-grid img {
    max-height: 280px !important;
  }
}

.urgency-note{
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  color: var(--gold-deep); margin: 10px 0 0; padding:10px 14px; background:#FBEADD; border-radius:10px; width:fit-content;
}
.urgency-note svg{ width:16px; height:16px; flex-shrink:0; }
.urgency-note.scarcity{ color:#A33A3A; background:#F3E4E4; }

/* ---- Frequently bought together ---- */
.bundle-box{ background: var(--leaf-pale); border-radius:20px; padding:36px 32px; }
.bundle-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:24px; }
.bundle-plus{ font-family:'Fraunces',serif; font-size:22px; color:#8A9689; flex-shrink:0; }
.bundle-item{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; cursor:pointer; width:140px; }
.bundle-item input{ accent-color: var(--ink); width:16px; height:16px; }
.bundle-thumb{ width:88px; height:88px; border-radius:4px; position:relative; overflow:hidden; }
.bundle-name{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.bundle-total{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; border-top:1px solid rgba(15,32,48,0.12); padding-top:20px; }
.bundle-total span{ font-size:14.5px; color:#3E4E45; }
.bundle-total strong{ font-family:'Fraunces',serif; font-size:19px; color:var(--ink); }

/* ---- Loyalty points redemption at checkout ---- */
.points-redeem-row{
  display:flex; align-items:flex-start; gap:10px; padding:14px 16px; margin:14px 0;
  background: var(--leaf-pale); border-radius:10px; cursor:pointer; font-size:13.5px;
}
.points-redeem-row input{ margin-top:2px; accent-color: var(--ink); flex-shrink:0; }
.points-redeem-row span{ display:flex; flex-direction:column; gap:2px; font-weight:600; color:var(--ink); }
.points-redeem-row small{ font-weight:500; color:#6B6B60; }

/* ---- Ziggy-inspired homepage refresh ---- */

/* Trust row v2: colorful icon circles */
.trust-v2{ padding: 46px 0 10px; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:860px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .trust-grid{ grid-template-columns:1fr; } }
.trust-card{ display:flex; align-items:center; gap:14px; }
.trust-icon-circle{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.trust-icon-circle svg{ width:26px; height:26px; }
.trust-card h4{ font-family:'Fraunces',serif; font-size:15px; color:var(--ink); margin:0 0 2px; }
.trust-card p{ font-size:12.5px; color:#6B6B60; margin:0; }

/* Organic wave section dividers */
.wave-divider{ line-height:0; margin-top:-1px; }
.wave-divider svg{ width:100%; height:50px; display:block; }
.wave-divider.flip svg{ transform: scaleY(-1); }

/* Category cards v2: bigger, blob-backed */
.cat-grid-v2{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:860px){ .cat-grid-v2{ grid-template-columns:repeat(2,1fr); } }
.cat-card-v2{
  background: var(--paper); border:1px solid var(--line); border-radius:20px;
  padding:30px 24px; text-align:center; transition: transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column; align-items:center;
}
.cat-card-v2:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.cat-blob{
  width:88px; height:88px; border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
  background: var(--blob-color, var(--leaf-pale)); display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; color: var(--ink); transition: border-radius .4s ease;
}
.cat-card-v2:hover .cat-blob{ border-radius:63% 37% 42% 58% / 59% 41% 59% 41%; }
.cat-blob svg{ width:34px; height:34px; }
.cat-card-v2 h3{ font-size:16px; margin-bottom:10px; }
.cat-link{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color: var(--gold-deep); }
.cat-link svg{ width:14px; height:14px; }

/* Product card wishlist heart */
.wishlist-form{ display:contents; }
.wishlist-btn, .action-btn{
  /* position:absolute;  */
  top:14px; right:14px; z-index:3;
  width:36px; height:36px; padding:0; border-radius:50%; background: var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#8A8A7E;
  transition: color .15s ease, transform .15s ease; flex-shrink:0; text-decoration:none;
}
.wishlist-btn:hover{ transform: scale(1.08); color:#C0392B; }
/* .wishlist-btn.active{   
  color: var(--clay);
  border-color: var(--clay);
  background: var(--leaf-pale); 
 } */
.wishlist-btn svg{ width:18px; height:18px; flex-shrink:0; }

/* Testimonials */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:860px){ .testimonial-grid{ grid-template-columns:1fr; } }
.testimonial-card{ background: var(--paper); border:1px solid var(--line); border-radius:18px; padding:28px 26px; position:relative; }
.quote-mark{ width:30px; height:30px; color: var(--leaf-pale); margin-bottom:6px; }
.testimonial-text{ font-size:14.5px; color:#3E4E45; line-height:1.6; margin:12px 0 18px; }
.testimonial-author{ display:flex; align-items:center; gap:10px; }
.author-avatar{
  width:36px; height:36px; border-radius:50%; background: var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:14px; flex-shrink:0;
}
.testimonial-author span{ font-size:13.5px; font-weight:600; color:var(--ink); }

/* ---- Two-row Ziggy-style header ---- */
.header-row1{ display:flex; align-items:center; gap:28px; height:88px; }
@media (max-width:900px){ .header-row1{ gap:14px; } }

.header-search{
  flex:1; max-width:560px; display:flex; align-items:center;
  background: var(--sand); border:1.5px solid var(--line); border-radius:999px;
  padding:4px 4px 4px 20px; transition: border-color .15s ease;
}
.header-search:focus-within{ border-color: var(--ink); }
.header-search input{
  flex:1; border:none; background:none; font-size:14px; outline:none; color: var(--charcoal);
  padding:10px 0;
}
.header-search input::placeholder{ color:#9A9A8E; }
.header-search button{
  width:38px; height:38px; border-radius:50%; background: var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0; cursor:pointer;
}
.header-search button:hover{ background: var(--gold); }
@media (max-width:760px){ .header-search{ display:none; } }

.header-icons{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.header-icon-btn{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 12px; border-radius:12px; color: var(--ink); position:relative; flex-shrink:0;
}
.header-icon-btn:hover{ background: var(--leaf-pale); }
.header-icon-btn svg{ flex-shrink:0; }
.header-icon-label{ font-size:10.5px; font-weight:600; color:#6B6B60; }
@media (max-width:640px){ .header-icon-label{ display:none; } .header-icon-btn{ padding:8px; } }
.header-icon-btn.cart-icon .cart-count{
  position:absolute; top:2px; right:2px; background: var(--gold); color:#fff;
  font-size:10px; font-weight:700; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

.header-row2{ background: var(--leaf-pale); border-top:1px solid var(--line); }
.navlinks-nav .navlinks{
  display:flex; align-items:center; justify-content:center; gap:30px;
  font-weight:600; font-size:13.5px; padding:13px 32px; flex-wrap:wrap;
}
.navlinks-nav .navlinks a{
  color: var(--ink); padding:4px 0; border-bottom:2px solid transparent; white-space:nowrap;
}
.navlinks-nav .navlinks a:hover, .navlinks-nav .navlinks a.active{ border-color: var(--gold); }
.navlinks-nav .navlinks-cta{
  margin-left:auto; background: var(--ink); color:#fff !important; padding:7px 16px !important;
  border-radius:999px; border:none !important; font-size:12.5px;
}
.navlinks-nav .navlinks-cta:hover{ background: var(--gold-deep); border-color:transparent; }
@media (max-width:860px){ .header-row2{ display:none; } }

/* ---- Mobile slide-out menu ---- */
.mobile-menu-backdrop{
  display:none; position:fixed; inset:0; background:rgba(15,32,48,0.5); z-index:98;
  opacity:0; transition: opacity .25s ease;
}
.mobile-menu-backdrop.open{ display:block; opacity:1; }

.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; width:85%; max-width:360px;
  background: var(--paper); z-index:99; transform: translateX(100%);
  transition: transform .3s ease; overflow-y:auto;
}
.mobile-menu.open{ transform: translateX(0); }
.mobile-menu-inner{ padding:20px 22px 40px; }
.mobile-menu-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.mobile-menu-close{ background:none; border:none; padding:6px; cursor:pointer; color:var(--ink); }

.mobile-search{ display:flex; align-items:center; background:var(--sand); border:1.5px solid var(--line); border-radius:999px; padding:4px 4px 4px 16px; margin-bottom:24px; }
.mobile-search input{ flex:1; border:none; background:none; font-size:14px; padding:10px 0; outline:none; }
.mobile-search button{ width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; flex-shrink:0; }

.mobile-links{ display:grid; gap:2px; margin-bottom:24px; border-bottom:1px solid var(--line); padding-bottom:20px; }
.mobile-links a{ padding:12px 4px; font-size:15px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); }
.mobile-links a:last-child{ border-bottom:none; color: var(--gold-deep); }

.mobile-menu-icons{ display:grid; gap:4px; }
.mobile-menu-icons a{ display:flex; align-items:center; gap:12px; padding:12px 4px; font-size:14.5px; font-weight:600; color:var(--ink); }
.mobile-menu-icons svg{ flex-shrink:0; color:var(--gold-deep); }

@media (min-width:861px){ .mobile-menu, .mobile-menu-backdrop{ display:none !important; } }

/* ---- Subscribe & Save (recurring orders) ---- */
.subscribe-save-box{
  margin-top:18px; padding:18px 20px; border-radius:14px;
  background: var(--leaf-pale); border:1px solid var(--line);
}
.subscribe-save-head{ display:flex; gap:12px; margin-bottom:14px; }
.subscribe-save-head svg{ width:24px; height:24px; color: var(--gold-deep); flex-shrink:0; margin-top:2px; }
.subscribe-save-head h4{ font-family:'Fraunces',serif; font-size:15px; color:var(--ink); margin:0 0 4px; }
.subscribe-save-head p{ font-size:12.5px; color:#5C5C52; margin:0; line-height:1.5; }
.subscribe-save-row{ display:flex; gap:8px; flex-wrap:wrap; }
.subscribe-save-row select, .subscribe-save-row input{
  padding:10px 12px; border-radius:8px; border:1.5px solid var(--line); font-size:13.5px; background:var(--paper);
}
.subscribe-save-row select{ flex:1; min-width:140px; }
.subscribe-save-row .btn{ flex-shrink:0; }

/* ---- Subscribe & Save eligibility badge on product cards (CRO) ---- */
.sub-eligible-badge{
  display:inline-flex; align-items:center; gap:5px; background:#EDE7F2; color:#6B4FA0;
  font-size:11px; font-weight:700; padding:4px 9px; border-radius:999px; margin:6px 0 4px;
}
.sub-eligible-badge svg{ width:12px; height:12px; flex-shrink:0; }

/* ---- Cart page: "forgot to subscribe" prompt ---- */
.cart-sub-prompt{ margin:-6px 0 14px; }
.cart-sub-prompt summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:#6B4FA0; padding:6px 0;
}
.cart-sub-prompt summary::-webkit-details-marker{ display:none; }
.cart-sub-prompt summary svg{ width:14px; height:14px; flex-shrink:0; }
.cart-sub-form{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px;
  padding:12px 14px; background:#EDE7F2; border-radius:10px;
}
.cart-sub-form select, .cart-sub-form input{
  padding:8px 10px; border-radius:8px; border:1.5px solid var(--line); font-size:12.5px; background:var(--paper);
}
.cart-sub-form .btn{ font-size:12.5px; padding:8px 14px; }

/* =================================================================
   Redesign: nav dropdown menu — matches the "Shop ▾" pattern from
   the new design concept.
   ================================================================= */
/* =================================================================
   Ziggy-Inspired Dropdown Menu
   ================================================================= */
/* =================================================================
   Rich Dropdown (Mini Mega-Menu)
   ================================================================= */
.nav-drop { 
  position: relative; 
  display: flex;
  align-items: center;
}

.nav-drop-menu.rich-menu {
  /* Smooth Slide-Up Animation */
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Positioning & Shell */
  position: absolute;
  top: 100%; 
  left: -20px; 
  width: 340px; /* Wider to accommodate descriptions */
  padding: 12px;
  margin-top: 16px; 
  z-index: 100;
  
  /* Premium Aesthetics */
  background: var(--paper);
  border-radius: 12px;
  border: 1px solid rgba(18, 30, 46, 0.06);
  box-shadow: 0 20px 40px rgba(18, 30, 46, 0.1);
}

/* Invisible bridge to prevent accidental closure */
.nav-drop-menu.rich-menu::before {
  content: '';
  position: absolute;
  top: -16px; left: 0; right: 0; height: 16px;
}

.nav-drop:hover .nav-drop-menu.rich-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* --- Rich Item Layout --- */
.rich-menu-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  color: var(--ink);
}

.rich-menu-item:hover {
  background: var(--sand);
  transform: translateX(4px);
}

/* Icon Box */
.rich-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Uses the bg-1, bg-2, etc. classes already in your CSS */
.rich-menu-item:hover .rich-icon {
  transform: scale(1.1);
}

/* Typography Details */
.rich-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rich-title {
  font-family: 'Work Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.2s ease;
}

.rich-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.3;
}

.rich-menu-item:hover .rich-title {
  color: var(--gold);
}

/* Hover Arrow Reveal */
.rich-arrow {
  font-size: 16px;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.2s ease;
}

.rich-menu-item:hover .rich-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* =================================================================
   Checkout progress stepper
   ================================================================= */
.checkout-stepper{
  display:flex; align-items:center; justify-content:center;
  gap:0; margin: 0 auto 6px; max-width:520px; padding: 24px 0 0;
}
.checkout-step{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  flex-shrink:0;
}
.checkout-step-icon{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--line); color:#8B93A0; background:var(--paper);
  transition: all .2s ease;
}
.checkout-step-icon svg{ width:20px; height:20px; }
.checkout-step-label{
  font-size:12.5px; font-weight:600; color:#8B93A0; white-space:nowrap;
}
.checkout-step--active .checkout-step-icon{
  border-color: var(--gold); color: var(--gold); background: var(--leaf-pale);
}
.checkout-step--active .checkout-step-label{ color: var(--ink); }
.checkout-step--done .checkout-step-icon{
  border-color: var(--sage); color: #fff; background: var(--sage);
}
.checkout-step--done .checkout-step-label{ color: var(--sage); }
.checkout-step-line{
  height:2px; width:56px; background: var(--line); margin: 0 6px 22px;
  flex-shrink:0;
}
.checkout-step-line--done{ background: var(--sage); }
.checkout-step-remaining{
  text-align:center; font-size:12.5px; color:#8B93A0; margin: 4px 0 0;
}
@media (max-width: 560px){
  .checkout-stepper{ gap:0; }
  .checkout-step-line{ width:28px; }
  .checkout-step-label{ display:none; }
}

/* =================================================================
   Address suburb/postcode lookup dropdown
   ================================================================= */
.address-lookup-results{
  display:none; position:absolute; top:100%; left:0; right:0;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-md);
  z-index:50; max-height:220px; overflow-y:auto; margin-top:2px;
}
.address-lookup-row{
  padding:9px 14px; font-size:13.5px; cursor:pointer;
}
.address-lookup-row:hover{ background:var(--leaf-pale); }

/* =================================================================
   Redesign: remaining components from the mockup — no-list banner,
   UGC row, ingredient spotlight, comparison table, cart drawer.
   ================================================================= */

.no-list-wrap{background:var(--pine);color:var(--paper);padding:56px 0;}
.no-list-wrap .section-head h2{color:var(--paper);}
.no-list-wrap .section-head p{color:#CFE0D2;}
.no-list-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.no-item{
  background:rgba(251,248,242,0.06);border:1px solid rgba(251,248,242,0.14);
  padding:20px 14px;text-align:center;font-size:14px;font-weight:500;border-radius:4px;
}
.no-icon{display:block;font-size:22px;margin-bottom:8px;opacity:0.85;}

.compare-table{
  display:grid;grid-template-columns:1.3fr 1fr 1fr;
  border:1px solid rgba(251,248,242,0.15);
}
.compare-table > div{padding:18px 22px;font-size:14.5px;border-bottom:1px solid rgba(251,248,242,0.12);display:flex;align-items:center;}
.compare-table .row-label{color:#CFE0D2;}
.compare-table .head{font-family:'Fraunces',serif;font-size:17px;font-weight:600;background:rgba(251,248,242,0.04);}
.compare-table .head.us{color:#E9D9A8;}
.compare-table .us-cell{background:rgba(233,217,168,0.05);}
.compare-table .check{color:#8CC79B;font-size:17px;margin-right:9px;}
.compare-table .cross{color:#D98080;font-size:17px;margin-right:9px;opacity:0.75;}

/* Real product comparison page (shop/compare.blade.php) — a plain
   HTML table, distinct from .compare-table above which is the
   marketing "us vs typical stores" section on the homepage. */
.compare-table-real{ width:100%; border-collapse:collapse; min-width:720px; background:var(--paper); }
.compare-table-real th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; font-weight:700;
  color:#8A8A7E; padding:16px 20px; border-bottom:1px solid var(--line); vertical-align:middle;
  white-space:nowrap; background:var(--sand); width:150px; position:sticky; left:0; z-index:1;
}
.compare-table-real td{
  padding:18px 20px; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink);
  vertical-align:top; min-width:220px;
}
.compare-table-real tr:last-child th, .compare-table-real tr:last-child td{ border-bottom:none; }
.compare-table-real tr:hover td{ background:rgba(18,30,46,0.015); }
.compare-product-media{
  width:150px; height:150px; margin:0 auto 4px; border-radius:4px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(18,30,46,0.08);
}
.compare-product-name{
  font-family:'Fraunces',serif; font-weight:600; font-size:16px; color:var(--ink); text-decoration:none;
  display:block; text-align:center; margin-top:4px;
}
.compare-product-name:hover{ text-decoration:underline; }
.compare-feature-list{ margin:0; padding-left:18px; font-size:13.5px; line-height:1.7; }
.compare-remove-btn{
  display:flex; align-items:center; justify-content:center; margin:0 auto 10px;
  width:26px; height:26px; border-radius:50%; background:var(--sand);
  border:none; color:#8A8A7E; font-size:13px; cursor:pointer; transition:all .15s ease;
}
.compare-remove-btn:hover{ background:#F3E4E4; color:#A33A3A; }

.ugc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:44px;}
.ugc-card{
  aspect-ratio:9/13;background:linear-gradient(160deg,var(--pine),#2A4360);border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--paper);position:relative;padding:14px;text-align:center;
}
.ugc-play{width:38px;height:38px;border-radius:50%;background:rgba(251,248,242,0.16);display:flex;align-items:center;justify-content:center;font-size:13px;}
.ugc-label{font-size:12px;color:#CFE0D2;line-height:1.4;}

.ingredient-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.ingredient-card{text-align:center;padding:8px;}
.ingredient-ic{font-size:34px;margin-bottom:12px;}
.ingredient-card h3{font-size:16.5px;margin-bottom:8px;}
.ingredient-card p{font-size:13.8px;color:var(--ink-soft);line-height:1.55;margin:0;}

@media (max-width:920px){
  .no-list-grid{grid-template-columns:repeat(2,1fr);}
  .ingredient-grid{grid-template-columns:1fr;}
  .ugc-row{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
  .ugc-row .ugc-card{flex:0 0 46%;scroll-snap-align:start;}
  .compare-table{grid-template-columns:1.1fr 1fr 1fr;font-size:13px;}
  .cart-drawer{width:100%;}
}

/* Cart drawer */
.cart-btn{background:var(--pine);color:var(--paper);padding:9px 18px;font-size:14px;font-weight:600;border-radius:2px;border:none;cursor:pointer;}
.drawer-overlay{
  position:fixed;inset:0;background:rgba(18,30,46,0.45);opacity:0;pointer-events:none;
  transition:opacity .25s ease;z-index:90;
}
.drawer-overlay.open{opacity:1;pointer-events:auto;}
.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;background:var(--paper);
  z-index:91;transform:translateX(100%);transition:transform .3s ease;
  display:flex;flex-direction:column;box-shadow:-12px 0 30px rgba(18,30,46,0.15);
}
.cart-drawer.open{transform:translateX(0);}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line);}
.drawer-head h3{font-size:19px;}
.drawer-close{background:transparent;border:none;font-size:16px;color:var(--ink-soft);padding:10px;margin:-10px;cursor:pointer;}
.drawer-shipping{padding:16px 24px;border-bottom:1px solid var(--line);}
.ship-msg{font-size:13px;color:var(--ink-soft);margin-bottom:8px;}
.ship-bar{height:6px;background:var(--sand);border-radius:4px;overflow:hidden;}
.ship-bar-fill{height:100%;background:var(--sage);transition:width .3s ease;}
.drawer-items{flex:1;overflow-y:auto;padding:16px 24px;}
.drawer-empty{font-size:14px;color:var(--ink-soft);}
.drawer-item{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;padding:10px 0;border-bottom:1px solid var(--line);}
.drawer-item .drawer-item-name{flex:1;}
.drawer-item .drawer-item-remove{color:#A33A3A;font-size:12px;text-decoration:underline;background:none;border:none;cursor:pointer;padding:0;}
.drawer-footer{padding:18px 24px 24px;border-top:1px solid var(--line);}
.drawer-subtotal{display:flex;justify-content:space-between;font-size:15px;font-weight:600;margin-bottom:14px;}

/* =================================================================
   Redesign: bundle cards (homepage "Shop the routines" section)
   ================================================================= */
.bundle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.bundle-card{
  display:flex;background:var(--paper);border-radius:6px;overflow:hidden;
  box-shadow:0 1px 3px rgba(18,30,46,0.06);
}
.bundle-media{
  width:38%;background:var(--sage-light);display:flex;align-items:center;justify-content:center;
  color:var(--pine);flex-shrink:0;
}
.bundle-media svg{width:44%;height:44%;}
.bundle-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1;}
.bundle-tag{font-size:11.5px;font-weight:700;color:var(--sage);}
.bundle-body h3{font-size:17px;}
.bundle-body p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:0;}
.bundle-price{font-family:'Fraunces',serif;color:var(--ink);font-size:16px;font-weight:600;margin-top:4px;}
@media (max-width:920px){
  .bundle-grid{grid-template-columns:1fr;}
}

/* =================================================================
   Redesign: shop grid — product cards, category tabs, ratings,
   subscribe/one-time toggle. Matches the mockup's .card pattern;
   .prod-card (used elsewhere, e.g. homepage featured products) is
   untouched and still works independently of this.
   ================================================================= */
.shop-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:40px;flex-wrap:wrap;}
.shop-tab{padding:9px 18px;font-size:14px;font-weight:500;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink-soft);display:inline-block;}
.shop-tab.active{background:var(--pine);color:var(--paper);border-color:var(--pine);}

@media (max-width:600px) {
  /* Same dropdown pattern as every other tab row site-wide - collapsed
     to just the active tab with a chevron, expanding to a stacked list
     on tap. Buttons, not links, since these switch panels via JS
     (see switchHomeTab() below) rather than navigating anywhere. */
  .shop-tabs { display: block; position: relative; margin-bottom: 24px; }
  .shop-tab {
    display: none; width: 100%; margin: 0 0 4px; border-radius: 8px;
    text-align: left; align-items: center; justify-content: space-between;
  }
  .shop-tab.active { display: flex; }
  .shop-tab.active::after {
    content: ''; width: 9px; height: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .2s ease; flex-shrink: 0;
  }
  .shop-tabs.mobile-tabs-open .shop-tab.active::after { transform: rotate(225deg); }
  .shop-tabs.mobile-tabs-open .shop-tab { display: flex; }
  .shop-tabs.mobile-tabs-open .shop-tab:not(.active)::after { display: none; }
}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.card{
  background:var(--paper);display:flex;flex-direction:column;border-radius:4px;
  box-shadow:0 1px 3px rgba(18,30,46,0.06);transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(18,30,46,0.12);}
.card-media{
  position:relative;aspect-ratio:1/1;background:var(--sage-light);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.card-media svg{width:52%;height:52%;color:var(--pine);opacity:0.75;}
.badge{
  position:absolute;top:12px;left:12px;font-size:11.5px;font-weight:600;
  padding:5px 11px;border-radius:20px;letter-spacing:0.01em;color:#fff;z-index:2;
}

.wishlist-heart-form{ position:absolute; top:10px; right:10px; z-index:3; margin:0; }
.wishlist-heart{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.92);
  border:none; display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--ink-soft); transition: all .15s ease; position:absolute; top:10px; right:10px; z-index:3;
  box-shadow:0 1px 3px rgba(18,30,46,0.12);
}
.wishlist-heart-form .wishlist-heart{ position:static; top:auto; right:auto; }
.wishlist-heart svg{ width:17px; height:17px; }
.wishlist-heart:hover{ color:#D9534F; transform:scale(1.08); }
.wishlist-heart.active{ color:#D9534F; }
.badge.launch{background:var(--sage);}
.badge.sold{background:var(--grey-badge);}
.badge.off{background:var(--clay);}
.card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1;}
.card-cat{font-size:12px;color:var(--ink-soft);}
.card-title{font-size:15.5px;font-weight:600;line-height:1.3;}
.card-rating{font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:6px;min-height:16px;}
.card-rating .stars{color:var(--clay);font-size:12.5px;letter-spacing:1px;margin:0;}
.buy-toggle{display:flex;background:var(--sand);border-radius:20px;padding:3px;font-size:11.5px;font-weight:600;}
.buy-toggle button{flex:1;background:transparent;color:var(--ink-soft);padding:7px 6px;border-radius:18px;transition:all .15s ease;border:none;cursor:pointer;}
.buy-toggle button.active{background:var(--pine);color:var(--paper);}
.save-pct{color:var(--sage);font-weight:700;}
.card-price{font-size:17px;font-weight:700;color:var(--ink);}
.stock-urgency{font-size:12px;color:var(--clay);font-weight:600;}
.card-price .was{text-decoration:line-through;opacity:0.6;margin-right:6px;}
.card-actions{margin-top:auto;display:flex;gap:8px;padding-top:6px;}
.btn-add{flex:2;background:var(--pine);color:var(--paper);font-size:13px;font-weight:600;padding:10px 0;text-align:center;border-radius:2px;border:none;cursor:pointer;display:block;text-decoration:none;} 
.card-media-link{position:absolute;inset:0;z-index:1;}
.btn-add.disabled{background:var(--grey-badge);opacity:0.7;pointer-events:none;}

@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;} }

/* ==========================================================================
   GLOBAL UI COMPONENTS (Forms, Badges, Empty States)
   ========================================================================== */

/* Standardized Forms */
.form-row { display: flex; gap: 16px; margin-bottom: 16px; }
.form-group { flex: 1; margin-bottom: var(--field-margin-bottom); }
.form-group label { display: block; font-size: var(--field-label-size); font-weight: 600; color: var(--field-label-color); margin-bottom: 8px; }
.form-group label span.opt { font-weight: 400; color: var(--ink-soft); }
.form-control { width: 100%; padding: var(--field-padding); border: var(--field-border); border-radius: var(--field-radius); font-size: var(--field-font-size); color: var(--ink); background: var(--paper); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form-control:focus { outline: none; border-color: var(--pine); box-shadow: var(--field-focus-shadow); }
.checkbox-label { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--pine); cursor: pointer; font-weight: 500; }
.checkbox-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--pine); cursor: pointer; }
@media (max-width: 768px) { .form-row { flex-direction: column; gap: 0; } }

/* Standardized Badges */
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; display: none; } /* Show only if needed */
.badge-active, .status-shipped, .status-completed { background: #EAF4EE; color: #1F7A4C; }
.status-processing { background: #E4EEF0; color: #1E5C6E; }
.badge-paused, .status-pending { background: #FBEADD; color: #D4650A; }
.badge-cancelled, .status-cancelled { background: #EEF0F4; color: #5B6472; }

/* Global Empty State */
.empty-state { text-align: center; padding: 48px 24px; background: var(--paper); border: 1px dashed var(--line); border-radius: 8px; }
.empty-state p { color: var(--ink-soft); margin-bottom: 16px; }
/* Icons in empty states were left-aligned across the site - relying on
   text-align:center alone is fragile once an icon has any inline
   style, so this forces true centering directly via margin:auto,
   without touching each instance's own inline margin-bottom spacing. */
.empty-state svg, .empty-state img { display: block; margin-left: auto; margin-right: auto; }

/* Loyalty tier badge (partials/loyalty-badge.blade.php) - structural
   layout only; per-tier fill/gradient colors stay inline in the
   partial since they're genuinely computed data (which tier, which
   colors), not avoidable styling clutter. */
.loyalty-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.loyalty-badge-label { font-family: 'Fraunces', serif; font-weight: 700; letter-spacing: 0.02em; }
.btn-outline { display: inline-block; padding: 10px 20px; border: 1.5px solid var(--pine); border-radius: 4px; color: var(--pine); font-weight: 600; text-decoration: none; font-size: 14px; transition: all 0.2s ease; }
.btn-outline:hover { background: var(--pine); color: var(--paper); }

/* ==========================================================================
   Redesign: Hover Action Icons (Shop Grid)
   ========================================================================== */

/* On mobile, hover doesn't exist, so always display the icons */
@media (max-width: 900px) {
  .card-hover-actions {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================================================
   Shop Layout Enhancements (Filters, Banners, Cards)
   ========================================================================== */
.shop-top-spacing { padding-top: 24px; }

/* Promotional Banners */
.promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.promo-banner { border-radius: 12px; padding: 32px 40px; color: var(--paper); position: relative; overflow: hidden; display: flex; align-items: center; }
.promo-banner-content { position: relative; z-index: 2; max-width: 60%; }
.promo-banner.bg-clay { background: var(--clay); }
.promo-banner.bg-ink { background: var(--ink); }
.promo-eyebrow { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; display: block; margin-bottom: 4px; }
.promo-title { font-family: 'Fraunces', serif; font-size: clamp(28px, 3.5vw, 42px); color: var(--paper); margin: 0 0 16px; line-height: 1.1; }
.promo-title-small { font-size: clamp(24px, 3vw, 36px); margin-bottom: 12px; }
.promo-subtitle { font-size: 13px; opacity: 0.9; margin: 0 0 4px; }
.promo-highlight { font-size: 22px; font-weight: 700; color: var(--gold); margin: 0; }
.promo-phone { font-size: 16px; font-weight: 700; margin: 0; }
.promo-deco-circle { position: absolute; right: -20px; bottom: -20px; width: 200px; height: 200px; background: rgba(255,255,255,0.1); border-radius: 50%; }
.promo-deco-square { position: absolute; right: 20px; bottom: 0; width: 140px; height: 140px; background: rgba(255,255,255,0.1); border-radius: 12px 12px 0 0; }
@media (max-width: 768px) { .promo-grid { grid-template-columns: 1fr; } }

/* Centered Search Bar */
.shop-search-wrapper { margin: 0 auto 40px; max-width: 480px; }
.shop-search-input { border: 1.5px solid var(--line); background: var(--paper); display: flex; width: 100%; border-radius: 999px; overflow: hidden; }
.shop-search-input input { flex: 1; padding: 12px 16px; border: none; background: transparent; outline: none; font-size: 14px; color: var(--charcoal); }
.shop-search-input button { width: 44px; background: var(--ink); color: var(--paper); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; }
.shop-search-input button:hover { background: var(--pine-dark); }

/* Sidebar Filter Components */
.filter-list { display: grid; gap: 12px; }
.filter-cat-link { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); padding: 4px 0; text-decoration: none; transition: color 0.15s ease; }
.filter-cat-link:hover { color: var(--ink); }
.filter-cat-link.active { color: var(--clay); font-weight: 600; }
.filter-count { color: var(--grey-badge); font-weight: 400; font-size: 13px; }

.filter-brand-label { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-soft); cursor: pointer; padding: 4px 0; }
.filter-brand-input { display: flex; align-items: center; gap: 10px; }

/* Filter Tags */
.filter-tag-chip { border: 1px solid var(--line); border-radius: 4px; padding: 6px 12px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; display: inline-block; transition: all 0.2s ease; margin-bottom: 8px; margin-right: 4px; }
.filter-tag-chip.active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.filter-tag-chip:hover { border-color: var(--ink); color: var(--ink); }

/* Toolbar specific overrides */
.toolbar-actions { display: flex; align-items: center; gap: 16px; }
.toolbar-icon-btn { background: none; border: none; cursor: pointer; padding: 4px; color: var(--ink-soft); transition: color 0.15s ease; }
.toolbar-icon-btn:hover, .toolbar-icon-btn.active { color: var(--ink); }

/* Override product grid to 3 columns inside shop layout */
.shop-layout .product-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1080px) { .shop-layout .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .shop-layout .product-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Homepage Redesign & Brand Color Enforcement
   ========================================================================== */

/* Trust Feature Icons - Mapped strictly to brand palette */
.trust-icon-1 { background: var(--leaf-pale); color: var(--gold-deep); }
.trust-icon-2 { background: var(--sand); color: var(--ink); }
.trust-icon-3 { background: rgba(47, 143, 91, 0.12); color: var(--leaf); }
.trust-icon-4 { background: rgba(240, 120, 34, 0.12); color: var(--gold); }

/* Category Blobs - Mapped strictly to brand palette */
.blob-1 { --blob-color: var(--leaf-pale); }
.blob-2 { --blob-color: var(--sand); }
.blob-3 { --blob-color: rgba(47, 143, 91, 0.1); }
.blob-4 { --blob-color: rgba(240, 120, 34, 0.1); }

/* Tab Management (Replaces inline display:none) */
.home-tab-panel:not(.active-panel) { display: none; }
.empty-tab-msg { text-align: center; color: var(--ink-soft); padding: 30px 0; }

/* Clean Layout Utilities */
.pt-0 { padding-top: 0 !important; }
.mb-32 { margin-bottom: 32px; }
.mb-36 { margin-bottom: 36px; }
.mt-24 { margin-top: 24px; }
.text-center { text-align: center; }
.text-paper { color: var(--paper) !important; }
.text-paper-soft { color: rgba(255, 255, 255, 0.8) !important; }
.font-bold { font-weight: 600; }

/* ==========================================================================
   Modern "Trendy" Trust Section (Bento/Floating Card Style)
   ========================================================================== */
.trust-trendy-wrapper {
  background: var(--sand);
  padding: 60px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-grid-trendy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.trust-card-trendy {
  background: var(--paper);
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--line);
  box-shadow: 0 4px 6px -1px rgba(18, 30, 46, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trust-card-trendy:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(18, 30, 46, 0.08);
  border-color: var(--clay);
}
.trust-icon-box {
  width: 64px;
  height: 64px;
  background: var(--leaf-pale);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--pine);
  transition: all 0.3s ease;
}
.trust-card-trendy:hover .trust-icon-box {
  background: var(--clay);
  color: var(--paper);
  transform: scale(1.05) rotate(-3deg);
}
.trust-icon-box svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}
.trust-card-trendy h4 {
  font-family: 'Work Sans', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--pine);
  margin: 0 0 8px;
}
.trust-card-trendy p {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 900px) { .trust-grid-trendy { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .trust-grid-trendy { grid-template-columns: 1fr; } }

/* ==========================================================================
   Refined Product Action Icons (Matching Ziggy Theme)
   ========================================================================== */
.card-hover-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover .card-hover-actions {
  opacity: 1;
  transform: translateX(0);
}
@media (hover: none) {
  .card-hover-actions {
    opacity: 1;
    transform: translateX(0);
  }
}
.action-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #E4E7EC;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #121E2E;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
  text-decoration: none;
}
.action-icon-btn:hover {
  color: var(--clay);
  border-color: var(--clay);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(240, 120, 34, 0.15);
}
.action-icon-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5; /* Thin, elegant lines */
}

/* Align wishlist form to the same styling */
/* 1. Make the form wrapper invisible */
.card-hover-actions .wishlist-heart-form,
.card-hover-actions .form-contents {
  position: static !important;
  margin: 0 !important;
  display: contents; 
}

/* 2. Style ONLY the wishlist button to match perfectly */
.card-hover-actions .wishlist-heart {
  position: static !important;
  margin: 0 !important;
  width: 42px;
  height: 42px;
  background: #ffffff;
  border: 1px solid #E4E7EC;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  color: #121E2E;
  transition: all 0.2s ease;
}

.card-hover-actions .wishlist-heart:hover {
  color: var(--clay);
  border-color: var(--clay);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(240, 120, 34, 0.15);
}

.card-hover-actions .wishlist-heart svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5px;
}

.wishlist-btn.active, .action-icon-btn.active, .btn-remove-icon.active {
  color: var(--clay);
  border-color: var(--clay);
  background: var(--leaf-pale); /* Optional: Gives it a slight tinted background when active */
}

/* Return activity timeline - a vertical line of dots connecting each
   event, used identically on both the admin and customer return
   detail pages so the full history (who said what, and when) is
   visible in one place rather than only ever showing the latest note. */
.return-timeline { position: relative; padding-left: 24px; }
.return-timeline-item { position: relative; padding-bottom: 20px; }
.return-timeline-item:last-child { padding-bottom: 0; }
.return-timeline-item:not(:last-child)::before {
  content: ''; position: absolute; left: -19px; top: 14px; bottom: -6px; width: 1px; background: var(--line);
}
.return-timeline-dot {
  position: absolute; left: -24px; top: 3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line);
}


/* ============================================================
   "Bento" redesign additions — support for about, contact, faq,
   legal, and shipping-returns pages. These pages were authored
   against a set of utility and layout classes that didn't exist
   in this file yet; added here as a single, clearly-scoped block
   rather than scattering rules throughout the file, since none of
   these classes appear anywhere else in the codebase.
   ============================================================ */

/* --- Spacing utilities --- */
.mb-8{ margin-bottom:8px; }
.mb-12{ margin-bottom:12px; }
.mb-16{ margin-bottom:16px; }
.mb-24{ margin-bottom:24px; }
.mt-20{ margin-top:20px; }
.mt-36{ margin-top:36px; }
.mt-40{ margin-top:40px; }
.pt-40{ padding-top:40px; }
.pb-0{ padding-bottom:0; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.max-w-860{ max-width:860px; }
.border-0{ border:none; }
.border-top{ border-top:1px solid var(--line); }

/* --- Text utilities --- */
.text-lg{ font-size:17px; line-height:1.6; }
.text-md{ font-size:15px; }
.text-muted-sm{ font-size:13px; color:var(--ink-soft); }
.text-pine{ color:var(--pine); }
.lead-text{ font-size:17px; line-height:1.65; color:var(--ink-soft); margin-top:14px; max-width:560px; }
.h2-lg{ font-size:30px; line-height:1.25; }
.link-clay{ color:var(--clay); text-decoration:underline; font-weight:600; }
.shadow-sm{ box-shadow:0 2px 10px rgba(18,30,46,0.06); }

/* --- Button variants --- */
.btn-lg{ padding:15px 30px; font-size:15.5px; }
.btn-block{ display:block; width:100%; text-align:center; }
.btn-gold-dark{ background:var(--gold-deep); color:#fff; border:none; }
.btn-gold-dark:hover{ background:#B8540F; }
.btn-outline-light{ background:transparent; border:1.5px solid rgba(255,255,255,0.5); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,0.12); }

/* --- Hero / section layout --- */
.hero-bento .wrap{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; }
.hero-bento.center .wrap{ display:block; text-align:center; }
.hero-bento.center .lead-text{ margin-left:auto; margin-right:auto; }
.about-art{ display:flex; justify-content:center; }
.about-art svg{ width:100%; max-width:320px; height:auto; }
.stat-row{ display:flex; gap:32px; flex-wrap:wrap; }
.stat-row strong{ display:block; font-size:26px; font-family:'Fraunces',serif; color:var(--ink); }
.stat-row span{ font-size:12.5px; color:var(--ink-soft); }
.section-bento{ padding:64px 0; }
.section-bento-bottom{ padding:0 0 64px; }

/* --- Bento cards --- */
.bento-card-md{ border-radius:16px; padding:36px; }
.bento-card-lg{ border-radius:16px; padding:44px; }

/* --- CTA banners --- */
.bento-cta{ display:flex; align-items:center; justify-content:space-between; gap:32px; padding:48px; border-radius:20px; position:relative; overflow:hidden; flex-wrap:wrap; }
.bento-cta h2{ color:#fff; margin:0 0 8px; }
.bento-cta p{ color:rgba(255,255,255,0.75); margin:0; }
.bento-cta-content{ position:relative; z-index:1; max-width:420px; }
.bento-cta-actions{ position:relative; z-index:1; display:flex; gap:12px; flex-wrap:wrap; }
.bento-deco-circle{ position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:rgba(240,120,34,0.15); }

/* --- Contact page --- */
.contact-grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:32px; align-items:start; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }

/* --- FAQ page --- */
.faq-columns{ display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start; }
@media (max-width:820px){ .faq-columns{ grid-template-columns:1fr; } }
.faq-nav-card{ position:sticky; top:24px; }
.faq-nav-card h3{ font-size:13px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:14px; }
.faq-nav-card a{ display:block; padding:9px 0; font-size:14.5px; color:var(--ink); border-bottom:1px solid var(--line); }
.faq-nav-card a:last-child{ border-bottom:none; }
.faq-bento{ border-radius:16px; padding:32px; margin-bottom:24px; }
.faq-bento-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; }
.faq-bento-header h2{ font-size:20px; margin:0; }
.badge-pine{ background:var(--pine); color:#fff; font-size:11.5px; padding:4px 12px; border-radius:999px; white-space:nowrap; }
.faq-items-wrapper .faq-item:last-child{ border-bottom:none; padding-bottom:0; }
.search-wrapper-lg{ max-width:520px; margin:0 auto; }
.empty-icon{ width:44px; height:44px; color:var(--ink-soft); margin-bottom:16px; }
.empty-title{ font-size:17px; margin-bottom:6px; }

/* --- Legal / policy pages --- */
.legal-notice{ background:var(--leaf-pale); border-radius:10px; padding:16px 20px; font-size:13.5px; color:var(--gold-deep); }
.legal-body h2{ font-size:19px; margin:28px 0 10px; }
.legal-body h2:first-of-type{ margin-top:0; }
.legal-body p, .legal-body li{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; }
.legal-body ul{ padding-left:20px; margin:0 0 16px; }
.legal-meta{ font-size:12.5px; color:var(--ink-soft); margin-bottom:24px; }
.tabs.centered{ justify-content:center; }
.tabs.no-border{ border-bottom:none; }

/* --- Shipping/returns policy page --- */
.policy-content.cols{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:820px){ .policy-content.cols{ grid-template-columns:1fr; } }

/* --- Blog post content typography --- */
.blog-content{ font-size:16px; line-height:1.75; color:var(--ink); }
.blog-content p{ margin:0 0 20px; }
.blog-content h2{ font-size:24px; margin:36px 0 14px; font-family:'Fraunces',serif; }
.blog-content h3{ font-size:20px; margin:28px 0 12px; font-family:'Fraunces',serif; }
.blog-content img{ max-width:100%; height:auto; border-radius:8px; margin:20px 0; }
.blog-content ul, .blog-content ol{ margin:0 0 20px; padding-left:22px; }
.blog-content li{ margin-bottom:8px; }
.blog-content blockquote{ border-left:3px solid var(--gold); padding:12px 20px; margin:24px 0; font-style:italic; color:var(--ink-soft); background:var(--sand); border-radius:0 6px 6px 0; }
.blog-content a{ color:var(--clay); text-decoration:underline; }
.blog-content strong{ font-weight:700; }

/* =================================================================
   ULTIMATE CRO & TRENDY OVERRIDE
   ================================================================= */

/* --- 1. Split Hero (High Performance, No JS) --- */
.hero-split { padding: 40px 0 80px; background: var(--sand); overflow: hidden; }
.hero-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

.hero-text-content { max-width: 540px; }
.hero-social-proof { display: inline-flex; align-items: center; gap: 10px; background: var(--paper); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; margin-bottom: 24px; box-shadow: var(--shadow-sm); }
.hero-social-proof .stars { color: var(--gold); letter-spacing: 2px; }

.hero-split h1 { font-size: clamp(38px, 4.5vw, 56px); line-height: 1.1; margin-bottom: 16px; color: var(--ink); }
.hero-split p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 32px; }

.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.btn-lg { padding: 16px 32px; font-size: 16px; border-radius: 8px; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(240, 120, 34, 0.25); }

.hero-micro-trust { display: flex; gap: 16px; font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }

.hero-image-wrapper { position: relative; border-radius: 24px; aspect-ratio: 4/5; }
.hero-img-main { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-lg); }

/* Floating Glassmorphism Badges */
.floating-badge { position: absolute; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.4); padding: 12px 20px; border-radius: 16px; font-size: 14px; font-weight: 600; color: var(--ink); box-shadow: 0 12px 32px rgba(18,30,46,0.1); display: flex; align-items: center; gap: 8px; animation: float 6s ease-in-out infinite; }
.floating-badge .emoji { font-size: 18px; }
.badge-top-right { top: 32px; right: -24px; animation-delay: 0s; }
.badge-bottom-left { bottom: 40px; left: -32px; animation-delay: -3s; }

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@media (max-width: 960px) {
  .hero-split-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-text-content { margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
  .hero-ctas { justify-content: center; }
  .badge-top-right { right: 10px; }
  .badge-bottom-left { left: 10px; }
}

/* --- 2. Category Pills (Visual Routing) --- */
.section-sm { padding: 32px 0; }
.category-pills { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cat-pill { background: var(--paper); border: 1px solid var(--line); padding: 12px 24px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); transition: all 0.2s ease; }
.cat-pill:hover { border-color: var(--gold); background: var(--gold); color: var(--paper); transform: translateY(-2px); }
.cat-icon { font-size: 18px; }

/* --- 3. Clean Grids & Flex Utilities --- */
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.link-arrow { font-size: 15px; font-weight: 600; color: var(--gold-deep); transition: transform 0.2s; display: inline-block; }
.link-arrow:hover { transform: translateX(4px); }
.modern-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 960px) { .modern-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .modern-grid { grid-template-columns: 1fr; } }

/* --- 4. Bento Box Trust Grid --- */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(180px, auto); gap: 20px; }
.bento-card { border-radius: 24px; padding: 32px; transition: transform 0.2s ease; }
.bento-card:hover { transform: translateY(-4px); }
.bento-large { grid-column: span 1; grid-row: span 2; }
.bento-wide { grid-column: span 2; }
.bento-icon { font-size: 28px; margin-bottom: 16px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 16px; }
.bento-card h3 { font-size: 18px; margin-bottom: 8px; font-family: 'Work Sans', sans-serif; font-weight: 700; }
.bento-list { list-style: none; padding: 0; }
.bento-list li { margin-bottom: 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.bento-list li::before { content: '✓'; color: var(--gold); font-weight: bold; }
.bg-pine { background: var(--pine); }
.border-line { border: 1px solid var(--line); }

@media (max-width: 960px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-large, .bento-wide { grid-column: span 1; grid-row: auto; }
}

/* --- 5. Modern Bundles --- */
.modern-bundles { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.bundle-card-v2 { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: space-between; }
.bundle-price-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 20px; }
.bundle-price-row .price { font-family: 'Fraunces', serif; font-size: 24px; color: var(--ink); font-weight: 600; }
@media (max-width: 768px) { .modern-bundles { grid-template-columns: 1fr; } }

/* --- 6. TikTok/Reel UGC Styling --- */
.ugc-modern-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ugc-card-v2 { aspect-ratio: 9/16; background: linear-gradient(135deg, var(--pine), #2A4360); border-radius: 16px; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
.ugc-card-v2:hover { transform: scale(1.02); }
.ugc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: #fff; }
.ugc-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 14px; }
.ugc-overlay p { margin: 0; font-size: 13.5px; font-weight: 500; }

@media (max-width: 960px) {
  .ugc-modern-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; }
  .ugc-card-v2 { flex: 0 0 60%; scroll-snap-align: start; }
}

/* Performance Render Utility */
.defer-render { content-visibility: auto; contain-intrinsic-size: 1000px; }
.d-inline-block { display: inline-block; }

/* =================================================================
   MODERN COMPONENT OVERRIDES (Category Pills, Bento, Grids)
   ================================================================= */
.section-sm { padding: 32px 0; }
.category-pills { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cat-pill { background: var(--paper); border: 1px solid var(--line); padding: 12px 24px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); transition: all 0.2s ease; text-decoration: none; }
.cat-pill:hover { border-color: var(--gold); background: var(--gold); color: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.link-arrow { font-size: 15px; font-weight: 600; color: var(--gold-deep); transition: transform 0.2s; display: inline-block; text-decoration: none; }
.link-arrow:hover { transform: translateX(4px); }
.modern-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }

.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(180px, auto); gap: 20px; }
.bento-card { border-radius: 24px; padding: 32px; transition: transform 0.2s ease; border: 1px solid var(--line); }
.bento-card:hover { transform: translateY(-4px); }
.bento-large { grid-column: span 1; grid-row: span 2; }
.bento-wide { grid-column: span 2; }
.bento-icon { font-size: 28px; margin-bottom: 16px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 16px; }
.bento-card h3 { font-size: 18px; margin-bottom: 8px; font-family: 'Work Sans', sans-serif; font-weight: 700; }
.bento-list { list-style: none; padding: 0; }
.bento-list li { margin-bottom: 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.bento-list li::before { content: '✓'; color: var(--gold); font-weight: bold; }
.bg-pine { background: var(--pine); border-color: var(--pine); }

.modern-bundles { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.bundle-card-v2 { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.2s; }
.bundle-card-v2:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.bundle-price-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
.bundle-price-row .price { font-family: 'Fraunces', serif; font-size: 24px; color: var(--ink); font-weight: 600; }

.ugc-modern-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ugc-card-v2 { aspect-ratio: 9/16; background: linear-gradient(135deg, var(--pine), #2A4360); border-radius: 16px; position: relative; overflow: hidden; cursor: pointer; transition: transform 0.2s; }
.ugc-card-v2:hover { transform: scale(1.02); }
.ugc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: #fff; }
.ugc-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 14px; }

.defer-render { content-visibility: auto; contain-intrinsic-size: 1000px; }
.flex-align { display: flex; align-items: center; }
.gap-16 { gap: 16px; }

@media (max-width: 960px) {
  .modern-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-large, .bento-wide { grid-column: span 1; grid-row: auto; }
  .modern-bundles { grid-template-columns: 1fr; }
  .ugc-modern-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; }
  .ugc-card-v2 { flex: 0 0 60%; scroll-snap-align: start; }
}
@media (max-width: 520px) {
  .modern-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .editorial-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .editorial-grid .slide-content { order: 2; padding: 24px 20px !important; text-align: center !important; }
  .editorial-grid .slide-media-wrap { order: 1; min-height: 280px !important; }
  .editorial-grid img { max-height: 280px !important; }
}