/*
 Theme Name:   Vouge Child
 Theme URI:    https://vouge.wpengine.com/
 Description:  Vouge Child Theme
 Author:       the WeDesignTech team
 Author URI:   https://wedesignthemes.com/
 Template:     vouge
 Version:      1.9.11
 Text Domain:  vouge-child
*/

/* ===== Diamond Talk brand type — override parent Vouge (Instrument Serif / Outfit) =====
   NOTE 2026-08-11: this @import and the two rules under it are DEAD. Live computed fonts
   are Instrument Serif / Britti Sans, because the global !important stack in
   functions.php outranks them. Left in place only because removing it is a separate,
   testable change — do NOT copy this pattern, and never declare font-family in the
   WooCommerce block at the bottom of this file. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.wdt-heading-title,
.entry-title {
  font-family: "Cormorant Garamond", Georgia, serif !important;
}

body,
p, li, a, span, div,
button, input, select, textarea,
.elementor-widget-text-editor,
.elementor-button,
.woocommerce {
  font-family: "Manrope", Arial, sans-serif !important;
}

/* keep icon fonts intact */
[class^="wdt-icon"], [class*=" wdt-icon"],
[class^="fa-"], [class*=" fa-"],
.elementor-icon i, .elementor-icon svg {
  font-family: inherit !important;
}

/* ==== DT SECTION CSS — START ====================================================
   Custom-coded homepage sections (.dt-*) keep their CSS here instead of inside the
   Elementor HTML widget. Reason: the widget payload was ~85% unchanging stylesheet,
   so every copy tweak resent the whole thing. Markup lives in the widget, styling
   lives here, edits are surgical.
   Local source of truth: design-draft/homepage-visual/elementor-custom-html/*.html
   (those files keep their <style> block so they stay previewable offline — strip it
   at deploy time). Section→widget IDs: design-draft/homepage-visual/ELEMENTOR-ID-MAP.md
   ================================================================================ */

/* --- .dt-arrival-overview — brand philosophy pane (page 2600, widget 3e92b24) --- */
.dt-arrival-overview,
.dt-arrival-overview * { box-sizing: border-box; }

.elementor-widget-html:has(.dt-arrival-overview),
.elementor-widget-html:has(.dt-arrival-overview) > .elementor-widget-container {
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dt-arrival-overview {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: #1d1919;
}

.dt-ao-grid { display: grid; grid-template-columns: .92fr 1.08fr; }
.dt-ao-image { position: relative; align-self: stretch; min-height: clamp(360px, 29vw, 452px); overflow: hidden; }
.dt-ao-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform .8s cubic-bezier(.2,.7,.2,1); }

.dt-ao-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(32px, 3.4vw, 58px);
  background: #FCEFF1;
}

.dt-ao-copy h2 {
  max-width: 9.5ch;
  margin: 0;
  font-size: clamp(42px, 3.6vw, 62px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #1d1919;
}

.dt-ao-copy p { max-width: 42ch; margin: 20px 0 0; font-size: 15px; font-weight: 300; line-height: 1.6; color: #463c3c; }
.dt-ao-copy p + p { margin-top: 14px; }

.dt-arrival-overview.dt-ao-ready [data-dt-ao-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.dt-arrival-overview .dt-ao-image[data-dt-ao-reveal] { transform: none; }
.dt-arrival-overview .dt-ao-image.dt-ao-in img { transform: scale(1); }
.dt-arrival-overview.dt-ao-ready [data-dt-ao-reveal].dt-ao-in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .dt-ao-grid { grid-template-columns: 1fr; }
  .dt-ao-image { min-height: clamp(300px, 52vw, 420px); }
  .dt-ao-copy { padding: 40px 28px 44px; }
  .dt-ao-copy h2 { max-width: 14ch; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-ao-image img, .dt-arrival-overview [data-dt-ao-reveal] { transition: none; }
  .dt-arrival-overview [data-dt-ao-reveal] { opacity: 1; transform: none; }
  .dt-arrival-overview .dt-ao-image img { transform: none; }
}
/* ==== DT SECTION CSS — END ==== */

/* ==== DT SINGLE POST — START ======================================================
   Guides / articles (post type `post`). Same deal as the WooCommerce pages: a classic
   theme template with no Elementor widget to paste into, so the house style reaches it
   from here. Scoped to `.single-post` throughout.

   The title, date and hero are NOT theme output — the Vouge single template renders an
   empty `.post-header`. mu-plugin `dt-woo-header.php` prepends `.dt-post__head` and
   `.dt-post__hero`, and that same file pins the sticky header. The theme's own thumb and
   byline are hidden below so the article header has ONE source.

   AFTER EDITING, BUMP `Version:` IN THE HEADER ABOVE — see the note in the WOO block.
   ================================================================================== */
.single-post {
  --dt-ink: #1D1919;
  --dt-body: #403838;
  --dt-line: #E4DCDC;
  --dt-mute: #6B6060;
  --dt-blush: #F8E8E9;
  --dt-header-h: 90px;
}

/* The page is now rendered by Elementor template 4779 (see mu-plugin dt-single-post.php),
   so the theme's article markup is gone. What remains in the way is the theme's own
   `.container`: max-width 1460 + 30px gutters, which capped the banner at 1365 and stopped
   it going full-bleed. `:has(> .elementor)` pins this to the container wrapping the
   template only — a bare `.single-post .container` would also strip the header and footer
   chrome of their gutters. */
.single-post .container:has(> .elementor) {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.single-post :is(#secondary, .secondary-sidebar) { display: none !important; }
.single-post :is(.entry-thumb, .single-preview-img, .post-date-author-group) { display: none !important; }
.single-post .commententries:empty { display: none !important; }

/* ---- article header: lead + meta/share bar, full width of the 1400 box ---- */
.single-post .dt-post__head {
  width: 100%;
  margin: 0 0 clamp(36px, 3.6vw, 48px);
}
.single-post .dt-post__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 0;
  border: 0;
}
.single-post .dt-post__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  font-size: 16px !important;
  letter-spacing: .02em;
  color: var(--dt-mute) !important;
}
.single-post .dt-post__dot {
  width: 3px; height: 3px;
  background: var(--dt-mute);
  display: inline-block;
}

/* Share row — inline by default (same arrangement as the PDP). */
.single-post .dt-post__sharewrap { display: contents; }
.single-post .dt-post__share {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.single-post .dt-post__sharelabel {
  font-size: 16px;
  letter-spacing: .02em;
  color: var(--dt-mute);
}

/* Wide screens: a vertical rail pinned to the left of the reading column.
   STICKY inside the content block, not fixed to the viewport — the wrapper is absolutely
   positioned against the post-content container, so the rail travels with the article and
   stops at its top and bottom edges instead of floating over the banner or the footer.
   Gated to 1600 because at 1440 the 1400 box leaves only ~12px of gutter and the rail
   would sit on the text. */
/* position:sticky is silently dead inside ANY ancestor with overflow != visible.
   Three offenders here: .inner-wrapper (overflow:hidden) plus html and body, which the
   theme gives overflow-x:hidden — that turns body into a scrollport, so a sticky child
   resolves against a box that never scrolls and simply freezes.
   NOTE the selectors: `.single-post` IS the body class, so `.single-post body` and
   `.single-post html` match NOTHING. They have to be written as `body.single-post` and
   `html:has(body.single-post)`. Getting this wrong is why the first fix did nothing. */
html:has(body.single-post),
body.single-post,
.single-post :is(.wrapper, .inner-wrapper, .container, #primary) {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

@media (min-width: 1600px) {
  .single-post .elementor-widget-theme-post-content > .elementor-widget-container { position: relative; }
  .single-post .dt-post__sharewrap {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -72px;
    width: 40px;
    pointer-events: none;
  }
  .single-post .dt-post__share {
    position: sticky;
    /* 100px = half the rail's height, so it reads as vertically centred */
    top: calc(50vh - 100px);
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0;
    pointer-events: auto;
  }
  /* "Share" reads badly stacked in a vertical rail; every icon keeps its aria-label,
     so nothing is lost for screen readers */
  .single-post .dt-post__sharelabel { display: none; }
  .single-post .dt-post__share .dt-post__shareicon { background: #FFFFFF !important; }
}
.single-post .dt-post__shareicon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  padding: 0 !important;
  line-height: 1 !important;
  color: var(--dt-ink) !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--dt-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration-line: none !important;
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease;
}
/* Copied verbatim from the PDP (.dt-pdp__shareicon i). The child theme's
   `[class*=" fa-"] { font-family: inherit !important }` rule otherwise wins and the glyph
   computes as Britti Sans, rendering every icon as an empty box. The PDP already declares
   the font back; this page needs the same line. */
.single-post .dt-post__shareicon i {
  font-family: FontAwesome !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  display: block;
  font-size: 15px !important;
  width: 16px;
  text-align: center;
}
.single-post .dt-post__shareicon:hover {
  border-color: var(--dt-ink) !important;
  background: var(--dt-blush) !important;
}
.single-post .dt-post__shareicon.is-copied { border-color: var(--dt-ink) !important; background: var(--dt-blush) !important; }

/* ---- body ----
   HOUSE TYPE SCALE, no exceptions: h2 50/32, lead 24/20, body 16, h3 20/18. Title uses
   the documented 72/40 display-opener size. Copy keeps a max-width in ch so lines stay
   readable inside the 1400 box, but every block is left-aligned to the box edge — the
   page is a normal 1400 section, not a centred editorial column. */
.single-post .single-entry-body > * { width: 100%; }
.single-post .single-entry-body p {
  max-width: 78ch;
  margin: 0 0 24px !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--dt-body) !important;
}
.single-post .single-entry-body h2 {
  margin: clamp(48px, 5vw, 68px) 0 20px !important;
  font-size: 50px !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  letter-spacing: -.03em !important;
  color: var(--dt-ink) !important;
}
.single-post .single-entry-body h3 {
  margin: 36px 0 14px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--dt-ink) !important;
}
.single-post .single-entry-body :is(ul, ol) {
  max-width: 78ch;
  margin: 0 0 24px !important;
  padding-left: 24px;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--dt-body) !important;
}
.single-post .single-entry-body li { margin-bottom: 10px; padding-left: 4px; }

/* The mu-plugin header and end-stack are injected INSIDE .single-entry-body, so their
   paragraphs are matched by `.single-post .single-entry-body p` (0,3,1) — which outranks
   a plain `.single-post .dt-post__dek` (0,2,0) and forced them all to 18px body size.
   Re-state them at the higher specificity. */
.single-post .single-entry-body .dt-post__dek {
  max-width: 68ch;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: var(--dt-body) !important;
  margin: 22px 0 0 !important;
}
.single-post .single-entry-body .dt-post__meta {
  max-width: none;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--dt-mute) !important;
  margin: 28px 0 0 !important;
}
.single-post .single-entry-body .dt-post__ctatext {
  font-size: 24px !important;
  line-height: 1.5 !important;
  color: var(--dt-ink) !important;
  margin: 0 auto 22px !important;
}

/* ---- prev / next pager: sits straight under the article body ---- */
.single-post .dt-post__pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: 100%;
  margin: clamp(48px, 5vw, 72px) 0 0;
  padding-top: 0;
  border: 0;
}
/* No boxes. Two halves split by a single hairline, matching the quiet rule-and-space
   language used everywhere else on the site. */
.single-post .dt-post__pagerlink {
  display: block;
  padding: 4px 0;
  border: 0 !important;
  color: var(--dt-ink) !important;
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  text-decoration-line: none !important;
}
.single-post .dt-post__pagerlink--next {
  text-align: right;
  padding-left: 30px;
  border: 0 !important;
}
.single-post .dt-post__pagerlink--empty { pointer-events: none; }
.single-post .dt-post__pagerlabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dt-mute);
}
.single-post .dt-post__pagerarrow { display: block; flex: none; }
.single-post a.dt-post__pagerlink:hover .dt-post__pagerlabel { color: var(--dt-ink); }
.single-post .dt-post__pagertitle {
  display: block;
  margin-top: 12px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--dt-ink);
}
.single-post a.dt-post__pagerlink:hover .dt-post__pagertitle {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
/* arrows nudge on hover — the only motion in the block */
.single-post .dt-post__pagerarrow { transition: transform .25s ease; }
.single-post a.dt-post__pagerlink--prev:hover .dt-post__pagerarrow { transform: translateX(-3px); }
.single-post a.dt-post__pagerlink--next:hover .dt-post__pagerarrow { transform: translateX(3px); }

/* ---- keep reading ---- */
/* the one separator that stays — it marks the end of the article proper */
.single-post .dt-post__end {
  display: block;
  width: 100%;
  margin: clamp(56px, 6vw, 88px) 0 0;
  padding-top: clamp(36px, 4vw, 52px);
  border-top: 1px solid var(--dt-line);
}
.single-post .dt-post__endtop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.single-post .dt-post__endhead {
  margin: 0 !important;
  font-size: 50px !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  letter-spacing: -.03em !important;
  color: var(--dt-ink) !important;
}
.single-post .dt-post__endall {
  flex: none;
  font-size: 18px !important;
  color: var(--dt-ink) !important;
  background-image: none !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 6px !important;
}
.single-post .dt-post__rel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.single-post .dt-post__relcard {
  display: block;
  color: var(--dt-ink) !important;
  background-image: none !important;
  text-decoration-line: none !important;
}
.single-post .dt-post__relmedia {
  display: block;
  overflow: hidden;
  background: var(--dt-blush, #F8E8E9);
  aspect-ratio: 1200 / 630;
}
.single-post .dt-post__relimg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.single-post .dt-post__relcard:hover .dt-post__relimg { transform: scale(1.03); }
.single-post .dt-post__relkick {
  display: block;
  margin-top: 18px;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dt-mute);
}
.single-post .dt-post__relname {
  display: block;
  margin-top: 10px;
  font-size: 24px !important;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.single-post .dt-post__relmore {
  display: inline-block;
  margin-top: 14px;
  font-size: 18px;
  color: var(--dt-ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.single-post .single-entry-body img { max-width: 100%; height: auto; }
/* in-article links: plain underline, nothing else */
.single-post .single-entry-body p a,
.single-post .single-entry-body li a {
  color: inherit !important;
  background-image: none !important;
  text-decoration: underline !important;
  text-underline-offset: auto !important;
}

/* The theme's prev/next block is DROPPED, not restyled. "Keep Reading" above does the
   same job with images and context, while the theme version rendered as a big bordered
   panel with a tiny centred label and a literal "Not available to show!" on the first
   and last post — the most CMS-default-looking thing on the page. Deleting a redundant
   component beats spending CSS on it. */
.single-post .entry-post-navigation { display: none !important; }

@media (max-width: 1024px) {
  .single-post article.hentry {
    padding-top: calc(var(--dt-header-h, 90px) + 20px) !important;
    padding-bottom: 56px !important;
  }
}

@media (max-width: 900px) {
  .single-post .single-entry-body h2,
  .single-post .dt-post__endhead { font-size: 32px !important; }
  .single-post .single-entry-body h3 { font-size: 18px !important; }
  .single-post .single-entry-body :is(p, ul, ol) { font-size: 16px !important; }
  .single-post .single-entry-body .dt-post__dek { font-size: 20px !important; }
  .single-post .single-entry-body .dt-post__meta { font-size: 16px !important; }
  .single-post .dt-post__rel { grid-template-columns: 1fr; gap: 26px; }
  .single-post .dt-post__relname,
  .single-post .dt-post__pagertitle { font-size: 20px !important; }
  /* the bar stacks so the share row never squeezes the date onto two lines */
  .single-post .dt-post__bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .single-post .dt-post__pager { grid-template-columns: 1fr; gap: 22px; }
  .single-post .dt-post__pagerlink--next {
    text-align: left;
    padding-left: 0;
    padding-top: 22px;
    border-left: 0 !important;
    border-top: 1px solid var(--dt-line) !important;
  }
  .single-post .dt-post__pagerlink--empty { display: none; }
  .single-post .dt-post__endtop { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* ==== DT SINGLE POST — END ==== */

/* ==== DT SEARCH OVERLAY + SEARCH RESULTS — SITE-WIDE =============================
   Overlay picks up the brand blush instead of the theme's dark scrim. Results are
   rendered with the shop block by mu-plugin dt-search-shop.php.
   ================================================================================== */
/* The live class is `.wdt-search-form-container` (it gains `.show` when open) — the theme
   paints it pale green #EAF1E5. */
:is(.wdt-search-form-container, .wdt-search-overlay, .wdt-search-form-overlay, .wdt-header-search-overlay) {
  background-color: #F8E8E9 !important;
  background-image: none !important;
}
:is(.wdt-search-form-container, .wdt-search-overlay, .wdt-search-form-overlay) :is(input, .text_input) {
  color: #1D1919 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #1D1919 !important;
  border-radius: 0 !important;
}
:is(.wdt-search-form-container, .wdt-search-overlay, .wdt-search-form-overlay) :is(input, .text_input)::placeholder { color: #6B6060 !important; }
:is(.wdt-search-form-container, .wdt-search-overlay, .wdt-search-form-overlay) :is(a, button, i, svg, .wdt-search-close, label) { color: #1D1919 !important; }

/* banner: Our Shop recipe (cover center, 0.2 dark overlay, white centred H1) but short —
   content height only, top padding clears the overlaid header, so results show on a 1080p screen */
.dt-searchhero {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0 30px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.dt-searchhero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #080808;
  opacity: .2;
  pointer-events: none;
}
.dt-searchhero__cap {
  position: relative;
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 150px 0 70px;
  text-align: center;
}
.dt-searchhero { overflow: hidden; clip-path: inset(0); }
.dt-searchhero__vid {
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .dt-searchhero__vid { display: none; } }
.dt-searchhero::before { z-index: 1; }
.dt-searchhero__cap { z-index: 2; }
.dt-searchhero h1 { margin: 0 !important; }
.dt-searchhero .wdt-heading-title { color: #FFFFFF !important; }

@media (max-width: 1024px) {
  .dt-searchhero { padding: 0 20px; }
  .dt-searchhero__cap { padding: 120px 0 50px; }
}
@media (max-width: 767px) {
  .dt-searchhero__cap { padding: 105px 0 40px; }
}

/* results page: same 1400 box and type scale as everywhere else */
/* the banner is the page opener now, so no header offset here */
.search-results .dt-searchpage,
.search-no-results .dt-searchpage {
  width: min(1400px, 100% - 40px);
  margin: 0 auto;
  padding: clamp(48px, 5vw, 72px) 0 80px;
}
.search-results .dt-searchpage__head { margin-bottom: clamp(32px, 3.4vw, 48px); }
.search-results .dt-searchpage__sub {
  margin: 16px 0 0 !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: #403838 !important;
}
.search-results .dt-searchpage__empty {
  margin: 0 0 32px !important;
  font-size: 24px !important;
  color: #1D1919 !important;
}
/* the theme's own results chrome has no place here */
.search-results :is(.secondary-sidebar, #secondary) { display: none !important; }
.woocommerce-shop #main > .container:has(> .elementor-3751),
.search-results .container:has(.dt-searchpage) {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 900px) {
  .search-results .dt-searchpage__title { font-size: 32px !important; }
  .search-results .dt-searchpage__sub,
  .search-results .dt-searchpage__empty { font-size: 20px !important; }
}

/* ==== DT MINI CART (header flyout) — SITE-WIDE ===================================
   Not scoped to the Woo body classes: the flyout is in the header on every page, so its
   styling has to be global or it drifts page to page.

   Measured problem: `.woocommerce-mini-cart__buttons` is `display:flex` with
   `flex-direction: row` and no gap, while each button is 230px inside a 230px panel — so
   they wrapped onto two lines and touched with a 0px gap.

   Both buttons also rendered as the same 45deg gradient primary, which gives the panel two
   competing calls to action. House rule is exactly two designs: gradient for the primary,
   underline for the secondary. Checkout keeps the gradient; View Cart drops to underline.
   ================================================================================== */
.woocommerce-mini-cart__buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  gap: 12px !important;
  margin-top: 16px !important;
}
.woocommerce-mini-cart__buttons a {
  margin: 0 !important;
  width: 100% !important;
  /* The theme animates these with a gradient background-position sweep. Its transition
     also covers `all`, so height/padding/border animate too and the buttons visibly
     jitter and shift on hover. Restrict the transition to the two properties the sweep
     actually needs. */
  transition: background-position .3s linear, color .3s linear !important;
  transform: none !important;
  box-shadow: none !important;
}
.woocommerce-mini-cart__buttons a:hover { transform: none !important; box-shadow: none !important; }

/* BOTH buttons carry the same design — outlined at rest, ink fill on hover.
   The theme's 45deg gradient sweep is DROPPED here, not tuned: in this panel it rendered
   as a torn half-painted background (the gradient is sized 300% and its position animates,
   which needs a stable box — the flyout re-lays-out as cart fragments refresh, so the
   sweep restarted mid-animation). A plain fill is the same visual intent and cannot break.
   The boxed gradient stays the standard on cart/checkout, where the box is stable. */
.woocommerce-mini-cart__buttons a,
.woocommerce-mini-cart__buttons a.checkout,
.woocommerce-mini-cart__buttons a:not(.checkout) {
  padding: 14px 20px !important;
  height: auto !important;
  border: 1px solid #1D1919 !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  letter-spacing: .02em;
  text-align: center;
  color: #1D1919 !important;
  background: transparent !important;
  background-image: none !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  box-shadow: none !important;
  text-decoration-line: none !important;
  transition: background-color .25s ease, color .25s ease !important;
}
/* Scoped through the wrapper to outrank the theme's own
   `.wdt-shop-menu-cart-content-wrapper .buttons a:hover { background: var(--wdtPrimaryColor) }`
   which sits at the same weight and was winning on source order. */
.woocommerce-mini-cart__buttons a:hover,
.woocommerce-mini-cart__buttons a:focus,
.wdt-shop-menu-cart-content-wrapper .buttons a:hover,
.wdt-shop-menu-cart-content-wrapper .buttons a:focus,
.wdt-shop-menu-cart-content-wrapper .woocommerce-mini-cart__buttons a:hover {
  color: #FFFFFF !important;
  background: #1D1919 !important;
  background-color: #1D1919 !important;
  background-image: none !important;
  border-color: #1D1919 !important;
}

/* THE ACTUAL CULPRIT — a pseudo-element, which is why every computed-style probe of the
   button and its ancestors came back clean:
     .woocommerce a.button:not([class*="yith-"]):hover:before
   The theme paints its hover as a ::before overlay that expands over the button, and it
   reads as "the whole div fills". Both buttons need it gone; the hover is a plain
   background-color on the element itself. */
.wdt-shop-menu-cart-content-wrapper .buttons a::before,
.wdt-shop-menu-cart-content-wrapper .buttons a::after,
.wdt-shop-menu-cart-content-wrapper .buttons a:hover::before,
.wdt-shop-menu-cart-content-wrapper .buttons a:hover::after,
.woocommerce-mini-cart__buttons a::before,
.woocommerce-mini-cart__buttons a::after,
.woocommerce-mini-cart__buttons a:hover::before,
.woocommerce-mini-cart__buttons a:hover::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
}

/* the theme also paints the resting state through the same wrapper selector */
.wdt-shop-menu-cart-content-wrapper .buttons a,
.wdt-shop-menu-cart-content-wrapper .woocommerce-mini-cart__buttons a {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #1D1919 !important;
  border: 1px solid #1D1919 !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  transition: background-color .25s ease, color .25s ease !important;
}
/* Checkout stays the first of the two */
.woocommerce-mini-cart__buttons a.checkout { order: 1; }
.woocommerce-mini-cart__buttons a:not(.checkout) { order: 2; }

/* ==== DT WOO — CART · CHECKOUT · MY ACCOUNT — START ===============================
   ONE block owns every WooCommerce-page style. Do not append patches outside it.

   Why CSS and not a pasted section: Cart (299), Checkout (300) and My Account (301)
   are classic [woocommerce_*] shortcodes, so there is no Elementor widget to paste
   into. This stylesheet is the only way in.

   AFTER EDITING, BUMP `Version:` IN THE HEADER ABOVE. The sheet is enqueued as
   style.css?ver=<Version>; leave it unchanged and browsers + LiteSpeed serve the old
   copy silently. fetch(url,{cache:'no-store'}) still returns the new file and fools
   you into hunting a cascade bug that does not exist.

   NO font-family is declared anywhere below — the global !important stack in
   functions.php owns fonts. Naming one here only creates drift.

   Order-received needs no rules of its own: it renders on page 300, so the checkout
   scope already covers it.
   ================================================================================== */

/* ---- 1. TOKENS + SCOPE ---------------------------------------------------------- */
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account {
  --dt-ink: #1D1919;
  --dt-body: #403838;
  --dt-line: #E4DCDC;
  --dt-blush: #F8E8E9;
  --dt-mute: #6B6060;
  --dt-header-h: 90px;
}

/* ---- 2. PAGE FRAME: sticky header, 1400 box, offset ----------------------------- */
/* THE HEADER IS NOT STYLED HERE. mu-plugin `dt-woo-header.php` pins the theme class
   `is-scrolled` from page load, exactly as EMCP snippet 4537 already does for the
   product page. That hands recolouring to the theme's own scrolled styles, which fix
   background, links, ICONS and the logo together. CSS here could reach everything
   except the icons, so do not re-add background/colour overrides for the header —
   they would fight the theme and still miss the icons. */

/* True 1400 box. The theme's .container caps content at ~1365 and adds its own 30px
   gutters, so the house 1400 rule cannot be met while it is in charge. Neutralise it
   and let .hentry be the box — the same move snippet 4537 makes on product/archive. */
/* Same trap as the single-post block: a bare `.container` here also matches header,
   footer and other chrome and strips their gutters. Scope it to the container that
   actually holds the page content. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .container:has(.hentry) {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(#primary, #primary.page-with-sidebar, #primary.with-right-sidebar) {
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(#secondary, .secondary-sidebar) { display: none !important; }

/* The header is position:fixed and therefore OUT OF FLOW — a plain 48px of padding
   hides the header's own height behind it and leaves a ~6px visible gap. Clear the
   measured header height first (--dt-header-h is published by the mu-plugin). */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .hentry {
  width: min(1400px, 100% - 40px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: calc(var(--dt-header-h, 90px) + 30px) !important;
  padding-bottom: 80px !important;
}

/* ---- 3. LAYOUT: two columns with a sticky summary -------------------------------- */
/* The theme sets #customer_details .col-1 / .col-2 to a fixed 1243px, which cancels
   WooCommerce's own float:left / width:48%. With the floats dead, Billing, Shipping
   and Your Order all stacked full-bleed and every input stretched ~1240px. Grid
   replaces the float layout outright. */
.woocommerce-checkout form.checkout.woocommerce-checkout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr);
  gap: 56px;
  align-items: start;
}
.woocommerce-checkout form.checkout > #customer_details {
  grid-column: 1;
  min-width: 0;
  width: auto !important;
  float: none !important;
}
.woocommerce-checkout form.checkout > :is(.woocommerce-checkout-order-review-wrap, #order_review_heading) {
  grid-column: 2;
  min-width: 0;
  width: auto !important;
  float: none !important;
}
.woocommerce-checkout form.checkout > .woocommerce-checkout-order-review-wrap {
  position: sticky;
  top: calc(var(--dt-header-h) + 24px);
}
.woocommerce-checkout #customer_details :is(.col-1, .col-2) {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
}
.woocommerce-checkout #customer_details .col-2 { margin-top: 40px !important; }

.woocommerce-cart .hentry > .woocommerce {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  gap: 48px;
  align-items: start;
}
.woocommerce-cart .hentry > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .hentry > .woocommerce > form.woocommerce-cart-form { grid-column: 1; min-width: 0; }
.woocommerce-cart .hentry > .woocommerce > .cart-collaterals {
  grid-column: 2;
  min-width: 0;
  width: 100% !important;
  position: sticky;
  top: calc(var(--dt-header-h) + 24px);
}
.woocommerce-cart .cart-collaterals :is(.cart_totals, .cross-sells) {
  width: 100% !important;
  float: none !important;
}

/* ---- 4. FORM CONTROLS ------------------------------------------------------------ */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(input, select, textarea, .button, button, .select2-selection, .woocommerce-message, .woocommerce-info, .woocommerce-error) {
  border-radius: 0 !important;
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(.input-text, select, .select2-selection) {
  padding: 13px 14px !important;
  font-size: 15px !important;
  color: var(--dt-ink) !important;
  background: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid var(--dt-line) !important;
  box-shadow: none !important;
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(.input-text, select):focus {
  border-color: var(--dt-ink) !important;
  outline: 0 !important;
}
:is(.woocommerce-checkout, .woocommerce-account) :is(form.checkout label, .woocommerce-billing-fields label, .woocommerce-shipping-fields label, .woocommerce-form-row label, form label) {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  color: var(--dt-mute) !important;
}

/* ---- 5. BUTTONS: the house has exactly TWO designs ------------------------------- */
/* PRIMARY keeps the theme 45deg gradient sweep. It looks like a thin outlined button
   AT REST and fills dark on hover — that is the standard, not a defect. */
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order,
.woocommerce-account :is(.woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-Button, .woocommerce-EditAccountForm .button) {
  padding: 17px 44px !important;
  font-size: 15px !important;
  letter-spacing: .02em !important;
  border: 1px solid var(--dt-ink) !important;
  width: auto !important;
  min-width: 264px;
  display: inline-block !important;
}

/* SECONDARY drops to the underline standard so the two stop competing. Anything the
   theme repaints with its gradient needs background-image killed explicitly. */
.woocommerce-cart :is(.actions .button[name="update_cart"], .coupon .button, form.woocommerce-cart-form .actions > .button:not(.checkout-button), .cart_totals .shipping-calculator-button, .cart-collaterals a.shipping-calculator-button),
.woocommerce-checkout :is(.coupon .button, .shipping-calculator-button, .woocommerce-form-coupon-toggle .woocommerce-info a, .woocommerce-form-login-toggle .woocommerce-info a),
.woocommerce-account :is(.woocommerce-LostPassword a, .woocommerce-MyAccount-content a.woocommerce-Button--next, .woocommerce-MyAccount-content a.woocommerce-Button--previous, .woocommerce-Address-title a) {
  display: inline-block !important;
  padding: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  font-size: 15px !important;
  color: var(--dt-ink) !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: currentColor !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 6px !important;
}
.woocommerce-cart .actions .button:is([disabled], :disabled) { opacity: .35 !important; cursor: not-allowed; }

/* ---- 6. TABLES, MONEY, THUMBNAILS ------------------------------------------------ */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(.shop_table, .cart_totals table, .woocommerce-table--order-details) {
  border: 1px solid var(--dt-line) !important;
  border-style: solid !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
  width: 100% !important;
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(.shop_table, .woocommerce-table--order-details) :is(td, th) {
  border-style: solid !important;
  border-width: 0 0 1px 0 !important;
  border-color: var(--dt-line) !important;
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(.shop_table, .cart_totals, #order_review, .woocommerce-MyAccount-content) {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--dt-body) !important;
}
:is(.woocommerce-cart, .woocommerce-checkout) :is(.shop_table th, .cart_totals th, .shop_table .amount, .order-total .amount) {
  color: var(--dt-ink) !important;
}
.woocommerce-checkout :is(#payment .payment_box, #payment .payment_box p, .woocommerce-privacy-policy-text, .woocommerce-privacy-policy-text p, .woocommerce-terms-and-conditions-wrapper, #order_review .product-name, #order_review td, #order_review th) {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--dt-body) !important;
}

/* money must never wrap — RM 1,518.00 was breaking across two lines in the sidebar */
:is(.woocommerce-cart, .woocommerce-checkout) :is(#order_review, .cart_totals) :is(.amount, .woocommerce-Price-amount) {
  white-space: nowrap !important;
}
:is(.woocommerce-cart, .woocommerce-checkout) :is(#order_review, .cart_totals) :is(td, th) {
  padding: 12px 14px !important;
  vertical-align: top !important;
}
.woocommerce-checkout #order_review :is(td.product-total, .order-total td),
.woocommerce-cart .cart_totals td { text-align: right !important; }
:is(.woocommerce-cart, .woocommerce-checkout) :is(#order_review, .cart_totals) .shipping td { text-align: left !important; }

/* the order-summary line ran hundreds of px tall on mobile: the theme let the
   thumbnail render at full size inside the review table */
.woocommerce-checkout #order_review :is(.product-name img, .cart_item img) {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  min-height: 0 !important;
  object-fit: cover !important;
  float: none !important;
  display: inline-block !important;
  vertical-align: middle;
  margin: 0 10px 0 0 !important;
  border: 1px solid var(--dt-line);
}
.woocommerce-checkout #order_review :is(.cart_item td, .product-name) { min-height: 0 !important; height: auto !important; }

.woocommerce-cart .product-thumbnail img {
  width: 92px !important;
  max-width: none !important;
  height: auto !important;
  border: 1px solid var(--dt-line);
}

/* remove control: Woo ships a filled circle, which breaks the 0-radius rule */
.woocommerce-cart :is(td.product-remove a.remove, a.remove) {
  width: 32px !important;
  height: 32px !important;
  line-height: 30px !important;
  font-size: 18px !important;
  color: var(--dt-mute) !important;
  background: transparent !important;
  border: 1px solid var(--dt-line) !important;
  border-radius: 0 !important;
}
.woocommerce-cart :is(td.product-remove a.remove, a.remove):hover {
  color: var(--dt-ink) !important;
  background: transparent !important;
  border-color: var(--dt-ink) !important;
}

/* address panels ship DASHED, and order details had a doubled border */
:is(.woocommerce-account, .woocommerce-checkout, .woocommerce-order-received) :is(.woocommerce-Address address, .woocommerce-customer-details address) {
  padding: 18px 20px !important;
  border: 1px solid var(--dt-line) !important;
  border-style: solid !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
}

/* ---- 7. NOTICES: Woo ships green success / cyan info ----------------------------- */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(.woocommerce-message, .woocommerce-info) {
  background: var(--dt-blush) !important;
  border-top: 2px solid var(--dt-ink) !important;
  color: var(--dt-ink) !important;
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) :is(.woocommerce-message, .woocommerce-info)::before {
  color: var(--dt-ink) !important;
}
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .woocommerce-error {
  background: #FFF4F4 !important;
  border-top: 2px solid #A4343A !important;
}
/* One line, not two. The link is inline-block, and an inline-block on the baseline adds
   descender space below the line box — measured 58px tall for a single 22px line. Flex
   removes the baseline behaviour and centres the two parts on one row. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
  display: inline !important;
  white-space: nowrap;
  line-height: 1.4 !important;
}
.woocommerce-cart .coupon label { font-size: 14px !important; font-weight: 400 !important; color: var(--dt-body) !important; }

/* ---- 8. MY ACCOUNT nav ------------------------------------------------------------ */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--dt-line);
  border-style: solid !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0 !important;
  border-bottom: 1px solid var(--dt-line);
  border-style: solid !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 0 !important;
  font-size: 15px !important;
  color: var(--dt-body) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  text-decoration-line: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation :is(li.is-active a, li a:hover) { color: var(--dt-ink) !important; }
.woocommerce-account .woocommerce-orders-table :is(td, th, .woocommerce-orders-table__cell-order-number) {
  background: transparent !important;
  background-color: transparent !important;
}

/* ---- 9. RESPONSIVE ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .woocommerce-checkout form.checkout.woocommerce-checkout,
  .woocommerce-cart .hentry > .woocommerce {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
  }
  .woocommerce-checkout form.checkout > :is(#customer_details, .woocommerce-checkout-order-review-wrap),
  .woocommerce-cart .hentry > .woocommerce > :is(form.woocommerce-cart-form, .cart-collaterals) {
    grid-column: 1 !important;
  }
  .woocommerce-checkout form.checkout > .woocommerce-checkout-order-review-wrap,
  .woocommerce-cart .hentry > .woocommerce > .cart-collaterals {
    position: static !important;
    top: auto !important;
  }
  :is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .hentry {
    padding-top: calc(var(--dt-header-h) + 20px) !important;
    padding-bottom: 56px !important;
  }
}

@media (max-width: 768px) {
  .woocommerce-cart .checkout-button,
  .woocommerce-checkout #place_order,
  .woocommerce-account :is(.woocommerce-form-login__submit, .woocommerce-form-register__submit) {
    width: 100% !important;
  }
  .woocommerce-cart .product-thumbnail img { width: 68px !important; }
}

@media (max-width: 600px) {
  .woocommerce-checkout #order_review :is(td, th) { padding: 10px !important; }
}
/* ==== DT WOO — CART · CHECKOUT · MY ACCOUNT — END ==== */

/* ==== DT LEGAL PAGES - Privacy Policy (3) and Refund and Returns (302) - START ==== */
body.page-id-3,
body.page-id-302 {
  --dt-ink: #1D1919;
  --dt-body: #403838;
  --dt-line: #E4DCDC;
  --dt-measure: 680px;
}

.page-id-3 :is(#secondary, .secondary-sidebar, aside.widget-area, .sidebar),
.page-id-302 :is(#secondary, .secondary-sidebar, aside.widget-area, .sidebar) {
  display: none !important;
}

.page-id-3 section:is(.page-with-sidebar, .with-right-sidebar),
.page-id-302 section:is(.page-with-sidebar, .with-right-sidebar) {
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  float: none !important;
}

.page-id-3 .hentry,
.page-id-302 .hentry {
  width: min(var(--dt-measure), 100%) !important;
  max-width: min(var(--dt-measure), 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  padding-top: 72px !important;
  padding-bottom: 96px !important;
}

.page-id-3 .hentry > h1,
.page-id-302 .hentry > h1 {
  font-size: 44px !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  color: var(--dt-ink) !important;
  margin: 0 0 12px !important;
}

.page-id-3 .hentry > h1 + p,
.page-id-302 .hentry > h1 + p {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--dt-body);
  margin: 0 0 40px !important;
}

.page-id-3 .hentry > h2,
.page-id-302 .hentry > h2 {
  font-size: 26px !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--dt-ink) !important;
  margin: 52px 0 14px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--dt-line);
}

.page-id-3 .hentry :is(p, li),
.page-id-302 .hentry :is(p, li) {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--dt-body);
}

.page-id-3 .hentry > p,
.page-id-302 .hentry > p {
  margin: 0 0 18px !important;
}

.page-id-3 .hentry ul,
.page-id-302 .hentry ul {
  margin: 0 0 22px !important;
  padding-left: 22px !important;
  list-style: disc !important;
}

.page-id-3 .hentry li,
.page-id-302 .hentry li {
  margin: 0 0 4px !important;
  list-style: disc !important;
}

.page-id-3 .hentry strong,
.page-id-302 .hentry strong {
  color: var(--dt-ink);
  font-weight: 600;
}

.page-id-3 .hentry a,
.page-id-302 .hentry a {
  color: var(--dt-ink) !important;
  background-image: none !important;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.page-id-3 .hentry em,
.page-id-302 .hentry em {
  color: #6B6060;
  font-size: 14px;
  font-style: normal;
}

@media (max-width: 900px) {
  .page-id-3 .hentry,
  .page-id-302 .hentry {
    width: min(var(--dt-measure), 100% - 40px) !important;
    max-width: none !important;
    padding-top: 44px !important;
    padding-bottom: 64px !important;
  }
  .page-id-3 .hentry > h1,
  .page-id-302 .hentry > h1 { font-size: 32px !important; }
  .page-id-3 .hentry > h2,
  .page-id-302 .hentry > h2 { font-size: 22px !important; margin-top: 40px !important; }
}
/* ==== DT LEGAL PAGES - END ==== */

/* ==== DT PDP SINGLE-IMAGE GALLERY - START ====
   The PDP gallery is a 76px thumbs column + stage. A product with one image
   renders no thumbs, so the stage fell into the 76px column (74x74 photo). */
.dt-pdp__gallery > .dt-pdp__stage:only-child { grid-column: 1 / -1; }
/* ==== DT PDP SINGLE-IMAGE GALLERY - END ==== */

/* ==== DT PRODUCT IMAGE GROUND - START ====
   Product photos sit on white, not blush: client PNGs can be transparent, and
   blush behind a cut-out reads as a coloured backdrop next to the white-ground
   photos. body prefix outranks the PDP widget's own !important rules. */
body .dt-shop__mediawrap,
body .dt-pdp__stage,
body .dt-pdp .dt-pdp__thumb,
body .dt-pdp button.dt-pdp__thumb,
body .dt-also a.dt-also__media,
body .dt-recent a.dt-recent__media,
body .dt-pdp .dt-pdp__cardmedia {
  background-color: #FFFFFF !important;
}
/* ==== DT PRODUCT IMAGE GROUND - END ==== */

/* ==== ELEMENTOR VIDEO BACKGROUND - HAIRLINE SEAM - START ====
   Elementor sizes the background video in JS pixels and relies on the wrapper
   overflow:hidden to crop it. The video is a composited layer, so at fractional
   device pixel ratios the compositor does not clip it exactly on the box edge and
   a 1px seam shows on all four sides. Measured on our-shop at dpr 1 and 1.5:
   edge column rgb(206,206,206) against interior content rgb(70,60,52), while the
   layout gap measured 0 at every width tested. clip-path forces a real clip on the
   compositor, which overflow:hidden alone does not guarantee. */
.elementor .elementor-background-video-container,
.elementor-background-video-container {
  -webkit-clip-path: inset(0px) !important;
  clip-path: inset(0px) !important;
  overflow: hidden !important;
}
/* Belt and braces: make the video over-cover its box by 2px on every side so no
   rounding at any zoom can expose an edge, then let the clip above crop it back.
   Elementor writes width/height inline in px without !important, so min-* wins. */
.elementor .elementor-background-video-container video,
.elementor-background-video-container video {
  min-width: calc(100% + 4px) !important;
  min-height: calc(100% + 4px) !important;
  max-width: none !important;
  margin: -2px !important;
}
/* ==== ELEMENTOR VIDEO BACKGROUND - HAIRLINE SEAM - END ==== */

/* ==== DT HOME HEADER - MENU TEXT SHADOW - START ==== */
/* On the homepage the header sits transparent over the banner video with white menu
   text, so the labels lose contrast every time a bright frame passes behind them.
   Measured at the top of page 2600: header background rgba(0,0,0,0), link colour
   rgb(255,255,255). Once the header picks up .is-scrolled it turns solid white with
   black text (measured rgb(0,0,0)), where a shadow would read as dirt - hence the
   :not(.is-scrolled) guard. The child combinator keeps this to top-level items only,
   so sub-menu links, which sit on their own solid panel, are untouched. */
body.home .main-sticky-header:not(.is-scrolled) .wdt-primary-nav > li.menu-item > a,
body.home .main-sticky-header:not(.is-scrolled) .wdt-primary-nav > li.menu-item > a span {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .38), 0 2px 10px rgba(0, 0, 0, .22) !important;
}
/* ==== DT HOME HEADER - MENU TEXT SHADOW - END ==== */

/* ==== DT HOME BANNER - CONTENT TEXT SHADOW - START ==== */
/* The homepage banner (container .wdt-cus-home3-hero-slider3) is a background video,
   DT-Brand-Film-2026-FINAL_naked.mp4, with white copy laid straight over it and no
   scrim. Contrast therefore changes frame by frame, and the two display headings are
   the first to disappear when a bright frame passes. Same two-layer shadow as the
   header menu above, scaled up because this type is far larger: the tight layer keeps
   the letterforms crisp, the wide soft layer separates them from the footage.
   Set on the text-editor wrapper as well as its anchor, because the theme paints bare
   anchors and would otherwise leave the Shop New Arrivals link without one. */
.wdt-cus-home3-hero-slider3 .wdt-heading-title,
.wdt-cus-home3-hero-slider3 .wdt-heading-content-wrapper,
.wdt-cus-home3-hero-slider3 .elementor-widget-text-editor,
.wdt-cus-home3-hero-slider3 .elementor-widget-text-editor p,
.wdt-cus-home3-hero-slider3 .elementor-widget-text-editor a {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .38), 0 3px 16px rgba(0, 0, 0, .26) !important;
}
/* ==== DT HOME BANNER - CONTENT TEXT SHADOW - END ==== */

/* ==========================================================================
   POLICY PAGES - native Text Editor widgets carrying the dt-legal class
   (Privacy, Terms, Delivery, Return). Moved out of the HTML widgets
   2026-09-24 so the client can edit the copy in Elementor.
   ========================================================================== */
.elementor-widget-text-editor.dt-legal, .elementor-widget-text-editor.dt-legal * { box-sizing: border-box; }
.elementor-widget-text-editor.dt-legal { width: min(760px, 100% - 40px) !important; max-width: 760px !important; margin: 0 auto !important; padding: 88px 0 112px !important; background: transparent; color: #403838; }
.elementor-widget-text-editor.dt-legal p, .elementor-widget-text-editor.dt-legal li, .elementor-widget-text-editor.dt-legal td, .elementor-widget-text-editor.dt-legal th { font-family: inherit; font-size: 16px !important; line-height: 1.75 !important; color: #403838; }
.elementor-widget-text-editor.dt-legal p { margin: 0 0 18px !important; }
.elementor-widget-text-editor.dt-legal h2, .elementor-widget-text-editor.dt-legal h3, .elementor-widget-text-editor.dt-legal h4 { font-family: inherit; font-weight: 400 !important; letter-spacing: 0 !important; color: #1D1919 !important; }
.elementor-widget-text-editor.dt-legal h2 { font-size: 24px !important; line-height: 1.3 !important; margin: 56px 0 16px !important; padding-top: 28px !important; border-top: 1px solid #E4DCDC; }
.elementor-widget-text-editor.dt-legal h3 { font-size: 20px !important; line-height: 1.35 !important; margin: 40px 0 12px !important; }
.elementor-widget-text-editor.dt-legal h4 { font-size: 18px !important; line-height: 1.4 !important; margin: 28px 0 8px !important; }
.elementor-widget-text-editor.dt-legal > :first-child { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.elementor-widget-text-editor.dt-legal strong { color: #1D1919; font-weight: 600; }
.elementor-widget-text-editor.dt-legal ul, .elementor-widget-text-editor.dt-legal ol { margin: 0 0 22px !important; padding-left: 22px !important; }
.elementor-widget-text-editor.dt-legal ul > li { list-style: disc !important; margin: 0 0 6px !important; }
.elementor-widget-text-editor.dt-legal ol > li { list-style: decimal !important; margin: 0 0 6px !important; }
.elementor-widget-text-editor.dt-legal a { color: #1D1919 !important; background-image: none !important; text-decoration-line: underline !important; text-decoration-style: solid !important; text-decoration-color: currentColor !important; text-decoration-thickness: 1px !important; text-underline-offset: 6px !important; word-break: break-word; }
.elementor-widget-text-editor.dt-legal table { width: 100%; border-collapse: collapse; margin: 8px 0 28px; display: block; overflow-x: auto; }
.elementor-widget-text-editor.dt-legal td, .elementor-widget-text-editor.dt-legal th { border: 1px solid #E4DCDC; padding: 12px 14px; vertical-align: top; text-align: left; }
.elementor-widget-text-editor.dt-legal td p, .elementor-widget-text-editor.dt-legal th p { margin: 0 !important; }
@media (max-width: 900px) {
  .elementor-widget-text-editor.dt-legal { padding: 56px 0 72px !important; }
  .elementor-widget-text-editor.dt-legal h2 { font-size: 20px !important; margin-top: 44px !important; }
  .elementor-widget-text-editor.dt-legal h3 { font-size: 18px !important; }
  .elementor-widget-text-editor.dt-legal h4 { font-size: 16px !important; font-weight: 600 !important; }
}