/*! Codeison — Beauty — Clean (sage palette) */
body[data-theme="beauty-clean"] {
  --codeison-brand: #365314;
  --codeison-accent: #84cc16;
  --codeison-text: #1a2e05;
  --codeison-bg: #ffffff;
  --codeison-bg-soft: #f7fee7;
  --codeison-border: #d9f99d;
}
body[data-theme="beauty-clean"] .cds-hero-title { font-weight: 400; color: #365314; }
body[data-theme="beauty-clean"] .cds-section-eyebrow { color: #365314; letter-spacing: .24em; }
body[data-theme="beauty-clean"] .cds-btn { background: #365314; color: #f7fee7; border-color: #365314; }
body[data-theme="beauty-clean"] .cds-btn:hover { background: #84cc16; color: #1a2e05; border-color: #84cc16; }

/* HEADER 7 */
.cds-h7 { background: #fff; font-family: var(--codeison-font); }
.cds-h7-certs { background: #f7fee7; color: #365314; }
.cds-h7-certs-inner { display: flex; justify-content: center; gap: 32px; padding: 8px 24px; font-size: 11px; letter-spacing: .06em; flex-wrap: wrap; }
.cds-h7-certs i { color: #84cc16; margin-right: 4px; }

.cds-h7-strip { background: #fff; border-bottom: 1px solid #d9f99d; font-size: 12px; color: #365314; }
.cds-h7-strip-inner { display: flex; align-items: center; padding: 8px 24px; gap: 20px; }
.cds-h7-strip-link { color: #365314 !important; text-decoration: none; font-weight: 500; }
.cds-h7-strip-msg { flex: 1; text-align: center; }
.cds-h7-strip-side { display: inline-flex; gap: 6px; }

.cds-h7-main { background: #fff; border-bottom: 1px solid #d9f99d; }
/* Flexbox layout: search left (flex-grows from min 280 to max 480), logo
   center, tools flush right. Mobile-toggle is display:none on desktop so
   only 3 visible items. The flex-1 on left/right wrappers makes them
   match width so logo stays centered relative to the viewport. */
.cds-h7-main-inner { display: flex; align-items: center; gap: 24px; padding: 20px 24px; position: relative; }
.cds-h7-main-inner .cds-h7-search { flex: 1 1 0; max-width: 480px; }
.cds-h7-main-inner .cds-h7-logo { position: absolute; left: 50%; transform: translateX(-50%); }
.cds-h7-main-inner .cds-h7-tools { margin-left: auto; }
@media (max-width: 991px) {
  .cds-h7-main-inner { gap: 14px; }
  .cds-h7-main-inner .cds-h7-logo { position: static; transform: none; }
}

.cds-h7-search { display: flex; align-items: center; gap: 10px; background: #f7fee7; border-radius: 999px; padding: 10px 16px; max-width: 480px; }
.cds-h7-search i { color: #365314; }
.cds-h7-search input { flex: 1; background: transparent; border: 0; outline: none; font-size: 13px; color: #365314; }

.cds-h7-logo { text-align: center; font-family: var(--codeison-font-display); font-size: 30px; font-weight: 500; color: #365314; text-decoration: none; letter-spacing: .02em; justify-self: center; }
.cds-h7-logo img { max-height: 42px; }

.cds-h7-tools { display: inline-flex; gap: 18px; justify-self: end; align-items: center; white-space: nowrap; }
.cds-h7-icon { background: none; border: 0; color: #365314; font-size: 18px; cursor: pointer; text-decoration: none; transition: color 150ms; padding: 6px; }
.cds-h7-icon:hover { color: #84cc16; }

.cds-h7-nav { position: relative; z-index: 40; background: #fff; border-bottom: 1px solid #d9f99d; }
.cds-h7-nav-inner { display: flex; align-items: center; padding: 0 24px; }
.cds-h7-nav-inner > ul { list-style: none; margin: 0; padding: 0; display: flex; flex: 1; justify-content: center; gap: 0; }
.cds-h7-nav-item { position: static; }
.cds-h7-nav-item > a { display: block; padding: 14px 22px; color: #365314; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: color 150ms; }
.cds-h7-nav-item:hover > a { color: #84cc16; }
.cds-h7-nav-cta { padding: 10px 18px; background: #84cc16; color: #1a2e05; text-decoration: none; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.cds-h7-nav-cta:hover { background: #365314; color: #f7fee7; }

.cds-h7-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 2px solid #84cc16; box-shadow: 0 20px 40px rgba(54,83,20,.08); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 220ms; z-index: 100; pointer-events: none; }
.cds-h7-nav-item.has-mega:hover > .cds-h7-mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.cds-h7-mega-inner { padding: 28px 24px; }
.cds-h7-mega-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) 280px; gap: 32px; align-items: start; }
.cds-h7-mega-col strong { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #365314; margin-bottom: 10px; }
.cds-h7-mega-col ul { list-style: none; margin: 0; padding: 0; column-count: 1; }
.cds-h7-mega-col li a { display: block; padding: 4px 0; font-size: 13px; color: #4d7c0f; text-decoration: none; transition: color 150ms; }
.cds-h7-mega-col li a:hover { color: #84cc16; }

/* Featured-card tile that replaced the hardcoded "Shop by Concern" pills.
   Pulls a category image from the active pack's asset dir so the megamenu
   feels intentional regardless of which pack is loaded. */
.cds-h7-mega-feature { display: flex; align-items: stretch; }
.cds-h7-mega-feature-card { display: block; width: 100%; text-decoration: none; color: inherit; border-radius: 8px; overflow: hidden; background: #f7fee7; transition: transform 200ms, box-shadow 200ms; }
.cds-h7-mega-feature-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(54,83,20,.12); }
.cds-h7-mega-feature-img { aspect-ratio: 16/9; background-size: cover; background-position: center; }
.cds-h7-mega-feature-body { padding: 14px 16px 16px; }
.cds-h7-mega-feature-body span { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #84cc16; font-weight: 700; margin-bottom: 4px; }
.cds-h7-mega-feature-body strong { display: block; font-family: var(--codeison-font-display); font-style: italic; font-size: 18px; font-weight: 400; color: #365314; margin-bottom: 6px; line-height: 1.2; text-transform: capitalize; letter-spacing: 0; }
.cds-h7-mega-feature-body em { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #4d7c0f; font-style: normal; font-weight: 600; }

/* FOOTER 7 */
.cds-f7 { background: #fff; color: #365314; font-family: var(--codeison-font); }
.cds-f7-cta { background: linear-gradient(135deg, #f7fee7 0%, #ecfccb 100%); padding: 56px 24px; border-top: 1px solid #d9f99d; border-bottom: 1px solid #d9f99d; }
.cds-f7-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cds-f7-cta em { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #84cc16; font-style: normal; font-weight: 600; }
.cds-f7-cta h3 { font-family: var(--codeison-font-display); font-size: 32px; font-weight: 500; color: #365314; margin: 6px 0 6px; }
.cds-f7-cta p { margin: 0; color: #4d7c0f; font-size: 14px; }
.cds-f7-cta-btn { background: #365314; color: #f7fee7; padding: 14px 28px; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; transition: all 150ms; white-space: nowrap; }
.cds-f7-cta-btn:hover { background: #84cc16; color: #1a2e05; }

.cds-f7-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding: 56px 0; }
@media (max-width: 768px) { .cds-f7-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { .cds-f7-grid { grid-template-columns: 1fr; } }
.cds-f7-brand h4 { font-family: var(--codeison-font-display); font-size: 22px; color: #365314; margin: 0 0 10px; }
.cds-f7-brand p { font-size: 13px; color: #4d7c0f; line-height: 1.6; margin: 0 0 16px; }
.cds-f7-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.cds-f7-badges span { font-size: 11px; color: #365314; background: #f7fee7; padding: 5px 10px; border-radius: 999px; border: 1px solid #d9f99d; }
.cds-f7-badges i { color: #84cc16; }
.cds-f7-grid h5 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #365314; margin: 0 0 14px; }
.cds-f7-grid ul { list-style: none; margin: 0; padding: 0; }
.cds-f7-grid li { margin-bottom: 8px; }
.cds-f7-grid a { color: #4d7c0f; text-decoration: none; font-size: 13px; }
.cds-f7-grid a:hover { color: #84cc16; }

.cds-f7-bottom { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; border-top: 1px solid #d9f99d; font-size: 12px; color: #4d7c0f; flex-wrap: wrap; gap: 12px; }
.cds-f7-payments i { color: #365314; font-size: 22px; margin-left: 8px; }