/*!
 * PrintLocker — product (child) pages (template-single-product.php)
 * Loads after style.css (header.php does this), so it uses the same tokens and helpers:
 * pl-container / px / py for layout, pl-eyebrow, pl-highlight, pl-section-soft, the quote form (gt-* / pl-form),
 * page nav, reviews, get in touch and same-day are all styled in style.css. Only product sections live here ("pd-").
 *
 * 1. Shared type
 * 2. Hero (gallery + intro left, title + quote form + features right)
 * 3. Overview + Specifications
 * 4. FAQ (open Q&A list)
 * 5. Other styles
 * 6. Shared sections (reviews / get in touch colours)
 * 7. Responsive
 */

/* ==========================================================================
   1. Shared type
   ========================================================================== */
.pd-section { background: #fff; }
.pd-h2 { margin: 0 0 16px; text-wrap: balance; }
.pd-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ink); }
.pd-link:hover { color: var(--pink); }
.pd-link:focus, .pd-link:active { color: var(--ink); }

/* ==========================================================================
   2. Hero
   ========================================================================== */
.pd-hero { padding-top: 40px; padding-bottom: var(--secY); }
.pd-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pd-hero__media { display: flex; flex-direction: column; }
.pd-hero__about { margin-top: 4px; }
.pd-hero__head { margin-bottom: 20px; }
.pd-hero .pl-eyebrow { margin-bottom: 8px; }

.pd-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.pd-crumbs a { color: var(--muted); }
.pd-crumbs a:hover { color: var(--pink); }
.pd-crumbs a:focus, .pd-crumbs a:active { color: var(--muted); }
.pd-crumbs [aria-current] { color: var(--ink); font-weight: 500; }

.pd-title { font-size: 46px; line-height: 1.05; margin: 0 0 10px; text-wrap: balance; }
.pd-rating { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.pd-rating:hover, .pd-rating:focus, .pd-rating:active { color: var(--ink); }
.pd-rating__stars { color: #f5b301; letter-spacing: 1px; font-size: 15px; }

.pd-gallery { display: flex; flex-direction: column; gap: 10px; margin: 0 0 28px; }
.pd-gallery__main { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
/* Same-day pages: one wide photo, no thumbnails — the featured image shape (1200 × 630) at every width, so it shows uncropped (two classes so it beats the tablet 16 / 9) */
.pd-gallery__main.pd-gallery__main--wide { aspect-ratio: 1200 / 630; }
.pd-gallery__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pd-gallery__thumb { position: relative; aspect-ratio: 4 / 3; padding: 0; border-radius: 8px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); cursor: pointer; opacity: .85; transition: opacity .15s, border-color .15s; }
.pd-gallery__thumb:hover, .pd-gallery__thumb:focus-visible { opacity: 1; border-color: var(--ink); background: var(--soft); }

.pd-lead { color: var(--muted); margin: 0 0 20px; text-wrap: pretty; }
.pd-checks { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pd-checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); }
.pd-checks svg { flex: none; margin-top: 3px; color: var(--blue); }
/* Get a Quote / Call Now — same buttons as the archive hero (.pl-hero__btn-* in style.css) */
.pd-hero .pl-hero__actions { margin-bottom: 0; }

/* Quote form card — same form as every page (.contact-form-wrap in style.css); child pages only change
   the card background to light blue (fields stay white) and set where "#contact" scrolls to */
.pd-formcard { background: var(--soft); scroll-margin-top: calc(var(--sticky-offset, 170px) + 12px); }
.pd-formcard .pl-file { background: #fff; }

.pd-features { margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.pd-features__title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin: 0; }
.pd-features__list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; }
.pd-feature { display: inline-flex; align-items: center; gap: 8px; }
.pd-feature__icon { display: inline-flex; color: var(--blue); }
.pd-feature__label { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; white-space: nowrap; }

/* ==========================================================================
   3. Overview + Specifications
   ========================================================================== */
.pd-prose p { color: var(--muted); margin: 0 0 18px; text-wrap: pretty; }
.pd-prose p a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pd-prose p a:hover { color: var(--pink); }
.pd-prose p strong { font-weight: 600; color: var(--ink); }
.pd-prose__h2 { margin: 0 0 20px; }
.pd-prose__h2--next { margin-top: 56px; }
.pd-prose__h3 { display: flex; align-items: center; gap: 16px; font-size: 22px; line-height: 1.3; margin: 48px 0 18px; letter-spacing: -.015em; }
.pd-prose__h3::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--pink); }
.pd-prose__h2 + .pd-prose__h3 { margin-top: 8px; }

/* Definition list — one item per row; an icon (.pd-dl__media) is optional, the text moves left without it */
.pd-dl { margin: 0; }
.pd-dl__item { display: flex; flex-direction: column; row-gap: 5px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pd-dl__item:first-child { padding-top: 6px; }
.pd-dl__item:last-child { border-bottom: 0; }
.pd-dl__item dt { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.5; }
.pd-dl__item dd { margin: 0; color: var(--muted); }
.pd-dl__item:has(.pd-dl__media) { display: grid; grid-template-columns: 55px minmax(0, 1fr); column-gap: 20px; align-items: start; }
.pd-dl__item:has(.pd-dl__media) dt { display: contents; }
.pd-dl__item:has(.pd-dl__media) dd { grid-column: 2; }
.pd-dl__item:has(.pd-dl__media) .pd-dl__term { align-self: end; }
.pd-dl__media { grid-row: span 2; width: 55px; height: 55px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.pl-section-soft .pd-dl__media { background: #fff; }
.pd-dl__media svg, .pd-dl__media img { width: 38px; height: 38px; object-fit: contain; }

/* Two columns side by side (same-day overview: text + photo) */
.pd-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.pd-split .pd-prose p:last-child { margin-bottom: 0; }
.pd-split--center { align-items: center; }

/* Two matching cards (same-day pages: "When should you choose" + "What you need"):
   icon + eyebrow, title, intro, simple checklist, note at the card bottom */
.pd-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.pd-panel { display: flex; flex-direction: column; background: var(--soft); border: 1px solid var(--line); border-radius: 18px; padding: 36px; }
.pd-panel__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pd-panel__head .pl-eyebrow { margin: 0; }
.pd-panel__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); }
.pd-panel__icon--pink { color: var(--pink); }
.pd-panel__icon--blue { color: var(--blue); }
.pd-panel__title { font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; margin: 0 0 10px; text-wrap: balance; }
.pd-panel__intro { color: var(--muted); margin: 0 0 22px; }
.pd-panel__list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pd-panel__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); }
.pd-panel__tick { flex: none; display: inline-flex; margin-top: 4px; color: var(--blue); }
.pd-panel__foot { margin: auto 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
.pd-panel__foot a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.pd-panel__foot a:hover { color: var(--pink); }
/* Line under the FAQ title (same-day pages: the service-area sentence) */
.pl-faq__intro { margin: -8px 0 28px; color: var(--muted); max-width: 60ch; }

/* Same-day hero: all the copy on the left, only the quote form on the right */
.pd-hero__grid--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
/* Same top spacing as the archive hero (.py); breadcrumb + H1 use the archive's pl-hero__breadcrumb / pl-hero__title */
.pd-hero.pd-hero--top { padding-top: var(--secY); }
.pd-hero__head .pl-hero__title { margin-bottom: 12px; }
.pd-hero__status { display: flex; align-items: center; gap: 9px; margin: 25px 0 0; font-size: 14px; font-weight: 500; color: var(--ink); }
/* Process on the soft background: white step cards */
.pl-process.pl-section-soft { background: var(--soft); }
.pl-process.pl-section-soft .pl-process__step { background: #fff; }

/* ==========================================================================
   4. FAQ — open Q&A list
   ========================================================================== */
.pd-faq__title { margin-bottom: 36px; }
.pd-faq__item { padding: 0 0 26px; }
.pd-faq__item:last-child { padding-bottom: 0; }
.pd-faq__q { font-size: 16.5px; line-height: 1.45; margin: 0 0 6px; font-weight: 600; letter-spacing: -.01em; }
.pd-faq__q::before { content: "Q: "; color: var(--ink); }
.pd-faq__a { color: var(--muted); margin: 0; }
.pd-faq__a::before { content: "A: "; font-weight: 600; color: var(--pink); }
.pd-faq__a strong { font-weight: 600; color: var(--ink); }

/* ==========================================================================
   5. Other styles
   ========================================================================== */
.pd-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.pd-head-row .pd-h2 { margin-bottom: 0; }
.pd-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pd-style { display: flex; flex-direction: column; gap: 4px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.pd-style:hover { border-color: var(--ink); box-shadow: 0 10px 24px rgba(10, 20, 40, .08); color: var(--ink); }
.pd-style:focus, .pd-style:active { color: var(--ink); }
.pd-style__art { height: 92px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.pd-style__svg { height: 100%; width: auto; max-width: 100%; }
.pd-style__name { font-size: 15.5px; font-weight: 600; }
.pd-style__meta { font-size: 13px; color: var(--muted); }

/* ==========================================================================
   6. Shared sections — product pages swap the archive's colours
      (archive: reviews white, get in touch light blue; product: the other way round)
   ========================================================================== */
.pl-reviews { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pl-contact-alt { background: #fff; border-top: 0; }
/* Reviews widget on a white panel, so the grey review cards read well on the light blue section */
.pl-reviews__widget { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px 10px 15px; }

/* Same-day pages: light blue hero, then white / light blue in turn — overview white, styles blue, reviews white,
   use cases blue, process white, when / prepare blue, FAQ white, get in touch blue, then the dark same-day bar.
   The templates set their own sections; the shared ones (reviews, get in touch) swap here.
   Los Angeles pages (pl-la-page) use the same colours. */
.pd-hero-band { background: var(--soft); }
.pd-hero-band .pd-formcard { background: #fff; }
.pl-section-soft .pd-panel { background: #fff; }
.pl-sameday-page .pl-reviews, .pl-la-page .pl-reviews { background: #fff; border-top: 0; border-bottom: 0; }
.pl-sameday-page .pl-contact-alt, .pl-la-page .pl-contact-alt { background: var(--soft); border-top: 1px solid var(--line); }

/* ==========================================================================
   7. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  /* one column: title → gallery → form → features → intro */
  .pd-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pd-hero__media, .pd-hero__buy { display: contents; }
  .pd-hero__head { order: 1; }
  .pd-gallery { order: 2; }
  .pd-formcard { order: 3; }
  .pd-features { order: 4; }
  .pd-hero__about { order: 5; margin-top: 32px; }
  .pd-gallery__main { aspect-ratio: 16 / 9; }
  .pd-gallery__thumbs { grid-template-columns: repeat(3, minmax(0, 96px)); }
  .pd-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-title { font-size: 42px; }
  /* same-day hero, one column: title → intro → form → checks → buttons → status */
  .pd-hero__grid--split .pd-hero__copy { display: contents; }
  .pd-hero__grid--split .pd-hero__head { order: 1; }
  .pd-hero__grid--split .pd-lead { order: 2; margin-bottom: 0; }
  .pd-hero__grid--split .pd-hero__side { order: 3; margin: 28px 0 32px; }
  .pd-hero__grid--split .pd-checks { order: 4; }
  .pd-hero__grid--split .pl-hero__actions { order: 5; }
  .pd-hero__grid--split .pd-hero__status { order: 6; }
  .pl-reviews__widget { padding: 20px 25px 15px; }
}
@media (max-width: 768px) {
  .pd-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 1024px) {
  .pd-panels { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .pd-hero { padding-top: 28px; }
  .pd-title { font-size: 34px; }
  .pd-link { font-size: 14px; }
  .pl-reviews__widget { padding: 15px 20px 15px; }
  .pd-panel { padding: 24px 20px; border-radius: 14px; }
  .pd-panel__title { font-size: 20px; }
}