/*
Theme Name: CSYCB
Theme URI: https://coolshityoucanbuy.com
Author: CSYCB
Description: Custom theme for Cool Sh*t You Can Buy, built around the csycb_product post type and product_category taxonomy.
Version: 1.0.0
Text Domain: csycb
*/



  :root {
    --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --color-bg: #ffffff;
    --color-bg-card: #ffffff;
    --color-bg-alt: #f7f7f7;
    --color-text: #161616;
    --color-text-muted: #6f6f6f;
    --color-red: #DB0120;
    --color-red-dark: #AF011A;
    --color-pink: #fdeaec;
    --color-pink-strong: #f9d2d7;
    --color-black: #111111;
    --color-border: #ececec;
    --color-placeholder-a: #f1e4d8;
    --color-placeholder-b: #e9eef2;
  }


  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  /* Anything showing below the footer (a gap left by a plugin or ad script,
     or the Mac/iPhone bounce when scrolling past the bottom) shows the
     footer's black instead of a white strip. The top half stays white so
     bouncing past the top of the page still looks normal. */
  html { background: linear-gradient(to bottom, #ffffff 50%, var(--color-black) 50%); }
  footer.site-footer { flex-shrink: 0; margin-bottom: 0; }
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  /* Pushes the footer to the bottom of the viewport on short pages (like a
     no-results search), while still being pushed further down naturally by
     taller pages — the standard "sticky footer" layout pattern. */
  main { flex: 1 0 auto; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; }
  img, svg { max-width: 100%; display: block; }

  .wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ---------- Header ---------- */
  header.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
  }
  .header-row {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .logo-block { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; cursor: pointer; border: none; background: none; padding: 0; margin: 0; }
  .logo-svg { display: block; height: 34px; width: 93px; flex-shrink: 0; }
  .logo-text {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--color-red);
    letter-spacing: 0.5px;
  }
  .logo-sub {
    font-size: 10.5px;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-top: 3px;
    letter-spacing: 0.2px;
  }

  nav.primary-nav {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.3px;
    color: var(--color-text);
    white-space: nowrap;
    background: none;
    border: none;
    padding: 6px 2px;
    position: relative;
  }
  .nav-link svg { width: 15px; height: 15px; flex-shrink: 0; }
  .nav-link.active { color: var(--color-red); }
  .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -8px;
    height: 2px;
    background: var(--color-red);
  }

  .nav-item { position: relative; }
  .nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 12px;
    min-width: 170px;
    z-index: 50;
  }
  .nav-dropdown-inner {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
    padding: 8px 0;
  }
  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown { display: block; }
  .nav-dropdown a {
    display: block;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
  }
  .nav-dropdown a:hover { background: var(--color-bg-alt); color: var(--color-red); }

  .header-actions { display: flex; align-items: center; gap: 14px; }
  .icon-btn {
    background: none; border: none;
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    color: var(--color-text);
    border-radius: 50%;
    transition: background .15s ease;
  }
  .icon-btn:hover { background: var(--color-bg-alt); }
  .icon-btn svg { width: 19px; height: 19px; }
  .hamburger-btn { display: none; }

  /* ---------- Search overlay (full-page takeover) ---------- */
  .search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 200;
    align-items: center;
    justify-content: center;
  }
  .search-overlay.open { display: flex; }
  .search-overlay-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
  }
  .search-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    width: 100%;
    max-width: 520px;
    padding: 24px;
    text-align: center;
  }
  .search-overlay-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    margin: 0;
    color: var(--color-text);
  }
  .search-overlay-input {
    width: 100%;
    max-width: 340px;
    border: none;
    outline: none;
    background: transparent;
    text-align: center;
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-red);
    caret-color: var(--color-red);
    padding: 6px 0;
  }
  .search-overlay-input:focus-visible { outline: none; }
  .search-overlay-input::placeholder { color: var(--color-border); }
  .search-overlay-btn {
    background: var(--color-black);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 15px 32px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.2px;
  }
  .search-overlay-btn:hover { opacity: 0.85; }
  .search-overlay-cancel {
    background: none;
    border: none;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: var(--color-text);
    padding: 4px;
  }
  .search-overlay-cancel:hover { color: var(--color-red); }

  /* ---------- Banner ---------- */
  .promo-banner {
    background: var(--color-pink);
    text-align: center;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-red);
  }

  /* Header search icon in brand red. */
  .header-actions #searchToggle { color: var(--color-red); }

  /* ---------- Mobile menu overlay ---------- */
  .mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    transform: translateX(100%);
    transition: transform .3s ease;
  }
  .mobile-menu.open { transform: translateX(0); }
  .mobile-menu-close {
    align-self: flex-end;
    background: none; border: none;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text);
  }
  .mobile-menu-close svg { width: 24px; height: 24px; }
  .mobile-nav-list {
    list-style: none;
    padding: 0; margin: 20px 0 0 0;
    display: flex; flex-direction: column; align-items: center;
    gap: 30px;
    width: 100%;
  }
  .mobile-nav-list a,
  .mobile-nav-list button {
    background: none; border: none;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: 0.3px;
    color: var(--color-text);
    display: flex; align-items: center; gap: 10px;
  }
  .mobile-nav-list a.accent,
  .mobile-nav-list button.accent { color: var(--color-red); }
  .mobile-nav-list a svg,
  .mobile-nav-list button svg { width: 20px; height: 20px; flex-shrink: 0; }
  .mobile-nav-list .about a { color: inherit; font-weight: inherit; }
  .mobile-nav-list .about {
    color: var(--color-text-muted);
    font-weight: 700;
    margin-top: 20px;
  }
  .mobile-nav-list hr {
    width: 100%;
    border: none;
    border-top: 1px solid var(--color-border);
  }

  /* ---------- Main / hero copy ---------- */
  main { max-width: 1240px; margin: 0 auto; padding: 28px 24px 0; }

  .page-intro {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
  }
  .page-intro h1 {
    font-family: var(--font-display);
    font-size: 22px;
    margin: 0;
    letter-spacing: 0.3px;
  }
  .random-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none;
    color: var(--color-red);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.2px;
  }
  .random-btn svg { width: 15px; height: 15px; }

  /* ---------- Grid ---------- */
  /* Fixed column counts (not responsive auto-fill) so the number of columns
     per row is predictable — matches the same breakpoints already used by
     .related-section below. With auto-fill, the column count could be any
     number depending on the exact browser width, which made it essentially
     impossible for a fixed-size batch of loaded items to ever end on a
     complete row. Fixed counts don't make this perfect (ad cards interleaved
     every 6th item still won't always divide evenly), but they make it
     consistent and far less random than before. */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    gap: 22px;
    align-items: start;
    padding-bottom: 10px;
  }
  @media (max-width: 1024px) and (min-width: 641px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 640px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    outline: none;
  }
  .card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-placeholder-a), var(--color-placeholder-b));
    display: flex; align-items: center; justify-content: center;
    font-size: 46px;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .card-media .card-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .card-media .featured-badge { z-index: 1; }
  .card:hover .card-media, .card:focus-visible .card-media {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  }
  /* Titles longer than 2 lines are cut off with "…". max-height backs up
     the line clamp in case another rule changes how the title displays. */
  .card-title {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    min-height: 2.7em;
    max-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
  /* Price sits above the title, so prices always line up directly under
     the images across a row. */
  .card-price {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    min-height: 1.35em; /* keeps the space even when a product has no price */
    color: var(--color-red);
  }
  .card.featured .card-price { font-size: 18px; margin-top: 14px; }
  .card.featured .card-media { font-size: 88px; }
  .card.featured .card-title { font-size: 15px; margin-top: 4px; min-height: 2.7em; max-height: 2.7em; }
  /* ---------- Featured block: featured card + its 2x2 sibling group ----------
     A CSS Grid spanning item doesn't reliably size to match auto-sized sibling
     tracks (its natural content height and the siblings' combined height rarely
     land on the same number). Rather than fight that, the featured card and its
     4 neighbors live in their own side-by-side layout, and the sibling grid
     stretches to exactly match the featured card's height — guaranteed by
     construction, not by measuring pixels after the fact. */
  .featured-block {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: stretch;
    margin-bottom: 22px;
  }
  .featured-block .card.featured {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .featured-siblings {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 22px;
  }
  .featured-siblings .card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .featured-siblings .card-media {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: unset;
  }
  @media (max-width: 640px) {
    .featured-block { grid-template-columns: 1fr; }
    /* Stacked on phones, the four small cards no longer have the big
       featured card beside them to stretch against, so their photo area
       collapsed to zero height. Give them normal square photos instead. */
    .featured-siblings { grid-template-rows: none; gap: 14px; }
    .featured-siblings .card { height: auto; }
    .featured-siblings .card-media { flex: none; aspect-ratio: 1 / 1; }
  }
  .featured-badge {
    position: absolute; top: 12px; left: 12px;
    background: var(--color-red);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    border-radius: 100px;
  }

  .ad-media {
    background: repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 10px, #eeeeee 10px, #eeeeee 20px) !important;
  }
  .ad-unit {
    display: block;
    width: 100%;
    height: 100%;
    border: 1.5px dashed #c9c9c9;
    border-radius: 6px;
    background: transparent;
    overflow: visible;
  }
  .ad-caption { color: var(--color-text-muted); margin-top: 10px; } /* same gap as image → price on product cards */

  .no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-muted);
    font-weight: 600;
  }

  .load-more-wrap { text-align: center; padding: 40px 0 60px; }
  .end-of-list-message {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--color-text, #111);
  }
  .end-of-list .pill-row { justify-content: center; }
  .end-of-list-suggestion {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0 0 16px;
  }
  /* ---------- Skeleton loading cards (shown briefly while Load More fetches) ---------- */
  .skeleton-shimmer {
    background: linear-gradient(90deg, #ececec 25%, #f5f5f5 37%, #ececec 63%);
    background-size: 400% 100%;
    animation: csycb-shimmer 1.4s ease infinite;
  }
  @keyframes csycb-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
  }

  /* Placeholder bars match the real card: short price line, then title */
  .skeleton-card .skeleton-text {
    height: 14px;
    border-radius: 4px;
    margin-top: 10px;
    width: 70%;
  }
  .skeleton-card .skeleton-price { width: 28%; height: 15px; }
  .skeleton-card .skeleton-title { margin-top: 8px; }

  .load-more-btn {
    background: var(--color-black);
    color: #fff;
    border: none;
    font-weight: 800;
    letter-spacing: 0.4px;
    font-size: 13.5px;
    padding: 14px 30px;
    border-radius: 100px;
    transition: transform .12s ease, opacity .15s ease;
  }
  .load-more-btn:hover { transform: translateY(-1px); }
  .load-more-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

  /* ---------- Newsletter ---------- */
  .newsletter {
    background: var(--color-pink);
    padding: 34px 24px;
    text-align: center;
  }
  .newsletter h2 {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 16px;
    letter-spacing: 0.2px;
  }
  .newsletter-form {
    display: flex;
    max-width: 420px;
    margin: 0 auto;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .newsletter-form input {
    flex: 1 1 220px;
    padding: 13px 20px;
    border-radius: 100px;
    border: 1.5px solid var(--color-pink-strong);
    font-family: var(--font-body);
    font-size: 13.5px;
    background: var(--color-bg);
    color: var(--color-text);
  }
  .newsletter-form button {
    background: var(--color-red);
    color: #fff;
    border: none;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.4px;
    padding: 13px 24px;
    border-radius: 100px;
  }
  /* iPhones zoom the whole page when you tap a field with text under 16px. */
  @media (max-width: 640px) {
    .newsletter-form input { font-size: 16px; }
  }
  /* The note sits the same 16px below the email field as the heading sits
     above it. The message line takes no space until there's something to
     say ("Thanks!", an error), so it doesn't push the note further away. */
  .newsletter-note { margin: 16px 0 0; font-size: 12px; color: var(--color-text-muted); }
  .newsletter-note a { color: inherit; text-decoration: underline; }
  .newsletter-msg { margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--color-red-dark); }
  .newsletter-msg:empty { display: none; }
  .newsletter-msg:not(:empty) + .newsletter-note { margin-top: 8px; }

  /* ---------- Footer ---------- */
  footer.site-footer {
    background: var(--color-black);
    color: #d8d8d8;
    padding: 44px 24px 26px;
  }
  /* 1192px = the page's 1240px max-width minus its 24px side padding, so
     the footer lines up exactly with the content above it. */
  .footer-inner {
    max-width: 1192px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
  }
  .footer-brand { max-width: 220px; }
  .footer-logo-svg { height: 30px; width: 82px; display: block; }
  /* Footer social icons: clean solid brand glyphs in white, no circles.
     Each icon is drawn with a CSS mask, matched by where the link goes. */
  .footer-social { display: flex; gap: 22px; margin-top: 20px; align-items: center; }
  .footer-social a {
    width: 22px; height: 22px;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .15s ease;
  }
  .footer-social a:hover, .footer-social a:focus-visible { opacity: 0.7; }
  .footer-social svg { width: 20px; height: 20px; }
  .footer-social a[href*="facebook"],
  .footer-social a[aria-label*="acebook" i] {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='nonzero' d='M24 12.07C24 5.41 18.63 0 12 0S0 5.41 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.8-4.7 4.54-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.5c-1.5 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.5h-2.8V24C19.62 23.1 24 18.1 24 12.07'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='nonzero' d='M24 12.07C24 5.41 18.63 0 12 0S0 5.41 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.8-4.7 4.54-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.5c-1.5 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.5h-2.8V24C19.62 23.1 24 18.1 24 12.07'/%3E%3C/svg%3E") center / contain no-repeat;
    background-color: currentColor;
  }
  .footer-social a[href*="facebook"] svg,
  .footer-social a[aria-label*="acebook" i] svg { display: none; }
  .footer-social a[href*="instagram"],
  .footer-social a[aria-label*="nstagram" i] {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.72 3.72 0 0 1-1.38-.9 3.72 3.72 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.88 5.88 0 0 0-2.13 1.38A5.88 5.88 0 0 0 .63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.72 1.46 1.38 2.13a5.88 5.88 0 0 0 2.13 1.38c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.88 5.88 0 0 0 2.13-1.38 5.88 5.88 0 0 0 1.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.88 5.88 0 0 0-1.38-2.13A5.88 5.88 0 0 0 19.86.63C19.1.33 18.22.13 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.72 3.72 0 0 1-1.38-.9 3.72 3.72 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.88 5.88 0 0 0-2.13 1.38A5.88 5.88 0 0 0 .63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.72 1.46 1.38 2.13a5.88 5.88 0 0 0 2.13 1.38c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.88 5.88 0 0 0 2.13-1.38 5.88 5.88 0 0 0 1.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.88 5.88 0 0 0-1.38-2.13A5.88 5.88 0 0 0 19.86.63C19.1.33 18.22.13 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z'/%3E%3C/svg%3E") center / contain no-repeat;
    background-color: currentColor;
  }
  .footer-social a[href*="instagram"] svg,
  .footer-social a[aria-label*="nstagram" i] svg { display: none; }
  .footer-social a[href*="youtube"],
  .footer-social a[href*="youtu.be"],
  .footer-social a[aria-label*="ouTube" i] {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.5A3.02 3.02 0 0 0 .5 6.19C0 8.07 0 12 0 12s0 3.93.5 5.81a3.02 3.02 0 0 0 2.12 2.14c1.88.5 9.38.5 9.38.5s7.5 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.81zM9.55 15.57V8.43L15.82 12l-6.27 3.57z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.5A3.02 3.02 0 0 0 .5 6.19C0 8.07 0 12 0 12s0 3.93.5 5.81a3.02 3.02 0 0 0 2.12 2.14c1.88.5 9.38.5 9.38.5s7.5 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.81zM9.55 15.57V8.43L15.82 12l-6.27 3.57z'/%3E%3C/svg%3E") center / contain no-repeat;
    background-color: currentColor;
  }
  .footer-social a[href*="youtube"] svg,
  .footer-social a[href*="youtu.be"] svg,
  .footer-social a[aria-label*="ouTube" i] svg { display: none; }
  .footer-social a[href*="x.com"],
  .footer-social a[href*="twitter"],
  .footer-social a[aria-label="X" i],
  .footer-social a[aria-label*="witter" i] {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='nonzero' d='M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.47l8.6-9.83L0 1.15h7.6l5.24 6.93 6.06-6.93zm-1.29 19.5h2.04L6.48 3.24H4.3l13.31 17.41z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='nonzero' d='M18.9 1.15h3.68l-8.04 9.19L24 22.85h-7.41l-5.8-7.58-6.64 7.58H.47l8.6-9.83L0 1.15h7.6l5.24 6.93 6.06-6.93zm-1.29 19.5h2.04L6.48 3.24H4.3l13.31 17.41z'/%3E%3C/svg%3E") center / contain no-repeat;
    background-color: currentColor;
  }
  .footer-social a[href*="x.com"] svg,
  .footer-social a[href*="twitter"] svg,
  .footer-social a[aria-label="X" i] svg,
  .footer-social a[aria-label*="witter" i] svg { display: none; }
  /* Desktop: all categories in one row, spread evenly across the space. */
  .footer-cols {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    column-gap: 24px;
  }
  .footer-col h4 {
    font-size: 11.5px; letter-spacing: 0.4px;
    color: #fff; margin: 0 0 14px;
  }
  .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
  .footer-col a { font-size: 12.5px; color: #b8b8b8; }
  .footer-col a:hover { color: #fff; }
  .footer-bottom {
    max-width: 1192px; margin: 34px auto 0;
    border-top: 1px solid #262626;
    padding-top: 18px;
    font-size: 11.5px; color: #7a7a7a;
  }

  /* Whatever wraps the copyright text, line it up with the divider above. */
  /* Copyright on its own line; Amazon statement left, policy links right. */
  .footer-bottom {
    display: grid; grid-template-columns: 1fr auto;
    column-gap: 24px; row-gap: 8px; align-items: center;
  }
  /* Copyright left, policy links right, on one line. The Amazon
     statement is hidden here because it already appears under every
     product and on the Affiliate Disclosure page. */
  .footer-bottom p { margin: 0; }
  .footer-bottom > p:not(:first-child) { display: none; }
  .footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; }
  @media (max-width: 640px) {
    .footer-bottom { grid-template-columns: 1fr; }
    .footer-links { justify-content: flex-start; margin-top: 4px; }
  }
  .footer-links a { color: #b8b8b8; text-decoration: none; }
  .footer-links a:hover { color: #fff; }

  /* Narrower screens: categories flow into balanced newspaper-style
     columns, so short lists (Oddities, Wearable) tuck in neatly instead
     of leaving gaps beside long ones. */
  @media (max-width: 1100px) {
    .footer-cols { display: block; column-count: 4; column-gap: 24px; }
    /* inline-block + padding (not margin) stops Safari carrying spacing
       over to the top of the next column, which pushed it down. */
    .footer-col {
      display: inline-block; width: 100%; vertical-align: top;
      break-inside: avoid; -webkit-column-break-inside: avoid;
      margin: 0; padding-bottom: 28px;
    }
  }
  @media (max-width: 960px) {
    .footer-inner { grid-template-columns: 1fr; gap: 30px; }
    .footer-cols { column-count: 3; }
  }
  @media (max-width: 640px) {
    .footer-cols { column-count: 2; column-gap: 16px; }
  }

  /* Load more: a quick wiggle every 3 seconds to catch the eye. The 3s
     animation sits still for most of the cycle and wiggles at the end. */
  @keyframes csycb-wiggle {
    0%, 82%, 100% { transform: rotate(0); }
    85% { transform: rotate(-4deg); }
    88% { transform: rotate(4deg); }
    91% { transform: rotate(-3deg); }
    94% { transform: rotate(2deg); }
    97% { transform: rotate(-1deg); }
  }
  .load-more-btn { display: inline-block; animation: csycb-wiggle 3s ease-in-out infinite; }
  .load-more-btn:hover, .load-more-btn:focus-visible { animation-play-state: paused; }
  /* Respect people who've asked their device for less motion. */
  @media (prefers-reduced-motion: reduce) {
    .load-more-btn { animation: none; }
  }

  /* ---------- Responsive ---------- */
  /* grid-template-columns: repeat(auto-fill, 276px) already reflows column count on its own */
  @media (max-width: 960px) {
    nav.primary-nav { display: none; }
    .hamburger-btn { display: flex; }
    .product-grid { gap: 14px; }
    .card.featured .card-media { font-size: 46px; }
    .card.featured .card-title { font-size: 13px; margin-top: 2px; }
    .card.featured .card-price { font-size: 15px; margin-top: 10px; }
  }

  :focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }


  /* ===== Category view styles ===== */
/* ---------- Category intro ---------- */
  .category-intro { text-align: center; max-width: 720px; margin: 0 auto 28px; }
  .category-intro h1 {
    font-family: var(--font-display);
    font-size: 26px;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .category-intro p { font-size: 14px; line-height: 1.7; color: var(--color-text-muted); margin: 0; }
  /* Desktop: more room around the title and description. */
  @media (min-width: 861px) {
    .category-intro { padding: 28px 0 16px; margin-bottom: 40px; }
    .category-intro h1 { margin-bottom: 18px; }
    /* When subcategory pills follow, keep them close to the description
       and put the big gap after the pills instead. */
    .category-intro:has(+ .pill-row) { padding-bottom: 0; margin-bottom: 18px; } /* = title-to-description gap */
    .category-intro + .pill-row { margin-bottom: 56px; }
  }

  /* ---------- Subcategory pills ---------- */
  .pill-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin: 0 auto 32px;
    max-width: 900px;
  }
  .pill {
    border: 1.5px solid var(--color-red);
    color: var(--color-red);
    background: none;
    border-radius: 100px;
    padding: 8px 20px;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.3px;
  }
  .pill:hover { background: var(--color-pink); }
  .pill.active { background: var(--color-red); color: #fff; }
  .pill-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin: 0 auto 32px;
    max-width: 900px;
  }
  .pill {
    border: 1.5px solid var(--color-red);
    color: var(--color-red);
    background: none;
    border-radius: 100px;
    padding: 8px 20px;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.3px;
  }
  .pill:hover { background: var(--color-pink); }
  .pill.active { background: var(--color-red); color: #fff; }


  /* ===== Product view styles ===== */
/* ---------- Breadcrumb row ---------- */
  .breadcrumb-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
  }
  .breadcrumb {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px;
    color: var(--color-text-muted);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .breadcrumb a { color: var(--color-text-muted); }
  .breadcrumb a:hover { color: var(--color-text); }
  .breadcrumb .current { color: var(--color-red); }

  /* ---------- Product hero ---------- */
  .product-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 22px;
    margin-bottom: 22px;
  }
  /* gallery-more is a separate full-width section that follows product-hero
     entirely (not nested inside it) — this makes its two tiles each the
     same width as the main hero image (both are ~50% of the full content
     width), and means it naturally appears after all the product info on
     mobile too, just from normal document order, with no reordering CSS needed. */
  .gallery-tile {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--color-placeholder-a), var(--color-placeholder-b));
    display: flex; align-items: center; justify-content: center;
    font-size: 120px;
    overflow: hidden;
    cursor: pointer;
  }
  .gallery-more {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 22px;
    margin-bottom: 36px;
  }
  .product-info h1 {
    font-family: var(--font-display);
    font-size: 27px;
    line-height: 1.2;
    margin: 0 0 12px;
  }
  @media (min-width: 861px) {
    .product-info h1 { font-size: 38px; }
  }
  .product-tags { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
  .product-tags span, .product-tags a { color: var(--color-red); font-weight: 700; font-size: 13px; }
  .product-tags a { text-decoration: none; }
  .product-tags a:hover { text-decoration: underline; }
  .product-price { font-size: 19px; font-weight: 700; margin-bottom: 20px; }
  .cta-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
  }
  .cta-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    background: var(--color-red); color: #fff;
    border: none; border-radius: 100px;
    padding: 15px 20px;
    font-weight: 800; font-size: 14px; letter-spacing: 0.2px;
    text-align: center;
  }
  @media (min-width: 861px) {
    .cta-btn { width: 50%; }
  }
  .cta-btn:hover { background: var(--color-red-dark); }
  .cta-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
  .disclosure-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 12px; }
  .disclosure-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.4; }
  .disclosure-list svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--color-text-muted); }

  /* ---------- Description ---------- */
  .description-section { margin: 8px 0 36px; }
  .description-section h2 {
    font-family: var(--font-display);
    font-size: 19px;
    margin: 0 0 14px;
  }
  .description-section p { font-size: 14px; line-height: 1.7; color: var(--color-text); margin: 0 0 14px; }

  /* ---------- Banner ad ---------- */
  .banner-ad {
    width: 100%;
    min-height: 116px;
    box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px;
    margin: 0 auto 48px;
  }
  .banner-ad-unit {
    display: block;
    width: 100%;
    min-height: 90px;
    border-radius: 10px;
    border: 1.5px dashed #c9c9c9;
    background: repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 10px, #eeeeee 10px, #eeeeee 20px);
  }
  .banner-ad-caption {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--color-text-muted);
    text-align: center;
  }

  /* ---------- Section headings for related grids ---------- */
  .section-heading {
    font-family: var(--font-display);
    font-size: 20px;
    margin: 0 0 20px;
  }
  .related-section { margin-bottom: 44px; }
  /* These two grids use FIXED column counts (not fluid auto-fill) so the number of
     items shown always exactly matches the number of columns rendered — no orphans. */
  .related-section .product-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .related-section .product-grid > *:nth-child(n+6) { display: none; }
  @media (max-width: 1024px) and (min-width: 641px) {
    .related-section .product-grid { grid-template-columns: repeat(3, 1fr); }
    .related-section .product-grid > *:nth-child(n+4) { display: none; }
  }
  @media (max-width: 640px) {
    .related-section .product-grid { grid-template-columns: repeat(2, 1fr); }
    .related-section .product-grid > *:nth-child(n+5) { display: none; }
  }
  @media (max-width: 860px) {
    /* Main image on top, product info below — gallery-more is a separate
       section entirely now, so it naturally follows after everything else
       here just from normal document order, no reordering needed.
       align-items must be stretch here (not the desktop "start") — the
       image has no width of its own and needs the full-width stretch to
       size against, otherwise it collapses to nothing. */
    .product-hero {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
  }
  @media (max-width: 620px) {
    .breadcrumb { font-size: 11px; }
    .random-btn { font-size: 11px; }
    .random-btn svg { width: 13px; height: 13px; }
  }
  @media (max-width: 480px) {
    .breadcrumb-row .random-btn { display: none; }
  }



  /* ===== Desktop mega menu (Jitter-style rollover) =====
     Desktop only: under 961px the nav is hidden and the mobile menu takes over.
     A small script in inc/mega-menu.php adds .nav-hover (and .mega-open when
     a panel is showing) to the header and .is-active to the hovered .nav-item. The panel stays open while the mouse
     is anywhere in the header or panel, and only its content swaps as you
     move between categories. Keyboard focus works via :focus-within. */
  .mega-panel { display: none; }

  @media (min-width: 961px) {
    :root { --header-h: 96px; --mega-tile: 170px; }

    /* Taller header; the nav stretches to full height */
    .header-row { min-height: var(--header-h); padding-top: 0; padding-bottom: 0; align-items: stretch; }
    .logo-block, .header-actions { align-self: center; }
    nav.primary-nav { align-self: stretch; }
    .nav-item { display: flex; align-items: center; position: static; }
    .nav-link.active::after { bottom: -6px; }

    /* Old small dropdown is replaced by the mega panel on desktop */
    .nav-item .nav-dropdown { display: none !important; }

    /* Rollover: siblings fade to grey, the active item turns red */
    .nav-link { transition: color .15s ease; }
    .site-header.nav-hover .nav-link,
    nav.primary-nav:has(.nav-item:focus-within) .nav-link { color: #b5b5b5; }
    .site-header .nav-item.is-active > .nav-link,
    nav.primary-nav .nav-item:focus-within > .nav-link { color: var(--color-red); }
    .nav-item.is-active > .nav-link::after,
    .nav-item:focus-within > .nav-link::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
      height: 2px; background: var(--color-red);
    }

    /* Hide the header's bottom line while the panel is open */
    .site-header.mega-open,
    .site-header.mega-closing,
    header.site-header:has(.nav-item:focus-within) { border-bottom-color: transparent; }

    /* One panel per category, stacked in the same spot. Only the active one
       is shown, and switching between them is instant, so it reads as one
       constant panel whose content changes. */
    .mega-panel {
      display: none;
      position: absolute; left: 0; right: 0; top: 100%;
      z-index: 50;
      isolation: isolate; /* keeps the ::before background behind the content */
    }
    /* The white background lives on ::before so it can grow on its own
       without squashing the products. */
    .mega-panel::before {
      content: '';
      position: absolute; inset: 0; z-index: -1;
      background: #fff;
      border-radius: 0 0 20px 20px;
      box-shadow: 0 24px 48px -18px rgba(0,0,0,0.22);
      transform-origin: 50% 0;
    }
    .nav-item.is-active > .mega-panel,
    .nav-item.is-closing > .mega-panel,
    .nav-item:focus-within > .mega-panel { display: block; }

    /* --- Open: background grows out from the middle of the screen --- */
    .site-header.mega-opening .mega-panel::before {
      animation: csycb-mega-grow .38s cubic-bezier(.2, .8, .2, 1) both;
    }
    @keyframes csycb-mega-grow {
      from { transform: scale(.35, .15); opacity: 0; border-radius: 0 0 40px 40px; }
      60%  { opacity: 1; }
      to   { transform: none; opacity: 1; }
    }

    /* --- Products drift up softly one after another, only when the panel
       first opens. Switching category swaps them in without animation. --- */
    .site-header.mega-opening .nav-item.is-active .mega-products .card {
      animation: csycb-mega-pop .6s cubic-bezier(.22, 1, .36, 1) both .12s;
    }
    .site-header.mega-opening .nav-item.is-active .mega-products .card:nth-child(2) { animation-delay: .19s; }
    .site-header.mega-opening .nav-item.is-active .mega-products .card:nth-child(3) { animation-delay: .26s; }
    @keyframes csycb-mega-pop {
      from { opacity: 0; transform: translateY(10px) scale(.98); }
      to   { opacity: 1; transform: none; }
    }

    /* --- Close: content fades, background shrinks back to the middle --- */
    .site-header.mega-closing .mega-panel::before {
      animation: csycb-mega-shrink .22s cubic-bezier(.4, 0, .6, 1) both;
    }
    @keyframes csycb-mega-shrink {
      from { transform: none; opacity: 1; }
      to   { transform: scale(.35, .15); opacity: 0; }
    }
    .site-header.mega-closing .mega-inner {
      animation: csycb-mega-fade-out .12s ease both;
    }
    @keyframes csycb-mega-fade-out {
      to { opacity: 0; transform: translateY(6px); }
    }

    .mega-inner {
      max-width: 1240px; margin: 0 auto;
      padding: 28px 24px 32px;
      display: grid;
      /* Both columns size to their content, so the products + sub-categories
         sit as one group in the exact centre of the panel */
      grid-template-columns: max-content max-content;
      justify-content: center;
      align-items: start; /* top sub-category lines up with the top of the cards */
      gap: 96px; /* space between the products and the sub-categories */
    }
    /* One row of 3 smaller tiles. The min-height keeps every panel the same
       height, so the panel doesn't jump when a category has fewer products. */
    .mega-products {
      display: grid;
      grid-template-columns: repeat(3, var(--mega-tile));
      gap: 18px;
      align-items: start;
      min-height: calc(var(--mega-tile) + 44px);
    }
    /* Cards reuse the grid's .card / .card-media / .card-title styles */
    .mega-products .card-price { margin-top: 8px; font-size: 13px; }
    .mega-products .card-title { font-size: 13px; margin-top: 2px; }

    .mega-side {
      display: flex; flex-direction: column; align-items: flex-start;
    }
    .mega-subs { list-style: none; margin: -7px 0 18px; padding: 0; } /* -7px cancels the first link's top padding */
    .mega-subs a {
      display: block; padding: 7px 0;
      font-size: 15px; font-weight: 600; color: var(--color-text);
      transition: color .15s ease;
    }
    .mega-subs a:hover { color: var(--color-red); }
    .mega-side .pill { display: inline-block; white-space: nowrap; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mega-panel::before, .mega-inner, .mega-products .card { animation: none !important; }
    .nav-link { transition: none !important; }
  }

  /* No Random button on the homepage (it stays on category pages and in the mobile menu) */
  body.home .random-btn { display: none; }


  /* ===== Wishlist ===== */
  /* Heart in the top-right of each card image */
  .fav-btn {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    color: var(--color-text);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .fav-btn svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round;
    transition: fill .15s ease, stroke .15s ease;
  }
  .fav-btn:hover { transform: scale(1.08); background: #fff; }
  .fav-btn:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }
  .fav-btn.is-on { color: var(--color-red); }
  .fav-btn.is-on svg { fill: var(--color-red); }
  .fav-btn.just-added { animation: csycb-heart-pop .4s ease; }
  @keyframes csycb-heart-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
  }
  /* Bigger heart on the product page's main image */
  .gallery-main { position: relative; }
  .fav-btn--hero { top: 16px; right: 16px; width: 44px; height: 44px; }
  .fav-btn--hero svg { width: 22px; height: 22px; }
  /* Mega menu tiles are small, so no heart there */
  .mega-products .fav-btn { display: none; }

  /* Header heart, left of search, with a count badge */
  .wishlist-link { position: relative; color: var(--color-red); }
  .wishlist-count {
    position: absolute; top: 0; right: -2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 100px;
    background: var(--color-red); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  }
  .wishlist-count[hidden] { display: none; }

  /* Toast */
  .csycb-toast {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 1000;
    transform: translate(-50%, 20px);
    opacity: 0; pointer-events: none;
    background: var(--color-black); color: #fff;
    padding: 13px 22px; border-radius: 100px;
    font-size: 14px; font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    white-space: nowrap;
    transition: opacity .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
  }
  .csycb-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  .csycb-toast a { color: #fff; text-decoration: underline; margin-left: 10px; }

  /* Your Wishlist page */
  .card.is-removing { opacity: 0; transform: scale(.96); transition: opacity .25s ease, transform .25s ease; }
  .wishlist-empty { text-align: center; padding: 24px 0 64px; }
  .wishlist-empty[hidden], #wishlistGrid[hidden] { display: none; }
  .wishlist-empty svg { width: 44px; height: 44px; color: var(--color-red); }
  .wishlist-empty h2 { font-size: 20px; margin: 12px 0 8px; }
  .wishlist-empty p { color: var(--color-text-muted); font-size: 14px; margin: 0 0 22px; }
  .wishlist-empty .pill { display: inline-block; }

  @media (prefers-reduced-motion: reduce) {
    .fav-btn, .fav-btn.just-added, .csycb-toast, .card.is-removing { animation: none; transition: none; }
  }

  /* Wishlist email / sync box (matches the pink newsletter strip) */
  .wishlist-sync {
    background: var(--color-pink);
    border-radius: 14px;
    padding: 18px 22px;
    margin: 0 auto 36px;
    max-width: 900px;
  }
  .wishlist-sync-form,
  .wishlist-sync-linked {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px 28px; flex-wrap: wrap;
  }
  .wishlist-sync-form[hidden], .wishlist-sync-linked[hidden] { display: none; }
  .wishlist-sync-text { flex: 1 1 280px; font-size: 13.5px; line-height: 1.5; color: var(--color-text-muted); }
  .wishlist-sync-text strong { display: block; color: var(--color-text); font-size: 15px; margin-bottom: 2px; }
  .wishlist-sync-fields { display: flex; gap: 8px; flex: 1 1 360px; }
  .wishlist-sync-fields input {
    flex: 1; min-width: 0;
    padding: 12px 18px;
    border-radius: 100px;
    border: 1.5px solid var(--color-pink-strong);
    font-family: var(--font-body); font-size: 13.5px;
    background: var(--color-bg); color: var(--color-text);
  }
  .wishlist-sync-fields button {
    background: var(--color-red); color: #fff; border: none;
    font-weight: 800; font-size: 12.5px; letter-spacing: 0.4px;
    padding: 12px 20px; border-radius: 100px; white-space: nowrap; cursor: pointer;
  }
  .wishlist-sync-actions { display: flex; align-items: center; gap: 16px; }
  .wishlist-sync-actions .pill { cursor: pointer; }
  .wishlist-unlink {
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: var(--font-body); font-size: 12.5px;
    color: var(--color-text-muted); text-decoration: underline;
  }
  .wishlist-sync-msg { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--color-red-dark); }
  .wishlist-sync-msg:empty { display: none; }
  @media (max-width: 640px) {
    .wishlist-sync-fields { flex-direction: column; }
    .wishlist-sync-fields input { font-size: 16px; } /* stops iPhone zooming in */
  }

  /* Wishlist page: same space under the last row of products as the grid
     has above the "Load more" button on other pages (.load-more-wrap's 40px) */
  #wishlistGrid { margin-bottom: 40px; }

  /* Social proof under the price on product pages */
  .social-proof {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    margin: -8px 0 20px; /* tucks up under the price */
    font-size: 14px; font-weight: 600;
    color: var(--color-text-muted);
  }
  .social-proof[hidden] { display: none; }
  .social-proof-item { display: inline-flex; align-items: center; gap: 6px; }
  .social-proof-item svg { width: 16px; height: 16px; color: var(--color-red); flex-shrink: 0; }

  /* ===== Normal pages (policies, About…) — page.php ===== */
  .page-content { max-width: 760px; margin: 0 auto; padding: 8px 0 64px; }
  .page-title {
    font-size: 34px; font-weight: 800; letter-spacing: 0.3px;
    text-transform: uppercase; text-align: center;
    margin: 12px 0 32px;
  }
  .page-body { font-size: 16px; line-height: 1.7; color: var(--color-text); }
  .page-body > * + * { margin-top: 0; }
  .page-body p { margin: 0 0 16px; }
  .page-body h2 { font-size: 22px; font-weight: 800; margin: 40px 0 12px; }
  .page-body h3 { font-size: 18px; font-weight: 700; margin: 28px 0 10px; }
  .page-body ul, .page-body ol { margin: 0 0 16px; padding-left: 22px; }
  .page-body li { margin-bottom: 6px; }
  .page-body a { color: var(--color-red); text-decoration: underline; text-underline-offset: 2px; }
  .page-body em { color: var(--color-text-muted); }
  .page-body .wp-block-table { margin: 8px 0 20px; overflow-x: auto; }
  .page-body table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
  .page-body th, .page-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
  .page-body th { font-weight: 700; background: var(--color-pink); }
  .page-body img { max-width: 100%; height: auto; border-radius: 12px; }
  @media (max-width: 640px) {
    .page-title { font-size: 26px; margin-bottom: 24px; }
    .page-body { font-size: 15px; }
    .page-body h2 { font-size: 19px; margin-top: 32px; }
  }


  /* AdSense: when Google has no ad for a space, hide the space instead of
     leaving an empty striped box (inc/adsense.php) */
  .ad-card:has(ins.adsbygoogle[data-ad-status="unfilled"]),
  .banner-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
  .ad-unit ins.adsbygoogle, .banner-ad-unit ins.adsbygoogle { border-radius: 6px; overflow: hidden; }
  .ad-unit:has(ins.adsbygoogle[data-ad-status="filled"]),
  .banner-ad-unit:has(ins.adsbygoogle[data-ad-status="filled"]) { border: none; background: none; }

  /* Product banner ad: a tidy 90px strip */
  .banner-ad { min-height: 0; }
  .banner-ad-unit:has(ins.csycb-ad--banner) { min-height: 90px; max-height: 90px; overflow: hidden; }
  /* Grid ads: plain white behind a filled ad instead of the striped placeholder */
  .ad-media:has(ins.adsbygoogle[data-ad-status="filled"]) { background: #fff !important; }