/* ============================================================
   QUEENAM — MONA Ecommerce in the site's own look.

   The prototype has no cart / checkout / account design, so the plugin's
   screens are dressed with the theme's tokens: the plugin reads every colour
   and radius from the --mecom-* properties declared on .mecom-shell, and the
   few hard-coded parts (buttons, fields, headings) are restyled here.
   `body .mecom-shell` outranks the plugin's sheet whichever loads last
   (the plugin prints its sheet in the footer on shortcode pages).
   ============================================================ */

body .mecom-shell{
  --mecom-ink:   var(--cacao);
  --mecom-mut:   var(--muted);
  --mecom-line:  var(--line);
  --mecom-paper: var(--white);
  --mecom-cta:   var(--terra);
  --mecom-sale:  var(--terra);
  --mecom-ok:    #3F7A3A;
  --mecom-radius: var(--r-card);
  font-family:var(--font-body);
  color:var(--cacao);
}

/* Headings: the site's condensed title face. */
body .mecom-shell h2,
body .mecom-shell h3{ font-family:var(--font-title); font-weight:700; letter-spacing:0; color:var(--cacao); }
body .mecom-checkout h2{ font-size:1.5rem; }

/* Buttons = .btn */
body .mecom-shell .mecom-btn{
  font-family:var(--font-body);
  text-transform:uppercase; letter-spacing:.13em;
  font-weight:600; font-size:.72rem; line-height:1.2;
  padding:14px 28px; border-radius:var(--r-pill);
  background:var(--cacao); color:var(--cream); border-color:transparent;
  transition:transform .3s var(--ease), box-shadow .3s, background .25s, color .25s;
}
body .mecom-shell .mecom-btn:hover{ background:var(--cacao-deep); color:var(--cream); box-shadow:0 12px 26px rgba(58,36,22,.22); transform:translateY(-2px); }
body .mecom-shell .mecom-btn--primary{ background:var(--terra); color:#fff; box-shadow:0 5px 14px rgba(180,70,47,.16); }
body .mecom-shell .mecom-btn--primary:hover,
body .mecom-shell .mecom-btn--primary:focus{ background:#9C3A25; color:#fff; }
body .mecom-shell .mecom-btn--buy{ background:transparent; color:var(--cacao); box-shadow:inset 0 0 0 1px var(--cacao); }
body .mecom-shell .mecom-btn--buy:hover{ background:var(--cacao); color:var(--cream); }
body .mecom-shell .mecom-btn--muted{ background:var(--cream); color:var(--muted); box-shadow:none; transform:none; }

/* Fields = the site's forms (.qform) */
body .mecom-shell .mecom-field input,
body .mecom-shell .mecom-field textarea,
body .mecom-shell .mecom-field select,
body .mecom-shell .mecom-qty,
body .mecom-shell .mecom-coupon input{
  border:1px solid var(--line); border-radius:12px;
  background:var(--white); color:var(--cacao);
  font-family:var(--font-body); font-size:1rem;
}
body .mecom-shell .mecom-field input:focus,
body .mecom-shell .mecom-field textarea:focus,
body .mecom-shell .mecom-field select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(194,149,58,.15); }
body .mecom-shell .mecom-field label,
body .mecom-shell .mecom-label{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--cacao-soft); }

/* Boxes: white cards on the cream page, like the site's forms. */
body .mecom-checkout__summary,
body .mecom-checkout__fields,
body .mecom-cart .mecom-table,
body .mecom-shell .mecom-bank,
body .mecom-shell .mecom-lookup__result{
  background:var(--white); border:0; border-radius:var(--r-surface); box-shadow:var(--shadow-s);
}
/* The details column was bare on the cream page while the summary beside it
   is a card: give it the same card. The plugin pads only the summary. */
body .mecom-checkout__fields{ padding:28px; align-self:start; }
@media (max-width:640px){ body .mecom-checkout__fields{ padding:20px; } }
body .mecom-cart .mecom-table{ border-collapse:separate; border-spacing:0; overflow:hidden; }
body .mecom-cart .mecom-table th,
body .mecom-cart .mecom-table td{ padding:16px 18px; }
/* Cart layout. The plugin stacks four loose blocks under the table (update
   button + subtotal, coupon, checkout) with no alignment between them. Two rows
   on one grid: the table and its update/subtotal row, then the coupon on the
   left with the checkout button on the right. :has() keeps the empty cart
   (a message and one link) out of the grid. */
body .mecom-cart:has(.mecom-cart__form){
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:24px; align-items:center;
}
body .mecom-cart:has(.mecom-cart__form) > .mecom-cart__form{ grid-column:1 / -1; }
body .mecom-cart .mecom-coupon{ margin:0; }
body .mecom-cart .mecom-cart__go{ margin:0; justify-self:end; }
body .mecom-cart .mecom-cart__foot{ margin-bottom:20px; }
body .mecom-cart .mecom-table__thumb{ width:88px; }
body .mecom-cart .mecom-table__thumb img{ width:56px; height:72px; object-fit:contain; border-radius:8px; }
@media (min-width:721px){
  body .mecom-cart .mecom-table td,
  body .mecom-cart .mecom-table thead th:not(:first-child){ white-space:nowrap; }
  body .mecom-cart .mecom-table td:nth-child(2){ white-space:normal; }
}
body .mecom-cart .mecom-table .mecom-qty{ width:76px; }
@media (max-width:720px){
  body .mecom-cart:has(.mecom-cart__form){ grid-template-columns:minmax(0,1fr); row-gap:16px; }
  body .mecom-cart .mecom-cart__go{ justify-self:stretch; }
  body .mecom-cart .mecom-cart__go .mecom-btn{ width:100%; justify-content:center; }
}
/* Narrow cart: the plugin turns each row into a 72px + 1fr grid but leaves the
   cells to auto-place, so price and total land in the 72px thumb column and
   wrap letter by letter. Same container query as the plugin's; pin each cell. */
@container (max-width: 620px){
  body .mecom-cart .mecom-table tr{ position:relative; grid-template-rows:auto; padding:16px 18px; row-gap:6px; }
  body .mecom-cart .mecom-table td{ padding:0; }
  body .mecom-cart .mecom-table td:nth-child(n+2){ grid-column:2; }
  body .mecom-cart .mecom-table .mecom-table__thumb{ grid-column:1; grid-row:1 / span 4; width:auto; }
  body .mecom-cart .mecom-table td:nth-child(2){ padding-right:40px; }
  body .mecom-cart .mecom-table td:nth-child(6){ position:absolute; top:16px; right:18px; }
}
body .mecom-cart .mecom-table thead th{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }
body .mecom-shell .mecom-choice:has(input:checked){ border-color:var(--cacao); box-shadow:0 0 0 1px var(--cacao) inset; }

/* Toasts carry the site's colours too. */
.mecom-toast{ font-family:var(--font-body); border-radius:var(--r-card); }

/* Prices on cards and the product page: sale price + struck regular price. */
.price del,
.pdp__price del{ margin-left:8px; font-size:.8em; font-weight:400; color:var(--muted); }

/* Product page: the buy form keeps the prototype's .pdp__buy row. */
.pdp__buy .is-disabled{ opacity:.6; cursor:not-allowed; }
.pdp__variants{ flex-basis:100%; }

/* Shop pages (cart, checkout, order, account) are wider than text pages. */
.shop-page{ max-width:1180px; margin-inline:auto; }