/* ===========================================================================
   Mercado — components.

   The product card is the test of the whole system: image, brand, name,
   price. No gradient, no border, no badge stack, no rating, no shadow.
   If it needs decoration to look interesting, the composition is wrong.
   =========================================================================== */

/* ---- buttons -------------------------------------------------------------
   Two only. Primary is the single pill on the page; secondary is a rule. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: var(--s3) var(--s7);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1;
  transition: background-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease);
}

.btn:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* The brand CTA stays orange under the cursor. It answers with a 2 % lift,
   a soft band of light passing through it and a shadow you only feel. */
.btn--brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  transition: transform var(--d) var(--ease-out),
              box-shadow var(--d) var(--ease),
              background-color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease);
}

/* The light band. It only transitions on the way in; on the way out it jumps
   back to its start while it is outside the pill, so it is never seen
   travelling backwards. It starts at the reading edge. */
.btn--brand::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 28%,
    color-mix(in srgb, var(--paper) 36%, transparent) 50%,
    transparent 72%
  );
  transform: translateX(-115%);
  pointer-events: none;
}

[dir="rtl"] .btn--brand::after { transform: translateX(115%); }

@media (hover: hover) {
  .btn--brand:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    transform: scale(1.02);
    box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--brand-ink) 55%, transparent);
  }

  .btn--brand:hover::after {
    transform: translateX(115%);
    transition: transform 1100ms var(--ease-out);
  }

  [dir="rtl"] .btn--brand:hover::after { transform: translateX(-115%); }
}

.btn--brand:active { transform: scale(0.99); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn--block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: 0.4; pointer-events: none; }

/* A text link that reads as editorial, not as a button. */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  font-weight: 600;
  padding-block-end: 2px;
  border-block-end: 1px solid var(--line-2);
  transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

.link:hover { border-block-end-color: var(--ink); }
/* ---- shape --------------------------------------------------------------
   Every framed surface takes its corner here, from the tokens, so the whole
   site stays consistent. overflow: clip keeps images inside the curve. */
.card__media,
.story__media,
.models__preview,
.closer__media img,
.tile__media,
.landing__media,
.product-layout__gallery,
.woocommerce-product-gallery__image,
.cta-band,
.factbox,
.mapframe {
  border-radius: var(--r-card);
  overflow: clip;
}

.flex-control-thumbs img,
.finish,
.result__media,
.cart-line__media img,
.review-line__media {
  border-radius: var(--r-sm);
  overflow: clip;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--r);
}

/* The phone filter sheet rises from the bottom edge. */
.filters__panel {
  border-start-start-radius: var(--r-card);
  border-start-end-radius: var(--r-card);
}

/* ---- product card ------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Every product shot in this catalogue is 1080×1080 with a solid white
   background — not transparent. So the frame is white and the image fills it
   edge to edge: any tinted panel or padding behind it shows up as a white
   rectangle sitting inside a grey box. The product appears to float on the
   page instead, which is also the look the design wants. */
.card__media {
  display: block;
  position: relative;
  aspect-ratio: 1;
  background: var(--paper);
  overflow: hidden;
}

.card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  /* The product fills ~92% of its own frame, so with no padding it touches
     the box on all four sides and reads as cramped. Padding on a white box
     over a white page is invisible — it is pure breathing room. */
  padding: 9%;
  transition: transform var(--d-slow) var(--ease-out);
}

@media (hover: hover) {
  .card:hover .card__media img { transform: scale(1.04); }
}

.card__body {
  display: grid;
  gap: var(--s2);
  padding-block-start: var(--s4);
}

.card__brand {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  color: var(--ink-3);
  text-transform: uppercase;
}

.card__name {
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  /* Names in this catalogue run to ~60 characters; two lines keeps the grid
     scannable without truncating the model out of the title. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* Hover reveals the CTA rather than the card carrying one at rest. */
.card__cta {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--d) var(--ease), transform var(--d) var(--ease-out);
}

@media (hover: hover) {
  .card:hover .card__cta, .card:focus-within .card__cta { opacity: 1; transform: none; }
}

@media (hover: none) {
  .card__cta { opacity: 1; transform: none; }
}

/* Feature variant: one product given more visual weight than its neighbours. */
.card--feature .card__name { font-size: var(--t-h3); -webkit-line-clamp: 3; line-clamp: 3; }

/* ---- price ---------------------------------------------------------------
   The only place orange appears at rest. */
.price { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }

.price__now { font-size: var(--t-body); font-weight: 700; color: var(--ink); }
.price__was { font-size: var(--t-sm); color: var(--ink-3); text-decoration: line-through; }
.price__off { font-size: var(--t-micro); font-weight: 700; color: var(--brand-ink); }

.woocommerce-Price-currencySymbol { font-size: 0.72em; font-weight: 500; margin-inline-start: 3px; }

/* ---- spec figure ---------------------------------------------------------
   Oversized number, small caption. Used for the real specs pulled from the
   product's own description. */
/* Label above the figure: the values have wildly different widths ("6.7" vs
   "ايه 17 برو"), so anchoring them from the top is the only way the row
   aligns when one of them wraps. */
.spec { display: grid; gap: var(--s2); align-content: start; }

.spec__value {
  font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.spec__unit { font-size: 0.42em; font-weight: 500; margin-inline-start: 0.15em; letter-spacing: 0; }

/* A spec whose value is a name rather than a figure ("ايه 17 برو"). At the
   numeral scale it wrapped onto three lines and collided with the labels
   beneath it. */
.spec--text .spec__value {
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: normal;
}

.spec__label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  color: var(--ink-3);
  text-transform: uppercase;
}

/* ---- quantity stepper ----------------------------------------------------
   woocommerce/global/quantity-input.php. A pill because it sits beside the
   add-to-cart pill and reads as its companion. */
.quantity--stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-field);
  border-radius: var(--r-pill);
  background: var(--paper);
  transition: border-color var(--d-fast) var(--ease);
}

.quantity--stepper:focus-within { border-color: var(--ink); }

.quantity input.qty {
  inline-size: 3.2em;
  min-block-size: 44px;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.quantity input.qty::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.quantity--stepper input.qty:focus-visible { outline: none; }

.qty-step {
  display: grid;
  place-items: center;
  inline-size: 44px;
  min-block-size: 44px;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink-2);
  border-radius: var(--r-pill);
  transition: color var(--d-fast) var(--ease);
}

.qty-step:hover { color: var(--ink); }
.qty-step:focus-visible { outline-offset: -4px; }

/* ---- notice -------------------------------------------------------------- */
.notice {
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-inline-start-width: 2px;
  border-inline-start-color: var(--ink);
  font-size: var(--t-sm);
  margin-block-end: var(--s5);
}

/* ---- field --------------------------------------------------------------- */
.field {
  inline-size: 100%;
  min-height: 52px;
  padding: var(--s3) var(--s4);
  background: var(--paper);
  border: 1px solid var(--line-field);
  border-radius: var(--r);
  color: var(--ink);
  transition: border-color var(--d-fast) var(--ease);
}

.field::placeholder { color: var(--ink-3); }
.field:focus { border-color: var(--ink); outline: none; }