/*
 * Base stylesheet: structural CSS the scaffold relies on, plus the storefront
 * theme tokens. Layout positioning (flex, fixed offsets, widths) is emitted
 * inline per-request by render.php; this file supplies what is the same every
 * time. Theme: a bold "tactical" airsoft look (Oswald headings, Titillium body,
 * blue primary + red accent), inspired by the reference site.
 */

:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #1f1f1d;
  --ink-2: #2b2b2b;
  --muted: #7a7a7a;
  --blue: #0274b7;
  --blue-d: #015e95;
  --red: #e30202;
  --line: #dcdcdc;
  --head: "Oswald", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:
    "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.12;
  color: var(--ink);
}

a {
  color: var(--blue);
}

/* The centered inner wrapper produced for `container` regions. */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.region {
  position: relative;
}

/*
 * Full-height column so the body row absorbs leftover space (sticky footer);
 * its columns (sidebar + body) stretch to equal height via the flex default.
 */
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.row-body {
  flex: 1 1 auto;
}

/*
 * Add-to-cart toasts, pinned bottom-right. Global (rendered on document.body,
 * outside the scoped layout regions), so they live in base.css, not a module.
 */
.dc-toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(92vw, 340px);
}
.dc-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--ink);
  color: #fff;
  border-left: 4px solid var(--blue);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.dc-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.dc-toast__msg {
  font-weight: 600;
}
.dc-toast__link {
  flex: 0 0 auto;
  background: var(--blue);
  color: #fff;
  font-family: var(--head);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
}
.dc-toast__link:hover {
  background: var(--blue-d);
}
@media (prefers-reduced-motion: reduce) {
  .dc-toast {
    transition: none;
  }
}

/*
 * Offcanvas sidebar (issue #27). The trigger button and backdrop render as
 * siblings of the scoped #dc-layout-sidebar region, so their default-hidden state
 * lives here (global), like the toasts above. The responsive overlay appearance
 * rules are generated per page in render.php (offcanvas_style) because the
 * breakpoint is configurable (a px width, or 'always' for overlay at every
 * width); that generated <style> shows the trigger/backdrop in overlay mode.
 */
.dc-offcanvas-trigger,
.dc-offcanvas-backdrop {
  display: none;
}

/*
 * Image lightbox carousel for rich-text (.page__body) images. Rendered on
 * document.body (full screen), so it lives here (global), like the toasts. JS is
 * in modules/body/module.js; the ribbon is a fixed 100px thumbnail strip.
 */
.dc-lb {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.92);
}
.dc-lb.is-open {
  display: flex;
}
.dc-lb__stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 2.5rem 4rem 1rem;
}
.dc-lb__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.dc-lb__close,
.dc-lb__nav {
  position: absolute;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: 0;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease;
}
.dc-lb__close:hover,
.dc-lb__nav:hover {
  background: var(--blue);
}
.dc-lb__close {
  top: 0.75rem;
  right: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.6rem;
  border-radius: 50%;
}
.dc-lb__nav {
  top: calc(50% - 50px);
  transform: translateY(-50%);
  width: 3rem;
  height: 4rem;
  font-size: 2.2rem;
  border-radius: 4px;
}
.dc-lb__nav--prev {
  left: 0.75rem;
}
.dc-lb__nav--next {
  right: 0.75rem;
}
.dc-lb__ribbon {
  flex: 0 0 100px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.4);
}
.dc-lb__thumb {
  height: 80px;
  width: auto;
  flex: 0 0 auto;
  object-fit: cover;
  opacity: 0.5;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 2px;
  transition: opacity 0.15s ease;
}
.dc-lb__thumb:hover {
  opacity: 0.85;
}
.dc-lb__thumb.is-active {
  opacity: 1;
  border-color: var(--blue);
}
body.dc-lb-lock {
  overflow: hidden;
}

/* Cart quick-view modal (issue #101) - lives on document.body, so global (like
   the toasts + lightbox above), not in the scoped body module stylesheet. */
.qv-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
}
.qv-modal.is-open {
  display: block;
}
.qv-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.qv-modal__dialog {
  position: relative;
  max-width: 880px;
  margin: 5vh auto;
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.qv-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink, #1a1a1a);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.qv-modal__close:hover {
  background: rgba(0, 0, 0, 0.14);
}
.qv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
}
.qv__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line, #e3e3e3);
}
.qv__img--ph {
  background: hsl(calc(var(--seed, 1) * 47deg) 30% 92%);
}
.qv__cat {
  color: var(--muted, #6c6c6c);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
}
.qv__name {
  margin: 0.3rem 0;
  font-size: 1.5rem;
}
.qv__price {
  margin-bottom: 0.75rem;
  color: var(--blue, #1769d1);
  font-family: var(--head, sans-serif);
  font-weight: 700;
  font-size: 1.25rem;
}
.qv__body {
  font-size: 0.9rem;
}
.qv__more {
  display: inline-block;
  margin-top: 1rem;
  color: var(--blue, #1769d1);
  font-family: var(--head, sans-serif);
  font-weight: 600;
  text-decoration: none;
}
.qv__more:hover {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .qv {
    grid-template-columns: 1fr;
  }
}

/*
 * Lead time (#141): "we have not got it, but we can get it". The same note
 * appears on the product page, in the cart, at checkout and on an order, so it
 * is styled once here rather than per module.
 */
.lead-time {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.7rem;
  background: #fff8e6;
  border-left: 3px solid #e0a800;
  border-radius: 3px;
  color: var(--ink-2);
  font-size: 0.88rem;
  line-height: 1.45;
}
.lead-time__icon {
  flex: 0 0 auto;
  color: #b8860b;
  font-weight: 700;
}
.lead-time--line {
  margin-top: 0.35rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}
/*
 * Product page (#147, #148). Everywhere else this note is a footnote beside a
 * line someone has already decided to buy. Here it IS the decision - "we have
 * not got it, we will get it, here is how long" - so it is sized to be read
 * rather than skimmed past.
 */
.lead-time--hero {
  align-items: center;
  margin: 0.9rem 0 0;
  padding: 0.9rem 1rem;
  border-left-width: 5px;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.4;
}
.lead-time--hero .lead-time__icon {
  font-size: 1.25rem;
}
.card__leadtime {
  display: block;
  padding: 0 0.6rem 0.4rem;
  color: #8a6d1f;
  font-size: 0.75rem;
  font-weight: 600;
}
.card__lead {
  color: #8a6d1f;
}
.checkout__shipeta {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
}
.cart__summary-note--lead {
  color: #8a6d1f;
}
.order__eta {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
}
.order__eta-why {
  color: var(--muted);
}

/*
 * Sale prices. The old price is struck through and stepped back; the new one is
 * red and carries the weight, because the saving is the message. Styled here
 * rather than per module - a card, the product page and any widget all render
 * the same pair.
 */
.price__was {
  margin-right: 0.35rem;
  color: var(--muted);
  font-weight: 400;
  text-decoration: line-through;
}
.price__now {
  color: var(--red);
  font-weight: 700;
}

#dc-layout-topbar{
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--ink);
  color: #cfcfcf;
  font-size: 0.78rem;
  padding-inline: 1rem;
}#dc-layout-topbar .topbar__brand{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
  color: #fff;
  text-decoration: none;
}#dc-layout-topbar .topbar__brand::before{
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  background: var(--red);
  border-radius: 2px;
}#dc-layout-topbar .topbar__tag{
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: #bdbdbd;
}
#dc-layout-hero{
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding-block: 1.5rem;
  border-bottom: 4px solid var(--red);
}#dc-layout-hero .hero__header{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}#dc-layout-hero .hero__logo{
  display: inline-flex;
  text-decoration: none;
  flex: 0 0 auto;
}#dc-layout-hero .hero__logo-text{
  font-family: var(--head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.4rem;
  color: #fff;
}#dc-layout-hero .hero__logo-img{
  max-height: 54px;
  width: auto;
  background: #fff;
  border-radius: 3px;
}#dc-layout-hero .hero__search{
  flex: 1 1 auto;
  display: flex;
  max-width: 520px;
  margin-inline: auto;
}#dc-layout-hero .hero__search input{
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0.55rem 0.8rem;
  font: inherit;
  background: #fff;
  color: var(--ink);
  border-radius: 3px 0 0 3px;
}#dc-layout-hero .hero__search button{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  border: 0;
  cursor: pointer;
  background: var(--blue);
  color: #fff;
  border-radius: 0 3px 3px 0;
}#dc-layout-hero .hero__search button:hover{
  background: var(--blue-d);
}#dc-layout-hero .hero__cart{
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  color: #fff;
  text-decoration: none;
}#dc-layout-hero .hero__cart:hover{
  color: #cfcfcf;
}#dc-layout-hero .hero__cart-count{
  position: absolute;
  top: -0.5rem;
  right: -0.6rem;
  min-width: 1.15rem;
  height: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  background: var(--red);
  color: #fff;
  font-family: var(--head);
  font-weight: 600;
  font-size: 0.66rem;
  border-radius: 999px;
}#dc-layout-hero .hero__title{
  margin: 0 0 0.5rem;
  font-family: var(--head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.12;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
}#dc-layout-hero p{
  margin: 0;
  color: #cfcfcf;
  font-size: 1.05rem;
}#dc-layout-hero .hero__cta{
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.7rem 1.8rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
  text-decoration: none;
}#dc-layout-hero .hero__cta:hover{
  background: var(--blue-d);
}
#dc-layout-menubar{
  display: flex;
  align-items: center;
  background: var(--ink-2);
}#dc-layout-menubar .menu{
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}#dc-layout-menubar .menu a{
  display: block;
  padding: 0.75rem 1rem;
  color: #e6e6e6;
  text-decoration: none;
  font-family: var(--head);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.82rem;
}#dc-layout-menubar .menu > li > a:hover{
  color: #fff;
  background: var(--red);
}#dc-layout-menubar .menu li{
  position: relative;
}#dc-layout-menubar .menu li .menu{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: max-content;
  min-width: 13rem;
  padding: 0.25rem 0;
  background: var(--ink);
  border-top: 2px solid var(--red);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  z-index: 50;
}#dc-layout-menubar .menu li:hover > .menu{
  display: flex;
}#dc-layout-menubar .menu li .menu a{
  padding: 0.55rem 1rem;
  width: 100%;
}#dc-layout-menubar .menu li .menu a:hover{
  background: var(--blue);
  color: #fff;
}#dc-layout-menubar .menu-toggle,#dc-layout-menubar .menu-caret{
  display: none;
}#dc-layout-menubar .menu li.has-mega{
  position: static;
}#dc-layout-menubar .mega-panel{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--ink);
  border-top: 2px solid var(--red);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}#dc-layout-menubar .has-mega:hover > .mega-panel{
  display: block;
}#dc-layout-menubar .mega-panel::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
}#dc-layout-menubar .mega-panel__inner{
  display: flex;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
}#dc-layout-menubar .mega-cols{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}#dc-layout-menubar .mega-col{
  min-width: 150px;
}#dc-layout-menubar .mega-col__head{
  display: block;
  padding: 0 0 0.4rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: var(--head);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.8rem;
}#dc-layout-menubar .mega-col ul{
  margin: 0;
  padding: 0;
  list-style: none;
}#dc-layout-menubar .mega-col li a{
  padding: 0.3rem 0;
  color: #cfcfcf;
  font-family: inherit;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
}#dc-layout-menubar .mega-col li a:hover{
  background: none;
  color: #fff;
  text-decoration: underline;
}#dc-layout-menubar .mega-feature{
  position: relative;
  flex: 0 0 220px;
  align-self: stretch;
  min-height: 150px;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
}#dc-layout-menubar .mega-feature img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}#dc-layout-menubar .mega-feature__promo{
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
  color: #fff;
  font-family: var(--head);
  font-size: 0.85rem;
}#dc-layout-menubar.js-intent .menu li:hover > .menu,#dc-layout-menubar.js-intent .has-mega:hover > .mega-panel{
  display: none;
}#dc-layout-menubar.js-intent .menu.is-armed li:hover > .menu,#dc-layout-menubar.js-intent .menu li:focus-within > .menu{
  display: flex;
}#dc-layout-menubar.js-intent .menu.is-armed .has-mega:hover > .mega-panel,#dc-layout-menubar.js-intent .has-mega:focus-within > .mega-panel{
  display: block;
}#dc-layout-menubar .menu li:focus-within > .menu{
  display: flex;
}#dc-layout-menubar .has-mega:focus-within > .mega-panel{
  display: block;
}@media (max-width: 768px){#dc-layout-menubar{
    position: relative;
    flex-wrap: wrap;
  }#dc-layout-menubar .menu-toggle{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 46px;
    height: 46px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }#dc-layout-menubar .menu-toggle span{
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: #e6e6e6;
  }#dc-layout-menubar .menu{
    display: none;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    background: var(--ink);
  }#dc-layout-menubar.is-open .menu{
    display: flex;
  }#dc-layout-menubar .menu li{
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }#dc-layout-menubar .menu a{
    flex: 1 1 auto;
  }#dc-layout-menubar .menu li .menu,#dc-layout-menubar .mega-panel{
    display: none;
    position: static;
    width: 100%;
    min-width: 0;
    border-top: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.25);
  }#dc-layout-menubar .menu li.open > .menu,#dc-layout-menubar .has-mega.open > .mega-panel{
    display: block;
  }#dc-layout-menubar .mega-panel__inner{
    flex-direction: column;
    width: 100%;
    max-width: none;
    padding: 0.5rem 1rem 0.75rem;
  }#dc-layout-menubar .mega-feature{
    flex-basis: auto;
    min-height: 120px;
    margin-top: 0.5rem;
  }#dc-layout-menubar .menu-caret{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }#dc-layout-menubar .menu-caret::before{
    content: "+";
    color: #e6e6e6;
    font-size: 1.25rem;
    line-height: 1;
  }#dc-layout-menubar .menu li.open > .menu-caret::before{
    content: "-"; 
  }}
#dc-layout-sidebar{
  background: #fff;
  border: 1px solid var(--line);
  padding: 0;
  font-size: 0.85rem;
}#dc-layout-sidebar h2{
  margin: 0;
  padding: 0.55rem 0.85rem;
  background: var(--red);
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}#dc-layout-sidebar .cats-empty{
  margin: 0;
  padding: 0.75rem 0.85rem;
  color: var(--muted);
}#dc-layout-sidebar .cats{
  list-style: none;
  margin: 0;
  padding: 0;
}#dc-layout-sidebar .cats li{
  border-bottom: 1px solid #f0f0f0;
}#dc-layout-sidebar .cats li:last-child{
  border-bottom: 0;
}#dc-layout-sidebar .cat-row{
  display: flex;
  align-items: stretch;
}#dc-layout-sidebar .cats a{
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 0.5rem 0.85rem;
  color: var(--ink);
  text-decoration: none;
}#dc-layout-sidebar .cats a:hover{
  color: var(--blue);
  background: #f7f7f7;
}#dc-layout-sidebar .cats a.active{
  color: var(--blue);
  font-weight: 700;
  background: #eaf4fb;
  box-shadow: inset 3px 0 0 var(--blue);
}#dc-layout-sidebar .cat-toggle{
  flex: 0 0 2.2rem;
  border: 0;
  border-left: 1px solid #f0f0f0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--head);
  font-size: 1.05rem;
  line-height: 1;
}#dc-layout-sidebar .cat-toggle::before{
  content: "+";
}#dc-layout-sidebar .cat-toggle:hover{
  color: var(--blue);
}#dc-layout-sidebar li.open > .cat-row .cat-toggle{
  color: var(--ink);
}#dc-layout-sidebar li.open > .cat-row .cat-toggle::before{
  content: "\2212"; 
}#dc-layout-sidebar .cats .cats{
  display: none;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
}#dc-layout-sidebar li.open > .cats{
  display: block;
}#dc-layout-sidebar .cats .cats a{
  padding-left: 1.6rem;
}#dc-layout-sidebar .cats .cats .cats a{
  padding-left: 2.4rem;
}#dc-layout-sidebar .cats .cats .cats .cats a{
  padding-left: 3.2rem;
}
#dc-layout-body{
  padding-inline: 1.5rem;
}#dc-layout-body .shop{
  padding: 2.25rem 0;
}#dc-layout-body .shop__heading{
  margin: 0 0 1.2rem;
  font-size: 1.5rem;
  border-left: 4px solid var(--red);
  padding-left: 0.6rem;
}#dc-layout-body .shop__empty{
  color: var(--muted);
}#dc-layout-body .shop__count{
  margin: -0.6rem 0 1rem;
  color: var(--muted);
  font-size: 0.85rem;
}#dc-layout-body .grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}#dc-layout-body .card{
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: #fff;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}#dc-layout-body .card:hover{
  border-color: #bcbcbc;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}#dc-layout-body .card__media{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 0.4rem;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden; 
  text-decoration: none;
}#dc-layout-body .badge{
  position: relative;
  z-index: 2; 
  background: var(--red);
  color: #fff;
  font-family: var(--head);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.62rem;
  padding: 0.12rem 0.4rem;
  border-radius: 2px;
}#dc-layout-body .badge--tag{
  cursor: pointer;
  transition: background 0.15s ease;
}#dc-layout-body .badge--tag:hover,#dc-layout-body .badge--tag:focus-visible{
  background: var(--blue);
  outline: none;
}#dc-layout-body .card__soldout{
  position: absolute;
  bottom: 1rem;
  left: 0;
  width: 5rem;
  z-index: 3;
  padding: 0.16rem 0;
  background: var(--blue);
  color: #fff;
  text-align: center;
  font-family: var(--head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.6rem;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}#dc-layout-body .card__body{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.75rem;
  flex: 1;
  text-align: center; 
}#dc-layout-body .card__cat{
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}#dc-layout-body .card__rating{
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.15rem;
  font-size: 0.78rem;
}#dc-layout-body .card__stars{
  color: #e8a200;
  letter-spacing: 0.03em;
}#dc-layout-body .card__ratingct{
  color: var(--muted);
}#dc-layout-body .card__name{
  margin: 0;
  font-size: 0.95rem;
  font-family: var(--body);
  font-weight: 600;
  text-transform: none;
  line-height: 1.25;
}#dc-layout-body .card__name a{
  color: var(--ink);
  text-decoration: none;
}#dc-layout-body .card__name a:hover{
  color: var(--blue);
}#dc-layout-body .card__foot{
  display: flex;
  align-items: stretch;
  margin-top: auto;
  border-top: 1px solid var(--line);
}#dc-layout-body .card__price{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.6rem;
  background: var(--ink);
  color: #fff;
  font-family: var(--head);
  font-weight: 600;
}#dc-layout-body .card__foot--oos .card__price{
  background: #6c6c6c; 
}#dc-layout-body .card__add{
  margin: 0;
  display: flex;
}#dc-layout-body .card__addbtn,#dc-layout-body .card__options{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  padding: 0;
  background: var(--blue);
  color: #fff;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}#dc-layout-body .card__addbtn:hover,#dc-layout-body .card__options:hover{
  background: var(--blue-d);
}#dc-layout-body .card__count{
  align-self: center;
  margin-top: auto;
  background: var(--blue);
  color: #fff;
  font-family: var(--head);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 3px;
}#dc-layout-body .card__img{
  position: absolute;
  inset: 0;
  margin: auto; 
  max-width: 88%;
  max-height: 88%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
}#dc-layout-body .card:hover .card__img{
  transform: scale(1.3);
}#dc-layout-body .pager{
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  padding: 1.25rem 0 0.5rem;
}#dc-layout-body .pager__link{
  display: inline-block;
  min-width: 2rem;
  text-align: center;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--head);
}#dc-layout-body .pager__link:hover{
  border-color: var(--blue);
  color: var(--blue);
}#dc-layout-body .pager__link--active{
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}#dc-layout-body .product{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 1.5rem 0;
}#dc-layout-body .product__figure{
  display: block;
  cursor: zoom-in;
}#dc-layout-body .product__img{
  width: 100%;
  border: 1px solid var(--line);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}#dc-layout-body .product__img--ph{
  background: hsl(calc(var(--seed, 1) * 47deg) 30% 92%);
}#dc-layout-body .product__name{
  margin: 0.25rem 0;
  font-size: 1.9rem;
}#dc-layout-body .product__cat{
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}#dc-layout-body .product__price{
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-family: var(--head);
  font-weight: 600;
  font-size: 1.3rem;
  padding: 0.25rem 0.7rem;
  border-radius: 3px;
  margin: 0.5rem 0 1rem;
}#dc-layout-body .product__badges{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}#dc-layout-body .product__badges a.badge{
  color: #fff;
  text-decoration: none;
}#dc-layout-body .product__badges a.badge:hover,#dc-layout-body .product__badges a.badge:focus-visible{
  filter: brightness(1.12);
  text-decoration: none;
}#dc-layout-body .product__oos{
  margin: 0.9rem 0 1.2rem;
  padding: 0.9rem 1rem;
  background: #fdecec;
  border-left: 5px solid var(--red);
  border-radius: 3px;
  color: #8a1010;
  font-family: var(--head);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
}#dc-layout-body .product__buy{
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}#dc-layout-body .product__buy--variable{
  flex-wrap: wrap;
  align-items: flex-end;
}#dc-layout-body .product__voption{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  flex: 1 1 12rem;
}#dc-layout-body .product__vselect{
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
  color: var(--ink, #222);
  text-transform: none;
  letter-spacing: normal;
}#dc-layout-body .product__addons{
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: 100%;
  margin: 0.3rem 0 0.8rem;
  padding: 0.75rem 0.85rem;
  background: #fbfcfd;
  border: 1px solid #d5dbe1;
  border-radius: 5px;
}#dc-layout-body .product__addon{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}#dc-layout-body .product__addon--check{
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
}#dc-layout-body .product__addon-label{
  color: #495057;
}#dc-layout-body .product__addon-price{
  color: var(--blue);
  font-weight: 600;
}#dc-layout-body .product__addon-input{
  padding: 0.6rem 0.7rem;
  background: #fff;
  border: 2px solid #b9c0c7;
  border-radius: 4px;
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}#dc-layout-body .product__addon-input:hover{
  border-color: #8d959d;
}#dc-layout-body .product__addon-input:focus{
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(2, 116, 183, 0.18);
}#dc-layout-body .product__addon-label{
  font-weight: 600;
}#dc-layout-body .product__addon-desc{
  font-size: 0.78rem;
  color: var(--muted);
}#dc-layout-body .product__addon-sub{
  margin: 0.5rem 0 0.2rem 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}#dc-layout-body .product__addon-radios{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}#dc-layout-body .product__addon-radio{
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}#dc-layout-body .product__addon-radio .product__addon-price{
  white-space: nowrap;
}#dc-layout-body .product__addon-swatches{
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}#dc-layout-body .product__addon-swatch{
  cursor: pointer;
  line-height: 0;
}#dc-layout-body .product__addon-swatch input{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}#dc-layout-body .product__swatch-box{
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 2px transparent;
}#dc-layout-body .product__addon-swatch input:checked + .product__swatch-box{
  box-shadow: 0 0 0 2px var(--blue);
}#dc-layout-body .product__qty{
  width: 4.5rem;
  padding: 0.5rem;
  background: #fff;
  border: 2px solid #b9c0c7;
  border-radius: 4px;
  font: inherit;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}#dc-layout-body .product__qty:hover{
  border-color: #8d959d;
}#dc-layout-body .product__qty:focus{
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(2, 116, 183, 0.18);
}#dc-layout-body .product__add{
  padding: 0.6rem 1.6rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}#dc-layout-body .product__add:hover{
  background: var(--blue-d);
}#dc-layout-body .product__body{
  line-height: 1.7;
}#dc-layout-body .related{
  margin-top: 1.5rem;
}#dc-layout-body .related__heading{
  font-size: 1.1rem;
  border-left: 4px solid var(--red);
  padding-left: 0.6rem;
  margin: 0 0 1rem;
}@media (max-width: 720px){#dc-layout-body .product{
    grid-template-columns: 1fr;
  }}#dc-layout-body .page{
  padding: 1.5rem 0;
}#dc-layout-body .page__title{
  font-size: 2rem;
  margin: 0 0 1rem;
}#dc-layout-body .page__body{
  line-height: 1.7;
  max-width: 760px;
}#dc-layout-body .dc-richtext img{
  max-width: 100%;
  height: auto;
}#dc-layout-body .dc-richtext figure{
  width: fit-content;
  max-width: 100%;
}#dc-layout-body .dc-richtext figcaption{
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.35rem;
}#dc-layout-body .dc-richtext::after{
  content: "";
  display: block;
  clear: both;
}#dc-layout-body .dc-richtext figure[data-trix-attachment*='"layout":"left"']{
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 0 0;
  clear: both;
}#dc-layout-body .dc-richtext figure[data-trix-attachment*='"layout":"center"']{
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  clear: both;
}#dc-layout-body .dc-richtext figure[data-trix-attachment*='"layout":"right"']{
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0 auto;
  clear: both;
}#dc-layout-body .dc-richtext figure[data-trix-attachment*='"layout":"wrap-left"']{
  float: left;
  max-width: 60%;
  margin: 0 1rem 0.5rem 0;
}#dc-layout-body .dc-richtext figure[data-trix-attachment*='"layout":"wrap-right"']{
  float: right;
  max-width: 60%;
  margin: 0 0 0.5rem 1rem;
}#dc-layout-body .cart{
  padding: 1.5rem 0;
}#dc-layout-body .cart__heading{
  margin: 0 0 1rem;
  font-size: 1.5rem;
  border-left: 4px solid var(--red);
  padding-left: 0.6rem;
}#dc-layout-body .cart__empty{
  color: var(--muted);
}#dc-layout-body .cart__grid{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}#dc-layout-body .cart__items{
  min-width: 0;
}#dc-layout-body .cart__table{
  width: 100%;
  border-collapse: collapse;
}#dc-layout-body .cart__th{
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
  padding: 0.5rem;
}#dc-layout-body .cart__th--price,#dc-layout-body .cart__th--qty,#dc-layout-body .cart__th--line{
  text-align: right;
}#dc-layout-body .cart__cell{
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid #f1f3f5;
  vertical-align: middle;
}#dc-layout-body .cart__cell--price,#dc-layout-body .cart__cell--line{
  text-align: right;
  white-space: nowrap;
}#dc-layout-body .cart__cell--qty{
  text-align: right;
}#dc-layout-body .cart__cell--thumb{
  width: 72px;
}#dc-layout-body .cart__cell--remove{
  width: 2.2rem;
  text-align: right;
}#dc-layout-body .cart__thumb{
  display: block;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  background: #fff;
}#dc-layout-body .cart__thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}#dc-layout-body .cart__thumb--ph{
  background: #f5f5f5;
}#dc-layout-body .cart__name{
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}#dc-layout-body .cart__name:hover{
  color: var(--blue);
}#dc-layout-body .cart__extras{
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--muted, #6c757d);
  font-weight: 400;
}#dc-layout-body .cart__extra{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.05rem 0;
}#dc-layout-body .cart__extra-amt{
  white-space: nowrap;
}#dc-layout-body .checkout__editcart{
  margin: 0.4rem 0 1rem;
  font-size: 0.9rem;
}#dc-layout-body .vf{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
  border: 1px solid var(--line, #e3e3e3);
  border-radius: 8px;
  background: #fff;
}#dc-layout-body .vf__group{
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}#dc-layout-body .vf__glabel{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6c757d);
  font-weight: 600;
}#dc-layout-body .vf__opts{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}#dc-layout-body .vf__opt{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line, #d7d7d7);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ink, #222);
  text-decoration: none;
  background: #fff;
  transition: background 0.12s, border-color 0.12s;
}#dc-layout-body .vf__opt:hover{
  border-color: var(--blue, #0d6efd);
  color: var(--blue, #0d6efd);
}#dc-layout-body .vf__opt--on{
  background: var(--blue, #0d6efd);
  border-color: var(--blue, #0d6efd);
  color: #fff;
}#dc-layout-body .vf__opt--on:hover{
  color: #fff;
}#dc-layout-body .vf__opt--off{
  opacity: 0.4;
  cursor: not-allowed;
  background: #f3f3f3;
}#dc-layout-body .vf__ct{
  font-size: 0.72rem;
  opacity: 0.75;
}#dc-layout-body .vf__opt--on .vf__ct{
  opacity: 0.9;
}#dc-layout-body .vf__active{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line, #e3e3e3);
}#dc-layout-body .vf__chip{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  text-decoration: none;
  background: #eef4ff;
  color: #0b5ed7;
  border: 1px solid #cfe0ff;
}#dc-layout-body .vf__chip:hover{
  background: #dfe9ff;
}#dc-layout-body .vf__x{
  font-size: 1rem;
  line-height: 1;
}#dc-layout-body .vf__clear{
  font-size: 0.8rem;
  color: var(--muted, #6c757d);
  margin-left: 0.3rem;
}#dc-layout-body .vf__count{
  font-size: 0.9rem;
  color: var(--muted, #6c757d);
  margin: 0 0 0.8rem;
}#dc-layout-body .cart__qty{
  width: 4rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  text-align: right;
}#dc-layout-body .cart__remove{
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 0.3rem;
}#dc-layout-body .cart__remove:hover{
  color: var(--red);
}#dc-layout-body .cart__items-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}#dc-layout-body .cart__link{
  color: var(--ink);
  text-decoration: none;
}#dc-layout-body .cart__link:hover{
  color: var(--blue);
}#dc-layout-body .cart__btn--update{
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  font-family: var(--head);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.78rem;
}#dc-layout-body .cart__btn--update:hover{
  border-color: var(--blue);
  color: var(--blue);
}#dc-layout-body .cart__summary{
  position: sticky;
  top: 1rem;
  border: 1px solid var(--line);
  background: #fff;
  padding: 1rem 1.1rem;
}#dc-layout-body .cart__summary-heading{
  margin: 0 0 0.75rem;
  font-size: 1rem;
  border-left: 4px solid var(--red);
  padding-left: 0.5rem;
}#dc-layout-body .cart__summary-row{
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  color: var(--ink-2);
}#dc-layout-body .cart__summary-row--total{
  border-top: 2px solid var(--line);
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
}#dc-layout-body .cart__summary-row--discount{
  color: #1b5e34;
}#dc-layout-body .cart__coupon{
  display: flex;
  gap: 0.4rem;
  margin: 0.5rem 0;
}#dc-layout-body .cart__coupon-input{
  flex: 1;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
}#dc-layout-body .cart__coupon-apply{
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--blue);
  background: #fff;
  color: var(--blue);
  border-radius: 3px;
  cursor: pointer;
}#dc-layout-body .cart__coupon-remove{
  background: none;
  border: 0;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}#dc-layout-body .cart__summary-note{
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0.3rem 0 0.6rem;
}#dc-layout-body .cart__notice{
  background: #eef4ff;
  border: 1px solid #b9ccf2;
  color: #1b3a7a;
  padding: 0.6rem 0.9rem;
  border-radius: 3px;
  margin-bottom: 1rem;
}#dc-layout-body .cart__checkout{
  display: block;
  text-align: center;
  margin-top: 0.9rem;
  padding: 0.7rem 1rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
  text-decoration: none;
}#dc-layout-body .cart__checkout:hover{
  background: var(--blue-d);
}@media (max-width: 760px){#dc-layout-body .cart__grid{
    grid-template-columns: 1fr;
  }#dc-layout-body .cart__summary{
    position: static;
  }#dc-layout-body .cart__cell--thumb,#dc-layout-body .cart__th--thumb{
    display: none;
  }}#dc-layout-body .contact{
  padding: 1.5rem 0;
  max-width: 620px;
}#dc-layout-body .contact__heading{
  margin: 0 0 1rem;
  font-size: 1.8rem;
}#dc-layout-body .contact__thanks{
  line-height: 1.7;
  color: #2b8a3e;
}#dc-layout-body .contact__form{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}#dc-layout-body .contact__field{
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}#dc-layout-body .contact__label{
  font-weight: 600;
  font-size: 0.9rem;
}#dc-layout-body .contact__input,#dc-layout-body .contact__textarea{
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
  width: 100%;
}#dc-layout-body .contact__textarea{
  resize: vertical;
  min-height: 8rem;
}#dc-layout-body .contact__submit{
  align-self: flex-start;
  padding: 0.65rem 1.8rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}#dc-layout-body .contact__submit:hover{
  background: var(--blue-d);
}#dc-layout-body .checkout{
  padding: 1.5rem 0;
  max-width: 640px;
}#dc-layout-body .checkout__error{
  background: #fff0f0;
  border: 1px solid #f1aeb5;
  color: #842029;
  padding: 0.6rem 0.9rem;
  border-radius: 3px;
  margin: 0 0 1rem;
}#dc-layout-body .checkout__summary{
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}#dc-layout-body .checkout__summary th,#dc-layout-body .checkout__summary td{
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
}#dc-layout-body .checkout__summary th{
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}#dc-layout-body .checkout__qty,#dc-layout-body .checkout__price,#dc-layout-body .checkout__line{
  text-align: right;
}#dc-layout-body .checkout__form{
  display: grid;
  gap: 0.9rem;
}#dc-layout-body .checkout__label{
  display: grid;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: #495057;
}#dc-layout-body .checkout__input,#dc-layout-body .checkout__textarea{
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  font: inherit;
}#dc-layout-body .checkout__textarea{
  resize: vertical;
}#dc-layout-body .checkout__place{
  justify-self: start;
  padding: 0.65rem 1.8rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}#dc-layout-body .checkout__place:hover{
  background: var(--blue-d);
}#dc-layout-body .checkout__thanks{
  font-size: 1.1rem;
}#dc-layout-body .checkout__number strong{
  font-family: monospace;
}#dc-layout-body .checkout__home{
  color: var(--blue);
}#dc-layout-body .checkout__country{
  margin: 0 0 1.2rem;
}#dc-layout-body .checkout__ships,#dc-layout-body .checkout__pays{
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.6rem 0.9rem 0.8rem;
  margin: 0;
}#dc-layout-body .checkout__ships legend,#dc-layout-body .checkout__pays legend{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0 0.4rem;
}#dc-layout-body .checkout__ship,#dc-layout-body .checkout__pay{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.2rem 0.55rem;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  cursor: pointer;
}#dc-layout-body .checkout__ship + .checkout__ship,#dc-layout-body .checkout__pay + .checkout__pay{
  border-top: 1px solid var(--line);
}#dc-layout-body .checkout__shipdesc{
  grid-column: 2;
  font-size: 0.78rem;
  color: var(--muted);
}#dc-layout-body .checkout__totals{
  display: grid;
  gap: 0.35rem;
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}#dc-layout-body .checkout__totrow{
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}#dc-layout-body .checkout__totrow--total{
  font-weight: 700;
  font-size: 1.05rem;
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
  margin-top: 0.15rem;
}#dc-layout-body .checkout__age{
  border: 1px solid #f1c97b;
  background: #fff8ea;
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  margin: 0;
}#dc-layout-body .checkout__agelabel{
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.88rem;
  cursor: pointer;
}#dc-layout-body .track__result{
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.2rem;
}#dc-layout-body .account__notice{
  background: #e7f6ec;
  border: 1px solid #b7e1c4;
  color: #1b5e34;
  padding: 0.6rem 0.9rem;
  border-radius: 3px;
  margin: 0 0 1rem;
}#dc-layout-body .account__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}@media (max-width: 640px){#dc-layout-body .account__grid{
    grid-template-columns: 1fr;
  }}#dc-layout-body .account__subhead{
  font-size: 1.1rem;
  margin: 0 0 0.8rem;
}#dc-layout-body .account__hello{
  margin-bottom: 1.2rem;
}#dc-layout-body .account__orders{
  width: 100%;
}#dc-layout-body .account__link{
  color: var(--blue);
}#dc-layout-body .account__reorder{
  display: inline;
}#dc-layout-body .account__link-btn{
  background: none;
  border: 0;
  color: var(--blue);
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-decoration: underline;
}#dc-layout-body .account__badge{
  display: inline-block;
  background: #e7f6ec;
  color: #1b5e34;
  border-radius: 3px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
}#dc-layout-body .checkout__label--inline{
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.9rem;
}#dc-layout-body .reviews{
  margin: 2rem 0;
  max-width: 720px;
}#dc-layout-body .reviews__heading{
  font-size: 1.2rem;
}#dc-layout-body .reviews__stars{
  color: #e8a200;
  letter-spacing: 0.05em;
}#dc-layout-body .reviews__summary{
  font-size: 1rem;
}#dc-layout-body .reviews__summary--none{
  color: var(--muted);
}#dc-layout-body .reviews__list{
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}#dc-layout-body .reviews__item{
  border-top: 1px solid var(--line);
  padding: 0.9rem 0;
}#dc-layout-body .reviews__head{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}#dc-layout-body .reviews__verified{
  font-size: 0.72rem;
  background: #e7f6ec;
  color: #1b5e34;
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
}#dc-layout-body .reviews__form{
  margin-top: 1rem;
  max-width: 420px;
}#dc-layout-body .track__status{
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}#dc-layout-body .track__pending{
  color: var(--muted);
  margin: 0;
}#dc-layout-body .track__tracking{
  margin: 0;
}#dc-layout-body .dc-carousel{
  position: relative;
}#dc-layout-body .dc-carousel__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--dc-cols, 4) - 1) * 1rem) / var(--dc-cols, 4)
  );
  gap: 1rem;
  overflow-x: auto;
  
  scroll-snap-type: x proximity;
  padding-bottom: 0.5rem;
  
  scrollbar-width: none;
  -ms-overflow-style: none;
}#dc-layout-body .dc-carousel__track::-webkit-scrollbar{
  display: none;
}#dc-layout-body .reviewrow--carousel{
  scrollbar-width: none;
  -ms-overflow-style: none;
}#dc-layout-body .reviewrow--carousel::-webkit-scrollbar{
  display: none;
}#dc-layout-body .dc-carousel__track > .card{
  scroll-snap-align: start;
}#dc-layout-body .dc-carousel__nav{
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}#dc-layout-body .dc-carousel__nav:hover{
  background: var(--blue);
  opacity: 1;
}#dc-layout-body .dc-carousel__nav--prev{
  left: -0.6rem;
}#dc-layout-body .dc-carousel__nav--next{
  right: -0.6rem;
}@media (max-width: 600px){#dc-layout-body .dc-carousel__track{
    grid-auto-columns: 70%; 
  }}#dc-layout-body .tagcloud{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  align-items: baseline;
  line-height: 1.5;
  padding: 0.5rem 0 1rem;
}#dc-layout-body .tagcloud__tag{
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}#dc-layout-body .tagcloud__tag:hover{
  color: var(--blue);
  border-bottom-color: var(--blue);
}#dc-layout-body .tagcloud__count{
  color: var(--muted);
  font-size: 0.7em;
}#dc-layout-body .account__2fa-steps{
  padding-left: 1.2rem;
}#dc-layout-body .account__2fa-steps > li{
  margin-bottom: 1.2rem;
}#dc-layout-body .account__qr{
  margin: 0.8rem 0;
}#dc-layout-body .account__qr svg{
  border: 1px solid var(--line);
  border-radius: 4px;
  display: block;
}#dc-layout-body .account__secret{
  background: #f3f4f6;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.15rem 0.4rem;
  font-size: 0.85rem;
  word-break: break-all;
  user-select: all;
}#dc-layout-body .account__recovery{
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.4rem;
  max-width: 700px;
}#dc-layout-body .account__recovery code{
  display: block;
  background: #f3f4f6;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.4rem 0.6rem;
  text-align: center;
  user-select: all;
}#dc-layout-body .account__tabs{
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--line);
  margin: 1rem 0 1.4rem;
}#dc-layout-body .account__tab{
  padding: 0.55rem 1.1rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  margin-bottom: -2px;
  font-weight: 600;
}#dc-layout-body .account__tab:hover{
  color: var(--blue);
}#dc-layout-body .account__tab--active{
  color: var(--blue);
  background: #fff;
  border-color: var(--line);
  border-bottom: 2px solid #fff;
}#dc-layout-body .account__logout{
  display: inline;
  margin-left: 0.8rem;
}#dc-layout-body .account__panel{
  display: none;
}#dc-layout-body .account__panel--active{
  display: block;
}#dc-layout-body .account__card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.2rem;
  max-width: 720px;
}#dc-layout-body .account__card .account__subhead{
  margin-top: 0;
}#dc-layout-body .account__frow{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.2rem;
}#dc-layout-body .account__frow--city{
  grid-template-columns: 2fr 1.5fr 1fr;
}#dc-layout-body .account__field--half{
  max-width: calc(50% - 0.6rem);
}#dc-layout-body .account__input--code{
  letter-spacing: 0.15em;
}#dc-layout-body .account__form-actions{
  display: flex;
  align-items: center;
  gap: 0.8rem;
}@media (max-width: 640px){#dc-layout-body .account__frow,#dc-layout-body .account__frow--city{
    grid-template-columns: 1fr;
  }#dc-layout-body .account__field--half{
    max-width: none;
  }}#dc-layout-body .account__addr-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.2rem;
}#dc-layout-body .account__addr-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}#dc-layout-body .account__addr-card--default{
  border-color: var(--blue);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.18);
}#dc-layout-body .account__addr-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}#dc-layout-body .account__addr-body{
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
}#dc-layout-body .account__addr-actions{
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
}#dc-layout-body .account__addr-actions form{
  display: inline;
}#dc-layout-body .account__btn{
  display: inline-block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}#dc-layout-body .account__btn:hover{
  border-color: var(--blue);
  color: var(--blue);
}#dc-layout-body .account__btn--danger:hover{
  border-color: #dc2626;
  color: #dc2626;
}#dc-layout-body .account__badge--muted{
  background: #f3f4f6;
  color: #4b5563;
}#dc-layout-body .account__reveal > summary{
  list-style: none;
  cursor: pointer;
}#dc-layout-body .account__reveal > summary::-webkit-details-marker{
  display: none;
}#dc-layout-body .account__add-btn{
  display: inline-block;
  background: var(--blue);
  color: #fff;
  border-radius: 5px;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
}#dc-layout-body .account__reveal[open] > summary.account__add-btn{
  display: none;
}#dc-layout-body .account__reveal > .account__card{
  margin-top: 1rem;
}#dc-layout-body .account__ticket{
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.6rem;
  color: inherit;
  text-decoration: none;
}#dc-layout-body .account__ticket:hover{
  border-color: var(--blue);
}#dc-layout-body .account__ticket-subject{
  font-weight: 600;
  flex: 1;
}#dc-layout-body .account__support-contact{
  margin-top: 1rem;
}#dc-layout-body .tag-cloud{
  line-height: 2.4;
}#dc-layout-body .tag-cloud__tag{
  display: inline-block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25em 0.9em;
  margin: 0 0.35rem 0.35rem 0;
  color: inherit;
  text-decoration: none;
}#dc-layout-body .tag-cloud__tag:hover{
  border-color: var(--blue);
  color: var(--blue);
}#dc-layout-body .tag-cloud__count{
  color: #6b7280;
  font-size: 0.75em;
}#dc-layout-body .tag-cloud{
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}#dc-layout-body .tag-cloud__tag[hidden]{
  display: none;
}#dc-layout-body .tag-cloud__controls{
  text-align: center;
  margin-bottom: 1.2rem;
  color: #6b7280;
}#dc-layout-body .tag-cloud__controls input[type="range"]{
  display: block;
  width: min(360px, 90%);
  margin: 0.4rem auto 0;
  accent-color: var(--blue);
}#dc-layout-body .tag-cloud__shown{
  font-weight: 700;
  color: var(--ink);
}#dc-layout-body .product__price:has(.price__now){
  background: none;
  padding-left: 0;
  padding-right: 0;
}#dc-layout-body .product__price .price__was{
  font-size: 0.82em;
}#dc-layout-body .card__price .price__was{
  color: rgba(255, 255, 255, 0.62);
}#dc-layout-body .card__price .price__now{
  color: #ff6b6b;
}#dc-layout-body .product__pricerow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}#dc-layout-body .product__priceaside{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  margin-left: auto;
  text-align: right;
}#dc-layout-body .product__priceaside .dc-push-watch__hint{
  max-width: 15rem;
}#dc-layout-body .slides{
  position: relative;
  margin: 0 0 1.5rem;
  overflow: hidden;
  background: var(--ink);
}#dc-layout-body .slides__track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}#dc-layout-body .slides__track::-webkit-scrollbar{
  display: none;
}#dc-layout-body .slides__slide{
  flex: 0 0 100%;
  scroll-snap-align: center;
}#dc-layout-body .slides__slide img,#dc-layout-body .slides__slide a{
  -webkit-user-drag: none;
  user-select: none;
}#dc-layout-body .slides__slide a,#dc-layout-body .slides__slide > img{
  display: block;
  width: 100%;
  height: 100%;
}#dc-layout-body .slides__slide img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}#dc-layout-body .slides--short .slides__slide{ height: 220px; }#dc-layout-body .slides--medium .slides__slide{ height: 360px; }#dc-layout-body .slides--tall .slides__slide{ height: 500px; }#dc-layout-body .slides__slide a{ position: relative; }#dc-layout-body .slides__cap{
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  color: #fff;
}#dc-layout-body .slides__cap strong{
  font-family: var(--head);
  font-size: 1.5rem;
  text-transform: uppercase;
}#dc-layout-body .slides__cap span{ font-size: 0.95rem; }#dc-layout-body .slides__slide a{
  text-decoration: none;
  color: inherit;
}#dc-layout-body .slides--split .slides__slide a,#dc-layout-body .slides--split .slides__slide > img{
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.25rem, 4vw, 3rem);
  background: linear-gradient(105deg, #f2f5f8 0%, #fff 55%);
}#dc-layout-body .slides--split .slides__slide img{
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  
  mix-blend-mode: multiply;
}#dc-layout-body .slides--split .slides__cap{
  position: static;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  background: none;
  color: var(--ink);
  padding: 0;
  gap: 0.6rem;
  align-items: flex-start;
  text-align: left;
}#dc-layout-body .slides--split .slides__cap strong{
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}#dc-layout-body .slides--split .slides__cap strong::before{
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  background: var(--red);
  margin-bottom: 0.85rem;
}#dc-layout-body .slides--split .slides__cap span:not(.slides__cta){
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: var(--ink-2);
  max-width: 34ch;
}#dc-layout-body .slides--split .slides__cap .slides__cta{
  display: inline-block;
  color: #fff;
  margin-top: 0.5rem;
  padding: 0.7rem 1.6rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--head);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
  transition: background 0.15s ease;
}#dc-layout-body .slides__slide a:hover .slides__cta{ background: var(--blue-d); }#dc-layout-body .slides--split.slides--short .slides__slide{ height: 320px; }#dc-layout-body .slides--split.slides--medium .slides__slide{ height: 420px; }#dc-layout-body .slides--split.slides--tall .slides__slide{ height: 520px; }@media (max-width: 720px){#dc-layout-body .slides--split .slides__slide a,#dc-layout-body .slides--split .slides__slide > img{
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.75rem;
    text-align: center;
  }#dc-layout-body .slides--split .slides__slide img{ grid-column: 1; grid-row: 1; }#dc-layout-body .slides--split .slides__cap{
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    text-align: center;
  }#dc-layout-body .slides--split .slides__cap strong::before{ margin-left: auto; margin-right: auto; }#dc-layout-body .slides--split .slides__cap span:not(.slides__cta){ max-width: none; }#dc-layout-body .slides--split.slides--short .slides__slide,#dc-layout-body .slides--split.slides--medium .slides__slide,#dc-layout-body .slides--split.slides--tall .slides__slide{ height: auto; min-height: 420px; }}#dc-layout-body .slides__nav,#dc-layout-body .slides__pills{
  opacity: 0;
  transition: opacity 0.18s;
}#dc-layout-body .slides:hover .slides__nav,#dc-layout-body .slides:hover .slides__pills,#dc-layout-body .slides:focus-within .slides__nav,#dc-layout-body .slides:focus-within .slides__pills{
  opacity: 1;
}#dc-layout-body .slides__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}#dc-layout-body .slides__nav:hover{ background: rgba(0, 0, 0, 0.7); }#dc-layout-body .slides__nav--prev{ left: 0.75rem; }#dc-layout-body .slides__nav--next{ right: 0.75rem; }#dc-layout-body .slides__pills{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.6rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}#dc-layout-body .slides__pill{
  width: 9px;
  height: 9px;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}#dc-layout-body .slides__pill.is-on{ background: #fff; }#dc-layout-body .tiles{
  display: grid;
  grid-template-columns: repeat(var(--tile-cols, 4), minmax(0, 1fr));
  gap: 1rem;
}#dc-layout-body .tile a{ display: block; color: inherit; text-decoration: none; }#dc-layout-body .tile__img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}#dc-layout-body .tile__img--ph{ display: block; background: #f2f4f6; }#dc-layout-body .tile__cap{
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.15rem 0;
}#dc-layout-body .tile__label{
  font-family: var(--head);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}#dc-layout-body .tile__text{ font-size: 0.85rem; color: var(--muted); line-height: 1.35; }#dc-layout-body .tile--overlay a{ position: relative; }#dc-layout-body .tile--overlay .tile__cap{
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.75rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
  color: #fff;
  border-radius: 0 0 4px 4px;
}#dc-layout-body .tile--overlay .tile__text{ color: rgba(255, 255, 255, 0.85); }#dc-layout-body .tile:hover .tile__img{
  border-color: var(--blue);
  box-shadow: 0 4px 14px rgba(15, 30, 50, 0.1);
}#dc-layout-body .tile:hover .tile__label{ color: var(--blue); }#dc-layout-body .tile--overlay .tile__img{
  border: 0;
  padding: 0;
}#dc-layout-body .brandstrip{
  display: grid;
  grid-template-columns: repeat(var(--brand-cols, 6), minmax(0, 1fr));
  gap: 0.75rem;
  align-items: center;
}#dc-layout-body .brandlogo{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 86px;
  padding: 0.9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}#dc-layout-body .brandlogo img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}#dc-layout-body .brandlogo__name{
  font-family: var(--head);
  font-size: 0.8rem;
  text-align: center;
  text-transform: uppercase;
}#dc-layout-body .brandlogo:hover{
  border-color: var(--blue);
  box-shadow: 0 4px 14px rgba(15, 30, 50, 0.1);
}#dc-layout-body .reviewrow{
  display: grid;
  grid-template-columns: repeat(var(--review-cols, 3), minmax(0, 1fr));
  gap: 1rem;
}#dc-layout-body .reviewrow--carousel{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  gap: 1rem;
}#dc-layout-body .reviewrow--carousel .reviewcard{
  flex: 0 0 calc((100% - (var(--review-cols, 3) - 1) * 1rem) / var(--review-cols, 3));
  scroll-snap-align: start;
}#dc-layout-body .reviewcard{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}#dc-layout-body .reviewcard__stars{ color: #f0a500; letter-spacing: 0.1em; }#dc-layout-body .reviewcard__body{ margin: 0; font-size: 0.9rem; line-height: 1.5; }#dc-layout-body .reviewcard__by{ font-size: 0.82rem; color: var(--muted); }#dc-layout-body .reviewcard__on a{ color: var(--blue); }@media (max-width: 900px){#dc-layout-body .tiles{ grid-template-columns: repeat(min(var(--tile-cols, 4), 2), minmax(0, 1fr)); }#dc-layout-body .brandstrip{ grid-template-columns: repeat(min(var(--brand-cols, 6), 3), minmax(0, 1fr)); }#dc-layout-body .reviewrow{ grid-template-columns: 1fr; }#dc-layout-body .slides--medium .slides__slide{ height: 240px; }#dc-layout-body .slides--tall .slides__slide{ height: 300px; }}@media (max-width: 560px){#dc-layout-body .tiles{ grid-template-columns: 1fr; }#dc-layout-body .brandstrip{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}#dc-layout-body .dc-carousel__track,#dc-layout-body .reviewrow--carousel,#dc-layout-body .slides__track{
  cursor: grab;
}#dc-layout-body .dc-carousel__track.is-dragging,#dc-layout-body .reviewrow--carousel.is-dragging,#dc-layout-body .slides__track.is-dragging{
  cursor: grabbing;
  user-select: none;
}#dc-layout-body .dc-carousel__track.is-dragging a,#dc-layout-body .reviewrow--carousel.is-dragging a,#dc-layout-body .slides__track.is-dragging a{
  pointer-events: none;
}#dc-layout-body .ratio-16x9 .tile__img,#dc-layout-body .ratio-16x9 .slides__slide{ aspect-ratio: 16 / 9; }#dc-layout-body .ratio-4x3 .tile__img,#dc-layout-body .ratio-4x3 .slides__slide{ aspect-ratio: 4 / 3; }#dc-layout-body .ratio-1x1 .tile__img,#dc-layout-body .ratio-1x1 .slides__slide{ aspect-ratio: 1 / 1; }#dc-layout-body .ratio-3x1 .tile__img,#dc-layout-body .ratio-3x1 .slides__slide{ aspect-ratio: 3 / 1; }#dc-layout-body .slides.ratio-16x9 .slides__slide,#dc-layout-body .slides.ratio-4x3 .slides__slide,#dc-layout-body .slides.ratio-1x1 .slides__slide,#dc-layout-body .slides.ratio-3x1 .slides__slide{ height: auto; }#dc-layout-body .brandstrip.ratio-16x9 .brandlogo{ aspect-ratio: 16 / 9; height: auto; }#dc-layout-body .brandstrip.ratio-4x3 .brandlogo{ aspect-ratio: 4 / 3; height: auto; }#dc-layout-body .brandstrip.ratio-1x1 .brandlogo{ aspect-ratio: 1 / 1; height: auto; }#dc-layout-body .block-full{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}#dc-layout-body .block-full > .shop{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}#dc-layout-body .block-full > .slides{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}#dc-layout-body .fit-cover .tile__img,#dc-layout-body .fit-cover .slides__slide img,#dc-layout-body .fit-cover .brandlogo img{
  object-fit: cover;
}#dc-layout-body .fit-contain .tile__img,#dc-layout-body .fit-contain .slides__slide img,#dc-layout-body .fit-contain .brandlogo img{
  object-fit: contain;
  background: #fff;
}#dc-layout-body .slides__slide.is-clone a{
  pointer-events: none;
}#dc-layout-body .pgal__track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border: 1px solid var(--line);
  background: #fff;
  cursor: zoom-in; 
}#dc-layout-body .pgal__track::-webkit-scrollbar{
  display: none;
}#dc-layout-body .pgal__slide{
  flex: 0 0 100%;
  scroll-snap-align: center;
}#dc-layout-body .pgal__img,#dc-layout-body .pgal__track .product__img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 0;
  background: #fff;
  -webkit-user-drag: none;
  user-select: none;
}#dc-layout-body .pgal__track.is-dragging{
  cursor: grabbing;
}#dc-layout-body .pgal__thumbs{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}#dc-layout-body .pgal__thumb{
  width: 50px;
  height: 50px;
  padding: 0;
  flex: 0 0 auto;
  border: 2px solid var(--line);
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease;
}#dc-layout-body .pgal__thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}#dc-layout-body .pgal__thumb:hover{
  border-color: var(--ink-2);
}#dc-layout-body .pgal__thumb.is-on{
  border-color: var(--blue);
}#dc-layout-body .pgal__thumb:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
#dc-layout-footer{
  background: var(--ink);
  color: #bdbdbd;
  font-size: 0.85rem;
  border-top: 4px solid var(--red);
}#dc-layout-footer .footer__inner{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-block: 0.9rem;
  padding-top: 0;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}#dc-layout-footer a{
  color: #bdbdbd;
  margin-left: 1rem;
  text-decoration: none;
}#dc-layout-footer a:hover{
  color: #fff;
}#dc-layout-footer .nl{
  margin-bottom: 0;
}#dc-layout-footer .nl__title{
  font-weight: 600;
  margin: 0 0 0.35rem;
}#dc-layout-footer .nl__form{
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}#dc-layout-footer .nl__form input[type="email"]{
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  min-width: 220px;
  font: inherit;
}#dc-layout-footer .nl__form button{
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}#dc-layout-footer .nl__hp{
  position: absolute;
  left: -9999px;
}#dc-layout-footer .nl__done{
  font-weight: 600;
}#dc-layout-footer .nl__err{
  color: #dc2626;
  font-size: 0.85rem;
}#dc-layout-footer .nl__note{
  font-size: 0.74rem;
  opacity: 0.7;
  margin: 0.3rem 0 0;
}
#dc-layout-bottombar{
  background: var(--ink);
  color: #fff;
  border-top: 2px solid var(--red);
}#dc-layout-bottombar .dock{
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}#dc-layout-bottombar .dock a{
  color: inherit;
  text-decoration: none;
  font-family: var(--head);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.78rem;
  padding: 0.5rem 0.75rem;
}#dc-layout-bottombar .dock a:hover{
  color: var(--blue);
}
/*
 * Web push storefront styles (issue #78). Appended to the page CSS bundle by the
 * addon (the `bundle_css` filter), so it is NOT scoped to a layout region the
 * way module CSS is - every selector here is namespaced .dc-push- by hand.
 *
 * Tokens (--ink, --blue, --line, --head) come from assets/base.css.
 */

/* The opt-in prompt: bottom-LEFT, so it never sits on top of the cart toasts. */
.dc-push-prompt {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  max-width: min(92vw, 380px);
  padding: 0.9rem 1rem;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  animation: dc-push-in 220ms ease-out;
}

@keyframes dc-push-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-push-prompt {
    animation: none;
  }
}

.dc-push-prompt__text {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.dc-push-prompt__yes,
.dc-push-prompt__no {
  flex: 0 0 auto;
  min-height: 44px; /* touch target */
  padding: 0.45rem 1rem;
  font-family: var(--head);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 3px;
  cursor: pointer;
}

.dc-push-prompt__yes {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: #fff;
}

.dc-push-prompt__yes:hover {
  background: var(--blue-d);
}

.dc-push-prompt__no {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}

.dc-push-prompt__no:hover {
  color: var(--ink);
}

/* The per-product watch button. Hidden until the client shows it, so browsers
   with no push support never see a control that would do nothing. */
.dc-push-watch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 0.75rem;
  padding: 0.5rem 0.9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink-2);
  font-family: var(--head);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}

.dc-push-watch[hidden] {
  display: none;
}

.dc-push-watch:hover:not(:disabled) {
  border-color: var(--blue);
  color: var(--blue);
}

.dc-push-watch:disabled {
  opacity: 0.5;
  cursor: default;
}

.dc-push-watch.is-watching {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.dc-push-watch.is-error {
  border-color: var(--red);
  color: var(--red);
}

.dc-push-watch svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.dc-push-watch__hint {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
}

/* The chat widget (issue #155). Rides the page's CSS bundle. */

.dcc {
  --dcc-brand: var(--blue, #0274b7);
  --dcc-ink: #17212b;
  --dcc-muted: #6b7785;
  --dcc-line: #e4e8ed;
  --dcc-paper: #fff;
  --dcc-ground: #f4f6f8;
  --dcc-radius: 16px;

  position: fixed;
  bottom: 20px;
  z-index: 9000;
  font-size: 14px;
  line-height: 1.45;
  color: var(--dcc-ink);
}

.dcc--right { right: 20px; }
.dcc--left { left: 20px; }

/* A switched-off member of staff has no floating widget - the hidden attribute
   must win whatever else styles the root. */
.dcc[hidden] { display: none; }

/* ------------------------------------------------------------- the launcher */

.dcc-launcher {
  position: relative;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--dcc-brand);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(15, 30, 50, .28);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dcc-launcher:hover { filter: brightness(1.06); }

.dcc-launcher:focus-visible {
  outline: 3px solid var(--dcc-brand);
  outline-offset: 3px;
}

/*
 * The launcher badge is a three-state answer to "is anything happening":
 *
 *   empty + is-online   a GREEN LIGHT - somebody is on hand, come and talk
 *   empty + offline     nothing at all - no light for an empty room
 *   holding a count     a BLUE COUNTER - replies you have not seen, and that
 *                       outranks the presence light: unread stays blue even if
 *                       staff have since gone home, because the reply exists
 *
 * All three fall out of state the widget already holds: is-online is the
 * presence patch, the count is local.unread.
 */
.dcc-launcher__badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 2px solid #fff;
  background: #2fbf71;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 11px;
  text-align: center;
  display: none;
}

.dcc.is-online .dcc-launcher__badge:empty { display: block; }

.dcc-launcher__badge:not(:empty) {
  display: block;
  background: #2563eb;
}

/* The green light means "staff are here" - which is not news to staff. Their
   badge only ever shows the counter. */
.dcc--staff .dcc-launcher__badge:empty { display: none; }

/* ---------------------------------------------------------------- the panel */

.dcc-panel {
  position: absolute;
  bottom: 70px;
  width: min(380px, calc(100vw - 32px));
  /* A HEIGHT, not a cap: both views fill the same panel, so switching to the
     list gives the conversations the whole page's worth of room rather than
     shrink-wrapping to three rows. */
  height: min(620px, calc(100vh - 120px));
  background: var(--dcc-paper);
  border-radius: var(--dcc-radius);
  box-shadow: 0 8px 40px rgba(15, 30, 50, .18), 0 2px 8px rgba(15, 30, 50, .08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dcc-panel[hidden] { display: none; }
.dcc--right .dcc-panel { right: 0; }
.dcc--left .dcc-panel { left: 0; }

.dcc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--dcc-brand);
  color: #fff;
}

.dcc-head__who { flex: 1 1 auto; min-width: 0; }
.dcc-head__who strong { display: block; }

.dcc-head__status {
  display: block;
  font-size: 12px;
  opacity: .85;
}

/* Online is said in words as well as colour: the dot alone is meaningless to
   anybody who cannot see the difference. */
.dcc.is-online .dcc-head__status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6ee7a8;
  margin-right: 5px;
}

.dcc-head__x {
  border: 0;
  background: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}

.dcc-head__x:hover { background: rgba(255, 255, 255, .18); }

.dcc-greeting {
  margin: 0;
  padding: 12px 14px;
  color: var(--dcc-muted);
  font-size: 13px;
  border-bottom: 1px solid var(--dcc-line);
}

/* Mid-conversation, "somebody is on hand" is furniture: the reply IS the
   evidence. The greeting only greets. */
.dcc.has-chat .dcc-greeting { display: none; }

.dcc-notice {
  margin: 0;
  padding: 8px 14px;
  font-size: 13px;
}

.dcc-notice[hidden] { display: none; }
.dcc-notice.is-ok { background: #e8f6ee; color: #14743f; }
.dcc-notice.is-bad { background: #fdecec; color: #9a1f1f; }

/* ------------------------------------------------- their own conversations */

/*
 * TWO VIEWS, one panel. The old design squeezed the conversation list into a
 * 190px scrolling strip above the thread, which was unusable the moment
 * anybody had three conversations. Now exactly one view shows at a time and
 * each gets the whole panel: the thread (default), or the list
 * (.is-view-list), reached by the back chevron in the header.
 */
.dcc-chats-wrap { display: none; }

.dcc.is-view-list .dcc-chats-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 14px;
}

.dcc.is-view-list .dcc-thread,
.dcc.is-view-list .dcc-typing-slot,
.dcc.is-view-list .dcc-more,
.dcc.is-view-list .dcc-form,
.dcc.is-view-list .dcc-foot,
.dcc.is-view-list .dcc-ask,
.dcc.is-view-list .dcc-greeting { display: none; }

.dcc-chats {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.dcc-head__back {
  border: 0;
  background: none;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px 4px 2px;
  border-radius: 6px;
}

.dcc-head__back:hover { background: rgba(255, 255, 255, .18); }
.dcc.is-view-list .dcc-head__back { visibility: hidden; }

.dcc-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--dcc-muted);
  margin-bottom: 4px;
}

/* A row is TWO buttons in a wrapper - open, and the bin - never a button
   inside a button. */
.dcc-conv {
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.dcc-conv:hover { background: var(--dcc-ground); }

.dcc-conv__open {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  align-items: center;
  border: 0;
  background: none;
  text-align: left;
  padding: 7px 4px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  min-height: 44px;
}

.dcc-conv__del {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--dcc-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  opacity: .55;
  line-height: 0;
}

.dcc-conv__del:hover {
  color: #c62a2f;
  background: #fdecec;
  opacity: 1;
}

.dcc-conv__text { flex: 1 1 auto; min-width: 0; }

.dcc-conv__title {
  display: block;
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcc-conv__snip {
  display: block;
  font-size: 12px;
  color: var(--dcc-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcc-conv__tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--dcc-muted);
  border: 1px solid var(--dcc-line);
  border-radius: 999px;
  padding: 0 5px;
  margin-left: 4px;
}

.dcc-conv__side { flex: 0 0 auto; text-align: right; }
.dcc-conv__when { font-size: 11px; color: var(--dcc-muted); font-variant-numeric: tabular-nums; }

.dcc-conv__new {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dcc-brand);
  margin: 3px 0 0 auto;
}

.dcc-new {
  width: 100%;
  border: 1px dashed var(--dcc-line);
  background: none;
  border-radius: 8px;
  padding: 7px;
  margin-top: 6px;
  font: inherit;
  font-size: 13px;
  color: var(--dcc-brand);
  cursor: pointer;
  min-height: 38px;
}

.dcc-new:hover { border-color: var(--dcc-brand); background: var(--dcc-ground); }
.dcc-empty { color: var(--dcc-muted); font-size: 13px; margin: 4px 0; }

/* --------------------------------------------------------------- the thread */

.dcc-thread {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--dcc-ground);
}

.dcc-msg {
  max-width: 85%;
  padding: 7px 11px;
  border-radius: 12px;
  background: var(--dcc-paper);
  border: 1px solid var(--dcc-line);
  word-wrap: break-word;
}

/* "Mine" is per-screen, flipped by the server's projection: the customer's own
   messages on the widget, staff's own on the console. */
.dcc-msg.is-mine {
  align-self: flex-end;
  background: var(--dcc-brand);
  border-color: var(--dcc-brand);
  color: #fff;
}

/* The shop's own line - an automatic answer, "opening this page for you". */
.dcc-msg.is-system {
  align-self: stretch;
  max-width: 100%;
  background: #eef4fa;
  border-style: dashed;
  color: var(--dcc-ink);
}

/* Staff-only. Never reaches a visitor frame; unmistakable on the console. */
.dcc-msg.is-note {
  align-self: stretch;
  max-width: 100%;
  background: #fff9e6;
  border-color: #eadfb2;
  color: #5d4a00;
}

/* Body and time are INLINE, so a one-line message is a one-line bubble. Only
   the body keeps whitespace - the newlines a person actually typed - never the
   container, where template formatting would render as blank lines. */
.dcc-msg__body {
  font-size: 14px;
  white-space: pre-wrap;
}

.dcc-msg__at {
  font-size: 10px;
  opacity: .65;
  margin-left: 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dcc-msg__who { font-weight: 600; }

.dcc-quote {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-left: 3px solid currentColor;
  background: rgba(127, 127, 127, .12);
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 5px;
  font: inherit;
  font-size: 12px;
  color: inherit;
  opacity: .85;
  cursor: pointer;
}

.dcc-quote__who { display: block; font-weight: 600; }

.dcc-quote__body {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dcc-msg.is-found { box-shadow: 0 0 0 3px rgba(2, 116, 183, .35); }

/* Three dots, and they are the whole message: something is coming. */
.dcc-typing-slot:empty { display: none; }
.dcc-typing { display: flex; gap: 4px; padding: 6px 16px; }

.dcc-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94a3b8;
  animation: dcc-bounce 1.3s infinite ease-in-out;
}

.dcc-typing span:nth-child(2) { animation-delay: .18s; }
.dcc-typing span:nth-child(3) { animation-delay: .36s; }

@keyframes dcc-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .55; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* --------------------------------------- questions the shop answers itself */

/*
 * NO QUESTIONS, NO REGION. Structural, not choreographed: whatever state the
 * toggle and the pop-out were left in - mid-open when the page's questions
 * were restated away, a stale aria, anything - a region holding no actual
 * question buttons does not exist visually. (:empty could never say this: the
 * toggle is always in the markup, and an emptied list still holds template
 * whitespace.)
 */
.dcc-ask:not(:has(.dcc-ask__q)) { display: none; }

.dcc-ask {
  position: relative;
  padding: 0 14px;
  border-bottom: 1px solid var(--dcc-line);
}

.dcc-ask__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--dcc-muted);
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
}

.dcc-ask__toggle:hover { color: var(--dcc-ink); }
.dcc-ask__label { flex: 1 1 auto; }

.dcc-ask__chev {
  display: inline-block;
  transform: rotate(90deg);
  transition: transform 160ms ease-out;
}

.dcc-ask__toggle[aria-expanded="true"] .dcc-ask__chev { transform: rotate(-90deg); }

/* A pop-out menu, not a shelf: opening it overlays the thread rather than
   shoving the conversation around. */
.dcc-ask__list {
  position: absolute;
  top: 100%;
  left: 10px;
  right: 10px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--dcc-paper);
  border: 1px solid var(--dcc-line);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 30, 50, .2);
}

.dcc-ask__list[hidden] { display: none; }

.dcc-ask__q {
  border: 1px solid var(--dcc-line);
  background: var(--dcc-paper);
  border-radius: 10px;
  padding: 8px 13px;
  min-height: 34px;
  font: inherit;
  font-size: 13px;
  color: var(--dcc-ink);
  cursor: pointer;
  text-align: left;
}

.dcc-ask__q:hover { border-color: var(--dcc-brand); color: var(--dcc-brand); }

/* ------------------------------------------------------------- the composer */

.dcc-form { padding: 10px 14px; border-top: 1px solid var(--dcc-line); }

/* Online, no email needed - the field itself goes, because a form asking for
   what it does not need looks like a form that was not thought about. Offline,
   it is the only way back, so it shows AND reads as required. */
.dcc.is-online .dcc-email { display: none; }

.dcc:not(.is-online) .dcc-email {
  border-color: #ecc989;
  background: #fffdf5;
}

.dcc-email {
  width: 100%;
  border: 1px solid var(--dcc-line);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font: inherit;
  font-size: 14px;
  min-height: 40px;
}

.dcc-form__row { display: flex; gap: 8px; align-items: flex-end; }

.dcc-input {
  flex: 1 1 auto;
  border: 1px solid var(--dcc-line);
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  resize: none;
  max-height: 120px;
  min-height: 40px;
}

.dcc-input:focus-visible,
.dcc-email:focus-visible { outline: 2px solid var(--dcc-brand); outline-offset: 1px; }

.dcc-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--dcc-brand);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dcc-send:hover { filter: brightness(1.06); }

/* Quiet by design: nobody comes to a chat widget wanting to close or delete it. */
.dcc-foot {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 0 14px 10px;
}

.dcc-foot__btn {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: #94a3b8;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  min-height: 30px;
}

.dcc-foot__btn:hover { color: #475569; background: var(--dcc-ground); }
.dcc-foot__btn.is-danger:hover { color: #9a1f1f; background: #fdecec; }

/* A conversation that has ended: say so, and take the controls away rather than
   leaving a box that looks like it would send. */
.dcc.is-closed .dcc-form,
.dcc.is-closed .dcc-ask { display: none; }

/* ------------------------------------------------------------ when it is down */

/* No fallback, so it says so plainly rather than looking merely slow. */
.dcc-offline-note { display: none; }

.dcc.is-offline .dcc-offline-note {
  display: block;
  margin: 0;
  padding: 10px 14px;
  background: #fff4e5;
  color: #7a5200;
  font-size: 13px;
  border-top: 1px solid #f3e0c0;
}

.dcc.is-offline .dcc-form { opacity: .5; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .dcc-ask__chev { transition: none; }
  .dcc-typing span { animation: dcc-fade 1.6s infinite; transform: none; }
  @keyframes dcc-fade { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
}

@media (max-width: 480px) {
  .dcc { bottom: 12px; }
  .dcc--right { right: 12px; }
  .dcc--left { left: 12px; }

  /* Full height on a phone: a floating card with a keyboard over it is unusable. */
  .dcc-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-height: none;
    border-radius: 0;
  }
}


/* -------------------------------------------------- third build additions */

/* Older messages exist above what is drawn. The button only shows when the
   server said so (the has-more class is a state patch). */
.dcc-more { display: none; }

.dcc.has-more .dcc-more {
  display: block;
  border: 0;
  background: none;
  color: var(--dcc-brand);
  font-size: 12px;
  padding: 8px 14px 0;
  cursor: pointer;
  text-align: center;
}

/* R58: an element leaves gracefully. The renderer adds the class, waits for
   the transition, then removes - decided once, not by every caller. */
.dcc-msg,
.dcs-trail__row,
.dcs-feed__row {
  transition: opacity .2s ease, transform .2s ease;
}

.is-leaving {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

.dcc-noscript { position: fixed; bottom: 12px; right: 12px; }