/*
 * Way — style variants.
 * Driven by Appearance > Way Style: body classes way-l-{part}-{white|soft|bold} (where colour is used)
 * and way-d-{part}-{simple|glass|crystal} (design of each part). Colours come from the --way-* variables.
 */

:root {
  --way-body-w: 400;
  --way-page-bg: #fff;
  --way-top-bg: var(--way-deep);
  --way-hdr-bg: var(--way-ivory);
  --way-foot-bg: var(--way-deep);
  --way-card-bg: transparent;
}
body { font-weight: var(--way-body-w); }
body.way-font-display { font-synthesis-weight: none; }
/* paragraph weight: only when changed from the default, so the default look is untouched */
body.way-w-500 :is(p, li, dd, td, th, label, em, input, textarea, select, .way-hero__lead, .way-fcol__blurb, .way-pcard__m) { font-weight: 500 !important; }
body.way-w-700 :is(p, li, dd, td, th, label, em, input, textarea, select, .way-hero__lead, .way-fcol__blurb, .way-pcard__m) { font-weight: 700 !important; }

/* ================= where to use colour ================= */

/* page background */
body.way-l-bg-soft { --way-page-bg: var(--way-ivory); }
body.way-l-bg-bold { --way-page-bg: var(--way-blush); }

/* top bar */
body.way-l-top-soft { --way-top-bg: var(--way-blush); }
body.way-l-top-white { --way-top-bg: #fff; }
body.way-l-top-soft .way-topbar, body.way-l-top-white .way-topbar,
body.way-l-top-soft .way-topbar a, body.way-l-top-white .way-topbar a { color: var(--way-navy); }
body.way-l-top-soft .way-topbar a:hover, body.way-l-top-white .way-topbar a:hover { color: var(--way-gold-d); }
body.way-l-top-soft .way-topbar__r, body.way-l-top-white .way-topbar__r { color: var(--way-gold-d); }
body.way-l-top-white .way-topbar { border-bottom: 1px solid color-mix(in srgb, var(--way-navy) 12%, transparent); }

/* header */
body.way-l-hdr-white { --way-hdr-bg: #fff; }
body.way-l-hdr-bold { --way-hdr-bg: var(--way-navy); }
body.way-l-hdr-white .way-header { border-bottom-color: color-mix(in srgb, var(--way-navy) 12%, transparent); }

/* home banner */
body.way-l-hero-white .way-hero { background: var(--way-page-bg); }
body.way-l-hero-bold .way-hero {
  background:
    radial-gradient(900px 560px at 85% 40%, color-mix(in srgb, var(--way-gold) 42%, var(--way-blush)) 0%, transparent 72%),
    radial-gradient(700px 500px at 0% 100%, color-mix(in srgb, var(--way-gold) 26%, var(--way-blush)) 0%, transparent 70%),
    var(--way-blush);
}

/* buttons */
body.way-l-btn-soft :is(.way-btn--navy, .way-hdr-cta, .button.alt, .button.checkout, .single_add_to_cart_button, #place_order) {
  background: var(--way-blush); border-color: color-mix(in srgb, var(--way-gold) 70%, transparent); color: var(--way-navy) !important;
}
body.way-l-btn-soft :is(.way-btn--navy, .way-hdr-cta, .button.alt, .button.checkout, .single_add_to_cart_button, #place_order):hover {
  background: var(--way-gold); border-color: var(--way-gold); color: var(--way-deep) !important;
}
body.way-l-btn-white :is(.way-btn--navy, .way-hdr-cta, .button.alt, .button.checkout, .single_add_to_cart_button, #place_order) {
  background: #fff; border-color: color-mix(in srgb, var(--way-navy) 30%, transparent); color: var(--way-navy) !important;
}
body.way-l-btn-white :is(.way-btn--navy, .way-hdr-cta, .button.alt, .button.checkout, .single_add_to_cart_button, #place_order):hover {
  background: var(--way-navy); border-color: var(--way-navy); color: #fff !important;
}

/* bold header (after buttons so its call-to-action wins) */
body.way-l-hdr-bold .way-header { border-bottom-color: var(--way-gold); }
body.way-l-hdr-bold .way-header .way-logo, body.way-l-hdr-bold .way-header .way-logo__t,
body.way-l-hdr-bold .way-header .way-ib, body.way-l-hdr-bold .way-header .way-menu > li > a { color: var(--way-ivory); }
body.way-l-hdr-bold .way-header .way-logo__s { color: var(--way-gold); }
body.way-l-hdr-bold .way-header .way-ib:hover { background: rgba(255, 255, 255, .1); color: var(--way-gold); }
body.way-l-hdr-bold .way-header .way-menu > li > a:hover { color: var(--way-gold); }
body.way-l-hdr-bold .way-header .way-hdr-cta { background: var(--way-gold); border-color: var(--way-gold); color: var(--way-deep) !important; }

/* product cards and categories */
body.way-l-card-soft { --way-card-bg: var(--way-blush); }
body.way-l-card-bold { --way-card-bg: color-mix(in srgb, var(--way-gold) 34%, var(--way-blush)); }
body.way-l-card-soft ul.products li.product, body.way-l-card-bold ul.products li.product {
  padding: 12px; background: var(--way-card-bg); border-radius: 10px 46px 10px 46px;
}
body.way-l-card-soft .way-medal__ring, body.way-l-card-bold .way-medal__ring { background: var(--way-card-bg); }

/* gift banner */
body.way-l-gift-white .way-gift {
  background: var(--way-page-bg);
  border-top: 1px solid color-mix(in srgb, var(--way-gold) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--way-gold) 45%, transparent);
}
body.way-l-gift-bold .way-gift { background: linear-gradient(135deg, var(--way-navy), var(--way-deep)); }
body.way-l-gift-bold .way-gift h2, body.way-l-gift-bold .way-gift__loc { color: #fff; }
body.way-l-gift-bold .way-gift h2 em { color: var(--way-gold); }
body.way-l-gift-bold .way-gift p { color: rgba(255, 255, 255, .82); }
body.way-l-gift-bold .way-gift .way-btn--navy { background: var(--way-gold); border-color: var(--way-gold); color: var(--way-deep) !important; }
body.way-l-gift-bold .way-gift .way-btn--ghost { color: #fff !important; border-color: rgba(255, 255, 255, .45); }

/* footer */
body.way-l-foot-soft { --way-foot-bg: var(--way-blush); }
body.way-l-foot-white { --way-foot-bg: #fff; }
body.way-l-foot-soft .way-footer, body.way-l-foot-white .way-footer { color: var(--way-navy); }
body.way-l-foot-white .way-footer { border-top: 1px solid color-mix(in srgb, var(--way-navy) 12%, transparent); }
body.way-l-foot-soft .way-fcol h4, body.way-l-foot-white .way-fcol h4 { color: var(--way-gold-d); }
body.way-l-foot-soft .way-fcol__blurb, body.way-l-foot-white .way-fcol__blurb,
body.way-l-foot-soft .way-footer__bar-in, body.way-l-foot-white .way-footer__bar-in { color: color-mix(in srgb, var(--way-navy) 78%, transparent); }
body.way-l-foot-soft .way-fcontact a, body.way-l-foot-white .way-fcontact a,
body.way-l-foot-soft .way-flinks a, body.way-l-foot-white .way-flinks a,
body.way-l-foot-soft .way-footer__bar a, body.way-l-foot-white .way-footer__bar a { color: var(--way-navy); }
body.way-l-foot-soft .way-fcontact a:hover, body.way-l-foot-white .way-fcontact a:hover,
body.way-l-foot-soft .way-flinks a:hover, body.way-l-foot-white .way-flinks a:hover,
body.way-l-foot-soft .way-footer__bar a:hover, body.way-l-foot-white .way-footer__bar a:hover { color: var(--way-gold-d); }
body.way-l-foot-soft .way-fcontact .way-i, body.way-l-foot-white .way-fcontact .way-i { color: var(--way-gold-d); }
body.way-l-foot-soft .way-logo--footer .way-logo__t, body.way-l-foot-white .way-logo--footer .way-logo__t { color: var(--way-navy); }
body.way-l-foot-soft .way-logo--footer .way-logo__s, body.way-l-foot-white .way-logo--footer .way-logo__s { color: var(--way-gold-d); }
body.way-l-foot-soft .way-social--footer a, body.way-l-foot-white .way-social--footer a { color: var(--way-navy); }
body.way-l-foot-soft .way-social--footer a:hover, body.way-l-foot-white .way-social--footer a:hover { color: var(--way-deep); }
body.way-l-foot-soft .way-footer__bar, body.way-l-foot-white .way-footer__bar { border-top-color: color-mix(in srgb, var(--way-navy) 14%, transparent); }
body.way-l-foot-soft .way-news { background: color-mix(in srgb, var(--way-gold) 16%, var(--way-blush)); border-bottom-color: color-mix(in srgb, var(--way-navy) 12%, transparent); }
body.way-l-foot-white .way-news { background: var(--way-ivory); border-bottom-color: color-mix(in srgb, var(--way-navy) 12%, transparent); }
body.way-l-foot-soft .way-news__t h3, body.way-l-foot-white .way-news__t h3 { color: var(--way-navy); }
body.way-l-foot-soft .way-news__t p, body.way-l-foot-white .way-news__t p { color: color-mix(in srgb, var(--way-navy) 78%, transparent); }

/* ================= design of each part ================= */

/* ---- top bar: glass ---- */
body.way-d-top-glass .way-topbar {
  margin: 8px 14px 0; border-radius: 999px;
  background: color-mix(in srgb, var(--way-top-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--way-navy) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
body.way-d-top-glass .way-topbar__in { padding: 8px 22px; }

/* ---- top bar: crystal ---- */
body.way-d-top-crystal .way-topbar {
  border-bottom: 2px solid var(--way-gold);
  background:
    repeating-linear-gradient(115deg, transparent 0 60px, rgba(255, 255, 255, .07) 60px 62px),
    linear-gradient(100deg, var(--way-top-bg) 0%, color-mix(in srgb, var(--way-top-bg) 70%, var(--way-gold)) 22%, var(--way-top-bg) 40%, var(--way-top-bg) 62%, color-mix(in srgb, var(--way-top-bg) 78%, var(--way-gold)) 80%, var(--way-top-bg) 100%);
}

/* ---- header: glass ---- */
body.way-d-hdr-glass .way-header, body.way-d-hdr-glass .way-header.is-stuck {
  margin: 10px 14px; border-radius: 18px;
  background: color-mix(in srgb, var(--way-hdr-bg) 55%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--way-navy) 16%, transparent), inset 0 1px 0 rgba(255, 255, 255, .9);
}
body.way-d-hdr-glass.way-l-hdr-bold .way-header, body.way-d-hdr-glass.way-l-hdr-bold .way-header.is-stuck {
  background: color-mix(in srgb, var(--way-hdr-bg) 82%, transparent); border-color: rgba(255, 255, 255, .25);
}
body.way-d-hdr-glass.way-sticky-header .way-header { top: 10px; }
body.way-d-hdr-glass.admin-bar.way-sticky-header .way-header { top: 42px; }

/* ---- header: crystal ---- */
body.way-d-hdr-crystal .way-header, body.way-d-hdr-crystal .way-header.is-stuck {
  border-bottom: 0;
  background:
    repeating-linear-gradient(118deg, transparent 0 46px, rgba(255, 255, 255, .55) 46px 48px),
    linear-gradient(100deg, var(--way-hdr-bg) 0%, color-mix(in srgb, var(--way-gold) 22%, var(--way-hdr-bg)) 38%, var(--way-hdr-bg) 55%, color-mix(in srgb, var(--way-gold) 30%, var(--way-hdr-bg)) 100%);
}
body.way-d-hdr-crystal.way-l-hdr-bold .way-header, body.way-d-hdr-crystal.way-l-hdr-bold .way-header.is-stuck {
  background:
    repeating-linear-gradient(118deg, transparent 0 46px, rgba(255, 255, 255, .08) 46px 48px),
    linear-gradient(100deg, var(--way-navy) 0%, color-mix(in srgb, var(--way-navy) 72%, var(--way-gold)) 40%, var(--way-navy) 58%, color-mix(in srgb, var(--way-navy) 80%, var(--way-gold)) 100%);
}
body.way-d-hdr-crystal .way-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--way-gold), var(--way-gold-d), var(--way-gold), transparent);
}

/* ---- soft glow behind glass parts so the frost shows ---- */
body.way-fx-hdr .way-hero, body.way-fx-card .way-prod, body.way-fx-card .way-shop { position: relative; isolation: isolate; overflow: clip; }
body.way-fx-hdr .way-hero::after,
body.way-fx-card .way-prod::before, body.way-fx-card .way-prod::after,
body.way-fx-card .way-shop::before, body.way-fx-card .way-shop::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(46px); pointer-events: none;
}
body.way-fx-hdr .way-hero::after { width: 280px; height: 280px; left: -70px; top: -80px; background: color-mix(in srgb, var(--way-gold) 50%, transparent); }
body.way-fx-card .way-prod::before, body.way-fx-card .way-shop::before { width: 260px; height: 260px; left: 4%; top: 28%; background: color-mix(in srgb, var(--way-gold) 45%, transparent); }
body.way-fx-card .way-prod::after, body.way-fx-card .way-shop::after { width: 240px; height: 240px; right: 4%; top: 42%; background: color-mix(in srgb, var(--way-navy) 22%, transparent); }

/* ---- product cards: glass ---- */
body.way-d-card-glass ul.products li.product {
  padding: 12px; border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .72), color-mix(in srgb, var(--way-card-bg) 60%, rgba(255, 255, 255, .2)));
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--way-navy) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, .95);
}
body.way-d-card-glass ul.products li.product .woocommerce-LoopProduct-link,
body.way-d-card-glass ul.products li.product a img { border-radius: 16px; }

/* ---- product cards: crystal ---- */
body.way-d-card-crystal ul.products li.product {
  padding: 12px; border: 1.5px solid transparent; border-radius: 0;
  background:
    linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--way-gold) 16%, #fff) 46%, #fff 62%, color-mix(in srgb, var(--way-gold) 24%, #fff) 100%) padding-box,
    linear-gradient(135deg, var(--way-gold), #fff 38%, var(--way-gold-d) 70%, var(--way-gold)) border-box;
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
body.way-d-card-crystal ul.products li.product .woocommerce-LoopProduct-link {
  position: relative; border-radius: 0;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
body.way-d-card-crystal ul.products li.product a img { border-radius: 0; }
body.way-d-card-crystal ul.products li.product .woocommerce-LoopProduct-link::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 44%, transparent 56%), repeating-linear-gradient(60deg, transparent 0 22px, rgba(255, 255, 255, .12) 22px 23px);
}

/* ---- footer: glass ---- */
body.way-d-foot-glass .way-footer { margin: 54px 14px 14px; border-radius: 26px; overflow: clip; isolation: isolate; }
body.way-d-foot-glass .way-footer::before, body.way-d-foot-glass .way-footer::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(40px); pointer-events: none;
}
body.way-d-foot-glass .way-footer::before { width: 240px; height: 240px; left: -40px; top: -60px; background: color-mix(in srgb, var(--way-gold) 60%, transparent); }
body.way-d-foot-glass .way-footer::after { width: 220px; height: 220px; right: -30px; bottom: -70px; background: color-mix(in srgb, var(--way-gold) 38%, transparent); }
body.way-d-foot-glass .way-footer__main {
  margin-top: 24px; margin-bottom: 8px; padding-top: 48px; padding-bottom: 40px; border-radius: 20px;
  background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
body.way-d-foot-glass.way-l-foot-soft .way-footer__main, body.way-d-foot-glass.way-l-foot-white .way-footer__main {
  background: color-mix(in srgb, var(--way-navy) 6%, transparent); border-color: color-mix(in srgb, var(--way-navy) 14%, transparent);
}

/* ---- footer: crystal ---- */
body.way-d-foot-crystal .way-footer {
  padding-top: 22px;
  background: linear-gradient(120deg, var(--way-foot-bg) 0 32%, color-mix(in srgb, var(--way-foot-bg) 84%, var(--way-gold)) 32% 52%, var(--way-foot-bg) 52% 74%, color-mix(in srgb, var(--way-foot-bg) 91%, var(--way-gold)) 74% 100%);
  clip-path: polygon(0 22px, 26px 0, calc(100% - 26px) 0, 100% 22px, 100% 100%, 0 100%);
}
body.way-d-foot-crystal .way-footer::before {
  content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--way-gold), var(--way-gold-d), var(--way-gold), transparent);
}

@media (max-width: 782px) {
  body.way-d-hdr-glass .way-header, body.way-d-hdr-glass .way-header.is-stuck { margin: 8px 8px; }
  body.way-d-top-glass .way-topbar { margin: 6px 8px 0; }
  body.way-d-foot-glass .way-footer { margin: 40px 8px 8px; }
}

/* ================= small phones: keep the header icons inside the bar ================= */
@media (max-width: 430px) {
  body.way-d-hdr-glass .way-header__main { padding: 0 4px; gap: 2px; grid-template-columns: auto minmax(0, 1fr) auto; }
  body.way-d-hdr-glass .way-header__l, body.way-d-hdr-glass .way-header__r { gap: 0; }
  body.way-d-hdr-glass .way-ib { min-width: 36px; padding: 0 5px; }
  body.way-d-hdr-glass .way-logo__t { font-size: 20px; letter-spacing: .16em; padding-left: .16em; }
  body.way-d-hdr-glass .way-logo__s { letter-spacing: .2em; padding-left: .2em; }
}
@media (max-width: 374px) {
  .way-header__main { padding: 0 4px; gap: 2px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .way-header__l, .way-header__r { gap: 0; }
  .way-ib { min-width: 34px; padding: 0 5px; }
  .way-logo__t { font-size: 18px; letter-spacing: .14em; padding-left: .14em; }
  .way-logo__s { font-size: 6.5px; letter-spacing: .18em; padding-left: .18em; }
}