/* =========================================================================
   HolySlug — WooCommerce visual layer
   Restyles WooCommerce's native templates (archive, single product, cart,
   checkout, price, stock, add-to-cart) to match the dark / carbon / gold
   design system WITHOUT overriding WooCommerce's PHP templates.
   This means price, stock status, and images stay 100% editable from
   WooCommerce admin — only the paint changes here.
   ========================================================================= */

/* ---- Global WC typography / color reset ---- */
.woocommerce, .woocommerce-page {
  color: var(--white);
  font-family: var(--ff-body);
}
.woocommerce ul.products, .woocommerce-page ul.products { margin: 0; }

/* ---- Price ---- */
.woocommerce .price,
.woocommerce ul.products li.product .price {
  font-family: var(--ff-mono);
  color: var(--gold);
  font-size: 15px;
  letter-spacing: .03em;
}
.woocommerce .price ins { color: var(--gold); text-decoration: none; font-weight: 600; }
.woocommerce .price del { color: var(--titanium); opacity: .6; }

/* Single product page: the price should read as a prominent, commanding
   element -- distinct from the small product-card price tag above -- to
   match a precision-instrument's positioning rather than a commodity
   listing's. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 28px;
  font-weight: 500;
  display: block;
  margin: 20px 0 28px;
}

/* ---- Stock status ---- */
.woocommerce p.stock,
.holyslug-stock-badge {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  color: var(--gold);
  display: inline-block;
}
.woocommerce p.stock.out-of-stock,
.holyslug-stock-badge.out-of-stock {
  color: var(--titanium);
  border-color: var(--line);
}

/* ---- Buttons (add to cart, checkout, etc.) ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.holyslug-btn-add-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 16px 30px;
  background: var(--gold);
  color: var(--black) !important;
  border-radius: 0;
  border: none;
  transition: all .35s cubic-bezier(.2,.7,.3,1);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -8px rgba(212,175,55,.5);
}
.woocommerce a.button.alt { background: var(--gold); }

/* Single product page: the primary Add to Cart action deserves extra
   visual weight as the single most important interaction on the page. */
.woocommerce div.product .single_add_to_cart_button {
  padding: 20px 44px;
  font-size: 14px;
  width: 100%;
  max-width: 360px;
  justify-content: center;
}
@media(max-width:600px){
  .woocommerce div.product .single_add_to_cart_button{max-width:100%;}
}
.woocommerce a.added_to_cart {
  color: var(--gold) !important;
  font-family: var(--ff-mono);
  font-size: 12px;
  margin-top: 10px;
  display: inline-block;
}

/* ---- Quantity input ---- */
.woocommerce .quantity .qty {
  background: var(--carbon-2);
  border: 1px solid var(--line);
  color: var(--white);
  font-family: var(--ff-mono);
  height: 52px;
  width: 70px;
  text-align: center;
}

/* ---- Product single page layout ---- */
.woocommerce div.product {
  padding-top: 60px;
}
.woocommerce div.product .product_title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(30px,3.4vw,44px);
  letter-spacing: -.01em;
  margin-bottom: 8px;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--titanium-light);
  font-weight: 300;
  line-height: 1.75;
  font-size: 15.5px;
}
.woocommerce div.product div.images {
  background: linear-gradient(160deg,#1c1d1f 0%, #0e0f10 100%);
  border: 1px solid var(--line);
}
.woocommerce div.product div.images img { mix-blend-mode: normal; }
.woocommerce div.product .woocommerce-tabs {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding-top: 40px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--line);
  border-radius: 0;
  margin-right: 8px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-color: var(--gold); color: var(--gold); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: inherit; }
.woocommerce table.shop_attributes {
  border: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 13px;
}
.woocommerce table.shop_attributes th {
  background: var(--carbon-2);
  color: var(--titanium);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 11px;
}
.woocommerce table.shop_attributes td { color: var(--titanium-light); background: var(--black); }
.woocommerce table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) th { background: rgba(255,255,255,0.02); }

/* ---- Archive / shop grid fallback (non-Elementor pages) ---- */
.woocommerce ul.products li.product {
  background: var(--carbon-2);
  border: 1px solid var(--line);
  padding: 0;
  margin: 0 0 2px 0;
  transition: background .4s ease;
}
.woocommerce ul.products li.product:hover { background: var(--carbon); }
.woocommerce ul.products li.product img {
  border-radius: 0;
  margin-bottom: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 600;
  padding: 24px 24px 4px;
  color: var(--white);
}

/* ---- Cart / Checkout tables ---- */
.woocommerce table.shop_table {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--black);
}
.woocommerce table.shop_table th { color: var(--gold); font-family: var(--ff-mono); font-size: 11px; letter-spacing:.08em; text-transform: uppercase; }
.woocommerce table.shop_table td { border-top: 1px solid var(--line); color: var(--titanium-light); }

/* Cart page "remove item" (×) link — WooCommerce core renders this with its
   own default dark-red color, which has poor contrast against this theme's
   black page background and can be hard to see/click precisely. v1.1.0 fix. */
.woocommerce a.remove {
  color: var(--titanium) !important;
  background: none !important;
  font-size: 20px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}
.woocommerce a.remove:hover {
  color: var(--gold) !important;
  background: rgba(212,175,55,0.08) !important;
}
.woocommerce-checkout #payment { background: var(--carbon-2); border: 1px solid var(--line); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select {
  background: var(--carbon-2);
  border: 1px solid var(--line);
  color: var(--white);
  border-radius: 0;
}

/* ---- Star rating (matches trust section stars) ---- */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--gold); }

/* ---- Cart totals box + coupon form (v1.1.0 fix) ----
   These had no theme coverage at all, so they rendered in WooCommerce's
   default light styling (white box, dark text) sitting inside the site's
   black-background cart page — a jarring, clearly-broken-looking mismatch. */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  background: var(--carbon-2);
  border: 1px solid var(--line);
  padding: 30px;
}
.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  background: transparent;
  border-color: var(--line);
  color: var(--titanium-light);
}
.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
  color: var(--gold);
  font-size: 18px;
  font-weight: 600;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  width: 100%;
  text-align: center;
}

.woocommerce form.woocommerce-form-coupon,
.woocommerce .cart .coupon {
  background: var(--carbon-2);
  border: 1px solid var(--line);
  padding: 20px;
}
.woocommerce form.woocommerce-form-coupon .input-text,
.woocommerce .cart .coupon input.input-text {
  background: var(--black);
  border: 1px solid var(--line);
  color: var(--white);
  border-radius: 0;
  height: 48px;
}

/* ---- My Account page (v1.1.0 fix) ----
   Had zero theme coverage — the account navigation sidebar, order-history
   table, address boxes, and edit-account form all rendered in WooCommerce's
   default light theme, another white-box-on-black-page mismatch. */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--carbon-2);
  border: 1px solid var(--line);
  padding: 10px 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  color: var(--titanium-light);
  padding: 14px 20px;
  display: block;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--gold);
  background: rgba(212,175,55,0.06);
}
.woocommerce-account .woocommerce-MyAccount-content {
  color: var(--titanium-light);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
  border: 1px solid var(--line);
}
.woocommerce-account .addresses .address {
  background: var(--carbon-2);
  border: 1px solid var(--line);
  padding: 24px;
}
.woocommerce-account .woocommerce-Address-title h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--white);
  letter-spacing: -.005em;
}
.woocommerce-EditAccountForm .input-text,
.woocommerce-address-fields .input-text,
.woocommerce-account select {
  background: var(--carbon-2);
  border: 1px solid var(--line);
  color: var(--white);
  border-radius: 0;
  height: 48px;
  padding: 0 14px;
}
.woocommerce-account .woocommerce-Message {
  background: var(--carbon-2);
  border: 1px solid var(--line-strong);
  color: var(--titanium-light);
  border-radius: 0;
}

/* ---- Checkout order-review table (v1.1.0 fix) ---- */
.woocommerce-checkout #order_review,
.woocommerce-checkout table.shop_table {
  background: var(--carbon-2);
  border: 1px solid var(--line);
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  border-color: var(--line);
  color: var(--titanium-light);
}

/* ---- Notices: success/error/info (v1.1.0 fix) ----
   These appear on nearly every meaningful action (add to cart, checkout
   validation, login errors) and had no theme coverage, so they previously
   rendered with WooCommerce's default light backgrounds/borders. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  background: var(--carbon-2) !important;
  border-top-color: var(--gold) !important;
  color: var(--titanium-light) !important;
  border-radius: 0;
}
.woocommerce-error { border-top-color: #c0392b !important; }
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  background: var(--gold);
  color: var(--black);
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li { color: inherit; }

/* ---- Fixed header clearance — architecture note (v1.2.4) ----
   Previous releases (v1.2.0–v1.2.3) required a dynamic, JavaScript-
   measured spacing rule here, because .site-header used position:fixed
   and was therefore removed from normal document flow — nothing
   automatically reserved space for it, so every page had to manually
   compensate with a calculated padding-top.

   As of v1.2.4, .site-header uses position:sticky instead (see
   holyslug-main.css). A sticky element still participates in normal
   document flow: the browser itself automatically reserves the space
   the header occupies before it begins sticking to the top of the
   viewport on scroll. This means .holyslug-woo-wrapper requires NO
   special top-spacing rule of any kind anymore — it simply uses the
   same plain .section-pad rule (160px top and bottom) that every other
   section on the site already uses, making every WooCommerce page type
   (Shop, Product, Cart, Checkout, My Account, and any WooCommerce
   notice) automatically consistent with the rest of the site's layout,
   with no page-specific selector, no CSS variable, and no JavaScript
   required. See woocommerce.php for the wrapper markup itself. */

/* ---- Sorting dropdown removal, CSS-level fallback (v1.2.0) ----
   The PHP removal above (remove_action on woocommerce_catalog_ordering)
   handles the classic shop-loop template. This CSS rule is a defensive
   fallback in case a block-based WooCommerce template or a future
   WooCommerce update renders the sorting form through a different code
   path not covered by those specific action hooks. */
.woocommerce-ordering,
form.woocommerce-ordering {
  display: none !important;
}

/* ---- Placeholder text readability (v1.2.3) ----
   WooCommerce input/textarea fields (Checkout address fields, Cart
   coupon field, My Account login/register/edit-account forms) all reuse
   the same .input-text class WooCommerce applies across those templates
   — confirmed via WooCommerce's own form-login.php template markup
   ("woocommerce-Input woocommerce-Input--text input-text"). No
   placeholder-specific rule existed anywhere in this theme before this
   change, so placeholder text fell back to each browser's own default
   styling, which is typically a low-opacity derivative of the entered-
   text color — since entered text here is --white (#F7F7F5) on a
   --carbon-2 (#1c1d1f) background, a browser default placeholder can
   easily land at very low contrast, matching the reported readability
   complaint.

   This rule ONLY sets placeholder color. It does not touch input
   background, border, entered-text color, font-size, font-family,
   spacing, field height, or focus styles — all of those remain exactly
   as already defined in the .form-row input.input-text rule above.

   Color chosen: --titanium (#9BA1A6), an existing color already used
   elsewhere in this design system (not a new value introduced for this
   fix). Verified via WCAG contrast formula: 6.46:1 against the actual
   --carbon-2 input background — comfortably passes the 4.5:1 AA minimum
   for normal text, while staying visibly less prominent than the
   entered-text white (15.73:1 against the same background), so
   placeholder text remains clearly distinguishable from real input.

   The Product Review form is covered by a second selector group below:
   unlike the forms above, WordPress's core comment form (which the
   WooCommerce review form extends) does not use the .input-text class
   — its fields use plain <input>/<textarea> tags identified by id
   (author, email, url, comment) inside #commentform / .comment-form,
   confirmed via WordPress's own comment_form() documentation.

   Each pseudo-selector variant is kept in its own separate rule block
   rather than combined into one comma-separated selector list, since
   mixing different placeholder pseudo-selector syntaxes in a single
   rule causes browsers that don't recognize one variant to discard the
   entire rule, including variants they otherwise support. */
.woocommerce input.input-text::placeholder,
.woocommerce textarea::placeholder,
#commentform input::placeholder,
#commentform textarea::placeholder {
  color: var(--titanium);
}
.woocommerce input.input-text::-webkit-input-placeholder,
.woocommerce textarea::-webkit-input-placeholder,
#commentform input::-webkit-input-placeholder,
#commentform textarea::-webkit-input-placeholder {
  color: var(--titanium);
}
.woocommerce input.input-text::-moz-placeholder,
.woocommerce textarea::-moz-placeholder,
#commentform input::-moz-placeholder,
#commentform textarea::-moz-placeholder {
  color: var(--titanium);
  opacity: 1; /* Firefox applies its own 54% opacity to ::-moz-placeholder by default, which would silently wash out the color set above */
}
.woocommerce input.input-text:-ms-input-placeholder,
.woocommerce textarea:-ms-input-placeholder,
#commentform input:-ms-input-placeholder,
#commentform textarea:-ms-input-placeholder {
  color: var(--titanium);
}
.woocommerce input.input-text::-ms-input-placeholder,
.woocommerce textarea::-ms-input-placeholder,
#commentform input::-ms-input-placeholder,
#commentform textarea::-ms-input-placeholder {
  color: var(--titanium);
}

/* ---- Shop page title & archive description (v1.3.0 premium upgrade) ----
   WooCommerce's native Shop archive header (woocommerce_page_title() output
   inside .woocommerce-products-header) had zero theme styling, rendering
   in the browser's default heading typography -- visibly inconsistent
   with the rest of the site's Space Grotesk display-font system on the
   single highest-traffic commercial page. */
.woocommerce-products-header{
  margin-bottom: 60px;
}
.woocommerce-products-header__title.page-title{
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -.01em;
  color: var(--white);
  margin-bottom: 12px;
}
.woocommerce-products-header .term-description,
.woocommerce-products-header .woocommerce-product-details__short-description {
  color: var(--titanium-light);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  max-width: 600px;
}

/* ---- Checkout section headings (v1.3.0 premium upgrade) ----
   WooCommerce's own checkout template renders "Billing details",
   "Ship to a different address?", and "Your order" as plain <h3> headings
   with zero theme styling -- inconsistent with the rest of the site's
   Space Grotesk display-font system on the page where a customer is
   actively completing a purchase. */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--white);
  margin-bottom: 20px;
  letter-spacing: -.005em;
}