/* ============================================================
   newdgrie/default — _30_compare.css

   Side-by-side fabric compare page (/catalog/product_compare).
   Loaded only on the compare layout handle, so we keep the
   selectors here scoped under .dg-compare and don't worry
   about leaking into other pages.

   Column-alignment strategy
   ─────────────────────────
   The page is one big grid: a label column on the left, then
   N value columns (one per fabric being compared). Both the
   product-cards row at the top and every attribute row below
   share the SAME column tracks via CSS subgrid, so the cards
   visually line up with the attribute cells beneath them no
   matter how wide any single value gets.

   Column count is set inline as --dg-compare-cols on the
   wrapper element by the .phtml template.
   ============================================================ */


/* ── PAGE WRAPPER ─────────────────────────────────────────── */

.dg-compare {
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: 48px var(--dg-gutter) 96px;
    color: var(--dg-ink);
}

@media (max-width: 880px) {
    .dg-compare { padding: 24px 16px 64px; }
}


/* ── HEADER ───────────────────────────────────────────────── */

.dg-compare__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 24px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--dg-line);
}

.dg-compare__title {
    font-family: var(--dg-font-serif);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: var(--dg-weight-regular);
    margin: 0;
    line-height: 1.1;
}

.dg-compare__head-actions {
    display: flex;
    gap: 24px;
    align-items: center;
}

.dg-compare__action {
    font-family: var(--dg-font-sans);
    font-size: 12px;
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--dg-duration-fast) var(--dg-ease);
}
.dg-compare__action:hover { color: var(--dg-ink); }
.dg-compare__action--clear:hover { color: var(--dg-gold); }


/* ── EMPTY STATE ──────────────────────────────────────────── */

.dg-compare__empty {
    text-align: center;
    padding: 80px 24px;
    max-width: 520px;
    margin: 0 auto;
}

.dg-compare__empty-msg {
    font-family: var(--dg-font-serif);
    font-size: 22px;
    margin: 0 0 12px;
}

.dg-compare__empty-sub {
    color: var(--dg-muted);
    margin: 0 0 32px;
    line-height: 1.6;
}

.dg-compare__empty-cta {
    display: inline-block;
    font-family: var(--dg-font-sans);
    font-size: 12px;
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-paper);
    background: var(--dg-ink);
    padding: 16px 32px;
    text-decoration: none;
    transition: background var(--dg-duration-fast) var(--dg-ease);
}
.dg-compare__empty-cta:hover { background: var(--dg-gold); }


/* ════════════════════════════════════════════════════════════
   UNIFIED LAYOUT GRID

   ONE grid for the entire comparison. Column 1 is the label
   gutter; columns 2..N+1 are the fabric value columns.

   The cards row spans columns 2..-1 and uses subgrid to
   inherit the parent's column tracks — guarantees that card
   #1 has the SAME width as the value cell beneath it.

   --dg-compare-cols is set inline on the element by the
   template (e.g. style="--dg-compare-cols: 5").
   ════════════════════════════════════════════════════════════ */

.dg-compare__layout {
    display: grid;
    grid-template-columns:
        minmax(140px, 200px)
        repeat(var(--dg-compare-cols, 4), minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
    align-items: stretch;
}

/* Empty top-left cell that aligns with the label column. */
.dg-compare__corner {
    grid-column: 1;
    grid-row: 1;
}

/* Card row spans every value column. Subgrid inherits parent
   column tracks, so each card cell is exactly as wide as the
   attribute cells below it. */
.dg-compare__cards {
    grid-column: 2 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
    /* No gap here — subgrid + gap causes uneven column
       widths in Safari (first/last cards absorb the missing
       outer-edge gap, ending up wider than middle cards).
       Visual spacing comes back via .dg-compare-card
       horizontal padding below — same 24px result. */
    gap: 0;
    padding-bottom: 32px;
}

/* Fallback for browsers without subgrid: explicit columns
   that mirror the parent's value-column count. */
@supports not (grid-template-columns: subgrid) {
    .dg-compare__cards {
        grid-template-columns: repeat(var(--dg-compare-cols, 4), minmax(0, 1fr));
    }
}


/* ── PRODUCT CARDS ────────────────────────────────────────── */

.dg-compare-card {
    position: relative;
    text-align: center;
    background: var(--dg-paper);
    /* Horizontal padding to recreate the visual gap removed
       from parent subgrid (gap broke subgrid column
       distribution). 12px each side = 24px between adjacent
       cards = original gap value. */
    padding: 0 12px;
    /* min-width: 0 keeps the card from forcing its grid
       column wider than its share when the product name is
       long. */
    min-width: 0;
    /* Flex column so the body section can stretch and push
       the View button to the bottom of every card — names
       have variable line counts, and without this the
       buttons sit at different vertical positions. */
    display: flex;
    flex-direction: column;
}

.dg-compare-card__remove {
    position: absolute;
    top: 8px;
    right: 19px;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--dg-paper);
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    color: var(--dg-ink);
    box-shadow: var(--dg-shadow-sm);
    transition: background var(--dg-duration-fast) var(--dg-ease),
                color var(--dg-duration-fast) var(--dg-ease);
}
.dg-compare-card__remove:hover {
    background: var(--dg-ink);
    color: var(--dg-paper);
}

.dg-compare-card__image {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--dg-cream);
    overflow: hidden;
    margin-bottom: 16px;
    flex: 0 0 auto;                 /* fixed-size header */
}
.dg-compare-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dg-duration-base) var(--dg-ease);
}
.dg-compare-card:hover .dg-compare-card__image img {
    transform: scale(1.04);
}

/* Body fills the remaining vertical space; inside it, name
   and price grow naturally and the CTA button is pinned to
   the bottom via margin-top: auto. */
.dg-compare-card__body {
    padding: 0 8px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dg-compare-card__name {
    font-family: var(--dg-font-serif);
    font-size: 16px;
    font-weight: var(--dg-weight-regular);
    margin: 0 0 8px;
    line-height: 1.3;
}
.dg-compare-card__name a {
    color: var(--dg-ink);
    text-decoration: none;
}
.dg-compare-card__name a:hover { color: var(--dg-gold); }

.dg-compare-card__price {
    font-family: var(--dg-font-sans);
    font-size: 14px;
    color: var(--dg-ink);
    margin-bottom: 16px;
}
.dg-compare-card__price .price,
.dg-compare-card__price span {
    font-size: inherit;
    color: inherit;
}

.dg-compare-card__cta {
    display: inline-block;
    font-family: var(--dg-font-sans);
    font-size: 11px;
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-ink);
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid var(--dg-ink);
    transition: background var(--dg-duration-fast) var(--dg-ease),
                color var(--dg-duration-fast) var(--dg-ease);
    /* margin-top: auto pushes this to the bottom of the card
       body regardless of how tall the name above it is, so
       the View buttons across all cards line up horizontally. */
    margin-top: auto;
}
.dg-compare-card__cta:hover {
    background: var(--dg-ink);
    color: var(--dg-paper);
}


/* ── ATTRIBUTE ROWS ───────────────────────────────────────── */

/* Every cell shares the same baseline padding/border. */
.dg-compare__row-label,
.dg-compare__row-cell {
    padding: 16px 12px;
    border-top: 1px solid var(--dg-line);
    font-size: 14px;
    line-height: 1.5;
    /* min-width: 0 lets text wrap inside the cell instead of
       forcing the column wider. */
    min-width: 0;
}

.dg-compare__row-label {
    font-family: var(--dg-font-sans);
    font-size: 12px;
    letter-spacing: 0em;
    text-transform: uppercase;
    color: var(--dg-muted);
    background: var(--dg-cream);
    align-self: stretch;
    display: flex;
    align-items: center;
}

.dg-compare__row-cell {
    color: var(--dg-ink);
    background: var(--dg-paper);
    text-align: center;
    /* Allow long values (descriptions) to wrap rather than
       overflow. */
    overflow-wrap: break-word;
}

.dg-compare__empty-cell {
    color: var(--dg-faint);
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE STACKING v2 — Sticky label + scroll affordances
   ─────────────────────────────────────────────────────────────────────
   Mobile compare grid:
   • Label column (left) sticks while user scrolls horizontally
   • Fade gradient on right edge hints there's more to scroll
   • Animated "ปัดเพื่อดูเพิ่ม" hint below the table on first view
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

    /* Wrap layout in relative container for fade overlay */
    .dg-compare__layout {
        grid-template-columns:
            100px
            repeat(var(--dg-compare-cols, 4), minmax(160px, 1fr));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        position: relative;

        /* hide native scrollbar but keep scrollability */
        scrollbar-width: none;
    }

    .dg-compare__layout::-webkit-scrollbar {
        display: none;
    }

    /* ── STICKY LABEL COLUMN ─────────────────────────────── */
    .dg-compare__row-label {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--dg-cream);
        font-size: 10px;
        letter-spacing: 0.12em;
        padding: 12px 10px;
        border-right: 1px solid var(--dg-line);
        /* subtle shadow that hints at the overlap */
        box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.08);
    }

    /* Corner cell also sticky so it stays above label */
    .dg-compare__corner {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--dg-paper);
    }

    .dg-compare__row-cell {
        padding: 12px 8px;
        font-size: 12px;
        line-height: 1.5;
    }

    /* ── CARDS: SHRINK FOR NARROW COLUMNS ────────────────── */
    .dg-compare-card {
        padding: 0 6px;
    }
    .dg-compare-card__name { font-size: 13px; }
    .dg-compare-card__price { font-size: 12px; margin-bottom: 10px; }
    .dg-compare-card__cta { font-size: 10px; padding: 8px 14px; }
    .dg-compare-card__remove {
        top: 6px;
        right: 10px;
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   FADE OVERLAY + SCROLL HINT
   ─────────────────────────────────────────────────────────────────────
   ใช้ wrapper รอบ .dg-compare__layout เพื่อแสดง fade ที่ขอบขวา
   ถ้าไม่อยากแก้ HTML ใช้ pseudo-element บน .dg-compare แทน
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

    .dg-compare {
        position: relative;
    }

    /* Fade gradient ที่ขอบขวา — บอก user ว่ายังมี content */
    .dg-compare::after {
        content: "";
        position: absolute;
        top: 0;
        right: var(--dg-gutter-mobile, 16px);
        bottom: 64px;          /* เว้นที่ด้านล่างไว้ให้ hint */
        width: 32px;
        background: linear-gradient(
            to right,
            transparent,
            var(--dg-paper, #fff)
        );
        pointer-events: none;
        z-index: 1;
        opacity: 0;
        transition: opacity 200ms ease;
    }

    /* แสดง fade เฉพาะตอนที่ scroll ได้ — ใช้ JS toggle .has-overflow */
    .dg-compare.has-overflow::after,
    .dg-compare::after {
        opacity: 1;
    }

    /* ── SCROLL HINT (ใต้ตาราง) ──────────────────────────── */
    .dg-compare__scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px;
        margin-top: 8px;
        font-family: var(--dg-font-sans);
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--dg-muted, #6b6b6b);
        background: var(--dg-cream, #fafaf7);
        border-top: 0.5px solid var(--dg-line, #e8e6e0);
    }

    .dg-compare__scroll-hint::after {
        content: "› › ›";
        color: var(--dg-gold, #8b6f47);
        font-size: 14px;
        letter-spacing: 0.1em;
        animation: dg-scroll-hint-pulse 1.5s ease-in-out infinite;
    }

    @keyframes dg-scroll-hint-pulse {
        0%, 100% {
            opacity: 0.4;
            transform: translateX(0);
        }
        50% {
            opacity: 1;
            transform: translateX(4px);
        }
    }

    /* ซ่อน hint หลังจาก user scroll แล้ว (ผ่าน JS) */
    .dg-compare.has-scrolled .dg-compare__scroll-hint {
        opacity: 0;
        transition: opacity 300ms ease;
        pointer-events: none;
    }
}


/* ── DESKTOP: ซ่อน hint ──────────────────────────────────── */
@media (min-width: 721px) {
    .dg-compare__scroll-hint {
        display: none;
    }
}