/*
Theme Name: Elecampane Rose CBD for Savoy
Theme URI: https://elecampanerose.com/
Description: A restrained CBD collection design for the Savoy WooCommerce theme.
Author: Elecampane Rose Bespoke Apothecary
Version: 1.0.4
Template: savoy
Text Domain: er-cbd-savoy
Requires PHP: 7.4
*/

:root {
  --er-ink: #22231f;
  --er-soft: #f4f2ee;
  --er-line: #dfded9;
  --er-muted: #62645e;
}

body { color: var(--er-ink); font-family: Outfit, Arial, sans-serif; }
h1, h2, h3, h4, .nm-shop-title, .product_title { font-family: Cabin, Arial, sans-serif; }
a:focus-visible, button:focus-visible { outline: 2px solid #5b604f; outline-offset: 3px; }

/* Savoy's default logo height is quite small for this wordmark. Size both its
   standard and alternative logo, whichever the header displays. Use a tightly
   cropped, high-resolution image for either version. */
body .nm-header .nm-header-logo img.nm-logo,
body .nm-header .nm-header-logo img.nm-alt-logo {
  height: clamp(30px, 2.8vw, 40px) !important;
  width: auto !important;
  max-width: min(280px, 44vw) !important;
  object-fit: contain;
}

.er-cbd * { box-sizing: border-box; }
.er-cbd { font-family: Outfit, Arial, sans-serif; font-size: 16px; line-height: 1.55; }
.er-cbd a { color: inherit; }
.er-cbd .eyebrow { text-transform: uppercase; font-size: .76rem; letter-spacing: .2em; font-weight: 500; }
.er-cbd-hero { min-height: 540px; position: relative; display: flex; align-items: end; color: #fff; background: #393b36 url('assets/studio.jpg') center/cover no-repeat; }
.er-cbd-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,19,17,.77), rgba(18,19,17,.2)); }
.er-cbd-hero__inner { position: relative; width: min(100%, 1280px); margin: auto; padding: 90px 5% 80px; }
.er-cbd-hero h1 { color: #fff; font: 400 clamp(3.2rem, 7vw, 6.2rem)/1.06 Cabin, Arial, sans-serif; letter-spacing: -.04em; margin: 15px 0 20px; }
.er-cbd-hero p { font-size: 1.18rem; max-width: 550px; margin: 0 0 30px; color: #fff; }
.er-cbd-button { display: inline-block; background: #fff; color: var(--er-ink) !important; padding: 15px 27px; text-decoration: none; text-transform: uppercase; font-size: .8rem; letter-spacing: .12em; font-weight: 600; }
.er-cbd-button:hover { background: #e8e6e0; }
.er-cbd-intro { text-align: center; max-width: 820px; margin: auto; padding: 80px 5%; }
.er-cbd h2 { font: 400 clamp(2.1rem, 4vw, 3.2rem)/1.15 Cabin, Arial, sans-serif; letter-spacing: -.025em; margin: 12px 0 20px; }
.er-cbd-intro p { color: #4d4f48; font-size: 1.1rem; margin: 0; }
.er-cbd-products { background: var(--er-soft); padding: 80px 5% 95px; }
.er-cbd-products__inner { max-width: 1280px; margin: auto; }
.er-cbd-products__heading { text-align: center; margin: 0 auto 45px; }
.er-cbd-products__heading p { color: var(--er-muted); margin: 0; }
.er-cbd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.er-cbd-card { background: #fff; border: 1px solid #e5e3de; }
.er-cbd-card__image { display: block; aspect-ratio: 1 / 1; background: #e8e5df; overflow: hidden; }
.er-cbd-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.er-cbd-card:hover img { transform: scale(1.025); }
.er-cbd-card__body { padding: 23px 25px 27px; }
.er-cbd-card h3 { font: 400 clamp(1.45rem, 2vw, 1.9rem)/1.18 Cabin, Arial, sans-serif; margin: 0 0 12px; }
.er-cbd-card h3 a { text-decoration: none; }
.er-cbd-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.er-cbd-card .price { color: var(--er-ink); font-size: 1.05rem; }
.er-cbd-card__link { display: block; border-top: 1px solid var(--er-line); margin-top: 20px; padding-top: 15px; text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 500; }
.er-cbd-empty { text-align: center; padding: 45px; background: #fff; }
.er-cbd-closing { text-align: center; padding: 95px 5%; }
.er-cbd-closing p { max-width: 550px; margin: 0 auto 27px; color: var(--er-muted); font-size: 1.08rem; }
.er-cbd-closing .er-cbd-button { background: var(--er-ink); color: #fff !important; }
.er-cbd-closing .er-cbd-button:hover { background: #4c4f45; }

/* Savoy retains its own product, cart, and checkout templates. These rules align
   common WooCommerce elements with the collection's typography and palette. */
.woocommerce div.product .product_title { color: var(--er-ink); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--er-ink); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit { border-radius: 0; }
.woocommerce a.button:focus-visible, .woocommerce button.button:focus-visible { outline: 2px solid #5b604f; outline-offset: 3px; }

@media (max-width: 850px) { .er-cbd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  body .nm-header .nm-header-logo img.nm-logo,
  body .nm-header .nm-header-logo img.nm-alt-logo { height: 30px !important; max-width: 46vw !important; }
  .er-cbd-hero { min-height: 520px; background-position: 60% center; }
  .er-cbd-hero::before { background: rgba(18,19,17,.55); }
  .er-cbd-hero__inner { padding: 75px 7% 65px; }
  .er-cbd-hero h1 { font-size: 3.35rem; }
  .er-cbd-intro { padding: 65px 6%; }
  .er-cbd-products { padding: 68px 5% 80px; }
  .er-cbd-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .er-cbd-card__image img { transition: none; } }