/* CrackersMela controls: actions, navigation, selection and progress have
   separate roles. Loaded after the legacy surface/layout stylesheet.
   New actions should use .btn with one semantic variant, not visual pills. */
:root {
  --control-primary: #1565c0;
  --control-primary-hover: #0d47a1;
  --control-ink: #173d69;
  --control-muted: #53677f;
  --control-border: #b7c9dc;
  --control-surface: #fff;
  --control-hover: #edf4fb;
  --control-selected: #e3effc;
  --control-danger: #b42318;
  --control-focus: #0d47a1;
  --control-radius: 8px;
  --control-radius-sm: 6px;
  --control-radius-input: 10px;
  --control-size: 42px;
  --control-size-sm: 34px;
  --control-size-checkout: 46px;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Actions. .btn-glass/.btn-white are retained as secondary aliases so existing
   pages and newly rendered dialogs share the same treatment. */
body .btn {
  min-height: var(--control-size);
  height: auto;
  padding: 9px 16px;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  filter: none;
  will-change: auto;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
body .btn:is(:hover, :active) { transform: none; box-shadow: none; filter: none; }
body .btn.btn-primary,
body #cartDrawer .drawer__foot .btn-primary {
  color: #fff;
  background: var(--control-primary);
  border-color: var(--control-primary);
  box-shadow: none;
}
body .btn.btn-primary:hover,
body #cartDrawer .drawer__foot .btn-primary:hover {
  background: var(--control-primary-hover);
  border-color: var(--control-primary-hover);
  box-shadow: none;
  transform: none;
}
body .btn:is(.btn-glass, .btn-white, .btn-secondary) {
  color: var(--control-primary-hover);
  background: var(--control-surface);
  border-color: var(--control-border);
  box-shadow: none;
}
body .btn:is(.btn-glass, .btn-white, .btn-secondary):hover {
  background: var(--control-hover);
  border-color: var(--control-primary);
}
body .btn.btn-ghost { color: var(--control-primary-hover); background: transparent; border-color: transparent; }
body .btn.btn-ghost:hover { background: var(--control-hover); border-color: transparent; }
body .btn.btn-danger { color: #fff; background: var(--control-danger); border-color: var(--control-danger); }
body .btn.btn-danger:hover { background: #912018; border-color: #912018; }
body .btn.btn-lg { min-height: 46px; height: auto; padding: 11px 20px; font-size: 15px; }
body .btn:is(.btn-sm, .sm) { min-height: var(--control-size-sm); padding: 6px 11px; font-size: 13px; }
body .btn::before, body .btn::after { box-shadow: none; }
body #cartDrawer .drawer__foot .btn-primary {
  min-height: var(--control-size-checkout); padding: 11px 16px;
  border-radius: var(--control-radius); font-size: 14px; font-weight: 600;
  transition: background-color 140ms ease, border-color 140ms ease;
  filter: none; transform: none;
}
body #cartDrawer .drawer__foot .btn-primary:active { transform: none; filter: none; }
body #cartDrawer .drawer__view-cart {
  min-height: 40px; padding: 8px 14px; border-radius: var(--control-radius);
  color: var(--control-primary-hover); background: #fff; border-color: var(--control-border);
  font-size: 14px; font-weight: 500; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body #cartDrawer .drawer__view-cart:is(:hover, :active) { background: var(--control-hover); box-shadow: none; transform: none; }

/* Product grid actions are quieter than the purchase action on a detail page. */
body .prod-card .add-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: 98px;
  height: auto;
  min-height: 38px;
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background: #fff;
  color: var(--control-primary-hover);
  font: 600 13px/1.25 var(--font-body);
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
body .prod-card .add-btn span { position: static; width: auto; height: auto; clip: auto; clip-path: none; overflow: visible; font: inherit; }
body .prod-card .add-btn::before { content: none; }
body .prod-card:hover .add-btn { box-shadow: none; transform: none; }
body .prod-card .add-btn:is(:hover, :active):not(:disabled) {
  background: var(--control-hover); border-color: var(--control-primary); box-shadow: none; transform: none;
}
body .prod-card__foot.foot-in { animation: none; }
body .prod-card__foot.foot-swap { transform: none; }

/* Icon actions keep their recognisable symbols, without a separate glowing orb. */
body :is(.nav-actions .icon-btn, .icon-btn, .nav-search-open, .account-chip, .mobile-toggle, .drawer-close, .filter-close, .modal__close, .prod-card__wish) {
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  color: var(--control-primary-hover);
  background: rgba(255, 255, 255, .9);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
body :is(.nav-actions .icon-btn, .icon-btn, .nav-search-open, .account-chip, .mobile-toggle, .drawer-close, .filter-close, .modal__close, .prod-card__wish):is(:hover, :active) {
  background: var(--control-hover); color: var(--control-primary-hover); border-color: var(--control-primary); box-shadow: none; transform: none;
}
body .icon-btn .count-bubble { background: var(--control-primary); box-shadow: none; font-weight: 600; }
body .prod-card__wish:is(.active, .on) { color: #b42348; background: #fff1f3; border-color: #e5a5b6; transform: none; box-shadow: none; }
body .prod-card__wish:is(.active, .on, :hover) svg { filter: none; transform: none; }
body #cartDrawer .drawer__close {
  border: 1px solid var(--control-border); border-radius: var(--control-radius);
  color: var(--control-primary-hover); background: #fff; box-shadow: none; transform: none;
}
body #cartDrawer .drawer__close:is(:hover, :active) { background: var(--control-hover); box-shadow: none; transform: none; }
body .cart-line__del { border-radius: var(--control-radius-sm); box-shadow: none; color: var(--control-danger); }
body .cart-line__del:is(:hover, :active) { box-shadow: none; transform: none; background: #fff1ef; }

/* Navigation has a quiet selected surface, not a primary-action fill. */
body .nav-links .nav-link { padding: 9px 12px; border-radius: var(--control-radius); font-weight: 500; box-shadow: none; }
body .nav-links .nav-link:hover { background: var(--control-hover); color: var(--control-primary-hover); transform: none; }
body .nav-links .nav-link.active { background: var(--control-selected); color: var(--control-primary-hover); font-weight: 600; }
body .mobile-nav-link { font-weight: 500; box-shadow: none; }
body .mobile-nav-link.active { font-weight: 600; }
body .section__link { min-height: 36px; padding: 6px 2px; border: 0; border-radius: var(--control-radius-sm); background: transparent; color: var(--control-primary-hover); font-size: 14px; font-weight: 500; box-shadow: none; }
body .section__link:is(:hover, :active) { background: transparent; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; transform: none; }
body .account-menu__item { font-weight: 500; border-radius: var(--control-radius-sm); box-shadow: none; }
body .account-menu__item:hover { background: var(--control-hover); box-shadow: none; transform: none; }
body .nav-search { border-radius: var(--control-radius-input); box-shadow: none; background: #fff; border-color: var(--control-border); }
body .nav-search:focus-within { border-color: var(--control-focus); box-shadow: none; }
body .nav-search__close { min-width: 36px; min-height: 36px; border-radius: var(--control-radius-sm); box-shadow: none; }
body .shop-bar__search { border-radius: var(--control-radius-input); background: #fff; border-color: var(--control-border); box-shadow: none; }
body .shop-bar__search:focus-within { border-color: var(--control-focus); box-shadow: none; }
body .nav-drop__menu a { border-radius: var(--control-radius-sm); font-weight: 500; }
body .nav-drop__menu a:hover { transform: none; box-shadow: none; }

/* Category rail is navigation to filtered catalog views. Counts are metadata.
   The underline is selected state; it never competes with checkout. */
body .cat-rail { gap: 3px; padding: 6px 8px; border-radius: var(--control-radius-input); background: rgba(255,255,255,.65); border: 1px solid #cbdbea; box-shadow: none; backdrop-filter: none; }
body .cat-rail .cat-pill {
  height: 40px; min-height: 40px; padding: 0 11px; gap: 7px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--control-ink); background: transparent; font-size: 13px; font-weight: 500;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}
body .cat-rail .cat-pill:hover { background: var(--control-hover); box-shadow: none; transform: none; }
body .cat-rail .cat-pill.active { color: var(--control-primary-hover); border-bottom-color: var(--control-primary); background: var(--control-selected); font-weight: 600; box-shadow: none; }
body .cat-rail .cat-pill .cp-n { color: var(--control-muted); opacity: 1; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
body .chip-row .chip,
body :is(#new-arrivals, #featured) .chip {
  min-height: 36px; padding: 7px 11px; border-radius: var(--control-radius-sm);
  border: 1px solid var(--control-border); background: #fff; color: var(--control-ink);
  font-size: 13px; font-weight: 500; letter-spacing: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
body .chip-row .chip:is(:hover, :active),
body :is(#new-arrivals, #featured) .chip:is(:hover, :active) { background: var(--control-hover); box-shadow: none; transform: none; }
body .chip-row .chip.active,
body :is(#new-arrivals, #featured) .chip.active,
body :is(#new-arrivals, #featured) .chip.active:is(:hover, :active) { background: var(--control-selected); color: var(--control-primary-hover); border-color: #7da7d3; font-weight: 600; box-shadow: none; transform: none; }
body .filter-fab { min-height: 40px; padding: 8px 12px; border-radius: var(--control-radius-sm); background: #fff; color: var(--control-ink); border: 1px solid var(--control-border); box-shadow: none; font-weight: 600; }
body :is(.filter-select, .sort-select, .shop-bar select) { border-radius: var(--control-radius-sm); border-color: var(--control-border); background-color: #fff; font-weight: 500; box-shadow: none; min-height: 38px; }
body :is(.sort-select, .filter-select) { appearance: auto; background-image: none; }
body :is(.filter-clear, .link-btn) { font-weight: 500; color: var(--control-primary-hover); background: transparent; box-shadow: none; text-underline-offset: 3px; }
body :is(.filter-clear, .link-btn):hover { text-decoration: underline; transform: none; }
body .filter-clear { min-height: 32px; padding: 4px 2px; }

/* Quantity changes have equal weight; plus is not a purchase CTA. */
body :is(.qty-ctl, .qty-stepper, .mini-qty) { border: 1px solid var(--control-border); border-radius: var(--control-radius); background: #fff; box-shadow: none; }
body #cartDrawer .mini-qty { border-radius: var(--control-radius); background: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body :is(.qty-btn, .qty-stepper button, .mini-qty button) {
  min-width: 34px; min-height: 34px; border: 0; border-radius: var(--control-radius-sm);
  background: transparent; color: var(--control-ink); font-weight: 500; box-shadow: none;
  transition: background-color 140ms ease;
}
body :is(.qty-btn, .qty-stepper button, .mini-qty button):is(:hover, :active) { background: var(--control-hover); box-shadow: none; transform: none; }
body :is(.qty-num, .qty-stepper b, .mini-qty b) { font-weight: 600; }
body .qty-remove { min-height: 32px; padding: 5px 8px; border: 0; border-radius: var(--control-radius-sm); background: transparent; color: var(--control-danger); font-size: 12px; font-weight: 500; box-shadow: none; }
body .qty-remove:is(:hover, :active) { background: #fff1ef; box-shadow: none; transform: none; }
body .shop-more-btn { min-height: 40px; padding: 8px 14px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: #fff; color: var(--control-primary-hover); font-weight: 500; box-shadow: none; }
body .shop-more-btn:is(:hover, :active) { background: var(--control-hover); box-shadow: none; transform: none; }

/* Checkout progress is an ordered status list, not interactive tabs. */
.checkout-steps { display: flex; align-items: center; gap: 0; max-width: 440px; list-style: none; padding: 0; margin: 20px 0 24px; }
.checkout-step { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; color: var(--control-muted); font-size: 14px; font-weight: 500; }
.checkout-step:last-child { flex: 0 0 auto; }
.checkout-step:not(:last-child)::after { content: ''; height: 1px; min-width: 12px; flex: 1; margin: 0 12px 0 4px; background: var(--control-border); }
.checkout-step__number { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border: 1px solid var(--control-border); border-radius: 50%; color: var(--control-muted); background: #fff; font-size: 12px; font-weight: 600; }
.checkout-step__number svg { width: 15px; height: 15px; }
.checkout-step[aria-current='step'] { color: var(--control-primary-hover); font-weight: 600; }
.checkout-step[aria-current='step'] .checkout-step__number { color: #fff; background: var(--control-primary); border-color: var(--control-primary); }
.checkout-step.is-complete .checkout-step__number { color: var(--control-primary-hover); background: var(--control-selected); border-color: #7da7d3; }
.checkout-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.checkout-actions .btn:first-child { margin-right: auto; }
.checkout-note { margin-top: 12px; color: var(--control-muted); font-size: 12.5px; text-align: center; }
.desc-note { white-space: pre-line; }
body .checkout-actions .btn-primary { min-height: var(--control-size-checkout); min-width: 176px; flex: 0 1 auto; width: auto; padding: 11px 20px; }
body :is(.pay-option, .pay-option.selected) { border-radius: var(--control-radius-input); box-shadow: none; background: #fff; border-width: 1px; border-color: var(--control-border); }
body .pay-option.selected { border-color: var(--control-primary); background: #f5f9fe; }
body .pay-option b { font-weight: 600; }
body .pay-option.selected .radio::after { background: var(--control-primary); }
body .coupon-entry { display: flex; gap: 8px; }
body .coupon-entry input { min-width: 0; flex: 1; padding: 8px 12px; border: 1px solid var(--control-border); border-radius: var(--control-radius-input); background: #fff; font: inherit; font-size: 13px; }
body .coupon-entry .btn { flex-shrink: 0; min-height: 40px; }

/* Form and account controls remain recognisable, with clear focus boundaries. */
body .form-field :is(input, select, textarea):not([type='checkbox']):not([type='radio']) { border-radius: var(--control-radius-input); border-width: 1px; border-color: var(--control-border); background: #fff; box-shadow: none; }
body .form-field :is(input, select, textarea):focus { box-shadow: none; border-color: var(--control-primary); }
.phone-entry { display: flex; }
.phone-entry > span { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--control-border); border-right: 0; border-radius: var(--control-radius-input) 0 0 var(--control-radius-input); color: var(--control-muted); background: #f6f8fb; font-weight: 500; }
body .phone-entry input { min-width: 0; border-radius: 0 var(--control-radius-input) var(--control-radius-input) 0; }
body .auth-tabs { background: transparent; border-radius: 0; border-bottom: 1px solid var(--control-border); padding: 0; gap: 16px; }
body .auth-tabs button { min-height: 42px; padding: 8px 2px; border-radius: 0; border-bottom: 2px solid transparent; color: var(--control-muted); background: transparent; box-shadow: none; font-weight: 500; }
body .auth-tabs button.active { background: transparent; color: var(--control-primary-hover); border-bottom-color: var(--control-primary); font-weight: 600; box-shadow: none; }
body .google-btn { min-height: 42px; border: 1px solid var(--control-border); border-radius: var(--control-radius); background: #fff; box-shadow: none; font-size: 14px; font-weight: 500; }
body .google-btn:hover { background: var(--control-hover); transform: none; box-shadow: none; }
body .analytics-consent button { min-height: 38px; padding: 8px 12px; border-radius: var(--control-radius); font-size: 13px; font-weight: 500; box-shadow: none; }
body .analytics-consent [data-analytics-reject] { color: var(--control-ink); background: #fff; border-color: var(--control-border); }
body .analytics-consent [data-analytics-accept] { color: #fff; background: var(--control-primary); border-color: var(--control-primary); }
body .analytics-consent [data-analytics-reject]:hover { background: var(--control-hover); }
body .analytics-consent [data-analytics-accept]:hover { background: var(--control-primary-hover); }
body .fab { border-radius: 12px; box-shadow: 0 3px 10px rgb(18 43 72 / 14%); transition: background-color 140ms ease, opacity 140ms ease, visibility 140ms ease; }
body .fab:hover { transform: none; }
body .fab-wa { background: #128c65; }
body .fab-wa:hover { background: #107653; }
body .fab-up { background: var(--control-primary); }
body .fab-up:hover { background: var(--control-primary-hover); }

/* Supporting feedback and product metadata have less visual weight than actions. */
body .toast.toast--cart { border-radius: 10px; background: #fff; border: 1px solid #c4d3e1; box-shadow: 0 4px 14px rgb(18 43 72 / 12%); backdrop-filter: none; -webkit-backdrop-filter: none; font-weight: 500; animation: none; white-space: normal; }
body .toast.toast--cart::before { content: none; }
body .toast.toast--cart svg { filter: none; }
body .meta-pill { border-radius: var(--control-radius-sm); background: #edf4fb; border-color: #d5e2ef; box-shadow: none; backdrop-filter: none; font-weight: 500; }
body .badge-off { border-radius: 4px; box-shadow: none; font-weight: 600; letter-spacing: 0; }
body .badge-off { background: var(--control-primary-hover); }
body :is(.prod-card, .cat-card, .glass-panel, .filter-card, .content-card, .contact-card, .order-item):hover { transform: none; }
body .prod-card:hover .prod-card__media img { transform: none; }

/* States apply to every control role, never to decorative cards or avatars. */
body :is(.btn, .add-btn, .icon-btn, .cat-pill, .chip, .qty-btn, .qty-remove, .qty-stepper button, .mini-qty button, .filter-fab, .filter-clear, .filter-select, .nav-link, .account-chip, .mobile-toggle, .drawer-close, .filter-close, .modal__close, .prod-card__wish, .shop-more-btn, .google-btn, .auth-tabs button, .pay-option, .form-field input, .form-field select, .form-field textarea):focus-visible {
  outline: 2px solid var(--control-focus); outline-offset: 3px; box-shadow: none;
}
body :is(.btn, .add-btn, .qty-btn, .icon-btn, .google-btn):disabled,
body :is(.btn, .add-btn, .icon-btn)[aria-disabled='true'],
body .btn.btn-primary:disabled, body .btn.btn-primary:disabled:hover,
body .prod-card .add-btn:disabled, body .prod-card:hover .add-btn:disabled,
body #cartDrawer .drawer__foot .btn-primary:disabled {
  color: #596879; background: #e7ecf1; border-color: #cad4de; opacity: 1; box-shadow: none; transform: none; filter: none; cursor: not-allowed;
}
body :is(.analytics-consent button, .coupon-entry input, .drawer__view-cart, .sort-select):focus-visible { outline: 2px solid var(--control-focus); outline-offset: 3px; box-shadow: none; }
body :is(.section__link, .mobile-nav-link, .fab, .nav-search__close):focus-visible { outline: 2px solid var(--control-focus); outline-offset: 3px; box-shadow: none; }
body :is(.drawer__close, .cart-line__del):focus-visible { outline: 2px solid var(--control-focus); outline-offset: 3px; box-shadow: none; }
@media (max-width: 560px) {
  body .prod-card__foot:not(.prod-card__foot--cart) .add-btn { flex: 1 1 100%; min-height: 42px; padding: 8px 10px; }
  .checkout-step { gap: 5px; font-size: 12px; }
  .checkout-step:not(:last-child)::after { margin: 0 7px 0 2px; min-width: 8px; }
  body .checkout-actions .btn-primary { min-width: 0; flex: 1; padding: 11px 14px; }
}
@media (pointer: coarse), (max-width: 820px) {
  body :is(.btn, .cat-rail .cat-pill, .chip-row .chip, .filter-fab, .filter-select, .google-btn, .shop-more-btn, .analytics-consent button, .coupon-entry .btn) { min-height: 44px; }
  body :is(.qty-btn, .qty-stepper button, .mini-qty button, .prod-card__wish, .drawer-close, .drawer__close, .cart-line__del, .filter-close, .modal__close) { min-width: 44px; min-height: 44px; }
  body .qty-remove { min-height: 44px; }
  body .nav-search__close { min-width: 44px; min-height: 44px; }
  body :is(#new-arrivals, #featured) .chip { min-height: 44px; }
  body .section__link { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  body .reveal { opacity: 1; transform: none; transition: none; }
  body :is(.btn, .add-btn, .cat-pill, .chip, .icon-btn, .qty-btn, .qty-remove, .shop-more-btn) { transition: none; }
}