/* Hallmark · macrostructure: Catalogue fingerprints: hanging headings · asymmetric grid · hairline divider · outlined button · typographic-only microcopy · reveal=none
 */
/* Hallmark tokens – thinh09nt custom
   Palette : warm-oat anchor (hue ~80)
   Tone    : Catalogue-light editorial
   Fingerprint :
     Heading : hanging + typographic-only
     Body    : asymmetric grid
     Divider : hairline rule
     Button  : outlined
     Image   : tightly cropped + inline
     Reveal  : none
*/
:root {
  --paper:     oklch(97% 0.008 80);
  --paper-2:   oklch(94% 0.010 80);
  --rule:      oklch(86% 0.009 80);
  --neutral:   oklch(55% 0.008 70);
  --muted:     oklch(42% 0.007 65);
  --ink:       oklch(18% 0.010 55);
  --accent:    #c2410c;
  --accent-2:  #9a3412;
  --focus:     oklch(55% 0.19 55);

  --font-display: "DM Serif Display", ui-serif, Georgia, serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-outlier: "IBM Plex Mono", ui-monospace, monospace;

  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-display: clamp(2.25rem, 5vw + 0.75rem, 4.25rem);
}

/* === Base === */
body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--accent-2);
  text-decoration-thickness: 2px;
}

::selection {
  background: var(--accent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* === Typography === */
.entry-content,
.wp-block-woocommerce-checkout,
.woocommerce-MyAccount-content,
.woocommerce-info,
.woocommerce-notices-wrapper,
.ct-sidebar,
.wp-block-quote,
.wp-block-list,
.wp-block-pullquote,
.woocommerce-product-details__short-description,
.product_meta,
.woocommerce-tabs,
.woocommerce-Reviews {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}

/* Wordmark / logo */
[data-id="logo"] .site-title,
.site-title a,
.site-branding {
  font-family: var(--font-outlier);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--ink);
}

/* Headings */
.entry-title,
[data-prefix="blog"] .entry-title,
[data-prefix="categories"] .entry-title,
.page-title,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}
.entry-title a,
.page-title a {
  color: var(--ink);
  text-decoration: none;
}
.entry-title a:hover {
  color: var(--accent);
}

/* === Navigation fingerprint – floating pill cue === */
[data-header*="type-1"] .ct-header [data-row*="middle"] > div {
  background-color: var(--paper);
  border-bottom: 1px solid var(--rule);
}
[data-id="menu"] .ct-menu-link {
  font-family: var(--font-outlier);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 0;
  transition: color 180ms linear;
}
[data-id="menu"] .ct-menu-link:hover,
[data-id="menu"] .current-menu-item > .ct-menu-link {
  color: var(--accent);
}

/* === Blog archive – asymmetric catalogue === */
[data-prefix="blog"] .entries,
[data-prefix="categories"] .entries {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: start;
}

[data-prefix="blog"] .entry-card,
[data-prefix="categories"] .entry-card {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out;
}

/* Asymmetric rows: 8/4, 4/8, 5/7 widths repeat */
[data-prefix="blog"] .entry-card:nth-child(6n+1) { grid-column: 1 / 9;  }
[data-prefix="blog"] .entry-card:nth-child(6n+2) { grid-column: 9 / 13; }
[data-prefix="blog"] .entry-card:nth-child(6n+3) { grid-column: 1 / 5;  }
[data-prefix="blog"] .entry-card:nth-child(6n+4) { grid-column: 5 / 13; }
[data-prefix="blog"] .entry-card:nth-child(6n+5) { grid-column: 1 / 7;  }
[data-prefix="blog"] .entry-card:nth-child(6n+6) { grid-column: 7 / 13; }

[data-prefix="categories"] .entry-card:nth-child(6n+1) { grid-column: 1 / 9;  }
[data-prefix="categories"] .entry-card:nth-child(6n+2) { grid-column: 9 / 13; }
[data-prefix="categories"] .entry-card:nth-child(6n+3) { grid-column: 1 / 5;  }
[data-prefix="categories"] .entry-card:nth-child(6n+4) { grid-column: 5 / 13; }
[data-prefix="categories"] .entry-card:nth-child(6n+5) { grid-column: 1 / 7;  }
[data-prefix="categories"] .entry-card:nth-child(6n+6) { grid-column: 7 / 13; }

@media (max-width: 999px) {
  [data-prefix="blog"] .entry-card:nth-child(n),
  [data-prefix="categories"] .entry-card:nth-child(n) {
    grid-column: 1 / -1;
  }
}

/* Card internals */
.entry-card .ct-media-container {
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  overflow: hidden;
}
.entry-card .ct-media-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease-out;
}
.entry-card:hover .ct-media-container img {
  transform: scale(1.03);
}

.entry-card .card-content {
  padding: 18px 20px 22px;
  border-top: 1px solid var(--rule);
}
.entry-card .entry-title {
  font-size: var(--text-lg);
  margin: 0 0 10px;
}
.entry-card .entry-excerpt p {
  color: var(--neutral);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0 0 14px;
}
.entry-card .entry-meta {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  gap: 10px;
}
.entry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.06);
  border-color: var(--neutral);
}

/* === CTAs === */
.wp-element-button,
.ct-button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 8px 18px;
  font-family: var(--font-outlier);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 180ms linear, color 180ms linear;
  cursor: pointer;
}
.wp-element-button:hover,
.ct-button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--accent);
  color: #fff;
}

/* === Footer – close-only === */
.ct-footer [data-row*="bottom"] {
  background: transparent;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  padding-bottom: 18px;
  color: var(--muted);
  font-size: var(--text-sm);
}
.ct-footer a { color: var(--neutral); }
.ct-footer a:hover { color: var(--ink); }
.ct-footer .widget-title {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* === Shop grid – reduced template feel === */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 14px;
  box-shadow: none;
  grid-column: span 4;
  transition: transform 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out;
}
.woocommerce ul.products li.product:nth-child(3n+1) { grid-column: 1 / 6; }
.woocommerce ul.products li.product:nth-child(3n+2) { grid-column: 6 / 9; }
.woocommerce ul.products li.product:nth-child(3n+3) { grid-column: 9 / 13; }

@media (max-width: 999px) {
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product { grid-column: 1 / -1; }
}

.price { color: var(--ink); font-family: var(--font-display); }
.added_to_cart,
button[name="add-to-cart"],
.woocommerce a.button.add_to_cart_button {
  font-family: var(--font-outlier);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 12px;
}

/* === Hero helper – reserve room if user inserts a top block === */
.home .ct-container > .entries:first-child {
  position: relative;
}

/* === thinh09nt hero + archive === */
.th09-hero {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: clamp(40px, 6vw, 80px) 0 clamp(30px, 4vw, 56px);
}
.th09-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 1.5rem);
}
.th09-hero-eyebrow {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.th09-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw + 0.5rem, 3.8rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
}
.th09-hero-lede {
  color: var(--neutral);
  font-size: var(--text-md);
  line-height: 1.55;
  max-width: 62ch;
  margin: 0 0 22px;
}
.th09-hero-cta {
  display: inline-block;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 9px 18px;
  font-family: var(--font-outlier);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 180ms linear, color 180ms linear;
}
.th09-hero-cta:hover {
  background: var(--accent);
  color: #fff;
}

.th09-archive-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 36px 0 18px;
}
.th09-archive-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.th09-archive-meta {
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.th09-entries {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.th09-entry-card {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out;
}
.th09-entry-card:nth-child(6n+1) { grid-column: 1 / 9; }
.th09-entry-card:nth-child(6n+2) { grid-column: 9 / 13; }
.th09-entry-card:nth-child(6n+3) { grid-column: 1 / 5; }
.th09-entry-card:nth-child(6n+4) { grid-column: 5 / 13; }
.th09-entry-card:nth-child(6n+5) { grid-column: 1 / 7; }
.th09-entry-card:nth-child(6n+6) { grid-column: 7 / 13; }

@media (max-width: 999px) {
  .th09-entry-card:nth-child(n) { grid-column: 1 / -1; }
}

.th09-media {
  display: block;
}
.th09-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 420ms ease-out;
}
.th09-media-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  color: var(--muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}
.th09-entry-card:hover .th09-media img {
  transform: scale(1.03);
}

.th09-card-content {
  padding: 18px 20px 22px;
  border-top: 1px solid var(--rule);
}
.th09-entry-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 10px;
}
.th09-entry-title a {
  color: var(--ink);
  text-decoration: none;
}
.th09-entry-title a:hover {
  color: var(--accent);
}
.th09-entry-excerpt {
  color: var(--neutral);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0 0 14px;
}
.th09-entry-meta {
  display: flex;
  gap: 10px;
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.th09-meta-sep { opacity: 0.55; }

.th09-entry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.06);
  border-color: var(--neutral);
}