/* ============================================================
   Layout — announcement bar, header, nav, mega, search,
   cart drawer internals, footer
   ============================================================ */

/* ============================================================
   Announcement bar
   ============================================================ */

.announce {
  background: var(--iron-900);
  color: var(--text-on-dark);
  font-size: var(--fs-2xs);
  position: relative;
  z-index: calc(var(--z-header) + 1);
}

.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  min-block-size: var(--announce-h);
}

.announce__list {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-block-size: var(--announce-h);
}

.announce__item {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  pointer-events: none;
  text-align: center;
  line-height: 1.35;
}

.announce__item.is-on { opacity: 1; transform: none; pointer-events: auto; }
.announce__item svg { color: var(--brass-300); flex: none; }
.announce__item strong { color: var(--brass-300); font-weight: var(--fw-bold); }

.announce__phone {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semi);
  color: var(--text-on-dark-soft);
  flex: none;
}
.announce__phone:hover { color: var(--brass-300); }

/* WCAG 2.2.2 (Pause, Stop, Hide): the announcement strip auto-advances
   every 4.2s and never stops, so it needs a user-operable control.
   prefers-reduced-motion already suppresses the rotation entirely; this
   button is the explicit mechanism for everyone else. */
.announce__pause {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: var(--r-full);
  color: var(--text-on-dark-soft);
  cursor: pointer;
}
.announce__pause:hover { color: var(--brass-300); background: rgba(246, 241, 232, .08); }
.announce__pause svg { display: block; }

@media (min-width: 900px) {
  .announce__phone { display: inline-flex; }
  .announce__list { flex: 0 1 auto; }
  .announce__inner { justify-content: space-between; }
}

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: rgba(251, 248, 243, .88);
  backdrop-filter: blur(14px) saturate(1.4);
  border-block-end: 1px solid transparent;
  transition: box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease-out),
              background var(--t) var(--ease-out);
}

.site-header.is-stuck {
  background: rgba(251, 248, 243, .96);
  border-block-end-color: var(--line);
  box-shadow: 0 4px 20px rgba(16, 14, 12, .06);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--header-h);
}

.header__burger {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--iron-800);
  margin-inline-start: calc(var(--sp-3) * -1);
  transition: background var(--t-fast) var(--ease-out);
}
.header__burger:hover { background: var(--paper-2); }

@media (min-width: 1080px) { .header__burger { display: none; } }

/* --- logo --- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  color: var(--iron-900);
}

.logo__mark { color: var(--ember-500); flex: none; transition: transform var(--t) var(--ease-spring); }
.logo:hover .logo__mark { transform: rotate(-6deg) scale(1.05); }

.logo__text { display: flex; flex-direction: column; line-height: 1.1; }

.logo__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--iron-900);
}

.logo__sub {
  font-size: 10.5px;
  font-weight: var(--fw-semi);
  letter-spacing: .02em;
  color: var(--text-muted);
  white-space: nowrap;
}

.header__logo { margin-inline-end: auto; }

@media (max-width: 460px) {
  .logo__sub { display: none; }
  .logo__name { font-size: 1.2rem; }
}

.logo--footer .logo__name { color: var(--text-on-dark); font-size: 1.6rem; }
.logo--footer .logo__sub { color: var(--text-on-dark-faint); }
.logo--footer .logo__mark { color: var(--brass-400); }

/* --- desktop nav --- */

.nav { display: none; }

@media (min-width: 1080px) {
  .nav { display: block; margin-inline: auto; }
  .header__logo { margin-inline-end: 0; }
}

.nav__list { display: flex; align-items: center; gap: var(--sp-1); }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--iron-700);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 4px;
  inset-inline: var(--sp-4);
  block-size: 2px;
  border-radius: 2px;
  background: var(--ember-500);
  transform: scaleX(0);
  transition: transform var(--t) var(--ease-out);
}

.nav__link:hover { color: var(--iron-900); background: var(--paper-2); }
.nav__link.is-active { color: var(--ember-700); }
.nav__link.is-active::after { transform: scaleX(1); }

.nav__caret { transition: transform var(--t) var(--ease-out); opacity: .6; }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* --- header actions --- */

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-inline-start: auto;
  flex: none;
}

.hbtn {
  position: relative;
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--iron-700);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.hbtn:hover { background: var(--paper-2); color: var(--iron-900); }
.hbtn--wa:hover { color: #1FA855; }
.hbtn--cart:hover { color: var(--ember-600); }

@media (max-width: 700px) {
  .hbtn--wa { display: none; }
}

.hbtn__badge {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 3px;
  min-inline-size: 19px;
  block-size: 19px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--ember-500);
  color: #FFF;
  font-size: 11px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--paper);
  animation: badge-pop var(--t) var(--ease-spring);
}

@keyframes badge-pop {
  from { transform: scale(.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ============================================================
   Mega menu
   ============================================================ */

.mega {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  background: var(--white);
  border-block: 1px solid var(--line);
  box-shadow: var(--sh-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out), visibility var(--t);
  display: none;
}

@media (min-width: 1080px) { .mega { display: block; } }

.mega.is-open { opacity: 1; visibility: visible; transform: none; }

.mega__inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-10);
  padding-block: var(--sp-8);
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}

.mega__tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.mega__tile:hover { background: var(--paper); border-color: var(--line-soft); }

.mega__thumb { border-radius: var(--r-sm); }
.mega__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: var(--img-filter); }

.mega__tileBody { display: flex; flex-direction: column; gap: 2px; }
.mega__tileName { font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--iron-900); }
.mega__tile:hover .mega__tileName { color: var(--ember-700); }
.mega__tileNote { font-size: var(--fs-2xs); color: var(--text-muted); line-height: 1.45; }
.mega__tileCount { font-size: 10.5px; color: var(--text-faint); font-weight: var(--fw-semi); margin-block-start: 2px; }

.mega__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-inline-start: var(--sp-8);
  border-inline-start: 1px solid var(--line-soft);
}

.mega__promo {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: linear-gradient(155deg, var(--iron-900), var(--iron-800));
  color: var(--text-on-dark);
  margin-block-end: var(--sp-3);
}
.mega__promo h3,
.mega__promoTitle {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: -.012em;
  color: var(--text-on-dark);
  font-size: var(--fs-h4);
  margin-block-end: var(--sp-2);
}
.mega__promo p { font-size: var(--fs-xs); color: var(--text-on-dark-soft); line-height: 1.6; margin-block-end: var(--sp-4); }

.mega__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--iron-700);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.mega__link:hover { background: var(--paper-2); color: var(--ember-700); }
.mega__link svg { color: var(--text-faint); }
.mega__link:hover svg { color: var(--ember-500); }

/* ============================================================
   Mobile nav drawer
   ============================================================ */

.mnav__cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-block-end: var(--sp-6);
}

.mnav__cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  text-align: center;
  transition: background var(--t-fast) var(--ease-out);
}
.mnav__cat:hover { background: var(--paper-2); }
.mnav__cat img {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-xs);
  background: var(--paper-2);
  filter: var(--img-filter);
}
.mnav__cat span { font-size: 11px; font-weight: var(--fw-semi); color: var(--iron-700); line-height: 1.2; }

.mnav__list { border-block-start: 1px solid var(--line); }

.mnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-1);
  border-block-end: 1px solid var(--line-soft);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--iron-900);
  font-family: var(--font-display);
  transition: color var(--t-fast) var(--ease-out), padding-inline-start var(--t-fast) var(--ease-out);
}
.mnav__link svg { color: var(--text-faint); }
.mnav__link:hover { color: var(--ember-600); }
.mnav__link.is-active { color: var(--ember-700); }

.mnav__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-block-start: var(--sp-8);
}

/* ============================================================
   Search panel
   ============================================================ */

.searchp {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--t) var(--ease-out), transform var(--t-slow) var(--ease-out), visibility var(--t);
}
.searchp.is-open { opacity: 1; visibility: visible; transform: none; }

.searchp__bar {
  flex: none;
  background: var(--white);
  border-block-end: 1px solid var(--line);
  box-shadow: var(--sh-1);
}

.searchp__barInner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: 78px;
}

.searchp__ico { color: var(--text-faint); flex: none; }

.searchp__input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: transparent;
  font-size: clamp(1.125rem, 1rem + 1vw, 1.6rem);
  font-weight: var(--fw-semi);
  font-family: var(--font-display);
  color: var(--iron-900);
  padding-block: var(--sp-4);
}
.searchp__input::placeholder { color: var(--text-faint); font-weight: var(--fw-regular); }
.searchp__input:focus { outline: none; }
.searchp__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.searchp__body { flex: 1; overflow-y: auto; padding-block: var(--sp-6) var(--sp-16); }

.searchp__section { margin-block-end: var(--sp-8); }
.searchp__section > .t-caps { display: block; margin-block-end: var(--sp-3); }

.searchp__hints { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip--sm { min-block-size: 34px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }

.searchp__list {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .searchp__list { grid-template-columns: 1fr 1fr; gap: var(--sp-3); } }

.sres {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line-soft);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.sres:hover { border-color: var(--iron-200); box-shadow: var(--sh-2); }

.sres__img { inline-size: 60px; flex: none; border-radius: var(--r-sm); }
.sres__img img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: var(--img-filter); }
.sres__body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.sres__name { font-weight: var(--fw-semi); color: var(--iron-900); font-size: var(--fs-sm); }
.sres:hover .sres__name { color: var(--ember-700); }
.sres__meta { font-size: var(--fs-2xs); color: var(--text-muted); }
.sres__price {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--iron-900);
}

/* ============================================================
   Cart drawer internals
   ============================================================ */

.drawer__count { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-medium); }

.drawer__ship { flex: none; }
.drawer__ship:not(:empty) {
  padding: var(--sp-4) var(--sp-6);
  background: var(--ember-50);
  border-block-end: 1px solid var(--ember-100);
}

.shipnote--drawer { display: flex; flex-direction: column; gap: var(--sp-2); }

.clines { display: flex; flex-direction: column; gap: var(--sp-4); }

.cline {
  position: relative;
  display: flex;
  gap: var(--sp-4);
  padding-block-end: var(--sp-4);
  border-block-end: 1px solid var(--line-soft);
}
.cline:last-child { border-block-end: 0; padding-block-end: 0; }
.cline--out { opacity: .62; }

.cline__img {
  inline-size: 80px;
  flex: none;
  border-radius: var(--r-sm);
  align-self: flex-start;
}
.cline__img img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: var(--img-filter); }

.cline__body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-1); }

.cline__name {
  font-weight: var(--fw-semi);
  font-size: var(--fs-sm);
  color: var(--iron-900);
  line-height: 1.35;
  padding-inline-end: var(--sp-6);
}
.cline__name:hover { color: var(--ember-700); }
.cline__sub { font-size: var(--fs-2xs); color: var(--text-muted); }

.cline__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
}

.cline__price {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--iron-900);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.cline__was { color: var(--text-faint); font-weight: var(--fw-regular); font-size: var(--fs-2xs); }

.cline__del {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  color: var(--text-faint);
  transition: all var(--t-fast) var(--ease-out);
}
.cline__del:hover { color: var(--danger-500); background: var(--danger-100); }

/* --- cross-sell --- */

.xsell {
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-5);
  border-block-start: 1px dashed var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.xsell__row { display: flex; align-items: center; gap: var(--sp-3); }
.xsell__img { inline-size: 48px; flex: none; border-radius: var(--r-xs); }
.xsell__img img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: var(--img-filter); }
.xsell__body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.xsell__name { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--iron-900); }
.xsell__name:hover { color: var(--ember-700); }
.xsell__note { font-size: 11px; color: var(--text-muted); }

/* --- summary rows --- */

.sumrows { display: flex; flex-direction: column; gap: var(--sp-2); margin-block-end: var(--sp-4); }

.sumrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
}
.sumrow dt { color: var(--text-soft); }
.sumrow dd { font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; color: var(--iron-900); }
.sumrow--save dt, .sumrow--save dd { color: var(--success-600); }

.sumrow--total {
  margin-block-start: var(--sp-2);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line);
  font-size: var(--fs-lg);
}
.sumrow--total dt { color: var(--iron-900); font-weight: var(--fw-bold); }
.sumrow--total dd { font-size: var(--fs-h4); font-weight: var(--fw-black); }

.drawer__save {
  font-size: var(--fs-xs);
  color: var(--success-600);
  font-weight: var(--fw-semi);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-3);
}

.drawer__alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-start: var(--sp-3);
}

.trust-row--drawer {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-soft);
  justify-content: space-between;
  gap: var(--sp-2);
}
.trust-row--drawer .trust-item { font-size: 11px; }

/* ============================================================
   Footer
   ============================================================ */

.site-footer { padding-block: var(--sp-16) var(--sp-8); margin-block-start: var(--section-y); }

.footer__top {
  display: grid;
  gap: var(--sp-10);
  grid-template-columns: 1fr;
  padding-block-end: var(--sp-12);
}

@media (min-width: 760px) {
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-12); }
  .footer__brand { grid-column: auto; }
}

.footer__brand { display: flex; flex-direction: column; gap: var(--sp-5); }

.footer__pitch {
  font-size: var(--fs-sm);
  color: var(--text-on-dark-soft);
  line-height: var(--lh-loose);
  max-width: 46ch;
}

.footer__contact { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.footer__cta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-on-dark);
  background: rgba(246, 241, 232, .04);
  transition: all var(--t-fast) var(--ease-out);
}
.footer__cta:hover { background: rgba(246, 241, 232, .1); border-color: rgba(246, 241, 232, .32); }
.footer__cta svg { color: var(--brass-300); flex: none; }
.footer__cta span { display: flex; flex-direction: column; line-height: 1.25; }
.footer__cta small { font-size: 10.5px; color: var(--text-on-dark-faint); }
.footer__cta b { font-size: var(--fs-sm); color: var(--text-on-dark); font-weight: var(--fw-semi); }

.footer__hours { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-2xs); }
.footer__hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  max-width: 260px;
  color: var(--text-on-dark-faint);
  padding-block: 3px;
  border-block-end: 1px solid rgba(246, 241, 232, .07);
}

.footer__col h4 {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--brass-300);
  margin-block-end: var(--sp-4);
}

.footer__col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__col a { font-size: var(--fs-sm); color: var(--text-on-dark-soft); }
.footer__col a:hover { color: var(--text-on-dark); }

/* --- mid band --- */

.footer__mid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
  padding-block: var(--sp-10);
  border-block: 1px solid var(--line-on-dark);
}

@media (min-width: 1000px) {
  .footer__mid { grid-template-columns: 1fr 1.15fr; gap: var(--sp-12); align-items: center; }
}

.footer__news h4 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-h4);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  margin-block-end: var(--sp-2);
}
.footer__news h4 svg { color: var(--brass-300); }
.footer__news p { font-size: var(--fs-sm); color: var(--text-on-dark-soft); margin-block-end: var(--sp-4); }

.news__row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.news__row .input {
  flex: 1;
  min-inline-size: 200px;
  background: rgba(246, 241, 232, .06);
  border-color: var(--line-field-on-dark);
  color: var(--text-on-dark);
}
/* --text-on-dark-faint (.52) measures 4.38:1 against this field's fill —
   just under AA for body text. .72 takes it to 7.47:1. */
.news__row .input::placeholder { color: var(--text-on-dark-soft); }
.news__row .input:focus {
  border-color: var(--brass-400);
  box-shadow: 0 0 0 4px rgba(222, 196, 140, .12);
  background: rgba(246, 241, 232, .1);
}
.news__row .btn { flex: none; }

.field__msg { font-size: var(--fs-xs); margin-block-start: var(--sp-2); min-block-size: 20px; }
.field__msg svg { vertical-align: -2px; }

.footer__badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (min-width: 620px) { .footer__badges { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } }

.fbadge {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: rgba(246, 241, 232, .04);
  border: 1px solid var(--line-on-dark);
}
.fbadge svg { color: var(--brass-300); flex: none; }
.fbadge span { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.fbadge b { font-size: var(--fs-xs); color: var(--text-on-dark); font-weight: var(--fw-bold); }
.fbadge small { font-size: 10.5px; color: var(--text-on-dark-faint); line-height: 1.4; }

/* --- bottom --- */

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block-start: var(--sp-6);
}

.footer__copy { font-size: var(--fs-2xs); color: var(--text-on-dark-faint); }

.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer__legal a { font-size: var(--fs-2xs); color: var(--text-on-dark-faint); }
.footer__legal a:hover { color: var(--text-on-dark); text-decoration: underline; }

.footer__pay { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.paychip {
  padding: 4px var(--sp-3);
  border-radius: var(--r-xs);
  border: 1px solid var(--line-on-dark);
  background: rgba(246, 241, 232, .05);
  font-size: 10.5px;
  font-weight: var(--fw-semi);
  color: var(--text-on-dark-faint);
}

/* ============================================================
   Bundle card
   ============================================================ */

.bcard {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.bcard:hover { border-color: var(--iron-200); box-shadow: var(--sh-4); }

.bcard__media { position: relative; }
.bcard__media img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: var(--img-filter); }

.bcard__save {
  position: absolute;
  inset-block-end: var(--sp-4);
  inset-inline-start: var(--sp-4);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  background: var(--ember-500);
  color: #FFF;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  box-shadow: var(--sh-ember);
}

.bcard__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); flex: 1; }
.bcard__name { font-size: var(--fs-h3); }
.bcard__tag { font-size: var(--fs-sm); color: var(--ember-700); font-weight: var(--fw-semi); }

.bcard__items { display: flex; flex-direction: column; gap: var(--sp-2); margin-block: var(--sp-2); }
.bcard__items li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-soft);
  padding-block: var(--sp-1);
}
.bcard__items svg { color: var(--success-500); flex: none; }
.bcard__items a { font-weight: var(--fw-medium); }
.bcard__items a:hover { color: var(--ember-600); text-decoration: underline; }
.bcard__itemPrice {
  margin-inline-start: auto;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.bcard__note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-snug);
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper);
  border-radius: var(--r-sm);
  border-inline-start: 3px solid var(--brass-300);
}

.bcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-start: auto;
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line-soft);
}

/* ============================================================
   price "from" label
   ============================================================ */

.price__from {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  font-weight: var(--fw-semi);
  order: -1;
}

/* ============================================================
   Broken-image fallback
   ============================================================ */

.frame--broken {
  background: var(--paper-3);
}
.frame--broken::before {
  content: "תמונה לא נטענה";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  z-index: 3;
}
img.is-broken { visibility: hidden; }