/* Fresh Market — reusable components */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-weight: 700; font-size: var(--fs-sm); border-radius: var(--r-md);
  padding: 10px 18px; border: none; min-height: 42px;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:active { transform: scale(.96); }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--color-primary-dark); box-shadow: var(--sh-md); }
.btn--accent { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--sh-sm); }
.btn--accent:hover { background: var(--color-accent-dark); box-shadow: var(--sh-md); }
.btn--outline { background: var(--color-surface); color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.btn--ghost { background: var(--color-surface-alt); color: var(--color-text); }
.btn--danger { background: var(--color-surface-alt); color: var(--color-emphasis); }
.btn--block { width: 100%; }
.btn--sm { min-height: 34px; padding: 6px 12px; }
.btn--icon { min-width: 42px; padding: 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

@keyframes pop { 50% { transform: scale(1.06); } }
.pop { animation: pop var(--dur-base) var(--ease-out); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--fs-xs); font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-full);
  background: var(--color-surface-alt); color: var(--color-text-muted);
}
.badge--discount { background: var(--color-emphasis); color: #fff; }
.badge--fresh { background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface)); color: var(--color-success); }
.badge--free { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); color: var(--color-primary); }
.badge--low { background: color-mix(in srgb, var(--color-emphasis) 12%, var(--color-surface)); color: var(--color-emphasis); }
.badge--oos { background: color-mix(in srgb, var(--color-text-muted) 14%, var(--color-surface)); color: var(--color-text-muted); }
.badge--status { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); color: var(--color-primary); }

/* ---------- Product card ---------- */
.pcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm), inset 0 0 0 1px var(--color-border-soft); overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.pcard:hover { box-shadow: var(--sh-md), inset 0 0 0 1px var(--color-border-soft); transform: translateY(-3px); }
.pcard:hover .pcard__img, .pcard:hover .pcard__img--svg { transform: scale(1.06); }
.pcard__img, .pcard__img--svg { transition: transform 450ms var(--ease-out); }
.pcard:hover .pcard__imgbox::after { opacity: 1; }
.pcard__imgbox::after { /* sheen sweep — renders only on hover */
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .25) 45%, transparent 60%);
}
.pcard__link { display: flex; flex-direction: column; flex: 1; }
.pcard__imgbox { position: relative; background: var(--color-surface-alt); }
.pcard__img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pcard__img--svg { width: 100%; aspect-ratio: 1; height: auto; padding: 18%; }
.pcard__img--fallback { opacity: .25; position: absolute; inset: 18%; }
.pcard__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); flex: 1; }
.pcard__name { font-size: var(--fs-sm); font-weight: 600; min-height: 2.9em; }
.pcard__name a::after { content: ""; position: absolute; inset: 0; }
.pcard__meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--color-text-muted); }
.pcard__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-top: auto; }
.pcard__price { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pcard__old { font-size: var(--fs-xs); color: var(--color-text-muted); text-decoration: line-through; }
.pcard__now { font-size: var(--fs-md); font-weight: 700; white-space: nowrap; }
.pcard__badges { position: absolute; top: var(--s2); inset-inline-start: var(--s2); display: flex; flex-direction: column; gap: 3px; align-items: flex-start; z-index: 1; }
.pcard__fav { position: absolute; top: var(--s2); inset-inline-end: var(--s2); z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-full); background: color-mix(in srgb, var(--color-surface) 85%, transparent); color: var(--color-text-muted); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast); }
.pcard__fav:active { transform: scale(.85); }
.pcard__fav[aria-pressed="true"] { color: var(--color-emphasis); }
.pcard__fav .icon { width: 20px; height: 20px; }
.pcard__imgbox .icon--cart { width: 20px; height: 20px; }
.pcard--oos .pcard__img { opacity: .45; }
.pcard__oos-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; color: var(--color-text-muted); background: color-mix(in srgb, var(--color-surface) 55%, transparent); }

/* Add button on card */
.addbtn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--color-primary); color: var(--color-on-primary); flex-shrink: 0; box-shadow: var(--sh-sm); transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast), box-shadow var(--dur-fast); }
.addbtn:hover { box-shadow: var(--sh-md); }
.addbtn:hover { background: var(--color-primary-dark); }
.addbtn:active { transform: scale(.9); }
.addbtn--in { background: var(--color-surface-alt); color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.pcard__qty { display: flex; align-items: center; gap: var(--s2); }
.pcard__qty button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; box-shadow: var(--sh-sm); }
.pcard__qty button[data-act="minus"] { background: var(--color-surface-alt); color: var(--color-emphasis); }
.pcard__qty span { min-width: 18px; text-align: center; font-size: var(--fs-sm); font-weight: 700; }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-full);
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border);
  font-size: var(--fs-xs); font-weight: 600; color: var(--color-text);
}
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--color-primary); color: var(--color-primary); }
.chip--active { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.chip__x { color: currentColor; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Category rail items */
.cat-card { display: flex; flex-direction: column; align-items: center; gap: var(--s2); width: 88px; text-align: center; }
.cat-card__img {
  width: 72px; height: 72px; border-radius: var(--r-full);
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)), var(--color-surface) 70%);
  box-shadow: var(--sh-sm); padding: 14px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cat-card:hover .cat-card__img { transform: scale(1.07) translateY(-2px); box-shadow: var(--sh-md); }
.cat-card span { font-size: var(--fs-xs); font-weight: 600; }

/* ---------- Toasts ---------- */
#toasts { position: fixed; bottom: 84px; inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s2); z-index: 1200; pointer-events: none; }
@media (min-width: 768px) { #toasts { bottom: var(--s5); } }
.toast {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--color-text); color: var(--color-bg);
  padding: 10px 18px; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600;
  box-shadow: var(--sh-xl);
  animation: toast-in var(--dur-base) var(--ease-out);
}
.toast--success { background: var(--color-success); color: #fff; }
.toast--error { background: var(--color-error); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } }
.toast.out { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-fast), transform var(--dur-fast); }

/* ---------- Dialog / sheet ---------- */
dialog.fm-dialog { border: none; padding: 0; background: var(--color-surface); color: var(--color-text); border-radius: var(--r-lg); box-shadow: var(--sh-xl); width: min(92vw, 480px); }
dialog.fm-dialog::backdrop { background: rgb(0 0 0 / .45); }
.fm-dialog__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4); border-bottom: 1px solid var(--color-border); }
.fm-dialog__head h2 { font-size: var(--fs-md); }
.fm-dialog__body { padding: var(--s4); max-height: 65vh; overflow: auto; }
.fm-dialog__close { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-full); background: var(--color-surface-alt); color: var(--color-text-muted); }

dialog.fm-sheet { border: none; padding: 0; background: var(--color-surface); color: var(--color-text); border-radius: var(--r-xl) var(--r-xl) 0 0; margin: auto auto 0; width: 100%; max-width: 640px; }
dialog.fm-sheet::backdrop { background: rgb(0 0 0 / .45); }
dialog.fm-sheet[open] { animation: sheet-up var(--dur-base) var(--ease-out); }
@keyframes sheet-up { from { transform: translateY(40%); opacity: .4; } }

/* ---------- Quantity stepper (cart line) ---------- */
.stepper { display: inline-flex; align-items: center; border-radius: var(--r-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--color-border); background: var(--color-surface); }
.stepper button { width: 36px; height: 36px; display: grid; place-items: center; color: var(--color-primary); font-size: 18px; font-weight: 700; transition: background-color var(--dur-fast); }
.stepper button:hover { background: var(--color-surface-alt); }
.stepper button:disabled { color: var(--color-text-muted); cursor: not-allowed; }
.stepper output { min-width: 34px; text-align: center; font-size: var(--fs-sm); font-weight: 700; }

/* ---------- Skeletons ---------- */
.skel { position: relative; overflow: hidden; background: var(--color-surface-alt); border-radius: var(--r-md); }
.skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--color-surface) 65%, transparent) 50%, transparent 70%); transform: translateX(-100%); animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skel-card { display: flex; flex-direction: column; gap: var(--s2); background: var(--color-surface); border-radius: var(--r-lg); padding-bottom: var(--s3); box-shadow: var(--sh-sm); overflow: hidden; }
.skel-card .skel { border-radius: 0; }
.skel-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); background: var(--color-surface); border-radius: var(--r-md); box-shadow: var(--sh-sm); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s3); }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field input, .field textarea, .field select {
  padding: 10px 12px; border-radius: var(--r-md); border: 1.5px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text); width: 100%;
  transition: border-color var(--dur-fast);
}
.field input:focus { border-color: var(--color-primary); outline: none; }
.field.invalid input { border-color: var(--color-error); }
.field .err { font-size: var(--fs-xs); color: var(--color-error); display: none; }
.field.invalid .err { display: block; }

/* Search field */
.searchbar { display: flex; align-items: center; gap: var(--s2); background: var(--color-surface); border-radius: var(--r-full); padding: 8px 16px; box-shadow: var(--sh-sm); }
.searchbar input { border: none; outline: none; background: none; flex: 1; min-width: 0; }
.searchbar .icon { color: var(--color-text-muted); }

/* Switch */
.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; font-size: var(--fs-sm); }
.switch input { position: absolute; opacity: 0; }
.switch i { width: 42px; height: 24px; border-radius: var(--r-full); background: var(--color-border); position: relative; flex-shrink: 0; transition: background-color var(--dur-fast); }
.switch i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-surface); box-shadow: var(--sh-sm); transition: transform var(--dur-fast) var(--ease-out); }
.switch input:checked + i { background: var(--color-primary); }
.switch input:checked + i::after { transform: translateX(-18px); }
.switch input:focus-visible + i { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Checkbox row */
.check { display: flex; align-items: center; gap: var(--s2); padding: 4px 0; font-size: var(--fs-sm); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--color-primary); }

/* Empty state */
.empty { text-align: center; padding: var(--s8) var(--s4); display: flex; flex-direction: column; align-items: center; gap: var(--s3); color: var(--color-text-muted); }
.empty .icon--lg { color: var(--color-border); }

/* ---------- Section head ---------- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.section-head h2 { font-size: var(--fs-lg); display: flex; align-items: center; gap: 8px; }
.section-head h2::before { content: ""; width: 4px; height: 18px; border-radius: var(--r-full); background: linear-gradient(180deg, var(--color-primary), var(--color-accent)); flex-shrink: 0; }
.section-head .link { color: var(--color-primary); font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Star rating ---------- */
.stars { display: inline-flex; align-items: center; gap: 2px; color: #E65100; }
.stars .icon { width: 14px; height: 14px; }
.stars .icon--off { color: var(--color-border); }

/* ---------- Accordion ---------- */
.acc { border-bottom: 1px solid var(--color-border-soft); }
.acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--s3) 0; font-weight: 700; font-size: var(--fs-sm); }
.acc__btn .icon { transition: transform var(--dur-fast) var(--ease-out); }
.acc__btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.acc__panel > div { overflow: hidden; }
.acc__btn[aria-expanded="true"] + .acc__panel { grid-template-rows: 1fr; }

/* ---------- Address cards ---------- */
.addr { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3); border-radius: var(--r-md); box-shadow: inset 0 0 0 1.5px var(--color-border), var(--sh-sm); cursor: pointer; }
.addr input { accent-color: var(--color-primary); margin-top: 4px; }
.addr.is-selected { box-shadow: inset 0 0 0 2px var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); }

/* ---------- Quantity line (product page) ---------- */
.price-lg { font-size: var(--fs-xl); font-weight: 800; }
.price-old { color: var(--color-text-muted); text-decoration: line-through; font-size: var(--fs-sm); }