/*
Theme Name: Cozy Amigurumi v105
Theme URI: https://cozyamigurumi.com
Author: Cozy Amigurumi Shop
Description: A warm and cozy WordPress theme built for amigurumi and crochet pattern shops. Includes a homepage, shop, blog, free patterns archive, about, contact, FAQ, checkout, and policy pages. Designed to work with WooCommerce and Gumroad. Mobile-friendly and optimized for SEO.
Version: 10.5.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: cozy-amigurumi
*/

/* ════════════════════════════════════════
   FONTS
════════════════════════════════════════ */
/* Font loaded via wp_head preconnect + link tag in functions.php */

/* ════════════════════════════════════════
   CSS VARIABLES
════════════════════════════════════════ */
:root {
  --burg:        #7B1C3A;
  --burg-dark:   #5A0E28;
  --burg-light:  #9E3358;
  --burg-muted:  rgba(123,28,58,.09);
  --cream:       #FDF6EC;
  --cream-2:     #F5EDE3;
  --cream-3:     #EDE0D0;
  --mint:        #C8EFE3;
  --mint-light:  #E8F8F3;
  --mint-dark:   #8BD5C0;
  --pink:        #E8708A;
  --pink-light:  #FAD5DF;
  --brown:       #3D1A0E;
  --brown-2:     #6B4226;
  --brown-3:     #7A5535;
  --border:      #E8D5C4;
  --border-2:    #F0E5D8;
  --white:       #FFFFFF;
  --footer-bg:   #1A0A0D;
  --success:     #166534;
  --font:        'Nunito', sans-serif;
  --r:           16px;
  --r-lg:        22px;
  --r-pill:      999px;
  --shadow:      0 4px 20px rgba(61,26,14,.10);
  --shadow-sm:   0 2px 8px rgba(61,26,14,.06);
  --wrap:        1240px;
}

/* ════════════════════════════════════════
   RESET
════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--brown);
  background: var(--cream);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--burg); text-decoration: none; transition: color .2s; }
a:hover { color: var(--burg-dark); }
ul, ol { list-style: none; }
input, select, textarea, button { font-family: var(--font); }
h1,h2,h3,h4,h5,h6 { line-height: 1.2; font-weight: 800; color: var(--brown); }

/* ════════════════════════════════════════
   LAYOUT
════════════════════════════════════════ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}
.section { padding: 5rem 0; }

/* ════════════════════════════════════════
   TYPE UTILITIES
════════════════════════════════════════ */
.overline {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--burg);
  margin-bottom: .5rem;
}
.overline--white  { color: #FFB3C3; }
.overline--brown  { color: var(--brown-3); }

.sec-title {
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 900;
  color: var(--brown);
  margin-bottom: .5rem;
}
.sec-title--white { color: var(--white); }

.sec-sub {
  font-size: 1rem;
  color: var(--brown-2);
  max-width: 560px;
  margin: 0 auto 2.5rem;
  text-align: center;
  display: block;
}
.sec-sub--white { color: rgba(253,246,236,.78); }

/* ════════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .75rem 1.6rem;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-weight: 800;
  font-size: .88rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .22s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: none; }

.btn-primary   { background: var(--burg);  color: var(--white); border-color: var(--burg); }
.btn-primary:hover { background: var(--burg-dark); border-color: var(--burg-dark); color: var(--white); }

.btn-white     { background: var(--white); color: var(--burg);  border-color: var(--white); }
.btn-white:hover { background: var(--cream); color: var(--burg); }

.btn-outline-white { background: transparent; border-color: rgba(255,255,255,.65); color: var(--white); }
.btn-outline-white:hover { background: var(--white); color: var(--burg); }

.btn-outline   { background: transparent; border-color: var(--burg); color: var(--burg); }
.btn-outline:hover { background: var(--burg); color: var(--white); }

.btn-mint      { background: var(--mint); color: var(--brown); border-color: var(--mint); }
.btn-mint:hover { background: var(--mint-dark); }

.btn-gumroad   { background: #FF90E8; color: #000; border-color: #FF90E8; font-weight: 900; }
.btn-gumroad:hover { background: #ff75e3; border-color: #ff75e3; color: #000; }

.btn-sm  { padding: .5rem 1.1rem; font-size: .8rem; }
.btn-lg  { padding: .95rem 2.2rem; font-size: 1rem; }
.btn-full { width: 100%; }

/* ════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════ */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
.float  { animation: float 3.2s ease-in-out infinite; }
.float:nth-child(2) { animation-delay: .7s; }
.float:nth-child(3) { animation-delay: 1.4s; }
.float:nth-child(4) { animation-delay: 2.1s; }
.float:nth-child(5) { animation-delay: .35s; }
.float:nth-child(6) { animation-delay: 2.8s; }

/* ════════════════════════════════════════
   HEADER  — MOBILE-FIRST, FULLY FIXED
════════════════════════════════════════ */
#site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 9000;
  transition: box-shadow .3s;
  width: 100%;
}
#site-header.scrolled { box-shadow: var(--shadow); }

.header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 20px;
  max-width: var(--wrap);
  margin: 0 auto;
  width: 100%;
}

/* Logo */
.site-logo {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--burg);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.site-logo:hover { color: var(--burg-dark); text-decoration: none; }

/* Desktop search — hidden on mobile */
.header-search {
  flex: 1;
  max-width: 400px;
  position: relative;
  display: none; /* shown via media query below */
}
.header-search input {
  width: 100%;
  padding: .55rem 2.8rem .55rem 1rem;
  border-radius: var(--r-pill);
  border: 2px solid var(--border);
  background: var(--cream);
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 600;
  color: var(--brown);
  transition: border-color .2s;
}
.header-search input:focus { outline: none; border-color: var(--burg); background: var(--white); }
.header-search .search-submit {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  padding: 0 1rem;
  background: var(--burg);
  color: var(--white);
  border: none;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  cursor: pointer;
  font-size: .85rem;
  transition: background .2s;
}
.header-search .search-submit:hover { background: var(--burg-dark); }

/* Desktop nav links — hidden on mobile */
.header-nav {
  display: none;
  align-items: center;
  gap: 1.4rem;
}
.header-nav a {
  font-weight: 700;
  font-size: .86rem;
  color: var(--brown-2);
  white-space: nowrap;
}
.header-nav a:hover, .header-nav a.active { color: var(--burg); }

/* Header right actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

.header-cart {
  position: relative;
  display: flex;
  align-items: center;
  padding: .4rem;
  border-radius: 8px;
  font-size: 1.2rem;
  transition: background .2s;
  text-decoration: none;
}
.header-cart:hover { background: var(--burg-muted); }
.cart-bubble {
  position: absolute;
  top: 0; right: 0;
  background: var(--pink);
  color: var(--white);
  font-size: .6rem;
  font-weight: 900;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  line-height: 1;
}

/* Browse Patterns CTA — mobile only */
.header-browse {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1rem;
  background: var(--burg);
  color: var(--white);
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: .82rem;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s;
  border: none;
  cursor: pointer;
}
.header-browse:hover { background: var(--burg-dark); color: var(--white); text-decoration: none; }

/* Hamburger */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--brown);
  border-radius: 4px;
  transition: all .3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,6px); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-6px); }

/* Mobile drawer */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 1.2rem 20px 1.5rem;
  gap: 0;
  /* Full viewport width — breaks out of the centered header-wrap */
  position: fixed;
  top: 60px; /* sits right below the header bar */
  left: 0;
  right: 0;
  width: 100%;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  z-index: 8999;
  box-shadow: 0 8px 24px rgba(61,26,14,.15);
}
.mobile-nav.open { display: flex; }

.mobile-search {
  display: flex;
  margin-bottom: 1rem;
}
.mobile-search input {
  flex: 1;
  padding: .65rem 1rem;
  border: 2px solid var(--border);
  border-right: none;
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  font-family: var(--font);
  font-size: .88rem;
  background: var(--cream);
  color: var(--brown);
}
.mobile-search input:focus { outline: none; border-color: var(--burg); }
.mobile-search button {
  padding: .65rem 1rem;
  background: var(--burg);
  color: var(--white);
  border: 2px solid var(--burg);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  font-family: var(--font);
  font-weight: 800;
  cursor: pointer;
  font-size: .85rem;
}

.mobile-nav a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 0;
  font-weight: 700;
  font-size: .95rem;
  color: var(--brown);
  border-bottom: 1px solid var(--border-2);
  text-decoration: none;
}
.mobile-nav a:last-of-type { border-bottom: none; }
.mobile-nav a:hover { color: var(--burg); }
.mobile-nav .mobile-cta {
  margin-top: 1rem;
  background: var(--burg);
  color: var(--white);
  border-radius: var(--r-pill);
  padding: .8rem;
  text-align: center;
  justify-content: center;
  border: none;
  font-size: .9rem;
  border-bottom: none;
}
.mobile-nav .mobile-cta:hover { background: var(--burg-dark); color: var(--white); }

/* ── Hide WordPress auto-injected primary nav (causes duplicate Browse btn) ── */
#site-header .wp-block-navigation,
#site-header .wp-block-navigation__container,
#site-header nav.wp-block-navigation {
  display: none !important;
}
/* Only show ONE header-browse on mobile */
.header-browse ~ .header-browse { display: none !important; }


════════════════════════════════════════ */
.breadcrumb-bar {
  background: var(--cream-2);
  border-bottom: 1px solid var(--border);
  padding: .6rem 20px;
}
.breadcrumb-bar .wrap {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--brown-3);
}
.breadcrumb-bar a { color: var(--brown-2); font-weight: 600; }
.breadcrumb-bar a:hover { color: var(--burg); }
.breadcrumb-bar .sep { color: var(--brown-3); }

/* ════════════════════════════════════════
   PAGE HERO BAND
════════════════════════════════════════ */
.page-hero {
  background: var(--burg);
  padding: 3rem 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(255,255,255,.05) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--white);
  margin-bottom: .5rem;
}
.page-hero p { color: rgba(253,246,236,.75); font-size: 1rem; }

/* ════════════════════════════════════════
   HERO SECTION (homepage)
════════════════════════════════════════ */
.hero {
  background: var(--burg);
  padding: 4.5rem 20px 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%);
  top: -150px; right: -80px;
  pointer-events: none;
}
.hero-floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-floats span {
  position: absolute;
  font-size: 1.6rem;
  opacity: .3;
}
.hero-floats span:nth-child(1) { top:12%; left:5%; }
.hero-floats span:nth-child(2) { top:18%; right:6%; font-size:1.3rem; }
.hero-floats span:nth-child(3) { bottom:28%; left:3%; font-size:1.2rem; }
.hero-floats span:nth-child(4) { bottom:22%; right:5%; font-size:1.8rem; }
.hero-floats span:nth-child(5) { top:45%; right:2.5%; font-size:1.1rem; }
.hero-floats span:nth-child(6) { top:58%; left:2.5%; }

.hero-badges {
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.hero-badge {
  background: rgba(255,255,255,.12);
  color: rgba(253,246,236,.95);
  border: 1.5px solid rgba(255,255,255,.22);
  padding: .28rem .85rem;
  border-radius: var(--r-pill);
  font-size: .76rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

.hero-inner {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  animation: fadeInUp .8s ease both;
}
.hero-title {
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 1.1rem;
  letter-spacing: -.02em;
}
.hero-title em { font-style: normal; color: #FFB3C3; }
.hero-sub {
  color: rgba(253,246,236,.88);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 2rem;
  line-height: 1.65;
}

.hero-btns {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.8rem;
}

.hero-stat:not(:last-child) { border-right: 1px solid rgba(255,255,255,.2); }
.hero-stat strong { display: block; font-size: 1.4rem; font-weight: 900; color: var(--white); line-height: 1; }
.hero-stat span   { font-size: .72rem; color: rgba(253,246,236,.92); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* MOBILE: stats become a 2×2 card grid */
@media (max-width: 540px) {
  .hero-stats-wrap { width: 100%; }
  .hero-stat strong { font-size: 1.15rem; margin-bottom: .15rem; }
  .hero-stat span   { font-size: .65rem; }
}

/* ════════════════════════════════════════
   CATEGORY STRIP
════════════════════════════════════════ */
.cat-strip {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 1rem 20px;
}
.cat-scroll {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-pill {
  flex-shrink: 0;
  background: var(--cream);
  border: 2px solid var(--border);
  border-radius: var(--r-pill);
  padding: .42rem 1rem;
  font-weight: 700;
  font-size: .81rem;
  color: var(--brown-2);
  white-space: nowrap;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.cat-pill:hover, .cat-pill.active {
  background: var(--burg);
  border-color: var(--burg);
  color: var(--white);
  text-decoration: none;
}

/* ════════════════════════════════════════
   BENEFITS
════════════════════════════════════════ */
.benefits-grid, .centered-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  justify-items: stretch;
}
.centered-cards-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}
.benefit-card, .info-card {
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  transition: transform .25s, box-shadow .25s;
}
.benefit-card:hover, .info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.benefit-card:nth-child(3n+1), .info-card:nth-child(3n+1) { background: var(--cream-2); }
.benefit-card:nth-child(3n+2), .info-card:nth-child(3n+2) { background: var(--mint-light); }
.benefit-card:nth-child(3n+3), .info-card:nth-child(3n+3) { background: var(--pink-light); }
.benefit-title { font-size: 1rem; font-weight: 900; color: var(--brown); }
.benefit-text  { font-size: .87rem; color: var(--brown-2); line-height: 1.65; }

/* ════════════════════════════════════════
   SHOP STATS (replaces team section)
════════════════════════════════════════ */
.stats-section { background: var(--burg); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.stat-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  backdrop-filter: blur(4px);
  transition: background .2s;
}
.stat-card:hover { background: rgba(255,255,255,.13); }
.stat-number {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--white);
  display: block;
  line-height: 1;
  margin-bottom: .4rem;
}
.stat-label {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(253,246,236,.7);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: block;
  margin-bottom: .75rem;
}
.stat-icon { font-size: 2rem; margin-bottom: .75rem; }

/* ════════════════════════════════════════
   PRODUCT CARDS
════════════════════════════════════════ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.products-grid-3 { grid-template-columns: repeat(3, 1fr); }

.product-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s;
  cursor: pointer;
  position: relative;
}
.product-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product-card .btn, .product-card .view-link {
  position: relative;
  z-index: 2;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.product-thumb {
  position: relative;
  overflow: hidden;
  background: var(--cream-2);
}
.product-thumb::before { content: ''; display: block; padding-top: 75%; }
.product-thumb img,
.product-thumb-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.product-thumb img    { object-fit: cover; transition: transform .4s; }
.product-card:hover .product-thumb img { transform: scale(1.05); }
.product-thumb-ph     { display: flex; align-items: center; justify-content: center; font-size: 3.5rem; opacity: .3; }

.diff-badge {
  position: absolute;
  top: .6rem; left: .6rem;
  padding: .2rem .65rem;
  border-radius: var(--r-pill);
  font-size: .67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--white);
}
.diff-badge.beginner     { background: #166534; }
.diff-badge.intermediate { background: #92400e; }
.diff-badge.advanced     { background: #991b1b; }

.free-badge {
  position: absolute;
  top: .6rem; right: .6rem;
  background: var(--pink);
  color: var(--white);
  padding: .2rem .65rem;
  border-radius: var(--r-pill);
  font-size: .67rem;
  font-weight: 900;
  text-transform: uppercase;
}

.gumroad-badge {
  position: absolute;
  bottom: .6rem; right: .6rem;
  background: rgba(255,144,232,.9);
  color: #000;
  padding: .18rem .6rem;
  border-radius: var(--r-pill);
  font-size: .62rem;
  font-weight: 900;
  backdrop-filter: blur(4px);
}

.product-body {
  padding: 1rem 1.1rem 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.product-meta-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.product-time {
  font-size: .73rem;
  color: var(--brown-3);
  font-weight: 700;
}
.product-cat-tag {
  font-size: .68rem;
  background: var(--cream-2);
  color: var(--brown-2);
  padding: .12rem .5rem;
  border-radius: var(--r-pill);
  font-weight: 700;
}
.product-title {
  font-size: .96rem;
  font-weight: 800;
  color: var(--brown);
  line-height: 1.35;
  flex: 1;
}
.product-title a { color: inherit; }
.product-title a:hover { color: var(--burg); }

.product-price-row {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.price-now  { font-size: 1.1rem; font-weight: 900; color: var(--burg); }
.price-orig { font-size: .8rem; text-decoration: line-through; color: var(--brown-3); }
.price-free { font-size: 1rem; font-weight: 900; color: var(--success); }

.product-cta {
  margin-top: auto;
  padding-top: .6rem;
  border-top: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.product-cta .view-link {
  font-size: .8rem;
  font-weight: 800;
  color: var(--burg);
  display: flex;
  align-items: center;
  gap: .25rem;
  transition: gap .2s;
}
.product-cta .view-link:hover { gap: .45rem; }

/* ════════════════════════════════════════
   SINGLE PRODUCT
════════════════════════════════════════ */
.product-single { padding: 2.5rem 0 5rem; }
.product-single-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.product-gallery-wrap {
  position: sticky;
  top: 90px;
}
.product-gallery-main img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.product-gallery-thumbs {
  display: flex;
  gap: .6rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}
.product-gallery-thumbs img {
  width: 68px; height: 68px;
  object-fit: cover;
  border-radius: var(--r);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color .2s;
}
.product-gallery-thumbs img.active,
.product-gallery-thumbs img:hover { border-color: var(--burg); }

.product-info { display: flex; flex-direction: column; gap: 1rem; }
.product-info-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  line-height: 1.2;
}
.product-info-badges { display: flex; gap: .5rem; flex-wrap: wrap; }
.product-info-price {
  display: flex;
  align-items: baseline;
  gap: .75rem;
}
.product-info-price .price-now { font-size: 2.2rem; font-weight: 900; }
.product-info-price .price-orig { font-size: 1.1rem; }

.product-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}
.pmeta-item {
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: .65rem 1rem;
}
.pmeta-item label {
  display: block;
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: var(--brown-3);
  margin-bottom: .2rem;
}
.pmeta-item span { font-weight: 800; color: var(--brown); font-size: .88rem; }

.product-info-desc { color: var(--brown-2); font-size: .92rem; line-height: 1.75; }
.product-info-desc p { margin-bottom: .75rem; }

/* Gumroad buy box */
.gumroad-box {
  background: linear-gradient(135deg, var(--cream-2) 0%, var(--pink-light) 100%);
  border: 2px solid var(--pink);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.gumroad-box-title {
  font-size: .82rem;
  font-weight: 900;
  color: var(--brown);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.gumroad-box .price-display {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.gumroad-box .price-big { font-size: 2rem; font-weight: 900; color: var(--burg); }
.gumroad-box .price-old { font-size: 1rem; text-decoration: line-through; color: var(--brown-3); }
.gumroad-box .btn-gumroad { width: 100%; font-size: 1rem; padding: 1rem; }
.gumroad-trust {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.gumroad-trust span {
  font-size: .75rem;
  font-weight: 700;
  color: var(--brown-2);
  display: flex;
  align-items: center;
  gap: .3rem;
}

.product-includes {
  background: var(--mint-light);
  border: 2px solid var(--mint);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
}
.product-includes h4 {
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brown);
  margin-bottom: .65rem;
}
.product-includes li {
  font-size: .85rem;
  color: var(--brown-2);
  padding: .2rem 0;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-weight: 600;
}
.product-includes li::before { content: '✓'; color: var(--success); font-weight: 900; flex-shrink: 0; }

/* Product tabs */
.product-tabs { margin-top: 3rem; }
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn:hover { color: var(--burg); }
.tab-btn.active { color: var(--burg); border-bottom-color: var(--burg); }
.tab-panel { display: none; padding: 1.75rem 0; }
.tab-panel.active { display: block; }

/* ════════════════════════════════════════
   SHOP ARCHIVE
════════════════════════════════════════ */
.shop-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 2.5rem;
  align-items: start;
  padding: 2.5rem 0 5rem;
}
.shop-sidebar { position: sticky; top: 80px; }
.filter-widget {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r);
  padding: 1.2rem;
  margin-bottom: 1.1rem;
}
.filter-title {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  color: var(--brown-3);
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.filter-list { display: flex; flex-direction: column; gap: .4rem; }
.filter-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .86rem;
  font-weight: 700;
  color: var(--brown-2);
  padding: .28rem 0;
  transition: color .2s;
}
.filter-list a:hover, .filter-list a.active { color: var(--burg); }
.filter-count {
  background: var(--cream-2);
  color: var(--brown-3);
  font-size: .68rem;
  font-weight: 800;
  padding: .1rem .45rem;
  border-radius: var(--r-pill);
}

.shop-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
  gap: .75rem;
}
.result-count { font-size: .86rem; color: var(--brown-2); font-weight: 600; }
.shop-sort select {
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  border: 2px solid var(--border);
  font-family: var(--font);
  font-size: .84rem;
  font-weight: 700;
  background: var(--white);
  color: var(--brown);
  cursor: pointer;
}
.shop-sort select:focus { outline: none; border-color: var(--burg); }

/* ════════════════════════════════════════
   CART PAGE
════════════════════════════════════════ */
.cart-page { padding: 3rem 0 5rem; }
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
}
.cart-empty {
  text-align: center;
  padding: 6rem 1.5rem;
}
.cart-empty .icon { font-size: 5rem; opacity: .3; margin-bottom: 1.5rem; }
.cart-empty h2 { font-size: 1.5rem; margin-bottom: .75rem; }
.cart-empty p { color: var(--brown-2); margin-bottom: 2rem; }

.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brown-3);
  font-weight: 800;
  padding: .65rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--border);
  background: var(--cream-2);
}
.cart-table td {
  padding: 1rem 1rem;
  border-bottom: 1px solid var(--border-2);
  vertical-align: middle;
}
.cart-item-thumb {
  width: 65px; height: 65px;
  object-fit: cover;
  border-radius: var(--r);
  border: 2px solid var(--border);
}
.cart-item-name { font-weight: 800; font-size: .9rem; }
.cart-item-name a { color: var(--brown); }
.cart-item-meta { font-size: .76rem; color: var(--brown-3); margin-top: .2rem; }
.cart-qty { width: 55px; padding: .38rem .55rem; border-radius: var(--r); border: 2px solid var(--border); font-family: var(--font); font-weight: 700; text-align: center; }
.cart-remove { background: none; border: none; color: var(--brown-3); cursor: pointer; font-size: 1.1rem; transition: color .2s; padding: 0; }
.cart-remove:hover { color: #991b1b; }

/* Gumroad cart notice */
.gumroad-cart-notice {
  background: linear-gradient(135deg, #FFF0FB 0%, #FFE4F7 100%);
  border: 2px solid #FF90E8;
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.gumroad-cart-notice h3 { font-size: 1rem; margin-bottom: .5rem; }
.gumroad-cart-notice p  { font-size: .88rem; color: var(--brown-2); margin-bottom: 1rem; }

.cart-summary {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  position: sticky;
  top: 80px;
}
.cart-summary h2 { font-size: 1.05rem; font-weight: 900; margin-bottom: 1.2rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.cart-sum-row { display: flex; justify-content: space-between; padding: .55rem 0; font-size: .88rem; }
.cart-sum-row span:first-child { color: var(--brown-2); font-weight: 600; }
.cart-sum-row span:last-child  { font-weight: 800; }
.cart-sum-row.total { border-top: 2px solid var(--border); margin-top: .5rem; padding-top: .9rem; }
.cart-sum-row.total span:last-child { font-size: 1.3rem; color: var(--burg); }

/* ════════════════════════════════════════
   CHECKOUT — GUMROAD REDIRECT
════════════════════════════════════════ */
.checkout-gumroad {
  padding: 5rem 0;
  text-align: center;
  background: var(--cream);
}
.checkout-gumroad-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 3rem 2.5rem;
}
.checkout-gumroad-card .icon { font-size: 4rem; margin-bottom: 1.25rem; }
.checkout-gumroad-card h1 { font-size: 1.5rem; margin-bottom: .75rem; }
.checkout-gumroad-card p  { color: var(--brown-2); margin-bottom: 1.5rem; line-height: 1.7; }

/* FAQ styles consolidated below */

/* ════════════════════════════════════════
   NEWSLETTER
════════════════════════════════════════ */
.newsletter-sec { background: var(--burg); padding: 5rem 20px; }
.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
}
.nl-copy h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 900; color: var(--white); margin-bottom: .75rem; }
.nl-copy p  { color: rgba(253,246,236,.78); font-size: .96rem; }

.nl-form { display: flex; flex-direction: column; gap: .8rem; }
.nl-row  { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.nl-field { display: flex; flex-direction: column; gap: .3rem; }
.nl-field label { font-size: .7rem; font-weight: 800; color: rgba(253,246,236,.75); text-transform: uppercase; letter-spacing: .08em; }
.nl-field input, .nl-field select {
  padding: .7rem 1rem;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  color: var(--white);
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 600;
}
.nl-field input::placeholder { color: rgba(253,246,236,.4); }
.nl-field input:focus, .nl-field select:focus { outline: none; border-color: rgba(255,255,255,.6); }
.nl-field select option { background: var(--burg-dark); }
.nl-note { font-size: .73rem; color: rgba(253,246,236,.75); text-align: center; }
.nl-note a { color: rgba(253,246,236,.7); text-decoration: underline; }

/* ════════════════════════════════════════
   POLICY PAGES
════════════════════════════════════════ */
.policy-body { max-width: 800px; margin: 0 auto; padding: 4rem 20px; }
.policy-summary {
  background: var(--mint-light);
  border: 2px solid var(--mint);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.8rem;
  margin-bottom: 2.5rem;
}
.policy-summary p { color: var(--brown-2); font-size: .92rem; }
.policy-body h2 { font-size: 1.2rem; font-weight: 900; color: var(--brown); margin: 2.2rem 0 .65rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.policy-body h2:first-of-type { border-top: none; margin-top: 0; }
.policy-body p, .policy-body li { color: var(--brown-2); line-height: 1.78; margin-bottom: .7rem; font-size: .91rem; }
.policy-body ul { padding-left: 1.2rem; list-style: disc; margin-bottom: 1rem; }
.policy-body strong { color: var(--brown); }
.policy-body a { color: var(--burg); text-decoration: underline; }

/* ════════════════════════════════════════
   ABOUT SECTIONS
════════════════════════════════════════ */
.about-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-visual { background: var(--cream-2); border: 2px solid var(--border); border-radius: var(--r-lg); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 7rem; opacity: .25; }
.about-text p  { color: var(--brown-2); line-height: 1.8; margin-bottom: 1rem; }

/* ════════════════════════════════════════
   CONTACT
════════════════════════════════════════ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.contact-detail {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .9rem 1.1rem;
  background: var(--cream-2);
  border-radius: var(--r);
  border: 1.5px solid var(--border);
  margin-bottom: .75rem;
}
.contact-detail .icon { font-size: 1.3rem; flex-shrink: 0; margin-top: .05rem; }
.contact-detail strong { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brown-3); font-weight: 800; }
.contact-detail a, .contact-detail span { font-weight: 700; color: var(--brown); font-size: .9rem; }
.contact-form-card { background: var(--white); border: 2px solid var(--border); border-radius: var(--r-lg); padding: 2rem; }
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-size: .78rem; font-weight: 800; color: var(--brown-2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem; }
.form-group .req { color: var(--pink); }
.form-input {
  width: 100%;
  padding: .75rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font);
  font-size: .9rem;
  color: var(--brown);
  background: var(--cream);
  transition: border-color .2s, box-shadow .2s;
}
.form-input:focus { outline: none; border-color: var(--burg); box-shadow: 0 0 0 3px var(--burg-muted); background: var(--white); }
textarea.form-input { resize: vertical; min-height: 130px; }
select.form-input { cursor: pointer; }

/* ════════════════════════════════════════
   SIDEBAR WIDGETS
════════════════════════════════════════ */
.sidebar-widget { background: var(--white); border: 2px solid var(--border); border-radius: var(--r); padding: 1.3rem; margin-bottom: 1.3rem; }
.sidebar-title  { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--brown-3); margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.sidebar-product { display: flex; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--border-2); align-items: center; text-decoration: none; transition: background .15s; }
.sidebar-product:hover { background: var(--cream); margin: 0 -.5rem; padding: .55rem .5rem; border-radius: var(--r); }
.sidebar-product:last-of-type { border-bottom: none; }
.sidebar-product img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--r); border: 1.5px solid var(--border); flex-shrink: 0; }
.sidebar-product-name  { font-size: .82rem; font-weight: 800; color: var(--brown); line-height: 1.3; margin-bottom: .18rem; }
.sidebar-product-price { font-size: .8rem; font-weight: 900; color: var(--burg); }
.sidebar-view-all {
  display: block;
  margin-top: .85rem;
  padding: .5rem 1rem;
  text-align: center;
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .76rem;
  font-weight: 800;
  color: var(--burg);
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.sidebar-view-all:hover { background: var(--burg); color: var(--white); border-color: var(--burg); }

.sidebar-pin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1rem;
  background: #E60023;
  color: var(--white);
  border-radius: var(--r-pill);
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
  transition: background .2s, transform .15s;
  width: 100%;
}
.sidebar-pin-btn:hover { background: #c0001d; transform: translateY(-1px); }

.sidebar-info-list { display: flex; flex-direction: column; gap: 0; }
.sidebar-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .48rem 0;
  font-size: .82rem;
  border-bottom: 1px solid var(--border-2);
}
.sidebar-info-row:last-child { border-bottom: none; }
.sidebar-info-row span { color: var(--brown-2); font-weight: 600; }
.sidebar-info-row strong { color: var(--brown); font-weight: 800; text-align: right; max-width: 55%; }

/* fp2-main-col — the article content column */
.fp2-main-col { min-width: 0; }

/* ════════════════════════════════════════
   HOMEPAGE PRODUCTS SECTION
════════════════════════════════════════ */
.hp-products-section {
  background: linear-gradient(135deg, var(--burg) 0%, var(--burg-dark) 100%);
  padding: 5rem 20px;
}
.hp-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.hp-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}
.hp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(61,26,14,.18);
}
.hp-card-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cream-2);
}
.hp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.hp-card:hover .hp-card-img img { transform: scale(1.04); }
.hp-badge {
  position: absolute;
  padding: .22rem .65rem;
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
}
.hp-badge--sale {
  top: .6rem; left: .6rem;
  background: var(--burg);
  color: var(--white);
}
.hp-badge--diff {
  top: .6rem; right: .6rem;
  background: var(--cream);
  color: var(--brown);
}
.hp-card-body {
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1;
}
.hp-card-meta {
  font-size: .68rem;
  color: var(--brown-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hp-card-title {
  font-size: .94rem;
  font-weight: 800;
  color: var(--brown);
  line-height: 1.35;
  flex: 1;
}
.hp-card-stars {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.hp-card-stars-val { color: #B45309; font-size: .82rem; letter-spacing: .05em; }
.hp-card-stars-num { font-size: .75rem; font-weight: 800; color: var(--brown-2); }
.hp-card-price {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.hp-price-orig {
  font-size: .8rem;
  text-decoration: line-through;
  color: var(--brown-3);
  font-weight: 700;
}
.hp-price-now  { font-size: 1.05rem; font-weight: 900; color: var(--burg); }
.hp-price-free { font-size: 1rem; font-weight: 900; color: var(--success); }
.hp-card-actions {
  display: flex;
  gap: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border-2);
  margin-top: auto;
}
.hp-btn {
  flex: 1;
  text-align: center;
  padding: .55rem .5rem;
  border-radius: var(--r);
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
}
.hp-btn--primary {
  background: var(--burg);
  color: var(--white);
  border: 2px solid var(--burg);
}
.hp-btn--primary:hover {
  background: var(--burg-dark);
  border-color: var(--burg-dark);
}
.hp-btn--outline {
  background: transparent;
  color: var(--burg);
  border: 2px solid var(--burg);
}
.hp-btn--outline:hover {
  background: var(--burg);
  color: var(--white);
}

/* ════════════════════════════════════════
   HOW IT WORKS SECTION
════════════════════════════════════════ */
.hiw-section { background: var(--white); }
.hiw-cards {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hiw-card {
  flex: 1;
  min-width: 220px;
  max-width: 320px;
  background: var(--cream);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
.hiw-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(61,26,14,.12);
}
.hiw-num {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 2rem;
  height: 2rem;
  background: var(--burg);
  color: var(--white);
  border-radius: var(--r-lg) 0 var(--r) 0;
  font-size: .82rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hiw-icon {
  font-size: 2.5rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(61,26,14,.15));
}
.hiw-content h3 {
  font-size: 1rem;
  font-weight: 900;
  color: var(--brown);
  margin-bottom: .35rem;
}
.hiw-content p {
  font-size: .87rem;
  color: var(--brown-2);
  line-height: 1.6;
}

/* ════════════════════════════════════════
   ADENSE SLOTS
════════════════════════════════════════ */
.ad-slot { text-align: center; overflow: hidden; }
.ad-label { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: var(--brown-3); font-weight: 700; display: block; margin-bottom: .3rem; }
.ad-slot-top     { padding: 1.25rem 0; background: var(--white); border-bottom: 1px solid var(--border); }
.ad-slot-inline  { padding: 1.25rem 0; }
.ad-slot-sidebar { margin-bottom: 1.3rem; }
/* Hide AdSense placeholder slots when no publisher ID set */
.ad-slot-placeholder { display: none !important; }

/* ════════════════════════════════════════
   WOOCOMMERCE OVERRIDES (consistent with theme)
════════════════════════════════════════ */
.woocommerce-notices-wrapper { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.woocommerce-message, .woocommerce-info {
  background: var(--mint-light) !important;
  border-color: var(--mint-dark) !important;
  color: var(--brown) !important;
  border-radius: var(--r) !important;
  font-family: var(--font) !important;
}
.woocommerce-error {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #991b1b !important;
  border-radius: var(--r) !important;
  font-family: var(--font) !important;
}
/* ── WooCommerce shop loop — uses hp-card design (content-product.php) ── */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.4rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}
/* li.product inherits all hp-card styles — no overrides needed */
.woocommerce ul.products li.product {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}
/* WC global button (checkout, cart etc) */
.woocommerce #respond input#submit,
.woocommerce a.button:not(.hp-btn),
.woocommerce button.button:not(.hp-btn),
.woocommerce input.button:not(.hp-btn) {
  background: var(--burg) !important; color: var(--white) !important;
  font-family: var(--font) !important; font-weight: 800 !important;
  border-radius: var(--r-pill) !important; border: none !important;
  padding: .6rem 1.2rem !important; font-size: .82rem !important;
  transition: background .2s !important; cursor: pointer !important;
  display: inline-block !important;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea {
  border: 2px solid var(--border) !important; border-radius: var(--r) !important;
  font-family: var(--font) !important; padding: .7rem 1rem !important;
}
.woocommerce form .form-row input.input-text:focus { border-color: var(--burg) !important; box-shadow: 0 0 0 3px var(--burg-muted) !important; outline: none !important; }
.woocommerce div.product .product_title { font-family: var(--font) !important; font-weight: 900 !important; }
.woocommerce div.product p.price { color: var(--burg) !important; font-family: var(--font) !important; font-weight: 900 !important; font-size: 1.8rem !important; }
.woocommerce table.shop_table { border: 2px solid var(--border) !important; border-radius: var(--r) !important; font-family: var(--font) !important; }
.woocommerce table.shop_table th { font-family: var(--font) !important; font-weight: 800 !important; background: var(--cream-2) !important; border-color: var(--border) !important; }
.woocommerce table.shop_table td { border-color: var(--border-2) !important; font-family: var(--font) !important; }
.woocommerce .cart_totals { background: var(--white) !important; border: 2px solid var(--border) !important; border-radius: var(--r-lg) !important; padding: 1.5rem !important; }
.woocommerce .order-total td strong { color: var(--burg) !important; font-size: 1.3rem !important; }
.woocommerce .star-rating span::before, .woocommerce p.stars a::before { color: var(--pink) !important; }
/* PAGINATION */
.woocommerce nav.woocommerce-pagination ul {
  display: flex !important; gap: .4rem !important; justify-content: center !important;
  border: none !important; white-space: normal !important;
}
.woocommerce nav.woocommerce-pagination ul li { border: none !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; border-radius: var(--r) !important;
  border: 2px solid var(--border) !important; font-family: var(--font) !important;
  font-weight: 800 !important; font-size: .86rem !important; color: var(--brown-2) !important;
  background: var(--white) !important; transition: all .2s !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--burg) !important; color: var(--burg) !important; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--burg) !important; border-color: var(--burg) !important; color: var(--white) !important; }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
#site-footer { background: var(--footer-bg); }
.footer-top { padding: 4rem 20px 3rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.footer-brand h3 { font-size: 1.2rem; font-weight: 900; color: var(--white); margin-bottom: .65rem; }
.footer-brand p   { font-size: .84rem; color: rgba(255,255,255,.7); line-height: 1.7; margin-bottom: 1.1rem; }
.footer-social { display: flex; gap: .55rem; flex-wrap: wrap; }
.footer-pinterest-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  background: #E60023;
  color: #fff !important;
  border-radius: var(--r-pill);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  transition: background .2s, transform .15s;
  border: none;
}
.footer-pinterest-btn:hover {
  background: #c0001d;
  transform: translateY(-1px);
  color: #fff !important;
}
.footer-pinterest-btn svg { flex-shrink: 0; }
.footer-col-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; color: rgba(255,255,255,.88); margin-bottom: 1.1rem; }
.footer-links { display: flex; flex-direction: column; gap: .5rem; }
.footer-links a { font-size: .84rem; color: rgba(255,255,255,.72); transition: color .2s; }
.footer-links a:hover { color: var(--white); }
.footer-contact-item { display: flex; gap: .55rem; margin-bottom: .65rem; align-items: flex-start; }
.footer-contact-item .icon { font-size: .9rem; opacity: .55; flex-shrink: 0; margin-top: .1rem; }
.footer-contact-item a, .footer-contact-item span { font-size: .84rem; color: rgba(255,255,255,.72); }
.footer-contact-item a:hover { color: var(--white); }
.footer-bottom p    { font-size: .76rem; color: rgba(255,255,255,.6); }
.footer-bottom-links { display: flex; gap: 1.1rem; }
.footer-bottom-links a { font-size: .76rem; color: rgba(255,255,255,.65); }
.footer-bottom-links a:hover { color: rgba(255,255,255,.9); }

/* ════════════════════════════════════════
   UTILS
════════════════════════════════════════ */
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ════════════════════════════════════════
   RESPONSIVE — DESKTOP UNLOCKS
════════════════════════════════════════ */
@media (min-width: 860px) {
  .header-search { display: block; }
  .header-nav    { display: flex; }
  .hamburger     { display: none; }
  .mobile-nav    { display: none !important; }
  .header-browse { display: none; }
}

/* ════════════════════════════════════════
   RESPONSIVE — TABLET  (≤1100px)
════════════════════════════════════════ */
@media (max-width: 1100px) {
  .products-grid    { grid-template-columns: repeat(2,1fr); }
  .products-grid-3  { grid-template-columns: repeat(2,1fr); }
  .benefits-grid    { grid-template-columns: repeat(2,1fr); }
  .stats-grid       { grid-template-columns: repeat(2,1fr); }
  .footer-grid      { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .shop-layout      { grid-template-columns: 200px 1fr; }
  .product-single-grid { gap: 2.5rem; }
  .hp-products-grid { grid-template-columns: repeat(2,1fr); }
  .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; }
  /* Sidebar narrows on tablet but stays visible */
  .fp2-layout { grid-template-columns: 1fr 270px; gap: 1.75rem; }
}

/* ════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤860px)
════════════════════════════════════════ */
@media (max-width: 860px) {

  /* ── Wrap / global ── */
  .wrap { padding-left: 16px; padding-right: 16px; }
  .section { padding: 3rem 0; }
  .page-hero { padding: 2rem 16px; }

  /* ── Header ── */
  .header-inner { padding: 0 16px; }

  /* ── Hero ── */
  .hero { padding: 2.5rem 16px 3rem; }
  .hero-title { font-size: 1.75rem; letter-spacing: -.01em; line-height: 1.2; }
  .hero-sub { font-size: .92rem; }
  .hero-badges { gap: .4rem; }
  .hero-badge { font-size: .68rem; padding: .22rem .65rem; }
  .hero-btns { flex-direction: column; align-items: center; gap: .75rem; }
  .hero-btns .btn { width: 100%; max-width: 320px; justify-content: center; }
  .hero-stats { padding: .8rem 1rem; gap: 0; }
  .hero-stat { padding: 0 .65rem; }
  .hero-stat strong { font-size: 1.1rem; }
  .hero-stat span { font-size: .6rem; }
  .hero-floats { display: none; }

  /* ── Cards — 2 per row ── */
  .products-grid, .products-grid-3,
  .hp-products-grid { grid-template-columns: repeat(2,1fr); gap: 1rem; }
  .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; gap: 1rem !important; }
  .hp-card-title { font-size: .88rem; }
  .hp-btn { font-size: .72rem; padding: .5rem .4rem; }
  .hp-card-body { padding: .85rem .9rem .9rem; }
  .hp-card-meta { font-size: .65rem; }

  /* ── Benefits ── */
  .benefits-grid, .centered-cards-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
  .centered-cards-grid--2col { grid-template-columns: 1fr; }

  /* ── Stats ── */
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 1rem; }

  /* ── Free pattern archive grid ── */
  .fp-archive-grid { grid-template-columns: repeat(2,1fr) !important; gap: 1rem !important; }
  .fp-archive-card { border-radius: 14px; }

  /* ── Free pattern single page ── */
  .fp2-layout { grid-template-columns: 1fr; }
  .fp2-sidebar { display: none; }
  .fp2-header { padding: 2.5rem 16px 2rem; }
  .fp2-title { font-size: 1.55rem; }
  .fp2-stats-bar { gap: .5rem; font-size: .78rem; }
  .fp2-action-strip { gap: .35rem; }
  .fp2-act-btn { font-size: .72rem; padding: .38rem .7rem; }
  .fp2-attr-cards { grid-template-columns: 1fr; }
  .fp2-progress-photos { grid-template-columns: repeat(2,1fr); }
  .fp2-gallery { grid-template-columns: 1fr; }
  .fp2-gallery-thumbs { grid-template-columns: repeat(3,1fr); }
  .fp2-related-grid { grid-template-columns: 1fr; }
  .fp2-body { padding: 0 16px; }

  /* ── FAQ ── */
  .faq-two-col { display: block !important; }
  .faq-two-col > * { margin-bottom: 2.5rem; }

  /* ── Single product ── */
  .product-single-grid { grid-template-columns: 1fr; gap: 2rem; }
  .product-gallery-wrap { position: static; }
  .product-meta-grid { grid-template-columns: 1fr 1fr; }

  /* ── Shop ── */
  .shop-layout { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 0 3rem; }
  .shop-sidebar { display: none; }
  .shop-topbar { flex-direction: column; align-items: flex-start; gap: .5rem; }

  /* ── Cart ── */
  .cart-layout { grid-template-columns: 1fr; }
  .cart-table thead { display: none; }
  .cart-table td { display: block; padding: .5rem 0; border: none; }
  .cart-table tr { border-bottom: 1px solid var(--border); padding: .75rem 0; display: block; }

  /* ── Newsletter ── */
  .newsletter-inner { grid-template-columns: 1fr; gap: 2rem; }
  .nl-row { grid-template-columns: 1fr; }
  .newsletter-sec { padding: 3rem 16px; }
  .nl-form { padding: 1.5rem; }

  /* ── About / Contact ── */
  .about-intro-grid { grid-template-columns: 1fr; }
  .about-visual { display: none; }
  .contact-grid { grid-template-columns: 1fr; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-top { padding: 2.5rem 16px 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; gap: .5rem; }

  /* ── How it works ── */
  .hiw-cards { flex-direction: column; gap: 1.5rem; }
  .hiw-card { max-width: 420px; margin: 0 auto; }
}

/* ════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE  (≤540px)
════════════════════════════════════════ */
@media (max-width: 540px) {
  .hero-title { font-size: 1.5rem; }
  .hero-stats-wrap { margin-top: 1.5rem; }
  .hero-stats { flex-wrap: wrap; justify-content: center; gap: 0; }
  .hero-stat { border-right: none; padding: .5rem .75rem; }

  /* ── Cards — 1 per row on very small screens ── */
  .hp-products-grid { grid-template-columns: 1fr; }
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
  .fp-archive-grid { grid-template-columns: 1fr !important; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .product-meta-grid { grid-template-columns: 1fr; }

  /* ── Free pattern single ── */
  .fp2-gallery-thumbs { grid-template-columns: repeat(2,1fr); }
  .fp2-progress-photos { grid-template-columns: 1fr; }
  .fp2-header-badges { gap: .3rem; }
  .fp2-hbadge { font-size: .64rem; }
  .fp2-title { font-size: 1.3rem; }

  /* ── Sections ── */
  .section { padding: 2.5rem 0; }
  .sec-title { font-size: 1.5rem; }
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

:focus-visible { outline: 3px solid var(--burg); outline-offset: 3px; border-radius: 4px; }


/* ════════════════════════════════════════
   ADDITIONS v3.3
════════════════════════════════════════ */

/* ── Hide AdSense placeholder when no publisher ID ── */
.ad-slot-placeholder { display: none !important; }

/* ── info-card extras ── */
.info-card-icon  { font-size: 2.4rem; line-height: 1; }
.info-card-title { font-size: 1rem; font-weight: 900; color: var(--brown); margin: 0; }
.info-card-text  { font-size: .87rem; color: var(--brown-2); line-height: 1.7; margin: 0; }

/* ── STEPS STACK — 1 card above the next, centered ── */
.steps-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 560px;
  margin: 0 auto;
}
.step-item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}
.step-num {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--burg);
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(123,28,58,.2);
}
.step-body {
  background: var(--cream-2);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.2rem 1.4rem;
  flex: 1;
  transition: transform .2s;
}
.step-item:nth-child(2) .step-body { background: var(--mint-light); border-color: var(--mint); }
.step-item:nth-child(3) .step-body { background: var(--pink-light); border-color: var(--pink-light); }
.step-item:hover .step-body { transform: translateX(4px); }
.step-icon  { font-size: 1.6rem; line-height: 1; margin-bottom: .3rem; }
.step-title { font-size: .98rem; font-weight: 900; color: var(--brown); }
.step-text  { font-size: .87rem; color: var(--brown-2); line-height: 1.65; margin-top: .25rem; }

/* ── Product card: full card clickable ── */
.product-card { cursor: pointer; }
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

/* sec-sub — centered via primary definition above */

/* ── Trust badges row (product page) ── */
.trust-badges-row {
  display: flex; gap: .65rem; flex-wrap: wrap;
  padding: .9rem 1rem;
  background: var(--cream-2);
  border-radius: var(--r);
  border: 1.5px solid var(--border);
}
.trust-badge { display: flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; color: var(--brown-2); }
.trust-badge .t-icon { font-size: .95rem; }

/* ── Reviews grid ── */
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; }
.product-review-card { background: var(--white); border: 2px solid var(--border); border-radius: var(--r-lg); padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.review-stars { color: #B45309; font-size: 1rem; }
.review-author { font-size: .78rem; font-weight: 800; color: var(--brown-3); }
.review-text   { font-size: .88rem; color: var(--brown-2); line-height: 1.65; }
.review-verified { font-size: .7rem; color: var(--success); font-weight: 700; }
@media (max-width: 860px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ── policy pages ── */
.policy-body { max-width: 820px; margin: 0 auto; padding: 4rem 20px 5rem; }
.policy-body h2 { font-size: 1.1rem; margin: 2rem 0 .75rem; padding-bottom: .5rem; border-bottom: 2px solid var(--border); }
.policy-body p  { color: var(--brown-2); line-height: 1.8; margin-bottom: .9rem; font-size: .93rem; }
.policy-body ul { margin: .5rem 0 1rem 1.2rem; list-style: disc; }
.policy-body ul li { color: var(--brown-2); font-size: .91rem; line-height: 1.75; }
.policy-body a  { color: var(--burg); font-weight: 700; }
.policy-summary { background: var(--mint-light); border: 2px solid var(--mint); border-radius: var(--r-lg); padding: 1.2rem 1.5rem; margin-bottom: 2rem; }
.policy-summary p { margin: 0; font-size: .92rem; color: var(--brown); }

/* ── star display ── */
.star-display { display: flex; align-items: center; gap: .3rem; }
.star-display .stars { color: #B45309; font-size: .95rem; }
.star-display .count { font-size: .8rem; color: var(--brown-3); font-weight: 600; }

/* ── Empty page notice ── */
.content-empty-notice { background: var(--mint-light); border: 2px dashed var(--mint-dark); border-radius: var(--r-lg); padding: 3rem 2rem; text-align: center; max-width: 560px; margin: 4rem auto; }

/* ── Browse btn: hide on desktop ── */
@media (min-width: 860px) { .header-browse { display: none !important; } }

/* ── Mobile responsive ── */
@media (max-width: 860px) {
  .steps-stack { max-width: 100%; }
  .step-item { gap: 1rem; }
}
@media (max-width: 540px) {
  .products-grid, .products-grid-3 { grid-template-columns: 1fr; }
  /* hero-stats handled above */
}

/* benefit-icon alias */
.benefit-icon { font-size: 2.4rem; line-height: 1; }

/* ════════════════════════════════════════
   FREE PATTERN PAGES v3.4
════════════════════════════════════════ */

/* ── Floating decorations ── */
.fp-floats { position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0; }
@keyframes fpFloat { from{transform:translateY(0) rotate(-8deg);} to{transform:translateY(-18px) rotate(8deg);} }

/* ── Reveal on scroll ── */
.fp-reveal { opacity:0;transform:translateY(16px); }
.fp-reveal.visible { opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease; }

/* ── Fade in hero text ── */
@keyframes fadeInDown { from{opacity:0;transform:translateY(-14px);} to{opacity:1;transform:none;} }

/* ══ HERO ══ */
.fp-hero { background:var(--burg);padding:3rem 0 4rem;position:relative;overflow:hidden; }
.fp-hero-grid {
  display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start;
  position:relative;z-index:2;margin-top:1.5rem;
}
@media(max-width:860px){ .fp-hero-grid{grid-template-columns:1fr;gap:1.5rem;} }

/* Image */
.fp-hero-image { position:relative;border-radius:var(--r-lg);overflow:hidden; }
.fp-main-img { width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--r-lg); }
.fp-img-placeholder { aspect-ratio:4/3;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:6rem;opacity:.3;border-radius:var(--r-lg); }
.fp-img-badges { position:absolute;bottom:.75rem;left:.75rem;display:flex;gap:.4rem;flex-wrap:wrap; }

/* Badges */
.fp-badge { font-size:.7rem;font-weight:900;padding:.25rem .7rem;border-radius:var(--r-pill);white-space:nowrap; }
.fp-badge--free  { background:#166534;color:white; }
.fp-badge--pdf   { background:rgba(255,255,255,.2);color:white;border:1px solid rgba(255,255,255,.4); }
.fp-badge--made  { background:var(--pink);color:white; }
.fp-badge--diff  { color:white; }
.fp-badge--diff.beginner     { background:var(--success); }
.fp-badge--diff.intermediate { background:var(--brown-2); }
.fp-badge--diff.advanced     { background:var(--pink); }

/* Tags row */
.fp-tags { display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.75rem; }
.fp-tag { font-size:.72rem;font-weight:800;padding:.2rem .65rem;border-radius:var(--r-pill);background:rgba(255,255,255,.15);color:rgba(253,246,236,.9);border:1px solid rgba(255,255,255,.25); }
.fp-tag--diff { color:white; }
.fp-tag--diff.beginner     { background:var(--success); }
.fp-tag--diff.intermediate { background:var(--brown-2); }
.fp-tag--diff.advanced     { background:var(--pink); }

/* Hero info */
.fp-title { font-size:clamp(1.5rem,4vw,2.2rem);color:white;line-height:1.2;margin-bottom:.85rem; }
.fp-stat-bar { display:flex;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.1rem;align-items:center; }
.fp-stat-item { font-size:.82rem;color:rgba(253,246,236,.85);display:flex;align-items:center;gap:.3rem;font-weight:700; }
.fp-stars { color:#B45309;letter-spacing:.05em; }

/* Spec pills grid */
.fp-specs { display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1.2rem; }
@media(max-width:540px){ .fp-specs{grid-template-columns:repeat(2,1fr);} }
.fp-spec { background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--r);padding:.55rem .75rem; }
.fp-spec-label { display:block;font-size:.68rem;color:rgba(253,246,236,.82);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.15rem; }
.fp-spec-val   { display:block;font-size:.84rem;color:white;font-weight:800; }

/* Excerpt */
.fp-excerpt { color:rgba(253,246,236,.85);font-size:.92rem;line-height:1.75;margin-bottom:1.2rem; }
.fp-excerpt strong { color:white; }

/* Action buttons */
.fp-actions { display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem; }
.fp-cta-jump { animation:pulse 2.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.04);} }

/* Free notice */
.fp-free-notice {
  display:flex;gap:.75rem;align-items:flex-start;
  background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);
  border-radius:var(--r);padding:.9rem 1rem;font-size:.82rem;
  color:rgba(253,246,236,.85);
}
.fp-free-notice strong { color:white;display:block;margin-bottom:.15rem; }
.fp-free-notice p { margin:0;font-size:.79rem; }

/* ══ TABS ══ */
.fp-tabs-wrap { background:var(--white);border-bottom:2px solid var(--border);position:sticky;top:64px;z-index:90; }
.fp-tabs-nav  { display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch; }
.fp-tab {
  padding:.8rem 1.2rem;font-size:.84rem;font-weight:800;color:var(--brown-3);
  background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;
  white-space:nowrap;transition:color .2s,border-color .2s;font-family:var(--font);
}
.fp-tab:hover  { color:var(--burg); }
.fp-tab.active { color:var(--burg);border-bottom-color:var(--burg); }

/* ══ PANELS ══ */
.fp-body { padding:3rem 0 4rem; }
.fp-panel { display:none; }
.fp-panel.active { display:block; }

/* ══ TWO COL ══ */
.fp-two-col { display:grid;grid-template-columns:1fr 300px;gap:2.5rem;align-items:start; }
@media(max-width:1000px){ .fp-two-col{grid-template-columns:1fr;} }

/* ══ SIDEBAR CARDS ══ */
.fp-glance-card,.fp-jump-card,.fp-share-card,.fp-more-card {
  background:var(--white);border:2px solid var(--border);border-radius:var(--r-lg);
  padding:1.4rem;margin-bottom:1.2rem;
}
.fp-glance-card h4,.fp-jump-card h4,.fp-share-card h4,.fp-more-card h4 {
  font-size:.95rem;margin-bottom:.85rem;color:var(--brown);
}
.fp-glance-row { display:flex;justify-content:space-between;align-items:center;font-size:.84rem;padding:.4rem 0;border-bottom:1px solid var(--border-2); }
.fp-glance-row:last-child { border-bottom:none; }
.fp-glance-row span { color:var(--brown-3); }
.fp-glance-row strong { color:var(--brown); }

.fp-jump-card { background:var(--burg);border-color:var(--burg);text-align:center; }
.fp-jump-card h4 { color:white;font-size:1.05rem; }
.fp-jump-card p  { color:rgba(253,246,236,.8);font-size:.86rem;margin-bottom:1rem; }

.fp-share-btns { display:flex;gap:.5rem;flex-wrap:wrap; }
.fp-share-btn  { flex:1;text-align:center;padding:.5rem .6rem;border-radius:var(--r);font-size:.78rem;font-weight:800;text-decoration:none; }
.fp-share-pin  { background:#E60023;color:white; }
.fp-share-fb   { background:#1877F2;color:white; }

.fp-more-item { display:flex;align-items:center;gap:.65rem;padding:.6rem 0;border-bottom:1px solid var(--border-2);text-decoration:none;color:var(--brown); }
.fp-more-item:last-of-type { border-bottom:none; }
.fp-more-thumb { width:44px;height:44px;object-fit:cover;border-radius:8px;flex-shrink:0; }
.fp-more-thumb-ph { width:44px;height:44px;background:var(--cream-2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0; }
.fp-more-item span { font-size:.83rem;font-weight:700;line-height:1.35; }

/* ══ OVERLINE / SEC TITLE in pattern ══ */
.fp-overline { display:block;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--burg);margin-bottom:.4rem; }
.fp-sec-title { font-size:1.5rem;color:var(--brown);margin-bottom:1.4rem;line-height:1.2; }

/* ══ PROSE ══ */
.fp-prose { color:var(--brown-2);line-height:1.85;font-size:.95rem; }
.fp-prose p,.fp-prose-p { margin-bottom:1rem;color:var(--brown-2);font-size:.94rem;line-height:1.8; }

/* ══ LOVE BOX ══ */
.fp-love-box { background:var(--mint-light);border:2px solid var(--mint);border-radius:var(--r-lg);padding:1.5rem;margin:1.5rem 0; }
.fp-love-box h3 { font-size:.98rem;margin-bottom:.85rem; }
.fp-love-list { list-style:none;display:flex;flex-direction:column;gap:.45rem; }
.fp-love-list li { font-size:.88rem;color:var(--brown-2);line-height:1.6; }

/* ══ MISTAKES BOX ══ */
.fp-mistakes-box { background:var(--pink-light);border:2px solid var(--pink);border-radius:var(--r-lg);padding:1.5rem;margin:1.5rem 0; }
.fp-mistakes-box h3 { font-size:.98rem;margin-bottom:.85rem; }
.fp-mistakes-list { list-style:none;display:flex;flex-direction:column;gap:.7rem; }
.fp-mistakes-list li { font-size:.87rem;color:var(--brown-2);line-height:1.6;display:flex;gap:.55rem; }
.fp-x { color:var(--pink);font-weight:900;flex-shrink:0; }

/* ══ TIP BOX ══ */
.fp-tip-box { display:flex;gap:.75rem;align-items:flex-start;background:var(--cream-2);border:1.5px solid var(--border);border-radius:var(--r);padding:1rem 1.2rem;margin-top:1.2rem; }
.fp-tip-icon { font-size:1.5rem;flex-shrink:0; }
.fp-tip-box p { margin:0;font-size:.87rem;color:var(--brown-2);line-height:1.65; }

/* ══ MATERIALS ══ */
.fp-mat-section { margin-bottom:2rem; }
.fp-mat-heading { font-size:.95rem;font-weight:900;color:var(--brown);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem; }
.fp-mat-heading span { font-size:1.3rem; }
.fp-mat-grid { display:flex;flex-direction:column;gap:.7rem; }
.fp-mat-item { display:flex;gap:.9rem;align-items:flex-start;padding:.85rem 1rem;background:var(--cream-2);border:1.5px solid var(--border);border-radius:var(--r); }
.fp-mat-num  { width:28px;height:28px;background:var(--burg);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:900;flex-shrink:0; }
.fp-mat-item > div strong { display:block;font-size:.88rem;color:var(--brown);margin-bottom:.1rem; }
.fp-mat-item > div p { font-size:.8rem;color:var(--brown-3);margin:0; }

/* ══ ABBREVIATIONS ══ */
.fp-abbrev-intro { background:var(--cream-2);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.1rem 1.3rem;margin-bottom:2rem;font-size:.9rem;color:var(--brown-2);line-height:1.7; }
.fp-abbrev-grid  { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem; }
.fp-abbrev-item  { display:flex;align-items:baseline;gap:.65rem;background:var(--white);border:2px solid var(--border);border-radius:var(--r);padding:.75rem 1rem;transition:border-color .2s; }
.fp-abbrev-item:hover { border-color:var(--burg); }
.fp-abbrev-code { font-size:.88rem;font-weight:900;color:var(--burg);min-width:60px;flex-shrink:0; }
.fp-abbrev-desc { font-size:.84rem;color:var(--brown-2);line-height:1.4; }

/* stitch guide */
.fp-stitch-guide-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1rem; }
@media(max-width:860px){ .fp-stitch-guide-grid{grid-template-columns:repeat(2,1fr);} }
.fp-stitch-item { background:var(--cream-2);border:2px solid var(--border);border-radius:var(--r-lg);padding:1.2rem;text-align:center; }
.fp-stitch-icon { font-size:2rem;margin-bottom:.5rem; }
.fp-stitch-item h4 { font-size:.88rem;margin-bottom:.4rem; }
.fp-stitch-item p  { font-size:.8rem;color:var(--brown-2);line-height:1.6;margin:0; }

/* ══ PATTERN ROUNDS ══ */
.fp-pattern-header { margin-bottom:2rem; }
.fp-pattern-meta-bar { display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:var(--cream-2);border:1.5px solid var(--border);border-radius:var(--r);padding:.75rem 1.1rem;font-size:.84rem;font-weight:700;color:var(--brown-2);margin-top:.75rem; }
.fp-section-block { margin-bottom:2.5rem; }
.fp-section-title { font-size:1.05rem;font-weight:900;color:var(--white);background:var(--burg);padding:.7rem 1.2rem;border-radius:var(--r) var(--r) 0 0;display:flex;align-items:center;gap:.55rem;margin:0; }
.fp-section-badge { font-size:1rem; }
.fp-section-body  { background:var(--white);border:2px solid var(--border);border-top:none;border-radius:0 0 var(--r) var(--r);padding:.5rem 0; }
.fp-round-row { display:flex;align-items:baseline;gap:1rem;padding:.6rem 1.2rem;border-bottom:1px solid var(--border-2); }
.fp-round-row:last-child { border-bottom:none; }
.fp-round-label { font-size:.82rem;font-weight:900;color:var(--burg);min-width:70px;flex-shrink:0; }
.fp-round-text  { font-size:.9rem;color:var(--brown-2);line-height:1.55;font-family:var(--font); }
.fp-info-row { display:flex;gap:.65rem;padding:.6rem 1.2rem;background:var(--mint-light);font-size:.86rem;color:var(--brown-2);line-height:1.55;border-bottom:1px solid var(--mint); }
.fp-info-icon { flex-shrink:0; }

.fp-assembly-box { background:var(--cream-2);border:2px solid var(--border);border-radius:var(--r-lg);padding:1.5rem 1.8rem;margin-top:1.5rem; }
.fp-assembly-box h3 { font-size:1rem;margin-bottom:1rem; }
.fp-assembly-list { list-style:decimal;padding-left:1.4rem;display:flex;flex-direction:column;gap:.55rem; }
.fp-assembly-list li { font-size:.9rem;color:var(--brown-2);line-height:1.65; }

/* ══ TIPS GRID ══ */
.fp-tips-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem; }
@media(max-width:600px){ .fp-tips-grid{grid-template-columns:1fr;} }
.fp-tip-item { display:flex;gap:.75rem;align-items:flex-start;background:var(--cream-2);border:2px solid var(--border);border-radius:var(--r-lg);padding:1.1rem; }
.fp-tip-em  { font-size:1.5rem;flex-shrink:0;margin-top:.1rem; }
.fp-tip-item strong { display:block;font-size:.88rem;color:var(--brown);margin-bottom:.2rem; }
.fp-tip-item p { font-size:.83rem;color:var(--brown-2);line-height:1.6;margin:0; }

/* ══ RELATED ══ */
.fp-related { background:var(--cream-2);padding:4rem 0; }
.fp-related-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
@media(max-width:860px){ .fp-related-grid{grid-template-columns:1fr;} }
.fp-related-card { display:block;text-decoration:none;background:var(--white);border:2px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform .25s,box-shadow .25s;cursor:pointer; }
.fp-related-card:hover { transform:translateY(-5px);box-shadow:var(--shadow); }
.fp-related-card img { width:100%;aspect-ratio:4/3;object-fit:cover;display:block; }
.fp-related-ph { aspect-ratio:4/3;background:var(--cream-2);display:flex;align-items:center;justify-content:center;font-size:4rem;opacity:.25; }
.fp-related-info { padding:1.2rem; }
.fp-related-info h3 { font-size:.96rem;color:var(--brown);margin:.4rem 0 .4rem; }
.fp-related-info p  { font-size:.82rem;color:var(--brown-2);line-height:1.6;margin-bottom:.75rem; }
.fp-read-more { font-size:.82rem;font-weight:800;color:var(--burg); }

/* ══ SHOP CTA ══ */
.fp-shop-cta { background:var(--burg);padding:3.5rem 0; }

/* ══ ARCHIVE ══ */
.fp-archive-hero { background:var(--burg);padding:4rem 0 5rem;position:relative;overflow:hidden; }
.fp-archive-title { font-size:clamp(2rem,5vw,3rem);color:white;margin:.35rem 0 0; }
.fp-archive-grid  { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
@media(max-width:1000px){ .fp-archive-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .fp-archive-grid{grid-template-columns:1fr;} }

.fp-archive-card { background:var(--white);border:2px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s; }
.fp-archive-card:hover { transform:translateY(-6px);box-shadow:0 16px 40px rgba(61,26,14,.12); }
.fp-archive-img { position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,var(--cream-2) 0%,var(--cream) 100%); }
.fp-archive-img img { width:100%;height:100%;object-fit:cover;transition:transform .4s; }
.fp-archive-card:hover .fp-archive-img img { transform:scale(1.05); }
.fp-archive-ph { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:4rem;opacity:.25; }
.fp-archive-body { padding:1.35rem; }
.fp-archive-meta { display:flex;gap:.75rem;font-size:.75rem;color:var(--brown-3);font-weight:700;margin-bottom:.55rem;flex-wrap:wrap; }
.fp-archive-title-card { font-size:1rem;font-weight:900;color:var(--brown);margin-bottom:.5rem;line-height:1.35; }
.fp-archive-excerpt { font-size:.84rem;color:var(--brown-2);line-height:1.65;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.fp-archive-footer { display:flex;justify-content:space-between;align-items:center;padding-top:.75rem;border-top:1.5px solid var(--border); }
.fp-read-btn { font-size:.82rem;font-weight:800;color:var(--burg);letter-spacing:.01em; }
.fp-read-btn:hover { text-decoration:underline; }


/* homepage free patterns 4-col -> 2-col -> 1-col */
@media(max-width:1000px){ .fp-archive-grid[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important;} }
@media(max-width:540px){ .fp-archive-grid[style*="repeat(4"]{grid-template-columns:1fr!important;} }


/* ════════════════════════════════════════
   FREE PATTERN v4 — PatternObsession-style
   Single col, tabs, clean cards, great mobile
════════════════════════════════════════ */

/* ── PAGE ── */
.fp2-page { background: var(--cream); }

/* ── HERO BAND ── */
.fp2-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 75% 40%, rgba(255,255,255,.07) 0%, transparent 65%);
  pointer-events: none;
}
.fp2-header-top {
  position: relative;
  z-index: 2;
  text-align: center;
}
.fp2-header-badges {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.fp2-hbadge {
  font-size: .7rem;
  font-weight: 900;
  padding: .3rem .9rem;
  border-radius: var(--r-pill);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.fp2-hbadge--beginner     { background: #16a34a; color: #fff; }
.fp2-hbadge--intermediate { background: var(--brown-2); color: #fff; }
.fp2-hbadge--advanced     { background: var(--pink); color: #fff; }
.fp2-hbadge--time  { background: rgba(255,255,255,.15); color: rgba(253,246,236,.92); border: 1.5px solid rgba(255,255,255,.28); }
.fp2-hbadge--free  { background: #15803d; color: #fff; }
.fp2-hbadge--cat   { background: rgba(255,255,255,.15); color: white; border: 1.5px solid rgba(255,255,255,.3); text-decoration: none; transition: background .15s; }
.fp2-hbadge--cat:hover { background: rgba(255,255,255,.28); }

.fp2-stats-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.fp2-stat     { font-size: .85rem; color: rgba(253,246,236,.88); font-weight: 700; display: flex; align-items: center; gap: .3rem; }
.fp2-stat-div { color: rgba(255,255,255,.75); font-size: .7rem; }
.fp2-stars    { color: #B45309; letter-spacing: .04em; }

.fp2-action-strip {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  justify-content: center;
}
.fp2-act-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.2rem;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: .82rem;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.3);
  color: white;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, transform .15s;
  white-space: nowrap;
}
.fp2-act-btn:hover { background: rgba(255,255,255,.24); color: white; transform: translateY(-1px); }
.fp2-act-btn--primary {
  background: white;
  color: var(--burg);
  border-color: white;
  font-weight: 900;
}
.fp2-act-btn--primary:hover { background: var(--cream); color: var(--burg-dark); }

/* ── FLOATING EMOJIS ── */
.fp-floats { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
@keyframes fpFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-16px) rotate(8deg); }
  66%      { transform: translateY(6px) rotate(-5deg); }
}

/* ── TWO-COLUMN LAYOUT: article left + sidebar right ── */
.fp2-body   { max-width: 1240px; margin: 0 auto; padding: 2.5rem 20px 5rem; }

/* ── GALLERY ── */
.fp2-gallery { margin-bottom: 2rem; border-radius: var(--r-lg); overflow: hidden; background: var(--white); box-shadow: 0 4px 24px rgba(61,26,14,.08); }
.fp2-gallery-main {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--cream-2);
  overflow: hidden;
}
.fp2-main-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp2-img-ph   { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:6rem; opacity:.2; }
.fp2-gallery-badge {
  position: absolute;
  bottom: .9rem;
  left: .9rem;
  display: flex;
  gap: .4rem;
}
.fp2-gallery-badge span {
  background: rgba(0,0,0,.55);
  color: white;
  backdrop-filter: blur(6px);
  padding: .2rem .65rem;
  border-radius: var(--r-pill);
  font-size: .7rem;
  font-weight: 900;
}
.fp2-gallery-badge span:last-child { background: var(--burg); }
.fp2-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 3px;
  background: #000;
}
.fp2-gallery-thumb {
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: pointer;
  transition: opacity .2s;
}
.fp2-gallery-thumb:hover { opacity: .85; }
.fp2-gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.fp2-gallery-thumb--ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--cream-2);
  gap: .25rem;
}
.fp2-gallery-thumb--ph span { font-size: 1.8rem; opacity: .3; }
.fp2-gallery-thumb--ph small { font-size: .65rem; color: var(--brown-2); }

/* ── QUICK SPEC ICONS (PatternObsession 3-icon row) ── */
.fp2-attr-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 2rem;
}
.fp2-attr-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.4rem 1rem;
  text-align: center;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s;
}
.fp2-attr-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(61,26,14,.1);
  border-color: var(--burg);
}
.fp2-attr-card:nth-child(1) { background: var(--cream-2); }
.fp2-attr-card:nth-child(2) { background: #f0fdf4; border-color: #bbf7d0; }
.fp2-attr-card:nth-child(3) { background: #fdf2f8; border-color: #f5d0e8; }
.fp2-attr-icon       { font-size: 2.2rem; display: block; margin-bottom: .6rem; }
.fp2-attr-card-title { font-size: .92rem; font-weight: 900; color: var(--brown); margin-bottom: .35rem; }
.fp2-attr-card p     { font-size: .82rem; color: var(--brown-2); line-height: 1.6; margin: 0; }

/* ── TRUST PILLS ── */
.fp2-trust-bar {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2rem;
}
.fp2-trust-pill        { border-radius: var(--r-pill); padding: .22rem .8rem; font-size: .72rem; font-weight: 900; }
.fp2-trust-pill--green { background:#dcfce7; color:#15803d; }
.fp2-trust-pill--purple{ background:#f3e8ff; color:#7e22ce; }
.fp2-trust-pill--orange{ background:#fff7ed; color:#c2410c; }
.fp2-trust-pill--blue  { background:#dbeafe; color:#1d4ed8; }
.fp2-trust-pill--pink  { background:#fce7f3; color:#9d174d; }

/* ── TAB NAVIGATION ── */
.fp2-tab:last-child { border-right: none; }
.fp2-tab .fp2-tab-icon { font-size: 1.3rem; }
.fp2-tab:hover { background: var(--cream-2); color: var(--burg); }
.fp2-tab.active {
  background: var(--burg);
  color: white;
}
.fp2-tab.active:hover { background: var(--burg-dark); }

/* ── TAB PANELS ── */
.fp2-tab-panels { background: var(--white); border: 2px solid var(--border); border-top: none; border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 2rem 1.8rem; margin-bottom: 2.5rem; }
.fp2-panel { display: none; animation: fadeInUp .3s ease both; }
.fp2-panel.active { display: block; }

/* ── SECTION HEADINGS ── */
.fp2-sec-h::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  min-width: 20px;
}

/* ── PROSE ── */
.fp2-prose { color: var(--brown-2); line-height: 1.9; font-size: .97rem; }
.fp2-prose p { margin-bottom: 1.2rem; }
.fp2-prose p:last-child { margin-bottom: 0; }
.fp2-prose a { color: var(--burg); font-weight: 700; }
.fp2-prose strong { color: var(--brown); }

/* ── PROGRESS PHOTOS ── */
.fp2-prog-photo { display: flex; flex-direction: column; gap: .5rem; }
.fp2-prog-photo img { width:100%; aspect-ratio:1; object-fit:cover; border-radius: var(--r); display:block; }
.fp2-prog-ph {
  aspect-ratio: 1;
  background: var(--cream-2);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  font-size: 2.2rem;
  opacity: .45;
}
.fp2-prog-ph span { font-size: .75rem; color: var(--brown-2); opacity: 1; font-weight: 600; }
.fp2-prog-ph small { font-size: .65rem; color: var(--brown-3); }
.fp2-prog-caption { font-size: .72rem; color: var(--brown-2); font-weight: 600; text-align: center; line-height: 1.35; }

/* ── SPECS TABLE ── */
.fp2-specs-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.fp2-spec-row {
  background: var(--cream-2);
  border-radius: var(--r);
  padding: .7rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.fp2-spec-label { font-size: .68rem; font-weight: 900; color: var(--brown-2); text-transform: uppercase; letter-spacing: .06em; }
.fp2-spec-value { font-size: .9rem; font-weight: 800; color: var(--brown); }

/* ── MISTAKES ── */
.fp2-mistakes { display: flex; flex-direction: column; gap: .8rem; }
.fp2-mistake-row:hover { background: #fff1f2; transform: translateX(3px); }
.fp2-mistake-x  { color: #dc2626; font-size: 1rem; font-weight: 900; flex-shrink: 0; margin-top: .1rem; }
.fp2-mistake-row strong { display: block; font-size: .9rem; color: var(--brown); margin-bottom: .25rem; font-weight: 800; }
.fp2-mistake-row p { font-size: .85rem; color: var(--brown-2); line-height: 1.65; margin: 0; }

/* ── MATERIALS ── */
.fp2-mat-block { margin-bottom: 1.75rem; }
.fp2-mat-heading span { font-size: 1.2rem; }
.fp2-mat-list { display: flex; flex-direction: column; gap: .5rem; }
.fp2-mat-item:hover { border-color: var(--burg); }
.fp2-mat-item > div strong { display: block; font-size: .88rem; color: var(--brown); margin-bottom: .1rem; font-weight: 800; }
.fp2-mat-item > div p { font-size: .82rem; color: var(--brown-2); margin: 0; line-height: 1.55; }

/* ── ABBREVIATIONS ── */
.fp2-abbrev-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .45rem;
}
.fp2-abbrev-item:hover { border-color: var(--burg); background: var(--white); }
.fp2-abbrev-code { font-size: .84rem; font-weight: 900; color: var(--burg); min-width: 48px; flex-shrink: 0; }
.fp2-abbrev-sep  { font-size: .72rem; color: var(--brown-3); flex-shrink: 0; }
.fp2-abbrev-def  { font-size: .81rem; color: var(--brown-2); line-height: 1.35; }

/* ── PATTERN ROUNDS ── */
.fp2-pattern-header { margin-bottom: 1.5rem; text-align: center; }
.fp2-pattern-meta {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .75rem;
}
.fp2-pattern-meta span {
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  padding: .25rem .75rem;
  font-size: .76rem;
  font-weight: 700;
  color: var(--brown);
}
.fp2-print-btn:hover { background: var(--burg-dark); }

.fp2-round-block  { margin-bottom: 2.5rem; }
.fp2-round-badge { font-size: 1rem; }
.fp2-round-body  {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.fp2-round-row:last-child { border-bottom: none; }
.fp2-round-row:nth-child(even) { background: var(--cream); }
.fp2-round-row:hover { background: var(--cream-2); }
.fp2-round-label { font-size: .8rem; font-weight: 900; color: var(--burg); min-width: 72px; flex-shrink: 0; padding-top: .05rem; }
.fp2-round-text  { font-size: .9rem; color: var(--brown-2); line-height: 1.6; }
.fp2-note-row {
  display: flex;
  gap: .75rem;
  padding: .65rem 1.1rem;
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  align-items: flex-start;
}
.fp2-note-row:last-child { border-bottom: none; }
.fp2-note-icon { flex-shrink: 0; }
.fp2-note-row span:last-child { font-size: .87rem; color: var(--brown-2); line-height: 1.6; }
.fp2-assembly-row {
  display: flex;
  gap: .75rem;
  padding: .65rem 1.1rem;
  border-bottom: 1px solid var(--border-2);
  align-items: flex-start;
}
.fp2-asm-num { color: var(--success); font-weight: 900; flex-shrink: 0; }

/* ── AUTHOR CARD ── */
.fp2-author strong { display: block; font-size: .96rem; margin-bottom: .25rem; color: var(--brown); }
.fp2-author p { font-size: .84rem; color: var(--brown-2); line-height: 1.65; margin: 0 0 .5rem; }

/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; gap: .55rem; }
.faq-item.open {
  border-color: var(--burg);
  box-shadow: 0 4px 18px rgba(123,28,58,.1);
}
.faq-q:hover { color: var(--burg); background: var(--cream); }
.faq-item.open .faq-q { color: var(--burg); background: var(--cream-2); }
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  background: var(--burg);
  border-color: var(--burg);
  color: white;
}
.faq-item.open .faq-a { max-height: 900px; padding-bottom: 1.25rem; }
.faq-a p { margin: 0; }

/* ── SHARE BAR ── */
.fp2-share-bar p { font-size: .92rem; font-weight: 700; color: var(--brown); margin-bottom: 1rem; }
.fp2-share-btns { display: flex; gap: .65rem; justify-content: center; flex-wrap: wrap; }
.fp2-share-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }
.fp2-share-btn--pin  { background: #e60023; color: white; }
.fp2-share-btn--more { background: var(--burg); color: white; }

/* ── RELATED FREE PATTERNS ── */
.fp2-related { background: var(--cream-2); padding: 4rem 0; }
.fp2-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.fp2-rel-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 50px rgba(123,28,58,.14);
  border-color: var(--burg);
}
.fp2-rel-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--cream-2); }
.fp2-rel-img img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s; }
.fp2-rel-card:hover .fp2-rel-img img { transform: scale(1.07); }
.fp2-rel-ph  { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:4rem; opacity:.18; }
.fp2-rel-free {
  position: absolute;
  top: .6rem;
  left: .6rem;
  background: #15803d;
  color: white;
  font-size: .65rem;
  font-weight: 900;
  padding: .2rem .6rem;
  border-radius: var(--r-pill);
}
.fp2-rel-body { padding: 1.1rem 1.2rem; text-align: center; }
.fp2-rel-meta { display: block; font-size: .72rem; font-weight: 700; color: var(--brown-2); margin-bottom: .35rem; }
.fp2-rel-body h3 { font-size: .94rem; color: var(--brown); margin-bottom: .45rem; line-height: 1.3; font-weight: 800; }
.fp2-rel-cta  { font-size: .8rem; font-weight: 800; color: var(--burg); }

/* ── CTA BANNER ── */
.fp2-cta-banner { background: var(--burg); padding: 3.5rem 0; }

/* ── FP-REVEAL ANIMATIONS ── */
.fp-reveal.visible { opacity: 1; transform: none; }

/* Stagger on attr cards */
.fp2-attr-cards .fp2-attr-card:nth-child(1) { transition-delay: 0s; }
.fp2-attr-cards .fp2-attr-card:nth-child(2) { transition-delay: .1s; }
.fp2-attr-cards .fp2-attr-card:nth-child(3) { transition-delay: .2s; }

/* Stagger abbrev grid */
.fp2-abbrev-item:nth-child(n+2) { transition-delay: .03s; }
.fp2-abbrev-item:nth-child(n+4) { transition-delay: .06s; }
.fp2-abbrev-item:nth-child(n+6) { transition-delay: .09s; }

/* Stagger mistake rows */
.fp2-mistake-row:nth-child(n+2) { transition-delay: .05s; }
.fp2-mistake-row:nth-child(n+4) { transition-delay: .10s; }
.fp2-mistake-row:nth-child(n+6) { transition-delay: .15s; }

/* ── PROGRESS TRACKER ── */
.fp2-progress-tracker {
  background: var(--cream-2);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.fp2-progress-bar-wrap {
  background: var(--border);
  border-radius: var(--r-pill);
  height: 10px;
  overflow: hidden;
  margin: .75rem 0 .5rem;
}
.fp2-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--burg), var(--burg-light));
  border-radius: var(--r-pill);
  transition: width .5s cubic-bezier(.22,1,.36,1);
  width: 0%;
}
.fp2-progress-label { font-size: .78rem; font-weight: 700; color: var(--brown-2); text-align: right; }

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 700px) {
  .fp2-body { padding: 1.5rem 16px 4rem; }
  .fp2-title { font-size: 1.45rem; }
  .fp2-header { padding: 2rem 16px 2rem; }
  .fp2-stats-bar { gap: .5rem; font-size: .78rem; }
  .fp2-action-strip { gap: .35rem; }
  .fp2-act-btn { font-size: .72rem; padding: .4rem .75rem; }
  .fp2-attr-cards { grid-template-columns: 1fr; gap: .6rem; }
  .fp2-progress-photos { grid-template-columns: repeat(2,1fr); }
  .fp2-abbrev-grid { grid-template-columns: 1fr; }
  .fp2-specs-table { grid-template-columns: 1fr; }
  .fp2-tabs { flex-wrap: wrap; }
  .fp2-tab { flex: 1 1 30%; min-width: 80px; font-size: .72rem; padding: .65rem .35rem; }
  .fp2-tab-panels { padding: 1.25rem 1rem; }
  .fp2-round-row { gap: .5rem; padding: .6rem .75rem; }
  .fp2-round-label { min-width: 54px; font-size: .75rem; }
  .fp2-round-text  { font-size: .84rem; }
  .fp2-sec-h { font-size: 1.2rem; }
  .fp2-gallery-thumbs { grid-template-columns: repeat(2,1fr); }
  .fp2-related-grid { grid-template-columns: 1fr; gap: 1rem; }
  .fp2-author { flex-direction: column; align-items: center; text-align: center; }
  .fp2-prose { font-size: .93rem; }
  .fp2-mat-item { padding: .6rem .75rem; }
  .fp2-faq-q { font-size: .88rem; padding: .9rem 1rem; }
}

@media (max-width: 480px) {
  .fp2-progress-photos { grid-template-columns: repeat(2,1fr); }
  .fp2-specs-table { grid-template-columns: 1fr; }
  .fp2-header-badges { gap: .3rem; }
  .fp2-hbadge { font-size: .64rem; padding: .22rem .65rem; }
}

/* ── PRINT ── */
@media print {
  .fp-floats, .fp2-action-strip, .fp2-share-bar, .fp2-related, .fp2-cta-banner,
  .fp2-trust-bar, #site-header, footer, .fp2-tabs { display: none !important; }
  .fp2-body { padding: 0; max-width: 100%; }
  .fp2-panel { display: block !important; }
  .fp2-tab-panels { border: none; padding: 0; }
  .fp2-round-row { break-inside: avoid; }
}

/* ════════════════════════════════════════════════════════
   FREE PATTERN v4  ·  PatternObsession-inspired
   Single-column · Tabs · Card animations · Mobile-first
════════════════════════════════════════════════════════ */

/* ── PAGE SHELL ─────────────────────────────────────── */
.fp2-page { background: var(--cream); }

/* ── HERO BAND ──────────────────────────────────────── */
.fp2-header {
  background: var(--burg);
  padding: 2.5rem 0 2rem;
  position: relative;
  overflow: hidden;
  min-height: 200px; /* Reserve space before font loads — prevents CLS */
  contain: layout style; /* Isolate layout from rest of page */
}
.fp2-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 80% at 80% 30%, rgba(255,255,255,.07) 0%, transparent 70%);
  pointer-events: none;
}
.fp2-hero-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Breadcrumb */
.fp2-breadcrumb {
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  justify-content: center;
  flex-wrap: wrap;
}
.fp2-breadcrumb a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .15s; }
.fp2-breadcrumb a:hover { color: #fff; }
.fp2-breadcrumb span:last-child { color: rgba(255,255,255,.75); }

/* Pills */
.fp2-hero-pills {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1rem;
}
.fp2-pill {
  font-size: .68rem;
  font-weight: 900;
  padding: .28rem .85rem;
  border-radius: var(--r-pill);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.fp2-pill--green        { background: #15803d; color: #fff; }
.fp2-pill--beginner     { background: #16a34a; color: #fff; }
.fp2-pill--intermediate { background: #d97706; color: #fff; }
.fp2-pill--advanced     { background: #9d174d; color: #fff; }
.fp2-pill--time         { background: rgba(255,255,255,.15); color: rgba(253,246,236,.9); border: 1px solid rgba(255,255,255,.25); }
.fp2-pill--cat          { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); transition: background .15s; }
.fp2-pill--cat:hover    { background: rgba(255,255,255,.24); }

/* Title */
.fp2-title {
  font-size: clamp(1.55rem, 5vw, 2.6rem);
  color: #fff;
  font-weight: 900;
  line-height: 1.12;
  margin-bottom: .9rem;
  text-align: center;
}

/* Hero meta */
.fp2-hero-meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: .84rem;
  color: rgba(253,246,236,.85);
  margin-bottom: 1.2rem;
  font-weight: 700;
}
.fp2-stars    { color: #B45309; letter-spacing: .03em; }
.fp2-hero-sep { color: rgba(255,255,255,.55); }

/* Action buttons */
.fp2-hero-actions {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: center;
}
.fp2-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1.05rem;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: .78rem;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.28);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, transform .15s;
  white-space: nowrap;
  font-family: var(--font);
}
.fp2-hero-btn:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-1px); }
.fp2-hero-btn--primary { background: #fff; color: var(--burg); border-color: #fff; font-weight: 900; }
.fp2-hero-btn--primary:hover { background: var(--cream); color: var(--burg); }

/* ── FLOATING EMOJIS ──────────────────────────────── */
.fp-floats { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fp-float {
  position: absolute;
  left: var(--x, 10%);
  top: var(--y, 20%);
  font-size: 1.5rem;
  opacity: .35;
  
  animation: fpFloat 5.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes fpFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40%       { transform: translateY(-18px) rotate(8deg); }
  70%       { transform: translateY(7px) rotate(-5deg); }
}

/* ── BODY WRAPPER ─────────────────────────────────── */

/* ── ABOVE-FOLD BLOCK ─────────────────────────────── */
.fp2-above-fold { margin-bottom: 2.5rem; }

/* Hero image */
.fp2-hero-img-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--cream-2);
  margin-bottom: 1.25rem;
  box-shadow: 0 6px 30px rgba(61,26,14,.1);
}
.fp2-hero-img { width:100%; height:100%; object-fit:cover; display:block; }
.fp2-img-ph   { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:7rem; opacity:.2; }
.fp2-img-badges {
  position: absolute;
  bottom: .9rem;
  left: .9rem;
  display: flex;
  gap: .4rem;
}
.fp2-img-badges span {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .68rem;
  font-weight: 900;
  padding: .2rem .65rem;
  border-radius: var(--r-pill);
}
.fp2-img-badges span:last-child { background: var(--burg); }

/* 3 stat cards — PatternObsession exact style */
.fp2-stat-card.visible {
  opacity: 1;
  transform: none;
  transition: opacity .5s cubic-bezier(.22,1,.36,1) calc(var(--i,1) * 90ms),
              transform .5s cubic-bezier(.22,1,.36,1) calc(var(--i,1) * 90ms),
              box-shadow .3s, border-color .25s;
}
.fp2-stat-card:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(61,26,14,.12); border-color: var(--burg); }
.fp2-stat-card:nth-child(1) { background: var(--cream-2); }
.fp2-stat-card:nth-child(2) { background: #f0fdf4; border-color: #bbf7d0; }
.fp2-stat-card:nth-child(3) { background: #fdf2f8; border-color: #f5d0e8; }
.fp2-stat-card-icon { font-size: 2.4rem; display: block; margin-bottom: .65rem; }
.fp2-stat-card h3, .fp2-stat-card-label { font-size: .95rem; font-weight: 900; color: var(--brown); margin-bottom: .4rem; line-height: 1.2; }
.fp2-stat-card p  { font-size: .8rem; color: var(--brown-2); line-height: 1.6; margin: 0; }

/* 4 progress photos */
.fp2-progress-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
}
.fp2-prog-item { display: flex; flex-direction: column; gap: .4rem; }
.fp2-prog-item img { width:100%; aspect-ratio:1; object-fit:cover; border-radius: var(--r); display:block; }
.fp2-prog-ph { aspect-ratio:1; background:var(--cream-2); border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:2rem; opacity:.4; }
.fp2-prog-item span { font-size: .67rem; color: var(--brown-2); font-weight: 600; text-align: center; line-height: 1.3; }

/* ── SECTIONS ─────────────────────────────────────── */
.fp2-section { margin-bottom: 3rem; }
.fp2-sec-h {
  font-size: 1.4rem;
  color: var(--brown);
  font-weight: 900;
  margin-bottom: 1.2rem;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.fp2-sec-h::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  min-width: 20px;
}

/* Prose */
.fp2-prose { color: var(--brown-2); line-height: 1.88; font-size: .97rem; }
.fp2-prose p { margin-bottom: 1.15rem; }
.fp2-prose p:last-child { margin-bottom: 0; }
.fp2-prose a { color: var(--burg); font-weight: 700; }
.fp2-prose strong { color: var(--brown); }
.fp2-prose em { color: var(--brown); }

/* Mistakes */
.fp2-mistakes { display: flex; flex-direction: column; gap: .7rem; }
.fp2-mistake-row {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: #fff8f8;
  border: 1.5px solid #fecdd3;
  border-radius: var(--r);
  padding: .9rem 1rem;
  transition: background .2s, transform .22s;
  
}
.fp2-mistake-row:hover { background: #fff1f2; transform: translateX(4px); }
.fp2-mistake-x { color: #dc2626; font-size: 1rem; font-weight: 900; flex-shrink: 0; margin-top: .1rem; }
.fp2-mistake-row strong { display:block; font-size:.9rem; color:var(--brown); margin-bottom:.22rem; font-weight:800; }
.fp2-mistake-row p { font-size:.84rem; color:var(--brown-2); line-height:1.65; margin:0; }

/* Author */
.fp2-author {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
.fp2-author-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  flex-shrink: 0;
  border: 2px solid var(--border);
}
.fp2-author strong { display:block; font-size:.95rem; margin-bottom:.25rem; color:var(--brown); }
.fp2-author p { font-size:.83rem; color:var(--brown-2); line-height:1.65; margin:0 0 .45rem; }
.fp2-author a { font-size:.8rem; font-weight:800; color:var(--burg); text-decoration:none; }
.fp2-author a:hover { text-decoration:underline; }

/* ── TABS ─────────────────────────────────────────── */
.fp2-tabs-wrap {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.fp2-tabs {
  display: flex;
  background: var(--cream-2);
  border-bottom: 2px solid var(--border);
}
.fp2-tab {
  flex: 1;
  padding: .9rem .5rem;
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  font-family: var(--font);
  font-size: .76rem;
  font-weight: 800;
  color: var(--brown-2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  transition: background .2s, color .2s;
  text-align: center;
  line-height: 1.2;
}
.fp2-tab:last-child { border-right: none; }
.fp2-tab-icon { font-size: 1.25rem; }
.fp2-tab:hover { background: #fff; color: var(--burg); }
.fp2-tab.active { background: var(--burg); color: #fff; }
.fp2-tab.active:hover { background: var(--burg-dark,#6e1a36); }

/* Panels */
.fp2-panel { display: none; padding: 2rem; animation: fpPanelIn .28s ease both; }
.fp2-panel.active { display: block; }
@keyframes fpPanelIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.fp2-panel-h { font-size: 1.15rem; font-weight: 900; color: var(--brown); margin-bottom: 1.25rem; }

/* Info blocks */
.fp2-info-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-top: 1.5rem;
}
.fp2-info-block {
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: .75rem 1rem;
}
.fp2-info-block h4 { font-size: .7rem; font-weight: 900; color: var(--brown-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; }
.fp2-info-block p  { font-size: .86rem; font-weight: 700; color: var(--brown); margin: 0; }

/* Materials */
.fp2-mat-block { margin-bottom: 1.6rem; }
.fp2-mat-heading {
  font-size: .8rem;
  font-weight: 900;
  color: var(--brown-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.fp2-mat-heading span { font-size: 1.1rem; }
.fp2-mat-list { display: flex; flex-direction: column; gap: .45rem; }
.fp2-mat-item {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: .7rem .95rem;
  transition: border-color .2s;
}
.fp2-mat-item:hover { border-color: var(--burg); }
.fp2-mat-num {
  background: var(--burg);
  color: #fff;
  font-size: .66rem;
  font-weight: 900;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: .05rem;
}
.fp2-mat-item > div strong { display:block; font-size:.87rem; color:var(--brown); font-weight:800; margin-bottom:.1rem; }
.fp2-mat-item > div p { font-size:.81rem; color:var(--brown-2); margin:0; line-height:1.5; }

/* Abbreviations */
.fp2-abbrev-note {
  font-size: .84rem;
  color: var(--brown-2);
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: var(--r);
  padding: .65rem 1rem;
  margin-bottom: 1.1rem;
}
.fp2-abbrev-list { display: flex; flex-direction: column; gap: .4rem; }
.fp2-abbrev-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: .55rem .95rem;
  transition: border-color .2s, background .18s;
}
.fp2-abbrev-item:hover { border-color: var(--burg); background: #fff; }
.fp2-abbrev-num  { font-size: .66rem; font-weight: 900; color: var(--white); background: var(--burg); min-width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fp2-abbrev-code { font-size: .86rem; font-weight: 900; color: var(--burg); min-width: 54px; flex-shrink: 0; }
.fp2-abbrev-sep  { color: var(--brown-3,#c8b09a); font-size: .78rem; }
.fp2-abbrev-def  { font-size: .83rem; color: var(--brown-2); line-height: 1.35; }

/* Pattern rounds */
.fp2-pattern-top { margin-bottom: 1.5rem; }
.fp2-pattern-pills {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.fp2-pattern-pills span {
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  padding: .22rem .75rem;
  font-size: .74rem;
  font-weight: 700;
  color: var(--brown);
}
.fp2-print-btn {
  background: var(--burg);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: .28rem .9rem;
  font-family: var(--font);
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s;
}
.fp2-print-btn:hover { background: var(--burg-dark,#6e1a36); }

.fp2-round-block { margin-bottom: 2.25rem; }
.fp2-round-heading {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1rem;
  font-weight: 900;
  color: var(--brown);
  margin-bottom: .75rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--border);
}
.fp2-round-body { background: var(--white); border: 2px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.fp2-round-row:last-child { border-bottom: none; }
.fp2-round-row:nth-child(even) { background: var(--cream); }
.fp2-round-row:hover { background: var(--cream-2); }
.fp2-round-lbl { font-size: .78rem; font-weight: 900; color: var(--burg); min-width: 68px; flex-shrink: 0; padding-top: .05rem; }
.fp2-round-txt { font-size: .88rem; color: var(--brown-2); line-height: 1.6; }
.fp2-note-row { display:flex; gap:.65rem; padding:.6rem 1.1rem; background:#fffbeb; border-bottom:1px solid #fde68a; align-items:flex-start; font-size:.86rem; color:var(--brown-2); line-height:1.6; }
.fp2-note-row:last-child { border-bottom:none; }
.fp2-asm-row { display:flex; gap:.65rem; padding:.6rem 1.1rem; border-bottom:1px solid var(--border); align-items:flex-start; font-size:.86rem; color:var(--brown-2); line-height:1.6; }
.fp2-asm-row:last-child { border-bottom:none; }
.fp2-asm-tick { color:var(--success); font-weight:900; flex-shrink:0; }

/* Notes panel */
.fp2-notes-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.75rem; }
.fp2-note-card {
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 1rem 1.1rem;
  transition: border-color .2s;
}
.fp2-note-card:hover { border-color: var(--burg); }
.fp2-note-card h4 { font-size: .88rem; font-weight: 900; color: var(--brown); margin-bottom: .3rem; }
.fp2-note-card p  { font-size: .84rem; color: var(--brown-2); line-height: 1.65; margin: 0; }

.fp2-important-notes {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: var(--r-lg);
  padding: 1.1rem 1.25rem;
}
.fp2-imp-heading { font-size: .9rem; font-weight: 900; color: var(--brown); margin-bottom: .65rem; }
.fp2-important-notes ul { padding-left: 1.2rem; margin: 0; }
.fp2-important-notes li { font-size: .84rem; color: var(--brown-2); line-height: 1.7; margin-bottom: .3rem; }
.fp2-important-notes li:last-child { margin-bottom: 0; }

/* ── FAQ ──────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: .55rem; }
.faq-item {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s;
}
.faq-item.open { border-color: var(--burg); box-shadow: 0 4px 18px rgba(123,28,58,.1); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  font-family: var(--font);
  padding: 1.05rem 1.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: .93rem;
  font-weight: 800;
  color: var(--brown);
  text-align: left;
  gap: 1rem;
  transition: color .18s, background .18s;
  line-height: 1.4;
}
.faq-q:hover { color: var(--burg); background: var(--cream); }
.faq-item.open .faq-q { color: var(--burg); background: var(--cream-2); }
.faq-chevron {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .58rem;
  color: var(--brown-2);
  transition: transform .3s cubic-bezier(.22,1,.36,1), background .22s, border-color .22s, color .22s;
  
}
.faq-item.open .faq-chevron { transform: rotate(180deg); background: var(--burg); border-color: var(--burg); color: #fff; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .42s cubic-bezier(.22,1,.36,1), padding .3s;
  padding: 0 1.3rem;
  font-size: .88rem;
  color: var(--brown-2);
  line-height: 1.82;
}
.faq-item.open .faq-a { max-height: 800px; padding-bottom: 1.2rem; }
.faq-a p { margin: 0; }

/* ── SHARE BAR ────────────────────────────────────── */
.fp2-share-bar {
  background: linear-gradient(135deg, var(--cream-2), #fdf3fb);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  text-align: center;
  margin-top: 2.5rem;
}
.fp2-share-bar p { font-size: .9rem; font-weight: 700; color: var(--brown); margin-bottom: .9rem; }
.fp2-share-btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.fp2-share-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.3rem;
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: .82rem;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
  
}
.fp2-share-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }
.fp2-share-btn--pin  { background: #e60023; color: #fff; }
.fp2-share-btn--more { background: var(--burg); color: #fff; }

/* ── FP-REVEAL — composited, no layout thrash ────── */
.fp-reveal {
  opacity: 0;
  
  transform: translateY(20px);
  transition: opacity .5s cubic-bezier(.22,1,.36,1),
              transform .5s cubic-bezier(.22,1,.36,1);
}
.fp-reveal.visible { opacity: 1; transform: none; }

/* stagger for above-fold reveals */
.fp2-hero-img-wrap { transition-delay: 0s; }
.fp2-stat-cards .fp2-stat-card:nth-child(1) { --i:1; }
.fp2-stat-cards .fp2-stat-card:nth-child(2) { --i:2; }
.fp2-stat-cards .fp2-stat-card:nth-child(3) { --i:3; }

/* ── RELATED ──────────────────────────────────────── */
.fp2-related { background: var(--cream-2); padding: 3.5rem 0; }
.fp2-related-inner { max-width: 860px; margin: 0 auto; padding: 0 20px; }
.fp2-related-title { font-size: 1.3rem; font-weight: 900; color: var(--brown); text-align: center; margin-bottom: 1.5rem; }
.fp2-related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.fp2-rel-card {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  border: 2px solid var(--border);
  display: block;
  
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .22s;
}
.fp2-rel-card:hover { transform: translateY(-7px); box-shadow: 0 18px 45px rgba(123,28,58,.14); border-color: var(--burg); }
.fp2-rel-img { position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--cream-2); }
.fp2-rel-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.fp2-rel-card:hover .fp2-rel-img img { transform: scale(1.06); }
.fp2-rel-ph  { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:4rem; opacity:.18; }
.fp2-rel-badge {
  position:absolute; top:.6rem; left:.6rem;
  background:#15803d; color:#fff;
  font-size:.62rem; font-weight:900;
  padding:.18rem .6rem; border-radius:var(--r-pill);
}
.fp2-rel-body { padding: 1rem 1.1rem; text-align: center; }
.fp2-rel-meta { display:block; font-size:.71rem; font-weight:700; color:var(--brown-2); margin-bottom:.3rem; }
.fp2-rel-body h3 { font-size:.92rem; color:var(--brown); margin-bottom:.4rem; line-height:1.3; font-weight:800; }
.fp2-rel-cta  { font-size:.78rem; font-weight:800; color:var(--burg); }

/* ── CTA BANNER ───────────────────────────────────── */
.fp2-cta-banner { background: var(--burg); padding: 3.5rem 0; text-align: center; }
.fp2-cta-inner { max-width: 600px; margin: 0 auto; padding: 0 20px; }
.fp2-cta-over { display:block; font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; color:rgba(253,246,236,.65); margin-bottom:.5rem; }
.fp2-cta-inner h2 { color:#fff; margin-bottom:.6rem; font-size:1.6rem; }
.fp2-cta-inner p { color:rgba(253,246,236,.8); margin-bottom:1.5rem; }

/* ── MOBILE ───────────────────────────────────────── */
@media (max-width: 700px) {
  .fp2-body { padding: 1.25rem 14px 4rem; }
  .fp2-hero-wrap { padding: 0 14px; }
  .fp2-title { font-size: 1.4rem; }
  .fp2-header { padding: 1.75rem 0 1.75rem; }
  .fp2-hero-meta { font-size: .76rem; gap: .4rem; }
  .fp2-hero-actions { gap: .35rem; }
  .fp2-hero-btn { font-size: .7rem; padding: .42rem .8rem; }

  /* 3 stat cards → 1 col on small screens */
  .fp2-stat-cards { grid-template-columns: 1fr; gap: .7rem; }
  .fp2-stat-card { padding: 1.1rem; text-align: left; display: flex; gap: .9rem; align-items: flex-start; }
  .fp2-stat-card-icon { font-size: 1.8rem; margin-bottom: 0; flex-shrink: 0; }

  /* 4 photos → 2 col */
  .fp2-progress-photos { grid-template-columns: repeat(2,1fr); gap: .5rem; }

  /* Section headings */
  .fp2-sec-h { font-size: 1.15rem; }

  /* Tabs — wrap, 2 per row */
  .fp2-tabs { flex-wrap: wrap; }
  .fp2-tab { flex: 1 1 48%; font-size: .7rem; padding: .7rem .4rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .fp2-tab:nth-child(2) { border-right: none; }
  .fp2-tab:nth-child(4) { border-right: none; }
  .fp2-tab:nth-child(3), .fp2-tab:nth-child(4) { border-bottom: none; }
  .fp2-panel { padding: 1.25rem 1rem; }
  .fp2-panel-h { font-size: 1rem; }

  /* Info blocks → 2 col */
  .fp2-info-blocks { grid-template-columns: repeat(2,1fr); }

  /* Pattern rounds */
  .fp2-round-row { gap: .5rem; padding: .6rem .75rem; }
  .fp2-round-lbl { min-width: 52px; font-size: .73rem; }
  .fp2-round-txt { font-size: .83rem; }

  /* Related → 1 col */
  .fp2-related-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Author */
  .fp2-author { flex-direction: column; align-items: center; text-align: center; }

  /* FAQ */
  .faq-q { font-size: .86rem; padding: .9rem 1rem; }

  /* Prose */
  .fp2-prose { font-size: .92rem; }

  /* Breadcrumb */
  .fp2-breadcrumb { font-size: .67rem; gap: .25rem; }
}

@media (max-width: 400px) {
  .fp2-info-blocks { grid-template-columns: 1fr; }
  .fp2-pattern-pills { gap: .35rem; }
  .fp2-pattern-pills span { font-size: .68rem; }
  .fp2-hero-pills { gap: .28rem; }
  .fp2-pill { font-size: .62rem; padding: .22rem .6rem; }
}

/* ── PRINT ────────────────────────────────────────── */
@media print {
  .fp-floats, .fp2-header, .fp2-hero-actions, .fp2-share-bar,
  .fp2-related, .fp2-cta-banner, #site-header, footer,
  .fp2-tabs, .faq-list { display: none !important; }
  .fp2-body { padding: 0; max-width: 100%; }
  .fp2-panel { display: block !important; padding: 0; }
  .fp2-tabs-wrap { border: none; }
  .fp2-round-row { break-inside: avoid; }
  .fp2-above-fold { break-inside: avoid; }
}

/* ════════════════════════════════════════
   LAYOUT OVERRIDES — TWO-COLUMN SIDEBAR
   (Must be last to override all fp2 versions)
════════════════════════════════════════ */
.fp2-body {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 2.5rem 20px 5rem !important;
}
.fp2-layout {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 2.5rem !important;
  align-items: start !important;
}
.fp2-main-col {
  min-width: 0 !important;
}
.fp2-sidebar {
  display: block !important;
  position: sticky !important;
  top: 90px !important;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.fp2-sidebar::-webkit-scrollbar { width: 4px; }
.fp2-sidebar::-webkit-scrollbar-track { background: transparent; }
.fp2-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Tablet: narrow sidebar */
@media (max-width: 1100px) {
  .fp2-body { padding: 2rem 16px 4rem !important; }
  .fp2-layout { grid-template-columns: 1fr 260px !important; gap: 1.75rem !important; }
}
/* Mobile: collapse to single column, hide sidebar */
@media (max-width: 860px) {
  .fp2-body { padding: 1.5rem 14px 3rem !important; }
  .fp2-layout { display: block !important; }
  .fp2-sidebar { display: none !important; }
  .fp2-main-col { padding: 0 !important; }
}
/* Print: remove sidebar */
@media print {
  .fp2-layout { display: block !important; }
  .fp2-sidebar { display: none !important; }
  .fp2-body { max-width: 100% !important; padding: 0 !important; }
}

/* ════════════════════════════════════════
   BIG PATTERN CARD (replaces tabs)
════════════════════════════════════════ */
.fp2-bigcard {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 2.5rem;
}

/* Sticky nav pills inside the card */
.fp2-bsnav-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .38rem .9rem;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1.5px solid var(--border);
  font-size: .76rem;
  font-weight: 800;
  color: var(--brown-2);
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s;
  white-space: nowrap;
}
.fp2-bsnav-pill:hover {
  background: var(--burg);
  color: var(--white);
  border-color: var(--burg);
}

/* Progress bar */
.fp2-progress-wrap {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem 1.5rem;
  background: var(--cream);
  border-bottom: 1px solid var(--border-2);
}
.fp2-progress-bar-track {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.fp2-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--burg), #d946b2);
  border-radius: 999px;
  transition: width .4s cubic-bezier(.22,1,.36,1);
}
.fp2-progress-label {
  font-size: .72rem;
  font-weight: 800;
  color: var(--brown-2);
  white-space: nowrap;
}

/* Each section inside the big card */
.fp2-bigcard-section {
  padding: 2rem 1.8rem;
  transition: background .3s;
}
.fp2-bigcard-section.fp2-sec-completed {
  background: #f0fdf4;
}
.fp2-bigcard-divider {
  height: 2px;
  background: var(--border);
  margin: 0;
}

/* Section header row: icon + title + done checkbox */
.fp2-bigcard-sec-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.fp2-bigcard-sec-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.fp2-bigcard-sec-header h3 {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--brown);
  flex: 1;
  line-height: 1.25;
}

/* Done checkbox label */
.fp2-sec-done-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
}
.fp2-sec-done-label input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--success);
  cursor: pointer;
  flex-shrink: 0;
}
.fp2-sec-done-badge {
  font-size: .74rem;
  font-weight: 800;
  color: var(--brown-2);
  white-space: nowrap;
  transition: color .2s;
}
.fp2-sec-done-label:has(input:checked) .fp2-sec-done-badge {
  color: var(--success);
}

/* Finish button area */
.fp2-finish-wrap {
  padding: 1.75rem 1.8rem;
  background: var(--cream-2);
  border-top: 2px solid var(--border);
  text-align: center;
}
.fp2-finish-btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .9rem 2.5rem;
  background: var(--burg);
  color: var(--white);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  transition: background .25s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(139,34,82,.3);
}
.fp2-finish-btn:hover {
  background: var(--burg-dark, #6e1a36);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(139,34,82,.4);
}
.fp2-finish-icon { font-size: 1.3rem; }
.fp2-finish-confetti {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin-top: 1rem;
  padding: .85rem 1.25rem;
  background: #f0fdf4;
  border: 2px solid #86efac;
  border-radius: var(--r-lg);
  font-size: .92rem;
  color: #166534;
  flex-wrap: wrap;
  text-align: center;
}
/* Pulse the finish button when all 4 sections are ticked */
.fp2-all-done .fp2-finish-btn {
  animation: cozyPulse 1.5s ease infinite;
}
@keyframes cozyPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.03); opacity: .92; }
}

/* ── STAT CARDS — fix mobile layout ── */
/* On mobile: stack vertically as horizontal rows */
@media (max-width: 680px) {
  .fp2-stat-card h3 { margin-bottom: .2rem !important; font-size: .9rem !important; }
  .fp2-stat-card p  { font-size: .78rem !important; }
}

/* Big card sections on mobile */
@media (max-width: 680px) {
  .fp2-bsnav-pill { font-size: .7rem; padding: .32rem .7rem; }
  .fp2-bigcard-section { padding: 1.35rem 1rem; }
  .fp2-bigcard-sec-header h3 { font-size: .96rem; }
  .fp2-finish-wrap { padding: 1.25rem 1rem; }
  .fp2-finish-btn { font-size: .9rem; padding: .78rem 1.8rem; width: 100%; justify-content: center; }
  .fp2-info-blocks { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ════════════════════════════════════════
   MOBILE SIDEBAR STRIP (≤860px only)
════════════════════════════════════════ */
.fp2-mobile-sidebar { display: none; }

@media (max-width: 860px) {
  .fp2-mobile-sidebar {
    display: block;
    background: var(--cream-2);
    border-top: 2px solid var(--border);
    padding: 2rem 0;
  }
  .fp2-mob-product-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .fp2-mob-product-card:last-child { border-bottom: none; }
  .fp2-mob-product-card img {
    width: 52px; height: 52px;
    object-fit: cover;
    border-radius: var(--r);
    border: 1.5px solid var(--border);
    flex-shrink: 0;
  }
  .fp2-mob-product-name  { font-size: .82rem; font-weight: 800; color: var(--brown); line-height: 1.3; margin-bottom: .18rem; }
  .fp2-mob-product-price { font-size: .8rem; font-weight: 900; color: var(--burg); }
}

/* ════════════════════════════════════════
   ROUND ROW TAP-TO-COMPLETE
════════════════════════════════════════ */
.fp2-round-row {
  display: flex;
  gap: .85rem;
  padding: .7rem 1.2rem;
  border-bottom: 1px solid var(--border-2);
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background .15s;
}
.fp2-round-check {
  margin-left: auto;
  flex-shrink: 0;
  font-size: .9rem;
  color: var(--burg);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.fp2-round-done {
  background: var(--burg-muted) !important;
  border-color: var(--burg-light) !important;
}
.fp2-round-done .fp2-round-lbl {
  color: var(--burg) !important;
  text-decoration: line-through;
  text-decoration-color: rgba(123,28,58,.4);
}
.fp2-round-done .fp2-round-txt {
  opacity: .55;
}
.fp2-round-done .fp2-round-check {
  opacity: 1;
  transform: scale(1);
}
/* Hint: show a faint checkmark on hover */
.fp2-round-row:not(.fp2-round-done):hover .fp2-round-check {
  opacity: .25;
  transform: scale(0.85);
}

/* ════════════════════════════════════════
   INLINE NEWSLETTER BLOCK
════════════════════════════════════════ */
.fp2-nl-icon {
  font-size: 2.4rem;
  grid-row: 1 / 3;
  line-height: 1;
  padding-top: .2rem;
}
.fp2-nl-copy h3 {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: .2rem;
  line-height: 1.2;
}
.fp2-nl-copy p {
  font-size: .84rem;
  color: rgba(253,246,236,.82);
  line-height: 1.5;
  margin: 0;
}
.fp2-nl-form {
  grid-column: 1 / -1;
  display: flex;
  gap: .6rem;
  margin-top: .35rem;
  flex-wrap: wrap;
}
.fp2-nl-input {
  flex: 1;
  min-width: 200px;
  padding: .7rem 1rem;
  border-radius: var(--r-pill);
  border: 2px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: var(--white);
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 600;
  outline: none;
  transition: border-color .2s, background .2s;
}
.fp2-nl-input::placeholder { color: rgba(253,246,236,.55); }
.fp2-nl-input:focus {
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.2);
}
.fp2-nl-btn {
  padding: .7rem 1.4rem;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--burg);
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 900;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, transform .15s;
}
.fp2-nl-btn:hover {
  background: var(--cream);
  transform: translateY(-1px);
}
.fp2-nl-note {
  grid-column: 1 / -1;
  font-size: .72rem;
  color: rgba(253,246,236,.6);
  text-align: center;
  margin-top: .2rem;
}

/* ── Newsletter inline — BASE definition (was missing!) ── */

@media (max-width: 580px) {
  .fp2-newsletter-inline {
    grid-template-columns: 1fr;
    padding: 1.5rem 1.1rem;
    text-align: center;
  }
  .fp2-nl-icon { grid-row: auto; font-size: 2rem; margin-bottom: .25rem; }
  .fp2-nl-form { flex-direction: column; }
  .fp2-nl-input { min-width: unset; width: 100%; }
  .fp2-nl-btn { width: 100%; }
}

/* ════════════════════════════════════════
   PRODUCT SINGLE PAGE — FULL CSS
════════════════════════════════════════ */

/* Breadcrumb */
.product-breadcrumb {
  font-size: .78rem;
  color: var(--brown-3);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.product-breadcrumb a { color: var(--burg); transition: opacity .15s; }
.product-breadcrumb a:hover { opacity: .75; }

/* Tag pills */
.product-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .75rem;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
}
.tag-diff-beginner     { background: #dcfce7; color: #15803d; }
.tag-diff-intermediate { background: #fef3c7; color: #92400e; }
.tag-diff-advanced     { background: #fee2e2; color: #991b1b; }
.tag-pdf  { background: var(--cream-2); color: var(--brown-2); border: 1px solid var(--border); }
.tag-us   { background: var(--cream-2); color: var(--brown-2); border: 1px solid var(--border); }
.tag-free { background: #dcfce7; color: #15803d; }
.tag-sale { background: #fee2e2; color: #991b1b; }
.tag-time { background: var(--cream-2); color: var(--brown-2); border: 1px solid var(--border); }

/* Rating row */
.product-rating-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.rating-stars { color: #B45309; font-size: 1.05rem; letter-spacing: .08em; }
.rating-score { font-weight: 900; color: var(--brown); font-size: .92rem; }
.rating-sep   { color: var(--brown-3); }
.rating-count { font-size: .85rem; color: var(--brown-2); font-weight: 600; }
.rating-scroll-link { font-size: .82rem; color: var(--burg); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Product stats grid */
.product-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
.psg-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: .65rem .75rem;
}
.psg-icon { font-size: 1.2rem; flex-shrink: 0; line-height: 1; margin-top: .05rem; }
.psg-item label {
  display: block;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 800;
  color: var(--brown-3);
  margin-bottom: .15rem;
}
.psg-item span { font-size: .85rem; font-weight: 700; color: var(--brown); }

/* What's included box */
.product-includes-box {
  background: var(--mint-light);
  border: 2px solid var(--mint);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.3rem;
}
.product-includes-box h4,
.product-includes-title {
  font-size: .85rem;
  font-weight: 900;
  color: var(--brown);
  margin-bottom: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.pib-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem .75rem;
}
.pib-grid div {
  font-size: .84rem;
  color: var(--brown-2);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* Buy box */
.buy-box {
  background: linear-gradient(135deg, var(--cream-2) 0%, #fdf2f8 100%);
  border: 2px solid var(--pink);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.buy-box-price-row {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  flex-wrap: wrap;
}
.buy-price-main  { font-size: 2.2rem; font-weight: 900; color: var(--burg); line-height: 1; }
.buy-price-old   { font-size: 1.05rem; text-decoration: line-through; color: var(--brown-3); font-weight: 700; }
.buy-price-sub   { font-size: .78rem; color: var(--brown-3); font-weight: 700; }
.buy-save-badge  {
  background: #fee2e2;
  color: #991b1b;
  font-size: .72rem;
  font-weight: 900;
  padding: .22rem .65rem;
  border-radius: var(--r-pill);
}
.btn-buy-now {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 1.5rem;
  background: var(--burg);
  color: #fff !important;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 900;
  text-decoration: none !important;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(139,34,82,.3);
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-buy-now:hover,
.btn-buy-now:focus,
.btn-buy-now:active {
  background: #6e1a36;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(139,34,82,.4);
  outline: none;
  border-color: rgba(255,255,255,.25);
}
.buy-box-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
}
.buy-box-trust span {
  font-size: .75rem;
  font-weight: 700;
  color: var(--brown-2);
  display: flex;
  align-items: center;
  gap: .25rem;
}

/* Gallery badges */
.gallery-badge-sale,
.gallery-badge-sale { background: var(--burg); color: var(--white); }
.gallery-badge-free { background: var(--success); color: var(--white); }
.gallery-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  opacity: .15;
  background: var(--cream-2);
  min-height: 320px;
}

/* Product tabs section */
.product-tabs-section {
  margin-top: 3rem;
  border-top: 2px solid var(--border);
  padding-top: 2rem;
}
.tab-nav {
  display: flex;
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  gap: 0;
  margin-bottom: 0;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  flex-shrink: 0;
  padding: .75rem 1.25rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: var(--font);
  font-size: .86rem;
  font-weight: 700;
  color: var(--brown-2);
  cursor: pointer;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.tab-btn:hover   { color: var(--burg); }
.tab-btn.active  { color: var(--burg); border-bottom-color: var(--burg); font-weight: 900; }
.tab-panel       { display: none; padding: 1.75rem 0; }
.tab-panel.active { display: block; }
.tab-content-inner { max-width: 900px; }
.tab-content-inner h3,
.product-tab-h,
.product-tab-h3 {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--brown);
  margin-bottom: 1rem;
}
.tab-content-inner p {
  color: var(--brown-2);
  font-size: .9rem;
  line-height: 1.75;
  margin-bottom: .75rem;
}
.tab-tip-box {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: var(--r);
  padding: .85rem 1.1rem;
  font-size: .88rem;
  color: #92400e;
  margin: 1rem 0;
  font-weight: 600;
}
.customize-section { margin-top: 1.5rem; }
.customize-list {
  padding-left: 1.25rem;
  list-style: disc;
}
.customize-list li {
  color: var(--brown-2);
  font-size: .9rem;
  line-height: 1.7;
  margin-bottom: .35rem;
}

/* Materials tab */
.materials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1rem;
}
.mat-card {
  background: var(--cream-2);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.2rem 1.3rem;
}
.mat-card h4,
.mat-card h3 {
  font-size: .88rem;
  font-weight: 900;
  color: var(--brown);
  margin-bottom: .65rem;
}
.mat-card ul {
  padding-left: 1.1rem;
  list-style: disc;
}
.mat-card li {
  font-size: .85rem;
  color: var(--brown-2);
  line-height: 1.65;
  margin-bottom: .25rem;
}
.mat-note {
  background: var(--mint-light);
  border: 1.5px solid var(--mint);
  border-radius: var(--r);
  padding: .75rem 1rem;
  font-size: .83rem;
  color: var(--brown-2);
  font-weight: 600;
}

/* Download steps */
.download-steps {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-bottom: 1.5rem;
}
.dl-step {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: .9rem 1.1rem;
}
.dl-num {
  width: 28px;
  height: 28px;
  background: var(--burg);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 900;
  flex-shrink: 0;
}
.dl-icon { font-size: 1.4rem; flex-shrink: 0; }
.dl-text strong { font-size: .9rem; color: var(--brown); display: block; margin-bottom: .2rem; }
.dl-text p { font-size: .83rem; color: var(--brown-2); margin: 0; line-height: 1.5; }
.dl-trouble-box {
  background: #fefce8;
  border: 1.5px solid #fde68a;
  border-radius: var(--r);
  padding: .85rem 1.1rem;
  font-size: .85rem;
  color: var(--brown-2);
  font-weight: 600;
}
.dl-trouble-box a { color: var(--burg); font-weight: 800; text-decoration: underline; }

/* Reviews tab */
.reviews-summary {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--cream-2);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  flex-wrap: wrap;
}
.reviews-score-block { text-align: center; }
.rsb-big   { font-size: 3rem; font-weight: 900; color: var(--brown); line-height: 1; }
.rsb-stars { color: #B45309; font-size: 1.3rem; letter-spacing: .1em; }
.rsb-label { font-size: .72rem; color: var(--brown-3); font-weight: 700; }
.reviews-bars  { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: .35rem; }
.rev-bar-row   { display: flex; align-items: center; gap: .65rem; font-size: .8rem; font-weight: 700; color: var(--brown-2); }
.rev-bar       { flex: 1; height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.rev-bar div   { height: 100%; background: #B45309; border-radius: 999px; }
.reviews-total { text-align: center; }
.reviews-total div:first-child { font-size: 2rem; font-weight: 900; color: var(--brown); }
.reviews-total div:last-child  { font-size: .72rem; color: var(--brown-3); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.product-review-card .review-author   { font-size: .78rem; font-weight: 800; color: var(--brown-2); }
.product-review-card .review-verified { font-size: .72rem; color: var(--success); font-weight: 700; }

/* Related products section */
.product-related-section {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 2px solid var(--border);
}

/* ── Product page responsive ── */
@media (max-width: 860px) {
  .product-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pib-grid { grid-template-columns: 1fr; }
  .materials-grid { grid-template-columns: 1fr; }
  .reviews-summary { gap: 1.25rem; }
  .tab-btn { font-size: .78rem; padding: .65rem .85rem; }
}
@media (max-width: 580px) {
  .product-stats-grid { grid-template-columns: 1fr 1fr; }
  .buy-price-main { font-size: 1.8rem; }
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   CHECKOUT PAGE — FULL CSS
════════════════════════════════════════ */
.checkout-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 20px 5rem;
}
.checkout-back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .84rem;
  font-weight: 700;
  color: var(--brown-2);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color .15s;
}
.checkout-back-link:hover { color: var(--burg); }
.checkout-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--brown);
  margin-bottom: .5rem;
}
.checkout-subtitle {
  font-size: .9rem;
  color: var(--brown-2);
  margin-bottom: 2rem;
}
.checkout-section-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brown-2);
  margin: 1.5rem 0 .85rem;
}
.checkout-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem 1rem;
}
.checkout-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.checkout-field.full { grid-column: 1 / -1; }
.checkout-field label {
  font-size: .75rem;
  font-weight: 800;
  color: var(--brown-2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.checkout-field .field-note {
  font-size: .72rem;
  color: var(--brown-3);
  font-weight: 600;
  margin-top: .15rem;
}
.checkout-input {
  padding: .7rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font);
  font-size: .9rem;
  color: var(--brown);
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.checkout-input:focus {
  outline: none;
  border-color: var(--burg);
  box-shadow: 0 0 0 3px rgba(139,34,82,.1);
}
.checkout-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: 1.05rem 1.5rem;
  background: var(--burg);
  color: var(--white);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  margin-top: 1.25rem;
  box-shadow: 0 4px 18px rgba(139,34,82,.3);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.checkout-submit-btn:hover {
  background: var(--burg-dark, #6e1a36);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(139,34,82,.4);
}
.checkout-trust-note {
  text-align: center;
  font-size: .78rem;
  color: var(--brown-3);
  font-weight: 600;
  margin-top: .75rem;
}
.checkout-order-summary {
  background: var(--cream-2);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.5rem;
  margin-top: 2rem;
}
.checkout-order-summary h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brown-2);
  margin-bottom: 1rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--border);
}
.checkout-product-name {
  font-size: .95rem;
  font-weight: 800;
  color: var(--brown);
  margin-bottom: .25rem;
}
.checkout-total {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--burg);
  margin: .5rem 0 1rem;
}
.checkout-includes {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
}
.checkout-includes div {
  font-size: .83rem;
  color: var(--brown-2);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.checkout-payment-methods {
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.checkout-payment-methods h4 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brown-3);
  font-weight: 800;
  margin-bottom: .4rem;
}
.checkout-payment-logos {
  font-size: .82rem;
  font-weight: 700;
  color: var(--brown-2);
  margin-bottom: .4rem;
}
.checkout-security-badges {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  margin-top: .65rem;
}
.checkout-security-badges span {
  font-size: .78rem;
  color: var(--brown-2);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.checkout-what-next {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.3rem;
  margin-top: 1.5rem;
}
.checkout-what-next h4 {
  font-size: .82rem;
  font-weight: 900;
  color: var(--brown);
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.checkout-what-next p {
  font-size: .83rem;
  color: var(--brown-2);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 580px) {
  .checkout-fields { grid-template-columns: 1fr; }
  .checkout-field.full { grid-column: auto; }
  .checkout-title { font-size: 1.45rem; }
}

/* ════════════════════════════════════════
   COZY CHECKOUT PAGE — FULL CSS
   Classes: .cco-* used in page-checkout.php
════════════════════════════════════════ */
.cozy-checkout-page {
  background: var(--cream);
  min-height: 100vh;
  padding: 2.5rem 0 5rem;
}
/* ── LEFT: Form column ── */
.cco-header { margin-bottom: 1.75rem; }
.cco-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--brown-2);
  text-decoration: none;
  margin-bottom: .9rem;
  transition: color .15s;
}
.cco-back:hover { color: var(--burg); }
.cco-header h1 {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--brown);
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .4rem;
}
.cco-header p {
  font-size: .9rem;
  color: var(--brown-2);
  line-height: 1.6;
  margin: 0;
}
.cco-section-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brown-2);
  margin: 1.5rem 0 .85rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
}
.cco-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .85rem;
}
.cco-field label {
  font-size: .78rem;
  font-weight: 800;
  color: var(--brown-2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cco-field input,
.cco-field select,
.cco-field textarea {
  padding: .72rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font);
  font-size: .92rem;
  color: var(--brown);
  background: var(--cream);
  transition: border-color .2s, box-shadow .2s, background .2s;
  width: 100%;
}
.cco-field input:focus,
.cco-field select:focus,
.cco-field textarea:focus {
  outline: none;
  border-color: var(--burg);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(139,34,82,.1);
}
.cco-field .req { color: var(--burg); }
.cco-hint {
  font-size: .76rem;
  color: var(--brown-3);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.cco-error {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  border-radius: var(--r);
  padding: .75rem 1rem;
  font-size: .86rem;
  color: #dc2626;
  font-weight: 700;
  margin-bottom: 1rem;
}
.cco-submit-note {
  font-size: .78rem;
  color: var(--brown-3);
  text-align: center;
  margin-top: .65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  line-height: 1.5;
}

/* ── RIGHT: Summary column ── */
.cco-summary-col { position: sticky; top: 90px; }
.cco-summary {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: 0 2px 16px rgba(61,26,14,.06);
}
.cco-summary-title {
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--brown-2);
  margin-bottom: 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.cco-product-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r);
  border: 1.5px solid var(--border);
  margin-bottom: .85rem;
  display: block;
}
.cco-product-name {
  font-size: .95rem;
  font-weight: 800;
  color: var(--brown);
  margin-bottom: .65rem;
  line-height: 1.3;
}
.cco-price-breakdown {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--border);
}
.cco-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .86rem;
  padding: .28rem 0;
  color: var(--brown-2);
}
.cco-price-row.total {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--burg);
  padding-top: .55rem;
  margin-top: .3rem;
  border-top: 2px solid var(--border);
}
.cco-price-row.total span:first-child { color: var(--brown); }
.cco-price-orig { text-decoration: line-through; color: var(--brown-3); font-size: .82rem; }
.cco-save-badge {
  background: #fee2e2;
  color: #991b1b;
  font-size: .7rem;
  font-weight: 900;
  padding: .15rem .55rem;
  border-radius: var(--r-pill);
}
.cco-summary-includes {
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1.5px solid var(--border);
}
.cco-summary-includes h4 {
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--brown-2);
  margin-bottom: .55rem;
}
.cco-summary-includes div {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .83rem;
  color: var(--brown-2);
  font-weight: 600;
  padding: .22rem 0;
}
.cco-payment-methods {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--border);
}
.cco-payment-methods h4 {
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--brown-2);
  margin-bottom: .45rem;
}
.cco-payment-logos {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.cco-pay-badge {
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: 5px;
  padding: .22rem .6rem;
  font-size: .72rem;
  font-weight: 800;
  color: var(--brown-2);
}
.cco-powered-by {
  font-size: .76rem;
  color: var(--brown-3);
  font-weight: 600;
  margin-top: .45rem;
}
.cco-trust-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.cco-trust-list div {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  color: var(--brown-2);
  font-weight: 600;
}

/* ── Checkout responsive ── */
@media (max-width: 900px) {
  .cco-grid {
    grid-template-columns: 1fr;
  }
  .cco-summary-col {
    position: static;
    order: -1; /* Show summary above form on mobile */
  }
  .cco-form-col {
    padding: 1.5rem 1.1rem 2rem;
  }
}
@media (max-width: 600px) {
  .cozy-checkout-page { padding: 1.5rem 0 4rem; }
  .cco-header h1 { font-size: 1.45rem; }
  .cco-summary { padding: 1.1rem; }
}

/* ════════════════════════════════════════
   PRODUCT PAGE CLS FIXES
   Prevents layout shift (CLS 0.335 → target <0.1)
════════════════════════════════════════ */
/* Isolate product single layout from rest of page */
/* product-single contain removed — caused CLS */
/* Reserve exact dimensions for gallery to prevent shift */
.product-gallery-wrap { contain: layout; }
.product-gallery-main {
  position: relative;
  aspect-ratio: 4/3;
  contain: strict;
  overflow: hidden;
}
/* Prevent gallery badges from causing layout shift */
.gallery-badge-sale,
.gallery-badge-free {
  position: absolute;
  contain: layout;
}
/* Product info column - prevent reflow from star ratings loading */
.product-rating-row { min-height: 1.5rem; contain: layout; }
/* Buy box - reserve height to prevent shift when price loads */
.buy-box { contain: layout; }
.buy-box-price-row { min-height: 2.8rem; }

/* ════════════════════════════════════════
   FOOTER FIXES
════════════════════════════════════════ */
/* Ensure footer text is readable on dark background */
#site-footer { background: #1A0A0D; }
.footer-top { padding: 4rem 20px 3rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 2.5rem;
  max-width: var(--wrap);
  margin: 0 auto;
}
.footer-brand h3 { font-size: 1.15rem; font-weight: 900; color: #fff; margin-bottom: .65rem; }
.footer-brand p   { font-size: .84rem; color: rgba(255,255,255,.72); line-height: 1.72; margin-bottom: 1.1rem; }
.footer-col-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; color: rgba(255,255,255,.9); margin-bottom: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.footer-links a { font-size: .84rem; color: rgba(255,255,255,.55); transition: color .2s; text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-contact-item { display: flex; gap: .55rem; margin-bottom: .6rem; align-items: flex-start; }
.footer-contact-item .icon { font-size: .9rem; opacity: .6; flex-shrink: 0; margin-top: .1rem; }
.footer-contact-item a,
.footer-contact-item span { font-size: .84rem; color: rgba(255,255,255,.55); text-decoration: none; }
.footer-contact-item a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1.5rem 20px;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p    { font-size: .76rem; color: rgba(255,255,255,.5); margin: 0; }
.footer-bottom-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-bottom-links a { font-size: .76rem; color: rgba(255,255,255,.5); text-decoration: none; transition: color .2s; }
.footer-bottom-links a:hover { color: rgba(255,255,255,.85); }

/* ════════════════════════════════════════
   MISSING CSS — ABOUT PAGE
════════════════════════════════════════ */
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 3rem;
}
.about-story-text p { color: var(--brown-2); line-height: 1.8; margin-bottom: 1rem; }
.about-facts-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.about-fact-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.2rem;
  text-align: center;
}
.about-fact-card strong { display: block; font-size: 2rem; font-weight: 900; color: var(--burg); margin-bottom: .25rem; }
.about-fact-card span   { font-size: .82rem; color: var(--brown-2); font-weight: 600; }

/* ════════════════════════════════════════
   MISSING CSS — CONTACT PAGE
════════════════════════════════════════ */
.contact-info-col  { display: flex; flex-direction: column; gap: 1rem; }
.contact-form-col  { background: var(--white); border: 2px solid var(--border); border-radius: var(--r-lg); padding: 2rem; }
.contact-info-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.cic-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
.cic-item h4 { font-size: .85rem; font-weight: 900; color: var(--brown); margin-bottom: .2rem; }
.cic-item p, .cic-item a { font-size: .86rem; color: var(--brown-2); line-height: 1.55; text-decoration: none; }
.cic-item a:hover { color: var(--burg); text-decoration: underline; }
.cozy-contact-form { display: flex; flex-direction: column; gap: 1rem; }
.cf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cf-field { display: flex; flex-direction: column; gap: .3rem; }
.cf-field label { font-size: .78rem; font-weight: 800; color: var(--brown-2); text-transform: uppercase; letter-spacing: .06em; }
.cf-field input,
.cf-field select,
.cf-field textarea {
  padding: .72rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font);
  font-size: .9rem;
  color: var(--brown);
  background: var(--cream);
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: var(--burg);
  box-shadow: 0 0 0 3px rgba(139,34,82,.1);
  background: var(--white);
}
@media (max-width: 600px) { .cf-field-row { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════
   MISSING CSS — FAQ PAGE (grouped)
════════════════════════════════════════ */
.faq-group { margin-bottom: 2.5rem; }
.faq-group-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  padding-bottom: .65rem;
  border-bottom: 2px solid var(--border);
}
.faq-group-icon  { font-size: 1.5rem; flex-shrink: 0; }
.faq-group-title { font-size: 1.05rem; font-weight: 900; color: var(--brown); }

/* ════════════════════════════════════════
   MISSING CSS — COOKIE POLICY PAGE
════════════════════════════════════════ */
.cookie-table-wrap { overflow-x: auto; margin: 1rem 0; }
.cookie-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
}
.cookie-table th {
  background: var(--cream-2);
  border: 1px solid var(--border);
  padding: .65rem 1rem;
  font-weight: 800;
  color: var(--brown);
  text-align: left;
}
.cookie-table td {
  border: 1px solid var(--border);
  padding: .6rem 1rem;
  color: var(--brown-2);
  vertical-align: top;
  line-height: 1.55;
}
.cookie-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .65rem;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cookie-essential  { background: #dcfce7; color: #15803d; }
.cookie-analytics  { background: #dbeafe; color: #1e40af; }
.cookie-functional { background: #fef3c7; color: #92400e; }
.cookie-ads        { background: #fee2e2; color: #991b1b; }
.cookie-third      { background: var(--cream-2); color: var(--brown-2); border: 1px solid var(--border); }

/* ════════════════════════════════════════
   MISSING CSS — ALL LEGAL / POLICY PAGES
════════════════════════════════════════ */
.legal-page-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 3.5rem 20px 5rem;
}
.legal-content { color: var(--brown-2); font-size: .92rem; line-height: 1.8; }
.legal-content h2 { font-size: 1.15rem; font-weight: 900; color: var(--brown); margin: 2.2rem 0 .65rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.legal-content h2:first-of-type { border-top: none; margin-top: 0; }
.legal-content h3 { font-size: 1rem; font-weight: 900; color: var(--brown); margin: 1.5rem 0 .5rem; }
.legal-content p  { margin-bottom: .75rem; }
.legal-content a  { color: var(--burg); text-decoration: underline; }
.legal-content strong { color: var(--brown); }
.legal-section { margin-bottom: 2rem; }
.legal-notice {
  background: #fffbeb;
  border: 2px solid #fde68a;
  border-radius: var(--r-lg);
  padding: 1.1rem 1.4rem;
  margin-bottom: 2rem;
  font-size: .88rem;
  color: #92400e;
  font-weight: 600;
}
.legal-box {
  background: var(--cream-2);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
}
.legal-list { padding-left: 1.2rem; list-style: disc; margin: .75rem 0; }
.legal-list li, .legal-list--ol li { color: var(--brown-2); font-size: .9rem; line-height: 1.75; margin-bottom: .35rem; }
.legal-list--ol { padding-left: 1.2rem; list-style: decimal; margin: .75rem 0; }
.legal-list--no { list-style: none; padding-left: 0; }
.legal-yes { color: var(--success); font-weight: 800; }
.legal-no  { color: #dc2626; font-weight: 800; }
.legal-highlight-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.legal-highlight-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.2rem;
  text-align: center;
}
.lhc-icon { font-size: 1.8rem; margin-bottom: .5rem; }
.legal-highlight-card strong { display: block; font-size: .9rem; font-weight: 900; color: var(--brown); margin-bottom: .3rem; }
.legal-highlight-card p { font-size: .82rem; color: var(--brown-2); margin: 0; line-height: 1.5; }
.legal-cta-box {
  background: linear-gradient(135deg, var(--burg) 0%, #b5285e 100%);
  border-radius: var(--r-lg);
  padding: 2rem;
  text-align: center;
  color: var(--white);
  margin: 2rem 0;
}
.legal-cta-box h3 { font-size: 1.1rem; font-weight: 900; margin-bottom: .5rem; }
.legal-cta-box p  { font-size: .9rem; opacity: .85; margin-bottom: 1rem; }
.legal-contact-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.5rem;
  margin: 1.5rem 0;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.legal-related { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--border); }
.legal-related-title { font-size: .8rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--brown-2); margin-bottom: .85rem; }
.legal-related-links { display: flex; gap: .65rem; flex-wrap: wrap; }
.legal-related-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1rem;
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .82rem;
  font-weight: 700;
  color: var(--brown-2);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.legal-related-btn:hover { background: var(--burg); color: var(--white); border-color: var(--burg); }
.legal-allowed-item { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .65rem; font-size: .9rem; color: var(--brown-2); line-height: 1.55; }
.legal-allowed { list-style: none; padding: 0; margin: 1rem 0; }

/* ════════════════════════════════════════
   MISSING CSS — SHOP ARCHIVE
════════════════════════════════════════ */
.shop-sort select {
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  border: 2px solid var(--border);
  font-family: var(--font);
  font-size: .84rem;
  font-weight: 700;
  background: var(--white);
  color: var(--brown);
  cursor: pointer;
}
.shop-sort select:focus { outline: none; border-color: var(--burg); }

/* ════════════════════════════════════════
   MISSING CSS — PRODUCT REVIEW FORM
════════════════════════════════════════ */
.product-mini-faq {
  padding: 3rem 0 2rem;
  border-top: 2px solid var(--border);
  margin-top: 2rem;
}
.review-form-wrapper { max-width: 680px; }
.cozy-review-form { display: flex; flex-direction: column; gap: 1rem; }
.crf-stars-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.crf-stars input { display: none; }
.crf-stars label { font-size: 2rem; color: #ddd; cursor: pointer; transition: color .15s; line-height: 1; }
.crf-stars input:checked ~ label,
.crf-stars label:hover,
.crf-stars label:hover ~ label { color: #f5a623; }
.crf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cozy-review-form input[type="text"],
.cozy-review-form input[type="email"],
.cozy-review-form textarea {
  width: 100%;
  padding: .7rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font);
  font-size: .9rem;
  color: var(--brown);
  background: var(--cream);
  transition: border-color .2s;
}
.cozy-review-form input:focus,
.cozy-review-form textarea:focus { outline: none; border-color: var(--burg); }
@media (max-width: 600px) { .crf-row { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════
   MISSING CSS — CHECKOUT EXTRA CLASSES
════════════════════════════════════════ */
.csi-title {
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--brown-2);
  margin-bottom: 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.cpb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .32rem 0;
  font-size: .86rem;
  color: var(--brown-2);
}
.cpb-total {
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--burg);
  padding-top: .55rem;
  margin-top: .3rem;
  border-top: 2px solid var(--border);
  display: flex;
  justify-content: space-between;
}
.cpb-total-price { color: var(--burg); font-size: 1.25rem; font-weight: 900; }
.cpb-saving { color: var(--success); font-size: .8rem; font-weight: 700; }
.cpm-icons { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.cpm-icon {
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: 5px;
  padding: .22rem .6rem;
  font-size: .72rem;
  font-weight: 800;
  color: var(--brown-2);
}
.cpm-title {
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--brown-2);
  margin-bottom: .45rem;
}

/* ════════════════════════════════════════
   FOOTER BRAND (was missing)
════════════════════════════════════════ */
.footer-brand h3 { font-size: 1.15rem; font-weight: 900; color: #fff; margin-bottom: .65rem; }
.footer-brand p   { font-size: .84rem; color: rgba(255,255,255,.72); line-height: 1.72; margin-bottom: 1.1rem; }

/* ════════════════════════════════════════
   HOMEPAGE CLS FIXES
   Prevents .section layout shifts (CLS 0.711 → <0.1)
════════════════════════════════════════ */
/* Isolate each homepage section from affecting others */
.section { contain: none; /* no layout containment — causes CLS */ }
/* Reserve dimensions for benefit cards before fonts load */
.benefits-grid { contain: layout; }
.benefit-card  { contain: layout; min-height: 160px; }
/* Hero stats — reserve space */
.hero-stats { contain: layout; }
/* HP product cards — reserve image space */
.hp-card { contain: layout; }
/* Reserve space for the section title so font-swap doesn't shift layout */
.sec-title { min-height: 2.4rem; }
.sec-sub    { min-height: 1.5rem; }

/* ════════════════════════════════════════
   CONTENT-SIDEBAR (index.php blog layout)
════════════════════════════════════════ */
.content-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .content-sidebar { grid-template-columns: 1fr; }
  .content-sidebar aside { display: none; }
}

/* ════════════════════════════════════════
   ABOUT PAGE — extra layout classes
════════════════════════════════════════ */
@media (max-width: 860px) {
  .about-story-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-facts-col  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .about-facts-col { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   HERO STATS — DESKTOP FIX
   Was missing base definition causing vertical stack
════════════════════════════════════════ */
.hero-stats-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.hero-stat:not(:last-child) { border-right: 1px solid rgba(255,255,255,.2); }
.hero-stat strong { display: block; font-size: 1.4rem; font-weight: 900; color: var(--white); line-height: 1; }
.hero-stat span   { font-size: .72rem; color: rgba(253,246,236,.92); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* Mobile: 2×2 grid */
@media (max-width: 540px) {
  .hero-stats-wrap { width: 100%; }
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    width: 100%;
    padding: .75rem;
    border-radius: 14px;
  }
  .hero-stat {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 10px;
    padding: .7rem .5rem;
    border-right: none !important;
  }
  .hero-stat strong { font-size: 1.15rem; }
  .hero-stat span   { font-size: .65rem; }
}

/* ════════════════════════════════════════
   CONTACT PAGE — FULL REDESIGN
   Clean two-column with proper cards
════════════════════════════════════════ */
.contact-page-hero {
  text-align: center;
  padding: 3rem 20px 2.5rem;
  background: linear-gradient(135deg, var(--burg) 0%, #b5285e 100%);
  margin-bottom: 0;
}
.contact-page-hero .overline { color: rgba(255,255,255,.7); }
.contact-page-hero h1 { color: var(--white); }
.contact-page-hero p  { color: rgba(255,255,255,.82); max-width: 520px; margin: 0 auto; }

.contact-page-body { max-width: 1100px; margin: 0 auto; padding: 3rem 20px 5rem; }
.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
}
/* Form card */
.contact-form-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem;
  box-shadow: 0 2px 16px rgba(61,26,14,.06);
}
.contact-form-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--brown);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
/* Info sidebar */
.contact-info-stack { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-info-tile {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.4rem;
  box-shadow: 0 1px 8px rgba(61,26,14,.05);
}
.contact-tile-header {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brown-2);
  margin-bottom: .85rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.contact-tile-icon { font-size: 1.1rem; }
.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .8rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--border-2);
}
.contact-info-row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.contact-info-row-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1.1; }
.contact-info-row strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--brown-3); font-weight: 800; margin-bottom: .18rem; }
.contact-info-row a,
.contact-info-row span { font-size: .9rem; color: var(--brown); font-weight: 600; line-height: 1.45; text-decoration: none; }
.contact-info-row a { color: var(--burg); }
.contact-info-row a:hover { text-decoration: underline; }
/* Quick help tile */
.contact-quick-help { background: var(--cream-2); }
.contact-quick-help-item { margin-bottom: .75rem; }
.contact-quick-help-item:last-child { margin-bottom: 0; }
.contact-quick-help-item strong { font-size: .85rem; color: var(--brown); display: block; margin-bottom: .18rem; }
.contact-quick-help-item p { font-size: .84rem; color: var(--brown-2); line-height: 1.55; margin: 0; }

@media (max-width: 860px) {
  .contact-page-grid { grid-template-columns: 1fr; }
  .contact-form-card { padding: 1.5rem 1.1rem; }
}

/* ════════════════════════════════════════
   PRODUCT REVIEW SECTION — FULL CSS FIX
   The review form and star rating section
════════════════════════════════════════ */
.product-review-form-section {
  padding: 3rem 0 2rem;
  border-top: 2px solid var(--border);
  margin-top: 3rem;
}
.product-review-form-section > h2 {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--brown);
  margin-bottom: .4rem;
}
.product-review-form-section > p {
  color: var(--brown-2);
  font-size: .92rem;
  margin-bottom: 2rem;
}
.review-form-wrapper { max-width: 640px; }
.cozy-review-form { display: flex; flex-direction: column; gap: 1rem; }
.crf-stars-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: var(--cream-2);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
}
.crf-stars-row > label { font-size: .9rem; font-weight: 800; color: var(--brown); }
.crf-stars {
  display: flex;
  flex-direction: row-reverse;
  gap: .15rem;
  margin-left: auto;
}
.crf-stars input[type="radio"] { display: none; }
.crf-stars label {
  font-size: 2rem;
  color: #d1d5db;
  cursor: pointer;
  transition: color .12s;
  line-height: 1;
  padding: 0 .1rem;
}
.crf-stars input[type="radio"]:checked ~ label,
.crf-stars label:hover,
.crf-stars label:hover ~ label { color: #B45309; }
.crf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cozy-review-form input[type="text"],
.cozy-review-form input[type="email"],
.cozy-review-form textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font);
  font-size: .9rem;
  color: var(--brown);
  background: var(--cream);
  transition: border-color .2s, box-shadow .2s;
}
.cozy-review-form input:focus,
.cozy-review-form textarea:focus {
  outline: none;
  border-color: var(--burg);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(139,34,82,.1);
}
.cozy-review-form textarea { resize: vertical; min-height: 100px; }
@media (max-width: 600px) {
  .crf-row { grid-template-columns: 1fr; }
  .crf-stars-row { flex-direction: column; align-items: flex-start; }
  .crf-stars { margin-left: 0; }
}

/* CLS fix for benefit/stat/product cards is handled in critical.css
   (loads inline before any paint) — rules removed here to avoid
   duplicate specificity conflicts and reduce CSS payload. */

/* ════════════════════════════════════════
   MISSING BASE DEFINITIONS — restored after
   duplicate cleanup accidentally removed them
════════════════════════════════════════ */

/* ── fp2-bigcard-nav (sticky section nav) ── */
.fp2-bigcard-nav {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding: 1rem 1.5rem .75rem;
  background: var(--cream-2);
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 60px;
  z-index: 10;
}

/* ── fp2-stat-cards grid ── */

/* ── fp2-stat-card base ── */

/* ── fp2-finish-text ── */
.fp2-finish-text { font-size: 1rem; font-weight: 900; }

/* ── fp2-sec-done checkbox ── */
.fp2-sec-done {
  width: 18px;
  height: 18px;
  accent-color: var(--success);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── fp2-nl-copy ── */
.fp2-nl-copy { display: flex; flex-direction: column; gap: .15rem; }

/* ── Mobile sidebar widgets ── */
.fp2-mobile-sidebar-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.fp2-mob-widget {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.2rem 1.2rem;
}
.fp2-mob-widget-title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  color: var(--brown-3);
  margin-bottom: .85rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
}
.fp2-mob-product-grid { display: flex; flex-direction: column; gap: 0; }
.fp2-mob-product-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border-2);
  text-decoration: none;
  transition: background .15s;
}
.fp2-mob-product-card:last-child { border-bottom: none; }
.fp2-mob-product-card img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--r);
  border: 1.5px solid var(--border);
  flex-shrink: 0;
}
.fp2-mob-product-info  { display: flex; flex-direction: column; gap: .15rem; }
.fp2-mob-product-name  { font-size: .82rem; font-weight: 800; color: var(--brown); line-height: 1.3; }
.fp2-mob-product-price { font-size: .8rem; font-weight: 900; color: var(--burg); }

/* ── Mobile stat cards: horizontal rows on phone ── */
@media (max-width: 680px) {
  .fp2-stat-cards {
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
  }
  .fp2-stat-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1rem 1.1rem !important;
    text-align: left !important;
  }
  .fp2-stat-card-icon {
    font-size: 2rem !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ════════════════════════════════════════
   FINAL MISSING CSS — all remaining classes
════════════════════════════════════════ */

/* About page text column */
.about-story-text { display: flex; flex-direction: column; gap: .75rem; }
.about-story-text p { color: var(--brown-2); line-height: 1.8; }

/* Checkout form wrapper */
.cco-form { display: flex; flex-direction: column; gap: .85rem; }

/* Download steps text */
.dl-text { display: flex; flex-direction: column; gap: .2rem; }
.dl-text strong { font-size: .9rem; color: var(--brown); font-weight: 800; }
.dl-text p { font-size: .83rem; color: var(--brown-2); margin: 0; line-height: 1.5; }

/* FAQ accordion (product page grouped FAQ) */
.faq-accordion { display: flex; flex-direction: column; gap: 0; }
.faq-section { margin-bottom: 2.5rem; }

/* Footer brand column */
.footer-brand { display: flex; flex-direction: column; gap: .5rem; }
.footer-brand h3 { font-size: 1.15rem; font-weight: 900; color: #fff; margin-bottom: .3rem; }
.footer-brand p   { font-size: .84rem; color: rgba(255,255,255,.72); line-height: 1.72; }

/* Free pattern empty state */
.fp-empty-state {
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
}
.fp-empty-state p { color: var(--brown-2); margin-bottom: 1.5rem; }

/* How It Works content block */
.hiw-content { text-align: center; }
.hiw-content h3 { font-size: 1rem; font-weight: 900; color: var(--brown); margin-bottom: .35rem; }
.hiw-content p  { font-size: .87rem; color: var(--brown-2); line-height: 1.6; margin: 0; }

/* Footer newsletter copy */
.nl-copy { display: flex; flex-direction: column; gap: .5rem; }
.nl-copy h2 { font-size: clamp(1.5rem,2.5vw,2rem); font-weight: 900; color: var(--white); }
.nl-copy p  { color: rgba(253,246,236,.78); font-size: .96rem; }

/* Policy highlight box */
.policy-highlight {
  background: var(--cream-2);
  border-left: 4px solid var(--burg);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  font-size: .9rem;
  color: var(--brown-2);
  font-weight: 600;
}

/* Product Pinterest save button */
.product-pin-save-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .85rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--brown-2);
  text-decoration: none;
  transition: color .2s;
}
.product-pin-save-btn:hover { color: #E60023; }

/* Shop sort dropdown */
.shop-sort { display: flex; align-items: center; gap: .5rem; }
.shop-sort select {
  padding: .5rem 1rem;
  border-radius: var(--r-pill);
  border: 2px solid var(--border);
  font-family: var(--font);
  font-size: .84rem;
  font-weight: 700;
  background: var(--white);
  color: var(--brown);
  cursor: pointer;
  transition: border-color .2s;
}
.shop-sort select:focus { outline: none; border-color: var(--burg); }

/* Sidebar Pinterest widget */
.sidebar-pinterest { text-align: center; }

/* Difficulty tag variants */
.tag-diff-beginner     { background: #dcfce7; color: #15803d; }
.tag-diff-intermediate { background: #fef3c7; color: #92400e; }
.tag-diff-advanced     { background: #fee2e2; color: #991b1b; }

/* ════════════════════════════════════════
   FINAL MISSING CSS — all remaining gaps
════════════════════════════════════════ */

/* FAQ accordion (used in product page mini FAQ) */
.faq-accordion { max-width: 760px; }
.faq-section {
  padding: 5rem 0;
  background: var(--cream-2);
}
.faq-section .faq-list { max-width: 760px; margin: 0 auto; }

/* Free patterns empty state */
.fp-empty-state h3 { font-size: 1.2rem; font-weight: 900; color: var(--brown); margin-bottom: .5rem; }
.fp-empty-state p  { color: var(--brown-2); margin-bottom: 1.5rem; line-height: 1.65; }

/* Policy highlight box (terms/privacy/refund pages) */
.policy-highlight p { margin: 0; }
.policy-highlight a { color: var(--burg); font-weight: 700; }

/* Sidebar Pinterest widget (used in free pattern sidebar) */
.sidebar-pinterest { }
.sidebar-pinterest .sidebar-pin-btn {
  margin-top: .5rem;
}

/* ════════════════════════════════════════
   v3.5 FIXES
════════════════════════════════════════ */

/* ── FIX 2: FOOTER MOBILE — 4-col grid breaks on phone
   Problem: .footer-grid has 4 columns which squish on mobile.
   Fix: stack to 2-col at tablet, 1-col at mobile.
─────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.75rem !important;
  }
}
@media (max-width: 540px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .footer-top {
    padding: 2rem 14px 1.75rem !important;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .6rem;
    padding: 1.25rem 14px;
  }
  .footer-bottom-links {
    justify-content: center;
  }
  /* Footer social btn */
  .footer-pinterest-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── FIX 4: MATERIAL ITEMS — tap to mark done (strikethrough)
   We add a .fp2-mat-done class via JS (see single-free_pattern.php fix).
   CSS handles the visual: strikethrough text + green bg + checkmark.
─────────────────────────────────────────────────────────────────────── */
.fp2-mat-item {
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .18s;
  user-select: none;
  position: relative;
}
.fp2-mat-item:hover {
  border-color: var(--burg);
  transform: translateX(3px);
}

/* Done state */
.fp2-mat-item.fp2-mat-done {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
}
.fp2-mat-item.fp2-mat-done > div strong {
  text-decoration: line-through;
  text-decoration-color: rgba(21,128,61,.5);
  color: var(--brown-3) !important;
}
.fp2-mat-item.fp2-mat-done > div p {
  opacity: .55;
}
.fp2-mat-item.fp2-mat-done .fp2-mat-num {
  background: var(--success) !important;
}

/* Checkmark tick that appears when done */
.fp2-mat-item::after {
  content: '✓';
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%) scale(0);
  font-size: .9rem;
  color: var(--success);
  font-weight: 900;
  opacity: 0;
  transition: opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.fp2-mat-item.fp2-mat-done::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
/* Faint hint on hover */
.fp2-mat-item:not(.fp2-mat-done):hover::after {
  opacity: .2;
  transform: translateY(-50%) scale(.8);
}

/* ── FIX 5: CHECKOUT PAGE — missing .cco-grid definition
   The two-column checkout layout grid was defined in HTML
   but never in CSS.
─────────────────────────────────────────────────────────────────────── */
.cco-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: start;
}
.cco-form-col {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 2rem 2rem 2.5rem;
  box-shadow: 0 2px 16px rgba(61,26,14,.05);
}
@media (max-width: 900px) {
  .cco-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
  }
  .cco-summary-col {
    position: static;
    order: -1;
  }
  .cco-form-col {
    padding: 1.5rem 1.25rem 2rem;
  }
}
@media (max-width: 580px) {
  .cco-grid {
    padding: 0 14px;
  }
}

/* ── FIX 6: NEWSLETTER INLINE — missing base grid definition ── */
.fp2-newsletter-inline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem 1rem;
  align-items: start;
  background: var(--burg);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  margin-bottom: 2.5rem;
}

/* ── FIX 7: fp2-stat-cards — base grid definition was missing ── */
.fp2-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
  margin: 1.25rem 0 1.5rem;
}
.fp2-stat-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.1rem;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.22,1,.36,1) calc(var(--i,1) * 90ms),
              transform .5s cubic-bezier(.22,1,.36,1) calc(var(--i,1) * 90ms),
              box-shadow .3s, border-color .25s;
}
/* Override the CLS hack that forces opacity:1 — stat cards should animate */
.fp2-stat-card { opacity: 0 !important; transform: translateY(16px) !important; }
.fp2-stat-card.visible { opacity: 1 !important; transform: none !important; }
/* But maintain hover on visible */
.fp2-stat-card.visible:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 36px rgba(61,26,14,.12);
  border-color: var(--burg);
}



/* ════════════════════════════════════════
   CLS FIX v4.0 — fp2-body shift 0.337 → <0.1
   The fp2-body div shifts because:
   1. .fp-reveal starts opacity:0 + translateY causing layout shift
   2. content-visibility:auto makes browser miscalculate section heights
   3. fp2-stat-cards animate in causing reflow
   All fixed below — animations use opacity/transform ONLY (no layout props)
════════════════════════════════════════ */

/* Remove content-visibility:auto — it causes height miscalculation = CLS */
.section {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
  contain: none !important;
}

/* fp-reveal: use opacity+transform ONLY — never touch layout properties */
.fp-reveal {
  opacity: 0;
  transform: translateY(20px);
  /* will-change tells browser to composite this layer — no layout reflow */
  will-change: opacity, transform;
}
.fp-reveal.visible {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease, transform .45s ease;
  will-change: auto;
}

/* fp2-body: reserve min-height so nothing shifts when content loads */
.fp2-body {
  min-height: 100vh;
}

/* fp2-header: fix height so font swap doesn't cause shift */
.fp2-header {
  min-height: 200px;
  contain: layout style;
}

/* fp2-title: reserve space before font loads */
.fp2-title {
  min-height: 2.5rem;
}

/* Stat cards: remove the opacity:0 !important that causes CLS */
.fp2-stat-card {
  opacity: 1 !important;
  transform: none !important;
  transition: box-shadow .3s, border-color .25s, transform .3s !important;
}
/* Re-enable hover only */
.fp2-stat-card:hover {
  transform: translateY(-6px) !important;
}

/* fp2-hero-img-wrap: fix aspect ratio so no height jump on image load */
.fp2-hero-img-wrap {
  aspect-ratio: 16/9;
  background: var(--cream-2);
  overflow: hidden;
}

/* fp2-stat-cards: fix grid height before cards render */
.fp2-stat-cards {
  min-height: 120px;
}

/* fp2-progress-photos: fix height before images load */
.fp2-progress-photos {
  min-height: 80px;
}

/* fp2-above-fold: isolate from rest of page layout */
.fp2-above-fold {
  contain: layout;
  min-height: 300px;
}

/* Fonts: reduce FOUT shift by matching fallback metrics */
body {
  font-display: optional;
}

/* ════════════════════════════════════════
   v4.4 FIXES
════════════════════════════════════════ */

/* ── Two-column layout with sidebar for free pattern page ── */
.fp2-body {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 2.5rem 20px 5rem !important;
}
.fp2-layout {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 2rem !important;
  align-items: start !important;
}
.fp2-sidebar {
  display: block !important;
  position: sticky !important;
  top: 90px !important;
}
.fp2-main-col {
  min-width: 0 !important;
  max-width: 100% !important;
}
@media (max-width: 900px) {
  .fp2-layout {
    display: block !important;
  }
  .fp2-sidebar {
    display: none !important;
  }
  .fp2-body {
    padding: 1.5rem 14px 3rem !important;
  }
}

/* ── Article images between sections ── */
.fp2-article-img {
  margin: 1.5rem 0 2rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.fp2-article-img-el {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.fp2-article-img-cap {
  background: var(--cream-2);
  border-top: 1px solid var(--border);
  padding: .6rem 1rem;
  font-size: .78rem;
  color: var(--brown-2);
  font-weight: 600;
  text-align: center;
  font-style: italic;
  margin: 0;
}

/* ── Share modal overlay ── */
.cozy-share-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 99999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn .2s ease;
}
.cozy-share-sheet {
  background: var(--white);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-lg);
  padding: 1.5rem;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 -4px 30px rgba(0,0,0,.15);
  animation: slideUp .25s cubic-bezier(.22,1,.36,1);
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.cozy-share-title {
  font-size: 1rem;
  font-weight: 900;
  color: var(--brown);
  margin-bottom: 1.1rem;
  text-align: center;
}
.cozy-share-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}
.cozy-share-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .85rem .5rem;
  border-radius: var(--r);
  background: var(--cream-2);
  border: 2px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, border-color .18s, transform .15s;
  font-size: .75rem;
  font-weight: 800;
  color: var(--brown);
}
.cozy-share-opt:hover { background: var(--cream-3); border-color: var(--burg); transform: translateY(-2px); color: var(--brown); }
.cozy-share-opt-icon { font-size: 1.6rem; line-height: 1; }
.cozy-share-copy {
  width: 100%;
  display: flex;
  gap: .5rem;
  align-items: center;
}
.cozy-share-copy input {
  flex: 1;
  padding: .6rem .9rem;
  border: 2px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .82rem;
  color: var(--brown);
  background: var(--cream);
  font-family: var(--font);
}
.cozy-share-copy-btn {
  padding: .6rem 1rem;
  background: var(--burg);
  color: var(--white);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-weight: 800;
  font-size: .8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s;
}
.cozy-share-copy-btn:hover { background: var(--burg-dark); }
.cozy-share-close {
  display: block;
  width: 100%;
  margin-top: .85rem;
  padding: .7rem;
  background: none;
  border: 2px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: .84rem;
  font-weight: 700;
  color: var(--brown-2);
  cursor: pointer;
  transition: background .18s;
}
.cozy-share-close:hover { background: var(--cream-2); }

/* ── Print: only print the pattern card ── */
@media print {
  body > *:not(#main-content) { display: none !important; }
  #site-header, #site-footer,
  .fp2-header, .fp-floats,
  .fp2-above-fold, .fp2-section,
  .fp2-author, .fp2-newsletter-inline,
  .fp2-article-img, .fp2-share-bar,
  .fp2-related, .fp2-cta-banner,
  .fp2-mobile-sidebar,
  .fp2-bigcard-nav,
  .fp2-progress-wrap,
  .fp2-sec-done-label,
  .fp2-finish-wrap { display: none !important; }
  .fp2-body, .fp2-layout, .fp2-main-col {
    max-width: 100% !important;
    padding: 0 !important;
    display: block !important;
  }
  .fp2-bigcard { border: none !important; box-shadow: none !important; }
  .fp2-bigcard-section { padding: 1rem 0 !important; }
  .fp2-round-row { break-inside: avoid; }
}

@media (max-width: 860px) {
  .fp2-article-img { margin: 1rem 0 1.5rem; }
  .cozy-share-options { grid-template-columns: repeat(3, 1fr); }
}

/* ── Pinterest follow button — same design, darker red ── */
.sidebar-pin-btn--follow {
  background: #ad081b;
  margin-top: .45rem;
}
.sidebar-pin-btn--follow:hover { background: #8b0616; }

/* ════════════════════════════════════════
   v5.0 FINAL FIXES
════════════════════════════════════════ */

/* ── bigcard-nav: not sticky on mobile (causes floating pill issue) ── */
@media (max-width: 860px) {
  .fp2-bigcard-nav {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
  }
  /* Pattern info sidebar widget — show as inline block, not floating */
  .fp2-bigcard {
    overflow: visible;
  }
}

/* ── Round row done: burgundy not green ── */
.fp2-round-done { background: rgba(123,28,58,.06) !important; border-color: var(--burg-light) !important; }
.fp2-round-done .fp2-round-lbl { color: var(--burg) !important; text-decoration: line-through; text-decoration-color: rgba(123,28,58,.4); }
.fp2-round-done .fp2-round-check { color: var(--burg) !important; opacity: 1; transform: scale(1); }
.fp2-round-row:not(.fp2-round-done):hover .fp2-round-check { color: var(--burg) !important; }

/* ── Section: prevent async-CSS layout shift ── */
/* Already in critical.css — ensure style.css matches */
.section { padding: 5rem 0; }
@media (max-width: 860px) { .section { padding: 3rem 0; } }
@media (max-width: 540px) { .section { padding: 2.5rem 0; } }

/* ── Pinterest follow btn ── */
.sidebar-pin-btn + .sidebar-pin-btn { margin-top: .45rem; }
.sidebar-pin-btn--follow { background: #ad081b !important; }
.sidebar-pin-btn--follow:hover { background: #8b0616 !important; }

/* ── fp2-body: consistent max-width everywhere ── */
.fp2-body { max-width: 1100px !important; }

/* ── Accessibility: anchor links must be focusable ── */
a:focus-visible { outline: 3px solid var(--burg); outline-offset: 3px; border-radius: 4px; }
.fp2-bsnav-pill:focus-visible,
.sidebar-product:focus-visible,
.fp2-share-btn:focus-visible { outline: 3px solid var(--burg); outline-offset: 3px; }


/* ── Mobile Pattern Info collapsible ── */
.fp2-mob-info-toggle {
  width: 100%;
  background: var(--burg);
  color: var(--white);
  border: none;
  border-radius: var(--r);
  padding: .75rem 1rem;
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  transition: background .18s;
}
.fp2-mob-info-toggle:hover { background: var(--burg-dark); }
.fp2-mob-toggle-icon { transition: transform .25s; font-size: .75rem; }
.fp2-mob-info-toggle.open .fp2-mob-toggle-icon { transform: rotate(180deg); }
.fp2-mob-info-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.22,1,.36,1);
}
.fp2-mob-info-body.open {
  max-height: 400px;
}

/* ════════════════════════════════════════
   v7.0 FIXES
════════════════════════════════════════ */

/* ── bigcard-nav: NEVER sticky on mobile ── */
@media (max-width: 1024px) {
  .fp2-bigcard-nav {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
  }
}

/* ── Round row done: full line strikethrough, site color ── */
.fp2-round-done {
  background: rgba(123,28,58,.06) !important;
  border-color: var(--burg-light, #9E3358) !important;
}
.fp2-round-done .fp2-round-lbl {
  color: var(--burg) !important;
  text-decoration: line-through;
  text-decoration-color: rgba(123,28,58,.5);
}
.fp2-round-done .fp2-round-txt {
  text-decoration: line-through;
  text-decoration-color: rgba(123,28,58,.3);
  opacity: .6;
}
.fp2-round-done .fp2-round-check {
  color: var(--burg) !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}
.fp2-round-check { color: var(--burg) !important; }
.fp2-round-row:not(.fp2-round-done):hover .fp2-round-check {
  opacity: .25 !important;
  color: var(--burg) !important;
}

/* ── Universal done state for ALL card items ── */
.fp2-item-done {
  background: rgba(123,28,58,.06) !important;
  border-color: var(--burg-light, #9E3358) !important;
  position: relative;
}
.fp2-item-done * {
  text-decoration: line-through !important;
  text-decoration-color: rgba(123,28,58,.4) !important;
  opacity: .6;
}
.fp2-item-done .fp2-mat-num,
.fp2-item-done .fp2-abbrev-num,
.fp2-item-done .fp2-asm-tick {
  opacity: 1 !important;
  text-decoration: none !important;
  background: var(--burg) !important;
  color: var(--white) !important;
}
/* Checkmark after done */
.fp2-item-done::after {
  content: '✓';
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%) scale(1);
  font-size: .9rem;
  color: var(--burg);
  font-weight: 900;
}
/* Hover hint */
.fp2-mat-item:not(.fp2-item-done):hover,
.fp2-abbrev-item:not(.fp2-item-done):hover,
.fp2-asm-row:not(.fp2-item-done):hover,
.fp2-note-card:not(.fp2-item-done):hover {
  border-color: var(--burg) !important;
  transform: translateX(3px);
}

/* ── Pinterest Follow btn = same design as Save, darker red ── */
.sidebar-pin-btn--follow {
  background: #ad081b !important;
}
.sidebar-pin-btn--follow:hover { background: #8b0616 !important; }

/* ── v8.0 fixes ── */
/* Remove floating sticky nav pill on mobile */
@media (max-width: 900px) {
  .fp2-bigcard-nav {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    display: none !important; /* hide nav pills on mobile — content scrolls naturally */
  }
}

/* Pinterest Follow btn — same design as Save, just slightly darker red */
.sidebar-pin-btn--follow {
  background: #c0001d !important;
}
.sidebar-pin-btn--follow:hover {
  background: #960018 !important;
}