/*
Theme Name: Mayim Atelier
Theme URI: https://mayimleathers.com
Author: Mayim Leathers
Description: Modern fashion-editorial block theme for a full-grain leather goods store. Gallery-white, ink black, oxblood accent, oversized condensed display type, sharp corners. No page builder required.
Version: 1.0.3
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mayim-atelier
*/

/* ---------- Tokens ---------- */
:root {
  --at-gallery: #F5F4F1;
  --at-ink: #141210;
  --at-oxblood: #6B1F2A;
  --at-steel: #8A8782;
  --at-paper: #FFFFFF;
  --at-line: 1px solid rgba(20, 18, 16, 0.18);
}

body { -webkit-font-smoothing: antialiased; }

/* ---------- Signature: poster type + index labels ---------- */
.index-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--at-oxblood);
}
.has-ink-background-color .index-label { color: #C98A94; }

h1, h2, h3 { text-transform: uppercase; }

/* ---------- Header ---------- */
.at-topbar {
  background: var(--at-oxblood);
  color: var(--at-gallery);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 16px;
}
.at-header { border-bottom: var(--at-line); }
.at-logo {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.at-header .wp-block-navigation a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.at-header .wp-block-navigation a:hover { color: var(--at-oxblood); }

/* ---------- Hero ---------- */
.at-hero h1 {
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 0.98;
}
.at-hero h1 em {
  font-style: normal;
  color: var(--at-oxblood);
}
.at-hero-panel {
  background: var(--at-ink);
  min-height: 480px;
  background-size: cover;
  background-position: center;
}

/* Buttons: sharp, uppercase */
.wp-block-button__link { border-radius: 0; }
.wp-block-button.ghost .wp-block-button__link {
  background: transparent;
  color: var(--at-ink);
  border: 1px solid var(--at-ink);
}
.has-ink-background-color .wp-block-button.ghost .wp-block-button__link {
  color: var(--at-gallery);
  border-color: var(--at-gallery);
}
.wp-block-button__link:hover { background: var(--at-oxblood); color: var(--at-gallery); }

/* ---------- Sections ---------- */
.at-section { padding: 5rem 0; }
.at-section-line { border-top: var(--at-line); }
.at-section-ox {
  background: var(--at-oxblood);
  color: var(--at-gallery);
}
.at-section-ox h2, .at-section-ox h3 { color: var(--at-gallery); }
.at-section-ox a { color: var(--at-gallery); }

/* Collection tiles: sharp, ruled grid */
.at-tile {
  background: var(--at-paper);
  border: var(--at-line);
  padding: 2.25rem 1.75rem;
  height: 100%;
  transition: background .18s ease, color .18s ease;
}
.at-tile:hover { background: var(--at-ink); }
.at-tile:hover h3, .at-tile:hover p, .at-tile:hover a { color: var(--at-gallery); }
.at-tile h3 { font-size: 1.5rem; margin: 0.4rem 0 0.4rem; }
.at-tile h3 a { text-decoration: none; color: inherit; }
.at-tile p { margin: 0; font-size: 0.92rem; color: var(--at-steel); }

/* ---------- WooCommerce grid ---------- */
.at-products ul.products li.product {
  background: var(--at-paper);
  border: var(--at-line);
  border-radius: 0;
  padding: 0 0 1.1rem;
  overflow: hidden;
}
.at-products ul.products li.product img { margin-bottom: .8rem; }
.at-products .woocommerce-loop-product__title {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 1.1rem;
}
.at-products .price { padding: 0 1.1rem; color: var(--at-oxblood); font-weight: 500; }
.at-products .star-rating { margin: 0.3rem 1.1rem; }
.at-products .button {
  margin: 0.6rem 1.1rem 0;
  background: var(--at-ink);
  color: var(--at-gallery);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
}
.at-products .button:hover { background: var(--at-oxblood); }

/* ---------- Blog ---------- */
.at-post-row {
  border-top: var(--at-line);
  padding: 2rem 0 2.5rem;
}
.at-post-row h2, .at-post-row h3 { font-size: 2rem; margin: 0.4rem 0 0.6rem; }
.at-post-row h2 a, .at-post-row h3 a { text-decoration: none; color: inherit; }
.at-post-row h2 a:hover, .at-post-row h3 a:hover { color: var(--at-oxblood); }
.at-post-meta {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--at-oxblood);
}
.single .entry-content { font-size: 1.0625rem; }
.single .entry-content h2 { margin-top: 2.5rem; font-size: 1.9rem; }

/* ---------- Newsletter ---------- */
.at-newsletter {
  background: var(--at-ink);
  color: var(--at-gallery);
}
.at-newsletter h2 { color: var(--at-gallery); }

/* ---------- Footer ---------- */
.at-footer {
  background: var(--at-ink);
  color: rgba(245, 244, 241, 0.7);
  font-size: 0.9rem;
  border-top: 4px solid var(--at-oxblood);
}
.at-footer a { color: rgba(245, 244, 241, 0.7); text-decoration: none; }
.at-footer a:hover { color: var(--at-gallery); }
.at-footer .at-logo { color: var(--at-gallery); }

/* ---------- Quality floor ---------- */
:focus-visible {
  outline: 2px solid var(--at-oxblood);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 781px) {
  .at-hero-panel { min-height: 280px; }
  .at-section { padding: 3rem 0; }
  .at-post-row h2, .at-post-row h3 { font-size: 1.5rem; }
}