/* ============================================================
   WordPress / WooCommerce adaptations.

   style.css is a verbatim copy of the static site's stylesheet and must not
   be edited — every adjustment needed to make WordPress markup match that
   design lives here, so the two can never silently drift apart.
   ============================================================ */

/* ------------------------------------------------------------------
   1. Navigation became real links

   The static site navigated by toggling divs, so every nav item was a
   <button>. WordPress needs crawlable <a href> links, but the original CSS
   targets `button` specifically. These mirror those rules onto anchors
   rather than broadening the selectors in style.css.
   ------------------------------------------------------------------ */

.nav-links a{
  font-size:13px;letter-spacing:0.18em;text-transform:uppercase;position:relative;padding-bottom:5px;color:var(--on-dark);
  display:inline-block;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--on-dark);transition:width .3s ease;
}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;}

.mobile-menu a{
  display:block;
  padding:20px 24px;border-bottom:1px solid var(--line-soft);text-align:left;font-size:18px;
}

.mega-categories a{
  display:block;width:100%;text-align:left;white-space:nowrap;
  font-family:'EB Garamond',serif;font-size:13px;letter-spacing:0.04em;text-transform:uppercase;color:var(--ink);transition:color .2s ease;
}
.mega-categories a:hover{color:var(--accent);}
.mega-categories li.mega-soon a{opacity:0.5;pointer-events:none;cursor:default;}
.mega-categories li.mega-soon a:hover{color:var(--ink);}

.plp-breadcrumb a{color:var(--ink-soft);transition:color .2s ease;}
.plp-breadcrumb a:hover{color:var(--ink);}

.pdp-crumb a:hover{color:var(--ink);text-decoration:underline;}

.maison-intro-list a{font-family:'EB Garamond',serif;font-size:15px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink);transition:color .2s ease;}
.maison-intro-list a:hover{color:var(--accent);}

/* Anchors used as full-bleed image links (mega menu visuals, product cards). */
a.mega-visual,a.mega-visual-main{display:block;width:100%;height:100%;}

/* ------------------------------------------------------------------
   2. Longer product names

   The static design carried short names ("Elegant Tube Neck Mini Dress").
   WooCommerce's are SEO-length — up to 85 characters — which overflows the
   card and pushes the price row out of alignment across a 3-up grid.
   Clamping to two lines keeps every card the same height; the full name is
   still on the product page.
   ------------------------------------------------------------------ */

.product-card .product-info h4{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;      /* reserve both lines so 1-line names don't jump the row */
}

/* The product page shows the name in full, but 85 characters at the original
   display size overpowers the layout — ease it down without changing the face. */
.pdp-info h1{
  font-size:clamp(26px,2.4vw,34px);
  line-height:1.2;
}

/* ------------------------------------------------------------------
   3. WooCommerce descriptions are structured content

   The static PDP had a single paragraph plus a fabric note. Woo's
   descriptions run ~1,050 characters with "Key Features:" headings and
   bullet lists, so the description block needs to style lists it never had.
   ------------------------------------------------------------------ */

.pdp-desc-rich{font-size:16px;line-height:1.72;color:var(--ink-soft);}
.pdp-desc-rich > * + *{margin-top:14px;}
.pdp-desc-rich strong,.pdp-desc-rich b{color:var(--ink);font-weight:500;}
.pdp-desc-rich ul,.pdp-desc-rich ol{padding-left:0;margin-top:12px;}
.pdp-desc-rich ul li{
  position:relative;padding-left:18px;margin-top:7px;list-style:none;
}
.pdp-desc-rich ul li::before{
  content:"";position:absolute;left:0;top:0.62em;
  width:5px;height:1px;background:var(--accent);
}
.pdp-desc-rich ol{padding-left:20px;}
.pdp-desc-rich ol li{margin-top:7px;list-style:decimal;}
.pdp-desc-rich p:empty{display:none;}

/* ------------------------------------------------------------------
   4. WooCommerce form controls

   Woo's own stylesheets are dequeued in functions.php, so its variation
   dropdowns, quantity inputs and notices arrive unstyled. These pull them
   into the site's form language (hairline underline, no boxes).
   ------------------------------------------------------------------ */

.variations{width:100%;}
.variations tr{display:block;margin-bottom:20px;}
.variations th,.variations td{display:block;text-align:left;padding:0;}
.variations th label{
  font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:9px;display:block;
}
.variations select{
  width:100%;background:none;border:none;border-bottom:1px solid var(--line);
  padding:9px 2px;font-family:'EB Garamond',serif;font-size:16px;color:var(--ink);
  border-radius:0;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B655E' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;
}
.variations select:focus{outline:none;border-color:var(--accent);}

/* Every product has exactly one colour, so the colour dropdown is a dead
   control. The swatch dot already communicates it, as in the original design. */
.variations tr.attribute-color,
.variations tr.attribute-pa_color{display:none;}

.reset_variations{
  font-size:12.5px;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;
}
.woocommerce-variation-price{margin:18px 0;}
.woocommerce-variation-availability p{font-size:13.5px;color:var(--ink-soft);}

/* Out-of-stock and unavailable combinations, quietly. */
.woocommerce-variation.woocommerce-variation-is-unavailable p{
  font-size:14px;color:#8E3529;
}

/* ------------------------------------------------------------------
   5. Notices

   Woo's error/success messages appear on cart, checkout and product pages.
   Matches the checkout error styling already in the design.
   ------------------------------------------------------------------ */

.woocommerce-notices-wrapper:empty{display:none;}
.woocommerce-message,.woocommerce-info,.woocommerce-error,
ul.woocommerce-error li,.wc-block-components-notice-banner{
  list-style:none;
  padding:13px 16px;font-size:14.5px;margin-bottom:20px;
  background:rgba(168,150,119,0.09);border-left:2px solid var(--accent);color:var(--ink);
}
.woocommerce-error,ul.woocommerce-error li{
  background:rgba(180,72,60,0.07);border-left-color:#B4483C;color:#8E3529;
}
.woocommerce-message a,.woocommerce-info a,.woocommerce-error a{
  text-decoration:underline;text-underline-offset:3px;
}

/* ------------------------------------------------------------------
   6. Accessibility / housekeeping
   ------------------------------------------------------------------ */

.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
:where(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* WordPress admin bar shifts the fixed header down when logged in. */
body.admin-bar .site-header-sticky{top:32px;}
@media screen and (max-width:782px){
  body.admin-bar .site-header-sticky{top:46px;}
}

/* ------------------------------------------------------------------
   7. Size buttons for variable products

   The buttons are painted by main.js from Woo's hidden <select>. A
   combination Woo can't sell is struck through rather than removed, so the
   size run reads consistently from one product to the next.
   ------------------------------------------------------------------ */

.pdp-size-btn.me-size-unavailable{
  opacity:0.35;cursor:not-allowed;position:relative;
}
.pdp-size-btn.me-size-unavailable::after{
  content:"";position:absolute;left:12%;right:12%;top:50%;
  height:1px;background:currentColor;
}
.pdp-size-btn.me-size-unavailable:hover{
  border-color:var(--line);background:none;color:inherit;
}

/* Woo prints its own variation price above the button; the design already
   shows price at the top, so keep this as the quiet per-variation line. */
.single_variation_wrap .woocommerce-variation-price .price{
  font-size:19px;color:var(--ink);
}

/* Add-to-cart stays disabled until a size is chosen. */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button.wc-variation-selection-needed{
  opacity:0.45;cursor:not-allowed;
}
.single_add_to_cart_button.disabled:hover,
.single_add_to_cart_button.wc-variation-selection-needed:hover{
  background:var(--ink);
}

/* The quantity stepper keeps the design's layout; the real number input is
   visually hidden inside it (see woocommerce/global/quantity-input.php). */
.pdp-qty.me-qty{position:relative;}

/* ------------------------------------------------------------------
   8. Checkout

   Woo's billing/shipping field markup is NOT overridden — it's generated from
   locale rules that decide which fields exist per country and whether state is
   a dropdown or a text box. Reimplementing that to chase pixels would break
   international addresses. So instead: make Woo's .form-row look exactly like
   the design's .checkout-field.
   ------------------------------------------------------------------ */

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading{
  font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:20px;font-weight:400;
}
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields{margin-bottom:44px;}

/* The design's two-column field grid. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper{
  display:grid;grid-template-columns:1fr 1fr;gap:22px 18px;
}
@media(max-width:900px){
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-additional-fields__field-wrapper{grid-template-columns:1fr;}
}

.form-row{margin:0;padding:0;}
/* Woo's own width classes decide which fields span the full row. */
.form-row.form-row-wide,
.form-row.notes,
.form-row#billing_address_1_field,
.form-row#billing_address_2_field,
.form-row#shipping_address_1_field,
.form-row#shipping_address_2_field{grid-column:1/3;}
@media(max-width:900px){
  .form-row.form-row-wide,.form-row.notes,
  .form-row[id$="address_1_field"],.form-row[id$="address_2_field"]{grid-column:1;}
}

.form-row label{
  display:block;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:9px;
}
.form-row label .required{color:var(--accent);text-decoration:none;border:0;}
.form-row .optional{font-size:11px;text-transform:none;letter-spacing:0;}

.form-row input.input-text,
.form-row textarea,
.form-row select,
.form-row .select2-selection{
  width:100%;background:none;border:none;border-bottom:1px solid var(--line);
  padding:9px 2px;font-family:'EB Garamond',serif;font-size:16px;color:var(--ink);
  border-radius:0;box-shadow:none;
}
.form-row textarea{min-height:88px;resize:vertical;}
.form-row input.input-text:focus,
.form-row textarea:focus,
.form-row select:focus{outline:none;border-color:var(--accent);}
.form-row.woocommerce-invalid input.input-text,
.form-row.woocommerce-invalid select{border-bottom-color:#B4483C;}

/* select2 powers the country/state pickers. Strip its chrome down to a line. */
.select2-container--default .select2-selection--single{
  background:none;border:none;border-bottom:1px solid var(--line);border-radius:0;height:auto;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:9px 2px;line-height:1.4;font-family:'EB Garamond',serif;font-size:16px;color:var(--ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:6px;right:0;}
.select2-dropdown{
  border:1px solid var(--line);border-radius:0;background:var(--bg);
  font-family:'EB Garamond',serif;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--bg-tile);color:var(--ink);
}

/* Login / coupon toggles that Woo prints above the form. */
.woocommerce-form-login,
.checkout_coupon{
  border:1px solid var(--line);padding:24px;margin-bottom:26px;
}
.checkout_coupon .form-row{display:block;margin-bottom:14px;}

/* Payment methods list. */
.woocommerce-checkout-payment ul.wc_payment_methods{
  list-style:none;margin:0 0 24px;padding:0;
}
.woocommerce-checkout-payment ul.wc_payment_methods li{
  border-bottom:1px solid var(--line-soft);padding:16px 0;
}
.woocommerce-checkout-payment ul.wc_payment_methods li:last-child{border-bottom:0;}
.woocommerce-checkout-payment label{
  font-size:15.5px;letter-spacing:0;text-transform:none;color:var(--ink);
  cursor:pointer;display:inline-flex;align-items:center;gap:10px;margin:0;
}
.woocommerce-checkout-payment .payment_box{
  padding:14px 0 0;font-size:14.5px;color:var(--ink-soft);background:none;
}
.woocommerce-checkout-payment .payment_box p:last-child{margin-bottom:0;}
.woocommerce-checkout-payment img{display:inline-block;width:auto;max-height:24px;}

/* Place-order button reuses the design's .place-order-btn look. */
#place_order,
.woocommerce-checkout .button.alt{
  width:100%;text-align:center;padding:17px;background:var(--ink);color:var(--on-dark);
  margin-top:26px;font-size:14.5px;letter-spacing:0.08em;text-transform:uppercase;
  border:none;border-radius:0;transition:background .25s ease;cursor:pointer;
  font-family:'EB Garamond',serif;
}
#place_order:hover,.woocommerce-checkout .button.alt:hover{background:var(--accent);}
#place_order:disabled{opacity:0.5;cursor:default;}

.woocommerce-terms-and-conditions-wrapper{margin-top:22px;font-size:14px;color:var(--ink-soft);}
.woocommerce-privacy-policy-text{font-size:13px;color:var(--ink-soft);}

/* The order summary table keeps <table> for Woo's AJAX refresh, but reads as
   the design's stacked rows. */
.me-review-table{width:100%;border-collapse:collapse;}
.me-review-table tbody tr,
.me-review-table tfoot tr{display:block;}
.me-review-table td{display:block;padding:0;border:0;}
.me-review-table .checkout-line{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);}
.me-review-table tfoot td{padding-top:0;}

/* Woo's shipping rows arrive as <tr><th>/<td>; flatten them into the
   design's label/value row. */
.checkout-totals .woocommerce-shipping-totals{display:flex;justify-content:space-between;font-size:15px;padding:6px 0;}
.checkout-totals .woocommerce-shipping-totals th{font-weight:400;text-align:left;}
.checkout-totals .woocommerce-shipping-totals td{text-align:right;}
.checkout-totals ul#shipping_method{list-style:none;margin:0;padding:0;}
.checkout-totals ul#shipping_method li{font-size:14.5px;padding:2px 0;}
.checkout-totals .includes_tax{font-size:12.5px;color:var(--ink-soft);}

/* Cart page — not in the original design (the drawer replaced it), so give it
   the same field/type language rather than leaving it unstyled. */
.woocommerce-cart-form table.shop_table{width:100%;border-collapse:collapse;}
.woocommerce-cart-form table.shop_table th{
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:400;text-align:left;padding:0 0 14px;border-bottom:1px solid var(--line);
}
.woocommerce-cart-form table.shop_table td{padding:20px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
.woocommerce-cart-form img{width:70px;height:auto;}
.cart_totals table{width:100%;}
.cart_totals th{text-align:left;font-weight:400;padding:8px 0;}
.cart_totals td{text-align:right;padding:8px 0;}

/* ------------------------------------------------------------------
   9. CRITICAL: body_class() collides with the design's .page class

   The static site used `.page` for its SPA view divs, styled
   `.page{display:none}` with `.page.active` revealing one at a time.

   WordPress's body_class() outputs a bare `page` class on the <body> of every
   WordPress Page — so that rule matched the body itself and set the entire
   document to display:none. Every Page (About, FAQ, Contact, Muse Rewards,
   Cart, Checkout) rendered as a blank white screen.

   Scoping the reset to `body.page` beats the bare `.page` on specificity
   (0,0,1,1 vs 0,0,1,0) without touching style.css. The padding reset matters
   too: .page carries padding-top:var(--header-h), which on the body would
   double the header offset.
   ------------------------------------------------------------------ */

body.page{
  display:block;
  padding-top:0;
}

/* Same reasoning for any other bare body_class value that could collide with a
   future design class. Cheap insurance, no effect unless a collision exists. */
body.blog,body.home,body.archive,body.search,body.single,body.attachment{
  display:block;
}

/* ------------------------------------------------------------------
   10. Posts without a featured image

   The design's card always leads with a visual. A post with no featured image
   would otherwise collapse to bare text and break the grid's alignment, so it
   gets a quiet tile at the same aspect ratio instead.
   ------------------------------------------------------------------ */

.me-visual-placeholder{
  width:100%;height:100%;
  background:var(--bg-tile);
  position:relative;
}
.me-visual-placeholder::after{
  content:"";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34px;height:1px;background:var(--line);
}