/*
 * Duchi Treats — component layer (design system 03).
 * Built only from tokens (theme.json presets + tokens.css). No raw values.
 * Mobile-first; breakpoints 680 / 920 / 1180 (01 §7).
 */

/* ============================================================
 * 0. Base / layout helpers
 * ============================================================ */

.duchi-wrap,
.wrap {
  max-width: var(--bp-lg);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--60);
}

.duchi-icon {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  flex: none;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast);
  background: var(--bg-surface);
  color: var(--action-hover);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-weight: 700;
}
.skip-link:focus { left: var(--wp--preset--spacing--40); top: var(--wp--preset--spacing--40); }

/* ============================================================
 * 1. Buttons (03 §1)
 * ============================================================ */

.btn {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-soft),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-fast) var(--ease-soft);
}
.btn--default { padding: 11px 22px; font-size: .95rem; }
.btn--small   { padding: 9px 18px;  font-size: .9rem; }

.btn--primary { background: var(--action); color: var(--text-on-brand); box-shadow: var(--shadow-md); }
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--action-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn--ghost { background: var(--bg-surface); color: var(--action-hover); border: 2px solid var(--border); }
.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--action); transform: translateY(-2px); }

.btn--white { background: #fff; color: var(--action-hover); }
.btn--white:hover,
.btn--white:focus-visible { background: var(--bg-tint); transform: translateY(-2px); }

.btn--soft { background: var(--wp--preset--color--blush); color: var(--action-hover); }
.btn--soft:hover,
.btn--soft:focus-visible { background: var(--action); color: var(--text-on-brand); }

.btn--text { background: transparent; color: var(--action-hover); padding-inline: var(--wp--preset--spacing--30); min-height: 44px; }
.btn--text:hover,
.btn--text:focus-visible { text-decoration: underline; }

.btn:active { transform: translateY(0); }
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--text-muted);
  color: #fff;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ============================================================
 * 2. Icon buttons (03 §2)
 * ============================================================ */

.icon-btn {
  width: 44px; height: 44px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--border);
  background: var(--bg-surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-strong);
  position: relative;
  transition: background var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              transform var(--dur-base) var(--ease-out);
}
.icon-btn:hover,
.icon-btn:focus-visible {
  background: var(--action);
  border-color: var(--action);
  color: var(--text-on-brand);
  transform: translateY(-2px);
}
.icon-btn .badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  background: var(--wp--preset--color--magenta);
  color: #fff;
  font-family: var(--wp--preset--font-family--body);
  font-size: .65rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  line-height: 1;
}

.fav-btn {
  width: 34px; height: 34px;
  border-radius: var(--radius-circle);
  background: #fff;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--action);
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-base) var(--ease-out);
}
.fav-btn:hover,
.fav-btn:focus-visible,
.fav-btn[aria-pressed="true"] { background: var(--action); color: #fff; }

/* ============================================================
 * 3. Pill-tags — signature element (03 §3)
 * ============================================================ */

.pill-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  border: 2px solid rgba(255, 255, 255, .55);
  box-shadow: var(--shadow-sm);
}
.pill-tag--magenta { background: var(--wp--preset--color--magenta); }
.pill-tag--rose    { background: var(--wp--preset--color--rose); }
.pill-tag--violet  { background: var(--wp--preset--color--violet); }
.pill-tag--green   { background: var(--wp--preset--color--green); }

/* Floating context (hero) */
.pill-tag--float {
  position: absolute;
  z-index: var(--z-tag);
  animation: duchi-float var(--float);
}
.pill-tag--float:nth-of-type(1) { animation-delay: 0s; }
.pill-tag--float:nth-of-type(2) { animation-delay: .6s; }
.pill-tag--float:nth-of-type(3) { animation-delay: 1.2s; }
.pill-tag--float:nth-of-type(4) { animation-delay: 1.8s; }

@keyframes duchi-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ============================================================
 * 4. Chips & badges (03 §4)
 * ============================================================ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 2px solid var(--border);
  color: var(--action-hover);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.eyebrow .spark { color: var(--wp--preset--color--magenta); }

.chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--action-hover);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: .72rem;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.badge-sale {
  background: var(--s-sale);
  color: #fff;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: .78rem;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.stock-pill--in   { background: color-mix(in srgb, var(--s-success) 14%, #fff); color: var(--s-success); }
.stock-pill--low  { background: color-mix(in srgb, var(--s-warning) 16%, #fff); color: var(--s-warning); }
.stock-pill--out  { background: color-mix(in srgb, var(--s-error) 14%, #fff);   color: var(--s-error); }

/* ============================================================
 * 5. Inputs & forms — fully custom, no native chrome (03 §5)
 * ============================================================ */

.field { display: block; margin-bottom: var(--wp--preset--spacing--50); }
.field__label {
  display: block;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-strong);
  margin-bottom: 6px;
}
.field__hint { font-size: .85rem; color: var(--text-body); margin-top: 6px; }
.field__error { font-size: .85rem; color: var(--s-error); margin-top: 6px; display: flex; align-items: center; gap: 6px; }

.input,
.textarea,
.select-native {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  font-family: var(--wp--preset--font-family--body);
  font-size: 1rem;
  color: var(--text-strong);
  background: var(--bg-surface);
  border: 2px solid var(--border);
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast);
}
.textarea { border-radius: var(--radius-md); min-height: 120px; resize: vertical; line-height: 1.6; }

.input::placeholder,
.textarea::placeholder { color: var(--text-muted); }

.input:focus-visible,
.textarea:focus-visible,
.select-native:focus-visible {
  border-color: var(--action);
  outline: 3px solid var(--wp--preset--color--magenta);
  outline-offset: 2px;
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select-native[aria-invalid="true"] { border-color: var(--s-error); }

.input--success { border-color: var(--s-success); }

/* Native select: custom box + our chevron. The OS option list can't be styled;
   for brand-critical selects use .duchi-select (JS listbox) below. */
.select {
  position: relative;
  display: block;
}
.select-native {
  padding-right: 46px;
  cursor: pointer;
}
.select::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  background: var(--text-strong);
  -webkit-mask: var(--duchi-chevron-down) center / contain no-repeat;
          mask: var(--duchi-chevron-down) center / contain no-repeat;
}
:root {
  --duchi-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
}

/* JS-enhanced custom listbox (brand-critical: sort, product options).
   Progressive enhancement — the native <select> stays as the no-JS fallback. */
.duchi-select { position: relative; font-family: var(--wp--preset--font-family--body); }
.duchi-select__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  font-size: 1rem;
  color: var(--text-strong);
  cursor: pointer;
  text-align: left;
}
.duchi-select__button .duchi-icon { color: var(--text-body); transition: transform var(--dur-base) var(--ease-out); }
.duchi-select[data-open="true"] .duchi-select__button { border-color: var(--action); }
.duchi-select[data-open="true"] .duchi-select__button .duchi-icon { transform: rotate(180deg); }

.duchi-select__panel {
  position: absolute;
  z-index: var(--z-modal);
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 8px;
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.duchi-select[data-open="false"] .duchi-select__panel { display: none; }

.duchi-select__search {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  margin-bottom: 8px;
  font: inherit;
  font-size: .92rem;
  color: var(--text-strong);
  background: var(--bg-surface);
  outline: none;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.duchi-select__search:focus { border-color: var(--action); box-shadow: 0 0 0 3px var(--ring-soft); }
.duchi-select__search::placeholder { color: var(--text-muted); }

.duchi-select__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
}
.duchi-select__option {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-body);
  font-size: .95rem;
}
.duchi-select__option:hover,
.duchi-select__option[aria-selected="true"] { background: var(--bg-tint); color: var(--action-hover); }
.duchi-select__option.is-active { background: var(--wp--preset--color--blush); color: var(--action-hover); }
.duchi-select__empty {
  padding: 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: .9rem;
  list-style: none;
}

/* Custom checkbox & radio — native hidden, label drives the visual box */
.choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: .95rem;
  color: var(--text-strong);
  min-height: 44px;
}
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__box {
  width: 22px; height: 22px;
  flex: none;
  border: 2px solid var(--border);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.choice--radio .choice__box { border-radius: var(--radius-circle); }
.choice__box::after {
  content: "";
  width: 12px; height: 12px;
  transform: scale(0);
  transition: transform var(--dur-base) var(--ease-out);
  background: #fff;
  -webkit-mask: var(--duchi-check) center / contain no-repeat;
          mask: var(--duchi-check) center / contain no-repeat;
}
.choice--radio .choice__box::after {
  border-radius: var(--radius-circle);
  background: #fff;
  -webkit-mask: none; mask: none;
}
.choice input:checked + .choice__box { background: var(--action); border-color: var(--action); }
.choice input:checked + .choice__box::after { transform: scale(1); }
.choice input:focus-visible + .choice__box { outline: 3px solid var(--wp--preset--color--magenta); outline-offset: 2px; }
:root {
  --duchi-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
}

/* Quantity stepper (03 §5) */
.qty {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
}
.qty__btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-circle);
  border: none;
  background: var(--wp--preset--color--blush);
  color: var(--action-hover);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.qty__btn:hover,
.qty__btn:focus-visible { background: var(--action); color: #fff; }
.qty__input {
  width: 40px;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-strong);
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================
 * 6. Cards (03 §6)
 * ============================================================ */

.product-card {
  background: var(--bg-surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--wp--preset--spacing--50);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-out);
}
.product-card:hover,
.product-card:focus-within {
  transform: translateY(-6px);
  border-style: solid;
  border-color: var(--action);
  box-shadow: var(--shadow-md);
}
.product-card__thumb {
  position: relative;
  display: block;
  background: var(--bg-tint);
  border-radius: var(--radius-md);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: var(--wp--preset--spacing--40);
  font-size: 4.6rem;
}
.product-card__thumb > a {
  display: block;
  width: 100%;
  height: 100%;
}
.product-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
/* hover: gentle image zoom (lift handled on .product-card above) */
.product-card:hover .product-card__thumb img,
.product-card:focus-within .product-card__thumb img { transform: scale(1.06); }

.product-card__chip { position: absolute; top: 12px; left: 12px; z-index: 1; }
.product-card__chip--sale { background: var(--s-sale); color: #fff; }
.product-card__chip--soldout { background: var(--text-muted); color: #fff; }
.product-card__fav  { position: absolute; top: 12px; right: 12px; z-index: 1; }
.product-card__name { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.18rem; color: var(--text-strong); }
.product-card__name a { color: inherit; text-decoration: none; }
.product-card__kind { color: var(--text-body); font-size: .9rem; font-weight: 500; margin-top: 2px; }
.product-card__tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }

.price { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.35rem; color: var(--price); margin-top: 6px; }

/* full-width add-to-cart pinned to the card bottom so cards align in the grid */
.product-card__cta { margin-top: auto; padding-top: var(--wp--preset--spacing--40); }
.product-card__add {
  width: 100%;
  justify-content: center;
  gap: 8px;
}
.product-card__add .duchi-icon { flex-shrink: 0; }
.product-card__add.is-added {
  background: var(--s-success);
  border-color: var(--s-success);
  color: #fff;
}
.product-card__add--soldout { pointer-events: auto; }
.price small { font-size: .8rem; color: var(--text-body); font-weight: 600; }
.price del { color: var(--text-muted); font-weight: 600; margin-right: 6px; }
.price ins { text-decoration: none; color: var(--s-sale); }

.value-card {
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--wp--preset--spacing--60);
  text-align: center;
}
.value-card__icon {
  width: 62px; height: 62px;
  border-radius: var(--radius-circle);
  background: var(--bg-tint);
  display: grid;
  place-items: center;
  margin: 0 auto var(--wp--preset--spacing--30);
  color: var(--action-hover);
}
.value-card__title { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.05rem; color: var(--text-strong); }
.value-card p { font-size: .9rem; color: var(--text-body); margin-top: 4px; }

.receipt-card {
  background: var(--bg-surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--wp--preset--spacing--60);
}

/* ============================================================
 * 7. Navigation — floating pill (03 §7)
 * ============================================================ */

.nav-outer {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  padding: 14px 16px;
  background: linear-gradient(var(--bg-page), rgba(255, 246, 243, 0));
}
.nav {
  max-width: var(--bp-lg);
  margin-inline: auto;
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 12px 10px 22px;
}
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__brand img { height: 40px; width: auto; display: block; }
.nav__links { display: flex; gap: 6px; margin-left: auto; }
.nav__links a {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: .95rem;
  color: var(--text-strong);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.nav__links a:hover { background: var(--bg-tint); color: var(--action-hover); }
.nav__links a[aria-current="page"],
.nav__links a.active { background: var(--wp--preset--color--blush); color: var(--action-hover); }
.nav__icons { display: flex; gap: 8px; align-items: center; }
.nav__burger { display: none; }

/* Mobile sheet */
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--bg-page);
  display: none;
  flex-direction: column;
  padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
}
.nav-sheet[data-open="true"] { display: flex; }
.nav-sheet__close { position: absolute; top: 18px; right: 18px; }
.nav-sheet a {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--text-strong);
  padding: var(--wp--preset--spacing--40) 0;
  text-decoration: none;
}

/* ============================================================
 * 8. Cart drawer (03 §8)
 * ============================================================ */

/* The drawer lives in the global header, OUTSIDE .woocommerce, so it misses
   that layer's border-box reset — without this, the foot buttons' width:100%
   + padding overflows the drawer's right edge. */
.cart-drawer, .cart-drawer * { box-sizing: border-box; }

.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: rgba(58, 46, 54, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-soft), visibility var(--dur-slow);
}
.cart-scrim[data-open="true"] { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(420px, 92vw);
  z-index: var(--z-drawer);
  background: var(--bg-surface);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.cart-drawer[data-open="true"] { transform: translateX(0); }
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--wp--preset--spacing--60);
  border-bottom: 2px solid var(--border);
}
.cart-drawer__title { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.5rem; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--wp--preset--spacing--60); }
.cart-drawer__foot {
  border-top: 2px solid var(--border);
  padding: var(--wp--preset--spacing--60);
  display: grid;
  gap: var(--wp--preset--spacing--40);
}

/* Mini-cart (drawer body) */
.duchi-mini-cart { list-style: none; margin: 0; padding: 0; }
.cart-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1.5px dashed var(--border);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line__thumb-wrap { display: block; width: 64px; height: 64px; }
.cart-line__thumb-wrap img {
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  background: var(--bg-tint);
  object-fit: cover;
}
.cart-line__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-line__name {
  font-weight: 600;
  color: var(--text-heading);
  text-decoration: none;
  line-height: 1.25;
}
.cart-line__name:hover { color: var(--action); }
.cart-line__qty { font-size: .85rem; color: var(--text-muted); }
.cart-line__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  background: var(--bg-tint);
  color: var(--text-muted);
  font-size: 1.1rem; line-height: 1;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.cart-line__remove:hover { background: var(--s-error); color: #fff; }

.duchi-mini-cart__total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 2px dashed var(--border);
  font-family: var(--wp--preset--font-family--display);
}
.duchi-mini-cart__total .amount,
.duchi-mini-cart__total .woocommerce-Price-amount {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; font-size: 1.4rem;
  color: var(--wp--preset--color--rose);
}

/* Empty bag (drawer + cart page) */
.duchi-mini-cart__empty { text-align: center; padding: 32px 8px; display: grid; gap: 8px; justify-items: center; }
.cart-empty__blob {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--wp--preset--color--blush);
  font-size: 2.2rem;
  margin-bottom: 4px;
}
.cart-empty__title { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.3rem; color: var(--text-heading); margin: 0; }
.cart-empty__line { color: var(--text-body); margin: 0 0 8px; }

/* Free-delivery progress */
.delivery-progress { margin-bottom: 16px; }
.delivery-progress__track { height: 8px; background: var(--wp--preset--color--blush); border-radius: var(--radius-pill); overflow: hidden; }
.delivery-progress__fill { height: 100%; background: var(--action); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }
.delivery-progress__note { font-size: .85rem; color: var(--text-body); margin: 0 0 6px; }
.delivery-progress__note .woocommerce-Price-amount { font-weight: 700; color: var(--action); }

/* ============================================================
 * 9. Toast (03 §9)
 * ============================================================ */

.toast {
  position: fixed;
  z-index: var(--z-toast);
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.toast[data-open="true"] { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.toast__check { color: var(--s-success); }
.toast__thumb { width: 36px; height: 36px; border-radius: var(--radius-sm); object-fit: cover; }

/* ============================================================
 * 10. Sections scaffold (04 §7)
 * ============================================================ */

.section { padding-block: var(--wp--preset--spacing--110); }
.section--tint  { background: var(--bg-tint); }
.section--brand { background: var(--bg-brand); color: var(--text-on-brand); }
.section--page  { background: var(--bg-page); }
.sec-head { text-align: center; max-width: 560px; margin: 0 auto var(--wp--preset--spacing--90); }
.sec-head h2 { color: var(--text-strong); }
.sec-head p { color: var(--text-body); margin-top: 8px; }

.wave { display: block; width: 100%; height: auto; margin-bottom: -2px; }
.wave--flip { transform: rotate(180deg); }

/* ============================================================
 * 11. Footer (04 §6)
 * ============================================================ */

.site-footer { background: var(--wp--preset--color--ink); color: #fff; padding: var(--wp--preset--spacing--110) 0 var(--wp--preset--spacing--70); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.5fr 1.2fr; gap: 30px; }
.footer-col h2,
.footer-col h3 { font-family: var(--wp--preset--font-family--display); font-size: 1rem; color: var(--wp--preset--color--blush); margin-bottom: 14px; }
.footer-col a { display: block; color: rgba(255, 255, 255, .7); font-size: .9rem; padding: 5px 0; text-decoration: none; transition: color var(--dur-fast), padding-left var(--dur-fast); }
.footer-col a:hover { color: #fff; padding-left: 4px; }
.footer-about { color: rgba(255, 255, 255, .65); font-size: .9rem; max-width: 260px; margin-top: 14px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 40px; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: rgba(255, 255, 255, .5); font-size: .78rem; }
.newsletter { display: flex; gap: 8px; margin-top: 14px; }
.newsletter input { flex: 1; border: none; border-radius: var(--radius-pill); padding: 12px 16px; font-family: var(--wp--preset--font-family--body); font-size: .9rem; }
.newsletter button { border: none; background: var(--action); color: #fff; border-radius: var(--radius-circle); width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer; transition: background var(--dur-fast); }
.newsletter button:hover { background: var(--wp--preset--color--magenta); }

/* Footer socials + contact column */
.footer-social { display: flex; gap: 14px; margin-top: 18px; }
.footer-social__link {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  color: #fff;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer-social__link:hover { color: var(--action); transform: translateY(-2px); }

.footer-contact__line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, .7);
  font-size: .9rem;
  line-height: 1.5;
  margin: 0 0 12px;
}
.footer-contact__icon { flex-shrink: 0; margin-top: 2px; color: var(--wp--preset--color--blush); }
.footer-col--contact a {
  display: inline;
  color: rgba(255, 255, 255, .7);
  padding: 0;
  text-decoration: none;
  transition: color var(--dur-fast);
}
.footer-col--contact a:hover { color: #fff; padding-left: 0; }

/* ============================================================
 * 11b. Signature sections (04)
 * ============================================================ */

/* Hero — full-bleed background photo + left-weighted brand gradient, white text */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 600px;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.hero__wash { position: absolute; inset: 0; z-index: 1; background: rgba(58, 46, 54, .42); }
.hero__tint {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(124, 24, 60, .94) 0%,
    rgba(180, 40, 92, .78) 42%,
    rgba(58, 46, 54, .35) 100%
  );
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero-copy { max-width: 560px; padding: var(--wp--preset--spacing--110) 0; color: #fff; }
.hero-title { margin: 18px 0 4px; color: #fff; text-shadow: 0 2px 24px rgba(40, 14, 26, .4); }
.hero-title .pink { color: var(--wp--preset--color--blush); }
.hero-lead { font-size: 1.12rem; color: rgba(255, 255, 255, .92); max-width: 480px; margin: 14px 0 28px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.trust { display: flex; align-items: center; gap: 10px; margin-top: 26px; color: var(--text-body); font-size: .9rem; font-weight: 500; }
.trust--on-hero { color: rgba(255, 255, 255, .9); }
.stars { color: #FFB23E; letter-spacing: 2px; }

/* On-hero variants of the eyebrow + secondary button (light on dark photo) */
.eyebrow--on-hero { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn--on-hero {
  background: rgba(255, 255, 255, .12);
  border: 2px solid rgba(255, 255, 255, .55);
  color: #fff;
}
.btn--on-hero:hover,
.btn--on-hero:focus-visible { background: rgba(255, 255, 255, .22); border-color: #fff; transform: translateY(-2px); }

/* Product grid section */
.vgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--40); }
.duchi-product-collection { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--60); }

/* Promo band */
.promo-sec { background: var(--bg-brand); position: relative; overflow: hidden; }
.promo { position: relative; z-index: var(--z-raised); text-align: center; color: #fff; padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--100); }
.eyebrow--on-brand { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; }
.promo h2 { color: #fff; margin: 16px 0 6px; }
.promo h2 .out { color: var(--wp--preset--color--blush); }
.promo p { color: rgba(255, 255, 255, .9); max-width: 440px; margin: 0 auto 26px; }
.promo-deco { position: absolute; font-size: 3rem; opacity: .9; z-index: var(--z-blob); animation: duchi-float var(--float); }
.promo-deco.pd1 { top: 40px; left: 8%; }
.promo-deco.pd2 { top: 120px; right: 10%; animation-delay: .5s; }
.promo-deco.pd3 { bottom: 60px; left: 14%; animation-delay: 1s; }

/* ============================================================
 * 12. Responsive (01 §7)
 * ============================================================ */

@media (max-width: 920px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { min-height: 520px; }
  .hero-copy { max-width: 620px; padding: var(--wp--preset--spacing--100) 0; }
  .vgrid { grid-template-columns: repeat(2, 1fr); }
  .duchi-product-collection { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .nav__links { display: none; }

  /* Full-bleed bar (no floating pill) */
  .nav-outer { padding: 0; background: var(--bg-page); }
  .nav {
    max-width: none;
    margin: 0;
    border-radius: 0;
    border-width: 0 0 2px;
    box-shadow: none;
    /* burger | logo | cart */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
  }
  .nav__brand { justify-self: center; }
  /* burger sits in the left zone, ahead of the cart */
  .nav__burger { display: grid; order: -1; justify-self: start; }
  .nav__icons { justify-self: end; }
  /* leave only burger + cart on mobile */
  .nav__icons a[aria-label="Search"],
  .nav__icons a[aria-label="Account"] { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: 460px; }
  /* deepen the wash on small screens so text stays legible over more photo */
  .hero__tint { background: linear-gradient(120deg, rgba(124,24,60,.95) 0%, rgba(180,40,92,.82) 60%, rgba(58,46,54,.6) 100%); }
  .cta-row .btn { flex: 1 1 auto; justify-content: center; }
  .duchi-product-collection { grid-template-columns: 1fr; }
  .vgrid { grid-template-columns: 1fr; }
  .toast { left: 16px; right: 16px; transform: translateY(20px); }
  .toast[data-open="true"] { transform: translateY(0); }
}