/*!
 * SMARTSWAP EXCHANGE – brand layer over the Bizen template (style.css).
 * Palette: dark navy / black, white, electric green.
 *
 * 1. Tokens & template overrides   6. Product cards & catalogue
 * 2. Base & utilities              7. Product details
 * 3. Header & navigation           8. Forms
 * 4. Hero & page banner            9. Stores, footer, WhatsApp
 * 5. Home sections                10. Responsive
 */

/* ---------- 1. Tokens & template overrides ---------- */
:root {
   --ss-navy-950: #04080f;
   --ss-navy-900: #070d18;
   --ss-navy-800: #0b1424;
   --ss-navy-700: #111d33;
   --ss-navy-600: #1a2944;
   --ss-green: #19e68c;
   --ss-green-rgb: 25, 230, 140;
   --ss-green-600: #10c977;
   --ss-green-700: #067a46;
   --ss-ink: #0b1220;
   --ss-body: #556072;
   --ss-muted: #8a95a6;
   --ss-light: #f3f6f9;
   --ss-border: #e3e8ef;
   --ss-line-dark: rgba(255, 255, 255, .09);
   --ss-radius: 18px;
   --ss-radius-sm: 12px;
   --ss-shadow: 0 18px 50px -24px rgba(7, 13, 24, .35);
   --ss-shadow-sm: 0 6px 24px -12px rgba(7, 13, 24, .25);

   /* Bizen variables re-mapped to the SmartSwap palette */
   --primary: var(--ss-green);
   --primary-rgb: 25, 230, 140;
   --secondary: var(--ss-navy-900);
   --secondary-rgb: 7, 13, 24;
   --dark: var(--ss-navy-900);
   --dark-alt: var(--ss-navy-800);
   --headings-color: var(--ss-ink);
   --body-color: var(--ss-body);
   --hover: var(--ss-green-600);
   --light: var(--ss-light);
   --theme-border: var(--ss-border);
   --bs-border-color: var(--ss-border);
}

/* ---------- 2. Base & utilities ---------- */
html { scroll-behavior: smooth; }
body.ss-site { background: #fff; color: var(--ss-body); overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a:focus, a:hover { color: var(--ss-green-700); }
:focus-visible { outline: 3px solid rgba(var(--ss-green-rgb), .6); outline-offset: 2px; }
.bg-light { background-color: var(--ss-light) !important; }
.bg-secondary { background-color: var(--ss-navy-900) !important; }
.text-primary { color: var(--ss-green-700) !important; }

.ss-skip { position: absolute; left: -9999px; top: 8px; z-index: 100000; background: var(--ss-green); color: var(--ss-navy-900); padding: 10px 18px; border-radius: 8px; font-weight: 700; }
.ss-skip:focus { left: 12px; color: var(--ss-navy-900); }

.sec-padding { padding: 110px 0; }
.ss-section { position: relative; }

/* Buttons (Bizen .btn with hover "span" ripple) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 15px; padding: 14px 26px; }
.btn i.fa-arrow-right { font-size: 13px; }
.btn-primary, .btn-primary:focus { background-color: var(--ss-green); border-color: var(--ss-green); color: var(--ss-navy-900); }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible { background-color: var(--ss-green); border-color: var(--ss-green); color: var(--ss-navy-900) !important; box-shadow: 0 10px 30px -10px rgba(var(--ss-green-rgb), .7); }
.btn span { background-color: #7dffc3; }
/* Bizen styles every <span> in .btn as the hover ripple – keep labels and spinners as normal content */
.btn .ss-btn-label, .btn .ss-spinner { position: static; transform: none; background: none; border-radius: 0; z-index: auto; width: auto; height: auto; transition: none; }
.btn:hover .ss-btn-label { width: auto; height: auto; }
.btn.btn-outline { color: var(--ss-ink); background: transparent; }
.btn.btn-outline:hover { color: var(--ss-navy-900); }
.btn.btn-outline span, .btn.btn-outline:hover span { background-color: var(--ss-green); }
.btn.btn-outline:hover { border-color: var(--ss-green) !important; }
.ss-btn-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .28) !important; background: rgba(255, 255, 255, .04); backdrop-filter: blur(6px); }
.ss-btn-ghost:hover, .ss-btn-ghost:focus { color: var(--ss-navy-900) !important; background: #fff; border-color: #fff !important; }
.btn i.fa-arrow-right { transition: transform .3s ease; }
.btn:hover i.fa-arrow-right { transform: translateX(4px); }

.ss-btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: 40px; font-weight: 700; font-size: 13.5px; line-height: 1.2; text-transform: none; border: 1px solid transparent; transition: all .25s ease; white-space: nowrap; }
.ss-btn-dark { background: var(--ss-navy-900); color: #fff; }
.ss-btn-dark:hover, .ss-btn-dark:focus { background: var(--ss-navy-600); color: #fff; }
.ss-btn-wa-sm { background: rgba(var(--ss-green-rgb), .14); color: var(--ss-green-700); border-color: rgba(var(--ss-green-rgb), .35); }
.ss-btn-wa-sm:hover, .ss-btn-wa-sm:focus { background: var(--ss-green); color: var(--ss-navy-900); }
.ss-btn-outline { border-color: var(--ss-border); color: var(--ss-ink); background: #fff; }
.ss-btn-outline:hover { border-color: var(--ss-ink); color: var(--ss-ink); }

/* Section headings */
/* Section eyebrow (Bizen .sub-title, restyled as a quiet label) */
.sub-title { border: 0; border-radius: 0; background: none; padding: 0; color: var(--ss-green-700); font-size: 13px; font-weight: 700; letter-spacing: .14em; line-height: 1.4; display: inline-flex; align-items: center; gap: 12px; }
.sub-title::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.text-center .sub-title, .ss-sec-head.text-center .sub-title { justify-content: center; }
.ss-sub-dark { color: var(--ss-green); }
.ss-sec-head { margin-bottom: 50px; }
.ss-sec-title { font-family: var(--font-family-headings); font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.15; letter-spacing: -.02em; color: var(--ss-ink); margin: 18px 0 16px; }
.ss-sec-title span { color: var(--ss-green-700); }
.text-white .ss-sec-title span, .ss-sec-title.text-white span { color: var(--ss-green); }
.ss-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-green); }
.ss-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-green); box-shadow: 0 0 0 0 rgba(var(--ss-green-rgb), .6); animation: ssPulse 2s infinite; }
.ss-gradient-text { background: linear-gradient(92deg, var(--ss-green) 10%, #7dffc3 60%, #5fd3ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ss-link { font-weight: 700; color: var(--ss-ink); display: inline-flex; align-items: center; gap: 8px; }
.ss-link i { transition: transform .3s; color: var(--ss-green-700); }
.ss-link:hover i { transform: translateX(4px); }
.ss-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 60% 40%, #000 25%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 25%, transparent 75%); pointer-events: none; }

.ss-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 30px; line-height: 1.2; }
.ss-badge-cond { background: var(--ss-navy-900); color: #fff; }
.ss-badge-cond.cond-like-new { background: var(--ss-green); color: var(--ss-navy-900); }
.ss-badge-cond.cond-excellent { background: #d9fbe9; color: var(--ss-green-700); }
.ss-badge-cond.cond-good { background: #e5efff; color: #1f4fb5; }
.ss-badge-cond.cond-fair { background: #fff1d6; color: #9a5b00; }
.ss-badge-save { background: #ff5a5f; color: #fff; }
.ss-badge-sample { background: #fff7e0; color: #8a5a00; border: 1px dashed #e7b84a; text-transform: none; letter-spacing: 0; font-weight: 600; }
.ss-sample-note { margin-top: 26px; font-size: 14px; color: var(--ss-muted); }
.ss-sample-note i { color: #e7a821; }

.ss-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

@keyframes ssPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--ss-green-rgb), .55); } 70% { box-shadow: 0 0 0 12px rgba(var(--ss-green-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--ss-green-rgb), 0); } }
@keyframes ssFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ssScan { 0% { top: 12%; } 50% { top: 82%; } 100% { top: 12%; } }
@keyframes ssSpin { to { transform: rotate(360deg); } }

/* ---------- 3. Header & navigation ---------- */
.ss-topbar { background: var(--ss-navy-950); color: rgba(255,255,255,.7); font-size: 13.5px; padding: 9px 0; border-bottom: 1px solid var(--ss-line-dark); }
.ss-topbar a { color: rgba(255,255,255,.78); }
.ss-topbar a:hover { color: var(--ss-green); }
.ss-topbar i { color: var(--ss-green); margin-right: 6px; }
.ss-topbar-social a { margin-left: 14px; }
.ss-topbar-social i { margin: 0; color: inherit; }

.ss-header .header-wrapper { position: relative; }
.ss-header .header-nav-wrapper { background: var(--ss-navy-900); border-bottom: 1px solid var(--ss-line-dark); }
header.ss-header .header-nav-wrapper.header-sticky.scroll-on { background: rgba(7, 13, 24, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); z-index: 1030; }
.ss-header .navbar { padding: 14px 0; }
.ss-header .navbar-brand img { max-width: 190px; height: auto; }
.ss-header .navbar .navbar-nav .nav-link { color: rgba(255,255,255,.82); font-family: var(--font-family-headings); font-weight: 500; font-size: 14.5px; padding: 10px 11px; position: relative; }
.ss-header .navbar .navbar-nav .nav-link:hover, .ss-header .navbar .navbar-nav .nav-link:focus, .ss-header .navbar .navbar-nav .nav-link.show { color: #fff; }
.ss-header .navbar .navbar-nav .nav-link.active { color: var(--ss-green); }
.ss-header .navbar .navbar-nav .dropdown-toggle::after { border: 0; content: "\f107"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; vertical-align: 1px; margin-left: 6px; }
.ss-header .navbar .navbar-nav .dropdown-menu { background: #fff; padding: 12px 0; min-width: 230px !important; border-radius: 14px; }
.ss-header .navbar .navbar-nav .dropdown-menu .dropdown-item { color: var(--ss-ink); font-family: var(--font-family-headings); font-weight: 500; font-size: 14.5px; }
.ss-header .navbar .navbar-nav .dropdown-menu .dropdown-item:hover, .ss-header .navbar .navbar-nav .dropdown-menu .dropdown-item:focus { color: var(--ss-green-700); }
.ss-btn-wa { padding: 11px 18px; }
.ss-btn-wa i { font-size: 18px; }
.ss-header .ss-btn-ghost { padding: 11px 20px; font-size: 13px; }
.ss-toggler { width: 46px; height: 46px; border: 1px solid var(--ss-line-dark) !important; border-radius: 12px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; background: rgba(255,255,255,.04); }
.ss-toggler:focus { box-shadow: none; }
.ss-toggler span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }
.ss-toggler span:nth-child(2) { width: 14px; margin-left: 6px; }

/* Desktop: dropdown on hover/focus (Bizen behaviour) */
@media (min-width: 1200px) {
   .ss-header .navbar .navbar-nav > .dropdown:focus-within > .dropdown-menu, .ss-header .navbar .navbar-nav > .dropdown > .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
   .ss-offcanvas .offcanvas-header { display: none; }
}

/* Off-canvas (mobile / tablet) */
@media (max-width: 1199.98px) {
   .ss-offcanvas { background: var(--ss-navy-900) !important; color: #fff; max-width: 360px; }
   .ss-offcanvas .offcanvas-header { padding: 22px 24px; border-bottom: 1px solid var(--ss-line-dark); margin: 0; }
   .ss-offcanvas .offcanvas-body { padding: 10px 24px 30px; display: flex; flex-direction: column; }
   .ss-header .navbar .navbar-nav .nav-link { font-size: 17px; padding: 14px 0; border-bottom: 1px solid var(--ss-line-dark); display: flex; justify-content: space-between; align-items: center; }
   header .header-nav-wrapper .navbar .navbar-nav .dropdown-menu { display: none; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; padding: 4px 0 10px 12px; }
   header .header-nav-wrapper .navbar .navbar-nav .dropdown-menu.show { display: block; }
   .navbar .navbar-nav .nav-item > .dropdown-menu:first-of-type:before { display: none; }
   .ss-header .navbar .navbar-nav .dropdown-menu .dropdown-item { color: rgba(255,255,255,.75); padding: 9px 0 !important; }
   .ss-offcanvas-extra { margin-top: 28px; }
   .ss-offcanvas-contact { list-style: none; padding: 0; margin: 26px 0 0; }
   .ss-offcanvas-contact li { margin-bottom: 14px; }
   .ss-offcanvas-contact a { color: rgba(255,255,255,.8); }
   .ss-offcanvas-contact i { color: var(--ss-green); width: 22px; }
}

/* ---------- 4. Hero & page banner ---------- */
.ss-hero { position: relative; background: radial-gradient(1200px 600px at 85% 10%, rgba(var(--ss-green-rgb), .13), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(95, 211, 255, .09), transparent 60%), var(--ss-navy-900); color: rgba(255,255,255,.75); padding: 90px 0 110px; overflow: hidden; }
.ss-hero-title { font-family: var(--font-family-headings); font-weight: 700; color: #fff; font-size: clamp(38px, 4.8vw, 64px); line-height: 1.06; letter-spacing: -.035em; margin: 22px 0 22px; }
.ss-hero-lead { font-size: 18px; line-height: 1.7; max-width: 540px; color: rgba(255,255,255,.7); }
/* Hero actions: three equal tiles instead of a wrapping button row */
.ss-hero-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 34px; max-width: 600px; }
.ss-action { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 16px; border-radius: 16px; border: 1px solid var(--ss-line-dark); background: rgba(255,255,255,.035); color: #fff; transition: border-color .25s, background .25s, transform .25s; }
.ss-action:hover, .ss-action:focus { color: #fff; border-color: rgba(var(--ss-green-rgb), .55); background: rgba(var(--ss-green-rgb), .07); transform: translateY(-2px); }
.ss-action i.ss-action-icon { font-size: 18px; color: var(--ss-green); margin-bottom: 10px; }
.ss-action strong { font-family: var(--font-family-headings); font-weight: 600; font-size: 15.5px; }
.ss-action span { font-size: 13px; color: rgba(255,255,255,.55); }
.ss-action .fa-arrow-right { position: absolute; right: 16px; top: 18px; font-size: 12px; color: rgba(255,255,255,.4); transition: transform .25s, color .25s; }
.ss-action:hover .fa-arrow-right { transform: translateX(3px); color: var(--ss-green); }
.ss-action.is-primary { background: var(--ss-green); border-color: var(--ss-green); color: var(--ss-navy-900); }
.ss-action.is-primary i.ss-action-icon, .ss-action.is-primary .fa-arrow-right { color: var(--ss-navy-900); }
.ss-action.is-primary span { color: rgba(7,13,24,.7); }
.ss-action.is-primary:hover { background: #3bf0a0; color: var(--ss-navy-900); }
.ss-hero-search { margin-top: 30px; max-width: 560px; display: flex; align-items: center; background: rgba(255,255,255,.06); border: 1px solid var(--ss-line-dark); border-radius: 60px; padding: 6px 6px 6px 22px; transition: border-color .3s; }
.ss-hero-search:focus-within { border-color: rgba(var(--ss-green-rgb), .6); }
.ss-hero-search i { color: rgba(255,255,255,.5); }
.ss-hero-search input { background: transparent; border: 0; color: #fff; padding: 12px 14px; }
.ss-hero-search input:focus { border: 0; box-shadow: none; }
.ss-hero-search input::placeholder { color: rgba(255,255,255,.45); }
.ss-hero-search button { border: 0; background: #fff; color: var(--ss-navy-900); font-weight: 700; padding: 12px 24px; border-radius: 40px; white-space: nowrap; transition: background .3s; }
.ss-hero-search button:hover { background: var(--ss-green); }
.ss-hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 0; margin: 30px 0 0; font-size: 14.5px; color: rgba(255,255,255,.7); }
.ss-hero-trust i { color: var(--ss-green); margin-right: 8px; }
.ss-hero-visual { position: relative; max-width: 600px; margin: 0 auto; }
.ss-hero-device { position: relative; z-index: 2; animation: ssFloat 7s ease-in-out infinite; filter: drop-shadow(0 40px 60px rgba(0,0,0,.45)); }
.ss-hero-ring { position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed rgba(var(--ss-green-rgb), .35); animation: ssSpin 60s linear infinite; }
.ss-hero-ring::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--ss-green-rgb), .25), transparent 65%); }
.ss-hero-glow { position: absolute; width: 520px; height: 520px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(var(--ss-green-rgb), .22), transparent 70%); filter: blur(20px); }
.ss-float-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; background: rgba(13, 22, 40, .78); border: 1px solid var(--ss-line-dark); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; padding: 12px 16px; color: #fff; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.ss-float-card strong { display: block; font-family: var(--font-family-headings); font-size: 14px; font-weight: 600; }
.ss-float-card span { display: block; font-size: 12.5px; color: rgba(255,255,255,.6); }
.ss-fc-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--ss-green-rgb), .15); color: var(--ss-green); display: grid; place-items: center; font-size: 17px; }
.ss-fc-1 { top: 14%; left: -2%; animation: ssFloat 6s ease-in-out infinite; }
.ss-fc-2 { bottom: 20%; right: -3%; animation: ssFloat 8s ease-in-out infinite reverse; }
.ss-fc-3 { bottom: 2%; left: 6%; color: #fff; gap: 18px; }
.ss-fc-3:hover { color: #fff; border-color: rgba(var(--ss-green-rgb), .5); }
.ss-fc-3 em { display: block; font-style: normal; font-weight: 700; color: var(--ss-green); font-size: 15px; }
.ss-fc-3 > i { width: 34px; height: 34px; border-radius: 50%; background: var(--ss-green); color: var(--ss-navy-900); display: grid; place-items: center; }

.ss-page-banner { position: relative; background: radial-gradient(900px 400px at 90% 0%, rgba(var(--ss-green-rgb), .14), transparent 60%), var(--ss-navy-900); padding: 70px 0 80px; color: rgba(255,255,255,.72); overflow: hidden; }
.ss-page-banner h1 { color: #fff; font-family: var(--font-family-headings); font-weight: 800; font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -.03em; line-height: 1.08; margin: 14px 0 18px; max-width: 900px; }
.ss-page-banner h1 span { color: var(--ss-green); }
.ss-banner-lead { font-size: 18px; max-width: 720px; margin-bottom: 0; }
.ss-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ss-breadcrumb { margin-bottom: 26px; font-size: 14px; }
.ss-breadcrumb .breadcrumb-item a { color: rgba(255,255,255,.65); }
.ss-breadcrumb .breadcrumb-item a:hover { color: var(--ss-green); }
.ss-breadcrumb .breadcrumb-item.active { color: #fff; }
.ss-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.35); content: "/"; }

/* ---------- 5. Home sections ---------- */
.ss-brands { background: var(--ss-navy-900); padding: 0 0 70px; }
.ss-brands-wrap { background: var(--ss-navy-800); border: 1px solid var(--ss-line-dark); border-radius: var(--ss-radius); padding: 26px 28px; display: flex; align-items: center; gap: 30px; }
.ss-brands-title { color: #fff; font-size: 16px; font-weight: 600; margin: 0; white-space: nowrap; }
.ss-brand-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; flex: 1; }
.ss-brand-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--ss-line-dark); color: #fff; background: rgba(255,255,255,.02); transition: all .3s; }
.ss-brand-name { font-family: var(--font-family-headings); font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.ss-brand-chip small { color: rgba(255,255,255,.5); font-size: 12px; }
.ss-brand-chip:hover { border-color: rgba(var(--ss-green-rgb), .55); background: rgba(var(--ss-green-rgb), .08); color: #fff; transform: translateY(-3px); }

.ss-swiper-nav { display: flex; gap: 10px; }
.ss-swiper-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ss-border); background: #fff; color: var(--ss-ink); transition: all .25s; }
.ss-swiper-nav button:hover { background: var(--ss-navy-900); color: #fff; border-color: var(--ss-navy-900); }
.ss-swiper-nav button.swiper-button-disabled { opacity: .4; pointer-events: none; }
.ss-featured-swiper { overflow: hidden; padding: 6px 4px 20px; margin: -6px -4px 0; }
.ss-featured-swiper .swiper-slide { height: auto; }
.ss-featured-swiper .ss-product-card { height: 100%; }

.ss-offers { background: var(--ss-navy-900); position: relative; overflow: hidden; }
.ss-offer-hero { position: relative; height: 100%; min-height: 420px; background: linear-gradient(150deg, var(--ss-navy-700), var(--ss-navy-800)); border: 1px solid var(--ss-line-dark); border-radius: var(--ss-radius); padding: 40px; overflow: hidden; color: rgba(255,255,255,.72); }
.ss-offer-hero h3 { color: #fff; font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.2; margin: 18px 0 14px; position: relative; z-index: 2; }
.ss-offer-hero p { max-width: 290px; position: relative; z-index: 2; }
.ss-offer-hero .btn { position: relative; z-index: 2; margin-top: 10px; }
.ss-offer-hero img { position: absolute; right: -110px; bottom: -110px; width: 330px; opacity: .95; transform: rotate(-14deg); }
.ss-deal-card { display: flex; gap: 16px; align-items: center; height: 100%; background: var(--ss-navy-800); border: 1px solid var(--ss-line-dark); border-radius: var(--ss-radius); padding: 18px; color: rgba(255,255,255,.7); transition: all .3s; }
.ss-deal-card:hover { border-color: rgba(var(--ss-green-rgb), .5); transform: translateY(-4px); color: rgba(255,255,255,.7); }
.ss-deal-card img { width: 110px; flex: 0 0 110px; background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%); border-radius: 14px; }
.ss-deal-card h3 { color: #fff; font-size: 18px; margin: 10px 0 4px; }
.ss-deal-tag { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: var(--ss-green); background: rgba(var(--ss-green-rgb), .1); border-radius: 30px; padding: 4px 10px; }
.ss-deal-spec { font-size: 13.5px; }
.ss-deal-price { margin-top: 8px; }
.ss-deal-price strong { color: #fff; font-family: var(--font-family-headings); font-size: 20px; }
.ss-deal-price em { display: block; font-style: normal; font-size: 12.5px; color: var(--ss-green); }

.ss-feature { display: flex; gap: 18px; padding: 26px; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); height: 100%; background: #fff; transition: all .3s; }
.ss-feature:hover { border-color: transparent; box-shadow: var(--ss-shadow); transform: translateY(-4px); }
.ss-feature-icon { flex: 0 0 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--ss-navy-900); color: var(--ss-green); font-size: 20px; }
.ss-feature h3 { font-size: 18px; margin: 4px 0 8px; }
.ss-feature p { margin: 0; font-size: 15px; line-height: 1.6; }

.step-card.ss-step { clip-path: none; position: relative; text-align: left; padding: 34px 28px; border-radius: var(--ss-radius); height: 100%; border: 1px solid var(--ss-border); transition: all .3s; overflow: hidden; }
.step-card.ss-step:hover { box-shadow: var(--ss-shadow); transform: translateY(-4px); }
.step-card.ss-step h3 { margin: 22px 0 10px; text-transform: none; }
.step-card.ss-step p { margin: 0; }
.ss-step-icon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-size: 22px; background: rgba(var(--ss-green-rgb), .14); color: var(--ss-green-700); }
.ss-step-num { position: absolute; right: 22px; top: 18px; font-family: var(--font-family-headings); font-weight: 800; font-size: 48px; color: transparent; -webkit-text-stroke: 1px var(--ss-border); }

.ss-checklist { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.ss-checklist li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--ss-ink); }
.ss-checklist i { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--ss-green); color: var(--ss-navy-900); display: grid; place-items: center; font-size: 11px; margin-top: 2px; }
.ss-quality-visual { position: relative; max-width: 520px; margin: 0 auto; background: radial-gradient(circle at 50% 45%, #e9fff4, var(--ss-light) 60%); border-radius: 30px; padding: 30px 30px 30px 0; }
.ss-quality-visual > img { width: 75%; display: block; }
.ss-scan-line { position: absolute; left: 10%; width: 52%; height: 3px; background: linear-gradient(90deg, transparent, var(--ss-green), transparent); box-shadow: 0 0 18px var(--ss-green); animation: ssScan 4s ease-in-out infinite; }
.ss-report { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 240px; background: var(--ss-navy-900); color: rgba(255,255,255,.7); border-radius: 18px; padding: 20px; box-shadow: var(--ss-shadow); }
.ss-report-head { color: #fff; font-family: var(--font-family-headings); font-weight: 600; margin-bottom: 12px; }
.ss-report-head i { color: var(--ss-green); margin-right: 6px; }
.ss-report ul { list-style: none; padding: 0; margin: 0; }
.ss-report li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--ss-line-dark); font-size: 14px; }
.ss-report li b { color: var(--ss-green); }
.ss-report small { display: block; margin-top: 10px; font-size: 11px; color: rgba(255,255,255,.4); }

.ss-flow { height: 100%; background: #fff; border-radius: var(--ss-radius); padding: 36px 32px; border: 1px solid var(--ss-border); position: relative; overflow: hidden; transition: all .3s; }
.ss-flow:hover { box-shadow: var(--ss-shadow); transform: translateY(-4px); }
.ss-flow-icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 22px; background: var(--ss-navy-900); color: var(--ss-green); }
.ss-flow-exchange .ss-flow-icon { background: var(--ss-green); color: var(--ss-navy-900); }
.ss-flow h3 { font-size: 24px; margin: 22px 0 18px; }
.ss-flow ol { list-style: none; counter-reset: flow; padding: 0; margin: 0 0 26px; }
.ss-flow ol li { counter-increment: flow; position: relative; padding: 0 0 16px 42px; color: var(--ss-ink); font-weight: 500; }
.ss-flow ol li::before { content: counter(flow); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ss-border); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ss-green-700); background: #fff; }
.ss-flow ol li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 28px; bottom: 2px; width: 1px; background: var(--ss-border); }

.ss-reviews-swiper { overflow: hidden; padding: 4px; }
.ss-reviews-swiper .swiper-slide { height: auto; }
.ss-review-card { height: 100%; margin: 0; background: var(--ss-light); border-radius: var(--ss-radius); padding: 32px; display: flex; flex-direction: column; }
.ss-stars { color: #ffb400; font-size: 14px; letter-spacing: 2px; }
.ss-review-card blockquote { margin: 16px 0 24px; flex: 1; }
.ss-review-card blockquote p { font-size: 16.5px; line-height: 1.7; color: var(--ss-ink); margin: 0; }
.ss-review-card figcaption { display: flex; align-items: center; gap: 12px; }
.ss-review-card figcaption strong { display: block; color: var(--ss-ink); font-family: var(--font-family-headings); font-size: 15px; }
.ss-review-card figcaption span { font-size: 13.5px; }
.ss-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ss-navy-900); color: var(--ss-green); font-weight: 700; font-family: var(--font-family-headings); }

.ss-feedback { border: 1px solid var(--ss-border); border-radius: 28px; padding: 48px; background: linear-gradient(135deg, #fff, var(--ss-light)); }
.ss-feedback .ss-sec-title { font-size: clamp(26px, 2.8vw, 36px); }
.ss-feedback-card { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 24px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--ss-border); color: var(--ss-ink); transition: all .25s; }
.ss-feedback-card:hover { border-color: var(--ss-navy-900); transform: translateY(-3px); box-shadow: var(--ss-shadow-sm); color: var(--ss-ink); }
.ss-feedback-card i { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ss-navy-900); color: var(--ss-green); font-size: 18px; margin-bottom: 14px; }
.ss-feedback-card strong { font-family: var(--font-family-headings); font-weight: 600; font-size: 16px; }
.ss-feedback-card span { font-size: 13.5px; color: var(--ss-muted); }
.ss-wholesale-band { padding: 0 0 110px; }
.ss-wholesale-inner { position: relative; overflow: hidden; border-radius: 28px; padding: 64px; background: radial-gradient(600px 300px at 100% 0%, rgba(var(--ss-green-rgb), .25), transparent 60%), linear-gradient(135deg, var(--ss-navy-900), var(--ss-navy-700)); color: rgba(255,255,255,.72); }
.ss-wholesale-inner h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; line-height: 1.15; margin: 16px 0; letter-spacing: -.02em; }
.ss-inline-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: #fff; font-weight: 500; }
.ss-inline-list i { color: var(--ss-green); margin-right: 8px; }

.ss-insta-head { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
.ss-insta-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.ss-insta-tile { position: relative; display: block; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 40%, var(--ss-navy-600), var(--ss-navy-900)); }
.ss-insta-tile img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s; }
.ss-insta-over { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: #fff; background: rgba(7, 13, 24, .55); opacity: 0; transition: opacity .3s; }
.ss-insta-tile:hover img { transform: scale(1.08); }
.ss-insta-tile:hover .ss-insta-over, .ss-insta-tile:focus .ss-insta-over { opacity: 1; }

/* ---------- 6. Product cards & catalogue ---------- */
.ss-product-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); overflow: hidden; transition: box-shadow .3s, transform .3s, border-color .3s; }
.ss-product-card:hover { box-shadow: var(--ss-shadow); transform: translateY(-4px); border-color: transparent; }
.ss-pc-media { position: relative; display: block; aspect-ratio: 1 / .92; background: radial-gradient(circle at 50% 45%, #ffffff, var(--ss-light) 70%); overflow: hidden; }
.ss-pc-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .5s ease; }
.ss-product-card:hover .ss-pc-media img { transform: scale(1.06); }
.ss-pc-badges { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.ss-pc-media .ss-badge-sample { position: absolute; right: 12px; bottom: 12px; z-index: 2; font-size: 11px; padding: 3px 8px; }
.ss-pc-sold { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.6); font-family: var(--font-family-headings); font-weight: 700; color: var(--ss-ink); font-size: 18px; letter-spacing: .05em; text-transform: uppercase; }
.ss-product-card.is-sold .ss-pc-media img { filter: grayscale(1); opacity: .6; }
.ss-pc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.ss-pc-brand { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-muted); }
.ss-pc-title { font-size: 19px; font-weight: 700; margin: 4px 0 10px; letter-spacing: -.01em; }
.ss-pc-title a { color: var(--ss-ink); }
.ss-pc-title a:hover { color: var(--ss-green-700); }
.ss-pc-spec { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: var(--ss-ink); }
.ss-pc-color { margin: 0 0 12px; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.ss-swatch { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: 0 0 11px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.ss-pc-meta { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--ss-body); }
.ss-pc-meta i { color: var(--ss-green-700); margin-right: 3px; }
.ss-pc-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ss-border); }
.ss-pc-save { position: absolute; right: 14px; top: 14px; z-index: 2; font-family: var(--font-family-headings); font-size: 12.5px; font-weight: 700; color: var(--ss-green-700); background: #fff; border: 1px solid #c9f3dd; border-radius: 30px; padding: 3px 9px; }
.ss-pc-sample { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ss-muted); background: rgba(255,255,255,.85); border-radius: 6px; padding: 2px 7px; }
.ss-pc-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.ss-pc-price strong { font-family: var(--font-family-headings); font-size: 23px; color: var(--ss-ink); letter-spacing: -.02em; }
.ss-pc-price del { font-size: 14px; color: var(--ss-muted); }
.ss-pc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Catalogue layout */
.ss-catalogue { padding: 50px 0 110px; background: var(--ss-light); }
.ss-filters { background: #fff; border-radius: var(--ss-radius); border: 1px solid var(--ss-border); padding: 24px; position: sticky; top: 96px; }
.ss-filter-group { padding: 18px 0; border-bottom: 1px solid var(--ss-border); }
.ss-filter-group:first-of-type { padding-top: 0; }
.ss-filter-group:last-of-type { border-bottom: 0; }
.ss-filter-group h3 { font-size: 15px; margin-bottom: 12px; }
.ss-filter-group .form-check { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; padding-left: 0; }
.ss-filter-group .form-check-input { float: none; margin: 0; width: 18px; height: 18px; padding: 0; border-radius: 5px; border-color: #c4ccd8; flex: 0 0 18px; }
.ss-filter-group .form-check-input[type=radio] { border-radius: 50%; width: 18px; height: 18px; padding: 0; }
.ss-filter-group .form-check-input:checked { background-color: var(--ss-navy-900); border-color: var(--ss-navy-900); }
.ss-filter-group .form-check-label { font-size: 14.5px; color: var(--ss-ink); cursor: pointer; flex: 1; display: flex; justify-content: space-between; }
.ss-filter-group .form-check-label small { color: var(--ss-muted); }
.ss-price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-top: 10px; }
.ss-price-inputs input { padding: 9px 12px; border-radius: 10px; font-size: 14px; }
.ss-filters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ss-filters-head h2 { font-size: 18px; margin: 0; }
.ss-clear { font-size: 13.5px; font-weight: 700; color: var(--ss-green-700); background: none; border: 0; padding: 0; }
.ss-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); padding: 12px 14px 12px 18px; margin-bottom: 22px; }
.ss-search { position: relative; flex: 1 1 280px; max-width: 460px; }
.ss-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ss-muted); }
.ss-site .ss-search input { border-radius: 40px; padding: 11px 16px 11px 44px; background: var(--ss-light); border-color: transparent; }
.ss-toolbar .form-select { width: auto; border-radius: 40px; padding: 10px 40px 10px 18px; font-size: 14.5px; }
.ss-result-count { font-size: 14.5px; color: var(--ss-ink); font-weight: 600; }
.ss-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ss-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--ss-navy-900); color: #fff; border: 0; border-radius: 30px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.ss-chip:hover { background: var(--ss-navy-600); }
.ss-results { position: relative; min-height: 300px; transition: opacity .25s; }
.ss-results.is-loading { opacity: .45; pointer-events: none; }
.ss-empty { text-align: center; padding: 70px 20px; background: #fff; border-radius: var(--ss-radius); border: 1px dashed var(--ss-border); }
.ss-empty i { font-size: 40px; color: var(--ss-muted); margin-bottom: 16px; }
.ss-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.ss-pagination a { min-width: 44px; height: 44px; padding: 0 10px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid var(--ss-border); font-weight: 700; color: var(--ss-ink); }
.ss-pagination a.active, .ss-pagination a:hover { background: var(--ss-navy-900); color: #fff; border-color: var(--ss-navy-900); }
.ss-filter-toggle { display: none; }
.ss-brand-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 22px; scrollbar-width: thin; }
.ss-brand-tabs a { flex: 0 0 auto; border: 1px solid var(--ss-border); background: #fff; border-radius: 30px; padding: 8px 16px; font-weight: 600; font-size: 14px; color: var(--ss-ink); }
.ss-brand-tabs a.active, .ss-brand-tabs a:hover { background: var(--ss-navy-900); border-color: var(--ss-navy-900); color: #fff; }

/* ---------- 7. Product details ---------- */
.ss-pd { padding: 50px 0 90px; }
.ss-pd-gallery { position: sticky; top: 100px; }
.ss-pd-main { border-radius: 24px; background: radial-gradient(circle at 50% 45%, #fff, var(--ss-light) 70%); overflow: hidden; border: 1px solid var(--ss-border); position: relative; }
.ss-pd-main .swiper-slide a { display: block; aspect-ratio: 1; }
.ss-pd-main img { width: 100%; height: 100%; object-fit: contain; padding: 30px; }
.ss-pd-main .ss-badge-sample { position: absolute; z-index: 3; left: 16px; top: 16px; }
.ss-pd-thumbs { margin-top: 14px; overflow: hidden; }
.ss-pd-thumbs .swiper-slide { border-radius: 14px; border: 2px solid var(--ss-border); background: var(--ss-light); cursor: pointer; overflow: hidden; aspect-ratio: 1; opacity: .7; transition: all .25s; }
.ss-pd-thumbs .swiper-slide-thumb-active { border-color: var(--ss-navy-900); opacity: 1; }
.ss-pd-thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ss-pd-brand { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-muted); font-size: 13px; }
.ss-pd h1 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.03em; margin: 8px 0 14px; }
.ss-pd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.ss-pd-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; padding: 20px 0; border-top: 1px solid var(--ss-border); border-bottom: 1px solid var(--ss-border); }
.ss-pd-price strong { font-family: var(--font-family-headings); font-size: 40px; color: var(--ss-ink); letter-spacing: -.03em; }
.ss-pd-price del { color: var(--ss-muted); font-size: 18px; }
.ss-pd-price .ss-save { background: rgba(var(--ss-green-rgb), .16); color: var(--ss-green-700); font-weight: 700; border-radius: 30px; padding: 4px 12px; font-size: 14px; }
.ss-pd-price small { flex-basis: 100%; color: var(--ss-muted); font-size: 13px; }
.ss-pd-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.ss-pd-quick div { background: var(--ss-light); border-radius: 14px; padding: 14px; }
.ss-pd-quick span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-muted); font-weight: 700; }
.ss-pd-quick strong { color: var(--ss-ink); font-family: var(--font-family-headings); font-size: 16px; display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.ss-pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.ss-pd-actions .btn { width: 100%; }
.ss-pd-actions .btn-dark-solid { background: var(--ss-navy-900); color: #fff; }
.ss-pd-actions .btn-dark-solid:hover { color: #fff; }
.ss-pd-actions .btn-dark-solid span { background: var(--ss-navy-600); }
.ss-pd-offer { display: flex; gap: 12px; align-items: center; background: #effdf6; border: 1px solid #bff3d9; border-radius: 14px; padding: 14px 16px; color: var(--ss-green-700); font-weight: 600; }
.ss-pd-assure { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ss-pd-assure li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ss-ink); font-weight: 500; }
.ss-pd-assure i { color: var(--ss-green-700); font-size: 17px; width: 20px; }
.ss-spec-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ss-border); border-radius: 16px; overflow: hidden; }
.ss-spec-table th, .ss-spec-table td { padding: 14px 18px; border-bottom: 1px solid var(--ss-border); font-size: 15px; vertical-align: top; }
.ss-spec-table tr:last-child th, .ss-spec-table tr:last-child td { border-bottom: 0; }
.ss-spec-table th { width: 38%; background: var(--ss-light); color: var(--ss-ink); font-weight: 600; }
.ss-spec-table td { color: var(--ss-ink); }
.ss-pd-section { margin-top: 60px; }
.ss-pd-section h2 { font-size: 26px; margin-bottom: 20px; }
.ss-highlights { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ss-highlights li { background: var(--ss-light); border-radius: 12px; padding: 14px 16px; display: flex; gap: 10px; color: var(--ss-ink); font-weight: 500; }
.ss-highlights i { color: var(--ss-green-700); margin-top: 4px; }
.ss-grade-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ss-grade-scale div { border: 1px solid var(--ss-border); border-radius: 14px; padding: 14px; font-size: 13.5px; }
.ss-grade-scale div.active { border-color: var(--ss-navy-900); background: var(--ss-navy-900); color: rgba(255,255,255,.75); }
.ss-grade-scale strong { display: block; color: var(--ss-ink); font-family: var(--font-family-headings); margin-bottom: 4px; }
.ss-grade-scale div.active strong { color: var(--ss-green); }

/* ---------- 8. Forms ---------- */
.ss-form-card { background: #fff; border-radius: 24px; border: 1px solid var(--ss-border); padding: 40px; box-shadow: var(--ss-shadow-sm); }
.ss-form-card h2 { font-size: 28px; margin-bottom: 6px; }
.ss-form-card .ss-form-intro { margin-bottom: 26px; }
.ss-form-section { font-family: var(--font-family-headings); font-weight: 700; color: var(--ss-ink); font-size: 15px; letter-spacing: .02em; display: flex; align-items: center; gap: 12px; margin: 30px 0 18px; }
.ss-form-section:first-of-type { margin-top: 0; }
.ss-form-section span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ss-navy-900); color: var(--ss-green); font-size: 13px; }
.ss-form-section::after { content: ""; flex: 1; height: 1px; background: var(--ss-border); }
.ss-field { margin-bottom: 18px; }
.ss-field .form-label { font-weight: 600; color: var(--ss-ink); font-size: 14.5px; margin-bottom: 7px; }
.ss-field .req { color: #e2484e; }
.ss-field .opt { color: var(--ss-muted); font-weight: 400; font-size: 13px; }
.ss-site .form-control, .ss-site .form-select { border-radius: 12px; border-color: #d5dce6; padding: 13px 16px; font-size: 15.5px; color: var(--ss-ink); background-color: #fff; }
.ss-site .form-select { padding-right: 40px; }
.ss-site .form-control:focus, .ss-site .form-select:focus { border-color: var(--ss-navy-900); box-shadow: 0 0 0 4px rgba(var(--ss-green-rgb), .2); }
.ss-site .form-control.is-invalid, .ss-site .form-select.is-invalid { border-color: #e2484e; background-image: none; padding-right: 16px; }
.ss-site .form-select.is-invalid { padding-right: 40px; background-image: var(--bs-form-select-bg-img); }
.ss-site .form-control::placeholder { color: #9aa5b5; }
.invalid-feedback { font-size: 13px; color: #d23c42; }
.ss-checks { border: 0; padding: 0; margin: 0 0 18px; }
.ss-checks legend { font-size: 14.5px; float: none; }
.ss-pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-pill { border: 1px solid #d5dce6; border-radius: 30px; padding: 8px 15px; font-size: 14px; font-weight: 500; color: var(--ss-ink); cursor: pointer; transition: all .2s; user-select: none; }
.ss-pill:hover { border-color: var(--ss-navy-900); }
.btn-check:checked + .ss-pill { background: var(--ss-navy-900); border-color: var(--ss-navy-900); color: #fff; }
.btn-check:checked + .ss-pill::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--ss-green); margin-right: 7px; font-size: 12px; }
.btn-check:focus-visible + .ss-pill { outline: 3px solid rgba(var(--ss-green-rgb), .6); outline-offset: 2px; }
.ss-checks.is-invalid .ss-pill { border-color: #e2484e; }
.ss-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; border: 2px dashed #c9d2de; border-radius: 16px; padding: 28px 18px; cursor: pointer; transition: all .25s; background: var(--ss-light); }
.ss-dropzone:hover, .ss-dropzone.is-drag { border-color: var(--ss-green-600); background: #effdf6; }
.ss-dropzone i { font-size: 26px; color: var(--ss-green-700); }
.ss-dropzone .dz-title { font-weight: 700; color: var(--ss-ink); }
.ss-dropzone .dz-hint { font-size: 13px; color: var(--ss-muted); }
.ss-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-top: 12px; }
.ss-preview { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--ss-light); }
.ss-preview img { width: 100%; height: 100%; object-fit: cover; }
.ss-preview button { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(7,13,24,.8); color: #fff; font-size: 12px; display: grid; place-items: center; padding: 0; }
.ss-captcha { background: var(--ss-light); border-radius: 14px; padding: 16px; margin: 6px 0 20px; }
.ss-captcha .form-control { max-width: 120px; }
.ss-captcha-refresh { width: 46px; height: 46px; border-radius: 12px; border: 1px solid #d5dce6; background: #fff; color: var(--ss-ink); }
.ss-captcha-refresh:hover { border-color: var(--ss-navy-900); }
.ss-form-alert { border-radius: 14px; padding: 14px 18px; margin-bottom: 20px; font-weight: 500; }
.ss-alert-error { background: #fff0f0; color: #a3262b; border: 1px solid #f6c7c9; }
.ss-alert-success { background: #ecfdf4; color: var(--ss-green-700); border: 1px solid #b9f0d4; }
.ss-consent { display: flex; gap: 12px; align-items: flex-start; background: #fff9eb; border: 1px solid #f3dfa8; border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; font-size: 14px; color: #6b4e00; }
.ss-consent input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; padding: 0; accent-color: var(--ss-navy-900); }
.ss-consent.is-invalid { border-color: #e2484e; }
.ss-submit { width: 100%; padding: 16px 28px; font-size: 15px; }
.ss-submit .ss-spinner, .ss-submit:hover .ss-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(7,13,24,.3); border-top-color: var(--ss-navy-900); border-radius: 50%; animation: ssSpin .8s linear infinite; }
.ss-submit.is-loading .ss-spinner { display: inline-block; }
.ss-submit.is-loading { pointer-events: none; opacity: .85; }
.ss-form-note { font-size: 13px; color: var(--ss-muted); margin-top: 14px; text-align: center; }
.ss-success { text-align: center; padding: 30px 10px; }
.ss-success-icon { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-items: center; font-size: 34px; background: var(--ss-green); color: var(--ss-navy-900); box-shadow: 0 0 0 12px rgba(var(--ss-green-rgb), .15); }
.ss-success h3 { font-size: 26px; }
.ss-success .ss-ref { display: inline-block; margin: 10px 0 20px; background: var(--ss-light); border-radius: 10px; padding: 10px 18px; font-family: var(--font-family-headings); font-weight: 700; color: var(--ss-ink); letter-spacing: .04em; }

/* Content pages */
.ss-side-card { background: var(--ss-navy-900); color: rgba(255,255,255,.72); border-radius: 24px; padding: 34px; position: sticky; top: 100px; }
.ss-side-card h3 { color: #fff; font-size: 22px; }
.ss-side-card .ss-steps-v { list-style: none; padding: 0; margin: 22px 0; }
.ss-side-card .ss-steps-v li { display: flex; gap: 14px; margin-bottom: 20px; }
.ss-side-card .ss-steps-v b { flex: 0 0 34px; height: 34px; border-radius: 50%; background: rgba(var(--ss-green-rgb), .15); color: var(--ss-green); display: grid; place-items: center; font-family: var(--font-family-headings); }
.ss-side-card .ss-steps-v strong { display: block; color: #fff; font-family: var(--font-family-headings); font-weight: 600; margin-bottom: 2px; }
.ss-side-card .ss-steps-v span { font-size: 14px; }
.ss-side-card hr { border-color: var(--ss-line-dark); opacity: 1; margin: 24px 0; }
.ss-side-contact a { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 600; margin-bottom: 14px; }
.ss-side-contact a i { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.06); display: grid; place-items: center; color: var(--ss-green); }
.ss-note-box { display: flex; gap: 14px; background: #fff9eb; border: 1px solid #f3dfa8; color: #6b4e00; border-radius: 16px; padding: 18px 20px; }
.ss-note-box i { font-size: 20px; margin-top: 2px; }
.ss-note-slim { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--ss-body); background: #fff; border: 1px solid var(--ss-border); border-radius: 12px; padding: 11px 16px; }
.ss-note-slim i { color: var(--ss-muted); }
.ss-note-slim a { color: var(--ss-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ss-info-card { height: 100%; border: 1px solid var(--ss-border); border-radius: var(--ss-radius); padding: 30px; background: #fff; transition: all .3s; }
.ss-info-card:hover { box-shadow: var(--ss-shadow); transform: translateY(-4px); border-color: transparent; }
.ss-info-card .ss-feature-icon { margin-bottom: 20px; width: 56px; height: 56px; }
.ss-info-card h3 { font-size: 20px; margin-bottom: 10px; }
.ss-info-card p { margin: 0; }
.ss-info-card ul { padding-left: 18px; margin: 12px 0 0; }
.ss-info-card ul li { margin-bottom: 6px; }
.ss-check-item { display: flex; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--ss-border); }
.ss-check-item:last-child { border-bottom: 0; }
.ss-check-num { flex: 0 0 52px; height: 52px; border-radius: 14px; background: var(--ss-navy-900); color: var(--ss-green); display: grid; place-items: center; font-size: 20px; }
.ss-check-item h3 { font-size: 19px; margin-bottom: 6px; }
.ss-check-item p { margin: 0; }
.ss-dark-section { background: var(--ss-navy-900); color: rgba(255,255,255,.72); }
.ss-dark-section h2, .ss-dark-section h3 { color: #fff; }
.ss-grade-card { height: 100%; border-radius: var(--ss-radius); padding: 28px; background: var(--ss-navy-800); border: 1px solid var(--ss-line-dark); }
.ss-grade-card .ss-badge { margin-bottom: 16px; }
.ss-grade-card h3 { font-size: 20px; }
.ss-grade-card p { margin: 0; }
.ss-legal { padding: 70px 0 100px; }
.ss-legal h2 { font-size: 22px; margin: 36px 0 12px; }
.ss-legal p, .ss-legal li { line-height: 1.75; }
.ss-legal .ss-note-box { margin-bottom: 30px; }
.ss-value { text-align: center; padding: 34px 26px; border-radius: var(--ss-radius); background: #fff; border: 1px solid var(--ss-border); height: 100%; }
.ss-value .ss-feature-icon { margin: 0 auto 18px; }
.ss-about-visual { position: relative; border-radius: 28px; padding: 40px; background: radial-gradient(circle at 70% 30%, rgba(var(--ss-green-rgb), .25), transparent 60%), var(--ss-navy-900); }
.ss-about-visual img { width: 100%; }
.ss-about-stat { position: absolute; left: -20px; bottom: 30px; background: #fff; border-radius: 18px; padding: 18px 22px; box-shadow: var(--ss-shadow); }
.ss-about-stat strong { display: block; font-family: var(--font-family-headings); font-size: 30px; color: var(--ss-ink); line-height: 1; }
.ss-about-stat span { font-size: 13.5px; }
.ss-contact-tile { display: flex; gap: 16px; align-items: center; padding: 22px; border-radius: var(--ss-radius); border: 1px solid var(--ss-border); background: #fff; height: 100%; color: var(--ss-ink); transition: all .3s; }
.ss-contact-tile:hover { border-color: var(--ss-navy-900); color: var(--ss-ink); transform: translateY(-3px); }
.ss-contact-tile .ss-feature-icon { flex: 0 0 52px; }
.ss-contact-tile span { display: block; font-size: 13px; color: var(--ss-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ss-contact-tile strong { font-family: var(--font-family-headings); font-size: 17px; word-break: break-word; }
.ss-faq .accordion-item { border: 1px solid var(--ss-border); border-radius: 14px !important; overflow: hidden; margin-bottom: 12px; }
.ss-faq .accordion-button { font-family: var(--font-family-headings); font-weight: 600; color: var(--ss-ink); padding: 18px 22px; box-shadow: none; }
.ss-faq .accordion-button:not(.collapsed) { background: var(--ss-light); color: var(--ss-ink); }
.ss-faq .accordion-body { padding: 4px 22px 20px; background: var(--ss-light); }
.ss-404 { padding: 120px 0; text-align: center; }
.ss-404 .ss-404-code { font-family: var(--font-family-headings); font-weight: 800; font-size: clamp(100px, 18vw, 190px); line-height: 1; letter-spacing: -.05em; background: linear-gradient(180deg, var(--ss-ink), #8a95a6); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 9. Stores, footer, WhatsApp ---------- */
.ss-store-card { height: 100%; display: flex; flex-direction: column; border: 1px solid var(--ss-border); border-radius: 22px; overflow: hidden; background: #fff; }
.ss-store-media { aspect-ratio: 16 / 8; background: var(--ss-light); position: relative; }
.ss-store-media iframe, .ss-store-media img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.ss-store-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.ss-store-body .ss-eyebrow { color: var(--ss-green-700); }
.ss-store-body h3 { font-size: 24px; margin: 10px 0 12px; }
.ss-store-address { color: var(--ss-ink); font-weight: 500; }
.ss-store-address i, .ss-store-contact i { color: var(--ss-green-700); width: 20px; }
.ss-store-note { font-size: 13.5px; color: #8a5a00; background: #fff7e0; border-radius: 10px; padding: 8px 12px; }
.ss-store-contact { list-style: none; padding: 0; margin: 0 0 20px; }
.ss-store-contact li { margin-bottom: 6px; }
.ss-store-contact a { color: var(--ss-ink); font-weight: 600; }
.ss-store-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

.ss-footer { background: var(--ss-navy-950); color: rgba(255,255,255,.62); padding: 0; position: relative; }
.ss-footer-cta { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding: 44px 48px; margin: 0 0 70px; transform: translateY(0); border-radius: 0 0 26px 26px; background: linear-gradient(120deg, var(--ss-navy-700), var(--ss-navy-800)); border: 1px solid var(--ss-line-dark); border-top: 0; }
.ss-footer-cta h2 { max-width: 620px; margin-top: 10px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; }
.ss-footer-main { padding-bottom: 60px; }
.ss-footer p { line-height: 1.75; }
.ss-footer-title { color: #fff; font-size: 17px; font-weight: 600; margin-bottom: 22px; }
.ss-footer-links { list-style: none; padding: 0; margin: 0; }
.ss-footer-links li { margin-bottom: 11px; }
.ss-footer-links a { color: rgba(255,255,255,.62); }
.ss-footer-links a:hover { color: var(--ss-green); padding-left: 4px; }
.ss-footer-store { display: flex; gap: 14px; margin-bottom: 18px; }
.ss-footer-store > i { color: var(--ss-green); margin-top: 5px; }
.ss-footer-store strong { display: block; color: #fff; font-weight: 600; }
.ss-footer-store span { display: block; font-size: 14.5px; }
.ss-footer-store a { color: var(--ss-green); font-size: 13.5px; font-weight: 600; }
.ss-footer-contact { list-style: none; padding: 0; margin: 22px 0 0; }
.ss-footer-contact li { margin-bottom: 10px; }
.ss-footer-contact i { color: var(--ss-green); width: 22px; }
.ss-footer-contact a { color: #fff; }
.ss-social { display: flex; gap: 10px; }
.ss-social a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: #fff; transition: all .25s; }
.ss-social a:hover { background: var(--ss-green); color: var(--ss-navy-900); }
.ss-footer-bottom { border-top: 1px solid var(--ss-line-dark); padding: 22px 0; font-size: 14px; }
.ss-footer-bottom a { color: rgba(255,255,255,.62); }
.ss-footer-bottom a:hover { color: var(--ss-green); }

.ss-wa-float { position: fixed; left: 22px; bottom: 22px; z-index: 1040; }
.ss-wa-btn { width: 58px; height: 58px; border-radius: 50%; border: 0; background: #25d366; color: #fff; font-size: 29px; display: grid; place-items: center; box-shadow: 0 10px 26px -10px rgba(7, 13, 24, .55), 0 0 0 4px rgba(255,255,255,.9); transition: transform .25s; }
.ss-wa-btn:hover { transform: scale(1.06); }
.ss-wa-panel { position: absolute; left: 0; bottom: 76px; width: 310px; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px -18px rgba(7,13,24,.45); transform-origin: bottom left; animation: ssPop .25s ease; }
@keyframes ssPop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
.ss-wa-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #075e54; color: #fff; }
.ss-wa-head strong { display: block; font-family: var(--font-family-headings); font-size: 15px; }
.ss-wa-head span { display: block; font-size: 12px; opacity: .8; }
.ss-wa-avatar { width: 42px; height: 42px; border-radius: 50%; background: #25d366; display: grid; place-items: center; font-size: 22px; }
.ss-wa-close { margin-left: auto; border: 0; background: transparent; color: #fff; font-size: 18px; }
.ss-wa-body { padding: 16px; background: #efeae2; }
.ss-wa-body p { background: #fff; border-radius: 0 12px 12px 12px; padding: 10px 14px; margin: 0 0 12px; color: var(--ss-ink); font-size: 14.5px; }
.ss-wa-body a { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 11px 14px; margin-bottom: 8px; color: var(--ss-ink); font-weight: 600; font-size: 14px; transition: all .2s; }
.ss-wa-body a:hover { background: #25d366; color: #fff; }
.ss-wa-body a i { color: #128c7e; width: 18px; }
.ss-wa-body a:hover i { color: #fff; }
.ss-wa-body a.alt { background: transparent; border: 1px dashed #b9c2b0; font-weight: 500; }
.scroll-top { right: 22px; bottom: 22px; }
.scroll-top:after { content: "\f106"; font-family: "Font Awesome 6 Free"; font-weight: 900; }

/* ---------- 10. Responsive ---------- */
@media (min-width: 1200px) {
   .ss-header .navbar .navbar-nav .nav-link { white-space: nowrap; }
}
@media (max-width: 1599.98px) {
   .ss-header .ss-btn-ghost { display: none !important; }
}
@media (max-width: 1399.98px) {
   .ss-header .navbar .navbar-nav .nav-link { padding: 10px 7px; font-size: 14px; }
   .ss-header .navbar-brand img { max-width: 160px; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
   .ss-header .ss-btn-ghost { display: inline-flex !important; }
}
@media (max-width: 1199.98px) {
   .sec-padding { padding: 90px 0; }
   .ss-brands-wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
   .ss-brand-grid { width: 100%; }
   .ss-insta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .ss-filters { position: static; }
}
@media (max-width: 991.98px) {
   .ss-hero { padding: 60px 0 80px; }
   .ss-hero-visual { max-width: 480px; }
   .ss-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
   .ss-filter-toggle { display: inline-flex; }
   .ss-filters-wrap { position: fixed; inset: 0; z-index: 1050; background: rgba(4, 8, 15, .55); display: none; }
   .ss-filters-wrap.open { display: block; }
   .ss-filters-wrap .ss-filters { position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 92vw); border-radius: 0; overflow-y: auto; }
   .ss-pd-gallery, .ss-side-card { position: static; }
   .ss-wholesale-inner { padding: 44px 32px; }
   .ss-footer-cta { padding: 34px 28px; }
   .ss-report { width: 210px; }
}
@media (max-width: 767.98px) {
   .sec-padding { padding: 70px 0; }
   .ss-sec-head { margin-bottom: 34px; }
   .ss-hero-actions { grid-template-columns: 1fr; gap: 10px; }
   .ss-action { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; padding: 14px 16px; }
   .ss-action i.ss-action-icon { margin: 0; }
   .ss-action span { display: none; }
   .ss-action .fa-arrow-right { top: 50%; transform: translateY(-50%); }
   .ss-feedback { padding: 30px 22px; }
   .ss-float-card { padding: 9px 12px; }
   .ss-fc-1 { left: 0; top: 4%; }
   .ss-fc-2 { right: 0; }
   .ss-fc-3 { display: none; }
   .ss-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .ss-checklist, .ss-highlights, .ss-pd-assure { grid-template-columns: 1fr; }
   .ss-insta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .ss-form-card { padding: 26px 20px; border-radius: 20px; }
   .ss-pd-quick { grid-template-columns: 1fr 1fr; }
   .ss-grade-scale { grid-template-columns: 1fr 1fr; }
   .ss-toolbar { padding: 12px; }
   .ss-search { max-width: none; flex-basis: 100%; }
   .ss-toolbar .form-select { flex: 1; }
   .ss-offer-hero { min-height: 0; padding: 30px 26px 220px; }
   .ss-offer-hero img { width: 260px; right: -30px; bottom: -80px; }
   .ss-quality-visual { padding: 20px 0; }
   .ss-report { position: relative; transform: none; top: auto; width: auto; margin: -40px 20px 0; }
   .ss-quality-visual > img { width: 70%; margin: 0 auto; }
   .ss-about-stat { left: 10px; }
   .ss-pd-price strong { font-size: 34px; }
   .ss-wa-float { left: 14px; bottom: 14px; }
   .ss-wa-btn { width: 54px; height: 54px; font-size: 27px; }
   .scroll-top { right: 14px; bottom: 16px; }
   .ss-store-actions .ss-btn-sm { flex: 1 1 auto; }
}
@media (max-width: 575.98px) {
   .ss-pc-actions { grid-template-columns: 1fr; }
   .ss-hero-search { padding-left: 16px; }
   .ss-hero-search button { padding: 11px 16px; }
   .ss-pd-actions { grid-template-columns: 1fr; }
   .ss-deal-card img { width: 86px; flex-basis: 86px; }
}
@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}