/* ─────────────────────────────────────────────────────────────
   SkyDonate Mini Cart — pixel-perfect styles
   Source of truth: mini-cart-components.jsx
   Tokens (set on #skd-minicart-root by JS): --mc-accent, --mc-sp, --mc-radius
   Palette: ink #13233C · muted #5C6B81 · border #E3E9F1 · surface #F4F6FA
   ───────────────────────────────────────────────────────────── */

#skd-minicart-root{
  --mc-accent:#004F9F;
  --mc-sp:1;
  --mc-radius:14px;
}

/* Strip native button chrome AND neutralise WoodMart's global button rule
   (it forces min-height:42px, padding:5px 20px, uppercase on every <button>,
   which turned our toggle into a circle and bloated the icon buttons). Our
   individual .skd-mc-* rules (higher specificity) re-apply size/background. */
#skd-minicart-root button{
  -webkit-appearance:none;
  appearance:none;
  font-family:inherit;
  margin:0;
  padding:0;
  min-height:0;
  min-width:0;
  line-height:normal;
  text-transform:none;
  box-sizing:border-box;
}

/* ── Backdrop ───────────────────────────────────────────────── */
#skd-minicart-root .skd-mc-backdrop{
  position:fixed;
  inset:0;
  background:rgba(8,16,30,.45);
  -webkit-backdrop-filter:blur(1.5px);
  backdrop-filter:blur(1.5px);
  opacity:0;
  /* CRITICAL: a closed backdrop must never catch taps — without this, a
     missed/raced `root.hidden` leaves an invisible full-screen layer
     swallowing every tap on the page (mobile QA bug). */
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:100000000;
  cursor:pointer;
}
#skd-minicart-root .skd-mc-backdrop.open{ opacity:1; pointer-events:auto; }

/* ── Desktop panel (right slide-over) ───────────────────────── */
#skd-minicart-root .skd-mc-panel{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:408px;
  max-width:100vw;
  background:#fff;
  display:flex;
  flex-direction:column;
  box-shadow:-24px 0 60px rgba(8,16,30,.35);
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.4,0,.2,1);
  z-index:100000001;
  color:#13233C;
  font-family:'Figtree',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#skd-minicart-root .skd-mc-panel.open{ transform:none; }

/* Grab handle — hidden on desktop, shown on mobile */
#skd-minicart-root .skd-mc-grab{ display:none; }

/* ── Header ─────────────────────────────────────────────────── */
#skd-minicart-root .skd-mc-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:calc(14px * var(--mc-sp)) calc(22px * var(--mc-sp));
  border-bottom:1px solid #E3E9F1;
  flex-shrink:0;
}
#skd-minicart-root .skd-mc-title{
  font-size:16.5px;
  font-weight:800;
  white-space:nowrap;
}
#skd-minicart-root .skd-mc-count{
  font-size:12px;
  font-weight:800;
  color:#fff;
  background:var(--mc-accent,#004F9F);
  border-radius:99px;
  padding:2px 9px;
  line-height:1.4;
}
#skd-minicart-root .skd-mc-header .skd-mc-spacer{ flex:1; }
#skd-minicart-root .skd-mc-close{
  width:32px;
  height:32px;
  border-radius:10px;
  border:none;
  background:#F4F6FA;
  color:#13233C;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

/* ── Body ───────────────────────────────────────────────────── */
#skd-minicart-root .skd-mc-body{
  padding:0 calc(22px * var(--mc-sp)) calc(18px * var(--mc-sp));
  flex:1;
  /* Without min-height:0 a flex child won't shrink below its content, so on
     short viewports (iOS Safari with toolbars) the body overflowed UNDER the
     footer instead of scrolling — clipping the add-on chips. */
  min-height:0;
  overflow-y:auto;
}

/* ── Basket line ────────────────────────────────────────────── */
#skd-minicart-root .skd-mc-line{
  display:flex;
  gap:calc(12px * var(--mc-sp));
  align-items:flex-start;
  padding:calc(13px * var(--mc-sp)) 0;
  border-bottom:1px solid #E3E9F1;
}
#skd-minicart-root .skd-mc-thumb{
  width:56px;
  height:56px;
  border-radius:max(8px, calc(var(--mc-radius) - 4px));
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.92);
  font-weight:800;
  font-size:16.8px; /* 56 * 0.3 */
  letter-spacing:.04em;
  overflow:hidden;
  position:relative;
}
#skd-minicart-root .skd-mc-thumb-img{
  position:absolute;
  inset:0;
  border-radius:inherit;
}
#skd-minicart-root .skd-mc-thumb-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  display:block;
}
#skd-minicart-root .skd-mc-line-main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:calc(7px * var(--mc-sp));
}
#skd-minicart-root .skd-mc-line-top{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
#skd-minicart-root .skd-mc-line-title{
  flex:1;
  min-width:0;
  align-self:center;
  font-size:14.5px;
  font-weight:700;
  color:#13233C;
  line-height:1.35;
}
#skd-minicart-root .skd-mc-remove{
  width:28px;
  height:28px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:#93A1B5;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:-4px;
  margin-right:-4px;
  flex-shrink:0;
}
#skd-minicart-root .skd-mc-line-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#skd-minicart-root .skd-mc-price{
  text-align:right;
}
#skd-minicart-root .skd-mc-price-amt{
  font-size:15.5px;
  font-weight:800;
  color:#13233C;
  font-variant-numeric:tabular-nums;
}
#skd-minicart-root .skd-mc-price-sub{
  font-size:11.5px;
  color:#5C6B81;
}

/* ── Quantity stepper ───────────────────────────────────────── */
#skd-minicart-root .skd-mc-stepper{
  display:flex;
  align-items:center;
  border:1.5px solid #E3E9F1;
  border-radius:10px;
  background:#fff;
}
#skd-minicart-root .skd-mc-step{
  width:30px;
  height:30px;
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:16px;
  font-weight:600;
  color:#13233C;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  padding:0;
}
#skd-minicart-root .skd-mc-step.is-disabled{
  color:#B6C1D1;
  cursor:default;
}
#skd-minicart-root .skd-mc-qty{
  min-width:22px;
  text-align:center;
  font-size:14px;
  font-weight:700;
  color:#13233C;
  font-variant-numeric:tabular-nums;
}

/* ── Pinned section (add-ons + monthly, grouped with the total) ── */
#skd-minicart-root .skd-mc-pinned{
  flex-shrink:0;
  padding:0 calc(22px * var(--mc-sp)) calc(14px * var(--mc-sp));
  border-top:1px solid #E3E9F1;
}
/* The pinned section supplies the divider above the footer pair. */
#skd-minicart-root .skd-mc-pinned + .skd-mc-footer{ border-top:none; }

/* ── Add-on chips ───────────────────────────────────────────── */
#skd-minicart-root .skd-mc-addons{
  padding-top:calc(14px * var(--mc-sp));
}
#skd-minicart-root .skd-mc-addons-label{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#5C6B81;
  margin-bottom:8px;
}
#skd-minicart-root .skd-mc-addons-row{
  display:flex;
  gap:8px;
}
#skd-minicart-root .skd-mc-addon{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:calc(9px * var(--mc-sp)) calc(11px * var(--mc-sp));
  border-radius:max(10px, calc(var(--mc-radius) - 2px));
  cursor:pointer;
  border:1.5px dashed #C4CFDD;
  background:#FBFCFE;
  font-family:inherit;
  text-align:left;
  min-height:46px;
}
#skd-minicart-root .skd-mc-addon-title{
  font-size:12.5px;
  font-weight:700;
  color:#13233C;
  line-height:1.2;
}
#skd-minicart-root .skd-mc-addon-amt{
  font-size:12px;
  font-weight:700;
  color:var(--mc-accent,#004F9F);
}

/* ── Monthly row ────────────────────────────────────────────── */
#skd-minicart-root .skd-mc-monthly{
  margin-top:calc(10px * var(--mc-sp));
  padding:calc(10px * var(--mc-sp)) 2px;
  display:flex;
  align-items:center;
  gap:12px;
}
#skd-minicart-root .skd-mc-monthly-main{ flex:1; }
#skd-minicart-root .skd-mc-monthly-title{
  font-size:13.5px;
  font-weight:700;
}
#skd-minicart-root .skd-mc-monthly-sub{
  font-size:12px;
  color:#5C6B81;
  margin-top:1px;
}

/* ── Toggle switch ──────────────────────────────────────────── */
#skd-minicart-root .skd-mc-switch{
  width:44px;
  height:26px;
  border-radius:26px;
  border:none;
  cursor:pointer;
  background:#CBD4E0;
  position:relative;
  flex-shrink:0;
  transition:background .18s ease;
  padding:0;
}
#skd-minicart-root .skd-mc-switch.on{ background:var(--mc-accent,#004F9F); }
#skd-minicart-root .skd-mc-switch-knob{
  position:absolute;
  top:3px;
  left:3px;
  width:20px;  /* h - 6 */
  height:20px;
  border-radius:50%;
  background:#fff;
  transition:left .18s ease;
  box-shadow:0 1px 3px rgba(15,30,60,.3);
}
#skd-minicart-root .skd-mc-switch.on .skd-mc-switch-knob{
  left:21px; /* w - k - 3 = 44 - 20 - 3 */
}

/* ── Footer ─────────────────────────────────────────────────── */
#skd-minicart-root .skd-mc-footer{
  padding:calc(12px * var(--mc-sp)) calc(22px * var(--mc-sp)) calc(16px * var(--mc-sp));
  border-top:1px solid #E3E9F1;
  flex-shrink:0;
}
#skd-minicart-root .skd-mc-footer.is-empty{ border-top:none; }
#skd-minicart-root .skd-mc-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding-bottom:calc(12px * var(--mc-sp));
}
#skd-minicart-root .skd-mc-total-label{
  font-size:14.5px;
  font-weight:800;
}
#skd-minicart-root .skd-mc-total-amt{
  font-size:21px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
#skd-minicart-root .skd-mc-total-mo{
  font-size:13px;
  font-weight:700;
  color:#5C6B81;
}
#skd-minicart-root .skd-mc-donate{
  width:100%;
  height:48px;
  border-radius:var(--mc-radius);
  border:none;
  background:var(--mc-accent,#004F9F);
  color:#fff;
  cursor:pointer;
  font-size:15.5px;
  font-weight:800;
  font-family:inherit;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  box-shadow:0 6px 16px color-mix(in oklch, var(--mc-accent,#004F9F) 35%, transparent);
}
#skd-minicart-root .skd-mc-donate:disabled{
  background:#C8D2DF;
  cursor:default;
  box-shadow:none;
}
#skd-minicart-root .skd-mc-addmore{
  display:block;
  text-align:center;
  margin-top:9px;
  font-size:13px;
  font-weight:700;
  color:var(--mc-accent,#004F9F);
  text-decoration:none;
}

/* ── Empty state ────────────────────────────────────────────── */
#skd-minicart-root .skd-mc-empty{
  padding:calc(24px * var(--mc-sp)) 0 calc(8px * var(--mc-sp));
  display:flex;
  flex-direction:column;
  gap:calc(18px * var(--mc-sp));
}
#skd-minicart-root .skd-mc-empty-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}
#skd-minicart-root .skd-mc-empty-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:#F4F6FA;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--mc-accent,#004F9F);
}
#skd-minicart-root .skd-mc-empty-title{
  font-size:16.5px;
  font-weight:800;
  color:#13233C;
}
#skd-minicart-root .skd-mc-empty-sub{
  font-size:13.5px;
  color:#5C6B81;
  line-height:1.5;
  max-width:260px;
}
#skd-minicart-root .skd-mc-empty-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#skd-minicart-root .skd-mc-empty-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:calc(10px * var(--mc-sp));
  border:1.5px solid #E3E9F1;
  border-radius:var(--mc-radius);
}
#skd-minicart-root .skd-mc-empty-item .skd-mc-thumb{
  width:40px;
  height:40px;
  border-radius:max(8px, calc(var(--mc-radius) - 6px));
  font-size:12px; /* 40 * 0.3 */
}
#skd-minicart-root .skd-mc-empty-item-main{
  flex:1;
  min-width:0;
}
#skd-minicart-root .skd-mc-empty-item-title{
  font-size:13.5px;
  font-weight:700;
  color:#13233C;
  line-height:1.25;
}
#skd-minicart-root .skd-mc-empty-item-sub{
  font-size:12px;
  color:#5C6B81;
  margin-top:2px;
}
#skd-minicart-root .skd-mc-empty-add{
  height:34px;
  padding:0 14px;
  border-radius:10px;
  cursor:pointer;
  border:1.5px solid var(--mc-accent,#004F9F);
  background:#fff;
  color:var(--mc-accent,#004F9F);
  font-size:13px;
  font-weight:700;
  font-family:inherit;
  flex-shrink:0;
}

/* ── Mobile bottom sheet (≤640px) ───────────────────────────── */
@media (max-width:640px){
  #skd-minicart-root .skd-mc-panel{
    top:auto;
    left:0;
    right:0;
    width:100%;
    border-radius:calc(var(--mc-radius) + 8px) calc(var(--mc-radius) + 8px) 0 0;
    box-shadow:0 -16px 50px rgba(8,16,30,.4);
    transform:translateY(100%);
    /* Taller sheet so the basket contents fit without scrolling. dvh tracks
       the iOS visual viewport (vh ignores Safari's toolbars); vh fallback
       for older browsers. */
    max-height:92vh;
    max-height:94dvh;
    padding-bottom:26px;
  }
  #skd-minicart-root .skd-mc-panel.open{ transform:none; }

  #skd-minicart-root .skd-mc-backdrop{
    background:rgba(8,16,30,.5);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  #skd-minicart-root .skd-mc-grab{
    display:flex;
    justify-content:center;
    padding:9px 0 0;
    flex-shrink:0;
  }
  #skd-minicart-root .skd-mc-grab span{
    width:40px;
    height:4.5px;
    border-radius:99px;
    background:#D5DCE6;
  }

  /* Mobile density overrides (mobile px from the mockup) */
  #skd-minicart-root .skd-mc-header{ padding:calc(14px * var(--mc-sp)) calc(18px * var(--mc-sp)); }
  #skd-minicart-root .skd-mc-title{ font-size:17px; }
  #skd-minicart-root .skd-mc-close{ width:38px; height:38px; }
  #skd-minicart-root .skd-mc-body{ padding:0 calc(18px * var(--mc-sp)) calc(20px * var(--mc-sp)); }
  #skd-minicart-root .skd-mc-pinned{ padding:0 calc(18px * var(--mc-sp)) calc(12px * var(--mc-sp)); }
  #skd-minicart-root .skd-mc-footer{ padding:calc(12px * var(--mc-sp)) calc(18px * var(--mc-sp)) calc(16px * var(--mc-sp)); }

  #skd-minicart-root .skd-mc-thumb{ width:54px; height:54px; font-size:16.2px; }
  #skd-minicart-root .skd-mc-line-title{ font-size:15px; }
  #skd-minicart-root .skd-mc-remove{ width:34px; height:34px; }
  #skd-minicart-root .skd-mc-price-amt{ font-size:16px; }

  #skd-minicart-root .skd-mc-step{ width:36px; height:36px; font-size:18px; }
  #skd-minicart-root .skd-mc-qty{ min-width:26px; font-size:15px; }

  #skd-minicart-root .skd-mc-addon{ min-height:52px; }

  /* Switch large (lg): w52 h30 k24 */
  #skd-minicart-root .skd-mc-switch{ width:52px; height:30px; border-radius:30px; }
  #skd-minicart-root .skd-mc-switch-knob{ width:24px; height:24px; }
  #skd-minicart-root .skd-mc-switch.on .skd-mc-switch-knob{ left:25px; } /* 52 - 24 - 3 */

  #skd-minicart-root .skd-mc-donate{ height:52px; }
  #skd-minicart-root .skd-mc-empty-add{ height:40px; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  #skd-minicart-root .skd-mc-panel,
  #skd-minicart-root .skd-mc-backdrop,
  #skd-minicart-root .skd-mc-switch,
  #skd-minicart-root .skd-mc-switch-knob{ transition:none; }
}

/* ── Coexistence with the theme cart ─────────────────────────
 * The SkyDonate Mini Cart no longer suppresses WoodMart's drawer — both
 * work side by side. WoodMart's cart icon opens WoodMart's drawer; the
 * SkyDonate panel opens only from the SkyDonate Mini Cart widget
 * (.skd-mc-trigger). Choose which by which widget you place in the header.
 * (To intercept the theme's own cart icon too, add its selector under
 * Mini Cart → Extra Trigger Selectors.) */

/* ── Lock background scroll while the panel is open ─────────── */
body.skd-mc-locked{ overflow:hidden; }

/* ── Screen-reader live region (visually hidden) ───────────── */
#skd-minicart-root .skd-mc-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Failure toast ─────────────────────────────────────────── */
#skd-minicart-root .skd-mc-toast{
  position:fixed; left:50%; bottom:24px;
  transform:translateX(-50%) translateY(8px);
  z-index:100000002; max-width:90vw;
  background:#13233C; color:#fff;
  font-family:'Figtree',system-ui,sans-serif; font-size:13.5px; font-weight:600;
  padding:11px 16px; border-radius:10px;
  box-shadow:0 8px 24px rgba(8,16,30,.3);
  opacity:0; transition:opacity .22s ease, transform .22s ease; pointer-events:none;
}
#skd-minicart-root .skd-mc-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (prefers-reduced-motion:reduce){ #skd-minicart-root .skd-mc-toast{ transition:none; } }

/* ── Takeover: when the SkyDonate Mini Cart is enabled it replaces the
 *    theme (WoodMart) cart — hide WoodMart's drawer/hover-dropdown so only
 *    the SkyDonate panel opens. The theme cart ICON stays visible; its click
 *    is intercepted by mini-cart.js to open the SkyDonate panel. ── */
body.skd-minicart-on .cart-widget-side,
body.skd-minicart-on .wd-dropdown-cart,
body.skd-minicart-on .wd-header-cart .wd-dropdown{ display:none !important; }

/* ── Loading skeleton (first open, before the AJAX lands) ───── */
#skd-minicart-root .skd-mc-skel{ padding-top:6px; }
#skd-minicart-root .skd-mc-skel-line{ align-items:center; }
#skd-minicart-root .skd-mc-skel-box,
#skd-minicart-root .skd-mc-skel-bar{
  background:linear-gradient(90deg, #EEF1F6 25%, #E2E7EF 37%, #EEF1F6 63%);
  background-size:400% 100%;
  animation:skd-mc-shimmer 1.2s ease-in-out infinite;
  border-radius:8px;
}
#skd-minicart-root .skd-mc-skel-bar{ height:12px; }
@keyframes skd-mc-shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
@media (prefers-reduced-motion:reduce){ #skd-minicart-root .skd-mc-skel-box,#skd-minicart-root .skd-mc-skel-bar{ animation:none; } }