/*
Theme Name: MAÈ
Theme URI: https://livingmae.com
Author: MAÈ
Description: Custom "slow morning" WooCommerce theme for MAÈ. Server-rendered, SEO-friendly. Jost + Inter. Payment integration deferred to a later phase.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: mae
Tags: e-commerce, custom-menu, featured-images, translation-ready, full-width-template
*/

/* -----------------------------------------------------------------
   The full design system lives in assets/css/site.css (enqueued
   separately). Keep this file to the header block + a few resets.
------------------------------------------------------------------ */

html.mae-lock,
html.mae-lock body { overflow: hidden; }

/* Screen-reader helper (WordPress core convention) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: #fbf8f2;
  clip: auto !important;
  clip-path: none;
  color: #26221c;
  display: block;
  height: auto;
  left: 6px;
  padding: 10px 16px;
  top: 6px;
  width: auto;
  z-index: 100000;
}

/* Custom logo sits inside the wordmark slot */
.hdr__brand .custom-logo { display: inline-block; max-height: 30px; width: auto; }

/* Keep WordPress admin bar from covering the fixed header */
body.admin-bar .announce { top: 32px; }
body.admin-bar .hdr { top: 32px; }
body.admin-bar.has-announce .hdr { top: 66px; }
@media (max-width: 782px) {
  body.admin-bar .announce { top: 46px; }
  body.admin-bar .hdr { top: 46px; }
  body.admin-bar.has-announce .hdr { top: 80px; }
}

/* -----------------------------------------------------------------
   Cart drawer bridge — let the LIVE WooCommerce mini-cart flow into
   the ported .drawer chrome. The full drawer look lives in
   assets/css/site.css; these rules only reconcile WooCommerce's own
   mini-cart markup with it.
------------------------------------------------------------------ */
.drawer .widget_shopping_cart_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.drawer .widget_shopping_cart_content .drawer__body { flex: 1; }

/* Tame WooCommerce's default a.remove so the prototype .c-item__rm wins. */
.c-item .c-item__rm {
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 1.2;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--taupe);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--clay-line);
  border-radius: 0;
  text-align: left;
  text-decoration: none;
}
.c-item .c-item__rm:hover { color: var(--ink); background: none; }
.c-item__d h4 a:hover { color: inherit; opacity: .65; }

/* Cross-sell "Add" rendered as a WooCommerce button link. */
.drawer__cross .cr .button {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 8px 12px;
  text-decoration: none;
  transition: background .25s, color .25s;
}
.drawer__cross .cr .button:hover { background: var(--ink); color: var(--milk); }
.drawer__cross .cr .button.loading { opacity: .6; pointer-events: none; }
.drawer__cross .cr .button.added { display: inline-block; }
/* Hide WooCommerce's "View cart" link that trails an added AJAX button. */
.drawer__cross .cr .added_to_cart { display: none; }

/* -----------------------------------------------------------------
   Shop archive — render WooCommerce's product loop as the prototype
   .p-grid (the loop wrapper gains .p-grid via mae_product_loop_start).
   These selectors out-specify WooCommerce's default ul.products.
------------------------------------------------------------------ */
ul.products.p-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 30px) clamp(12px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.products.p-grid::before,
ul.products.p-grid::after { content: none; display: none; }
ul.products.p-grid li.product {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
}
@media (max-width: 1040px) {
  ul.products.p-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  ul.products.p-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
}

/* WooCommerce result-count + ordering, in the MAÈ voice. */
.woocommerce-result-count {
  font-size: 12.5px;
  color: var(--taupe);
  letter-spacing: .02em;
  margin: 0 0 clamp(20px, 3vw, 34px);
}
.woocommerce-ordering select {
  background: var(--milk);
  border: 1px solid var(--clay-line);
  border-radius: 1px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
}