/* dt-pillar.css - Layer-1 skin (Phase 2). GENERATED from the LIVE dt-product.css
   pillar-landing append block; consumes dt-core tokens. Enqueued on is_page()
   by 17-dt-pillar-css.php (priority 20, after core@5).
   Regenerate: python 34_Design_System/pipeline/build_dt_pillar.py
   Do NOT hand-edit; do NOT re-add hardcoded pillar hex (core --dt-* supplies them). */
/* Self-contained copy of .dt-section-divider (was product-section lines 122-142 in
   dt-product.css). Pillar/brand landings emit <div class="dt-section-divider"> and
   must keep it after dt-product.css stops loading on is_page(). */
.dt-section-divider{
  position:relative!important;
  width:240px!important;height:42px!important;
  margin:48px auto 48px!important;
  background:transparent!important;
  background-color:transparent!important;
  opacity:1!important;
  filter:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
.dt-section-divider .back,
.dt-section-divider .front{
  position:absolute;left:0;width:240px;height:30px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cpath d='M10 12 Q32.5 2 55 12 T100 12 T145 12 T190 12' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cpath d='M10 12 Q32.5 2 55 12 T100 12 T145 12 T190 12' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.dt-section-divider .back{top:6px;background-color:var(--pillar-border,#f48fb1);opacity:.9}
.dt-section-divider .front{top:0;background-color:var(--pillar,#c2185b);filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}

/* Discreet.toys pillar landing styles — extension to dt-product.css mu-plugin
 * Added 2026-05-19 for Phase 2A pillar landing redesign.
 * Append this block to the END of dt-product.css on the live server.
 */

/* Phase 2A pillar landing inline styles — discreet.toys 2026-05-19 */
.dt-pillar-her-landing{--pillar:var(--dt-her);--pillar-deep:var(--dt-her-deep);--pillar-bg:var(--dt-her-bg);--pillar-border:var(--dt-her-border);--pillar-hover:var(--dt-her-hover)}
.dt-pillar-his-landing{--pillar:var(--dt-his);--pillar-deep:var(--dt-his-deep);--pillar-bg:var(--dt-his-bg);--pillar-border:var(--dt-his-border);--pillar-hover:var(--dt-his-hover)}
.dt-pillar-couples-landing{--pillar:var(--dt-couples);--pillar-deep:var(--dt-couples-deep);--pillar-bg:var(--dt-couples-bg);--pillar-border:var(--dt-couples-border);--pillar-hover:var(--dt-couples-hover)}
.dt-pillar-backdoor-landing{--pillar:var(--dt-backdoor);--pillar-deep:var(--dt-backdoor-deep);--pillar-bg:var(--dt-backdoor-bg);--pillar-border:var(--dt-backdoor-border);--pillar-hover:var(--dt-backdoor-hover)}
.dt-pillar-kink-landing{--pillar:var(--dt-kink);--pillar-deep:var(--dt-kink-deep);--pillar-bg:var(--dt-kink-bg);--pillar-border:var(--dt-kink-border);--pillar-hover:var(--dt-kink-hover)}
.dt-pillar-wellness-landing{--pillar:var(--dt-wellness);--pillar-deep:var(--dt-wellness-deep);--pillar-bg:var(--dt-wellness-bg);--pillar-border:var(--dt-wellness-border);--pillar-hover:var(--dt-wellness-hover)}
.dt-pillar-gifts-landing{--pillar:var(--dt-gifts);--pillar-deep:var(--dt-gifts-deep);--pillar-bg:var(--dt-gifts-bg);--pillar-border:var(--dt-gifts-border);--pillar-hover:var(--dt-gifts-hover)}
.dt-pillar-lingerie-landing{--pillar:var(--dt-lingerie);--pillar-deep:var(--dt-lingerie-deep);--pillar-bg:var(--dt-lingerie-bg);--pillar-border:var(--dt-lingerie-border);--pillar-hover:var(--dt-lingerie-hover)}
.dt-pillar-landing{font-family:'Instrument Sans','Karla',system-ui,sans-serif}
.dt-pillar-landing h1,.dt-pillar-landing h2,.dt-pillar-landing h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400}
.dt-pillar-landing .dt-eyebrow{font-family:'Rosarivo','DM Serif Display',serif;font-style:italic;color:var(--pillar);font-size:20px;line-height:1;margin-bottom:6px;letter-spacing:.3px;display:block;text-align:center}
.dt-pillar-landing .dt-section-h2{color:#2c3e50;font-size:clamp(1.6rem,4vw,2.2rem);text-align:center;margin:18px 0 10px;padding-bottom:18px;position:relative}
.dt-pillar-landing .dt-section-h2::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:3px;background:linear-gradient(90deg,var(--pillar),var(--pillar-border));border-radius:3px}
.dt-pillar-landing .dt-section-sub{color:#475569;font-size:14px;text-align:center;margin:6px auto 30px;max-width:720px;padding:0 16px}
/* Hero */
.dt-pillar-landing .dt-hero{padding:90px 20px 70px;text-align:center;color:#fff;position:relative;min-height:520px;display:flex;align-items:center;justify-content:center}
.dt-pillar-landing .dt-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--pillar) 15%,#fff) 0%,var(--pillar-border) 40%,var(--pillar) 100%);z-index:0}
.dt-pillar-landing .dt-hero-inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.dt-pillar-landing .dt-hero-eyebrow{font-family:'Rosarivo','DM Serif Display',serif;font-style:italic;color:#fff;opacity:.9;font-size:22px;margin-bottom:14px}
.dt-pillar-landing .dt-hero h1{color:#fff!important;font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin:0 0 16px}
.dt-pillar-landing .dt-hero h1 em{font-style:italic;color:#fff}
.dt-pillar-landing .dt-hero-sub{color:rgba(255,255,255,.92);font-size:16px;max-width:520px;margin:0 auto 28px;line-height:1.6}
.dt-pillar-landing .dt-cta{display:inline-block;padding:14px 32px;background:#fff;color:var(--pillar-deep);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;border-radius:30px;transition:transform .2s,background .2s}
.dt-pillar-landing .dt-cta:hover{transform:translateY(-2px);background:#fff;color:var(--pillar-deep)}
.dt-pillar-landing .dt-cta+.dt-cta{background:transparent;color:#fff;border:2px solid #fff;margin-left:10px}
.dt-pillar-landing .dt-cta+.dt-cta:hover{background:#fff;color:var(--pillar-deep)}
/* Attribute grid */
.dt-pillar-landing .dt-attr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;max-width:1100px;margin:0 auto;padding:40px 20px}
.dt-pillar-landing .dt-attr-tile{text-align:center;text-decoration:none;color:inherit;display:block}
.dt-pillar-landing .dt-attr-circle{width:130px;height:130px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:40px;background:linear-gradient(135deg,color-mix(in srgb,var(--pillar) 6%,#fff) 0%,color-mix(in srgb,var(--pillar) 40%,#fff) 100%);color:var(--pillar);border:2px solid var(--gray-200,#eee);transition:transform .2s,box-shadow .2s,border-color .2s;box-shadow:0 3px 12px var(--pillar-bg);position:relative}
.dt-pillar-landing .dt-attr-circle.attr-free::after{content:'FREE';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background:#fff;color:var(--pillar);font-size:10px;font-weight:700;letter-spacing:1.5px;padding:3px 10px;border-radius:10px;border:1px solid var(--pillar);font-family:'Instrument Sans',sans-serif}
@media (hover:hover){.dt-pillar-landing .dt-attr-tile:hover .dt-attr-circle{transform:translateY(-4px);border-color:var(--pillar);box-shadow:0 12px 40px var(--pillar-hover)}}
.dt-pillar-landing .dt-attr-tile h3{font-family:'DM Serif Display',serif;font-size:17px;color:#2c3e50;margin:0 0 6px;font-weight:400}
.dt-pillar-landing .dt-attr-meta{font-size:11px;color:#777;text-transform:uppercase;letter-spacing:1px}
@media(max-width:768px){.dt-pillar-landing .dt-attr-grid{grid-template-columns:repeat(2,1fr);gap:24px 16px}}
/* Cat groups (parent + children with images) */
.dt-pillar-landing .dt-cat-groups{padding:30px 0 50px;max-width:1200px;margin:0 auto}
.dt-pillar-landing .dt-cat-group{margin:0 auto 40px;padding:0 16px}
.dt-pillar-landing .dt-cat-group+.dt-cat-group::before{content:'';display:block;width:160px;height:22px;margin:48px auto 28px;background-color:var(--pillar);opacity:.75;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22'%3E%3Cpath d='M6 11 Q26 1 46 11 T86 11 T126 11 T154 11' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%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 160 22'%3E%3Cpath d='M6 11 Q26 1 46 11 T86 11 T126 11 T154 11' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.dt-pillar-landing .dt-cat-group-head{text-align:center;margin-bottom:22px;padding-bottom:14px;max-width:70%;margin-left:auto;margin-right:auto;border-bottom:1px solid #efefef}
.dt-pillar-landing .dt-cat-group-eyebrow{font-family:'Rosarivo','DM Serif Display',serif;font-style:italic;color:var(--pillar);font-size:16px;margin-bottom:4px;letter-spacing:.3px}
.dt-pillar-landing .dt-cat-group-head h3{font-family:'DM Serif Display',serif;font-size:24px;color:#2c3e50;font-weight:400}
.dt-pillar-landing .dt-cat-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 20px}
.dt-pillar-landing .dt-cat-tile{flex:0 0 calc((100% - 5 * 20px)/6);max-width:150px;text-align:center;text-decoration:none;color:inherit;display:block}
.dt-pillar-landing .dt-cat-circle-img{width:100%;max-width:130px;aspect-ratio:1/1;border-radius:50%;margin:0 auto 14px;background-size:cover;background-position:center;background-color:var(--pillar-bg);border:2px solid #eee;transition:transform .2s,box-shadow .2s,border-color .2s;box-shadow:0 3px 12px var(--pillar-bg)}
@media (hover:hover){.dt-pillar-landing .dt-cat-tile:hover .dt-cat-circle-img{transform:translateY(-4px);border-color:var(--pillar);box-shadow:0 12px 40px var(--pillar-hover)}}
.dt-pillar-landing .dt-cat-name{font-size:14px;color:#2c3e50;font-weight:600;font-family:'Instrument Sans',sans-serif}
.dt-pillar-landing .dt-cat-count{font-size:11px;color:#777;margin-top:4px}
@media(max-width:1024px){.dt-pillar-landing .dt-cat-tile{flex-basis:calc((100% - 3 * 20px)/4);max-width:none}}
@media(max-width:768px){.dt-pillar-landing .dt-cat-tile{flex-basis:calc((100% - 20px)/2)}.dt-pillar-landing .dt-cat-group-head{max-width:90%}.dt-pillar-landing .dt-cat-group-head h3{font-size:19px}}
/* Brand spotlight */
.dt-pillar-landing .dt-brand-spotlight{display:grid;grid-template-columns:1fr 1fr;background:#fafafa;margin:50px auto;max-width:1200px}
.dt-pillar-landing .dt-brand-spotlight-img{min-height:380px;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#fff}
.dt-pillar-landing .dt-brand-spotlight-copy{padding:50px 40px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.dt-pillar-landing .dt-brand-spotlight-copy .dt-eyebrow{font-size:18px}
.dt-pillar-landing .dt-brand-spotlight-copy h2{font-family:'DM Serif Display',serif;font-size:32px;color:#2c3e50;margin:6px 0 14px}
.dt-pillar-landing .dt-brand-spotlight-copy h2 em{font-style:italic;color:var(--pillar)}
.dt-pillar-landing .dt-brand-spotlight-copy p{color:#475569;font-size:15px;line-height:1.6;margin-bottom:22px}
.dt-pillar-landing .dt-brand-cta{display:inline-block;padding:12px 28px;background:var(--pillar);color:#fff!important;border-radius:30px;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;align-self:center;transition:background .2s,transform .2s}
.dt-pillar-landing .dt-brand-cta:hover{background:var(--pillar-deep);color:#fff!important;transform:translateY(-2px)}
@media(max-width:1024px){.dt-pillar-landing .dt-brand-spotlight{grid-template-columns:1fr}.dt-pillar-landing .dt-brand-spotlight-img{aspect-ratio:auto;min-height:280px}}
/* SEO body — intro paragraph */
.dt-pillar-landing .dt-seo-body{max-width:920px;margin:30px auto 36px;padding:0 24px;text-align:center}
.dt-pillar-landing .dt-seo-body p{color:#475569;font-size:16px;line-height:1.75;margin-bottom:18px}
.dt-pillar-landing .dt-seo-body a{color:var(--pillar);font-weight:700;text-decoration:none}
.dt-pillar-landing .dt-seo-body a:hover{color:var(--pillar-deep);text-decoration:underline}
.dt-pillar-landing .dt-seo-body strong{color:#2c3e50}
/* 3 CTA boxes — pillar gradient */
.dt-pillar-landing .dt-cta-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:30px auto;padding:0 24px}
.dt-pillar-landing .dt-cta-box{background:linear-gradient(160deg,color-mix(in srgb,var(--pillar) 70%,#fff) 0%,color-mix(in srgb,var(--pillar) 92%,#000 8%) 100%);color:#fff;padding:30px 28px;border-radius:14px;text-align:left;display:flex;flex-direction:column;box-shadow:0 6px 22px color-mix(in srgb,var(--pillar),transparent 75%)}
.dt-pillar-landing .dt-cta-box .dt-cta-icon{font-size:28px;line-height:1;margin-bottom:10px}
.dt-pillar-landing .dt-cta-box h4{font-family:'DM Serif Display',serif;font-size:20px;font-weight:400;color:#fff;margin:0 0 10px;line-height:1.25}
.dt-pillar-landing .dt-cta-box p{color:rgba(255,255,255,.94);font-size:14px;line-height:1.55;margin:0 0 20px;flex:1}
.dt-pillar-landing .dt-cta-box a.dt-cta-btn{align-self:flex-start;padding:10px 22px;background:#fff;color:var(--pillar-deep)!important;border-radius:24px;font-size:13px;font-weight:600;text-decoration:none}
.dt-pillar-landing .dt-cta-box a.dt-cta-btn:hover{background:#fafafa;color:var(--pillar-deep)!important;text-decoration:none}
@media(max-width:1024px){.dt-pillar-landing .dt-cta-boxes{grid-template-columns:1fr;max-width:540px}}
/* Pill button sub-cat row */
.dt-pillar-landing .dt-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:28px auto 0;padding:0 24px}
.dt-pillar-landing .dt-pills a{padding:10px 22px;border:1.5px solid color-mix(in srgb,var(--pillar),#fff 50%);border-radius:26px;font-size:14px;color:var(--pillar-deep);font-weight:600;text-decoration:none;background:#fff;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.dt-pillar-landing .dt-pills a:hover{background:var(--pillar);color:#fff!important;border-color:var(--pillar)}
/* Trust strip — keep simple */
.dt-pillar-landing .dt-trust-row .dt-trust-tile{text-align:center;padding:20px}
.dt-pillar-landing .dt-trust-row .dt-trust-icon{font-size:30px;margin-bottom:10px;line-height:1}
.dt-pillar-landing .dt-trust-row h4{font-family:'DM Serif Display',serif;font-size:16px;color:#2c3e50;margin:0 0 6px;font-weight:400}
.dt-pillar-landing .dt-trust-row p{font-size:13px;color:#475569;margin:0}
/* PM-13 (2026-05-20) — pillar landing refinements per Josh review of test page 671284
 *
 *  Append this block to wp-content/mu-plugins/dt-product.css on the live server.
 *  All rules are .dt-pillar-landing-scoped so existing product-page CSS is unaffected.
 *
 *  Changes:
 *    1. Disable single-curl ::before divider (replaced by emit'd .dt-section-divider div)
 *    2. Style the .dt-promo-strip bar (was unstyled text)
 *    3. Convert .dt-attr-circle from full circle to oval pill (inline icon+label)
 *    4. Add 2-column grid layout to .dt-hero for right-side product image composite
 */

/* 1. Disable single-curl ::before divider (PM-11 leftover).
 * Payload now emits <div class="dt-section-divider"><div class="back"></div><div class="front"></div></div>
 * between cat-groups, which picks up the existing double-curl rule from lines 122-142.
 */
.dt-pillar-landing .dt-cat-group + .dt-cat-group::before { content: none !important; display: none !important; }

/* 2. Promo strip — styled bar (was: plain text rendering) */
.dt-pillar-landing .dt-promo-strip {
    background: var(--pillar-bg, #fce4ec);
    color: var(--pillar-deep, #4a0028);
    padding: 14px 24px;
    margin: 0;
    text-align: center;
    border-top: 2px solid var(--pillar-border, #f48fb1);
    border-bottom: 2px solid var(--pillar-border, #f48fb1);
    font-size: 15px;
    font-family: 'Instrument Sans', sans-serif;
    letter-spacing: .2px;
}
.dt-pillar-landing .dt-promo-strip strong {
    color: var(--pillar, #c2185b);
    margin-right: 8px;
    font-weight: 700;
}

/* 3. Attribute tiles — circle → oval pill */
.dt-pillar-landing .dt-attr-grid {
    grid-template-columns: repeat(4, auto) !important;
    justify-content: center !important;
    gap: 18px !important;
    max-width: none !important;
    padding: 36px 20px !important;
}
.dt-pillar-landing .dt-attr-tile {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 28px !important;
    background: #fff !important;
    border: 2px solid var(--pillar-border, #f48fb1) !important;
    border-radius: 40px !important;
    transition: transform .2s, background .2s, border-color .2s !important;
    text-decoration: none !important;
    color: inherit !important;
}
.dt-pillar-landing .dt-attr-tile:hover {
    background: var(--pillar-bg, #fce4ec) !important;
    border-color: var(--pillar, #c2185b) !important;
    transform: translateY(-2px) !important;
}
.dt-pillar-landing .dt-attr-circle {
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    font-size: 22px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
}
.dt-pillar-landing .dt-attr-tile h3 {
    margin: 0 !important;
    font-size: 14px !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    line-height: 1.2 !important;
}
.dt-pillar-landing .dt-attr-meta { display: none !important; }
.dt-pillar-landing .dt-attr-circle.attr-free::after {
    position: static !important;
    display: inline-block !important;
    margin-left: 6px !important;
    transform: none !important;
    vertical-align: middle !important;
}
@media (max-width: 768px) {
    .dt-pillar-landing .dt-attr-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .dt-pillar-landing .dt-attr-tile { padding: 12px 16px !important; }
}

/* 4. Hero image right-column composite — grid 1fr/1fr, copy left, product right */
.dt-pillar-landing .dt-hero {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 40px !important;
    text-align: left !important;
    padding: 80px 40px !important;
}
.dt-pillar-landing .dt-hero-inner {
    text-align: left !important;
    margin: 0 !important;
}
.dt-pillar-landing .dt-hero-eyebrow {
    text-align: left !important;
}
.dt-pillar-landing .dt-hero h1 {
    text-align: left !important;
}
.dt-pillar-landing .dt-hero-sub {
    text-align: left !important;
    margin-left: 0 !important;
}
.dt-pillar-landing .dt-hero-img {
    display: block;
    max-width: 100%;
    max-height: 460px;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .25));
    object-fit: contain;
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .dt-pillar-landing .dt-hero {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        padding: 50px 24px !important;
    }
    .dt-pillar-landing .dt-hero-inner,
    .dt-pillar-landing .dt-hero-eyebrow,
    .dt-pillar-landing .dt-hero h1,
    .dt-pillar-landing .dt-hero-sub {
        text-align: center !important;
    }
    .dt-pillar-landing .dt-hero-img { display: none; }
}
/* PM-13.2 (2026-05-20) — mobile refinements
 *
 *  Two changes per Josh feedback on PM-13 render:
 *    1. Mobile attr-pill rows: 2-col → 1-col so each pill fits its label
 *       on a single line (no "Shop by / Skill" text-wrap fragmentation)
 *    2. NEW: .dt-mobile-quick-nav — horizontal-scroll anchor strip jumping
 *       to each cat-group. Hidden on desktop, only renders on mobile.
 *
 *  Append-only, all rules scoped under .dt-pillar-landing.
 */

/* 1. MOBILE: attr pills 1-per-row, no text wrap */
@media (max-width: 768px) {
    .dt-pillar-landing .dt-attr-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }
    .dt-pillar-landing .dt-attr-tile {
        padding: 14px 22px !important;
        justify-content: flex-start !important;
    }
    .dt-pillar-landing .dt-attr-tile h3 {
        font-size: 15px !important;
        white-space: nowrap !important;
    }
}

/* 2. MOBILE QUICK-NAV — horizontal-scroll anchor strip */
.dt-pillar-landing .dt-mobile-quick-nav {
    display: none;  /* desktop: hidden */
}
@media (max-width: 768px) {
    .dt-pillar-landing .dt-mobile-quick-nav {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        padding: 14px 16px;
        margin: 0;
        background: #fff;
        border-bottom: 1px solid var(--pillar-border, #f48fb1);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox */
        scroll-snap-type: x proximity;
    }
    .dt-pillar-landing .dt-mobile-quick-nav::-webkit-scrollbar {
        display: none;                  /* WebKit */
    }
    .dt-pillar-landing .dt-mobile-quick-nav a {
        flex-shrink: 0;
        padding: 8px 16px;
        background: var(--pillar-bg, #fce4ec);
        color: var(--pillar-deep, #4a0028) !important;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        font-family: 'Instrument Sans', sans-serif;
        text-decoration: none;
        white-space: nowrap;
        scroll-snap-align: start;
        border: 1px solid transparent;
        transition: background .2s, border-color .2s;
    }
    .dt-pillar-landing .dt-mobile-quick-nav a:active,
    .dt-pillar-landing .dt-mobile-quick-nav a:focus {
        background: var(--pillar, #c2185b);
        color: #fff !important;
        border-color: var(--pillar, #c2185b);
    }
}

/* Browser-native smooth-scroll for anchor link jumps (safe to add — scopes
 * to .dt-pillar-landing so other pages keep their default jump behavior) */
.dt-pillar-landing { scroll-behavior: smooth; }

/* Anchor offset for cat-group ids so they don't get hidden under any sticky
 * site header. 80px target matches Woodmart's default mobile header height. */
.dt-pillar-landing .dt-cat-group { scroll-margin-top: 80px; }
/* PM-13.3 (2026-05-20) — mobile quick-nav refinements per Josh feedback:
 *   1. Add a "Quick Navigation" title above the pill strip
 *   2. Add side gradient fades + ❮ / ❯ chevron indicators (scroll affordance)
 *   3. Make the strip STICKY so it stays visible while scrolling cat-groups
 *
 *  Append-only. Overrides relevant rules from PM-13.2 via source order.
 *  No desktop impact — all rules gated by max-width:768px media query.
 */

@media (max-width: 768px) {
    /* Sticky wrap container — hosts title bar + chevrons + scrollable nav */
    .dt-pillar-landing .dt-mobile-quick-nav-wrap {
        display: block;
        position: sticky;
        top: 0;
        z-index: 200;                       /* above Woodmart sticky header chrome */
        background: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,.08);
        border-bottom: 1px solid var(--pillar-border, #f48fb1);
    }

    /* Hide on desktop */
    .dt-pillar-landing .dt-mobile-quick-nav-wrap { /* (no-op on desktop) */ }

    /* Title bar — small uppercase "Quick Navigation" */
    .dt-pillar-landing .dt-mobile-quick-nav-title {
        text-align: center;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--pillar, #c2185b);
        padding: 9px 0 5px;
        font-family: 'Instrument Sans', sans-serif;
        line-height: 1;
    }

    /* Override PM-13.2 nav: remove border-bottom (now on wrap), keep scroll behavior */
    .dt-pillar-landing .dt-mobile-quick-nav {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        padding: 4px 24px 12px;             /* left/right room for chevrons */
        margin: 0;
        background: transparent;
        border-bottom: none;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }
    .dt-pillar-landing .dt-mobile-quick-nav::-webkit-scrollbar { display: none; }

    /* Side gradient fades + chevron indicators on the WRAP (not inside the
     * scrollable nav — pseudo-elements inside overflow:auto would scroll). */
    .dt-pillar-landing .dt-mobile-quick-nav-wrap::before,
    .dt-pillar-landing .dt-mobile-quick-nav-wrap::after {
        content: '';
        position: absolute;
        top: 26px;                          /* below title */
        bottom: 1px;                        /* above wrap's border-bottom */
        width: 28px;
        pointer-events: none;
        z-index: 3;
        display: flex;
        align-items: center;
        font-size: 22px;
        font-weight: 700;
        color: var(--pillar, #c2185b);
        text-shadow: 0 0 6px #fff;
    }
    .dt-pillar-landing .dt-mobile-quick-nav-wrap::before {
        left: 0;
        background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0) 100%);
        justify-content: flex-start;
        padding-left: 4px;
        content: '❮';
    }
    .dt-pillar-landing .dt-mobile-quick-nav-wrap::after {
        right: 0;
        background: linear-gradient(to left, #fff 30%, rgba(255,255,255,0) 100%);
        justify-content: flex-end;
        padding-right: 4px;
        content: '❯';
    }

    /* Pill button refinements (already inherited from PM-13.2) — keep tap states */
    .dt-pillar-landing .dt-mobile-quick-nav a:active {
        background: var(--pillar, #c2185b);
        color: #fff !important;
    }
}
/* PM-13.4 (2026-05-20) — mobile quick-nav: fix sticky + redesign chevrons
 *
 *  Two fixes per Josh feedback on PM-13.3:
 *    1. CSS `position: sticky` was silently failing because WPBakery wraps
 *       the .dt-mobile-quick-nav-wrap in vc_row > wpb_column > vc_column-inner
 *       > wpb_wrapper > wpb_raw_code > wpb_wrapper, and one or more of those
 *       ancestors has overflow:hidden|auto|scroll (which kills sticky).
 *       Fix: override all those ancestor overflow rules to `visible` so
 *       sticky has a proper scroll-context to attach to.
 *
 *    2. Chevrons were rendered as edge-gradient pseudo-elements (subtle).
 *       Redesign as solid white circular floating buttons centered on the
 *       pill strip, with shadow, z-index above pills, pointer-events:none
 *       (no JS click — just visual affordance that the strip scrolls).
 *
 *  Append-only. Overrides relevant PM-13.3 rules via source order + !important.
 */

@media (max-width: 768px) {
    /* 1. STICKY FIX — override ancestor overflow that's blocking position:sticky */
    .vc_row.dt-mobile-quick-nav-row,
    .vc_row.dt-mobile-quick-nav-row > .wpb_column,
    .vc_row.dt-mobile-quick-nav-row .vc_column-inner,
    .vc_row.dt-mobile-quick-nav-row .wpb_wrapper,
    .vc_row.dt-mobile-quick-nav-row .wpb_raw_code,
    .vc_row.dt-mobile-quick-nav-row .wpb_raw_html {
        overflow: visible !important;
        /* WPBakery sets transform:translateZ(0) on rows in some configs, which
         * also kills sticky (creates new containing block). Reset it. */
        transform: none !important;
        will-change: auto !important;
    }

    /* Sticky wrap — reaffirm rules + add !important against any inherited transforms */
    .dt-pillar-landing .dt-mobile-quick-nav-wrap {
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;            /* above all pillar landing content */
        background: #fff !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .1) !important;
        border-bottom: 1px solid var(--pillar-border, #f48fb1) !important;
        margin-left: -16px !important;       /* break out of any container padding */
        margin-right: -16px !important;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* 2. CHEVRONS — solid white circular floating buttons, centered on pill strip */
    .dt-pillar-landing .dt-mobile-quick-nav-wrap::before,
    .dt-pillar-landing .dt-mobile-quick-nav-wrap::after {
        content: '';                         /* reset PM-13.3 content first */
        position: absolute;
        top: auto;                           /* override PM-13.3 top:26px */
        bottom: auto;
        /* Center vertically on the pill strip (title bar is ~26px tall;
         * pill strip center is ~26 + (pill_height/2) = ~26 + 22 = ~48px) */
        top: 38px !important;
        width: 28px !important;
        height: 28px !important;
        background: #fff !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .22) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--pillar, #c2185b) !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        z-index: 1000 !important;            /* above pills inside the nav strip */
        pointer-events: none !important;
        text-shadow: none !important;
    }
    .dt-pillar-landing .dt-mobile-quick-nav-wrap::before {
        left: 6px !important;
        content: '❮' !important;
    }
    .dt-pillar-landing .dt-mobile-quick-nav-wrap::after {
        right: 6px !important;
        content: '❯' !important;
    }

    /* Add slight left/right padding to the nav strip so first/last pills
     * aren't fully covered by the chevron buttons */
    .dt-pillar-landing .dt-mobile-quick-nav {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}
/* PM-13.5 (2026-05-20) — three fixes per Josh's PM-13.4 review:
 *
 *   1. DESKTOP BUG: .dt-mobile-quick-nav-wrap was rendering on desktop (only
 *      the inner .dt-mobile-quick-nav was hidden). Plain-text "Quick
 *      Navigation" title showed above the attr-grid eyebrow on desktop.
 *      Fix: hide the WRAP itself by default; show only at <=768px.
 *
 *   2. VISUAL REDESIGN: replace pill-buttons + chevron-circles with the
 *      text-tab + underline-on-active style from Woodmart's trending product
 *      category tabs. Simpler, cleaner, no chevrons needed (horizontal text
 *      tabs are universally understood to scroll on mobile).
 *
 *   3. STICKY ESCALATION: position:sticky never worked despite overflow
 *      overrides — WPBakery's parent chain has a containing-block trap that's
 *      defeating it. Switching to position:fixed at top:0, which works
 *      regardless of parent overflow or transform context.
 *
 *  Append-only. Overrides PM-13.2/13.3/13.4 mobile quick-nav rules via
 *  source order + !important.
 */

/* DEFAULT (DESKTOP): hide the wrap entirely. Fixes the leaked "Quick
 * Navigation" title text visible on desktop in PM-13.3/13.4. */
.dt-pillar-landing .dt-mobile-quick-nav-wrap {
    display: none !important;
}

@media (max-width: 768px) {
    /* MOBILE: show + fixed-position the wrap at top of viewport */
    .dt-pillar-landing .dt-mobile-quick-nav-wrap {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;          /* above Woodmart header */
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08) !important;
        border-bottom: 1px solid var(--pillar-border, #f48fb1) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Remove title bar — text tabs are self-explanatory + saves vertical space */
    .dt-pillar-landing .dt-mobile-quick-nav-title {
        display: none !important;
    }

    /* TEXT-TAB nav style (matches Woodmart trending product tabs):
     *   - No pill backgrounds
     *   - Just text + transparent
     *   - Pink underline appears on active/focus/hover
     *   - Horizontal scroll, no chevrons (text-tab pattern self-affords scroll)
     */
    .dt-pillar-landing .dt-mobile-quick-nav {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 28px !important;
        padding: 14px 18px !important;
        margin: 0 !important;
        background: transparent !important;
        border: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
    }
    .dt-pillar-landing .dt-mobile-quick-nav::-webkit-scrollbar {
        display: none !important;
    }
    .dt-pillar-landing .dt-mobile-quick-nav a {
        flex-shrink: 0 !important;
        padding: 4px 0 6px !important;     /* override pill padding */
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #2c3e50 !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        font-family: 'Instrument Sans', sans-serif !important;
        letter-spacing: .4px !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        position: relative !important;
        scroll-snap-align: start !important;
    }
    .dt-pillar-landing .dt-mobile-quick-nav a::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 2px !important;
        background: var(--pillar, #c2185b) !important;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .2s ease-out;
    }
    .dt-pillar-landing .dt-mobile-quick-nav a:hover::after,
    .dt-pillar-landing .dt-mobile-quick-nav a:focus::after,
    .dt-pillar-landing .dt-mobile-quick-nav a:active::after,
    .dt-pillar-landing .dt-mobile-quick-nav a:target::after {
        transform: scaleX(1);
    }
    .dt-pillar-landing .dt-mobile-quick-nav a:hover,
    .dt-pillar-landing .dt-mobile-quick-nav a:active {
        color: var(--pillar, #c2185b) !important;
        background: transparent !important;
    }

    /* KILL PM-13.3/13.4 chevron pseudo-elements */
    .dt-pillar-landing .dt-mobile-quick-nav-wrap::before,
    .dt-pillar-landing .dt-mobile-quick-nav-wrap::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    /* Push pillar landing content down to clear the fixed strip
     * (strip is ~44px tall: 14px padding + ~24px text + 6px padding) */
    .dt-pillar-landing > section,
    .dt-pillar-landing .dt-hero {
        scroll-margin-top: 60px !important;  /* anchor offset for cat-group jumps */
    }
}
/* PM-13.6 (2026-05-20) — three fixes:
 *   1. Mobile quick-nav visibility: bump z-index to 999999 above Woodmart mobile header
 *   2. Hero depth = VARIANT C (per Josh decision): 3-radial mesh gradient base +
 *      animated organic blob (8s morph) + soft white spotlight + product rotation
 *   3. (Payload change: trending columns 4→6 — applied separately in build_visual_post_content.py)
 *
 *  Append-only. !important throughout to override prior PM-13.x hero rules.
 */

/* ============================================================
 * 1. MOBILE QUICK-NAV VISIBILITY (z-index escalation)
 * ============================================================ */
@media (max-width: 768px) {
    .dt-mobile-quick-nav-wrap,
    .dt-pillar-landing .dt-mobile-quick-nav-wrap {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 999999 !important;             /* above Woodmart mobile header */
        background: #fff !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .1) !important;
        border-bottom: 2px solid var(--pillar-border, #f48fb1) !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ============================================================
 * 2. HERO DEPTH — VARIANT C (animated blob + 3-radial mesh)
 * ============================================================
 *  Replaces flat single-direction gradient with multi-layered mesh:
 *    - 3 radial-gradient color stops at 3 different positions
 *    - Linear-gradient base (top→bottom pink→deep-burgundy)
 *    - Animated organic blob (8s scale+rotate, border-radius morphs)
 *    - Soft white spotlight at bottom-left
 *    - Slight 2deg product image rotation for natural feel
 *    - 2-layer drop shadow on product
 */
.dt-pillar-landing .dt-hero {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--pillar-border), transparent 15%) 0%, transparent 40%),
        radial-gradient(circle at 75% 70%, color-mix(in srgb, var(--pillar-border), transparent 25%) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--pillar), transparent 40%) 0%, transparent 60%),
        linear-gradient(180deg, var(--pillar) 0%, var(--pillar-deep) 100%) !important;
}

/* Animated organic blob — top-right, 8s slow morph */
.dt-pillar-landing .dt-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 10% !important;
    right: 8% !important;
    bottom: auto !important;
    left: auto !important;
    width: 220px !important;
    height: 220px !important;
    background: radial-gradient(circle at 30% 40%, var(--pillar-border) 0%, var(--pillar) 60%, transparent 100%) !important;
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50% !important;
    filter: blur(2px) !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    inset: auto !important;
    animation: dtHeroBlob 8s ease-in-out infinite alternate !important;
    /* explicitly reset PM-11/13 mask/svg fields that may interfere */
    -webkit-mask: none !important;
    mask: none !important;
}

/* Soft white spotlight — bottom-left */
.dt-pillar-landing .dt-hero::after {
    content: '' !important;
    position: absolute !important;
    bottom: -50px !important;
    left: 10% !important;
    top: auto !important;
    right: auto !important;
    width: 320px !important;
    height: 200px !important;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%) !important;
    filter: blur(30px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Blob morph animation — slow scale + rotate + border-radius shift */
@keyframes dtHeroBlob {
    0% {
        transform: scale(1) rotate(0deg);
        border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    }
    100% {
        transform: scale(1.05) rotate(8deg);
        border-radius: 40% 60% 30% 70% / 60% 50% 60% 40%;
    }
}

/* Hero text content above blob */
.dt-pillar-landing .dt-hero-inner {
    position: relative !important;
    z-index: 2 !important;
}

/* H1 + eyebrow + sub text shadow for depth */
.dt-pillar-landing .dt-hero h1 {
    text-shadow: 0 4px 32px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.18) !important;
    letter-spacing: -0.5px !important;
}
.dt-pillar-landing .dt-hero h1 em {
    color: #fff !important;
    font-style: italic !important;
    font-weight: 500 !important;
}
.dt-pillar-landing .dt-hero-eyebrow {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
    letter-spacing: 1px !important;
}
.dt-pillar-landing .dt-hero-sub {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3) !important;
}

/* CTA buttons — slight elevation */
.dt-pillar-landing .dt-cta {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}
.dt-pillar-landing .dt-cta:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32), 0 3px 6px rgba(0, 0, 0, 0.12) !important;
}

/* Hero product image — 2-layer drop shadow + 2deg rotate (Variant C spec) */
.dt-pillar-landing .dt-hero-img {
    position: relative !important;
    z-index: 2 !important;
    filter:
        drop-shadow(0 28px 44px rgba(0, 0, 0, 0.4))
        drop-shadow(0 8px 16px rgba(74, 0, 40, 0.25)) !important;
    transform: rotate(2deg) !important;
    transition: transform .3s ease-out !important;
}
.dt-pillar-landing .dt-hero:hover .dt-hero-img {
    transform: rotate(0deg) translateY(-4px) !important;
}

/* Respect prefers-reduced-motion — disable blob animation for accessibility */
@media (prefers-reduced-motion: reduce) {
    .dt-pillar-landing .dt-hero::before {
        animation: none !important;
    }
    .dt-pillar-landing .dt-hero-img {
        transition: none !important;
    }
}
/* PM-13.7 (2026-05-20) — mobile quick-nav: position below Woodmart sticky header
 *
 *  Prior PM-13.5/13.6 fixed the strip at top:0 with z-index:999999 — that put
 *  it OVER the Woodmart mobile header (covering it). Josh wants the strip
 *  BELOW the header and visible as user scrolls.
 *
 *  Fix:
 *    - top: var(--dt-quick-nav-top, 80px) — defaults to 80px if JS hasn't
 *      measured Woodmart's actual header height yet
 *    - JS in section_mobile_quick_nav inline script measures the actual
 *      Woodmart header (.whb-sticked / .whb-clone / #wd-header etc.) on
 *      DOMContentLoaded, scroll, and resize. Sets --dt-quick-nav-top.
 *    - z-index lowered from 999999 to 99 so Woodmart's own sticky header
 *      (typically z-index ~1000+) sits on top of mine when they collide
 *      vertically — but since my strip is positioned below, they shouldn't
 *      collide anyway. 99 is safe.
 *
 *  Append-only; overrides PM-13.5/13.6 mobile quick-nav rules.
 */

@media (max-width: 768px) {
    .dt-mobile-quick-nav-wrap,
    .dt-pillar-landing .dt-mobile-quick-nav-wrap {
        position: fixed !important;
        top: var(--dt-quick-nav-top, 80px) !important;   /* JS sets this dynamically */
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        z-index: 99 !important;                          /* below Woodmart sticky */
        background: #fff !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .1) !important;
        border-bottom: 2px solid var(--pillar-border, #f48fb1) !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: top .15s ease-out;                   /* smooth resize/orient change */
    }
}
/* PM-13.8 (2026-05-20) — drop sticky on mobile quick-nav, ship in-flow version
 *
 *  Three iterations of sticky-vs-fixed positioning (PM-13.2, 13.5, 13.6, 13.7)
 *  hit WPBakery ancestor-overflow:hidden trap. Position:sticky silently fails;
 *  position:fixed always overlays content. Going with in-flow non-sticky:
 *  strip appears once in natural flow between promo strip and attribute grid,
 *  scrolls away with content. Serves as a "section index" on first view.
 *
 *  Append-only; overrides PM-13.5/6/7 mobile fixed-positioning rules.
 */

@media (max-width: 768px) {
    /* RESET position:fixed from prior PM-13.x iterations */
    .dt-mobile-quick-nav-wrap,
    .dt-pillar-landing .dt-mobile-quick-nav-wrap {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: auto !important;
        background: #fff !important;
        box-shadow: none !important;
        border-bottom: 1px solid var(--pillar-border, #f48fb1) !important;
        border-top: 1px solid var(--pillar-border, #f48fb1) !important;
        margin: 12px 0 !important;
        padding: 0 !important;
    }

    /* Title bar — keep visible since strip is no longer "obviously a strip at top" */
    .dt-pillar-landing .dt-mobile-quick-nav-title {
        display: block !important;
        text-align: center !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 1.2px !important;
        text-transform: uppercase !important;
        color: var(--pillar, #c2185b) !important;
        padding: 10px 0 5px !important;
        font-family: 'Instrument Sans', sans-serif !important;
        line-height: 1 !important;
    }

    /* Nav strip — text-tab style retained (no chevrons, no pills) */
    .dt-pillar-landing .dt-mobile-quick-nav {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 28px !important;
        padding: 6px 18px 12px !important;
        margin: 0 !important;
        background: transparent !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        scroll-snap-type: x proximity !important;
    }
    .dt-pillar-landing .dt-mobile-quick-nav::-webkit-scrollbar {
        display: none !important;
    }
}
/* PM-13.10 (2026-05-20) — bigger cat-tile circles (per Josh)
 *
 *  Bumps `.dt-cat-circle-img` max-width from 130px to 170px and updates
 *  `.dt-cat-tile` flex-basis accordingly. Larger circles give Vision-picked
 *  product images more visual presence on the page.
 *
 *  Append-only. !important to override PM-11 base rule.
 */

.dt-pillar-landing .dt-cat-circle-img {
    max-width: 170px !important;
    margin-bottom: 16px !important;
    border-width: 3px !important;
    box-shadow: 0 4px 18px var(--pillar-bg, #fce4ec) !important;
}

.dt-pillar-landing .dt-cat-tile {
    flex: 0 0 calc((100% - 5 * 24px) / 6) !important;
    max-width: 190px !important;
}

.dt-pillar-landing .dt-cat-tiles {
    gap: 32px 24px !important;
    justify-content: center !important;
}

.dt-pillar-landing .dt-cat-name {
    font-size: 15px !important;
    margin-top: 6px !important;
}

@media (hover: hover) {
    .dt-pillar-landing .dt-cat-tile:hover .dt-cat-circle-img {
        transform: translateY(-6px) !important;
        box-shadow: 0 16px 44px var(--pillar-hover, #f8bbd0) !important;
    }
}

@media (max-width: 1024px) {
    .dt-pillar-landing .dt-cat-tile {
        flex-basis: calc((100% - 3 * 20px) / 4) !important;
        max-width: none !important;
    }
    .dt-pillar-landing .dt-cat-circle-img {
        max-width: 150px !important;
    }
}

@media (max-width: 768px) {
    .dt-pillar-landing .dt-cat-tile {
        flex-basis: calc((100% - 20px) / 2) !important;
    }
    .dt-pillar-landing .dt-cat-circle-img {
        max-width: 140px !important;
    }
}


/* PM-20.5 (2026-05-21) — mobile-first cat-tile 2-column guarantee.
 *
 * Josh observed couples-pleasure cat-tile group rendering 1-column on mobile.
 * Root cause: dt-cat-circle-img max-width:140px on mobile + flex-basis
 * calc((100%-20px)/2) at narrow viewports causes content overflow that
 * forces the tile to grow beyond its basis, collapsing 2-column to 1-column.
 * Fix: classic flex min-width:0 + cap circle img at 100% of tile container
 * + add 480px breakpoint with smaller gap for very narrow phones.
 * Applies to ALL pillars per mobile-first rule (feedback_mobile_first_non_negotiable).
 */
@media (max-width: 768px) {
    .dt-pillar-landing .dt-cat-tile {
        min-width: 0 !important;
    }
    .dt-pillar-landing .dt-cat-circle-img {
        max-width: 100% !important;
    }
}
@media (max-width: 480px) {
    .dt-pillar-landing .dt-cat-tiles {
        gap: 20px 12px !important;
    }
    .dt-pillar-landing .dt-cat-tile {
        flex: 0 0 calc((100% - 12px) / 2) !important;
        max-width: calc((100% - 12px) / 2) !important;
        min-width: 0 !important;
    }
    .dt-pillar-landing .dt-cat-name {
        font-size: 13px !important;
    }
}

/* PM-20.12.2 (2026-05-22) — FAQ accordion styling.
 * BUG FIX: prior PM-20.12 + PM-20.12.1 selectors used `.dt-pillar-landing .dt-faq`
 * (DESCENDANT, space-separated). Both classes are on the SAME row element, so
 * descendant selector never matched — entire PM-20.12 CSS block was inert.
 * Corrected: compound selector `.dt-pillar-landing.dt-faq` (no space) +
 * `.dt-pillar-{pillar}.dt-faq` for per-pillar link colors.
 */
.dt-faq.dt-pillar-landing .wpb_wrapper {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 24px;
}
.dt-faq.dt-pillar-landing .wd-accordion {
    max-width: 100% !important;
    margin: 18px 0 0 !important;
}
.dt-faq.dt-pillar-landing .wd-accordion-item {
    border-bottom: 1px solid #e5e5e5 !important;
    padding: 0;
    margin: 0;
}
.dt-faq.dt-pillar-landing .wd-accordion-title {
    padding: 18px 0 !important;
    font-family: 'DM Serif Display', Georgia, serif !important;
    font-size: clamp(1rem, 2.4vw, 1.1rem) !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
}
.dt-faq.dt-pillar-landing .wd-accordion-title.wd-active,
.dt-faq.dt-pillar-landing .wd-accordion-title:hover,
.dt-faq.dt-pillar-landing .wd-accordion-title.wd-active .wd-accordion-title-text,
.dt-faq.dt-pillar-landing .wd-accordion-title:hover .wd-accordion-title-text {
    color: var(--pillar) !important;
}
.dt-faq.dt-pillar-landing .wd-accordion-opener {
    color: var(--pillar) !important;
}
.dt-faq.dt-pillar-landing .wd-accordion-content {
    padding: 0 0 22px !important;
    font-family: 'Inter', 'Karla', sans-serif !important;
    font-size: clamp(.9rem, 2.4vw, 1rem) !important;
    color: #475569 !important;
    line-height: 1.75 !important;
}
.dt-faq.dt-pillar-landing .wd-accordion-content p {
    margin: 0 0 14px;
}
.dt-faq.dt-pillar-landing .wd-accordion-content a,
.dt-faq.dt-pillar-landing .wd-accordion-content a:link,
.dt-faq.dt-pillar-landing .wd-accordion-content a:visited {
    font-weight: 700 !important;
    text-decoration: none !important;
}
.dt-faq.dt-pillar-landing .wd-accordion-content a:hover {
    text-decoration: underline !important;
}
.dt-faq.dt-pillar-landing .wd-accordion-content strong {
    color: var(--pillar);
    font-weight: 700;
}
.dt-faq.dt-pillar-landing .title-subtitle {
    color: var(--pillar) !important;
}
/* Per-pillar link colors — compound selectors (both classes on same row) */
.dt-faq.dt-pillar-her .wd-accordion-content a { color: #c2185b !important; }
.dt-faq.dt-pillar-his .wd-accordion-content a { color: #1565c0 !important; }
.dt-faq.dt-pillar-couples .wd-accordion-content a { color: #00838f !important; }
.dt-faq.dt-pillar-backdoor .wd-accordion-content a { color: #7b1fa2 !important; }
.dt-faq.dt-pillar-kink .wd-accordion-content a { color: #e65100 !important; }
.dt-faq.dt-pillar-wellness .wd-accordion-content a { color: #2e7d32 !important; }
.dt-faq.dt-pillar-gifts .wd-accordion-content a { color: #bf8c2e !important; }