/* ============================================================
   Templeton Chocolate — site overrides

   Loaded last (priority 999) via mu-plugins/pi-local-styles.php.

   Direction: minimal. The theme's decorative chrome is stripped
   back to hairlines, type and whitespace; WordPress and
   WooCommerce defaults (buttons, pagination boxes, sale badges,
   notices, breadcrumbs, table rules) are neutralised so nothing
   competes with the product photography.

   Contents
     1. Tokens
     2. Reset — WordPress / WooCommerce defaults
     3. Type and rhythm
     4. Links, focus, selection
     5. Header and navigation
     6. Hero
     7. Buttons
     8. Product cards and grid
     9. Carousel (front page)
    10. Pagination
    11. Forms
    12. Footer
    13. Motion preferences
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens
   One warm family, one accent. Everything else is neutral.
   ------------------------------------------------------------ */
:root,
html:root {
  --tc-bg:         #14100d;
  --tc-bg-raised:  #1a1512;
  --tc-bg-sunken:  #100c0a;

  --tc-text:       #f2ebdf;
  --tc-text-soft:  #cdc2b1;
  --tc-text-muted: #8f8577;

  --tc-accent:     #d9a441;
  --tc-accent-dim: #a87d2f;
  --tc-accent-wash: rgba(217, 164, 65, 0.12);

  --tc-line:        rgba(242, 235, 223, 0.12);
  --tc-line-strong: rgba(242, 235, 223, 0.28);

  --tc-radius: 2px;
  --tc-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --tc-measure: 62ch;

  /* remap the theme presets onto this range so any block using
     var(--wp--preset--color--*) follows along */
  --wp--preset--color--background: var(--tc-bg);
  --wp--preset--color--foreground: var(--tc-text);
  --wp--preset--color--primary:    #fdfaf4;
  --wp--preset--color--secondary:  var(--tc-accent);
  --wp--preset--color--tertiary:   var(--tc-bg-raised);
}

/* ------------------------------------------------------------
   2. Reset — WordPress / WooCommerce defaults

   Most of what reads as "default WordPress" is decoration: 1px
   grey borders with rounded corners, filled grey hover states,
   coloured notices, thick separators, table rules, blue links.
   All of it is flattened here.
   ------------------------------------------------------------ */

/* separators become hairlines */
.wp-block-separator,
hr {
  border: 0;
  border-top: 1px solid var(--tc-line);
  background: none;
  height: 0;
  opacity: 1;
}

.wp-block-separator.is-style-dots::before {
  color: var(--tc-text-muted);
}

/* quotes lose the theme's heavy left rule */
blockquote,
.wp-block-quote,
.wp-block-pullquote {
  border: 0;
  padding-inline: 0;
  font-style: italic;
}

.wp-block-pullquote {
  border-block: 1px solid var(--tc-line);
  padding-block: 1.5rem;
}

/* tables: hairlines only, no zebra fill */
.wp-block-table table,
table {
  border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th,
table td,
table th {
  border: 0;
  border-bottom: 1px solid var(--tc-line);
  padding: 0.6em 0.75em;
}

.wp-block-table thead th,
table thead th {
  border-bottom-color: var(--tc-line-strong);
}

/* images: no frames, no shadows */
.wp-block-image img,
.wp-block-post-featured-image img {
  border-radius: var(--tc-radius);
}

/* kill the default "card" treatments everywhere */
.wp-block-group.has-background,
.wp-block-cover,
.wp-block-media-text {
  border-radius: 0;
}

/* WooCommerce: sale badge, notices, breadcrumb, star ratings */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale {
  background: transparent;
  border: 1px solid var(--tc-accent);
  border-radius: 0;
  color: var(--tc-accent);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  min-height: 0;
  min-width: 0;
  padding: 0.35em 0.55em;
  text-transform: uppercase;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  background: transparent;
  border: 1px solid var(--tc-line);
  border-inline-start: 2px solid var(--tc-accent);
  border-radius: 0;
  box-shadow: none;
  color: var(--tc-text-soft);
  font-size: 0.9rem;
  padding: 0.9rem 1.1rem;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  color: var(--tc-accent);
}

.woocommerce-breadcrumb {
  color: var(--tc-text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.woocommerce-breadcrumb a {
  color: var(--tc-text-soft);
  text-decoration: none;
}

.woocommerce .star-rating span::before,
.wc-block-components-product-rating__stars {
  color: var(--tc-accent);
}

/* ordering dropdown: strip the browser/widget chrome */
.woocommerce-ordering select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--tc-line-strong);
  border-radius: 0;
  color: var(--tc-text);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.4em 1.6em 0.4em 0;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tc-text-muted) 50%),
    linear-gradient(135deg, var(--tc-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 13px) calc(50% + 1px),
    calc(100% - 8px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* result counts and other micro-copy */
.woocommerce-result-count {
  color: var(--tc-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------
   3. Type and rhythm
   ------------------------------------------------------------ */
body {
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title,
.woocommerce-loop-product__title {
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p, li, figcaption, .wp-block-paragraph {
  text-wrap: pretty;
}

.wp-block-group-is-layout-constrained > p,
.wp-block-group-is-layout-constrained > ul,
.wp-block-group-is-layout-constrained > ol {
  max-width: var(--tc-measure);
}

/* ------------------------------------------------------------
   4. Links, focus, selection
   ------------------------------------------------------------ */
a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--tc-line-strong);
  transition: color 0.15s var(--tc-ease),
              text-decoration-color 0.15s var(--tc-ease);
}

a:hover {
  text-decoration-color: currentColor;
}

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

::selection {
  background: var(--tc-accent);
  color: var(--tc-bg);
}

/* ------------------------------------------------------------
   5. Header and navigation
   ------------------------------------------------------------ */
/* announcement bar — its own full-width strip above the header row */
.tc-topbar {
  background: var(--tc-bg-sunken);
  border-bottom: 1px solid var(--tc-line);
  color: var(--tc-text-soft);
}

.tc-topbar__text {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  margin: 0;
  text-transform: uppercase;
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(20, 16, 13, 0.9);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--tc-line);
}

/* the logo is a PNG on a solid black field; lighten() drops the
   field and leaves the mark, so the frame is what reads */
.custom-logo {
  mix-blend-mode: lighten;
  display: block;
}

.wp-block-site-logo {
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  padding: 4px;
  transition: border-color 0.2s var(--tc-ease);
}

.wp-block-site-logo:hover {
  border-color: var(--tc-accent);
}

.wp-block-site-title a {
  text-decoration: none;
  letter-spacing: 0.03em;
}

.wp-block-navigation .wp-block-navigation-item__content {
  text-decoration: none;
  padding-block: 0.2em;
  color: var(--tc-text-soft);
  background-image: linear-gradient(var(--tc-accent), var(--tc-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.22s var(--tc-ease), color 0.15s var(--tc-ease);
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
  color: var(--tc-accent);
  background-size: 100% 1px;
}

@media (max-width: 782px) {
  .sticky-header {
    flex-wrap: wrap !important;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    padding: 12px 16px !important;
  }

  .tc-topbar__text {
    font-size: 0.58rem;
    letter-spacing: 0.11em;
  }

  .sticky-header .wp-block-site-title {
    font-size: 1rem !important;
    white-space: nowrap;
  }

  .sticky-header .custom-logo {
    max-height: 38px;
    width: auto;
  }
}

/* ------------------------------------------------------------
   6. Hero

   The cover block carries min-height:1389px inline, which is a
   fixed height on every screen. Made viewport-relative instead.
   ------------------------------------------------------------ */
.home .wp-block-cover[style*="min-height:1389px"] {
  min-height: clamp(400px, 72vh, 720px) !important;
}

@media (max-width: 640px) {
  .home .wp-block-cover .wp-block-spacer {
    height: calc(var(--wp--preset--spacing--70) * 0.4) !important;
  }

  .home .wp-block-cover .wp-block-heading {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }
}

/* ------------------------------------------------------------
   7. Buttons — flat, hairline, no shadow
   ------------------------------------------------------------ */
.wp-element-button,
.wp-block-button__link,
.wc-block-components-product-button__button,
button[type="submit"],
input[type="submit"] {
  background: transparent;
  border: 1px solid var(--tc-line-strong);
  border-radius: var(--tc-radius);
  box-shadow: none;
  color: var(--tc-text);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  padding: 0.75em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.18s var(--tc-ease),
              border-color 0.18s var(--tc-ease),
              color 0.18s var(--tc-ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.wc-block-components-product-button__button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--tc-accent);
  border-color: var(--tc-accent);
  color: var(--tc-bg);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--tc-line);
}

/* ------------------------------------------------------------
   8. Product cards and grid
   ------------------------------------------------------------ */
.wc-block-product,
.wc-block-product-template > li {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  background: var(--tc-bg-raised);
  padding: 0.85rem;
  transition: border-color 0.25s var(--tc-ease),
              background-color 0.25s var(--tc-ease);
}

@media (hover: hover) {
  .wc-block-product:hover,
  .wc-block-product-template > li:hover {
    border-color: var(--tc-line-strong);
    background: var(--tc-bg);
  }
}

/* Only the bitmap gets a border. WooCommerce positions the product
   image with absolute coordinates inside the wrapper, so overflow,
   borders or heights on .wc-block-components-product-image clip it
   away completely. */
.wc-block-components-product-image img {
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
}

.wc-block-components-product-title,
.wp-block-woocommerce-product-title .wp-block-post-title {
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: 0;
  margin-block-start: 0.9rem;
}

.wc-block-components-product-price,
.wp-block-woocommerce-product-price {
  color: var(--tc-text-soft);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.wc-block-components-product-price del {
  color: var(--tc-text-muted);
}

.wc-block-components-product-price ins {
  color: var(--tc-text);
  text-decoration: none;
}

.wc-block-components-product-button {
  margin-block-start: auto;
  padding-block-start: 0.9rem;
}

.wc-block-components-product-button .wc-block-components-product-button__button {
  width: 100%;
  border: 1px solid var(--tc-line-strong);
  padding: 0.7em 1em;
}

/* ------------------------------------------------------------
   9. Carousel (front page)

   Full-bleed, edge to edge, with a mask fade at each end so the
   reel appears to emerge from and disappear into the page edge.
   Autoplay and the seamless loop come from assets/pi-carousel.js,
   which clones the set until it covers the viewport and then only
   ever shifts scrollLeft by one set width — so no visible jump.

   Scoped to .home; the shop archive keeps its grid.
   ------------------------------------------------------------ */
.home .wp-block-group-is-layout-constrained > .wp-block-woocommerce-product-collection {
  max-width: none;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.home .wc-block-product-template {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding-block: 0.25rem 0.5rem;
  padding-inline: 0;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 clamp(16px, 3vw, 44px),
    #000 calc(100% - clamp(16px, 3vw, 44px)),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 clamp(16px, 3vw, 44px),
    #000 calc(100% - clamp(16px, 3vw, 44px)),
    transparent 100%
  );
}

.home .wc-block-product-template::-webkit-scrollbar {
  display: none;
}

.home .wc-block-product-template > li {
  flex: 0 0 clamp(200px, 20%, 250px);
  min-width: 0;
}

/* clones are decorative copies — no pointer or keyboard access */
.home .wc-block-product-template > li.tc-clone {
  pointer-events: none;
}

.home .wc-block-product-template:focus-visible {
  outline: 1px solid var(--tc-accent);
  outline-offset: -1px;
}

@media (max-width: 782px) {
  .home .wc-block-product-template {
    gap: 0.9rem;
  }

  .home .wc-block-product-template > li {
    flex: 0 0 auto !important;
    width: 66vw !important;
    max-width: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .wc-block-product-template {
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   10. Pagination

   The shop uses the block query pagination (.wp-block-query-pagination)
   with .page-numbers children; the classic WooCommerce nav is kept
   covered in case the shop template is switched back.
   ------------------------------------------------------------ */
.wp-block-query-pagination,
.woocommerce nav.woocommerce-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-block: 3.5rem 0;
  text-align: center;
}

.wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  border: 0;
  margin: 0;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0 !important;
  display: block;
  float: none;
  margin: 0;
  overflow: visible;
  padding: 0;
}

/* numbered squares */
.page-numbers,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  align-items: center;
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  color: var(--tc-text-soft);
  display: inline-flex;
  font-size: 0.78rem;
  height: 2.4rem;
  justify-content: center;
  letter-spacing: 0.06em;
  min-width: 2.4rem;
  padding: 0 0.7rem;
  text-decoration: none;
  transition: border-color 0.18s var(--tc-ease),
              background-color 0.18s var(--tc-ease),
              color 0.18s var(--tc-ease);
}

.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--tc-accent);
  color: var(--tc-accent);
}

.page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--tc-accent);
  border-color: var(--tc-accent);
  color: var(--tc-bg);
}

.page-numbers.dots {
  border-color: transparent;
  color: var(--tc-text-muted);
}

/* previous / next: micro-label with a chevron, no box */
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous,
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev {
  align-items: center;
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  color: var(--tc-text-soft);
  display: inline-flex;
  font-size: 0.66rem;
  gap: 0.7ch;
  height: 2.4rem;
  letter-spacing: 0.16em;
  padding: 0 1rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.18s var(--tc-ease), color 0.18s var(--tc-ease);
}

.wp-block-query-pagination-next::after {
  content: "\2192";
  font-size: 0.9rem;
  letter-spacing: 0;
  transition: transform 0.18s var(--tc-ease);
}

.wp-block-query-pagination-previous::before {
  content: "\2190";
  font-size: 0.9rem;
  letter-spacing: 0;
  transition: transform 0.18s var(--tc-ease);
}

.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
  border-color: var(--tc-accent);
  color: var(--tc-accent);
}

.wp-block-query-pagination-next:hover::after {
  transform: translateX(3px);
}

.wp-block-query-pagination-previous:hover::before {
  transform: translateX(-3px);
}

/* the stacked next/previous pair used by the block */
.wp-block-query-pagination.is-content-justification-space-between {
  justify-content: space-between;
}

@media (max-width: 600px) {
  .wp-block-query-pagination-next,
  .wp-block-query-pagination-previous {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    padding: 0 0.7rem;
  }
}

/* ------------------------------------------------------------
   11. Forms
   ------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--tc-line-strong);
  border-radius: 0;
  color: var(--tc-text);
  padding: 0.65em 0;
  transition: border-color 0.18s var(--tc-ease);
}

input:focus,
textarea:focus,
select:focus {
  border-bottom-color: var(--tc-accent);
  outline: none;
}

::placeholder {
  color: var(--tc-text-muted);
  opacity: 1;
}

/* Formidable ships light-theme defaults: near-black labels and its
   own blue button. Forced onto the palette. */
.frm_forms .frm_primary_label,
.frm_forms label,
.frm_forms .frm_description {
  color: var(--tc-text-soft) !important;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.frm_forms .frm_required,
.frm_forms .frm_req {
  color: var(--tc-accent) !important;
}

.frm_forms .frm_button_submit,
.frm_style_formidable-style.with_frm_style .frm_button_submit {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--tc-line-strong) !important;
  border-radius: var(--tc-radius) !important;
  color: var(--tc-text) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em;
  padding: 0.75em 1.5em !important;
  text-transform: uppercase;
  transition: background-color 0.18s var(--tc-ease), color 0.18s var(--tc-ease);
}

.frm_forms .frm_button_submit:hover,
.frm_forms .frm_button_submit:focus-visible {
  background: var(--tc-accent) !important;
  border-color: var(--tc-accent) !important;
  color: var(--tc-bg) !important;
}

/* ------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------ */
.tc-footer {
  border-top: 1px solid var(--tc-line);
  margin-block-start: clamp(3rem, 7vw, 6rem);
}

.tc-footer .wp-block-columns {
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.tc-footer .wp-block-site-title {
  margin: 0;
}

.tc-footer .wp-block-site-title a {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.tc-footer__blurb {
  color: var(--tc-text-muted);
  font-size: 0.86rem;
  line-height: 1.6;
  margin-block-start: 0.75rem;
  max-width: 30ch;
}

.tc-footer__label {
  color: var(--tc-text-muted);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  margin-block: 0 0.9rem;
  text-transform: uppercase;
}

.tc-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tc-footer li {
  margin-block-end: 0.55rem;
}

.tc-footer li a {
  color: var(--tc-text-soft);
  font-size: 0.86rem;
  text-decoration: none;
  transition: color 0.15s var(--tc-ease);
}

.tc-footer li a:hover {
  color: var(--tc-accent);
}

.tc-footer__note {
  color: var(--tc-text-muted);
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0;
}

.tc-footer__bottom {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: 1.25rem;
  border-top: 1px solid var(--tc-line);
}

.tc-footer__copyright {
  color: var(--tc-text-muted);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

@media (max-width: 781px) {
  .tc-footer .wp-block-columns {
    gap: 1.75rem;
  }

  .tc-footer__blurb {
    max-width: none;
  }
}

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

  .wc-block-product:hover,
  .wc-block-product-template > li:hover {
    transform: none;
  }
}