/* ==========================================================================
   Heritage Table — design tokens for Annie's Chocolates.
   The single source of truth for colour, type and shape across the site.
   Mirrors the active Novamira DESIGN.md; change both together.
   ========================================================================== */

:root {
  /* Ground and surface */
  --ac-bg:          #F4E9D8;
  --ac-surface:     #FBF6EE;
  --ac-surface-alt: #EFE7DA;
  --ac-field:       #EDE2CE;  /* input ground: warmer than the page, never white */
  --ac-story-ground:#3A2418;
  --ac-panel-warm:  #ECE0CB;

  /* Ink */
  --ac-ink:        #2C1C14;
  --ac-ink-soft:   #6B5440;
  --ac-ink-muted:  #8A7257;
  --ac-ink-deep:   #2A1A10;
  --ac-ink-body:   #5B4636;
  --ac-on-ink:     #FBF8F3;

  /* Accent — brass. The only accent in the system. */
  --ac-accent:       #C2982F;
  --ac-accent-deep:  #A9742A;
  --ac-accent-light: #E0B455;

  /* Rules */
  --ac-line:      #E7DCC9;
  --ac-line-warm: #DDCAAB;
  --ac-line-head: #E7D8C0;

  /* On dark grounds */
  --ac-on-dark:      #FBF3E6;
  --ac-on-dark-soft: #E3D3BD;

  /* Type */
  --ac-font-heading: 'Cormorant Garamond', Georgia, serif;
  --ac-font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ac-font-label:   'Josefin Sans', 'Work Sans', sans-serif;
  --ac-font-script:  'Eyesome Script', 'Cormorant Garamond', Georgia, serif;

  /* Spacing */
  --ac-space-xs:      6px;
  --ac-space-sm:     14px;
  --ac-space-md:     24px;
  --ac-space-lg:     40px;
  --ac-space-xl:     70px;
  --ac-space-section: 90px;

  /* Shape — one rule, held everywhere */
  --ac-radius-button: 2px;
  --ac-radius-card:   8px;
  --ac-radius-input:  6px;
  --ac-radius-pill:   30px;
  /* Alias: shop.css and cart.css were written against this shorter name. */
  --ac-radius-btn:    2px;

  /* Layout */
  --ac-max:     1320px;
  --ac-gutter:  40px;

  /* Elevation — warm-tinted, never pure black */
  --ac-shadow-mega: 0 22px 40px rgba(44, 28, 20, .16);
  --ac-shadow-card: 0 14px 30px rgba(44, 28, 20, .10);
}

@media (max-width: 1010px) {
  :root { --ac-gutter: 22px; --ac-space-section: 60px; }
}

/* --------------------------------------------------------------------------
   Brand faces. Eyesome is licensed to Annie's and self-hosted; it is used
   for the tagline lockup only.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Eyesome Script';
  src: url('fonts/Eyesome-Script.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
  background: var(--ac-bg);
  color: var(--ac-ink);
  font-family: var(--ac-font-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ac-accent); color: var(--ac-ink); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ac-font-heading);
  font-weight: 500;
  line-height: 1.08;
  color: var(--ac-ink);
  letter-spacing: -.005em;
}

h1 { font-size: clamp(38px, 5.2vw, 62px); }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
h3 { font-size: clamp(21px, 2vw, 26px); font-weight: 600; }

p { max-width: 68ch; }

/* The 68ch measure above caps a paragraph's width, which silently pushes it to
   the left of a centred block. Anything centred needs the auto inline margins
   back, or the eyebrow sits off to one side while the heading stays centred. */
.ac-hero p,
.ac-shophead p,
.ac-bb__hero p,
.ac-locs__hero p,
.ac-apply-done p,
.ac-apply__foot,
.ac-bb__ready,
.ac-cart__empty,
.ac-empty { margin-inline: auto; }

a { color: inherit; }

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */

/* Uppercase label / eyebrow */
.ac-label {
  font-family: var(--ac-font-label);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ac-accent-deep);
}
.ac-on-dark .ac-label { color: var(--ac-accent-light); }

/* Tagline */
.ac-script {
  font-family: var(--ac-font-script);
  color: #B8893B;
  white-space: nowrap;
}

/* Buttons */
.ac-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-block;
  font-family: var(--ac-font-label);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 16px 32px;
  border: 1px solid transparent;
  border-radius: var(--ac-radius-button);
  background: var(--ac-ink);
  color: var(--ac-on-ink);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s, background .25s, color .25s, border-color .25s;
}
.ac-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  transform: translateY(-2px);
  background: #3A2418;
  color: var(--ac-on-ink);
}

.ac-btn--ghost {
  background: transparent;
  color: var(--ac-ink);
  border-color: var(--ac-line-warm);
}
.ac-btn--ghost:hover { background: transparent; color: var(--ac-ink); border-color: var(--ac-accent); }

/* On espresso grounds the primary flips to brass */
.ac-on-dark .ac-btn,
.ac-btn--brass {
  background: var(--ac-accent);
  color: var(--ac-ink);
  font-weight: 600;
}
.ac-on-dark .ac-btn:hover,
.ac-btn--brass:hover { background: var(--ac-accent-light); color: var(--ac-ink); }

/* Panel card */
.ac-panel {
  background: var(--ac-surface);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-card);
  padding: 34px;
}

/* Product card — flat on the ground, depth earned on hover */
.ac-card { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.ac-card:hover { transform: translateY(-6px); }
.ac-card__media { overflow: hidden; border-radius: 3px; background: var(--ac-surface-alt); }
.ac-card__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ac-card:hover .ac-card__media img { transform: scale(1.06); }
.ac-card__foot { display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--ac-line); padding-top: 14px; margin-top: 14px; }

/* Form fields */
.ac-field,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  width: 100%;
  padding: 13px 14px;
  background: var(--ac-field);
  border: 1px solid var(--ac-line-warm);
  border-radius: var(--ac-radius-input);
  font-family: var(--ac-font-body);
  font-size: 14px;
  color: var(--ac-ink);
  outline: none;
  transition: border-color .2s;
}
.ac-field:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--ac-accent);
  box-shadow: 0 0 0 3px rgba(194, 152, 47, .18);
}
.ac-field-label {
  display: block;
  font-family: var(--ac-font-label);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ac-accent-deep);
  margin-bottom: 6px;
}

/* Status pill */
.ac-pill {
  display: inline-block;
  font-family: var(--ac-font-label);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--ac-radius-pill);
}

/* Dark ground helper */
.ac-on-dark { background: var(--ac-ink); color: var(--ac-on-dark); }
.ac-on-dark h1, .ac-on-dark h2, .ac-on-dark h3 { color: var(--ac-on-dark); }
.ac-on-dark p { color: var(--ac-on-dark-soft); }

/* Shell */
.ac-wrap { max-width: var(--ac-max); margin: 0 auto; padding-left: var(--ac-gutter); padding-right: var(--ac-gutter); }
.ac-section { padding-top: var(--ac-space-section); padding-bottom: var(--ac-space-section); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Image sizing, re-asserted.

   Elementor ships `.elementor img { height: auto }` at specificity (0,1,1),
   which quietly beats or ties every `.class` and `.class img` rule that gives
   an image a height. The symptom is subtle and easy to miss: images fall back
   to their own aspect ratio, frames collapse, and deliberately overlapping
   compositions come apart. Each selector below is (0,2,0) or higher so it wins
   on specificity rather than on load order.
   -------------------------------------------------------------------------- */

.ac-story__figures .ac-story__back { width: 78%; height: 78%; }
.ac-story__figures .ac-story__front { width: 48%; height: 52%; }
.ac-heroband .ac-heroband__frame img { width: 100%; height: 100%; }
.ac-about .ac-about__heroimg img { width: 100%; height: 100%; }
.ac-about .ac-about__bookimg img { width: 100%; height: 100%; }
.ac-prod .ac-prod__media img { width: 100%; height: 100%; }
.ac-bb__card .ac-bb__media img { width: 100%; height: 100%; }
.ac-mega__cat .ac-mega__thumb img { width: 100%; height: 100%; }
.ac-mega .ac-mega__feature img { width: 100%; height: 100%; }
.ac-reorder__row .ac-reorder__img img { width: 54px; height: 54px; }
.ac-cart .woocommerce-mini-cart-item img { width: 64px; height: 64px; }

/* --------------------------------------------------------------------------
   Product grid, reclaimed from WooCommerce's float layout.

   WooCommerce still ships a float grid, and it sets the card width three times
   over at escalating specificity:

     .woocommerce ul.products li.product              22.05%
     .woocommerce ul.products.columns-3 li.product    30.75%   (0,4,2)
     .woocommerce ul.products[class*=columns-] li     48%      (small screens)

   Inside a CSS grid those percentages resolve against the grid track, so every
   card renders at a third of its own column and the shop looks broken. The
   layout here is grid, not float, so this is not a specificity disagreement to
   win politely: the vendor rules are simply not wanted. Overriding outright is
   clearer than a four-class selector arms race that the next WooCommerce
   release would win back.
   -------------------------------------------------------------------------- */

ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}

ul.products { margin: 0 !important; }

/* WooCommerce's float grid clears itself with ::before and ::after. In a grid
   container those generated boxes become grid items in their own right, so the
   first cell renders empty and every card shifts one place. */
ul.products::before,
ul.products::after { content: none !important; display: none !important; }
ul.products li.product .ac-prod { width: 100%; }


/* ==========================================================================
   Form fields — one appearance, everywhere

   Fields were arriving from four places with four looks: the theme's own
   `.ac-field`, WooCommerce's classic forms, the cart/checkout blocks, and
   Gravity Forms. Anything the theme did not style fell back to the browser
   default — stark white, square, system font. This is the single source of
   truth; every field on the site is off-white, softly rounded and warm-ruled.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
  background-color: var(--ac-field);
  border: 1px solid var(--ac-line-warm);
  border-radius: var(--ac-radius-input);
  padding: 13px 14px;
  font-family: var(--ac-font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ac-ink);
  box-shadow: none;
  transition: border-color .18s, box-shadow .18s;
}
textarea { min-height: 110px; resize: vertical; }
select {
  padding-right: 34px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A7257' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ac-accent);
  box-shadow: 0 0 0 3px rgba(194, 152, 47, .16);
}

input::placeholder,
textarea::placeholder { color: #9A876C; opacity: 1; }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--ac-accent-deep); width: auto; }

/* Vendors that ship their own field styling and outrank the above. */
.gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.gform_wrapper textarea,
.gform_wrapper select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce .quantity input.qty,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--ac-field) !important;
  border: 1px solid var(--ac-line-warm) !important;
  border-radius: var(--ac-radius-input) !important;
  font-family: var(--ac-font-body) !important;
  font-size: 15px !important;
  color: var(--ac-ink) !important;
  box-shadow: none !important;
}
.select2-container--default .select2-selection--single {
  height: auto;
  padding: 8px 4px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5;
  color: var(--ac-ink);
}
.select2-dropdown {
  background: var(--ac-field);
  border-color: var(--ac-line-warm);
  border-radius: var(--ac-radius-input);
}

/* Search fields keep the rounded pill they already had. */
.ac-filters__search .ac-field { border-radius: var(--ac-radius-input); }