/* ============================================
   FOLDABLE HAMMOCK PDP
   Location: /assets/css/single-product/foldable-hammock.css
   ============================================ */

/* ── Design tokens ── */
:root {
    --pk-sapphire: #2A5298;
    --pk-cream: #F5F1ED;
    --pk-charcoal: #1F1F1F;
    --pk-gold: #D4A574;
    --pk-trust-green: #3a6f5b;
    --pk-trust-bg: #f0fdf4;
    --pk-border: rgba(31,31,31,0.07);
    --pk-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Hide default WooCommerce setup row ── */
tr:has(select[name="attribute_setup"]) { display: none !important; }
ul.cgkit-attribute-swatches[data-attribute="attribute_setup"] { display: none !important; }


/* ============================================
   ABOVE-FOLD — Pack Selector
   ============================================ */

/* ── Price display ── */
.hammock-price-display { display: flex; align-items: baseline; gap: 8px; margin-bottom: 0.35em; }
.hammock-current-price { font-size: 20px; font-weight: 700; color: var(--pk-trust-green); }
.hammock-was-price { font-size: 16px; color: var(--pk-trust-green); margin-right: 6px; opacity: 1 !important; }

/* ── Pack selector ── */
.hammock-pack-selector { margin-bottom: 6px; }
.hammock-pack-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #222; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.hammock-pack-chosen { font-weight: 400; color: #222; text-transform: none; font-size: 14px; }
.hammock-pack-rows { display: flex; gap: 8px; margin-bottom: 8px; }
.hammock-pack-row { display: flex; gap: 8px; flex: 1; padding-top: 16px; }
.hammock-pack-row .hammock-pack-option { flex: 1; }
@media (max-width: 767px) { .hammock-pack-rows { flex-direction: column; gap: 4px; } }
.hammock-pack-option { position: relative; cursor: pointer; text-align: center; display: flex; flex-direction: column; }

/* Badges */
.hammock-pack-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; z-index: 4; pointer-events: none; }
.hammock-pack-badge--empty { visibility: hidden; }
.hammock-pack-badge--blue  { background: var(--pk-sapphire); color: #fff; }
.hammock-pack-badge--green { background: #6d7a5f; color: #fff; }
.hammock-star { color: #FFD700; }

/* Cards */
.hammock-pack-card { border: 2px solid #e5e7eb; border-radius: 10px; padding: 12px 6px; background: #fff; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.06); display: flex; flex-direction: column; align-items: center; flex: 1; }
.hammock-pack-option:hover .hammock-pack-card { border-color: var(--pk-sapphire); box-shadow: 0 2px 8px rgba(42,82,152,0.12); }
.hammock-pack-option.active .hammock-pack-card { border-color: var(--pk-sapphire); background: #eef2ff; box-shadow: 0 0 0 1px var(--pk-sapphire), 0 2px 8px rgba(42,82,152,0.15); }
.hammock-pack-name { font-size: 14px; font-weight: 700; color: #111; display: block; margin-bottom: 2px; }
.hammock-pack-option.active .hammock-pack-name { color: var(--pk-sapphire); }
.hammock-pack-sub { font-size: 11px; font-weight: 500; display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.4; }
.hammock-pack-sub--gray { color: #555; font-weight: 400; }
.hammock-pack-sub--gift { color: var(--pk-trust-green); }
.hammock-pack-trigger { display: block; font-size: 10px; color: #888; margin-top: 4px; line-height: 1.3; text-align: center; }

/* 2x Simple alt link */
.hammock-pack-alt { font-size: 11px; color: #888; padding: 6px 10px; margin: 4px 0; border-radius: 8px; transition: background 0.2s, border-color 0.2s; border: 1px solid transparent; }
.hammock-pack-alt.active { background: #eef2ff; border-color: var(--pk-sapphire); color: #333; }
.hammock-pack-alt__link { color: var(--pk-sapphire); text-decoration: none; font-weight: 500; }
.hammock-pack-alt__link:hover { text-decoration: underline; }

/* Gift box */
.hammock-gift-box { margin: 0 0 12px; }
.hammock-gift-box__inner { background: var(--pk-trust-bg); border-radius: 10px; padding: 14px 16px; }
.hammock-gift-box__title { font-size: 12px; font-weight: 700; color: var(--pk-trust-green); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.hammock-icon--check { width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 6px; flex-shrink: 0; }
.hammock-gift-box__items { display: flex; flex-direction: column; gap: 6px; }
.hammock-gift-item__left { display: flex; align-items: center; }
.hammock-gift-box__item { display: flex; justify-content: flex-start; align-items: center; font-size: 13px; color: #333; gap: 0; }
.hammock-gift-item-row { justify-content: space-between; }
.hammock-gift-box__free { background: var(--pk-trust-green); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; white-space: nowrap; margin-left: 8px; flex-shrink: 0; }
.hammock-gift-box__savings { font-size: 12px; font-weight: 600; color: var(--pk-trust-green); margin-top: 10px; }


/* ============================================
   BELOW-FOLD — Section Layout
   ============================================ */

/* ── Section layout ── */
.section.bg-cream, .section.bg-white, .section.bg-charcoal { width: 100vw; position: relative; left: 50%; margin-left: -50vw; padding: 64px 0; box-sizing: border-box; }
@media (min-width: 768px)  { .section.bg-cream, .section.bg-white, .section.bg-charcoal { padding: 80px 0; } }
@media (max-width: 480px)  { .section.bg-cream, .section.bg-white, .section.bg-charcoal { padding: 48px 0; } }
.bg-cream       { background: var(--pk-cream); }
.bg-white       { background: #fff; }
.bg-charcoal    { background: var(--pk-charcoal); }
.section > .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px)  { .section > .container { padding: 0 40px; } }


/* ============================================
   BELOW-FOLD — Scroll Reveal
   ============================================ */

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .55s var(--pk-ease), transform .55s var(--pk-ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.visible .stagger { opacity: 1; transform: translateY(0); }
.stagger { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--pk-ease), transform .45s var(--pk-ease); }
.stagger-1 { transition-delay: .06s; }
.stagger-2 { transition-delay: .12s; }
.stagger-3 { transition-delay: .18s; }
.stagger-4 { transition-delay: .24s; }


/* ============================================
   BELOW-FOLD — Components
   ============================================ */

/* ── Section headers ── */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; gap: 12px; flex-wrap: wrap; }
.section-head h2 { font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--pk-charcoal); margin: 0; }
@media (min-width: 768px) { .section-head h2 { font-size: 22px; } }
.bg-charcoal .section-head h2 { color: var(--pk-cream); }
.section-badge { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--pk-sapphire); background: rgba(42,82,152,.07); padding: 4px 12px; border-radius: 100px; }

/* ── Trust bar ── */
.trust-bar { background: var(--pk-sapphire); padding: 13px 24px; width: 100vw; position: relative; left: 50%; margin-left: -50vw; box-sizing: border-box; }
.trust-bar-inner { max-width: 1080px; margin: 0 auto; display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
@media (max-width: 600px) { .trust-bar { padding: 10px 16px; } .trust-bar-inner { gap: 12px 20px; } .tb-item { font-size: 11.5px; } .tb-item svg { width: 12px; height: 12px; } }
.tb-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: #fff; white-space: nowrap; }
.tb-item svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-star svg { fill: var(--pk-gold) !important; stroke: none !important; }

/* ── Video strip ── */
.vid-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 768px) {
    .vid-row { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 480px) { .vid-row { gap: 8px; } }
.vid-card { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform .25s var(--pk-ease), box-shadow .25s var(--pk-ease); }
.vid-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(31,31,31,.08); }
.vid-thumb { width: 100%; aspect-ratio: 9/16; background: linear-gradient(160deg, #ddd2c7, #cfc3b5, #c4b7a8); position: relative; overflow: hidden; }
.vid-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(31,31,31,.55) 0%, transparent 65%); pointer-events: none; }
.vid-cap { position: absolute; bottom: 12px; left: 12px; right: 12px; z-index: 4; font-size: 12.5px; font-weight: 500; color: #fff; }
.vid-tag { position: absolute; top: 10px; left: 10px; z-index: 5; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: rgba(0,0,0,.45); padding: 3px 8px; border-radius: 100px; backdrop-filter: blur(4px); }
.mini-rating { display: flex; align-items: center; gap: 5px; }
.mini-rating svg { width: 12px; height: 12px; fill: var(--pk-gold); }
.mini-rating span { font-size: 12px; }

/* ── Why Cats ── */
.usecase-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 768px) { .usecase-layout { grid-template-columns: 1fr; gap: 24px; } }
.usecase-heading { font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--pk-charcoal); margin: 0 0 20px; }
@media (min-width: 768px) { .usecase-heading { font-size: 22px; } }
.usecase-text p { font-size: 15px; line-height: 1.7; color: var(--pk-charcoal); margin-bottom: 10px; }
.usecase-text p:last-child { margin-bottom: 0; }
.usecase-img { width: 100%; aspect-ratio: 4/3; border-radius: 8px; background: linear-gradient(145deg, #e8ddd4, #d4c8bb); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.usecase-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── Engineering ── */
.eng-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 768px) { .eng-layout { grid-template-columns: 1fr; gap: 24px; } }
.eng-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eng-card { background: #fff; border-radius: 8px; padding: 20px 16px; text-align: center; box-shadow: 0 2px 8px rgba(31,31,31,.05); transition: transform .25s var(--pk-ease); }
.eng-card:hover { transform: translateY(-2px); }
.eng-card svg { width: 28px; height: 28px; stroke: var(--pk-sapphire); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; margin: 0 auto 10px; }
.eng-card span { font-family: 'Fraunces', serif; font-size: 12.5px; color: var(--pk-charcoal); display: block; }
.eng-img { width: 100%; aspect-ratio: 4/3; border-radius: 8px; background: linear-gradient(145deg, #e0d6cc, #cfc3b5); display: flex; align-items: center; justify-content: center; }
.load-bar { background: #fff; border-radius: 8px; padding: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; box-shadow: 0 2px 8px rgba(31,31,31,.05); }
.lb-node { font-family: 'Fraunces', serif; font-size: 13.5px; color: var(--pk-charcoal); background: var(--pk-cream); padding: 7px 14px; border-radius: 6px; }
.lb-arrow { color: var(--pk-sapphire); font-weight: 500; }

/* ── Variants ── */
.variant-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
@media (max-width: 600px) { .variant-layout { grid-template-columns: 1fr; } }
.variant-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(31,31,31,.05); transition: transform .25s var(--pk-ease); }
.variant-card:hover { transform: translateY(-2px); }
.variant-card-img { width: 100%; aspect-ratio: 16/10; background: linear-gradient(145deg, #e8ddd4, #d4c8bb); display: flex; align-items: center; justify-content: center; position: relative; }
.variant-label-badge { position: absolute; top: 12px; left: 12px; font-family: 'Fraunces', serif; font-size: 13px; color: #fff; background: rgba(31,31,31,.6); padding: 4px 14px; border-radius: 100px; backdrop-filter: blur(6px); }
.variant-card-body { padding: 20px; }
.variant-card-body h3 { font-family: 'Fraunces', serif; font-weight: 700; font-size: 17px; color: var(--pk-charcoal); margin-bottom: 14px; }
.vspec-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(31,31,31,.05); font-size: 13px; }
.vspec-row:last-child { border-bottom: none; }
.vspec-k { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.vspec-v { color: var(--pk-charcoal); }
.closing-note { margin-top: 20px; font-size: 13.5px; font-style: italic; }

/* ── Bundle ── */
.bundle-section-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .bundle-section-wrap { padding: 0 40px; } }
.bundle-container { background: var(--pk-sapphire); border-radius: 12px; padding: 40px 36px 36px; position: relative; overflow: hidden; opacity: 0; transform: translateY(24px); transition: opacity .5s var(--pk-ease), transform .5s var(--pk-ease); }
.reveal.visible .bundle-container { opacity: 1; transform: translateY(0); }
.bundle-container::before { content: ''; position: absolute; top: -80px; right: -80px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(212,165,116,.1), transparent 70%); pointer-events: none; }
.bundle-head { text-align: center; margin-bottom: 28px; position: relative; }
.bundle-head-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-gold); margin-bottom: 14px; }
.bundle-head-tag svg { width: 13px; height: 13px; stroke: var(--pk-gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bundle-head h3 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 400; color: #fff; margin-bottom: 6px; }
.bundle-head p { font-size: 13.5px; color: rgba(255,255,255,.7); max-width: 480px; margin: 0 auto; }
.bundle-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 20px; }
.bundle-card { background: #fff; border-radius: 8px; border: 1.5px solid var(--pk-border); overflow: hidden; transition: transform .35s var(--pk-ease), box-shadow .35s var(--pk-ease), opacity .5s var(--pk-ease); opacity: 0; transform: translateY(20px); }
.reveal.visible .bundle-card { opacity: 1; transform: translateY(0); }
.reveal.visible .bundle-card:nth-child(1) { transition-delay: .1s; }
.reveal.visible .bundle-card:nth-child(2) { transition-delay: .2s; }
.bundle-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(31,31,31,.08); }
.bundle-card-featured { border-color: var(--pk-gold); border-width: 2px; box-shadow: 0 12px 32px rgba(42,82,152,.12); }
.bundle-img { aspect-ratio: 1/1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bundle-img img { width: 100%; height: 100%; object-fit: cover; }
.bundle-img-standard { background: linear-gradient(155deg, var(--pk-cream), #e6e1db); }
.bundle-img-cozy { background: linear-gradient(155deg, #e4dcd4, #c8bdb0); }
.bundle-img-icons { display: flex; align-items: center; gap: 16px; }
.bundle-img-icon { width: 72px; height: 50px; background: rgba(255,255,255,.6); border-radius: 6px; display: flex; align-items: center; justify-content: center; position: relative; }
.bundle-img-icon svg { width: 28px; height: 28px; stroke: #5a5a5a; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.bundle-img-icon-label { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #5a5a5a; opacity: .5; white-space: nowrap; }
.bundle-img-plus { font-size: 16px; font-weight: 300; color: #5a5a5a; opacity: .35; }
.bundle-featured-tag { position: absolute; top: 12px; left: 12px; background: var(--pk-gold); color: var(--pk-charcoal); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; display: flex; align-items: center; gap: 5px; }
.bundle-featured-tag svg { width: 11px; height: 11px; stroke: var(--pk-charcoal); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bundle-social-proof { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); font-size: 10px; font-weight: 600; color: var(--pk-charcoal); padding: 4px 10px; border-radius: 100px; display: flex; align-items: center; gap: 5px; }
.bundle-social-proof svg { width: 11px; height: 11px; fill: var(--pk-gold); }
.bundle-body { padding: 22px 22px 24px; }
.bundle-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 2px; }
.bundle-title-row h4 { font-family: 'Fraunces', serif; font-weight: 400; font-size: 18px; color: var(--pk-charcoal); }
.bundle-price-cluster { display: flex; align-items: baseline; gap: 6px; }
.bundle-price-was { font-size: 12.5px; text-decoration: line-through; opacity: .55; }
.bundle-price-now { font-size: 19px; font-weight: 600; color: var(--pk-charcoal); }
.bundle-value-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.bundle-value-label { font-size: 11.5px; }
.bundle-save-pill { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--pk-trust-bg); color: var(--pk-trust-green); padding: 3px 8px; border-radius: 100px; }
.bundle-items { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.bundle-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pk-charcoal); }
.bundle-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.bundle-item svg.check { stroke: var(--pk-trust-green); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bundle-item svg.gift { stroke: var(--pk-gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gift-free { font-size: 10px; font-weight: 600; color: var(--pk-trust-green); background: var(--pk-trust-bg); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
.bundle-gift-divider { height: 1px; background: var(--pk-border); margin: 3px 0; }
.bundle-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-size: 13px; font-weight: 600; padding: 12px 20px; border-radius: 6px; border: none; cursor: pointer; transition: background .2s, transform .15s; }
.bundle-cta:active { transform: scale(.98); }
.bundle-cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bundle-cta-primary { background: var(--pk-sapphire); color: #fff; }
.bundle-cta-primary:hover { background: #1E3F7A; }
.bundle-cta-secondary { background: transparent; color: var(--pk-sapphire); border: 1.5px solid var(--pk-sapphire); }
.bundle-cta-secondary:hover { background: rgba(42,82,152,.07); }
@media (max-width: 680px) {
    /* Full sapphire bleed on mobile — no cream gap */
    .section--bundle-wrap { padding: 0 !important; }
    .section--bundle-wrap .bundle-section-wrap { padding: 0; }
    .bundle-container { border-radius: 0; padding: 40px 20px 28px; }
    .bundle-grid { grid-template-columns: 1fr; }
    .bundle-card-featured { order: -1; }
    .bundle-card { border-radius: 8px; }
}
@media (max-width: 480px) {
    .bundle-head h3 { font-size: 19px; }
    .bundle-body { padding: 18px 18px 20px; }
    .bundle-title-row h4 { font-size: 16px; }
    .bundle-price-now { font-size: 17px; }
    .bundle-img-icon { width: 60px; height: 42px; }
    .bundle-img-icon svg { width: 24px; height: 24px; }
    .bundle-title-row { flex-direction: column; gap: 4px; }
}

/* ── Reviews ── */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 768px) { .reviews-grid { grid-template-columns: 1fr; } }
.rv-card { background: rgba(255,255,255,.06); border-radius: 8px; padding: 24px; border: 1px solid rgba(255,255,255,.07); transition: border-color .25s var(--pk-ease), transform .25s var(--pk-ease); display: flex; flex-direction: column; }
.rv-card:hover { border-color: rgba(255,255,255,.14); transform: translateY(-2px); }
.rv-stars { display: flex; gap: 2px; margin-bottom: 12px; }
.rv-stars svg { width: 13px; height: 13px; fill: var(--pk-gold); }
.rv-text { font-size: 13.5px; line-height: 1.65; color: rgba(245,241,237,.88); margin-bottom: 14px; flex: 1; }
.rv-who { font-size: 12px; color: rgba(245,241,237,.45); display: flex; align-items: center; gap: 8px; }
.rv-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #7bc4a5; background: rgba(58,111,91,.2); padding: 2px 8px; border-radius: 100px; }
.photo-review-row { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .photo-review-row { grid-template-columns: 1fr; } }
.photo-review-img { aspect-ratio: 4/3; border-radius: 8px; background: linear-gradient(145deg, #3a3a3a, #282828); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.photo-review-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── Install ── */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 600px) { .steps-grid { grid-template-columns: 1fr; } }
.step-card { background: #fff; border-radius: 8px; padding: 28px 24px; text-align: center; box-shadow: 0 2px 8px rgba(31,31,31,.05); display: flex; flex-direction: column; align-items: center; }
.step-num { font-family: 'Fraunces', serif; font-weight: 700; font-size: 24px; color: var(--pk-sapphire); margin-bottom: 8px; }
.step-txt { font-size: 15px; font-weight: 600; color: var(--pk-charcoal); }
.step-sub { font-size: 11.5px; color: #888; margin-top: 4px; }
.step-detail { margin-top: 14px; width: 100%; }
.step-detail summary { font-size: 12px; font-weight: 500; color: var(--pk-sapphire); cursor: pointer; list-style: none; text-align: center; transition: color .2s; }
.step-detail summary:hover { color: #1E3F7A; }
.step-detail summary::-webkit-details-marker { display: none; }
.step-detail summary::before { content: '+ '; }
.step-detail[open] summary::before { content: '− '; }
.step-detail ul { margin-top: 12px; padding: 14px 16px; background: var(--pk-cream); border-radius: 6px; list-style: none; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.step-detail li { font-size: 12.5px; line-height: 1.55; color: var(--pk-charcoal); padding-left: 18px; position: relative; }
.step-detail li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--pk-sapphire); opacity: .35; }
.install-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .install-detail { grid-template-columns: 1fr; } }
.notes-box { background: #fff; border-radius: 8px; padding: 20px; }
.notes-box p { font-size: 13px; line-height: 1.6; margin-bottom: 6px; }
.notes-box p:last-child { margin-bottom: 0; }
.install-img { width: 100%; aspect-ratio: 4/3; border-radius: 8px; background: linear-gradient(145deg, #e8ddd4, #d4c8bb); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.install-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── Before you install ── */
.constraints-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
@media (max-width: 768px) { .constraints-layout { grid-template-columns: 1fr; } }
.constraints-col { display: flex; flex-direction: column; gap: 12px; }
.cg-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--pk-charcoal); line-height: 1.55; }
.cg-item svg { width: 16px; height: 16px; min-width: 16px; margin-top: 2px; stroke: var(--pk-sapphire); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trust-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
@media (max-width: 600px) { .trust-row { grid-template-columns: 1fr; } }
.trust-box { background: var(--pk-trust-bg); border-radius: 8px; padding: 16px 18px; display: flex; align-items: flex-start; gap: 10px; }
.trust-box svg { width: 16px; height: 16px; min-width: 16px; margin-top: 1px; stroke: var(--pk-trust-green); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.trust-box span { font-size: 13px; color: var(--pk-charcoal); }

/* ── FAQ ── */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 768px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-item { padding: 20px 0; border-bottom: 1px solid var(--pk-border); }
.faq-item:last-child { border-bottom: none; }
@media (min-width: 769px) { .faq-item:nth-last-child(2) { border-bottom: none; } }
.faq-q { font-family: 'Fraunces', serif; font-size: 15px; color: var(--pk-charcoal); margin-bottom: 8px; }
.faq-a { font-size: 13.5px; line-height: 1.65; }

/* ── Placeholders — remove when real images added ── */
.ph, .ph-dark { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.ph { color: rgba(31,31,31,.2); }
.ph-dark { color: rgba(255,255,255,.2); }