/* ===========================================================================
   Mercado — WooCommerce surfaces: shop, product page, notices.

   Cart, checkout and account are in commerce.css. WooCommerce's own
   stylesheets are not loaded (inc/enqueue.php), so everything WooCommerce
   renders on these pages is styled here.

   Presentation only: no field is moved out of a form, no checkout step is
   altered, the MyFatoorah gateway markup is untouched.
   =========================================================================== */

/* ---- archive -------------------------------------------------------------- */
.shop-layout { display: grid; gap: var(--s7); padding-block: var(--s8); }

@media (min-width: 1024px) {
  .shop-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s8); align-items: start; }
  .shop-layout__aside { position: sticky; inset-block-start: calc(var(--header-h) + var(--s5)); }
}

.shop-toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding-block-end: var(--s4);
  margin-block-end: var(--s7);
  border-block-end: 1px solid var(--line);
}

.woocommerce-result-count { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }

.woocommerce-ordering select, .shop-layout select {
  padding: var(--s2) var(--s4);
  min-height: 44px;
  background: var(--paper);
  border: 1px solid var(--line-field);
  border-radius: var(--r);
  font-size: var(--t-sm);
}

ul.products {
  display: grid;
  gap: var(--s8) var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.products::before, ul.products::after { content: none; }

ul.products li.product {
  inline-size: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

/* Pagination as plain numerals on a rule. */
.woocommerce-pagination { margin-block-start: var(--s8); }

.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: center;
  border: 0;
}

.woocommerce-pagination li { border: 0; }

.woocommerce-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-inline-size: 40px;
  min-block-size: 40px;
  font-size: var(--t-sm);
  color: var(--ink-3);
  border-block-end: 1px solid transparent;
}

.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers:hover { color: var(--ink); border-block-end-color: var(--ink); }

/* ---- single product ------------------------------------------------------- */
.product-layout { display: grid; gap: var(--s7); padding-block: var(--s8); }

@media (min-width: 900px) {
  .product-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s9); align-items: start; }
  /* The purchase panel stays with the shopper as the page scrolls. */
  .product-layout__buy { position: sticky; inset-block-start: calc(var(--header-h) + var(--s5)); }
}

/* WooCommerce floats images and summary to 48% each; inside this grid that
   nests a half-width box in an already-half-width column. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.product-layout .woocommerce-product-gallery,
.product-layout__buy {
  float: none !important;
  width: 100% !important;
  inline-size: 100% !important;
  margin: 0 !important;
}

.product-layout__gallery { background: var(--paper); position: relative; }
.woocommerce-product-gallery__wrapper { margin: 0; }

.woocommerce-product-gallery__image img {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 7%;
}

.flex-control-thumbs {
  display: flex;
  gap: var(--s3);
  padding: var(--s4);
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.flex-control-thumbs::-webkit-scrollbar { display: none; }
.flex-control-thumbs li { flex: 0 0 64px; list-style: none; }

.flex-control-thumbs img {
  inline-size: 64px;
  block-size: 64px;
  object-fit: contain;
  padding: var(--s2);
  background: var(--paper);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--d-fast) var(--ease);
}

.flex-control-thumbs img:hover, .flex-control-thumbs img.flex-active { opacity: 1; }

.product-layout__buy .product_title {
  font-size: var(--t-h2);
  line-height: var(--lh-head);
  margin-block: var(--s2) var(--s5);
  max-inline-size: 20ch;
}

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

.product-layout__buy .price {
  font-size: var(--t-h3);
  font-weight: 700;
  margin-block-end: var(--s5);
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
}

.product-layout__buy .price del { font-size: var(--t-body); color: var(--ink-3); font-weight: 400; opacity: 1; }
.product-layout__buy .price ins { text-decoration: none; background: none; }

.product-layout__buy .stock { font-size: var(--t-sm); margin-block: var(--s3); }
.product-layout__buy .stock.in-stock { color: var(--ink-2); }
.product-layout__buy .stock.out-of-stock { color: var(--ink-3); }

.woocommerce-product-details__short-description { color: var(--ink-2); font-size: var(--t-sm); margin-block: var(--s5); }

.installment-line {
  display: block;
  padding: var(--s4) 0;
  border-block: 1px solid var(--line);
  font-size: var(--t-sm);
  margin-block: var(--s5);
}

/* Add to cart */
.product-layout__buy form.cart { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-block: var(--s5); }

/* The stepper itself is in components.css; here it only matches the height
   of the add-to-cart pill beside it. */
.product-layout__buy .quantity input.qty,
.product-layout__buy .quantity .qty-step { min-block-size: 52px; }

.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.product-layout__buy .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--s3) var(--s7);
  background: var(--brand);
  color: var(--on-brand);
  border: 1px solid var(--brand);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--t-sm);
  transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

.woocommerce button.button.alt:hover,
.product-layout__buy .single_add_to_cart_button:hover {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}

.woocommerce .button, .woocommerce a.button, .woocommerce input.button, .woocommerce button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: var(--s3) var(--s5);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--t-sm);
  line-height: 1;
}

.woocommerce .button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.variations { inline-size: 100%; border-collapse: collapse; }
.variations th, .variations td { padding-block: var(--s2); text-align: start; }
.variations label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.variations select { inline-size: 100%; min-height: 48px; padding: var(--s3) var(--s4); border: 1px solid var(--line-field); background: var(--paper); }

.product_meta { margin-block-start: var(--s5); padding-block-start: var(--s5); border-block-start: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-3); display: grid; gap: var(--s2); }
.product_meta a { color: var(--ink-2); }

/* Sale flash */
.woocommerce span.onsale {
  position: absolute;
  inset-block-start: var(--s4);
  inset-inline-start: var(--s4);
  inset-inline-end: auto;
  min-inline-size: 0;
  min-block-size: 0;
  padding: var(--s1) var(--s3);
  border-radius: var(--r);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-micro);
  font-weight: 700;
  line-height: 1.8;
  margin: 0;
  z-index: 2;
}

/* Tabs */
.woocommerce-tabs { margin-block-start: var(--s9); }

.woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--s6);
  flex-wrap: wrap;
  margin: 0 0 var(--s6);
  padding: 0;
  border-block-end: 1px solid var(--line);
}

.woocommerce-tabs ul.tabs::before { content: none; }
.woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { content: none; }

.woocommerce-tabs ul.tabs li a {
  display: block;
  padding-block: var(--s3);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ink-3);
  border-block-end: 1px solid transparent;
  margin-block-end: -1px;
}

.woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li a:hover { color: var(--ink); border-block-end-color: var(--ink); }

.woocommerce-Tabs-panel { color: var(--ink-2); font-size: var(--t-sm); max-inline-size: var(--max-text); }
.woocommerce-Tabs-panel h2 { font-size: var(--t-h3); color: var(--ink); margin-block-end: var(--s4); }

.woocommerce-product-attributes { inline-size: 100%; border-collapse: collapse; }

.woocommerce-product-attributes-item th, .woocommerce-product-attributes-item td {
  padding: var(--s4) 0;
  border-block-end: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

.woocommerce-product-attributes-item th {
  inline-size: 34%;
  font-size: var(--t-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

.woocommerce-product-attributes-item td { color: var(--ink); }
.woocommerce-product-attributes-item td p { margin: 0; }

/* Cart, checkout and account live in commerce.css, loaded only on those pages. */

/* ---- what WooCommerce's own stylesheet used to supply ---------------------
   Its three stylesheets are switched off (inc/enqueue.php). These are the
   few behaviours from them that the theme's markup still relies on.
   --------------------------------------------------------------------------- */

/* Gallery zoom trigger: a quiet magnifier in the corner of the photo. */
.woocommerce-product-gallery { position: relative; }

.woocommerce-product-gallery__trigger {
  position: absolute;
  inset-block-start: var(--s4);
  inset-inline-end: var(--s4);
  z-index: 3;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 0;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}

.woocommerce-product-gallery__trigger:hover { color: var(--ink); border-color: var(--ink); }

.woocommerce-product-gallery__trigger::before {
  content: "";
  inline-size: 18px;
  block-size: 18px;
  background: currentColor;
  /* Mask coverage, not a colour: the glyph takes currentColor. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce-product-gallery__trigger span,
.woocommerce-product-gallery__trigger img { display: none; }

/* Star ratings, drawn with the ★ character rather than WooCommerce's icon
   font. The filled layer's width is set inline by WooCommerce. */
.star-rating {
  position: relative;
  display: inline-block;
  inline-size: 5.4em;
  block-size: 1.1em;
  overflow: hidden;
  font-size: var(--t-sm);
  line-height: 1.1;
  letter-spacing: 0.08em;
}

.star-rating::before { content: "★★★★★"; position: absolute; inset-inline-start: 0; color: var(--line-2); }
.star-rating span { position: absolute; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; padding-block-start: 1.5em; }
.star-rating span::before { content: "★★★★★"; position: absolute; inset-block-start: 0; inset-inline-start: 0; color: var(--ink); }

p.stars { display: flex; gap: var(--s1); margin-block: var(--s2) var(--s4); }
p.stars span { display: flex; gap: var(--s1); }

p.stars a {
  inline-size: 1.4em;
  block-size: 1.4em;
  overflow: hidden;
  font-size: 1.3rem;
  line-height: 1.4;
  color: transparent;
  position: relative;
}

p.stars a::before { content: "★"; position: absolute; inset: 0; color: var(--line-2); text-align: center; }
p.stars:hover a::before, p.stars.selected a::before { color: var(--ink); }
p.stars a:hover ~ a::before, p.stars.selected a.active ~ a::before { color: var(--line-2); }

.woocommerce .blockUI.blockOverlay { cursor: progress; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  margin-block-end: var(--s6);
  border: 1px solid var(--line);
  border-inline-start-width: 2px;
  border-inline-start-color: var(--ink);
  background: var(--paper-2);
  list-style: none;
  font-size: var(--t-sm);
}

.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }
.woocommerce-message .button, .woocommerce-info .button { margin-inline-start: auto; }

.related.products, .up-sells.products { margin-block-start: var(--s9); }
.related.products > h2, .up-sells.products > h2 { font-size: var(--t-h2); margin-block-end: var(--s7); }

/* The wishlist plugin's button, reduced to a text link. */
.yith-wcwl-add-to-wishlist { margin: 0; }
.yith-wcwl-add-to-wishlist a { font-size: var(--t-micro); color: var(--ink-3); }
.yith-wcwl-add-to-wishlist a:hover { color: var(--ink); }
.yith-wcwl-add-to-wishlist .feedback { display: none; }

/* ---- long-form content ---------------------------------------------------- */
.prose { color: var(--ink-2); max-inline-size: var(--max-text); }
.prose > * + * { margin-block-start: var(--s4); }
.prose h2, .prose h3 { color: var(--ink); margin-block-start: var(--s7); margin-block-end: var(--s3); }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: disc; padding-inline-start: var(--s5); display: grid; gap: var(--s2); }
.prose ol { list-style: decimal; padding-inline-start: var(--s5); display: grid; gap: var(--s2); }
.prose img { margin-inline: auto; }
.prose table { inline-size: 100%; border-collapse: collapse; font-size: var(--t-sm); display: block; overflow-x: auto; }
.prose th, .prose td { padding: var(--s3); border: 1px solid var(--line); text-align: start; }

/* Legacy page builders still appear inside old page content. */
.prose .elementor-section, .prose .elementor-container, .prose .vc_row {
  max-inline-size: 100% !important;
  margin-inline: 0 !important;
}

/* ---- shop filters ---------------------------------------------------------
   Desktop: a quiet column of links beside the grid.
   Mobile:  the same panel as a bottom sheet, opened from the toolbar.
   --------------------------------------------------------------------------- */
.shop-toolbar__controls {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  min-inline-size: 0;
}

/* The controls row holds a button and the ordering <select>. A <select> has an
   intrinsic min-content width wider than its box, so without this the pair
   pushed the document 24px past a 390px viewport. */
.shop-toolbar__controls > *,
.woocommerce-ordering select { min-inline-size: 0; max-inline-size: 100%; }

.filters__panel { display: grid; gap: var(--s7); }

.filters__head {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding-block-end: var(--s4);
  border-block-end: 1px solid var(--line);
}

.filters__title { font-size: var(--t-h3); font-weight: 600; }

.filters__label {
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: var(--s4);
}

.filters__list { display: grid; }

.filters__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-block: var(--s3);
  border-block-end: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-2);
  transition: color var(--d-fast) var(--ease), padding-inline-start var(--d-fast) var(--ease);
}

.filters__link:hover { color: var(--ink); padding-inline-start: var(--s2); }
.filters__link.is-on { color: var(--ink); font-weight: 600; }
.filters__count { font-size: var(--t-micro); color: var(--ink-3); }
.filters__clear { margin: 0; }

/* The filter button only exists where the panel is a sheet. */
.btn--filters { display: none; }

@media (max-width: 1023px) {
  .btn--filters { display: inline-flex; }

  .shop-layout__aside {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    align-content: end;
    background: rgb(17 17 17 / 0.3);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--d) var(--ease), visibility var(--d);
  }

  .shop-layout__aside.is-open { visibility: visible; opacity: 1; }

  .filters__head { display: flex; }

  .filters__panel {
    max-block-size: 82svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s5) var(--gutter) calc(var(--s7) + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    transform: translateY(100%);
    transition: transform var(--d-slow) var(--ease-out);
  }

  .shop-layout__aside.is-open .filters__panel { transform: none; }
}

/* ---- product page ---------------------------------------------------------
   Above the fold: product, price, finish, add-to-cart. The figures and the
   full spec sheet follow below it.
   --------------------------------------------------------------------------- */
.product-crumbs { padding-block-start: calc(var(--header-h) + var(--s6)); }

/* Finish picker — sibling products, not variations (see inc/woocommerce.php). */
.finishes { margin-block: var(--s6); }

.finishes__label {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-block-end: var(--s4);
}

.finishes__current { font-weight: 500; text-transform: none; color: var(--ink); font-size: var(--t-sm); }

.finishes__list { display: flex; flex-wrap: wrap; gap: var(--s3); }

.finish {
  display: block;
  inline-size: 58px;
  block-size: 58px;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease-out);
}

.finish img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 6%; }
.finish:hover { border-color: var(--line-2); transform: translateY(-2px); }
.finish.is-on { border-color: var(--ink); border-width: 2px; }

/* Headline figures, on a rule under the purchase panel. */
.product-figures { padding-block: var(--s8); border-block-start: 1px solid var(--line); }

.product-figures .specs {
  margin: 0;
  padding: 0;
  border: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--s6);
}

/* Full specification sheet: a definition list on rules, not a table. */
.specsheet { margin: 0; }

.specsheet__row {
  display: grid;
  gap: var(--s2);
  padding-block: var(--s4);
  border-block-end: 1px solid var(--line);
}

@media (min-width: 760px) {
  .specsheet__row { grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr); gap: var(--s5); align-items: baseline; }
}

.specsheet dt {
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.specsheet dd { margin: 0; font-size: var(--t-sm); color: var(--ink); line-height: 1.7; }