/* ==========================================================================
   S&S Kreates Co — Theme system (tokens + shared components)
   Source of truth: approved mockups (Home / Dashboard / Shop / Product).
   Loaded site-wide. Plain CSS, no framework. Scoped selectors use .ssk-*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Colour */
	--ssk-paper: #fbf6f0;
	--ssk-paper-2: #f6eee6;
	--ssk-surface: #fffdfb;
	--ssk-ink: #3a2a3e;
	--ssk-text: #4e4353;
	--ssk-muted: #7d7183;
	--ssk-plum: #4a2c4a;
	--ssk-plum-700: #3b2240;
	--ssk-plum-100: #ece3ee;
	--ssk-teal: #2f6f6b;
	--ssk-teal-700: #255956;
	--ssk-teal-300: #4f8e9c;
	--ssk-teal-100: #dfeeed;
	--ssk-gold: #c9a052;
	--ssk-gold-100: #f3e9d3;
	--ssk-blush: #f6e3e6;
	--ssk-pink: #d98ba0;
	--ssk-pink-700: #b8657f;
	--ssk-lavender: #e7ddf0;
	--ssk-lavender-700: #7b5f96;
	--ssk-sage: #8faf9b;
	--ssk-sage-700: #5f8a6e;
	--ssk-mint: #e3efe7;
	--ssk-star: #e3a93a;
	--ssk-line: rgba(58, 42, 62, 0.1);
	--ssk-line-strong: rgba(58, 42, 62, 0.18);
	--ssk-focus: #2f6f6b;

	/* Type */
	--ssk-font-display: "EB Garamond", "Iowan Old Style", Georgia, serif;
	--ssk-font-body: "Nunito", -apple-system, "Segoe UI", system-ui, sans-serif;
	--ssk-font-script: "Dancing Script", "Segoe Script", cursive;
	--ssk-fs-xs: 0.75rem;   /* 12 */
	--ssk-fs-sm: 0.875rem;  /* 14 */
	--ssk-fs-md: 1rem;      /* 16 */
	--ssk-fs-lg: 1.125rem;  /* 18 */
	--ssk-fs-xl: 1.375rem;  /* 22 */
	--ssk-fs-2xl: 1.75rem;  /* 28 */
	--ssk-fs-3xl: 2.25rem;  /* 36 */
	--ssk-fs-4xl: 3rem;     /* 48 */
	--ssk-fs-5xl: 3.5rem;   /* 56 */

	/* Shape / depth */
	--ssk-r-sm: 6px;
	--ssk-r-md: 10px;
	--ssk-r-lg: 14px;
	--ssk-r-xl: 20px;
	--ssk-r-pill: 999px;
	--ssk-shadow-sm: 0 2px 8px rgba(58, 42, 62, 0.06);
	--ssk-shadow-md: 0 8px 24px rgba(58, 42, 62, 0.08);
	--ssk-shadow-lg: 0 18px 48px rgba(58, 42, 62, 0.12);

	/* Layout */
	--ssk-container: 1280px;
	--ssk-gutter: 24px;
	--ssk-header-h: 72px;
	--ssk-tabbar-h: 64px;

	/* Legacy aliases used by older templates / mu-plugin (kept in sync) */
	--ssk-purple: var(--ssk-plum);
	--ssk-purple-dark: var(--ssk-plum-700);
	--ssk-teal-dark: var(--ssk-teal-700);
	--ssk-ivory: var(--ssk-paper);
	--ssk-plum-legacy: var(--ssk-ink);
	--ssk-header-offset: calc(var(--ssk-header-h) + 16px);
}

@media (min-width: 768px) {
	:root { --ssk-gutter: 32px; }
}

/* --------------------------------------------------------------------------
   2. Base (applies to all public pages)
   -------------------------------------------------------------------------- */
body.ssk-site {
	background: var(--ssk-paper);
	color: var(--ssk-text);
	font-family: var(--ssk-font-body);
	font-size: var(--ssk-fs-md);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
body.ssk-site.ssk-has-tabbar {
	padding-bottom: calc(var(--ssk-tabbar-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
	body.ssk-site.ssk-has-tabbar { padding-bottom: 0; }
}
.ssk-site h1, .ssk-site h2, .ssk-site h3, .ssk-site h4,
.ssk-site .ssk-display {
	font-family: var(--ssk-font-display);
	color: var(--ssk-ink);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.005em;
	margin: 0;
}
.ssk-site :where(p, ul, ol) { margin: 0 0 1em; }
.ssk-site a { color: var(--ssk-plum); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ssk-site a:hover { color: var(--ssk-teal); }
.ssk-site :focus-visible {
	outline: 3px solid var(--ssk-focus);
	outline-offset: 3px;
	border-radius: 4px;
}
.ssk-site img { max-width: 100%; height: auto; }

/* Hide Astra's own header/footer chrome — we render our own. */
body.ssk-site #masthead,
body.ssk-site .ast-mobile-header-wrap,
body.ssk-site #colophon,
body.ssk-site .site-footer:not(.ssk-footer) { display: none !important; }
body.ssk-site #content, body.ssk-site .site-content { background: transparent; }
body.ssk-site .ast-container { max-width: none; padding: 0; }
body.ssk-site .ast-separate-container .ast-article-single,
body.ssk-site .ast-separate-container .ast-article-post { background: transparent; padding: 0; border: 0; }

/* Skip link */
.ssk-skip-link {
	position: fixed; left: 8px; top: 8px; z-index: 10001;
	background: var(--ssk-plum); color: #fff; padding: 10px 14px; border-radius: var(--ssk-r-md);
	font-weight: 700;
}
.ssk-skip-link:not(:focus) { width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ssk-skip-link:focus { color: #fff; outline: 3px solid var(--ssk-gold); }

.ssk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.ssk-container {
	width: min(var(--ssk-container), calc(100% - 2 * var(--ssk-gutter)));
	margin-inline: auto;
}
.ssk-block { padding: 40px 0; }
@media (min-width: 768px) { .ssk-block { padding: 56px 0; } }
@media (min-width: 1024px) { .ssk-block { padding: 72px 0; } }

.ssk-eyebrow {
	font-family: var(--ssk-font-body);
	font-size: var(--ssk-fs-xs);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ssk-gold);
}
.ssk-script {
	font-family: var(--ssk-font-script);
	font-weight: 500;
	color: var(--ssk-plum);
	line-height: 1.2;
}
.ssk-lead { font-size: var(--ssk-fs-lg); color: var(--ssk-text); }
.ssk-rule {
	display: flex; align-items: center; gap: 12px;
	font-size: var(--ssk-fs-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ssk-gold); font-weight: 700;
}
.ssk-rule::before, .ssk-rule::after { content: ""; flex: 1; height: 1px; background: var(--ssk-gold); opacity: .55; }
.ssk-rule--short::before, .ssk-rule--short::after { flex: 0 0 48px; }
.ssk-heart { color: var(--ssk-gold); }
.ssk-divider-heart {
	display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ssk-gold); margin: 12px 0;
}
.ssk-divider-heart::before, .ssk-divider-heart::after { content: ""; width: 56px; height: 1px; background: var(--ssk-gold); }
.ssk-divider-heart svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.ssk-btn {
	--btn-bg: var(--ssk-plum);
	--btn-fg: #fff;
	--btn-bd: var(--ssk-plum);
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 12px 26px;
	border-radius: var(--ssk-r-pill);
	background: var(--btn-bg); color: var(--btn-fg) !important; border: 1.5px solid var(--btn-bd);
	font-family: var(--ssk-font-body); font-size: var(--ssk-fs-md); font-weight: 700;
	line-height: 1; text-decoration: none !important; cursor: pointer; white-space: nowrap; text-transform: none; letter-spacing: 0;
	transition: background .18s, color .18s, box-shadow .18s, transform .18s;
	box-shadow: var(--ssk-shadow-sm);
}
.ssk-btn:hover { --btn-bg: var(--ssk-plum-700); --btn-bd: var(--ssk-plum-700); box-shadow: var(--ssk-shadow-md); transform: translateY(-1px); }
.ssk-btn:active { transform: translateY(0); }
.ssk-btn svg { width: 18px; height: 18px; flex: none; }
.ssk-btn--teal { --btn-bg: var(--ssk-teal); --btn-bd: var(--ssk-teal); }
.ssk-btn--teal:hover { --btn-bg: var(--ssk-teal-700); --btn-bd: var(--ssk-teal-700); }
.ssk-btn--ghost { --btn-bg: transparent; --btn-fg: var(--ssk-plum); --btn-bd: var(--ssk-plum); box-shadow: none; }
.ssk-btn--ghost:hover { --btn-bg: var(--ssk-plum-100); --btn-fg: var(--ssk-plum); --btn-bd: var(--ssk-plum); }
.ssk-btn--soft { --btn-bg: var(--ssk-surface); --btn-fg: var(--ssk-ink); --btn-bd: var(--ssk-line-strong); }
.ssk-btn--soft:hover { --btn-bg: #fff; --btn-fg: var(--ssk-ink); --btn-bd: var(--ssk-plum); }
.ssk-btn--sm { min-height: 40px; padding: 8px 18px; font-size: var(--ssk-fs-sm); }
.ssk-btn--block { width: 100%; }
.ssk-btn[disabled], .ssk-btn.disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Icon button (search, bell, heart) */
.ssk-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; padding: 0; border-radius: 50%; flex: none;
	background: transparent; border: 0; color: var(--ssk-ink); cursor: pointer; position: relative;
	transition: background .15s, color .15s;
}
.ssk-iconbtn:hover { background: var(--ssk-plum-100); color: var(--ssk-plum); }
.ssk-iconbtn svg { width: 22px; height: 22px; flex: none; }
.ssk-iconbtn__dot {
	position: absolute; top: 8px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px;
	border-radius: 8px; background: var(--ssk-pink); color: #fff; font-size: 10px; font-weight: 800;
	display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* Wishlist heart (card corner + inline) */
.ssk-wish {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	width: 40px; height: 40px; padding: 0; border-radius: 50%;
	background: var(--ssk-surface); border: 1px solid var(--ssk-line); color: var(--ssk-plum);
	cursor: pointer; box-shadow: var(--ssk-shadow-sm); transition: color .15s, background .15s, transform .15s;
}
.ssk-wish svg { width: 20px; height: 20px; flex: none; }
.ssk-wish--inline { padding: 12px 26px; }
.ssk-wish:hover { color: var(--ssk-pink-700); transform: scale(1.06); }
.ssk-wish[aria-pressed="true"] { color: var(--ssk-pink-700); background: var(--ssk-blush); border-color: var(--ssk-pink); }
.ssk-wish[aria-pressed="true"] svg { fill: currentColor; }
.ssk-wish--inline { width: auto; height: auto; border-radius: var(--ssk-r-pill); }

/* --------------------------------------------------------------------------
   5. Cards, badges, chips, progress
   -------------------------------------------------------------------------- */
.ssk-card {
	background: var(--ssk-surface);
	border: 1px solid var(--ssk-line);
	border-radius: var(--ssk-r-lg);
	box-shadow: var(--ssk-shadow-sm);
	padding: 20px;
	position: relative;
}
.ssk-card--pad-lg { padding: 28px; }
.ssk-card--hover { transition: transform .18s, box-shadow .18s; }
.ssk-card--hover:hover { transform: translateY(-2px); box-shadow: var(--ssk-shadow-md); }
.ssk-card__title { font-size: var(--ssk-fs-xl); margin-bottom: 6px; }
.ssk-card__meta { color: var(--ssk-muted); font-size: var(--ssk-fs-sm); }

.ssk-badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; border-radius: var(--ssk-r-sm);
	font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2;
	background: var(--ssk-blush); color: var(--ssk-pink-700);
}
.ssk-badge--bundle { background: var(--ssk-lavender); color: var(--ssk-lavender-700); }
.ssk-badge--membership { background: var(--ssk-mint); color: var(--ssk-sage-700); }
.ssk-badge--free { background: var(--ssk-gold-100); color: #8a6a2a; }
.ssk-badge--category { background: var(--ssk-paper-2); color: var(--ssk-muted); }

.ssk-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ssk-chip {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 40px; padding: 8px 16px;
	border-radius: var(--ssk-r-pill);
	border: 1px solid var(--ssk-line-strong); background: var(--ssk-surface);
	color: var(--ssk-ink); font-size: var(--ssk-fs-sm); font-weight: 700; text-decoration: none !important;
	transition: background .15s, color .15s, border-color .15s;
	white-space: nowrap;
}
.ssk-chip:hover { border-color: var(--ssk-teal); color: var(--ssk-teal); }
.ssk-chip[aria-current="true"], .ssk-chip.is-active {
	background: var(--ssk-teal); border-color: var(--ssk-teal); color: #fff;
}

.ssk-progress { display: flex; align-items: center; gap: 12px; }
.ssk-progress__track {
	flex: 1; height: 12px; border-radius: 6px; background: var(--ssk-paper-2); overflow: hidden;
	border: 1px solid var(--ssk-line);
}
.ssk-progress__fill { height: 100%; border-radius: 6px; background: var(--ssk-teal-300); transition: width .6s ease; }
.ssk-progress--sage .ssk-progress__fill { background: var(--ssk-sage-700); }
.ssk-progress__pct { font-weight: 700; color: var(--ssk-muted); font-size: var(--ssk-fs-sm); min-width: 3ch; text-align: right; }

/* Stat: "$1,250 of $2,000" */
.ssk-stat { font-family: var(--ssk-font-display); font-size: var(--ssk-fs-3xl); color: var(--ssk-ink); line-height: 1; }
.ssk-stat small { font-family: var(--ssk-font-body); font-size: var(--ssk-fs-md); color: var(--ssk-muted); font-weight: 600; margin-left: 4px; }

/* Rating */
.ssk-rating { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ssk-fs-sm); color: var(--ssk-muted); }
.ssk-rating__stars { display: inline-flex; gap: 1px; color: var(--ssk-star); }
.ssk-rating__stars svg { width: 15px; height: 15px; }

/* Icon tiles (quick actions / feature list) */
.ssk-tile {
	display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
	padding: 16px 12px; border-radius: var(--ssk-r-lg); background: var(--ssk-surface); border: 1px solid var(--ssk-line);
	color: var(--ssk-ink); font-size: var(--ssk-fs-sm); font-weight: 700; text-decoration: none !important;
	transition: transform .18s, box-shadow .18s;
}
.ssk-tile:hover { transform: translateY(-2px); box-shadow: var(--ssk-shadow-md); color: var(--ssk-ink); }
.ssk-tile__icon {
	width: 100%; max-width: 96px; aspect-ratio: 1.6; border-radius: var(--ssk-r-md);
	display: inline-flex; align-items: center; justify-content: center; color: var(--ssk-plum);
}
.ssk-tile__icon svg { width: 30px; height: 30px; }
.ssk-tile__icon--blush { background: var(--ssk-blush); color: var(--ssk-pink-700); }
.ssk-tile__icon--mint { background: var(--ssk-mint); color: var(--ssk-sage-700); }
.ssk-tile__icon--lavender { background: var(--ssk-lavender); color: var(--ssk-lavender-700); }
.ssk-tile__icon--teal { background: var(--ssk-teal-100); color: var(--ssk-teal); }
.ssk-tile__icon--gold { background: var(--ssk-gold-100); color: #8a6a2a; }

.ssk-feature { display: flex; align-items: flex-start; gap: 12px; color: var(--ssk-text); font-size: var(--ssk-fs-sm); }
.ssk-feature__icon {
	flex: none; width: 38px; height: 38px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ssk-paper-2); border: 1px solid var(--ssk-line); color: var(--ssk-plum);
}
.ssk-feature__icon svg { width: 18px; height: 18px; }

/* Forms */
.ssk-field { display: flex; flex-direction: column; gap: 6px; }
.ssk-label { font-size: var(--ssk-fs-sm); font-weight: 700; color: var(--ssk-ink); }
.ssk-input, .ssk-select, .ssk-site .woocommerce-Input, .ssk-site .woocommerce form .form-row input.input-text,
.ssk-site .woocommerce form .form-row textarea, .ssk-site .woocommerce form .form-row select {
	width: 100%; min-height: 46px; padding: 10px 14px;
	border: 1px solid var(--ssk-line-strong); border-radius: var(--ssk-r-md);
	background: #fff; color: var(--ssk-ink); font-family: var(--ssk-font-body); font-size: var(--ssk-fs-md);
}
.ssk-input:focus, .ssk-select:focus { border-color: var(--ssk-teal); outline: 3px solid rgba(47,111,107,.25); outline-offset: 0; }
.ssk-select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234e4353' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.ssk-search {
	display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 8px 0 16px;
	border: 1px solid var(--ssk-line-strong); border-radius: var(--ssk-r-pill); background: #fff;
}
.ssk-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ssk-ink); outline: none; padding: 8px 0; }
.ssk-search input::placeholder { color: var(--ssk-muted); }
.ssk-search button { border: 0; padding: 0; background: transparent; color: var(--ssk-plum); width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ssk-search button:hover { background: var(--ssk-plum-100); }
.ssk-search svg { width: 18px; height: 18px; }

.ssk-notice {
	padding: 12px 16px; border-radius: var(--ssk-r-md); border: 1px solid var(--ssk-line);
	background: var(--ssk-mint); color: var(--ssk-sage-700); font-size: var(--ssk-fs-sm); font-weight: 600; margin-bottom: 16px;
}
.ssk-notice--error { background: var(--ssk-blush); color: #9a3f5a; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.ssk-header {
	position: sticky; top: 0; z-index: 1000;
	background: rgba(251, 246, 240, 0.92);
	backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--ssk-line);
}
.admin-bar .ssk-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ssk-header { top: 46px; } }
.ssk-header__inner {
	display: flex; align-items: center; gap: 16px;
	min-height: var(--ssk-header-h);
}
.ssk-header__brand { display: inline-flex; align-items: center; flex: none; text-decoration: none !important; }
.ssk-header__brand img { display: block; height: 40px; width: auto; }
.ssk-header__brand-text { font-family: var(--ssk-font-display); font-size: 1.5rem; color: var(--ssk-plum); }
.ssk-header__nav { display: none; flex: 1; justify-content: center; }
.ssk-header__nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ssk-header__nav a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: var(--ssk-r-md);
	color: var(--ssk-text); font-size: var(--ssk-fs-sm); font-weight: 700; text-decoration: none !important; position: relative;
}
.ssk-header__nav a svg { width: 16px; height: 16px; color: var(--ssk-plum); }
.ssk-header__nav a:hover { color: var(--ssk-plum); background: var(--ssk-plum-100); }
.ssk-header__nav li.current-menu-item > a, .ssk-header__nav a[aria-current="page"] { color: var(--ssk-plum); }
.ssk-header__nav li.current-menu-item > a::after, .ssk-header__nav a[aria-current="page"]::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--ssk-plum); border-radius: 2px;
}
.ssk-header__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ssk-header__actions .ssk-btn { min-height: 40px; padding: 8px 18px; font-size: var(--ssk-fs-sm); }
.ssk-header__signin { display: none; }
.ssk-header__cta { display: none; }
.ssk-header__menu { display: inline-flex; }
@media (min-width: 1024px) {
	.ssk-header__nav { display: flex; }
	.ssk-header__nav a { padding: 8px 10px; }
	.ssk-header__signin, .ssk-header__cta { display: inline-flex; }
	.ssk-header__menu { display: none; }
	.ssk-header__brand img { height: 40px; }
}
@media (min-width: 1280px) {
	.ssk-header__nav a { padding: 8px 14px; }
	.ssk-header__brand img { height: 44px; }
	.ssk-header__inner { gap: 24px; }
}

/* Account menu */
.ssk-account { position: relative; }
.ssk-account__btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px 4px 4px;
	border: 0; background: transparent; border-radius: var(--ssk-r-pill); cursor: pointer; color: var(--ssk-ink); font: inherit; font-weight: 700; font-size: var(--ssk-fs-sm);
}
.ssk-account__btn:hover { background: var(--ssk-plum-100); }
.ssk-account__btn > svg { width: 16px; height: 16px; color: var(--ssk-muted); }
.ssk-avatar {
	width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none;
	background: var(--ssk-pink); color: #fff; display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--ssk-font-display); font-size: 1.05rem; font-weight: 600;
	border: 2px solid #fff; box-shadow: 0 0 0 1px var(--ssk-line);
}
.ssk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ssk-avatar--lg { width: 56px; height: 56px; font-size: 1.5rem; }
.ssk-account__name { display: none; }
@media (min-width: 1024px) { .ssk-account__name { display: inline; } }
.ssk-account__menu {
	position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
	background: var(--ssk-surface); border: 1px solid var(--ssk-line); border-radius: var(--ssk-r-lg); box-shadow: var(--ssk-shadow-lg);
	padding: 8px; list-style: none; margin: 0; z-index: 1001;
}
.ssk-account__menu[hidden] { display: none; }
.ssk-account__menu a, .ssk-account__menu button {
	display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--ssk-r-md);
	color: var(--ssk-ink); font: inherit; font-size: var(--ssk-fs-sm); font-weight: 600; text-decoration: none !important; background: transparent; border: 0; cursor: pointer; text-align: left;
}
.ssk-account__menu a:hover, .ssk-account__menu button:hover { background: var(--ssk-plum-100); color: var(--ssk-plum); }
.ssk-account__menu svg { width: 16px; height: 16px; color: var(--ssk-plum); }
.ssk-account__menu li + li { margin-top: 2px; }
.ssk-account__menu .ssk-account__sep { height: 1px; background: var(--ssk-line); margin: 6px 4px; }

/* Search overlay bar */
.ssk-searchbar { border-bottom: 1px solid var(--ssk-line); background: var(--ssk-surface); }
.ssk-searchbar[hidden] { display: none; }
.ssk-searchbar .ssk-container { padding: 12px 0; }

/* Mobile drawer */
.ssk-drawer { position: fixed; inset: 0; z-index: 1100; }
.ssk-drawer[hidden] { display: none; }
.ssk-drawer__scrim { position: absolute; inset: 0; background: rgba(58, 42, 62, 0.45); }
.ssk-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw);
	background: var(--ssk-paper); box-shadow: var(--ssk-shadow-lg); padding: 16px 20px 32px; overflow-y: auto;
	display: flex; flex-direction: column; gap: 18px;
}
.ssk-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.ssk-drawer__head img { height: 36px; width: auto; }
.ssk-drawer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ssk-drawer__nav a {
	display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: var(--ssk-r-md);
	color: var(--ssk-ink); font-size: var(--ssk-fs-md); font-weight: 700; text-decoration: none !important;
}
.ssk-drawer__nav a svg { width: 20px; height: 20px; color: var(--ssk-plum); }
.ssk-drawer__nav a:hover, .ssk-drawer__nav li.current-menu-item > a { background: var(--ssk-plum-100); color: var(--ssk-plum); }
.ssk-drawer__actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }

/* Bottom tab bar (mobile) */
.ssk-tabbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
	display: grid; grid-template-columns: repeat(5, 1fr);
	background: rgba(255, 253, 251, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--ssk-line); box-shadow: 0 -6px 20px rgba(58,42,62,.06);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ssk-tabbar a, .ssk-tabbar button {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	min-height: var(--ssk-tabbar-h); padding: 8px 4px; border: 0; background: transparent;
	color: var(--ssk-muted); font: inherit; font-size: 11.5px; font-weight: 700; text-decoration: none !important; cursor: pointer;
}
.ssk-tabbar svg { width: 24px; height: 24px; }
.ssk-tabbar a:hover, .ssk-tabbar button:hover { color: var(--ssk-plum); }
.ssk-tabbar a[aria-current="page"] { color: var(--ssk-plum); }
.ssk-tabbar a[aria-current="page"] svg { fill: rgba(74,44,74,.12); }
@media (min-width: 768px) { .ssk-tabbar { display: none; } }

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.ssk-footer { margin-top: 48px; border-top: 1px solid var(--ssk-line); background: var(--ssk-paper-2); }
.ssk-footer__inner { padding: 40px 0 28px; display: grid; gap: 28px; }
.ssk-footer__brand img { height: 40px; width: auto; }
.ssk-footer__brand p { margin: 12px 0 0; max-width: 34ch; color: var(--ssk-muted); font-size: var(--ssk-fs-sm); }
.ssk-footer__cols { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); }
.ssk-footer h3 { font-family: var(--ssk-font-body); font-size: var(--ssk-fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ssk-gold); margin-bottom: 12px; font-weight: 800; }
.ssk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ssk-footer ul a { color: var(--ssk-text); text-decoration: none; font-size: var(--ssk-fs-sm); font-weight: 600; }
.ssk-footer ul a:hover { color: var(--ssk-plum); text-decoration: underline; }
.ssk-footer__social { display: flex; gap: 8px; }
.ssk-footer__social a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ssk-surface); border: 1px solid var(--ssk-line); color: var(--ssk-plum); }
.ssk-footer__social a:hover { background: var(--ssk-plum); color: #fff; }
.ssk-footer__social svg { width: 18px; height: 18px; }
.ssk-footer__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--ssk-line); color: var(--ssk-muted); font-size: var(--ssk-fs-xs); }
@media (min-width: 768px) {
	.ssk-footer__inner { grid-template-columns: 1.3fr 2fr; align-items: start; }
	.ssk-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   8. Decorative foliage (inline SVG, aria-hidden)
   -------------------------------------------------------------------------- */
.ssk-leaf { position: absolute; pointer-events: none; z-index: 0; opacity: .9; }
.ssk-leaf svg { width: 100%; height: 100%; }
.ssk-leaf--tl { top: -20px; left: -30px; width: 190px; transform: rotate(-12deg); }
.ssk-leaf--tr { top: -10px; right: -30px; width: 200px; transform: scaleX(-1) rotate(-8deg); }
.ssk-leaf--bl { bottom: -30px; left: -20px; width: 180px; transform: rotate(160deg); }
.ssk-leaf--br { bottom: -20px; right: -10px; width: 200px; transform: scaleX(-1) rotate(165deg); }
.ssk-leaf--gold svg path { stroke: var(--ssk-gold); }
@media (max-width: 767px) {
	.ssk-leaf { width: 120px; }
	.ssk-leaf--tl { left: -40px; }
	.ssk-leaf--tr { right: -40px; }
}
.ssk-blob { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; z-index: 0; }

/* --------------------------------------------------------------------------
   9. WooCommerce global polish (buttons, notices) inside the SSK shell
   -------------------------------------------------------------------------- */
.ssk-site .woocommerce .button, .ssk-site .woocommerce button.button, .ssk-site .woocommerce a.button,
.ssk-site .woocommerce input.button, .ssk-site .woocommerce #respond input#submit, .ssk-site .wc-block-components-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 10px 22px; border-radius: var(--ssk-r-pill);
	background: var(--ssk-plum); color: #fff; border: 1.5px solid var(--ssk-plum);
	font-family: var(--ssk-font-body); font-weight: 700; font-size: var(--ssk-fs-sm); line-height: 1; text-decoration: none;
	transition: background .18s, box-shadow .18s;
}
.ssk-site .woocommerce .button:hover, .ssk-site .woocommerce button.button:hover, .ssk-site .woocommerce a.button:hover { background: var(--ssk-plum-700); color: #fff; box-shadow: var(--ssk-shadow-md); }
.ssk-site .woocommerce .button.alt, .ssk-site .woocommerce button.button.alt { background: var(--ssk-plum); border-color: var(--ssk-plum); color: #fff; }
.ssk-site .woocommerce .button.alt:hover { background: var(--ssk-plum-700); }
.ssk-site .woocommerce-message, .ssk-site .woocommerce-info, .ssk-site .woocommerce-error {
	border-top: 0; border-radius: var(--ssk-r-md); border: 1px solid var(--ssk-line); background: var(--ssk-surface); color: var(--ssk-ink);
	padding: 14px 18px 14px 18px; box-shadow: var(--ssk-shadow-sm); font-size: var(--ssk-fs-sm);
}
.ssk-site .woocommerce-message::before, .ssk-site .woocommerce-info::before, .ssk-site .woocommerce-error::before { display: none; }
.ssk-site .woocommerce-message { background: var(--ssk-mint); }
.ssk-site .woocommerce-error { background: var(--ssk-blush); }
.ssk-site .woocommerce-message .button { float: none; margin-left: 10px; min-height: 36px; padding: 6px 14px; }
.ssk-site .woocommerce .star-rating span::before, .ssk-site .woocommerce .star-rating::before { color: var(--ssk-star); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ssk-site *, .ssk-site *::before, .ssk-site *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   10. Shared page components: section header, product grid/card, trust strip
   -------------------------------------------------------------------------- */
.ssk-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ssk-sechead h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); }
.ssk-sechead .ssk-eyebrow { margin-bottom: 6px; }
.ssk-sechead__link { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: var(--ssk-fs-sm); text-decoration: none; white-space: nowrap; }

.ssk-pgrid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .ssk-pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ssk-pgrid--3, .ssk-pgrid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ssk-pgrid--4 { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.ssk-pcard {
	display: flex; flex-direction: column;
	background: var(--ssk-surface); border: 1px solid var(--ssk-line); border-radius: var(--ssk-r-lg);
	box-shadow: var(--ssk-shadow-sm); overflow: hidden; position: relative;
	transition: transform .18s, box-shadow .18s;
}
.ssk-pcard:hover { transform: translateY(-3px); box-shadow: var(--ssk-shadow-md); }
.ssk-pcard__media { position: relative; background: var(--ssk-paper-2); }
.ssk-pcard__media > a { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.ssk-pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.ssk-pcard:hover .ssk-pcard__media img { transform: scale(1.03); }
.ssk-pcard__media .ssk-wish { position: absolute; top: 12px; right: 12px; }
.ssk-pcard__badge { position: absolute; left: 0; bottom: 12px; }
.ssk-pcard__badge .ssk-badge { border-radius: 0 var(--ssk-r-sm) var(--ssk-r-sm) 0; padding: 5px 12px; }
.ssk-pcard__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; flex: 1; }
.ssk-pcard__title { font-size: var(--ssk-fs-xl); line-height: 1.2; }
.ssk-pcard__title a { color: var(--ssk-ink); text-decoration: none; }
.ssk-pcard__title a:hover { color: var(--ssk-plum); }
.ssk-pcard__desc { margin: 0; color: var(--ssk-text); font-size: var(--ssk-fs-sm); line-height: 1.5; }
.ssk-pcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.ssk-pcard__price { font-family: var(--ssk-font-display); font-size: var(--ssk-fs-xl); color: var(--ssk-ink); font-weight: 600; }
.ssk-pcard__price del { color: var(--ssk-muted); font-size: .8em; margin-right: 6px; }
.ssk-pcard__price ins { text-decoration: none; }
.ssk-pcard__cta { margin-top: 6px; }
.ssk-pcard__cta .ssk-btn { width: 100%; }
.ssk-pcard__cta .added_to_cart { display: block; text-align: center; margin-top: 8px; font-size: var(--ssk-fs-sm); font-weight: 700; }
.ssk-pcard__cta .ssk-btn.loading { opacity: .7; }
.ssk-pcard__cta .ssk-btn.added::after { content: "✓"; margin-left: 6px; }

.ssk-trust { list-style: none; margin: 0; padding: 20px 8px; display: grid; gap: 18px; background: var(--ssk-surface); border: 1px solid var(--ssk-line); border-radius: var(--ssk-r-lg); box-shadow: var(--ssk-shadow-sm); }
.ssk-trust__item { display: flex; align-items: center; gap: 14px; padding: 0 16px; }
.ssk-trust__icon { flex: none; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ssk-plum); background: var(--ssk-plum-100); }
.ssk-trust__icon svg { width: 22px; height: 22px; }
.ssk-trust__text { display: flex; flex-direction: column; gap: 2px; font-size: var(--ssk-fs-sm); color: var(--ssk-muted); }
.ssk-trust__text strong { color: var(--ssk-ink); font-size: var(--ssk-fs-md); font-weight: 700; }
@media (min-width: 768px) {
	.ssk-trust { grid-template-columns: repeat(3, 1fr); gap: 0; padding: 22px 8px; }
	.ssk-trust__item + .ssk-trust__item { border-left: 1px solid var(--ssk-line); }
}

/* Wishlist list (dashboard) */
.ssk-wishlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ssk-wishlist__item { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--ssk-line); border-radius: var(--ssk-r-md); background: #fff; }
.ssk-wishlist__item img, .ssk-wishlist__ph { width: 56px; height: 56px; border-radius: var(--ssk-r-sm); object-fit: cover; background: var(--ssk-paper-2); flex: none; }
.ssk-wishlist__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ssk-wishlist__body a { font-weight: 700; text-decoration: none; color: var(--ssk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Astra/Woo product-loop overrides so cards keep the mockup styling inside ul.products */
.ssk-site ul.products li.product .ssk-pcard, .ssk-site ul.products li.product .ssk-pcard * { text-align: left; }
.ssk-site ul.products li.product .ssk-pcard__cta { text-align: center; }
.ssk-site ul.products li.product .ssk-pcard .ssk-btn.button,
.ssk-site .ssk-pcard .ssk-btn.button, .ssk-site .ssk-pcard a.ssk-btn.button.add_to_cart_button {
	background: var(--ssk-plum); color: #fff; border: 1.5px solid var(--ssk-plum); border-radius: var(--ssk-r-pill);
	text-transform: none; letter-spacing: 0; font-size: var(--ssk-fs-md); font-weight: 700; line-height: 1; margin: 0; padding: 12px 26px; min-height: 48px; width: 100%;
}
.ssk-site .ssk-pcard .ssk-btn.button:hover { background: var(--ssk-plum-700); border-color: var(--ssk-plum-700); color: #fff; }
.ssk-site .ssk-pcard .ssk-btn.button.loading { opacity: .7; }
.ssk-site ul.products li.product .ssk-pcard__title { font-size: var(--ssk-fs-xl); margin: 0; padding: 0; }
.ssk-site ul.products li.product .ssk-pcard__price { margin: 0; color: var(--ssk-ink); font-size: var(--ssk-fs-xl); }
.ssk-site ul.products li.product .ssk-pcard__media a img { margin: 0; }

/* Mobile product card (mockup 390: image left, content right) */
@media (max-width: 559px) {
	.ssk-pcard { flex-direction: row; align-items: stretch; }
	.ssk-pcard__media { flex: 0 0 40%; max-width: 40%; }
	.ssk-pcard__media > a { aspect-ratio: auto; height: 100%; min-height: 190px; }
	.ssk-pcard__media .ssk-wish { top: 8px; right: 8px; width: 36px; height: 36px; }
	.ssk-pcard__badge { bottom: 8px; }
	.ssk-pcard__body { padding: 12px 12px 12px 14px; gap: 6px; min-width: 0; }
	.ssk-pcard__title { font-size: 1.15rem; }
	.ssk-pcard__desc { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.ssk-pcard__price { font-size: 1.15rem; }
	.ssk-pcard__cta .ssk-btn, .ssk-site .ssk-pcard .ssk-btn.button { min-height: 42px; padding: 8px 14px; font-size: 14px; }
	.ssk-pgrid { gap: 14px; }
}