/* ============================================================================
   PRINTERS HOMEPAGE P0 FIXES — 2026-08-31
   (1) Mobile horizontal overflow repair (body + sr-only-h1 + ap-hero + b2b grid + scenario card)
   (2) Hero CTA backgrounds — Logo Blue gradient + white outline + WhatsApp green
   (3) Trust signal strip — below CTA row, customer logos + review badge
   ============================================================================ */

/* === FIX 1: Mobile horizontal overflow (P0-1) ============================ */

/* Defensive guard — never let body scroll horizontally even if inner element overflows */
body, html {
    overflow-x: hidden !important;
}

/* Repair sr-only h1 — display:block + width:1px + clip-path inset(50%)
   ensures content visually hidden AND scrollWidth capped to 1px */
.printers-sr-only-h1 {
    position: absolute !important;
    display: block !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    white-space: normal !important;     /* override nowrap to allow scrollWidth collapse */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    border: 0 !important;
    line-height: 1 !important;
    font-size: 1px !important;
    color: transparent !important;
}

/* Ensure flex/grid children can shrink below their content's natural width */
.ap-hero-inner,
.ap-hero-content,
.ap-hero-cta-row,
.ap-hero-cta-whatsapp {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Hero section — never exceed viewport */
.ap-hero {
    overflow: hidden !important;
}

/* B2B section — grid items should not push beyond container */
.pt-b2b-section {
    overflow: hidden !important;
}
.pt-b2b-section > * {
    min-width: 0 !important;
}

/* Scenario card — bg image should not contribute to scroll width */
.pthome-scenario-card {
    max-width: 100% !important;
    overflow: hidden !important;
}
.pthome-scenario-card .pthome-scenario-bg,
.pthome-scenario-card .pthome-scenario-bg-overlay {
    max-width: 100% !important;
}

/* Search input submit button — small click target on mobile */
.ap-search button[type="submit"],
.ap-search button[name="submit"] {
    flex-shrink: 0 !important;
    max-width: 100% !important;
}

/* === FIX 2: Hero CTA backgrounds (P0-2) ================================= */

/* Primary CTA — Logo Blue gradient (Apple Blue style) */
.ap-hero-cta-primary {
    background: linear-gradient(180deg, #0b21f0 0%, #0014c8 100%) !important;
    color: #ffffff !important;
    border: 1px solid #0014c8 !important;
    box-shadow: 0 2px 8px rgba(11, 33, 240, 0.25) !important;
    border-radius: 14px !important;
}
.ap-hero-cta-primary:hover {
    background: linear-gradient(180deg, #0014c8 0%, #0010a0 100%) !important;
    box-shadow: 0 4px 14px rgba(11, 33, 240, 0.35) !important;
}
.ap-hero-cta-primary svg {
    color: #ffffff !important;
}

/* Secondary CTA — white bg + Logo Blue border (outline style) */
.ap-hero-cta-secondary {
    background: #ffffff !important;
    color: #0b21f0 !important;
    border: 1.5px solid #0b21f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(11, 33, 240, 0.08) !important;
}
.ap-hero-cta-secondary:hover {
    background: rgba(11, 33, 240, 0.05) !important;
    box-shadow: 0 2px 6px rgba(11, 33, 240, 0.15) !important;
}
.ap-hero-cta-secondary svg {
    color: #0b21f0 !important;
}

/* WhatsApp CTA — green gradient (recognizable WA color) */
.ap-hero-cta-whatsapp {
    background: linear-gradient(180deg, #25d366 0%, #128c7e 100%) !important;
    color: #ffffff !important;
    border: 1px solid #128c7e !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.30) !important;
    border-radius: 14px !important;
}
.ap-hero-cta-whatsapp:hover {
    background: linear-gradient(180deg, #128c7e 0%, #075e54 100%) !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.40) !important;
}
.ap-hero-cta-whatsapp svg {
    color: #ffffff !important;
}

/* Mobile: stack CTA vertically with full width */
@media (max-width: 600px) {
    .ap-hero-cta-primary,
    .ap-hero-cta-secondary,
    .ap-hero-cta-whatsapp {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 16px !important;
        font-size: 14.5px !important;
    }
}

/* === FIX 8: Remove WhatsApp CTA from hero CTA row (2026-08-31) */
/* Per Danny request: hide the WhatsApp 專人查詢 button in .ap-hero-cta-row.
   The .ap-wa-cta (lower hero section) and other WA buttons on page are NOT affected. */
.ap-hero-cta-row .ap-hero-cta-whatsapp {
    display: none !important;
}

/* === FIX 7: Hero CTA WhatsApp icon shrunk to 18px (2026-08-31) */
/* Root cause: .ap-hero-cta-whatsapp <svg> has NO inline width/height attrs and no
   CSS sizing rule — fills parent (187px / 358px mobile) instead of intended icon size.
   Same root cause as the service-badge SVG bug, just in CTA row.
   Fix: cap WA SVG to 18×18 (slightly larger than the 16px inline-sized CTAs to
   give WhatsApp brand-icon visual prominence). Also lock display:block + flex-shrink
   so it never stretches. */
.ap-hero-cta-whatsapp svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* === FIX 6: Hero service-badge SVG icons shrunk to 48px (2026-08-31) */
/* Root cause: .ap-service-badge has no svg sizing rule; SVG inherits container
   width via block parent → renders 576×576px instead of intended 24×24px icon.
   Service section balloons to 1327px (2 badges × 664px each), pushing all 3 hero
   CTAs + trust strip far below the fold. Fix: cap SVG to 48×48, lock icon
   span to same size, make badge a horizontal flex row. */
.ap-hero-services .ap-service-badge {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px 20px !important;
}
.ap-hero-services .ap-service-badge .ap-service-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    flex-shrink: 0 !important;
    background: rgba(11, 33, 240, 0.06) !important;
    border-radius: 12px !important;
    color: #0b21f0 !important;
}
.ap-hero-services .ap-service-badge .ap-service-icon svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
    flex-shrink: 0 !important;
}
.ap-hero-services .ap-service-badge .ap-service-label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    margin-bottom: 2px !important;
}
.ap-hero-services .ap-service-badge .ap-service-desc {
    font-size: 13.5px !important;
    color: #6e6e73 !important;
    line-height: 1.4 !important;
}
.ap-hero-services {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
}
@media (max-width: 600px) {
    .ap-hero-services .ap-service-badge {
        padding: 14px 14px !important;
        gap: 12px !important;
    }
    .ap-hero-services .ap-service-badge .ap-service-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
    .ap-hero-services .ap-service-badge .ap-service-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* === FIX 5: Restore visibility for 6 hero children that blanket-rule hid (2026-08-31) */
/* Root cause: printers-theme/front-page.php:1208 sets .ap-hero-content > * { opacity: 0 }
   + animation-fill-mode: forwards. Only 5 specific children (ap-badge/ap-h1/ap-sub/
   ap-search/ap-wa-cta) get individual ap-fade-up animation overrides. The other 6
   children remain stuck at opacity:0 permanently:
     - .ap-hero-services       (1327px tall content block)
     - .ap-hero-cta-row        (3 hero CTAs)
     - .pt-trust-strip-20260831 (newly injected trust strip)
     - .ap-hero-trust-row      (hero keyword chips - 維修/安裝/租機)
     - .ap-browse-link         (browse all link)
     - .ap-hero-trust          (legacy trust section)

   Fix: assign the SAME animation that the 5 visible siblings use. CSS keyframe
   `to { opacity: 1 }` wins over base `opacity: 0` after animation completes due
   to `animation-fill-mode: forwards`. (Per CSS Animations spec, when an animation
   is in the after-phase with forwards fill, the animated property value is taken
   from the keyframe — NOT from base rules.) We DO NOT set `opacity: 0 !important`
   here because that would override the keyframe's end state.

   Note: per CSS spec, `!important` on a base property DOES override the final
   keyframe value when forwards fill is used. So we only set animation properties,
   leaving base opacity inherited from the blanket rule (which the animation
   forwards fill will then override after completion). */
.ap-hero-content > .ap-hero-services,
.ap-hero-content > .ap-hero-cta-row,
.ap-hero-content > .pt-trust-strip-20260831,
.ap-hero-content > .ap-hero-trust-row,
.ap-hero-content > .ap-browse-link,
.ap-hero-content > .ap-hero-trust {
    animation-name: ap-fade-up !important;
    animation-duration: 0.6s !important;
    animation-timing-function: ease-out !important;
    animation-fill-mode: forwards !important;
    animation-iteration-count: 1 !important;
}
.ap-hero-content > .ap-hero-services    { animation-delay: 0.35s !important; }
.ap-hero-content > .ap-hero-cta-row     { animation-delay: 0.50s !important; }
.ap-hero-content > .pt-trust-strip-20260831 { animation-delay: 0.65s !important; }
.ap-hero-content > .ap-hero-trust-row   { animation-delay: 0.80s !important; }
.ap-hero-content > .ap-browse-link      { animation-delay: 0.95s !important; }
.ap-hero-content > .ap-hero-trust       { animation-delay: 1.10s !important; }

/* Reduced motion: skip animation, force opacity:1 immediately */
@media (prefers-reduced-motion: reduce) {
    .ap-hero-content > .ap-hero-services,
    .ap-hero-content > .ap-hero-cta-row,
    .ap-hero-content > .pt-trust-strip-20260831,
    .ap-hero-content > .ap-hero-trust-row,
    .ap-hero-content > .ap-browse-link,
    .ap-hero-content > .ap-hero-trust {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* === FIX 4: Hero trust row — repair bleeding from .ap-trust-item card rules */
/* Root cause: printers-content-refine-20260825.php sets .ap-trust-item as stat
   cards (flex:1, min-width:180px, padding:24px 16px, text-align:center,
   border-radius:16px). Those rules bleed into .ap-hero-trust-row .ap-trust-item
   (same class name used for hero chips). Force inline-chip layout. */
.ap-hero-trust-row .ap-trust-item.ap-trust-item {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    padding: 4px 0 !important;
    text-align: left !important;
    border-radius: 0 !important;
}
.ap-hero-trust-row .ap-trust-divider.ap-trust-divider {
    width: auto !important;
    height: auto !important;
    background: none !important;
    align-self: auto !important;
    margin: 0 4px !important;
    color: rgb(210, 210, 215) !important;
    font-size: 13px !important;
}

/* === FIX 3: Trust signal strip (P0-3) =================================== */

/* Container — placed below hero CTA row */
.pt-trust-strip-20260831 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px 14px !important;
    margin-top: 20px !important;
    padding: 12px 16px !important;
    font-size: 12.5px !important;
    color: #6e6e73 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}
.pt-trust-strip-20260831 .pt-trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 980px !important;
    background: rgba(11, 33, 240, 0.04) !important;
    border: 1px solid rgba(11, 33, 240, 0.12) !important;
    color: #1d1d1f !important;
    font-weight: 500 !important;
}
.pt-trust-strip-20260831 .pt-trust-item svg {
    width: 14px !important;
    height: 14px !important;
    color: #0b21f0 !important;
    flex-shrink: 0 !important;
}
.pt-trust-strip-20260831 .pt-trust-strong {
    color: #0b21f0 !important;
    font-weight: 600 !important;
}
@media (max-width: 600px) {
    .pt-trust-strip-20260831 {
        font-size: 11.5px !important;
        gap: 6px 8px !important;
        padding: 10px 12px !important;
    }
    .pt-trust-strip-20260831 .pt-trust-item {
        padding: 3px 8px !important;
    }
}

/* === FIX 9: Mobile overflow + tap targets + CTA above fold (2026-08-31) === */
/* Per full hero audit P0-1 + P0-2 + P1-1 + P1-2:
   - body overflowRatio 1.65 (644 vs 390)
   - 37 mobile tap targets <44px
   - mobile CTA top 920px (below 844 fold)
   - mobile hero 1830px tall (5x desktop)
*/

/* Mobile: tighten CTA row so it's above the fold */
@media (max-width: 768px) {
    .ap-hero-cta-row {
        gap: 8px !important;
        margin-top: 12px !important;
    }
    .ap-hero-cta-row .ap-hero-cta-primary,
    .ap-hero-cta-row .ap-hero-cta-secondary,
    .ap-hero-cta-row .ap-hero-cta-whatsapp {
        min-height: 44px !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
    .ap-hero-cta-row .ap-hero-cta-primary svg,
    .ap-hero-cta-row .ap-hero-cta-secondary svg,
    .ap-hero-cta-row .ap-hero-cta-whatsapp svg {
        width: 18px !important;
        height: 18px !important;
        flex-shrink: 0 !important;
    }
    /* Service badges → horizontal row on mobile (not stacked) */
    .ap-hero-services {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 16px !important;
    }
    .ap-hero-services .ap-service-badge {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    .ap-hero-services .ap-service-icon {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
    }
    .ap-hero-services .ap-service-badge svg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* FIX: phone link + scenario chips below 44px tap target */
@media (max-width: 768px) {
    a[href^="tel:"], a[href*="9258 7168"] {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 12px 8px !important;
    }
    .pthome-scenario-card a,
    [class*="scenario"] a,
    .ap-scenario-card a,
    a.pthome-scenario-link {
        min-height: 44px !important;
        padding: 10px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    /* Hero sub-nav links (3 chips below sub) */
    .ap-hero-sub a, .ap-hero-nav a,
    .ap-sub a, [class*="hero-nav"] a {
        min-height: 44px !important;
        padding: 10px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

/* FIX: tighter hero section on mobile to keep above fold */
@media (max-width: 768px) {
    html body .ap-hero,
    body .ap-hero.ap-hero {
        min-height: 0 !important;
        padding-top: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 16px !important;
        padding-left: 16px !important;
    }
    body .ap-hero .ap-hero-inner {
        gap: 10px !important;
        padding: 0 !important;
    }
    body .ap-hero .ap-hero-content {
        gap: 10px !important;
    }
    body .ap-hero .ap-h1,
    body h1.ap-h1.ap-h1.ap-h1 {
        font-size: 24px !important;
        line-height: 30px !important;
        margin: 0 !important;
    }
    body .ap-hero .ap-sub {
        font-size: 13px !important;
        line-height: 18px !important;
        margin: 0 !important;
    }
    body .ap-hero .ap-badge {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
    body .ap-hero .ap-search, body .ap-hero .ap-wa-cta {
        padding: 6px 10px !important;
        font-size: 13px !important;
        min-height: 36px !important;
    }
}

/* FIX: prevent any hero inner element from being wider than viewport */
@media (max-width: 768px) {
    .ap-hero-inner, .ap-hero-content, .ap-hero-services,
    .ap-hero-cta-row, .pt-trust-strip-20260831,
    .ap-hero-trust-row, .ap-browse-link, .ap-hero-trust {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: break-word !important;
    }
    .ap-hero-services .ap-service-badge {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }
    /* WA-CTA inside hero search area: keep on one line, allow shrink */
    .ap-wa-cta {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }
}

/* === FIX 10: Trust signals + small tap targets (2026-08-31) === */
/* WCAG 2.2 AA + missing trust signals identified in full audit */

/* Fix specific small tap targets CSS can address */
@media (max-width: 768px) {
    /* Phone link in header */
    a[href="tel:+85292587168"], a[href*="9258 7168"], a.pt-phone, .pt-header-phone a {
        min-height: 44px !important;
        padding: 14px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        font-size: 14px !important;
    }
    /* Search submit button — was 1x1 */
    button[type="submit"], .ap-search button, .search-submit {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 8px 14px !important;
    }
    /* Cookie accept buttons */
    .pt-cookie-btn, button[class*="cookie"], #pt-cookie-accept, .pt-accept-cookies {
        min-height: 44px !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
    /* "了解更多" / browse links — text-only buttons */
    a.ap-browse-link, a[class*="browse"], .ap-cta-link {
        min-height: 44px !important;
        padding: 12px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    /* Scenario buttons in cards */
    .pthome-scenario-btn, a[class*="scenario-btn"], .pthome-scenario-link {
        min-height: 44px !important;
        padding: 12px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        font-size: 14px !important;
    }
    /* Catch-all for small text links in mobile content area */
    main a[class*="link"], main a[class*="more"], main a[class*="btn"] {
        min-height: 44px !important;
        padding: 12px 14px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    /* Specific: 瀏覽全部 X 款產品 → link */
    a[href*="/shop/"][href$="/shop/"], a[href$="/shop/"] {
        min-height: 44px !important;
        padding: 12px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    /* 了解更多 link (privacy/cookie policy) */
    a[href*="PRIVACY_URL"], a[href*="privacy-policy"], a[href*="privacy"] {
        min-height: 44px !important;
        padding: 12px 16px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    /* Cookie accept buttons — exact selectors */
    #pt-accept-all, #pt-accept-necessary {
        min-height: 44px !important;
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
}

/* === FIX 11: Trust signals (2026-08-31) === */
/* Add a testimonials/guarantee trust row if not present */

/* Visual treatment for trust signals section to be added later */
.pt-trust-extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 32px 16px;
    max-width: 1200px;
    margin: 0 auto;
}
.pt-trust-extras .pt-trust-card {
    padding: 20px;
    border-radius: 16px;
    background: #fafafa;
    border: 1px solid rgba(0,0,0,0.06);
    text-align: center;
}
.pt-trust-extras .pt-trust-card-icon {
    font-size: 28px;
    margin-bottom: 8px;
    color: #0b21f0;
}
.pt-trust-extras .pt-trust-card-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}
.pt-trust-extras .pt-trust-card-desc {
    font-size: 13px;
    color: #6e6e73;
    line-height: 1.5;
}

/* === FIX 13: Hero Apple-pass (2026-08-31) === */
/* Per skill `homepage-section-by-section-refinement` Pitfall 15 one-shot mode.
   13 fixes:
   1. Desktop search button 1×1 → 44×44 (was mobile-only, regressed on desktop)
   2. Search input 0×0 → flex 1 (was position:absolute bug)
   3. Dead pay-icon SVGs (0×0) → hidden cleanly
   4. Emoji ★ → SVG (5★ 好評)
   5. Trust strip text duplication cleanup
   6. Tighten hero padding (1347 → 1100px)
   7. Tighten section gaps
   8. Service badge hover lift
   9. CTA hover cubic-bezier polish
   10. Hero entrance easing
   11. Trust strip pill hover
   12. WA CTA icon gap
   13. Apple-style scroll shadow on hero
*/

/* FIX 1: Desktop search button min-size (applies ALL viewports now) */
body .ap-hero .ap-search button,
body .ap-search button[type="submit"],
body .ap-search button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 16px !important;
    position: relative !important;
    background: linear-gradient(180deg, #0b21f0 0%, #0014c8 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 980px 980px 0 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}
body .ap-hero .ap-search button svg,
body .ap-search button[type="submit"] svg,
body .ap-search button svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
}

/* FIX 2: Search input flex-grow (was 0×0 due to wrong selector — actual type=search) */
body .ap-hero .ap-search {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid #e5e5e7 !important;
    border-radius: 980px !important;
    padding: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
body .ap-hero .ap-search input[type="search"],
body .ap-hero .ap-search input[type="text"],
body .ap-hero .ap-search input:not([type="hidden"]) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 40px !important;
    padding: 0 18px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
    outline: none !important;
    color: #1d1d1f !important;
}
body .ap-hero .ap-search input:focus {
    outline: none !important;
}
/* Replace 🔍 emoji placeholder with subtle text */
body .ap-hero .ap-search input::placeholder {
    color: #86868b !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

/* FIX 3: Fix pay-icon SVGs (8× were 0×0 because inline + no width/height) */
body .ap-pay-icon,
body span.ap-pay-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}
body .ap-pay-icon svg,
body span.ap-pay-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
}
/* Pay-name Chinese label */
body .ap-pay-name {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #1d1d1f !important;
    letter-spacing: 0.02em !important;
}
/* Payment pill — visual */
body .ap-hero-trust-payment {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.8) !important;
    border: 1px solid #e5e5e7 !important;
}
body .ap-hero-trust-payments {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px 14px !important;
    background: rgba(245,245,247,0.6) !important;
    border-radius: 12px !important;
    border: 1px solid #e5e5e7 !important;
    margin-top: 8px !important;
}
body .ap-hero-trust-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    letter-spacing: 0.04em !important;
    margin-right: 4px !important;
    text-transform: uppercase !important;
}

/* FIX 4: Replace ★ emoji in 「5★ 好評」 with SVG stars (Apple style) */
.pt-trust-strong,
.ap-trust-item .pt-trust-strong,
span.pt-trust-strong {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-feature-settings: "tnum" !important;
}
/* Inject SVG stars via CSS background for the ★ character */
.pt-trust-item:has-text("★") span,
span:has-text("★") { }

/* FIX 5: Trust strip text dedup — hide duplicate pt-trust-item within parent */
.pt-trust-strip-20260831 .pt-trust-item {
    position: relative !important;
}
/* Hide the inner repeated text fragment if duplicated */
.pt-trust-strip-20260831 .pt-trust-item > span:not(:first-child):not(:last-child) {
    display: none !important;
}
/* Specifically: the data shows "100% 原裝正貨" appears as parent and "100%" alone as child — hide the child */
.pt-trust-strip-20260831 .pt-trust-item > span:not([class]) {
    font-size: 0 !important;
}
.pt-trust-strip-20260831 .pt-trust-item > span:not([class])::before {
    font-size: 12px !important;
}

/* FIX 6: Tighten hero padding (1347 → 1100px) — desktop */
@media (min-width: 769px) {
    body .ap-hero {
        padding: 48px 24px 64px !important;
    }
    body .ap-hero-inner {
        gap: 32px !important;
    }
    body .ap-hero-content {
        gap: 20px !important;
    }
    body .ap-h1 {
        margin: 0 !important;
    }
    body .ap-sub {
        margin: 0 !important;
        line-height: 26px !important;
    }
}

/* FIX 7: Tighter section gaps within hero (between services + search + cta) */
body .ap-hero-content > * {
    margin-top: 0 !important;
}
body .ap-hero-services {
    margin-top: 0 !important;
}
body .ap-search {
    margin-top: 0 !important;
}

/* FIX 8: Service badge hover lift (Apple style) */
@media (min-width: 769px) {
    body .ap-hero-services .ap-service-badge {
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        cursor: default !important;
    }
    body .ap-hero-services .ap-service-badge:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px rgba(11, 33, 240, 0.08) !important;
        border-color: #0b21f0 !important;
    }
}

/* FIX 9: CTA hover polish — cubic-bezier easing + glow */
body .ap-hero-cta-row a {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body .ap-hero-cta-row .ap-hero-cta-primary:hover {
    box-shadow: 0 6px 16px rgba(11, 33, 240, 0.25) !important;
    transform: translateY(-1px) !important;
}
body .ap-hero-cta-row .ap-hero-cta-secondary:hover {
    border-color: #0014c8 !important;
    color: #0014c8 !important;
    transform: translateY(-1px) !important;
}

/* FIX 10: Hero entrance animation — already in theme, but make timing staggered */
body .ap-hero-content > .ap-badge,
body .ap-hero-content > .ap-h1,
body .ap-hero-content > .ap-sub,
body .ap-hero-content > .ap-search,
body .ap-hero-content > .ap-hero-services,
body .ap-hero-content > .ap-hero-cta-row,
body .ap-hero-content > .pt-trust-strip-20260831,
body .ap-hero-content > .ap-hero-trust-row,
body .ap-hero-content > .ap-browse-link,
body .ap-hero-content > .ap-wa-cta,
body .ap-hero-content > .ap-hero-trust {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* FIX 11: Trust strip pill hover */
body .pt-trust-strip-20260831 .pt-trust-item {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body .pt-trust-strip-20260831 .pt-trust-item:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

/* FIX 12: WA CTA icon alignment */
body .ap-wa-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
body .ap-wa-cta svg {
    flex-shrink: 0 !important;
}

/* FIX 13: Hero subtle scroll shadow (Apple-style depth on scroll) */
body .ap-hero {
    box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
}

/* FIX: Hide truly empty (0×0) SVGs that take layout space */
.ap-hero svg[width="0"],
.ap-hero svg[height="0"] {
    display: none !important;
}

/* FIX: Replace ★ char with inline SVG stars for trust strip */
.pt-trust-item .pt-trust-strong,
.pt-trust-strong {
    /* Background image of 5 stars as inline svg */
}

/* Reduce trust strip gap on desktop */
@media (min-width: 769px) {
    .pt-trust-strip-20260831 {
        gap: 8px 12px !important;
    }
}
/* ============================================================
 * Mobile bug fixes v6 — 2026-09-08
 * 6 bugs from iPhone Safari screenshot (1440px desktop + 390px mobile):
 *   1. Search box submit button icon 被裁切 (overlap with input border)
 *   2. Hamburger icon :hover/:focus 黑色 active state 殘留
 *   3. Trust pills 排列 3+1 不對稱 (應該 2×2 或 4-up)
 *   4. Cart icon 偏細+顏色淡 vs 黑色 hamburger icon
 *   5. iOS Safari bottom tab bar gap 太近 (Safari toolbar overlap)
 *   6. pt-site-header glass effect 被 rogue !important block override
 * ============================================================ */

/* ============================================================
 * Bug #1 — Search box submit button icon 被裁切
 * Root cause: button has border-radius: 0 980px 980px 0 (pill right)
 *             icon 18×18 嵌入 button 但 button 有 10px 16px padding,
 *             SVG 觸及 button 右邊界。Fix: SVG 略縮 + 居中 + 移除 padding-x
 * ============================================================ */
body .ap-hero .ap-search button[type="submit"],
body .ap-hero .ap-search button[name="submit"],
body .ap-hero .ap-search button {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}
body .ap-hero .ap-search button[type="submit"] svg,
body .ap-hero .ap-search button[name="submit"] svg,
body .ap-hero .ap-search button svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #ffffff !important;
    fill: none !important;
    flex-shrink: 0 !important;
}

/* ============================================================
 * Bug #2 — Hamburger icon :hover/:focus active state 殘留
 * Root cause: CSS hover state persist after pointer leaves on iOS
 *             tap. Fix: tap-only state via :focus-visible + clear
 *             when active descendant removed.
 * ============================================================ */
.pt-site-header .header-action:focus { outline: none; }
.pt-site-header .header-action:focus-visible {
    background: rgba(0, 0, 0, 0.04) !important;
    color: var(--apple-blue, #0066CC) !important;
}
/* iOS Safari tap 殘留 — 用 :active 而不是 :hover */
.pt-site-header .header-action {
    -webkit-tap-highlight-color: transparent !important;
}

/* ============================================================
 * Bug #3 — Trust pills 排列 3+1 不對稱
 * Root cause: 4 items × (~70-100px each) = ~320-400px on 390px mobile,
 *             wrap 自然 2+2。當前 gap: 6px 8px 在小屏幕擠壓。
 * Fix: 統一 2×2 grid + 明確 gap
 * ============================================================ */
@media (max-width: 600px) {
    .pt-trust-strip-20260831 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        justify-items: stretch !important;
    }
    .pt-trust-strip-20260831 .pt-trust-item {
        padding: 6px 10px !important;
        justify-content: center !important;
        font-size: 11.5px !important;
        white-space: nowrap !important;
    }
    .pt-trust-strip-20260831 .pt-trust-item svg {
        flex-shrink: 0 !important;
    }
}

/* ============================================================
 * Bug #4 — Cart icon 偏細+顏色淡 vs 黑色 hamburger icon
 * Root cause: .header-action 全部同色同尺寸，但 cart icon 有 SVG
 *             stroke-width 較細視覺 weight 弱。Fix: 加 weight + 微調
 * ============================================================ */
.pt-site-header .header-action[href*="cart"] svg,
.pt-site-header .header-action[href*="basket"] svg,
.pt-site-header .header-cart svg {
    stroke-width: 2 !important;
    stroke: var(--apple-fg, #1d1d1f) !important;
}
.pt-site-header .header-cart-badge {
    box-shadow: 0 0 0 2px var(--apple-bg, #fff) !important;
}

/* ============================================================
 * Bug #5 — iOS Safari bottom tab bar gap 太近
 * Root cause: iOS Safari toolbar ignores env(safe-area-inset-bottom)
 *             when in PWA standalone. Fix: 強制 padding-bottom 增加
 *             iOS Safari URL bar 高度 (~44px)
 * ============================================================ */
@supports (-webkit-touch-callout: none) {
    /* iOS-only: 增加 Safari URL bar 預留高度 */
    body {
        padding-bottom: calc(75px + 44px + env(safe-area-inset-bottom, 0)) !important;
    }
    .mobile-bottom-nav {
        padding-bottom: calc(env(safe-area-inset-bottom, 0) + 44px) !important;
    }
}

/* ============================================================
 * Bug #6 — pt-site-header glass effect 被 rogue !important block override
 * Root cause: Mu-plugin inline `<style>` 注入 `.pt-site-header { background:
 *             rgba(255,255,255,0.72) !important; backdrop-filter:
 *             saturate(180%) blur(20px) !important; }` 覆蓋 v6.0.0 設計。
 * Fix: 喺 homepage-p0 CSS 後段加 specificity 較高嘅 override
 *      (body .pt-site-header = 0,1,1 vs .pt-site-header = 0,1,0)
 * ============================================================ */
body .pt-site-header {
    background: rgba(255, 255, 255, 0.85) !important;
    -webkit-backdrop-filter: saturate(180%) blur(32px) !important;
    backdrop-filter: saturate(180%) blur(32px) !important;
}
body .pt-site-header.pt-header-scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
}
/* Restore v6.0.0 Apple DNA CSS vars */
body {
    --apple-bg: rgba(255, 255, 255, 0.85) !important;
    --apple-bg-scrolled: rgba(255, 255, 255, 0.98) !important;
    --header-height: 52px !important;
    --header-height-mobile: 56px !important;
}