/* ─── 1. RESET & BOX MODEL ─────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ─── 2. DESIGN TOKENS (CSS VARIABLES) ─────────────────────── */
:root {
  /* Brand colours */
  --cream:    #fdf7f2;
  --warm:     #f5ede4;
  --sand:     #e8d8c8;
  --tc:       #c47b5a;   /* terracotta — primary accent */
  --tc-d:     #9e5c3e;   /* terracotta dark — hover state */
  --sage:     #7a9e87;

  /* Neutrals */
  --ink:      #1e1a17;
  --muted:    #6b5f55;
  --light:    #a89b91;
  --white:    #fff;

  /* Typography */
  --FD: 'Playfair Display', Georgia, serif;
  --FB: 'DM Sans', system-ui, sans-serif;

  /* Spacing & radii */
  --r:        12px;
  --r-lg:     20px;

  /* Shadows */
  --shadow:   0 2px 16px rgba(30, 26, 23, .08);
  --shadow-h: 0 8px 32px rgba(30, 26, 23, .15);

  /* Max article text width (verified present in the blog page's
     inline styles but not previously in main.css — added here so
     it isn't silently lost; not currently used by any rule below) */
  --max: 780px;
}


/* ─── 3. BASE STYLES ────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--FB);
  background: #f0ebe5;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--tc);
  text-decoration: none;
}
a:hover {
  color: var(--tc-d);
}


/* ─── 4. NAVIGATION ─────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(253, 247, 242, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sand);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  width: min(1200px, 100% - 2rem);
  margin-inline: auto;
}

.nav-logo {
  font-family: var(--FD);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.nav-logo span { color: var(--tc); }

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}
.nav-links a {
  font-size: 14px;
  color: var(--muted);
  transition: color .2s;
}
.nav-links a:hover { color: var(--tc); }

/* Hamburger */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px;
}

/* Mobile nav */
.mob {
  display: none;
  flex-direction: column;
  background: var(--cream);
  border-top: 1px solid var(--sand);
  padding: 14px 0;
}
.mob.open { display: flex; }
.mob a {
  padding: 10px 24px;
  font-size: 14px;
  color: var(--muted);
}


/* ─── 5. BLOG HERO ──────────────────────────────────────────── */
.blog-hero {
  background: var(--ink);
  padding: 72px 20px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 30% 40%,
    rgba(196, 123, 90, .2) 0%,
    transparent 70%
  );
}

.blog-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin-inline: auto;
}

.blog-hero-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tc);
  background: rgba(196, 123, 90, .15);
  border: 1px solid rgba(196, 123, 90, .3);
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
}

.blog-hero h1 {
  font-family: var(--FD);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  color: #fdf7f2;
  line-height: 1.1;
  margin-bottom: 16px;
}
.blog-hero h1 em {
  font-style: italic;
  color: var(--tc);
}

.blog-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 13px;
  color: var(--light);
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.blog-hero-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.blog-hero-intro {
  font-size: 16px;
  color: rgba(253, 247, 242, .75);
  max-width: 580px;
  margin-inline: auto;
  line-height: 1.8;
}


/* ─── 6. BLOG LAYOUT (2-COLUMN GRID) ───────────────────────── */
.blog-wrap {
  width: min(1100px, 100% - 2rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  padding: 52px 0 80px;
}

.blog-sidebar {
  position: sticky;
  top: 80px;
  height: fit-content;
}


/* ─── 7. SIDEBAR COMPONENTS ─────────────────────────────────── */
.toc-box {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow);
  margin-bottom: 28px;
}

.toc-title {
  font-family: var(--FD);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sand);
}

.toc-list { list-style: none; }
.toc-list li {
  padding: 5px 0;
  border-bottom: 1px solid #f3ede7;
}
.toc-list li:last-child { border-bottom: none; }
.toc-list a {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .2s;
}
.toc-list a:hover { color: var(--tc); }

.toc-num {
  font-size: 10px;
  font-weight: 700;
  background: var(--tc);
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sb-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--shadow);
  margin-bottom: 24px;
}

.sb-card-title {
  font-family: var(--FD);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 12px;
}

.sb-aff {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  background: rgba(196, 123, 90, .07);
  border: 1px dashed rgba(196, 123, 90, .3);
  border-radius: 8px;
  padding: 12px;
}

/* Sidebar CTA button */
.sb-cta-btn {
  display: block;
  background: var(--tc);
  color: #fff;
  text-align: center;
  padding: 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  transition: background .2s;
}
.sb-cta-btn:hover {
  background: var(--tc-d);
  color: #fff;
}

/* Sidebar Pinterest button */
.sb-pinterest-btn {
  display: block;
  background: #e60023;
  color: #fff;
  text-align: center;
  padding: 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}


/* ─── 8. ARTICLE INTRO BOX ──────────────────────────────────── */
.art-intro {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow);
  margin-bottom: 40px;
}

.art-intro p {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 14px;
}
.art-intro p:last-child { margin-bottom: 0; }

.aff-banner {
  background: rgba(196, 123, 90, .08);
  border: 1px solid rgba(196, 123, 90, .2);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 18px;
}
.aff-banner strong { color: var(--ink); }


/* ─── 9. STYLE ENTRY CARD ───────────────────────────────────── */
.style-entry {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 48px;
  transition: box-shadow .25s;
}
.style-entry:hover { box-shadow: var(--shadow-h); }

/* Dark header strip */
.style-num-wrap {
  background: linear-gradient(135deg, var(--ink) 0%, #2e2823 100%);
  padding: 20px 28px 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.style-num {
  font-family: var(--FD);
  font-size: 48px;
  font-weight: 700;
  color: rgba(196, 123, 90, .3);
  line-height: 1;
}

.style-num-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc);
}

.style-num-title {
  font-family: var(--FD);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 700;
  color: #fdf7f2;
  line-height: 1.2;
}

/* Image section (dark background strip) */
.style-img-section {
  background: linear-gradient(135deg, var(--ink) 0%, #2e2823 100%);
  padding: 20px 28px 28px;
}

.style-img-wrap {
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  background: #c4a882;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.style-img-wrap img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  transition: transform .5s;
}
.style-entry:hover .style-img-wrap img { transform: scale(1.03); }

.img-placeholder {
  width: 100%;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
}

/* Card body */
.style-body { padding: 28px 32px 32px; }

.style-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.85;
  margin-bottom: 20px;
}


/* ─── 10. COLOUR PALETTE SWATCH ROW ────────────────────────── */
.palette-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.palette-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--light);
}

.palette-swatches { display: flex; gap: 6px; }

.swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}


/* ─── 11. INFO / TIP / WARN / CHECK BOXES ───────────────────── */
.tip-box,
.warn-box,
.check-box {
  border-radius: var(--r);
  padding: 16px 20px;
  margin-bottom: 22px;
}

.tip-box {
  background: rgba(122, 158, 135, .1);
  border-left: 4px solid var(--sage);
}

.warn-box {
  background: rgba(196, 123, 90, .08);
  border-left: 4px solid var(--tc);
}

.check-box {
  background: rgba(30, 26, 23, .04);
  border-left: 4px solid var(--ink);
}

.tip-box-head,
.warn-box-head,
.check-box-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tip-box-head   { color: var(--sage); }
.warn-box-head  { color: var(--tc); }
.check-box-head { color: var(--ink); }

.tip-box p,
.warn-box p,
.check-box p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
}


/* ─── 12. BUDGET TABLE ──────────────────────────────────────── */
.budget-wrap { margin-bottom: 22px; }

.budget-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 10px;
}

.budget-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.budget-table tr { border-bottom: 1px solid #f3ede7; }
.budget-table tr:last-child {
  border-bottom: none;
  font-weight: 700;
  background: rgba(196, 123, 90, .06);
}

.budget-table td {
  padding: 8px 10px;
  color: var(--muted);
}
.budget-table td:last-child {
  text-align: right;
  color: var(--ink);
  font-weight: 500;
}


/* ─── 13. AMAZON PICK CARDS ─────────────────────────────────── */
.amazon-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.amazon-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 10px;
}

.amazon-pick {
  background: #f8f4f0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(196, 123, 90, .12);
  transition: box-shadow .2s, transform .2s;
}
.amazon-pick:hover {
  box-shadow: 0 6px 24px rgba(30, 26, 23, .12);
  transform: translateY(-2px);
}

.amazon-pick-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ede8e2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.amazon-pick-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .4s ease;
}
.amazon-pick:hover .amazon-pick-img-wrap img { transform: scale(1.06); }

.amazon-pick-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ff9900;
  color: #1e1a17;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  pointer-events: none;
}

.amazon-pick-body {
  padding: 12px 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.amazon-pick-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  flex: 1;
}

.amazon-pick-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--tc-d);
}

.btn-amazon-pick {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  font-family: var(--FB);
  font-size: 11px;
  font-weight: 600;
  transition: transform .15s, box-shadow .15s;
  margin-top: 4px;
}
.btn-amazon-pick:hover {
  transform: scale(1.03);
  box-shadow: 0 3px 10px rgba(255, 153, 0, .35);
}

.btn-amazon-pick .ba-icon {
  background: #ff9900;
  color: #1e1a17;
  padding: 7px 9px;
}

.btn-amazon-pick .ba-text {
  background: #1e1a17;
  color: #fff;
  padding: 7px 11px;
  white-space: nowrap;
}

.amazon-note {
  font-size: 11px;
  color: var(--light);
  text-align: center;
  margin-top: 6px;
}


/* ─── 14. BOTTOM NOTICE CARDS ───────────────────────────────── */
.bottom-notices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 40px 0;
}

.notice-card {
  background: var(--white);
  border-radius: var(--r);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--tc);
}

.notice-card-icon {
  font-size: 20px;
  margin-bottom: 7px;
}

.notice-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
}

.notice-card-body {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
}


/* ─── 15. FOOTER ────────────────────────────────────────────── */
footer {
  background: var(--ink);
  color: #fdf7f2;
  padding: 60px 0 32px;
}

.fg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 44px;
  width: min(1100px, 100% - 2rem);
  margin-inline: auto;
}

.flogo {
  font-family: var(--FD);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}
.flogo span { color: var(--tc); }

.fdesc {
  font-size: 13px;
  color: var(--light);
  line-height: 1.7;
  max-width: 240px;
  margin-bottom: 14px;
}

.fct {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 14px;
}

.flinks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.flinks a {
  font-size: 13px;
  color: rgba(253, 247, 242, .6);
  transition: color .2s;
}
.flinks a:hover { color: var(--tc); }

.fbot {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  width: min(1100px, 100% - 2rem);
  margin-inline: auto;
}

.fbot-t {
  font-size: 12px;
  color: var(--light);
}

.fbot-a {
  font-size: 11px;
  color: rgba(253, 247, 242, .35);
  max-width: 480px;
  line-height: 1.6;
}


/* ─── 16. RESPONSIVE BREAKPOINTS ───────────────────────────── */

/* Tablet */
@media (max-width: 900px) {
  .blog-wrap {
    grid-template-columns: 1fr;
  }
  .blog-sidebar {
    position: static;
  }
  .amazon-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .fg {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 680px) {
  .nav-links  { display: none; }
  .hamburger  { display: block; }

  .style-body { padding: 20px; }
  .style-num-wrap,
  .style-img-section { padding: 16px 20px; }

  .img-placeholder { height: 260px; }
  .style-img-wrap img { height: 260px; }

  .bottom-notices {
    grid-template-columns: 1fr;
  }

  .amazon-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .fg {
    grid-template-columns: 1fr;
  }

  .amazon-picks-card { padding: 20px; }
}

/* Small mobile */
@media (max-width: 420px) {
  .amazon-row {
    grid-template-columns: 1fr;
  }
}


/* ─── 17. SHARED HAMBURGER SCRIPT ───────────────────────────── */
/*
   Add this once before </body> on every page:

   <script>
     document.querySelector('.hamburger').addEventListener('click', function() {
       document.getElementById('mob').classList.toggle('open');
     });
   </script>
*/


/* ═══════════════════════════════════════════════════════════════
   18. HORIZONTAL SCROLL — AFFILIATE PICKS CAROUSEL
   Applies to .amazon-scroll-wrap + .amazon-scroll-track inside
   any .style-body. Does NOT affect the rest of the blog layout.
   ═══════════════════════════════════════════════════════════════ */

/* Outer wrapper — constrains the visible viewport & adds fade edges */
.amazon-scroll-wrap {
  position: relative;
  margin-bottom: 10px;
  /* Fade-out hint on right side so users know more cards exist */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0px,
    black 16px,
    black calc(100% - 40px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0px,
    black 16px,
    black calc(100% - 40px),
    transparent 100%
  );
}

/* The horizontally scrolling track */
.amazon-scroll-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 8px 16px;   /* bottom padding leaves room for scrollbar */
  cursor: grab;
}
.amazon-scroll-track:active { cursor: grabbing; }

/* Hide scrollbar on webkit; keep functionality */
.amazon-scroll-track::-webkit-scrollbar {
  height: 4px;
}
.amazon-scroll-track::-webkit-scrollbar-track {
  background: var(--sand);
  border-radius: 4px;
}
.amazon-scroll-track::-webkit-scrollbar-thumb {
  background: var(--tc);
  border-radius: 4px;
}
.amazon-scroll-track::-webkit-scrollbar-thumb:hover {
  background: var(--tc-d);
}

/* Firefox thin scrollbar */
.amazon-scroll-track {
  scrollbar-width: thin;
  scrollbar-color: var(--tc) var(--sand);
}

/* Each card inside the scroll track */
.amazon-scroll-track .amazon-pick {
  flex: 0 0 200px;          /* fixed card width — prevents shrinking */
  min-width: 200px;
  max-width: 200px;
  scroll-snap-align: start;
  /* Inherit all existing .amazon-pick styles; nothing overridden here */
}

/* Slightly wider cards on desktop for comfortable reading */
@media (min-width: 700px) {
  .amazon-scroll-track .amazon-pick {
    flex: 0 0 220px;
    min-width: 220px;
    max-width: 220px;
  }
}

/* ── Scroll hint label ───────────────────────────────────────── */
.scroll-hint {
  font-size: 11px;
  color: var(--light);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  user-select: none;
}
.scroll-hint::before {
  content: '← swipe →';
  font-size: 10px;
  letter-spacing: .06em;
  opacity: .7;
}

/* ── Extra-picks divider label (reused from page styles) ─────── */
.extra-products-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 18px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.extra-products-label::before {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(122, 158, 135, .3);
}
.extra-products-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(122, 158, 135, .3);
}

/* ── Page-level overrides used only on blog article pages ────── */

/* Breadcrumb */
.breadcrumb {
  width: min(1100px, 100% - 2rem);
  margin: 12px auto 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: var(--light);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sand);
}
.breadcrumb a { color: var(--muted); transition: color .2s; }
.breadcrumb a:hover { color: var(--tc); }
.breadcrumb .sep { color: var(--sand); }
.breadcrumb .current { color: var(--tc); font-weight: 500; }

/* Blog hero gradient override */
.blog-hero::before {
  background: radial-gradient(
    ellipse 60% 80% at 70% 40%,
    rgba(196, 123, 90, .2) 0%,
    transparent 70%
  );
}

/* AdSense slot styling */
.ad-slot {
  background: #f8f4f0;
  border: 1px dashed var(--sand);
  border-radius: var(--r);
  text-align: center;
  padding: 12px;
  margin: 32px 0;
  font-size: 11px;
  color: var(--light);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
.ad-slot-label {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 4px;
}

/* H2 inside style entries */
.style-num-title {
  font-family: var(--FD);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 700;
  color: #fdf7f2;
  line-height: 1.2;
  margin: 0;
}

/* FAQ section */
.faq-section {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 48px;
}
.faq-head {
  background: linear-gradient(135deg, var(--ink) 0%, #2e2823 100%);
  padding: 20px 28px;
}
.faq-head h2 {
  font-family: var(--FD);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: #fdf7f2;
  margin: 0;
}
.faq-head p {
  font-size: 13px;
  color: rgba(253,247,242,.6);
  margin: 6px 0 0;
}
.faq-body { padding: 4px 0; }
.faq-item {
  border-bottom: 1px solid var(--sand);
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
  padding: 18px 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: color .2s;
  list-style: none;
}
.faq-q:hover { color: var(--tc); }
.faq-q::marker { display: none; }
.faq-icon {
  font-size: 18px;
  color: var(--tc);
  flex-shrink: 0;
  transition: transform .3s;
  line-height: 1;
}
details[open] .faq-icon { transform: rotate(45deg); }
.faq-a {
  padding: 0 28px 18px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
}


/* ═══════════════════════════════════════════════════════════════
   19. ARTICLE SHARE BAR, HERO IMAGE WRAP, SEPARATE AMAZON-PICKS
   CARD, AND IMAGE CAPTION — Phase 2 addition.

   These selectors were found live on 11-bedroom-styles-2026.html's
   inline <style> block but did not previously exist in main.css.
   They are purely additive: new class names that don't collide
   with anything already defined above, so folding them in here
   does not change the appearance or behavior of any existing page
   that already loads main.css.
   ═══════════════════════════════════════════════════════════════ */

/* Hero featured/pin image wrapper */
.blog-hero-img-wrap {
  max-width: 900px;
  margin: 32px auto 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  position: relative;
  z-index: 1;
}
.blog-hero-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* Share bar (hero) */
.share-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
  position: relative;
  z-index: 1;
}
.share-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--light);
  margin-right: 4px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 15px;
  transition: transform .15s, box-shadow .15s;
  border: 1px solid rgba(255, 255, 255, .15);
}
.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.share-pinterest { background: #e60023; color: #fff; }
.share-facebook  { background: #1877f2; color: #fff; }
.share-x         { background: #000;    color: #fff; }
.share-whatsapp  { background: #25d366; color: #fff; }
.share-email     { background: #6b5f55; color: #fff; }
.share-copy {
  background: var(--tc);
  color: #fff;
  cursor: pointer;
  position: relative;
}
.share-copy.copied { background: var(--sage); }

.copy-toast {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: #fdf7f2;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.copy-toast::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}
.copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Sidebar share-card variant (smaller buttons) */
.sb-share-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.sb-share-row .share-btn {
  width: 34px;
  height: 34px;
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, .06);
}

/* Empty utility hook — present in the live page's markup (<main class="blog-main">)
   with no styling; kept here as a documented no-op so the class isn't undefined. */
.blog-main {}

/* Optional caption strip under a style entry's image (verified present in the
   live page's CSS though not used by any style entry on THIS article; kept in
   case another blog page's markup uses it, or this page adds captions later). */
.style-img-caption {
  background: rgba(30, 26, 23, .7);
  backdrop-filter: blur(4px);
  padding: 10px 16px;
}
.style-img-caption p {
  font-size: 11.5px;
  color: rgba(253, 247, 242, .7);
  line-height: 1.5;
}
.style-img-caption strong { color: var(--tc); }

/* Amazon picks — now its own separate card, sitting below a style-entry
   rather than fused inside .style-body. This is the version currently
   live on 11-bedroom-styles-2026.html. */
.amazon-picks-card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 26px 32px 30px;
  margin-top: 0;
  margin-bottom: 48px;
  transition: box-shadow .25s;
}
.amazon-picks-card:hover { box-shadow: var(--shadow-h); }


/* ═══════════════════════════════════════════════════════════════
   20. SIMPLE FAQ BLOCK (.faq-wrap) — Phase 2 addition, from
   6-room-decor-items-2026.html.

   IMPORTANT — NAME COLLISION FOUND AND HANDLED:
   This page's FAQ markup reuses the class names .faq-item, .faq-q,
   and .faq-a, which ALREADY EXIST above (section on the accordion-
   style .faq-section component) with different property values
   (that version adds padding, cursor:pointer, and flex layout for
   a <details>-based accordion). If added as bare selectors here,
   they would silently override or conflict with the accordion
   version wherever both classes are loaded together.

   Fix: every rule below is scoped under the unique .faq-wrap
   parent (which only this simple, non-accordion FAQ pattern uses),
   so it can never match anything inside .faq-section. No existing
   class name was renamed in the HTML — only the CSS selector was
   made more specific, which is a purely internal, safe change.
   ═══════════════════════════════════════════════════════════════ */

.faq-wrap {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 32px;
  margin-bottom: 40px;
}
.faq-wrap .faq-title {
  font-family: var(--FD);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 20px;
}
.faq-wrap .faq-item {
  border-bottom: 1px solid #f3ede7;
  padding: 16px 0;
}
.faq-wrap .faq-item:last-child { border-bottom: none; }
.faq-wrap .faq-q {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.faq-wrap .faq-a {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
}