/* ==========================================================
   AURA FIT - COMPONENTS
   ========================================================== */

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;height:auto;padding:10px var(--s5);
  border-radius:var(--r-full);
  font-size:var(--fs-h3);font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;
  transition:transform var(--t-fast) var(--ease-out),
             background-color var(--t-fast), border-color var(--t-fast),
             opacity var(--t-fast), box-shadow var(--t-fast);
  user-select:none;white-space:normal;text-align:center;overflow-wrap:anywhere;
}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}

.btn--primary{background:var(--primary);color:var(--on-primary)}
.btn--primary:hover{filter:brightness(1.08)}

.btn--accent{background:var(--accent);color:var(--on-accent)}
.btn--accent:hover{filter:brightness(1.06)}

.btn--soft{background:var(--surface-tint);color:var(--text)}
.btn--soft:hover{background:var(--surface-3)}

.btn--ghost{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn--ghost:hover{border-color:var(--border-2);background:var(--surface-2)}

.btn--quiet{background:transparent;color:var(--text-2)}
.btn--quiet:hover{background:var(--surface-2);color:var(--text)}

.btn--danger{background:var(--danger-soft);color:var(--danger)}
.btn--danger:hover{filter:brightness(.97)}

.btn--block{width:100%}
.btn--sm{min-height:44px;padding:8px var(--s4);font-size:var(--fs-sm)}
.btn--lg{min-height:54px;font-size:var(--fs-h2)}

/* icon button */
.iconbtn{
  width:44px;height:44px;flex:none;border-radius:var(--r-full);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text);
  transition:background-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.iconbtn:hover{background:var(--surface-2)}
.iconbtn:active{transform:scale(.92)}
.iconbtn--bordered{background:var(--surface);border:1px solid var(--border)}
.iconbtn--bordered:hover{border-color:var(--border-2)}
.iconbtn--badge{position:relative}
.iconbtn--badge::after{
  content:"";position:absolute;top:8px;right:9px;
  width:7px;height:7px;border-radius:99px;background:var(--danger);
  box-shadow:0 0 0 2px var(--bg);
}

/* ---------------- CHIPS / TABS ---------------- */
.chips{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none;padding:2px 0}
.chips::-webkit-scrollbar{display:none}
.chip{
  min-height:44px;padding:8px var(--s4);border-radius:var(--r-full);
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:var(--fs-sm);font-weight:600;
  background:var(--surface);color:var(--text-2);
  border:1px solid var(--border);
  transition:all var(--t-fast) var(--ease-out);
}
.chip:hover{border-color:var(--border-2);color:var(--text)}
.chip.is-active{
  background:var(--primary);color:var(--on-primary);border-color:transparent;
}
.chip .ico{width:15px;height:15px}

/* underline tabs */
.tabs{
  display:flex;gap:var(--s3);border-bottom:1px solid var(--divider);
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;flex:none;padding:var(--s3) 10px;min-width:44px;
  font-size:var(--fs-h3);font-weight:600;color:var(--text-2);
  transition:color var(--t-fast);
}
.tab:hover{color:var(--text-2)}
.tab.is-active{color:var(--text)}
.tab.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  border-radius:2px;background:var(--accent);
  animation:fadeIn var(--t-fast) var(--ease-out);
}

/* ---------------- CARD ---------------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-card);
  transition:border-color var(--t-fast), box-shadow var(--t-base), transform var(--t-base);
}
.card--pad{padding:var(--s4)}
.card--tint{background:var(--surface-tint);border-color:transparent}
.card--hover:hover{border-color:var(--border-2);box-shadow:var(--sh-raised);transform:translateY(-2px)}
.card--flat{box-shadow:none}

/* list row inside cards */
.listrow{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4);width:100%;text-align:left;
  transition:background-color var(--t-fast);
}
.listrow+.listrow{border-top:1px solid var(--divider)}
.listrow:first-child{border-radius:var(--r-md) var(--r-md) 0 0}
.listrow:last-child{border-radius:0 0 var(--r-md) var(--r-md)}
.listrow:hover{background:var(--surface-2)}
.listrow__ico{
  width:38px;height:38px;border-radius:var(--r-sm);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-tint);color:var(--accent-2);
}
.listrow__t{font-size:var(--fs-h3);font-weight:600}
.listrow__s{font-size:var(--fs-xs);color:var(--text-2);margin-top:1px}
.listrow__chev{color:var(--text-3)}

/* ---------------- FORM ---------------- */
.field{margin-bottom:var(--s4)}
.field__label{
  display:block;font-size:var(--fs-sm);font-weight:600;
  color:var(--text-2);margin-bottom:var(--s2);
}
.input,.select,.textarea{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:0 var(--s4);height:50px;
  font-size:16px;color:var(--text);
  transition:border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
  appearance:none;
}
.textarea{height:auto;min-height:96px;padding:var(--s3) var(--s4);resize:vertical;line-height:1.5}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--accent-ring);
}
.select{
  padding-right:var(--s8);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  color:var(--text);
}
.select option{background:var(--surface);color:var(--text)}

.input-wrap{position:relative}
.input-wrap .input{padding-left:46px}
.input-wrap:has(.input-wrap__act) .input{padding-right:54px}
.input-wrap__ico{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--text-3);pointer-events:none;
}
.input-wrap__act{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:99px;color:var(--text-3);
  display:flex;align-items:center;justify-content:center;
}
.input-wrap__act:hover{color:var(--text);background:var(--surface-2)}

.field__err{
  display:none;font-size:var(--fs-xs);color:var(--danger);margin-top:6px;font-weight:500;
}
.field.has-err .input,.field.has-err .select{border-color:var(--danger)}
.field.has-err .field__err{display:block;animation:fadeIn var(--t-fast)}

/* search bar */
.searchbar{
  display:flex;align-items:center;gap:var(--s3);
  height:48px;padding:0 var(--s4);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.searchbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.searchbar__ico{color:var(--text-3)}
.searchbar input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:16px}
.searchbar input::placeholder{color:var(--text-3)}

/* colour swatches */
.swatches{display:flex;gap:var(--s3);flex-wrap:wrap}
.swatch{
  width:44px;height:44px;border-radius:var(--r-full);
  border:2px solid var(--border);position:relative;
  transition:transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast);
}
.swatch:hover{transform:scale(1.08)}
.swatch.is-active{
  transform:scale(1.06);
  box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
.swatch.is-active::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:12px;height:7px;border-left:2px solid;border-bottom:2px solid;
  transform:rotate(-45deg) translate(1px,-2px);
  color:var(--swatch-check, var(--on-solid));
}

/* toggle switch */
.switch{
  width:48px;height:28px;border-radius:99px;flex:none;
  background:var(--border-2);position:relative;
  transition:background-color var(--t-base) var(--ease-out);
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;
  width:22px;height:22px;border-radius:99px;background:var(--knob);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform var(--t-base) var(--ease-spring);
}
.switch.is-on{background:var(--accent)}
.switch.is-on::after{transform:translateX(20px)}

/* segmented control */
.segment{
  display:flex;padding:4px;gap:4px;
  background:var(--surface-2);border-radius:var(--r-full);
  border:1px solid var(--border);
}
.segment__btn{
  flex:1;min-width:0;min-height:44px;padding:8px;border-radius:var(--r-full);
  font-size:var(--fs-sm);font-weight:600;color:var(--text-2);
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all var(--t-base) var(--ease-out);
}
.segment__btn:hover{color:var(--text)}
.segment__btn.is-active{background:var(--surface);color:var(--text);box-shadow:var(--sh-card)}

/* ---------------- BADGE / PILL ---------------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  height:24px;padding:0 10px;border-radius:var(--r-full);
  font-size:var(--fs-xxs);font-weight:700;letter-spacing:.01em;
  background:var(--surface-tint);color:var(--accent-text);
}
.badge--muted{background:var(--surface-2);color:var(--text-2)}
.badge--success{background:var(--success-soft);color:var(--success)}
.badge .ico{width:12px;height:12px}
.badge .itemcard__dot{margin-right:0}

/* score pill */
.score{
  display:inline-flex;align-items:center;gap:4px;
  height:26px;padding:0 10px;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:700;
  background:var(--success-soft);color:var(--success);
}

/* ---------------- PRODUCT / GARMENT ---------------- */
.thumb{
  display:block;
  position:relative;width:100%;aspect-ratio:1/1;
  background:var(--plate);
  border-radius:var(--r-sm);overflow:hidden;
}
.thumb svg{width:100%;height:100%}
.thumb--tall{aspect-ratio:3/4}
.thumb--wide{aspect-ratio:4/3}

.prodcard{
  position:relative;display:flex;flex-direction:column;gap:var(--s2);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:var(--s2);
  text-align:left;width:100%;
  transition:border-color var(--t-fast),box-shadow var(--t-base),transform var(--t-base);
}
.prodcard:hover{border-color:var(--border-2);box-shadow:var(--sh-raised);transform:translateY(-2px)}
.prodcard__body{display:block;padding:0 var(--s2) var(--s2)}
.prodcard__name{display:block;font-size:var(--fs-sm);font-weight:600;line-height:1.3}
.prodcard__brand{display:block;font-size:var(--fs-xxs);color:var(--text-2);margin-top:2px}
.prodcard__old{font-size:var(--fs-xxs);color:var(--text-3);text-decoration:line-through;margin-left:5px;font-weight:500}

/* selected state for the bottom-sheet single-select rule */
.prodcard.is-selected{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-ring);
}
.prodcard__tick{
  position:absolute;top:14px;right:14px;
  width:26px;height:26px;border-radius:99px;
  background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.5);
  transition:opacity var(--t-fast),transform var(--t-fast) var(--ease-spring);
  z-index:2;
}
.prodcard.is-selected .prodcard__tick{opacity:1;transform:scale(1)}
.prodcard__tick .ico{width:14px;height:14px;stroke-width:2.6;flex:none}

/* heart on card */
.fav{
  position:absolute;top:12px;right:12px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:var(--plate-chip);color:var(--plate-chip-fg);
  border:1px solid var(--plate-chip-bd);
  /* the glyph is centred by absolute positioning rather than flex:
     a round chip must never let its icon drift off the centre point */
  display:block;padding:0;line-height:0;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(20,14,10,.14);
  transition:transform var(--t-fast) var(--ease-spring),color var(--t-fast),background-color var(--t-fast);
}
.fav:hover{transform:scale(1.06)}
.fav.is-on{color:var(--danger)}
.fav.is-on .ico{fill:currentColor}
/* Dead-centre regardless of flex quirks: the chip is the positioning
   context and the glyph is pinned to its exact middle. */
.fav .ico{
  position:absolute;top:50%;left:50%;
  width:17px;height:17px;
  transform:translate(-50%,-50%);
}


/* ---------------- BOTTOM SHEET ---------------- */
.sheet-scrim{
  position:fixed;inset:0;background:var(--scrim);
  z-index:var(--z-sheet);
  opacity:0;transition:opacity var(--t-base) var(--ease-out);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.sheet-scrim.is-open{opacity:1}

.sheet{
  position:fixed;left:0;right:0;bottom:0;
  z-index:calc(var(--z-sheet) + 1);
  height:66vh;                     /* ~2/3 of the screen, per spec */
  height:66dvh;
  max-height:none;
  background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  box-shadow:var(--sh-sheet);
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform var(--t-slow) var(--ease-spring);
  will-change:transform;
  border:1px solid var(--border);border-bottom:0;
}
.sheet.is-open{transform:translateY(0)}
.sheet.is-dragging{transition:none}

.sheet__grip{
  padding:10px 0 4px;display:flex;justify-content:center;
  cursor:grab;touch-action:none;flex:none;
}
.sheet__grip span{width:42px;height:4px;border-radius:99px;background:var(--border-2)}
.sheet__grip:active{cursor:grabbing}

.sheet__head{
  padding:var(--s2) var(--s5) var(--s3);flex:none;
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);
}
.sheet__title{font-size:var(--fs-h2);font-weight:700}
.sheet__head > div{min-width:0}
.sheet__title{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sheet__sub{font-size:var(--fs-xs);color:var(--text-2);margin-top:2px}

.sheet__tabs{padding:0 var(--s5);flex:none}
.sheet__body{
  flex:1;min-height:0;overflow-y:auto;padding:var(--s4) var(--s5) var(--s6);
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}

/* sticky action bar revealed on selection */
.sheet__bar{
  flex:none;padding:var(--s3) var(--s5) calc(var(--s3) + var(--safe-b));
  border-top:1px solid var(--divider);
  background:var(--surface);
  display:flex;align-items:center;gap:var(--s3);
  display:none;
  position:relative;
}
.sheet__bar.is-visible{
  display:flex;
  animation:fadeUp var(--t-base) var(--ease-spring) both;
}
.sheet__bar-info{flex:1;min-width:0}
.sheet__bar-name{font-size:var(--fs-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet__bar-meta{font-size:var(--fs-xs);color:var(--text-2)}

/* --- AI Stylist Loading State & Shimmer Skeletons in Sheet --- */
@keyframes af-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes af-pulse-glow {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.015); }
}

@keyframes af-dot-bounce {
  0%, 80%, 100% { transform: scale(0.4); opacity: 0.3; }
  40% { transform: scale(1.1); opacity: 1; }
}

.sheet-loading-banner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 12px 16px;
  margin-bottom: var(--s4);
  background: linear-gradient(135deg, rgba(179, 89, 57, 0.08) 0%, rgba(212, 138, 92, 0.12) 100%);
  border: 1px solid rgba(179, 89, 57, 0.25);
  border-radius: var(--r-md);
  animation: af-pulse-glow 2.5s infinite ease-in-out;
}

.sheet-loading-sparkle {
  font-size: 20px;
  line-height: 1;
  flex: none;
  filter: drop-shadow(0 2px 4px rgba(179, 89, 57, 0.3));
}

.sheet-loading-info {
  flex: 1;
  min-width: 0;
}

.sheet-loading-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-primary, #b35939);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sheet-loading-desc {
  font-size: var(--fs-xs);
  color: var(--text-2);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sheet-loading-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.sheet-loading-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-primary, #b35939);
  animation: af-dot-bounce 1.4s infinite ease-in-out both;
}

.sheet-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.sheet-loading-dots span:nth-child(2) { animation-delay: -0.16s; }

.sheet-skeleton-card {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.sheet-skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  animation: af-shimmer 1.5s infinite ease-in-out;
  pointer-events: none;
}

[data-theme="dark"] .sheet-skeleton-card::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.09) 50%, transparent 100%);
}

.sheet-skeleton-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: var(--plate, rgba(0, 0, 0, 0.05));
}

.sheet-skeleton-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: var(--s2) 0 4px;
}

.sheet-skeleton-line {
  height: 12px;
  border-radius: 4px;
  background: var(--plate, rgba(0, 0, 0, 0.06));
}

.sheet-skeleton-line--title {
  width: 82%;
  height: 13px;
}

.sheet-skeleton-line--price {
  width: 44%;
  height: 12px;
  background: rgba(179, 89, 57, 0.16);
}

.sheet-skeleton-line--brand {
  width: 58%;
  height: 10px;
}


/* ---------------- MODAL ---------------- */
.modal-scrim{
  position:fixed;inset:0;z-index:var(--z-modal);
  background:var(--scrim);display:flex;align-items:center;justify-content:center;
  padding:var(--s5);opacity:0;transition:opacity var(--t-base);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.modal-scrim.is-open{opacity:1}
.modal{
  width:100%;max-width:380px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s6);box-shadow:var(--sh-pop);
  transform:scale(.94);opacity:0;
  transition:transform var(--t-base) var(--ease-spring),opacity var(--t-base);
}
.modal-scrim.is-open .modal{transform:scale(1);opacity:1}
.modal__title{font-size:var(--fs-h2);font-weight:700;margin-bottom:var(--s2)}
.modal__text{font-size:var(--fs-sm);color:var(--text-2);margin-bottom:var(--s5)}
.modal__acts{display:flex;gap:var(--s3)}
.modal__acts .btn{flex:1}

/* ---------------- TOAST ---------------- */
.toast-layer{
  position:fixed;left:0;right:0;z-index:var(--z-toast);
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 84px);
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  pointer-events:none;padding:0 var(--s4);
}
.toast{
  display:flex;align-items:center;gap:var(--s2);
  max-width:420px;
  padding:11px var(--s4);border-radius:var(--r-full);
  background:var(--text);color:var(--bg);
  font-size:var(--fs-sm);font-weight:600;
  box-shadow:var(--sh-pop);
  animation:fadeUp var(--t-base) var(--ease-spring) both;
}
.toast.is-out{animation:fadeIn var(--t-fast) reverse both}
.toast .ico{width:16px;height:16px;display:block}
.toast [data-t-ico]{display:flex;align-items:center;flex:none}
.toast [data-t-msg]{min-width:0}
.toast--success .ico{color:var(--success)}
.toast--error .ico{color:var(--danger)}

/* ---------------- PROGRESS / DONUT ---------------- */
.donut{position:relative;flex:none}
.donut svg{transform:rotate(-90deg)}
.donut__track{stroke:var(--surface-3);fill:none}
.donut__arc{
  stroke:var(--accent);fill:none;stroke-linecap:round;
  transition:stroke-dashoffset 900ms var(--ease-out);
}
.donut__val{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-h3);font-weight:700;
}

.bar{height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.bar__fill{
  height:100%;border-radius:99px;background:var(--accent);
  box-shadow:inset 0 0 0 1px var(--border-2);
  transition:width 800ms var(--ease-out);
}

.dots{display:flex;gap:5px}
.dots i{width:8px;height:8px;border-radius:99px;background:var(--surface-3);display:block}
.dots i.is-on{background:var(--accent)}

/* stepper (onboarding) */
.stepper{display:flex;gap:6px;align-items:center}
.stepper i{
  height:4px;border-radius:99px;background:var(--surface-3);
  flex:1;transition:background-color var(--t-base);
}
.stepper i.is-on{background:var(--accent)}

/* ---------------- EMPTY / LOADER ---------------- */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--s8) var(--s5);gap:var(--s3);
}
.empty__ico{
  width:68px;height:68px;border-radius:50%;
  background:var(--surface-tint);color:var(--accent-2);
  display:flex;align-items:center;justify-content:center;
}
.empty__t{font-size:var(--fs-h2);font-weight:700}
.empty__s{font-size:var(--fs-sm);color:var(--text-2);max-width:280px}

.spinner{
  width:18px;height:18px;border-radius:50%;flex:none;
  border:2px solid currentColor;border-top-color:transparent;
  animation:spin .7s linear infinite;opacity:.9;
}

/* AI thinking dots */
.thinking{display:inline-flex;gap:4px;align-items:center}
.thinking i{
  width:6px;height:6px;border-radius:99px;background:currentColor;
  animation:blink 1.2s infinite both;
}
.thinking i:nth-child(2){animation-delay:.18s}
.thinking i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ---------------- INSTALL (PWA) BANNER ---------------- */
.pwa-banner{
  position:fixed;left:var(--s4);right:var(--s4);
  bottom:calc(var(--tabbar-h) + var(--safe-b) + var(--s4));
  z-index:var(--z-toast);
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s3) var(--s3) var(--s4);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-pop);
  transform:translateY(16px);opacity:0;
  transition:transform var(--t-base) var(--ease-spring),opacity var(--t-base);
}
.pwa-banner.is-in{transform:translateY(0);opacity:1}
.pwa-banner__ico{
  width:38px;height:38px;flex:none;border-radius:11px;
  background:var(--accent);color:var(--on-accent);
  display:flex;align-items:center;justify-content:center;
}
.pwa-banner__txt{display:flex;flex-direction:column;min-width:0;flex:1}
.pwa-banner__txt strong{font-size:var(--fs-h3);font-weight:700;line-height:1.2}
.pwa-banner__txt small{font-size:var(--fs-xs);color:var(--text-2);line-height:1.35}
.pwa-banner .btn--sm{flex:none}

@media (min-width:1024px){
  .pwa-banner{
    left:auto;right:var(--s7);
    bottom:calc(var(--s7) + 72px);
    max-width:400px;
  }
}

/* ---------------- SAVE CONTROL (bottom sheet) ----------------
   The label lives in its own element so the icon and text align
   on one flex baseline, and the button reserves a fixed width so
   it does not jump when it flips between Save and Saved.        */
.sheet__save{
  min-width:104px;
  justify-content:center;
  gap:7px;
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}
.sheet__save .ico{flex:none}
.sheet__save [data-save-label]{line-height:1;white-space:nowrap}
.sheet__save:hover{border-color:var(--border-2);background:var(--surface-2)}
.sheet__save.is-saved{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-text);
}
.sheet__save.is-saved .ico{color:var(--accent-2)}

/* saved marker on a product card */
.prodcard__saved{
  position:absolute;top:12px;right:12px;z-index:2;
  width:30px;height:30px;border-radius:99px;
  display:block;line-height:0;
  background:var(--plate-chip);
  border:1px solid var(--plate-chip-bd);
  color:var(--accent-2);
  box-shadow:0 2px 8px rgba(20,14,10,.14);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.prodcard__saved .ico{
  position:absolute;top:50%;left:50%;
  width:16px;height:16px;
  transform:translate(-50%,-50%);
  fill:currentColor;stroke:none;
}

/* the wishlist remove control reuses .fav but carries a bookmark */
.fav.is-on .ico{fill:currentColor}
.fav:hover .ico{transform:translate(-50%,-50%) scale(1.06)}