/* ==========================================================================
   Donna Alxia — Design System
   Premium editorial beauty commerce. Hebrew RTL first.
   Single source of truth for tokens + shared components across all templates.
   ========================================================================== */

:root{
  /* ---- Brand ---- */
  --da-ink:#0d0d0d;
  --da-ink-soft:#1c1c22;
  --da-ink-muted:#3f4046;

  /* Gold scale. #c8922a is decorative only (2.76:1 on white — never for text).
     Use --da-gold-text on light surfaces (5.66:1) and --da-gold-on-dark on dark. */
  --da-gold:#c8922a;
  --da-gold-text:#8b5e16;
  --da-gold-on-dark:#f5c842;
  --da-gold-pale:#fef7e4;
  --da-gold-line:rgba(200,146,42,.32);

  /* ---- Surfaces ---- */
  --da-bg:#ffffff;
  --da-bg-warm:#faf9f7;
  --da-bg-dark:#0d0d0d;
  --da-bg-dark-2:#141416;
  --da-card:#ffffff;

  /* ---- Text ---- */
  --da-text:#0d0d0d;
  --da-text-2:#4b5563;
  --da-text-3:#6b7280;
  --da-text-on-dark:#ffffff;
  --da-text-on-dark-2:#d1d5db;
  --da-text-on-dark-3:#9ca3af;

  /* ---- Lines ---- */
  --da-border:#e8e4de;
  --da-border-strong:#d6d1c8;
  --da-border-dark:rgba(255,255,255,.12);

  /* ---- Status ---- */
  --da-sale:#b3261e;
  --da-sale-bg:#fdeceb;
  --da-success:#15803d;
  --da-success-bg:#eefaf1;
  --da-warn:#92400e;
  --da-warn-bg:#fff7ed;

  /* ---- Type ---- */
  --da-font:"Assistant",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --da-font-display:"Frank Ruhl Libre","Assistant",Georgia,serif;

  --da-fs-xs:.78rem;
  --da-fs-sm:.875rem;
  --da-fs-base:1rem;
  --da-fs-lg:1.125rem;
  --da-fs-xl:1.375rem;
  --da-fs-2xl:clamp(1.5rem,2.4vw,1.9rem);
  --da-fs-3xl:clamp(1.85rem,3.1vw,2.6rem);
  --da-fs-4xl:clamp(2.1rem,4vw,3.4rem);

  /* ---- Space (marketing rhythm: spacious) ---- */
  --da-1:4px;
  --da-2:8px;
  --da-3:12px;
  --da-4:16px;
  --da-5:24px;
  --da-6:32px;
  --da-7:48px;
  --da-8:64px;
  --da-9:96px;
  --da-section:clamp(56px,7vw,96px);
  --da-gutter:clamp(16px,4vw,56px);

  /* ---- Radius ---- */
  --da-r-sm:8px;
  --da-r-md:14px;
  --da-r-lg:22px;
  --da-r-xl:30px;
  --da-r-pill:999px;

  /* ---- Elevation ---- */
  --da-sh-sm:0 1px 2px rgba(13,13,13,.06),0 1px 3px rgba(13,13,13,.05);
  --da-sh-md:0 8px 28px rgba(13,13,13,.07);
  --da-sh-lg:0 20px 50px rgba(13,13,13,.12);
  --da-sh-gold:0 12px 30px rgba(200,146,42,.34);

  /* ---- Motion ---- */
  --da-t-fast:140ms cubic-bezier(.4,0,.2,1);
  --da-t:220ms cubic-bezier(.4,0,.2,1);
  --da-t-slow:420ms cubic-bezier(.22,1,.36,1);

  /* ---- Layout ---- */
  --da-max:1240px;
  --da-max-narrow:760px;
  --da-header-h:72px;
}

/* ==========================================================================
   Base
   ========================================================================== */

.da-scope,
.da-scope *,
.da-scope *::before,
.da-scope *::after{box-sizing:border-box}

.da-scope{
  font-family:var(--da-font);
  color:var(--da-text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.da-scope img{max-width:100%;height:auto;display:block}
.da-scope button{font:inherit;cursor:pointer}

/* Wrapped in :where() so it carries ZERO specificity. Written plainly,
   `.da-scope a` (0,1,1) outranks component classes like `.da-pcard__atc`
   (0,1,0) — which made every link-styled button render its text in the
   inherited colour, i.e. black on black. */
:where(.da-scope a){color:inherit;text-decoration:none}

/* Visible focus everywhere — never removed. */
.da-scope a:focus-visible,
.da-scope button:focus-visible,
.da-scope input:focus-visible,
.da-scope select:focus-visible,
.da-scope textarea:focus-visible,
.da-scope [tabindex]:focus-visible{
  outline:3px solid var(--da-gold-text);
  outline-offset:2px;
  border-radius:var(--da-r-sm);
}

.da-wrap{
  width:100%;
  max-width:var(--da-max);
  margin-inline:auto;
  padding-inline:var(--da-gutter);
}

.da-section{padding-block:var(--da-section)}
.da-section--warm{background:var(--da-bg-warm)}
.da-section--dark{background:var(--da-bg-dark);color:var(--da-text-on-dark)}

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

/* Skip link — off-screen until focused, then fully visible. */
.da-skip{
  position:fixed;
  inset-block-start:-100px;
  inset-inline-start:16px;
  z-index:99999;
  display:inline-flex;align-items:center;
  min-height:48px;
  padding:0 22px;
  background:var(--da-ink);
  color:#fff;
  font-family:var(--da-font);
  font-weight:800;
  border-radius:0 0 var(--da-r-md) var(--da-r-md);
  box-shadow:var(--da-sh-lg);
  transition:inset-block-start var(--da-t);
}
.da-skip:focus{inset-block-start:0}

/* ==========================================================================
   Typography blocks
   ========================================================================== */

.da-eyebrow{
  display:inline-flex;align-items:center;gap:var(--da-2);
  background:var(--da-gold-pale);
  color:var(--da-gold-text);
  font-size:var(--da-fs-xs);
  font-weight:800;
  letter-spacing:.09em;
  padding:5px 12px;
  border-radius:var(--da-r-sm);
  margin-bottom:var(--da-4);
}
.da-section--dark .da-eyebrow,
.da-eyebrow--dark{
  background:rgba(245,200,66,.14);
  color:var(--da-gold-on-dark);
}

.da-h1{
  font-family:var(--da-font-display);
  font-size:var(--da-fs-4xl);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.015em;
  margin:0 0 var(--da-4);
}
.da-h2{
  font-family:var(--da-font-display);
  font-size:var(--da-fs-3xl);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.012em;
  margin:0 0 var(--da-4);
}
.da-h3{
  font-size:var(--da-fs-xl);
  font-weight:800;
  line-height:1.3;
  margin:0 0 var(--da-3);
}
.da-lead{
  font-size:var(--da-fs-lg);
  line-height:1.8;
  color:var(--da-text-2);
  margin:0 0 var(--da-5);
  max-width:62ch;
}
.da-section--dark .da-lead{color:var(--da-text-on-dark-2)}

.da-accent{color:var(--da-gold-text)}
.da-section--dark .da-accent,
.da-accent--dark{color:var(--da-gold-on-dark)}

/* ==========================================================================
   Buttons — min 48px target, 8px+ spacing, always animated feedback
   ========================================================================== */

.da-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--da-2);
  min-height:50px;
  padding:13px 28px;
  border:2px solid transparent;
  border-radius:var(--da-r-pill);
  font-size:var(--da-fs-base);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:transform var(--da-t),box-shadow var(--da-t),background var(--da-t),border-color var(--da-t),color var(--da-t);
}
.da-btn:active{transform:translateY(1px)}

.da-btn--primary{
  background:linear-gradient(135deg,#f5c842,#c8922a);
  color:#0d0d0d;
  box-shadow:var(--da-sh-gold);
}
.da-btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(200,146,42,.5)}

.da-btn--ink{background:var(--da-ink);color:#fff}
.da-btn--ink:hover{background:var(--da-ink-soft);transform:translateY(-2px);box-shadow:var(--da-sh-md)}

.da-btn--outline{background:#fff;color:var(--da-ink);border-color:var(--da-border-strong)}
.da-btn--outline:hover{border-color:var(--da-gold);color:var(--da-gold-text);box-shadow:var(--da-sh-sm)}

.da-btn--ghost{background:transparent;color:var(--da-text-on-dark);border-color:rgba(255,255,255,.24)}
.da-btn--ghost:hover{border-color:var(--da-gold-on-dark);color:#fff}

.da-btn--block{width:100%}
.da-btn--lg{min-height:56px;padding:16px 34px;font-size:var(--da-fs-lg)}

.da-btn__arrow{transition:transform var(--da-t)}
.da-btn:hover .da-btn__arrow{transform:translateX(-4px)}

.da-link{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;                     /* touch target */
  font-weight:800;
  color:var(--da-gold-text);
  box-shadow:inset 0 -1px 0 var(--da-gold-line);
  transition:box-shadow var(--da-t),color var(--da-t);
}
.da-link:hover{box-shadow:inset 0 -1px 0 var(--da-gold-text)}
.da-section--dark .da-link{color:var(--da-gold-on-dark);box-shadow:inset 0 -1px 0 rgba(245,200,66,.4)}

/* ==========================================================================
   Icons — SVG only, never emoji
   ========================================================================== */

.da-ico{
  width:1em;height:1em;
  flex:0 0 auto;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:-.125em;
}
.da-ico--fill{fill:currentColor;stroke:none}
.da-ico-lg{width:1.35em;height:1.35em}

.da-ico-badge{
  width:40px;height:40px;
  border-radius:var(--da-r-pill);
  background:var(--da-gold-pale);
  color:var(--da-gold-text);
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.da-ico-badge .da-ico{width:19px;height:19px}
.da-section--dark .da-ico-badge{background:rgba(245,200,66,.13);color:var(--da-gold-on-dark)}

/* ==========================================================================
   Price — anchoring is the core conversion mechanic
   ========================================================================== */

.da-price{
  display:flex;align-items:baseline;gap:var(--da-2);
  flex-wrap:wrap;
}
.da-price__now{
  font-size:var(--da-fs-xl);
  font-weight:900;
  color:var(--da-ink);
  letter-spacing:-.01em;
}
.da-price__was{
  font-size:var(--da-fs-sm);
  color:var(--da-text-3);
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
}
.da-price__save{
  font-size:var(--da-fs-xs);
  font-weight:900;
  color:var(--da-sale);
  background:var(--da-sale-bg);
  padding:3px 9px;
  border-radius:var(--da-r-sm);
}
.da-section--dark .da-price__now{color:#fff}
.da-section--dark .da-price__was{color:var(--da-text-on-dark-3)}

/* ==========================================================================
   Product card — one component, every surface
   ========================================================================== */

.da-grid{
  display:grid;
  gap:var(--da-4);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.da-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.da-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.da-pcard{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--da-card);
  border:1px solid var(--da-border);
  border-radius:var(--da-r-lg);
  overflow:hidden;
  transition:border-color var(--da-t),box-shadow var(--da-t),transform var(--da-t);
}
.da-pcard:hover,
.da-pcard:focus-within{
  border-color:var(--da-gold);
  box-shadow:var(--da-sh-lg);
  transform:translateY(-4px);
}

.da-pcard__media{
  position:relative;
  aspect-ratio:1/1;           /* reserves space — no CLS */
  background:var(--da-bg-warm);
  overflow:hidden;
}
.da-pcard__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform var(--da-t-slow);
}
.da-pcard:hover .da-pcard__media img{transform:scale(1.05)}

.da-pcard__flags{
  position:absolute;
  inset-block-start:12px;
  inset-inline-start:12px;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  z-index:2;
}
.da-flag{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;
  border-radius:var(--da-r-sm);
  font-size:var(--da-fs-xs);
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:var(--da-sh-sm);
}
.da-flag--sale{background:var(--da-sale);color:#fff}
.da-flag--best{background:var(--da-ink);color:var(--da-gold-on-dark)}
.da-flag--new{background:#fff;color:var(--da-ink);border:1px solid var(--da-border-strong)}
.da-flag--out{background:#e5e7eb;color:#374151}

.da-pcard__body{
  display:flex;flex-direction:column;
  flex:1;
  padding:var(--da-4);
  gap:var(--da-2);
}
.da-pcard__cat{
  font-size:var(--da-fs-xs);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--da-text-3);
}
.da-pcard__title{
  font-size:var(--da-fs-base);
  font-weight:800;
  line-height:1.4;
  color:var(--da-ink);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.da-pcard__title a::after{content:"";position:absolute;inset:0;z-index:1}
.da-pcard__rating{
  display:flex;align-items:center;gap:6px;
  font-size:var(--da-fs-xs);
  color:var(--da-text-3);
}
.da-stars{display:inline-flex;gap:1px;color:#e8a90c}
.da-stars .da-ico{width:14px;height:14px;fill:currentColor;stroke:none}
.da-stars .da-ico--empty{fill:#dcd8d0}

.da-pcard__spacer{flex:1}

.da-pcard__foot{
  padding:0 var(--da-4) var(--da-4);
  display:flex;flex-direction:column;gap:var(--da-3);
}
.da-pcard__atc{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:var(--da-2);
  min-height:46px;
  width:100%;
  border:0;
  border-radius:var(--da-r-md);
  background:var(--da-ink);
  color:#fff;
  font-size:var(--da-fs-sm);
  font-weight:800;
  transition:background var(--da-t),transform var(--da-t);
}
.da-pcard__atc:hover{background:var(--da-ink-soft);transform:translateY(-1px)}
.da-pcard__atc.loading{opacity:.65;pointer-events:none}
.da-pcard__atc.added{background:var(--da-success)}

/* ==========================================================================
   Trust
   ========================================================================== */

.da-trust{
  display:flex;flex-wrap:wrap;
  gap:var(--da-3) var(--da-5);
}
.da-trust__item{
  display:flex;align-items:center;gap:var(--da-2);
  font-size:var(--da-fs-sm);
  color:var(--da-text-2);
}
.da-trust__item .da-ico{color:var(--da-gold-text);width:17px;height:17px}
.da-section--dark .da-trust__item{color:var(--da-text-on-dark-2)}
.da-section--dark .da-trust__item .da-ico{color:var(--da-gold-on-dark)}

.da-paylogos{
  display:flex;align-items:center;gap:var(--da-2);
  flex-wrap:wrap;
}
.da-paylogos svg{height:24px;width:auto;display:block}
.da-paylogos__note{
  font-size:var(--da-fs-xs);
  color:var(--da-text-3);
  display:flex;align-items:center;gap:5px;
}

/* Free-shipping progress — only ever rendered with real cart data */
.da-ship{
  display:flex;align-items:center;gap:var(--da-3);
  padding:var(--da-3) var(--da-4);
  background:var(--da-gold-pale);
  border:1px solid var(--da-gold-line);
  border-radius:var(--da-r-md);
  font-size:var(--da-fs-sm);
}
.da-ship__text{color:var(--da-ink);font-weight:700}
.da-ship__text strong{color:var(--da-gold-text)}
.da-ship__track{
  flex:1;min-width:80px;height:7px;
  border-radius:var(--da-r-pill);
  background:rgba(13,13,13,.1);
  overflow:hidden;
}
.da-ship__fill{
  height:100%;
  border-radius:var(--da-r-pill);
  background:linear-gradient(90deg,#c8922a,#f5c842);
  transition:width var(--da-t-slow);
}
.da-ship--done{background:var(--da-success-bg);border-color:#bfe6cc}
.da-ship--done .da-ship__text strong{color:var(--da-success)}
.da-ship--done .da-ship__fill{background:var(--da-success)}

/* ==========================================================================
   Cards / notes
   ========================================================================== */

.da-card{
  background:var(--da-card);
  border:1px solid var(--da-border);
  border-radius:var(--da-r-lg);
  padding:var(--da-5);
}
.da-card--warm{background:var(--da-bg-warm)}
.da-section--dark .da-card{
  background:var(--da-bg-dark-2);
  border-color:var(--da-border-dark);
  color:var(--da-text-on-dark);
}

.da-note{
  display:flex;gap:var(--da-3);
  padding:var(--da-3) var(--da-4);
  border-radius:var(--da-r-md);
  font-size:var(--da-fs-sm);
  line-height:1.6;
}
.da-note--info{background:var(--da-bg-warm);color:var(--da-text-2)}
.da-note--ok{background:var(--da-success-bg);color:#14532d}
.da-note--warn{background:var(--da-warn-bg);color:var(--da-warn)}

/* ==========================================================================
   Responsive — mobile 375 / tablet 768 / laptop 1024 / desktop 1440
   ========================================================================== */

@media(max-width:1024px){
  .da-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
  :root{--da-section:clamp(44px,8vw,64px)}
  .da-grid--3,.da-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .da-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--da-3)}
}
@media(max-width:520px){
  .da-pcard__body{padding:var(--da-3)}
  .da-pcard__foot{padding:0 var(--da-3) var(--da-3)}
  .da-pcard__title{font-size:var(--da-fs-sm)}
  .da-price__now{font-size:var(--da-fs-lg)}
  .da-btn{width:100%}
  .da-btn--auto{width:auto}
}

/* ==========================================================================
   Elementor kit neutralisation

   The site's Elementor global kit styles EVERY <button> with
   `.elementor-kit-6 button { background-color:#efb7c6; color:#000;
   border-style:none; border-radius:5px }`. That selector is specificity
   (0,1,1) and beat every component class here (0,1,0), repainting the cart
   drawer close button, the burger, the header icons and the add-to-cart
   buttons pink with black text.

   Everything below re-asserts our own styling at (0,2,0) so it wins, without
   touching Elementor's styling on pages it actually owns (about, contact).
   Only the four properties the kit sets need restating.
   ========================================================================== */

.da-scope button,
.da-scope input[type="button"],
.da-scope input[type="submit"]{
  background-color:transparent;
  color:inherit;
  border-radius:0;
}

.da-scope .da-btn{border-radius:var(--da-r-pill)}
.da-scope .da-btn--primary{background:linear-gradient(135deg,#f5c842,#c8922a);color:#0d0d0d}
.da-scope .da-btn--ink{background-color:var(--da-ink);color:#fff}
.da-scope .da-btn--outline{background-color:#fff;color:var(--da-ink);border:2px solid var(--da-border-strong)}
.da-scope .da-btn--ghost{background-color:transparent;color:var(--da-text-on-dark);border:2px solid rgba(255,255,255,.24)}

.da-scope .da-pcard__atc{
  background-color:var(--da-ink);
  color:#fff;
  border-radius:var(--da-r-md);
}
.da-scope .da-pcard__atc:hover{background-color:var(--da-ink-soft)}
.da-scope .da-pcard__atc.added{background-color:var(--da-success)}

.da-scope .dah-ico-btn{border-radius:var(--da-r-pill);color:var(--da-ink)}
.da-scope .dah-ico-btn:hover{background-color:var(--da-bg-warm);color:var(--da-gold-text)}
.da-scope .dah-burger{border-radius:var(--da-r-pill)}
.da-scope .dah-ann__x{border-radius:var(--da-r-pill);color:rgba(255,255,255,.6)}
.da-scope .dah-ann__x:hover{background-color:rgba(255,255,255,.1);color:#fff}
.da-scope .dah-cta{background:linear-gradient(135deg,#f5c842,#c8922a);color:#0d0d0d;border-radius:var(--da-r-pill)}

.da-scope .dacart-qty button{background-color:#fff;color:var(--da-ink);border-radius:0}
.da-scope .dacart-update{
  border:1px solid var(--da-border-strong);
  border-radius:var(--da-r-pill);
  color:var(--da-text-2);
}
.da-scope .dacart-remove{color:var(--da-text-3);border-radius:0}
.da-scope .dacart-remove:hover{color:var(--da-sale)}
.da-scope .dapdp-thumb{border-radius:var(--da-r-md);background-color:var(--da-bg-warm)}
.da-scope .dapdp-faq__item summary{color:var(--da-ink)}

/* Never let anything scroll the page sideways */
.da-scope{overflow-x:clip}

@media(prefers-reduced-motion:reduce){
  .da-scope *,
  .da-scope *::before,
  .da-scope *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}