/* Generated by ops/demo-controls.mjs. */
.mk-dark-toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font-size: inherit;
  line-height: 1;
}
.mk-dark-toggle i { pointer-events: none; }
/* The sun shows only once the page is dark, so the icon is correct on first
   paint rather than after a script decides. */
.mk-dark-toggle .mk-dark-sun { display: none; }
body.dark .mk-dark-toggle .mk-dark-moon { display: none; }
body.dark .mk-dark-toggle .mk-dark-sun { display: inline-block; }

/* ---------------------------------------------------------------- the PDP
   Variants, the specification table and the two soft bundles that
   ops/demo-pdp.mjs injects. Logical properties throughout: the same sheet
   serves front-end/ and the right-to-left front-end-ar/. */

/* The demos carry a dark toggle (ops/demo-controls.mjs), and the theme switches
   on `body.dark` — so every line and panel colour here is a token with a value
   for each, rather than a grey that only works in the light. */
:root { --mk-line: #e9e9e9; --mk-foot: #fafafa; }
body.dark { --mk-line: rgba(255, 255, 255, .16); --mk-foot: rgba(255, 255, 255, .04); }

.mk-variants li,
.mk-sizes li { cursor: pointer; }

.mk-sizes ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 10px; list-style: none; }
.mk-sizes li a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 8px 12px; border: 1px solid var(--mk-line, #ddd);
  border-radius: 6px; font-size: 14px; line-height: 1;
}
.mk-sizes li.active a { border-color: currentColor; font-weight: 600; }
.mk-sizes li.mk-out { cursor: not-allowed; }
.mk-sizes li.mk-out a { opacity: .4; text-decoration: line-through; }

.mk-size-guide { font-size: 12px; font-weight: 400; margin-inline-start: 8px; text-decoration: underline; }

.mk-stock { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; margin: 6px 0 14px; }
.mk-stock .mk-dot { width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; }
.mk-stock[data-state="low"] .mk-dot { background: #d97706; }
.mk-stock[data-state="out"] .mk-dot { background: #b91c1c; }
.mk-sku { margin-inline-start: auto; opacity: .65; }

.mk-spec-table th { width: 40%; font-weight: 600; }
.mk-spec-table th, .mk-spec-table td { padding: 10px 12px; }

.mk-bundle-section { padding-block: 24px; }
.mk-bundle-title { margin-bottom: 18px; }

/* The card is the theme's own `.basic-product.theme-product-1`; all that is
   added here is the way you pick one. The checkbox sits over the image so the
   card keeps the proportions the rest of the page uses. */
.mk-pick {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 9px;
  border-radius: 999px; background: rgba(255, 255, 255, .92); cursor: pointer;
  font-size: 12px; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.mk-pick input { margin: 0; cursor: pointer; }
.mk-pick-label { white-space: nowrap; }
.mk-card.mk-picked .mk-pick { background: #fff; font-weight: 600; }
.mk-card .img-wrapper { position: relative; }

/* One rounded panel per bundle, with the total and the button sitting ON its
   edge rather than loose underneath it: the footer is full-bleed inside the
   panel, so its top rule IS the panel's line and its corners are the panel's
   corners. */
.mk-bundle {
  border: 1px solid var(--mk-line); border-radius: 16px;
  padding: 18px 18px 0; overflow: hidden;
}
.mk-bundle-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  margin: 18px -18px 0; padding: 14px 18px;
  border-top: 1px solid var(--mk-line); background: var(--mk-foot);
}
.mk-bundle-total { font-size: 15px; }
.mk-bundle-total strong { font-size: 22px; margin-inline-start: 6px; }
.mk-bundle-total em { font-style: normal; opacity: .6; margin-inline-start: 10px; font-size: 13px; }
.mk-bundle-add { margin-inline-start: auto; }
.mk-bundle-add[disabled] { opacity: .45; cursor: not-allowed; }
.mk-bundle-add.mk-added::after { content: " ✓"; }
.mk-demo-note { font-size: 12px; opacity: .55; margin: 0; padding-inline-start: 1px; }
.mk-bundle-foot .mk-demo-note { flex-basis: 100%; }

/* Three across on a phone (amer, 2026-09-14). At 390px that is a card about
   115px wide, so the card's own type has to come down with it — left alone,
   the brand, the name, the price, the struck-through price and the discount
   badge all wrap onto lines of their own and the row becomes three columns of
   ragged text. The offer line and the pill's label are the two things worth
   losing at that width: the checkbox still says what it does. */
@media (max-width: 575px) {
  .mk-bundle { padding: 12px 12px 0; }
  .mk-bundle-foot { margin: 14px -12px 0; padding: 12px; }
  .mk-bundle-add { margin-inline-start: 0; width: 100%; }

  /* The theme styles this card as `.basic-product.theme-product-1
     .product-detail .offer-panel` — four classes. A two-class override loses,
     silently, and the first attempt at this shipped a clipped "In this bun"
     on every mobile card. Matching its shape is what makes these apply. */
  .mk-bundle-grid { --bs-gutter-x: .5rem; }
  .mk-card.basic-product.theme-product-1 .product-detail { padding: 8px 6px; }
  .mk-card.basic-product.theme-product-1 .product-detail .brand-w-color .product-title { font-size: 12px; }
  .mk-card.basic-product.theme-product-1 .product-detail h6 { font-size: 11px; line-height: 1.35; margin-bottom: 4px; }
  .mk-card.basic-product.theme-product-1 .product-detail .price { font-size: 13px; }
  .mk-card.basic-product.theme-product-1 .product-detail .price del { font-size: 11px; margin-inline-start: 4px; }
  .mk-card.basic-product.theme-product-1 .product-detail .price .discounted-price { display: block; font-size: 11px; margin: 2px 0 0; }
  .mk-card.basic-product.theme-product-1 .product-detail .offer-panel { display: none; }
  /* That panel's divider is drawn on the block ABOVE it, so hiding the panel
     alone leaves a rule under the price with nothing beneath it. */
  .mk-card.basic-product.theme-product-1 .product-detail > div { border-bottom: 0; padding-bottom: 0; }
  .mk-card.basic-product.theme-product-1 .rating-label { font-size: 10px; padding: 2px 5px; }
  /* Wishlist and quick-view have no hover on a phone and sit permanently over
     a 108px image, beside the one control that matters here. */
  .mk-card.basic-product.theme-product-1 .cart-info { display: none; }

  .mk-pick { inset-block-start: 6px; inset-inline-start: 6px; padding: 4px; gap: 0; }
  .mk-pick-label { display: none; }
}

/* -------------------------------------------------------------- the merch
   What ops/demo-merch.mjs injects into every theme's home page: the
   limited-time strip and the "you save" line. A chip row and circular category
   tiles lived here too until amer removed them on 2026-09-14; their styles went
   with them rather than sitting unused. Logical properties throughout — the same sheet serves
   front-end/ and the right-to-left front-end-ar/ — and every colour is a token
   with a dark value, because the demos carry a dark toggle. */

:root { --mk-deal-bg: #1f2433; --mk-deal-fg: #fff; --mk-save: #1f9d55; }
body.dark { --mk-deal-bg: #11141d; --mk-save: #4ade80; }

.mk-merch { padding-block: 22px; }
.mk-merch-title { margin-bottom: 12px; font-size: 16px; }

.mk-deal {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding: 16px 20px; border-radius: 16px;
  background: var(--mk-deal-bg); color: var(--mk-deal-fg);
}
.mk-deal-bolt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 19px;
}
.mk-deal-text { display: flex; flex-direction: column; line-height: 1.35; }
.mk-deal-text em { font-style: normal; font-size: 12px; opacity: .7; }
.mk-deal-text strong { font-size: 17px; }
.mk-deal-clock { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; font-size: 14px; }
.mk-deal-ends { opacity: .7; }
.mk-deal-clock b { font-variant-numeric: tabular-nums; font-size: 18px; letter-spacing: .5px; }
.mk-deal-btn { flex: 0 0 auto; }

.mk-save { display: inline-block; margin-inline-start: 8px; font-size: 12px; color: var(--mk-save); }

@media (max-width: 575px) {
  /* The reference's circular "shop by" tiles: a tinted disc, the theme's own
   photograph when it has one, and the theme's own label under it. Six tints
   cycle so a row reads as a set rather than six of the same button. */
/* No photograph for this category — the reference sets the label inside the
   disc in that case, which reads better than the same icon six times. */

.mk-deal { padding: 14px; gap: 10px; }
  .mk-deal-clock { margin-inline-start: 0; }
  .mk-deal-btn { width: 100%; }
}
}