/* ============================================================
   MOBILE LAYOUT — Prime Membership / Lab Reports / Stores / Deals
   ============================================================

   Two jobs:

   1. GUTTER FIX. style.css ships a global "micro-gutter" rule:

        main > *:not(header)..., section:not(.site-header):not(.site-footer) {
          padding-left:  var(--section-gutter-x) !important;
          padding-right: var(--section-gutter-x) !important;
        }

      where --section-gutter-x is 1px.

      Because it matches ANY <section> and carries !important, it strips the
      horizontal padding from these pages' wrappers AND from card-like
      sections inside them (.lr-cert, .store-card-float, .hero-section,
      .section-padding). The visible symptom on a phone is text sitting
      flush against the card/screen edge. Every rule below that restores a
      gutter needs !important purely to outrank that rule — not for style.

   2. COMPACTION. The desktop paddings (28-40px card padding, 24-28px grid
      gaps, 48-80px section padding) waste most of a 390px screen. This file
      tightens them to a phone scale so the same content reads compactly.

   Scoped to the four page wrappers, so nothing else on the site changes.
   ============================================================ */

@media (max-width: 768px) {

    /* ---------------------------------------------------------
       Shared: real page gutter instead of the global 1px.

       One arm of that global selector list is `#main > :not(…)`, and these
       wrappers ARE direct children of <main id="main">. An ID beats any
       number of classes, so no class-based override can win — not even with
       !important. Fortunately the rule resolves its value from a custom
       property, and custom properties are looked up on the element the
       declaration applies to. Setting the variable on the wrapper therefore
       changes the value the global rule itself computes, with no specificity
       fight at all. It inherits, so nested <section>s pick it up too.
       --------------------------------------------------------- */
    .gk-prime-membership-page {
        --section-gutter-x: 14px;
    }

    /* These three carry their own inner gutter element (.lr-wrap,
       .main-container, .gk-deals-container), so the wrapper itself stays
       edge-to-edge and only the inner element insets the content. */
    .lab-reports-page,
    .stores-page-redesign,
    .gk-deals-page {
        --section-gutter-x: 0px;
    }

    /* ---------------------------------------------------------
       PRIME MEMBERSHIP
       --------------------------------------------------------- */
    .gk-prime-membership-page {
        padding-top: 16px !important;
        padding-bottom: 24px !important;
    }

    .gk-prime-public__hero {
        padding: 24px 16px !important;
        gap: 20px;
        margin-bottom: 24px;
        border-radius: 16px;
    }

    .gk-prime-public__hero h1 {
        font-size: 1.6rem;
        margin-bottom: 12px;
    }

    .gk-prime-public__hero > div > p {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }

    .gk-hero-pills {
        gap: 8px;
    }

    .gk-hero-pills span {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .gk-prime-public__hero-card {
        padding: 18px !important;
        border-radius: 14px;
    }

    /* The featured plan is pulled to the top of the stack on mobile
       (order:-1), and its "MOST POPULAR" pill is absolutely positioned at
       top:-12px — so the grid needs headroom or the pill collides with the
       status banner above it. */
    .gk-plans-grid {
        gap: 14px;
        padding-top: 14px;
    }

    .gk-plan-card {
        padding: 20px 16px !important;
        border-radius: 14px;
    }

    .gk-plan-header {
        padding-bottom: 16px;
        margin-bottom: 16px;
    }

    .gk-plan-header h4 {
        font-size: 1.15rem;
        margin-bottom: 10px;
    }

    .gk-price-amount {
        font-size: 2rem;
    }

    /* Let a long period label ("one-time payment") sit under the amount
       instead of dragging the whole price row off-centre. */
    .gk-plan-price {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .gk-plan-features {
        margin-bottom: 16px;
    }

    .gk-plan-feature {
        padding: 8px 0;
        font-size: 0.9rem;
    }

    .gk-prime-public__benefits {
        padding: 24px 16px !important;
        margin-bottom: 24px;
        border-radius: 16px;
    }

    .gk-prime-public__benefits h2,
    .gk-prime-public__faq h2 {
        font-size: 1.35rem;
        margin-bottom: 16px;
    }

    .gk-benefits-grid {
        gap: 12px;
    }

    .gk-benefit-card {
        padding: 16px !important;
        border-radius: 12px;
    }

    .gk-benefit-icon {
        font-size: 1.5rem;
        margin-bottom: 6px;
    }

    .gk-benefit-title {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    .gk-benefit-desc {
        font-size: 0.875rem;
    }

    .gk-faq-list {
        gap: 8px;
    }

    .gk-faq-question {
        padding: 14px 16px !important;
        font-size: 0.95rem;
    }

    .gk-faq-item.is-open .gk-faq-answer {
        padding: 0 16px 14px;
    }

    /* ---------------------------------------------------------
       LAB REPORTS
       --------------------------------------------------------- */
    .lab-reports-page .lr-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .lab-reports-page .lr-hero__inner {
        padding-top: 32px !important;
        padding-bottom: 34px !important;
    }

    .lab-reports-page .lr-hero__title {
        margin: 12px 0 10px;
    }

    .lab-reports-page .lr-hero__lead {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .lab-reports-page .lr-hero__stats {
        gap: 18px;
        margin-bottom: 20px;
    }

    .lab-reports-page .lr-highlights,
    .lab-reports-page .lr-reports {
        padding: 28px 0 !important;
    }

    .lab-reports-page .lr-highlights__grid,
    .lab-reports-page .lr-grid {
        gap: 14px;
    }

    .lab-reports-page .lr-feature {
        padding: 20px 16px !important;
    }

    .lab-reports-page .lr-card {
        padding: 16px !important;
    }

    /* .lr-cert is a <section>, so the global rule flattened its horizontal
       padding to 1px and its body text ran edge-to-edge. Doubled class to
       outrank it. */
    .lab-reports-page .lr-process__inner,
    .lab-reports-page .lr-cert.lr-cert {
        gap: 20px !important;
        padding: 20px 16px !important;
        margin-bottom: 32px !important;
        border-radius: 16px;
    }

    /* The certification seal and process photo are decorative; at full
       column width they each ate a whole screen height. */
    .lab-reports-page .lr-cert__media img {
        max-width: 200px !important;
    }

    .lab-reports-page .lr-process__img {
        max-width: 100%;
    }

    .lab-reports-page .lr-cert__body h2 {
        font-size: 22px;
        margin: 12px 0 10px;
    }

    .lab-reports-page .lr-cert__body > p {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    .lab-reports-page .lr-cert__list li,
    .lab-reports-page .lr-step p {
        font-size: 14px;
    }

    /* ---------------------------------------------------------
       STORES
       --------------------------------------------------------- */
    .stores-page-redesign .hero-section.hero-section {
        padding: 56px 16px !important;
        height: auto;
        min-height: 0;
        /* background-attachment:fixed is ignored/janky on mobile Safari and
           blows up the painted image size. */
        background-attachment: scroll;
    }

    .stores-page-redesign .hero-title {
        font-size: 2rem;
        margin-bottom: 12px;
    }

    .stores-page-redesign .hero-subtitle {
        font-size: 0.95rem;
    }

    .stores-page-redesign .hero-content {
        gap: 12px;
        padding: 0;
    }

    .stores-page-redesign .hero-actions {
        margin-top: 16px;
        gap: 10px;
    }

    .stores-page-redesign .main-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Was margin:-40px 12px + width:calc(100% - 24px), which combined with
       the container padding left the card visibly off-centre (33px from the
       left edge, 20px from the right). Let it fill the container instead. */
    .stores-page-redesign .store-card-float.store-card-float {
        width: 100% !important;
        margin: -28px 0 32px !important;
        padding: 20px 16px !important;
        gap: 20px !important;
        border-radius: 16px;
    }

    .stores-page-redesign .store-map-visual {
        height: 220px;
    }

    .stores-page-redesign .section-padding {
        padding-top: 32px !important;
        padding-bottom: 36px !important;
    }

    .stores-page-redesign .section-header-center {
        margin-bottom: 24px;
    }

    .stores-page-redesign .section-title-modern {
        font-size: 1.6rem;
        margin-bottom: 12px;
    }

    .stores-page-redesign .features-modern-grid {
        gap: 14px;
    }

    .stores-page-redesign .feature-card-modern {
        padding: 20px 16px !important;
    }

    .stores-page-redesign .gallery-section {
        margin-bottom: 36px;
    }

    /* Two 168px tiles at 300px tall each = a 1060px-tall mosaic. One
       column of shorter tiles reads better and halves the scroll. */
    .stores-page-redesign .gallery-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 12px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .stores-page-redesign .gallery-tile {
        height: 190px;
    }

    /* ---------------------------------------------------------
       DEALS
       --------------------------------------------------------- */
    .gk-deals-page {
        padding-top: 24px !important;
        padding-bottom: 32px !important;
    }

    .gk-deals-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .gk-deals-hero {
        padding: 24px 16px !important;
        margin-bottom: 24px;
        border-radius: 16px;
    }

    .gk-deals-hero h1 {
        font-size: 26px;
    }

    .gk-deals-hero p {
        font-size: 15px;
    }

    .gk-featured-deal {
        padding: 20px 16px !important;
        margin-bottom: 28px;
        gap: 14px;
        border-radius: 16px;
    }

    .gk-featured-deal h2 {
        font-size: 20px;
    }

    .gk-featured-deal p {
        font-size: 14px;
    }

    .gk-deals-section {
        margin-bottom: 32px;
    }

    .gk-combo-grid {
        gap: 14px;
    }

    .gk-combo-body {
        padding: 16px !important;
    }

    .gk-combo-title {
        font-size: 17px;
    }

    .gk-combo-desc {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .gk-pricing-section,
    .gk-prime-pricing {
        padding: 12px !important;
    }

    .gk-combo-price-value {
        font-size: 22px;
    }

    .gk-add-to-cart {
        padding: 12px 14px !important;
        font-size: 15px;
    }

    /* Touch devices never fire :hover, so the hover-reveal left the wishlist
       basket stuck at 60% opacity / 0.9 scale — it read as a greyed-out
       broken icon. header.php's critical CSS sets that with
       `.wishlist-heart-redesign:not(.wishlisted):not(.in-wishlist)` — three
       classes, (0,3,0) — so the override has to repeat the same :not()s to
       score higher, not just add !important. */
    .gk-deals-page .gk-combo-image .wishlist-heart-redesign:not(.wishlisted):not(.in-wishlist),
    .gk-deals-page .product-card .wishlist-heart-redesign:not(.wishlisted):not(.in-wishlist) {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Very narrow phones (<=390px): one more notch tighter. */
@media (max-width: 390px) {
    .gk-prime-public__hero h1 {
        font-size: 1.45rem;
    }

    .gk-price-amount {
        font-size: 1.8rem;
    }

    .gk-deals-hero h1 {
        font-size: 23px;
    }

    .stores-page-redesign .hero-title {
        font-size: 1.75rem;
    }

    .lab-reports-page .lr-cert__media img {
        max-width: 170px !important;
    }
}