/* WordPress / WooCommerce-only additions. The design itself is style.css (the original, unchanged).
   Everything here neutralises markup that WordPress or WooCommerce adds and the design never had. */

/* logged-in admins: keep the sticky header below the admin bar */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* WooCommerce form fields are <p class="form-row"> with an inner wrapper; in the design they are bare grid columns */
.form-row { margin-bottom: 0; }
.woocommerce-input-wrapper { display: block; }
.form-row .required { color: #c0392b; text-decoration: none; }
.form-row .optional { color: var(--bs-secondary-color); }

/* WooCommerce wraps password inputs and appends a show/hide button that the design does not have */
.password-input { display: block; }
.show-password-input { display: none; }

/* empty notice holder must not add space */
.woocommerce-notices-wrapper:empty { display: none; }

/* hidden order-attribution inputs WooCommerce adds to forms: keep them out of the Bootstrap grid */
wc-order-attribution-inputs { display: none; }

/* ---------- Design changes requested after the conversion (these differ from the original HTML) ---------- */
/* Shade chips grid: full-width rounded cards instead of small bordered chips */
.shade-grid .shade-chip { width: 100%; border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(4, 21, 11, .08); transition: transform .45s var(--ease), box-shadow .45s; }
.shade-grid .shade-chip:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(4, 21, 11, .16); }
/* the inset line keeps near-white shades visible on the white card */
.shade-grid .shade-chip span { aspect-ratio: 4 / 3; border-bottom: 0; box-shadow: inset 0 0 0 1px rgba(4, 21, 11, .06); border-radius: 18px 18px 0 0; }
.shade-grid .shade-chip strong { padding: 16px 20px 0; font-size: .72rem; font-weight: 600; letter-spacing: .16em; color: var(--green); }
.shade-grid .shade-chip small { padding: 4px 20px 18px; font-size: 1.15rem; font-weight: 500; color: var(--dark); }
@media (max-width: 575.98px) {
  .shade-grid .shade-chip { border-radius: 14px; }
  .shade-grid .shade-chip span { border-radius: 14px 14px 0 0; }
  .shade-grid .shade-chip strong { padding: 12px 14px 0; font-size: .62rem; letter-spacing: .1em; }
  .shade-grid .shade-chip small { padding: 2px 14px 14px; font-size: .95rem; }
}

/* The gap behind the footer card takes the colour of the section above it (it used to be always white).
   The 110px footer margin becomes a spacer at the end of <main>, so page heights stay the same. */
.footer { margin-top: 0; }
main::after { content: ""; display: block; height: 110px; }
main:has(> section.bg-cream:last-of-type)::after, main:has(> section.shade-cta:last-of-type)::after { background: var(--cream); }
main:has(> section.bg-mint:last-of-type)::after { background: var(--mint); }
main:has(> section.bg-green:last-of-type)::after { background: var(--green); }
/* green card on a green section: a light outline keeps its edge visible */
main:has(> section.bg-green:last-of-type) + .footer .footer-cta { box-shadow: 0 24px 50px rgba(4, 21, 11, .3), inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
@media (max-width: 575.98px) { .footer { margin-top: 0; } main::after { height: 140px; } }

/* ---------- Blog article (redesigned; differs from the original blog-post.html) ---------- */
.single-post .page-hero p { opacity: .7; font-size: 1rem; letter-spacing: .04em; }
/* cover photo overlaps the title band */
.single-post .page-hero:has(+ .has-cover) { padding-bottom: calc(clamp(60px, 8vw, 120px) + 90px); }
.post-single.has-cover { padding-top: 0; }
.post-cover { position: relative; margin: -90px 0 clamp(40px, 5vw, 72px); border-radius: 24px; box-shadow: 0 24px 50px rgba(4, 21, 11, .22); }
.post-cover img { aspect-ratio: 21 / 9; object-fit: cover; }
.post-content { color: #444; font-size: 1.06rem; line-height: 1.85; }
.post-content > p:first-child { font-size: 1.3rem; line-height: 1.65; color: var(--dark); margin-bottom: 1.6rem; }
.post-content h2, .post-content h3 { color: var(--dark); font-size: 1.5rem; margin: 2.2rem 0 .7rem; padding-top: 2rem; border-top: 1px solid #e3e8e3; }
.post-content a { color: var(--green); text-decoration: underline; }
.post-content img { border-radius: 16px; height: auto; }
.post-content ul, .post-content ol { padding-left: 1.2rem; }
.post-content li { margin-bottom: .4rem; }
.post-aside { display: grid; gap: 20px; }
.post-aside-card { border-radius: 20px; padding: 34px; }
.post-aside-card h3 { font-size: 1.5rem; margin-bottom: 10px; }
.post-aside-card p { color: #555; margin-bottom: 22px; }
.post-aside-dark { background: var(--dark); color: #fff; }
.post-aside-dark p { color: rgba(255, 255, 255, .75); }
.post-aside-dark .btn-pill:hover { background: var(--green); color: #fff; }
@media (max-width: 575.98px) {
  .single-post .page-hero:has(+ .has-cover) { padding-bottom: 104px; }
  .post-cover { margin-top: -60px; border-radius: 16px; }
  .post-cover img { aspect-ratio: 16 / 10; }
  .post-content > p:first-child { font-size: 1.15rem; }
  .post-aside-card { padding: 26px; }
}