/* ==========================================================================
   OMONYMA — Design tokens + base reset
   Ported directly from omonyma-template-03-with-photos.html's own :root
   and base reset. There is no parent theme to isolate from any more, so
   this is the same plain `body { ... }` / `* { margin:0; padding:0 }`
   the original file used — not a workaround, the actual original rule.
   ========================================================================== */

:root {
  --color-bg: #F7F5F1;
  --color-bg-alt: #EFEBE4;
  --color-ink: #1A1A18;
  --color-ink-soft: #4A4844;
  --color-line: rgba(26, 26, 24, 0.15);
  --color-footer-bg: #14130F;

  --font-display: "Bodoni Moda", Georgia, serif;
  --font-ui: "Inter", -apple-system, sans-serif;
  --tracking-label: 0.14em;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --container-max: 1600px;
  --container-pad-desktop: 3rem;
  --container-pad-mobile: 1.25rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }

/* WooCommerce wraps the current/sale price in <ins> (and the original
   in <del>) — browsers underline <ins> by default. Removed globally
   so every sale price site-wide (cart, checkout, shop, product,
   anywhere) matches the plain look, not just the pages that already
   had their own override. */
.price ins, .price-wrap ins { text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.omonyma-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-desktop);
}

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

/* Generic "image fills its box, cropped not stretched" utility — used
   by the homepage sections, the About page team photos, anywhere a
   photo needs to fill an arbitrary container cleanly. */
.omh-imgbox { position: relative !important; overflow: hidden !important; background: var(--color-bg-alt) !important; }
.omh-imgbox img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 1.1s var(--ease); }

/* ==========================================================================
   ABOUT / CONTACT PAGE TEMPLATES
   (Phase 1 keeps these — plain custom classes, never depended on Woodmart)
   ========================================================================== */
.omonyma-page-hero {
  padding: 7rem var(--container-pad-desktop) 4rem;
  text-align: center;
}
.omonyma-page-hero h1 {
  font-size: clamp(2.5rem, 1.8rem + 3vw, 5rem);
  line-height: 0.95;
}
.omonyma-page-hero .lede {
  font-size: 1.1rem; color: var(--color-ink-soft);
  max-width: 620px; margin: 1.5rem auto 0;
}

.omonyma-about-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  align-items: center;
  max-width: var(--container-max); margin-inline: auto;
  padding: 4rem var(--container-pad-desktop);
}
.omonyma-about-block img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.omonyma-about-block .copy p { color: var(--color-ink-soft); line-height: 1.7; margin-bottom: 1.2rem; }

.omonyma-contact-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  max-width: var(--container-max); margin-inline: auto;
  padding: 4rem var(--container-pad-desktop) 6rem;
}
.omonyma-contact-form input,
.omonyma-contact-form textarea {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--color-line);
  padding: 0.8rem 0; margin-bottom: 1.6rem;
  font-family: var(--font-ui); font-size: 1rem; color: var(--color-ink);
}
.omonyma-contact-form button {
  background: var(--color-ink); color: var(--color-bg);
  border: none; padding: 1rem 2rem;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
}
.omonyma-contact-info .item { margin-bottom: 2rem; }
.omonyma-contact-info .label {
  font-size: 0.72rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-ink-soft);
  margin-bottom: 0.4rem;
}

/* Editor-driven content (Gutenberg blocks on any standard page) */
.omonyma-entry {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 2rem var(--container-pad-desktop) 6rem;
}
.omonyma-entry > * + * { margin-top: 2.5rem; }
.omonyma-entry p {
  font-size: 1.05rem; line-height: 1.75; color: var(--color-ink-soft);
  max-width: 720px;
}
.omonyma-entry img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; display: block; }
.omonyma-entry .wp-block-media-text {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}

@media (max-width: 1024px) {
  .omonyma-about-block, .omonyma-contact-wrap { grid-template-columns: 1fr; padding-inline: 1.25rem; gap: 2.5rem; }
  .omonyma-entry { padding-inline: 1.25rem; }
  .omonyma-entry .wp-block-media-text { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 640px) {
  :root { --container-pad-desktop: 1.25rem; }
  .omonyma-page-hero { padding: 4rem 1.25rem 2.5rem; }
}

/* ==========================================================================
   WooCommerce native notices (add-to-cart success, coupon prompt, errors)
   restyled site-wide to match OMONYMA instead of the default blue/green
   plugin look. Loaded on every page via base.css since these notices can
   appear almost anywhere (shop, cart, checkout, single product).
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  background: var(--color-bg-alt) !important;
  border: 1px solid var(--color-line) !important;
  color: var(--color-ink) !important;
  padding: 1.1rem 1.4rem !important;
  margin: 0 0 1.8rem !important;
  font-family: var(--font-ui) !important;
  font-size: 0.9rem !important;
  list-style: none !important;
  display: flex !important; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none !important; content: none !important; }
.woocommerce-message a.button,
.woocommerce-message .button {
  background: var(--color-ink) !important; color: var(--color-bg) !important; border-radius: 0 !important;
  padding: 0.7rem 1.3rem !important; font-size: 0.7rem !important; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none !important;
}
.woocommerce-error { border-color: #A32C2C !important; }

.woocommerce-form-coupon-toggle .woocommerce-info { justify-content: flex-start !important; }
.woocommerce-form-coupon-toggle a.showcoupon { color: var(--color-ink) !important; text-decoration: underline !important; }
.checkout_coupon.woocommerce-form-coupon {
  background: var(--color-bg-alt); border: 1px solid var(--color-line); padding: 1.4rem; margin-bottom: 1.8rem;
  display: flex; gap: 0.7rem; flex-wrap: wrap;
}
.checkout_coupon.woocommerce-form-coupon .form-row { flex: 1 1 200px; margin: 0 !important; }
.checkout_coupon.woocommerce-form-coupon input.input-text {
  width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--color-line); background: var(--color-bg);
  font-family: var(--font-ui); font-size: 0.88rem;
}
.checkout_coupon.woocommerce-form-coupon .button {
  background: var(--color-ink) !important; color: var(--color-bg) !important; border: none !important; border-radius: 0 !important;
  padding: 0.85rem 1.4rem !important; font-size: 0.72rem !important; letter-spacing: 0.06em; text-transform: uppercase;
}

@media (max-width: 640px) {
  .woocommerce-message, .woocommerce-info, .woocommerce-error { flex-direction: column; align-items: flex-start !important; }
}

/* Pre-order / Sold-out pill — approved concept #1 (Minimal Pill).
   Used on both the shop grid (.omh-shop-img) and the single product
   gallery (.omh-pdp-gallery) — lives here in base.css, loaded on
   every page, so it never silently disappears if one of those pages'
   own stylesheet isn't enqueued. */
.omh-stock-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.4rem 0.7rem;
}
.omh-badge-preorder { background: var(--color-ink); color: var(--color-bg); }
.omh-badge-soldout { background: var(--color-bg); color: var(--color-ink-soft); border: 1px solid var(--color-line); }