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

   Sets the baseline: a modern reset, body typography, link
   styling, the page wrapper layout, and a few utility classes
   used by the page templates.
   ============================================================ */


/* ── Modern reset ──────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    background: var(--dg-bg);
    color: var(--dg-text);
    font-family: var(--dg-font-sans);
    font-size: var(--dg-text-base);
    font-weight: var(--dg-weight-regular);
    line-height: var(--dg-leading-normal);
}

/* Remove default margin from common block elements; we'll
   add our own where appropriate. */
h1, h2, h3, h4, h5, h6,
p, blockquote, dl, dd, ol, ul,
figure, hr, fieldset, legend {
    margin: 0;
}

ul, ol {
    padding-left: 0;
    list-style-position: inside;
}

img, video, svg, picture {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}

input, select, textarea {
    font: inherit;
    color: inherit;
}
.validation-advice {
color: crimson;

}
/* ── Typography defaults ───────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--dg-font-serif);
    font-weight: var(--dg-weight-regular);
    color: var(--dg-ink);
    line-height: var(--dg-leading-tight);
    letter-spacing: var(--dg-track-tight);
}

h1 { font-size: var(--dg-text-3xl); }
h2 { font-size: var(--dg-text-2xl); }
h3 { font-size: var(--dg-text-xl);  }
h4 { font-size: var(--dg-text-lg);  }
h5 { font-size: var(--dg-text-md);  font-family: var(--dg-font-sans); }
h6 { font-size: var(--dg-text-base);font-family: var(--dg-font-sans); }

p {
    line-height: var(--dg-leading-normal);
    color: var(--dg-ink-soft);
}

p + p { margin-top: var(--dg-space-md); }

small { font-size: var(--dg-text-sm); }


/* ── Links ─────────────────────────────────────────────────── */

a {
    color: var(--dg-link);
    text-decoration: none;
    transition: color var(--dg-duration-fast) var(--dg-ease);
}

a:hover,
a:focus {
    color: var(--dg-link-hover);
    text-decoration: none;
}

a:focus-visible {
    outline: 2px solid var(--dg-gold);
    outline-offset: 2px;
}


/* ── Page skeleton ─────────────────────────────────────────── */

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page__main {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: var(--dg-space-2xl) var(--dg-gutter);
}

.page__header,
.page__footer {
    width: 100%;
}

/* 2-column variant */
.page--2col .page__container {
    width: 100%;
    max-width: var(--dg-container-max);
    margin: 0 auto;
    padding: var(--dg-space-2xl) var(--dg-gutter);
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--dg-space-2xl);
    align-items: start;
}

.page--2col .page__main {
    padding: 0;          /* container already pads */
    max-width: none;
    margin: 0;
}

.page__sidebar {
    font-size: var(--dg-text-sm);
}

@media (max-width: 768px) {
    .page--2col .page__container {
        grid-template-columns: 1fr;
        gap: var(--dg-space-xl);
        padding: var(--dg-space-xl) var(--dg-gutter-mobile);
    }
    .page__main {
        padding: var(--dg-space-xl) var(--dg-gutter-mobile);
    }
}


/* ── Skip link (accessibility) ─────────────────────────────── */

.dg-skip-link {
    position: absolute;
    top: -40px;
    left: var(--dg-space-md);
    padding: var(--dg-space-xs) var(--dg-space-md);
    background: var(--dg-ink);
    color: var(--dg-paper);
    font-size: var(--dg-text-sm);
    z-index: var(--dg-z-toast);
    transition: top var(--dg-duration-fast) var(--dg-ease);
}

.dg-skip-link:focus {
    top: var(--dg-space-md);
    color: var(--dg-paper);
}


/* ── Visually hidden (screen-reader only) ──────────────────── */

.dg-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}


/* ── Selection styling ─────────────────────────────────────── */

::selection {
    background: var(--dg-ink);
    color: var(--dg-paper);
}


/* ── Horizontal rule ───────────────────────────────────────── */

hr {
    border: 0;
    border-top: 1px solid var(--dg-line);
    margin: var(--dg-space-xl) 0;
}


/* ── Focus ring (consistent across interactive elements) ──── */

:where(button, [role="button"], input, select, textarea):focus-visible {
    outline: 2px solid var(--dg-gold);
    outline-offset: 2px;
}


/* =====================================================================
   MAGENTO MESSAGES (error / success / notice flashes) — May 14, 2026
   ---------------------------------------------------------------------
   Magento renders flash messages as `<ul class="messages">` containing
   `<li class="error-msg/success-msg/notice-msg">` with a nested `<ul>`
   wrapping each line. The default theme didn't include any styling for
   this structure — login/account/checkout errors rendered as raw bullet
   lists ("• Invalid login or password").

   Originally these rules lived in _40_pdp.css (added in PDP phase 5
   when the Custsize "Please select a profile first" error surfaced).
   Moved here so they apply globally — login, checkout, contact form,
   any flash message anywhere on the site.

   Specificity note: `body ul.messages > li ...` (3 elements + 1 class)
   beats any earlier reset that forces color/background on `<li>` via
   `body .reset > li`. The !important hammers are kept for the same
   reason — Magento core CSS still loads at lower priority and contains
   conflicting li rules. (_40_pdp.css keeps the duplicate copy for now
   so PDP-specific tests don't regress; safe to remove later.)
   ===================================================================== */

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-max, 960px);
    padding: 0 var(--dg-gutter, 24px)
}

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;
}


/* ═══ DG-8C 404 editorial (newdgrie no-route override) ═══ */
.dg-404{max-width:var(--dg-container-prose,720px);margin:var(--dg-space-4xl,96px) auto;padding:var(--dg-space-4xl,96px) var(--dg-gutter,24px);text-align:center;background:var(--dg-cream,#fafaf7);border:0.5px solid var(--dg-line,#e8e6e0);}
.dg-404__eyebrow{font-family:var(--dg-font-sans);font-size:var(--dg-text-xxs,11px);letter-spacing:0.26em;text-transform:uppercase;color:var(--dg-gold,#8b6f47);margin:0 0 var(--dg-space-lg,24px);}
.dg-404__title{font-family:var(--dg-font-serif);font-size:var(--dg-text-3xl,54px);font-weight:400;color:var(--dg-ink,#1a1a1a);margin:0 0 var(--dg-space-md,20px);line-height:1.1;}
.dg-404__text{font-family:var(--dg-font-sans);font-size:var(--dg-text-base,16px);color:var(--dg-muted,#6b6b6b);line-height:1.6;margin:0 auto;max-width:440px;}
.dg-404__rule{display:block;width:40px;height:1px;background:var(--dg-gold,#8b6f47);margin:var(--dg-space-2xl,36px) auto;}
.dg-404__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:var(--dg-space-2xl,40px);}
.dg-404__btn{display:inline-block;font-family:var(--dg-font-sans);font-size:var(--dg-text-xs,12px);letter-spacing:0.1em;text-transform:uppercase;padding:16px 40px;text-decoration:none;transition:background 200ms,color 200ms;}
.dg-404__btn--dark{background:var(--dg-ink,#1a1a1a);color:var(--dg-paper,#fff);}
.dg-404__btn--dark:hover{background:var(--dg-gold,#8b6f47);}
.dg-404__btn--ghost{color:var(--dg-ink,#1a1a1a);border:0.5px solid var(--dg-ink,#1a1a1a);}
.dg-404__btn--ghost:hover{background:var(--dg-ink,#1a1a1a);color:var(--dg-paper,#fff);}
.dg-404__search{border-top:0.5px solid var(--dg-line,#e8e6e0);padding-top:var(--dg-space-xl,32px);max-width:380px;margin:0 auto;}
.dg-404__search-l{font-family:var(--dg-font-sans);font-size:var(--dg-text-xxs,11px);letter-spacing:0.14em;text-transform:uppercase;color:var(--dg-faint,#999);margin:0 0 var(--dg-space-sm,14px);}
.dg-404__search-row{display:flex;gap:8px;}
.dg-404__search-input{flex:1 1 auto;min-width:0;padding:12px 14px;border:0.5px solid var(--dg-line,#e8e6e0);background:var(--dg-paper,#fff);font-family:var(--dg-font-sans);font-size:var(--dg-text-sm,13px);color:var(--dg-ink,#1a1a1a);box-sizing:border-box;}
.dg-404__search-input:focus{outline:none;border-color:var(--dg-ink,#1a1a1a);}
.dg-404__search-btn{flex:0 0 auto;padding:0 22px;background:var(--dg-ink,#1a1a1a);color:var(--dg-paper,#fff);border:0;font-family:var(--dg-font-sans);font-size:var(--dg-text-xxs,11px);letter-spacing:0.05em;text-transform:uppercase;cursor:pointer;transition:background 150ms;}
.dg-404__search-btn:hover{background:var(--dg-gold,#8b6f47);}
@media(max-width:600px){.dg-404{margin:var(--dg-space-2xl,48px) auto;padding:var(--dg-space-3xl,64px) var(--dg-gutter-mobile,16px);}.dg-404__title{font-size:var(--dg-text-2xl,38px);}.dg-404__btn{padding:14px 28px;}}


/* ═══ DG-P9 TH address autocomplete (newdgrie — checkout + account) ═══ */
.dg-thaddr{margin:16px 0 var(--dg-space-md,16px);}
.dg-thaddr__label{display:block;font-family:var(--dg-font-sans);font-size:var(--dg-text-xxs,11px);letter-spacing:0.14em;text-transform:uppercase;color:var(--dg-gold,#8b6f47);margin:0 0 var(--dg-space-xs,8px);}
.dg-thaddr__box{position:relative;}
.dg-thaddr__input{width:100%;box-sizing:border-box;padding:12px 14px;border:0.5px solid var(--dg-line,#e8e6e0);background:var(--dg-paper,#fff);font-family:var(--dg-font-sans);font-size:var(--dg-text-sm,14px);color:var(--dg-ink,#1a1a1a);}
.dg-thaddr__input:focus{outline:none;border-color:var(--dg-ink,#1a1a1a);}
.dg-thaddr__input::placeholder{color:var(--dg-faint,#999);}
.dg-thaddr__list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:1050;margin:0;padding:0;list-style:none;background:var(--dg-paper,#fff);border:0.5px solid var(--dg-line,#e8e6e0);box-shadow:0 8px 28px rgba(26,26,26,.10);max-height:320px;overflow-y:auto;}
.dg-thaddr__opt{display:flex;flex-direction:column;gap:2px;padding:10px 14px;cursor:pointer;border-bottom:0.5px solid var(--dg-line,#e8e6e0);}
.dg-thaddr__opt:last-child{border-bottom:0;}
.dg-thaddr__opt:hover,.dg-thaddr__opt.is-active{background:var(--dg-cream,#fafaf7);}
.dg-thaddr__opt-main{font-family:var(--dg-font-sans);font-size:var(--dg-text-sm,14px);color:var(--dg-ink,#1a1a1a);}
.dg-thaddr__opt-sub{font-family:var(--dg-font-sans);font-size:var(--dg-text-xxs,11px);letter-spacing:.04em;color:var(--dg-muted,#6b6b6b);}
@media(max-width:600px){.dg-thaddr__list{max-height:240px;}.dg-thaddr__input{font-size:16px;}}
/* ═══ /DG-P9 ═══ *//* ═══════════════════════════════════════════════════════════════════════
   DG-mobile-overflow-defense  v2  — Comprehensive scan-based fix
   ─────────────────────────────────────────────────────────────────────
   Scanned all 18 active CSS files. Issues found:

   1. NO `overflow-x: clip` on html/body — viewport works but any
      element wider than 100vw causes horizontal scroll
   2. NO global `img { max-width: 100% }` — fabric images full-bleed
      may exceed mobile viewport (esp. on PDP with main fabric photo)
   3. `.dg-pdp-customize__title` uses `nowrap + ellipsis` — works for
      "CUSTOMIZE YOUR WHITE 26007-6 - WOOL LINEN" but causes container
      to render at intrinsic width on mobile if parent has no constraint
   4. `.dg-pdp-modal__card` max-width 440px + body padding > 380px viewport
   5. Multiple `white-space: nowrap` on labels — fine on desktop but
      may push parent wider than viewport on narrow phones
   6. Header `.dg-brand-mini` uses `calc(100vw - 240px)` which is OK
   7. Breadcrumb has `flex-wrap: wrap` — OK but may need higher z-index

   This layer adds 6 defensive groups:
   ════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   GROUP 1 — PAGE-LEVEL CONTAINMENT
   ═══════════════════════════════════════════════════════════════════════ */

html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
    max-width: 100vw;
}

.wrapper,
.page,
.main-container,
.main,
.col-main {
    overflow-x: clip;
    max-width: 100vw;
}


/* ═══════════════════════════════════════════════════════════════════════
   GROUP 2 — MEDIA CONSTRAINTS (img, video, iframe, table, svg)
   ═══════════════════════════════════════════════════════════════════════ */

img,
video,
iframe,
svg,
embed,
object {
    max-width: 100%;
}

img,
video {
    height: auto;
}

table {
    max-width: 100%;
    table-layout: auto;
}


/* ═══════════════════════════════════════════════════════════════════════
   GROUP 3 — TEXT WRAPPING (headings, long product names, URLs)
   ═══════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6,
.dg-pdp__title,
.dg-listing__title,
.dg-cms__title,
.dg-faq__title,
.dg-home__title,
.dg-cms__hero h1,
.dg-cms__hero h2 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* Long codes (SKUs, product IDs) should also break */
code,
pre {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════
   GROUP 4 — FLEX/GRID CHILD MIN-WIDTH RESET
   Default `min-width: auto` on flex/grid items = intrinsic content
   width. If that's wider than container, overflow ensues.
   Setting `min-width: 0` lets them shrink properly.
   ═══════════════════════════════════════════════════════════════════════ */

.dg-nav-row,
.dg-nav-row__inner,
.dg-nav-row__right,
.dg-nav-row__left,
.dg-nav-row__center,
.dg-pdp__layout,
.dg-pdp__grid,
.dg-pdp__info,
.dg-pdp__gallery,
.dg-pdp-customize__header,
.dg-pdp-customize__section-toggle,
.dg-pdp-customize__section-body,
.dg-listing__row,
.dg-listing__head-inner,
.dg-cms__channels,
.dg-cms__channel,
.dg-cms__studio,
.dg-cms__maps,
.dg-faq__body,
.dg-breadcrumbs,
.dg-breadcrumbs__list {
    min-width: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   GROUP 5 — MODAL/OVERLAY CONSTRAINTS
   PDP modal cards use max-width: 440px + parent padding may exceed
   mobile viewport width. Force them to respect container.
   ═══════════════════════════════════════════════════════════════════════ */

.dg-pdp-modal__card,
.dg-pdp-share-modal__card,
.dg-pdp-customize__modal,
.dg-pdp-lightbox__stage {
    max-width: calc(100vw - 32px);
    width: 100%;
}

/* Modal backdrop should never overflow */
.dg-pdp-modal,
.dg-pdp-share-modal,
.dg-pdp-lightbox {
    max-width: 100vw;
    overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════════════
   GROUP 6 — MOBILE-SPECIFIC FIXES
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* PDP customize title — let it wrap on mobile (override desktop nowrap) */
    .dg-pdp-customize__title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.3;
    }

    /* PDP customize header — stack title + counter when title is long */
    .dg-pdp-customize__header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* Cart button — prevent Thai text overflow */
    .dg-pdp-cta__add,
    .add-to-cart-buttons button,
    button[type="submit"] {
        max-width: 100%;
        word-wrap: break-word;
        white-space: normal;
        line-height: 1.3;
    }

    /* Modal card padding tighter on mobile */
    .dg-pdp-modal__card {
        max-width: calc(100vw - 24px);
    }


    /* Customize section toggle (numbered accordion) */
    .dg-pdp-customize__section-toggle {
        max-width: 100%;
    }
    .dg-pdp-customize__section-toggle > * {
        min-width: 0;
        max-width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   GROUP 7 — NARROW MOBILE (< 380px iPhone SE, small Androids)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {

    /* Modal cards even tighter */
    .dg-pdp-modal__card,
    .dg-pdp-share-modal__card {
        max-width: calc(100vw - 16px);
    }


    /* PDP main image — guarantee it fits */
    .dg-pdp-main-image,
    .dg-pdp-main-image__img {
        max-width: 100%;
        max-height: 100vw;  /* square crop at max */
    }
}
/* ═══════════════════════════════════════════════════════════════════════
   DG-mobile-polish-v3 — Targeted fixes from user screenshots
   ─────────────────────────────────────────────────────────────────────
   Issues:
   1. Header right cluster too spread out on mobile
      → tighten gap to bring compare/wishlist/cart icons together
   2. "เพิ่มไปยังรถเข็น" Thai text wraps awkwardly in cart button
      → allow proper wrap with line-height + smaller font on narrow
   3. "SIGN IN" button overflows its container on mobile
      → smaller padding + smaller font on mobile
   4. Breadcrumb arrows align poorly on mobile (Image 4)
      → adjust spacing + line-height
   5. Mobile menu TH baseline below EN (alignment off)
      → flex align-items: baseline + same line-height
   6. Hover effects (padding-left shift, translateX) annoying on mobile
      → disable transforms on touch devices
   ════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   ISSUE 1 — HEADER RIGHT CLUSTER (compare/wishlist/cart spacing)
   Default 18px gap × 4 icons = too spread on mobile
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .dg-nav-row__right {
        gap: 8px !important;
    }

    /* Tighter icon button on mobile — was 36-44px */
    .dg-nav-row__right .dg-icon-btn {
        padding: 6px;
    }
}

@media (max-width: 480px) {
    .dg-nav-row__right {
        gap: 4px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   ISSUE 2 — PDP CTA "เพิ่มไปยังรถเข็น" wraps awkwardly
   Long Thai/EN text needs proper line wrapping
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .dg-pdp-cta__add {
        padding: 8px 12px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        letter-spacing: 0.08em !important;
        white-space: normal !important;
        text-align: center;
        word-break: keep-all;   /* Don't break inside Thai words */
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Inner label span should not have its own width */
    .dg-pdp-cta__add-label {
        white-space: normal !important;
        word-break: keep-all;
        line-height: 1.3;
    }
}

/* Narrow phones — even tighter */
@media (max-width: 380px) {
    .dg-pdp-cta__add {
        font-size: 11px !important;
        padding: 8px 8px !important;
        letter-spacing: 0.04em !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   ISSUE 3 — SIZE PROFILE "SIGN IN" button overflow
   Default padding 10px + var(--dg-space-md) too wide on narrow phones
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .dg-pdp-size-profile__action {
        padding: 8px 14px !important;
        font-size: 11px !important;
        letter-spacing: 0.06em !important;
        white-space: nowrap;
        min-width: 0;
        max-width: 100%;
    }

    /* Outline variant — also adjust to maintain border */
    .dg-pdp-size-profile__action--outline {
        padding: 7px 13px !important;
    }
}

@media (max-width: 380px) {
    .dg-pdp-size-profile__action {
        padding: 8px 10px !important;
        font-size: 10px !important;
    }
}




/* ═══════════════════════════════════════════════════════════════════════
   ISSUE 5 — Mobile menu language switch alignment
   "TH" sits below baseline of "EN" because line-height differs
   ═══════════════════════════════════════════════════════════════════════ */

.dg-drawer__lang .dg-langswitch {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px;
    line-height: 1;
}

.dg-drawer__lang .dg-langswitch__item {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    font-size: 12px !important;
    padding: 0;
    margin: 0;
}

/* The <span> for current item should match anchor baseline */
.dg-drawer__lang .dg-langswitch__item span,
.dg-drawer__lang .dg-langswitch__item a {
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle;
}


/* ═══════════════════════════════════════════════════════════════════════
   ISSUE 6 — DISABLE HOVER TRANSFORMS ON TOUCH DEVICES
   These animations only make sense for mouse — annoying on phones
   ═══════════════════════════════════════════════════════════════════════ */

@media (hover: none), (pointer: coarse) {

    /* Drawer nav links — no padding-left shift on tap */
    .dg-drawer__nav .dg-nav__link:hover,
    .dg-drawer__nav .dg-nav__link:focus,
    .dg-drawer__nav .dg-nav__link:active {
        padding-left: 0 !important;
        transform: none !important;
    }

    /* Drawer util arrows — no translate on tap */
    .dg-drawer__util > a:hover,
    .dg-drawer__util > a:focus,
    .dg-drawer__util > a:active {
        transform: none !important;
    }

    .dg-drawer__util > a:hover::after,
    .dg-drawer__util > a:focus::after,
    .dg-drawer__util > a:active::after {
        transform: none !important;
        opacity: 1 !important;
    }

    /* PDP CTA add button — no translateY active */
    .dg-pdp-cta__add:active:not(:disabled) {
        transform: none !important;
    }

    /* Generic: remove all hover transforms on links */
    a:hover,
    button:hover {
       
    }
}



/* ═══════════════════════════════════════════════════════════════════════
   DG-mobile-polish-v12 — Bag icon + badge offset
   ─────────────────────────────────────────────────────────────────────
   v11 had cart bag icon with badge sitting at top:4 right:4
   → badge overlapped the handle loop on top of the bag
   
   v12: Keep elegant bag handle SVG (suits luxury tailoring brand)
   but push badge outside the icon box (top: -4, right: -4)
   so it floats off the corner — handle stays clear, badge crisp.
   
   Also: restore breadcrumb breathing room at 769-1024 (v11 broke it)
   ════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   PART 0 — Hide mobile-only search (kept)
   ═══════════════════════════════════════════════════════════════════════ */

.dg-nav-row__right .dg-icon-btn--mobile-only {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   PART 1 — Desktop-shrunk (≤1024px + pointer:fine)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) and (pointer: fine) {

    .dg-nav-row__right .dg-icon-btn:not(.dg-icon-btn--mobile-only),
    .dg-nav-row__right .dg-icon-btn--compare,
    .dg-nav-row__right .dg-icon-btn--wishlist {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        padding: 0 !important;
    }

    .dg-nav-row__right .dg-icon-btn svg {
        width: 22px !important;
        height: 22px !important;
    }

    .dg-nav-row__right .dg-icon-btn--compare .dg-icon-btn__count {
        display: none !important;
    }

    .dg-nav-row__right {
        gap: 0 !important;
        margin-right: 0 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   PART 2 — Touch devices / Phone
   Bag icon (current handle SVG) + badge offset top-right (floats out)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px),
       (pointer: coarse) {

    .dg-nav-row__right .dg-icon-btn:not(.dg-icon-btn--mobile-only),
    .dg-nav-row__right .dg-icon-btn--compare,
    .dg-nav-row__right .dg-icon-btn--wishlist,
    .dg-nav-row__right .dg-link-utility--bag {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    .dg-nav-row__right .dg-icon-btn svg {
        width: 22px !important;
        height: 22px !important;
    }

    .dg-nav-row__right .dg-icon-btn--compare .dg-icon-btn__count {
        display: none !important;
    }

    .dg-nav-row__right .dg-link-utility--bag > span:not(.dg-bag-count) {
        display: none !important;
    }

    /* ─── BAG ICON — keep elegant handle SVG ─── */
    .dg-nav-row__right .dg-link-utility--bag::before {
        content: "" !important;
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 7h12l-1 13H7L6 7z'/><path d='M9 7V5a3 3 0 0 1 6 0v2'/></svg>") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }

    /* ─── Dark badge — floats outside top-right corner ─── */
    .dg-nav-row__right .dg-link-utility--bag .dg-bag-count {
        position: absolute !important;
        top: -5px !important;
        right: -5px !important;       /* moved further right */
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        border-radius: 8px !important;
        background: var(--dg-ink, #1a1a1a) !important;
        color: var(--dg-paper, #fff) !important;
        font-family: var(--dg-font-sans) !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        line-height: 16px !important;
        text-align: center !important;
        letter-spacing: 0 !important;
        border: 2px solid var(--dg-cream, #fafaf7) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: content-box !important;
        z-index: 2 !important;
    }

    /* Scrolled state — invert badge colors */
    body.is-scrolled .dg-nav-row__right .dg-link-utility--bag::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 7h12l-1 13H7L6 7z'/><path d='M9 7V5a3 3 0 0 1 6 0v2'/></svg>") !important;
    }

    body.is-scrolled .dg-nav-row__right .dg-link-utility--bag .dg-bag-count {
        background: var(--dg-paper, #fff) !important;
        color: var(--dg-ink, #1a1a1a) !important;
        border-color: var(--dg-ink, #1a1a1a) !important;
    }

    .dg-nav-row__right {
        gap: 0 !important;
        margin-right: 0 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   PART 3 — Drawer brand center (kept)
   ═══════════════════════════════════════════════════════════════════════ */

.dg-drawer__head {
    position: relative;
}

.dg-drawer__brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}





/* ═══════════════════════════════════════════════════════════════════════
   PART 5 — dg-pdp wrapper margin only (don't kill col-main padding)
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px),
       (pointer: coarse) and (max-width: 1400px) {

    .dg-pdp {
        margin-top: 0 !important;
    }
}


/* ─── iPhone ≤480 — ultra-tight icon cluster ─── */
@media (max-width: 480px),
       (pointer: coarse) and (max-width: 600px) {

    /* Reduce icon button to bring them closer */
    .dg-nav-row__right .dg-icon-btn:not(.dg-icon-btn--mobile-only),
    .dg-nav-row__right .dg-icon-btn--compare,
    .dg-nav-row__right .dg-icon-btn--wishlist,
    .dg-nav-row__right .dg-link-utility--bag {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    /* SVG inside */
    .dg-nav-row__right .dg-icon-btn svg,
    .dg-nav-row__right .dg-link-utility--bag::before {
        width: 20px !important;
        height: 20px !important;
    }

    /* Zero gap (already in v12 but force again) */
    .dg-nav-row__right {
        gap: 0 !important;
        margin-right: 0 !important;
    }

    /* Pull right edge tighter */
    .dg-nav-row__inner {
        padding-right: 8px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   DG-Breadcrumbs-v2 — Mobile 4 Style (Path + Divider + Product Name)
   ─────────────────────────────────────────────────────────────────────
   Mobile (≤768px):
     HOME / CUSTOM MADE / PANTS
     ────────────────────────────────
     Grey 26007-3 - Wool Linen Pants

   Desktop (≥769px):
     HOME / CUSTOM MADE / PANTS / GREY 26007-3 - WOOL LINEN PANTS
   ═══════════════════════════════════════════════════════════════════════ */

.dg-breadcrumbs {
    font-family: var(--dg-font-sans);
    padding: var(--dg-space-md, 16px) var(--dg-gutter, 24px);
}

.dg-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px 6px;
}

.dg-breadcrumbs__item {
    font-size: var(--dg-text-xxs, 11px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dg-muted, #6b6b6b);
    display: inline-flex;
    align-items: center;
    line-height: 1.5;
}

.dg-breadcrumbs__item + .dg-breadcrumbs__item::before {
    content: "/";
    color: var(--dg-line, #b4b2a9);
    margin-right: 6px;
    font-weight: 300;
}

.dg-breadcrumbs__item a {
    color: var(--dg-muted, #6b6b6b);
    text-decoration: none;
    transition: color var(--dg-duration-fast, 200ms) var(--dg-ease, ease);
    padding: 2px 0;
}

.dg-breadcrumbs__item a:hover,
.dg-breadcrumbs__item a:focus {
    color: var(--dg-ink, #1a1a1a);
}

/* ─── Mobile: ขึ้นบรรทัดใหม่พร้อมเส้นคั่น ─── */
@media (max-width: 768px) {
    .dg-breadcrumbs {
        padding-left: var(--dg-gutter-mobile, 16px);
        padding-right: var(--dg-gutter-mobile, 16px);
        padding-top: 16px;
        padding-bottom: 0;
    }

    .dg-breadcrumbs__list {
        gap: 4px 6px;
    }

    .dg-breadcrumbs__item.is-last {
        flex-basis: 100%;
        margin-top: 10px;
        padding-top: 10px;
        position: relative;
        text-transform: none;
        letter-spacing: 0;
    }

    /* ซ่อน / เปลี่ยนเป็นเส้นคั่นเต็มความกว้าง */
    .dg-breadcrumbs__item.is-last::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0.5px;
        background: linear-gradient(to right, #b4b2a9, transparent);
        margin: 0;
    }

    .dg-breadcrumbs__item.is-last span {
        color: var(--dg-ink, #1a1a1a);
        font-weight: 500;
        font-size: var(--dg-text-sm, 14px);
        line-height: 1.4;
        display: block;
    }
}

/* ─── Narrow phone ≤380px ─── */
@media (max-width: 380px) {
    .dg-breadcrumbs__item {
        font-size: 10px;
        letter-spacing: 0.06em;
    }

    .dg-breadcrumbs__item.is-last span {
        font-size: 13px;
    }
}