/*!
 * Dabrand main CSS — preloaded async (inc/assets.php, ARCH §8).
 * Everything not needed for first paint: variations, offers, countdown,
 * receipt, states, trust, reviews, FAQ, related, lightbox, thank-you,
 * archive, footer.
 *
 * Logical properties only (ARCH §7.2). The single declared exception —
 * desktop gallery pinned to the physical left — is expressed with
 * html[dir] selectors in critical.css (UI-SPEC §4), never physical props.
 */

/* =========================================================================
   Generic elements
   ========================================================================= */

.da-btn--ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--da-s2);
  min-block-size:var(--da-tap);
  padding-inline:var(--da-s5);
  background:var(--da-bg);
  color:var(--da-brand-600);
  border:1.5px solid var(--da-brand-600);
  border-radius:var(--da-r-pill);
  font-size:17px; font-weight:700;
  text-decoration:none; cursor:pointer;
  transition:border-color var(--da-dur-1) var(--da-ease-out), transform var(--da-dur-1) var(--da-ease-out);
}
.da-btn--wa{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--da-s2);
  min-block-size:var(--da-tap);
  padding-inline:var(--da-s5);
  background:var(--da-success);
  color:#fff;
  border:0; border-radius:var(--da-r-pill);
  font-size:17px; font-weight:700;
  text-decoration:none; cursor:pointer;
}
.da-btn--wa svg{ inline-size:22px; block-size:22px; fill:currentColor; }

/* Directional icons flip in RTL; stars/checks/phones/logos never do. */
html[dir="rtl"] .icon-dir{ transform:scaleX(-1); }

/* UGC mixes AR/FR/digits — let the bidi algorithm decide per paragraph. */
.da-plaintext{ unicode-bidi:plaintext; }

@media (hover:hover) and (pointer:fine){
  .da-btn--ghost:hover,
  .da-chip:not(.is-disabled):hover,
  .da-offer:hover,
  .da-pill-opt:not([aria-disabled="true"]):hover{
    border-color:var(--da-brand-300);
    transform:translateY(-1px);
  }
}

/* =========================================================================
   5. Variations — pills + swatches (UI-SPEC §3.5)
   ========================================================================= */

.da-variations{ margin-block-start:var(--da-s4); display:flex; flex-direction:column; gap:var(--da-s4); }
.da-variations__group{ display:flex; flex-direction:column; gap:8px; }
.da-variations__label{ font-size:15px; font-weight:600; color:var(--da-ink-700); display:flex; gap:8px; align-items:baseline; }
/* Chosen value echoed in the label ("المقاس  M") — filled by app.js paint(). */
.da-vlabel__val{ color:var(--da-berry); font-weight:700; }
.da-vlabel__val:empty{ display:none; }

/* Native select stays for no-JS; once enhanced it is visually retired. */
.da-select-enhanced{
  position:absolute !important;
  inline-size:1px; block-size:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

.da-pills{ display:flex; flex-wrap:wrap; gap:var(--da-s2); }
.da-pill-opt{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  min-block-size:40px;
  padding-block:8px; padding-inline:16px;
  background:var(--da-bg);
  border:1.5px solid var(--da-line-strong);
  border-radius:var(--da-r-input);
  font-size:14px; font-weight:600; color:var(--da-ink-900);
  cursor:pointer;
  transition:border-color var(--da-dur-1) var(--da-ease-out), background-color var(--da-dur-1) var(--da-ease-out), transform var(--da-dur-1) var(--da-ease-out);
}
/* Size AND colour options are the same compact button, sized to content. */
.da-pill-opt{ flex:0 0 auto; min-inline-size:44px; }
@media (hover:hover){
  .da-pill-opt:not(.is-selected):not([aria-disabled="true"]):hover{ border-color:var(--da-brand-400); }
}
.da-pill-opt:active{ transform:scale(.97); }

/* Selected SIZE pill: violet box + ✓ (colour buttons get a ring instead). */
.da-pill-opt.is-selected:not(.da-pill-opt--color){
  border:2px solid var(--da-brand-600);
  background:var(--da-brand-50);
  color:var(--da-brand-700);
  padding-block:7px; padding-inline:15px; /* keep box size on border bump */
}
.da-pill-opt.is-selected:not(.da-pill-opt--color)::before{
  content:"✓"; font-weight:800; margin-inline-end:6px;
}

/* Colour option: the button is FILLED with the colour, name written on it in
   white (ink + hairline on pale colours so the name stays legible). */
.da-pill-opt--color{
  color:#fff; font-weight:700;
  border-color:transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.30);
}
.da-pill-opt--color.is-light{
  color:var(--da-ink-900);
  border:1.5px solid var(--da-line-strong);
  text-shadow:none;
}
.da-pill-opt--color.is-selected{
  box-shadow:0 0 0 2px var(--da-bg), 0 0 0 4px var(--da-brand-600); /* white gap + brand ring */
  border-color:transparent;
}
.da-pill-opt--color.is-selected::before{ content:"✓"; font-weight:800; margin-inline-end:6px; }

.da-pill-opt[aria-disabled="true"],
.da-pill-opt.is-oos{
  opacity:.4;
  background-image:linear-gradient(to top left, transparent 47%, var(--da-ink-500) 47%, var(--da-ink-500) 53%, transparent 53%);
}
.da-variations__error{ font-size:13px; color:var(--da-error); }

/* =========================================================================
   6. Quantity-offer cards (UI-SPEC §3.6)
   ========================================================================= */

.da-offers{
  margin-block-start:var(--da-s4);
  display:flex; flex-direction:column; gap:var(--da-s2);
}
.da-offer{
  position:relative;
  display:flex; align-items:center; gap:var(--da-s3);
  min-block-size:72px;
  padding:16px;
  background:var(--da-bg);
  border:1.5px solid var(--da-line-strong);
  border-radius:var(--da-r-card);
  cursor:pointer;
  transition:border-color var(--da-dur-1) var(--da-ease-out), background-color var(--da-dur-1) var(--da-ease-out), transform var(--da-dur-1) var(--da-ease-out);
}
.da-offer input[type="radio"]{
  inline-size:24px; block-size:24px;
  accent-color:var(--da-brand-600);
  margin:0; flex-shrink:0;
}
.da-offer.is-selected{
  border:2px solid var(--da-brand-600);
  background:var(--da-brand-50);
  padding:15px;
}
.da-offer__body{ display:flex; flex-direction:column; gap:2px; min-inline-size:0; }
.da-offer__label{ font-size:16px; font-weight:700; color:var(--da-ink-900); }
.da-offer__perk{ font-size:13px; font-weight:600; }
.da-offer__perk.is-discount{ color:var(--da-berry); }
.da-offer__perk.is-freeship{ color:var(--da-success); }
.da-offer__money{
  margin-inline-start:auto;
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  text-align:end;
}
.da-offer__total{
  font-size:17px; font-weight:800; color:var(--da-ink-900);
  font-variant-numeric:tabular-nums;
}
.da-offer__compare{
  font-size:13px; color:var(--da-ink-500);
  text-decoration:line-through;
}
.da-offer__tab{
  position:absolute;
  inset-block-start:-10px; inset-inline-start:16px;
  background:var(--da-brand-600); color:#fff;
  font-size:12px; font-weight:700;
  padding:2px 10px; border-radius:var(--da-r-pill);
}

/* No offers → quantity stepper (graceful degradation). */
.da-qty{ display:flex; align-items:center; gap:var(--da-s2); margin-block-start:var(--da-s4); }
.da-qty__btn{
  inline-size:var(--da-tap); block-size:var(--da-tap);
  border:1.5px solid var(--da-line-strong);
  border-radius:var(--da-r-input);
  background:var(--da-bg);
  font-size:20px; font-weight:700; color:var(--da-ink-900);
  cursor:pointer;
}
.da-qty__val{
  inline-size:var(--da-tap); block-size:var(--da-tap);
  text-align:center; font-weight:700;
  border:1.5px solid var(--da-line-strong);
  border-radius:var(--da-r-input);
}

/* =========================================================================
   7. Countdown band (UI-SPEC §3.7)
   ========================================================================= */

.da-countdown{
  margin-block-start:var(--da-s5);
  background:var(--da-berry-50);
  min-block-size:48px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--da-s3);
  padding-block:var(--da-s2); padding-inline:var(--da-s4);
  border-radius:var(--da-r-card);
}
.da-countdown__label{ font-size:14px; font-weight:700; color:var(--da-berry-700); }
.da-countdown__timer{
  display:inline-flex; align-items:center; gap:4px;
  direction:ltr; /* single LTR digit island; markup also wraps in <bdi> */
}
.da-countdown__cell{
  background:var(--da-bg);
  color:var(--da-berry-700);
  font-size:18px; font-weight:800;
  font-variant-numeric:tabular-nums;
  border-radius:6px;
  padding-block:2px; padding-inline:6px;
  min-inline-size:2.4ch;
  text-align:center;
}
.da-countdown__colon{ color:var(--da-berry-700); font-weight:800; }
.da-countdown__stock{
  font-size:13px; font-weight:700; color:var(--da-berry);
  margin-inline-start:auto;
}
@media (min-width:1024px){
  .da-countdown__cell{ font-size:20px; }
}

/* =========================================================================
   8. Order card details: fields states, chips, reveals (UI-SPEC §3.8/§3.12)
   ========================================================================= */

/* Field validation states */
.da-field.has-error .da-input,
.da-field.has-error input,
.da-field.has-error select,
.da-field.has-error textarea{ border-color:var(--da-error); }
.da-field__error{
  display:flex; align-items:center; gap:4px;
  font-size:13px; color:var(--da-error); line-height:1.5;
}
.da-field__error::before{ content:"⚠"; }
.da-field__hint{ font-size:13px; color:var(--da-ink-500); }
.da-field.is-valid{ position:relative; }
.da-field.is-valid::after{
  content:"";
  position:absolute;
  inset-inline-end:14px; inset-block-end:14px;
  inline-size:20px; block-size:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2315803D'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events:none;
}

/* Delivery method chips */
.da-chips{ display:flex; gap:var(--da-s2); }
.da-chip{
  flex:1 1 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-block-size:var(--da-tap);
  padding-block:8px; padding-inline:12px;
  background:var(--da-bg);
  border:1.5px solid var(--da-line-strong);
  border-radius:var(--da-r-pill);
  color:var(--da-ink-700);
  font-size:15px; font-weight:600;
  cursor:pointer; text-align:center;
  transition:background-color var(--da-dur-1) var(--da-ease-out), border-color var(--da-dur-1) var(--da-ease-out), color var(--da-dur-1) var(--da-ease-out), transform var(--da-dur-1) var(--da-ease-out);
}
.da-chip input[type="radio"]{
  position:absolute; opacity:0; inline-size:1px; block-size:1px; pointer-events:none;
}
.da-chip.is-selected{
  background:var(--da-brand-600); border-color:var(--da-brand-600); color:#fff;
}
.da-chip.is-selected .da-chip__price{ color:#fff; }
.da-chip:has(input:focus-visible){
  outline:var(--da-focus-outline); outline-offset:var(--da-focus-offset);
}
.da-chip__price{
  font-weight:800; color:var(--da-ink-900);
  font-variant-numeric:tabular-nums;
  transition:opacity var(--da-dur-1) var(--da-ease-out);
}
.da-chip__price.is-flip{ opacity:0; }
.da-chip__sub{ font-size:12px; }
.da-chip.is-disabled{
  opacity:.4; cursor:not-allowed; box-shadow:none;
}
.da-chip.is-disabled .da-chip__price{ text-decoration:line-through; }

/* Address / note reveals — grid-rows trick, no measured heights. */
.da-reveal{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 200ms var(--da-ease-out);
}
.da-reveal > *{ overflow:hidden; min-block-size:0; }
.da-reveal.is-open{ grid-template-rows:1fr; }
.da-note-toggle{
  align-self:start;
  background:none; border:0; padding:0;
  min-block-size:var(--da-tap);
  font-size:14px; font-weight:600; color:var(--da-brand-700);
  cursor:pointer; text-decoration:underline;
  text-underline-offset:3px;
}

/* Order-card pulse after sticky-bar tap — 600ms, once (UI-SPEC §3.17). */
@keyframes da-pulse{
  0%{ box-shadow:0 0 0 0 rgba(166,130,228,.55); }
  100%{ box-shadow:0 0 0 12px rgba(166,130,228,0); }
}
.da-order-card.da-pulse{ animation:da-pulse 600ms var(--da-ease-out) 1; }

/* CTA spinner */
@keyframes da-spin{ to{ transform:rotate(360deg); } }
.da-spinner{
  inline-size:20px; block-size:20px;
  border:3px solid rgba(255,255,255,.35);
  border-block-start-color:#fff;
  border-radius:var(--da-r-pill);
  animation:da-spin 700ms linear infinite;
}

/* =========================================================================
   9. Receipt — till slip (UI-SPEC §3.9)
   ========================================================================= */

.da-receipt{
  --da-notch-bg:var(--da-bg); /* the card background the notches punch through to */
  position:relative;
  background:var(--da-bg-tint);
  border-radius:12px;
  border-block-start:1px dashed var(--da-brand-200);
  border-block-end:1px dashed var(--da-brand-200);
  padding:var(--da-s4);
  margin-block:var(--da-s4);
}
.da-receipt::before,
.da-receipt::after{
  content:"";
  position:absolute;
  inset-block-start:50%;
  inline-size:16px; block-size:16px;
  border-radius:var(--da-r-pill);
  background:var(--da-notch-bg);
  transform:translateY(-50%);
}
.da-receipt::before{ inset-inline-start:-9px; }
.da-receipt::after{ inset-inline-end:-9px; }
.da-receipt__row{
  display:flex; align-items:baseline; gap:var(--da-s2);
  font-size:15px; color:var(--da-ink-700);
  padding-block:4px;
}
.da-receipt__row .da-receipt__value{
  font-variant-numeric:tabular-nums;
  color:var(--da-ink-900); font-weight:600;
  transition:opacity var(--da-dur-1) var(--da-ease-out);
}
.da-receipt__value.is-flip{ opacity:0; }
.da-receipt__leader{
  flex:1 1 auto;
  border-block-end:2px dotted var(--da-ink-300); /* decorative */
  transform:translateY(-4px);
}
.da-receipt__row.is-discount .da-receipt__value,
.da-receipt__row .da-receipt__value.is-free{ color:var(--da-success); }
.da-receipt__total{
  display:flex; align-items:baseline; gap:var(--da-s2);
  margin-block-start:var(--da-s2);
  padding-block-start:var(--da-s3);
  border-block-start:2px solid var(--da-ink-900);
  font-size:15px; font-weight:700; color:var(--da-ink-900);
}
.da-receipt__total .da-receipt__value{
  margin-inline-start:auto;
  font-size:20px; font-weight:800;
  font-variant-numeric:tabular-nums;
}
@media (min-width:1024px){
  .da-receipt__total .da-receipt__value{ font-size:22px; }
}

/* =========================================================================
   10. Form messages / edge states (UI-SPEC §3.12)
   ========================================================================= */

.da-banner{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--da-s2);
  background:var(--da-error-50); color:var(--da-error);
  border-radius:var(--da-r-input);
  padding:var(--da-s3) var(--da-s4);
  font-size:15px; font-weight:600; line-height:1.6;
}
.da-banner a{ color:inherit; font-weight:800; }

.da-notice{
  border-radius:var(--da-r-card);
  padding:var(--da-s4);
  font-size:15px; line-height:1.7;
  display:flex; flex-direction:column; gap:var(--da-s3); align-items:flex-start;
}
.da-notice--dup{ background:var(--da-brand-50); color:var(--da-ink-900); } /* neutral, never red */
.da-notice--oos,
.da-notice--nodeliver{ background:var(--da-error-50); color:var(--da-ink-900); }
.da-notice__title{ font-weight:700; }

/* =========================================================================
   11. Thank-you state (UI-SPEC §3.11)
   ========================================================================= */

.da-thankyou{
  display:flex; flex-direction:column; align-items:center; gap:var(--da-s3);
  text-align:center;
  animation:da-fadein 200ms var(--da-ease-out) 1;
}
@keyframes da-fadein{ from{ opacity:0; } to{ opacity:1; } }
.da-thankyou__check{
  inline-size:64px; block-size:64px;
  border-radius:var(--da-r-pill);
  background:var(--da-success-50);
  position:relative;
}
.da-thankyou__check::after{
  content:"";
  position:absolute; inset-block-start:18px; inset-inline-start:22px;
  inline-size:16px; block-size:26px;
  border-inline-end:4px solid var(--da-success);
  border-block-end:4px solid var(--da-success);
  transform:rotate(40deg);
}
.da-thankyou__order{
  font-size:24px; font-weight:800; color:var(--da-ink-900);
  font-variant-numeric:tabular-nums;
}
.da-thankyou__recap{ inline-size:100%; text-align:start; }

/* Pure-CSS confetti — 6 particles, once, skipped under reduced motion. */
.da-confetti{ position:relative; inline-size:0; block-size:0; }
.da-confetti i{
  position:absolute; inline-size:8px; block-size:12px;
  animation:da-confetti 900ms var(--da-ease-out) 1 forwards;
}
.da-confetti i:nth-child(1){ background:var(--da-brand-400); --dx:-60px; }
.da-confetti i:nth-child(2){ background:var(--da-berry);     --dx:-32px; animation-delay:60ms; }
.da-confetti i:nth-child(3){ background:var(--da-brand-200); --dx:-8px;  animation-delay:120ms; }
.da-confetti i:nth-child(4){ background:var(--da-success);   --dx:12px;  animation-delay:40ms; }
.da-confetti i:nth-child(5){ background:var(--da-berry-700); --dx:40px;  animation-delay:100ms; }
.da-confetti i:nth-child(6){ background:var(--da-brand-600); --dx:64px;  animation-delay:160ms; }
@keyframes da-confetti{
  0%{ opacity:1; transform:translate(0,0) rotate(0); }
  100%{ opacity:0; transform:translate(var(--dx),-90px) rotate(300deg); }
}
@media (prefers-reduced-motion: reduce){
  .da-confetti{ display:none; }
}

/* =========================================================================
   12. Trust strip (UI-SPEC §3.13)
   ========================================================================= */

.da-trust{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--da-s2);
  margin-block-start:var(--da-s6);
}
.da-trust__card{
  display:flex; flex-direction:column; align-items:center; gap:var(--da-s2);
  background:var(--da-bg-soft);
  border-radius:var(--da-r-card);
  padding:16px;
  text-align:center;
  font-size:14px; font-weight:600; color:var(--da-ink-900);
}
.da-trust__card svg{ inline-size:28px; block-size:28px; fill:var(--da-brand-600); }
.da-trust__logos{
  display:flex; justify-content:center; align-items:center; gap:var(--da-s4);
  margin-block-start:var(--da-s3);
}
.da-trust__logos img,
.da-trust__logos svg{
  block-size:24px; inline-size:auto;
  filter:grayscale(1); opacity:.65;
}

/* =========================================================================
   13. Reviews (UI-SPEC §3.14)
   ========================================================================= */

.da-reviews{ margin-block-start:var(--da-s6); }
.da-reviews__avg{
  display:flex; align-items:center; gap:var(--da-s3);
  margin-block-end:var(--da-s4);
}
.da-reviews__num{ font-size:28px; font-weight:800; color:var(--da-ink-900); }
.da-reviews__stars svg{ inline-size:18px; block-size:18px; fill:var(--da-berry); }
.da-reviews__strip{
  direction:rtl;
  display:flex; gap:var(--da-s2);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  margin-block-end:var(--da-s4);
}
.da-reviews__strip::-webkit-scrollbar{ display:none; }
.da-reviews__strip img{
  flex:0 0 96px;
  inline-size:96px; block-size:96px;
  object-fit:cover;
  border-radius:12px;
  scroll-snap-align:start;
  cursor:pointer;
}
.da-review{
  background:var(--da-bg);
  border:1px solid var(--da-ink-100); /* decorative, non-interactive card */
  border-radius:var(--da-r-card);
  padding:var(--da-s4);
  margin-block-end:var(--da-s3);
}
.da-review__head{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--da-s2);
  font-size:14px; font-weight:700; color:var(--da-ink-900);
}
.da-review__date{ font-weight:400; font-size:13px; color:var(--da-ink-500); }
.da-review__text{
  font-size:15px; line-height:1.6; color:var(--da-ink-700);
  margin-block-start:var(--da-s2);
  unicode-bidi:plaintext;
}
.da-review__thumb{ inline-size:72px; border-radius:8px; margin-block-start:var(--da-s2); }
.da-review__verified{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--da-success-50); color:var(--da-success);
  font-size:12px; font-weight:700;
  padding:2px 10px; border-radius:var(--da-r-pill);
}

/* =========================================================================
   14. FAQ (UI-SPEC §3.15)
   ========================================================================= */

.da-faq{ margin-block-start:var(--da-s6); }
.da-faq details{
  border-block-end:1px solid var(--da-ink-100);
}
.da-faq summary{
  display:flex; align-items:center; gap:var(--da-s2);
  min-block-size:var(--da-tap);
  padding-block:var(--da-s3);
  font-size:16px; font-weight:700; color:var(--da-ink-900);
  cursor:pointer; list-style:none;
}
.da-faq summary::-webkit-details-marker{ display:none; }
.da-faq summary::after{
  content:"";
  margin-inline-start:auto;
  inline-size:20px; block-size:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233F3556'%3E%3Cpath d='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition:transform var(--da-dur-2) var(--da-ease-out);
  flex-shrink:0;
}
.da-faq details[open] summary::after{ transform:rotate(180deg); }
.da-faq details[open]{ background:var(--da-bg-tint); }
.da-faq details > div{
  padding-block-end:var(--da-s4); padding-inline:var(--da-s3);
  font-size:15px; line-height:1.7; color:var(--da-ink-700);
}

/* =========================================================================
   15. Related products + archive cards (UI-SPEC §3.16)
   ========================================================================= */

.da-related{ margin-block-start:var(--da-s6); }
.da-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--da-s3);
}
@media (min-width:1024px){
  .da-cards{ grid-template-columns:repeat(4,1fr); }
}
.da-card{ text-decoration:none; display:block; }
.da-card img{
  inline-size:100%;
  aspect-ratio:var(--da-media-ratio);
  object-fit:cover;
  border-radius:var(--da-r-card);
  background:var(--da-bg-soft);
}
.da-card__title{
  margin-block-start:var(--da-s2);
  font-size:14px; line-height:1.5; color:var(--da-ink-900);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.da-card__price{
  font-size:15px; font-weight:800; color:var(--da-ink-900);
  font-variant-numeric:tabular-nums;
}

/* =========================================================================
   16. Lightbox (UI-SPEC §3.2)
   ========================================================================= */

.da-lightbox{
  border:0; padding:0;
  background:transparent;
  max-inline-size:100vw; max-block-size:100dvh;
  inline-size:100vw; block-size:100dvh;
}
.da-lightbox::backdrop{ background:rgba(0,0,0,.92); }
.da-lightbox__body{
  inline-size:100%; block-size:100%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.92);
}
.da-lightbox__img{
  max-inline-size:100%; max-block-size:100%;
  object-fit:contain;
  touch-action:pinch-zoom;
}
.da-lightbox__close{
  position:fixed;
  inset-block-start:var(--da-s3); inset-inline-end:var(--da-s3);
  inline-size:var(--da-tap); block-size:var(--da-tap);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); color:#fff;
  border:0; border-radius:var(--da-r-pill);
  font-size:26px; line-height:1; cursor:pointer;
}
.da-lightbox__nav{
  position:fixed;
  inset-block-start:50%; transform:translateY(-50%);
  inline-size:var(--da-tap); block-size:var(--da-tap);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.14); color:#fff;
  border:0; border-radius:var(--da-r-pill);
  font-size:24px; cursor:pointer;
}
.da-lightbox__nav--prev{ inset-inline-start:var(--da-s3); }
.da-lightbox__nav--next{ inset-inline-end:var(--da-s3); }

/* =========================================================================
   17. Desktop refinements (UI-SPEC §4)
   ========================================================================= */

@media (min-width:1024px){
  .da-price__now{ font-size:44px; }
  .da-price__old{ font-size:18px; }

  .da-gallery__thumbs{
    display:flex; gap:var(--da-s2); margin-block-start:var(--da-s3);
  }
  .da-gallery__thumb{
    inline-size:72px; block-size:72px;
    padding:0; border:1.5px solid var(--da-line-strong);
    border-radius:12px; overflow:hidden;
    background:var(--da-bg-soft); cursor:pointer;
  }
  .da-gallery__thumb img{ inline-size:100%; block-size:100%; object-fit:cover; }
  .da-gallery__thumb.is-active{ border:2px solid var(--da-brand-600); }

  .da-prose{ max-inline-size:65ch; }
}
.da-gallery__thumbs{ display:none; }
@media (min-width:1024px){ .da-gallery__thumbs{ display:flex; } }

/* =========================================================================
   18. Page furniture (archive/footer/topbar extras)
   ========================================================================= */

.da-footer{
  margin-block-start:var(--da-s8);
  padding-block:var(--da-s6);
  background:var(--da-bg-soft);
  font-size:14px; color:var(--da-ink-700);
  text-align:center;
}
.da-footer a{ color:var(--da-brand-700); }

/* WooCommerce fallback-template sanity (archives etc. keep WC markup). */
.woocommerce-breadcrumb{ font-size:13px; color:var(--da-ink-500); }
.onsale{
  background:var(--da-berry); color:#fff;
  font-size:13px; font-weight:800;
  padding:4px 8px; border-radius:6px;
}

/* =========================================================================
   19. Motion discipline (UI-SPEC §5) — global reduce guard in style.css
   ========================================================================= */

@media (prefers-reduced-motion: reduce){
  .da-sticky{ transition:none; }
  .da-order-card.da-pulse{ animation:none; }
  .da-reveal{ transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================================
   Home / front page — minimal hero, categories, featured grid
   ========================================================================= */
.da-hero{
  text-align:center;
  padding-block:var(--da-s7) var(--da-s6);
  padding-inline:var(--da-s4);
  background:linear-gradient(180deg, var(--da-bg-soft), var(--da-bg));
}
.da-hero__eyebrow{
  font-size:13px; font-weight:700; letter-spacing:.01em;
  color:var(--da-brand-600); margin:0 0 10px;
}
.da-hero__title{
  font-size:clamp(28px, 7vw, 40px); font-weight:800; line-height:1.12;
  color:var(--da-ink-900); margin:0;
}
.da-hero__tagline{
  max-inline-size:40ch; margin:14px auto 0;
  color:var(--da-ink-700); font-size:16px; line-height:1.7;
}
.da-hero__cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size:var(--da-tap); margin-block-start:22px;
  padding-inline:34px; border-radius:var(--da-r-pill);
  background:var(--da-berry); color:#fff;
  font-size:16px; font-weight:700; text-decoration:none;
  transition:transform var(--da-dur-1) var(--da-ease-out), filter var(--da-dur-1) var(--da-ease-out);
}
.da-hero__cta:hover{ filter:brightness(1.06); }
.da-hero__cta:active{ transform:scale(.98); }
.da-hero__trust{
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px;
  font-size:13px; color:var(--da-ink-700);
}
.da-hero__trust li::before{
  content:"✓"; color:#15803D; font-weight:800; margin-inline-end:5px;
}

/* Section heading — branded DA-rose so it reads as a heading, distinct from the
   plum body and the purple category/section text below it. Extra breathing room
   before the section content. */
.da-section__title{
  color:var(--da-berry-800);
  margin-block-end:var(--da-s4);
}
@media (min-width:1024px){
  .da-section__title{ margin-block-end:var(--da-s5); }
}

/* Categories row — lavender pill badges (DA brand tint). Slide horizontally
   (single row, scrollable) instead of wrapping/stacking once the pills exceed
   the row width. A pill peeking at the inline-end edge hints "scroll for more". */
.da-cats{
  display:flex;
  flex-wrap:nowrap;
  gap:var(--da-s2);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;            /* Firefox */
  -ms-overflow-style:none;         /* legacy Edge */
  padding-block-end:2px;
}
.da-cats::-webkit-scrollbar{ display:none; }   /* WebKit */
.da-cat{
  flex:0 0 auto;                   /* keep natural width; never shrink to fit */
  scroll-snap-align:start;
  display:inline-flex; align-items:baseline; gap:8px;
  padding-block:11px; padding-inline:22px;
  border:0; border-radius:var(--da-r-pill);
  background:var(--da-brand-50); text-decoration:none;
  transition:background-color var(--da-dur-1) var(--da-ease-out);
}
.da-cat:hover{ background:var(--da-brand-100); }
.da-cat__name{ font-size:15px; font-weight:700; color:var(--da-brand-700); }
.da-cat__count{ font-size:12px; font-weight:600; color:var(--da-brand-500); }

.da-front__all{ text-align:center; margin-block-start:var(--da-s5); }