/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Description: Hello child theme for the Nurina Norman storefront. Every design token of the Minimal Clean Commerce system lives in this file: six colour roles, the type tiers and the label / overline tier classes. Fonts: Manrope everywhere, Reem Kufi for brand accents only. The parent theme is never edited.
Version: 1.1.0
Author: Nurina Norman build
Text Domain: hello-elementor-child
*/

/* =========================================================================
   1. FONTS
   Manrope is the everywhere typeface. Reem Kufi is loaded for brand
   accents only and is applied by .brand-accent / Arabic elements below.
   ========================================================================= */
:root {
  --font-body: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Reem Kufi", "Segoe UI", Tahoma, sans-serif;

  /* Names the builder and the design-system sync read from here. */
  --font-english: Manrope, system-ui, sans-serif;
  --font-arabic: "Reem Kufi", "Segoe UI", Tahoma, sans-serif;
}

html body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-text);
}

/* Brand accent only: short signature lines, never running text. */
.brand-accent {
  font-family: var(--font-accent);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

/* Arabic never takes uppercase or tracking; it wants ~10% more height. */
[lang="ar"],
[dir="rtl"] {
  font-family: var(--font-accent);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.75;
}

/* =========================================================================
   2. SIX COLOUR ROLES
   No other hues. No pure white (#FFFFFF), no pure black (#000000).
   Stone is a decorative tone only and is never used for text
   (2.3:1 on ivory - it fails the accessibility minimum).
   ========================================================================= */
:root {
  /* role: charcoal - all text, navigation, primary buttons, input borders */
  --color-charcoal: #20201F;
  /* role: ivory - page canvas, cards, inputs, photography background */
  --color-ivory: #F4F1EA;
  /* role: sand - campaign blocks, chips, dividers, card borders */
  --color-sand: #E8E1D6;
  /* role: stone - decorative lines, icons, disabled states. NEVER text. */
  --color-stone: #A79D91;
  /* role: border - the 1px separator line */
  --color-border: #E8E1D6;
  /* role: error - validation and destructive states only */
  --color-error: #B42318;

  /* Semantic names from the design file. Aliases of the six roles, so the
     palette still has exactly one value per role. */
  --color-primary: var(--color-charcoal);
  --color-secondary: var(--color-stone);
  --color-tertiary: var(--color-sand);
  --color-neutral: var(--color-ivory);
  --color-border-strong: var(--color-stone);
  --color-surface: var(--color-ivory);
  --color-surface-raised: var(--color-ivory);
  --color-surface-campaign: var(--color-sand);
  --color-on-surface: var(--color-charcoal);
  --color-on-primary: var(--color-ivory);
  --color-background: var(--color-ivory);
  --color-text: var(--color-charcoal);
  --color-text-muted: var(--color-charcoal);
}

/* =========================================================================
   3. TYPE TIERS
   Every tier is a variable: size, weight, leading and tracking.
   Families are set once above (Manrope) and swapped for Reem Kufi only on
   brand accents.
   ========================================================================= */
:root {
  --type-headline-display-size: 48px;
  --type-headline-display-weight: 500;
  --type-headline-display-leading: 1.1;
  --type-headline-display-tracking: -0.01em;

  --type-headline-lg-size: 32px;
  --type-headline-lg-weight: 500;
  --type-headline-lg-leading: 1.2;
  --type-headline-lg-tracking: 0em;

  --type-headline-md-size: 24px;
  --type-headline-md-weight: 600;
  --type-headline-md-leading: 1.25;
  --type-headline-md-tracking: 0em;

  --type-headline-sm-size: 18px;
  --type-headline-sm-weight: 600;
  --type-headline-sm-leading: 1.3;
  --type-headline-sm-tracking: 0em;

  --type-body-lg-size: 16px;
  --type-body-lg-weight: 400;
  --type-body-lg-leading: 1.6;
  --type-body-lg-tracking: 0em;

  --type-body-md-size: 14px;
  --type-body-md-weight: 400;
  --type-body-md-leading: 1.6;
  --type-body-md-tracking: 0em;

  --type-body-sm-size: 12px;
  --type-body-sm-weight: 400;
  --type-body-sm-leading: 1.5;
  --type-body-sm-tracking: 0em;

  --type-label-lg-size: 14px;
  --type-label-lg-weight: 600;
  --type-label-lg-leading: 1.2;
  --type-label-lg-tracking: 0.08em;
  --type-label-lg-transform: uppercase;

  --type-label-md-size: 12px;
  --type-label-md-weight: 600;
  --type-label-md-leading: 1.2;
  --type-label-md-tracking: 0.08em;
  --type-label-md-transform: uppercase;

  --type-label-sm-size: 11px;
  --type-label-sm-weight: 600;
  --type-label-sm-leading: 1.2;
  --type-label-sm-tracking: 0.08em;
  --type-label-sm-transform: uppercase;

  --type-overline-size: 10px;
  --type-overline-weight: 500;
  --type-overline-leading: 1.2;
  --type-overline-tracking: 0.14em;
  --type-overline-transform: uppercase;
}

/* =========================================================================
   4. NAMED TIER CLASSES
   Later pages attach these class names instead of setting type by hand.
   The label tiers and the overline tier are the small uppercase tracked
   steps that the builder has no free control for.
   ========================================================================= */
.headline-display,
.headline-lg,
.headline-md,
.headline-sm,
.body-lg,
.body-md,
.body-sm,
.label-lg,
.label-md,
.label-sm,
.overline {
  font-family: var(--font-body);
  margin: 0;
}

.headline-display {
  font-size: var(--type-headline-display-size);
  font-weight: var(--type-headline-display-weight);
  line-height: var(--type-headline-display-leading);
  letter-spacing: var(--type-headline-display-tracking);
}

.headline-lg {
  font-size: var(--type-headline-lg-size);
  font-weight: var(--type-headline-lg-weight);
  line-height: var(--type-headline-lg-leading);
  letter-spacing: var(--type-headline-lg-tracking);
}

.headline-md {
  font-size: var(--type-headline-md-size);
  font-weight: var(--type-headline-md-weight);
  line-height: var(--type-headline-md-leading);
  letter-spacing: var(--type-headline-md-tracking);
}

.headline-sm {
  font-size: var(--type-headline-sm-size);
  font-weight: var(--type-headline-sm-weight);
  line-height: var(--type-headline-sm-leading);
  letter-spacing: var(--type-headline-sm-tracking);
}

.body-lg {
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight);
  line-height: var(--type-body-lg-leading);
  letter-spacing: var(--type-body-lg-tracking);
}

.body-md {
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-leading);
  letter-spacing: var(--type-body-md-tracking);
}

.body-sm {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-leading);
  letter-spacing: var(--type-body-sm-tracking);
}

/* Label tiers: uppercase, wide tracking, English only. */
.label-lg {
  font-size: var(--type-label-lg-size);
  font-weight: var(--type-label-lg-weight);
  line-height: var(--type-label-lg-leading);
  letter-spacing: var(--type-label-lg-tracking);
  text-transform: var(--type-label-lg-transform);
}

.label-md {
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  line-height: var(--type-label-md-leading);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: var(--type-label-md-transform);
}

.label-sm {
  font-size: var(--type-label-sm-size);
  font-weight: var(--type-label-sm-weight);
  line-height: var(--type-label-sm-leading);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: var(--type-label-sm-transform);
}

/* Overline: the smallest tracked step, used to sign panels. */
.overline {
  font-size: var(--type-overline-size);
  font-weight: var(--type-overline-weight);
  line-height: var(--type-overline-leading);
  letter-spacing: var(--type-overline-tracking);
  text-transform: var(--type-overline-transform);
}

/* Label step-down rule: drop one label step before touching the copy,
   never dropping the uppercase or the tracking. */
.label-lg.label-step-down {
  font-size: var(--type-label-md-size);
}

.label-md.label-step-down {
  font-size: var(--type-label-sm-size);
}

/* =========================================================================
   5. COLOUR CLASSES
   Backgrounds and text colours by role. There is deliberately no
   stone text class - stone is never used for text.
   ========================================================================= */
.text-charcoal {
  color: var(--color-charcoal);
}

.text-error {
  color: var(--color-error);
}

.bg-ivory {
  background-color: var(--color-ivory);
}

.bg-sand {
  background-color: var(--color-sand);
}

.bg-charcoal {
  background-color: var(--color-charcoal);
  color: var(--color-on-primary);
}

.rule-sand {
  border-top: 1px solid var(--color-border);
}

/* =========================================================================
   6. PRODUCT PAGES (WooCommerce's own template, restyled)
   The shop plugin renders the page; this section only dresses it in the
   house look: name, price, photos, description, care line, delivery text,
   size/colour pickers, world links, spec list and story. No template file
   is overridden. Everything reads the tokens above.
   ========================================================================= */

/* --- 6.1 Frame: breadcrumb and page rhythm --- */
.single-product .woocommerce-breadcrumb {
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-leading);
  color: var(--color-charcoal);
  margin-bottom: 24px;
}

.single-product .woocommerce-breadcrumb a {
  color: var(--color-charcoal);
  text-decoration: none;
}

.single-product .woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}

.single-product div.product {
  padding-bottom: 72px;
}

/* --- 6.2 Name and price --- */
.single-product div.product .product_title {
  font-size: var(--type-headline-lg-size);
  font-weight: var(--type-headline-lg-weight);
  line-height: var(--type-headline-lg-leading);
  letter-spacing: var(--type-headline-lg-tracking);
  color: var(--color-charcoal);
  margin-bottom: 12px;
}

.single-product div.product .summary .price,
.single-product div.product p.price {
  font-size: var(--type-headline-md-size);
  font-weight: var(--type-headline-md-weight);
  line-height: var(--type-headline-md-leading);
  color: var(--color-charcoal);
  margin-bottom: 24px;
}

.single-product div.product p.price del {
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  color: var(--color-charcoal);
  margin-inline-end: 8px;
}

.single-product div.product p.price ins {
  text-decoration: none;
}

/* Stock cue: "Only 2 left in stock" reads as a quiet house label. */
.single-product div.product .summary .stock {
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase;
  line-height: var(--type-label-md-leading);
  color: var(--color-charcoal);
  margin: 0 0 24px;
}

.single-product div.product .stock.in-stock {
  color: var(--color-charcoal);
}

.single-product div.product .stock.out-of-stock {
  color: var(--color-error);
}

/* --- 6.3 Short description --- */
.single-product .woocommerce-product-details__short-description {
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight);
  line-height: var(--type-body-lg-leading);
  color: var(--color-charcoal);
  margin-bottom: 24px;
}

.single-product .woocommerce-product-details__short-description p {
  margin-bottom: 12px;
}

/* --- 6.4 Size and colour pickers (variation selects) --- */
.single-product table.variations {
  background: none;
  border: 0;
  margin-bottom: 24px;
}

.single-product table.variations th.label {
  width: 1%;
  padding: 0 12px 12px 0;
  text-align: start;
  vertical-align: middle;
}

.single-product table.variations th.label label {
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase;
  color: var(--color-charcoal);
}

.single-product table.variations td.value {
  padding: 0 0 12px;
}

.single-product select {
  height: 56px;
  padding: 0 40px 0 16px;
  border: 1px solid var(--color-charcoal);
  border-radius: 8px;
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
}

.single-product select:focus {
  outline: 2px solid var(--color-sand);
  outline-offset: 0;
  border-color: var(--color-charcoal);
}

.single-product .reset_variations {
  font-size: var(--type-body-sm-size);
  color: var(--color-charcoal);
  text-decoration: underline;
}

/* --- 6.5 Quantity and the primary buy button --- */
.single-product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.single-product form.cart .quantity {
  float: none;
  display: inline-block;
  margin: 0;
}

.single-product .quantity .qty {
  width: 72px;
  height: 56px;
  padding: 0 16px;
  text-align: center;
  border: 1px solid var(--color-charcoal);
  border-radius: 8px;
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
}

.single-product .quantity .qty:focus {
  outline: 2px solid var(--color-sand);
  outline-offset: 0;
  border-color: var(--color-charcoal);
}

/* Primary CTA: charcoal pill, 56px, uppercase tracked label. */
.single-product form.cart button.single_add_to_cart_button,
.single-product form.cart button.single_add_to_cart_button:hover,
.single-product form.cart button.single_add_to_cart_button:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-width: 240px;
  padding: 0 32px;
  margin: 0;
  border: 0;
  border-radius: 9999px;
  background-color: var(--color-charcoal);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: var(--type-label-lg-size);
  font-weight: var(--type-label-lg-weight);
  letter-spacing: var(--type-label-lg-tracking);
  text-transform: uppercase;
  line-height: 1;
  box-shadow: none;
  transition: background-color 0.2s ease;
}

.single-product form.cart button.single_add_to_cart_button:hover {
  background-color: #34342F; /* lighter charcoal, a tone shift not a shadow */
  color: var(--color-ivory);
}

.single-product form.cart button.single_add_to_cart_button.disabled,
.single-product form.cart button.single_add_to_cart_button:disabled {
  background-color: var(--color-sand);
  color: var(--color-stone); /* stone allowed on disabled states only */
  cursor: not-allowed;
}

/* --- 6.6 Care line, delivery text and per-piece note --- */
.single-product .nn-piece-notes {
  display: grid;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.single-product .nn-piece-notes__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: start;
  margin: 0;
}

.single-product .nn-piece-notes__label {
  font-size: var(--type-label-sm-size);
  font-weight: var(--type-label-sm-weight);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  line-height: var(--type-label-sm-leading);
  color: var(--color-charcoal);
  padding-top: 2px;
}

.single-product .nn-piece-notes__text {
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-leading);
  color: var(--color-charcoal);
  margin: 0;
}

/* --- 6.7 World links (product meta) --- */
.single-product .product_meta {
  margin-top: 24px;
  font-size: var(--type-body-sm-size);
  color: var(--color-charcoal);
}

.single-product .product_meta .sku_wrapper {
  color: var(--color-charcoal);
  margin-inline-end: 12px;
}

.single-product .product_meta .posted_in a {
  display: inline-block;
  background-color: var(--color-sand);
  color: var(--color-charcoal);
  border-radius: 9999px;
  padding: 8px 14px;
  margin: 4px 4px 0 0;
  font-size: var(--type-label-sm-size);
  font-weight: var(--type-label-sm-weight);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  line-height: var(--type-label-sm-leading);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.single-product .product_meta .posted_in a:hover {
  background-color: var(--color-charcoal);
  color: var(--color-ivory);
}

/* --- 6.8 Gallery --- */
.single-product .woocommerce-product-gallery img {
  border-radius: 0;
}

.single-product .woocommerce-product-gallery__image--placeholder {
  background-color: var(--color-sand);
}

body.woocommerce.single-product div.product div.images
  .woocommerce-product-gallery__trigger {
  border-color: var(--color-border);
  background-color: var(--color-ivory); /* the plugin ships pure white */
  color: var(--color-charcoal);
}

/* --- 6.9 Tabs: description, spec list, reviews ---
   The selectors mirror the shop plugin's own chain (body.woocommerce +
   div.product + tab classes) so the house look outranks its default tab
   styling without touching any template file. The body prefix lifts the
   specificity one step above the plugin's rules; the child stylesheet
   loads after the plugin's, so ties would also fall our way. */
body.woocommerce.single-product .woocommerce-tabs {
  clear: both;
  padding-top: 48px;
}

body.woocommerce.single-product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 24px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  list-style: none;
}

body.woocommerce.single-product .woocommerce-tabs ul.tabs::before {
  display: none;
}

body.woocommerce.single-product .woocommerce-tabs ul.tabs li {
  display: inline-block;
  position: static;
  z-index: auto;
  background: none;
  border: 0;
  margin: 0 32px 0 0;
  padding: 0;
  border-radius: 0;
  color: var(--color-charcoal);
}

body.woocommerce.single-product .woocommerce-tabs ul.tabs li::before,
body.woocommerce.single-product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

body.woocommerce.single-product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0 0 12px;
  margin-bottom: -1px;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase;
  text-decoration: none;
}

body.woocommerce.single-product .woocommerce-tabs ul.tabs li a:hover {
  border-bottom-color: var(--color-border);
  color: var(--color-charcoal);
  text-decoration: none;
}

body.woocommerce.single-product .woocommerce-tabs ul.tabs li.active,
body.woocommerce.single-product .woocommerce-tabs ul.tabs li.active a,
body.woocommerce.single-product .woocommerce-tabs ul.tabs li.active a:hover {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-charcoal);
  border-radius: 0;
  box-shadow: none;
  color: var(--color-charcoal);
  text-shadow: none;
  z-index: auto;
}

.single-product .woocommerce-tabs .panel {
  margin: 0;
  padding: 24px 0 0;
  background: none;
  box-shadow: none;
}

.single-product .woocommerce-Tabs-panel h2 {
  font-size: var(--type-label-lg-size);
  font-weight: var(--type-label-lg-weight);
  letter-spacing: var(--type-label-lg-tracking);
  text-transform: uppercase;
  line-height: var(--type-label-lg-leading);
  color: var(--color-charcoal);
  margin: 0 0 12px;
}

.single-product .woocommerce-Tabs-panel p,
.single-product .woocommerce-Tabs-panel li,
.single-product .woocommerce-Tabs-panel dd {
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight);
  line-height: var(--type-body-lg-leading);
  color: var(--color-charcoal);
}

/* Spec list (artwork attributes) as a quiet ruled table. */
body.woocommerce.single-product table.shop_attributes {
  border: 1px solid var(--color-border);
  background: none;
  margin: 0 0 24px;
}

body.woocommerce.single-product table.shop_attributes tr {
  background: none;
}

body.woocommerce.single-product table.shop_attributes th {
  width: 30%;
  padding: 16px;
  text-align: start;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase;
  color: var(--color-charcoal);
}

body.woocommerce.single-product table.shop_attributes td {
  padding: 16px;
  background: none;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-leading);
  color: var(--color-charcoal);
}

body.woocommerce.single-product table.shop_attributes tr:last-child th,
body.woocommerce.single-product table.shop_attributes tr:last-child td {
  border-bottom: 0;
}

body.woocommerce.single-product table.shop_attributes td p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* --- 6.10 Reviews (kept, quiet) --- */
.single-product #reviews .commentlist li .comment-text {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  margin-left: 0;
}

.single-product #review_form label {
  font-size: var(--type-label-sm-size);
  font-weight: var(--type-label-sm-weight);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-charcoal);
}

.single-product #review_form input.input-text,
.single-product #review_form textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--color-charcoal);
  border-radius: 8px;
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
}

.single-product #review_form input.input-text:focus,
.single-product #review_form textarea:focus {
  outline: 2px solid var(--color-sand);
  outline-offset: 0;
  border-color: var(--color-charcoal);
}

/* Secondary button: square corners, hairline border, sand hover fill. */
body.woocommerce.single-product #review_form #submit,
.single-product #review_form #submit {
  height: 45px;
  padding: 0 16px;
  border: 1px solid var(--color-charcoal);
  border-radius: 0;
  background: none;
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--type-label-md-size);
  font-weight: var(--type-label-md-weight);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: uppercase;
}

.single-product #review_form #submit:hover {
  background-color: var(--color-sand);
  color: var(--color-charcoal);
}

.single-product .star-rating,
.single-product .comment-form-rating .stars a {
  color: var(--color-stone); /* decorative icons, never running text */
}

/* --- 6.11 Related pieces: name and price only, buttons stripped --- */
.single-product .related h2,
.single-product .upsells h2 {
  font-size: var(--type-label-lg-size);
  font-weight: var(--type-label-lg-weight);
  letter-spacing: var(--type-label-lg-tracking);
  text-transform: uppercase;
  line-height: var(--type-label-lg-leading);
  color: var(--color-charcoal);
  margin: 48px 0 24px;
}

.single-product .related ul.products li.product .button,
.single-product .upsells ul.products li.product .button,
.single-product .related ul.products li.product .star-rating,
.single-product .upsells ul.products li.product .star-rating {
  display: none;
}

/* --- 6.12 Mobile --- */
@media (max-width: 768px) {
  .single-product div.product {
    padding-bottom: 48px;
  }

  .single-product form.cart button.single_add_to_cart_button {
    width: 100%;
    min-width: 0;
  }

  .single-product table.variations th.label {
    display: block;
    padding: 0 0 12px;
  }

  .single-product select {
    width: 100%;
  }

  .single-product .nn-piece-notes__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .single-product .woocommerce-tabs {
    padding-top: 24px;
  }

  .single-product .woocommerce-tabs ul.tabs {
    gap: 12px 24px;
  }

  .single-product .woocommerce-tabs ul.tabs li {
    margin: 0;
  }
}



/* =========================================================================
   SHOP SCREENS - ticket 07 (world grids, search, cart, My Account, 404)
   House rules for the screens around the products:
   - the grid carries picture, name and price only: no ratings, no
     buttons, no sale flags;
   - two columns on a phone, three on a tablet, four on a desktop;
   - Manrope, charcoal text, ivory ground, sand lines - no pure white,
     no pure black, stone never used for text.
   ========================================================================= */

/* --- 1. The house grid ------------------------------------------------
   Covers every WooCommerce loop: the five world product views (product
   category archives), the catalogue search results, and the core
   [products] shortcode wherever it is placed (ticket 10's world pages).
---------------------------------------------------------------------- */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem 1.75rem;
  margin: 0;
  padding: 0;
}

@media (max-width: 1199px) {
  ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1rem;
  }
}

/* The shop plugin clears floats with a pseudo-element on every product
   list. Once the list is a grid, that element stops being a clear and
   becomes a grid item, so it takes the first cell and pushes every card
   one column to the right. Nothing else needs them any more. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none;
  display: none;
}
/* The reset has to outrank the shop plugin's own sheet at every width:
   on a phone it floats every second card to the right, which throws a
   single card into the second column. */
ul.products li.product,
ul.products[class*="columns-"] li.product,
ul.products[class*="columns-"] li.product:nth-child(2n) {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  display: flex;
  flex-direction: column;
}

ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-charcoal);
}

ul.products li.product img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

ul.products li.product:hover img {
  transform: scale(1.03);
}

ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
  font-size: var(--type-body-lg-size);
  font-weight: 600;
  line-height: var(--type-body-lg-leading);
  letter-spacing: var(--type-body-lg-tracking);
  color: var(--color-charcoal);
  text-decoration: none;
}

ul.products li.product span.price {
  font-size: var(--type-body-md-size);
  font-weight: 600;
  line-height: var(--type-body-md-leading);
  color: var(--color-charcoal);
  text-decoration: none;
}

ul.products li.product span.price del {
  text-decoration: line-through;
  opacity: 0.6;
}

ul.products li.product span.price ins {
  text-decoration: none;
}

/* Picture, name and price only: ratings, buttons and sale flags never
   show in a grid. */
ul.products li.product .button,
ul.products li.product .add_to_cart_button,
ul.products li.product .added_to_cart,
ul.products li.product .star-rating,
ul.products li.product .onsale {
  display: none !important;
}

/* --- 2. Grid screen furniture (header, count, ordering, breadcrumb) --- */
.woocommerce-products-header {
  margin-bottom: 2.5rem;
}

.woocommerce-products-header__title {
  margin: 0 0 0.5rem;
  font-size: var(--type-headline-lg-size);
  font-weight: 600;
  line-height: var(--type-headline-lg-leading);
  letter-spacing: var(--type-headline-lg-tracking);
  color: var(--color-charcoal);
}

.woocommerce-products-header .term-description {
  max-width: 44rem;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-leading);
  color: var(--color-charcoal);
}

.woocommerce-breadcrumb {
  margin-bottom: 1.5rem;
  font-size: var(--type-label-sm-size);
  font-weight: 600;
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: var(--type-label-sm-transform);
  color: var(--color-charcoal);
}

.woocommerce-breadcrumb a {
  color: var(--color-charcoal);
  text-decoration: none;
}

.woocommerce .woocommerce-result-count {
  margin: 0;
  padding: 0.7rem 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-leading);
  color: var(--color-charcoal);
}

.woocommerce .woocommerce-ordering {
  margin: 0;
}

.woocommerce .woocommerce-ordering select {
  padding: 0.65rem 0.9rem;
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  color: var(--color-charcoal);
  background-color: var(--color-ivory);
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

.woocommerce .woocommerce-ordering select:focus {
  outline: 2px solid var(--color-charcoal);
  outline-offset: 2px;
}

/* Quiet shop notices (empty search, empty cart, account messages). */
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message,
.woocommerce-shop .woocommerce-info,
.woocommerce-shop .woocommerce-message,
.archive.woocommerce .woocommerce-info,
.archive.woocommerce .woocommerce-message {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-leading);
  color: var(--color-charcoal);
  background-color: var(--color-ivory);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-charcoal);
  border-radius: 2px;
}

/* --- 3. Cart screen --------------------------------------------------- */
.woocommerce-cart .wp-block-woocommerce-cart {
  font-family: var(--font-body);
  color: var(--color-charcoal);
}

.woocommerce-cart .wc-block-cart-items__row {
  padding: 1.5rem;
  background-color: var(--color-ivory);
  border-top: 1px solid var(--color-border);
}

.woocommerce-cart .wc-block-cart-items__row:first-child {
  border-top: none;
}

.woocommerce-cart .wc-block-cart-items__row a {
  color: var(--color-charcoal);
  text-decoration: none;
}

.woocommerce-cart .wc-block-cart-items__row a:hover {
  text-decoration: underline;
}

.woocommerce-cart .wc-block-cart-items__row [class*="price"],
.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block [class*="price"] {
  color: var(--color-charcoal);
}

.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
  padding: 1.75rem;
  background-color: var(--color-ivory);
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

.woocommerce-cart .wc-block-components-totals-item {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--type-body-md-size);
  color: var(--color-charcoal);
}

.woocommerce-cart .wc-block-components-totals-item:first-child {
  border-top: none;
}

.woocommerce-cart .wc-block-components-quantity-selector {
  background-color: var(--color-ivory);
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

.woocommerce-cart .wc-block-components-button,
.woocommerce-cart .wp-block-woocommerce-cart .wp-block-button__link {
  background-color: var(--color-charcoal);
  color: var(--color-ivory);
  border: 1px solid var(--color-charcoal);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--type-label-lg-size);
  font-weight: 600;
  letter-spacing: var(--type-label-lg-tracking);
  text-transform: var(--type-label-lg-transform);
  padding: 0.9rem 1.75rem;
}

.woocommerce-cart .wc-block-components-button:hover,
.woocommerce-cart .wp-block-woocommerce-cart .wp-block-button__link:hover {
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
}

/* --- 4. My Account screen --------------------------------------------- */
.woocommerce-account .woocommerce {
  font-family: var(--font-body);
  color: var(--color-charcoal);
}

.woocommerce-account .woocommerce-MyAccount-navigation {
  margin-bottom: 2rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  margin: 0;
  padding: 0.95rem 0.5rem;
  font-size: var(--type-label-md-size);
  font-weight: 600;
  line-height: var(--type-label-md-leading);
  letter-spacing: var(--type-label-md-tracking);
  text-transform: var(--type-label-md-transform);
  color: var(--color-charcoal);
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background-color: var(--color-sand);
  color: var(--color-charcoal);
}


/* --- 8. The signed-in account, two columns (ticket 07) ---------------
   WooCommerce floats the menu at 30%, which leaves a wide empty strip
   beside it. The menu takes a fixed width and the content clears menu
   plus gap, and both fall back to one column on a phone. */
@media (min-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    float: left;
    width: 12rem;
    margin-bottom: 2rem;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    margin-left: 14rem;
  }
}

@media (max-width: 767px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: auto;
    margin-bottom: 2rem;
  }

  .woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    margin-left: 0;
  }
}

/* --- 9. The account buttons (ticket 07) ------------------------------
   The account buttons are <button> on some screens and <input
   type="submit"> on others, so one selector only ever caught half of
   them. This covers both, plus the plain .button class. */
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce input[type="button"],
.woocommerce-account .woocommerce input[type="submit"] {
  background-color: var(--color-charcoal);
  color: var(--color-ivory);
  border: 1px solid var(--color-charcoal);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--type-label-lg-size);
  font-weight: 600;
  line-height: var(--type-label-lg-leading);
  letter-spacing: var(--type-label-lg-tracking);
  text-transform: var(--type-label-lg-transform);
  padding: 0.85rem 1.6rem;
  cursor: pointer;
}

.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce input[type="button"]:hover,
.woocommerce-account .woocommerce input[type="submit"]:hover {
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
}

/* --- 10. Search results share the grid furniture (ticket 07) ---------
   The count sits left and the sort control right, the same way the
   world product views lay them out, and the grid clears both. */
.shop-search-results .woocommerce-result-count {
  float: left;
  margin: 0;
  padding: 0.7rem 0;
}

.shop-search-results .woocommerce-ordering {
  float: right;
  margin: 0;
}

.shop-search-results > ul.products,
.shop-search-results > .woocommerce-pagination {
  clear: both;
}

.shop-search-results::after {
  content: "";
  display: table;
  clear: both;
}

/* --- 11. The cart buttons (ticket 07) --------------------------------
   The shop plugin leaves two of its own colours on this screen. The
   "Update cart" control sits grey and inert until a quantity changes,
   and the shipping calculator link paints in the shop plugin's pink.
   Both now read as the house: the live control is a charcoal button,
   and the resting one is quiet sand on a sand line. */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart input[name="update_cart"] {
  background-color: var(--color-charcoal);
  color: var(--color-ivory);
  border: 1px solid var(--color-charcoal);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--type-label-lg-size);
  font-weight: 600;
  line-height: var(--type-label-lg-leading);
  letter-spacing: var(--type-label-lg-tracking);
  text-transform: var(--type-label-lg-transform);
  padding: 0.85rem 1.6rem;
  cursor: pointer;
}

.woocommerce-cart .shipping-calculator-button,
.woocommerce-cart .woocommerce-shipping-calculator p button {
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
  border: 1px solid var(--color-charcoal);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--type-label-md-size);
  font-weight: 600;
  letter-spacing: var(--type-label-md-tracking);
  text-transform: var(--type-label-md-transform);
  padding: 0.6rem 1.1rem;
  text-decoration: none;
  cursor: pointer;
}

.woocommerce-cart .shipping-calculator-button:hover,
.woocommerce-cart .woocommerce-shipping-calculator p button:hover {
  background-color: var(--color-charcoal);
  color: var(--color-ivory);
}

/* --- 12. The 404 button (ticket 07) ----------------------------------
   The "Back to the house" link is an Elementor button, and the house
   button class only ever set the type. This paints it like every other
   primary action: charcoal on ivory, uppercase label type, house hover. */
.elementor .btn-primary {
  display: inline-block;
  background-color: var(--color-charcoal);
  color: var(--color-ivory);
  border: 1px solid var(--color-charcoal);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--type-label-lg-size);
  font-weight: 600;
  line-height: var(--type-label-lg-leading);
  letter-spacing: var(--type-label-lg-tracking);
  text-transform: var(--type-label-lg-transform);
  text-decoration: none;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.elementor .btn-primary:hover,
.elementor .btn-primary:focus {
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
}

/* --- 13. The 404 screen stacks (ticket 07) ---------------------------
   The section holds four parts and the shop plugin leaves it laying
   them out in a row, which squeezes the headline to a few words per
   line. The stack lives in the child theme so one rule holds the
   screen together whichever template serves it. */
.elementor-173 .e-con[class*="e-58cb6a2c"],
.elementor .e-con[class*="e-58cb6a2c"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 46rem;
  margin-inline: auto;
  padding: 7rem 1.5rem 8rem;
}

.elementor-173 .e-con[class*="e-58cb6a2c"] > *,
.elementor .e-con[class*="e-58cb6a2c"] > * {
  flex: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* The headline keeps a measure of its own so the line breaks read well. */
.elementor-173 .e-con[class*="e-58cb6a2c"] > h1,
.elementor .e-con[class*="e-58cb6a2c"] > h1 {
  max-width: 34rem;
}

/* The button sits under the copy, not stretched across the column. */
.elementor-173 .e-con[class*="e-58cb6a2c"] > a,
.elementor .e-con[class*="e-58cb6a2c"] > a {
  width: auto;
}

@media (max-width: 767px) {
  .elementor-173 .e-con[class*="e-58cb6a2c"],
  .elementor .e-con[class*="e-58cb6a2c"] {
    gap: 1.25rem;
    padding: 4rem 1.25rem 4.5rem;
  }
}

.woocommerce-cart button[name="update_cart"]:disabled,
.woocommerce-cart input[name="update_cart"]:disabled {
  background-color: var(--color-sand);
  color: var(--color-charcoal);
  border: 1px solid var(--color-border);
  opacity: 1;
  cursor: default;
}
/* --- 14. The cart checkout button (ticket 07) -------------------------
   This cart renders the classic table, so the block-cart rule in
   section 3 never reaches the button under the totals. Without it the
   shop plugin paints the checkout button its own purple, which is the
   loudest thing on a screen the house keeps quiet. It takes the same
   shape the account buttons in section 9 use, and the same hover flip.
---------------------------------------------------------------------- */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  background-color: var(--color-charcoal);
  color: var(--color-ivory);
  border: 1px solid var(--color-charcoal);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: var(--type-label-lg-size);
  font-weight: 600;
  letter-spacing: var(--type-label-lg-tracking);
  text-transform: var(--type-label-lg-transform);
  text-align: center;
  padding: 1.1rem 1.6rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
}
/* --- 5. Shop screen corrections (ticket 07) --------------------------- */
/* The kit's accent colour reaches the price in every product loop; the
   house price is charcoal text. The rule in section 1 already says so,
   but the shop plugin paints an olive colour with more classes behind it,
   so on a product archive it outranks a plain "ul.products" selector.
   This repeats the same house value with the extra class, which is what
   makes the price read the same on a world view, a search result and a
   [products] grid. */
.woocommerce ul.products li.product span.price,
.woocommerce ul.products li.product .price {
  color: var(--color-charcoal) !important;
}

/* The 404 screen carries its own headline; the theme's page title would
   only repeat it. */
.page-id-173 h1.entry-title {
  display: none;
}

/* =========================================================================
   CONTACT FORM - ticket 11 (Contact page)
   The free contact form (Contact Form 7) is dressed to the house input
   spec: ivory field, sand hairline, 2px corners, charcoal text, uppercase
   label tier, charcoal send button that flips on hover. Every value
   reads the child theme variables; nothing is typed twice.
   ========================================================================= */

.nn-contact-form,
.nn-contact-form .wpcf7 form {
  display: block;
  width: 100%;
}

.nn-contact-form .nn-field {
  display: block;
  margin-bottom: 1.35rem;
}

.nn-contact-form .nn-label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--type-label-sm-size);
  font-weight: var(--type-label-sm-weight);
  line-height: var(--type-label-sm-leading);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: var(--type-label-sm-transform);
  color: var(--color-charcoal);
}

.nn-contact-form input[type="text"],
.nn-contact-form input[type="email"],
.nn-contact-form input[type="tel"],
.nn-contact-form input[type="url"],
.nn-contact-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-leading);
}

.nn-contact-form textarea {
  min-height: 9rem;
  resize: vertical;
}

.nn-contact-form input[type="text"]:focus,
.nn-contact-form input[type="email"]:focus,
.nn-contact-form input[type="tel"]:focus,
.nn-contact-form input[type="url"]:focus,
.nn-contact-form textarea:focus {
  outline: none;
  border-color: var(--color-charcoal);
  box-shadow: none;
}

.nn-contact-form input[type="submit"] {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.95rem 2rem;
  border: 1px solid var(--color-charcoal);
  border-radius: 2px;
  background-color: var(--color-charcoal);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: var(--type-label-lg-size);
  font-weight: var(--type-label-lg-weight);
  line-height: var(--type-label-lg-leading);
  letter-spacing: var(--type-label-lg-tracking);
  text-transform: var(--type-label-lg-transform);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nn-contact-form input[type="submit"]:hover,
.nn-contact-form input[type="submit"]:focus {
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
}

/* The form's own response lines keep the house voice. */
.nn-contact-form .wpcf7-response-output {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background-color: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-leading);
}

.nn-contact-form .wpcf7-not-valid-tip {
  font-family: var(--font-body);
  font-size: var(--type-body-sm-size);
  color: var(--color-error);
}

.nn-contact-form .wpcf7 form .wpcf7-response-output.wpcf7-validation-errors,
.nn-contact-form .wpcf7 form .wpcf7-response-output.wpcf7-acceptance-required {
  border-color: var(--color-error);
}

@media (max-width: 767px) {
  .nn-contact-form input[type="submit"] {
    width: 100%;
  }
}


/* =========================================================================
   SPACING SCALE
   One 4px-based ladder. Every gap, pad and section rhythm of the house
   reads from these steps, so later screens inherit the same air.
   Steps: 1=4 2=8 3=12 4=16 5=24 6=32 7=48 8=64 9=96 (pixels).
   ========================================================================= */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Rhythm roles, so a section breathes the same way everywhere. */
  --section-pad-y: var(--space-8);
  --section-pad-y-tight: var(--space-6);
  --grid-gutter: var(--space-5);
  --stack-gap: var(--space-4);
  --label-gap: var(--space-2);
}

@media (max-width: 767px) {
  :root {
    --section-pad-y: var(--space-6);
    --section-pad-y-tight: var(--space-5);
    --grid-gutter: var(--space-4);
  }
}

/* Two helper classes later screens can attach in the builder's own
   CSS Classes field instead of typing spacing by hand. */
.nn-section {
  padding-block: var(--section-pad-y);
}

.nn-stack > * + * {
  margin-top: var(--stack-gap);
}