/*
 * Base — resets, typography, layout primitives.
 * Regalo Natale / "Il Formulario"
 */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Paper grain — a fine noise texture over the cream ground, giving the
 * "formulary paper" world actual tooth instead of a flat fill. Encoded
 * as an inline SVG filter so it costs no extra request and scales
 * cleanly at any zoom level; opacity is kept low so it reads as
 * texture, not visible speckle.
 */
body.rn-formulary {
  background-color: var(--rn-cream);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--rn-ink);
  font-family: var(--rn-font-display);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.rn-formulary a {
  text-decoration: none;
}

/*
 * :where() keeps this rule's specificity at zero classes/elements for
 * the color declaration, so any component-level selector (even a
 * single class like .rn-seal-button) reliably wins without depending
 * on stylesheet load order. Without this, "body.rn-formulary a"
 * (2 elements + 1 class) outranks single-class component rules and
 * silently repaints buttons, footer links, and the wordmark bordeaux.
 */
:where(body.rn-formulary) a {
  color: var(--rn-bordeaux-700);
}

:where(body.rn-formulary) a:hover,
:where(body.rn-formulary) a:focus {
  color: var(--rn-bordeaux-500);
}

body.rn-formulary :focus-visible {
  outline: 2px solid var(--rn-bordeaux-500);
  outline-offset: 3px;
}

/*
 * Display type. The previous scale topped out at 3.6rem with near-zero
 * tracking, which read as a generic serif page rather than an
 * editorial one: the jump from body to heading was too small to carry
 * hierarchy on its own, so every section leaned on a label above the
 * heading to signal importance. A wider scale with negative tracking
 * at the large end lets the headings do that work themselves.
 * optical-sizing + text-wrap:balance are what keep a variable serif
 * from looking like a system font at display sizes.
 */
/*
 * :where() around the element selectors keeps this block's specificity
 * at a single class (.rn-formulary), so ANY component class can
 * override it without a specificity fight. Without :where(), a rule
 * like ".rn-formulary h2" (0,1,1) outranked component classes such as
 * ".rn-footer__col-title" (0,1,0) — which silently repainted the
 * footer column headings green-on-green and blew them up to display
 * size, because those labels happen to be marked up as <h2>. Any
 * heading used as a small label anywhere in the theme had the same
 * problem waiting to happen.
 */
.rn-formulary :where(h1, h2, h3, h4) {
  font-family: var(--rn-font-display);
  font-weight: 600;
  color: var(--rn-green-900);
  font-optical-sizing: auto;
  text-wrap: balance;
  margin: 0 0 var(--rn-space-sm);
}

.rn-formulary :where(h1) {
  font-size: clamp(2.9rem, 6.2vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.028em;
}

.rn-formulary :where(h2) {
  font-size: clamp(2.1rem, 3.4vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.rn-formulary :where(h3) {
  font-size: clamp(1.35rem, 1.6vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/*
 * Prices and any figure the eye compares column-to-column get tabular
 * figures, so digits line up between cards instead of shifting with
 * the serif's default proportional numerals.
 */
.rn-formulary .price,
.rn-formulary .amount,
.rn-formulary .woocommerce-Price-amount,
.rn-formulary .rn-ledger-tag {
  font-variant-numeric: tabular-nums;
}

/*
 * Browser-owned surfaces. These ship with defaults that belong to no
 * design system — theming them is what separates a built page from an
 * assembled one.
 */
.rn-formulary ::selection {
  background: var(--rn-bordeaux-700);
  color: var(--rn-cream);
}

.rn-formulary {
  caret-color: var(--rn-bordeaux-600);
  scrollbar-color: var(--rn-gold-500) var(--rn-cream-deep);
  scrollbar-width: thin;
}

.rn-formulary ::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

.rn-formulary ::-webkit-scrollbar-track {
  background: var(--rn-cream-deep);
}

.rn-formulary ::-webkit-scrollbar-thumb {
  background: var(--rn-gold-500);
  border: 3px solid var(--rn-cream-deep);
  border-radius: 999px;
}

.rn-formulary ::-webkit-scrollbar-thumb:hover {
  background: var(--rn-gold-600);
}

/*
 * Underlines belong to links inside running text, not to navigation.
 * Scoped to prose containers only: an earlier `a:not([class])` version
 * of this rule also matched the main nav, breadcrumb, and category
 * tile links (WordPress renders those anchors without a class), so
 * every one of them picked up a permanent underline.
 */
.rn-formulary .woocommerce-Tabs-panel a,
.rn-formulary .entry-content a,
.rn-formulary .rn-footer__legal a,
.rn-formulary .woocommerce-product-details__short-description a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--rn-gold-500);
  transition: text-decoration-color var(--rn-dur-fast) var(--rn-ease);
}

.rn-formulary .woocommerce-Tabs-panel a:hover,
.rn-formulary .entry-content a:hover,
.rn-formulary .rn-footer__legal a:hover,
.rn-formulary .woocommerce-product-details__short-description a:hover {
  text-decoration-color: var(--rn-bordeaux-600);
}

.rn-container {
  width: 100%;
  max-width: var(--rn-container);
  margin-inline: auto;
  padding-inline: var(--rn-space-md);
}

.rn-container--wide {
  max-width: var(--rn-container-wide);
}

.rn-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.rn-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rn-green-900);
  color: var(--rn-on-green);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  font-family: var(--rn-font-label);
}

.rn-skip-link:focus {
  left: var(--rn-space-sm);
  top: var(--rn-space-sm);
}

/* Storefront leaves some default chrome behind; neutralise what the
   formulary world replaces so old and new rules never fight visibly. */
.rn-formulary .site-header,
.rn-formulary .site-footer,
.rn-formulary #content {
  background: transparent;
}

/*
 * Storefront's own style.css hardcodes
 * ".right-sidebar .content-area { width: 73.913%; float: left; ... }"
 * because it always assumes a sidebar column exists, even though we
 * unregister the sidebar action in functions.php. That left a
 * permanently narrow, floated content column with dead space on the
 * right on every shop/category/product page. There is no supported
 * Storefront filter for this (only a left/right choice, no "full"
 * option in the customizer), so it is overridden directly here.
 */
.rn-formulary.right-sidebar .content-area,
.rn-formulary.left-sidebar .content-area {
  width: 100%;
  float: none;
  margin-right: 0;
}

/*
 * The float/width reset above only stopped Storefront's sidebar rule
 * from squeezing the column — it never gave the shop/category
 * archive content any horizontal breathing room. #primary/#main sit
 * flush edge-to-edge (verified: 0 padding, left:0/right:viewport
 * width at every size), so the H1, breadcrumb-adjacent sorting bar,
 * and product grid all touch the browser edge with only each
 * product card's own small internal padding standing between the
 * text and the edge. This wraps the whole shop/category/product
 * content column the same way .rn-container does everywhere else on
 * the site (max-width + auto side margins + real inline padding),
 * without touching #primary's own layout role.
 */
.rn-formulary.right-sidebar .content-area,
.rn-formulary.left-sidebar .content-area,
.rn-formulary #primary.content-area {
  max-width: var(--rn-container-wide);
  margin-inline: auto;
  padding-inline: var(--rn-space-md);
}

@media (max-width: 480px) {
  .rn-formulary #primary.content-area {
    padding-inline: 1.9rem;
  }
}

.rn-formulary select,
.rn-formulary input[type='text'],
.rn-formulary input[type='email'],
.rn-formulary input[type='tel'],
.rn-formulary input[type='number'],
.rn-formulary input[type='password'],
.rn-formulary textarea {
  font-family: var(--rn-font-label);
  border: 1px solid var(--rn-paper-line);
  background: #fff;
  color: var(--rn-ink);
  border-radius: 2px;
  padding: 0.65em 0.85em;
}

.rn-formulary input:focus,
.rn-formulary textarea:focus,
.rn-formulary select:focus {
  border-color: var(--rn-bordeaux-500);
}

/*
 * WooCommerce default chrome — breadcrumbs, archive title, result
 * count/sorting, product tabs, "Category:" meta line. These render
 * with zero theming out of the box (Storefront's own styles are quite
 * bare), so on first look they read like an unfinished/default site.
 * Restyled here to match the ledger/formulary voice used everywhere
 * else: small tracked-caps labels, thin gold hairlines, serif display
 * type for headings.
 */

.woocommerce-breadcrumb {
  font-family: var(--rn-font-label);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--rn-ink-soft);
  margin-bottom: var(--rn-space-md);
}

.woocommerce-breadcrumb a {
  color: var(--rn-green-800);
}

.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus {
  color: var(--rn-bordeaux-600);
}

.woocommerce-breadcrumb .breadcrumb-separator {
  color: var(--rn-gold-500);
  margin-inline: 0.35em;
}

.woocommerce-products-header__title.page-title {
  font-family: var(--rn-font-display);
  color: var(--rn-green-900);
}

.woocommerce-products-header {
  margin-bottom: var(--rn-space-sm);
}

.woocommerce-result-count {
  font-family: var(--rn-font-label);
  font-size: 0.8rem;
  color: var(--rn-ink-soft);
  margin: 0;
}

.woocommerce-ordering select {
  font-family: var(--rn-font-label);
  font-size: 0.8rem;
}

/*
 * .woocommerce-notices-wrapper is ALWAYS present in the markup, even
 * with nothing to show (WooCommerce renders it empty and only fills
 * it via AJAX/PHP when there's a real notice). Styling it directly
 * left a visible empty bordeaux-edged bar on every page load before
 * any notice existed. Style only the actual message elements inside
 * it, never the empty wrapper itself.
 */
/*
 * Specificity note (same issue as the add-to-cart button below in
 * product.css): Storefront's own woocommerce.css also styles
 * .woocommerce-info/.woocommerce-noreviews with a blue/green
 * background, at equal or higher specificity, and that file loads
 * AFTER this one in the enqueue order — so without a specificity
 * boost its colours won regardless of what's declared here. Doubling
 * each class name keeps the same match but wins on specificity.
 */
.woocommerce-info.woocommerce-info,
.woocommerce-message.woocommerce-message,
.woocommerce-error.woocommerce-error,
.woocommerce-noreviews.woocommerce-noreviews {
  /*
   * Storefront renders a small icon (::before, an absolutely
   * positioned dashicon glyph) inside these boxes at a fixed left
   * offset of ~21px. This rule's own padding-left needs to clear
   * that icon's width, or the message text starts underneath it.
   */
  font-family: var(--rn-font-label);
  font-size: 0.86rem;
  background: var(--rn-cream);
  border: 1px solid var(--rn-gold-400);
  color: var(--rn-ink);
  padding: 0.9rem 1.1rem 0.9rem 2.7rem;
  list-style: none;
  margin-bottom: var(--rn-space-md);
}

/* Status is carried by a top hairline in the accent hue rather than a
   thick coloured left border (the stock "callout" tell). */
.woocommerce-info.woocommerce-info,
.woocommerce-noreviews.woocommerce-noreviews {
  border-top: 2px solid var(--rn-green-700);
}

.woocommerce-message.woocommerce-message {
  border-top: 2px solid var(--rn-gold-600);
}

.woocommerce-error.woocommerce-error {
  border-top: 2px solid var(--rn-bordeaux-600);
}

.woocommerce-message .button,
.woocommerce-info .button {
  font-family: var(--rn-font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rn-bordeaux-700);
  border-bottom: 1px solid var(--rn-bordeaux-600);
  padding: 0;
  background: none;
}

/* ---------- Product tabs (Descrizione / Recensioni) ---------- */

.woocommerce-tabs.wc-tabs-wrapper {
  /*
   * Not inside .rn-container: WooCommerce's product tabs render
   * directly under .rn-product-hero__summary's own flow, outside any
   * container element, so they had zero horizontal padding and sat
   * flush against the viewport edge on narrow screens. Padding added
   * explicitly here.
   */
  border-top: 1px solid var(--rn-paper-line);
  padding: var(--rn-space-md) var(--rn-space-md) 0;
}

ul.tabs.wc-tabs {
  display: flex;
  gap: var(--rn-space-lg);
  list-style: none;
  margin: 0 0 var(--rn-space-md);
  padding: 0;
  border-bottom: 1px solid var(--rn-paper-line);
}

ul.tabs.wc-tabs li {
  margin: 0;
}

ul.tabs.wc-tabs li a {
  display: inline-block;
  font-family: var(--rn-font-label);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rn-ink-soft);
  padding-bottom: 0.7rem;
  border-bottom: 2px solid transparent;
}

ul.tabs.wc-tabs li.active a,
ul.tabs.wc-tabs li a:hover,
ul.tabs.wc-tabs li a:focus {
  color: var(--rn-bordeaux-600);
  border-bottom-color: var(--rn-bordeaux-600);
}

.woocommerce-Tabs-panel h2 {
  font-size: 1.5rem;
}

.woocommerce-Tabs-panel {
  font-family: var(--rn-font-display);
  color: var(--rn-ink);
  max-width: 60ch;
}

/* ---------- "Category: X" product meta line ---------- */

.product_meta > span {
  display: block;
}

.product_meta .posted_in,
.product_meta .sku_wrapper,
.product_meta .tagged_as {
  font-family: var(--rn-font-label);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rn-ink-soft);
}

/* ---------- Star ratings ---------- */

.star-rating {
  color: var(--rn-gold-600);
}

.woocommerce-review__author,
.comment-form-rating label {
  font-family: var(--rn-font-label);
}

/* ============================================================
 * Storefront leftovers that visibly break the design
 * ============================================================ */

/*
 * 1. Font Awesome placeholder glyphs.
 *
 * Storefront's icons.css injects decorative icons as
 * `content: "\fXXX"` with `font-family: "Font Awesome 5 Free"` — a
 * font this install never loads. The browser therefore substitutes a
 * fallback character, which is where the stray ">" next to the active
 * product tab and the junk arrow after "Visualizza carrello" came
 * from. This design draws its own icons, so these decorative
 * pseudo-elements are removed rather than re-fonted.
 */
.rn-formulary .wc-forward::after,
.rn-formulary .woocommerce-Button--next::after,
.rn-formulary .woocommerce-tabs ul.tabs li::after,
.rn-formulary .woocommerce-tabs ul.tabs > li.active::after,
.rn-formulary .added_to_cart::after {
  content: none !important;
  display: none !important;
}

/*
 * 2. Focus ring.
 *
 * Storefront sets `a:focus, button:focus { outline: 2px solid #7f54b3 }`
 * — WooCommerce purple, from outside this palette, and on :focus
 * rather than :focus-visible so it also appeared on plain mouse
 * clicks (the purple box seen around "Aggiungi al carrello"). Replaced
 * with a palette focus ring that only shows for keyboard users, while
 * keeping focus clearly visible for accessibility.
 */
/*
 * .rn-formulary is doubled on purpose. Storefront also ships an INLINE
 * stylesheet (always last in the cascade) containing
 * `.button.alt:focus { outline-color: #7f54b3 }` at three classes of
 * specificity, which outranked a single-class version of these rules
 * and kept repainting the add-to-cart button's focus ring purple.
 * Repeating the class costs nothing, changes nothing about what is
 * matched, and wins cleanly without !important.
 */
.rn-formulary.rn-formulary a:focus,
.rn-formulary.rn-formulary button:focus,
.rn-formulary.rn-formulary input:focus,
.rn-formulary.rn-formulary textarea:focus,
.rn-formulary.rn-formulary select:focus {
  outline: none;
}

.rn-formulary.rn-formulary a:focus-visible,
.rn-formulary.rn-formulary button:focus-visible,
.rn-formulary.rn-formulary input:focus-visible,
.rn-formulary.rn-formulary textarea:focus-visible,
.rn-formulary.rn-formulary select:focus-visible {
  outline: 2px solid var(--rn-bordeaux-600);
  outline-color: var(--rn-bordeaux-600);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Storefront also greys the field background on focus; keep our own. */
.rn-formulary a:focus,
.rn-formulary .input-text:focus {
  background-color: transparent;
}

.rn-formulary input:focus,
.rn-formulary textarea:focus {
  background-color: #fff;
}

/*
 * 3. "Visualizza carrello" confirmation link.
 *
 * WooCommerce appends this after an AJAX add-to-cart, and Storefront
 * styles .added_to_cart as a full dark button (#43454b) — the black
 * bar that appeared under the product card. Restyled as a quiet inline
 * confirmation that matches the card's own text action.
 */
.rn-formulary .added_to_cart {
  display: inline-block;
  background: none !important;
  background-color: transparent !important;
  border: 0;
  border-bottom: 1px solid var(--rn-green-700);
  border-radius: 0;
  padding: 0 0 1px;
  margin-top: 0.35rem;
  color: var(--rn-green-800) !important;
  font-family: var(--rn-font-label);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-shadow: none;
  width: auto;
}

.rn-formulary .added_to_cart:hover,
.rn-formulary .added_to_cart:focus-visible {
  color: var(--rn-bordeaux-700) !important;
  border-bottom-color: var(--rn-bordeaux-600);
}

/*
 * 4. Product tabs layout.
 *
 * Storefront floats the tab list into a narrow 30% left column with
 * the panel in a 65% right column, which read as a broken sidebar
 * beside the description. Rebuilt as a single horizontal tab row with
 * the panel below it, full width.
 */
.rn-formulary .woocommerce-tabs ul.tabs,
.rn-formulary .woocommerce-tabs .panel {
  width: 100%;
  float: none;
  margin-right: 0;
}

.rn-formulary .woocommerce-tabs ul.tabs {
  border-top: 0;
}

.rn-formulary .woocommerce-tabs ul.tabs li {
  position: static;
  background: none;
  border: 0;
  padding: 0;
}

.rn-formulary .woocommerce-tabs .panel {
  margin-bottom: var(--rn-space-lg);
  margin-top: 0;
}