/* ==========================================================================
   WCLOCKS — Base
   Typography, buttons, forms and layout primitives, matching Focal 2.4.
   Depends on tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--text-font-family);
  font-weight: var(--text-font-weight);
  font-style: var(--text-font-style);
  font-size: var(--base-font-size);
  line-height: 1.6;
  color: rgb(var(--text-color));
  background: rgb(var(--background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Headings — Focal applies uppercase + the heading font to every level
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  font-style: var(--heading-font-style);
  text-transform: var(--heading-text-transform);
  color: rgb(var(--heading-color));
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--heading-h1-font-size); }
h2 { font-size: var(--heading-h2-font-size); }
h3 { font-size: var(--heading-h3-font-size); }
h4 { font-size: var(--heading-h4-font-size); }
h5 { font-size: var(--heading-h5-font-size); }
h6 { font-size: var(--heading-h6-font-size); }

p { margin: 0 0 1em; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--wcl-gold); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Layout — Focal's container/grid model
   -------------------------------------------------------------------------- */

.wcl-container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding-inline: var(--container-gutter);
}

.wcl-section { padding-block: var(--vertical-breather); }

.wcl-section--cream { background: var(--wcl-cream); }
.wcl-section--white { background: rgb(var(--background)); }
.wcl-section--dark  { background: rgb(var(--footer-background)); color: rgb(var(--footer-text-color)); }
.wcl-section--dark h1,
.wcl-section--dark h2,
.wcl-section--dark h3 { color: rgb(var(--footer-text-color)); }

/* Section eyebrow + heading, the pattern every wcl-* section shares */

.wcl-eyebrow {
  display: block;
  font-size: var(--wcl-eyebrow-size);
  letter-spacing: var(--wcl-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--wcl-gold);
  font-weight: 700;
  margin-bottom: 14px;
}

.wcl-section-title {
  font-size: var(--heading-h2-font-size);
  color: var(--wcl-ink);
  margin: 0 0 8px;
}

/* Focal stores titles as "Shop by <em>Category</em>" — the em is the gold italic */
.wcl-section-title em {
  font-style: italic;
  color: var(--wcl-gold);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.wcl-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--button-height);
  padding: 0 28px;
  border: 0;
  border-radius: var(--button-border-radius);
  background: rgb(var(--primary-button-background));
  color: rgb(var(--primary-button-text-color));
  font-family: var(--text-font-family);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.wcl-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  transform: translateY(-2px);
  background: rgb(var(--primary-button-background));
  color: rgb(var(--primary-button-text-color));
}

.wcl-btn--secondary {
  background: rgb(var(--secondary-button-background));
  color: rgb(var(--secondary-button-text-color));
}

.wcl-btn--gold { background: var(--wcl-gold); color: #0a0a0a; }
.wcl-btn--gold:hover { background: var(--wcl-gold-hover); box-shadow: 0 16px 48px var(--wcl-gold-45); }

.wcl-btn--outline {
  background: transparent;
  border: 1.5px solid rgb(var(--border-color-darker));
  color: rgb(var(--text-color));
}
.wcl-btn--outline:hover { border-color: var(--wcl-gold); color: var(--wcl-gold); }

.wcl-btn--small { height: var(--button-small-height); padding: 0 20px; font-size: 11.5px; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

input[type="text"], input[type="email"], input[type="search"],
input[type="tel"], input[type="number"], input[type="password"],
select, textarea {
  width: 100%;
  height: var(--form-input-field-height);
  padding: 0 16px;
  border: 1px solid rgb(var(--border-color));
  border-radius: var(--button-border-radius);
  background: rgb(var(--background));
  color: rgb(var(--text-color));
  font-family: var(--text-font-family);
  font-size: var(--base-font-size);
}

textarea { height: auto; padding: 14px 16px; min-height: 140px; }

input:focus, select:focus, textarea:focus {
  border-color: rgb(var(--border-color-darker));
  outline: none;
}

/* --------------------------------------------------------------------------
   Product grid — Focal parity
   -------------------------------------------------------------------------- */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--product-list-block-spacing) var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  text-align: left;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--text-font-family);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgb(var(--text-color));
  line-height: 1.4;
  padding: 12px 0 4px;
}

.woocommerce ul.products li.product .price {
  font-size: 13px;
  font-weight: 600;
  color: rgb(var(--text-color));
}

/* Focal shows sale prices in bronze, not red — deliberate brand choice */
.woocommerce ul.products li.product .price del { opacity: 0.5; font-weight: 400; margin-right: 6px; }
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: rgb(var(--product-on-sale-accent));
}

/* show_secondary_image: true — cross-fade to the second gallery image */
.wcl-has-secondary-image .wcl-product-media { position: relative; overflow: hidden; }
.wcl-has-secondary-image .wcl-product-media img { transition: opacity 0.4s ease; }
.wcl-has-secondary-image .wcl-product-media .wcl-secondary {
  position: absolute; inset: 0; opacity: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.wcl-has-secondary-image:hover .wcl-product-media .wcl-secondary { opacity: 1; }

@media (max-width: 1199px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 740px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

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