/* =============================================================
   base26.css — PhotobookShop base stylesheet
   Used by homepage26.html and all future "26" pages.
   No Bootstrap dependency.
   ============================================================= */

/* ===========================
   RESET & BOX SIZING
=========================== */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-padding-top: 160px; /* clears the sticky header (~146px) on anchor jumps */
}

/* ===========================
   CSS VARIABLES
=========================== */
:root {
	--primary: #ee5a2a;
	--primary-dark: #d44e20;
	--primary-color: #ee5a2a;
	--accent: #f07d3a;
	--dark: #43437c;
	--white: #fff;
	--text-dark: #212529;
	--text-medium: #495057;
	--text-light: #868e96;
	--bg-light: #f8f9fa;
	--gray-50: #f8f9fa;
	--gray-100: #f1f3f5;
	--gray-200: #e9ecef;
	--gray-300: #dee2e6;
	--gray-500: #868e96;
	--gray-700: #495057;
	--gray-900: #212529;
	--success: #2ecc71;
  --save: #ff3232;
	--radius: 12px;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);
	--shadow-lg: 0 8px 30px rgba(0, 0, 0, .12);
	--transition: .25s cubic-bezier(.4, 0, .2, 1);
}

/* ===========================
   BASE
=========================== */
body {
	font-family: 'Inter', -apple-system, sans-serif;
	color: var(--gray-900);
	background: #fff;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: opacity ease-in 0.2s;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
button { font-family: inherit; }

/* ===========================
   GRID SYSTEM
=========================== */
.row {
	display: flex;
	flex-wrap: wrap;
}
.row.g-5 { gap: 48px; }
.row.g-4 { gap: 24px; }
.row.g-3 { gap: 16px; }

[class*="col-"] { box-sizing: border-box; width: 100%; }

.col-6  { width: 50%; }
.col-12 { width: 100%; }

@media (min-width: 768px) {
	.col-md-3  { width: 25%; }
	.col-md-4  { width: 33.333%; }
	.col-md-5  { width: 41.667%; }
	.col-md-6  { width: 50%; }
	.col-md-7  { width: 58.333%; }
	.col-md-8  { width: 66.667%; }
	.col-md-9  { width: 75%; }
	.offset-md-1 { margin-left: 8.333%; }
}

@media (min-width: 992px) {
	.col-lg-8  { width: 66.667%; }
}

/* Gap-aware column widths for .row.g-5 (gap: 48px)
   N=2 cols → subtract 24px, N=3 → 32px, N=4 → 36px */
.row.g-5 > .col-6   { width: calc(50% - 24px); }

@media (min-width: 768px) {
	.row.g-5 > .col-md-3 { width: calc(25% - 36px); }
	.row.g-5 > .col-md-4 { width: calc(33.333% - 32px); }
	.row.g-5 > .col-md-5 { width: calc(41.667% - 28px); }
	.row.g-5 > .col-md-6 { width: calc(50% - 24px); }
	.row.g-5 > .col-md-7 { width: calc(58.333% - 20px); }
	.row.g-5 > .col-md-8 { width: calc(66.667% - 16px); }
	.row.g-5 > .col-md-9 { width: calc(75% - 12px); }
}

/* Gap-aware column widths for .row.g-3 (gap: 16px)
   Formula: calc(N% - gap*(N-1)/N)
   N=2 cols → subtract 8px, N=3 → 10.667px, N=4 → 12px */
.row.g-3 > .col-6   { width: calc(50% - 8px); }

@media (min-width: 768px) {
	.row.g-3 > .col-md-3 { width: calc(25% - 12px); }
	.row.g-3 > .col-md-4 { width: calc(33.333% - 10.667px); }
	.row.g-3 > .col-md-6 { width: calc(50% - 8px); }
	.row.g-3 > .col-md-7 { width: calc(58.333% - 6.667px); }
	.row.g-3 > .col-md-8 { width: calc(66.667% - 5.333px); }
	.row.g-3 > .col-md-9 { width: calc(75% - 4px); }
}

/* Gap-aware column widths for .row.g-4 (gap: 24px)
   Formula: calc(N% - gap*(N-1)/N)
   N=2 cols → subtract 12px, N=3 → 16px, N=4 → 18px */
.row.g-4 > .col-6   { width: calc(50% - 12px); }

@media (min-width: 768px) {
	.row.g-4 > .col-md-3 { width: calc(25% - 18px); }
	.row.g-4 > .col-md-4 { width: calc(33.333% - 16px); }
	.row.g-4 > .col-md-5 { width: calc(41.667% - 14px); }
	.row.g-4 > .col-md-6 { width: calc(50% - 12px); }
	.row.g-4 > .col-md-7 { width: calc(58.333% - 10px); }
	.row.g-4 > .col-md-8 { width: calc(66.667% - 8px); }
	.row.g-4 > .col-md-9 { width: calc(75% - 6px); }
}

/* ===========================
   FLEX UTILITIES
=========================== */
.d-flex            { display: flex; }
.align-items-center  { align-items: center; }
.align-items-stretch { align-items: stretch; }
.justify-content-center { justify-content: center; }

/* ===========================
   TEXT UTILITIES
=========================== */
.text-center { text-align: center; }
.text-start  { text-align: left; }
.text-decoration-none { text-decoration: none; }
.fw-bold   { font-weight: 700; }
.fw-normal { font-weight: 400; }
.small     { font-size: 0.875em; }
.lead      { font-size: 1.1rem; line-height: 1.7; }
strong     { font-weight: 700; }

/* ===========================
   SPACING UTILITIES
=========================== */
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-5 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.pb-0 { padding-bottom: 0; }
.pt-0 { padding-top: 0; }

/* ===========================
   CONTAINER
=========================== */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ===========================
   GLOBAL UTILITIES
=========================== */
.orange { color: var(--accent); }

/* ===========================
   ANNOUNCEMENT BAR
=========================== */
.announcement-bar {
	background: var(--primary);
	color: #fff;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
	padding: 11px 40px;
	line-height: 1.4;
	position: relative;
	z-index: 1002;
}
.announcement-bar a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.announcement-bar a:hover { opacity: 0.85; }
.announcement-bar-close {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: rgba(255,255,255,0.7);
	font-size: 16px;
	cursor: pointer;
	line-height: 1;
	padding: 4px;
}
.announcement-bar-close:hover { color: #fff; }

/* Announcement-bar USP row (icon + text) — used by promo content, responsive */
.ann-usp { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; }
.ann-usp-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ann-usp-item i { font-size: 13px; opacity: 0.95; }
.ann-usp-item .ann-stars { display: inline-flex; gap: 1.5px; color: #ffce54; }
.ann-usp-item .ann-stars i { font-size: 11px; opacity: 1; }
@media (max-width: 767px) {
	.announcement-bar { padding: 9px 34px; font-size: 11.5px; }
	.ann-usp { gap: 8px 16px; }
	.ann-usp-item { gap: 6px; }
	.ann-usp-item i { font-size: 11px; }
}
@media (max-width: 380px) { .ann-usp { gap: 6px 12px; } }

/* ===========================
   HEADER
=========================== */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: var(--transition);
	border-bottom: 1px solid rgba(0,0,0,0.05);
}

.header.scrolled {
	background: var(--white);
	box-shadow: var(--shadow-sm);
}

.header-container {
	max-width: 1400px;
	margin: 0 auto;
	height: 70px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40px;
	transition: height 0.3s ease;
}

/* header-container height is fixed — does not shrink on scroll */

/* Utility bar — slim secondary nav (language, track order, sign in/out, help) */
.util-bar {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 40px; height: 32px;
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,.07);
  gap: 2px;
}
.util-bar a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 9px; height: 22px; border-radius: 6px;
  white-space: nowrap; font-size: 11px; font-weight: 500;
  letter-spacing: .025em; color: var(--text-light);
  text-decoration: none; transition: color .18s, background .18s;
}
.util-bar a:hover { color: var(--primary); background: rgba(238,90,42,.07); }
.util-bar a i { font-size: 10px; }
/* PBS+ upsell CTA — gold accent, sits first in the util bar (hidden for active PBS+ members) */
.util-bar a.util-plus-cta { color: #a9791a; font-weight: 700; }
.util-bar a.util-plus-cta i { color: #d9a41b; }
.util-bar a.util-plus-cta:hover { color: #8a6208; background: rgba(217,164,27,.12); }
.plus-dropdown-menu .plus-menu-cta { color: #a9791a; font-weight: 700; }
.plus-dropdown-menu .plus-menu-cta i { color: #d9a41b; }
.util-sep { width: 1px; height: 13px; background: var(--gray-200); flex-shrink: 0; margin: 0 2px; }

/* Country dropdown within util-bar */
.util-country {
  position: relative; height: 100%;
  display: flex; align-items: center;
}
.util-country-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; border-radius: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: .025em;
  color: var(--text-light); padding: 0 9px; height: 22px; line-height: 1;
  transition: color .18s, background .18s;
}
.util-country-btn:hover { color: var(--primary); background: rgba(238,90,42,.07); }
.util-country-btn img { width: 17px; height: 12px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.util-country-btn i { font-size: 7px; opacity: .65; transition: transform .2s; }
.util-country:hover .util-country-btn i { transform: rotate(180deg); }
.util-country-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 185px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.12);
  z-index: 10100; opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, visibility .2s, transform .22s cubic-bezier(.34,1.3,.64,1);
}
.util-country:hover .util-country-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.util-country-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; font-size: 12px; font-weight: 500;
  color: var(--text-dark); border-bottom: 1px solid var(--gray-100);
  transition: background .15s, color .15s; height: auto;
}
.util-country-dropdown a:last-child { border-bottom: none; }
.util-country-dropdown a:hover { background: var(--bg-light); color: var(--primary); }
.util-country-dropdown img { width: 22px; height: 15px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex-shrink: 0; }

@media (max-width: 768px) { .util-bar { display: none; } }

.logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	gap: 12px;
}

.logo {
	flex-shrink: 0;
}
.logo img {

  height: calc(30px + (45 - 30) * ((100vw - 320px) / (1440 - 320)));
  width: auto;
  min-height: 30px;
  max-height: 45px;
  max-width: 230px;        /* cap very wide logos (e.g. PBC 10.4:1) so they don't dominate the header */
  object-fit: contain;     /* never distort — letterbox instead of squashing */
  flex-shrink: 0;          /* flex header must not compress the logo */

}

.logo-text {
	font-size: 22px;
	font-weight: 700;
	color: var(--dark);
	letter-spacing: -0.5px;
	display: none;
}

.logo-text span { color: var(--primary); }

.nav-desktop {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 100%;
}

.nav-item {
	height: 100%;
	display: flex;
	align-items: center;
}

.nav-link {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-dark);
	text-decoration: none;
	padding: 0 20px;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: var(--transition);
	position: relative;
}

@media (max-width: 1200px) {
	.nav-link {padding: 0 10px; font-size: 14px;}
	
}

@media (max-width: 1024px) {
	.nav-link {padding: 0 20px; }
}


.nav-link::after {
	content: '';
	position: absolute;
	bottom: 25px;
	left: 20px;
	right: 20px;
	height: 2px;
	background: var(--primary-color);
	transform: scaleX(0);
	transition: transform 0.3s ease;
	transform-origin: right;
}

.nav-item:hover .nav-link { color: var(--primary-color); }
.nav-item:hover .nav-link::after { transform: scaleX(1); transform-origin: left; }

.nav-arrow {
	font-size: 10px;
	transition: transform 0.3s ease;
	opacity: 0.5;
}

.nav-item:hover .nav-arrow { transform: rotate(180deg); opacity: 1; }

/* ===========================
   MEGA MENU
=========================== */
.mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100vw;
	background: var(--white);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(15px);
	transition: var(--transition);
	border-top: 1px solid rgba(0,0,0,0.05);
	padding: 40px 0;
}

.nav-item:hover .mega-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
	transform: translateY(0);
}

.mega-menu-container {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 2fr;
	gap: 32px 48px;
	padding: 0 40px;
	align-items: start;
}

.mega-menu-container.mm-4col {
	max-width: 1400px;
	grid-template-columns: 1fr 1fr 1fr 2fr;
}
/* GR: custom 4-col mega-menu widths (desktop only — responsive breakpoints below still apply).
   Scoped to the body .GR class (from brand_name "PhotobookShop GR"; same hook formatCurrency uses). */
@media (min-width: 1025px) {
	body.GR .mega-menu-container.mm-4col { grid-template-columns: 1.2fr 1.2fr 1.1fr 1.5fr; }
}

@media (max-width: 1400px) {
	.mega-menu-container         { gap: 28px 40px; }
	.mega-menu-container.mm-4col { gap: 28px 36px; }
}

@media (max-width: 1200px) {
	.mega-menu-container         { gap: 24px 32px; padding: 0 28px; }
	.mega-menu-container.mm-4col { grid-template-columns: 1fr 1fr 1fr 1.5fr; gap: 20px 28px; }
}

@media (max-width: 1024px) {
	.mega-menu-container         { grid-template-columns: 1fr 1fr 1.5fr; gap: 20px 24px; padding: 0 20px; }
	.mega-menu-container.mm-4col { grid-template-columns: 1fr 1fr 1fr 1.5fr; gap: 16px 20px; padding: 0 20px; }
}

.mega-menu-column h3 {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--text-light);
	margin-bottom: 18px;
}

.mega-menu-column h3 ~ h3 { margin-top: 22px; }

.mega-menu-list { list-style: none; }

.mega-menu-list li {
	margin-bottom: 4px;
	transform: translateX(-8px);
	opacity: 0;
	transition: all 0.35s ease;
}

.nav-item:hover .mega-menu-list li { transform: translateX(0); opacity: 1; }
.nav-item:hover .mega-menu-list li:nth-child(1) { transition-delay: 0.07s; }
.nav-item:hover .mega-menu-list li:nth-child(2) { transition-delay: 0.12s; }
.nav-item:hover .mega-menu-list li:nth-child(3) { transition-delay: 0.17s; }
.nav-item:hover .mega-menu-list li:nth-child(4) { transition-delay: 0.22s; }
.nav-item:hover .mega-menu-list li:nth-child(5) { transition-delay: 0.27s; }

.mega-menu-link {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--text-dark);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 8px;
	transition: background 0.15s, color 0.15s, transform 0.2s;
}

.mega-menu-link:hover {
	color: var(--primary-color);
	background: rgba(238,90,42,0.06);
	transform: translateX(4px);
}
.mega-menu-link i { font-size: 13px; color: var(--text-light); transition: color 0.15s; width: 16px; text-align: center; }
.mega-menu-link:hover i { color: var(--primary-color); }

.mega-menu-preview {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: var(--gray-100);
	aspect-ratio: 16/9;
}

.mega-menu-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.mega-menu-preview img.active { opacity: 1; }

.mega-menu-preview-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16px;
	background: linear-gradient(transparent, rgba(0,0,0,0.6));
	color: #fff;
	z-index: 2;
}

/* ===========================
   NAV SPECIAL
=========================== */
.nav-link-offers { color: var(--primary) ; }

.badge-new {
	font-family: 'Fredoka One', cursive;
	color: var(--primary);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.5px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px;
	transform: rotate(-6deg);
	position: relative;
	line-height: 1;
}
.badge-new::before {
	content: '✦';
	font-family: sans-serif;
	font-size: 6px;
	position: absolute;
	top: -3px;
	left: -7px;
	opacity: 0.7;
}
.badge-new::after {
	content: '✦';
	font-family: sans-serif;
	font-size: 5px;
	position: absolute;
	bottom: -1px;
	right: -7px;
	opacity: 0.6;
}

/* ===========================
   HEADER ACTIONS
=========================== */
.header-actions { display: flex; align-items: center; gap: 4px; }

.icon-btn {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--text-dark);
	font-size: 18px;
	cursor: pointer;
	border-radius: 50%;
	transition: var(--transition);
	text-decoration: none;
}

.icon-btn:hover { background: var(--bg-light); color: var(--primary); }
.cart-btn { position: relative; }

/* Plus account icon — orange circle, white crown, PLUS label */
.acct-plus-trigger {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.icon-btn.icon-btn-plus {
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
}
.icon-btn.icon-btn-plus:hover {
  background: var(--primary-dark);
  color: #fff;
}
.acct-plus-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: .08em;
  font-family: "Inter", sans-serif;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
@media (max-width: 768px) { .acct-plus-label { display: none; } }

/* Regular (non-Plus) account dropdown */
.acct-dropdown-wrapper {
	position: relative;
}
.acct-dropdown-wrapper::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 16px;
	background: transparent;
}
.acct-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 220px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0,0,0,.15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s ease;
	z-index: 1000;
	pointer-events: none;
}
.acct-dropdown-wrapper:hover .acct-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: all;
}
.acct-dropdown::before {
	content: '';
	position: absolute;
	top: -6px;
	right: 20px;
	width: 12px;
	height: 12px;
	background: #fff;
	transform: rotate(45deg);
	box-shadow: -2px -2px 4px rgba(0,0,0,.08);
}

.plus-dropdown-wrapper {
	position: relative;
}

.plus-dropdown-wrapper::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 16px;
	background: transparent;
}

.plus-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 240px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.3s ease;
	z-index: 1000;
	pointer-events: none;
}

.plus-dropdown-wrapper:hover .plus-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: all;
}

.plus-dropdown::before {
	content: '';
	position: absolute;
	top: -6px;
	right: 20px;
	width: 12px;
	height: 12px;
	background: #fff;
	transform: rotate(45deg);
	box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.08);
}

.plus-dropdown-menu {
	list-style: none;
	padding: 8px 0;
	margin: 0;
}

.plus-dropdown-menu li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	color: var(--text-dark);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.2s ease, color 0.2s ease;
}

.plus-dropdown-menu li a:hover {
	background: var(--bg-light);
	color: var(--primary);
}

.plus-dropdown-menu li a i {
	width: 18px;
	font-size: 14px;
	color: var(--text-light);
	transition: color 0.2s ease;
}

.plus-dropdown-menu li a:hover i {
	color: var(--primary);
}

.dropdown-divider {
	height: 1px;
	background: var(--gray-200);
	margin: 8px 0;
}

/* CART DRAWER */
.cart-overlay {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 10200;
	opacity: 0; visibility: hidden;
	transition: opacity .3s, visibility .3s;
	backdrop-filter: blur(2px);
}
.cart-overlay.active { opacity: 1; visibility: visible; }

.cart-drawer {
	position: fixed; top: 0; right: 0; bottom: 0;
	width: 420px; max-width: 100vw;
	background: #fff;
	z-index: 10300;
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform .38s cubic-bezier(.4,0,.2,1);
	box-shadow: -6px 0 50px rgba(0,0,0,.15);
}
.cart-drawer.active { transform: translateX(0); }

.cart-drawer-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 22px;
	border-bottom: 1px solid var(--gray-200);
	flex-shrink: 0;
}
.cart-drawer-title { display: flex; align-items: center; gap: 10px; }
.cart-drawer-title > i { font-size: 18px; color: var(--primary); }
.cart-drawer-title > span:first-of-type { font-size: 17px; font-weight: 700; color: var(--text-dark); }
.cart-drawer-count { font-size: 11px; font-weight: 700; color: var(--text-light); background: var(--bg-light); padding: 3px 10px; border-radius: 20px; letter-spacing: .03em; }
.cart-drawer-close { width: 34px; height: 34px; border: none; background: var(--bg-light); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--text-medium); transition: background .2s, color .2s; flex-shrink: 0; }
.cart-drawer-close:hover { background: rgba(238,90,42,.12); color: var(--primary); }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; }

/* Individual cart drawer items */
.cd-item {
	display: flex; gap: 14px; padding: 16px 22px;
	border-bottom: 1px solid var(--gray-100);
	transition: background .18s;
}
.cd-item:last-child { border-bottom: none; }
.cd-item:hover { background: #fafafa; }

.cd-item-thumb {
	width: 84px; height: 84px; flex-shrink: 0;
	border-radius: 12px; background-size: cover; background-position: center;
	box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.cd-item-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cd-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cd-item-name { font-size: 14px; font-weight: 700; color: var(--text-dark); line-height: 1.3; }
.cd-item-remove { background: none; border: none; cursor: pointer; color: var(--gray-300); font-size: 14px; padding: 0; flex-shrink: 0; margin-top: 1px; transition: color .18s; line-height: 1; }
.cd-item-remove:hover { color: #e53e3e; }
.cd-item-meta { font-size: 11.5px; color: var(--text-light); line-height: 1.5; }
.cd-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.cd-item-pricing { display: flex; align-items: baseline; gap: 7px; }
.cd-item-was { font-size: 12px; color: var(--gray-300); text-decoration: line-through; }
.cd-item-price { font-size: 17px; font-weight: 900; color: var(--primary); }
.cd-item-qty-row { display: flex; align-items: center; gap: 8px; }
.cd-qty { display: flex; align-items: center; border: 1.5px solid var(--gray-200); border-radius: 8px; overflow: hidden; }
.cd-qty-btn { width: 30px; height: 30px; background: none; border: none; cursor: pointer; font-size: 17px; font-weight: 700; color: var(--text-dark); display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; line-height: 1; }
.cd-qty-btn:hover { background: rgba(238,90,42,.08); color: var(--primary); }
.cd-qty-val { min-width: 32px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text-dark); border-left: 1.5px solid var(--gray-200); border-right: 1.5px solid var(--gray-200); height: 30px; line-height: 30px; }
.cd-edit { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--primary); text-decoration: none; padding: 4px 9px; border-radius: 6px; border: 1.5px solid rgba(238,90,42,.25); transition: background .15s, border-color .15s; white-space: nowrap; }
.cd-edit:hover { background: rgba(238,90,42,.08); border-color: var(--primary); }
.cd-edit i { font-size: 10px; }

/* Cart drawer footer */
.cart-drawer-footer { flex-shrink: 0; padding: 14px 22px 22px; border-top: 1px solid var(--gray-200); background: var(--bg-light); }
.cd-savings { display: flex; align-items: center; justify-content: center; gap: 7px; background: rgba(238,90,42,.08); border-radius: 8px; padding: 9px 14px; font-size: 12.5px; color: var(--primary); font-weight: 600; margin-bottom: 16px; }
.cd-savings i { font-size: 12px; }
.cd-savings strong { font-weight: 900; }
/* Breakdown rows (shipping, processing, etc.) */
.cd-breakdown { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--gray-200); }
.cd-breakdown-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--text-medium); padding: 3px 0; }
.cd-breakdown-row span:last-child { font-weight: 700; color: var(--text-dark); }
.cd-breakdown-discount { color: #16a34a !important; }
.cd-breakdown-discount span:last-child { color: #16a34a; }
.cd-subtotal-price { font-size: 24px; font-weight: 900; color: var(--text-dark); letter-spacing: -.02em; }
/* Price inside checkout button */
.cd-btn-checkout .cd-subtotal-price { font-size: 16px; font-weight: 900; color: #fff; letter-spacing: -.01em; opacity: .95; }
.cd-footer-btns { display: flex; gap: 10px; }
.cd-btn-view { flex: 1; padding: 13px 16px; border-radius: 10px; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; background: #fff; border: 2px solid var(--gray-200); color: var(--text-dark); transition: border-color .2s, color .2s; }
.cd-btn-view:hover { border-color: var(--primary); color: var(--primary); }
.cd-btn-checkout { flex: 1; padding: 14px 18px; border-radius: 10px; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s; }
.cd-btn-checkout:hover { background: var(--primary-dark); color: #fff; }
@media (max-width: 480px) { .cart-drawer { width: 100vw; } }

/* ── Cart Drawer: minicart body (cd-item native markup) ── */

/* Qty display (no stepper in minicart) */
.cd-qty-label { font-size: 11.5px; color: var(--text-light); white-space: nowrap; }

/* Discounts block */
.cd-discounts { border-top: 1px solid var(--gray-100); padding: 10px 22px 4px; }
.cd-discount-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #16a34a; font-weight: 600; padding: 4px 0;
  gap: 8px;
}
.cd-discount-row span:first-child { flex: 1; }
.cd-remove-coupon {
  background: none; border: none; cursor: pointer; color: var(--gray-300);
  font-size: 11px; padding: 0 2px; line-height: 1; vertical-align: middle;
  transition: color .15s;
}
.cd-remove-coupon:hover { color: #e53e3e; }

/* Afterpay blurb */
.cd-buynow-note {
  padding: 6px 22px; font-size: 11.5px; color: var(--text-light);
  display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--gray-100);
}

/* Empty cart button (text link style) */
.cd-empty-form { padding: 8px 22px 12px; }
.cd-empty-btn {
  background: none; border: none; cursor: pointer;
  font-size: 11.5px; color: var(--text-light); display: flex; align-items: center;
  gap: 5px; padding: 0; transition: color .15s;
}
.cd-empty-btn:hover { color: #e53e3e; }

/* Empty cart state */
.cd-empty-state {
  padding: 52px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.cd-empty-state > i { font-size: 40px; color: var(--gray-200); }
.cd-empty-state p { color: var(--text-medium); font-size: 14px; margin: 0; }
.cd-shop-link {
  display: inline-block; padding: 10px 24px; background: var(--primary);
  color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 13px;
}
.cd-shop-link:hover { background: var(--primary-dark); color: #fff; }

.cart-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--primary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 0 5px;
}

.menu-toggle {
	display: none;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--text-dark);
	font-size: 20px;
	cursor: pointer;
	border-radius: 8px;
	transition: var(--transition);
}

.menu-toggle:hover { background: var(--bg-light); }

/* ===========================
   OVERLAY & MOBILE DRAWER
=========================== */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
	z-index: 999;
}

.overlay.active { opacity: 1; visibility: visible; }

.mobile-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 320px;
	height: 100%;
	background: #fff;
	z-index: 1001;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
}

.mobile-drawer.active { transform: translateX(0); }

.mobile-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid var(--gray-200);
}

.mobile-drawer-title { font-size: 18px; font-weight: 700; color: var(--text-dark); }

.mobile-drawer-close {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--text-dark);
	font-size: 18px;
	cursor: pointer;
	border-radius: 8px;
	transition: var(--transition);
}

.mobile-drawer-close:hover { background: var(--bg-light); }
.mobile-drawer-content { flex: 1; overflow-y: auto; padding: 0; }
.mobile-nav-list { list-style: none; }
.mobile-nav-item { border-bottom: 1px solid var(--gray-100); }

.mobile-nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-dark);
	cursor: pointer;
	transition: var(--transition);
	text-decoration: none;
}

.mobile-nav-link:hover { background: var(--bg-light); color: var(--primary); }

.mobile-nav-arrow {
	font-size: 12px;
	transition: transform 0.3s ease;
}

.mobile-nav-item.active .mobile-nav-arrow { transform: rotate(180deg); }

.mobile-submenu {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background: var(--bg-light);
}

.mobile-nav-item.active .mobile-submenu { max-height: 500px; }
.mobile-submenu-list { list-style: none; }

.mobile-submenu-link {
	display: block;
	padding: 12px 20px 12px 40px;
	font-size: 14px;
	color: var(--text-medium);
	text-decoration: none;
	transition: var(--transition);
}

.mobile-submenu-link:hover { color: var(--primary); background: rgba(225, 34, 38, 0.05); }

@media (max-width: 1024px) {
	.nav-desktop { display: none; }
	.menu-toggle { display: flex; }
	.header-container { padding: 0 10px; }
}

/* ===========================
   HERO SECTION (legacy, hidden)
=========================== */
.hero-section {
	padding: 40px 0 80px;
	background: linear-gradient(180deg, #fff 0%, var(--bg-light) 100%);
	position: relative;
	overflow: hidden;
}

.hero-section::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(225, 34, 38, 0.08) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.hero-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.hero-text { position: relative; z-index: 2; }

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	background: linear-gradient(135deg, #ffeb00 0% 100%);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	border-radius: 30px;
	margin-bottom: 24px;
	box-shadow: 0 4px 15px rgba(225, 34, 38, 0.3);
}

.hero-badge i { font-size: 14px; }

.hero-title {
	font-size: 52px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--text-dark);
	margin-bottom: 20px;
	letter-spacing: -1.5px;
}

.hero-highlight {
	background: linear-gradient(135deg, #ffeb00 0% 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-description {
	font-size: 18px;
	line-height: 1.7;
	color: var(--text-medium);
	margin-bottom: 32px;
	max-width: 500px;
}

.hero-actions {
	display: flex;
	gap: 16px;
	margin-bottom: 40px;
}

.btn-hero {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 12px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.btn-hero.btn-primary {
	background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
	color: #fff;
	box-shadow: 0 8px 25px rgba(225, 34, 38, 0.3);
}

.btn-hero.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 35px rgba(225, 34, 38, 0.4);
}

.btn-hero.btn-outline {
	background: transparent;
	color: var(--text-dark);
	border: 2px solid var(--gray-300);
}

.btn-hero.btn-outline:hover {
	border-color: var(--primary);
	color: var(--primary);
	background: rgba(225, 34, 38, 0.05);
}

.btn-hero i { transition: transform 0.3s ease; }
.btn-hero:hover i { transform: translateX(4px); }

.hero-stats {
	display: flex;
	align-items: center;
	gap: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--gray-200);
}

.stat-item { text-align: left; }

.stat-number {
	font-size: 28px;
	font-weight: 800;
	color: var(--primary);
	line-height: 1;
	margin-bottom: 4px;
}

.stat-label {
	font-size: 13px;
	color: var(--text-medium);
	font-weight: 500;
}

.stat-divider {
	width: 1px;
	height: 40px;
	background: var(--gray-300);
}

.hero-image { position: relative; }

.hero-image-wrapper {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.hero-image-wrapper img { width: 100%; height: auto; display: block; }

.hero-image-card {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-radius: 16px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	font-weight: 600;
	color: var(--text-dark);
	font-size: 15px;
}

.hero-image-card i { font-size: 20px; color: var(--primary); }

.hero-card-1 { top: 10%; left: -30px; animation: float 3s ease-in-out infinite; }
.hero-card-2 { top: 50%; right: -30px; animation: float 3s ease-in-out infinite 0.5s; }
.hero-card-3 { bottom: 10%; left: 20%; animation: float 3s ease-in-out infinite 1s; }

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-10px); }
}

@media (max-width: 992px) {
	.hero-content { grid-template-columns: 1fr; gap: 40px; }
	.hero-title { font-size: 42px; }
	.hero-description { max-width: 100%; }
	.hero-actions { flex-direction: column; }
	.btn-hero { width: 100%; justify-content: center; }
	.hero-stats { flex-wrap: wrap; gap: 24px; }
	.stat-divider { display: none; }
	.hero-image-card { display: none; }
}

@media (max-width: 576px) {
	.hero-section { padding: 100px 0 60px; }
	.hero-title { font-size: 36px; }
	.hero-description { font-size: 16px; }
	.stat-number { font-size: 24px; }
}

/* ===========================
   CREATIVE CAROUSEL HERO
=========================== */
.creative-carousel {
	background: #fff;
	position: relative;
	overflow: hidden;
	padding: 160px 0 0;
	text-align: center;
}

.cc-mesh {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 80% at 55% 40%, rgba(238,90,42,0.07) 0%, transparent 65%),
		radial-gradient(ellipse 50% 50% at 20% 90%, rgba(240,125,58,0.04) 0%, transparent 60%);
	animation: ccMeshFloat 12s ease-in-out infinite alternate;
	pointer-events: none;
	z-index: 0;
}

@keyframes ccMeshFloat {
	from { transform: scale(1)   translate(0,  0);   opacity: 1;   }
	to   { transform: scale(1.1) translate(3%, -3%); opacity: 0.7; }
}

.cc-inner {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 40px 100px;
	position: relative;
	z-index: 2;
}

.cc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
	background: rgba(238,90,42,0.06);
	border: 1px solid rgba(238,90,42,0.18);
	border-radius: 50px;
	margin-bottom: 40px;
}

.cc-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--primary);
	flex-shrink: 0;
	animation: ccPulse 2s ease infinite;
}

@keyframes ccPulse {
	0%, 100% { box-shadow: 0 0 0 0   rgba(238,90,42,0.55); }
	60%       { box-shadow: 0 0 0 7px rgba(238,90,42,0);    }
}

.cc-eyebrow > span:last-child {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--primary);
}

.cc-title { margin: 0 0 0; }

.cc-line {
	display: block;
	overflow: hidden;
	line-height: 1.08;
}

.cc-word {
	display: inline-block;
	font-size: clamp(50px, 7.5vw, 90px);
	font-weight: 900;
	color: #111;
	letter-spacing: -3px;
	will-change: transform;
}

.cc-morph-line {
	display: block;
	overflow: hidden;
	position: relative;
	height: calc(clamp(50px, 7.5vw, 90px) * 1.1);
	margin-bottom: 12px;
}

.cc-morph-word {
	position: absolute;
	top: 0; left: 0; right: 0;
	font-size: clamp(50px, 7.5vw, 90px);
	font-weight: 900;
	letter-spacing: -3px;
	line-height: 1.08;
	background: linear-gradient(100deg, #ee5a2a 0%, #f09050 45%, #ee7a30 70%, #ee5a2a 100%);
	background-size: 220% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: ccShimmer 3.5s linear infinite;
	opacity: 0;            /* prevent the stacked-words "scramble" before GSAP runs / if it fails */
}
.cc-morph-word:first-child { opacity: 1; }  /* show one word as the no-JS fallback; GSAP then takes over */

@keyframes ccShimmer {
	0%   { background-position: 0%   center; }
	100% { background-position: 220% center; }
}

.cc-rule {
	display: block;
	width: 56px;
	height: 3px;
	background: linear-gradient(90deg, var(--primary), var(--accent));
	border-radius: 2px;
	margin: 28px auto 32px;
}

.cc-desc {
	font-size: 19px;
	color: #666;
	line-height: 1.75;
	max-width: 540px;
	margin: 0 auto 44px;
}

.cc-actions {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-bottom: 64px;
	flex-wrap: wrap;
}

.cc-cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 38px;
	background: var(--primary);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.25s, gap 0.3s;
	will-change: transform;
}

.cc-cta-primary:hover { background: var(--primary-dark); color: #fff; gap: 16px; }

.cc-cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 18px 32px;
	border: 1.5px solid #d8d8d8;
	color: #333;
	font-size: 15px;
	font-weight: 600;
	border-radius: 50px;
	text-decoration: none;
	transition: border-color 0.25s, color 0.25s, background 0.25s;
}

.cc-cta-secondary:hover {
	border-color: var(--primary);
	color: var(--primary);
	background: rgba(238,90,42,0.04);
}

.cc-stats {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 44px;
	padding: 36px 0;
	border-top: 1px solid #ebebeb;
}

.cc-stat { text-align: center; }

.cc-stat-num {
	font-size: 28px;
	font-weight: 800;
	color: #111;
}

.cc-stat-label {
	display: block;
	font-size: 11px;
	color: #aaa;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-top: 4px;
}

.cc-stat-divider {
	width: 1px;
	height: 42px;
	background: #e4e4e4;
}

.cc-ticker {
	background: #2d2d2d;
	border-top: none;
	padding: 18px 0;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

.cc-ticker-track {
	display: flex;
	will-change: transform;
}

.cc-ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 0 32px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	color: rgba(255,255,255,0.7);
	white-space: nowrap;
	flex-shrink: 0;
}

.cc-ticker-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(255,255,255,0.4);
	opacity: 1;
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.creative-carousel { padding: 90px 0 0; }
	.cc-inner { padding: 0 24px 80px; }
	.cc-word { letter-spacing: -1.5px; }
	.cc-morph-word { letter-spacing: -1.5px; }
	.cc-desc { font-size: 17px; }
	.cc-actions { flex-direction: column; align-items: center; }
	.cc-cta-primary, .cc-cta-secondary { width: 100%; max-width: 300px; justify-content: center; }
}

@media (max-width: 480px) {
	.creative-carousel { padding: 80px 0 0; }
	.cc-inner { padding: 0 20px 60px; }
	.cc-stats { gap: 20px; flex-wrap: wrap; }
	.cc-stat-divider { display: none; }
}

/* ===========================
   FEATURED PRODUCTS
=========================== */
.featured-products {
	padding: 80px 0;
	background: var(--bg-light);
}

.section-title {
	font-size: 36px;
	font-weight: 700;
	color: var(--text-dark);
	text-align: center;
	margin-bottom: 16px;
}

.section-subtitle {
	font-size: 18px;
	color: var(--text-medium);
	text-align: center;
	margin-bottom: 48px;
}

.product-card {
	background: var(--white);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	border: 1px solid var(--gray-200);
	height: 100%;
	display: flex;
	flex-direction: column;
	opacity: 1;
}

.featured-products:hover .product-card:not(:hover) { opacity: 0.5; }

.product-card:hover { box-shadow: var(--shadow-lg); }

.product-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--gray-100);
}

.product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.product-content {
	padding: 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.product-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 8px;
}

.product-description {
	font-size: 15px;
	color: var(--text-medium);
	line-height: 1.6;
	margin-bottom: 20px;
	flex: 1;
}

.product-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	background: var(--primary);
	color: var(--white);
	font-size: 14px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	transition: var(--transition);
	width: 100%;
}

.product-btn:hover { background: var(--primary-dark); transform: translateY(-2px); }
.product-btn i { font-size: 12px; transition: transform 0.3s ease; }
.product-btn:hover i { transform: translateX(4px); }

/* ===========================
   BEST SELLERS
=========================== */
.best-sellers {
	padding: 80px 0;
	background: var(--bg-light);
}

.best-seller-card {
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--gray-200);
	transition: var(--transition);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.best-seller-card:hover { box-shadow: var(--shadow-lg); }

.best-seller-card img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.best-seller-card .card-body {
	padding: 18px 20px 22px;
	flex: 1;
}

.best-seller-card .card-body h5 {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 6px;
}

.best-seller-card .card-body p {
	font-size: 13px;
	color: var(--text-medium);
	line-height: 1.5;
	margin: 0;
}

/* ===========================
   TRANSFORM SECTION
=========================== */
.transform-section {
	padding: 80px 0;
	background: #fff;
	text-align: center;
}

.transform-section h2 {
	font-size: 32px;
	font-weight: 700;
	color: var(--text-dark);
	line-height: 1.35;
	margin-bottom: 20px;
}

.transform-section .lead {
	font-size: 17px;
	color: var(--text-medium);
	max-width: 820px;
	margin: 0 auto;
	line-height: 1.8;
}

/* ===========================
   HOW IT WORKS
=========================== */
.how-it-works {
	padding: 80px 0;
	background: var(--bg-light);
	text-align: center;
}

.how-it-works h2 {
	font-size: 32px;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 4px;
}

.how-it-works h2.accent {
	color: var(--accent);
	margin-bottom: 48px;
}

.how-card {
	background: #fff;
  display: flex;            
  flex-direction: column;    
  align-items: center;      
  text-align: center;
	border-radius: var(--radius);
	padding: 36px 28px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--gray-200);
	height: 100%;
	transition: var(--transition);
}

.how-card:hover { box-shadow: var(--shadow-lg); }

.how-card img {
	height: 60px;
	width: auto;
	margin-bottom: 20px;
	object-fit: contain;
}

.how-card h5 {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 12px;
}

.how-card p {
	font-size: 15px;
	color: var(--text-medium);
	line-height: 1.65;
	margin: 0;
}

.pbs-badge-gradient {
	display: inline-block;
	padding: 14px 36px;
	background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.5px;
	border-radius: 50px;
	text-decoration: none;
	transition: var(--transition);
	box-shadow: 0 4px 15px rgba(225,34,38,0.3);
}

.pbs-badge-gradient:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(225,34,38,0.4);
	color: #fff;
}

.trustpilot-row {
	display: flex;
	align-items: center;
  justify-content: center;
	gap: 12px;
	font-size: 14px;
	color: var(--text-medium);
	flex-wrap: wrap;
}

.trustpilot-row a { display: flex; align-items: center; }
.trustpilot-row img { height: 24px; width: auto; }

/* ===========================
   VIDEO SECTION
=========================== */
.video-section {
	padding: 80px 0;
	background: #fff;
	text-align: center;
}

.video-section h2 {
	font-size: 32px;
	font-weight: 400;
	color: var(--text-dark);
	margin-bottom: 40px;
	line-height: 1.45;
}

.video-text {
	max-width: 760px;
	margin: 40px auto 0;
	text-align: left;
}

.video-text p {
	font-size: 16px;
	color: var(--text-medium);
	line-height: 1.8;
	margin-bottom: 14px;
}

/* ===========================
   CUSTOMER FAVES
=========================== */
.customer-faves {
	padding: 80px 0;
	background: var(--bg-light);
	text-align: center;
}

.fave-card {
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--gray-200);
	transition: var(--transition);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.fave-card:hover { box-shadow: var(--shadow-lg); }

.fave-card > img {
	width: 100%;
	aspect-ratio: 16/10;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.fave-body {
	padding: 22px 24px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.fave-body h4 {
	font-size: 19px;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 10px;
}

.fave-body p {
	font-size: 14px;
	color: var(--text-medium);
	line-height: 1.65;
	flex: 1;
	margin-bottom: 18px;
}

.order-btn {
	display: inline-block;
	padding: 10px 22px;
	background: var(--primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	border-radius: 8px;
	text-decoration: none;
	transition: var(--transition);
	align-self: flex-start;
}

.order-btn:hover {
	background: var(--primary-dark);
	color: #fff;
	transform: translateY(-2px);
}

.fave-closing {
	font-size: 16px;
	color: var(--text-medium);
	line-height: 1.8;
}

/* CTA gradient animation */
@keyframes ctaGradientShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.fave-cta-card {
	background: linear-gradient(135deg, #ee5a2a, #f07d3a, #f5a55a, #f07035, #ee5a2a);
	background-size: 300% 300%;
	animation: ctaGradientShift 5s ease infinite;
	border-radius: var(--radius);
	padding: 36px 30px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.fave-cta-card::before {
	content: '';
	position: absolute;
	top: -80px; left: -80px;
	width: 220px; height: 220px;
	background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 65%);
	pointer-events: none;
}

.fave-cta-card::after {
	content: '';
	position: absolute;
	bottom: -50px; right: -50px;
	width: 180px; height: 180px;
	background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.fave-cta-icon {
	width: 54px;
	height: 54px;
	background: rgba(255,255,255,0.2);
	backdrop-filter: blur(8px);
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	font-size: 24px;
	color: #fff;
	flex-shrink: 0;
	border: 1px solid rgba(255,255,255,0.3);
}

.fave-cta-card h3 {
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	line-height: 1.3;
	margin-bottom: 12px;
	position: relative;
}

.fave-cta-card p {
	font-size: 14px;
	color: rgba(255,255,255,0.88);
	line-height: 1.75;
	margin-bottom: 28px;
	flex: 1;
	position: relative;
}

.fave-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	background: #fff;
	color: var(--primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.3px;
	border-radius: 9px;
	text-decoration: none;
	align-self: center;
	position: relative;
	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
	transition: box-shadow 0.3s ease, gap 0.3s ease;
}

.fave-cta-btn:hover {
	color: var(--primary-dark);
	box-shadow: 0 8px 28px rgba(0,0,0,0.2);
	gap: 14px;
}

/* ===========================
   DESIGN SECTION
=========================== */
.design-section {
	padding: 80px 0;
	background: #fff;
	text-align: center;
}

.designers-img {
	max-width: 100%;
	width: 680px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.design-feature { text-align: left; }

.design-feature h5 {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 12px;
}

.design-feature p {
	font-size: 15px;
	color: var(--text-medium);
	line-height: 1.7;
	margin: 0;
}

/* ===========================
   GUARANTEE SECTION
=========================== */
.guarantee-section {
	padding: 80px 0;
	background: var(--bg-light);
}

.guarantee-lead {
	font-size: 22px;
	font-weight: 600;
	color: var(--text-dark);
	line-height: 1.5;
	margin-bottom: 18px;
}

.guarantee-section > .container > .row > div > p {
	font-size: 16px;
	color: var(--text-medium);
	line-height: 1.7;
	margin-bottom: 26px;
}

.guarantee-btn {
	display: inline-block;
	padding: 12px 32px;
	background: var(--primary);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	border-radius: 8px;
	text-decoration: none;
	transition: var(--transition);
}

.guarantee-btn:hover {
	background: var(--primary-dark);
	color: #fff;
	transform: translateY(-2px);
}

.trust-badge {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 24px;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--gray-200);
	margin-bottom: 16px;
	transition: var(--transition);
}

.trust-badge:hover { box-shadow: var(--shadow-md); }

.trust-badge img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	flex-shrink: 0;
}

.trust-badge-text h6 {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.trust-badge-text p {
	font-size: 13px;
	color: var(--text-medium);
	margin: 0;
}

/* ===========================
   FAQ SECTION
=========================== */
.faq-section {
	padding: 80px 0;
	background: #fff;
	text-align: center;
}

.faq-section h2 {
	font-size: 44px;
	font-weight: 800;
	color: var(--text-dark);
	margin-bottom: 4px;
}

.faq-section h3 {
	font-size: 22px;
	font-weight: 400;
	color: var(--text-medium);
	margin-bottom: 40px;
}

/* Accordion */
.accordion-item {
	border: 1px solid var(--gray-200) ;
	border-radius: var(--radius) ;
	margin-bottom: 10px;
	overflow: hidden;
}

.accordion-header { margin: 0; }

.accordion-button {
	width: 100%;
	text-align: left;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--text-dark);
	background: #fff;
	padding: 18px 24px;
	border: none;
	border-radius: var(--radius) ;
	font-family: inherit;
	transition: color 0.2s;
}

.accordion-button:not(.collapsed) { color: var(--primary); }

.accordion-button::after {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-size: contain;
	transition: transform 0.2s ease;
	margin-left: 12px;
}

.accordion-button:not(.collapsed)::after {
	transform: rotate(180deg);
	filter: invert(19%) sepia(89%) saturate(4000%) hue-rotate(347deg) brightness(80%);
}

.accordion-collapse {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.accordion-collapse.show { max-height: 600px; }

.accordion-body {
	font-size: 15px;
	color: var(--text-medium);
	line-height: 1.75;
	padding: 0 24px 22px;
	text-align: left;
}

/* ===========================
   SUBSCRIBE SECTION
=========================== */
/* ===========================
   NEWSLETTER SECTION
=========================== */
.newsletter-section {
  background: linear-gradient(135deg, #2a2a52 0%, #43437c 50%, #35356a 100%);
  padding: 84px 0;
  position: relative;
  overflow: hidden;
}
.newsletter-section::before {
  content: '';
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  top: -260px; right: -80px;
  pointer-events: none;
}
.newsletter-section::after {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  bottom: -180px; left: -60px;
  pointer-events: none;
}
.newsletter-layout {
  display: flex;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.newsletter-left { flex: 1; min-width: 0; }
.newsletter-right { width: 400px; flex-shrink: 0; }

.newsletter-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
  font-family: "Inter", sans-serif;
}
.newsletter-heading {
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 28px;
  font-family: "Inter", sans-serif;
}
.newsletter-heading .nl-sub {
  display: block;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  font-size: 2rem;
}
.newsletter-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.newsletter-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  font-family: "Inter", sans-serif;
}
.newsletter-perks li i {font-size: 15px; flex-shrink: 0; }
.newsletter-social { display: flex; gap: 10px; }
.newsletter-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.newsletter-social a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Card */
.newsletter-card {
  background: #fff;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
}
.newsletter-card-offer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
  font-family: "Inter", sans-serif;
}
.newsletter-card-heading {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
}
.newsletter-card-sub {
  font-size: 13px;
  color: var(--text-medium);
  margin-bottom: 22px;
  font-family: "Inter", sans-serif;
  line-height: 1.55;
}
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.newsletter-input {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.newsletter-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(238,90,42,0.1);
}
.newsletter-btn {
  width: 100%;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: background 0.2s, transform 0.15s;
}
.newsletter-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.newsletter-disclaimer {
  font-size: 11px;
  color: var(--text-medium);
  text-align: center;
  margin: 6px 0 16px;
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.newsletter-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
  font-size: 12px;
  color: var(--text-medium);
  font-family: "Inter", sans-serif;
  flex-wrap: wrap;
}
.newsletter-proof-stars { color: #f5a623; font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.newsletter-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  margin-bottom: 28px;
  font-family: "Inter", sans-serif;
  max-width: 480px;
}
.newsletter-social-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  font-family: "Inter", sans-serif;
  margin-top: 6px;
}
.newsletter-social-proof strong { color: rgba(255,255,255,0.9); }
.newsletter-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; flex-shrink: 0; }
.newsletter-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.newsletter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-medium);
  font-family: "Inter", sans-serif;
  letter-spacing: 0.3px;
}
.newsletter-card-fine {
  font-size: 11px;
  color: var(--text-light);
  text-align: center;
  margin-top: 10px;
  font-family: "Inter", sans-serif;
}

@media (max-width: 960px) {
  .newsletter-layout { flex-direction: column-reverse; gap: 40px; }
  .newsletter-right { width: 100%; max-width: 480px; }
  .newsletter-left { text-align: center; }
  .newsletter-perks { align-items: center; }
  .newsletter-social { justify-content: center; }
  .newsletter-desc { max-width: 100%; }
  .newsletter-social-proof { justify-content: center; }
}
@media (max-width: 600px) {
  .newsletter-section { padding: 52px 0; }
  .newsletter-heading { font-size: 1.9rem; }
  .newsletter-heading .nl-sub { font-size: 1.5rem; }
  .newsletter-card { padding: 24px 20px; border-radius: 16px; }
}

/* ===========================
   SITE FOOTER
=========================== */
.site-footer {
	background: var(--gray-50);
	border-top: 1px solid var(--gray-200);
	padding: 60px 0 0;
}

.footer-support-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--gray-200);
	margin-bottom: 48px;
}

.footer-support-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.footer-support-item img {
	width: 46px;
	height: 46px;
	object-fit: contain;
	flex-shrink: 0;
}

.footer-support-item h6 {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 4px;
}

.footer-support-item p {
	font-size: 13px;
	color: var(--text-medium);
	margin: 0 0 2px;
	line-height: 1.5;
}

.footer-support-item a {
	color: var(--text-medium);
	text-decoration: none;
	transition: color 0.2s;
}

.footer-support-item a:hover { color: var(--primary); }

.footer-links-grid {
	display: grid;
	grid-template-columns: 2fr 1.2fr 1.5fr 1.2fr 1.2fr;
	gap: 28px;
	margin-bottom: 48px;
}
/* GR footer: distinct column widths (desktop only — mobile breakpoints below still apply) */
@media (min-width: 993px) {
	.footer-gr .footer-links-grid { grid-template-columns: 2fr 1.2fr 1.2fr 1.5fr 1.3fr; }
}

.footer-logo {
	height: 40px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	object-position: left center;
	display: block;
	margin-bottom: 12px;
}
.footer-col > h6 {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--text-dark);
	margin-bottom: 14px;
}

.footer-col ul { list-style: none; padding: 0; margin: 0; }

.footer-col ul li {
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--text-medium);
}

.footer-col ul li a {
	color: var(--text-medium);
	text-decoration: none;
	transition: color 0.2s;
}

.footer-col ul li a:hover { color: var(--primary); }

.footer-social {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.footer-social a {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gray-200);
	color: var(--text-medium);
	border-radius: 7px;
	font-size: 14px;
	text-decoration: none;
	transition: var(--transition);
}

.footer-social a:hover { background: var(--primary); color: #fff; }

.footer-lang {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.footer-lang a {
	font-size: 11px;
	color: var(--text-medium);
	text-decoration: none;
	padding: 3px 7px;
	border: 1px solid var(--gray-300);
	border-radius: 4px;
	transition: var(--transition);
}

.footer-lang a:hover { border-color: var(--primary); color: var(--primary); }

.footer-badge-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.footer-badge-item img {
	width: 42px;
	height: 42px;
	object-fit: contain;
	flex-shrink: 0;
}

.footer-badge-item h6 {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 2px;
	text-transform: none;
	letter-spacing: 0;
}

.footer-badge-item p {
	font-size: 12px;
	color: var(--text-medium);
	margin: 0;
}

.footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0;
	border-top: 1px solid var(--gray-200);
	flex-wrap: wrap;
	gap: 12px;
}

.footer-bottom p {
	font-size: 12px;
	color: var(--text-light);
	margin: 0;
}

.footer-payments { display: flex; align-items: center; gap: 12px; }

.footer-payments img {
	height: 26px;
	width: auto;
	opacity: 0.65;
	transition: opacity 0.2s;
}

.footer-payments img:hover { opacity: 1; }

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 992px) {
	.footer-links-grid { grid-template-columns: repeat(3, 1fr); }
	.footer-support-row { grid-template-columns: 1fr; gap: 20px; }
	.transform-section h2,
	.how-it-works h2,
	.video-section h2 { font-size: 26px; }
	.faq-section h2 { font-size: 34px; }
	.guarantee-lead { font-size: 19px; }
}

@media (max-width: 768px) {
	.footer-links-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-bottom { flex-direction: column; text-align: center; }
	.best-sellers,
	.transform-section,
	.how-it-works,
	.video-section,
	.customer-faves,
	.design-section,
	.guarantee-section,
	.faq-section { padding: 60px 0; }
}

@media (max-width: 576px) {
	.footer-links-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
	.footer-links-grid .footer-col:first-child { grid-column: 1 / -1; }
	.trustpilot-row { justify-content: center; }
	.faq-section h2 { font-size: 28px; }
	.footer-payments { max-width: 100%; flex-wrap: wrap; justify-content: center; gap: 8px; }
	.footer-payments img { max-width: 100%; height: auto; max-height: 20px; }
}


/* =============================================================
   VOUCHER PAGE — pbs-* components and voucher-specific styles
   ============================================================= */

/* ---- Announcement Bar ---- */
  .pbs-announcement-bar {
    background: var(--primary);
    color: #fff;
    text-align: center;
    padding: 10px 50px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    position: relative;
    z-index: 1001;
    letter-spacing: 0.1px;
  }
  .pbs-announcement-bar a { color: #fff; text-decoration: underline; opacity: 0.9; }
  .pbs-announcement-bar a:hover { opacity: 1; }
  .pbs-ann-close {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: rgba(255,255,255,0.7);
    font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px;
  }
  .pbs-ann-close:hover { color: #fff; }

  /* ---- Header ---- */
  .pbs-header {
    position: sticky;
    top: 0; left: 0; width: 100%;
    z-index: 1000;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-200);
    transition: box-shadow var(--transition);
  }
  .pbs-header.scrolled { box-shadow: var(--shadow-sm); }
  .pbs-header-container {
    max-width: 1400px; margin: 0 auto;
    height: 80px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 40px;
  }
  .pbs-logo {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
  }
  .pbs-logo img { height: 42px; width: auto; }

  /* ---- Desktop Nav ---- */
  .pbs-nav-desktop { display: flex; align-items: center; gap: 2px; height: 100%; }
  .pbs-nav-item { height: 100%; display: flex; align-items: center; position: relative; }
  .pbs-nav-link {
    font-size: 15px; font-weight: 600; color: var(--text-dark);
    text-decoration: none; padding: 0 16px; height: 100%;
    display: flex; align-items: center; gap: 5px; transition: color var(--transition);
    position: relative;
  }
  .pbs-nav-link::after {
    content: ''; position: absolute; bottom: 18px; left: 16px; right: 16px;
    height: 2px; background: var(--primary);
    transform: scaleX(0); transition: transform 0.3s; transform-origin: right;
  }
  .pbs-nav-item:hover .pbs-nav-link { color: var(--primary); }
  .pbs-nav-item:hover .pbs-nav-link::after { transform: scaleX(1); transform-origin: left; }
  .pbs-nav-arrow { font-size: 10px; opacity: 0.5; transition: transform 0.3s; }
  .pbs-nav-item:hover .pbs-nav-arrow { transform: rotate(180deg); opacity: 1; }
  .pbs-nav-link-offers { color: var(--primary) ; }
  .pbs-nav-link-offers::after { display: none; }

  /* ---- Mega Menu ---- */
  .pbs-mega-menu {
    position: fixed; top: 80px; left: 0; right: 0; width: 100vw;
    background: var(--white); box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    border-top: 3px solid var(--primary); padding: 36px 0; z-index: 990;
  }
  .pbs-nav-item:hover .pbs-mega-menu {
    opacity: 1; visibility: visible; pointer-events: all; transform: translateY(0);
  }
  .pbs-mega-container {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr 240px;
    gap: 28px 44px; padding: 0 40px; align-items: start;
  }
  .pbs-mega-container.mm-4col {
    max-width: 1350px; grid-template-columns: 1fr 1fr 1fr 240px;
  }
  .pbs-mega-col h3 {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.2px; color: var(--text-light); margin-bottom: 12px; margin-top: 0;
  }
  .pbs-mega-col h3 + h3, .pbs-mega-col h3 ~ h3 { margin-top: 18px; }
  .pbs-mega-list { list-style: none; padding: 0; margin: 0; }
  .pbs-mega-list li { margin-bottom: 2px; }
  .pbs-mega-link {
    font-size: 14px; font-weight: 500; color: var(--text-dark); text-decoration: none;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 8px; transition: background 0.15s, color 0.15s;
  }
  .pbs-mega-link:hover { color: var(--primary); background: rgba(238,90,42,0.06); }
  .pbs-mega-link i { font-size: 12px; color: var(--text-light); width: 14px; text-align: center; }
  .pbs-mega-link:hover i { color: var(--primary); }
  .pbs-badge-new {
    color: var(--primary); font-size: 11px; font-weight: 700;
    display: inline-block; vertical-align: middle; margin-right: 2px;
  }
  .pbs-mega-preview {
    border-radius: 12px; overflow: hidden; background: var(--gray-100);
    aspect-ratio: 3/4; min-height: 180px; position: relative;
  }
  .pbs-mega-preview img {
    width: 100%; height: 100%; object-fit: cover;
    position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s;
  }
  .pbs-mega-preview img.active { opacity: 1; }
  .pbs-mega-preview-text {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6)); color: #fff; z-index: 2;
  }
  .pbs-mega-preview-text h5 { font-size: 14px; font-weight: 700; margin: 0 0 2px; color: #fff; }
  .pbs-mega-preview-text p { font-size: 12px; margin: 0; color: rgba(255,255,255,0.85); }

  /* ---- Header Actions ---- */
  .pbs-header-actions { display: flex; align-items: center; gap: 6px; }
  .pbs-icon-btn {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--text-dark); font-size: 17px;
    cursor: pointer; border-radius: 50%; transition: var(--transition);
    text-decoration: none; border: none;
  }
  .pbs-icon-btn:hover { background: var(--bg-light); color: var(--primary); }
  .pbs-cart-btn { position: relative; }
  .pbs-cart-badge {
    position: absolute; top: -3px; right: -3px;
    background: var(--primary); color: #fff; font-size: 10px; font-weight: 700;
    min-width: 17px; height: 17px; display: flex; align-items: center;
    justify-content: center; border-radius: 50%; padding: 0 3px;
  }
  .pbs-menu-toggle {
    display: none; width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: transparent; border: none; color: var(--text-dark);
    font-size: 20px; cursor: pointer; border-radius: 8px; transition: var(--transition);
  }
  .pbs-menu-toggle:hover { background: var(--bg-light); }

  /* ---- Overlay + Mobile Drawer ---- */
  .pbs-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden; transition: var(--transition); z-index: 998;
  }
  .pbs-overlay.active { opacity: 1; visibility: visible; }
  .pbs-mobile-drawer {
    position: fixed; top: 0; right: -320px; width: 320px; height: 100%;
    background: #fff; z-index: 1001; transition: right 0.3s ease;
    box-shadow: -5px 0 30px rgba(0,0,0,0.15); display: flex; flex-direction: column;
  }
  .pbs-mobile-drawer.active { right: 0; }
  .pbs-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--gray-200);
  }
  .pbs-drawer-title { font-size: 17px; font-weight: 700; color: var(--text-dark); }
  .pbs-drawer-close {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 8px; background: var(--bg-light);
    border: none; font-size: 15px; color: var(--text-dark);
  }
  .pbs-drawer-content { flex: 1; overflow-y: auto; padding: 12px 0; }
  .pbs-mobile-nav-list { list-style: none; padding: 0; margin: 0; }
  .pbs-mobile-nav-item { border-bottom: 1px solid var(--gray-100); }
  .pbs-mobile-nav-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 20px; font-size: 15px; font-weight: 600;
    color: var(--text-dark); cursor: pointer; text-decoration: none;
    background: none; border: none; width: 100%; text-align: left;
  }
  .pbs-mobile-nav-link:hover { color: var(--primary); background: var(--bg-light); }
  .pbs-mobile-nav-arrow { font-size: 10px; opacity: 0.5; transition: transform 0.3s; }
  .pbs-mobile-nav-item.active .pbs-mobile-nav-arrow { transform: rotate(180deg); }
  .pbs-mobile-submenu { display: none; background: var(--bg-light); }
  .pbs-mobile-nav-item.active .pbs-mobile-submenu { display: block; }
  .pbs-mobile-submenu-list { list-style: none; padding: 6px 0; margin: 0; }
  .pbs-mobile-submenu-link {
    display: block; padding: 9px 30px; font-size: 14px;
    color: var(--text-medium); text-decoration: none;
  }
  .pbs-mobile-submenu-link:hover { color: var(--primary); }

  /* ================================================================
     VOUCHER PAGE CONTENT OVERRIDES
  ================================================================ */
  body .standard-body { background-color: #f4f5f7 ; }

  


  /* ================================================================
     SIDEBAR — Modern Cart Widget
  ================================================================ */
  .sidebar-wrapper.voucher-sticky,
  aside.sidebar-wrapper {
    background: #fff ;
    border: 1px solid var(--gray-200) ;
    border-radius: 16px ;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07) ;
    padding: 20px ;
    font-family: 'Inter', sans-serif ;
    overflow: hidden;
  }
  .sidebar-wrapper.voucher-sticky h3,
  aside.sidebar-wrapper h3 {
    font-family: 'Inter', sans-serif ;
    font-size: 15px ;
    font-weight: 700 ;
    color: var(--text-dark);
    letter-spacing: -0.2px ;
    margin: 0 0 16px ;
    padding-bottom: 12px ;
    border-bottom: 1px solid var(--gray-100) ;
    text-transform: none ;
  }
  .sidebar-wrapper .your_cart { font-family: 'Inter', sans-serif ; }
  .sidebar-wrapper .item_line {
    display: flex ; justify-content: space-between ;
    align-items: center ; padding: 10px 0 ;
    border-bottom: 1px solid var(--gray-100) ; margin-bottom: 0 ;
  }
  .sidebar-wrapper #item_count {
    font-size: 13px ; font-weight: 500 ;
    color: var(--text-medium) ; width: auto ; float: none ;
  }
  .sidebar-wrapper #sel_voucher {
    font-weight: 700 ; color: var(--primary) ;
  }
  .sidebar-wrapper #item_value,
  .sidebar-wrapper #ttl_value {
    font-size: 18px ; font-weight: 800 ;
    color: var(--primary) ; width: auto ; float: none ;
  }
  .sidebar-wrapper .savings {
    text-align: center ; padding: 8px 0 ;
    font-size: 11px ; font-weight: 600 ;
    text-transform: uppercase ; letter-spacing: 1px ;
    color: var(--text-light) ;
  }
  .sidebar-wrapper .points {
    font-size: 13px ; color: var(--text-medium) ;
    padding: 6px 0 ; display: flex ;
    justify-content: space-between ; width: 100% ;
    float: none ;
  }
  .sidebar-wrapper #ttl_points { color: var(--primary) ; font-weight: 700 ; }
  .sidebar-wrapper .ttl_afterpay,
  .sidebar-wrapper .ttl_laybuy { display: none ; }
  .sidebar-wrapper .btn-primary,
  .sidebar-wrapper .btn-add-cart,
  .sidebar-wrapper button[type="submit"],
  .sidebar-wrapper a.btn {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) ;
    border: none ; border-radius: 10px ;
    font-family: 'Inter', sans-serif ; font-weight: 700 ;
    font-size: 14px ; letter-spacing: 0.3px ;
    color: #fff ; width: 100% ;
    padding: 12px 20px ; margin-top: 12px ;
    box-shadow: 0 4px 14px rgba(238,90,42,0.25) ;
    transition: all 0.2s ; text-align: center ;
  }
  .sidebar-wrapper .btn-primary:hover,
  .sidebar-wrapper button[type="submit"]:hover {
    box-shadow: 0 6px 20px rgba(238,90,42,0.38) ;
    transform: translateY(-1px) ;
  }

  /* ================================================================
     SALE BANNER — Premium Hot Deals (override)
  ================================================================ */
  .box.sale-now-on,
  .box.sale-now-on.box-with-products {
    border-radius: 14px ;
    overflow: hidden ;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) ;
    margin-bottom: 20px ;
    border: none ;
  }
  .box-heading.vbanner.sale {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%) ;
    color: #fff ;
    border-radius: 14px 14px 0 0 ;
    padding: 14px 20px ;
    display: flex ; align-items: center ;
    flex-wrap: wrap ; gap: 8px ;
    font-family: 'Inter', sans-serif ;
    border-bottom: 2px solid var(--primary) ;
  }
  .box-heading.vbanner.sale .sale-now-on {
    font-size: 13px ; font-weight: 700 ;
    letter-spacing: 1.5px ; text-transform: uppercase ;
    color: var(--primary) ;
    display: flex ; align-items: center ; gap: 6px ;
  }
  .box-heading.vbanner.sale .available-for {
    font-size: 11px ; color: rgba(255,255,255,0.55) ;
    font-weight: 500 ; letter-spacing: 0.5px ;
    text-transform: uppercase ;
  }
  .box-heading.vbanner.sale .countdown-row {
    display: flex ; gap: 6px ; align-items: center ;
  }
  .box-heading.vbanner.sale .countdown-section {
    background: rgba(255,255,255,0.1) ;
    border: 1px solid rgba(255,255,255,0.15) ;
    border-radius: 8px ; padding: 4px 8px ;
    text-align: center ; min-width: 44px ;
  }
  .box-heading.vbanner.sale .countdown-amount {
    font-family: 'Inter', sans-serif ; font-size: 18px ;
    font-weight: 800 ; color: #fff ;
    display: block ; line-height: 1.2 ;
  }
  .box-heading.vbanner.sale .countdown-period {
    font-size: 9px ; font-weight: 600 ;
    text-transform: uppercase ; letter-spacing: 0.5px ;
    color: rgba(255,255,255,0.6) ;
  }
  .box-heading.vbanner.sale .soldsofar {
    background: rgba(238,90,42,0.2) ;
    border: 1px solid rgba(238,90,42,0.4) ;
    border-radius: 20px ; padding: 3px 10px ;
    font-family: 'Inter', sans-serif ;
    font-size: 13px ; font-weight: 700 ;
    color: var(--primary) ;
  }

  /* ================================================================
     PBS SEARCH BAR
  ================================================================ */
  .pbs-search-wrap {
    position: relative; margin: 16px 0 20px;
  }
  .pbs-search-input {
    width: 100%; height: 46px;
    padding: 0 44px 0 18px;
    font-size: 14px; font-weight: 500; font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    background: #fff; border: 1.5px solid var(--gray-200);
    border-radius: 12px; outline: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .pbs-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(238,90,42,0.12);
  }
  .pbs-search-input::placeholder { color: var(--text-light); }
  .pbs-search-icon {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    color: var(--text-light); font-size: 15px; pointer-events: none;
  }
  .pbs-search-count {
    display: none; position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
    font-size: 11px; font-weight: 600; color: var(--text-light);
    background: var(--gray-100); border-radius: 10px; padding: 2px 8px;
  }
  .pbs-voucher-hidden { display: none ; }
  .pbs-no-results {
    display: none; text-align: center; padding: 40px 20px;
    color: var(--text-light); font-family: 'Inter', sans-serif; font-size: 15px;
  }
  .pbs-no-results.visible { display: block; }


  /* ================================================================
     PAGE HEADING — Current Offers
  ================================================================ */
  #title-page,
  h1#title-page\ no-padding,
  [id="title-page no-padding"] {
    font-family: 'Inter', sans-serif ;
    font-size: 28px ;
    font-weight: 800 ;
    color: var(--text-dark) ;
    letter-spacing: -0.5px ;
    margin: 0 0 10px ;
    line-height: 1.2 ;
  }

  /* ================================================================
     SALE BANNER — top strip (override everything)
  ================================================================ */
  .box.sale-now-on,
  .box.sale-now-on.box-with-products {
    border-radius: 16px ;
    overflow: hidden ;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) ;
    margin-bottom: 24px ;
    border: none ;
  }
  .box-heading.vbanner.sale {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #0d2137 100%) ;
    color: #fff ;
    border-radius: 16px 16px 0 0 ;
    padding: 18px 24px ;
    display: flex ;
    align-items: center ;
    flex-wrap: wrap ;
    gap: 12px ;
    font-family: 'Inter', sans-serif ;
    border-bottom: 3px solid var(--primary) ;
    position: relative ;
  }
  /* animated shimmer on banner */
  .box-heading.vbanner.sale::after {
    content: '' ;
    position: absolute ; top: 0 ; left: -100% ;
    width: 60% ; height: 100% ;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent) ;
    animation: pbsBannerShimmer 3s infinite ;
    pointer-events: none ;
  }
  @keyframes pbsBannerShimmer {
    0% { left: -60%; }
    100% { left: 160%; }
  }
  .box-heading.vbanner.sale .sale-now-on {
    font-size: 14px ;
    font-weight: 800 ;
    letter-spacing: 2px ;
    text-transform: uppercase ;
    color: var(--primary) ;
    display: flex ;
    align-items: center ;
    gap: 8px ;
    padding: 4px 12px 4px 0 ;
    border-right: 1px solid rgba(255,255,255,0.12) ;
  }
  .box-heading.vbanner.sale .sale-now-on::before {
    content: '🔥' ;
    font-size: 16px ;
  }
  .box-heading.vbanner.sale .available-for {
    font-size: 11px ;
    color: rgba(255,255,255,0.45) ;
    font-weight: 500 ;
    letter-spacing: 1px ;
    text-transform: uppercase ;
  }
  /* Countdown units */
  .box-heading.vbanner.sale .countdown-row {
    display: flex ;
    gap: 6px ;
    align-items: center ;
  }
  .box-heading.vbanner.sale .countdown-section {
    background: rgba(255,255,255,0.08) ;
    border: 1px solid rgba(255,255,255,0.12) ;
    border-radius: 10px ;
    padding: 6px 10px ;
    text-align: center ;
    min-width: 52px ;
    backdrop-filter: blur(4px) ;
  }
  .box-heading.vbanner.sale .countdown-amount,
  .box-heading.vbanner.sale .countdown-amount * {
    font-family: 'Inter', sans-serif ;
    font-size: 22px ;
    font-weight: 800 ;
    color: #fff ;
    display: block ;
    line-height: 1.1 ;
  }
  .box-heading.vbanner.sale .countdown-period {
    font-size: 9px ;
    font-weight: 700 ;
    text-transform: uppercase ;
    letter-spacing: 0.8px ;
    color: rgba(255,255,255,0.5) ;
  }
  /* Sold so far pill */
  .box-heading.vbanner.sale .soldsofar {
    background: rgba(238,90,42,0.18) ;
    border: 1px solid rgba(238,90,42,0.5) ;
    border-radius: 24px ;
    padding: 4px 14px ;
    font-family: 'Inter', sans-serif ;
    font-size: 14px ;
    font-weight: 700 ;
    color: var(--primary) ;
    white-space: nowrap ;
  }
  .box-heading.vbanner.sale .available-for.no-padding-x {
    font-size: 10px ;
    letter-spacing: 0.8px ;
    text-align: right ;
    color: rgba(255,255,255,0.4) ;
  }

  /* ================================================================
     PRODUCT CARDS — Modern voucher cards
  ================================================================ */
  .product-grid .product.voucher {
    background: #fff ;
    border-radius: 14px ;
    overflow: hidden ;
    border: 1px solid var(--gray-200) ;
    box-shadow: var(--shadow-sm) ;
    transition: transform 0.22s ease, box-shadow 0.22s ease ;
    margin: 6px ;
    display: flex ;
    flex-direction: column ;
  }
  .product-grid .product.voucher:hover,
  .product-grid .product.product-hover-x:hover {
    transform: translateY(-4px) ;
    box-shadow: 0 12px 36px rgba(0,0,0,0.13) ;
    border-color: var(--primary) ;
    z-index: 2 ;
  }
  /* Card image */
  .product-grid .product.voucher .image {
    position: relative ;
    overflow: hidden ;
    background: #fff ;
    border-radius: 14px 14px 0 0 ;
    display: flex ;
    justify-content: center ;
    align-items: center ;
  }
  .product-grid .product.voucher .image img.wp-post-image {
    width: 100% ;
    height: auto ;
    display: block ;
    transition: transform 0.3s ease ;
  }
  .product-grid .product.voucher:hover .image img.wp-post-image {
    transform: scale(1.04) ;
  }
  /* Product name */
  .product-grid .product.voucher .name {
    font-family: 'Inter', sans-serif ;
    font-size: 12px ;
    font-weight: 600 ;
    color: var(--text-medium) ;
    padding: 10px 12px 4px ;
    line-height: 1.4 ;
    min-height: 36px ;
  }
  /* Card bottom section */
  .product-grid .product.voucher .right.clearfix {
    padding: 0 12px 12px ;
    display: flex ;
    flex-direction: column ;
    flex: 1 ;
  }
  /* ── Price block ── */
  .product-grid .product.voucher .voucherprice {
    margin-bottom: 10px ;
    padding-bottom: 10px ;
    border-bottom: 1px solid var(--gray-100) ;
  }
  /* RRP line */
  .product-grid .product.voucher .voucherprice .price {
    display: flex ;
    align-items: center ;
    gap: 6px ;
    font-size: 11px ;
    font-weight: 500 ;
    color: var(--text-light) ;
    margin-bottom: 4px ;
    text-decoration: none ;
  }
  .product-grid .product.voucher .voucherprice .price .save {
    background: #fff3f0 ;
    color: var(--save) ;
    border: 1px solid rgba(238,90,42,0.3) ;
    border-radius: 6px ;
    padding: 1px 6px ;
    font-size: 10px ;
    font-weight: 700 ;
    letter-spacing: 0.3px ;
    white-space: nowrap ;
  }
  /* NOW price line */
  .product-grid .product.voucher .voucherprice .today.mblack {
    display: flex ;
    align-items: center ;
    gap: 6px ;
    font-size: 11px ;
    font-weight: 500 ;
    color: var(--text-light) ;
    margin-bottom: 4px ;
  }
  .product-grid .product.voucher .voucherprice .todayprice {
    font-size: 20px ;
    font-weight: 800 ;
    color: var(--primary) ;
    letter-spacing: -0.5px ;
  }
  /* Valid for */
  .product-grid .product.voucher .voucherprice .redeem {
    font-size: 10px ;
    color: var(--text-light) ;
    font-weight: 500 ;
    display: flex ;
    align-items: center ;
    gap: 4px ;
  }
  .product-grid .product.voucher .voucherprice .redeem::before {
    content: '✓' ;
    color: #22c55e ;
    font-weight: 700 ;
    font-size: 11px ;
  }
  /* Qty select */
  .product-grid .product.voucher .voucherinput {
    display: flex ;
    align-items: center ;
    gap: 6px ;
    margin-top: auto ;
  }
  .product-grid .product.voucher .voucherselect {
    padding: 0 ;
    width: auto ;
    flex: 0 0 70px ;
    max-width: 70px ;
  }
  .product-grid .product.voucher select.sv {
    height: 38px ;
    border: 1.5px solid var(--gray-200) ;
    border-radius: 8px ;
    font-family: 'Inter', sans-serif ;
    font-size: 13px ;
    font-weight: 600 ;
    color: var(--text-dark) ;
    background: #fff ;
    padding: 0 8px ;
    width: 100% ;
    cursor: pointer ;
    transition: border-color 0.2s ;
    outline: none ;
  }
  .product-grid .product.voucher select.sv:focus {
    border-color: var(--primary) ;
    box-shadow: 0 0 0 3px rgba(238,90,42,0.1) ;
  }
  /* Add to cart button */
  .product-grid .product.voucher input.add_to_cart,
  .product-grid .product.voucher .add_to_cart {
    flex: 1 ;
    height: 38px ;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) ;
    color: #fff ;
    border: none ;
    border-radius: 8px ;
    font-family: 'Inter', sans-serif ;
    font-size: 12px ;
    font-weight: 700 ;
    letter-spacing: 0.3px ;
    cursor: pointer ;
    transition: all 0.2s ease ;
    box-shadow: 0 2px 8px rgba(238,90,42,0.25) ;
    white-space: nowrap ;
    padding: 0 10px ;
  }
  .product-grid .product.voucher input.add_to_cart:hover {
    box-shadow: 0 4px 16px rgba(238,90,42,0.4) ;
    transform: translateY(-1px) ;
  }

  /* Section headings inside grid (Hot Deals, Photobooks etc) */
  .box-heading.vbanner.collapsible {
    background: linear-gradient(90deg, var(--gray-100) 0%, #fff 100%) ;
    border-left: 3px solid var(--primary) ;
    border-radius: 10px ;
    padding: 10px 16px ;
    font-family: 'Inter', sans-serif ;
    font-size: 14px ;
    font-weight: 700 ;
    color: var(--text-dark) ;
    margin-bottom: 8px ;
  }
  .box-heading.vbanner.collapsible a {
    color: var(--text-dark) ;
    text-decoration: none ;
    font-weight: 700 ;
  }

  /* ================================================================
     SIDEBAR — overhaul
  ================================================================ */
  .sidebar-wrapper.voucher-sticky,
  aside.sidebar-wrapper {
    background: #fff ;
    border: 1px solid var(--gray-200) ;
    border-radius: 16px ;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08) ;
    padding: 0 ;
    font-family: 'Inter', sans-serif ;
    overflow: hidden ;
  }
  .sidebar-wrapper.voucher-sticky h3,
  aside.sidebar-wrapper h3 {
    font-family: 'Inter', sans-serif ;
    font-size: 13px ;
    font-weight: 700 ;
    color: var(--text-dark) ;
    letter-spacing: 0.8px ;
    text-transform: uppercase ;
    margin: 0 ;
    padding: 14px 18px ;
    border-bottom: 1px solid var(--gray-100) ;
    background: var(--gray-100) ;
  }
  .sidebar-wrapper .your_cart {
    font-family: 'Inter', sans-serif ;
    padding: 14px 18px ;
  }
  .sidebar-wrapper .item_line {
    display: flex ;
    justify-content: space-between ;
    align-items: center ;
    padding: 10px 0 ;
    border-bottom: 1px solid var(--gray-100) ;
    margin-bottom: 0 ;
  }
  .sidebar-wrapper #item_count {
    font-size: 13px ;
    font-weight: 500 ;
    color: var(--text-medium) ;
    width: auto ;
    float: none ;
  }
  .sidebar-wrapper #sel_voucher {
    font-weight: 700 ;
    color: var(--primary) ;
  }
  .sidebar-wrapper #item_value,
  .sidebar-wrapper #ttl_value {
    font-size: 20px ;
    font-weight: 800 ;
    color: var(--primary) ;
    width: auto ;
    float: none ;
    /* override inline red color */
    color: var(--primary) ;
  }
  .sidebar-wrapper .savings {
    text-align: center ;
    padding: 8px 0 ;
    font-size: 10px ;
    font-weight: 600 ;
    text-transform: uppercase ;
    letter-spacing: 1.5px ;
    color: var(--text-light) ;
  }
  .sidebar-wrapper .points {
    font-size: 12px ;
    color: var(--text-medium) ;
    padding: 6px 0 ;
    display: flex ;
    justify-content: space-between ;
    width: 100% ;
    float: none ;
    align-items: center ;
  }
  .sidebar-wrapper #ttl_points {
    color: var(--primary) ;
    font-weight: 700 ;
    font-size: 14px ;
  }
  .sidebar-wrapper .ttl_afterpay,
  .sidebar-wrapper .ttl_laybuy { display: none ; }
  /* Checkout button */
  .sidebar-wrapper .btn_forward,
  .sidebar-wrapper input[name="CHECK OUT"] {
    display: block ;
    width: 100% ;
    padding: 13px 20px ;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) ;
    color: #fff ;
    border: none ;
    border-radius: 10px ;
    font-family: 'Inter', sans-serif ;
    font-size: 14px ;
    font-weight: 700 ;
    letter-spacing: 0.5px ;
    text-align: center ;
    cursor: pointer ;
    transition: all 0.2s ease ;
    box-shadow: 0 4px 14px rgba(238,90,42,0.28) ;
    margin-top: 12px ;
    text-transform: uppercase ;
  }
  .sidebar-wrapper .btn_forward:hover,
  .sidebar-wrapper input[name="CHECK OUT"]:hover {
    box-shadow: 0 6px 22px rgba(238,90,42,0.42) ;
    transform: translateY(-2px) ;
  }
  .sidebar-wrapper .side_proceed {
    text-align: center ;
  }
  /* Category nav */
  .sidebar-wrapper .voucher-menu {
    list-style: none ;
    margin: 0 ;
    padding: 0 ;
    border-top: 1px solid var(--gray-100) ;
  }
  .sidebar-wrapper .voucher-menu > li {
    border-bottom: 1px solid var(--gray-100) ;
  }
  .sidebar-wrapper .voucher-menu > li > a {
    display: flex ;
    align-items: center ;
    justify-content: space-between ;
    padding: 8px 18px ;
    font-family: 'Inter', sans-serif ;
    font-size: 13px ;
    font-weight: 500 ;
    color: var(--text-dark) ;
    text-decoration: none ;
    transition: background 0.15s, color 0.15s ;
  }
  .sidebar-wrapper .voucher-menu > li > a:hover,
  .sidebar-wrapper .voucher-menu > li:hover > a {
    background: #fff3f0 ;
    color: var(--primary) ;
    padding-left: 22px ;
  }
  .sidebar-wrapper .voucher-menu .sub-menu {
    background: var(--gray-100) ;
    border-top: 1px solid var(--gray-200) ;
    padding: 4px 0 ;
  }
  .sidebar-wrapper .voucher-menu .sub-menu a {
    display: block ;
    padding: 7px 28px ;
    font-size: 12px ;
    color: var(--text-medium) ;
    text-decoration: none ;
    transition: color 0.15s, background 0.15s ;
  }
  .sidebar-wrapper .voucher-menu .sub-menu a:hover {
    color: var(--primary) ;
    background: rgba(238,90,42,0.06) ;
  }
  /* View/filter controls row */
  .sidebar-wrapper .product-filter,
  .sidebar-wrapper .options { display: none ; }


  /* ================================================================
     HEADER NAV — prevent external CSS from moving items on hover
  ================================================================ */
  .pbs-nav-item,
  .pbs-nav-item:hover {
    transform: none ;
    margin-top: 0 ;
    top: auto ;
  }
  .pbs-nav-link,
  .pbs-nav-link:hover {
    transform: none ;
    margin-top: 0 ;
  }

  /* ================================================================
     FILTER BAR — unhide + inline search
  ================================================================ */
  .sidebar-wrapper .product-filter,
  .sidebar-wrapper .options { display: block ; }

  .sidebar-wrapper .product-filter {
    padding: 10px 14px ;
    border-top: 1px solid var(--gray-100) ;
    background: var(--gray-100) ;
    border-radius: 0 0 16px 16px ;
  }
  .sidebar-wrapper .options.full-width {
    display: flex ;
    align-items: center ;
    gap: 8px ;
    flex-wrap: wrap ;
  }
  /* Hide the "View:" label — wastes space */
  .sidebar-wrapper .options h3 { display: none ; }

  /* Grid/list toggle buttons */
  .sidebar-wrapper .gridlist-toggle button,
  .sidebar-wrapper .fontsize {
    width: 30px ; height: 30px ;
    border: 1px solid var(--gray-200) ;
    border-radius: 6px ;
    background: #fff ;
    color: var(--text-medium) ;
    display: inline-flex ; align-items: center ;
    justify-content: center ;
    font-size: 12px ; cursor: pointer ;
    transition: all 0.15s ;
  }
  .sidebar-wrapper .gridlist-toggle button.active,
  .sidebar-wrapper .fontsize.active {
    background: var(--primary) ;
    color: #fff ; border-color: var(--primary) ;
  }
  .sidebar-wrapper .gridlist-toggle button:hover,
  .sidebar-wrapper .fontsize:hover {
    border-color: var(--primary) ; color: var(--primary) ;
  }
  .sidebar-wrapper .button-group.display { margin-right: 4px ; }

  /* Inline search inside filter bar */
  .pbs-filter-search {
    flex: 1 ;
    min-width: 140px ;
  }
  .pbs-inline-search-wrap {
    position: relative ;
  }
  .pbs-filter-search .pbs-search-input {
    height: 32px ;
    padding: 0 32px 0 12px ;
    font-size: 12px ;
    border-radius: 8px ;
    border: 1.5px solid var(--gray-200) ;
    width: 100% ;
    background: #fff ;
  }
  .pbs-filter-search .pbs-search-icon {
    font-size: 12px ;
    right: 10px ;
  }
  .pbs-filter-search .pbs-search-count {
    right: 28px ;
    font-size: 10px ;
  }
  .pbs-filter-search .pbs-no-results {
    position: absolute ;
    top: 100% ; left: 0 ; right: 0 ;
    z-index: 100 ;
    background: #fff ;
    border: 1px solid var(--gray-200) ;
    border-radius: 8px ;
    padding: 16px 12px ;
    font-size: 13px ;
    box-shadow: var(--shadow-md) ;
    margin-top: 4px ;
  }

  /* Remove the old search wrap area that used to sit above the product grid */
  .pbs-search-wrap { display: none ; }


  /* ================================================================
     TOOLBAR SEARCH BAR — sits in the float-right options bar
  ================================================================ */
  .pbs-toolbar-search {
    position: relative ;
    margin-right: 8px ;
    display: inline-flex ;
    align-items: center ;
  }
  .pbs-inline-search-wrap {
    position: relative ;
    display: flex ;
    align-items: center ;
  }
  .pbs-toolbar-search .pbs-search-input {
    height: 30px ;
    width: 200px ;
    padding: 0 30px 0 12px ;
    font-size: 12px ;
    font-family: 'Inter', sans-serif ;
    font-weight: 500 ;
    color: var(--text-dark) ;
    background: #fff ;
    border: 1.5px solid var(--gray-200) ;
    border-radius: 8px ;
    outline: none ;
    transition: border-color 0.2s, box-shadow 0.2s, width 0.25s ;
  }
  .pbs-toolbar-search .pbs-search-input:focus {
    border-color: var(--primary) ;
    box-shadow: 0 0 0 3px rgba(238,90,42,0.1) ;
    width: 260px ;
  }
  .pbs-toolbar-search .pbs-search-input::placeholder { color: var(--text-light) ; }
  .pbs-toolbar-search .pbs-search-icon {
    position: absolute ;
    right: 10px ; top: 50% ; transform: translateY(-50%) ;
    font-size: 11px ;
    color: var(--text-light) ;
    pointer-events: none ;
  }
  .pbs-toolbar-search .pbs-search-count {
    display: none ;
    position: absolute ;
    right: 26px ; top: 50% ; transform: translateY(-50%) ;
    font-size: 10px ; font-weight: 600 ;
    color: var(--text-light) ;
    background: var(--gray-100) ;
    border-radius: 8px ; padding: 1px 6px ;
    white-space: nowrap ;
  }
  /* "No results" drops below the search bar */
  .pbs-toolbar-search .pbs-no-results {
    display: none ;
    position: absolute ;
    top: calc(100% + 6px) ; left: 0 ;
    width: 260px ;
    background: #fff ;
    border: 1px solid var(--gray-200) ;
    border-radius: 10px ;
    padding: 20px 16px ;
    text-align: center ;
    font-family: 'Inter', sans-serif ;
    font-size: 13px ;
    color: var(--text-light) ;
    box-shadow: var(--shadow-md) ;
    z-index: 200 ;
  }
  .pbs-toolbar-search .pbs-no-results.visible { display: block ; }

  /* Hide the old standalone search wrap (was above the grid) */
  .pbs-search-wrap { display: none ; }

  /* Re-hide sidebar filter controls — search is in toolbar now */
  .sidebar-wrapper .product-filter,
  .sidebar-wrapper .options { display: none ; }


  /* ================================================================
     CATEGORY SECTION HEADERS — unique themed banners
  ================================================================ */

  /* ── Base reset for all category headings ── */
  .box-heading.vbanner.collapsible {
    position: relative ;
    overflow: hidden ;
    border-radius: 14px ;
    margin-bottom: 12px ;
    padding: 0 ;
    border: none ;
    cursor: pointer ;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) ;
    transition: box-shadow 0.25s ease, transform 0.18s ease ;
  }
  .box-heading.vbanner.collapsible:hover {
    transform: translateY(-2px) ;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2) ;
  }
  .box-heading.vbanner.collapsible a {
    display: flex ;
    align-items: center ;
    padding: 18px 24px ;
    font-family: 'Inter', sans-serif ;
    font-size: 16px ;
    font-weight: 800 ;
    letter-spacing: 0.2px ;
    text-decoration: none ;
    position: relative ;
    z-index: 1 ;
    gap: 12px ;
  }
  /* Collapse chevron */
  .box-heading.vbanner.collapsible a::after {
    content: '\f078' ;
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 11px ;
    margin-left: auto ;
    opacity: 0.7 ;
    transition: transform 0.25s ;
  }
  .box-heading.vbanner.collapsible a[aria-expanded="true"]::after {
    transform: rotate(180deg) ;
  }
  /* Subtle shimmer on hover */
  .box-heading.vbanner.collapsible::after {
    content: '' ;
    position: absolute ;
    inset: 0 ;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%) ;
    opacity: 0 ;
    transition: opacity 0.3s ;
    pointer-events: none ;
    z-index: 0 ;
  }
  .box-heading.vbanner.collapsible:hover::after { opacity: 1 ; }

  /* ── HOTDEAL — fire orange/red, high-energy ── */
  .box-heading.HOTDEAL {
    background: linear-gradient(110deg, #b22200 0%, #ee5a2a 45%, #ff8c42 80%, #ffb347 100%) ;
    box-shadow: 0 4px 24px rgba(238,90,42,0.45) ;
  }
  .box-heading.HOTDEAL:hover {
    box-shadow: 0 8px 36px rgba(238,90,42,0.6) ;
  }
  .box-heading.HOTDEAL a {
    color: #ffffff ;
    text-shadow: 0 1px 8px rgba(0,0,0,0.35) ;
  }
  .box-heading.HOTDEAL a::before {
    content: '\f06d' ; /* fire icon */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 18px ;
    filter: drop-shadow(0 0 6px rgba(255,180,50,0.8)) ;
  }
  /* Pulse glow rings */
  .box-heading.HOTDEAL::before {
    content: '' ;
    position: absolute ;
    top: -30px ; right: 40px ;
    width: 120px ; height: 120px ;
    background: radial-gradient(circle, rgba(255,200,60,0.25) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── PB — Classic Photobooks — deep navy, editorial ── */
  .box-heading.PB {
    background: linear-gradient(110deg, #1a1a4e 0%, #2d2d7a 50%, #3a3d8f 100%) ;
    box-shadow: 0 4px 20px rgba(26,26,78,0.4) ;
  }
  .box-heading.PB:hover { box-shadow: 0 8px 32px rgba(26,26,78,0.55) ; }
  .box-heading.PB a {
    color: #ffffff ;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4) ;
  }
  .box-heading.PB a::before {
    content: '\f02d' ; /* book */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 17px ;
    color: #a8b4ff ;
  }
  .box-heading.PB::before {
    content: '' ;
    position: absolute ;
    bottom: -20px ; right: 20px ;
    width: 90px ; height: 90px ;
    background: radial-gradient(circle, rgba(120,130,255,0.2) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── LAYFLAT — warm cream/gold, premium craft feel ── */
  .box-heading.LAYFLAT {
    background: linear-gradient(110deg, #6b4f00 0%, #a07800 45%, #c9a000 80%, #e8c44a 100%) ;
    box-shadow: 0 4px 20px rgba(160,120,0,0.4) ;
  }
  .box-heading.LAYFLAT:hover { box-shadow: 0 8px 32px rgba(160,120,0,0.55) ; }
  .box-heading.LAYFLAT a {
    color: #ffffff ;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4) ;
  }
  .box-heading.LAYFLAT a::before {
    content: '\f5d2' ; /* book open */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 17px ;
    color: #ffe898 ;
  }
  .box-heading.LAYFLAT::before {
    content: '' ;
    position: absolute ;
    top: -15px ; right: 30px ;
    width: 100px ; height: 100px ;
    background: radial-gradient(circle, rgba(255,220,80,0.22) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── PROLAYFLAT — HD premium, deep teal/emerald ── */
  .box-heading.PROLAYFLAT {
    background: linear-gradient(110deg, #004d40 0%, #00695c 45%, #009688 80%, #4db6ac 100%) ;
    box-shadow: 0 4px 20px rgba(0,105,92,0.4) ;
  }
  .box-heading.PROLAYFLAT:hover { box-shadow: 0 8px 32px rgba(0,105,92,0.55) ; }
  .box-heading.PROLAYFLAT a {
    color: #ffffff ;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35) ;
  }
  .box-heading.PROLAYFLAT a::before {
    content: '\f005' ; /* star */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 16px ;
    color: #a7ffeb ;
  }
  .box-heading.PROLAYFLAT::before {
    content: '' ;
    position: absolute ;
    top: -20px ; right: 25px ;
    width: 100px ; height: 100px ;
    background: radial-gradient(circle, rgba(100,255,200,0.2) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── CANVAS — art gallery vibes, slate/graphite ── */
  .box-heading.CANVAS {
    background: linear-gradient(110deg, #1c1c1c 0%, #333344 40%, #444466 75%, #55557a 100%) ;
    box-shadow: 0 4px 20px rgba(20,20,40,0.5) ;
  }
  .box-heading.CANVAS:hover { box-shadow: 0 8px 32px rgba(80,80,140,0.45) ; }
  .box-heading.CANVAS a {
    color: #ffffff ;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5) ;
  }
  .box-heading.CANVAS a::before {
    content: '\f53f' ; /* palette */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 17px ;
    color: #c4b4ff ;
  }
  .box-heading.CANVAS::before {
    content: '' ;
    position: absolute ;
    bottom: -30px ; right: 10px ;
    width: 140px ; height: 140px ;
    background: radial-gradient(circle, rgba(180,140,255,0.18) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── PHOTOTILES — clean white tiles, sky blue ── */
  .box-heading.PHOTOTILES {
    background: linear-gradient(110deg, #0277bd 0%, #0288d1 45%, #039be5 80%, #40c4ff 100%) ;
    box-shadow: 0 4px 20px rgba(2,119,189,0.4) ;
  }
  .box-heading.PHOTOTILES:hover { box-shadow: 0 8px 32px rgba(2,119,189,0.55) ; }
  .box-heading.PHOTOTILES a {
    color: #ffffff ;
    text-shadow: 0 1px 6px rgba(0,0,0,0.3) ;
  }
  .box-heading.PHOTOTILES a::before {
    content: '\f009' ; /* th (grid) */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 16px ;
    color: #b3e5fc ;
  }
  .box-heading.PHOTOTILES::before {
    content: '' ;
    position: absolute ;
    top: -20px ; right: 20px ;
    width: 100px ; height: 100px ;
    background: radial-gradient(circle, rgba(180,230,255,0.22) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── PICTILES — playful, fuchsia/rose ── */
  .box-heading.PICTILES {
    background: linear-gradient(110deg, #880e4f 0%, #ad1457 45%, #d81b60 80%, #f06292 100%) ;
    box-shadow: 0 4px 20px rgba(136,14,79,0.4) ;
  }
  .box-heading.PICTILES:hover { box-shadow: 0 8px 32px rgba(136,14,79,0.55) ; }
  .box-heading.PICTILES a {
    color: #ffffff ;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35) ;
  }
  .box-heading.PICTILES a::before {
    content: '\f03e' ; /* image */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 17px ;
    color: #fce4ec ;
  }
  .box-heading.PICTILES::before {
    content: '' ;
    position: absolute ;
    top: -15px ; right: 30px ;
    width: 90px ; height: 90px ;
    background: radial-gradient(circle, rgba(255,180,210,0.2) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── FRAMEDPRINT — sophisticated, dark charcoal/gold ── */
  .box-heading.FRAMEDPRINT {
    background: linear-gradient(110deg, #212121 0%, #37474f 45%, #4e5a5f 80%, #6d7a7f 100%) ;
    box-shadow: 0 4px 20px rgba(33,33,33,0.5) ;
    border: 1.5px solid rgba(212,175,55,0.35) ;
  }
  .box-heading.FRAMEDPRINT:hover { box-shadow: 0 8px 32px rgba(212,175,55,0.3) ; }
  .box-heading.FRAMEDPRINT a {
    color: #ffffff ;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5) ;
  }
  .box-heading.FRAMEDPRINT a::before {
    content: '\f302' ; /* image crop (frame) */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 17px ;
    color: #d4af37 ;
    filter: drop-shadow(0 0 4px rgba(212,175,55,0.6)) ;
  }
  .box-heading.FRAMEDPRINT::before {
    content: '' ;
    position: absolute ;
    bottom: -20px ; right: 20px ;
    width: 110px ; height: 110px ;
    background: radial-gradient(circle, rgba(212,175,55,0.15) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── ACRYLIC — ultra-modern, cyan glass/tech ── */
  .box-heading.ACRYLIC {
    background: linear-gradient(110deg, #006064 0%, #00838f 45%, #00acc1 80%, #26c6da 100%) ;
    box-shadow: 0 4px 20px rgba(0,131,143,0.4) ;
  }
  .box-heading.ACRYLIC:hover { box-shadow: 0 8px 32px rgba(0,131,143,0.55) ; }
  .box-heading.ACRYLIC a {
    color: #ffffff ;
    text-shadow: 0 1px 6px rgba(0,0,0,0.3) ;
  }
  .box-heading.ACRYLIC a::before {
    content: '\f110' ; /* circle spinner → crystal-like */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 16px ;
    color: #b2ebf2 ;
  }
  .box-heading.ACRYLIC::before {
    content: '' ;
    position: absolute ;
    top: -25px ; right: 15px ;
    width: 120px ; height: 120px ;
    background: radial-gradient(circle, rgba(150,240,255,0.2) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── CALENDAR — fresh green/mint, year-planning feel ── */
  .box-heading.CALENDAR {
    background: linear-gradient(110deg, #1b5e20 0%, #2e7d32 45%, #388e3c 80%, #66bb6a 100%) ;
    box-shadow: 0 4px 20px rgba(27,94,32,0.4) ;
  }
  .box-heading.CALENDAR:hover { box-shadow: 0 8px 32px rgba(27,94,32,0.55) ; }
  .box-heading.CALENDAR a {
    color: #ffffff ;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35) ;
  }
  .box-heading.CALENDAR a::before {
    content: '\f073' ; /* calendar */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 16px ;
    color: #c8e6c9 ;
  }
  .box-heading.CALENDAR::before {
    content: '' ;
    position: absolute ;
    top: -20px ; right: 20px ;
    width: 100px ; height: 100px ;
    background: radial-gradient(circle, rgba(160,230,160,0.2) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── PHOTOPR — prints, warm rose gold ── */
  .box-heading.PHOTOPR {
    background: linear-gradient(110deg, #6d1f1f 0%, #a0404a 45%, #c46474 80%, #e8909a 100%) ;
    box-shadow: 0 4px 20px rgba(109,31,31,0.4) ;
  }
  .box-heading.PHOTOPR:hover { box-shadow: 0 8px 32px rgba(109,31,31,0.55) ; }
  .box-heading.PHOTOPR a {
    color: #ffffff ;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35) ;
  }
  .box-heading.PHOTOPR a::before {
    content: '\f1c5' ; /* file image */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 16px ;
    color: #ffd7de ;
  }
  .box-heading.PHOTOPR::before {
    content: '' ;
    position: absolute ;
    bottom: -15px ; right: 25px ;
    width: 90px ; height: 90px ;
    background: radial-gradient(circle, rgba(255,160,170,0.2) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── GREETINGCARDS — warm ochre/sunflower ── */
  .box-heading.GREETINGCARDS {
    background: linear-gradient(110deg, #e65100 0%, #ef6c00 45%, #f57c00 80%, #ffa726 100%) ;
    box-shadow: 0 4px 20px rgba(230,81,0,0.4) ;
  }
  .box-heading.GREETINGCARDS:hover { box-shadow: 0 8px 32px rgba(230,81,0,0.55) ; }
  .box-heading.GREETINGCARDS a {
    color: #ffffff ;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35) ;
  }
  .box-heading.GREETINGCARDS a::before {
    content: '\f674' ; /* envelope open text */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 16px ;
    color: #ffe0b2 ;
  }
  .box-heading.GREETINGCARDS::before {
    content: '' ;
    position: absolute ;
    top: -20px ; right: 20px ;
    width: 100px ; height: 100px ;
    background: radial-gradient(circle, rgba(255,210,140,0.22) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── GIFT — rich purple/violet ── */
  .box-heading.GIFT {
    background: linear-gradient(110deg, #4a148c 0%, #6a1b9a 45%, #7b1fa2 80%, #ab47bc 100%) ;
    box-shadow: 0 4px 20px rgba(74,20,140,0.4) ;
  }
  .box-heading.GIFT:hover { box-shadow: 0 8px 32px rgba(74,20,140,0.55) ; }
  .box-heading.GIFT a {
    color: #ffffff ;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4) ;
  }
  .box-heading.GIFT a::before {
    content: '\f06b' ; /* gift */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 17px ;
    color: #e1bee7 ;
  }
  .box-heading.GIFT::before {
    content: '' ;
    position: absolute ;
    bottom: -25px ; right: 15px ;
    width: 120px ; height: 120px ;
    background: radial-gradient(circle, rgba(200,140,255,0.2) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── CHRISTMAS — festive red/holly green ── */
  .box-heading.CHRISTMAS {
    background: linear-gradient(110deg, #b71c1c 0%, #c62828 30%, #1b5e20 65%, #2e7d32 100%) ;
    box-shadow: 0 4px 20px rgba(183,28,28,0.45) ;
    border: 1.5px solid rgba(255,215,0,0.3) ;
  }
  .box-heading.CHRISTMAS:hover { box-shadow: 0 8px 32px rgba(183,28,28,0.6) ; }
  .box-heading.CHRISTMAS a {
    color: #ffffff ;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5) ;
  }
  .box-heading.CHRISTMAS a::before {
    content: '\f7b8' ; /* tree */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 17px ;
    color: #ffd700 ;
    filter: drop-shadow(0 0 5px rgba(255,215,0,0.7)) ;
  }
  .box-heading.CHRISTMAS::before {
    content: '' ;
    position: absolute ;
    top: -20px ; right: 20px ;
    width: 110px ; height: 110px ;
    background: radial-gradient(circle, rgba(255,215,0,0.18) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── CLEARANCE — clearance sale, bold indigo/electric ── */
  .box-heading.CLEARANCE {
    background: linear-gradient(110deg, #1a237e 0%, #283593 40%, #303f9f 70%, #5c6bc0 100%) ;
    box-shadow: 0 4px 20px rgba(26,35,126,0.45) ;
  }
  .box-heading.CLEARANCE:hover { box-shadow: 0 8px 32px rgba(26,35,126,0.6) ; }
  .box-heading.CLEARANCE a {
    color: #ffffff ;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4) ;
  }
  .box-heading.CLEARANCE a::before {
    content: '\f068' ; /* minus (tag icon) */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 15px ;
    background: rgba(255,255,255,0.2) ;
    border-radius: 50% ;
    width: 24px ;
    height: 24px ;
    display: inline-flex ;
    align-items: center ;
    justify-content: center ;
    color: #ffffff ;
  }
  .box-heading.CLEARANCE::before {
    content: '' ;
    position: absolute ;
    bottom: -20px ; right: 20px ;
    width: 110px ; height: 110px ;
    background: radial-gradient(circle, rgba(130,150,255,0.2) 0%, transparent 70%) ;
    pointer-events: none ;
  }

  /* ── GIFTCARD — sleek black/gold, premium card look ── */
  .box-heading.GIFTCARD {
    background: linear-gradient(110deg, #0d0d0d 0%, #1a1a1a 30%, #2c2700 65%, #4a3f00 100%) ;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) ;
    border: 1.5px solid rgba(212,175,55,0.4) ;
  }
  .box-heading.GIFTCARD:hover {
    box-shadow: 0 8px 32px rgba(212,175,55,0.35) ;
  }
  .box-heading.GIFTCARD a {
    color: #d4af37 ;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6) ;
  }
  .box-heading.GIFTCARD a::before {
    content: '\f09d' ; /* credit card */
    font-family: 'Font Awesome 5 Free' ;
    font-weight: 900 ;
    font-size: 17px ;
    color: #d4af37 ;
    filter: drop-shadow(0 0 5px rgba(212,175,55,0.7)) ;
  }
  .box-heading.GIFTCARD::before {
    content: '' ;
    position: absolute ;
    top: -25px ; right: 10px ;
    width: 120px ; height: 120px ;
    background: radial-gradient(circle, rgba(212,175,55,0.2) 0%, transparent 70%) ;
    pointer-events: none ;
  }


  /* ── Remove text-shadow from category links ── */
  .box-heading.vbanner.collapsible a {
    text-shadow: none ;
  }

  /* ── Icon animation base ── */
  .box-heading.vbanner.collapsible a::before {
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), filter 0.3s ease, color 0.2s ease ;
    display: inline-block ;
  }

  /* ── HOTDEAL: fire flicker — scale + glow pulse ── */
  @keyframes pbs-fire-flicker {
    0%,100% { transform: scale(1.0) rotate(-3deg); filter: drop-shadow(0 0 6px rgba(255,180,50,0.7)); }
    50%      { transform: scale(1.15) rotate(4deg);  filter: drop-shadow(0 0 12px rgba(255,120,0,1)); }
  }
  .box-heading.HOTDEAL:hover a::before {
    animation: pbs-fire-flicker 0.5s ease-in-out infinite ;
  }

  /* ── PB: book flip — rotate Y ── */
  @keyframes pbs-book-flip {
    0%   { transform: rotateY(0deg) scale(1); }
    50%  { transform: rotateY(25deg) scale(1.1); }
    100% { transform: rotateY(0deg) scale(1); }
  }
  .box-heading.PB:hover a::before {
    animation: pbs-book-flip 0.6s ease-in-out ;
  }

  /* ── LAYFLAT: gentle float up/down ── */
  @keyframes pbs-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-5px); }
  }
  .box-heading.LAYFLAT:hover a::before {
    animation: pbs-float 0.7s ease-in-out infinite ;
  }

  /* ── PROLAYFLAT: star spin + scale ── */
  @keyframes pbs-star-spin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
  }
  .box-heading.PROLAYFLAT:hover a::before {
    animation: pbs-star-spin 0.7s ease-in-out ;
  }

  /* ── CANVAS: palette rock ── */
  @keyframes pbs-rock {
    0%,100% { transform: rotate(-8deg); }
    50%     { transform: rotate(8deg) scale(1.1); }
  }
  .box-heading.CANVAS:hover a::before {
    animation: pbs-rock 0.5s ease-in-out infinite ;
  }

  /* ── PHOTOTILES: grid pop ── */
  @keyframes pbs-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.3); }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); }
  }
  .box-heading.PHOTOTILES:hover a::before {
    animation: pbs-pop 0.5s ease-in-out ;
  }

  /* ── PICTILES: image shake ── */
  @keyframes pbs-shake {
    0%,100% { transform: rotate(0deg); }
    20%     { transform: rotate(-10deg) scale(1.1); }
    40%     { transform: rotate(10deg) scale(1.1); }
    60%     { transform: rotate(-8deg); }
    80%     { transform: rotate(8deg); }
  }
  .box-heading.PICTILES:hover a::before {
    animation: pbs-shake 0.5s ease-in-out ;
  }

  /* ── FRAMEDPRINT: gold shimmer glow ── */
  @keyframes pbs-gold-glow {
    0%,100% { filter: drop-shadow(0 0 3px rgba(212,175,55,0.5)); transform: scale(1); }
    50%     { filter: drop-shadow(0 0 10px rgba(255,215,0,1));    transform: scale(1.15); }
  }
  .box-heading.FRAMEDPRINT:hover a::before {
    animation: pbs-gold-glow 0.6s ease-in-out infinite ;
  }

  /* ── ACRYLIC: continuous spin (crystal) ── */
  @keyframes pbs-spin {
    from { transform: rotate(0deg) scale(1.1); }
    to   { transform: rotate(360deg) scale(1.1); }
  }
  .box-heading.ACRYLIC:hover a::before {
    animation: pbs-spin 1s linear infinite ;
  }

  /* ── CALENDAR: page flip ── */
  @keyframes pbs-calendar-flip {
    0%   { transform: rotateX(0deg); }
    50%  { transform: rotateX(30deg) scale(1.1); }
    100% { transform: rotateX(0deg); }
  }
  .box-heading.CALENDAR:hover a::before {
    animation: pbs-calendar-flip 0.6s ease-in-out ;
  }

  /* ── PHOTOPR: pulse heartbeat ── */
  @keyframes pbs-heartbeat {
    0%,100% { transform: scale(1); }
    14%     { transform: scale(1.2); }
    28%     { transform: scale(1); }
    42%     { transform: scale(1.15); }
    70%     { transform: scale(1); }
  }
  .box-heading.PHOTOPR:hover a::before {
    animation: pbs-heartbeat 0.7s ease-in-out ;
  }

  /* ── GREETINGCARDS: envelope open ── */
  @keyframes pbs-envelope {
    0%,100% { transform: scale(1) translateY(0); }
    25%     { transform: scale(1.15) translateY(-4px); }
    75%     { transform: scale(1.05) translateY(-2px) rotate(5deg); }
  }
  .box-heading.GREETINGCARDS:hover a::before {
    animation: pbs-envelope 0.6s ease-in-out ;
  }

  /* ── GIFT: bounce + glow ── */
  @keyframes pbs-gift-bounce {
    0%,100% { transform: translateY(0) scale(1); }
    30%     { transform: translateY(-8px) scale(1.15); }
    50%     { transform: translateY(-4px) scale(1.1); }
    70%     { transform: translateY(-7px) scale(1.12); }
  }
  .box-heading.GIFT:hover a::before {
    animation: pbs-gift-bounce 0.7s ease-in-out infinite ;
    filter: drop-shadow(0 0 8px rgba(200,130,255,0.8)) ;
  }

  /* ── CHRISTMAS: tree twinkle (scale + gold flash) ── */
  @keyframes pbs-twinkle {
    0%,100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(255,215,0,0.5)); }
    33%     { transform: scale(1.2);  filter: drop-shadow(0 0 12px rgba(255,215,0,1)); }
    66%     { transform: scale(0.95); filter: drop-shadow(0 0 3px rgba(255,215,0,0.3)); }
  }
  .box-heading.CHRISTMAS:hover a::before {
    animation: pbs-twinkle 0.8s ease-in-out infinite ;
  }

  /* ── CLEARANCE: zap flash ── */
  @keyframes pbs-zap {
    0%,100% { transform: scale(1) rotate(0deg); opacity: 1; }
    25%     { transform: scale(1.25) rotate(-15deg); opacity: 0.8; }
    50%     { transform: scale(0.9) rotate(10deg); opacity: 1; }
    75%     { transform: scale(1.2) rotate(-5deg); opacity: 0.9; }
  }
  .box-heading.CLEARANCE:hover a::before {
    animation: pbs-zap 0.4s ease-in-out ;
  }

  /* ── GIFTCARD: gold shimmer left-right ── */
  @keyframes pbs-card-shine {
    0%   { transform: scale(1) translateX(0); filter: drop-shadow(0 0 3px rgba(212,175,55,0.4)); }
    50%  { transform: scale(1.1) translateX(3px); filter: drop-shadow(0 0 10px rgba(255,215,0,0.9)); }
    100% { transform: scale(1) translateX(0); filter: drop-shadow(0 0 3px rgba(212,175,55,0.4)); }
  }
  .box-heading.GIFTCARD:hover a::before {
    animation: pbs-card-shine 0.6s ease-in-out infinite ;
  }


  /* ── Disable Font Awesome ::before icons (replaced by emoji spans) ── */
  .box-heading.HOTDEAL a::before, .box-heading.PB a::before,
  .box-heading.LAYFLAT a::before, .box-heading.PROLAYFLAT a::before,
  .box-heading.CANVAS a::before, .box-heading.PHOTOTILES a::before,
  .box-heading.PICTILES a::before, .box-heading.FRAMEDPRINT a::before,
  .box-heading.ACRYLIC a::before, .box-heading.CALENDAR a::before,
  .box-heading.PHOTOPR a::before, .box-heading.GREETINGCARDS a::before,
  .box-heading.GIFT a::before, .box-heading.CHRISTMAS a::before,
  .box-heading.CLEARANCE a::before, .box-heading.GIFTCARD a::before {
    content: none ;
  }

  /* ── Base emoji span styles ── */
  .pbs-em-live, .pbs-em-static {
    display: inline-block ;
    font-size: 22px ;
    line-height: 1 ;
    flex-shrink: 0 ;
  }
  .pbs-em-live   { margin-right: 2px ; }
  .pbs-em-static { margin-right: 10px ; }

  /* ── Static emoji: sits still, pops on heading hover ── */
  @keyframes pbs-emoji-pop {
    0%   { transform: scale(1) rotate(0deg); }
    30%  { transform: scale(1.5) rotate(-10deg); }
    55%  { transform: scale(0.88) rotate(6deg); }
    75%  { transform: scale(1.2) rotate(-4deg); }
    100% { transform: scale(1) rotate(0deg); }
  }
  .box-heading.vbanner:hover .pbs-em-static {
    animation: pbs-emoji-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards ;
  }

  /* ── Live emoji keyframes (always running) ── */
  @keyframes pbs-live-fire {
    0%,100% { transform: scale(1)    rotate(-4deg); filter: drop-shadow(0 0 4px rgba(255,120,0,.55)); }
    50%     { transform: scale(1.14) rotate(5deg);  filter: drop-shadow(0 0 10px rgba(255,60,0,.95)); }
  }
  @keyframes pbs-live-float {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-5px); }
  }
  @keyframes pbs-live-twinkle {
    0%,100% { opacity: 1;   transform: scale(1); }
    40%     { opacity: .35; transform: scale(.82); }
    70%     { opacity: .9;  transform: scale(1.12); }
  }
  @keyframes pbs-live-spin-glow {
    from { transform: rotate(0deg);   filter: drop-shadow(0 0 3px rgba(210,220,255,.5)); }
    50%  { filter: drop-shadow(0 0 9px rgba(210,220,255,1)); }
    to   { transform: rotate(360deg); filter: drop-shadow(0 0 3px rgba(210,220,255,.5)); }
  }
  @keyframes pbs-live-rock {
    0%,100% { transform: rotate(-6deg); }
    50%     { transform: rotate(6deg) scale(1.08); }
  }
  @keyframes pbs-live-shutter {
    0%,45%,100% { transform: scale(1); }
    20%         { transform: scale(.86); }
    32%         { transform: scale(1.1); }
  }
  @keyframes pbs-live-orbit {
    from { transform: rotate(0deg)   scale(1); }
    50%  { transform: rotate(180deg) scale(1.1); }
    to   { transform: rotate(360deg) scale(1); }
  }
  @keyframes pbs-live-sparkle {
    0%,100% { transform: scale(1);    filter: drop-shadow(0 0 3px rgba(255,215,0,.4)); }
    50%     { transform: scale(1.16); filter: drop-shadow(0 0 10px rgba(255,215,0,.95)); }
  }
  @keyframes pbs-live-pulse-blue {
    0%,100% { transform: scale(1);   filter: drop-shadow(0 0 3px rgba(0,200,255,.5)); }
    50%     { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(0,200,255,.9)); }
  }
  @keyframes pbs-live-page {
    0%,100% { transform: rotateY(0deg); }
    50%     { transform: rotateY(26deg); }
  }
  @keyframes pbs-live-bounce {
    0%,100% { transform: translateY(0); }
    30%     { transform: translateY(-7px) scale(1.06); }
    60%     { transform: translateY(-3px); }
  }
  @keyframes pbs-live-flash {
    0%,100% { opacity: 1;   transform: scale(1);    filter: drop-shadow(0 0 4px rgba(255,230,0,.6)); }
    35%     { opacity: .35; transform: scale(.88); }
    55%     { opacity: 1;   transform: scale(1.18); filter: drop-shadow(0 0 10px rgba(255,220,0,1)); }
  }
  @keyframes pbs-live-gold-heart {
    0%,100% { transform: scale(1);    filter: drop-shadow(0 0 3px rgba(212,175,55,.4)); }
    20%     { transform: scale(1.22); filter: drop-shadow(0 0 9px rgba(212,175,55,.95)); }
    40%     { transform: scale(.94); }
    60%     { transform: scale(1.14); filter: drop-shadow(0 0 6px rgba(212,175,55,.7)); }
  }

  /* ── Assign live animations per category ── */
  .pbs-live-hotdeal       { animation: pbs-live-fire       1.4s ease-in-out infinite ; }
  .pbs-live-pb            { animation: pbs-live-float       2.2s ease-in-out infinite ; }
  .pbs-live-layflat       { animation: pbs-live-twinkle     1.8s ease-in-out infinite ; }
  .pbs-live-prolayflat    { animation: pbs-live-spin-glow   2.5s linear         infinite ; }
  .pbs-live-canvas        { animation: pbs-live-rock        1.6s ease-in-out infinite ; }
  .pbs-live-phototiles    { animation: pbs-live-shutter     1.5s ease-in-out infinite ; }
  .pbs-live-pictiles      { animation: pbs-live-orbit       3.0s ease-in-out infinite ; }
  .pbs-live-framedprint   { animation: pbs-live-sparkle     2.0s ease-in-out infinite ; }
  .pbs-live-acrylic       { animation: pbs-live-pulse-blue  1.8s ease-in-out infinite ; }
  .pbs-live-calendar      { animation: pbs-live-page        2.2s ease-in-out infinite ; }
  .pbs-live-photopr       { animation: pbs-live-shutter     1.9s ease-in-out infinite ; }
  .pbs-live-greetingcards { animation: pbs-live-float       2.0s ease-in-out infinite ; }
  .pbs-live-gift          { animation: pbs-live-bounce      1.6s ease-in-out infinite ; }
  .pbs-live-christmas     { animation: pbs-live-sparkle     1.5s ease-in-out infinite ; }
  .pbs-live-clearance     { animation: pbs-live-flash       1.2s ease-in-out infinite ; }
  .pbs-live-giftcard      { animation: pbs-live-gold-heart  1.6s ease-in-out infinite ; }


  /* ── Noto Animated Emojis — category headings ── */

  /* Hide old emoji spans (safety) */
  .pbs-em-live, .pbs-em-static { display: none ; }

  .pbs-noto {
    display: inline-flex ;
    align-items: center ;
    justify-content: center ;
    width: 32px ;
    height: 32px ;
    margin-right: 10px ;
    flex-shrink: 0 ;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.3s ease ;
  }
  .pbs-noto img {
    width: 32px ;
    height: 32px ;
    display: block ;
  }

  /* Hover: pop + glow */
  .box-heading.vbanner:hover .pbs-noto {
    transform: scale(1.4) rotate(-8deg) ;
    filter: drop-shadow(0 3px 10px rgba(0,0,0,0.4)) brightness(1.15) ;
  }



/* ================================================================
   VOUCHER PAGE 26 — Page Layout
================================================================ */
.voucher-page-wrap {
  background: #f4f5f7;
  padding: 0 0 60px;
}

.voucher-page-wrap .container {
  padding-top: 20px;
}

@media (max-width: 576px) {
  .voucher-page-wrap .container { padding: 0 10px; }
  .product-grid .product.voucher .voucherselect { flex: 0 0 54px; max-width: 54px; }
  .product-grid .product.voucher input.add_to_cart,
  .product-grid .product.voucher .add_to_cart { font-size: 10px; }
}

/* ── Search bar ── */
.voucher-search-bar {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.09);
  padding: 20px 24px 18px;
  margin-bottom: 20px;
}

.voucher-search-inner {
  display: flex;
  align-items: center;
  background: #f5f5f7;
  border-radius: 50px;
  padding: 4px 6px 4px 20px;
  gap: 10px;
  border: 2px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}

.voucher-search-inner:focus-within {
  border-color: var(--primary);
  background: #fff;
}

.voucher-search-icon {
  color: #bbb;
  font-size: 15px;
  flex-shrink: 0;
}

.voucher-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  color: var(--dark);
  outline: none;
  padding: 10px 0;
  min-width: 0;
}

.voucher-search-input::placeholder { color: #bbb; }

.voucher-search-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 26px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}

.voucher-search-btn:hover { background: var(--primary-dark); }

.voucher-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  background: #f4f5f7;
  color: var(--text-medium);
  text-decoration: none;
  border: 1.5px solid #e5e5e5;
  transition: all 0.18s;
  white-space: nowrap;
}

.filter-pill:hover,
.filter-pill.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  text-decoration: none;
}

/* ── Hero banner gap ── */
.pbs-hero-row {
  margin-bottom: 20px;
}

/* ── Sidebar + main layout ── */
.voucher-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.voucher-sidebar-col {
  width: 268px;
  min-width: 268px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-h, 122px) + 10px);
  max-height: calc(100vh - var(--header-h, 122px) - 20px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}
.voucher-sidebar-col::-webkit-scrollbar { width: 4px; }
.voucher-sidebar-col::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }

.voucher-main-col {
  flex: 1;
  min-width: 0;
}

/* Voucher sections — always full-width block, never participates in flex rows */
.voucher-section {
  display: block;
  width: 100%;
  clear: both;
  margin-bottom: 8px;
  scroll-margin-top: 160px;
}

/* Product grid flex layout */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.product-grid .product.voucher {
  /* Override the margin:6px that exists in the pbs-* block — gap handles spacing */
  margin: 0;
  /* 4 columns: 4 items + 3 gaps of 10px = (100% - 30px) split 4 ways */
  width: calc(25% - 7.5px);
  box-sizing: border-box;
}

@media (max-width: 1200px) {
  .product-grid .product.voucher {
    margin: 0;
    width: calc(33.333% - 6.67px);
    box-sizing: border-box;
  }
}

/* Per-card cart quantity badge */
.product.voucher { position: relative; }
.voucher-qty-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 10;
  pointer-events: none;
  transition: transform 0.15s;
}
.voucher-qty-badge.pop { transform: scale(1.3); }

/* Mobile sticky search — hidden on desktop */
.vp-mobile-search {
  display: none;
}

@media (max-width: 900px) {
  .voucher-sidebar-col { display: none; }

  .vp-mobile-search {
    display: block;
    position: sticky;
    top: var(--header-h, 122px);
    z-index: 100;
    background: #f4f5f7;
    padding: 5px 10px 0;
    margin: 0 -20px;
    border-bottom: 1px solid #dcdcdf;
  }
  /* Make search input stand out against the grey sticky bar */
  .vp-mobile-search .voucher-search-inner {
    background: #fff;
    border: 1.5px solid var(--gray-300);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .vp-mobile-search .voucher-search-inner:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(238,90,42,0.12);
  }
  /* Category dropdown (replaces the pill strip) */
  .vp-search-recs-wrap {
    padding: 8px 4px 10px;
  }
  .vp-search-select {
    width: 100%;
    padding: 9px 34px 9px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: var(--text-medium);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23666' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    border: 1.5px solid var(--gray-200);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .vp-search-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(238,90,42,0.12);
  }

  .product-grid .product.voucher {
    margin: 0;
    width: calc(50% - 5px);
    box-sizing: border-box;
  }
  .voucher-search-bar { padding: 16px; }
}

@media (max-width: 600px) {
  .voucher-search-btn { display: none; }
}

@media (max-width: 480px) {
  .product-grid .product.voucher {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Voucher category section wrapper */
.voucher-section {
  margin-bottom: 8px;
}

/* ── Info strip (under hero banner) ── */
.voucher-info-strip {
  display: flex;
  gap: 0;
  background: #fff;
  border-radius: 14px;
  padding: 0;
  margin-bottom: 20px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.07);
  overflow: hidden;
}

.info-strip-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-right: 1px solid #f0f0f0;
}

.info-strip-item:last-child { border-right: none; }

.info-strip-item i {
  font-size: 20px;
  color: var(--primary);
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.info-strip-item strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 2px;
  font-family: 'Inter', sans-serif;
}

.info-strip-item span {
  font-size: 11px;
  color: var(--text-medium);
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .voucher-info-strip { flex-wrap: wrap; }
  .info-strip-item { flex: 0 0 50%; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
  .info-strip-item:nth-child(2),
  .info-strip-item:nth-child(4) { border-right: none; }
}

@media (max-width: 480px) {
  .voucher-info-strip { display: none; }
}

/* ── Sidebar cart widget ── */
.sidebar-cart {
  padding: 16px 18px;
  border-bottom: 1px solid var(--gray-100);
}

.sidebar-cart h3,
.sidebar-cart > strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  font-family: 'Inter', sans-serif;
}
.sidebar-cart h3 {
  margin: 0 0 10px;
}


.cart-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
}

.cart-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-medium);
  font-family: 'Inter', sans-serif;
}

.cart-total {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  font-family: 'Inter', sans-serif;
}

.cart-points-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 10px;
  font-size: 12px;
  color: var(--text-medium);
  font-family: 'Inter', sans-serif;
}

.cart-points-val {
  font-weight: 700;
  color: var(--primary);
  font-size: 14px;
}

.checkout-btn {
  display: block;
  background: linear-gradient(135deg, var(--primary) 0%, #e85a2a 100%);
  color: #fff;
  text-align: center;
  padding: 13px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  transition: all 0.2s;
  letter-spacing: 0.2px;
}

.checkout-btn:hover {
  box-shadow: 0 6px 20px rgba(238,90,42,0.35);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}

.cart-empty-msg {
  font-size: 11px;
  color: var(--text-light);
  text-align: center;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
}

/* ── Animated emoji GIF sizing ── */
.emoji-gif {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  display: inline-block;
}


/* ── Replace <a>-based layout with span-based ── */
.box-heading.vbanner.collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}

/* Remove the old <a> chevron pseudo since we now use .vbanner-caret */
.box-heading.vbanner.collapsible a::after { content: none; }
.box-heading.vbanner.collapsible a {
  display: contents;
  text-decoration: none;
}

.vbanner-label {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #202020;
  text-decoration: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  letter-spacing: 0.1px;
}

.vbanner-caret {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: var(--text-medium);
  flex-shrink: 0;
  transition: transform 0.25s ease;
  /* default = expanded → chevron points DOWN */
  transform: rotate(0deg);
}

/* collapsed → chevron points UP */
.box-heading.vbanner.collapsible.is-collapsed .vbanner-caret {
  transform: rotate(180deg);
}

/* Collapsible body */
.vbanner-body {
  transition: none;
}

.vbanner-body.collapsed {
  display: none;
}


/* ── Sidebar fire gif: text on left, gif on right ── */
.voucher-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.voucher-menu .emoji-gif {
  margin-left: auto;
  flex-shrink: 0;
}
/* ================================================================
   PRODUCT CARD — Modern price block redesign
================================================================ */

/* Wrap the whole price block in a mini-card */
.product-grid .product.voucher .voucherprice {
  background: linear-gradient(135deg, #fff6f5 0%, #fff 100%);
  border: 1px solid rgba(225, 34, 38, 0.10);
  border-radius: 10px;
  padding: 10px 11px 8px;
  margin: 8px 0 10px;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Top row: RRP strikethrough on left, SAVE badge on right */
.product-grid .product.voucher .voucherprice .price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: 0;
}

/* SAVE badge — pill style, red filled */
.product-grid .product.voucher .voucherprice .price .save {
  text-decoration: none;
  background: var(--save);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

/* NOW price row */
.product-grid .product.voucher .voucherprice .today.mblack {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-light);
  margin-bottom: 0;
}

.product-grid .product.voucher .voucherprice .todayprice {
  font-size: 22px;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.8px;
  line-height: 1;
}

/* Delivery / validity — green chip */
.product-grid .product.voucher .voucherprice .redeem {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 3px 8px;
  margin-top: 2px;
}

.product-grid .product.voucher .voucherprice .redeem::before {
  content: '✓';
  font-size: 11px;
  font-weight: 700;
  color: #16a34a;
}

/* ==============================================
   CART PAGE (cart26.html)
   ============================================== */

.cart-page-wrap {
  background: #f4f5f7;
  padding: 130px 0 80px;
}

.cart-page-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 7px;
}

.cart-page-header h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  margin: 0;
  font-family: "Inter", sans-serif;
}

.cart-item-count {
  font-size: 14px;
  color: var(--text-medium);
  font-family: "Inter", sans-serif;
}

.cart-layout {
  display: flex;
  gap: 24px;
  padding-bottom: 60px;
}

.cart-items-col {
  flex: 1;
  min-width: 0;
}

.cart-summary-col {
  width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-h, 120px) + 8px);
  align-self: flex-start;
}

.cart-table-head {
  display: grid;
  grid-template-columns: 1fr 96px 80px;
  gap: 16px;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-medium);
  background: white;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid var(--gray-200);
  font-family: "Inter", sans-serif;
}

.cart-item-row {
  display: grid;
  grid-template-columns: 80px 1fr 96px 80px;
  gap: 16px;
  align-items: center;
  background: white;
  padding: 16px;
  border-bottom: 1px solid var(--gray-100);
}

.cart-item-row-last {
  border-radius: 0 0 10px 10px;
  border-bottom: none;
}

.cart-item-img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--gray-200);
}

.cart-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-info {
  min-width: 0;
}

.cart-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  margin-bottom: 4px;
  font-family: "Inter", sans-serif;
}

.cart-item-meta {
  font-size: 12px;
  color: var(--text-medium);
  margin-bottom: 8px;
  font-family: "Inter", sans-serif;
}

.cart-item-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.cart-item-edit {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  font-family: "Inter", sans-serif;
}

.cart-item-edit:hover {
  text-decoration: underline;
}

.cart-item-remove {
  font-size: 12px;
  color: var(--text-medium);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: "Inter", sans-serif;
  transition: color 0.2s;
}

.cart-item-remove:hover {
  color: var(--primary);
}

.cart-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  height: 36px;
  width: 96px;
}

.cart-qty-btn {
  width: 28px;
  height: 36px;
  background: var(--gray-100);
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}

.cart-qty-btn:hover {
  background: var(--gray-200);
}

.cart-qty-input {
  width: 40px;
  height: 36px;
  border: none;
  border-left: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  font-family: "Inter", sans-serif;
  -moz-appearance: textfield;
}

.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-qty-input:focus {
  outline: none;
}


.cart-coupon-row {
  background: white;
  display: block;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 12px;
}

.cart-coupon-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
  padding-left: 12px;
}

.cart-coupon-icon {
  color: var(--text-medium);
  font-size: 14px;
  flex-shrink: 0;
}

.cart-coupon-input {
  flex: 1;
  border: none;
  padding: 10px 0;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  color: var(--dark);
  background: transparent;
}

.cart-coupon-input:focus {
  outline: none;
}

.cart-coupon-btn {
  padding: 10px 18px;
  background: var(--gray-100);
  border: none;
  border-left: 1px solid var(--gray-200);
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: background 0.15s;
}

.cart-coupon-btn:hover {
  background: var(--gray-200);
}

.cart-coupon-msg {
  font-size: 12px;
  margin-top: 8px;
  font-family: "Inter", sans-serif;
  min-height: 16px;
}

.cart-continue-row {
  margin-top: 12px;
  padding: 4px 0;
}

.cart-continue-link {
  font-size: 13px;
  color: var(--text-medium);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
  transition: color 0.2s;
}

.cart-continue-link:hover {
  color: var(--primary);
}

.cart-totals-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.cart-totals-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
  font-family: "Inter", sans-serif;
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 14px;
  color: var(--text-dark);
  font-family: "Inter", sans-serif;
}

.cart-total-row .label {
  color: var(--text-medium);
}

.cart-total-row.total-line {
  padding: 14px 0 0;
  margin-top: 10px;
  border-top: 2px solid var(--gray-200);
  font-size: 16px;
  font-weight: 700;
}

.cart-total-row.total-line .amount {
  font-size: 22px;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.5px;
}

.free-ship {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 20px;
  padding: 2px 10px;
}

.free-ship-note {
  font-size: 11px;
  color: #16a34a;
  text-align: right;
  margin: 0 0 4px;
  font-family: "Inter", sans-serif;
}

.cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--primary);
  color: white;
  border-radius: 10px;
  padding: 15px 24px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  margin: 18px 0 10px;
  font-family: "Inter", sans-serif;
  transition: background 0.2s, transform 0.15s;
  box-sizing: border-box;
}

.cart-checkout-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  color: white;
  text-decoration: none;
}

.cart-continue-link-sm {
  text-align: center;
  font-size: 13px;
  color: var(--text-medium);
  margin-bottom: 14px;
  font-family: "Inter", sans-serif;
}

.cart-continue-link-sm a {
  color: var(--primary);
  text-decoration: none;
}

.cart-continue-link-sm a:hover {
  text-decoration: underline;
}

.cart-payment-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  margin: 0 0 14px;
}

.cart-payment-icons img {
  height: 20px;
  opacity: 0.7;
}

.cart-points-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-medium);
  background: #fef9ec;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-family: "Inter", sans-serif;
}

.cart-points-info i {
  color: #f59e0b;
  flex-shrink: 0;
}

.cart-afterpay-info {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-medium);
  justify-content: center;
  flex-wrap: wrap;
  font-family: "Inter", sans-serif;
}

.cart-afterpay-info strong {
  color: var(--dark);
}

.cart-trust-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.cart-trust-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: white;
  border-radius: 8px;
  padding: 12px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-medium);
  text-align: center;
  font-family: "Inter", sans-serif;
}

.cart-trust-item i {
  font-size: 18px;
  color: var(--primary);
}

@media (max-width: 900px) {
  .cart-layout {
    flex-direction: column;
  }
  .cart-summary-col {
    width: 100%;
    position: static;
  }
}

@media (max-width: 600px) {
  .cart-table-head { display: none; }
  .cart-item-row {
    grid-template-columns: 76px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 12px;
    padding: 14px;
  }
  .cart-item-img {
    width: 76px;
    height: 76px;
    grid-row: 1;
    grid-column: 1;
  }
  .cart-item-info {
    grid-row: 1;
    grid-column: 2;
  }
  .cart-qty {
    grid-row: 2;
    grid-column: 1;
    width: 96px;
    height: 38px;
  }
  .cart-qty-btn { width: 30px; font-size: 18px; }
  .cart-page-wrap { padding-bottom: 115px; }
}

/* ---- Mobile Fast Checkout Bar ---- */
.mfc-bar { display: none; }

@keyframes mfc-pulse {
  0%   { box-shadow: 0 4px 16px rgba(238,90,42,0.4), 0 0 0 0    rgba(238,90,42,0.5); }
  65%  { box-shadow: 0 4px 16px rgba(238,90,42,0.2), 0 0 0 14px rgba(238,90,42,0);   }
  100% { box-shadow: 0 4px 16px rgba(238,90,42,0.35),0 0 0 0    rgba(238,90,42,0);   }
}

@keyframes mfc-trust-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .mfc-bar {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: #fff;
    border-top: 1.5px solid var(--gray-200);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 24px rgba(0,0,0,0.10);
  }
  .mfc-bar-content {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
  }
  .mfc-bar-left {
    flex: 1;
    min-width: 0;
  }
  .mfc-bar-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: "Inter", sans-serif;
  }
  .mfc-bar-total {
    display: block;
    font-size: 23px;
    font-weight: 900;
    color: var(--dark);
    letter-spacing: -0.5px;
    font-family: "Inter", sans-serif;
    line-height: 1.1;
  }
  .mfc-bar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);;
    color: #fff;
    border-radius: 10px;
    padding: 15px 24px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    font-family: "Inter", sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(238,90,42,0.35);
    transition: background 0.2s;
  }
  .mfc-bar-btn:hover { background: var(--primary-dark); color: #fff; text-decoration: none; }
  .mfc-bar-btn.pulsing { animation: mfc-pulse 0.9s ease-out; }
  .mfc-bar-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--text-medium);
    font-family: "Inter", sans-serif;
    min-height: 16px;
    opacity: 1;
    transition: opacity 0.3s;
  }
  .mfc-bar-trust.fading { opacity: 0; }
  .mfc-bar-trust.animating { animation: mfc-trust-in 0.35s ease forwards; }
  .mfc-bar-trust i { color: var(--primary); font-size: 11px; }
}

/* ==============================================
   PRODUCTS PAGE (products26.html)
   ============================================== */

/* Page wrapper */
.prod-page-wrap {
  background: #ffffff;
}

/* Container-header: constrained width with side gaps, sitting on grey page background */
.container-header {
  position: relative;
  background: #fff;
  width: calc(100% - 48px);
  max-width: 1400px;
  margin: 0 auto 24px;
}

/* .tta: Hero image container — 1400×560px natural image size */
.container-header .tta {
  height: 560px;
  overflow: hidden;
  position: relative;
}
.container-header .tta img {
  height: 100%;
  width: auto;
  min-width: 65%;
  display: block;
  object-fit: cover;
  object-position: left center;
}

/* Gradient fade: image visible on left, blends to white on right where card sits */
.container-header .tta::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to right,
    transparent 30%,
    rgba(255,255,255,0.5) 48%,
    rgba(255,255,255,0.88) 60%,
    #fff 72%
  );
  pointer-events: none;
  z-index: 0;
}

/* Size badge must sit above the gradient overlay */
#prod-size-badge, .prod-size-badge { z-index: 1; }

/* .ttt: Configurator overlay pulled up over image via negative margin.
   Pulls card up by hero height (560px) + thumbnail row height (~116px) - a small top gap (8px).
   z-index 3 so the configurator card renders ON TOP of the thumbnails where they overlap
   (the card's left edge can cross the thumb strip at narrower widths).
   .ttt itself is full width but transparent — pointer-events:none lets clicks fall through to
   the thumbnails underneath outside the card; the opaque card re-enables them. */
.container-header .ttt {
  position: relative;
  margin-top: -660px;
  z-index: 3;
  pointer-events: none;
}
.container-header .ttt .prod-options-container {
  pointer-events: auto;
}

/* Thumbnails sit below .ttt (card on top); only the thumb column captures clicks */
.container-thumbnails {
  position: relative;
  z-index: 2;
  padding: 8px 0;
  margin-bottom: 0.25rem;
  pointer-events: none;
}

/* Fine-grained responsive breakpoints.
   margin-top = -(height + 100px) to keep card top at ~16px regardless of viewport.
   When height steps down 16px, margin also steps down 16px. */
@media (max-width: 1320.98px) { .container-header .tta { height: 544px; } .container-header .ttt { margin-top: -644px; } }
@media (max-width: 1280.98px) { .container-header .tta { height: 528px; } .container-header .ttt { margin-top: -628px; } }
@media (max-width: 1240.98px) { .container-header .tta { height: 512px; } .container-header .ttt { margin-top: -612px; } }
@media (max-width: 1200.98px) { .container-header .tta { height: 496px; } .container-header .ttt { margin-top: -596px; } }
@media (max-width: 1160.98px) { .container-header .tta { height: 480px; } .container-header .ttt { margin-top: -580px; } }
@media (max-width: 1120.98px) { .container-header .tta { height: 448px; } .container-header .ttt { margin-top: -548px; } }
@media (max-width: 1080.98px) { .container-header .tta { height: 448px; } .container-header .ttt { margin-top: -548px; } }
@media (max-width: 1040.98px) { .container-header .tta { height: 432px; } .container-header .ttt { margin-top: -532px; } }
@media (max-width: 1000.98px) { .container-header .tta { height: 416px; } .container-header .ttt { margin-top: -516px; } }
@media (max-width:  960.98px) { .container-header .tta { height: 400px; } .container-header .ttt { margin-top: -500px; } }
@media (max-width:  920.98px) { .container-header .tta { height: 384px; } .container-header .ttt { margin-top: -484px; } }
@media (max-width:  880.98px) { .container-header .tta { height: 368px; } .container-header .ttt { margin-top: -468px; } }
@media (max-width:  840.98px) { .container-header .tta { height: 352px; } .container-header .ttt { margin-top: -452px; } }
@media (max-width:  800.98px) { .container-header .tta { height: 336px; } .container-header .ttt { margin-top: -436px; } }

@media (max-width: 767.98px) {
  .container-header { width: calc(100% - 32px); }
  .container-header .tta { height: 280px; }
  .container-header .tta img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .container-header .tta::after { display: none; }
  .container-header .ttt { position: unset; width: 100%; margin-top: 0; }
  .prod-options-container { box-shadow: none; border-radius: 0; }
  .prod-page-wrap {
  background: #ffffff;
}
.cart-layout {
  display: flex;
  gap: 24px;
  align-items: center;
}
.cart-page-wrap {
  background: #f4f5f7;
  padding: 90px 0 80px;
}

}

.thumb-col-5 { width: 41.67%; pointer-events: auto;}
@media (max-width: 575px) { .thumb-col-5 { width: 100%; } }
.row-thumbnails { display: flex; gap: 8px; height: 100px; align-items: center; }
.row-thumbnails-span {
  overflow: hidden;
  z-index: 1;
  cursor: pointer;
  border: 5px solid rgba(51,51,51,0.2);
  border-radius: 2px;
  transition: border-color 0.2s;
  height: 100%;
}
.row-thumbnails-span:hover { border-color: rgba(248,73,25,0.5); }
.row-thumbnails-span img {
  height: 100%;
  max-height: 90px;
  width: auto;
  display: block;
  opacity: 0.9;
  cursor: pointer;
}
.row-thumbnails-span img.active { opacity: 1; border: none; }
.container-header .row-thumbnails-span { overflow: hidden; z-index: 1; cursor: pointer; }
.container-header .row-thumbnails img { height: 100%; max-height: 90px; }

/* Configurator panel offset (replaces Bootstrap col-md-8 offset-md-4 / col-xl-6 offset-xl-6) */
.prod-panel-offset { margin-left: 50%; width: 50%; padding-top: 8px; position: relative; z-index: 2; }
@media (max-width: 1199px) { .prod-panel-offset { margin-left: 41.67%; width: 58.33%; } }
@media (max-width: 991px)  { .prod-panel-offset { margin-left: 33.33%; width: 66.67%; } }
@media (max-width: 767px)  { .prod-panel-offset { margin-left: 0; width: 100%; } }

/* Product options card */
.prod-options-container {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.prod-options-container h1 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Breadcrumb */
.prod-breadcrumb {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 12px;
  color: var(--text-medium);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.prod-breadcrumb a { color: var(--text-medium); text-decoration: none; }
.prod-breadcrumb a:hover { color: var(--primary); }
.prod-breadcrumb-sep { color: var(--gray-300); font-size: 10px; }

/* Status badge */
.prod-status-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

/* Description */
.prod-description {
  font-size: 13px;
  color: var(--text-medium);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Shape selector */
.prod-shape-label { font-size: 12px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
.prod-shape-row { display: flex; gap: 6px; margin-bottom: 16px; }
.prod-shape-btn {
  flex: 1;
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  padding: 8px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-medium);
  transition: all 0.2s;
  line-height: 1.2;
}
.prod-shape-btn svg { width: 22px; height: 22px; }
.prod-shape-btn:hover { border-color: var(--primary); color: var(--primary); }
.prod-shape-btn.active { border-color: var(--primary); color: var(--primary); background: #fff5f3; }

/* Size row header */
.size-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.size-row-label { font-size: 13px; font-weight: 600; color: var(--text-dark); }

/* Size unit toggle pill */
.size-unit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  border: 1.5px solid var(--gray-300);
  border-radius: 20px;
  background: #fff;
  color: var(--text-medium);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.size-unit-toggle:hover { border-color: var(--primary); color: var(--primary); background: rgba(238,90,42,0.06); }

/* Custom size dropdown */
.pbs-size-picker { position: relative; width: 100%; user-select: none; margin-bottom: 14px; z-index: 100;}
.pbs-size-trigger {
  width: 100%;
  padding: 9px 36px 9px 14px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  border: 1.5px solid var(--gray-300);
  border-radius: 10px;
  background: #fff;
  color: var(--text-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.pbs-size-trigger:hover,
.pbs-size-trigger.open { border-color: var(--primary); }
.pbs-size-trigger.open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 0 0 3px rgba(238,90,42,0.15);
}
.pbs-size-trigger-arrow { flex-shrink: 0; transition: transform 0.2s; margin-left: 8px; color: var(--text-medium); }
.pbs-size-trigger.open .pbs-size-trigger-arrow { transform: rotate(180deg); }

.pbs-size-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border: 1.5px solid var(--primary);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
  max-height: 300px;
  overflow-y: auto;
  box-sizing: border-box;
}
.pbs-size-panel.open { display: block; }
.pbs-size-opt {
  padding: 8px 14px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--text-dark);
  transition: background 0.1s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pbs-size-opt:hover { background: #ffffff; color: var(--primary); }
.pbs-size-opt.active { color: var(--primary); font-weight: 700; background: #ffffff; }
.pbs-size-opt.active .pbs-popular-badge { background: rgba(238,90,42,0.18); }

.pbs-popular-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(238,90,42,0.1);
  border-radius: 20px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  white-space: nowrap;
}

.pbs-size-viewall {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  border-top: 1px solid #f5ede9;
  text-align: center;
  letter-spacing: 0.3px;
  transition: background 0.1s;
}
.pbs-size-viewall:hover { background: #ffffff; }

/* Price from */
.prod-price-from { margin-bottom: 14px; }
.prod-price-from-label { font-size: 11px; color: var(--text-medium); font-weight: 500; margin-bottom: 2px; }
.prod-price-amount { font-size: 1.6rem; font-weight: 800; color: var(--text-dark); line-height: 1; }
.prod-price-shipping { font-size: 12px; color: var(--text-medium); margin-top: 2px; }

/* CTA button */
.prod-cta-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 8px;
  padding: 14px 24px;
  transition: opacity 0.2s;
  margin-bottom: 12px;
  cursor: pointer;
  border: none;
  font-family: 'Inter', sans-serif;
}
.prod-cta-btn:hover { opacity: 0.9; }

/* After-CTA helper note (afterbuttontext field) */
.prod-after-btn {
  text-align: center;
  margin: 2px 0 8px;
}
.prod-after-btn,
.prod-after-btn div,
.prod-after-btn p {
  font-size: 12px;
  color: var(--text-medium);
  line-height: 1.6;
}
.prod-after-btn div::before {
  content: '\f144';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 11px;
  color: var(--primary);
  margin-right: 5px;
}
.prod-after-btn a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(238,90,42,0.35);
  transition: border-color 0.2s;
}
.prod-after-btn a:hover { border-bottom-color: var(--primary); }

/* Payment icons */
.prod-payment-icons { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.prod-payment-icons img { height: 18px; }

/* Size badge on hero image */
#pbs-size-badge {
  display: none;
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Features section */
.prod-features { background: #fff; padding: 60px 0 40px; text-align: center; }
.prod-features-heading { max-width: 640px; margin: 0 auto 32px; }
.prod-features-heading h2 { font-size: 1.6rem; font-weight: 400; color: var(--text-dark); line-height: 1.3; margin-bottom: 4px; }
.prod-features-heading h2 span { font-weight: 700; color: var(--primary); }

/* Tabs nav */
.prod-tabs-nav {
  display: flex;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--gray-200);
}
.prod-tab-btn {
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
}
.prod-tab-btn:hover { color: var(--primary); }
.prod-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Tab panels */
.prod-tab-panel { display: none; }
.prod-tab-panel.active { display: block; }
.prod-tab-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 0 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 767px) { .prod-tab-grid { grid-template-columns: repeat(2, 1fr); padding: 0 16px 16px; } }
.prod-tab-item img { width: 100%; border-radius: 8px; transition: transform 0.4s; }
.prod-tab-item img:hover { transform: scale(1.03); }
.prod-tab-item h5 { font-weight: 700; color: var(--primary); font-size: 15px; margin: 14px 0 6px; }
.prod-tab-item p { font-size: 14px; color: var(--text-medium); line-height: 1.6; }

/* How it works */
.prod-how { background: #f4f5f7; padding: 60px 0; text-align: center; }
.prod-how h2 { font-size: 1.6rem; font-weight: 400; color: var(--text-dark); margin-bottom: 4px; }
.prod-how h2 span { font-weight: 700; color: var(--primary); }
.prod-how-lead { font-size: 16px; color: var(--text-medium); margin: 12px auto 40px; max-width: 580px; line-height: 1.6; }
.prod-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
@media (max-width: 767px) { .prod-how-grid { grid-template-columns: 1fr; } }
.prod-how-card { background: #fff; border-radius: 12px; padding: 40px 24px 32px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.prod-how-card img { height: 70px; width: auto; margin-bottom: 24px; }
.prod-how-card h5 { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--text-dark); }
.prod-how-card p { font-size: 14px; color: var(--text-medium); line-height: 1.6; }

/* Templates section */
.prod-templates { background: #fff; padding: 60px 0; text-align: center; }
.prod-templates h2 { font-size: 1.6rem; font-weight: 400; color: var(--text-dark); margin-bottom: 4px; }
.prod-templates h2 span { font-weight: 700; color: var(--primary); }
.prod-templates-lead { font-size: 15px; color: var(--text-medium); margin: 8px auto 32px; }
.prod-templates-scroll { display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; padding: 0 24px 16px; scrollbar-width: thin; }
.prod-template-cell { flex-shrink: 0; width: 180px; text-align: center; cursor: pointer; }
.prod-template-cell > div { position: relative; }
.prod-template-cell img { width: 100%; border-radius: 8px; border: 2px solid var(--gray-200); transition: border-color 0.2s, transform 0.2s; display: block; }
.prod-template-cell:hover img:first-child { border-color: var(--primary); }
.prod-template-hover-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; object-fit: cover; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.prod-template-cell:hover .prod-template-hover-img { opacity: 1; }
.prod-template-cell-name { font-size: 11px; font-weight: 600; color: var(--text-medium); margin-top: 6px; min-height: 2rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }

/* FAQ section */
.prod-faq { background: #f4f5f7; padding: 60px 0; text-align: center; }
.prod-faq h2 { font-size: 1.8rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.prod-faq h3 { font-size: 1.3rem; font-weight: 400; color: var(--text-dark); margin-bottom: 32px; }
.prod-faq .accordion { max-width: 720px; margin: 0 auto; text-align: left; }
.prod-faq .accordion-item { border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.prod-faq .accordion-button {
  width: 100%;
  background: #fff;
  border: none;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Inter', sans-serif;
  transition: color 0.2s;
}
.prod-faq .accordion-button::after {
  content: '';
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.prod-faq .accordion-button:not(.collapsed) { color: var(--primary); }
.prod-faq .accordion-button:not(.collapsed)::after { transform: rotate(180deg); filter: invert(19%) sepia(89%) saturate(4000%) hue-rotate(347deg) brightness(80%); }
.prod-faq .accordion-collapse { display: none; }
.prod-faq .accordion-collapse.show { display: block; }
.prod-faq .accordion-body { padding: 16px 20px 16px; font-size: 14px; color: var(--text-medium); line-height: 1.65; background: #fff; }

/* What Are You Waiting For */
.prod-waiting { background: #f4f4f4; overflow: hidden; }
.prod-ai { background: #f1e7e6; overflow: hidden; }
.prod-waiting-inner { display: flex; align-items: stretch; min-height: 480px; }
.prod-waiting-text {
  flex: 0 0 50%;
  padding: 60px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.prod-waiting-text .heading-light { font-size: 2rem; font-weight: 300; color: var(--text-dark); line-height: 1.2; }
.prod-waiting-text .heading-bold {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
  margin-bottom: 16px;
}
.prod-waiting-text p { font-size: 15px; color: var(--text-medium); line-height: 1.65; margin-bottom: 24px; }
.prod-waiting-img { flex: 0 0 50%; overflow: hidden; position: relative; }
.prod-waiting-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
@media (max-width: 767px) {
  .prod-waiting-inner { flex-direction: column; min-height: unset; }
  .prod-waiting-text { flex: none; padding: 40px 24px; }
  .prod-waiting-img { flex: none; width: 100%; height: 280px; }
  .prod-waiting-img img { position: absolute; }
  .prod-waiting-text .heading-light,
  .prod-waiting-text .heading-bold { font-size: 1.5rem; }
}

/* Trustpilot wrapper */
.trustpilot-wrapper { margin-top: 12px; font-size: 14px; color: var(--text-medium); }

/* ===========================
   CUTOFF / SHIPPING DATES SECTION
   =========================== */
.cutoff-section { background: #fff; padding: 56px 0; }
.cutoff-inner { display: flex; gap: 28px; }
.cutoff-card {
  flex: 1;
  background: var(--gray-50);
  border-radius: 16px;
  padding: 36px 32px;
  border-top: 4px solid var(--primary);
}
.cutoff-card h2 { font-size: 1.3rem; font-weight: 300; color: var(--text-dark); margin-bottom: 12px; line-height: 1.3; }
.cutoff-card h2 strong { color: var(--primary); font-weight: 700; }
.cutoff-intro { font-size: 13px; color: var(--text-medium); margin-bottom: 20px; }
.cutoff-region { margin-top: 18px; }
.cutoff-region strong { display: block; font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.cutoff-region p { font-size: 13px; color: var(--text-medium); margin: 0 0 3px; }
.cutoff-note { font-size: 12px; font-style: italic; color: var(--text-light); margin-top: 24px; border-top: 1px solid var(--gray-100); padding-top: 16px; line-height: 1.6; }
@media (max-width: 767px) {
  .cutoff-inner { flex-direction: column; }
  .cutoff-card { padding: 28px 20px; }
}

/* ==============================================
   PRODUCTS PAGE — missing aliases & additions
   ============================================== */

/* Utility shims */
.p-0 { padding: 0; }
.pb-4 { padding-bottom: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.container-fluid { width: 100%; padding-left: 0; padding-right: 0; }
.mt-3 { margin-top: 1rem; }
.text-center { text-align: center; }

/* Accent colour alias */
.pbs-accent { color: var(--primary); font-weight: 700; }

/* Hero size badge */
.prod-size-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Thumbnails — new class names */
.prod-thumb-wrap {
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 6px;
  border: 2px solid transparent;
  margin-right: 6px;
  transition: border-color 0.2s;
}
.prod-thumb-wrap:hover { border-color: var(--primary); }
.prod-thumb {
  height: 70px;
  width: auto;
  max-width: 110px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.prod-thumb.active { opacity: 1; }
.prod-thumb:hover { opacity: 1; }

/* Product title */
.prod-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Status line */
.prod-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

/* Description text */
.prod-desc {
  font-size: 13px;
  color: var(--text-medium);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Option group wrapper */
.prod-option-group { margin-bottom: 14px; }

/* Generic option label */
.prod-option-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}

/* Variation options row — flex wrap, used for all product variations */
.prod-var-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

/* Variation option button — replaces Bootstrap product-option-div grid */
.prod-var-btn {
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: var(--text-medium);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  line-height: 1.3;
  white-space: nowrap;
}
.prod-var-btn:hover { border-color: var(--primary); color: var(--primary); }
.product-option.active .prod-var-btn { border-color: var(--primary); color: var(--primary); background: #fff5f3; }

/* Price card */
.pricefrom-card {
  background: linear-gradient(135deg, #fff9f6 0%, #fff 100%);
  border: 1.5px solid rgba(238,90,42,0.15);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.pricefrom-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-medium);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}
.pricefrom-amount { display: flex; align-items: baseline; gap: 6px; }
.price-main-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  font-family: 'Inter', sans-serif;
}
.price-delivery-note {
  font-size: 12px;
  color: var(--text-medium);
  font-weight: 500;
  margin-top: 2px;
}

/* Payment icons row */
.prod-payment-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 6px 0 2px;
}
.prod-payment-row img { height: 22px; width: auto; }

/* ProductReview badge */
.prod-review-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  padding: 6px 0 8px;
  margin-top: 2px;
}
.prod-review-badge:hover { color: inherit; }
.prod-review-stars {
  color: #f5a623;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
}
.prod-review-text {
  font-size: 11.5px;
  color: var(--text-medium);
  line-height: 1.35;
}
.prod-review-text strong {
  color: var(--text-dark);
  font-weight: 700;
}
.prod-review-logo {
  color: #183029;
  font-weight: 600;
}

/* Features intro */
.prod-features-intro { text-align: center; margin-bottom: 32px; }
h2.prod-features-heading {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 4px;
}

/* Tab content panels */
.prod-tab-content { display: none; }
.prod-tab-content.active { display: block; }

/* Feature grid (4-col) */
.prod-feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 16px 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 767px) { .prod-feat-grid { grid-template-columns: repeat(2, 1fr); } }

.prod-feat-item img { width: 100%; border-radius: 8px; }
h5.prod-feat-title { font-weight: 700; color: var(--primary); font-size: 15px; margin: 14px 0 6px; }
.prod-feat-item p { font-size: 14px; color: var(--text-medium); line-height: 1.6; }

/* How-it-works headings */
h2.prod-how-heading {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 4px;
}
h2.prod-how-heading.pbs-accent { font-weight: 700; }

/* How-it-works icon */
.prod-how-icon { padding: 32px 0 8px; justify-content: center; display: flex;}

/* How CTA block */
.prod-how-cta { text-align: center; padding-top: 16px; }

/* Trustpilot row */
.prod-trustpilot { margin-top: 12px; font-size: 14px; color: var(--text-medium); justify-content: center; display: flex;}
.prod-stars { color: var(--primary); letter-spacing: 2px; }

/* Trust / guarantee badge row (replaces .faq.py-5.bg-light) */
.prod-trust { background: #f4f5f7; padding: 40px 0; }

/* Design-your-way section (replaces .py-5.mb-1.text-center.bg-white/light) */
.prod-design { background: #fff; padding: 48px 0; text-align: center; }
.prod-design .h2.fw-normal, .prod-design h2.fw-normal { font-size: 1.6rem; font-weight: 400; color: var(--text-dark); margin-bottom: 16px; }
.prod-design .h5.fw-bold, .prod-design h5.fw-bold { font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.prod-design p { font-size: 14px; color: var(--text-medium); line-height: 1.65; }
.prod-design-img { display: block; width: 100%; max-width: 700px; margin: 0 auto 24px; }
.prod-design-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; padding: 24px 0; }
.prod-design-app-btns { display: flex; gap: 12px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
@media (max-width: 767px) { .prod-design-cols { grid-template-columns: 1fr; gap: 24px; } }

/* Category page — header, breadcrumb, product card grid */
.prod-category-header { background: #f4f5f7; padding: 40px 0 32px; text-align: center; }
.prod-category-header h1 { font-size: 2rem; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.prod-category-breadcrumb { list-style: none; padding: 0; margin: 0 0 28px; display: flex; gap: 6px 4px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--text-medium); }
.prod-category-breadcrumb li::before { content: "›"; margin-right: 4px; }
.prod-category-breadcrumb li:first-child::before { display: none; }
.prod-category-breadcrumb a { color: inherit; text-decoration: none; }
.prod-category-breadcrumb a:hover { color: var(--primary); }
.prod-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: left; }
@media (max-width: 991px) { .prod-category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .prod-category-grid { grid-template-columns: 1fr; } }
.prod-category-card { background: #fff; border-radius: 8px; padding: 20px 16px; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: box-shadow 0.15s; }
.prod-category-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.1); color: inherit; }
.prod-category-card-img { height: 185px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.prod-category-card-img img { width: auto; max-width: 100%; max-height: 185px; object-fit: contain; }
.prod-category-card-name { font-weight: 700; font-size: 15px; color: var(--text-dark); margin: 12px 0 4px; }
.prod-category-card-desc { font-size: 13px; color: var(--text-medium); margin-bottom: 12px; flex: 1; }
.prod-category-card-btn { width: 100%; margin-top: auto; }

/* Templates section headings */
h2.prod-templates-heading {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
  text-align: center;
}
.prod-templates-sub { font-size: 15px; color: var(--text-medium); text-align: center; margin-bottom: 28px; }

/* Template item */
.prod-template-item { flex-shrink: 0; width: 200px; text-align: center; position: relative; }
.prod-template-item img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: transform 0.2s;
}
.prod-template-item img:hover { transform: scale(1.02); }
.prod-template-cell-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  margin-top: 8px;
  min-height: 2.5rem;
  line-height: 1.3;
}
.prod-template-item a {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 6px;
  padding: 6px 14px;
  margin-top: 8px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.prod-template-item a:hover { opacity: 0.85; }

/* FAQ inner wrapper */
.prod-faq-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.prod-faq-inner h2 { font-size: 1.8rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.prod-faq-inner h3 { font-size: 1.3rem; font-weight: 400; color: var(--text-dark); margin-bottom: 32px; }
.prod-faq-inner .accordion { text-align: left; }

/* Waiting section headline */
.prod-waiting-headline {
  font-size: 2rem;
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.2;
}
.prod-waiting-headline.pbs-accent { font-weight: 800; color: var(--primary); }

/* Waiting CTA block */
.prod-waiting-cta { margin-top: 24px; text-align: center; }

/* ===========================
   THEMES / TEMPLATE GALLERY PAGE
=========================== */
.themes-page-wrap { background: #fff; padding-top: 90px; }
.themes-page-hero {
  background: #fff;
  padding: 40px 0 18px;
  text-align: center;
  border-bottom: 1px solid var(--gray-100);
}
.themes-page-title {
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  font-family: "Inter", sans-serif;
}
.themes-page-subtitle {
  font-size: 15px;
  color: var(--text-medium);
  max-width: 480px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
}
.themes-filter-section {
  padding: 22px 0 14px;
  background: linear-gradient(180deg, var(--gray-50) 0%, #fff 100%);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 70px;
  z-index: 100;
}
.themes-filter-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  background: var(--gray-100);
  padding: 6px;
  border-radius: 50px;
  position: relative;
}
.themes-filter-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dark);
  margin-right: 10px;
  padding-left: 12px;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}
.themes-filter-tab {
  padding: 9px 18px;
  border-radius: 50px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-medium);
  cursor: pointer;
  position: relative;
  z-index: 2;
  font-family: "Inter", sans-serif;
  transition: color 0.2s;
}
.themes-filter-tab:hover { color: var(--text-dark); }
.themes-filter-tab.active { color: #fff; font-weight: 700; }
.themes-filter-slider {
  position: absolute;
  height: calc(100% - 12px);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 50px;
  z-index: 1;
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 15px rgba(238,90,42,0.35);
  top: 6px;
}
.themes-results-count {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-medium);
  margin-left: auto;
  padding-right: 12px;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
}
.themes-dropdown-mobile { display: none; }
.themes-results-mobile { font-size: 13px; font-weight: 500; color: var(--text-medium); }
.themes-options-section {
  padding: 14px 0;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
}
.themes-options-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.themes-option-group { display: flex; align-items: center; gap: 10px; }
.themes-option-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
}
.themes-option-label i { color: var(--primary); font-size: 13px; }
.themes-option-select {
  padding: 9px 32px 9px 13px;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  font-family: "Inter", sans-serif;
  transition: border-color 0.2s;
}
.themes-option-select:hover { border-color: var(--primary); }
.themes-option-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(238,90,42,0.1); }
.themes-option-divider { width: 1px; height: 32px; background: var(--gray-300); }
.themes-orient-picker {
  display: flex;
  gap: 5px;
  background: var(--gray-100);
  padding: 4px;
  border-radius: 10px;
}
.themes-orient-btn {
  padding: 7px 13px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-medium);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.themes-orient-btn:hover { color: var(--text-dark); background: rgba(255,255,255,0.6); }
.themes-orient-btn.active { background: #fff; color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-weight: 700; }
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  padding: 24px 0 64px;
}
.themes-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1.5px solid var(--gray-200);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.themes-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.11);
  border-color: var(--primary);
}
.themes-card-img {
  background: var(--gray-50);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
}
.themes-card-img img { max-width: 84%; max-height: 84%; object-fit: contain; transition: transform 0.38s ease; }
.themes-card:hover .themes-card-img img { transform: scale(1.05); }
.themes-card-body { padding: 12px 14px 15px; text-align: center; display: flex; flex-direction: column; flex: 1; }
.themes-card-name { font-weight: 700; font-size: 14px; margin-bottom: 3px; color: var(--text-dark); font-family: "Inter", sans-serif; }
.themes-card-desc { font-size: 12px; color: var(--text-medium); margin-bottom: 9px; font-family: "Inter", sans-serif; }
.themes-price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 6px;
  margin-top: auto;
  margin-bottom: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 9px;
  background: var(--gray-50);
  flex-wrap: wrap;
}
.themes-price { font-size: 20px; font-weight: 800; color: var(--text-dark); line-height: 1; }
.themes-was-price { font-size: 12.5px; color: var(--text-light); text-decoration: line-through; }
.themes-cta-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: background 0.18s;
  text-align: center;
}
.themes-cta-btn:hover { background: var(--primary-dark); }
.themes-bottom-cta {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d1b4e 100%);
  color: #fff;
  text-align: center;
  padding: 60px 20px;
}
.themes-bottom-cta h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  margin-bottom: 10px;
  font-family: "Inter", sans-serif;
}
.themes-bottom-cta p {
  color: rgba(255,255,255,0.7);
  margin-bottom: 26px;
  font-size: 15px;
  font-family: "Inter", sans-serif;
}
.themes-bottom-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 14px 38px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  box-shadow: 0 4px 20px rgba(238,90,42,0.4);
  transition: transform 0.18s;
  text-decoration: none;
}
.themes-bottom-btn:hover { transform: scale(1.04); color: #fff; }
@media (max-width: 900px) {
  .themes-filter-section { top: 70px; }
}
@media (max-width: 768px) {
  .themes-page-hero { padding: 24px 0 12px; }
  .themes-filter-section { padding: 14px 0 10px; }
  .themes-filter-bar { gap: 2px; padding: 4px; }
  .themes-filter-tab { padding: 7px 12px; font-size: 13px; }
  .themes-filter-slider { height: calc(100% - 8px); top: 4px; }
  .themes-filter-label { font-size: 13px; margin-right: 6px; padding-left: 8px; }
  .themes-results-count { margin-left: 0; width: 100%; text-align: center; padding: 5px 0 2px; font-size: 12px; }
  .themes-options-bar { gap: 12px; flex-direction: column; }
  .themes-option-group { gap: 8px; width: 100%; justify-content: center; }
  .themes-option-select { flex: 1; max-width: 200px; font-size: 13px; }
  .themes-option-divider { width: 100%; height: 1px; }
  .themes-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
  .themes-grid { gap: 10px; }
  .themes-filter-tab, .themes-filter-slider, .themes-results-count { display: none; }
  .themes-dropdown-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
    padding: 4px 0;
  }
  .themes-filter-bar { background: transparent; padding: 0; }
  .themes-filter-section { padding: 10px 0 6px; }
  .themes-options-section { padding: 8px 0; }
  .themes-options-bar { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .themes-option-group { flex: 1; min-width: 0; }
  .themes-option-label { font-size: 11px; }
  .themes-option-label i { font-size: 10px; }
  .themes-option-select { font-size: 12px; padding: 6px 24px 6px 9px; max-width: none; width: 100%; }
  .themes-option-divider { display: none; }
  .themes-orient-btn { padding: 5px 8px; font-size: 12px; }
  .themes-price { font-size: 17px; }
}

/* ==============================================
   #start-creating-modal — theme26 styling
   ============================================== */

#start-creating-modal .modal-content {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 28px 72px rgba(0,0,0,0.2);
}

#start-creating-modal .modal-body { padding: 0; }

/* ── Header ──────────────────────────────────── */
.scm-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  border-bottom: none !important;
  padding: 20px 24px 18px !important;
  align-items: flex-start;
}

.scm-header .btn-close {
  filter: invert(1) brightness(10);
  opacity: 0.85;
  flex-shrink: 0;
  margin-top: 2px;
}
.scm-header .btn-close:hover { opacity: 1; background-color: transparent; }
.scm-header .btn-close:focus,
.scm-header .btn-close:active {
  box-shadow: none;
  outline: none;
  background-color: transparent;
}

.scm-header .modal-h1 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.scm-category {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: "Inter", sans-serif;
}

#start-creating-modal .modal-data-template-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ── Body ────────────────────────────────────── */
.scm-body {
  padding: 20px 24px 16px;
  background: #fff;
}

/* Size options row — pages/price live in the footer now */
.scm-options {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: stretch;
  padding-bottom: 12px;
}

/* Each group: label + select side by side */
.scm-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  padding: 9px 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s, box-shadow 0.18s;
  cursor: pointer;
}
/* Size group gets more flex weight; pagecount group has a fixed floor */
.scm-group:not(.scm-group--pagecount) { flex: 2; }
.scm-group--pagecount { flex: 1; min-width: 110px; }

.scm-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(238,90,42,0.1);
}

.scm-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
  pointer-events: none;
}

/* Selects: borderless, transparent inside the card */
.scm-group .modal-option {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23adb5bd' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding: 2px 26px 2px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
  font-family: "Inter", sans-serif;
  cursor: pointer;
  outline: none;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.scm-group .modal-option option {
  padding: 6px 8px;
  padding-inline-start: 10px;
  font-family: "Inter", sans-serif;
}

/* Custom select inside modal scm-group — inherit card styling, no double border */
.scm-group .pbs-select { flex: 1; min-width: 0; display: flex; align-items: center; }
.scm-group .pbs-select-trigger {
  border: none; box-shadow: none; background: transparent;
  padding: 0; min-width: 0; width: 100%; line-height: 1;
}
.scm-label { line-height: 1; display: flex; align-items: center; }
.scm-group .pbs-select-trigger:hover,
.scm-group .pbs-select.open .pbs-select-trigger { border: none; box-shadow: none; }
.scm-group .pbs-select-dropdown { left: -13px; min-width: calc(100% + 26px); }

/* Price: clean inline, no card */
.scm-price {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 9px 4px 9px 6px;
}

.scm-price-label {
  font-size: 11px;
  color: var(--gray-500);
  font-weight: 600;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-shrink: 0;
}

.scm-price-label::after { content: ':'; color: var(--gray-300); }

.scm-rrp {
  font-size: 12px;
  color: var(--gray-500);
  text-decoration: line-through;
  font-weight: 400;
}

.scm-topay {
  font-size: 18px;
  font-weight: 800;
  color: var(--gray-900);
  font-family: "Inter", sans-serif;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.scm-save {
  font-size: 11px;
  font-weight: 700;
  color: #2e7d32;
  background: #e8f5e9;
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}

#start-creating-modal .modal-hasflipbook { min-height: 0; }

/* ── Footer / CTA ────────────────────────────── */
.scm-footer {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  padding: 14px 16px 18px;
}

/* Two detached pieces: an info group (pages + price) and a standalone CTA button */
.scm-cta-bar {
  display: flex;
  align-items: stretch;
  gap: 12px;
  height: 52px;
}

/* Left piece — white pill grouping the Pages select + the price */
.scm-cta-info {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 50px;
  overflow: hidden;
}

/* Pages select */
.scm-cta-pages {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px 0 20px;
  background: #fff;
  border-right: 1px solid var(--gray-200);
}
.scm-cta-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}
.scm-cta-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ee5a2a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding: 0 30px 0 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  font-family: "Inter", sans-serif;
  cursor: pointer;
  outline: none;
  min-width: 40px;
}

/* Price — sits after the Pages select, inside the white info pill */
.scm-cta-price {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  background: #fff;
  gap: 1px;
  cursor: pointer;
  text-decoration: none;
}
.scm-cta-price .scm-rrp {
  font-size: 10px;
  color: var(--gray-500);
  text-decoration: line-through;
  line-height: 1;
}
.scm-cta-price .scm-topay {
  font-size: 18px;
  font-weight: 800;
  color: var(--gray-900);
  font-family: "Inter", sans-serif;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

/* Standalone CTA button — its own gradient pill */
.scm-cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  box-shadow: 0 6px 22px rgba(238,90,42,0.32);
  color: #fff !important;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
  transition: filter 0.18s, transform 0.18s;
}
.scm-cta-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #fff !important;
  text-decoration: none;
}
.scm-cta-price .scm-save { display: none; }

/* PBS+ saving row above price (theme list modal) */
.scm-plus-saving { display: block; font-size: 0.72rem; font-weight: 600; color: var(--primary); letter-spacing: .01em; margin-bottom: 2px; }

/* Preview area — price overlay badge (shown on mobile only) */
.scm-preview-wrap { position: relative; }
.scm-preview-price-badge {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  pointer-events: none;
  z-index: 5;
}

/* Mobile: stack each group as its own row */
@media (max-width: 575px) {
  .scm-header { padding: 16px 18px 14px !important; }
  .scm-category { font-size: 10px; }
  #start-creating-modal .modal-data-template-name { font-size: 1.05rem; }
  .scm-body { padding: 14px 16px 12px; }
  .scm-options { flex-direction: column; gap: 6px; }
  .scm-price { padding: 4px 2px; }
  .scm-topay { font-size: 16px; }
  .scm-footer { padding: 12px 16px 18px; }
  .scm-footer .startcreating { font-size: 14px; padding: 13px 24px; }
  .scm-cta-price { display: none; }
  .scm-preview-price-badge { display: block; }
}

/* ==============================================
   DASHBOARD PAGE — db- prefix for all classes
   Used by dashboard26.html & dashboard26-plus.html
   ============================================== */

.db-wrap {
  background: var(--gray-50);
  min-height: 100vh;
  padding: 100px 0 80px;
}
.db-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  align-items: start;
}

/* --- Sidebar --- */
.db-sidebar { position: sticky; top: calc(var(--header-h, 120px) + 16px); }
.db-sidebar-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
.db-greeting {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.db-greeting > div:last-child { min-width: 0; overflow: hidden; }
.db-greeting-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.db-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffcbb0 0%, var(--primary) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  flex-shrink: 0;
}
.db-greeting-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  display: block;
  font-family: "Inter", sans-serif;
}
.db-greeting-since {
  font-size: 12px;
  color: var(--text-light);
  font-family: "Inter", sans-serif;
}
.db-nav-section {
  padding: 14px 0;
  border-top: 1px solid var(--gray-200);
}
.db-nav-section:first-of-type { border-top: none; padding-top: 0; }
.db-nav-heading {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  font-family: "Inter", sans-serif;
}
.db-nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  color: var(--text-medium);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin: 0 -8px;
  font-family: "Inter", sans-serif;
  text-decoration: none;
}
.db-nav-item:hover { background: var(--gray-50); color: var(--text-dark); }
.db-nav-item.active {
  background: #fff4ee;
  color: var(--primary);
  font-weight: 800;
}
.db-nav-item .db-nav-ico { font-size: 14px; opacity: 0.7; width: 16px; text-align: center; }
.db-nav-item.active .db-nav-ico { opacity: 1; }
.db-nav-pill {
  margin-left: auto;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 800;
  font-family: "Inter", sans-serif;
}
.db-nav-stat {
  font-size: 12.5px; color: var(--text-medium);
  cursor: default; pointer-events: none;
}
.db-nav-stat:hover { background: none; }
.db-nav-stat strong { color: var(--primary); font-weight: 700; }
.db-nav-item.db-nav-signout { color: #e74c3c; }
.db-nav-item.db-nav-signout:hover { background: #fff0f0; color: #c0392b; }
.db-signout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-light);
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
  margin: 4px 0 0 -4px;
}
.db-signout:hover { color: #c0392b; }

/* Upgrade to Plus promo card — sits inside the nav section */
.db-nav-plus-promo {
  background: linear-gradient(135deg, #2a2a52 0%, #43437c 50%, #35356a 100%);
  border-radius: 12px;
  padding: 16px 14px;
  margin: 4px -6px 2px;
  position: relative;
  overflow: hidden;
}
.db-nav-plus-promo::before {
  content: "";
  position: absolute;
  top: -30px; right: -30px;
  width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.db-nav-plus-promo-header,
.db-nav-plus-promo-perks,
.db-nav-plus-promo-btn { position: relative; z-index: 1; }
.db-nav-plus-promo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.db-nav-plus-promo-icon {
  width: 28px; height: 28px;
  background: var(--bg-light);
  border: 1px solid rgba(238,90,42,0.35);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #ee5a2a;
  font-size: 13px;
  flex-shrink: 0;
}
.db-nav-plus-promo-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  font-family: "Inter", sans-serif;
  line-height: 1.2;
}
.db-nav-plus-promo-sub {
  font-size: 10.5px;
  color: rgba(255,255,255,0.6);
  font-family: "Inter", sans-serif;
}
.db-nav-plus-promo-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 13px;
}
.db-nav-plus-promo-perks li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--bg-light);
  font-family: "Inter", sans-serif;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.db-nav-plus-promo-perks li:last-child { border-bottom: none; }
.db-nav-plus-promo-perks li i { color: var(--bg-light); font-size: 9px; flex-shrink: 0; }
.db-nav-plus-promo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #fff;
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 9px;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  animation: promo-btn-glow 2.8s ease-in-out infinite;
  letter-spacing: .01em;
}
.db-nav-plus-promo-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(238,90,42,0.18) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: promo-btn-shine 3s ease-in-out infinite;
  pointer-events: none;
}
.db-nav-plus-promo-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.55) 100%);
  pointer-events: none;
}
.db-nav-plus-promo-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22), 0 0 0 3px rgba(255,255,255,0.35);
  animation: none;
}
.db-nav-plus-promo-btn:hover::before { animation: promo-btn-shine .7s ease-in-out; }
.db-nav-plus-promo-btn .fa-crown { animation: promo-crown-wiggle 4s ease-in-out infinite; }
@keyframes promo-btn-shine {
  0%, 18%   { left: -80%; opacity: 0; }
  22%        { opacity: 1; }
  58%        { left: 130%; opacity: 1; }
  65%, 100%  { left: 130%; opacity: 0; }
}
@keyframes promo-btn-glow {
  0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.18), 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 2px 18px rgba(0,0,0,0.22), 0 0 0 4px rgba(255,255,255,0.22); }
}
@keyframes promo-crown-wiggle {
  0%, 75%, 100% { transform: rotate(0deg) scale(1); }
  78%  { transform: rotate(-18deg) scale(1.25); }
  82%  { transform: rotate(12deg) scale(1.15); }
  86%  { transform: rotate(-7deg) scale(1.08); }
  90%  { transform: rotate(3deg) scale(1.03); }
  94%  { transform: rotate(0deg) scale(1); }
}

/* ── Plus member status card (sidebar, Plus users only) ── */
.db-nav-plus-member {
  background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
  border-radius: 12px; padding: 14px; margin-bottom: 6px;
  position: relative; overflow: hidden;
}
.db-nav-plus-member::before {
  content: ''; position: absolute;
  top: -22px; right: -22px; width: 80px; height: 80px;
  background: rgba(240,165,0,.12); border-radius: 50%;
  pointer-events: none;
}
.db-nav-plus-member-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.db-nav-plus-member-crown {
  width: 30px; height: 30px; background: rgba(240,165,0,.18);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #f0a500; flex-shrink: 0;
}
.db-nav-plus-member-title { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.2; }
.db-nav-plus-member-status {
  font-size: 10px; color: #4ade80; display: flex; align-items: center; gap: 4px;
}
.db-nav-active-dot {
  width: 6px; height: 6px; background: #4ade80; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.db-nav-plus-member-badge {
  margin-left: auto; background: rgba(240,165,0,.2); color: #f0a500;
  font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  border: 1px solid rgba(240,165,0,.3); white-space: nowrap; flex-shrink: 0;
}
.db-nav-plus-member-renew { font-size: 10.5px; color: rgba(255,255,255,.5); margin-bottom: 3px; }
.db-nav-plus-member-save { font-size: 11px; color: rgba(255,255,255,.7); margin-bottom: 11px; }
.db-nav-plus-member-save strong { color: #f0a500; font-weight: 700; }
.db-nav-plus-manage-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 8px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: "Inter", sans-serif; transition: background .15s;
  text-decoration: none;
}
.db-nav-plus-manage-btn:hover { background: rgba(255,255,255,.2); color: #fff; }

/* Upgrade to Plus CTA (regular users only) */
.db-upgrade-cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-top: 4px;
}
.db-upgrade-cta-icon {
  font-size: 24px;
  color: #ffd700;
  margin-bottom: 8px;
}
.db-upgrade-cta-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  display: block;
  margin-bottom: 4px;
  font-family: "Inter", sans-serif;
}
.db-upgrade-cta-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 12px;
  font-family: "Inter", sans-serif;
  line-height: 1.5;
}
.db-upgrade-btn {
  display: block;
  background: #fff;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  transition: opacity 0.15s;
}
.db-upgrade-btn:hover { opacity: 0.9; }

/* --- Main column --- */
.db-main { min-width: 0; }
.db-main-heading {
  font-size: 26px;
  font-weight: 900;
  color: var(--text-dark);
  font-family: "Inter", sans-serif;
  margin-bottom: 4px;
}
.db-main-sub {
  font-size: 15px;
  color: var(--text-medium);
  margin-bottom: 24px;
  font-family: "Inter", sans-serif;
}
.db-main-sub strong { color: var(--text-dark); }

/* --- Stats row --- */
.db-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.db-stat-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: default;
  transition: transform 0.15s, box-shadow 0.15s;
}
.db-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.db-stat-card.feature {
  background: linear-gradient(135deg, #1d1d1d 0%, #3a3a3a 100%);
}
.db-stat-card.feature::before {
  content: "";
  position: absolute;
  top: -50px; right: -50px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(238,90,42,0.25), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.db-stat-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
}
.db-stat-card.feature .db-stat-label { color: rgba(255,255,255,0.65); }
.db-stat-value {
  font-size: 28px;
  font-weight: 900;
  color: var(--text-dark);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  font-family: "Inter", sans-serif;
}
.db-stat-card.feature .db-stat-value { color: #fff; }
.db-stat-meta {
  font-size: 12px;
  color: var(--text-light);
  font-family: "Inter", sans-serif;
}
.db-stat-card.feature .db-stat-meta { color: rgba(255,255,255,0.65); }
.db-stat-meta a { color: var(--primary); font-weight: 700; }

/* --- Cards grid 2x2 --- */
.db-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.db-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.db-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.db-card-head h2 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-dark);
  font-family: "Inter", sans-serif;
}
.db-card-head a {
  font-size: 12px;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  font-family: "Inter", sans-serif;
}

/* List rows (orders / projects) */
.db-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-200);
}
.db-list-row:last-child { border-bottom: none; }
.db-list-thumb {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--gray-100);
  flex-shrink: 0;
  overflow: hidden;
}
.db-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.db-list-info { flex: 1; min-width: 0; }
.db-list-info strong {
  display: block;
  color: var(--text-dark);
  font-weight: 700;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
}
.db-list-info small {
  font-size: 12px;
  color: var(--text-light);
  font-family: "Inter", sans-serif;
}
.db-list-action {
  background: transparent;
  border: 1.5px solid var(--gray-300);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: all 0.15s;
  flex-shrink: 0;
}
.db-list-action:hover { background: var(--text-dark); color: #fff; border-color: var(--text-dark); }

/* Status pills */
.db-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: "Inter", sans-serif;
  flex-shrink: 0;
  white-space: nowrap;
}
.db-status .dot { width: 5px; height: 5px; border-radius: 50%; }
.db-status.production { background: rgba(238,90,42,0.1); color: var(--primary-dark); }
.db-status.production .dot { background: var(--primary); }
.db-status.cancelled { background: var(--gray-100); color: var(--text-light); }
.db-status.cancelled .dot { background: var(--text-light); }
.db-status.delivered { background: rgba(46,125,91,0.1); color: #2e7d5b; }
.db-status.delivered .dot { background: #2e7d5b; }

/* Voucher rows */
.db-voucher-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-200);
  align-items: center;
}
.db-voucher-row:last-child { border-bottom: none; }
.db-voucher-chip {
  background: #fff4ee;
  color: var(--primary);
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-family: "Inter", monospace;
  flex-shrink: 0;
}
.db-voucher-info strong {
  display: block;
  color: var(--text-dark);
  font-weight: 700;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  margin-bottom: 2px;
}
.db-voucher-info .db-expiry {
  font-size: 11.5px;
  color: var(--text-light);
  font-family: "Inter", sans-serif;
}
.db-voucher-info .db-expiry.soon { color: #c68e2d; font-weight: 700; }
.db-voucher-action {
  background: transparent;
  border: none;
  color: var(--primary);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: "Inter", sans-serif;
  flex-shrink: 0;
  padding: 0;
}

/* Contact card */
.db-contact-card { display: flex; flex-direction: column; gap: 12px; }
.db-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: 10px;
}
.db-contact-icon {
  width: 40px;
  height: 40px;
  background: #fff;
  color: var(--primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.db-contact-row strong {
  color: var(--text-dark);
  font-weight: 700;
  font-size: 13px;
  display: block;
  font-family: "Inter", sans-serif;
}
.db-contact-row small {
  font-size: 12px;
  color: var(--text-light);
  font-family: "Inter", sans-serif;
}

/* --- Subscribe & Save upsell (regular users) --- */
.db-upsell-section { margin-top: 22px; }
.db-upsell-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 45%, #1a1a2e 100%);
  border-radius: 18px;
  padding: 36px 40px;
  position: relative;
  overflow: hidden;
}
.db-upsell-card::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(238,90,42,0.15), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.db-upsell-card::after {
  content: "";
  position: absolute;
  bottom: -60px; left: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(238,90,42,0.12), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.db-upsell-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.db-upsell-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(238,90,42,0.2);
  border: 1px solid rgba(238,90,42,0.4);
  color: #ee5a2a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  font-family: "Inter", sans-serif;
}
.db-upsell-heading {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 14px;
  font-family: "Inter", sans-serif;
}
.db-upsell-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.db-upsell-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.85);
  font-family: "Inter", sans-serif;
}
.db-upsell-features li i { color: #ee5a2a; font-size: 13px; flex-shrink: 0; }
.db-upsell-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.db-upsell-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--primary) 0%, #d44e20 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  transition: opacity 0.2s, transform 0.2s;
}
.db-upsell-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.db-upsell-learn {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  transition: color 0.15s;
}
.db-upsell-learn:hover { color: rgba(255,255,255,0.9); }
.db-upsell-badge-side {
  text-align: center;
  padding: 28px 32px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  min-width: 180px;
  flex-shrink: 0;
}
.db-upsell-badge-icon {
  font-size: 36px;
  color: #ee5a2a;
  margin-bottom: 10px;
}
.db-upsell-badge-pct {
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  font-family: "Inter", sans-serif;
}
.db-upsell-badge-pct span { font-size: 16px; font-weight: 700; }
.db-upsell-badge-label {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  font-family: "Inter", sans-serif;
  margin-top: 4px;
}

/* --- Animated promo slides (upsell card background) --- */
.db-promo-slide {
  position: absolute;
  top: 0; bottom: 0; left: -50%; right: -50%;
  background-image: linear-gradient(-60deg, #35356a 50%, #2a2a52 50%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  animation: dbPromoSlide 3s ease-in-out infinite alternate;
}
.db-promo-slide.alt {
  background-image: linear-gradient(-60deg, #3e3e78 50%, #43437c 50%);
  animation-direction: alternate-reverse;
  animation-duration: 4s;
}
.db-promo-slide.alt2 {
  background-image: linear-gradient(-60deg, #4a4a88 50%, #30305e 50%);
  animation-duration: 5s;
}
@keyframes dbPromoSlide {
  0%   { transform: translateX(-25%); }
  100% { transform: translateX(25%); }
}

/* --- Plus subscription management card --- */
.db-sub-section { margin-top: 22px; }
.db-sub-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.db-sub-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.db-sub-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-dark);
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-sub-title i { color: #ee5a2a; }
.db-sub-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(46,125,91,0.1);
  color: #2e7d5b;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: "Inter", sans-serif;
}
.db-sub-active-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #2e7d5b; }
.db-sub-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 18px;
}
.db-sub-detail-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: "Inter", sans-serif;
  margin-bottom: 4px;
}
.db-sub-detail-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dark);
  font-family: "Inter", sans-serif;
}
.db-sub-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.db-sub-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: all 0.15s;
  text-decoration: none;
}
.db-sub-action-btn.primary {
  background: #ee5a2a;
  color: #fff;
  border: none;
}
.db-sub-action-btn.primary:hover { background: #d44e20; }
.db-sub-action-btn.outline {
  background: transparent;
  color: var(--text-medium);
  border: 1.5px solid var(--gray-300);
}
.db-sub-action-btn.outline:hover { border-color: var(--text-dark); color: var(--text-dark); }
.db-sub-action-btn.danger {
  background: transparent;
  color: #c0392b;
  border: 1.5px solid rgba(192,57,43,0.3);
}
.db-sub-action-btn.danger:hover { background: rgba(192,57,43,0.06); }

/* Subscription status badge variants */
.db-sub-badge-cancelled {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--gray-100); color: var(--text-medium);
  font-size: 11px; font-weight: 800; padding: 4px 12px;
  border-radius: 999px; text-transform: uppercase;
  letter-spacing: 0.06em; font-family: "Inter", sans-serif;
}
.db-sub-badge-warn {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fffbeb; color: #92400e;
  font-size: 11px; font-weight: 800; padding: 4px 12px;
  border-radius: 999px; text-transform: uppercase;
  letter-spacing: 0.06em; font-family: "Inter", sans-serif;
}
.db-sub-badge-grey {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--gray-100); color: var(--text-light);
  font-size: 11px; font-weight: 800; padding: 4px 12px;
  border-radius: 999px; text-transform: uppercase;
  letter-spacing: 0.06em; font-family: "Inter", sans-serif;
}

/* Subscription plan tier cards (no-sub signup chooser) */
.db-sub-tier-card {
  border: 2px solid var(--gray-200);
  border-radius: 14px; padding: 22px;
  position: relative; background: #fff;
  font-family: "Inter", sans-serif;
  display: flex; flex-direction: column;
}
.db-sub-tier-card .db-sub-tier-price-row { margin-top: auto; padding-top: 14px; }
.db-sub-tier-card.featured { border-color: var(--primary); }
.db-sub-tier-badge {
  position: absolute; top: -12px; left: 20px;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 3px 12px; border-radius: 20px;
  letter-spacing: .05em; font-family: "Inter", sans-serif;
}
.db-sub-tier-name { font-size: 17px; font-weight: 800; color: var(--text-dark); margin-bottom: 6px; }
.db-sub-tier-desc { font-size: 13px; color: var(--text-medium); margin-bottom: 16px; }
.db-sub-tier-price-row { margin-bottom: 10px; }
.db-sub-tier-price { font-size: 22px; font-weight: 800; color: var(--text-dark); }
.db-sub-tier-period { font-size: 13px; color: var(--text-light); }
.db-sub-period-toggle {
  display: flex; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--gray-200); margin: 12px 0 4px;
}
.db-sub-period-btn {
  flex: 1; padding: 8px 10px; background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-medium);
  font-family: "Inter", sans-serif; transition: background .15s, color .15s;
  display: flex; align-items: center; justify-content: center; gap: 5px; line-height: 1;
}
.db-sub-period-btn.active { background: var(--primary); color: #fff; }
.db-sub-period-btn:not(.active):hover { background: var(--gray-50); }
.db-sub-period-save {
  font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 4px;
  letter-spacing: .02em; background: #fef3c7; color: #92400e;
}
.db-sub-period-btn.active .db-sub-period-save {
  background: rgba(255,255,255,.25); color: #fff;
}

/* Weekly Plus offers */
.db-weekly-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.db-weekly-heading {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-dark);
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-weekly-heading i { color: #ee5a2a; }
.db-weekly-refresh {
  font-size: 12px;
  color: var(--text-light);
  font-family: "Inter", sans-serif;
}
.db-offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.db-offer-card {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid var(--gray-200);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.db-offer-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #ee5a2a; }
.db-offer-thumb {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--gray-100);
  overflow: hidden;
}
.db-offer-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-offer-disc {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ee5a2a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
}
.db-offer-body { padding: 14px 16px; }
.db-offer-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
}
.db-offer-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.db-offer-was {
  font-size: 12px;
  color: var(--text-light);
  text-decoration: line-through;
  font-family: "Inter", sans-serif;
}
.db-offer-now {
  font-size: 18px;
  font-weight: 900;
  color: #ee5a2a;
  font-family: "Inter", sans-serif;
  line-height: 1;
}
.db-offer-btn {
  display: block;
  text-align: center;
  background: #ee5a2a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  transition: opacity 0.15s;
}
.db-offer-btn:hover { opacity: 0.88; }
input[type=submit].db-offer-btn, input[type=submit].db-prepaid-btn {
  border: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.db-offer-buy, .db-prepaid-buy {
  display: flex; gap: 8px; align-items: stretch; margin-top: 10px;
}
.db-offer-buy .voucherselect, .db-prepaid-buy .voucherselect {
  flex-shrink: 0;
}
.db-offer-buy .voucherselect select, .db-prepaid-buy .voucherselect select {
  height: 100%; min-height: 36px; padding: 0 6px; border: 1.5px solid #e5e7eb;
  border-radius: 8px; font-size: 13px; font-family: inherit; background: #fff;
  color: #111; cursor: pointer;
}
.db-offer-buy input.add_to_cart { flex: 1; }
.db-prepaid-buy input.add_to_cart { flex: 1; }

/* --- Mobile sidebar drawer --- */
.db-mobile-bar {
  display: none; align-items: center; gap: 12px; padding: 0 0 18px;
}
.db-mobile-menu-btn {
  width: 40px; height: 40px; border-radius: 10px;
  background: #fff; border: 1px solid var(--gray-200);
  color: var(--text-dark); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  transition: background .15s;
}
.db-mobile-menu-btn:hover, .db-mobile-menu-btn:active { background: var(--gray-100); }
.db-mobile-bar-title { font-size: 16px; font-weight: 700; color: var(--text-dark); flex: 1; }
.db-mobile-bar-avatar {
  width: 34px; height: 34px; border-radius: 50%; font-size: 11px; font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; letter-spacing: .05em; font-family: "Inter", sans-serif;
}
.db-sidebar-mobile-hdr {
  display: none; justify-content: flex-end; padding: 14px 14px 6px;
  position: sticky; top: 0; background: var(--gray-50); z-index: 2;
}
.db-sidebar-close-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gray-100); border: none;
  font-size: 15px; color: var(--text-medium);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.db-sidebar-close-btn:hover { background: var(--gray-200); }
.db-sidebar-overlay {
  display: none; position: fixed; inset: 0;
  z-index: 1099; background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}
.db-sidebar-overlay.active { display: block; }
.db-nav-item:active { background: var(--gray-100); }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .db-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .db-mobile-bar { display: flex; }
  .db-sidebar-mobile-hdr { display: flex; }
  .db-layout { grid-template-columns: 1fr; gap: 0; }
  .db-sidebar {
    position: fixed;
    left: -295px; top: 0; bottom: 0;
    width: 285px; z-index: 1100;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transition: left .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
    background: var(--gray-50);
    padding-bottom: 40px;
    box-shadow: none;
  }
  .db-sidebar.open { left: 0; box-shadow: 8px 0 32px rgba(0,0,0,0.18); }
  .db-sidebar .db-sidebar-card { border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--gray-100); margin-bottom: 0; }
  .db-cards-grid { grid-template-columns: 1fr; }
  .db-offers-grid { grid-template-columns: 1fr 1fr; }
  .db-upsell-inner { grid-template-columns: 1fr; }
  .db-upsell-badge-side { display: none; }
  .db-sub-details { grid-template-columns: 1fr 1fr; }
  .db-main-heading { font-size: 24px; }
}
@media (max-width: 600px) {
  .db-stats-row { grid-template-columns: 1fr 1fr; }
  .db-upsell-card { padding: 24px 20px; }
  .db-upsell-features { grid-template-columns: 1fr; }
  .db-offers-grid { grid-template-columns: 1fr; }
  .db-sub-details { grid-template-columns: 1fr; }
  .db-voucher-row { grid-template-columns: 1fr; gap: 8px; }
  .db-voucher-chip { font-size: 10px; }
}

/* ==============================================
   PLUS PAGES — scoped to body.plus-theme
   All rules here only fire on 26-plus.html files
   ============================================== */

/* --- Variable + background overrides --- */
.plus-theme {
  --primary:      #ee5a2a;
  --primary-dark: #d44e20;
  --accent:       #ee5a2a;
  --amount:      #16a34a;
  background: #fafafa;
}
.plus-theme .cart-page-wrap { background: #fafafa; }

/* --- Keyframes (global scope is fine for named animations) --- */
@keyframes plus-shimmer {
  0%   { background-position: -300% center; }
  100% { background-position:  300% center; }
}
@keyframes plus-ring {
  0%, 100% { box-shadow: 0 0 0 0   rgba(238,90,42,0.7), 0 0 0 3px rgba(238,90,42,0.2); }
  50%       { box-shadow: 0 0 0 5px rgba(238,90,42,0),   0 0 0 3px rgba(238,90,42,0.6); }
}
@keyframes plus-glow-pulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(238,90,42,0.35); }
  50%       { box-shadow: 0 6px 30px rgba(238,90,42,0.65); }
}

/* --- Announcement bar: moving indigo shimmer --- */
.plus-theme .announcement-bar {
  background: linear-gradient(90deg, #d44e20 0%, #ee5a2a 40%, #f07040 50%, #ee5a2a 60%, #d44e20 100%);
  background-size: 300% auto;
  animation: plus-shimmer 5s linear infinite;
}

/* --- Plus account avatar --- */
.plus-theme .plus-account-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.plus-theme .plus-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ee5a2a;
  border: 2.5px solid #ee5a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
  animation: plus-ring 2.5s ease-in-out infinite;
}
.plus-theme .plus-label {
  font-size: 10px;
  font-weight: 800;
  color: #ee5a2a;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: "Inter", sans-serif;
  line-height: 1;
}
@media (max-width: 767px) { .plus-theme .plus-label { display: none; } }

/* --- CTA buttons: continuous indigo glow --- */
.plus-theme .cart-checkout-btn,
.plus-theme .prod-cta-btn,
.plus-theme .mfc-bar-btn {
  animation: plus-glow-pulse 2.5s ease-in-out infinite;
}

/* --- Product price card --- */
.plus-theme .pricefrom-card.plus-price-card {
  background: #ffffff;
  border-color: rgba(238,90,42,0.22);
}
.plus-theme .plus-was-price {
  font-size: 12px;
  color: var(--text-medium);
  margin-bottom: 3px;
  font-family: "Inter", sans-serif;
}
.plus-theme .plus-was-amount {
  text-decoration: line-through;
  font-weight: 600;
  color: var(--text-medium);
}
.plus-theme .plus-savings-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(90deg, #d44e20 0%, #ee5a2a 50%, #d44e20 100%);
  background-size: 200% auto;
  animation: plus-shimmer 2.5s linear infinite;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin: 7px 0 5px;
  font-family: "Inter", sans-serif;
}

/* --- Cart item dual pricing (Plus) --- */
.plus-theme .cart-item-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.plus-theme .cart-item-was {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
  text-decoration: line-through;
}
.plus-theme .cart-item-plus {
  font-size: 16px;
  font-weight: 700;
  color: #ee5a2a;
}

/* =====================================================
   HERO BANNER — homepage26-with-hero.html
   ===================================================== */
.hero-banner {
	display: grid;
	grid-template-columns: 500px 1fr;
  max-width: 1600px; 
  margin-top: 103px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
	min-height: 540px;
	overflow: hidden;
}

/* Left: text panel */
.hero-text-panel {
	background: #ec180b;
	display: flex; align-items: center;
	padding: 150px 52px 60px;
	position: relative;
	z-index: 1;
}
/* soft fade edge toward the image */
.hero-text-panel::after {
	content: '';
	position: absolute; top: 0; right: -130px; bottom: 0; width: 140px;
	background: linear-gradient(to right, #ec180b, transparent);
	pointer-events: none;
	z-index: 2;
}
.hero-text-block { width: 100%; }

/* Right: image panel */
.hero-image-panel {
	position: relative; overflow: hidden;
}
.hero-sale-img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: left center;
	display: block;
}

.hero-headline {
	font-size: 54px; font-weight: 900; color: #fff;
	line-height: 1.06; margin: 0 0 20px;
	letter-spacing: -.03em;
}
.hero-highlight {
	font-style: normal; color: var(--primary);
	text-shadow: 0 0 40px rgba(238,90,42,.5);
}

.hero-sub {
	font-size: 16.5px; color: #fff;;
	line-height: 1.7; margin: 0 0 36px;
}

.hero-cta-row {
	display: block;
	margin-bottom: 30px;
}

@media (max-width: 740px) {
.hero-cta-row {
	display: flex; 
  align-items: center;
	gap: 24px; 
  flex-wrap: wrap; 
  margin-bottom: 30px;
  justify-content: center;
}

}

.hero-browse-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13.5px; font-weight: 600;
	color: #fff; text-decoration: none;
	transition: gap .2s, opacity .2s;
	opacity: .85;
}
.hero-browse-link:hover { gap: 14px; opacity: 1; }

.hero-trust-row {
	display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.hero-trust-row span {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 600;
	color: #fff; letter-spacing: .02em;
}
.hero-trust-row i { font-size: 11px; color: #fff; opacity: .85; }

/* --- Offer Button Component (hob-) */
.hob-container {
	--hob-color: #111;
	--hob-corner-color: #111;
	width: 100%;
	--hob-dist: 24px;
	--hob-mult: 1.5;
	--hob-dur: 260ms;
	--hob-ease: cubic-bezier(0,0,0,2.5);
	position: relative; display: inline-flex;
	align-items: center; justify-content: center;
}
.hob-btn {
	position: relative; display: inline-flex;
	align-items: center; justify-content: center;
	width: 100%; min-height: calc(var(--hob-dist) * 2);
	border-radius: 16px; border: none; padding: .4em 1.6em;
	background: var(--hob-color);
	box-shadow: 0 4px 14px rgba(0,0,0,.45),
		0 12px 28px rgba(0,0,0,.3);
	transition: transform var(--hob-dur) var(--hob-ease),
		box-shadow var(--hob-dur) ease;
	cursor: pointer; text-decoration: none;
}
.hob-btn-text {
	display: inline-block; font-size: 1.15em;
	font-family: 'Inter', sans-serif; font-weight: 800;
	color: #fff;
	-webkit-text-fill-color: #fff;
	filter: drop-shadow(0 1px 0 rgba(255,255,255,.25))
		drop-shadow(0 -1px 2px rgba(0,0,0,.3));
	transition: transform var(--hob-dur) var(--hob-ease);
}
.hob-drawer {
	position: absolute; display: flex; justify-content: center;
	min-height: 32px; border-radius: 16px; padding: .25em 1em;
	font-size: .78em; font-weight: 800; letter-spacing: .02em;
	color: #fff;
	background: linear-gradient(rgba(255,255,255,.15), rgba(0,0,0,.05)), var(--hob-color);
	opacity: 0; filter: blur(2px); white-space: nowrap;
	font-variant-numeric: tabular-nums;
	transition: transform calc(.5 * var(--hob-dur)) ease,
		filter var(--hob-dur) var(--hob-ease),
		opacity calc(.5 * var(--hob-dur)) ease;
}
.hob-drawer--top  { top: 0; left: 0; border-radius: 12px 12px 0 0; align-items: flex-start; }
.hob-drawer--bottom { bottom: 0; right: 0; border-radius: 0 0 12px 12px; align-items: flex-end; font-family: 'Courier New', monospace; font-size: .82em; letter-spacing: .08em; }
.hob-corner {
	position: absolute; width: 32px; fill: none;
	stroke: var(--hob-corner-color);
	transition: transform var(--hob-dur) var(--hob-ease),
		filter var(--hob-dur) var(--hob-ease);
}
.hob-corner:nth-of-type(1) { top:0; left:0; transform: translate(calc(-1*var(--hob-dist)),calc(-1*var(--hob-dist))) rotate(90deg); }
.hob-corner:nth-of-type(2) { top:0; right:0; transform: translate(var(--hob-dist),calc(-1*var(--hob-dist))) rotate(180deg); }
.hob-corner:nth-of-type(3) { bottom:0; right:0; transform: translate(var(--hob-dist),var(--hob-dist)) rotate(-90deg); }
.hob-corner:nth-of-type(4) { bottom:0; left:0; transform: translate(calc(-1*var(--hob-dist)),var(--hob-dist)) rotate(0deg); }

.hob-container:has(.hob-btn:hover) .hob-btn {
	transform: translateY(-2px);
	background: #222;
	box-shadow: 1px 1px 2px -1px rgba(255,255,255,.12) inset,
		0 8px 24px rgba(0,0,0,.6),
		0 20px 44px rgba(0,0,0,.35);
}
.hob-container:has(.hob-btn:hover) .hob-drawer--top {
	transform: translateY(-26px) rotateZ(4deg);
	filter: none; opacity: 1;
	background: #111;
	color: #fff;
}
.hob-container:has(.hob-btn:hover) .hob-drawer--bottom {
	transform: translateY(26px) rotateZ(-4deg);
	filter: none; opacity: 1;
	background: #111;
	color: #fff;
}
.hob-container:has(.hob-btn:hover) .hob-btn-text { transform: scale(1.04); }
.hob-container:has(.hob-btn:hover) { --hob-corner-color: rgba(0,0,0,.8); }
.hob-container:has(.hob-btn:hover) .hob-corner:nth-of-type(1) {
	transform: translate(calc(-1*var(--hob-mult)*var(--hob-dist)),calc(-1*var(--hob-mult)*var(--hob-dist))) rotate(90deg);
	filter: drop-shadow(-5px 5px 3px rgba(0,0,0,.4)) drop-shadow(-10px 10px 6px rgba(0,0,0,.2));
}
.hob-container:has(.hob-btn:hover) .hob-corner:nth-of-type(2) {
	transform: translate(calc(var(--hob-mult)*var(--hob-dist)),calc(-1*var(--hob-mult)*var(--hob-dist))) rotate(180deg);
	filter: drop-shadow(-5px 5px 3px rgba(0,0,0,.4)) drop-shadow(-10px 10px 6px rgba(0,0,0,.2));
}
.hob-container:has(.hob-btn:hover) .hob-corner:nth-of-type(3) {
	transform: translate(calc(var(--hob-mult)*var(--hob-dist)),calc(var(--hob-mult)*var(--hob-dist))) rotate(-90deg);
	filter: drop-shadow(-5px 5px 3px rgba(0,0,0,.4)) drop-shadow(-10px 10px 6px rgba(0,0,0,.2));
}
.hob-container:has(.hob-btn:hover) .hob-corner:nth-of-type(4) {
	transform: translate(calc(-1*var(--hob-mult)*var(--hob-dist)),calc(var(--hob-mult)*var(--hob-dist))) rotate(0deg);
	filter: drop-shadow(-5px 5px 3px rgba(0,0,0,.4)) drop-shadow(-10px 10px 6px rgba(0,0,0,.2));
}
.hob-container:has(.hob-btn:active) .hob-btn { transform: scale(0.95); }
.hob-container:has(.hob-btn:active) .hob-drawer--top,
.hob-container:has(.hob-btn:active) .hob-drawer--bottom { transform: translateY(0) scale(0.5); }

/* Hero responsive */
@media (max-width: 960px) {
	.hero-banner { grid-template-columns: 1fr; }
	.hero-image-panel { height: 260px; order: -1; }
	.hero-sale-img { object-position: center top; }
	.hero-text-panel { padding: 40px 32px 50px; }
	.hero-text-panel::after { display: none; }
	.hero-headline { font-size: 40px; }
}
@media (max-width: 540px) {
	.hero-image-panel { height: 200px; }
	.hero-headline { font-size: 32px; }
	.hero-sub { font-size: 15px; }
	.hero-browse-link { display: none; color: #fff; }
}

/* --- Shipping row - Plus (struck-out + FREE) --- */
.plus-theme .cart-ship-value {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.plus-theme .cart-ship-was {
  font-size: 12px;
  padding-bottom: 3px;
  font-weight: 500;
  color: var(--text-light);
  text-decoration: line-through;
}

/* --- Cart Plus discount row --- */
.plus-theme .plus-discount-row .label { color: #ee5a2a; font-weight: 600; }
.plus-theme .plus-discount-row .label i { margin-right: 4px; }
.plus-theme .plus-discount-amount { color: #16a34a; font-weight: 700; }

/* --- Cart savings banner --- */
.plus-theme .plus-savings-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: #fff;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  margin: 10px 0 6px;
  font-family: "Inter", sans-serif;
}
.plus-theme .plus-savings-banner strong {
  font-size: 25px;
  font-weight: 900;
}

/* --- Inline Plus exclusive badge --- */
.plus-theme .plus-exclusive-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ee5a2a;
  background-size: 200% auto;
  animation: plus-shimmer 3s linear infinite;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 6px;
}

/* --- Newsletter overrides for Plus theme --- */
.plus-theme .newsletter-section {
  background: linear-gradient(135deg, #d44e20 0%, #ee5a2a 100%);
}
.plus-theme .newsletter-tag {
  color: #ee5a2a;
  background: #fff;
  border-color: rgba(238,90,42,0.35);
}
.plus-theme .newsletter-input:focus {
  border-color: #ee5a2a;
  box-shadow: 0 0 0 3px rgba(238,90,42,0.15);
}

/* --- Themes page overrides for Plus theme --- */
.plus-theme .themes-page-wrap { background: #fafafa; }
.plus-theme .themes-filter-slider {
  background: #ee5a2a;
  box-shadow: 0 4px 15px rgba(238,90,42,0.4);
}
.plus-theme .themes-orient-btn.active { color: var(--primary); }
.plus-theme .themes-bottom-cta { background: linear-gradient(135deg, #d44e20 0%, #ee5a2a 100%); }

/* --- Dashboard overrides for Plus theme --- */
.plus-theme .db-wrap { background: #fafafa; }
.plus-theme .db-nav-item.active { background: rgba(238,90,42,0.1); color: #ee5a2a; }
.plus-theme .db-nav-pill { background: #ee5a2a; }
.plus-theme .db-stat-card.feature {
  background: linear-gradient(135deg, #d44e20 0%, #ee5a2a 100%);
}
.plus-theme .db-stat-card.feature::before {
  background: radial-gradient(circle, rgba(238,90,42,0.2), transparent 70%);
}
.plus-theme .db-stat-meta a { color: #ee5a2a; }
.plus-theme .db-card-head a { color: #ee5a2a; }
.plus-theme .db-voucher-chip { background: rgba(238,90,42,0.1); color: #ee5a2a; }
.plus-theme .db-voucher-action { color: #ee5a2a; }
.plus-theme .db-contact-icon { color: #ee5a2a; }
.plus-theme .db-list-action:hover { background: #ee5a2a; border-color: #ee5a2a; }
.plus-theme .db-avatar {
  background: #ee5a2a;
  border: 2px solid #ee5a2a;
}
/* ── Subscription Page (sp-) ─────────────────────────────────────── */
.sp-page-wrap { padding-top: 0; }

/* ── HERO ─────────────────────────────────────────────────────────── */
.sp-hero {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
}
.sp-hero::before {
  content: '';
  position: absolute;
  top: -140px; right: -120px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(238,90,42,.07) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.sp-hero::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(238,90,42,.05) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.sp-hero-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.sp-hero h1 {
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin-bottom: 20px;
  font-family: "Inter", sans-serif;
}
.sp-hero h1 em { font-style: normal; color: #ee5a2a; }
.sp-hero-sub {
  font-size: 17px;
  color: #666;
  max-width: 510px;
  line-height: 1.65;
  margin-bottom: 34px;
  font-family: "Inter", sans-serif;
}
.sp-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.sp-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ee5a2a;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  padding: 17px 34px;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(238,90,42,.35);
  font-family: "Inter", sans-serif;
  text-decoration: none;
  transition: background .15s, transform .15s, box-shadow .15s;
  border: none;
  cursor: pointer;
}
.sp-hero-cta:hover {
  background: #d44e20;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(238,90,42,.45);
  color: #fff;
  text-decoration: none;
}
.sp-hero-link {
  color: #666;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1px;
  font-family: "Inter", sans-serif;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.sp-hero-link:hover { color: #1a1a1a; text-decoration: none; }
.sp-hero-trust {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #888;
  font-family: "Inter", sans-serif;
}
.sp-hero-trust .sp-stars { color: #ee5a2a; font-size: 14px; letter-spacing: 1px; }
.sp-hero-trust strong { color: #333; }

/* Membership card */
.sp-card {
  width: 340px;
  background: linear-gradient(145deg, #d44e20 0%, #ee5a2a 60%, #d44e20 100%);
  border-radius: 24px;
  padding: 30px 28px 26px;
  box-shadow: 0 24px 64px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.25);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.sp-card::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
  border-radius: 50%;
}
.sp-card::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
  border-radius: 50%;
}
.sp-card-inner { position: relative; z-index: 1; }
.sp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}
.sp-card-brand-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  font-family: "Inter", sans-serif;
  margin-bottom: 4px;
}
.sp-card-brand-name {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.75);
  font-family: "Inter", sans-serif;
}
.sp-card-crown {
  width: 42px; height: 42px;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}
.sp-card-title {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  font-family: "Inter", sans-serif;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}
.sp-card-title span { color: #fff; }
.sp-card-subtitle {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  font-family: "Inter", sans-serif;
  margin-bottom: 22px;
}
.sp-card-perks {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sp-card-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.8);
  font-family: "Inter", sans-serif;
}
.sp-card-perk i { color: rgba(255,255,255,.85); font-size: 10px; flex-shrink: 0; }
.sp-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sp-card-price-label { font-size: 11px; color: rgba(255,255,255,.4); font-family: "Inter", sans-serif; margin-bottom: 2px; }
.sp-card-price-val { font-size: 22px; font-weight: 900; color: #fff; font-family: "Inter", sans-serif; }
.sp-card-price-val span { font-size: 13px; font-weight: 400; color: rgba(255,255,255,.45); }

@keyframes sp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.4); }
}

/* ── STATS BAR ───────────────────────────────────────────────────── */
.sp-stats {
  background: #fff;
  border-bottom: 1px solid #eeeeee;
  padding: 30px 0;
}
.sp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.sp-stat-item {
  text-align: center;
  padding: 12px 8px;
  border-right: 1px solid #eee;
}
.sp-stat-item:last-child { border-right: none; }
.sp-stat-num {
  font-size: 30px;
  font-weight: 900;
  color: #ee5a2a;
  font-family: "Inter", sans-serif;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 7px;
}
.sp-stat-label {
  font-size: 12px;
  color: var(--text-medium);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-family: "Inter", sans-serif;
}


/* ── BENEFITS ────────────────────────────────────────────────────── */
.sp-benefits {
  padding: 84px 0;
  background: #ffffff;
}
.sp-section-head {
  text-align: center;
  margin-bottom: 52px;
}
.sp-section-head h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -.022em;
  margin-bottom: 12px;
  font-family: "Inter", sans-serif;
}
.sp-section-head p {
  font-size: 16px;
  color: var(--text-medium);
  max-width: 520px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
  line-height: 1.6;
}
.sp-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sp-benefit {
  background: #fff;
  border-radius: 18px;
  padding: 32px 26px 28px;
  box-shadow: 0 2px 12px rgba(238,90,42,.06);
  border: 1.5px solid transparent;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  position: relative;
}
.sp-benefit:hover {
  border-color: #ee5a2a;
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(238,90,42,.14);
}

.sp-benefit-icon {
  width: 54px; height: 54px;
  background: rgba(238,90,42,.09);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ee5a2a;
  font-size: 22px;
  margin-bottom: 18px;
  transition: background .2s, color .2s;
}
.sp-benefit:hover .sp-benefit-icon {
  background: #ee5a2a;
  color: #fff;
}
.sp-benefit h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 10px;
  font-family: "Inter", sans-serif;
}
.sp-benefit p {
  font-size: 14px;
  color: var(--text-medium);
  line-height: 1.65;
  font-family: "Inter", sans-serif;
}

/* ── CALCULATOR ─────────────────────────────────────────────────── */
.sp-calc-section {
  padding: 84px 0;
  background: #fff;
}
.sp-calc-card {
  background: linear-gradient(-50deg, #000000 0%, var(--primary) 100%);
  border-radius: 26px;
  padding: 56px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 72px rgba(0,0,0,.25);
}
.sp-calc-card::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(238,90,42,.12) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.sp-calc-card::after {
  content: '';
  position: absolute;
  bottom: -60px; left: 30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(238,90,42,.10) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.sp-calc-left { position: relative; z-index: 1; }
.sp-calc-left-head {
  margin-bottom: 30px;
}
.sp-calc-left-head h2 {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  font-family: "Inter", sans-serif;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.sp-calc-left-head p {
  font-size: 13.5px;
  color: rgba(255,255,255,.55);
  font-family: "Inter", sans-serif;
  line-height: 1.5;
}
.sp-calc-row { margin-bottom: 22px; }
.sp-calc-row:last-child { margin-bottom: 0; }
.sp-calc-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.sp-calc-row-label {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  font-family: "Inter", sans-serif;
}
.sp-calc-row-avg {
  font-size: 11.5px;
  color: rgba(255,255,255,.38);
  font-family: "Inter", sans-serif;
}
.sp-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  overflow: hidden;
  width: fit-content;
}
.sp-stepper-btn {
  width: 40px; height: 40px;
  background: none;
  border: none;
  color: rgba(255,255,255,.65);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-stepper-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.sp-stepper-val {
  min-width: 50px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  font-family: "Inter", sans-serif;
  border: none;
  background: none;
  outline: none;
  padding: 0;
}
.sp-calc-row-bar {
  height: 3px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}
.sp-calc-row-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ee5a2a, #ee5a2a);
  border-radius: 2px;
  transition: width .3s ease;
}

/* Calculator right: results */
.sp-calc-right { position: relative; z-index: 1; }
.sp-calc-result {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  padding: 32px 28px;
}
.sp-calc-result-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  font-family: "Inter", sans-serif;
  margin-bottom: 4px;
}
.sp-calc-big-num {
  font-size: 58px;
  font-weight: 900;
  color: #fff;
  font-family: "Inter", sans-serif;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 4px;
}
.sp-calc-big-sub {
  font-size: 13px;
  color: #fff;
  font-family: "Inter", sans-serif;
  margin-bottom: 26px;
}
.sp-calc-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 22px;
}
.sp-calc-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 13.5px;
  font-family: "Inter", sans-serif;
}
.sp-calc-line:last-child { border-bottom: none; }
.sp-calc-line span:first-child { color: rgba(255,255,255,.6); }
.sp-calc-line span:last-child { color: rgba(255,255,255,.9); font-weight: 700; }
.sp-calc-line.sp-line-saving span:last-child { color: #4cd07a; }
.sp-calc-line.sp-line-cost span:last-child { color: rgba(255,110,110,.9); }
.sp-calc-line.sp-line-net { border-top: 1.5px solid rgba(255,255,255,.14); margin-top: 4px; padding-top: 14px; border-bottom: none; }
.sp-calc-line.sp-line-net span:first-child { color: rgba(255,255,255,.85); font-weight: 700; }
.sp-calc-line.sp-line-net span:last-child { color: #ee5a2a; font-size: 18px; font-weight: 900; }
.sp-calc-breakeven {
  background: rgba(238,90,42,.1);
  border: 1px solid rgba(238,90,42,.22);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: rgba(255,255,255,.78);
  font-family: "Inter", sans-serif;
  text-align: center;
  margin-bottom: 22px;
  line-height: 1.45;
}
.sp-calc-subscribe-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #ee5a2a;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  padding: 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.sp-calc-subscribe-btn:hover { background: #d44e20; transform: translateY(-1px); color: #fff; text-decoration: none; }

/* ── HOW IT WORKS ────────────────────────────────────────────────── */
.sp-how {
  padding: 84px 0;
  background: #ffffff;
}
.sp-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  position: relative;
}
.sp-how-grid::before {
  content: '';
  position: absolute;
  top: 34px;
  left: calc(12.5% + 8px);
  right: calc(12.5% + 8px);
  height: 2px;
  background: linear-gradient(90deg, #ee5a2a, #ee5a2a);
  border-radius: 2px;
  z-index: 0;
}
.sp-how-step {
  text-align: center;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
.sp-how-num {
  width: 68px; height: 68px;
  background: #ee5a2a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  font-family: "Inter", sans-serif;
  margin: 0 auto 18px;
  box-shadow: 0 4px 16px rgba(238,90,42,.35);
  border: 3px solid #ffffff;
}
.sp-how-step h4 {
  font-size: 15px;
  font-weight: 800;
  color: var(--dark);
  font-family: "Inter", sans-serif;
  margin-bottom: 8px;
}
.sp-how-step p {
  font-size: 13.5px;
  color: var(--text-medium);
  font-family: "Inter", sans-serif;
  line-height: 1.55;
}

/* ── COMPARE TABLE ───────────────────────────────────────────────── */
.sp-compare-section {
  padding: 84px 0;
  background: #fff;
}
.sp-compare-table {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(238,90,42,.12);
  border: 1px solid #e8e8e8;
  max-width: 820px;
  margin: 0 auto;
}
.sp-compare-head {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  background: #fafafa;
  border-bottom: 2px solid #e8e8e8;
}
.sp-ch-cell {
  padding: 26px 22px;
  font-family: "Inter", sans-serif;
}
.sp-ch-cell h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--dark);
  font-family: "Inter", sans-serif;
  margin-bottom: 3px;
}
.sp-ch-cell p { font-size: 13px; color: var(--text-medium); }
.sp-ch-cell.sp-plus-col {
  background: linear-gradient(135deg, #ee5a2a 0%, #ee5a2a 100%);
  position: relative;
}
.sp-ch-cell.sp-plus-col h3 { color: #fff; }
.sp-ch-cell.sp-plus-col p { color: rgba(255,255,255,.6); }

.sp-cr {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  border-bottom: 1px solid #eeeeee;
}
.sp-cr:last-child { border-bottom: none; }
.sp-cr:nth-child(even) { background: #fafafa; }
.sp-cc {
  padding: 14px 22px;
  font-size: 14px;
  display: flex;
  align-items: center;
  font-family: "Inter", sans-serif;
}
.sp-cc.sp-feat { font-weight: 600; color: var(--dark); }
.sp-cc.sp-center { justify-content: center; text-align: center; }
.sp-cc.sp-plus-col { background: rgba(238,90,42,.04); }
.sp-check { color: #2e7d5b; font-weight: 800; font-size: 18px; }
.sp-cross { color: #bbb; font-size: 16px; }
.sp-plus-text { color: #ee5a2a; font-weight: 800; font-size: 13px; }

/* ── TESTIMONIALS ────────────────────────────────────────────────── */
.sp-testimonials {
  padding: 84px 0;
  background: #ffffff;
}
.sp-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.sp-testimonial {
  background: #fff;
  border-radius: 18px;
  padding: 30px 26px;
  border-top: 4px solid #ee5a2a;
  box-shadow: 0 2px 12px rgba(238,90,42,.06);
}
.sp-t-stars {
  color: #ee5a2a;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.sp-t-saving {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(238,90,42,.08);
  color: #ee5a2a;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  font-family: "Inter", sans-serif;
}
.sp-t-quote {
  font-size: 15px;
  line-height: 1.65;
  color: var(--dark);
  font-family: "Inter", sans-serif;
  margin-bottom: 20px;
  font-weight: 500;
}
.sp-t-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-t-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #ee5a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  font-family: "Inter", sans-serif;
  flex-shrink: 0;
}
.sp-t-name { font-weight: 800; font-size: 14px; color: var(--dark); font-family: "Inter", sans-serif; }
.sp-t-meta { font-size: 12px; color: var(--text-medium); font-family: "Inter", sans-serif; }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.sp-faq {
  padding: 84px 0;
  background: #fff;
}
.sp-faq-grid {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-faq-item {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--gray-200);
  transition: border-color .2s, box-shadow .2s;
}
.sp-faq-item.open { border-color: var(--gray-200); box-shadow: 0 2px 12px rgba(238,90,42,.1); }
.sp-faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 22px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Inter", sans-serif;
  gap: 14px;
}
.sp-faq-q i {
  color: var(--primary);
  font-size: 13px;
  transition: transform .25s;
  flex-shrink: 0;
}
.sp-faq-item.open .sp-faq-q i { transform: rotate(180deg); }
.sp-faq-item.open .sp-faq-q { color: var(--primary); }
.sp-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  color: var(--text-medium);
  font-size: 14.5px;
  line-height: 1.7;
  font-family: "Inter", sans-serif;
  padding: 0 22px;
}
.sp-faq-item.open .sp-faq-a {
  max-height: 320px;
  padding: 0 22px 20px;
}

/* ── FINAL CTA ───────────────────────────────────────────────────── */
.sp-final-cta {
  padding: 100px 0;
  background: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sp-final-cta::before {
  content: '';
  position: absolute;
  top: -120px; right: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(238,90,42,.15), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.sp-final-cta::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(120,120,210,.18), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.sp-final-inner { position: relative; z-index: 1; }
.sp-final-cta h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  color: var(--primary);
  font-family: "Inter", sans-serif;
  letter-spacing: -.022em;
  margin-bottom: 14px;
}
.sp-final-cta h2 em { color: #ee5a2a; font-style: normal; }
.sp-final-cta p {
  font-size: 16px;
  color: var(--primary);
  max-width: 480px;
  margin: 0 auto 36px;
  font-family: "Inter", sans-serif;
  line-height: 1.6;
}
.sp-pricing-pills {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.sp-pricing-pill {
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 18px;
  padding: 20px 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
  min-width: 170px;
  position: relative;
}
.sp-pricing-pill.sp-pill-active {
  border-color: #ee5a2a;
  background: rgba(238,90,42,.1);
  transform: translateY(-2px);
}
.sp-pricing-pill:hover { border-color: rgba(238,90,42,.6); }
.sp-pill-plan {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--primary);
  font-family: "Inter", sans-serif;
  margin-bottom: 8px;
}
.sp-pill-price {
  font-size: 30px;
  font-weight: 900;
  color: var(--primary);
  font-family: "Inter", sans-serif;
  letter-spacing: -.025em;
  line-height: 1;
}
.sp-pill-price sup { font-size: 16px; vertical-align: top; margin-top: 4px; }
.sp-pill-per {
  font-size: 12px;
  color: var(--primary);
  font-family: "Inter", sans-serif;
  margin-top: 4px;
}
.sp-pill-badge {
  display: inline-block;
  background: #ee5a2a;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 8px;
  font-family: "Inter", sans-serif;
  letter-spacing: .05em;
}
.sp-final-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ee5a2a;
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  padding: 20px 46px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(238,90,42,.45);
  transition: background .15s, transform .15s, box-shadow .15s;
  margin-bottom: 20px;
}
.sp-final-cta-btn:hover {
  background: #d44e20;
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(238,90,42,.6);
  color: #ffffff;
  text-decoration: none;
}
.sp-final-guarantees {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.45);
  font-size: 13px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
}
.sp-final-guarantees span { display: flex; align-items: center; gap: 6px; color: var(--primary); }
.sp-final-guarantees i { color: var(--primary); }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .sp-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .sp-card { display: none; }
  .sp-calc-card { grid-template-columns: 1fr; padding: 36px; gap: 32px; }
}
@media (max-width: 900px) {
  .sp-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-stat-item:nth-child(2) { border-right: none; }
  .sp-stat-item:nth-child(1), .sp-stat-item:nth-child(2) { border-bottom: 1px solid #eee; }
  .sp-benefits-grid { grid-template-columns: 1fr 1fr; }
  .sp-how-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .sp-how-grid::before { display: none; }
  .sp-testimonials-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sp-hero { padding: 56px 0 72px; }
  .sp-hero h1 { font-size: 30px; }
  .sp-benefits, .sp-how, .sp-compare-section, .sp-testimonials, .sp-faq { padding: 34px 0; }
  .sp-section-head { margin-bottom: 22px; }
  .sp-benefits-grid { grid-template-columns: 1fr; gap: 12px; }
  .sp-benefit { padding: 16px; }
  .sp-how-grid { grid-template-columns: 1fr 1fr; }
  .sp-calc-card { padding: 24px 22px; }
  .sp-calc-big-num { font-size: 44px; }
  .sp-pricing-pills { flex-direction: column; align-items: center; }
  .sp-final-guarantees { flex-direction: column; align-items: center; gap: 10px; }
  /* ── Comparison table mobile ─────────────────────────────── */
  .sp-compare-head { display: none; }
  .sp-compare-table {
    background: transparent; border: none;
    box-shadow: none; border-radius: 0; overflow: visible;
    display: flex; flex-direction: column; gap: 10px;
  }
  /* Each row becomes its own card */
  .sp-cr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    border: 1.5px solid #e0e0e0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(238,90,42,.08);
    background: #fff;
  }
  .sp-cr:last-child { border-bottom: 1.5px solid #e0e0e0; }
  .sp-cr:nth-child(even) { background: #fff; }
  /* Feature name: full-width top row */
  .sp-cc.sp-feat {
    grid-column: 1 / -1; grid-row: 1;
    display: block;
    padding: 12px 16px;
    font-size: 13.5px; font-weight: 700; color: var(--text-dark);
    background: #ffffff;
    border-bottom: 1.5px solid #e0e0e0;
    border-left: 3px solid #ee5a2a;
  }
  /* Value cells: side by side in row 2 */
  .sp-cc:not(.sp-feat) {
    grid-row: 2;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 16px 10px; min-height: 72px;
    font-size: 13.5px;
  }
  .sp-cc:not(.sp-feat)::before {
    content: attr(data-label);
    display: block;
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-light);
    margin-bottom: 7px; font-family: "Inter", sans-serif;
  }
  /* Free column */
  .sp-cc:not(.sp-feat):not(.sp-plus-col) {
    border-right: 1.5px solid #e0e0e0;
    background: #fff;
  }
  /* Plus column */
  .sp-cc.sp-plus-col:not(.sp-feat) {
    background: #fafafa;
  }
  .sp-cc.sp-plus-col:not(.sp-feat)::before { color: #ee5a2a; }
}

/* ================================================================
   COLLECTION PAGE (col-)
   Used by collection26.html and collection26-plus.html
   ================================================================ */

.col-page-wrap { padding-top: 100px; }

/* ── Hero (compact) ────────────────────────────────────────────── */
.col-hero {
  padding: 20px 0 18px;
  background: linear-gradient(135deg, #fdf0ea 0%, #fafafa 100%);
  border-bottom: 1px solid var(--gray-200);
}
.col-hero-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.col-breadcrumb { font-size: 12.5px; color: var(--text-light); }
.col-breadcrumb a { color: var(--text-medium); text-decoration: none; }
.col-breadcrumb a:hover { text-decoration: underline; }
.col-breadcrumb .col-sep { margin: 0 6px; }
.col-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary);
  background: rgba(238,90,42,.08); padding: 4px 12px;
  border-radius: 99px; margin-bottom: 8px;
}
.col-hero h1 { font-size: 34px; font-weight: 800; color: var(--text-dark); margin-bottom: 0; }
.col-hero-desc { display: none; }
.col-hero-meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--text-medium); }
.col-hero-stars { color: #ee5a2a; font-size: 13px; }

/* ── Products Section ──────────────────────────────────────────── */
.col-products-section { padding: 44px 0 58px; background: var(--bg-light); }
.col-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* ── Product Cards ─────────────────────────────────────────────── */
.col-product-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);
  border: 1.5px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.col-product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(0,0,0,.12);
  border-color: var(--primary);
}
.col-product-img-wrap { height: 240px; overflow: hidden; position: relative; }
.col-product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.col-product-card:hover .col-product-img-wrap img { transform: scale(1.06); }
.col-product-badge {
  position: absolute; top: 12px; left: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 4px 11px; border-radius: 99px;
  background: var(--primary); color: #fff; z-index: 1;
}
.col-product-badge.new { background: #16a34a; }
.col-product-badge.ai  { background: #7c3aed; }
.col-product-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.col-product-name { font-size: 17px; font-weight: 800; color: var(--text-dark); margin-bottom: 8px; line-height: 1.25; }
.col-product-desc {
  font-size: 13px; color: var(--text-medium); line-height: 1.55;
  flex: 1; margin-bottom: 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.col-product-price-block {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 14px; border-top: 1px solid var(--gray-200); margin-bottom: 14px;
}
.col-price-regular { font-size: 19px; font-weight: 800; color: var(--text-dark); }
.col-price-plus { display: none; }
.col-plus-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 99px;
  background: #ee5a2a; color: #d44e20; vertical-align: middle; margin-left: 4px;
}
.col-start-btn {
  display: block; background: var(--primary); color: #fff;
  text-align: center; padding: 12px 16px; border-radius: 99px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .03em; text-decoration: none;
  transition: background var(--transition), transform .15s ease;
}
.col-start-btn:hover { background: var(--primary-dark); }
/* 5th card centred when alone on a 4-col row */
.col-products-grid .col-product-card:last-child:nth-child(4n+1) { grid-column: 2 / 4; }

/* ── Style Tabs ────────────────────────────────────────────────── */
.col-style-section { padding: 70px 0; background: #fff; }
.col-section-head { text-align: center; margin-bottom: 40px; }
.col-section-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--primary); text-transform: uppercase; margin-bottom: 10px; }
.col-section-title { font-size: 28px; font-weight: 800; color: var(--text-dark); margin-bottom: 10px; }
.col-section-sub { font-size: 15px; color: var(--text-medium); max-width: 540px; margin: 0 auto; }
.col-tabs-nav {
  display: flex; justify-content: center; gap: 0;
  border-bottom: 2px solid var(--gray-200); margin-bottom: 40px; flex-wrap: wrap;
}
.col-tab-btn {
  padding: 12px 28px; font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-medium); background: none; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.col-tab-btn:hover { color: var(--primary); }
.col-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.col-tab-content { display: none; }
.col-tab-content.active { display: block; }
.col-tab-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; }
.col-tab-feat-item { text-align: center; padding: 10px; }
.col-tab-feat-item img { height: 170px; object-fit: cover; width: 100%; border-radius: 10px; margin-bottom: 14px; }
.col-tab-feat-title { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.col-tab-feat-item p { font-size: 13px; color: var(--text-medium); line-height: 1.6; }
.col-tab-cover-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 0 20px; margin-bottom: 40px; text-align: left; }
.col-tab-cover-row:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .col-tab-cover-row { grid-template-columns: 1fr; padding: 0 8px; } }
.col-tab-cover-text h4 { font-size: 18px; font-weight: 700; color: var(--primary); margin-bottom: 12px; }
.col-tab-cover-text p { font-size: 14px; color: var(--text-medium); line-height: 1.75; }
.col-tab-cover-img { border-radius: 10px; overflow: hidden; }
.col-tab-cover-img img { display: block; width: 100%; }

/* ── Designer Tools ────────────────────────────────────────────── */
.col-tools-section { padding: 70px 0; background: var(--bg-light); }
.col-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.col-tool-card { background: #fff; border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; }
.col-tool-icon { width: 52px; height: 52px; border-radius: 12px; background: rgba(238,90,42,.1); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--primary); }
.col-tool-title { font-size: 19px; font-weight: 800; color: var(--text-dark); }
.col-tool-desc { font-size: 13.5px; color: var(--text-medium); line-height: 1.7; flex: 1; }
.col-tool-link { font-size: 13.5px; font-weight: 700; color: var(--primary); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.col-tool-link:hover { text-decoration: underline; }
.col-app-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.col-app-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--text-dark); color: #fff; border-radius: 8px; font-size: 12px; font-weight: 600; text-decoration: none; transition: background var(--transition); }
.col-app-btn:hover { background: #333; }
.col-app-btn i { font-size: 16px; }

/* ── How It Works ──────────────────────────────────────────────── */
.col-howto { padding: 70px 0; background: #fff; }
.col-howto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.col-howto-card { text-align: center; padding: 30px 22px; background: var(--bg-light); border-radius: var(--radius); }
.col-howto-icon { margin-bottom: 16px; }
.col-howto-icon img { height: 70px; width: auto; display: block; margin: 0 auto; }
.col-howto-card h5 { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
.col-howto-card p { font-size: 13px; color: var(--text-medium); line-height: 1.6; }
.col-howto-cta { text-align: center; margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.col-howto-btn { display: inline-block; padding: 14px 36px; background: var(--primary); color: #fff; border-radius: 99px; font-size: 15px; font-weight: 800; text-decoration: none; transition: background var(--transition), transform var(--transition); }
.col-howto-btn:hover { background: var(--primary-dark); transform: translateY(-2px); }
.col-rating-note { font-size: 13px; color: var(--text-medium); }
.col-rating-note .col-stars { color: #ee5a2a; }

/* ── FAQ ───────────────────────────────────────────────────────── */
.col-faq { padding: 70px 0; background: var(--bg-light); }
.col-faq-inner { max-width: 800px; margin: 0 auto; }

/* ── CTA Banner ────────────────────────────────────────────────── */
.col-cta-banner { padding: 70px 0; background: linear-gradient(135deg, #ee5a2a 0%, #c94420 100%); color: #fff; text-align: center; }
.col-cta-banner h2 { font-size: 32px; font-weight: 800; margin-bottom: 10px; }
.col-cta-banner p { font-size: 16px; opacity: .9; margin-bottom: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }
.col-cta-white-btn { display: inline-block; padding: 14px 38px; background: #fff; color: var(--primary); border-radius: 99px; font-size: 15px; font-weight: 800; text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); }
.col-cta-white-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.18); }

/* ── Plus theme overrides ──────────────────────────────────────── */
.plus-theme .col-hero { background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%); border-bottom-color: #e0e0e0; }
.plus-theme .col-hero-eyebrow { background: rgba(238,90,42,.1); color: #ee5a2a; }
.plus-theme .col-price-regular { font-size: 13px; text-decoration: line-through; color: var(--text-light); font-weight: 500; }
.plus-theme .col-price-plus { display: flex; align-items: center; font-size: 19px; font-weight: 800; color: #ee5a2a; }
.plus-theme .col-product-card:hover { border-color: #ee5a2a; }
.plus-theme .col-start-btn { background: #ee5a2a; }
.plus-theme .col-start-btn:hover { background: #d44e20; }
.plus-theme .col-tab-btn.active { color: #ee5a2a; border-bottom-color: #ee5a2a; }
.plus-theme .col-tab-btn:hover { color: #ee5a2a; }
.plus-theme .col-section-eyebrow { color: #ee5a2a; }
.plus-theme .col-tab-feat-title { color: #ee5a2a; }
.plus-theme .col-tab-cover-text h4 { color: #ee5a2a; }
.plus-theme .col-tool-icon { background: rgba(238,90,42,.1); color: #ee5a2a; }
.plus-theme .col-tool-link { color: #ee5a2a; }
.plus-theme .col-app-btn { background: #ee5a2a; }
.plus-theme .col-app-btn:hover { background: #d44e20; }
.plus-theme .col-howto-btn { background: #ee5a2a; }
.plus-theme .col-howto-btn:hover { background: #d44e20; }
.plus-theme .col-cta-banner { background: linear-gradient(135deg, #d44e20 0%, #ee5a2a 100%); }
.plus-theme .col-cta-white-btn { color: #ee5a2a; }
.plus-theme .col-product-badge { background: #ee5a2a; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .col-products-grid { grid-template-columns: repeat(2, 1fr); }
  .col-products-grid .col-product-card:last-child:nth-child(4n+1) { grid-column: auto; }
}
@media (max-width: 900px) {
  .col-tools-grid { grid-template-columns: 1fr; }
  .col-howto-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .col-hero h1 { font-size: 26px; }
  .col-hero-meta { gap: 10px; font-size: 12px; }
  .col-tab-cover-row { grid-template-columns: 1fr; gap: 24px; padding: 0; }
  .col-cta-banner h2 { font-size: 24px; }
}
@media (max-width: 540px) {
  .col-products-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   COLLECTION PAGE — OCCASIONS + SUBSCRIBE SECTIONS
   ================================================================ */

/* Occasions */
.col-occasions-section { padding: 70px 0; background: var(--bg-light); }
.col-occasions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.col-occasion-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; border: 2px solid var(--gray-200);
  border-radius: 14px; text-decoration: none; color: inherit;
  background: #fff;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.col-occasion-card:hover { border-color: var(--primary); box-shadow: 0 8px 28px rgba(238,90,42,.14); transform: translateY(-3px); }
.col-occasion-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(238,90,42,.1); display: flex; align-items: center;
  justify-content: center; font-size: 20px; color: var(--primary); flex-shrink: 0;
  transition: background .25s, color .25s;
}
.col-occasion-card:hover .col-occasion-icon { background: var(--primary); color: #fff; }
.col-occasion-name { font-size: 14px; font-weight: 700; color: var(--text-dark); transition: color .25s; }
.col-occasion-card:hover .col-occasion-name { color: var(--primary); }

/* Subscribe & WIN */
.col-subscribe-section { padding: 62px 0; background: var(--primary); }
.col-subscribe-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center; max-width: 860px; margin: 0 auto;
}
.col-subscribe-text h3 { font-size: 28px; font-weight: 300; color: #fff; margin-bottom: 10px; line-height: 1.2; }
.col-subscribe-text h3 strong { font-weight: 900; font-size: 36px; display: inline; }
.col-subscribe-text p { font-size: 14.5px; color: rgba(255,255,255,.88); line-height: 1.6; margin: 0; }
.col-subscribe-text p strong { color: #fff; }
.col-subscribe-form { display: flex; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.15); }
.col-subscribe-input {
  flex: 1; padding: 14px 18px; border: none; font-size: 14px;
  outline: none; color: var(--text-dark); background: #fff;
  min-width: 0;
}
.col-subscribe-btn {
  padding: 14px 22px; background: var(--text-dark); color: #fff;
  border: none; font-size: 13px; font-weight: 800; cursor: pointer;
  white-space: nowrap; letter-spacing: .04em; transition: background .2s;
}
.col-subscribe-btn:hover { background: #111; }

@media (max-width: 900px) {
  .col-occasions-grid { grid-template-columns: repeat(2, 1fr); }
  .col-subscribe-inner { grid-template-columns: 1fr; gap: 28px; }
  .col-subscribe-text { text-align: center; }
}
@media (max-width: 540px) {
  .col-occasions-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   SEARCH OVERLAY + SEARCH RESULTS PAGE (srp-)
   ================================================================ */

/* ── Search Overlay ──────────────────────────────────────────── */
.search-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,.16);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.search-overlay.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.search-overlay-inner {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 0 18px;
  border-bottom: 1px solid var(--gray-200);
}
.search-overlay-icon { font-size: 17px; color: var(--text-light); flex-shrink: 0; }
.search-overlay-input {
  flex: 1; border: none; outline: none;
  font-size: 18px; font-family: inherit; color: var(--text-dark); background: transparent;
}
.search-overlay-input::placeholder { color: var(--text-light); }
.search-overlay-close {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); border: none; border-radius: 50%;
  font-size: 13px; color: var(--text-medium); cursor: pointer;
  transition: background var(--transition); flex-shrink: 0;
}
.search-overlay-close:hover { background: var(--gray-200); }
.search-suggestions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; padding: 14px 0 18px;
}
.search-sugg-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-light); margin-right: 4px;
}
.search-pill {
  display: inline-block; padding: 5px 14px;
  background: var(--bg-light); border: 1.5px solid var(--gray-200);
  border-radius: 99px; font-size: 12.5px; color: var(--text-medium); text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.search-pill:hover { background: rgba(238,90,42,.07); border-color: var(--primary); color: var(--primary); }

/* ── Search Results Page (srp-) ──────────────────────────────── */
.srp-wrap { padding-top: 0; }

.srp-hero {
  padding: 34px 0 26px;
  background: var(--bg-light);
  border-bottom: 1px solid var(--gray-200);
}
.srp-hero-inner {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 16px;
}
.srp-count { font-size: 13px; color: var(--text-light); margin-bottom: 4px; }
.srp-heading { font-size: 26px; font-weight: 800; color: var(--text-dark); }
.srp-heading em { color: var(--primary); font-style: normal; }
.srp-inline-bar {
  display: flex; align-items: center; background: #fff;
  border: 1.5px solid var(--gray-200); border-radius: 99px;
  padding: 8px 8px 8px 18px; gap: 8px; min-width: 300px;
  transition: border-color var(--transition);
}
.srp-inline-bar:focus-within { border-color: var(--primary); }
.srp-inline-input {
  flex: 1; border: none; outline: none;
  font-size: 14px; font-family: inherit; color: var(--text-dark); background: transparent;
}
.srp-inline-btn {
  padding: 8px 18px; background: var(--primary); color: #fff;
  border: none; border-radius: 99px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background var(--transition); white-space: nowrap;
}
.srp-inline-btn:hover { background: var(--primary-dark); }

.srp-filter-strip {
  background: #fff; border-bottom: 1px solid var(--gray-200);
  position: sticky; top: 60px; z-index: 50;
}
.srp-filter-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 0;
}
.srp-filter-btn {
  padding: 7px 16px; background: none; border: 1.5px solid var(--gray-200);
  border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--text-medium);
  cursor: pointer; transition: all var(--transition);
}
.srp-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.srp-filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.srp-filter-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px;
  font-size: 10px; font-weight: 700; margin-left: 4px; background: rgba(255,255,255,.25);
}
.srp-filter-btn:not(.active) .srp-filter-cnt { background: var(--gray-100); color: var(--text-light); }

.srp-main { padding: 44px 0 80px; min-height: 50vh; }
.srp-section { margin-bottom: 52px; }
.srp-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.srp-section-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-medium); display: flex; align-items: center; gap: 8px;
}
.srp-section-label::before { content: ''; width: 3px; height: 14px; background: var(--primary); border-radius: 2px; }
.srp-see-all { font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; }
.srp-see-all:hover { text-decoration: underline; }

/* Product result cards */
.srp-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.srp-product-card {
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06); border: 1.5px solid transparent;
  transition: transform .22s, box-shadow .22s, border-color .22s;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
}
.srp-product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.11); border-color: var(--primary); }
.srp-product-img { height: 165px; overflow: hidden; position: relative; }
.srp-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; display: block; }
.srp-product-card:hover .srp-product-img img { transform: scale(1.05); }
.srp-product-badge {
  position: absolute; top: 10px; left: 10px; font-size: 9px; font-weight: 700; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 99px; background: var(--primary); color: #fff;
}
.srp-product-badge.new     { background: #16a34a; }
.srp-product-badge.premium { background: #7c3aed; }
.srp-product-body { padding: 16px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.srp-product-name  { font-size: 14px; font-weight: 700; color: var(--text-dark); line-height: 1.3; }
.srp-product-price { font-size: 14px; font-weight: 700; color: var(--primary); }
.srp-product-arrow { margin-top: auto; padding-top: 10px; font-size: 12px; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 4px; }

/* Page result rows */
.srp-pages-list { display: flex; flex-direction: column; gap: 3px; }
.srp-page-row {
  display: flex; align-items: center; gap: 16px; padding: 15px 20px;
  background: #fff; border-radius: 10px; border: 1.5px solid var(--gray-100);
  text-decoration: none; color: inherit; transition: border-color var(--transition), box-shadow var(--transition);
}
.srp-page-row:hover { border-color: var(--primary); box-shadow: 0 2px 14px rgba(238,90,42,.08); }
.srp-page-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  background: rgba(238,90,42,.08); display: flex; align-items: center;
  justify-content: center; font-size: 17px; color: var(--primary);
}
.srp-page-info { flex: 1; }
.srp-page-name { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.srp-page-desc { font-size: 13px; color: var(--text-medium); margin-top: 2px; }
.srp-page-arrow { margin-left: auto; color: var(--text-light); flex-shrink: 0; font-size: 12px; }

/* Voucher cards */
.srp-vouchers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.srp-voucher-card {
  background: #fff; border-radius: 12px; padding: 22px 20px;
  border: 1.5px dashed var(--gray-200); text-decoration: none; color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition); display: block;
}
.srp-voucher-card:hover { border-color: var(--primary); box-shadow: 0 4px 18px rgba(238,90,42,.1); }
.srp-voucher-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 99px; background: rgba(238,90,42,.08); color: var(--primary); margin-bottom: 10px;
}
.srp-voucher-name { font-size: 15px; font-weight: 800; color: var(--text-dark); margin-bottom: 6px; }
.srp-voucher-desc { font-size: 13px; color: var(--text-medium); margin-bottom: 14px; line-height: 1.5; }
.srp-voucher-code {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
  background: var(--bg-light); border: 1.5px dashed var(--gray-200);
  border-radius: 7px; font-size: 12px; font-weight: 700; font-family: monospace; color: var(--text-dark);
}

/* Empty state */
.srp-empty { text-align: center; padding: 80px 20px; }
.srp-empty-icon { font-size: 52px; color: var(--gray-200); margin-bottom: 20px; }
.srp-empty h3 { font-size: 22px; font-weight: 800; color: var(--text-dark); margin-bottom: 10px; }
.srp-empty p  { font-size: 15px; color: var(--text-medium); max-width: 420px; margin: 0 auto 28px; }
.srp-empty-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Responsive */
@media (max-width: 1024px) { .srp-products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
  .srp-hero-inner { flex-direction: column; align-items: flex-start; }
  .srp-inline-bar { min-width: unset; width: 100%; }
  .srp-products-grid { grid-template-columns: repeat(2, 1fr); }
  .srp-vouchers-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .srp-vouchers-grid { grid-template-columns: 1fr; }
  .srp-filter-btn { padding: 6px 12px; font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════
   CHECKOUT PAGE  (co-)
   ═══════════════════════════════════════════════════════════════ */

.co-wrap {
  background: #fafafa;
  padding-top: 80px;
  min-height: 100vh;
}

.co-page-header {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  padding: 18px 0 14px;
  margin-bottom: 24px;
}
.co-page-header .container {
  display: flex;
  align-items: center;
  gap: 16px;
}
.co-page-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}
.co-page-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}
.co-breadcrumb {
  font-size: 13px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
}
.co-breadcrumb a { color: var(--primary); text-decoration: none; }
.co-breadcrumb a:hover { text-decoration: underline; }
.co-breadcrumb .sep { color: var(--gray-300); }
.co-breadcrumb .current { color: var(--text-medium); }

.co-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
  padding-bottom: 48px;
}

.co-main { min-width: 0; }

.co-sidebar {
  position: sticky;
  top: 88px;
}

/* ── Panels ──────────────────────────────────────────── */
.co-section {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}
.co-section-vip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff9f7;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin-top: 12px;
  margin-bottom: 15px;
}
.co-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-200);
  background: #fafafa;
}
.co-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.co-section-title i { color: var(--primary); font-size: 15px; }
.co-section-body { padding: 18px; }

/* ── Cart table head ────────────────────────────────── */
.co-table-head {
  display: grid;
  grid-template-columns: 80px 1fr 110px 90px 36px;
  gap: 8px;
  padding: 8px 18px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-light);
  border-bottom: 1px solid var(--gray-200);
  background: #fafafa;
}
.co-table-head span:nth-child(3),
.co-table-head span:nth-child(4) { text-align: center; }

/* ── Cart item row ──────────────────────────────────── */
.co-item-row {
  display: grid;
  grid-template-columns: 80px 1fr 110px 90px 36px;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-200);
  transition: background .15s;
}
.co-item-row:last-child { border-bottom: none; }
.co-item-row:hover { background: #fdf5f2; }

.co-item-img img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--gray-200);
  display: block;
}

.co-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 3px;
}
.co-item-meta {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 8px;
}
.co-item-voucher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: 2px dashed var(--gray-500);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  margin-bottom: 5px;
  text-decoration: none;
}
.co-item-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.co-item-edit {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.co-item-edit:hover { text-decoration: underline; }
.co-item-remove {
  font-size: 12px;
  color: var(--text-light);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s;
}
.co-item-remove:hover { color: #e12226; }

.co-qty-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  overflow: hidden;
  width: 100px;
  margin: 0 auto;
}
.co-qty-btn {
  width: 32px;
  height: 34px;
  border: none;
  background: #f5f5f5;
  color: var(--text-dark);
  font-size: 16px;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.co-qty-btn:hover { background: var(--gray-200); }
.co-qty-input {
  width: 36px;
  height: 34px;
  border: none;
  border-left: 1px solid var(--gray-300);
  border-right: 1px solid var(--gray-300);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  background: #fff;
  -moz-appearance: textfield;
}
.co-qty-input::-webkit-outer-spin-button,
.co-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.co-item-price { text-align: center; }
.co-item-price-reg {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  display: block;
}
.co-item-price-was {
  font-size: 13px;
  color: var(--text-light);
  text-decoration: line-through;
  display: block;
}
.co-item-price-plus {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  display: block;
}

.co-item-del {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 15px;
  padding: 4px;
  transition: color .15s;
}
.co-item-del:hover { color: #e12226; }

/* ── Delivery address grid ─────────────────────────── */
.co-addr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.co-addr-card {
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .2s;
  position: relative;
}
.co-addr-card:hover { border-color: var(--primary); }
.co-addr-card.selected {
  border-color: var(--primary);
  background: #fff5f2;
}
.co-addr-card.selected::after {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--primary);
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 16px;
}
.co-addr-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
  padding-right: 24px;
}
.co-addr-text {
  font-size: 12px;
  color: var(--text-medium);
  line-height: 1.5;
  margin-bottom: 10px;
}
.co-addr-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.co-addr-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--gray-300);
  background: #fff;
  color: var(--text-medium);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .15s;
}
.co-addr-btn:hover { border-color: var(--primary); color: var(--primary); }
.co-addr-btn.deliver {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.co-addr-btn.deliver:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.co-addr-btn.danger:hover { border-color: #e12226; color: #e12226; }
.co-addr-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: 2px dashed var(--primary);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.co-addr-add:hover { background: #fff5f2; }

/* ── Radio options ───────────────────────────────────── */
.co-radio-group { display: flex; flex-direction: column; gap: 8px; }
.co-radio-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.co-radio-opt:hover { border-color: var(--primary); }
.co-radio-opt.selected { border-color: var(--primary); background: #fff5f2; }
.co-radio-opt input[type="radio"] { margin-top: 2px; accent-color: var(--primary); }
.co-radio-content { flex: 1; }
.co-radio-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.co-radio-desc { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.co-radio-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: auto;
  flex-shrink: 0;
}
.co-radio-badge.free { background: #dcfce7; color: #16a34a; }
.co-radio-badge.selected-b { background: var(--primary); color: #fff; }
.co-radio-badge.extra { background: #fff5f2; color: var(--primary); border: 1px solid var(--primary); }

.co-insurance-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fff9f7;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin-top: 12px;
}
.co-insurance-row input[type="checkbox"] { accent-color: var(--primary); width: 16px; height: 16px; }
.co-insurance-row label { font-size: 13px; color: var(--text-medium); cursor: pointer; }
.co-insurance-row .ins-price { font-weight: 700; color: var(--text-dark); margin-left: auto; }

/* ── Payment options ────────────────────────────────── */
.co-pay-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  margin-bottom: 8px;
}
.co-pay-opt:hover { border-color: var(--primary); }
.co-pay-opt.active { border-color: var(--primary); background: #fff5f2; }
.co-pay-opt input[type="radio"] { margin-top: 3px; accent-color: var(--primary); }
.co-pay-opt-content { flex: 1; }
.co-pay-opt-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.co-pay-opt-sub { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.co-pay-logos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.co-pay-logos img { height: 22px; }
.co-pay-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: #fff3cd;
  color: #855c00;
}
.co-unavail { opacity: .5; cursor: not-allowed; }
.co-card-frame {
  margin-top: 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: #fafafa;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.co-card-frame-placeholder {
  font-size: 13px;
  color: var(--text-light);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Order summary sidebar ──────────────────────────── */
.co-sum-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 14px;
}
.co-sum-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-200);
  background: #fafafa;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.co-sum-body { padding: 14px 18px; }
.co-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--gray-100);
}
.co-sum-row:last-child { border-bottom: none; }
.co-sum-row .lbl { color: var(--text-medium); }
.co-sum-row .val { font-weight: 600; color: var(--text-dark); }
.co-sum-row.disc .val { color: #16a34a; }
.co-sum-row.total {
  padding-top: 12px;
  margin-top: 4px;
  border-bottom: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}
.co-sum-row.total .val { color: var(--primary); font-size: 20px; }

/* ── Voucher section ────────────────────────────────── */
.co-vou-wrap {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.co-vou-head { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.co-vou-head i { color: var(--primary); }
.co-vou-input-row { display: flex; margin-bottom: 8px; }
.co-vou-input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--gray-300);
  border-right: none;
  border-radius: 6px 0 0 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-dark);
  outline: none;
  transition: border-color .2s;
}
.co-vou-input:focus { border-color: var(--primary); }
.co-vou-btn {
  height: 38px;
  padding: 0 16px;
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
}
.co-vou-btn:hover { background: var(--primary-dark); }
.co-vou-hint { font-size: 11px; color: var(--text-light); line-height: 1.5; margin-bottom: 8px; }
.co-vou-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #dcfce7;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #16a34a;
  margin-bottom: 6px;
}
.co-vou-applied-remove {
  background: none;
  border: none;
  color: #16a34a;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}
.co-vou-error { font-size: 12px; color: #e12226; margin-top: 4px; }

/* ── Billing details sidebar card ───────────────────── */
.co-bill-wrap {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.co-bill-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.co-bill-edit {
  font-size: 12px;
  color: var(--primary);
  background: none;
  border: 1px solid var(--primary);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  font-weight: 600;
  transition: all .15s;
}
.co-bill-edit:hover { background: var(--primary); color: #fff; }
.co-bill-row {
  display: flex;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid var(--gray-100);
}
.co-bill-row:last-child { border-bottom: none; }
.co-bill-row .lbl { width: 80px; color: var(--text-light); flex-shrink: 0; }
.co-bill-row .val { color: var(--text-dark); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Checkout button ────────────────────────────────── */
.co-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .2s, transform .1s;
  margin-bottom: 12px;
}
.co-checkout-btn:hover { opacity: .92; transform: translateY(-1px); }
.co-checkout-btn:active { transform: translateY(0); }
.co-checkout-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.co-pay-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.co-pay-icons img { height: 24px; }

.co-afterpay-note {
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
  margin-top: 8px;
}
.co-afterpay-note strong { color: var(--text-dark); }

/* ── Plus savings banner (plus checkout) ───────────── */
.co-plus-savings-banner {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #15803d;
  text-align: center;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.co-plus-savings-banner strong { font-size: 16px; }

/* ── Plus upsell panel (regular checkout only) ────── */
.co-plus-upsell {
  background: linear-gradient(135deg, #fff5f2 0%, #fff 100%);
  border: 2px solid var(--primary);
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
  margin-bottom: 14px;
  text-align: center;
}
.co-plus-upsell-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.co-plus-upsell-save {
  font-size: 26px;
  font-weight: 900;
  color: var(--primary);
  margin: 4px 0;
}
.co-plus-upsell-sub {
  font-size: 12px;
  color: var(--text-medium);
  margin-bottom: 12px;
}
.co-plus-upsell-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}
.co-plus-upsell-btn:hover { background: var(--primary-dark); }

/* ── Subscriber Deal Lock Wrapper ─────────────────────────────────── */
.subscriber-locked-wrap {
  position: relative; width: 100%;
  background: #090d16; border-radius: 20px;
  overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.4);
  margin: 32px 0; min-height: 800px;
}
.sub-bg-glows {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; z-index: 1; pointer-events: none;
}
.sub-glow {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .45;
  animation: subGlowFloat 15s infinite alternate ease-in-out;
}
.sub-glow-1 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(37,99,235,.6) 0%, rgba(37,99,235,0) 70%);
  top: -50px; left: -50px;
}
.sub-glow-2 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(255,107,0,.5) 0%, rgba(255,107,0,0) 70%);
  bottom: -100px; right: -50px; animation-delay: -5s;
}
.sub-glow-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(99,102,241,.4) 0%, rgba(99,102,241,0) 70%);
  top: 20%; left: 35%; animation-delay: -10s;
}
@keyframes subGlowFloat {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px,30px) scale(1.15); }
}
.subscriber-locked-wrap .slw-content {
  opacity: .35; filter: blur(6px);
  pointer-events: none; user-select: none;
  position: relative; z-index: 2;
  background: #fff;
}
.subscription-overlay-card {
  position: absolute; top: 60px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: linear-gradient(135deg, rgba(23,37,84,.9) 0%, rgba(15,23,42,.92) 100%);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,107,0,.25); border-radius: 24px; padding: 50px 40px;
  width: calc(100% - 80px); max-width: 620px;
  box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15), 0 0 40px rgba(255,107,0,.15);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; color: #f8fafc;
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s;
}
.subscription-overlay-card:hover {
  transform: translateX(-50%) translateY(-4px); border-color: rgba(255,107,0,.45);
  box-shadow: 0 35px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2), 0 0 50px rgba(255,107,0,.25);
}
.sub-badge {
  background: linear-gradient(135deg, #ff7e40 0%, #ff5100 100%);
  color: #fff; padding: 6px 16px; border-radius: 30px;
  font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 22px; box-shadow: 0 4px 15px rgba(255,81,0,.35);
}
.subscription-overlay-card h2 {
  font-size: 32px; font-weight: 800; color: #fff;
  margin-bottom: 14px; line-height: 1.25; letter-spacing: -.5px;
}
.subscription-overlay-card .sub-intro {
  font-size: 15.5px; color: #cbd5e1; max-width: 500px;
  line-height: 1.6; margin-bottom: 28px;
}
.sub-price-box {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px; padding: 24px 30px; margin-bottom: 30px;
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.sub-price-label {
  font-size: 12px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 4px;
}
.sub-price-value { display: flex; align-items: baseline; justify-content: center; }
.sub-price-value .currency { font-size: 26px; font-weight: 700; color: #ff6b00; align-self: flex-start; margin-top: 4px; }
.sub-price-value .amount { font-size: 64px; font-weight: 800; color: #fff; line-height: 1; }
.sub-price-value .period { font-size: 15px; color: #94a3b8; font-weight: 500; margin-left: 4px; }
.sub-validity-note {
  background: rgba(255,107,0,.1); color: #ff945e;
  font-size: 13.5px; font-weight: 600; padding: 6px 14px; border-radius: 30px;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; border: 1px solid rgba(255,107,0,.2);
}
.sub-features {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px;
  text-align: left; width: 100%; max-width: 500px;
}
.sub-features li { font-size: 14px; color: #e2e8f0; display: flex; align-items: center; gap: 8px; }
.sub-features li i { color: #ff6b00; font-size: 15px; }
.btn-sub-join {
  background: linear-gradient(135deg, #ff7e40 0%, #ff5100 100%);
  color: #fff; border: none; padding: 16px 36px;
  font-size: 17px; font-weight: 700; border-radius: 12px;
  width: 100%; max-width: 420px; cursor: pointer;
  box-shadow: 0 10px 20px rgba(255,81,0,.35);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  position: relative; overflow: hidden; text-decoration: none;
}
.btn-sub-join::after {
  content: ''; position: absolute; top: -50%; left: -60%;
  width: 30%; height: 200%; background: rgba(255,255,255,.2);
  transform: rotate(30deg); transition: 0s;
}
.btn-sub-join:hover::after { left: 130%; transition: all .6s ease-in-out; }
.btn-sub-join:hover {
  transform: translateY(-2px); color: #fff;
  box-shadow: 0 15px 30px rgba(255,81,0,.5), 0 0 15px rgba(37,99,235,.3);
  background: linear-gradient(135deg, #ff945e 0%, #ff621a 100%);
}
.btn-sub-join:active { transform: translateY(0); }
.sub-secure-footer {
  font-size: 12px; color: #94a3b8; margin-top: 14px;
  display: flex; align-items: center; gap: 6px; justify-content: center;
}
@media (max-width: 640px) {
  .subscriber-locked-wrap { min-height: 700px; }
  .subscription-overlay-card { padding: 32px 20px; width: calc(100% - 32px); }
  .subscription-overlay-card h2 { font-size: 24px; }
  .sub-price-value .amount { font-size: 50px; }
  .sub-features { grid-template-columns: 1fr; }
}

/* ── Customers Also Bought ──────────────────────────── */
.co-also-section { margin-top: 32px; margin-bottom: 32px; }
.co-also-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.co-also-title::after { content: ""; flex: 1; height: 2px; background: var(--gray-200); border-radius: 2px; }
.co-also-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.co-also-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.co-also-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.co-also-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-bottom: 1px solid var(--gray-200); }
.co-also-body { padding: 10px; }
.co-also-name { font-size: 12px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; line-height: 1.4; min-height: 34px; }
.co-also-rrp { font-size: 11px; color: var(--text-light); text-decoration: line-through; margin-bottom: 2px; }
.co-also-price-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.co-also-save { font-size: 10px; font-weight: 700; background: #dcfce7; color: #16a34a; padding: 2px 6px; border-radius: 20px; }
.co-also-price { font-size: 15px; font-weight: 800; color: var(--primary); }
.co-also-qty {
  width: 100%;
  height: 30px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  padding: 0 6px;
  font-size: 12px;
  margin-bottom: 6px;
  font-family: inherit;
  color: var(--text-dark);
}
.co-also-btn {
  display: block;
  width: 100%;
  padding: 7px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  text-align: center;
}
.co-also-btn:hover { background: var(--primary-dark); }


/* ═══════════════════════════════════════════════════════════════
   JOIN / SIGN-UP PAGE  (jn-)
   ═══════════════════════════════════════════════════════════════ */

.jn-wrap {
  background: #fafafa;
  padding-top: 80px;
  min-height: 100vh;
}
@media (max-width: 767px) {
  .jn-wrap { padding-top: 10px; }
  .jn-layout { padding-top: 0; }
}

/* ── Promo hero (full-bleed split) ──────────────────── */
.jn-promo {
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 310px;
}
.jn-promo-left {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 52px 5% 52px 5%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.jn-promo-content { max-width: 540px; width: 100%; }
.jn-promo-eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.75);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jn-promo-headline {
  font-size: 33px;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 12px;
}
.jn-promo-sub {
  font-size: 14px;
  color: rgba(255,255,255,.88);
  margin-bottom: 20px;
  line-height: 1.55;
}
.jn-promo-feats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.jn-promo-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.jn-promo-feat i {
  width: 22px;
  height: 22px;
  background: rgba(255,255,255,.22);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}
.jn-promo-price-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.jn-promo-price-badge {
  background: #fff;
  color: var(--primary);
  padding: 7px 18px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 900;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.jn-promo-price-badge small { font-size: 12px; font-weight: 600; color: var(--primary-dark); }
.jn-promo-guar {
  font-size: 11px;
  color: rgba(255,255,255,.8);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.jn-promo-right {
  position: relative;
  overflow: hidden;
}
.jn-promo-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 310px;
}
.jn-promo-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(212,78,32,.45) 0%, transparent 45%);
  z-index: 1;
  pointer-events: none;
}
.jn-promo-social-proof {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.jn-promo-stars { color: #fbbf24; font-size: 13px; letter-spacing: 2px; }
.jn-promo-review-text { font-size: 11px; color: rgba(255,255,255,.82); line-height: 1.4; }

.jn-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
  padding: 32px 0 56px;
}

.jn-form-col { min-width: 0; }

.jn-sidebar-col {
  position: sticky;
  top: 88px;
}

/* ── Form card ─────────────────────────────────────── */
.jn-form-head {
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--gray-200);
  background: #fafafa;
}
.jn-form-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.jn-form-sub {
  font-size: 13px;
  color: var(--text-light);
}
.jn-form-body { padding: 24px 28px; }

.jn-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.jn-field { margin-bottom: 16px; }
.jn-field:last-of-type { margin-bottom: 0; }
.jn-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-medium);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.jn-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-dark);
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.jn-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(238,90,42,.1);
}
.jn-input::placeholder { color: var(--text-light); }
.jn-input-icon-wrap {
  position: relative;
}
.jn-input-icon-wrap .jn-input { padding-left: 40px; }
.jn-input-icon-wrap i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  font-size: 14px;
  pointer-events: none;
}
.jn-pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 14px;
  padding: 0;
}
.jn-pw-toggle:hover { color: var(--text-dark); }

.jn-hint {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 5px;
  display: block;
}
.jn-field.has-error .jn-input {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220,53,69,.1);
}
.jn-field.has-error .jn-label { color: #dc3545; }
.jn-terms-row.has-error { outline: 2px solid #dc3545; border-radius: 6px; padding: 6px 8px; }
.jn-global-error {
  background: #fff3f3;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  color: #dc3545;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jn-field-errors {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 11px;
  color: #dc3545;
  font-weight: 600;
}

.jn-or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--text-light);
  font-size: 12px;
}
.jn-or-divider::before,
.jn-or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

.jn-social-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.jn-social-btn {
  flex: 1;
  height: 42px;
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  text-decoration: none;
}
.jn-social-btn:hover { border-color: var(--primary); background: #fff5f2; }
.jn-social-btn img { height: 18px; }

.jn-terms-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0;
}
.jn-terms-row input[type="checkbox"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}
.jn-terms-row label {
  font-size: 12px;
  color: var(--text-medium);
  line-height: 1.5;
  cursor: pointer;
}
.jn-terms-row a { color: var(--primary); text-decoration: none; }
.jn-terms-row a:hover { text-decoration: underline; }

.jn-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
  letter-spacing: .02em;
  margin-top: 4px;
}
.jn-submit-btn:hover { opacity: .92; transform: translateY(-1px); }
.jn-submit-btn:active { transform: translateY(0); }
.jn-submit-btn.plus-plan {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.jn-signin-link {
  text-align: center;
  font-size: 13px;
  color: var(--text-medium);
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}
.jn-signin-link a { color: var(--primary); font-weight: 600; text-decoration: none; }
.jn-signin-link a:hover { text-decoration: underline; }

/* ── Plan chooser (centered, above layout) ──────────── */
.jn-plan-chooser {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 0 0;
}
.jn-chooser-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 14px;
}
.jn-plan-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--gray-100);
  border-radius: 18px;
  padding: 6px;
  gap: 6px;
  width: 500px;
  max-width: calc(100% - 32px);
  box-shadow: 0 4px 20px rgba(0,0,0,.09);
  margin-bottom: 10px;
}
.jn-plan-tab {
  padding: 18px 12px 16px;
  border-radius: 13px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-medium);
  cursor: pointer;
  transition: all .28s cubic-bezier(.4,0,.2,1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
}
.jn-plan-tab i { font-size: 20px; margin-bottom: 3px; transition: transform .28s; }
.jn-plan-tab .tab-name { font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
.jn-plan-tab .tab-sub { font-size: 11px; font-weight: 500; opacity: .75; }
/* Plus tab active: orange gradient + glow pulse */
@keyframes jnActiveGlow {
  0%, 100% { box-shadow: 0 4px 18px rgba(238,90,42,.38); }
  50%       { box-shadow: 0 4px 28px rgba(238,90,42,.6); }
}
.jn-plan-tab.jn-plus-tab.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border: 2px solid var(--primary-dark);
  animation: jnActiveGlow 2.2s ease-in-out infinite;
}
.jn-plan-tab.jn-plus-tab.active i { transform: scale(1.15); }
/* Plus tab when Free is selected: pulse to draw back */
@keyframes jnPlusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(238,90,42,0); background: rgba(238,90,42,.07); }
  50%       { box-shadow: 0 0 0 6px rgba(238,90,42,.2); background: rgba(238,90,42,.14); }
}
.jn-plan-tab.jn-plus-tab:not(.active) {
  animation: jnPlusPulse 1.9s ease-in-out infinite;
  color: var(--primary);
}
/* Free/other tab active */
.jn-plan-tab:not(.jn-plus-tab).active {
  background: #fff;
  color: var(--primary);
  border: 2px solid var(--primary);
  box-shadow: 0 2px 12px rgba(238,90,42,.18);
}
/* "Best Value" badge clipped on top of Plus tab */
.jn-tab-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #16a34a;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(22,163,74,.35);
}

.jn-plan-card {
  background: #fff;
  border: 2px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.jn-plan-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); border-color: var(--primary); }
.jn-plan-card.selected { border-color: var(--primary); box-shadow: 0 4px 16px rgba(238,90,42,.18); }
.jn-plan-card.plus.selected { border-color: var(--primary); }

.jn-plan-card-head {
  padding: 18px 20px 14px;
  background: #fff;
  position: relative;
}
.jn-plan-card.plus .jn-plan-card-head {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
}
.jn-plan-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #fff;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.jn-plan-name {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jn-plan-card.plus .jn-plan-name { color: #fff; }
.jn-plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.jn-plan-price .amount {
  font-size: 28px;
  font-weight: 900;
  color: var(--text-dark);
  line-height: 1;
}
.jn-plan-card.plus .jn-plan-price .amount { color: #fff; }
.jn-plan-price .period {
  font-size: 13px;
  color: var(--text-light);
}
.jn-plan-card.plus .jn-plan-price .period { color: rgba(255,255,255,.8); }
.jn-plan-price .per-mo {
  font-size: 12px;
  color: var(--text-light);
  margin-left: 4px;
}
.jn-plan-card.plus .jn-plan-price .per-mo { color: rgba(255,255,255,.7); }

.jn-plan-features {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--gray-100);
}
.jn-plan-card.plus .jn-plan-features { border-top: 1px solid rgba(255,255,255,.15); }
.jn-pf-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-medium);
  padding: 5px 0;
}
.jn-pf-item i {
  font-size: 13px;
  margin-top: 1px;
  flex-shrink: 0;
}
.jn-pf-item.has i { color: #16a34a; }
.jn-pf-item.no  i { color: var(--gray-300); }
.jn-pf-item.no span { color: var(--text-light); }
.jn-pf-item strong { color: var(--text-dark); font-weight: 700; }

.jn-plan-select-btn {
  display: block;
  width: calc(100% - 40px);
  margin: 0 20px 18px;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid var(--primary);
  background: transparent;
  color: var(--primary);
  transition: all .2s;
  text-decoration: none;
}
.jn-plan-select-btn.active,
.jn-plan-select-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* ── Form card glow when Plus is active ─────────────── */
.jn-form-card {
  background: #fff;
  border: 2px solid var(--gray-200);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .35s, box-shadow .35s;
}
.jn-form-card.plus-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(238,90,42,.1), 0 8px 32px rgba(238,90,42,.08);
}
.jn-form-card.plus-active .jn-form-head {
  background: linear-gradient(135deg, #fff5f2 0%, #fafafa 100%);
}

/* ===========================
   START CREATING MODAL
=========================== */
body.sc-modal-open { overflow: hidden; }

.sc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.sc-backdrop.active { opacity: 1; visibility: visible; }

.sc-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(.97);
  opacity: 0;
  visibility: hidden;
  z-index: 10002;
  background: #fff;
  border-radius: 24px;
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 40px 40px 36px;
  box-shadow: 0 40px 120px rgba(0,0,0,.3);
  transition: opacity .3s, transform .35s cubic-bezier(.34,1.4,.64,1), visibility .3s;
}
.sc-modal.active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.sc-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.sc-modal-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.25;
  margin: 0;
}
.sc-modal-title .sc-product-name { color: var(--primary); }
.sc-modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--gray-100);
  color: var(--text-medium);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, color .18s, transform .18s;
  margin-top: 2px;
}
.sc-modal-close:hover { background: var(--gray-200); color: var(--text-dark); transform: rotate(90deg); }
.sc-modal-sub {
  font-size: 14px;
  color: var(--text-medium);
  margin: 0 0 28px;
}

/* Cards grid */
.sc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: center;
}

/* Base card */
.sc-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--gray-200);
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  background: #fff;
  transition: border-color .28s, box-shadow .38s, transform .38s cubic-bezier(.34,1.3,.64,1);
  cursor: pointer;
}
.sc-card:hover {
  border-color: var(--primary);
  box-shadow: 0 24px 60px rgba(238,90,42,.22);
  transform: translateY(-10px);
  text-decoration: none;
  color: inherit;
}

/* Shimmer sweep on hover */
.sc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    transparent 20%,
    rgba(255,255,255,.6) 45%,
    rgba(255,255,255,.7) 50%,
    rgba(255,255,255,.6) 55%,
    transparent 80%
  );
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
  z-index: 10;
  transition: none;
}
.sc-card:hover::after {
  animation: scShimmer .7s ease forwards;
}
@keyframes scShimmer {
  from { transform: translateX(-130%) skewX(-18deg); }
  to   { transform: translateX(160%) skewX(-18deg); }
}

/* Image section */
.sc-card-img {
  width: 100%;
  height: 175px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: var(--gray-100);
}
.sc-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
  display: block;
}
.sc-card:hover .sc-card-img img { transform: scale(1.1); }

/* Warm color wash over image on hover */
.sc-card-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(238,90,42,.3) 0%, rgba(255,140,66,.15) 100%);
  opacity: 0;
  transition: opacity .38s ease;
  z-index: 1;
  pointer-events: none;
}
.sc-card:hover .sc-card-img::before { opacity: 1; }

/* Card body */
.sc-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

/* Badge */
.sc-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  z-index: 4;
  box-shadow: 0 2px 12px rgba(238,90,42,.45);
}

.sc-card-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: color .25s;
}
.sc-card:hover .sc-card-title { color: var(--primary); }

.sc-card-desc {
  font-size: 13px;
  color: var(--text-medium);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 20px;
}

.sc-card-btn {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border-radius: 9px;
  padding: 10px 22px;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .2s, transform .32s ease, box-shadow .2s;
  transform: translateY(5px);
  opacity: .85;
}
.sc-card:hover .sc-card-btn {
  background: var(--primary-dark);
  transform: translateY(0);
  opacity: 1;
  box-shadow: 0 4px 16px rgba(238,90,42,.35);
}

/* ── Featured card ──────────────────────── */
.sc-card.sc-featured {
  border-color: var(--primary);
  transform: scale(1.07);
  z-index: 1;
  box-shadow: 0 12px 40px rgba(238,90,42,.16);
  animation: scFeaturedPulse 2.6s ease-in-out infinite;
}
.sc-card.sc-featured:hover {
  transform: scale(1.07) translateY(-10px);
  box-shadow: 0 28px 70px rgba(238,90,42,.3);
  animation: none;
}
@keyframes scFeaturedPulse {
  0%, 100% { box-shadow: 0 12px 40px rgba(238,90,42,.16), 0 0 0 0 rgba(238,90,42,.2); }
  50%       { box-shadow: 0 12px 40px rgba(238,90,42,.24), 0 0 0 8px rgba(238,90,42,0); }
}

/* Animated glowing top bar on featured card */
.sc-card.sc-featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), #ff8c42, #ffc17a, #ff8c42, var(--primary));
  background-size: 300% 100%;
  animation: scBarFlow 2s linear infinite;
  z-index: 5;
  pointer-events: none;
}
@keyframes scBarFlow {
  0%   { background-position: 100% 0; }
  100% { background-position: -200% 0; }
}

/* ── Mobile ─────────────────────────────── */
@media (max-width: 640px) {
  .sc-modal { padding: 24px 16px 20px; }
  .sc-modal-title { font-size: 18px; }
  .sc-cards { grid-template-columns: 1fr; gap: 28px; }
  .sc-card { flex-direction: row; transform: none; border-radius: 14px; }
  .sc-card:hover { transform: translateY(-4px); }
  .sc-card.sc-featured { transform: none; animation: none; box-shadow: 0 6px 22px rgba(238,90,42,.16); }
  .sc-card.sc-featured:hover { transform: translateY(-4px); animation: none; }
  .sc-card-img { width: 120px; height: auto; min-height: 140px; flex-shrink: 0; border-radius: 0; }
  .sc-card-body { text-align: left; align-items: flex-start; padding: 14px 16px 16px 14px; }
  .sc-badge { top: 8px; right: 8px; }
  .sc-card-btn { transform: none; opacity: 1; }
}

/* ── Plus highlight slide-in animation ──────────────── */
@keyframes jnSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jn-plus-highlight {
  animation: jnSlideDown .32s ease;
}

.jn-guarantee {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #dcfce7;
  border-radius: 10px;
  font-size: 12px;
  color: #15803d;
  font-weight: 600;
  margin-bottom: 14px;
}
.jn-guarantee i { font-size: 18px; flex-shrink: 0; }

.jn-trust-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jn-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-medium);
}
.jn-trust-item i { color: var(--primary); font-size: 13px; width: 16px; text-align: center; }

/* ── Plus features expanded (inline in form, shown when Plus is chosen) ── */
.jn-plus-highlight {
  background: linear-gradient(135deg, #fff5f2 0%, #fff 100%);
  border: 2px solid var(--primary);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 20px;
}
.jn-plus-highlight-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jn-plus-perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.jn-plus-perk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-medium);
  line-height: 1.4;
}
.jn-plus-perk i { color: var(--primary); font-size: 13px; margin-top: 1px; flex-shrink: 0; }
.jn-plus-perk strong { color: var(--text-dark); display: block; font-size: 12px; }

.jn-plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff5f2;
  border: 1px solid var(--primary);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .jn-promo { grid-template-columns: 1fr; }
  .jn-promo-right { min-height: 220px; order: -1; }
  .jn-promo-left { justify-content: flex-start; padding: 36px 24px; }
  .jn-promo-headline { font-size: 26px; }
  .jn-layout { grid-template-columns: 1fr; }
  .jn-sidebar-col { position: static; }
  .jn-plan-toggle { width: 100%; }
}
@media (max-width: 600px) {
  .jn-promo-headline { font-size: 22px; }
  .jn-promo-left { padding: 28px 18px; }
  .jn-promo-right img { min-height: 180px; }
  .jn-plan-chooser { padding: 21px 0 0; }
  .jn-plan-tab { padding: 14px 8px 12px; }
  .jn-plan-tab i { font-size: 17px; }
  .jn-plan-tab .tab-name { font-size: 14px; }
  .jn-form-head,
  .jn-form-body { padding-left: 18px; padding-right: 18px; }
  .jn-field-row { grid-template-columns: 1fr; gap: 0; }
  .jn-plus-perks { grid-template-columns: 1fr; }
}

/* ── Birthday section ───────────────────────────────── */
.co-bday-section { margin-bottom: 32px; }
.co-bday-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  color: #fff;
}
.co-bday-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.co-bday-sub { font-size: 13px; opacity: .85; margin-bottom: 18px; }
.co-bday-selects { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.co-bday-select {
  height: 38px;
  padding: 0 10px;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 6px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.co-bday-select option { color: var(--text-dark); background: #fff; }
.co-bday-select:focus { border-color: rgba(255,255,255,.9); }
.co-bday-submit {
  background: #fff;
  color: var(--primary);
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s;
}
.co-bday-submit:hover { opacity: .88; }

/* ── Bottom actions row ─────────────────────────────── */
.co-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
  padding-top: 8px;
}
.co-btn-empty {
  padding: 12px 22px;
  border: none ;
  background: #fff;
  color: var(--text-medium);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.co-btn-empty:hover {color: #e12226; }
.co-btn-checkout-lg {
  padding: 14px 36px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.co-btn-checkout-lg:hover { opacity: .92; transform: translateY(-1px); }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .co-layout { grid-template-columns: 1fr 280px; }
  .co-also-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .co-layout { grid-template-columns: 1fr; }
  .co-sidebar { position: static; }
  .co-item-row { grid-template-columns: 64px 1fr 90px 72px 30px; }
  .co-table-head { grid-template-columns: 64px 1fr 90px 72px 30px; }
  .co-item-img img { width: 64px; height: 64px; }
  .co-also-grid { grid-template-columns: repeat(2, 1fr); }
  .co-actions-row { flex-direction: column; align-items: stretch; }
  .co-btn-checkout-lg,
  .co-btn-empty { justify-content: center; }
}
@media (max-width: 480px) {
  .co-item-row { grid-template-columns: 56px 1fr 76px 28px; }
  .co-table-head { grid-template-columns: 56px 1fr 76px 28px; }
  .co-item-img img { width: 56px; height: 56px; }
  .co-qty-wrap { width: 76px; }
  .co-qty-btn { width: 24px; height: 30px; }
  .co-qty-input { width: 28px; height: 30px; font-size: 12px; }
  .co-bday-selects { flex-direction: column; align-items: center; }
}


/* ================================================================
   VOUCHER PAGE — Page header, clean banner, timer strip, editorial
================================================================ */

/* Page header card — title left, timer + sold right */
.vp-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(to right, transparent 0%, rgba(37,99,235,0.04) 40%, rgba(37,99,235,0.10) 100%);
  border-radius: 0;
  padding: 12px 28px 12px 0;
  margin: 0 0 14px;
  border-bottom: 1px solid rgba(37,99,235,0.1);
}
.vp-page-title {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.4px;
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.vp-page-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 20px;
  background: var(--primary);
  border-radius: 2px;
  flex-shrink: 0;
}
.vp-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.vp-page-header .vp-timer-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.35);
  flex-shrink: 0;
}
.vp-page-header .vp-timer-label .fa-stopwatch { color: var(--primary); }
.vp-page-header .vp-timer-units { flex: 0 0 auto; }
.vp-page-header .vp-timer-unit {
  background: rgba(37,99,235,0.05);
  border-color: rgba(37,99,235,0.14);
  min-width: 40px;
  padding: 4px 7px;
}
.vp-page-header .vp-timer-amt {
  font-size: 16px;
  color: #111;
}
.vp-page-header .vp-timer-per {
  font-size: 7px;
  color: rgba(0,0,0,0.32);
  letter-spacing: 0.6px;
  margin-top: 3px;
}
.vp-page-header .vp-timer-sep {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0,0,0,0.18);
  margin-bottom: 11px;
}
.vp-page-header .vp-timer-sold {
  margin-left: 0;
  font-size: 11px;
  color: rgba(0,0,0,0.45);
  border-left: 1px solid rgba(37,99,235,0.15);
  padding-left: 12px;
  white-space: nowrap;
}
.vp-page-header .vp-timer-sold strong { color: #111; font-weight: 700; }
.vp-page-header .vp-timer-sold .fa-fire { color: var(--primary); }
@media (max-width: 640px) {
  .vp-page-header { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0; }
  .vp-header-right { flex-wrap: wrap; gap: 8px; }
  .vp-page-header .vp-timer-sold { border-left: none; padding-left: 0; }
}

/* Clean banner — image only, no overlay, no text columns */
.pbs-hero-row.vp-banner-clean {
  min-height: 200px;
  display: block;
  overflow: hidden;
}
.pbs-hero-row.vp-banner-clean::before,
.pbs-hero-row.vp-banner-clean::after {
  display: none;
}
.pbs-hero-row.vp-banner-clean img {
  max-height: 500px;
  object-fit: cover;
}

/* Decorative discount badge (right side of hero banner) */
.vp-discount-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px 48px;
  position: relative;
  z-index: 1;
}
.vp-discount-pct {
  font-family: 'Inter', sans-serif;
  font-size: 88px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -6px;
  text-shadow: 0 4px 40px rgba(0,0,0,0.85), 0 0 80px rgba(238,90,42,0.35);
}
.vp-discount-pct span {
  font-size: 0.52em;
  vertical-align: super;
  letter-spacing: 0;
}
.vp-discount-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
  margin-top: 6px;
}

/* Timer strip below banner */
.vp-timer-section {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #111;
  border-radius: 14px;
  padding: 16px 24px;
  margin: 0 0 22px;
}
.vp-timer-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  flex-shrink: 0;
}
.vp-timer-label .fa-stopwatch {
  color: var(--primary);
  margin-right: 5px;
}
.vp-timer-units {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.vp-timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 56px;
}
.vp-timer-amt {
  font-family: 'Courier New', monospace;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vp-timer-per {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.38);
  margin-top: 4px;
}
.vp-timer-sep {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,0.2);
  line-height: 1;
  margin-bottom: 16px;
}
.vp-timer-sold {
  margin-left: auto;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}
.vp-timer-sold strong { color: #fff; }
.vp-timer-sold .fa-fire { color: var(--primary); }

/* Offer editorial content */
.vp-offer-content {
  background: #fff;
  border-radius: 16px;
  margin: 0 0 28px;
  border: 1px solid #ebebeb;
  box-shadow: 0 2px 14px rgba(0,0,0,0.05);
  overflow: hidden;
}
.vp-offer-inner {
  padding: 36px 44px;
  /*max-width: 860px;*/
  max-width: 100%;
}
.vp-offer-heading {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #111;
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: -0.4px;
}
.vp-offer-heading em {
  font-style: normal;
  color: var(--primary);
}
.vp-offer-lead {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  margin: 0 0 24px;
}
.vp-offer-lead strong {
  color: var(--primary);
  font-weight: 700;
}
.vp-offer-subheading {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin: 22px 0 8px;
  padding-top: 20px;
  border-top: 1px solid #f2f2f2;
}
.vp-offer-content p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #555;
  line-height: 1.75;
  margin: 0;
}
.vp-offer-content p strong { color: #222; }

@media (max-width: 768px) {
  .vp-discount-badge { padding: 16px 24px; }
  .vp-discount-pct { font-size: 56px; letter-spacing: -3px; }
  .vp-timer-section { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
  .vp-timer-label { width: 100%; }
  .vp-timer-sold { margin-left: 0; }
  .vp-timer-unit { min-width: 48px; padding: 6px 10px; }
  .vp-timer-amt { font-size: 20px; }
  .vp-offer-inner { padding: 24px 20px; }
  .vp-offer-heading { font-size: 18px; }
}

/* ─── Cart Add / Update Toast ─────────────────────────────────────── */
.toastify {
  background: #fff !important;
  color: #1a1a2e !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.13), 0 1px 6px rgba(0,0,0,.07) !important;
  padding: 0 !important;
  overflow: hidden;
  border: none !important;
}
.toastify #toast-container { background: none; }
.toastify .toast.toast-success {
  background: none !important;
  border: none !important;
  padding: 14px 16px !important;
  display: flex;
  align-items: stretch;
  color: inherit !important;
}
.toastify .toast-message { width: 100%; }
.toastify .adding-to-cart {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  float: none !important;
}
.toastify .adding-to-cart .image.col-3 {
  width: 60px !important;
  flex: 0 0 60px;
  max-width: 60px;
  padding: 0 !important;
}
.toastify .adding-to-cart .image img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.toastify .adding-to-cart .info.col-9 {
  flex: 1;
  min-width: 0;
  padding: 0 !important;
}
.toastify .adding-to-cart .info p.no-margin {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  line-height: 1.35;
  margin: 0 0 3px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.toastify .adding-to-cart .info .text-danger small {
  color: #16a34a !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
}
.toastify .adding-to-cart .info button.btn-success {
  margin-top: 9px;
  background: var(--primary, #ee5a2a) !important;
  border: none !important;
  border-radius: 7px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 7px 10px !important;
  width: 100% !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: opacity .15s;
}
.toastify .adding-to-cart .info button.btn-success:hover { opacity: .88; }

/* ===========================
   THEMES / TEMPLATES PAGE
=========================== */
.themes-page-wrap { background: #fff; padding-top: 0; }

.themes-page-hero {
  background: #fff;
  padding: 40px 0 18px;
  text-align: center;
  border-bottom: 1px solid var(--gray-100);
}
.themes-page-title {
  font-size: clamp(22px, 3.5vw, 34px);
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  font-family: "Inter", sans-serif;
}
.themes-page-subtitle {
  font-size: 15px;
  color: var(--text-medium);
  max-width: 480px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
}
.themes-filter-section {
  padding: 14px 0 12px;
  background: linear-gradient(180deg, var(--gray-50) 0%, #fff 100%);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: var(--header-h, 70px);
  z-index: 100;
}
.themes-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.themes-filter-nav-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  background: #fff;
  color: var(--text-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: border-color .15s, color .15s, box-shadow .15s;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.themes-filter-nav-btn:hover { border-color: var(--primary); color: var(--primary); }
.themes-filter-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  flex: 1;
  padding: 5px 4px;
  background: var(--gray-100);
  border-radius: 50px;
  cursor: grab;
}
.themes-filter-scroll:active { cursor: grabbing; }
.themes-filter-scroll::-webkit-scrollbar { display: none; }
.themes-filter-tab {
  padding: 8px 18px;
  border-radius: 50px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-medium);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: "Inter", sans-serif;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.themes-filter-tab:hover { color: var(--text-dark); background: rgba(255,255,255,0.55); }
.themes-filter-tab.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(238,90,42,0.32);
}
.themes-filter-tab-x {
  display: none;
  margin-left: 5px;
  font-size: 15px;
  line-height: 1;
  opacity: 0.75;
  font-weight: 400;
}
.themes-filter-tab.active .themes-filter-tab-x { display: inline; }
.themes-results-count {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-medium);
  white-space: nowrap;
  font-family: "Inter", sans-serif;
}
.themes-filter-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dark);
  white-space: nowrap;
  font-family: "Inter", sans-serif;
}
.themes-dropdown-mobile { display: none; }
.themes-results-mobile { font-size: 13px; font-weight: 500; color: var(--text-medium); }
.themes-options-section {
  padding: 14px 0;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
}
.themes-options-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.themes-option-group { display: flex; align-items: center; gap: 10px; }
.themes-option-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
}
.themes-option-label i { color: var(--primary); font-size: 13px; }
.themes-option-select {
  padding: 9px 32px 9px 13px;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") right 12px center no-repeat;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font-family: "Inter", sans-serif;
  transition: border-color 0.2s;
}
.themes-option-select:hover { border-color: var(--primary); }
.themes-option-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(238,90,42,0.1); }
.themes-option-divider { width: 1px; height: 32px; background: var(--gray-300); }
.themes-orient-picker {
  display: flex;
  gap: 5px;
  background: var(--gray-100);
  padding: 4px;
  border-radius: 10px;
}
.themes-orient-btn {
  padding: 7px 13px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-medium);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.themes-orient-btn:hover { color: var(--text-dark); background: rgba(255,255,255,0.6); }
.themes-orient-btn.active { background: #fff; color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-weight: 700; }

/* ── Template grid ── */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  padding: 24px 0 64px;
}

/* ── Template card ── */
.themes-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1.5px solid var(--gray-200);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.themes-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.11);
  border-color: var(--primary);
}
.themes-card-img {
  background: var(--gray-50);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
}
.themes-card-img img { max-width: 84%; max-height: 84%; object-fit: contain; transition: transform 0.38s ease; }
.themes-card:hover .themes-card-img img { transform: scale(1.05); }
.themes-card-body { padding: 12px 14px 15px; text-align: center; display: flex; flex-direction: column; flex: 1; }
.themes-card-name { font-weight: 700; font-size: 14px; margin-bottom: 3px; color: var(--text-dark); font-family: "Inter", sans-serif; }
.themes-card-desc { font-size: 12px; color: var(--text-medium); margin-bottom: 9px; font-family: "Inter", sans-serif; }
.themes-price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 6px;
  margin-top: auto;
  margin-bottom: 10px;
  border: 1px solid var(--gray-200);
  border-radius: 9px;
  background: var(--gray-50);
  flex-wrap: wrap;
}
.themes-price { font-size: 20px; font-weight: 800; color: var(--text-dark); line-height: 1; }
.themes-was-price { font-size: 12.5px; color: var(--text-light); text-decoration: line-through; }
.themes-plus-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(238,90,42,0.1);
  padding: 2px 7px;
  border-radius: 12px;
}
.themes-cta-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: background 0.18s;
  text-align: center;
  text-decoration: none;
}
.themes-cta-btn:hover { background: var(--primary-dark); color: #fff; }

/* ── Bottom CTA ── */
.themes-bottom-cta {
  background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-900) 100%);
  color: #fff;
  text-align: center;
  padding: 60px 20px;
}
.themes-bottom-cta h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  margin-bottom: 10px;
  font-family: "Inter", sans-serif;
}
.themes-bottom-cta p {
  color: rgba(255,255,255,0.85);
  margin-bottom: 26px;
  font-size: 15px;
  font-family: "Inter", sans-serif;
}
.themes-bottom-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--primary);
  border: none;
  padding: 14px 38px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  transition: transform 0.18s, box-shadow 0.18s;
  text-decoration: none;
}
.themes-bottom-btn:hover { transform: scale(1.04); color: var(--primary); box-shadow: 0 8px 32px rgba(0,0,0,0.22); }

/* ── Plus theme overrides ── */
.plus-theme .themes-page-wrap { background: #fafafa; }
.plus-theme .themes-orient-btn.active { color: var(--primary); }
.plus-theme .themes-bottom-cta { background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-900) 100%); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .themes-filter-section { top: 70px; }
}
@media (max-width: 768px) {
  .themes-page-hero { padding: 24px 0 12px; }
  .themes-filter-section { padding: 10px 0 8px; }
  .themes-filter-tab { padding: 7px 14px; font-size: 13px; }
  .themes-options-bar { gap: 12px; flex-direction: column; }
  .themes-option-group { gap: 8px; width: 100%; justify-content: center; }
  .themes-option-select { flex: 1; max-width: 200px; font-size: 13px; }
  .themes-option-divider { width: 100%; height: 1px; }
  .themes-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
  .themes-grid { gap: 10px; }
  .themes-filter-scroll, .themes-filter-nav-btn, .themes-results-count { display: none; }
  .themes-dropdown-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: center;
    padding: 4px 0;
  }
  .themes-filter-bar { background: transparent; }
  .themes-filter-section { padding: 8px 0 6px; }
  .themes-options-section { padding: 8px 0; }
  .themes-options-bar { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
  .themes-option-group { flex: 1; min-width: 0; }
  .themes-option-label { font-size: 11px; }
  .themes-option-label i { font-size: 10px; }
  .themes-option-select { font-size: 12px; padding: 6px 24px 6px 9px; max-width: none; width: 100%; }
  .themes-option-divider { display: none; }
  .themes-orient-btn { padding: 5px 8px; font-size: 12px; }
  .themes-price { font-size: 17px; }
}


/* ── Custom size select ─────────────────────────────────────────────── */
.pbs-select { position: relative; display: inline-block; }
.pbs-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--gray-200);
  border-radius: 10px; font-family: "Inter", sans-serif;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s, box-shadow .18s;
  white-space: nowrap; width: 100%;
}
.pbs-sel-label { display: flex; align-items: center; gap: 6px; }
.pbs-select-trigger:hover,
.pbs-select.open .pbs-select-trigger {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(238,90,42,0.1);
}
.pbs-sel-metric { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.pbs-sel-sep { font-size: 12px; color: var(--gray-400); }
.pbs-sel-imperial { font-size: 12px; color: var(--gray-500); }
.pbs-sel-chevron { font-size: 10px; color: var(--primary); transition: transform .2s; flex-shrink: 0; }
.pbs-select.open .pbs-sel-chevron { transform: rotate(180deg); }
.pbs-select-dropdown {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 100%; background: #fff;
  border: 1.5px solid var(--gray-200); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.13); overflow: hidden; z-index: 1050;
}
.pbs-select.open .pbs-select-dropdown { display: block; }
.pbs-select-option {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 16px; cursor: pointer; transition: background .12s;
}
.pbs-select-option:not(:last-child) { border-bottom: 1px solid var(--gray-100); }
.pbs-select-option:hover { background: var(--gray-50); }
.pbs-select-option.selected { background: rgba(238,90,42,.07); }
.pbs-sel-opt-metric { font-size: 14px; font-weight: 700; color: var(--gray-900); font-family: "Inter", sans-serif; }
.pbs-select-option.selected .pbs-sel-opt-metric { color: var(--primary); }
.pbs-sel-opt-imperial { font-size: 12px; color: var(--gray-500); font-family: "Inter", sans-serif; white-space: nowrap; }

/* pbs-select search + scrollable list */
.pbs-sel-search-wrap {
  padding: 8px 12px;
  border-bottom: 1px solid var(--gray-100);
  display: flex; align-items: center; gap: 8px;
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.pbs-sel-search-icon { font-size: 12px; color: var(--gray-400); flex-shrink: 0; }
.pbs-sel-search {
  border: none; outline: none; font-size: 13px;
  font-family: "Inter", sans-serif; color: var(--gray-900);
  width: 100%; background: transparent;
}
.pbs-sel-search::placeholder { color: var(--gray-400); }
.pbs-sel-list {
  max-height: min(50vh, 280px);
  overflow-y: auto;
}
.pbs-sel-empty {
  padding: 12px 16px; font-size: 13px;
  color: var(--gray-400); font-family: "Inter", sans-serif;
  text-align: center;
}
@media (min-width: 768px) {
  .pbs-select { min-width: 220px; }
  .pbs-select-trigger { min-width: 220px; }
}

/* ============================================================
   Scroll reveal — .pbs-reveal
   Apply to any section wrapper. Element fades + slides up as
   it enters the viewport. Use data-delay="0.1s" to stagger.
   ============================================================ */
.pbs-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.pbs-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .pbs-reveal,
  .pbs-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================
   Customer Portal — page design system (db-portal-*)
   ===================================================== */

@keyframes db-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pbs-reveal { animation: db-fade-up 0.35s ease both; }
.db-main > * { animation: db-fade-up 0.38s ease both; }
.db-main > *:nth-child(1) { animation-delay: 0.00s; }
.db-main > *:nth-child(2) { animation-delay: 0.06s; }
.db-main > *:nth-child(3) { animation-delay: 0.12s; }
.db-main > *:nth-child(4) { animation-delay: 0.18s; }
.db-main > *:nth-child(5) { animation-delay: 0.24s; }
.db-main > *:nth-child(6) { animation-delay: 0.30s; }

/* -- Portal page background: light grey canvas so white db-card-full boxes stand out -- */
#main-content:has(.db-layout) { background: #fafafa; }

/* -- Public content pages (scanning, etc.) stagger animation -- */
.scan-pg > * { animation: db-fade-up 0.38s ease both; }
.scan-pg > *:nth-child(1) { animation-delay: 0.00s; }
.scan-pg > *:nth-child(2) { animation-delay: 0.07s; }
.scan-pg > *:nth-child(3) { animation-delay: 0.14s; }
.scan-pg > *:nth-child(4) { animation-delay: 0.21s; }
.scan-pg > *:nth-child(5) { animation-delay: 0.28s; }
.scan-pg > *:nth-child(6) { animation-delay: 0.35s; }
.scan-pg > *:nth-child(7) { animation-delay: 0.42s; }
.scan-pg > *:nth-child(8) { animation-delay: 0.49s; }

/* -- Page header -- */
.db-page-head { margin-bottom: 24px; }
.db-page-head .db-main-heading { margin-bottom: 4px; }
.db-page-head .db-main-sub { margin-bottom: 0; }

/* -- Full-width card -- */
.db-card-full {
  background: #fff;
  border-radius: 14px;
  padding: 28px 30px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}

/* -- Portal paginator: override Bootstrap 5's .pagination flex styles -- */
.db-card-full .pagination,
.db-main .pagination {
  display: block !important;
  padding-left: 0 !important;
  list-style: none !important;
  margin-top: 16px;
  margin-bottom: 4px;
  border: 1.5px solid var(--gray-200) !important;
  border-radius: 10px !important;
  overflow: hidden;
  background: #fff;
  float: none !important;
  width: auto !important;
  min-height: auto !important;
}
.db-card-full .pagination > div,
.db-main .pagination > div {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  text-align: left !important;
}
.db-card-full .pagination a,
.db-main .pagination a {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 9px 15px !important;
  font-size: 13px !important;
  font-weight: 600;
  color: var(--text-dark) !important;
  font-family: Inter, sans-serif;
  border-right: 1.5px solid var(--gray-200) !important;
  border-bottom: none !important;
  background: #fff !important;
  text-decoration: none !important;
  transition: background .15s, color .15s;
  min-width: 40px;
}
.db-card-full .pagination a:hover,
.db-main .pagination a:hover {
  background: #fff4ee !important;
  color: var(--primary) !important;
}
.db-card-full .pagination a.current-page,
.db-main .pagination a.current-page {
  background: var(--primary) !important;
  color: #fff !important;
  pointer-events: none;
}
.db-card-full .pagination a.prevnext,
.db-main .pagination a.prevnext {
  color: var(--text-medium) !important;
  font-size: 12px !important;
  gap: 5px;
  border-right: 1.5px solid var(--gray-200) !important;
  float: none !important;
}
.db-card-full .pagination span,
.db-main .pagination span {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  padding: 9px 15px !important;
  font-size: 13px !important;
  color: var(--text-medium) !important;
  background: #fafafa !important;
  border-right: 1.5px solid var(--gray-200) !important;
  letter-spacing: 0 !important;
  min-width: 40px;
}

/* -- Tables -- */
.db-tbl-wrap { overflow-x: auto; }
.db-tbl { width: 100%; border-collapse: collapse; font-family: "Inter", sans-serif; font-size: 13.5px; }
.db-tbl thead th { padding: 10px 14px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-medium); background: #fafafa; border-bottom: 1.5px solid var(--gray-200); text-align: left; white-space: nowrap; }
.db-tbl tbody td { padding: 13px 14px; border-bottom: 1px solid var(--gray-200); vertical-align: middle; color: var(--text-dark); }
.db-tbl tbody tr:last-child td { border-bottom: none; }
.db-tbl tbody tr:hover td { background: #fff8f5; }
.db-tbl a { color: var(--primary); font-weight: 600; text-decoration: none; }
.db-tbl a:hover { text-decoration: underline; }

/* -- Info grid -- */
.db-info-grid { display: flex; flex-direction: column; }
.db-info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--gray-200); font-size: 13.5px; font-family: "Inter", sans-serif; }
.db-info-row:last-child { border-bottom: none; }
.db-info-label { font-weight: 600; color: var(--text-medium); flex-shrink: 0; }
.db-info-value { color: var(--text-dark); word-break: break-word; }
.db-info-value a { color: var(--primary); font-weight: 600; text-decoration: none; }

/* -- ZF1 form styling -- */
.db-zf-form { max-width: 560px; }
.db-zf-form form { margin: 0; }
.db-zf-form dl, .db-zf-form dl.editzend_form, .db-zf-form dl.reset_form { margin: 0; padding: 0; }
.db-zf-form div.zend_txt, .db-zf-form .form-group { margin-bottom: 18px; display: flex; flex-direction: column; gap: 5px; }
.db-zf-form label, .db-zf-form .control-label { font-size: 13px; font-weight: 700; color: var(--text-dark); font-family: "Inter", sans-serif; }
.db-zf-form input[type=text], .db-zf-form input[type=email], .db-zf-form input[type=password], .db-zf-form input[type=tel], .db-zf-form input[type=number], .db-zf-form select, .db-zf-form textarea { width: 100%; padding: 10px 14px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 14px; font-family: "Inter", sans-serif; color: var(--text-dark); background: #fff; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }
.db-zf-form input:focus, .db-zf-form select:focus, .db-zf-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(238,90,42,0.12); outline: none; }
.db-zf-form input[type=submit], .db-zf-form .update_class { background: var(--primary) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 12px 28px !important; font-size: 14px !important; font-weight: 700 !important; font-family: "Inter", sans-serif !important; cursor: pointer !important; transition: background .15s !important; margin-top: 8px !important; min-width: 160px; }
.db-zf-form input[type=submit]:hover, .db-zf-form .update_class:hover { background: var(--primary-dark, #d44e20) !important; }
.db-zf-form .errors, .db-zf-form ul.errors { list-style: none !important; padding: 0 !important; margin: 2px 0 0 !important; }
.db-zf-form .errors li, .db-zf-form ul.errors li { color: #c0392b; font-size: 12px; font-family: "Inter", sans-serif; }
.db-zf-form input[type=checkbox] { width: 16px !important; height: 16px !important; accent-color: var(--primary); margin-right: 8px; }
.db-zf-form .zend_form_hint { font-size: 12px; color: var(--text-light); margin-top: 12px; font-family: "Inter", sans-serif; }

/* -- Manual portal forms (jn-*) -- */
.db-form-card { max-width: 560px; }
.db-form-card .jn-field { margin-bottom: 18px; }
.db-form-card .jn-label { font-size: 13px; font-weight: 700; color: var(--text-dark); display: block; margin-bottom: 6px; font-family: "Inter", sans-serif; }
.db-form-card .jn-input-icon-wrap { position: relative; display: block; }
.db-form-card .jn-input-icon-wrap > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-light); pointer-events: none; font-size: 13px; z-index: 1; }
.db-form-card .jn-input { width: 100%; padding: 10px 14px 10px 38px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 14px; font-family: "Inter", sans-serif; color: var(--text-dark); background: #fff; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; }
.db-form-card .jn-input.no-icon { padding-left: 14px; }
.db-form-card .jn-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(238,90,42,0.12); outline: none; }
.db-form-card textarea.jn-input { padding-top: 10px; resize: vertical; min-height: 100px; }
.db-form-card .form-submit-btn { background: var(--primary); color: #fff; border: none; border-radius: 8px; padding: 12px 28px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s, transform .1s; font-family: "Inter", sans-serif; display: inline-flex; align-items: center; gap: 8px; }
.db-form-card .form-submit-btn:hover { background: var(--primary-dark, #d44e20); transform: translateY(-1px); }
.db-form-card .form-hint { font-size: 12px; color: var(--text-light); margin-top: 5px; font-family: "Inter", sans-serif; }

/* -- Alert boxes -- */
.db-alert { border-radius: 10px; padding: 14px 18px; font-family: "Inter", sans-serif; font-size: 14px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.db-alert i { flex-shrink: 0; margin-top: 1px; }
.db-alert.success { background: #f0fdf4; border: 1.5px solid #86efac; color: #166534; }
.db-alert.error   { background: #fef2f2; border: 1.5px solid #fca5a5; color: #991b1b; }
.db-alert.info    { background: #eff6ff; border: 1.5px solid #93c5fd; color: #1e40af; }
.db-alert.warning { background: #fffbeb; border: 1.5px solid #fcd34d; color: #92400e; }

/* -- Reward banner -- */
.db-reward-banner { background: linear-gradient(135deg, #1d1d1d 0%, #3a3a3a 100%); border-radius: 14px; padding: 22px 26px; margin-bottom: 22px; display: flex; align-items: center; gap: 18px; }
.db-reward-banner-icon { font-size: 38px; color: #f0a500; flex-shrink: 0; }
.db-reward-banner-text h2 { font-size: 19px; font-weight: 900; color: #fff; font-family: "Inter", sans-serif; margin-bottom: 3px; }
.db-reward-banner-text p { color: rgba(255,255,255,0.65); font-size: 13px; font-family: "Inter", sans-serif; margin: 0; }

/* -- Points badge -- */
.pts-badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-family: "Inter", sans-serif; }
.pts-badge.positive { color: #16a34a; }
.pts-badge.negative { color: #dc2626; }

/* -- Refer steps -- */
.db-steps { display: flex; margin-bottom: 26px; border-radius: 10px; overflow: hidden; border: 1.5px solid #eee; }
.db-step { flex: 1; padding: 12px 10px; font-size: 13px; font-weight: 700; font-family: "Inter", sans-serif; color: var(--text-light); background: #fafafa; text-align: center; border-right: 1px solid #eee; }
.db-step:last-child { border-right: none; }
.db-step.active { background: var(--primary); color: #fff; }
.db-step.done { background: #fff4ee; color: var(--primary); }

/* -- Responsive -- */
@media (max-width: 768px) {
  .db-card-full { padding: 18px 16px; }
  .db-info-grid { flex-direction: column; }
  .db-tbl thead { display: none; }
  .db-tbl tbody td { display: flex; justify-content: space-between; padding: 8px 10px; font-size: 13px; border-bottom: none; }
  .db-tbl tbody td::before { content: attr(data-label); font-weight: 700; color: var(--text-medium); margin-right: 8px; flex-shrink: 0; }
  .db-tbl tbody tr { border-bottom: 1px solid var(--gray-200); display: block; }
  .db-tbl tbody tr:last-child { border-bottom: none; }
  .db-reward-banner { flex-direction: column; text-align: center; }
  .db-steps { font-size: 11px; }
}

/* =============================================================
   Blog
   ============================================================= */
.blog-entry {
  border-bottom: 1px solid var(--gray-200);
  padding: 32px 0;
}
.blog-entry:last-of-type { border-bottom: none; }
.blog-entry-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.blog-entry-date {
  font-size: 13px;
  color: var(--text-light, #888);
  display: flex;
  align-items: center;
  gap: 6px;
}
.blog-entry-admin-links {
  display: flex;
  gap: 12px;
  margin-left: auto;
}
.blog-entry-admin-links a {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--primary, #ee5a2a);
}
.blog-entry-admin-links a.del { color: #dc3545; }
.blog-entry-admin-links a:hover { text-decoration: underline; }
.blog-entry-title {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 800;
  color: var(--text-dark, #1a1a2e);
  margin: 0 0 12px;
  line-height: 1.3;
}
.blog-entry-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-medium, #555);
}
.blog-entry-body img { max-width: 100%; border-radius: 8px; }
/* Pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 32px 0 0;
}
.blog-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid var(--gray-200, #e0e0e0);
  color: var(--text-dark, #1a1a2e);
  background: #fff;
  transition: border-color .2s, color .2s;
}
.blog-page-btn:hover { border-color: var(--primary, #ee5a2a); color: var(--primary, #ee5a2a); text-decoration: none; }
.blog-page-btn.active { background: var(--primary, #ee5a2a); color: #fff; border-color: var(--primary, #ee5a2a); }
.blog-page-btn.disabled { opacity: .4; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════
   § 18 — Product Page (pgp-*)
   Used by current-offers/photobooks/photobooks.phtml (+ future product pages)
   ══════════════════════════════════════════════════════════════ */

/* Meta row (subtitle + trustpilot) */
.pgp-meta { padding: 8px 0 16px; }
.pgp-subtitle { font-size: 0.95rem; color: var(--text-medium); margin: 4px 0 8px; }

/* Hero 2-col grid */
.pgp-hero {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
  padding: 0 0 32px;
}
@media (max-width: 767px) { .pgp-hero { grid-template-columns: 1fr; } }

/* Carousel thumbnails */
.pgp-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pgp-thumb {
  width: 60px;
  height: 60px;
  background-size: cover;
  background-position: center;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s;
}
.pgp-thumb:hover, .pgp-thumb.is-nav-selected { border-color: var(--primary); }

/* Order panel */
.pgp-order-col { display: flex; flex-direction: column; gap: 14px; }

/* Timer */
.pgp-timer {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(238,90,42,.07);
  border: 1px solid rgba(238,90,42,.2);
  border-radius: 10px;
  padding: 12px 16px;
}
.pgp-timer-icon { color: var(--primary); font-size: 1.4rem; flex-shrink: 0; }
.pgp-timer-label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-medium);
  display: block;
  margin-bottom: 4px;
}
/* jQuery countdown plugin units: stack number above label */
#countdown,
.pgp-countdown {
  display: block;
}
#countdown .countdown-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
#countdown .countdown-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 32px;
}
#countdown .countdown-amount {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
#countdown .countdown-period {
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-medium);
  margin-top: 2px;
}

/* Size selector */
.pgp-select-label { font-size: .9rem; font-weight: 700; color: var(--text-dark); }
.pgp-size-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}
.pgp-size-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-200);
  transition: background .15s;
}
.pgp-size-item:last-child { border-bottom: none; }
.pgp-size-item:hover { background: rgba(238,90,42,.04); }
.pgp-size-item input[type="radio"] {
  flex-shrink: 0;
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.pgp-size-info { flex: 1; min-width: 0; }
.pgp-size-name { font-size: .875rem; font-weight: 600; color: var(--text-dark); line-height: 1.35; }
.pgp-size-price { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.pgp-rrp { font-size: .8rem; color: var(--text-light); text-decoration: line-through; }
.pgp-sale { font-size: .95rem; font-weight: 700; color: #16a34a; }
.pgp-badge { font-size: .75rem; font-weight: 700; background: #dcfce7; color: #166534; padding: 2px 6px; border-radius: 4px; }

/* Buy button + supporting elements */
.pgp-buy-btn { margin-top: 4px; }
.pgp-3steps { width: 100%; border-radius: 8px; margin-top: 4px; }
.pgp-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pgp-benefits li { font-size: .82rem; color: var(--text-medium); display: flex; align-items: flex-start; gap: 6px; }
.pgp-benefits li i { color: var(--primary); font-size: .75rem; margin-top: 2px; flex-shrink: 0; }

/* Content sections */
.pgp-content { margin-top: 8px; }
.pgp-section { padding: 52px 0; background: #fff; }
.pgp-section.pgp-alt { background: var(--bg-light); }
.pgp-section-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0 0 28px;
  position: relative;
  padding-bottom: 16px;
}
.pgp-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
}
.pgp-intro-text {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-medium);
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}
.pgp-body-text { font-size: 1rem; line-height: 1.8; color: var(--text-medium); margin-top: 16px; }
.pgp-hero-img { width: 100%; border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.1); margin: 20px 0 24px; }

/* Features grid — auto-fit: 2/3/4 cols depending on item count */
.pgp-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
@media (max-width: 575px) { .pgp-features-grid { grid-template-columns: 1fr; } }
.pgp-feature { text-align: center; }
.pgp-feature img { width: 100%; height: 320px; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.1); margin-bottom: 16px; }
@media (max-width: 767px) { .pgp-feature img { height: 220px; } }
.pgp-feature h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin: 0 0 8px; }
.pgp-feature p { font-size: .9rem; color: var(--text-medium); line-height: 1.6; }

/* Cards 2-col */
.pgp-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 575px) { .pgp-cards-row { grid-template-columns: 1fr; } }
.pgp-card { background: #fff; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.08); overflow: hidden; }
.pgp-card img { width: 100%; height: 340px; object-fit: cover; }
.pgp-card-body { padding: 20px; }
.pgp-card-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin: 0 0 10px; }
.pgp-card-body p { font-size: .9rem; color: var(--text-medium); line-height: 1.6; margin-bottom: 8px; }

/* Split row (text + image side by side) */
.pgp-split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 767px) { .pgp-split-row { grid-template-columns: 1fr; } }
.pgp-split-img { width: 100%; border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.1); }

/* Bullet + check lists */
.pgp-bullet-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.pgp-bullet-list li { font-size: 1rem; color: var(--text-medium); line-height: 1.6; padding-left: 16px; position: relative; }
.pgp-bullet-list li::before { content: '›'; position: absolute; left: 0; color: var(--primary); font-weight: 700; }
.pgp-check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.pgp-check-list li { font-size: 1rem; color: var(--text-medium); line-height: 1.6; display: flex; align-items: flex-start; gap: 10px; }
.pgp-check-list li i { color: var(--primary); margin-top: 3px; flex-shrink: 0; }

/* Tri grid (3 columns) */
.pgp-tri-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
@media (max-width: 767px) { .pgp-tri-grid { grid-template-columns: 1fr; } }
.pgp-tri-item { text-align: center; }
.pgp-tri-item img { width: 100%; height: 300px; object-fit: cover; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.1); margin-bottom: 16px; }
.pgp-tri-item h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin: 0 0 8px; }
.pgp-tri-item p { font-size: .9rem; color: var(--text-medium); line-height: 1.6; }
.pgp-tri-item a { color: var(--primary); text-decoration: none; }
.pgp-tri-item a:hover { text-decoration: underline; }
.blog-page-ellipsis { font-size: 14px; color: var(--text-light, #888); padding: 0 4px; }


/* ── Product Details page (/product/:route) ──────────────────────────── */
.product-details-page { max-width: 1100px; margin: 0 auto; padding: 32px 20px; }
.product-details-inner { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: flex-start; }
.product-details-title { font-size: 1.8rem; font-weight: 700; margin: 0 0 8px; }
.product-details-subtitle { font-size: 1.1rem; color: #555; font-weight: 400; margin: 0 0 16px; }
.product-details-img { display: block; width: 100%; max-height: 450px; object-fit: contain; border-radius: 6px; }
.product-details-descr { margin-bottom: 20px; }
.product-details-descr h3 { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }
.product-details-descr { font-size: .95rem; color: #444; line-height: 1.7; }
@media (max-width: 700px) {
  .product-details-inner { grid-template-columns: 1fr; }
}

.product-buy-box { border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; margin-top: 16px; background: #fafafa; }
.product-buy-price { font-size: 1.6rem; font-weight: 700; color: var(--primary, #d44a1c); margin-bottom: 16px; }
.product-buy-row { display: flex; align-items: center; gap: 10px; }
.product-buy-label { font-size: .9rem; color: #555; white-space: nowrap; }
.product-buy-select { padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; width: 70px; }
.product-buy-btn { flex: 1; background: var(--primary, #d44a1c); color: #fff; border: none; border-radius: 4px; padding: 10px 16px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .15s; }

/* ============================================================
   DASHBOARD SPA — PAGE NAVIGATION
   ============================================================ */
.db-page { display: none; }
.db-page.active { display: block; }

.db-page-hdr { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.db-page-back { width: 36px; height: 36px; border-radius: 10px; background: var(--gray-100, #f3f4f6); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-medium, #6b7280); font-size: 13px; transition: background .15s; flex-shrink: 0; margin-top: 3px; font-family: inherit; }
.db-page-back:hover { background: var(--gray-200, #e5e7eb); color: var(--text-dark, #111); }
.db-page-title { font-size: 22px; font-weight: 800; color: var(--text-dark, #111); line-height: 1.2; }
.db-page-sub { font-size: 13px; color: var(--text-medium, #6b7280); margin-top: 4px; }

/* --- Prepaid Deals page (Plus) --- */
.db-prepaid-intro { background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%); border-radius: 18px; padding: 24px 28px; color: #fff; margin-bottom: 24px; display: flex; align-items: center; gap: 16px; }
.db-prepaid-intro-icon { font-size: 28px; color: #f0a500; flex-shrink: 0; }
.db-prepaid-intro-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.db-prepaid-intro-sub { font-size: 13px; opacity: .75; }
.db-prepaid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.db-prepaid-card { background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 14px; overflow: hidden; transition: box-shadow .2s; }
.db-prepaid-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.db-prepaid-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--gray-100, #f3f4f6); }
.db-prepaid-thumb img { width: 100%; height: 100%; object-fit: cover; }
.db-prepaid-body { padding: 14px; }
.db-prepaid-badge { display: inline-block; background: #fff8f4; color: var(--primary, #ee5a2a); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; margin-bottom: 8px; border: 1px solid rgba(238,90,42,0.2); }
.db-prepaid-badge.plus-extra { background: #fffbeb; color: #b45309; border-color: rgba(180,83,9,0.2); }
.db-prepaid-name { font-size: 14px; font-weight: 700; color: var(--text-dark, #111); margin-bottom: 6px; }
.db-prepaid-price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.db-prepaid-was { font-size: 12.5px; color: var(--text-light, #9ca3af); text-decoration: line-through; }
.db-prepaid-now { font-size: 16px; font-weight: 800; color: var(--primary, #ee5a2a); }
.db-prepaid-now.has-member { font-size: 13px; color: var(--text-light, #9ca3af); text-decoration: line-through; font-weight: 500; }
.db-prepaid-member-price { font-size: 18px; font-weight: 800; color: var(--primary, #ee5a2a); background: none; padding: 0; border-radius: 0; }
.db-prepaid-btn { width: 100%; padding: 10px; background: var(--primary, #ee5a2a); color: #fff; border: none; border-radius: 9px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background .15s; text-align: center; display: block; text-decoration: none; }
.db-prepaid-btn:hover { background: #c94e24; color: #fff; }
.db-prepaid-thumb-badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(240,165,0,0.92); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap; pointer-events: none;
}
#page-plus-offers .voucherselect,
#page-prepaid .voucherselect { display: none; }

/* Dashboard sections: product-grid → CSS Grid 3-col/2-col */
#page-plus-offers .product-grid,
#page-prepaid .product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
#page-plus-offers .product-grid .product.voucher,
#page-prepaid .product-grid .product.voucher { width: 100%; margin: 0; }
#page-plus-offers .todayprice,
#page-prepaid .todayprice { font-size: 12px !important; }
#page-plus-offers .voucherprice,
#page-prepaid .voucherprice { margin: 2px 0 0 0; }

@media (max-width: 1200px) {
  #page-plus-offers .product-grid,
  #page-prepaid .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  #page-plus-offers .product-grid,
  #page-prepaid .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .db-prepaid-grid { grid-template-columns: repeat(2, 1fr); }
  .db-page-title { font-size: 18px; }
  /* Voucher partner pages: 2-col on mobile */
  .product-grid { flex-wrap: wrap; }
  .product-grid .product.voucher { width: calc(50% - 8px); margin: 0 0 16px; }
  /* Dashboard: CSS Grid handles sizing, reset flex width */
  #page-plus-offers .product-grid .product.voucher,
  #page-prepaid .product-grid .product.voucher { width: 100%; margin: 0; }
}
.product-buy-btn:hover { background: #b83d16; }

/* ── Maskable icon utility ─────────────────────────────────────────────────────
   Recolours a transparent single-colour PNG/SVG icon to any colour via CSS mask.
   Usage (decorative): replace <img src="/rv2/img/icons/x.png" ...> with
     <span class="pbs-mask-icon" style="--icon:url(/rv2/img/icons/x.png);width:60px;height:60px;" aria-hidden="true"></span>
   Fills with --primary by default (so it auto-adapts per brand: PBC gold, PBE red).
   Add .is-dark for black or .is-light for white. */
.pbs-mask-icon {
    display: inline-block;
    background-color: var(--primary);
    -webkit-mask: var(--icon) center / contain no-repeat;
            mask: var(--icon) center / contain no-repeat;
}
.pbs-mask-icon.is-dark  { background-color: #1a1a2e; }
.pbs-mask-icon.is-light { background-color: #fff; }