/*
Theme Name: Lo Castro Child
Template: twentytwentyfive
Description: Child theme for gioiellerialocastro.com — restyles WooCommerce
  templates (My Account, Cart, Checkout) to match the Next.js storefront's
  brand: warm cream/white surfaces, dark brown text, serif display typography,
  uppercase letter-spaced labels.
Version: 2.6.7
Author: Gioielleria Lo Castro
*/

/* ─────────────────────────────
   STYLE.CSS — global layer (loaded on every page)

   Tokens live in styles/tokens.css (a dependency of this file).
   This file holds only:
     1. Base
     2. WooCommerce: global overrides
     3. Shared components (.lc-button, .lc-form-*)
   Page/component styles live in styles/*.css — see
   docs/design-system-code.md.

   CASCADE NOTE: WordPress prints this file BEFORE block-library and
   WooCommerce's own stylesheets, so a WooCommerce rule with equal
   specificity wins over a rule in section 2. Raise specificity rather
   than reordering enqueues.
   ───────────────────────────── */


/* ═════════════════════════════
   1. BASE
   ═════════════════════════════ */

/* Prevents a horizontal scrollbar (and the few-pixel off-center drift
   it causes) on any full-bleed section built with the width:100vw +
   negative-margin breakout trick — e.g. .lc-category in category.css,
   .lc-mobile-menu in mobile-menu.css. 100vw includes the vertical
   scrollbar's own width, so without this, a tall/scrollable page makes
   those sections a few pixels wider than the visible viewport. */
html {
  overflow-x: hidden;
}

/* Root text — every page inherits Lo Castro brown and the reading font.
   Twenty Twenty-Five's global styles (printed AFTER this file) set
   body { color: #111; font: 300 22px Manrope }, which leaked into any
   text without its own rule on non-WooCommerce pages (black titles,
   Manrope descriptions, 22px buttons). `html body` outranks that rule.
   Same values as the .woocommerce rule in §2, so shop pages are unchanged. */
html body {
  color: var(--lc-text);
  font-family: var(--lc-font-serif);
  font-size: 15px;
  line-height: 1.7;
}

/* Form controls don't inherit the page font by default (they fall back to
   the browser's Arial). Font only — colours stay with each component. */
button,
input,
select,
textarea {
  font-family: inherit;
}


/* ═════════════════════════════
   2. WOOCOMMERCE: GLOBAL OVERRIDES
   Restyles WooCommerce's own markup (account, cart, checkout, notices).
   WooCommerce adds .woocommerce / .woocommerce-page to <body> on its
   pages, so the typography below also becomes the inherited font for
   every Lo Castro component rendered on shop/product/category pages.
   ═════════════════════════════ */

/* WooCommerce: account layout */
.woocommerce-account main .woocommerce{
  margin: 1rem;
  max-width: 100%;
}
.woocommerce-account .wp-block-post-title{
  max-width: 100%;
}

/* WooCommerce: base typography */
.woocommerce,
.woocommerce-page {
  color: var(--lc-text);
  font-family: var(--lc-font-serif);
  font-size: 15px;
  line-height: 1.7;
}

.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3,
.entry-title,
h1.wp-block-post-title {
  font-family: var(--lc-font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lc-text);
}

/* WooCommerce page titles (Cart, Checkout, My account, search results)
   use the same page-title size as every Lo Castro page hero — they were
   16px (cart) and 48px (search). */
h1.wp-block-post-title,
.woocommerce h1.wp-block-query-title {
  font-size: 14px;
  letter-spacing: var(--lc-track-wide);
  line-height: 1.4;
}

/* WooCommerce: forms (login, register, addresses, account details) */
.woocommerce form .form-row label {
  font-family: var(--lc-font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lc-text);
  opacity: 0.75;
  margin-bottom: 8px;
  display: inline-block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.shop_table input.input-text {
  border: 1px solid var(--lc-border-default);
  border-radius: var(--lc-radius-none);
  background: var(--lc-bg);
  color: var(--lc-text);
  font-family: var(--lc-font-serif);
  font-size: 14px;
  padding: 14px 16px;
  width: 100%;
  transition: border-color 0.2s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--lc-text);
}

.woocommerce-form-login,
.woocommerce-form-register {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border-subtle);
  padding: 32px;
}

.woocommerce-form-login-toggle,
.woocommerce-form-register-toggle {
  display: none;
}

/* WooCommerce: buttons. Payment-plugin buttons (WooPayments express
   checkout, PayPal) render their own chrome and are NOT matched here —
   see "Plugin boundaries" in docs/design-system-code.md. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-Button,
.woocommerce form .form-row .button {
  background: var(--lc-text);
  color: var(--lc-text-inverse);
  border: 1px solid var(--lc-text);
  border-radius: var(--lc-radius-none);
  font-family: var(--lc-font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  transition: opacity 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-Button:hover {
  background: var(--lc-text);
  color: var(--lc-text-inverse);
  opacity: 0.85;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--lc-text);
  color: var(--lc-text-inverse);
}

/* WooCommerce: orders table, cart, checkout */
.woocommerce table.shop_table {
  border: none;
  border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  border: none;
  border-bottom: 1px solid var(--lc-border-subtle);
  font-size: 13px;
}

.woocommerce table.shop_table th {
  font-family: var(--lc-font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: 0.7;
}

.woocommerce-order-details,
.woocommerce-customer-details {
  background: var(--lc-surface);
  padding: 24px;
  margin-top: 24px;
}

/* WooCommerce: notices — site-wide default (cart, checkout, anywhere a
   notice can appear outside the account area). account.css overrides
   this with its own Alert-style version on /my-account/* only. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border-default);
  border-top: 3px solid var(--lc-text);
  color: var(--lc-text);
  padding: 16px 20px;
  font-size: 13px;
  border-radius: var(--lc-radius-none);
  list-style: none;
}

.woocommerce-error li {
  list-style: none;
}


/* ═════════════════════════════
   3. SHARED COMPONENTS
   Canonical Lo Castro actions and form fields [Figma: Action / Button,
   Form / Field]. Use these for NEW or refactored markup. Existing
   page-specific buttons/inputs (.lc-contatti-primarybtn,
   .lc-btn-primary, .lc-giftcard-input…) are NOT yet migrated because
   each differs slightly in size/spacing — see the inventory in
   LoCastro_Code_Refactor_Report.md before switching one over.
   Never apply these to payment-plugin buttons.
   ═════════════════════════════ */

/* ── Type roles [Figma: Type / Page title, Section title, Intro, Kicker]
   One definition per role, used by every page. Layout (margins, widths,
   alignment) stays in the component files.
     Page title     Cinzel 14 caps, wide tracking — every page hero
     Section title  Playfair 20 caps, wide tracking — homepage sections
     Intro          Playfair 14/1.6, brown at 70% — text under either title
     Kicker         Cinzel 10 caps — small label above a title
   `.woocommerce` variants: WooCommerce puts .woocommerce on <body> and
   style.css §2 restyles .woocommerce h1/h2, which would otherwise win. ── */
.lc-page-title,
.woocommerce .lc-page-title {
  font-family: var(--lc-font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  color: var(--lc-text);
}

.lc-section-title,
.woocommerce .lc-section-title {
  font-family: var(--lc-font-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  color: var(--lc-text);
}

@media (max-width: 900px) { /* System breakpoint: mobile */
  .lc-section-title,
  .woocommerce .lc-section-title {
    font-size: 17px;
  }
}

.lc-intro {
  font-family: var(--lc-font-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--lc-text);
  opacity: 0.7;
}

.lc-kicker {
  font-family: var(--lc-font-display);
  font-size: 10px;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 12px;
}

.lc-account-divider {
  height: 1px;
  background: var(--lc-border-subtle);
  margin: 22px 0;
}

/* ── Account-style actions (dashboard, wishlist, product page). Moved here
   from account.css: they are used on pages where account.css never loads,
   where they rendered as unstyled text (Arial / Manrope 22px). ── */
.lc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.lc-btn-primary,
.lc-btn-ghost {
  appearance: none;
  cursor: pointer;
  padding: 12px 14px;
  font-family: var(--lc-font-display);
  font-size: 11px;
  letter-spacing: var(--lc-track-default);
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.85;
  transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

/* a.* / .woocommerce a.*: link colour rules from the parent theme and
   WooCommerce (element+class) would otherwise beat a class-alone selector. */
.lc-btn-primary,
a.lc-btn-primary,
.woocommerce a.lc-btn-primary {
  border: 1px solid var(--lc-text);
  background: var(--lc-text);
  color: var(--lc-bg);
}

.lc-btn-primary:hover,
a.lc-btn-primary:hover,
.woocommerce a.lc-btn-primary:hover {
  opacity: 1;
  color: var(--lc-bg);
}

.lc-btn-ghost,
a.lc-btn-ghost,
.woocommerce a.lc-btn-ghost {
  border: 1px solid var(--lc-border-default);
  background: transparent;
  color: var(--lc-text);
}

.lc-btn-ghost:hover,
a.lc-btn-ghost:hover,
.woocommerce a.lc-btn-ghost:hover {
  opacity: 1;
  border-color: var(--lc-border-strong);
  color: var(--lc-text);
}

.lc-button {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--lc-radius-none);
  background: transparent;
  color: var(--lc-text);
  font-family: var(--lc-font-display);
  font-size: 12px;
  letter-spacing: var(--lc-track-default);
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.lc-button--primary {
  border-color: var(--lc-text);
  background: var(--lc-text);
  color: var(--lc-text-inverse);
}

.lc-button--primary:hover:not(:disabled) {
  opacity: 0.85;
}

.lc-button--secondary {
  border-color: var(--lc-border-default);
}

.lc-button--secondary:hover:not(:disabled) {
  border-color: var(--lc-border-strong);
}

/* Text / editorial action — no box, quiet until hovered */
.lc-button--text {
  padding: 0;
  border: none;
  opacity: 0.7;
}

.lc-button--text:hover:not(:disabled) {
  opacity: 1;
}

.lc-button:disabled,
.lc-button[aria-disabled="true"] {
  opacity: var(--lc-state-disabled-opacity);
  cursor: not-allowed;
}

.lc-button:focus-visible {
  outline: var(--lc-focus-width) solid var(--lc-focus-color);
  outline-offset: var(--lc-focus-offset);
}

.lc-form-field {
  display: grid;
  gap: 8px;
}

.lc-form-label {
  font-family: var(--lc-font-display);
  font-size: 10px;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  opacity: 0.7;
}

/* Light hairline at rest, stronger hairline on focus, square corners */
.lc-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--lc-border-default);
  border-radius: var(--lc-radius-none);
  background: transparent;
  color: var(--lc-text);
  padding: 12px;
  outline: none;
  font-family: var(--lc-font-serif);
  font-size: 13px;
}

textarea.lc-input {
  min-height: 130px;
  line-height: 1.6;
  resize: vertical;
}

.lc-input:focus {
  border-color: var(--lc-border-strong);
}

.lc-input:disabled {
  opacity: var(--lc-state-disabled-opacity);
  cursor: not-allowed;
}

.lc-input.is-error,
.lc-input[aria-invalid="true"] {
  border-color: var(--lc-state-error);
}

.lc-form-message {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.lc-form-message--error {
  color: var(--lc-state-error);
}

.lc-form-message--success {
  color: var(--lc-state-success);
}