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

   Product Detail Page (PDP) — Phase 5a foundation.

   Scope (5a):
     ✓ Layout grid 50:50 desktop, 1-col mobile
     ✓ Image gallery main image + zoom badge + fabric pill
     ✓ Info column: eyebrow · H1 · sub-meta · price · trust strip
     ✓ Visual placeholders for 5b–5f sections (hidden when empty)

   Out of scope (5b–5f):
     ✗ Gallery thumbnails / modal / swipe interactions
     ✗ Fabric Story card content
     ✗ Size Profile card
     ✗ Customize Accordion
     ✗ Sticky CTA card

   Tokens reference: see _01_tokens.css
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   ROOT CONTAINER
   Sits inside col-main (full-width.phtml). We add our own
   container max-width and gutters here so the PDP can breathe.
   ──────────────────────────────────────────────────────────── */
.dg-pdp {
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: var(--dg-space-xl) var(--dg-gutter);
    color: var(--dg-ink);
    font-family: var(--dg-font-sans);
    position: relative;
}

@media (max-width: 1024px) {
    .dg-pdp {
        padding: var(--dg-space-lg) var(--dg-gutter-mobile);
    }
}


/* ────────────────────────────────────────────────────────────
   GRID — 50:50 desktop, 1-col mobile
   gap is generous on desktop (editorial breathing room) and
   collapses to vertical rhythm on mobile.
   ──────────────────────────────────────────────────────────── */
.dg-pdp__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dg-space-3xl);
    align-items: start;
}

@media (max-width: 1024px) {
    .dg-pdp__grid {
        grid-template-columns: 1fr;
        gap: var(--dg-space-xl);
    }
}


/* ────────────────────────────────────────────────────────────
   GALLERY (LEFT COLUMN)
   ──────────────────────────────────────────────────────────── */
.dg-pdp__gallery {
    display: flex;
    flex-direction: column;
    gap: var(--dg-space-md);
    /* On desktop the gallery sticks while user scrolls the
       (taller) info column. Disabled on mobile because the
       columns are stacked. */
    position: sticky;
    top: 90px !important;
    top: var(--dg-space-lg);
    align-self: start;
}

@media (max-width: 1024px) {
    .dg-pdp__gallery {
        position: static;
    }
}


/* ── Main image (5b — now an interactive <button>) ──────── */
.dg-pdp-main-image {
    /* Reset button defaults */
    appearance: none;
    -webkit-appearance: none;
    background: var(--dg-stone);
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;

    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: zoom-in;
    /* Sharp edges per design system — no border-radius. */

    transition: opacity var(--dg-duration-base) var(--dg-ease);
}

.dg-pdp-main-image:hover .dg-pdp-main-image__zoom {
    background: var(--dg-paper);
    transform: scale(1.05);
}

.dg-pdp-main-image:focus-visible {
    outline: 2px solid var(--dg-ink);
    outline-offset: 2px;
}

.dg-pdp-main-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity var(--dg-duration-base) var(--dg-ease);
}

/* Zoom badge — now a <span> inside the main image button.
   Visual indicator only; click target is the parent button. */
.dg-pdp-main-image__zoom {
    position: absolute;
    top: var(--dg-space-md);
    right: var(--dg-space-md);

    width: 44px;          /* Apple HIG min touch target */
    height: 44px;
    border-radius: var(--dg-radius-circle);
    background: rgba(255, 255, 255, 0.9);
    color: var(--dg-ink);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;  /* parent button captures clicks */
    transition:
        background var(--dg-duration-fast) var(--dg-ease),
        transform var(--dg-duration-fast) var(--dg-ease);
}

/* Fabric detail pill — bottom-left tag */
.dg-pdp-main-image__pill {
    position: absolute;
    left: var(--dg-space-md);
    bottom: var(--dg-space-md);

    background: rgba(255, 255, 255, 0.95);
    color: var(--dg-ink);

    padding: 8px 14px;
    font-size: var(--dg-text-xxs);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    /* No radius — tag aesthetic, sharp edges */
}


/* ── Thumbnail strip (5b) ───────────────────────────────── */
.dg-pdp-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--dg-space-sm);
}

/* If there are 5+ thumbs, scroll horizontally instead of cramming */
.dg-pdp-thumbs:has(> :nth-child(5)) {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.dg-pdp-thumbs__item {
    /* Reset button defaults */
    appearance: none;
    -webkit-appearance: none;
    background: var(--dg-stone);
    border: 1px solid transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1 / 1;

    transition:
        border-color var(--dg-duration-fast) var(--dg-ease),
        transform var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-thumbs__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dg-pdp-thumbs__item:hover {
    border-color: var(--dg-line);
}

.dg-pdp-thumbs__item.is-active {
    border-color: var(--dg-ink);
}

.dg-pdp-thumbs__item:focus-visible {
    outline: 2px solid var(--dg-ink);
    outline-offset: 2px;
}


/* ── Fabric Story card (5c) ──────────────────────────────────
   Editorial card with subtle grey bg, sits below the thumbnail
   strip in the gallery column. Two parts:
     - eyebrow (uppercase tracked label)
     - body copy (≤ 3 lines, truncated server-side)

   Visual: warm off-white surface, generous padding, no border,
   no shadow — quiet luxury aesthetic per design tokens.
   ──────────────────────────────────────────────────────────── */
.dg-pdp-fabric-story {
    background: var(--dg-cream);
    padding: var(--dg-space-lg);
    margin: 0;
    /* Sharp edges per design system. */
}

.dg-pdp-fabric-story__eyebrow {
    margin: 0 0 var(--dg-space-sm);
    font-size: var(--dg-text-xs);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-muted);
}

.dg-pdp-fabric-story__body {
    margin: 0;
    font-size: var(--dg-text-sm);
    line-height: var(--dg-leading-loose);
    color: var(--dg-ink-soft);

    /* Defensive line-clamp at ~3 lines.
       Server-side already truncates at ~280 chars, so this is
       a belt-and-braces safeguard for any unusual font rendering
       or extra-long single words. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .dg-pdp-fabric-story {
        padding: var(--dg-space-md);
    }
}


/* ────────────────────────────────────────────────────────────
   INFO COLUMN (RIGHT)
   Editorial typography — serif H1, generous line-height,
   restrained spacing.
   ──────────────────────────────────────────────────────────── */
.dg-pdp__info {
    display: flex;
    flex-direction: column;
    /* No gap — children manage their own bottom margins so
       each section reads as a deliberate composition. */
}


/* ── Eyebrow: "BRAND · MATERIAL" ─────────────────────────── */
.dg-pdp-eyebrow {
    margin: 0 0 var(--dg-space-sm);
    font-size: var(--dg-text-xs);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-muted);
}


/* ── H1 product title ───────────────────────────────────── */
.dg-pdp-title {
    margin: 0 0 var(--dg-space-md);
    font-family: var(--dg-font-serif);
    font-size: clamp(28px, 4vw, var(--dg-text-2xl));
    font-weight: var(--dg-weight-regular);
    line-height: var(--dg-leading-tight);
    letter-spacing: var(--dg-track-tight);
    color: var(--dg-ink);
}


/* ── Sub-meta: "SKU · weight · season" ──────────────────── */
.dg-pdp-submeta {
    margin: 0 0 var(--dg-space-lg);
    font-size: var(--dg-text-sm);
    color: var(--dg-ink-soft);
    line-height: var(--dg-leading-snug);
}


/* ── Price block ────────────────────────────────────────── */
.dg-pdp-price {
    margin: 0 0 var(--dg-space-lg);
}

.dg-pdp-price__main {
    /* Magento's getPriceHtml() emits its own .price-box wrapper.
       We restyle that wrapper rather than fighting it. */
    font-size: var(--dg-text-lg);
    font-weight: var(--dg-weight-medium);
    color: var(--dg-ink);
    margin-bottom: var(--dg-space-xs);
}

/* Override core's price box styles inside our wrapper so the
   price takes our typography rather than the legacy chrome. */
.dg-pdp-price__main .price-box,
.dg-pdp-price__main .price-box .price,
.dg-pdp-price__main .price {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

.dg-pdp-price__caption {
    margin: 0;
    font-size: var(--dg-text-xs);
    color: var(--dg-faint);
    letter-spacing: var(--dg-track-wide);
}

.dg-pdp-price__sep {
    margin: 0 var(--dg-space-xs);
    color: var(--dg-line);
}


/* ── Divider ────────────────────────────────────────────── */
.dg-pdp-divider {
    border: 0;
    border-top: 1px solid var(--dg-line);
    margin: 0 0 var(--dg-space-lg);
}


/* ────────────────────────────────────────────────────────────
   PLACEHOLDERS for 5f
   Hidden until 5f reveals.
   (size-profile and customize are real now in 5d/5e)
   ──────────────────────────────────────────────────────────── */
.dg-pdp-cta[data-state="placeholder"] {
    display: none;
}


/* ────────────────────────────────────────────────────────────
   SIZE PROFILE CARD (5d)

   3 visible states (CSS variants), 1 hidden state:
     .dg-pdp-size-profile--invite   logged out
     .dg-pdp-size-profile--create   logged in, no profile
     .dg-pdp-size-profile--profile  logged in with profile

   All share the same horizontal flex layout:
     [avatar/icon] [body: eyebrow + title] [action button]

   Visual: cream surface, generous padding, no border, no
   shadow. Action button is text-based to keep editorial feel.
   ──────────────────────────────────────────────────────────── */
.dg-pdp-size-profile {
    display: flex;
    align-items: center;
    gap: var(--dg-space-md);
    flex-wrap: wrap;       /* dropdown sits on its own row when open */

    background: var(--dg-cream);
    padding: var(--dg-space-md) var(--dg-space-lg);
    margin: 0 0 var(--dg-space-lg);
    position: relative;    /* dropdown is positioned relative to card */
    /* Sharp edges per design system. */
}

@media (max-width: 480px) {
    .dg-pdp-size-profile {
        padding: var(--dg-space-md);
        gap: var(--dg-space-sm);
    }
}

/* Avatar — circle with initial (profile state) or icon (invite/create) */
.dg-pdp-size-profile__avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--dg-radius-circle);
    background: var(--dg-ink);
    color: var(--dg-paper);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-md);
    font-weight: var(--dg-weight-medium);
    letter-spacing: 0;
    text-transform: uppercase;
    line-height: 1;
}

/* Icon avatar (logged-out / no-profile) — slightly muted */
.dg-pdp-size-profile__avatar--icon {
    background: var(--dg-ink-soft);
}

/* Body — flex grows to fill remaining width */
.dg-pdp-size-profile__body {
    flex: 1 1 auto;
    min-width: 0; /* allow truncation */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dg-pdp-size-profile__eyebrow {
    margin: 0;
    font-size: var(--dg-text-xxs);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-muted);
    line-height: 1.2;
}

.dg-pdp-size-profile__title {
    margin: 0;
    font-size: var(--dg-text-sm);
    font-weight: var(--dg-weight-medium);
    color: var(--dg-ink);
    line-height: var(--dg-leading-snug);

    /* Truncate at 1 line — long profile names + fit shouldn't
       break the card layout. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dg-pdp-size-profile__fit {
    color: var(--dg-muted);
    font-weight: var(--dg-weight-regular);
}

/* Action button — text link, two variants:
     default (filled black for invite/create — high CTA priority)
     outline (subtle for CHANGE — lower priority) */
.dg-pdp-size-profile__action {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;

    padding: 10px var(--dg-space-md);
    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-xs);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-wide);
    text-transform: uppercase;
    line-height: 1;

    background: var(--dg-ink);
    color: var(--dg-paper);
    transition:
        background var(--dg-duration-fast) var(--dg-ease),
        color var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-size-profile__action:hover,
.dg-pdp-size-profile__action:focus-visible {
    background: var(--dg-gold);
    color: var(--dg-paper);
    outline: none;
}

/* Outline variant — for CHANGE button (less visual weight) */
.dg-pdp-size-profile__action--outline {
    background: transparent;
    color: var(--dg-ink);
    border: 1px solid var(--dg-ink);
    /* Adjust padding for border */
    padding: 9px calc(var(--dg-space-md) - 1px);
}

.dg-pdp-size-profile__action--outline:hover,
.dg-pdp-size-profile__action--outline:focus-visible {
    background: var(--dg-ink);
    color: var(--dg-paper);
}


/* ────────────────────────────────────────────────────────────
   SIZE PROFILE — INLINE DROPDOWN (5d Phase 2)

   Click CHANGE → reveals a panel below the card with:
     - List of profiles (✓ marks active)
     - "+ NEW PROFILE" + "MANAGE" footer links

   The card uses `flex-wrap: wrap` so the dropdown takes a full
   row beneath the avatar/title/CHANGE row when open. This
   keeps the existing top-row layout untouched (per design
   intent — same look as 5d, just with an expandable panel).
   ──────────────────────────────────────────────────────────── */

/* Toggle CHANGE button — inherits .dg-pdp-size-profile__action
   styles. Add a chevron via ::after that flips when expanded. */
.dg-pdp-size-profile__action[data-pdp-size-toggle] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dg-pdp-size-profile__action[data-pdp-size-toggle]::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-size-profile__action[data-pdp-size-toggle][aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* Dropdown panel — full width of card, sits BELOW the top row */
.dg-pdp-size-profile__dropdown {
    flex: 0 0 100%;
    width: 100%;
    margin-top: var(--dg-space-md);
    padding-top: var(--dg-space-md);
    border-top: 1px solid var(--dg-line);
}

.dg-pdp-size-profile__dropdown[hidden] {
    display: none !important;
}

/* List */
.dg-pdp-size-profile__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Item */
.dg-pdp-size-profile__item {
    display: flex;
    align-items: center;
    gap: var(--dg-space-sm);
    padding: var(--dg-space-sm) 0;
    cursor: pointer;
    transition: background var(--dg-duration-fast) var(--dg-ease);
    list-style: none;
}

.dg-pdp-size-profile__item:hover,
.dg-pdp-size-profile__item:focus-visible {
    background: var(--dg-stone);
    outline: none;
    margin-left: calc(var(--dg-space-lg) * -1);
    margin-right: calc(var(--dg-space-lg) * -1);
    padding-left: var(--dg-space-lg);
    padding-right: var(--dg-space-lg);
}

@media (max-width: 480px) {
    .dg-pdp-size-profile__item:hover,
    .dg-pdp-size-profile__item:focus-visible {
        margin-left: calc(var(--dg-space-md) * -1);
        margin-right: calc(var(--dg-space-md) * -1);
        padding-left: var(--dg-space-md);
        padding-right: var(--dg-space-md);
    }
}

.dg-pdp-size-profile__item.is-active .dg-pdp-size-profile__item-name {
    font-weight: var(--dg-weight-medium);
}

/* Check mark column — fixed width so all items align */
.dg-pdp-size-profile__item-check {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dg-ink);
}

/* Item body — name + fit stacked */
.dg-pdp-size-profile__item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dg-pdp-size-profile__item-name {
    font-size: var(--dg-text-sm);
    color: var(--dg-ink);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dg-pdp-size-profile__item-fit {
    font-size: var(--dg-text-xs);
    color: var(--dg-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer — divider + 2 links */
.dg-pdp-size-profile__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--dg-space-md);

    margin-top: var(--dg-space-sm);
    padding-top: var(--dg-space-sm);
    border-top: 1px solid var(--dg-line);
}

.dg-pdp-size-profile__footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-xxs);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-ink);
    text-decoration: none;

    padding: var(--dg-space-xs) 0;
    transition: color var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-size-profile__footer-link:hover,
.dg-pdp-size-profile__footer-link:focus-visible {
    color: var(--dg-gold);
    outline: none;
}

.dg-pdp-size-profile__footer-link--muted {
    color: var(--dg-muted);
}

.dg-pdp-size-profile__footer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: var(--dg-text-md);
    line-height: 1;
    margin-top: -2px;
}


/* ────────────────────────────────────────────────────────────
   HIDE LEGACY CUSTSIZE DROPDOWN
   ────────────────────────────────────────────────────────────
   Even though our newdgrie override of select.phtml emits only
   the hidden <input>, defensively hide ANY legacy chrome that
   might leak through if the override fails to apply (e.g. cache
   miss during deploy).

   The original Custsize template wraps everything in a div with
   inline `border:1px dashed red; background-color:#f4f4f4;`.
   We catch that selector specifically.
   ──────────────────────────────────────────────────────────── */
.catalog-product-view #custsize2 {
    display: none !important;
}


/* ────────────────────────────────────────────────────────────
   TRUST STRIP — 3 columns
   ──────────────────────────────────────────────────────────── */
.dg-pdp-trust {
    list-style: none;
    margin: var(--dg-space-2xl) 0 0;
    padding: var(--dg-space-lg) 0 0;
    border-top: 1px solid var(--dg-line);

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dg-space-md);
}

.dg-pdp-trust__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dg-pdp-trust__title {
    font-size: var(--dg-text-sm);
    font-weight: var(--dg-weight-medium);
    color: var(--dg-ink);
    line-height: var(--dg-leading-snug);
}

.dg-pdp-trust__sub {
    font-size: var(--dg-text-xs);
    color: var(--dg-muted);
    letter-spacing: var(--dg-track-wide);
}

@media (max-width: 480px) {
    .dg-pdp-trust {
        grid-template-columns: 1fr;
        gap: var(--dg-space-sm);
    }
}


/* ────────────────────────────────────────────────────────────
   SHARE CONFIGURATION
   A subtle text-button beneath the trust strip. Clicking
   builds a MageWorx-native `?config=...` URL from the user's
   current selections and copies it to the clipboard. Quiet
   styling — secondary action, mustn't compete with ADD TO CART.
   ──────────────────────────────────────────────────────────── */
.dg-pdp-share {
    margin-top: var(--dg-space-lg);
    padding-top: var(--dg-space-md);
    border-top: 1px solid var(--dg-line);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dg-space-sm);
    flex-wrap: wrap;
}

.dg-pdp-share__btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: var(--dg-space-xs) var(--dg-space-sm);
    margin: 0;

    display: inline-flex;
    align-items: center;
    gap: var(--dg-space-xs);

    font-family: inherit;
    font-size: var(--dg-text-sm);
    font-weight: var(--dg-weight-medium);
    color: var(--dg-muted);
    letter-spacing: var(--dg-track-wide);
    cursor: pointer;
    border-radius: var(--dg-radius-soft);

    transition:
        color var(--dg-duration-fast) var(--dg-ease),
        transform var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-share__btn:hover,
.dg-pdp-share__btn:focus-visible {
    color: var(--dg-ink);
}

.dg-pdp-share__btn:active {
    transform: translateY(1px);
}

.dg-pdp-share__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.dg-pdp-share__label {
    /* underline only on hover; the icon carries enough
       affordance the rest of the time */
    text-decoration: none;
}

.dg-pdp-share__btn:hover .dg-pdp-share__label,
.dg-pdp-share__btn:focus-visible .dg-pdp-share__label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* "Link copied" inline toast — appears next to the button,
   fades after a couple of seconds. No reposition, no layout
   jump because the toast lives inside the same flex row. */
.dg-pdp-share__toast {
    font-size: var(--dg-text-xs);
    color: var(--dg-success);
    letter-spacing: var(--dg-track-wide);
    text-transform: uppercase;
    font-weight: var(--dg-weight-semibold);

    opacity: 0;
    transform: translateY(2px);
    transition:
        opacity var(--dg-duration-fast) var(--dg-ease),
        transform var(--dg-duration-fast) var(--dg-ease);

    /* Reserve nothing in flow when hidden via [hidden]; only
       animates when JS removes the [hidden] attribute. */
}

.dg-pdp-share__toast:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 480px) {
    .dg-pdp-share {
        flex-direction: column;
        gap: var(--dg-space-xs);
    }
}


/* ────────────────────────────────────────────────────────────
   FLOATING SCROLL-DOWN ARROW
   5a: rendered but inert. 5b adds the scroll-hint behavior.
   ──────────────────────────────────────────────────────────── */
.dg-pdp-scroll-hint {
    position: fixed;
    bottom: var(--dg-space-xl);
    right: var(--dg-space-xl);

    width: 44px;
    height: 44px;
    border-radius: var(--dg-radius-circle);
    border: 1px solid var(--dg-line);
    background: var(--dg-paper);
    color: var(--dg-ink);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: var(--dg-z-sticky);

    transition:
        opacity var(--dg-duration-base) var(--dg-ease),
        transform var(--dg-duration-base) var(--dg-ease);
}

.dg-pdp-scroll-hint:hover {
    transform: translateY(-2px);
    box-shadow: var(--dg-shadow-md);
}

/* 5b: hidden by default; JS reveals when conditions met
   (page has scrolled below ~25% AND user hasn't dismissed). */
.dg-pdp-scroll-hint {
    opacity: 0;
    pointer-events: none;
}

.dg-pdp-scroll-hint.is-visible {
    opacity: 1;
    pointer-events: auto;
}


/* ────────────────────────────────────────────────────────────
   HIDE GRANADA / CORE PDP CHROME WE DON'T USE
   The default Magento PDP wraps product.info in a series of
   div.product-essential / .product-shop / .product-img-box
   boxes. Inside catalog_product_view we set the inner
   product.info template to our own — but the OUTER wrappers
   still get emitted by core's view.phtml at a higher level.
   They're empty / collapsed by default once we replace the
   inner template, but a few rules ensure no granada CSS leaks
   through.
   ──────────────────────────────────────────────────────────── */
.catalog-product-view .product-essential::before,
.catalog-product-view .product-essential::after {
    display: none !important;
}

.catalog-product-view .product-shop > h1,
.catalog-product-view .product-shop > .price-box {
    /* Hide any duplicated chrome that core renders alongside
       our content. Defensive — should already be empty when
       we override product.info. */
    display: none;
}


/* ────────────────────────────────────────────────────────────
   LIGHTBOX (5b) — fullscreen modal image viewer

   Behavior
   ────────
   - Hidden by default via [hidden] attribute
   - JS removes [hidden] + adds .is-open to trigger transition
   - Backdrop is opaque dark (.96 alpha) so the image's
     surrounding light areas don't bleed into the page behind
   - Image is sized to fit-contain inside viewport with safe
     padding for arrows + close button on desktop
   - On mobile, prev/next arrows hide (swipe instead) and
     close button stays in safe-area-inset position
   - Pinch-zoom on mobile: JS sets transform: scale + translate
     on the image; CSS just provides the will-change + base
     transform-origin for performant gestures

   Z-INDEX
   ───────
   We use 1200 (not the --dg-z-modal token = 1000) because
   the mobile sticky CTA sits at 1100 to clear Magento's
   checkout overlay. The lightbox must stack ABOVE that CTA
   so the bar doesn't bleed into the image while open.
   Header / scroll-hint / size-profile all use lower z-index
   values so they sit safely beneath the lightbox.
   ──────────────────────────────────────────────────────────── */
.dg-pdp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;

    background: rgba(15, 15, 15, 0.96);
    color: var(--dg-paper);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    /* Smooth fade — not while [hidden]. */
    opacity: 0;
    transition: opacity var(--dg-duration-base) var(--dg-ease-out);

    /* Lock scroll on the page behind */
    overscroll-behavior: contain;
    touch-action: none;
}

.dg-pdp-lightbox[hidden] {
    display: none !important;
}

.dg-pdp-lightbox.is-open {
    opacity: 1;
}

/* Image stage — flex centred, takes remaining space.
   Padded so arrows + close don't overlap the image. */
.dg-pdp-lightbox__stage {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 80px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

@media (max-width: 768px) {
    .dg-pdp-lightbox__stage {
        padding: 60px 16px;
    }
}

.dg-pdp-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;

    /* Pinch-zoom transforms get applied here by JS */
    transform-origin: center center;
    will-change: transform;
    transition: transform var(--dg-duration-fast) var(--dg-ease-out);
    user-select: none;
    -webkit-user-drag: none;
}

/* Disable transition while user is actively pinching/dragging
   so the gesture feels immediate. JS toggles this class. */
.dg-pdp-lightbox__img.is-gesturing {
    transition: none;
}

/* Close button — top-right, large enough for thumb */
.dg-pdp-lightbox__close {
    position: absolute;
    top: max(20px, env(safe-area-inset-top, 0px));
    right: max(20px, env(safe-area-inset-right, 0px));
    z-index: 2;

    appearance: none;
    -webkit-appearance: none;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: var(--dg-radius-circle);
    background: rgba(255, 255, 255, 0.1);
    color: var(--dg-paper);
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-lightbox__close:hover,
.dg-pdp-lightbox__close:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

/* Prev/next arrows — left/right centred. Desktop only;
   mobile uses swipe gesture instead. */
.dg-pdp-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;

    appearance: none;
    -webkit-appearance: none;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: var(--dg-radius-circle);
    background: rgba(255, 255, 255, 0.1);
    color: var(--dg-paper);
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-lightbox__nav:hover,
.dg-pdp-lightbox__nav:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

.dg-pdp-lightbox__nav--prev {
    left: 24px;
}

.dg-pdp-lightbox__nav--next {
    right: 24px;
}

@media (max-width: 768px) {
    /* Hide on mobile — swipe replaces arrows.
       Keeping the buttons in the DOM for keyboard users
       (they're still focusable via Tab) but visually hidden. */
    .dg-pdp-lightbox__nav {
        opacity: 0;
        pointer-events: none;
    }
}

/* Dot indicators — bottom centred */
.dg-pdp-lightbox__dots {
    position: absolute;
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;

    display: flex;
    gap: var(--dg-space-xs);
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--dg-radius-pill);
}

.dg-pdp-lightbox__dot {
    appearance: none;
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: var(--dg-radius-circle);
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 0;
    transition:
        background var(--dg-duration-fast) var(--dg-ease),
        transform var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-lightbox__dot:hover {
    background: rgba(255, 255, 255, 0.6);
}

.dg-pdp-lightbox__dot.is-active {
    background: var(--dg-paper);
    transform: scale(1.25);
}

.dg-pdp-lightbox__dot:focus-visible {
    outline: 2px solid var(--dg-paper);
    outline-offset: 2px;
}


/* ────────────────────────────────────────────────────────────
   MOBILE: hide zoom badge (entire image is tap-to-open)
   The badge is purely decorative on mobile.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dg-pdp-main-image {
        cursor: pointer;
    }
    .dg-pdp-main-image__zoom {
        opacity: 0.7;
    }
}


/* ────────────────────────────────────────────────────────────
   PREVENT SCROLL while lightbox is open
   JS toggles .dg-pdp-lightbox-open on <body> as well as
   the [hidden] attribute on the modal. We use the body class
   to prevent scroll under the modal.
   ──────────────────────────────────────────────────────────── */
body.dg-pdp-lightbox-open {
    overflow: hidden;
    /* Don't use position:fixed here — the iOS Safari trick
       breaks our other fixed positioning (lessons learned
       from Phase 4 listing drawer). overflow:hidden is enough
       on the modal because we use touch-action:none on the
       lightbox itself. */
}




/* ────────────────────────────────────────────────────────────
   CUSTOMIZE ACCORDION (5e-i)

   Visible structure:
     [Header: "CUSTOMIZE YOUR PANTS"   "0 of 12 styled"]
     [Progress bar (thin, lower contrast in 5e-i)]
     [Section #1 — Front closure          ▼]
     [Section #2 — Pleats                 ▼]
     [Section #3 — Belt loops             ▼]
     ... etc

     When a section is expanded:
       The body shows MageWorx's native option HTML (radio /
       select / swatch grid). 5e-i does NOT yet restyle the
       inner options — that's 5e-ii.

   Goal of 5e-i: skeleton + open/close UX that doesn't break
   MageWorx form/price logic.
   ──────────────────────────────────────────────────────────── */

.dg-pdp-customize {
    margin: 0 0 var(--dg-space-lg);
}

/* Header row — title + counter on one line. Tight bottom
   spacing so the entire customize block reads as one column,
   with the first section's top border serving as the only
   visible divider between header and accordion. */
.dg-pdp-customize__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dg-space-md);
    margin: 0;
    padding: 0;
}

.dg-pdp-customize__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    /* Truncate at 1 line so an extra-long product name never
       pushes the counter off-row. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-xs);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-ink);
}

.dg-pdp-customize__title-product {
    /* Product name continues inline with "CUSTOMIZE YOUR" */
    display: inline;
}

.dg-pdp-customize__counter {
    margin: 0;
    flex: 0 0 auto;
    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-xs);
    color: var(--dg-muted);
    letter-spacing: var(--dg-track-wide);
    white-space: nowrap;
}


/* Progress bar — slim track + filled bar that grows as
   options are styled. Track sits in its own row with breathing
   room from the section border below; no longer collides with
   any divider line.

   Fill animates smoothly via width transition. Fill stays
   solid black so it reads as a deliberate indicator, not
   a divider line. */
.dg-pdp-customize__progress {
    width: 100%;
    height: 3px;
    background: var(--dg-line);
    margin: var(--dg-space-xs) 0 var(--dg-space-md);
    overflow: hidden;
    border-radius: 2px;
}

.dg-pdp-customize__progress-fill {
    height: 100%;
    background: var(--dg-ink);
    transition: width var(--dg-duration-base) var(--dg-ease);
}


/* ── Section ─────────────────────────────────────────────── */
.dg-pdp-customize__section {
    border-top: 1px solid var(--dg-line);
    /* Last section gets a bottom border too */
}

.dg-pdp-customize__section:last-child {
    border-bottom: 1px solid var(--dg-line);
}

/* Conditional hidden state — applied by JS when a rule in
   CONDITIONAL_RULES (pdp-customize.js) is triggered. The
   section is fully removed from the layout (no border, no
   space taken) so the user perceives the option as not
   existing — which is the intent. We avoid `visibility:
   hidden` because that leaves a hole. We avoid animation
   because triggering the rule from a select change should
   feel instant: the user changed Helper Belts to BH0 and
   sees Helper Belt Style "vanish" — adding a 200ms collapse
   makes it look like a glitch. Snap is correct here. */
.dg-pdp-customize__section.is-conditional-hidden {
    display: none !important;
}


/* Section toggle (header row, click target) */
.dg-pdp-customize__section-toggle {
    /* Reset button defaults */
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;

    /* Layout: number + title + preview + chevron.
       Use horizontal padding INSIDE the button itself so the
       hover background paints to the visual edge without
       shifting layout. The negative-margin trick caused a
       1-2px layout shift on hover (the "shake"). */
    display: flex;
    align-items: center;
    gap: var(--dg-space-md);
    padding: var(--dg-space-md) var(--dg-space-md);

    transition: background-color var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-customize__section-toggle:hover {
    /* Background only — no margin/padding changes, no layout shift. */
    background-color: var(--dg-cream);
}

.dg-pdp-customize__section-toggle:focus-visible {
    outline: 2px solid var(--dg-ink);
    outline-offset: -2px;
}


/* Number circle — 3 visual states reflect section state:

   1. Untouched (default):
        outlined circle, grey number
   2. Active (section is currently open):
        black filled circle, white number
   3. Filled (section has a value, currently closed):
        black filled circle, white ✓ checkmark
        Driven by .has-value class + ::before pseudo
        (5e-ii JS toggles .has-value on the section).
*/
.dg-pdp-customize__section-number {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: var(--dg-radius-circle);
    border: 1px solid var(--dg-line);
    color: var(--dg-muted);
    background: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--dg-text-xs);
    font-weight: var(--dg-weight-medium);
    line-height: 1;
    position: relative;

    transition:
        background var(--dg-duration-fast) var(--dg-ease),
        color var(--dg-duration-fast) var(--dg-ease),
        border-color var(--dg-duration-fast) var(--dg-ease);
}

/* State 2 — section is currently OPEN (user is editing it) */
.dg-pdp-customize__section.is-open .dg-pdp-customize__section-number {
    background: var(--dg-ink);
    border-color: var(--dg-ink);
    color: var(--dg-paper);
}

/* State 3 — section has a SELECTED VALUE (closed but completed).
   We show a checkmark INSTEAD of the number. The number text is
   hidden by font-size: 0; the ✓ is drawn by ::before. This way
   we can flip from number → ✓ without changing the DOM. */
.dg-pdp-customize__section.has-value:not(.is-open) .dg-pdp-customize__section-number {
    background: var(--dg-ink);
    border-color: var(--dg-ink);
    color: var(--dg-paper);
    font-size: 0;       /* hide the number digit */
}

.dg-pdp-customize__section.has-value:not(.is-open) .dg-pdp-customize__section-number::before {
    content: '';
    /* Inline SVG checkmark via mask — keeps colour controllable
       through `background` of the pseudo-element. */
    width: 12px;
    height: 12px;
    background: var(--dg-paper);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2'><polyline points='2,7 6,11 12,3'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2'><polyline points='2,7 6,11 12,3'/></svg>");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    display: block;
}


/* Section title color — slightly more prominent when section
   has a value, so users can scan their completed sections at
   a glance. */
.dg-pdp-customize__section.has-value:not(.is-open) .dg-pdp-customize__section-title {
    color: var(--dg-ink);
    font-weight: var(--dg-weight-medium);
}


/* Title — takes its natural width; preview's margin-left:auto
   pushes everything else to the right. No flex-grow on title,
   so an empty preview doesn't force the title to stretch. */
.dg-pdp-customize__section-title {
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--dg-text-sm);
    font-weight: var(--dg-weight-regular);
    color: var(--dg-ink);
    line-height: 1.3;
    /* Truncate at 1 line (defensive — titles are usually short) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dg-pdp-customize__section-required {
    color: var(--dg-faint);
    margin-left: 2px;
}


/* Preview — selected value name + price, shown when section
   is closed AND has a value. Hidden when section is open
   (the swatches themselves show the selection there).

   Layout: pushed to right by margin-left:auto so the chevron
   stays at the far right regardless of preview text length. */
.dg-pdp-customize__section-preview {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    font-size: var(--dg-text-xs);
    color: var(--dg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* hidden when section open — JS shows/hides via has-value class */
    opacity: 0;
    transition: opacity var(--dg-duration-fast) var(--dg-ease);
}

/* Show preview when section has a value AND is closed */
.dg-pdp-customize__section.has-value:not(.is-open) .dg-pdp-customize__section-preview {
    opacity: 1;
}

/* Tiny price suffix in preview — slight emphasis */
.dg-pdp-customize__section-preview .dg-pdp-customize__preview-price {
    color: var(--dg-ink);
    font-weight: var(--dg-weight-medium);
    margin-left: 4px;
}

.dg-pdp-customize__section-preview .dg-pdp-customize__preview-price--free {
    color: var(--dg-muted);
    font-weight: var(--dg-weight-regular);
}


/* Chevron — flips when section expanded.
   Fixed width keeps it perfectly aligned with all sections,
   even when preview text varies. */
.dg-pdp-customize__section-chevron {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--dg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-customize__section.is-open .dg-pdp-customize__section-chevron {
    transform: rotate(180deg);
    color: var(--dg-ink);
}


/* Section body — contains MageWorx's native option HTML */
.dg-pdp-customize__section-body {
    padding: 0 0 var(--dg-space-md);
}

.dg-pdp-customize__section-body[hidden] {
    display: none !important;
}


/* ────────────────────────────────────────────────────────────
   MAGEWORX LEGACY OPTION CHROME — neutralise (5e-i)

   MageWorx's option templates emit:
     <div class="option">
       <dl>
         <dt><label>Title<span class="required">*</span></label></dt>
         <dd>
           <ul id="ul_swatch_OID">
             <li id="swatch_VID" class="swatch">
               <a href="..." onclick="optionSwatch.select(OID,VID); return false">
                 <img class="swatch small-image-preview" />
               </a>
               <div>VALUE NAME</div>
               <div>฿ PRICE</div>
             </li>
           </ul>
           <select hidden ...><option>...</option></select>
           <input type="hidden" class="option_value" />
         </dd>
       </dl>
     </div>

   We restyle into:
     - Hide the duplicate <dt> title (we render it in section header)
     - Strip <dl><dt><dd> margins
     - Display <ul> as 4-column editorial grid (5+ items wrap)
     - Style each <li> as a card-like swatch with image + label + price
     - On hover → border darkens
     - On select (li.swatch-selected) → black border (matches mockup)
   ──────────────────────────────────────────────────────────── */

.dg-pdp-customize__section-body .option {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.dg-pdp-customize__section-body .option > dl {
    margin: 0;
    padding: 0;
}

/* Hide the duplicate title — we render it in our section header */
/*.dg-pdp-customize__section-body .option > dl > dt {
    display: none;
}*/


/* Hide the duplicate <label> inside <dt> — we already show
   the section title in our accordion header. But KEEP the
   rest of the <dt> visible because MageWorx renders the
   per-option price hint (e.g. "+฿500.00") right next to
   the label via getFormatedOptionPrice(). Hiding the whole
   <dt> hid that price too. v2 fix: target the label only. */
.dg-pdp-customize__section-body .option > dl > dt > label {
    display: none;
}
.dg-pdp-customize__section-body .option > dl > dt {
    /* Tighten spacing — without the label inside, the dt
       collapses to just the price hint + (optional) option
       description, so a small margin to separate it from
       the input below feels right. */
    margin: 0 0 var(--dg-space-xs) 0;
    padding: 0;
    /* Visually: just the price hint floating above the input */
    font-size: var(--dg-text-sm);
    color: var(--dg-ink);
    letter-spacing: var(--dg-track-normal);
    line-height: var(--dg-leading-snug);
}

/* MageWorx's price-notice span — make it editorial-friendly */
.dg-pdp-customize__section-body .option > dl > dt .price-notice,
.dg-pdp-customize__section-body .option > dl > dt .price,
.dg-pdp-customize__section-body .option > dl > dt > span {
    font-size: var(--dg-text-sm);
    color: var(--dg-ink);
    font-weight: var(--dg-weight-medium);
    /* Strip MageWorx's default brackets if any */
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}


.dg-pdp-customize__section-body .option > dl > dd {
    margin: 0;
    padding: 0;
}


/* ── Swatch grid — 4 cols, wraps after 5th item ──────────── */
.dg-pdp-customize__section-body ul[id^="ul_swatch_"] {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--dg-space-sm);
}

@media (max-width: 480px) {
    .dg-pdp-customize__section-body ul[id^="ul_swatch_"] {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--dg-space-xs);
    }
}


/* ── Single swatch tile (li) ─────────────────────────────── */
.dg-pdp-customize__section-body li.swatch,
.dg-pdp-customize__section-body li.swatch-selected {
    /* Reset list defaults */
    list-style: none;
    float: none;
    margin: 0;
    padding: var(--dg-space-sm);

    /* Card visual */
    background: var(--dg-paper);
    border: 1px solid var(--dg-line);
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dg-space-xs);

    transition:
        border-color var(--dg-duration-fast) var(--dg-ease),
        background var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-customize__section-body li.swatch:hover {
    /* No hover state.
       On touch devices (iPad/iPhone) hover styles "stick"
       after a tap until the user taps elsewhere, leaving
       two swatches looking selected at once: the actually-
       selected one (real black border) and whichever one
       was tapped just before (sticky hover border). That's
       confusing — users can't tell which option is current.
       We let the active state (`.swatch-selected`) speak
       alone. The cursor:pointer on the <li> still signals
       interactivity on desktop. */
}

/* Active state — black border (matches mockup) */
.dg-pdp-customize__section-body li.swatch-selected {
    border-color: var(--dg-ink);
    border-width: 2px;
    /* Compensate the extra 1px so the cell doesn't shift */
    padding: calc(var(--dg-space-sm) - 1px);
}


/* ── Swatch <a> wrapper (the click target — has onclick) ─ */
.dg-pdp-customize__section-body li.swatch > a,
.dg-pdp-customize__section-body li.swatch-selected > a {
    display: block;
    width: 100%;
    line-height: 0; /* tighten image baseline */
    text-decoration: none;
    color: inherit;
}

/* ── Swatch image ─────────────────────────────────────── */
.dg-pdp-customize__section-body li.swatch img.swatch,
.dg-pdp-customize__section-body li.swatch-selected img.swatch,
.dg-pdp-customize__section-body li.swatch img.small-image-preview,
.dg-pdp-customize__section-body li.swatch-selected img.small-image-preview {
    /* Fit the swatch tile width naturally */
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    background: transparent;
}


/* ── Swatch label + price (the two <div>s after the <a>) ──
   They're plain <div>s in MageWorx markup, no class. We target
   them positionally as siblings of the link. */
.dg-pdp-customize__section-body li.swatch > div,
.dg-pdp-customize__section-body li.swatch-selected > div {
    text-align: center;
    line-height: var(--dg-leading-snug);
}

/* First div = name, second = price (visual hierarchy) */
.dg-pdp-customize__section-body li.swatch > div:nth-of-type(1),
.dg-pdp-customize__section-body li.swatch-selected > div:nth-of-type(1) {
    font-size: var(--dg-text-xs);
    color: var(--dg-ink);
    font-weight: var(--dg-weight-regular);
}

.dg-pdp-customize__section-body li.swatch > div:nth-of-type(2),
.dg-pdp-customize__section-body li.swatch-selected > div:nth-of-type(2) {
    font-size: var(--dg-text-xxs);
    color: var(--dg-muted);
    letter-spacing: var(--dg-track-wide);
}


/* Hide MageWorx's hidden <select> (it lives next to <ul>) and
   the .option_value hidden input — they're already display:none
   via inline styles, but be defensive in case theme reset
   re-shows them. */
.dg-pdp-customize__section-body select.hidden {
    display: none !important;
}


/* ============================================================
   Phase 5f — Sticky CTA card

   Layout architecture:
     desktop ≥ 1024px → position: sticky inside info column
                        sticks to bottom: var(--dg-space-md)
     mobile  < 1024px → position: fixed bottom of viewport
                        full-width edge-to-edge
                        only pinned after user scrolls past the
                        inline price block (JS toggles
                        [data-pinned] on the body)
   ============================================================ */

/* Card shell — always rendered inline first; "becomes sticky"
   via the position rule below. The `.dg-pdp-cta` element is
   the only one in this scope so we don't need a wrapper. */
.dg-pdp-cta {
    background: var(--dg-ink);
    color: var(--dg-paper);
    padding: var(--dg-space-md) var(--dg-space-lg);
    border-radius: var(--dg-radius-soft);
    margin: var(--dg-space-lg) 0 var(--dg-space-lg);
    z-index: var(--dg-z-sticky);

    /* Smooth motion for sticky transitions. The shadow only
       appears once the bar lifts off-page. */
    transition:
        box-shadow var(--dg-duration-base) var(--dg-ease),
        transform var(--dg-duration-base) var(--dg-ease);
}

/* Desktop: stick to bottom of viewport once it scrolls past
   the natural position. Sticky position is unsupported in
   IE11 but we don't care. */
@media (min-width: 1024px) {
    .dg-pdp-cta {
        position: sticky;
        bottom: var(--dg-space-md);
    }
}

/* When sticky and "lifted" off page, add a subtle shadow.
   The pinned state is set by pdp-cta.js once the inline price
   block scrolls out of view. */
.dg-pdp-cta[data-pinned="true"] {
    box-shadow: var(--dg-shadow-md);
}


/* Row 1 — label + total */
.dg-pdp-cta__row--label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--dg-space-xs);
    margin-bottom: var(--dg-space-md);
    font-size: var(--dg-text-xxs);
    letter-spacing: var(--dg-track-wider);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.dg-pdp-cta__label,
.dg-pdp-cta__total-label {
    /* keep all caps + tracked styles */
}

.dg-pdp-cta__sep {
    opacity: 0.4;
    margin: 0 4px;
}

.dg-pdp-cta__total {
    margin-left: auto;
    color: var(--dg-paper);
    font-size: var(--dg-text-md);
    letter-spacing: var(--dg-track-normal);
    text-transform: none;
    font-family: var(--dg-font-serif);
    font-weight: var(--dg-weight-regular);
    transition: color var(--dg-duration-fast) var(--dg-ease);
}


/* Row 2 — qty | add to cart | wishlist */
.dg-pdp-cta__row--actions {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: var(--dg-space-sm);
}


/* Qty stepper — black outlined on white card; reverse here
   (white outlined on black) so it reads correctly against
   the dark CTA background. */
.dg-pdp-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--dg-radius-soft);
    overflow: hidden;
    background: transparent;
}

.dg-pdp-qty__btn {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--dg-paper);
    width: 40px;
    min-height: 44px;  /* Apple HIG touch target */
    cursor: pointer;
    font-size: var(--dg-text-md);
    line-height: 1;
    padding: 0;
    transition: background var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-qty__btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
}

.dg-pdp-qty__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.dg-pdp-qty__input {
    appearance: none;
    -moz-appearance: textfield;
    width: 36px;
    text-align: center;
    background: transparent;
    color: var(--dg-paper);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    font-size: var(--dg-text-sm);
    font-family: var(--dg-font-sans);
    padding: 0;
    /* Hide spin buttons in Webkit */
}
.dg-pdp-qty__input::-webkit-outer-spin-button,
.dg-pdp-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dg-pdp-qty__input:focus {
    outline: 1px solid var(--dg-paper);
    outline-offset: -1px;
}


/* Add to cart — primary action; full-bleed inside the grid
   column it occupies. */
.dg-pdp-cta__add {
    appearance: none;
    background: var(--dg-paper);
    color: var(--dg-ink);
    border: none;
    padding: 0 var(--dg-space-lg);
    min-height: 44px;
    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-sm);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-wider);
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--dg-radius-soft);
    position: relative;
    transition:
        background var(--dg-duration-fast) var(--dg-ease),
        color var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-cta__add:hover:not(:disabled) {
    background: var(--dg-cream);
}

.dg-pdp-cta__add:active:not(:disabled) {
    transform: translateY(1px);
}

/* Disabled state — used when required options aren't all
   filled. JS sets `disabled` and updates the hint text. */
.dg-pdp-cta__add:disabled {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

/* Hover/focus tooltip — reveals the disabled hint. We use
   visibility + opacity for accessibility (still in tab order
   and announced by screen readers). */
.dg-pdp-cta__add[disabled]:hover .dg-pdp-cta__add-hint,
.dg-pdp-cta__add[disabled]:focus .dg-pdp-cta__add-hint,
.dg-pdp-cta__add[disabled][data-tooltip-shown="true"] .dg-pdp-cta__add-hint {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.dg-pdp-cta__add-hint {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 4px);
    background: var(--dg-paper);
    color: var(--dg-ink);
    padding: 6px 12px;
    border-radius: var(--dg-radius-soft);
    font-size: var(--dg-text-xs);
    font-weight: var(--dg-weight-regular);
    letter-spacing: var(--dg-track-normal);
    text-transform: none;
    white-space: nowrap;
    box-shadow: var(--dg-shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--dg-duration-fast) var(--dg-ease),
        transform var(--dg-duration-fast) var(--dg-ease),
        visibility var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-cta__add-hint::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--dg-paper);
}


/* Wishlist heart — ghost outline on dark, fills on toggle */
.dg-pdp-cta__wish {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--dg-paper);
    width: 44px;
    min-height: 44px;
    border-radius: var(--dg-radius-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--dg-duration-fast) var(--dg-ease),
        border-color var(--dg-duration-fast) var(--dg-ease),
        color var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-cta__wish:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
}

.dg-pdp-cta__wish[aria-pressed="true"] {
    color: var(--dg-paper);
}

.dg-pdp-cta__wish[aria-pressed="true"] .dg-pdp-cta__wish-icon path {
    fill: currentColor;
}

.dg-pdp-cta__wish-icon {
    width: 20px;
    height: 20px;
}


/* Mobile — fixed bottom bar
   The JS no longer DOM-swaps the CTA between form and body;
   it just toggles `data-pdp-cta-pinned` on the body. CSS
   does the rest with a straight `position: static` ↔
   `position: fixed` flip.

   No animation: every previous attempt at slide-up keyframes
   produced visible flicker at the threshold because (a) the
   keyframe restarts each time the attribute toggles, and
   (b) any small scroll jitter near the pivot retriggers it.
   A snap is jarring for one frame; a flicker is jarring for
   many. Snap wins.

   Hysteresis (100px) lives in JS — it's the only flicker
   defence we need now that DOM stays still. */
@media (max-width: 1023px) {

    .dg-pdp-cta {
        margin: var(--dg-space-md) 0;
        border-radius: var(--dg-radius-soft);
        position: static;
    }

    body[data-pdp-cta-pinned="true"] .dg-pdp-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: var(--dg-space-sm) var(--dg-space-md)
                 calc(var(--dg-space-sm) + env(safe-area-inset-bottom, 0));
        border-radius: 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        z-index: 1100;
    }

    /* Tighter layout when pinned — collapse the "label" row
       so the bar is more compact. */
    body[data-pdp-cta-pinned="true"] .dg-pdp-cta__row--label {
        margin-bottom: var(--dg-space-xs);
    }

    body[data-pdp-cta-pinned="true"] .dg-pdp-cta__label,
    body[data-pdp-cta-pinned="true"] .dg-pdp-cta__sep {
        display: none;
    }
}


/* ────────────────────────────────────────────────────────────
   SIGN-IN MODAL
   Soft-block: when a guest user tries to add to cart, the
   submit is intercepted in pdp-cta.js and this modal opens
   instead. The user can sign in (preserving their option
   selections via localStorage) or continue browsing. Bespoke
   tailoring requires a size profile, which only signed-in
   accounts can save — hence the gate.

   DGRIE design language: sharp edges (radius soft = 2px),
   editorial typography (serif headline + sans body), generous
   whitespace, restrained palette. Backdrop is ink at 60% so
   focus shifts decisively to the card.
   ──────────────────────────────────────────────────────────── */
.dg-pdp-modal {
    position: fixed;
    inset: 0;
    z-index: var(--dg-z-modal, 1000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dg-space-md);

    /* Fade-in on open. JS removes [hidden] to trigger. */
    animation: dgPdpModalFadeIn 240ms var(--dg-ease, ease-out) both;
}

.dg-pdp-modal[hidden] {
    display: none !important;
}

.dg-pdp-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, 0.6); /* --dg-ink at 60% */
    cursor: pointer; /* signals "click to dismiss" */
}

.dg-pdp-modal__card {
    position: relative;
    z-index: 1;
    background: var(--dg-paper);
    border-radius: var(--dg-radius-soft);
    box-shadow: 0 24px 64px rgba(26, 26, 26, 0.25);
    width: 100%;
    max-width: 440px;
    padding: var(--dg-space-xl);
    text-align: center;

    animation: dgPdpModalCardSlideIn 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.dg-pdp-modal__title {
    font-family: var(--dg-font-serif);
    font-size: var(--dg-text-lg);
    font-weight: var(--dg-weight-medium);
    color: var(--dg-ink);
    margin: 0 0 var(--dg-space-sm);
    letter-spacing: var(--dg-track-tight);
}

.dg-pdp-modal__body {
    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-base);
    color: var(--dg-ink-soft);
    line-height: var(--dg-leading-loose);
    margin: 0 0 var(--dg-space-xl);
}

.dg-pdp-modal__actions {
    display: flex;
    flex-direction: column;
    gap: var(--dg-space-sm);
    margin-bottom: var(--dg-space-md);
}

.dg-pdp-modal__btn {
    display: inline-block;
    padding: var(--dg-space-sm) var(--dg-space-lg);
    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-sm);
    font-weight: var(--dg-weight-semibold);
    letter-spacing: var(--dg-track-wider);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--dg-radius-soft);
    border: 1px solid var(--dg-ink);
    cursor: pointer;
    transition:
        background var(--dg-duration-fast) var(--dg-ease),
        color var(--dg-duration-fast) var(--dg-ease),
        transform var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-modal__btn--primary {
    background: var(--dg-ink);
    color: var(--dg-paper);
}

.dg-pdp-modal__btn--primary:hover,
.dg-pdp-modal__btn--primary:focus-visible {
    background: var(--dg-ink-soft);
    color: var(--dg-paper);
}

.dg-pdp-modal__btn--secondary {
    background: var(--dg-paper);
    color: var(--dg-ink);
}

.dg-pdp-modal__btn--secondary:hover,
.dg-pdp-modal__btn--secondary:focus-visible {
    background: var(--dg-cream);
}

.dg-pdp-modal__btn:active {
    transform: translateY(1px);
}

.dg-pdp-modal__dismiss {
    appearance: none;
    background: transparent;
    border: 0;
    padding: var(--dg-space-xs) var(--dg-space-sm);
    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-sm);
    color: var(--dg-muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin: 0 auto;
}

.dg-pdp-modal__dismiss:hover,
.dg-pdp-modal__dismiss:focus-visible {
    color: var(--dg-ink);
}

@keyframes dgPdpModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dgPdpModalCardSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .dg-pdp-modal__card {
        padding: var(--dg-space-lg);
    }
    .dg-pdp-modal__title {
        font-size: var(--dg-text-md);
    }
}

/* When body has `dg-pdp-modal-open` class (set by JS),
   prevent background scroll. We also dim the
   sticky CTA so it doesn't peek through the modal on mobile. */
body.dg-pdp-modal-open {
    overflow: hidden;
}


/* ────────────────────────────────────────────────────────────
   MAGENTO MESSAGES (error/success/notice flashes)
   Magento's default markup is an unstyled <ul class="messages">
   with <li class="error-msg/success-msg/notice-msg">. Our
   newdgrie theme didn't have these styled until now — the
   Custsize "Please select a profile first" message rendered
   as bare bullet-list text. This block reskins them to fit
   DGRIE's design language while still relying on Magento's
   standard markup (no template override needed; we just
   re-style the existing structure).

   Specificity note: we use `body ul.messages > li ...`
   (3 elements + 1 class) so we beat reset stylesheets that
   force `color` or `background` on `<li>` elements with
   `body .reset > li` selectors. Without this jump the text
   stays the reset's default off-white and we get the
   "invisible error" reported in user testing.
   ──────────────────────────────────────────────────────────── */
body ul.messages,
body .messages {
    list-style: none !important;
    margin: 0 auto var(--dg-space-lg) !important;
    padding: 0 !important;
    max-width: var(--dg-container-narrow, 960px);
    padding-inline: var(--dg-space-md) !important;
}

body ul.messages > li,
body .messages > li {
    list-style: none !important;
    margin: 0 0 var(--dg-space-sm) !important;
    padding: 0 !important;
    background: transparent !important;
}

body ul.messages > li > ul,
body .messages > li > ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body ul.messages > li > ul > li,
body .messages > li > ul > li {
    list-style: none !important;
    padding: var(--dg-space-md) var(--dg-space-lg) !important;
    border-left: 3px solid var(--dg-line);
    font-family: var(--dg-font-sans) !important;
    font-size: var(--dg-text-sm) !important;
    line-height: var(--dg-leading-normal) !important;
    color: var(--dg-ink) !important;
    background: var(--dg-cream) !important;
    margin: 0 0 var(--dg-space-xs) !important;
}

body ul.messages > li.error-msg > ul > li,
body .messages > li.error-msg > ul > li {
    border-left-color: var(--dg-error) !important;
    background: rgba(160, 69, 69, 0.08) !important;
    color: var(--dg-ink) !important;
}

body ul.messages > li.success-msg > ul > li,
body .messages > li.success-msg > ul > li {
    border-left-color: var(--dg-success) !important;
    background: rgba(74, 124, 89, 0.08) !important;
    color: var(--dg-ink) !important;
}

body ul.messages > li.notice-msg > ul > li,
body .messages > li.notice-msg > ul > li {
    border-left-color: var(--dg-warning) !important;
    background: rgba(192, 137, 72, 0.08) !important;
    color: var(--dg-ink) !important;
}

body ul.messages a,
body .messages a {
    color: var(--dg-gold) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body ul.messages a:hover,
body .messages a:hover {
    color: var(--dg-gold-soft) !important;
}


/* ====================================================
   PDP SHARE MODAL — Phase 6b-2

   Modal opens on click of "Share this configuration" button.
   Layout: backdrop + centered card with 6 social buttons +
   copy link row + close button.

   Design language matches the wishlist share modal:
   editorial typography, sharp edges, generous whitespace,
   restrained palette. Buttons are 6-col grid on desktop,
   3-col × 2-row mobile, 2-col on very small screens.

   Tokens: see _01_tokens.css
   ==================================================== */


/* ── Backdrop + container ──────────────────────────── */
.dg-pdp-share-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;          /* same as lightbox — wins over CTA */

    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dg-space-md);

    opacity: 0;
    transition: opacity var(--dg-duration-base) var(--dg-ease-out);
}

.dg-pdp-share-modal[hidden] {
    display: none !important;
}

.dg-pdp-share-modal.is-open {
    opacity: 1;
}

.dg-pdp-share-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, 0.6);
    cursor: pointer;
}


/* ── Card ──────────────────────────────────────────── */
.dg-pdp-share-modal__card {
    position: relative;
    z-index: 1;
    background: var(--dg-paper);
    width: 100%;
    max-width: 480px;
    padding: var(--dg-space-xl);
    box-shadow: 0 24px 64px rgba(26, 26, 26, 0.25);

    /* Slide-up animation */
    transform: translateY(16px);
    transition: transform var(--dg-duration-base) cubic-bezier(0.16, 1, 0.3, 1);
}

.dg-pdp-share-modal.is-open .dg-pdp-share-modal__card {
    transform: translateY(0);
}


/* ── Header ────────────────────────────────────────── */
.dg-pdp-share-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--dg-space-lg);
}

.dg-pdp-share-modal__title {
    margin: 0;
    font-family: var(--dg-font-serif);
    font-size: var(--dg-text-lg);
    font-weight: var(--dg-weight-medium);
    color: var(--dg-ink);
    letter-spacing: var(--dg-track-tight);
}

.dg-pdp-share-modal__close {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--dg-radius-circle);
    color: var(--dg-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-share-modal__close:hover,
.dg-pdp-share-modal__close:focus-visible {
    background: var(--dg-stone);
    outline: none;
}


/* ── Social buttons grid ───────────────────────────── */
.dg-pdp-share-modal__buttons {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--dg-space-sm);
    margin-bottom: var(--dg-space-lg);
}

/* Tablet/small desktop: 3 cols × 2 rows */
@media (max-width: 600px) {
    .dg-pdp-share-modal__buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile small: 2 cols */
@media (max-width: 360px) {
    .dg-pdp-share-modal__buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* When native share API unavailable, hide that button.
   Class toggled by JS via feature detection. */
.dg-pdp-share-modal__buttons.is-no-native
    [data-share-target="native"] {
    display: none;
}


/* ── Individual social button ──────────────────────── */
.dg-pdp-share-modal__btn {
    appearance: none;
    -webkit-appearance: none;
    background: var(--dg-paper);
    border: 1px solid var(--dg-line);
    border-radius: var(--dg-radius-soft);
    padding: var(--dg-space-sm) var(--dg-space-xs);
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 72px;

    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-xxs);
    font-weight: var(--dg-weight-medium);
    color: var(--dg-ink);
    letter-spacing: var(--dg-track-wide);

    transition:
        background var(--dg-duration-fast) var(--dg-ease),
        border-color var(--dg-duration-fast) var(--dg-ease),
        transform var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-share-modal__btn:hover:not(:disabled),
.dg-pdp-share-modal__btn:focus-visible:not(:disabled) {
    background: var(--dg-cream);
    border-color: var(--dg-ink);
    outline: none;
}

.dg-pdp-share-modal__btn:active:not(:disabled) {
    transform: translateY(1px);
}

.dg-pdp-share-modal__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.dg-pdp-share-modal__btn-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.dg-pdp-share-modal__btn-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}


/* ── URL row (read-only input + copy button) ──────── */
.dg-pdp-share-modal__url-row {
    display: flex;
    gap: var(--dg-space-xs);
    align-items: stretch;
    margin-bottom: var(--dg-space-md);
}

.dg-pdp-share-modal__url {
    flex: 1 1 auto;
    min-width: 0;
    appearance: none;
    background: var(--dg-stone);
    border: 1px solid var(--dg-line);
    border-radius: var(--dg-radius-soft);
    padding: 0 var(--dg-space-sm);
    min-height: 40px;
    font-family: var(--dg-font-mono);
    font-size: var(--dg-text-xs);
    color: var(--dg-ink);
}

.dg-pdp-share-modal__url:focus {
    outline: 1px solid var(--dg-ink);
    outline-offset: -1px;
}

.dg-pdp-share-modal__copy {
    appearance: none;
    background: var(--dg-ink);
    color: var(--dg-paper);
    border: 0;
    border-radius: var(--dg-radius-soft);
    padding: 0 var(--dg-space-md);
    min-height: 40px;
    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-xs);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-wider);
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background var(--dg-duration-fast) var(--dg-ease),
        transform var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-share-modal__copy:hover:not(:disabled) {
    background: var(--dg-ink-soft);
}

.dg-pdp-share-modal__copy:active:not(:disabled) {
    transform: translateY(1px);
}

.dg-pdp-share-modal__copy:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ── Toast (link copied confirmation) ─────────────── */
.dg-pdp-share-modal__toast {
    display: block;
    text-align: center;
    font-size: var(--dg-text-xs);
    color: var(--dg-success);
    letter-spacing: var(--dg-track-wider);
    text-transform: uppercase;
    font-weight: var(--dg-weight-semibold);
    margin-top: var(--dg-space-xs);
    animation: dgShareToastFade 200ms var(--dg-ease-out) both;
}

@keyframes dgShareToastFade {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ── Loading state ─────────────────────────────────── */
/* While the shorten API call is pending, show a subtle
   spinner overlay on the URL input. Buttons get a faded
   disabled state (already styled above).
*/
.dg-pdp-share-modal.is-loading .dg-pdp-share-modal__url {
    background-image: linear-gradient(
        90deg,
        var(--dg-stone) 25%,
        var(--dg-line) 50%,
        var(--dg-stone) 75%
    );
    background-size: 200% 100%;
    animation: dgShareUrlShimmer 1.2s linear infinite;
    color: transparent;
}

@keyframes dgShareUrlShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}


/* ── Lock body scroll while modal open ─────────────── */
body.dg-pdp-share-modal-open {
    overflow: hidden;
}


/* ── Card padding on mobile ────────────────────────── */
@media (max-width: 480px) {
    .dg-pdp-share-modal__card {
        padding: var(--dg-space-lg);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   DG-mobile-polish-v6 — Final adjustments
/* ─── Size Profile dropdown — proper layout based on dropdown state ─── */
/* Default state — avatar/body/CHANGE on one row */
.dg-pdp-size-profile {
    flex-wrap: nowrap !important;
}

.dg-pdp-size-profile__avatar,
.dg-pdp-size-profile__action {
    flex-shrink: 0;
}

.dg-pdp-size-profile__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Dropdown — full row, ordered last */
.dg-pdp-size-profile__dropdown {
    flex: 0 0 100% !important;
    width: 100% !important;
    order: 99 !important;
}

/* When dropdown is OPEN — detect via dropdown not having [hidden] */
.dg-pdp-size-profile:has(.dg-pdp-size-profile__dropdown:not([hidden])) {
    flex-wrap: wrap !important;
}


/* ─── Mobile ≤768 — same proper layout, smaller spacing ─── */
@media (max-width: 768px) {

    .dg-pdp-size-profile {
        gap: var(--dg-space-sm) !important;
        padding: var(--dg-space-md) !important;
    }

    .dg-pdp-size-profile__avatar {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
        font-size: var(--dg-text-sm) !important;
    }

    .dg-pdp-size-profile__action {
        padding: 8px 12px !important;
        font-size: var(--dg-text-xxs) !important;
    }

    .dg-pdp-size-profile__eyebrow {
        font-size: 9px !important;
    }

    .dg-pdp-size-profile__title {
        font-size: var(--dg-text-xs) !important;
    }
}


/* ─── Narrow phone ≤380 ─── */
@media (max-width: 380px) {

    .dg-pdp-size-profile {
        gap: 8px !important;
        padding: 12px !important;
    }

    .dg-pdp-size-profile__avatar {
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
    }

    .dg-pdp-size-profile__action {
        padding: 7px 10px !important;
        font-size: 10px !important;
    }
}





/* ============================================================
   Phase 7 — PDP Customize Polish
   ============================================================
   Three issues fixed:

   1. Monogram Color swatches showed as empty white tiles.
      Root cause: MageWorx's option_color.phtml renders
        <div class="container-swatch-color">
          <div class="swatch-color" style="background:#XXX">&nbsp;</div>
        </div>
      but our previous CSS had no rules for .swatch-color or
      .container-swatch-color, so the inner div collapsed to
      0×0 and the inline background paint never showed.

   2. Monogram (and any text input option) used the browser's
      default input chrome — no focus state, character counter
      lived as a detached <p class="note"> underneath.
      We add a polished input + integrate the counter into the
      same visual block.

   3. Radio button option type (input type=radio) rendered as
      native OS radios. We replace them with custom cards that
      mirror the swatch grid aesthetic — same hover/active
      treatment, same border language, same spacing.

   Scope:
     All rules live under .dg-pdp-customize__section-body so
     they only target the in-accordion option markup. Nothing
     in the outer page (header, cart, account) is affected.
   ============================================================ */


/* ============================================================
   ISSUE 1 — COLOR SWATCH RENDERING
   ============================================================
   The inline background:#XXX comes from MageWorx and we mustn't
   override it; we just give the box dimensions + a centered
   container so the colour can paint.

   We treat .swatch-color as a circular chip (44 × 44 on desktop,
   36 × 36 on mobile) with a faint inner ring so light colours
   like white don't disappear against the cream paper background.
   ============================================================ */

/* Container — the outer wrapper rendered by MageWorx's
   option_color.phtml. We use flexbox to centre the chip inside
   the swatch tile (the parent <li.swatch> is already display
   flex with align-items center, but we double-check the
   container itself behaves as a block-level box). */
.dg-pdp-customize__section-body .container-swatch-color {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Make sure no margin compresses the chip against label */
    margin: 0 0 var(--dg-space-xs) 0;
    /* Take full tile width — the chip itself decides its size */
    width: 100%;
    /* Defensive: kill any small-image-preview width MageWorx
       might have set from a sister stylesheet */
    height: auto;
}

/* The actual coloured chip. Inline background comes from
   MageWorx so we don't touch it; we just size + shape. */
.dg-pdp-customize__section-body .swatch-color {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* Subtle ring so white / very light colours still have
       a visible edge against the cream paper background.
       Inset by 0 so we don't grow the box. */
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.06),
        0 0 0 1px var(--dg-line);
    /* Defensive — older MageWorx prints &nbsp; inside; hide it
       so it doesn't push the chip taller than 44px on browsers
       that compute the text node's line-height. */
    font-size: 0;
    line-height: 0;
    /* Smooth border transition when selected */
    transition: box-shadow var(--dg-duration-fast) var(--dg-ease);
}

/* When the swatch tile is selected (parent li.swatch-selected),
   beef up the ring so the colour chip echoes the tile's outer
   black border. Provides a second, smaller visual confirmation
   that the user's choice landed. */
.dg-pdp-customize__section-body li.swatch-selected .swatch-color {
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.12),
        0 0 0 2px var(--dg-ink);
}

/* Mobile — chip slightly smaller so 4 swatches still fit
   comfortably without text label wrapping awkwardly. */
@media (max-width: 480px) {
    .dg-pdp-customize__section-body .swatch-color {
        width: 36px;
        height: 36px;
    }
}


/* ============================================================
   ISSUE 2 — TEXT INPUT (monogram, custom text, textarea)
   ============================================================
   MageWorx markup:
     <dl>
       <dt><label>Monogram</label></dt>
       <dd>
         <input type="text" class="input-text" maxlength=20 />
         <p class="note">Characters left: <strong>20</strong></p>
       </dd>
     </dl>

   We style the input itself + reposition the .note so the
   counter feels integrated rather than floating below.
   ============================================================ */

/* Wrapper — the outer <div class="option"> for type=text.
   Tighten its vertical rhythm to match the accordion's other
   sections. */
.dg-pdp-customize__section-body .option > dl > dd {
    /* Leave room for the integrated counter underneath input */
    padding: 0;
}

/* The text input itself. Note: we DON'T select on .input-text
   alone (that would leak to the qty stepper input which is
   styled separately as .dg-pdp-qty__input). We anchor to
   the accordion section body. */
.dg-pdp-customize__section-body input.input-text[type="text"],
.dg-pdp-customize__section-body input.input-text:not([type]),
.dg-pdp-customize__section-body textarea.text-area {
    /* Box */
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px var(--dg-space-md);

    /* Visual */
    background: var(--dg-paper);
    border: 1px solid var(--dg-line);
    border-radius: 0; /* match the rest of the accordion's
                         editorial squared-off aesthetic */

    /* Typography */
    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-base);
    letter-spacing: var(--dg-track-normal);
    color: var(--dg-ink);
    line-height: var(--dg-leading-snug);

    /* Strip browser chrome (Safari especially likes to round
       inputs by default + add inner shadows) */
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    outline: none;

    /* Animate the focus border so it feels responsive */
    transition:
        border-color var(--dg-duration-fast) var(--dg-ease),
        background var(--dg-duration-fast) var(--dg-ease);
}

/* Textarea-specific — vertical resize only, default height */
.dg-pdp-customize__section-body textarea.text-area {
    resize: vertical;
    min-height: 88px;
}

/* Placeholder — quieter than the typed value */
.dg-pdp-customize__section-body input.input-text::placeholder,
.dg-pdp-customize__section-body textarea.text-area::placeholder {
    color: var(--dg-muted);
    opacity: 1; /* Firefox defaults to 0.54 — fix to match Chrome */
}

/* Hover (desktop only — touch devices ignore :hover anyway) */
.dg-pdp-customize__section-body input.input-text:hover,
.dg-pdp-customize__section-body textarea.text-area:hover {
    border-color: var(--dg-ink-soft, #888);
}

/* Focus — black border + slight inset shadow to feel "active".
   No glow halo (would clash with the editorial vibe). */
.dg-pdp-customize__section-body input.input-text:focus,
.dg-pdp-customize__section-body textarea.text-area:focus {
    border-color: var(--dg-ink);
    border-width: 1px; /* keep at 1; let the inset do the weight */
    box-shadow: inset 0 0 0 1px var(--dg-ink);
}

/* Invalid state (after blur + validation failed) — soft red */
.dg-pdp-customize__section-body input.input-text.validation-failed,
.dg-pdp-customize__section-body textarea.text-area.validation-failed {
    border-color: #c0392b;
    box-shadow: inset 0 0 0 1px #c0392b;
}


/* Character counter — MageWorx emits this as <p class="note">.
   We restyle to feel like an inline hint anchored to the input,
   not a standalone paragraph. */
.dg-pdp-customize__section-body .option > dl > dd > p.note {
    margin: var(--dg-space-xs) 0 0 0;
    padding: 0;
    font-size: var(--dg-text-xxs);
    color: var(--dg-muted);
    letter-spacing: var(--dg-track-wide);
    text-transform: uppercase;
    line-height: 1;
    /* Push to right edge so it visually anchors to the
       input's bottom-right corner — typical character-counter
       UX pattern. */
    text-align: right;
}

/* The <strong> wrapping the live count — give it a tiny pill
   so the eye lands on the number cleanly. */
.dg-pdp-customize__section-body .option > dl > dd > p.note strong {
    color: var(--dg-ink);
    font-weight: var(--dg-weight-medium);
    font-size: var(--dg-text-xs);
    margin-left: 2px;
}


/* ============================================================
   ISSUE 3 — RADIO BUTTON STYLING
   ============================================================
   MageWorx emits radio options inside an <ul> with each value
   as <li><input type="radio"><label>…</label></li> (no swatch
   data — that goes through a different code path).

   We turn them into clickable cards visually consistent with
   the swatch tile aesthetic so the accordion has one design
   language whether the option is "swatch", "radio", or "image".

   Strategy:
     - Hide native radio
     - Use the <label> as the click target
     - Add a small visual radio dot in the corner so users
       still understand "one of these" semantics
     - Active state echoes li.swatch-selected: black border,
       slight padding compensation
   ============================================================ */

/* The container — same grid layout as swatches, but we target
   ul WITHOUT the [id^="ul_swatch_"] selector (which is for
   swatches only). MageWorx wraps non-swatch options in plain
   <ul class="options-list"> or no wrapper at all — we use the
   .options-list class which is MageWorx default. */
.dg-pdp-customize__section-body ul.options-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dg-space-sm);
}

@media (max-width: 480px) {
    .dg-pdp-customize__section-body ul.options-list {
        grid-template-columns: 1fr;
        gap: var(--dg-space-xs);
    }
}


/* Each radio option = a card. We target the <li> only inside
   .options-list to avoid catching the swatch <li>s above. */
.dg-pdp-customize__section-body ul.options-list > li {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Visual happens on the <label> child so the click target
       is the whole card */
}


/* Hide the native radio — we'll re-render it as a visual dot */
.dg-pdp-customize__section-body ul.options-list input[type="radio"].radio {
    /* visually hide but keep accessible to screen readers
       and keyboard via :focus-visible on the label */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* The clickable label — becomes the card */
.dg-pdp-customize__section-body ul.options-list label {
    /* Mimic swatch tile */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dg-space-sm);

    padding: var(--dg-space-md);
    background: var(--dg-paper);
    border: 1px solid var(--dg-line);
    cursor: pointer;

    font-size: var(--dg-text-sm);
    color: var(--dg-ink);
    line-height: var(--dg-leading-snug);

    transition:
        border-color var(--dg-duration-fast) var(--dg-ease),
        background var(--dg-duration-fast) var(--dg-ease);
}

/* Custom radio dot — sits to the left of the label text via
   a ::before pseudo on the label. Empty by default; filled
   when the sibling input is :checked. */
.dg-pdp-customize__section-body ul.options-list label::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--dg-line);
    background: transparent;
    transition:
        border-color var(--dg-duration-fast) var(--dg-ease),
        background var(--dg-duration-fast) var(--dg-ease);
}

/* When a radio is :checked (we look up to li for sibling
   selector via :has, with fallback to manual class handling).
   Modern Safari/Chrome/Firefox support :has — for older
   browsers, MageWorx's onclick handler adds a .selected
   class we can also key on. */
.dg-pdp-customize__section-body ul.options-list li:has(input[type="radio"]:checked) label,
.dg-pdp-customize__section-body ul.options-list li.selected label {
    border-color: var(--dg-ink);
    border-width: 2px;
    padding: calc(var(--dg-space-md) - 1px);
}

.dg-pdp-customize__section-body ul.options-list li:has(input[type="radio"]:checked) label::before,
.dg-pdp-customize__section-body ul.options-list li.selected label::before {
    border-color: var(--dg-ink);
    border-width: 5px;
    background: var(--dg-paper);
    /* The thick border + paper fill creates a "ring + dot"
       look: outer ink ring, inner paper, with the border eating
       the radius so the centre reads as a contrasting dot. */
}

/* Keyboard focus — visible ring on the label when the
   (visually hidden) radio is focused via Tab */
.dg-pdp-customize__section-body ul.options-list input[type="radio"].radio:focus-visible + label,
.dg-pdp-customize__section-body ul.options-list input[type="radio"].radio:focus + label {
    outline: 2px solid var(--dg-ink);
    outline-offset: 2px;
}


/* Disabled state (when MageWorx marks an option unavailable) */
.dg-pdp-customize__section-body ul.options-list input[type="radio"]:disabled + label {
    opacity: 0.4;
    cursor: not-allowed;
}


/* Price suffix — MageWorx appends "(+฿X.XX)" inside the label
   after the title. Style as a small muted block on the right
   so the eye sees [Radio dot] [Title] ─ [Price]. */
.dg-pdp-customize__section-body ul.options-list label .price-notice,
.dg-pdp-customize__section-body ul.options-list label .price {
    font-size: var(--dg-text-xs);
    color: var(--dg-muted);
    letter-spacing: var(--dg-track-wide);
    margin-left: auto;
    font-weight: var(--dg-weight-regular);
}


/* ============================================================
   END — Phase 7 — Customize Polish
   ============================================================ */

/* ─── Phase 7 v3 — Color swatches (consolidated, scoped) ──
   MageWorx renders color options as nested divs:
     <li class="swatch">
       <a>
         <div class="swatch container-swatch-color">
           <div class="swatch-color" style="background:#XXX"></div>
         </div>
       </a>
       <div>Label</div>
       <div>Price</div>
     </li>

   This block styles ONLY color swatches via :has(.swatch-color),
   so image swatches (Suits Style, Fit, Lapel, etc.) and any
   other option type are untouched. Both selected and unselected
   states share the same rules so layout doesn't shift on click. */

/* Card layout — center the circle + labels, both states */
.dg-pdp-customize__section-body li.swatch:has(.swatch-color),
.dg-pdp-customize__section-body li.swatch-selected:has(.swatch-color) {
    display: block;
    text-align: center;
}

/* Anchor wrapping the color disc — vertical padding for breathing
   room, line-height 1 so inline-block child can render height */
.dg-pdp-customize__section-body li.swatch:has(.swatch-color) > a,
.dg-pdp-customize__section-body li.swatch-selected:has(.swatch-color) > a {
    padding: 12px 0;
    line-height: 1;
    text-align: center;
}

/* Outer container (no border — defer to the <li> card's own border) */
.dg-pdp-customize__section-body .container-swatch-color {
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box;
    vertical-align: middle;
}

/* The colored disc itself — 32×32 fixed circle */
.dg-pdp-customize__section-body .swatch-color {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    box-sizing: border-box;
    line-height: 0;
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
}

/* White swatch — inner ring so it's visible on light bg */
.dg-pdp-customize__section-body .swatch-color[style*="FFFFFF"],
.dg-pdp-customize__section-body .swatch-color[style*="ffffff"] {
    box-shadow: inset 0 0 0 1px var(--dg-line, #d5d0c5);
}

/* White swatch — inner ring so it's visible on light bg */
.dg-pdp-customize__section-body .swatch-color[style*="FFFFFF"],
.dg-pdp-customize__section-body .swatch-color[style*="ffffff"] {
    box-shadow: inset 0 0 0 1px var(--dg-line, #d5d0c5);
}


/* ─── Phase 7 v3 — Monogram price-hint position (scoped) ───
   Reposition the MageWorx "+฿ 500" price-notice from above
   the input to below it, on the bottom-left of the dl. Pairs
   with the existing right-aligned "Characters left" caption
   (already styled in Phase 7 polish above) to form one info
   row under the input:

       ┌─────────────────────────────────┐
       │ Input field                     │
       └─────────────────────────────────┘
       +฿ 500.00         CHARACTERS LEFT: 17

   Scope key :has(p.note) — that paragraph exists ONLY in
   text/textarea options. Swatch sections (Style, Fit, Color)
   keep the Phase 5e-i dt styling unchanged. */

.dg-pdp-customize__section-body .option:has(p.note) > dl {
    position: relative;
}

/* Lift the dt out of normal flow and pin to bottom-left.
   After Phase 5e-i hides the <label>, dt contains only the
   .price-notice span — perfect for caption-row treatment. */
.dg-pdp-customize__section-body .option:has(p.note) > dl > dt {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: var(--dg-text-xxs);
    color: var(--dg-muted);
    letter-spacing: var(--dg-track-wide);
    text-transform: uppercase;
}

/* Tone down the price-notice to match the .note caption's
   weight (Phase 5e-i defaults to bolder ink — override only
   in this scoped context) */
.dg-pdp-customize__section-body .option:has(p.note) > dl > dt .price-notice,
.dg-pdp-customize__section-body .option:has(p.note) > dl > dt .price {
    font-size: inherit;
    color: inherit;
    font-weight: var(--dg-weight-medium);
    background: transparent;
    padding: 0;
    margin: 0;
}

/* Reserve left space on .note so the absolutely-positioned dt
   fits beside without overlap */
.dg-pdp-customize__section-body .option:has(p.note) > dl > dd > p.note {
    padding-left: 120px;
}

/* ============================================================
   Phase 7r — PDP Matching Pieces (left column)

   Editorial cross-sell list pinned under the Fabric Story card
   in the .dg-pdp__gallery column. Tells the narrative:
       FABRIC STORY → PIECES YOU CAN MAKE WITH IT

   Renders only when Magento Related Products are linked to
   the current product (admin OR via pants_to_suit.php).
   Empty state: the section never renders (template returns).
   ============================================================ */

.dg-pdp-related {
    background: var(--dg-cream);
    padding: var(--dg-space-lg);
    margin: 0;
    /* Sharp edges per design system — no border-radius */
}

@media (max-width: 1024px) {
    .dg-pdp-related {
        padding: var(--dg-space-md);
    }
}

.dg-pdp-related__eyebrow {
    margin: 0 0 var(--dg-space-sm);
    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-xs);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-muted);
}

.dg-pdp-related__title {
    margin: 0 0 var(--dg-space-lg);
    font-family: var(--dg-font-serif);
    font-size: clamp(20px, 2.4vw, 24px);
    font-weight: var(--dg-weight-regular);
    line-height: var(--dg-leading-tight);
    letter-spacing: var(--dg-track-tight);
    color: var(--dg-ink);
}

.dg-pdp-related__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.dg-pdp-related__item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dg-pdp-related__row {
    display: flex;
    align-items: center;
    gap: var(--dg-space-md);
    padding: var(--dg-space-md) 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--dg-line);
    transition: color var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-related__item:last-child .dg-pdp-related__row {
    border-bottom: 0;
}

.dg-pdp-related__row:hover,
.dg-pdp-related__row:focus-visible {
    outline: none;
    text-decoration: none;
    color: var(--dg-ink);
}

.dg-pdp-related__row-image {
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    overflow: hidden;
    background: var(--dg-stone);
}

@media (max-width: 1024px) {
    .dg-pdp-related__row-image {
        flex: 0 0 72px;
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 480px) {
    .dg-pdp-related__row-image {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
    }
}

.dg-pdp-related__row-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dg-duration-base) var(--dg-ease);
}

.dg-pdp-related__row:hover .dg-pdp-related__row-image img {
    transform: scale(1.04);
}

.dg-pdp-related__row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.dg-pdp-related__row-eyebrow {
    margin: 0 0 4px;
    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-xxs);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-muted);
}

.dg-pdp-related__row-name {
    margin: 0 0 var(--dg-space-xs);
    font-family: var(--dg-font-serif);
    font-size: var(--dg-text-md);
    font-weight: var(--dg-weight-regular);
    line-height: var(--dg-leading-snug);
    color: var(--dg-ink);
    /* 2-line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 480px) {
    .dg-pdp-related__row-name {
        font-size: var(--dg-text-sm);
    }
}

.dg-pdp-related__row-price {
    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-sm);
    font-weight: var(--dg-weight-medium);
    color: var(--dg-ink);
}

/* Override core .price-box chrome inside our row */
.dg-pdp-related__row-price .price-box,
.dg-pdp-related__row-price .price-box .price,
.dg-pdp-related__row-price .price {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    background: transparent;
}

.dg-pdp-related__row-price .label {
    display: none;
}

.dg-pdp-related__row-arrow {
    flex: 0 0 20px;
    color: var(--dg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        color var(--dg-duration-fast) var(--dg-ease),
        transform var(--dg-duration-fast) var(--dg-ease);
}

.dg-pdp-related__row:hover .dg-pdp-related__row-arrow {
    color: var(--dg-ink);
    transform: translateX(2px);
}

/* ────────────────────────────────────────────────────────────
   END _40_pdp.css
   ──────────────────────────────────────────────────────────── */


/* -- DG-FABRICCARE v1.0 - PDP fabric story -> FAQ care anchor -- */
.dg-pdp-fabric-story__care {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-top: var(--dg-space-md);
    padding-top: var(--dg-space-md);
    border-top: 0.5px solid rgba(26, 26, 26, 0.10);
    font-size: var(--dg-text-xs);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-gold);
    text-decoration: none;
    transition: color 0.2s ease;
}
.dg-pdp-fabric-story__care:hover { color: var(--dg-gold-soft); }
.dg-pdp-fabric-story__care-arrow { font-size: 1.15em; line-height: 1; }

/* -- DG-STYLEPAT v1.0 - PDP weave & pattern block -- */
.dg-pdp-style {  background: var(--dg-cream); padding: var(--dg-space-lg); }
.dg-pdp-style__eyebrow {
    font-size: var(--dg-text-xs);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-gold);
    font-weight: var(--dg-weight-medium);
    margin: 0 0 var(--dg-space-md);
}
.dg-pdp-style__item {
    display: flex;
    gap: var(--dg-space-md);
    align-items: flex-start;
    padding: var(--dg-space-md) 0;
    border-top: 0.5px solid rgba(26, 26, 26, 0.08);
}
.dg-pdp-style__item:first-of-type { border-top: 0; padding-top: 0; }
.dg-pdp-style__sw {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border: 0.5px solid rgba(26, 26, 26, 0.18);
    background: #fff;
    color: var(--dg-ink);
    display: flex; align-items: center; justify-content: center;
}
.dg-pdp-style__sw svg { width: 30px; height: 30px; display: block; }
.dg-pdp-style__name {
    font-size: var(--dg-text-sm);
    color: var(--dg-ink);
    font-weight: var(--dg-weight-semibold);
    margin: 0 0 3px;
    letter-spacing: 0.02em;
}
.dg-pdp-style__desc {
    font-size: var(--dg-text-sm);
    line-height: 1.6;
    color: var(--dg-ink-soft);
    margin: 0;
}
.dg-pdp-style__mood {
    font-size: var(--dg-text-xs);
    letter-spacing: var(--dg-track-wide);
    text-transform: uppercase;
    color: var(--dg-gold);
    margin: 5px 0 0;
}
.dg-pdp-style__finish {
    display: flex; align-items: center; gap: 10px;
    margin-top: var(--dg-space-md);
    padding-top: var(--dg-space-md);
    border-top: 0.5px solid rgba(26, 26, 26, 0.08);
}
.dg-pdp-style__sw--sm { width: 34px; height: 34px; }
.dg-pdp-style__sw--sm svg { width: 22px; height: 22px; }
.dg-pdp-style__finish-txt {
    font-size: var(--dg-text-sm);
    line-height: 1.55;
    color: var(--dg-ink-soft);
}
.dg-pdp-style__finish-txt strong { color: var(--dg-ink); font-weight: var(--dg-weight-semibold); }

/* -- DG-BRANDLINK v1.0 - eyebrow brand link -- */
.dg-pdp-eyebrow__brand {
    color: var(--dg-gold);
    text-decoration: none;
    font-weight: var(--dg-weight-semibold);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}
.dg-pdp-eyebrow__brand:hover { border-bottom-color: var(--dg-gold); }

/* -- DG-REFBADGE v1.3 - reference note on the -3D thumbnail -- */
.dg-pdp-thumbs__item { position: relative; }
.dg-pdp-thumbs__refnote {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 5px;
    background: rgba(250, 250, 247, 0.94);
    border-top: 2px solid var(--dg-gold);
    color: var(--dg-ink-soft);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
}
.dg-pdp-thumbs__refnote svg { flex: 0 0 auto; color: var(--dg-gold); }

/* -- DG-JACKETNOTE v1.0 - jacket kicker + matching-trousers note (suits) -- */
.dg-pdp-kicker {
    font-family: var(--dg-font-serif, Georgia, serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.4;
    color: var(--dg-muted);
    margin: 0 0 10px;
}
.dg-pdp-jacketnote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 10px 13px;
    background: #f6f4ee;
    border-left: 2px solid var(--dg-gold);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--dg-ink-soft);
}
.dg-pdp-jacketnote svg { flex: 0 0 auto; color: var(--dg-gold); margin-top: 1px; }
.dg-pdp-jacketnote a { color: var(--dg-gold); text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }

/* -- DG-JACKETNOTE v2.0 - hide the matching-piece note on single-column (mobile) -- */
@media (max-width: 1024px) {
  /*  .dg-pdp-jacketnote { display: none; }*/
}

/* -- DG-GARMENTBADGE v1.0 - garment-type marker, top-left of main image -- */
.dg-pdp-main-image__garment {
    position: absolute;
    top: var(--dg-space-md);
    left: var(--dg-space-md);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(26, 26, 26, 0.14);
    padding: 5px 9px 5px 7px;
    pointer-events: none;
}
.dg-pdp-main-image__garment .dg-pdp-garment-ico { color: var(--dg-gold); flex: 0 0 auto; display: block; }
.dg-pdp-main-image__garment-txt {
    font-size: var(--dg-text-xxs);
    font-weight: var(--dg-weight-medium);
    letter-spacing: var(--dg-track-widest);
    text-transform: uppercase;
    color: var(--dg-ink);
}


/* ===== DGRIE-LINING v5 — picker + lightbox + 5col category + black-select ===== */
.dg-pdp-customize__section.dg-lining-fieldhost { display: none; }
.dg-lining-grid { margin: 12px 0 4px; }
.dg-lining-panel { display: none; }
.dg-lining-panel.is-active { display: block; }
.dg-lining-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 14px;
}
.dg-lining-tile {
    box-sizing: border-box;
    width: 100%; margin: 0; padding: 5px;
    background: #fff;
    border: 2px solid rgba(26, 26, 26, .12);
    border-radius: 0;
    cursor: pointer; display: block;
    -webkit-appearance: none; appearance: none;
}
.dg-lining-tile__imgwrap { position: relative; display: block; }
.dg-lining-thumb {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    display: block; border-radius: 0; background: #f2f1ec;
}
.dg-lining-zoom {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(26, 26, 26, .55); color: #fff;
    border-radius: 0; cursor: pointer;
}
.dg-lining-zoom:hover { background: rgba(26, 26, 26, .85); }
.dg-lining-tile__code {
    display: block; font-size: 10px; line-height: 1.3;
    color: #8a8a85; margin-top: 5px; text-align: center; word-break: break-all;
}
.dg-lining-tile.is-selected { border-color: var(--dg-ink, #1a1a1a); border-radius: 0; }
@media (max-width: 1024px) {
    .dg-lining-tiles { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; }
}
/* lightbox */
.dg-lining-lightbox {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 99999; padding: 24px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .82);
}
.dg-lining-lightbox[hidden] { display: none; }
.dg-lining-lightbox__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.dg-lining-lightbox__fig { position: relative; margin: 0; max-width: 92vw; text-align: center; }
.dg-lining-lightbox__img {
    max-width: 92vw; max-height: 84vh; display: block; margin: 0 auto;
    background: #fff; border-radius: 0;
}
.dg-lining-lightbox__close {
    position: absolute; top: -42px; right: -4px;
    background: none; border: none; color: #fff;
    font-size: 34px; line-height: 1; cursor: pointer; padding: 0 8px;
}
.dg-lining-lightbox__cap { color: #fff; margin-top: 12px; font-size: 13px; letter-spacing: .04em; }

/* Suit Lining: 5 category cards in ONE row (no Cupro orphan). Scoped via
   JS-added .dg-lining-host so other swatch options keep their 4-col grid. */
.dg-pdp-customize__section.dg-lining-host .dg-pdp-customize__section-body ul[id^="ul_swatch_"] {
    grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1024px) {
    .dg-pdp-customize__section.dg-lining-host .dg-pdp-customize__section-body ul[id^="ul_swatch_"] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* ===== /DGRIE-LINING v5 ===== */