/* QuiltPatternsPDF.Com — storefront styles (edit colours here, they apply site-wide) */
:root {
  --cream: #faf6ee;
  --cream-dark: #f3ecdd;
  --navy: #26466e;
  --navy-dark: #1d3555;
  --coral: #d9593f;
  --gold-bg: #fff3d6;
  --ink: #222222;
  --grey: #666666;
  --white: #ffffff;
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  /* v3 readable type: clean system sans (Ko-fi-style), larger base size. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  background: #ffffff;
  color: #1a1a1a;
  line-height: 1.6;
}
a { color: var(--navy); }
h1, h2, h3 { color: var(--navy); line-height: 1.25; }
h1 { font-size: 2.4rem; margin: 0.2em 0; }
h2 { font-size: 1.7rem; margin-top: 1.6em; }
h3 { font-size: 1.25rem; }

/* Header */
header {
  background: var(--white);
  border-bottom: 3px solid var(--navy);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.logo { height: 56px; width: auto; flex-shrink: 0; }
.brand { font-size: 1.35rem; font-weight: bold; color: var(--navy); text-decoration: none; white-space: nowrap; }
.brand small { display: block; font-size: 0.8rem; color: var(--grey); font-weight: normal; white-space: nowrap; }
nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
nav a { white-space: nowrap; }
nav a { text-decoration: none; font-weight: bold; color: var(--navy); }
nav a:hover { color: var(--coral); }

/* Layout */
main { max-width: 1000px; margin: 0 auto; padding: 20px; }
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: center;
  padding: 20px 0 30px;
}
.hero img { width: 100%; border-radius: var(--radius); border: 2px solid var(--navy); }
.tagline { font-size: 1.2rem; color: var(--grey); }
.rainbow { height: 10px; display: flex; margin: 0; }
.rainbow span { flex: 1; }

/* Buttons */
.btn {
  display: inline-block;
  background: #ffdd00;
  color: #111111;
  text-decoration: none;
  font-weight: bold;
  padding: 13px 26px;
  border-radius: 999px;
  margin-top: 10px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.btn:hover { background: #f2d200; }
.btn-secondary { background: var(--navy); color: #ffffff; }
.btn-secondary:hover { background: var(--coral); color: #ffffff; }
.price { font-size: 1.8rem; font-weight: bold; color: var(--navy); }

/* Cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.card {
  background: var(--white);
  border: 1px solid #e3dcc8;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; }
.card-body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.card-body p { flex: 1; }
.card .price { font-size: 1.3rem; }
.coming-soon { opacity: 0.75; }
.badge {
  display: inline-block;
  background: var(--gold-bg);
  border-left: 4px solid var(--coral);
  padding: 6px 10px;
  font-weight: bold;
  font-size: 0.95rem;
}

/* Product page */
.product { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 30px; align-items: start; }
.product img.main-img { width: 100%; border-radius: var(--radius); border: 2px solid var(--navy); }
.product img.second-img { width: 100%; border-radius: var(--radius); margin-top: 14px; }
table { width: 100%; border-collapse: collapse; margin: 12px 0; }
th { background: var(--navy); color: var(--white); text-align: left; padding: 10px; }
td { padding: 10px; border-bottom: 1px solid #e3dcc8; }
tr:nth-child(even) td { background: var(--cream-dark); }
.check {
  background: var(--gold-bg);
  border-left: 4px solid var(--coral);
  padding: 12px 16px;
  font-weight: bold;
}
.note { background: #eaf0f7; border-left: 4px solid var(--navy); padding: 12px 16px; }

/* Forms */
form { max-width: 560px; }
label { display: block; font-weight: bold; margin-top: 14px; }
input, textarea {
  width: 100%;
  padding: 11px;
  margin-top: 4px;
  border: 1px solid #cbbfa5;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
button.btn { border: none; cursor: pointer; font-size: 1rem; }
.small { font-size: 0.9rem; color: var(--grey); }

/* Ko-fi-style profile header + shop rows */
.profile-hero {
  text-align: center;
  background: var(--white);
  border: 1px solid #e3dcc8;
  border-radius: var(--radius);
  padding: 28px 20px;
  margin-top: 20px;
}
.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--navy);
  background: var(--white);
}
.followers { color: var(--grey); font-weight: bold; margin: 0; }
.tabs { display: flex; gap: 24px; border-bottom: 2px solid #e3dcc8; margin-top: 24px; }
.tabs a { text-decoration: none; font-weight: bold; padding: 10px 2px; color: var(--grey); }
.tabs a.active { color: var(--navy); border-bottom: 3px solid var(--coral); }
.shop-list { display: flex; flex-direction: column; gap: 16px; }
.shop-row {
  display: flex;
  gap: 18px;
  align-items: center;
  background: var(--white);
  border: 1px solid #e3dcc8;
  border-radius: var(--radius);
  padding: 16px;
}
.shop-row img { width: 140px; height: 140px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.shop-info { flex: 1; }
.shop-info h3 { margin: 0 0 6px; }
.shop-info p { margin: 4px 0; }
.digital-badge {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-size: 0.8rem;
  padding: 2px 10px;
  border-radius: 999px;
  margin-right: 8px;
}
.shop-action { text-align: right; flex-shrink: 0; }
.shop-action .price { display: block; margin-bottom: 8px; }

/* Buy Me a Coffee-style support card */
.coffee-card {
  max-width: 560px;
  margin: 28px auto 0;
  background: var(--white);
  border: 1px solid #e3dcc8;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.coffee-card h2 { margin-top: 0; }
.amount-pills { display: flex; gap: 10px; margin: 12px 0; }
.amount-pills button {
  flex: 1;
  border: 2px solid #e3dcc8;
  background: var(--white);
  border-radius: 999px;
  padding: 11px 0;
  font-size: 1.05rem;
  font-weight: bold;
  cursor: pointer;
}
.amount-pills button.selected { background: #ffdd00; border-color: #111111; }

footer {
  border-top: 3px solid var(--navy);
  margin-top: 40px;
  padding: 20px;
  text-align: center;
  color: var(--grey);
  font-size: 0.95rem;
}
footer a { color: var(--navy); }

@media (max-width: 700px) {
  .hero, .product { grid-template-columns: 1fr; }
  h1 { font-size: 1.9rem; }
  .logo { height: 44px; }
  .brand { font-size: 1.15rem; }
  .brand small { font-size: 0.7rem; }
  nav { margin-left: 0; gap: 14px; }
  .shop-row { flex-direction: column; align-items: stretch; }
  .shop-row img { width: 100%; height: auto; aspect-ratio: 1; }
  .shop-action { text-align: left; }
}

/* ---- v2 shop additions: admin, cart, analytics, affiliate ---- */
.admin-note { background: #fff3d6; border-left: 4px solid #d9593f; padding: 12px 16px; }
.field-hint { font-size: 0.9rem; color: #666; margin-top: 2px; }
.chip { display: inline-block; background: #eaf0f7; border-radius: 999px; padding: 4px 12px; margin: 4px 4px 0 0; font-size: 0.95rem; }
.variant-row { display: grid; grid-template-columns: 1fr 110px 1fr 180px 40px; gap: 8px; align-items: end; margin-top: 8px; }
.variant-row input { margin-top: 0; }
.variant-row button { border: none; background: #eee; border-radius: 8px; cursor: pointer; padding: 11px 0; }
.btn-small { padding: 8px 16px; font-size: 0.9rem; }
.btn-danger { background: #999; }
.btn-disabled { background: #ddd; color: #666; cursor: default; box-shadow: none; }
select { width: 100%; padding: 11px; border: 1px solid #cbbfa5; border-radius: 8px; font-size: 1rem; font-family: inherit; background: #fff; }
.cart-link { position: relative; }
.cart-count {
  display: inline-block; background: #d9593f; color: #fff; border-radius: 999px;
  min-width: 22px; text-align: center; font-size: 0.85rem; padding: 1px 6px; font-weight: bold;
}
.empty-cart { text-align: center; border: 1px solid #e3dcc8; border-radius: 14px; padding: 32px 20px; margin: 20px 0; }
/* Analytics CSS bars (no chart library needed) */
.bar-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.bar-label { width: 110px; flex-shrink: 0; font-size: 0.95rem; }
.bar-track { flex: 1; background: #f3ecdd; border-radius: 999px; height: 18px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: #5b9bd5; }
.bar-value { width: 40px; text-align: right; font-weight: bold; }
@media (max-width: 700px) {
  .variant-row { grid-template-columns: 1fr; }
  .variant-row button { width: 100%; }
  .bar-label { width: 90px; }
}

/* ---- v3 additions: product page, share block, discounts, admin ---- */
.shop-info h3 a, .card-body h3 a { text-decoration: none; color: var(--navy); }
.shop-info h3 a:hover, .card-body h3 a:hover { text-decoration: underline; }
.seller-line { color: var(--grey); font-weight: bold; margin-top: -8px; }
.buy-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 12px 0; }
.buy-row form { max-width: none; }
.buy-row .btn { margin-top: 0; }
.share-block {
  border: 1px solid #e3dcc8;
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 28px 0;
}
.share-block h2 { margin-top: 0; }
.share-block .btn { margin: 4px 6px 4px 0; }
.discount-box {
  border: 1px solid #e3dcc8;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 20px 0;
  background: var(--cream);
}
.discount-box h2 { margin-top: 0; }
.admin-thumb {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 8px; vertical-align: middle; margin-right: 10px;
}
.date-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.date-filter label { margin-top: 0; }
.date-filter input { width: auto; }
@media (max-width: 700px) {
  body { font-size: 17px; }
  .buy-row { flex-direction: column; }
  .buy-row .btn { width: 100%; text-align: center; }
}

/* ---- v3.1 additions: installable app + phone-friendly dashboard/upload ---- */
/* Horizontally scrollable wrapper for wide dashboard tables (phones). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Affiliate link display: long URLs wrap instead of overflowing. */
#aff-link-display { display: inline-block; max-width: 100%; word-break: break-all; }
@media (max-width: 700px) {
  /* Product-link generator: full-width, easy-to-tap copy button. */
  .aff-link-row .btn, .js-copy-link { width: 100%; text-align: center; }
  #aff-link-display { display: block; margin-bottom: 10px; }
  /* Admin product upload: every field and file picker already full-width;
     keep action buttons comfortably tappable on phones. */
  form .btn { min-height: 48px; }
}

/* ---- v3.2 product search bar ---- */
.search-bar { display: flex; gap: 10px; align-items: center; max-width: 100%; margin: 0 0 16px; }
.search-bar input { margin-top: 0; flex: 1; }
.search-bar .btn { margin-top: 0; white-space: nowrap; }
@media (max-width: 700px) {
  .search-bar { flex-wrap: wrap; }
  .search-bar input { flex-basis: 100%; }
}

/* ---- v3.4 sale price display: orange sale price, struck original, pink % OFF pill ---- */
.sale-price { font-size: 1.8rem; font-weight: bold; color: #e85d2f; }
.was-price { font-size: 1.2rem; color: #888888; text-decoration: line-through; margin-left: 8px; }
.off-badge { display: inline-block; background: #e8436b; color: #ffffff; font-size: 0.95rem; font-weight: bold; padding: 4px 14px; border-radius: 999px; margin-left: 10px; white-space: nowrap; }

/* v3.5: sans-serif everywhere, no exceptions — headings, brand, nav, prices
   all use the same clean system sans as the body. */
h1, h2, h3, h4, h5, h6, .brand, .brand small, nav a, .price, .tagline {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---- v3.7 product page (screenshot design) + other-items cards ---- */
/* Buy buttons side by side on phones too (they used to stack full-width). */
@media (max-width: 700px) {
  .buy-row { flex-direction: row; }
  .buy-row .btn { width: auto; padding: 13px 14px; font-size: 0.95rem; }
}

/* Photo dots under the main product image; tap a dot to switch photos. */
.gallery-dots { text-align: center; margin-top: 12px; }
.gallery-dot { width: 12px; height: 12px; border-radius: 50%; border: none; background: #d8d2c4; margin: 0 4px; padding: 0; cursor: pointer; }
.gallery-dot.active { background: var(--navy); }

/* Four selling-point tiles under the buy buttons. */
.feature-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0; }
.feature-tile { text-align: center; padding: 8px 4px; border-left: 1px solid #e3dcc8; }
.feature-tile:first-child { border-left: none; }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; font-size: 26px; margin-bottom: 8px; }
.feature-tile strong { display: block; font-size: 0.95rem; color: var(--navy); line-height: 1.3; }
.feature-tile span:last-child { font-size: 0.85rem; color: var(--grey); line-height: 1.4; }
@media (max-width: 700px) {
  .feature-icon { width: 48px; height: 48px; font-size: 22px; }
  .feature-tile strong { font-size: 0.85rem; }
  .feature-tile span:last-child { font-size: 0.8rem; }
}

/* License box under the description. */
.license-box { background: #eaf0f7; border-radius: 12px; padding: 14px 16px; }

/* Other-items cards: buy buttons + secure line (screenshot 2 card style). */
.card-buy { display: flex; gap: 10px; margin-top: 12px; }
.card-buy > form, .card-buy > span.btn { flex: 1 1 0; max-width: none; }
.card-buy .btn { width: 100%; text-align: center; margin-top: 0; }
.card-body .card-secure { flex: none; margin: 10px 0 0; text-align: center; }

/* ---- v3.7.3: bigger Buy now (60/40 like screenshot 1), SVG line icons, tighter tile spacing ---- */
.buy-row > form:first-of-type { flex: 2 1 0; }
.buy-row > form:last-of-type, .buy-row > span.btn { flex: 3 1 0; }
.buy-row .btn { width: 100%; text-align: center; }
.buy-row .btn-buy { padding: 16px 26px; font-size: 1.05rem; }
.btn svg.btn-icon { width: 22px; height: 22px; vertical-align: -4px; margin-right: 8px; }
.card-buy svg.btn-icon { width: 18px; height: 18px; vertical-align: -3px; }
.feature-tile strong { line-height: 1.25; }
.feature-tile span:last-child { line-height: 1.35; }
.feature-icon { margin-bottom: 6px; }
@media (max-width: 700px) {
  .buy-row .btn { padding: 13px 12px; }
  .buy-row .btn-buy { padding: 14px 16px; font-size: 1rem; }
}

/* ---- v3.7.4: home listings without descriptions, one-line price rows, bold Buy now ---- */
.btn-buy { padding: 16px 26px; font-size: 1.05rem; font-weight: 800; }
.price-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.shop-action .price-row { justify-content: flex-end; }
.shop-action .price-row .price { margin-bottom: 0; }
.card-body .price-row .off-badge { margin-left: auto; }
.shop-action .sale-price, .card-body .sale-price { font-size: clamp(1.15rem, 5.2vw, 1.5rem); }
.shop-action .was-price, .card-body .was-price { font-size: clamp(0.9rem, 3.8vw, 1.05rem); }
.shop-action .off-badge, .card-body .off-badge { font-size: clamp(0.75rem, 3.2vw, 0.85rem); padding: 3px 10px; }
.shop-buy { display: flex; gap: 10px; margin-top: 12px; }
.shop-buy > form, .shop-buy > span.btn { flex: 1 1 0; max-width: none; }
.shop-buy > form:first-of-type { flex: 2 1 0; }
.shop-buy > form:last-of-type, .shop-buy > span.btn { flex: 3 1 0; }
.shop-buy .btn { width: 100%; text-align: center; margin-top: 0; padding: 13px 10px; font-size: 0.95rem; }
.shop-buy .btn-buy { padding: 14px 16px; }
.card-buy > form:last-of-type .btn { font-weight: 800; }
@media (max-width: 700px) {
  .btn-buy { padding: 14px 16px; font-size: 1rem; }
  .shop-action .price-row { justify-content: flex-start; }
}

/* ---- v3.7.5: tighter professional rhythm, tiles fit phones, red heart ---- */
/* Cards: tighter padding and margins (browser-default h3/p margins were loose). */
.card-body { padding: 12px 14px 16px; }
.card-body h3 { margin: 0 0 4px; }
.card-body p { margin: 6px 0; }
.card-body .price-row { flex: none; }
.card-buy { margin-top: 10px; }
.card-body .card-secure { margin: 8px 0 0; }
/* Tiles: never overflow the screen — columns may shrink and long words break. */
.feature-tile { min-width: 0; overflow-wrap: break-word; }
.gallery-dots { margin-top: 8px; }
@media (max-width: 700px) {
  .shop-row { padding: 12px; gap: 12px; }
  .shop-info h3 { margin: 0 0 4px; }
  .product { gap: 20px; }
  .product h1 { margin-top: 0; }
  .feature-tiles { gap: 6px; }
  .feature-icon { width: 44px; height: 44px; font-size: 20px; }
  .feature-tile strong { font-size: 0.8rem; }
  .feature-tile span:last-child { font-size: 0.75rem; }
}

/* ---- v3.7.6: compact cart — small thumbs, everything on one phone screen ---- */
.cart-list { gap: 10px; }
.cart-row { padding: 10px 12px; gap: 12px; align-items: center; flex-direction: row; }
.cart-row img { width: 64px; height: 64px; border-radius: 8px; }
.cart-row .shop-info h3 { font-size: 1rem; margin: 0 0 2px; }
.cart-row .shop-info p { margin: 2px 0; font-size: 0.85rem; }
.cart-row .shop-action { text-align: right; }
.cart-row .shop-action .price { font-size: 1.15rem; margin-bottom: 2px; }
.cart-row .shop-action p { margin: 2px 0; }
.cart-row .btn-danger { padding: 4px 10px; font-size: 0.8rem; }
.discount-box { padding: 10px 12px; margin: 12px 0; }
.discount-box p { margin: 4px 0; font-size: 0.9rem; }
.cart-line { margin: 4px 0; }
.cart-total { margin: 8px 0; }
.cart-total .price { font-size: 1.4rem; }
.cart-footer { margin-top: 12px; }
.cart-checkout { display: block; width: 100%; text-align: center; margin-top: 0; padding: 15px; font-size: 1.05rem; }
.cart-footer-links { display: flex; gap: 10px; margin-top: 10px; }
.cart-footer-links > form, .cart-footer-links > a { flex: 1 1 0; max-width: none; }
.cart-footer-links .btn { width: 100%; text-align: center; margin-top: 0; }

/* ---- v3.7.7: tile icon colour + tighter, aligned subtitle lines ---- */
/* Subtitle lines sit tighter together. */
.feature-tile span:last-child { line-height: 1.3; }
@media (max-width: 700px) {
  /* Titles share one height (3 lines) so every subtitle starts on the same
     line — the row no longer looks ragged when one title wraps longer. */
  .feature-tile strong { min-height: 3.75em; }
}

/* ---- v3.7.8: cart footer buttons exactly equal width ---- */
/* flex:1 alone let the longer "Continue shopping" label take more than half.
   An explicit half-minus-half-the-gap basis plus min-width:0 locks both
   buttons to exactly the same width. */
.cart-footer-links > form, .cart-footer-links > a { flex: 1 1 calc(50% - 5px); min-width: 0; }

/* ---- v3.7.9: footer button labels perfectly centred ---- */
/* Flex centring (instead of relying on text-align alone) centres the label
   exactly, horizontally and vertically, in both the link button and the
   real button. */
.cart-footer-links .btn { display: flex; align-items: center; justify-content: center; }

/* ---- v3.7.12: compact phone homepage — first product image half-visible on load ---- */
/* On phones the hero, tabs, Shop heading and stacked search bar pushed the
   first product image below the fold (only a sliver showed). Tighten only the
   vertical rhythm above the first card — no content removed, desktop untouched. */
@media (max-width: 700px) {
  .profile-hero { padding: 14px 16px; margin-top: 12px; }
  .profile-hero .avatar { width: 88px; height: 88px; }
  .profile-hero h1 { font-size: 1.5rem; margin: 10px 0 6px; }
  .profile-hero p { font-size: 0.95rem; line-height: 1.5; margin: 0; }
  .tabs { margin-top: 12px; }
  .tabs a { padding: 8px 2px; }
  #shop h2 { margin-top: 0.7em; margin-bottom: 8px; }
  .search-bar { flex-wrap: nowrap; margin-bottom: 12px; }
  .search-bar input { flex-basis: auto; }
}

/* ---- v3.7.13: ShopBase-style analytics (cards, funnel, charts) ---- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.stat-card { background: var(--white); border: 1px solid #e3dcc8; border-radius: var(--radius); padding: 16px; }
.stat-num { display: block; font-size: 1.9rem; font-weight: bold; color: var(--navy); line-height: 1.2; }
.stat-label { display: block; font-size: 0.9rem; color: var(--grey); margin-top: 4px; }
.chart-box { background: var(--white); border: 1px solid #e3dcc8; border-radius: var(--radius); padding: 16px; margin: 16px 0; }
.chart-box h2, .chart-box h3 { margin-top: 0; }
.chart-svg { width: 100%; height: auto; display: block; }
.range-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.range-presets .btn { margin-top: 0; }
.funnel-step { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.funnel-label { flex: 0 0 130px; font-weight: bold; }
.funnel-track { flex: 1; height: 18px; background: #f1ede2; border-radius: 999px; overflow: hidden; }
.funnel-fill { display: block; height: 100%; background: #f5b301; border-radius: 999px; }
.funnel-value { flex: 0 0 44px; text-align: right; font-weight: bold; }
.funnel-pct { flex: 0 0 64px; text-align: center; font-size: 0.85rem; font-weight: bold; background: #fff3c4; color: #7a5b00; border-radius: 999px; padding: 2px 6px; }
.traffic-share { display: inline-block; width: 90px; height: 10px; background: #eef0f3; border-radius: 999px; overflow: hidden; vertical-align: middle; }
.traffic-share-fill { display: block; height: 100%; background: #2f9be8; }
@media (max-width: 700px) {
  .funnel-label { flex-basis: 96px; font-size: 0.9rem; }
  .stat-num { font-size: 1.6rem; }
}

/* ---- v3.7.14: ShopBase-style admin drawer menu ---- */
.admin-menu-btn { background: none; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--navy); padding: 4px 10px 4px 0; }
.admin-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90; }
.admin-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 280px; max-width: 85vw; background: #ffffff; box-shadow: 2px 0 16px rgba(0,0,0,.25); transform: translateX(-105%); transition: transform .25s; z-index: 91; overflow-y: auto; padding: 16px 12px 24px; }
body.admin-drawer-open .admin-drawer { transform: translateX(0); }
body.admin-drawer-open .admin-overlay { opacity: 1; pointer-events: auto; }
body.admin-drawer-open { overflow: hidden; }
.admin-drawer-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; border-bottom: 1px solid #eee7d8; margin-bottom: 12px; }
.admin-drawer-brand img { width: 44px; height: 44px; object-fit: contain; }
.admin-drawer-brand strong { display: block; }
.admin-drawer-brand small { color: var(--grey); }
.admin-menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 10px; color: #333; text-decoration: none; font-size: 1.02rem; }
.admin-menu-item svg { flex: 0 0 22px; }
.admin-menu-item:hover { background: #f5f1e6; }
.admin-menu-item.active { color: #1d6fd1; background: #eaf3fd; font-weight: bold; }
.admin-menu-badge { margin-left: auto; background: #e8436b; color: #fff; font-size: 0.8rem; font-weight: bold; border-radius: 999px; padding: 2px 9px; }
.admin-menu-required { color: #e8436b; font-weight: bold; }

/* v3.7.58: desktop shop grid, homepage only (3 per row; header aligned to grid).
   v3.7.59: same grid shared with the affiliate dashboard (.aff-grid). Below 701px nothing here
   applies, so the phone layout is untouched. The affiliate dashboard
   shares the same grid through .aff-grid (v3.7.59). */
@media (min-width: 701px) {
  /* Wider homepage only — cart, checkout and product pages keep 1000px. */
  body.shop-page main { max-width: 1200px; }
  /* Header must match the grid width, else it sits inset from the cards. */
  body.shop-page .header-inner { max-width: 1200px; }
  body.aff-page main { max-width: 1200px; }
  body.aff-page .header-inner { max-width: 1200px; }
  .shop-grid, .aff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .shop-grid .shop-row, .aff-grid .shop-row { flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 16px; overflow: hidden; }
  .shop-grid .shop-row > a, .aff-grid .shop-row > a { display: block; }
  .shop-grid .shop-row img, .aff-grid .shop-row img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px 10px 0 0; }
  .shop-grid .shop-info, .aff-grid .shop-info { padding: 14px 14px 0; }
  .shop-grid .shop-action, .aff-grid .shop-action { text-align: left; padding: 12px 14px 0; margin-top: auto; }
  .shop-grid .shop-action .price-row, .aff-grid .shop-action .price-row { justify-content: flex-start; flex-wrap: wrap; }
  .shop-grid .shop-buy, .aff-grid .shop-buy { flex-direction: column; gap: 10px; }
  .shop-grid .shop-buy > form, .aff-grid .shop-buy > form, .shop-grid .shop-buy > span.btn, .aff-grid .shop-buy > span.btn { flex: none; width: 100%; }
  .shop-grid .shop-buy .btn, .aff-grid .shop-buy .btn { white-space: nowrap; }
}
@media (min-width: 1024px) {
  /* 3 products per row on a laptop/desktop screen. */
  .shop-grid, .aff-grid { grid-template-columns: repeat(3, 1fr); }
}

/* v3.7.60: Copy title / Download image / Posted on ONE line — phone and
   desktop alike. Compact sizing so all three fit a grid card and a phone. */
.aff-grid .aff-card-btns { display: flex; flex-wrap: nowrap; gap: 6px; margin: 12px 0 0; justify-content: center; }
.aff-grid .aff-card-btns .btn { margin-top: 0; padding: 8px 9px; font-size: 0.8rem; white-space: nowrap; }
@media (max-width: 400px) {
  .aff-grid .aff-card-btns { gap: 5px; }
  .aff-grid .aff-card-btns .btn { padding: 8px 7px; font-size: 0.75rem; }
}
@media (max-width: 340px) {
  /* Too narrow for one line on any sizing — wrap rather than overflow. */
  .aff-grid .aff-card-btns { flex-wrap: wrap; }
}

/* v3.7.73: product-page price line — sale price, struck price and OFF
   badge on one row, badge right beside the prices (it used to wrap
   onto its own line below them on phones). Sizes reuse the card
   clamps, so the row fits narrow screens; desktop caps match before. */
.price-line { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.price-line .sale-price { font-size: clamp(1.15rem, 5.2vw, 1.8rem); }
.price-line .was-price { font-size: clamp(0.9rem, 3.8vw, 1.2rem); margin-left: 0; }
.price-line .off-badge { margin-left: 0; font-size: clamp(0.75rem, 3.2vw, 0.95rem); padding: 3px 10px; }

@media (max-width: 700px) {
  /* v3.7.82: shop-card buttons on phones. The old 2:3 split squeezed
     "Add to cart" into 2/5 of the row, where its icon + text wrapped
     onto two lines. Equal halves + nowrap keep both buttons on one
     line. The desktop stacked layout is untouched. */
  .shop-buy > form:first-of-type, .shop-buy > form:last-of-type, .shop-buy > span.btn { flex: 1 1 0; }
  .shop-buy .btn { white-space: nowrap; }
}