/* ══════════════════════════════════════════════════════════════
   SAATHI SHOP — Amazon affiliate recommendations: listing, category
   and product pages. Brand colors match every other psk-*.css file on
   the site (#fc5e28 orange / #040e26 navy) — no new palette introduced.
   Prefixed .psk-sshop- throughout to avoid colliding with the existing,
   unrelated .psk-shop-card class already used by Digital Books.
   ══════════════════════════════════════════════════════════════ */

/* ── HERO ────────────────────────────────────────────────── */
.psk-sshop-hero {
    position: relative;
    background: linear-gradient(135deg, #040e26 0%, #0a1f4d 100%);
    padding: 56px 0 44px;
    overflow: hidden;
}
.psk-sshop-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 88% 15%, rgba(252,94,40,0.22), transparent 45%),
        radial-gradient(circle at 6% 95%, rgba(252,94,40,0.10), transparent 40%);
}
.psk-sshop-hero .container { position: relative; z-index: 1; }
.psk-sshop-hero__crumbs { color: rgba(255,255,255,0.5); font-size: 0.85rem; margin-bottom: 18px; }
.psk-sshop-hero__crumbs a { color: rgba(255,255,255,0.5); }
.psk-sshop-hero__crumbs a:hover { color: #fc5e28; }
.psk-sshop-hero__badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(252,94,40,0.16); color: #ff8f5c;
    border: 1px solid rgba(252,94,40,0.35);
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    padding: 6px 16px; border-radius: 20px; margin-bottom: 18px;
}
.psk-sshop-hero h1 { font-size: 2.2rem; font-weight: 800; color: #fff; margin-bottom: 14px; line-height: 1.25; max-width: 24ch; }
.psk-sshop-hero__lead { color: rgba(255,255,255,0.78); font-size: 1.05rem; line-height: 1.7; max-width: 620px; margin-bottom: 22px; }

/* Search box — large touch target, works on mobile without zooming */
.psk-sshop-search {
    display: flex; align-items: center; gap: 10px; max-width: 520px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px;
    padding: 4px 4px 4px 16px; margin-bottom: 22px;
}
.psk-sshop-search .fa-search { color: rgba(255,255,255,0.5); }
.psk-sshop-search input {
    flex: 1; background: none; border: none; color: #fff; font-size: 0.95rem; padding: 12px 0;
}
.psk-sshop-search input::placeholder { color: rgba(255,255,255,0.45); }
.psk-sshop-search input:focus { outline: none; }
.psk-sshop-search button {
    background: #fc5e28; color: #fff; border: none; font-weight: 700; font-size: 0.88rem;
    padding: 11px 20px; border-radius: 9px; cursor: pointer; transition: background .15s ease;
}
.psk-sshop-search button:hover { background: #e04e1f; }
.psk-sshop-search__clear { font-size: 0.85rem; color: #6b7280; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.psk-sshop-search__clear:hover { color: #fc5e28; text-decoration: none; }

.psk-sshop-hero__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.12); }
.psk-sshop-hero__trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 600; color: rgba(255,255,255,0.82); }
.psk-sshop-hero__trust .fa { color: #fc5e28; font-size: 0.95rem; }

/* ── ABOUT / INTRO ───────────────────────────────────────── */
.psk-sshop-about { padding: 36px 0 8px; }
.psk-sshop-about p { font-size: 0.96rem; color: #4b5162; line-height: 1.75; margin-bottom: 14px; }
.psk-sshop-about p:last-child { margin-bottom: 0; }

/* "Can't find what you need" help card — fills what would otherwise be empty space beside the
   intro text on wide screens, in the same orange-tinted gradient language as the buying-guide
   callout, not a plain white box. */
.psk-sshop-help {
    background: linear-gradient(160deg, #fff7f2 0%, #fff 100%);
    border: 1px solid #fde3d4; border-radius: 16px;
    padding: 28px 24px; text-align: center; height: 100%;
}
.psk-sshop-help__icon {
    display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, #fc5e28, #ff8243); color: #fff; font-size: 1.3rem;
    box-shadow: 0 6px 16px rgba(252,94,40,0.3);
}
.psk-sshop-help h3 { font-size: 1.05rem; font-weight: 800; color: #1a1f36; margin-bottom: 8px; }
.psk-sshop-help p { font-size: 0.86rem; color: #6b7280; line-height: 1.55; margin-bottom: 18px; }
.psk-sshop-help__cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: #25D366; color: #fff; font-weight: 700; font-size: 0.86rem;
    padding: 10px 18px; border-radius: 9px; text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.psk-sshop-help__cta:hover { background: #1fb858; color: #fff; text-decoration: none; transform: translateY(-1px); }

/* ── CATEGORY BUYING GUIDE CALLOUT ───────────────────────── */
.psk-sshop-guide { padding: 28px 0 0; }
.psk-sshop-guide .container p {
    background: linear-gradient(135deg, #fff7f2, #fff);
    border: 1px solid #fde3d4; border-left: 4px solid #fc5e28; border-radius: 10px;
    padding: 16px 18px; font-size: 0.92rem; color: #4b5162; line-height: 1.65; margin: 0;
}
.psk-sshop-guide .fa { color: #fc5e28; margin-right: 4px; }
.psk-sshop-guide strong { color: #1a1f36; }

/* ── FAQ — two-column layout matching the rest of the site (Digital Books'
   psk-faq-intro-panel + psk-faq-new, the latter global via
   psk-services-detail.css/.js so its accordion JS needs nothing from this
   file). The info panel here is Shop's own, same navy-gradient visual
   language as .psk-process-band above, not a copy-paste of another
   feature's file. ──────────────────────────────────────────── */
.psk-sshop-faq-section { padding: 52px 0; background: #f7f8fb; }
.psk-sshop-faq-panel {
    position: relative;
    background-color: #040e26;
    background-image:
        radial-gradient(circle at 20% 10%, rgba(252,94,40,0.22), transparent 55%),
        linear-gradient(160deg, #0a1f4d 0%, #040e26 100%);
    border-radius: 18px;
    padding: 32px 28px;
    height: 100%;
}
.psk-sshop-faq-panel__badge {
    display: inline-block; background: #fc5e28; color: #fff;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    padding: 5px 12px; border-radius: 20px; margin-bottom: 16px;
}
.psk-sshop-faq-panel h2 { color: #fff; font-size: 1.35rem; font-weight: 800; line-height: 1.3; margin-bottom: 10px; }
.psk-sshop-faq-panel p { color: rgba(255,255,255,0.65); font-size: 0.88rem; line-height: 1.6; margin-bottom: 22px; }
.psk-sshop-faq-panel__divider { height: 1px; background: rgba(255,255,255,0.12); margin: 20px 0; }
.psk-sshop-faq-panel__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.45); margin-bottom: 10px; }
.psk-sshop-faq-panel__trust { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.psk-sshop-faq-panel__trust li { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: rgba(255,255,255,0.8); }
.psk-sshop-faq-panel__trust .fa { color: #fc5e28; width: 16px; text-align: center; }
.psk-sshop-faq-panel__link { display: inline-flex; align-items: center; gap: 8px; color: #ff9d6e; font-weight: 700; font-size: 0.86rem; text-decoration: none; }
.psk-sshop-faq-panel__link:hover { color: #fff; text-decoration: none; }

/* Product page's own FAQ block sits inside the narrower right-hand column, not a full section —
   just the .psk-faq-new accordion (global), no side panel; its own heading styled to match. */
.psk-sshop-pd__faq h2 { font-size: 1.1rem; font-weight: 700; color: #1a1f36; margin-bottom: 14px; }

/* ── CATEGORY GRID — light tint, breaks up the About/Products white blocks
   either side of it rather than three plain-white sections in a row ──── */
.psk-sshop-cats { padding: 48px 0; background: #f7f8fb; }
.psk-sshop-cats__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;
}
.psk-sshop-cat {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff; border: 1px solid #eef0f4; border-radius: 14px;
    padding: 28px 18px; text-decoration: none; color: inherit;
    box-shadow: 0 2px 10px rgba(16,24,64,0.04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.psk-sshop-cat:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(16,24,64,0.12); border-color: #fcd9c8; color: inherit; text-decoration: none; }
.psk-sshop-cat__icon {
    font-size: 1.8rem; margin-bottom: 12px; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fff5f0, #ffe8da); border-radius: 50%;
}
.psk-sshop-cat__name { font-weight: 700; font-size: 1rem; color: #1a1f36; margin-bottom: 4px; }
.psk-sshop-cat__count { font-size: 0.82rem; color: #8b93a7; }

/* ── PRODUCT GRID + CARD ─────────────────────────────────── */
.psk-sshop-products { padding: 40px 0 56px; }
.psk-sshop-products__heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 10px; }
.psk-sshop-products__heading h2 { font-size: 1.5rem; font-weight: 800; color: #1a1f36; margin: 0; }
.psk-sshop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }

.psk-sshop-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #eef0f4; border-radius: 14px;
    box-shadow: 0 2px 10px rgba(16,24,64,0.04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.psk-sshop-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(16,24,64,0.13); border-color: #fde3d4; }
.psk-sshop-card__media {
    /* 4:3, not a strict square — real product photos (Amazon-style white-background shots) are
       usually landscape-ish, not square; a 1:1 box left a large empty gap below a wide image
       like this one. 4:3 fits typical product photography much more closely while still working
       fine for a narrower/taller shot via object-fit:contain below. */
    /* Plain white, not the tinted gradient — a real white-background product photo looked like
       it had gray bars either side of it against the tint, with object-fit:contain below. */
    position: relative; aspect-ratio: 4 / 3; background: #fff;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    /* The card itself no longer clips (that was the real cause of the blank-button bug below —
       Chromium sometimes fails to paint content inside an overflow:hidden Grid/Flex ancestor
       until something forces a repaint), so the image box rounds its own top corners here instead. */
    border-radius: 14px 14px 0 0;
}
/* object-fit:contain, not cover — cover crops into the product itself to fill the box, which is
   wrong for a product photo (the whole item needs to stay visible, same as any real e-commerce
   listing). The white background above is what actually fixes the visible-gap problem, since a
   real product photo's own white background blends into it seamlessly instead of showing a tint. */
.psk-sshop-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .25s ease; }
.psk-sshop-card:hover .psk-sshop-card__media img { transform: scale(1.05); }
.psk-sshop-card__badge {
    /* z-index explicit, not left to default stacking order — the hover zoom above gives the <img>
       a CSS transform, which creates its own stacking context and was painting over this badge
       (no visible "Featured" pill) without an explicit z-index to guarantee it stays on top. */
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: linear-gradient(135deg, #fc5e28, #ff8243); color: #fff; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.4px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px;
    box-shadow: 0 3px 8px rgba(252,94,40,0.35);
}
.psk-sshop-card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.psk-sshop-card__cat { font-size: 0.72rem; font-weight: 700; color: #fc5e28; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.psk-sshop-card__title { font-size: 1rem; font-weight: 700; color: #1a1f36; line-height: 1.4; margin-bottom: 6px; }
.psk-sshop-card__title a { color: inherit; text-decoration: none; }
.psk-sshop-card__title a:hover { color: #fc5e28; }
.psk-sshop-card__desc { font-size: 0.86rem; color: #6b7280; line-height: 1.55; margin-bottom: 10px; flex: 1; }
.psk-sshop-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.psk-sshop-card__tag { font-size: 0.7rem; background: #f3f4f8; color: #5b6475; padding: 3px 9px; border-radius: 12px; }
.psk-sshop-card__actions { display: flex; flex-direction: column; gap: 8px; }
.psk-sshop-card__buy,
.psk-sshop-card__buy:link,
.psk-sshop-card__buy:visited,
.psk-sshop-card__buy:active,
.psk-sshop-card__buy:focus {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: #fc5e28; color: #fff !important; font-weight: 700; font-size: 0.88rem;
    padding: 10px 14px; border-radius: 9px; text-decoration: none !important; border: none; cursor: pointer;
    /* color/text-decoration forced with !important and repeated across :link/:visited/:active/
       :focus — this is the one button on the whole site that gets clicked (so becomes :visited)
       AND opens a new tab (so loses focus) in the same instant, and was going blank (background
       visible, text/icon not) after that. No single cause was ever confirmed, so instead this
       makes every interaction state explicitly force the same visible text, which can't regress
       regardless of which state turns out to have been responsible. */
    transition: background .15s ease;
}
.psk-sshop-card__buy .fa { color: #fff !important; }
.psk-sshop-card__buy:hover { background: #e04e1f; color: #fff !important; text-decoration: none !important; }
.psk-sshop-card__details {
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center; font-size: 0.85rem; color: #4b5162; text-decoration: none; font-weight: 700;
    border: 1px solid #e3e6ed; border-radius: 9px; padding: 9px 14px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.psk-sshop-card__details:hover { color: #fc5e28; border-color: #fc5e28; background: #fff7f2; text-decoration: none; }

.psk-sshop-empty { text-align: center; padding: 60px 20px; color: #6b7280; }

/* ── SHOP-BY-NEED — bold navy band, not another white/gray panel ──
   Same dark gradient device as .psk-process-band on Digital Books, so
   Saathi Shop reads as one deliberate section, not a flat list. ──── */
.psk-sshop-need {
    position: relative;
    background-color: #040e26;
    background-image:
        radial-gradient(circle at 85% 15%, rgba(252,94,40,0.22), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(252,94,40,0.12), transparent 40%),
        linear-gradient(135deg, #0a1f4d 0%, #040e26 100%);
    padding: 52px 0;
    overflow: hidden;
}
.psk-sshop-need .container { position: relative; z-index: 1; }
.psk-sshop-need h2 { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 26px; text-align: center; }
.psk-sshop-need__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.psk-sshop-need__item {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 18px;
    text-align: center; font-weight: 600; color: #fff; text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
    backdrop-filter: blur(2px);
}
.psk-sshop-need__item:hover { border-color: #fc5e28; background: rgba(252,94,40,0.14); color: #ff9d6e; text-decoration: none; transform: translateY(-3px); }

/* ── HOW IT WORKS ────────────────────────────────────────── */
.psk-sshop-how { padding: 52px 0; background: #fff; }
.psk-sshop-how h2 { font-size: 1.5rem; font-weight: 800; color: #1a1f36; margin-bottom: 28px; text-align: center; }
.psk-sshop-how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; counter-reset: sshop-step; position: relative; }
.psk-sshop-how__grid::before {
    content: ""; position: absolute; top: 21px; left: 10%; right: 10%; height: 2px;
    background: repeating-linear-gradient(90deg, #fde3d4 0 8px, transparent 8px 16px);
    z-index: 0;
}
.psk-sshop-how__step { text-align: center; position: relative; padding: 0 12px; z-index: 1; }
.psk-sshop-how__step::before {
    counter-increment: sshop-step; content: counter(sshop-step);
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 16px;
    background: linear-gradient(135deg, #fc5e28, #ff8243); color: #fff; font-weight: 800; font-size: 1.1rem;
    box-shadow: 0 4px 14px rgba(252,94,40,0.35);
}
.psk-sshop-how__step strong { display: block; font-size: 0.98rem; color: #1a1f36; margin-bottom: 6px; }
.psk-sshop-how__step span { font-size: 0.86rem; color: #6b7280; line-height: 1.5; }
@media (max-width: 768px) { .psk-sshop-how__grid::before { display: none; } }

/* ── DISCLOSURE ──────────────────────────────────────────── */
.psk-sshop-disclosure {
    background: #fffaf7; border: 1px solid #fde3d4; border-radius: 10px;
    padding: 16px 18px; font-size: 0.82rem; color: #7a5a44; line-height: 1.6;
    margin: 8px 0 40px;
}
.psk-sshop-disclosure strong { color: #e04e1f; }

/* ── PRODUCT DETAIL ──────────────────────────────────────── */
.psk-sshop-pd { padding: 44px 0; }
.psk-sshop-pd__grid { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 40px; align-items: start; }
/* Sticky so the image/trust block stays in view as the (much longer) right column scrolls past
   Key Features, About, FAQ etc., instead of ending early and leaving blank page below it. The
   header is ~86px tall, so 100px clears it with a little breathing room. */
.psk-sshop-pd__visual { position: sticky; top: 100px; }
/* 4:3, same reasoning as .psk-sshop-card__media above — fits real landscape-ish product photos
   instead of leaving empty space under a square box built for a photo that isn't square. Plain
   white background (not the orange-tinted gradient used elsewhere) and object-fit:cover, since a
   real white-background product photo looked like it had gray side-bars against the tint, with
   gaps either side under object-fit:contain where the photo didn't exactly match the box ratio. */
.psk-sshop-pd__media { background: #fff; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; aspect-ratio: 4/3; }
/* object-fit:contain — same reasoning as .psk-sshop-card__media img above: cover cropped into the
   product itself, which a real product photo must never do. */
.psk-sshop-pd__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.psk-sshop-pd__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #c3cbe0; text-align: center; }
.psk-sshop-pd__placeholder .fa { font-size: 3.4rem; color: #fcd9c8; }
.psk-sshop-pd__placeholder span:last-child { font-size: 0.86rem; font-weight: 600; color: #9aa1b1; }

/* Trust strip under the product image — fills what was dead space below a short image box */
/* Gallery thumbnail strip — click to swap .psk-sshop-pd__media's main photo (see
   psk-saathi-shop.js). Small fixed squares, not full product-card-sized boxes, since these are
   just navigation, not the main view. */
.psk-sshop-pd__gallery { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.psk-sshop-pd__thumb {
    width: 64px; height: 64px; padding: 4px; border-radius: 8px; border: 2px solid #e9ebf1;
    background: #fff; cursor: pointer; flex-shrink: 0; transition: border-color .15s ease;
}
.psk-sshop-pd__thumb img { width: 100%; height: 100%; object-fit: contain; }
.psk-sshop-pd__thumb:hover { border-color: #fcd9c8; }
.psk-sshop-pd__thumb--active { border-color: #fc5e28; }

.psk-sshop-pd__trust { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.psk-sshop-pd__trust span { display: flex; align-items: center; gap: 9px; font-size: 0.84rem; font-weight: 600; color: #4b5162; }
.psk-sshop-pd__trust .fa { color: #fc5e28; width: 16px; text-align: center; }

.psk-sshop-pd__cat { font-size: 0.78rem; font-weight: 700; color: #fc5e28; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.psk-sshop-pd__cat a { color: inherit; }
.psk-sshop-pd h1 { font-size: 1.7rem; font-weight: 800; color: #1a1f36; line-height: 1.3; margin-bottom: 14px; }
.psk-sshop-pd__brand { font-size: 0.86rem; color: #6b7280; margin-bottom: 10px; }
.psk-sshop-pd__brand strong { color: #1a1f36; }
.psk-sshop-pd__short { font-size: 1.02rem; color: #4b5162; line-height: 1.65; margin-bottom: 22px; }

/* Specification table */
.psk-sshop-pd__specs { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.psk-sshop-pd__specs tr:not(:last-child) { border-bottom: 1px solid #e9ebf1; }
.psk-sshop-pd__specs th { text-align: left; padding: 10px 16px 10px 0; color: #6b7280; font-weight: 600; width: 42%; vertical-align: top; }
.psk-sshop-pd__specs td { padding: 10px 0; color: #1a1f36; font-weight: 600; }

/* Buy button gets its own bordered box — makes the single most important action on the page
   stand out instead of sitting flush against the surrounding text like everything else. */
.psk-sshop-pd__buybox {
    display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
    border-bottom: 1px solid #eef0f4; padding-bottom: 22px; margin-bottom: 24px;
}
.psk-sshop-pd__buy,
.psk-sshop-pd__buy:link,
.psk-sshop-pd__buy:visited,
.psk-sshop-pd__buy:active,
.psk-sshop-pd__buy:focus {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fc5e28; color: #fff !important; font-weight: 700; font-size: 0.95rem;
    padding: 12px 26px; border-radius: 9px; text-decoration: none !important; border: none; cursor: pointer;
    /* See the matching comment on .psk-sshop-card__buy in this file for why every interaction
       state is forced explicitly here. */
    transition: background .15s ease;
}
.psk-sshop-pd__buy .fa { color: #fff !important; }
.psk-sshop-pd__buy:hover { background: #e04e1f; color: #fff !important; text-decoration: none !important; }
.psk-sshop-pd__buy-note { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: #9aa1b1; line-height: 1.4; max-width: 260px; }
.psk-sshop-pd__buy-note .fa { flex-shrink: 0; }

.psk-sshop-pd__section { margin-bottom: 26px; }
.psk-sshop-pd__section h2 { font-size: 1.1rem; font-weight: 700; color: #1a1f36; margin-bottom: 10px; }

/* Content sections as light cards, not plain stacked text — gives the page real visual
   structure instead of one long flat column. */
.psk-sshop-pd__card {
    background: #f7f8fb; border-radius: 14px; padding: 22px 24px; margin-bottom: 18px;
}
.psk-sshop-pd__card h2 {
    font-size: 1.02rem; font-weight: 700; color: #1a1f36; margin-bottom: 14px;
    display: flex; align-items: center; gap: 9px;
}
.psk-sshop-pd__card h2 .fa { color: #fc5e28; }
.psk-sshop-pd__features { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.psk-sshop-pd__features li { font-size: 0.92rem; color: #4b5162; padding-left: 26px; position: relative; line-height: 1.5; }
.psk-sshop-pd__features li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #22c55e; font-weight: 800; }
.psk-sshop-pd__desc { font-size: 0.92rem; color: #4b5162; line-height: 1.7; }
.psk-sshop-pd__desc p { margin-bottom: 12px; }
.psk-sshop-pd__suitable { font-size: 0.9rem; color: #4b5162; margin: 0; }

.psk-sshop-related { padding: 8px 0 44px; }
.psk-sshop-related h2 { font-size: 1.3rem; font-weight: 800; color: #1a1f36; margin-bottom: 20px; }

@media (max-width: 768px) {
    .psk-sshop-hero h1 { font-size: 1.7rem; }
    .psk-sshop-pd__grid { grid-template-columns: 1fr; gap: 24px; }
    .psk-sshop-pd__visual { position: static; }
    .psk-sshop-pd__media { aspect-ratio: 4/3; }
    .psk-sshop-how__grid { grid-template-columns: repeat(2, 1fr); }
}