:root {
--bg-outer: #fff;
--bg: #efdcd2;
--bg-soft: #f3e8e1;
--panel: #f7f1ec;
--panel-2:#f2ebe6;
--ink: #2b1f1a;
--muted:#6f5c53;
--gold:#a0773e;
--gold-d:#8a6433;
--border: rgba(43,31,26,.12);
--radius: 18px;
--shadow: 0 20px 60px rgba(0,0,0,.08);
--maxw: 1100px;
}
* {
box-sizing:border-box;
}
body {
margin:0;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color:var(--ink);
background:
radial-gradient(1200px 600px at 20% -10%, #f7e9e2 0%, transparent 60%),
radial-gradient(1100px 700px at 100% 0%, #dcc0b5 0%, transparent 60%),
var(--bg-outer);
}
.page {
max-width:var(--maxw);
margin:26px auto 48px;
padding:16px;
background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 55%, #ead6cc 100%);
border-radius: 22px;
box-shadow: var(--shadow);
border:1px solid var(--border);
overflow:hidden;
}
/* NAV */
.nav {
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 18px 0;
}
.brand-mini {
font-family:"Playfair Display", serif;
font-weight:700;
letter-spacing:.08em;
color:var(--gold);
}
.brand-mini img {
width: 50%;
height: auto;
}
.nav ul {
margin:0;
padding:0;
list-style:none;
display:flex;
gap:22px;
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--muted);
}
.nav a {
color:inherit;
text-decoration:none;
padding:6px 4px;
}
.nav a:hover {
color:var(--ink);
}
/* HERO */
.hero {
display:grid;
grid-template-columns: 1.05fr .95fr;
gap:14px;
padding:8px 18px 18px;
align-items:stretch;
min-height:430px;
border-bottom:1px solid var(--border);
}
.hero-left {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:18px 12px;
}
.hero-logo {
font-family:"Playfair Display", serif;
font-size:88px;
font-weight:600;
letter-spacing:.08em;
color:var(--gold);
line-height:1;
margin:0;
text-shadow:0 2px 0 rgba(255,255,255,.6);
}
.hero-title {
font-family:"Playfair Display", serif;
font-size:50px;
letter-spacing:.22em;
text-transform:uppercase;
margin:8px 0 10px;
color:var(--gold);
}
.hero-sub {
font-size:11px;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--ink);
opacity:.9;
margin-bottom:16px;
line-height:1.5;
max-width:36ch;
}
.btn {
display:inline-block;
padding:9px 18px;
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
border-radius:2px;
border:1px solid var(--gold-d);
background:var(--gold);
color:#fff;
text-decoration:none;
box-shadow: 0 8px 18px rgba(160,119,62,.25);
}
.btn:hover {
filter:brightness(.96);
transform:translateY(-1px);
}
.btn-outline {
background:transparent;
color:var(--ink);
border:1px solid var(--border);
box-shadow:none;
padding:9px 14px;
}
/* Subtle Pulse Animation for CTA button */
.btn {
display:inline-block;
padding:9px 18px;
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
border-radius:2px;
border:1px solid var(--gold-d);
background:var(--gold);
color:#fff;
text-decoration:none;
box-shadow: 0 8px 18px rgba(160,119,62,.25);
animation: breathe 5s ease-in-out infinite;
}
/* hover now only changes lightness (no transform) */
.btn:hover {
filter:brightness(.96);
}
@keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.03);
}
}
@keyframes breathe {
0%, 100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-3px) scale(1.02);
}
}
.hero-right {
position: relative;
padding: 12px;
border-radius: 22px;
background: rgba(255,255,255,0.5);
box-shadow:
0 12px 40px rgba(0,0,0,0.10),
0 4px 14px rgba(0,0,0,0.08);
backdrop-filter: blur(6px);
}
.hero-right img {
display: block;
margin: 0 auto;
border-radius: 20px;
box-shadow:
0 10px 28px rgba(0,0,0,0.12),
0 3px 10px rgba(160,119,62,0.25);
}
.hero-right::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
url("data:image/svg+xml;utf8, ") repeat;
opacity: 0.14;
mix-blend-mode: soft-light;
animation: heroShine 16s linear infinite;
}
@keyframes heroShine {
from {
background-position: 0 0;
}
to {
background-position: 180px 180px;
}
}
/* COLLAGE ASYMMETRIC GRID (matches original) */
.collage {
display:grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap:0;
background:transparent;
}
.panel {
background:var(--panel);
padding:34px 36px;
border-right:1px solid var(--border);
border-bottom:1px solid var(--border);
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
}
.panel h2 {
font-family:"Playfair Display", serif;
font-size:26px;
letter-spacing:.12em;
text-transform:uppercase;
margin:0 0 10px;
color:var(--gold-d);
line-height:1.25;
}
.panel p {
font-size:12px;
color:var(--muted);
line-height:1.6;
max-width:34ch;
margin:0 auto 14px;
}
/* grid placement */
.panel-sell {
grid-column:1;
grid-row:1;
}
.img-top-right {
grid-column:2;
grid-row:1;
border-bottom:1px solid var(--border);
background:
linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.08)),
url("/mnt/data/87872bef-520c-4253-ada5-4ea8155e0eb6.png") center/cover no-repeat;
}
.img-large-left {
grid-column:1;
grid-row:2 / span 2;
border-right:1px solid var(--border);
border-bottom:1px solid var(--border);
background:
radial-gradient(900px 450px at 0% 0%, rgba(255,255,255,.25) 0%, transparent 60%),
url("/mnt/data/87872bef-520c-4253-ada5-4ea8155e0eb6.png") center/cover no-repeat;
}
.img-mid-right {
grid-column:2;
grid-row:2;
border-bottom:1px solid var(--border);
background:
linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.06)),
url("/mnt/data/87872bef-520c-4253-ada5-4ea8155e0eb6.png") center/cover no-repeat;
}
.panel-desire {
grid-column:2;
grid-row:3;
background:var(--panel-2);
border-bottom:1px solid var(--border);
padding:36px 36px;
text-align:center;
display:flex;
flex-direction:column;
justify-content:center;
}
/* PRODUCTS */
.products {
background: var(--panel);
padding: 26px 24px 34px;
display:grid;
grid-template-columns: repeat(3,1fr);
gap:18px;
border-top:1px solid var(--border);
}
.card {
background:#efe7e1;
border:1px solid var(--border);
padding:12px;
display:grid;
gap:10px;
justify-items:center;
text-align:center;
}
.card-img {
width:100%;
height:150px;
border:1px solid var(--border);
background:
url("/mnt/data/87872bef-520c-4253-ada5-4ea8155e0eb6.png") center/cover no-repeat;
}
.card .btn {
font-size:10px;
padding:8px 12px;
}
/* ============================================================
LUXURY FEMININE • SOFT + AIRY • FLORAL + GOLD DUST OVERLAY
============================================================ */
.img-large-left {
position: relative;
display: flex;
align-items: center;
padding: 60px 55px 65px;
background:
url("/mnt/data/87872bef-520c-4253-ada5-4ea8155e0eb6.png") center/cover no-repeat;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
overflow: hidden;
}
/* 1) SOFT FLORAL SILHOUETTES */
.img-large-left::before {
content: "";
position: absolute;
inset: 0;
background:
url("/mnt/data/ChatGPT Image Nov 25, 2025 at 01_54_27 PM.png") left/contain no-repeat,
radial-gradient(circle at 0% 40%, rgba(255,255,255,0.5), transparent 60%);
opacity: 0.12;
mix-blend-mode: soft-light;
pointer-events: none;
}
/* 2) GOLD DUST — SUPER subtle shimmer */
.img-large-left::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 70%, rgba(255,230,190,0.25), transparent 80%),
url("data:image/svg+xml;utf8, ") repeat;
background-size: 300px 300px;
opacity: 0.14;
animation: goldDust 12s linear infinite;
pointer-events: none;
}
@keyframes goldDust {
0% {
background-position: 0 0;
}
100% {
background-position: 200px 200px;
}
}
/* TEXT AREA */
.diversity-message {
position: relative;
z-index: 10;
max-width: 420px;
color: var(--ink);
}
/* TITLE — light, soft, feminine */
.diversity-message h2 {
font-family: "Playfair Display", serif;
font-size: 32px;
font-weight: 600;
margin: 0 0 18px;
letter-spacing: 0.02em;
color: var(--ink);
opacity: 0.92;
}
/* BODY TEXT — elegant + airy */
.diversity-message p {
font-size: 14.5px;
line-height: 1.68;
color: var(--ink);
opacity: 0.85;
margin: 0 0 14px;
}
.diversity-message strong {
color: var(--ink);
font-weight: 600;
}
/* GOLD ACCENT — soft + smooth */
.diversity-message::after {
content: "";
display: block;
width: 62px;
height: 3px;
background: var(--gold);
border-radius: 2px;
margin-top: 26px;
opacity: 0.6;
}
/* STORY PANEL (luxury, feminine, consistent with site) */
.panel-story {
background: var(--panel-2);
border-bottom: 1px solid var(--border);
border-right: 1px solid var(--border);
padding: 46px 46px 52px;
text-align: left;
position: relative;
overflow: hidden;
}
/* soft rose wash */
.panel-story::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 30%, rgba(255,230,220,0.55), transparent 70%);
opacity: 0.6;
pointer-events: none;
}
/* floral silhouette blend */
.panel-story::after {
content: "";
position: absolute;
left: -80px;
top: 20%;
width: 340px;
height: 340px;
background: url("/mnt/data/ChatGPT Image Nov 25, 2025 at 01_54_27 PM.png") center/cover no-repeat;
opacity: 0.07;
mix-blend-mode: soft-light;
filter: blur(2px);
pointer-events: none;
}
/* title matching site design */
.panel-story h2 {
font-family:"Playfair Display", serif;
font-size: 26px;
letter-spacing:.12em;
text-transform:uppercase;
margin:0 0 18px;
color:var(--gold-d);
}
/* body text consistent with panel styling */
.panel-story p {
font-size:12px;
color:var(--muted);
line-height:1.6;
max-width:40ch;
margin:0 0 18px;
}
/* gold underline */
.panel-story p:last-of-type::after {
content:"";
display:block;
width:58px;
height:3px;
background:var(--gold);
margin-top:26px;
border-radius:2px;
opacity:0.7;
}
.story-block {
grid-column: 1;
grid-row: 2 / span 2;
position: relative;
height: 100%;
width: 100%;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.story-block::before {
content: "";
position:absolute;
inset:0;
background: radial-gradient(
circle at 50% 60%,
rgba(255,220,210,0.55),
rgba(240,205,195,0.35) 40%,
rgba(220,190,180,0.15) 70%,
transparent 100%
);
pointer-events:none;
}
/* -----------------------------------------
FLOATING PERSONAL NOTE (Luxury & Feminine)
----------------------------------------- */
.floating-note {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-1.2deg);
width: 75%;
padding: 20px 20px;
background: linear-gradient(135deg,
rgba(255, 240, 236, 0.96),
rgba(255, 225, 225, 0.94),
rgba(250, 210, 210, 0.92)
);
border-radius: 32px;
backdrop-filter: blur(14px);
box-shadow:
0 14px 40px rgba(0,0,0,0.08),
0 6px 14px rgba(255,200,180,0.35);
clip-path: ellipse(90% 70% at 50% 50%);
z-index: 3;
animation: fadeFloat .8s ease-out forwards;
}
@keyframes fadeFloat {
from {
opacity: 0;
transform: translate(-50%, -40%) rotate(-1.2deg);
}
to {
opacity: 1;
transform: translate(-50%, -50%) rotate(-1.2deg);
}
}
/* GOLD DUST */
.floating-note::after {
content: "";
position: absolute;
inset: 0;
background:
url("data:image/svg+xml;utf8, ") repeat;
background-size: 260px 260px;
opacity: 0.22;
mix-blend-mode: screen;
animation: goldFloat 18s linear infinite;
pointer-events: none;
}
@keyframes goldFloat {
from {
background-position: 0 0;
}
to {
background-position: 200px 200px;
}
}
/* FLORAL SILHOUETTES */
.floating-note::before {
content: "";
position: absolute;
inset: -20px;
background:
url("/mnt/data/ChatGPT Image Nov 25, 2025 at 01_54_27 PM.png") center/contain no-repeat;
opacity: 0.06;
mix-blend-mode: soft-light;
filter: blur(3px);
pointer-events: none;
}
/* TEXT CONTENT */
.note-inner {
position: relative;
z-index: 10;
}
.floating-note h2 {
font-family:"Playfair Display", serif;
font-size: 28px;
text-transform: uppercase;
letter-spacing: .08em;
margin: 0 0 20px;
color: var(--gold-d);
}
.floating-note p {
color: var(--ink);
font-size: 14px;
line-height: 1.7;
margin: 0 0 16px;
opacity: 0.85;
}
.floating-note strong {
color: var(--ink);
font-weight: 600;
}
/* SIGNATURE */
.note-signature {
margin-top: 24px;
font-size: 13px;
opacity: 0.8;
color: var(--ink);
}
.note-signature span {
display: block;
font-family: "Playfair Display", serif;
font-size: 20px;
font-style: italic;
margin-top: 2px;
color: var(--gold-d);
}
/* ============================================================
HOW IT WORKS — FINAL & CLEAN (vertical premium layout)
============================================================ */
.howitworks-section {
margin-top: 40px;
padding: 2px 40px 38px;
background: linear-gradient(180deg, #fff9f4 0%, #f4e3dc 100%);
border-radius: 18px;
border: 1px solid var(--border);
text-align: center;
box-shadow: 0 14px 26px rgba(0,0,0,0.05);
}
.howitworks-title {
font-family: "Playfair Display", serif;
font-size: 26px;
letter-spacing: .14em;
margin-bottom: 2px;
color: var(--gold-d);
}
/* steps grid */
.howitworks-steps-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 2px;
}
/* each step */
.hw-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
/* icon */
.hw-step .hw-icon {
width: 150px;
margin-bottom:-35px;
height: auto;
filter: drop-shadow(0 2px 4px rgba(160,119,62,0.2));
opacity: 0.95;
}
.hw-icon {
display:block;
}
/* title */
.hw-title {
font-family: "Playfair Display", serif;
font-size: 17px;
font-weight: 600;
margin: 0;
color: var(--ink);
letter-spacing: 0.02em;
}
/* description */
.hw-desc {
font-size: 13px;
line-height: 1.5;
color: var(--muted);
margin: 0;
max-width: 32ch;
}
/* CTA row */
.howitworks-bottom-row {
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* CTA title */
.hw-cta h4 {
font-family: "Playfair Display", serif;
font-size: 15px;
letter-spacing: .1em;
margin-bottom: 10px;
color: var(--ink);
}
/* preview image */
.hw-image-box {
width: 120px;
padding: 8px;
border-radius: 12px;
background: rgba(255,255,255,0.55);
box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}
.hw-photo {
width: 100%;
border-radius: 10px;
}
/* HERO – right image card */
/* FINAL OVERRIDE — force hero image to behave */
.hero .hero-right img {
height: 430px !important;
width: 100% !important;
object-fit: cover !important;
border-radius: 20px;
}
.hero .hero-right {
height: 430px !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.hero-photo {
height: 430px;
width: 100%;
object-fit: cover;
border-radius: 20px;
}
.img-mid-right {
position: relative;
overflow: hidden;
height: 340px;
}
.img-mid-right img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
display: block;
}
/* ==========================
CLEAN & FINAL — HOW IT WORKS CTA
========================== */
.howitworks-bottom-row {
margin-top: 50px;
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
padding: 40px 20px 60px;
}
/* LEFT: TEXT */
.hw-cta {
max-width: 380px;
text-align: center;
}
.hw-subtitle {
font-family: "Playfair Display", serif;
font-size: 24px;
font-weight: 600;
letter-spacing: .08em;
color: var(--gold-d);
margin-bottom: 16px;
}
.hw-text {
color: var(--muted);
font-size: 15px;
line-height: 1.6;
margin-bottom: 26px;
}
/* BUTTON */
.hw-btn {
display: inline-block;
margin: 0 auto;
padding: 12px 28px;
font-size: 12px;
}
/* RIGHT: IMAGE */
.hw-image {
padding: 18px;
background: rgba(255,255,255,0.6);
border-radius: 16px;
box-shadow: 0 12px 22px rgba(0,0,0,0.10),
0 4px 10px rgba(160,119,62,0.16);
}
.hw-image img {
width: 180px;
border-radius: 14px;
}
/* MOBILE */
@media (max-width: 900px) {
.howitworks-bottom-row {
flex-direction: column;
gap: 30px;
padding-bottom: 40px;
}
.hw-image img {
width: 200px;
}
}
/* ==========================
SOFT PREMIUM CARD LAYOUT
========================== */
.howitworks-bottom-row {
margin-top: 60px;
display: flex;
justify-content: center;
align-items: stretch;
gap: 40px;
padding-bottom: 20px;
}
/* Shared card styling */
.hw-card {
background: rgba(255, 255, 255, 0.65);
padding: 40px 45px;
border-radius: 24px;
box-shadow:
0 12px 24px rgba(0,0,0,0.09),
0 4px 12px rgba(150,110,60,0.15);
backdrop-filter: blur(4px);
}
/* LEFT CARD: TEXT */
.hw-card-text {
max-width: 400px;
text-align: center;
}
/* Title */
.hw-subtitle {
font-family: "Playfair Display", serif;
font-size: 26px;
font-weight: 600;
color: #6C4A2E;
letter-spacing: 0.5px;
margin-bottom: 18px;
}
/* Paragraph */
.hw-text {
color: #6F5A4A;
font-size: 16px;
line-height: 1.6;
margin-bottom: 28px;
}
/* Button */
.hw-btn {
display: inline-block;
margin: 0 auto;
padding: 12px 28px;
font-size: 13px;
}
/* RIGHT CARD: IMAGE */
.hw-card-image img {
width: 220px;
height: auto;
border-radius: 16px;
display: block;
margin: 0 auto;
}
/* MOBILE — stacked vertically */
@media (max-width: 900px) {
.howitworks-bottom-row {
flex-direction: column;
gap: 30px;
}
.hw-card-text,
.hw-card-image {
width: 100%;
max-width: 380px;
margin: 0 auto;
}
}
/* ==========================
REFINED PREMIUM CARDS
========================== */
.howitworks-bottom-row {
margin-top: 40px;
display: flex;
justify-content: center;
align-items: flex-start;
gap: 40px;
padding-bottom: 20px;
}
/* Shared card style */
.hw-card {
background: rgba(255, 255, 255, 0.55);
padding: 32px 36px;
border-radius: 20px;
width: 360px;
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.07),
0 3px 8px rgba(150, 110, 60, 0.12);
backdrop-filter: blur(4px);
}
/* TEXT CARD */
.hw-card-text {
text-align: center;
}
.hw-subtitle {
font-family: "Playfair Display", serif;
font-size: 24px;
font-weight: 600;
color: #6C4A2E;
margin-bottom: 14px;
}
.hw-text {
color: #6F5A4A;
font-size: 15px;
line-height: 1.55;
margin-bottom: 22px;
}
/* Button */
.hw-btn {
display: inline-block;
margin: 0 auto;
padding: 10px 24px;
font-size: 13px;
}
/* IMAGE CARD */
.hw-card-image {
padding: 22px;
display: flex;
justify-content: center;
align-items: center;
}
.hw-card-image img {
width: 200px;
height: auto;
border-radius: 14px;
object-fit: cover;
display: block;
}
/* Mobile layout */
@media (max-width: 900px) {
.howitworks-bottom-row {
flex-direction: column;
gap: 20px;
}
.hw-card {
width: 85%;
margin: 0 auto;
}
.hw-card-image img {
width: 180px;
}
}
/* ==========================
FINAL — CLEAN, ELEGANT CTA ROW
========================== */
.howitworks-bottom-cta {
margin-top: 40px;
text-align: center;
}
.cta-subtitle {
font-family: "Playfair Display", serif;
font-size: 22px;
font-weight: 600;
color: var(--gold-d);
letter-spacing: .08em;
margin-bottom: 14px;
}
.cta-button {
display: inline-block;
margin: 0 auto 0px;
padding: 12px 28px;
background: var(--gold);
color: #fff;
border-radius: 4px;
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
border: 1px solid var(--gold-d);
box-shadow: 0 8px 16px rgba(160,119,62,.25);
text-decoration: none;
}
/* The two equal cards */
.howitworks-bottom-row {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 0;
}
.hw-card {
width: 360px;
height: 220px;
background: rgba(255,255,255,0.65);
padding: 28px;
border-radius: 18px;
box-shadow:
0 8px 16px rgba(0,0,0,.08),
0 3px 8px rgba(150,110,60,.12);
display: flex;
justify-content: center;
align-items: center;
}
.hw-card-text {
text-align: center;
}
.hw-text {
font-size: 15px;
line-height: 1.48;
color: var(--muted);
max-width: 280px;
margin: 0 auto;
}
.hw-card-image img {
width: 290px;
border-radius: 12px;
display: block;
margin: 0 auto;
}
.category-label {
font-family: "Cormorant Garamond", serif;
font-size: 18px;
color: #8C6E54;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
letter-spacing: 0.5px;
}
/* MOBILE */
@media (max-width: 900px) {
.howitworks-bottom-row {
flex-direction: column;
gap: 20px;
}
.hw-card {
width: 100%;
max-width: 370px;
height: auto;
}
.hw-card-image img {
width: 200px;
}
}
/* ==========================
PREMIUM FANCY TEXT CARD
========================== */
.fancy-text-card {
position: relative;
overflow: hidden;
padding-top: 40px !important;
}
/* Gold line accent */
.fancy-text-card .gold-accent {
width: 60px;
height: 3px;
background: var(--gold);
margin: 0 auto 18px;
border-radius: 2px;
}
/* Soft blush glow behind text */
.fancy-text-card .soft-glow {
position: absolute;
top: 50%;
left: 50%;
width: 220px;
height: 220px;
background: radial-gradient(
circle,
rgba(255, 220, 210, 0.45) 0%,
rgba(255, 220, 210, 0.15) 45%,
transparent 70%
);
transform: translate(-50%, -50%);
filter: blur(20px);
z-index: 1;
pointer-events: none;
}
/* Beautiful quote styling */
.fancy-quote {
position: relative;
z-index: 2;
font-size: 15px;
line-height: 1.55;
color: var(--muted);
max-width: 280px;
margin: 0 auto;
text-align: center;
}
.fancy-quote .quote-mark {
font-size: 32px;
color: var(--gold-d);
display: block;
margin-bottom: 6px;
opacity: 0.9;
}
/* --- Mini gold label --- */
.mini-label {
display: block;
text-align: center;
font-size: 12px;
letter-spacing: 0.12em;
color: var(--gold-d);
margin-bottom: 14px;
font-weight: 600;
}
/* --- Editorial quote style --- */
.editorial-quote {
font-size: 16px;
line-height: 1.6;
color: var(--muted);
text-align: center;
max-width: 280px;
margin: 0 auto;
}
/* Optional soft frame */
.fancy-text-card.v2 {
padding: 40px 32px;
border: 1px solid rgba(210,175,150,0.18);
border-radius: 18px;
background: white;
}
.step-title {
font-family: "Playfair Display", serif;
font-size: 20px;
font-weight: 600;
color: #7a5534;
margin-top: 16px;
margin-bottom: 10px;
letter-spacing: 0.4px;
}
.site-footer {
background: #faf7f9;
padding: 10px 20px;
margin-top: 6px;
border-top: 1px solid rgba(212, 174, 141, 0.35);
}
.footer-inner {
text-align: center;
color: #444;
font-family: "Cormorant Garamond", serif;
}
.footer-tagline {
font-size: 1rem;
color: #7a6b6b;
margin-bottom: 10px;
}
.footer-links {
margin-bottom: 10px;
}
.footer-links a {
margin: 0 12px;
font-size: 0.9rem;
color: #7a6b6b;
text-decoration: none;
transition: color 0.25s ease, opacity 0.25s ease;
}
.footer-links a:hover {
color: #bfa074;
opacity: 0.9;
}
.footer-copy {
font-size: 0.8rem;
opacity: 0.7;
}
/* tighter spacing between step title and description */
.step-title {
font-family: "Playfair Display", serif;
font-size: 17px;
font-weight: 600;
color: #7a5534;
letter-spacing: 0.02em;
margin-top: 0px;
margin-bottom: 2px;
}
/* make sure the paragraph doesn’t re-add extra gap */
.hw-desc {
margin-top: 0;
}
/* === Buyer Demand Widget =================================== */
.demand-widget {
background: linear-gradient(145deg, #fdf7f2 0%, #f7ebe1 100%);
border-radius: 18px;
box-shadow: 0 18px 40px rgba(151, 104, 60, 0.16);
padding: 18px 16px 14px;
max-width: 490px;
margin: 10px auto;
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
color: #6b4a37;
}
.demand-header {
text-align: left;
margin-bottom: 18px;
}
.demand-header h2 {
font-family: "Playfair Display", "Times New Roman", serif;
font-size: 22px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #8a5a33;
margin: 0 0 4px;
}
.demand-subtitle {
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #b49884;
margin: 0;
}
.demand-list {
list-style: none;
padding: 0;
margin: 0 0 18px;
}
.demand-item {
padding: 14px 0 10px;
border-top: 1px solid rgba(186, 151, 121, 0.28);
}
.demand-item:first-child {
border-top: none;
padding-top: 4px;
}
.demand-row-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.demand-label {
display: flex;
align-items: center;
gap: 6px;
}
.demand-icon {
font-size: 16px;
}
.demand-name {
font-size: 14px;
font-weight: 600;
color: #5b4030;
}
.demand-percent {
font-size: 13px;
font-weight: 600;
color: #b37b3e;
}
.demand-bar {
position: relative;
width: 100%;
height: 6px;
border-radius: 999px;
background: rgba(222, 187, 157, 0.35);
overflow: hidden;
margin-bottom: 6px;
}
.demand-bar-fill {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #d49a5d 0%, #b17338 100%);
box-shadow: 0 0 10px rgba(210, 154, 96, 0.55);
}
.demand-note {
font-size: 12px;
line-height: 1.55;
color: #846554;
margin: 0;
}
.demand-footer {
display: flex;
justify-content: space-between;
align-items: baseline;
border-top: 1px solid rgba(186, 151, 121, 0.35);
padding-top: 10px;
margin-top: 4px;
font-size: 12px;
}
.demand-footer-label {
text-transform: uppercase;
letter-spacing: 0.16em;
color: #b49884;
}
.demand-footer-link {
font-size: 12px;
font-weight: 600;
color: #b17338;
text-decoration: none;
position: relative;
}
.demand-footer-link::after {
content: "›";
margin-left: 4px;
font-size: 13px;
}
.demand-footer-link:hover {
text-decoration: underline;
}
#sell h2 {
font-family: "Playfair Display", serif;
font-size: 42px;
font-weight: 700;
line-height: 1.25;
letter-spacing: 1px;
color: #7c5732;
margin-bottom: 28px;
text-transform: uppercase;
}
#sell p {
font-family: "Inter", sans-serif;
font-size: 18px;
line-height: 1.6;
color: #6a5544;
max-width: 600px;
margin: 0 auto 36px;
white-space: pre-line;
}
/* ================================
SCENT PANEL – BUYER MESSAGE BOX
================================ */
.scent-panel {
position: relative;
padding: 0;
overflow: hidden;
border-radius: 24px;
box-shadow: 0 18px 40px rgba(167, 122, 83, 0.08);
}
/* Background media (video or image) */
.scent-media {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transform: scale(1.03);
filter: saturate(1.1) contrast(1.02);
}
/* Soft gradient overlay for the message */
.scent-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 3rem 3.5rem;
max-width: 60%;
background: linear-gradient(
90deg,
rgba(248, 232, 222, 0.96) 0%,
rgba(248, 232, 222, 0.86) 40%,
rgba(248, 232, 222, 0.0) 100%
);
}
/* Title */
.scent-title {
font-family: "Playfair Display", serif;
font-size: 1.6rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #81512d;
margin: 0 0 1.2rem;
}
/* Anonymous quote */
.scent-quote {
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.98rem;
line-height: 1.7;
color: #6b4a35;
font-style: italic;
margin: 0 0 0.75rem;
}
/* Signature line */
.scent-meta {
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #b3875f;
margin: 0;
}
/* Mobile adjustments */
@media (max-width: 900px) {
.scent-overlay {
max-width: 100%;
padding: 2.2rem 2rem;
background: linear-gradient(
180deg,
rgba(248, 232, 222, 0.96) 0%,
rgba(248, 232, 222, 0.9) 60%,
rgba(248, 232, 222, 0.0) 100%
);
}
.scent-title {
font-size: 1.35rem;
margin-bottom: 0.8rem;
}
.scent-quote {
font-size: 0.95rem;
}
}
/* Reduce the height of the BUY / SCENT panel */
.scent-panel {
height: 30vh;
max-height: 380px;
min-height: 220px;
position: relative;
overflow: hidden;
border-radius: 22px;
}
/* Make the background media fit the new height */
.scent-media {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
/* Adjust overlay to avoid overcrowding */
.scent-overlay {
padding: 1.5rem 2rem;
max-width: 55%;
}
/* Tighter typography for small panel */
.scent-title {
font-size: 1.3rem;
margin-bottom: 0.5rem;
}
.scent-quote {
font-size: 0.85rem;
line-height: 1.45;
margin-bottom: 0.4rem;
}
.scent-meta {
font-size: 0.7rem;
letter-spacing: 0.1em;
}
/* Mobile scaling */
@media (max-width: 900px) {
.scent-panel {
height: auto;
max-height: none;
padding-bottom: 1rem;
}
.scent-overlay {
max-width: 100%;
background: rgba(248, 232, 222, 0.88);
padding: 1.3rem;
}
}
/* RESET the last attempt */
.scent-overlay {
position: absolute;
top: 0;
left: 0;
padding: 2.5rem 2.5rem 2.5rem 3rem;
max-width: 60%;
background: linear-gradient(
90deg,
rgba(248, 232, 222, 0.95) 0%,
rgba(248, 232, 222, 0.85) 45%,
rgba(248, 232, 222, 0.0) 100%
);
}
/* TITLE */
.scent-title {
margin-bottom: 0.8rem;
}
/* QUOTE */
.scent-quote {
max-width: 36ch;
font-size: 1rem;
line-height: 1.55;
}
/* SIGNATURE */
.scent-meta {
margin-top: 0.6rem;
font-size: 0.85rem;
letter-spacing: 0.12em;
}
/* MOBILE */
@media (max-width: 900px) {
.scent-overlay {
max-width: 100%;
padding: 1.8rem;
}
}
.panel-desire,
.img-mid-right {
max-height: 300px;
height: 300px;
}
.img-mid-right img {
object-fit: cover;
height: 100%;
}
.icon-wrapper {
width: 100%;
height: 180px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.category-icon {
max-height: 90%;
max-width: 90%;
object-fit: contain;
}
.contact-wrapper {
padding: 40px 50px;
color: #7a5b47;
font-family: "Didot", serif;
}
.contact-title {
font-size: 32px;
letter-spacing: 2px;
text-transform: uppercase;
color: #876444;
margin-bottom: 10px;
}
.contact-subtitle {
font-size: 14px;
color: #b08e72;
margin-bottom: 30px;
}
.contact-form .form-group {
margin-bottom: 20px;
}
.contact-form label {
display: block;
font-size: 13px;
letter-spacing: 1px;
margin-bottom: 6px;
color: #8e6f54;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 12px 15px;
border-radius: 10px;
border: 1px solid #e8d6c7;
background: #fffaf7;
font-size: 14px;
color: #7a5b47;
transition: all 0.2s ease-in-out;
outline: none;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #d0a88c;
box-shadow: 0 0 8px rgba(208, 168, 140, 0.25);
}
.contact-form textarea {
height: 120px;
resize: none;
}
.contact-btn {
margin-top: 10px;
background: linear-gradient(180deg, #c9a37b, #8d6b4c);
color: white;
border: none;
padding: 14px 26px;
border-radius: 12px;
font-size: 15px;
letter-spacing: 1px;
cursor: pointer;
transition: 0.2s ease-in-out;
}
.contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0px 8px 14px rgba(124, 86, 55, 0.25);
}
/* =========================================
CONTACT PAGE — exclusive styling
========================================= */
.contact-page .hero-right {
min-height: 820px !important;
height: auto !important;
padding: 0px 0px !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
}
.contact-page .contact-wrapper {
width: 100%;
max-width: 680px;
margin-top: 10px;
}
/* ==========================================
CONTACT PAGE • TRUST / STEPS / FAQ LAYOUT
========================================== */
.contact-page .contact-extras {
margin: 70px 0 50px;
}
/* -------- TOP TWO LARGE PANELS -------- */
.contact-page .extras-panel {
max-width: var(--maxw);
margin: 0 auto 32px;
border-radius: 28px;
padding: 46px 60px 50px;
background: linear-gradient(
180deg,
#fdf3e7 0%,
#f7decd 55%,
#f1d0bf 100%
);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.09);
border: 1px solid rgba(196, 161, 132, 0.45);
}
.contact-page .extras-inner {
max-width: 960px;
margin: 0 auto;
}
/* panel titles */
.contact-page .extras-heading {
font-family: "Playfair Display", serif;
font-size: 25px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold-d);
text-align: center;
margin: 0 0 34px;
}
/* three columns inside panels */
.contact-page .extras-columns {
display: flex;
justify-content: space-between;
gap: 48px;
}
/* each column */
.contact-page .extras-col {
flex: 1;
text-align: center;
padding: 0 14px;
}
/* thin vertical separators */
.contact-page .extras-col + .extras-col {
border-left: 1px solid rgba(183, 145, 121, 0.38);
}
/* icons */
.contact-page .extras-icon {
width: 74px;
height: 74px;
object-fit: contain;
margin-bottom: 2px;
opacity: 0.95;
}
/* column headings */
.contact-page .extras-col h3 {
font-family: "Playfair Display", serif;
font-size: 16px;
font-weight: 600;
color: #7a5534;
margin: 0 0 8px;
}
/* column body */
.contact-page .extras-col p {
font-size: 13px;
line-height: 1.6;
color: var(--muted);
margin: 0;
}
/* -------- BOTTOM ROW: THREE CREAM CARDS -------- */
.contact-page .extras-bottom {
max-width: var(--maxw);
margin: 0 auto;
display: flex;
justify-content: space-between;
gap: 24px;
}
.contact-page .bottom-card {
flex: 1;
border-radius: 26px;
padding: 26px 24px 28px;
background: linear-gradient(
180deg,
#fdf3e7 0%,
#f7decd 55%,
#f1d0bf 100%
);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.09);
border: 1px solid rgba(196, 161, 132, 0.45);
font-size: 13px;
color: var(--muted);
}
/* bottom titles */
.contact-page .bottom-card h3 {
font-family: "Playfair Display", serif;
font-size: 16px;
font-weight: 600;
color: #7a5534;
text-align: center;
margin: 0 0 10px;
}
/* list card (left) */
.contact-page .bottom-card--steps .bottom-list {
list-style: none;
margin: 8px 0 0;
padding: 0;
}
.contact-page .bottom-card--steps .bottom-list li {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.contact-page .bottom-card--steps .dot {
width: 8px;
height: 8px;
border-radius: 999px;
border: 1px solid #b38452;
}
/* FAQ paragraphs spacing */
.contact-page .bottom-card--faq p {
margin: 0 0 6px;
}
/* make FAQ questions slightly stronger */
.contact-page .bottom-card--faq strong {
color: #7a5534;
font-weight: 600;
}
/* -------- RESPONSIVE -------- */
@media (max-width: 900px) {
.contact-page .extras-panel {
padding: 32px 24px 34px;
border-radius: 22px;
}
.contact-page .extras-columns {
flex-direction: column;
gap: 22px;
}
.contact-page .extras-col + .extras-col {
border-left: none;
border-top: 1px solid rgba(183, 145, 121, 0.34);
padding-top: 16px;
}
.contact-page .extras-col {
text-align: left;
}
.contact-page .extras-heading {
font-size: 22px;
letter-spacing: 0.16em;
margin-bottom: 24px;
}
.contact-page .extras-bottom {
flex-direction: column;
}
.contact-page .bottom-card h3 {
text-align: left;
}
}
.contact-page .extras-panel,
.contact-page .bottom-card {
background: #f8f4ee !important;
border: 1px solid rgba(180,150,120,0.28) !important;
box-shadow: 0 16px 36px rgba(0,0,0,0.06) !important;
}
/* ==========================================================
FINAL PREMIUM LUXURY CARDS – CONTACT PAGE BOTTOM ROW
========================================================== */
.contact-page .bottom-card {
position: relative;
background: #fcf9f5;
border-radius: 26px;
padding: 46px 34px 40px;
border: 1px solid rgba(180,150,120,0.22);
box-shadow:
0 22px 40px rgba(0,0,0,0.06),
0 4px 12px rgba(160,120,80,0.12);
background-image:
radial-gradient(circle at 30% 20%, rgba(245,225,215,0.45), transparent 65%),
radial-gradient(circle at 80% 70%, rgba(240,220,210,0.25), transparent 70%);
background-blend-mode: soft-light;
overflow: hidden;
}
/* ICON at top (optional image) */
.contact-page .bottom-card .card-icon {
width: 42px;
height: 42px;
margin: 0 auto 14px;
opacity: 0.9;
filter: drop-shadow(0 2px 3px rgba(150,110,60,0.12));
}
/* TITLE */
.contact-page .bottom-card h3 {
font-family: "Playfair Display", serif;
font-weight: 600;
font-size: 20px;
letter-spacing: 0.03em;
color: #6c4f33;
text-align: center;
margin: 0 0 16px;
}
/* Gold underline */
.contact-page .bottom-card h3::after {
content: "";
display: block;
width: 48px;
height: 3px;
background: var(--gold);
border-radius: 2px;
margin: 12px auto 0;
opacity: 0.85;
}
/* CONTENT AREA — now aligned left for luxury feel */
.contact-page .bottom-card p,
.contact-page .bottom-card li {
font-size: 15px;
line-height: 1.65;
color: #6e5a4e;
}
/* LIST FIXES */
.bottom-card--steps .bottom-list {
padding-left: 0;
margin-top: 6px;
}
.bottom-card--steps .bottom-list li {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 12px;
}
/* Gold dot style */
.bottom-card--steps .dot {
width: 6px;
height: 6px;
background: var(--gold);
border-radius: 50%;
margin-top: 10px;
flex-shrink: 0;
}
/* FAQ styling */
.bottom-card--faq strong {
color: #6c4f33;
font-weight: 600;
}
/* ============================================
FINAL TYPOGRAPHIC FIX FOR BOTTOM 3 CARDS
============================================ */
.contact-page .bottom-card {
padding: 50px 40px 48px;
text-align: left;
}
.contact-page .bottom-card h3 {
text-align: center;
font-size: 22px;
margin-bottom: 6px;
}
.contact-page .bottom-card h3::after {
margin-top: 12px;
margin-bottom: 26px;
}
/* Make content readable and narrow */
.contact-page .bottom-card .content-wrap {
max-width: 340px;
margin: 0 auto;
}
/* Paragraphs */
.contact-page .bottom-card p {
font-size: 16px;
line-height: 1.65;
margin-bottom: 14px;
color: #6d5548;
}
/* LIST spacing + readable width */
.bottom-card--steps .bottom-list {
margin-top: 6px;
margin-left: 8px;
}
.bottom-card--steps .bottom-list li {
margin-bottom: 12px;
line-height: 1.65;
font-size: 16px;
display: flex;
align-items: flex-start;
}
/* FAQ text hierarchy */
.bottom-card--faq p strong {
font-size: 16px;
line-height: 1.7;
}
.bottom-card--faq p {
font-size: 16px;
margin-bottom: 16px;
line-height: 1.65;
}
/* =========================================
FINAL OVERRIDE — Bottom cards icon size + centering
Paste this at the VERY END of styles.css
========================================= */
.contact-page .extras-bottom .bottom-card .card-icon {
display: block;
width: 72px;
height: 72px;
object-fit: contain;
margin: 0 auto 18px;
opacity: 0.95;
filter: drop-shadow(0 2px 4px rgba(160,119,62,0.18));
}
/* ==========================
Contact form — consent slider captcha
========================== */
.human-check {
margin: 18px 0 18px;
padding: 14px 16px;
border-radius: 14px;
background: rgba(255,255,255,0.55);
border: 1px solid rgba(208,168,140,0.32);
box-shadow: 0 10px 22px rgba(0,0,0,0.06);
}
.human-check__head {
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.human-check__label {
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8e6f54;
font-weight: 600;
}
.human-check__status {
font-size: 12px;
color: #b08e72;
}
.human-check__track {
position: relative;
padding: 12px 12px;
border-radius: 12px;
background: rgba(255,250,247,0.85);
border: 1px solid rgba(232,214,199,0.9);
}
.human-check__hint {
position:absolute;
right:14px;
top:50%;
transform: translateY(-50%);
font-size: 12px;
color: rgba(138,100,51,0.55);
letter-spacing: 0.06em;
pointer-events:none;
}
.human-check__slider {
width: 100%;
appearance: none;
height: 8px;
border-radius: 999px;
background: rgba(208,168,140,0.28);
outline: none;
}
.human-check__slider::-webkit-slider-thumb {
appearance:none;
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid rgba(138,100,51,0.5);
background: linear-gradient(180deg, #c9a37b, #8d6b4c);
box-shadow: 0 10px 18px rgba(124,86,55,0.20);
cursor: pointer;
}
.human-check__slider::-moz-range-thumb {
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid rgba(138,100,51,0.5);
background: linear-gradient(180deg, #c9a37b, #8d6b4c);
box-shadow: 0 10px 18px rgba(124,86,55,0.20);
cursor: pointer;
}
/* verified state */
.human-check.is-verified {
border-color: rgba(160,119,62,0.40);
box-shadow: 0 14px 28px rgba(160,119,62,0.10);
}
.human-check.is-verified .human-check__status {
color: #7a5534;
font-weight: 600;
}
.human-check.is-verified .human-check__hint {
opacity: 0;
}
/* button locked look */
.contact-btn[disabled] {
opacity: 0.55;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* FINAL FIX — bullet (dot) alignment in "We would love to know..." */
.contact-page .bottom-card--steps .bottom-list li {
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
margin-bottom: 18px !important;
}
.contact-page .bottom-card--steps .dot {
width: 7px !important;
height: 7px !important;
border-radius: 50% !important;
background: var(--gold) !important;
border: none !important;
flex-shrink: 0 !important;
margin-top: 12px !important;
}
@media (max-width: 920px) {
.howitworks-steps-row {
grid-template-columns: 1fr;
gap: 40px;
}
.howitworks-bottom-row {
flex-direction: column;
gap: 24px;
}
.hw-image-box {
margin: 0 auto;
}
}
/* Responsive */
@media (max-width: 920px) {
.hero {
grid-template-columns:1fr;
min-height:auto;
}
.hero-right {
min-height:320px;
}
.collage {
grid-template-columns:1fr;
grid-template-rows: auto;
}
.panel, .img-top-right, .img-large-left, .img-mid-right, .panel-desire {
grid-column:auto;
grid-row:auto;
min-height:240px;
border-right:none;
}
.products {
grid-template-columns:1fr;
}
.nav ul {
gap:12px;
}
.hero-title {
font-size:40px;
}
}
/* ==========================================================
FAQ PAGE — add this at the VERY END of assets/styles.css
========================================================== */
.faq-page .faq-hero {
min-height: auto;
grid-template-columns: 1fr;
padding: 34px 18px 26px;
display: block;
}
.faq-page .faq-hero__inner {
max-width: 920px;
margin: 0 auto;
text-align: center;
}
.faq-page .faq-title {
font-family: "Playfair Display", serif;
margin: 0;
font-size: clamp(34px, 4.2vw, 56px);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold-d);
line-height: 1.05;
}
.faq-page .faq-subtitle {
margin: 14px auto 10px;
font-size: 14px;
color: var(--muted);
letter-spacing: .02em;
}
.faq-page .faq-ornament {
width: 160px;
height: 1px;
margin: 18px auto 26px;
background: rgba(160,119,62,.35);
position: relative;
}
.faq-page .faq-ornament::after {
content:"";
position:absolute;
left: 50%;
top: -4px;
transform: translateX(-50%);
width: 18px;
height: 9px;
border: 1px solid rgba(160,119,62,.35);
border-radius: 99px;
background: rgba(255,255,255,.35);
}
/* Selector Card */
.faq-page .faq-selectorCard {
background: rgba(255,255,255,.55);
border: 1px solid rgba(43,31,26,.10);
border-radius: 22px;
box-shadow: 0 18px 45px rgba(0,0,0,.07);
padding: 18px 18px 16px;
max-width: 640px;
margin: 0 auto 8px;
backdrop-filter: blur(6px);
}
.faq-page .faq-selectorCard__top {
display:flex;
align-items:center;
justify-content:center;
gap: 12px;
margin-bottom: 12px;
}
.faq-page .faq-bubbleIcon {
width: 42px;
height: 42px;
background: var(--faq-icon-bubble) center/contain no-repeat;
opacity: .9;
filter: drop-shadow(0 2px 3px rgba(160,119,62,.18));
}
.faq-page .faq-selectorCard__headline {
font-family: "Playfair Display", serif;
font-size: 18px;
color: var(--ink);
letter-spacing: .02em;
}
.faq-page .faq-selectorCard__sub {
font-size: 13px;
color: var(--muted);
}
.faq-page .faq-selector {
display:grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.faq-page .faq-path {
border: 1px solid rgba(43,31,26,.10);
background: rgba(255,255,255,.55);
border-radius: 16px;
padding: 14px 14px;
cursor: pointer;
display:flex;
align-items:center;
justify-content:center;
gap: 10px;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.faq-page .faq-path:hover {
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(0,0,0,.06);
}
.faq-page .faq-path.is-active {
background: rgba(239,220,210,.55);
border-color: rgba(160,119,62,.35);
box-shadow: 0 18px 30px rgba(160,119,62,.10);
}
.faq-page .faq-path__icon {
width: 28px;
height: 28px;
display:inline-block;
opacity: .92;
filter: drop-shadow(0 2px 3px rgba(160,119,62,.15));
}
.faq-page .faq-path__label {
font-size: 12px;
letter-spacing: .16em;
color: var(--gold-d);
font-weight: 600;
}
/* Two columns */
.faq-page .faq-grid {
display:grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
padding: 26px 18px 8px;
max-width: var(--maxw);
margin: 0 auto;
}
.faq-page .faq-col {
background: rgba(255,255,255,.45);
border: 1px solid rgba(43,31,26,.10);
border-radius: 22px;
box-shadow: 0 18px 40px rgba(0,0,0,.06);
padding: 18px 16px 14px;
backdrop-filter: blur(6px);
}
.faq-page .faq-col__head {
text-align:center;
padding: 6px 6px 14px;
}
.faq-page .faq-col__title {
font-family: "Playfair Display", serif;
font-size: 18px;
margin: 0;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-d);
}
.faq-page .faq-col__desc {
margin: 8px 0 0;
color: var(--muted);
font-size: 13px;
}
.faq-page .faq-block {
margin: 12px 6px 14px;
}
.faq-page .faq-block__label {
text-align:center;
font-size: 12px;
letter-spacing: .18em;
color: rgba(138,100,51,.7);
margin: 10px 0 10px;
}
/* Accordion */
.faq-page .faq-acc {
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(43,31,26,.09);
background: rgba(255,255,255,.55);
}
.faq-page .faq-q {
width: 100%;
text-align: left;
background: transparent;
border: 0;
padding: 14px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap: 14px;
cursor:pointer;
color: var(--ink);
font-size: 14px;
border-top: 1px solid rgba(43,31,26,.08);
transition: background .18s ease;
}
.faq-page .faq-q:first-of-type {
border-top: 0;
}
.faq-page .faq-q:hover {
background: rgba(239,220,210,.35);
}
.faq-page .faq-plus {
width: 18px;
height: 18px;
position: relative;
flex: 0 0 18px;
opacity: .8;
}
.faq-page .faq-plus::before,
.faq-page .faq-plus::after {
content:"";
position:absolute;
left: 50%;
top: 50%;
width: 14px;
height: 2px;
background: rgba(138,100,51,.75);
transform: translate(-50%,-50%);
border-radius: 2px;
}
.faq-page .faq-plus::after {
transform: translate(-50%,-50%) rotate(90deg);
transition: transform .18s ease, opacity .18s ease;
}
.faq-page .faq-q[aria-expanded="true"] .faq-plus::after {
transform: translate(-50%,-50%) rotate(0deg);
opacity: 0;
}
.faq-page .faq-a {
height: 0;
overflow: hidden;
border-top: 1px solid rgba(43,31,26,.08);
}
.faq-page .faq-a__inner {
padding: 12px 16px 16px;
font-size: 13px;
line-height: 1.7;
color: var(--muted);
}
/* Trust strip */
.faq-page .faq-trust {
max-width: var(--maxw);
margin: 14px auto 0;
padding: 18px 18px 8px;
}
.faq-page .faq-trust__grid {
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
background: rgba(255,255,255,.35);
border: 1px solid rgba(43,31,26,.10);
border-radius: 22px;
padding: 16px;
box-shadow: 0 18px 40px rgba(0,0,0,.06);
}
.faq-page .faq-trust__item {
text-align:center;
padding: 8px 10px 10px;
}
.faq-page .faq-trust__item + .faq-trust__item {
border-left: 1px solid rgba(160,119,62,.22);
}
.faq-page .faq-trust__icon {
width: 44px;
height: 44px;
margin: 0 auto 8px;
opacity: .9;
filter: drop-shadow(0 2px 3px rgba(160,119,62,.15));
}
.faq-page .faq-trust__item h3 {
font-family: "Playfair Display", serif;
font-size: 15px;
margin: 0 0 6px;
color: #6c4f33;
}
.faq-page .faq-trust__item p {
margin: 0;
font-size: 13px;
color: var(--muted);
line-height: 1.55;
}
/* Quick cards */
.faq-page .faq-quick {
max-width: var(--maxw);
margin: 14px auto 0;
padding: 0 18px 10px;
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.faq-page .faq-quickCard {
background: rgba(255,255,255,.50);
border: 1px solid rgba(43,31,26,.10);
border-radius: 22px;
box-shadow: 0 18px 40px rgba(0,0,0,.06);
padding: 18px 16px 16px;
text-align:center;
transition: transform .18s ease, box-shadow .18s ease;
}
.faq-page .faq-quickCard:hover {
transform: translateY(-2px);
box-shadow: 0 24px 46px rgba(0,0,0,.07);
}
.faq-page .faq-quickCard__icon {
width: 44px;
height: 44px;
margin: 0 auto 10px;
opacity: .9;
filter: drop-shadow(0 2px 3px rgba(160,119,62,.15));
}
.faq-page .faq-quickCard h4 {
font-family: "Playfair Display", serif;
margin: 0 0 8px;
color: #6c4f33;
font-size: 16px;
}
.faq-page .faq-quickCard p {
margin: 0 0 12px;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
.faq-page .faq-quickCard__link {
font-size: 12px;
letter-spacing: .04em;
color: var(--gold-d);
text-decoration: none;
}
.faq-page .faq-quickCard__link:hover {
text-decoration: underline;
}
/* CTA */
.faq-page .faq-cta {
text-align:center;
padding: 26px 18px 32px;
}
.faq-page .faq-cta h3 {
font-family:"Playfair Display", serif;
font-size: 22px;
margin: 0 0 8px;
color: var(--gold-d);
letter-spacing: .04em;
}
.faq-page .faq-cta p {
margin: 0 0 14px;
color: var(--muted);
}
/* Reveal animations */
.faq-page .reveal {
opacity: 0;
transform: translateY(10px);
transition: opacity .6s ease, transform .6s ease;
}
.faq-page .reveal.is-in {
opacity: 1;
transform: translateY(0);
}
/* Pop animation used by JS */
.faq-page .pop {
animation: faqPop .35s ease;
}
@keyframes faqPop {
from {
transform: translateY(4px);
filter: blur(.2px);
opacity:.92;
}
to {
transform: translateY(0);
filter:none;
opacity:1;
}
}
/* Responsive */
@media (max-width: 980px) {
.faq-page .faq-grid {
grid-template-columns: 1fr;
}
.faq-page .faq-selector {
grid-template-columns: 1fr;
}
.faq-page .faq-trust__grid {
grid-template-columns: 1fr;
}
.faq-page .faq-trust__item + .faq-trust__item {
border-left: 0;
border-top: 1px solid rgba(160,119,62,.22);
padding-top: 16px;
}
.faq-page .faq-quick {
grid-template-columns: 1fr;
}
}
/* Inline SVG icons (no files) */
:root {
--faq-icon-bubble: url("data:image/svg+xml;utf8, ");
--faq-icon-buyers: url([bad url]);
--faq-icon-sellers: url([bad url]);
--faq-icon-lock: url([bad url]);
--faq-icon-shield: url([bad url]);
--faq-icon-chat: url([bad url]);
--faq-icon-user: url([bad url]);
--faq-icon-privacy: url([bad url]);
--faq-icon-support: url([bad url]);
}
.faq-page .faq-icon--buyers {
background: var(--faq-icon-buyers) center/contain no-repeat;
}
.faq-page .faq-icon--sellers {
background: var(--faq-icon-sellers) center/contain no-repeat;
}
.faq-page .faq-icon--lock {
background: var(--faq-icon-lock) center/contain no-repeat;
}
.faq-page .faq-icon--shield {
background: var(--faq-icon-shield) center/contain no-repeat;
}
.faq-page .faq-icon--chat {
background: var(--faq-icon-chat) center/contain no-repeat;
}
.faq-page .faq-icon--user {
background: var(--faq-icon-user) center/contain no-repeat;
}
.faq-page .faq-icon--privacy {
background: var(--faq-icon-privacy) center/contain no-repeat;
}
.faq-page .faq-icon--support {
background: var(--faq-icon-support) center/contain no-repeat;
}
/* === FAQ: show BOTH columns on desktop, toggle only on mobile === */
/* Desktop/tablet: always show both columns */
@media (min-width: 981px) {
.faq-page #panel-buyers,
.faq-page #panel-sellers {
display: block !important;
}
}
/* Mobile: keep your toggle behavior */
@media (max-width: 980px) {
.faq-page #panel-buyers[hidden],
.faq-page #panel-sellers[hidden] {
display: none !important;
}
}
/* === FAQ focus/blur effect for inactive column === */
.faq-page .faq-col {
transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.faq-page .faq-col.is-blurred {
filter: blur(2.5px);
opacity: .65;
transform: scale(.995);
}
/* optional: prevent interacting with the blurred column */
.faq-page .faq-col.is-blurred {
pointer-events: none;
}
/* keep text crisp for people sensitive to blur (optional accessibility) */
@media (prefers-reduced-motion: reduce) {
.faq-page .faq-col {
transition: none;
}
.faq-page .faq-col.is-blurred {
filter: none;
opacity: .7;
transform: none;
}
}
/* === FAQ typography refinement === */
/* Main page title */
.faq-page .faq-title {
font-size: clamp(30px, 3.6vw, 48px);
letter-spacing: .11em;
}
/* Subtitle under main title */
.faq-page .faq-subtitle {
font-size: 13px;
line-height: 1.5;
letter-spacing: .015em;
}
/* Section titles: FOR BUYERS / FOR SELLERS */
.faq-page .faq-col__title {
font-size: 16px;
letter-spacing: .12em;
}
/* Section descriptions */
.faq-page .faq-col__desc {
font-size: 12.5px;
}
/* Category labels: — ORDERING — / — PRIVACY — */
.faq-page .faq-block__label {
font-size: 11px;
letter-spacing: .16em;
}
/* Accordion questions */
.faq-page .faq-q {
font-size: 13.5px;
}
/* Accordion answers */
.faq-page .faq-a__inner {
font-size: 12.5px;
line-height: 1.65;
}
/* ==========================================================
FIX: FAQ ICONS NOT SHOWING (invalid url(\"...\") vars)
Paste at END of styles.css
========================================================== */
:root {
--faq-icon-lock: url("data:image/svg+xml;utf8,");
--faq-icon-shield: url("data:image/svg+xml;utf8,");
--faq-icon-chat: url("data:image/svg+xml;utf8,");
--faq-icon-user: url("data:image/svg+xml;utf8,");
--faq-icon-privacy: url("data:image/svg+xml;utf8,");
--faq-icon-support: url("data:image/svg+xml;utf8,");
}
/* Ensure they render as backgrounds */
.faq-page .faq-icon--lock {
background: var(--faq-icon-lock) center/contain no-repeat;
}
.faq-page .faq-icon--shield {
background: var(--faq-icon-shield) center/contain no-repeat;
}
.faq-page .faq-icon--chat {
background: var(--faq-icon-chat) center/contain no-repeat;
}
.faq-page .faq-icon--user {
background: var(--faq-icon-user) center/contain no-repeat;
}
.faq-page .faq-icon--privacy {
background: var(--faq-icon-privacy) center/contain no-repeat;
}
.faq-page .faq-icon--support {
background: var(--faq-icon-support) center/contain no-repeat;
}
/* ==========================================================
REGISTER PAGE (scoped) — add at END of assets/styles.css
========================================================== */
.register-page .reg-hero {
min-height: auto;
grid-template-columns: 1fr;
padding: 34px 18px 26px;
display: block;
}
.register-page .reg-hero__inner {
max-width: 980px;
margin: 0 auto;
text-align: center;
}
.register-page .reg-title {
font-family: "Playfair Display", serif;
margin: 0;
font-size: clamp(30px, 3.6vw, 48px);
letter-spacing: .11em;
text-transform: uppercase;
color: var(--gold-d);
line-height: 1.05;
}
.register-page .reg-subtitle {
margin: 14px auto 10px;
font-size: 13px;
color: var(--muted);
letter-spacing: .015em;
line-height: 1.5;
}
.register-page .reg-ornament {
width: 160px;
height: 1px;
margin: 18px auto 26px;
background: rgba(160,119,62,.35);
position: relative;
}
.register-page .reg-ornament::after {
content:"";
position:absolute;
left: 50%;
top: -4px;
transform: translateX(-50%);
width: 18px;
height: 9px;
border: 1px solid rgba(160,119,62,.35);
border-radius: 99px;
background: rgba(255,255,255,.35);
}
/* Selector card */
.register-page .reg-selectorCard {
background: rgba(255,255,255,.55);
border: 1px solid rgba(43,31,26,.10);
border-radius: 22px;
box-shadow: 0 18px 45px rgba(0,0,0,.07);
padding: 18px 18px 16px;
max-width: 680px;
margin: 0 auto 8px;
backdrop-filter: blur(6px);
}
.register-page .reg-selectorCard__top {
display:flex;
align-items:center;
justify-content:center;
gap: 12px;
margin-bottom: 12px;
}
.register-page .reg-selectorCard__headline {
font-family: "Playfair Display", serif;
font-size: 18px;
color: var(--ink);
letter-spacing: .02em;
}
.register-page .reg-selectorCard__sub {
font-size: 13px;
color: var(--muted);
}
.register-page .reg-badgeIcon {
width: 42px;
height: 42px;
background: var(--reg-icon-badge) center/contain no-repeat;
opacity: .9;
filter: drop-shadow(0 2px 3px rgba(160,119,62,.18));
}
.register-page .reg-selector {
display:grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.register-page .reg-path {
border: 1px solid rgba(43,31,26,.10);
background: rgba(255,255,255,.55);
border-radius: 16px;
padding: 14px 14px;
cursor: pointer;
display:flex;
align-items:center;
justify-content:center;
gap: 10px;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.register-page .reg-path:hover {
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(0,0,0,.06);
}
.register-page .reg-path.is-active {
background: rgba(239,220,210,.55);
border-color: rgba(160,119,62,.35);
box-shadow: 0 18px 30px rgba(160,119,62,.10);
}
.register-page .reg-path__icon {
width: 28px;
height: 28px;
display:inline-block;
opacity: .92;
filter: drop-shadow(0 2px 3px rgba(160,119,62,.15));
}
.register-page .reg-path__label {
font-size: 12px;
letter-spacing: .16em;
color: var(--gold-d);
font-weight: 600;
}
/* Grid */
.register-page .reg-grid {
display:grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
padding: 26px 18px 8px;
max-width: var(--maxw);
margin: 0 auto;
}
.register-page .reg-col {
background: rgba(255,255,255,.45);
border: 1px solid rgba(43,31,26,.10);
border-radius: 22px;
box-shadow: 0 18px 40px rgba(0,0,0,.06);
padding: 18px 16px 14px;
backdrop-filter: blur(6px);
transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.register-page .reg-col.is-blurred {
filter: blur(2.5px);
opacity: .65;
transform: scale(.995);
pointer-events: none;
}
.register-page .reg-col__head {
text-align:center;
padding: 6px 6px 14px;
}
.register-page .reg-col__title {
font-family: "Playfair Display", serif;
font-size: 16px;
margin: 0;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold-d);
}
.register-page .reg-col__desc {
margin: 8px 0 0;
color: var(--muted);
font-size: 12.5px;
}
.register-page .reg-block {
margin: 12px 6px 14px;
}
.register-page .reg-block__label {
text-align:center;
font-size: 11px;
letter-spacing: .16em;
color: rgba(138,100,51,.7);
margin: 10px 0 10px;
}
/* Form elements */
.register-page .reg-field {
margin-bottom: 12px;
text-align:left;
}
.register-page .reg-label {
display:block;
font-size: 12px;
letter-spacing: .04em;
color: rgba(43,31,26,.8);
margin: 0 0 7px;
}
.register-page .reg-input {
width: 100%;
border-radius: 14px;
border: 1px solid rgba(43,31,26,.12);
padding: 12px 12px;
background: rgba(255,255,255,.62);
outline: none;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
font-family: "Inter", sans-serif;
font-size: 13px;
color: var(--ink);
}
.register-page .reg-input:focus {
border-color: rgba(160,119,62,.35);
box-shadow: 0 0 0 4px rgba(160,119,62,.08);
background: rgba(255,255,255,.78);
}
.register-page .reg-textarea {
min-height: 98px;
resize: vertical;
}
.register-page .reg-passRow {
display:flex;
align-items:center;
gap: 10px;
}
.register-page .reg-eye {
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid rgba(43,31,26,.12);
background: rgba(255,255,255,.62) var(--reg-icon-eye) center/18px no-repeat;
cursor:pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
flex: 0 0 40px;
}
.register-page .reg-eye:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.register-page .reg-eye.is-on {
background-image: var(--reg-icon-eye-off);
}
.register-page .reg-hint {
margin-top: 6px;
font-size: 12px;
color: var(--muted);
line-height: 1.55;
}
.register-page .reg-meter {
height: 6px;
border-radius: 999px;
background: rgba(43,31,26,.08);
overflow:hidden;
margin-top: 8px;
}
.register-page .reg-meter__bar {
display:block;
height: 100%;
width: 0%;
border-radius: 999px;
background: rgba(160,119,62,.55);
transition: width .18s ease;
}
/* invalid */
.register-page .reg-input.is-invalid {
border-color: rgba(170, 74, 74, .38);
box-shadow: 0 0 0 4px rgba(170, 74, 74, .08);
}
.register-page .reg-error {
min-height: 16px;
margin-top: 6px;
font-size: 12px;
color: rgba(140, 62, 62, .95);
}
/* Checkboxes */
.register-page .reg-check {
display:flex;
gap: 10px;
align-items:flex-start;
margin: 10px 0;
font-size: 13px;
color: rgba(43,31,26,.85);
line-height: 1.5;
}
.register-page .reg-check input {
margin-top: 3px;
}
/* Switch */
.register-page .reg-switch {
display:flex;
justify-content:space-between;
gap: 12px;
align-items:center;
padding: 10px 4px 4px;
}
.register-page .reg-toggle {
position: relative;
width: 54px;
height: 30px;
flex: 0 0 54px;
}
.register-page .reg-toggle input {
position:absolute;
opacity: 0;
inset: 0;
}
.register-page .reg-toggle__ui {
position:absolute;
inset:0;
border-radius: 999px;
border: 1px solid rgba(43,31,26,.12);
background: rgba(255,255,255,.62);
transition: background .18s ease, border-color .18s ease;
}
.register-page .reg-toggle__ui::after {
content:"";
position:absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(160,119,62,.55);
transition: left .18s ease, background .18s ease;
}
.register-page .reg-toggle input:checked + .reg-toggle__ui {
border-color: rgba(160,119,62,.35);
background: rgba(239,220,210,.55);
}
.register-page .reg-toggle input:checked + .reg-toggle__ui::after {
left: 28px;
background: rgba(160,119,62,.75);
}
/* Stepper */
.register-page .reg-stepper {
display:flex;
gap: 10px;
justify-content:center;
margin: 6px 0 14px;
}
.register-page .reg-step {
display:flex;
align-items:center;
gap: 8px;
padding: 8px 12px;
border: 1px solid rgba(43,31,26,.10);
background: rgba(255,255,255,.55);
border-radius: 999px;
opacity: .75;
}
.register-page .reg-step.is-active {
opacity: 1;
border-color: rgba(160,119,62,.35);
background: rgba(239,220,210,.55);
}
.register-page .reg-step__dot {
width: 22px;
height: 22px;
border-radius: 50%;
display:grid;
place-items:center;
font-size: 12px;
color: #6c4f33;
border: 1px solid rgba(160,119,62,.35);
background: rgba(255,255,255,.7);
}
.register-page .reg-step__label {
font-size: 12px;
letter-spacing: .04em;
color: rgba(43,31,26,.8);
}
/* Step panels */
.register-page .reg-stepPanel {
display:none;
}
.register-page .reg-stepPanel.is-active {
display:block;
}
/* Actions + toast */
.register-page .reg-actions {
text-align:center;
padding: 6px 6px 6px;
}
.register-page .reg-actions--split {
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
}
.register-page .reg-actions--split .btn {
min-width: 160px;
}
.register-page .reg-small {
margin: 12px 0 0;
font-size: 12.5px;
color: var(--muted);
}
.register-page .reg-small a {
color: var(--gold-d);
text-decoration:none;
}
.register-page .reg-small a:hover {
text-decoration: underline;
}
.register-page .reg-toast {
margin-top: 12px;
font-size: 13px;
color: rgba(43,31,26,.85);
opacity: 0;
transform: translateY(6px);
transition: opacity .3s ease, transform .3s ease;
}
.register-page .reg-toast.is-on {
opacity: 1;
transform: translateY(0);
}
/* Trust + CTA */
.register-page .reg-trust {
max-width: var(--maxw);
margin: 14px auto 0;
padding: 18px 18px 8px;
}
.register-page .reg-trust__grid {
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
background: rgba(255,255,255,.35);
border: 1px solid rgba(43,31,26,.10);
border-radius: 22px;
padding: 16px;
box-shadow: 0 18px 40px rgba(0,0,0,.06);
}
.register-page .reg-trust__item {
text-align:center;
padding: 8px 10px 10px;
}
.register-page .reg-trust__item + .reg-trust__item {
border-left: 1px solid rgba(160,119,62,.22);
}
.register-page .reg-trust__icon {
width: 44px;
height: 44px;
margin: 0 auto 8px;
opacity: .9;
filter: drop-shadow(0 2px 3px rgba(160,119,62,.15));
}
.register-page .reg-trust__item h3 {
font-family: "Playfair Display", serif;
font-size: 15px;
margin: 0 0 6px;
color: #6c4f33;
}
.register-page .reg-trust__item p {
margin: 0;
font-size: 13px;
color: var(--muted);
line-height: 1.55;
}
.register-page .reg-cta {
text-align:center;
padding: 26px 18px 32px;
}
.register-page .reg-cta h3 {
font-family:"Playfair Display", serif;
font-size: 22px;
margin: 0 0 8px;
color: var(--gold-d);
letter-spacing: .04em;
}
.register-page .reg-cta p {
margin: 0 0 14px;
color: var(--muted);
}
/* Reveal */
.register-page .reveal {
opacity: 0;
transform: translateY(10px);
transition: opacity .6s ease, transform .6s ease;
}
.register-page .reveal.is-in {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 980px) {
.register-page .reg-grid {
grid-template-columns: 1fr;
}
.register-page .reg-selector {
grid-template-columns: 1fr;
}
.register-page .reg-trust__grid {
grid-template-columns: 1fr;
}
.register-page .reg-trust__item + .reg-trust__item {
border-left: 0;
border-top: 1px solid rgba(160,119,62,.22);
padding-top: 16px;
}
.register-page .reg-actions--split {
flex-direction: column;
}
}
/* Icons (inline SVG data URIs) */
:root {
--reg-icon-badge: url("data:image/svg+xml;utf8,");
--reg-icon-buyer: url("data:image/svg+xml;utf8,");
--reg-icon-seller: url("data:image/svg+xml;utf8,");
--reg-icon-eye: url("data:image/svg+xml;utf8,");
--reg-icon-eye-off: url("data:image/svg+xml;utf8,");
--reg-icon-lock: url("data:image/svg+xml;utf8,");
--reg-icon-shield: url("data:image/svg+xml;utf8,");
--reg-icon-heart: url("data:image/svg+xml;utf8,");
}
.register-page .reg-icon--buyer {
background: var(--reg-icon-buyer) center/contain no-repeat;
}
.register-page .reg-icon--seller {
background: var(--reg-icon-seller) center/contain no-repeat;
}
.register-page .reg-icon--lock {
background: var(--reg-icon-lock) center/contain no-repeat;
}
.register-page .reg-icon--shield {
background: var(--reg-icon-shield) center/contain no-repeat;
}
.register-page .reg-icon--heart {
background: var(--reg-icon-heart) center/contain no-repeat;
}
/* ==========================================================
Salty Secrets — Global Modals (Age gate + Login)
Paste at END of assets/styles.css
========================================================== */
.ss-modalRoot {
position: fixed;
inset: 0;
display: none;
z-index: 9999;
}
.ss-modalRoot.is-open {
display: block;
}
.ss-modalOverlay {
position:absolute;
inset:0;
background: rgba(20, 14, 10, .42);
backdrop-filter: blur(5px);
opacity: 0;
transition: opacity .25s ease;
}
.ss-modalRoot.is-open .ss-modalOverlay {
opacity: 1;
}
.ss-modal {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -48%) scale(.98);
width: min(560px, calc(100vw - 28px));
border-radius: 26px;
padding: 22px 20px 18px;
background: rgba(255,255,255,.70);
border: 1px solid rgba(43,31,26,.12);
box-shadow: 0 30px 80px rgba(0,0,0,.20);
opacity: 0;
transition: transform .25s ease, opacity .25s ease;
display: none;
}
.ss-modalRoot.is-open .ss-modal.is-active {
display:block;
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.ss-modalClose {
position:absolute;
right: 14px;
top: 14px;
width: 38px;
height: 38px;
border-radius: 14px;
border: 1px solid rgba(43,31,26,.12);
background: rgba(255,255,255,.6) var(--ss-icon-x) center/14px no-repeat;
cursor:pointer;
transition: transform .18s ease, box-shadow .18s ease;
}
.ss-modalClose:hover {
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(0,0,0,.08);
}
/* Badge */
.ss-modalBadge {
width: 54px;
height: 54px;
margin: 4px auto 10px;
background: var(--ss-icon-shield) center/contain no-repeat;
opacity: .95;
filter: drop-shadow(0 2px 3px rgba(160,119,62,.15));
}
.ss-modalBadge--login {
background-image: var(--ss-icon-lock);
}
.ss-modalTitle {
font-family: "Playfair Display", serif;
text-align:center;
margin: 0 0 8px;
letter-spacing: .06em;
color: var(--gold-d);
font-size: 22px;
}
.ss-modalText {
text-align:center;
margin: 0 auto 14px;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
max-width: 44ch;
}
.ss-modalActions {
display:flex;
gap: 10px;
justify-content:center;
flex-wrap: wrap;
margin: 6px 0 12px;
}
.ss-modalPrimary {
min-width: 220px;
}
.ss-modalSecondary {
border: 1px solid rgba(43,31,26,.12);
background: rgba(255,255,255,.55);
color: rgba(43,31,26,.78);
border-radius: 999px;
padding: 12px 16px;
cursor:pointer;
transition: transform .18s ease, box-shadow .18s ease;
}
.ss-modalSecondary:hover {
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(0,0,0,.06);
}
.ss-modalCheck, .ss-miniCheck {
display:flex;
gap: 10px;
align-items:flex-start;
font-size: 13px;
color: rgba(43,31,26,.82);
line-height: 1.5;
margin: 8px 0 8px;
}
.ss-modalCheck input, .ss-miniCheck input {
margin-top: 3px;
}
.ss-modalFine {
margin: 8px 0 0;
font-size: 12px;
color: var(--muted);
line-height: 1.55;
}
.ss-center {
text-align:center;
}
.ss-loginForm {
margin-top: 4px;
}
.ss-field {
margin-bottom: 12px;
text-align:left;
}
.ss-label {
display:block;
font-size: 12px;
letter-spacing: .04em;
color: rgba(43,31,26,.8);
margin: 0 0 7px;
}
.ss-input {
width:100%;
border-radius: 14px;
border: 1px solid rgba(43,31,26,.12);
padding: 12px 12px;
background: rgba(255,255,255,.62);
outline: none;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
font-family: "Inter", sans-serif;
font-size: 13px;
color: var(--ink);
}
.ss-input:focus {
border-color: rgba(160,119,62,.35);
box-shadow: 0 0 0 4px rgba(160,119,62,.08);
background: rgba(255,255,255,.78);
}
.ss-input.is-invalid {
border-color: rgba(170, 74, 74, .38);
box-shadow: 0 0 0 4px rgba(170, 74, 74, .08);
}
.ss-error {
min-height: 16px;
margin-top: 6px;
font-size: 12px;
color: rgba(140, 62, 62, .95);
}
.ss-passRow {
display:flex;
align-items:center;
gap: 10px;
}
.ss-eye {
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid rgba(43,31,26,.12);
background: rgba(255,255,255,.62) var(--ss-icon-eye) center/18px no-repeat;
cursor:pointer;
transition: transform .18s ease, box-shadow .18s ease;
flex: 0 0 40px;
}
.ss-eye:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.ss-eye.is-on {
background-image: var(--ss-icon-eye-off);
}
.ss-loginRow {
display:flex;
justify-content:space-between;
align-items:center;
gap: 10px;
margin: 8px 0 12px;
}
.ss-link {
color: var(--gold-d);
text-decoration:none;
}
.ss-link:hover {
text-decoration: underline;
}
/* Mobile spacing */
@media (max-width: 520px) {
.ss-modalTitle {
font-size: 20px;
}
.ss-modalPrimary {
min-width: 100%;
}
.ss-loginRow {
flex-direction: column;
align-items:flex-start;
}
}
/* Inline SVG icons (data URIs) */
:root {
--ss-icon-x: url("data:image/svg+xml;utf8,");
--ss-icon-shield: url([bad url]);
--ss-icon-lock: url([bad url]);
--ss-icon-eye: url([bad url]);
--ss-icon-eye-off: url([bad url]);
}
/* IMPORTANT: override invalid escaped urls if needed (same fix as FAQ icons) */
:root {
--ss-icon-shield: url("data:image/svg+xml;utf8,");
--ss-icon-lock: url("data:image/svg+xml;utf8,");
--ss-icon-eye: url("data:image/svg+xml;utf8,");
--ss-icon-eye-off: url("data:image/svg+xml;utf8,");
}
/* ==========================================================
MARKETPLACE — scoped & safe
========================================================== */
.marketplace-page .marketplace-wrapper {
display: grid;
grid-template-columns: 260px 1fr;
gap: 26px;
padding: 26px 18px 40px;
}
.marketplace-filters {
background: rgba(255,255,255,.55);
border: 1px solid var(--border);
border-radius: 22px;
padding: 20px 18px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 14px 30px rgba(0,0,0,.06);
}
.marketplace-filters h3 {
font-family: "Playfair Display", serif;
font-size: 18px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold-d);
text-align: center;
}
.marketplace-filters input,
.marketplace-filters select {
padding: 10px 12px;
border-radius: 12px;
border: 1px solid var(--border);
background: rgba(255,255,255,.7);
font-size: 13px;
color: var(--ink);
}
/* PRODUCT GRID */
.marketplace-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.marketplace-card {
background: #f3e8e1;
border: 1px solid var(--border);
border-radius: 18px;
padding: 14px;
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.marketplace-card h4 {
font-family: "Playfair Display", serif;
font-size: 16px;
margin: 6px 0 0;
}
.card-desc {
font-size: 12.5px;
color: var(--muted);
}
.card-price {
font-size: 15px;
font-weight: 600;
color: var(--gold-d);
}
.card-badge {
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: #7a5534;
}
/* Image placeholder */
.marketplace-card .card-img {
height: 170px;
border-radius: 14px;
background:
linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.15)),
url("/mnt/data/87872bef-520c-4253-ada5-4ea8155e0eb6.png") center/cover no-repeat;
}
/* RESPONSIVE */
@media (max-width: 1100px) {
.marketplace-grid {
grid-template-columns: repeat(3,1fr);
}
}
@media (max-width: 820px) {
.marketplace-wrapper {
grid-template-columns: 1fr;
}
.marketplace-grid {
grid-template-columns: repeat(2,1fr);
}
}
@media (max-width: 480px) {
.marketplace-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================
MARKETPLACE PAGE
Scoped to .marketplace-page to avoid side effects
========================================================== */
.marketplace-page .mp-wrap {
width: min(1200px, calc(100% - 40px));
margin: 24px auto 48px;
background: rgba(255,255,255,0.55);
border-radius: 28px;
border: 1px solid rgba(140,110,80,0.18);
box-shadow: 0 18px 42px rgba(0,0,0,0.08);
overflow: hidden;
}
/* ---------- HEADER ---------- */
.marketplace-page .mp-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 28px;
border-bottom: 1px solid rgba(140,110,80,0.15);
}
.marketplace-page .mp-title {
margin: 0;
font-family: "Playfair Display", serif;
font-size: 32px;
}
.marketplace-page .mp-subtitle {
margin-top: 6px;
font-size: 15px;
opacity: 0.75;
}
.marketplace-page .mp-search {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.65);
border: 1px solid rgba(140,110,80,0.18);
border-radius: 14px;
padding: 10px 12px;
}
.marketplace-page .mp-search input {
border: none;
background: transparent;
outline: none;
font-size: 14px;
}
.marketplace-page .mp-search__btn {
padding: 8px 14px;
border-radius: 12px;
border: 1px solid rgba(140,110,80,0.25);
background: rgba(160,120,80,0.35);
font-weight: 600;
cursor: pointer;
}
/* ---------- FILTERS ---------- */
.marketplace-page .mp-filters {
padding: 18px 28px 22px;
background: rgba(255,255,255,0.35);
border-bottom: 1px solid rgba(140,110,80,0.15);
}
.marketplace-page .mp-filters__row {
display: grid;
grid-template-columns: repeat(4, 1fr) auto;
gap: 14px;
align-items: end;
}
.marketplace-page .mp-field label {
display: block;
font-size: 12px;
margin-bottom: 6px;
opacity: 0.75;
}
.marketplace-page .mp-field select {
width: 100%;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(140,110,80,0.18);
background: rgba(255,255,255,0.7);
}
.marketplace-page .mp-clear {
font-size: 13px;
text-decoration: none;
opacity: 0.7;
padding-bottom: 6px;
}
.marketplace-page .mp-clear:hover {
opacity: 1;
}
/* ---------- PRODUCT GRID ---------- */
.marketplace-page .mp-grid {
padding: 26px 28px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.marketplace-page .mp-card {
background: rgba(255,255,255,0.6);
border: 1px solid rgba(140,110,80,0.16);
border-radius: 20px;
box-shadow: 0 10px 26px rgba(0,0,0,0.06);
overflow: hidden;
transition: transform .15s ease, box-shadow .15s ease;
}
.marketplace-page .mp-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(0,0,0,0.09);
}
.marketplace-page .mp-card__img img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.marketplace-page .mp-card__body {
padding: 16px;
text-align: center;
}
.marketplace-page .mp-card__title {
font-family: "Playfair Display", serif;
font-size: 17px;
margin: 6px 0;
}
.marketplace-page .mp-card__desc {
font-size: 13px;
opacity: 0.75;
}
.marketplace-page .mp-card__price {
font-size: 20px;
margin: 10px 0;
}
.marketplace-page .mp-verified {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.7;
display: block;
margin-bottom: 12px;
}
.marketplace-page .mp-card__btn {
display: inline-block;
padding: 10px 16px;
border-radius: 14px;
border: 1px solid rgba(140,110,80,0.25);
background: rgba(160,120,80,0.35);
font-weight: 600;
text-decoration: none;
}
/* ---------- PAGINATION ---------- */
.marketplace-page .mp-pagination {
display: flex;
justify-content: center;
gap: 10px;
padding: 18px 28px 32px;
}
.marketplace-page .mp-page {
padding: 10px 14px;
border-radius: 14px;
border: 1px solid rgba(140,110,80,0.18);
background: rgba(255,255,255,0.5);
font-size: 13px;
text-decoration: none;
}
.marketplace-page .mp-page.is-active {
background: rgba(160,120,80,0.35);
font-weight: 700;
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
.marketplace-page .mp-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 760px) {
.marketplace-page .mp-head {
flex-direction: column;
align-items: stretch;
}
.marketplace-page .mp-filters__row {
grid-template-columns: repeat(2, 1fr);
}
.marketplace-page .mp-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.marketplace-page .mp-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================
MARKETPLACE FIX PACK (polish + missing image fallback)
Paste at bottom of styles.css
========================================================== */
.marketplace-page a {
color: inherit;
text-decoration: none;
}
.marketplace-page a:hover {
text-decoration: none;
opacity: 0.92;
}
/* Fix "Clear filters" looking like default web link */
.marketplace-page .mp-clear {
color: inherit;
opacity: 0.7;
text-decoration: none;
}
.marketplace-page .mp-clear:hover {
opacity: 1;
}
/* Card image area: show a nice placeholder if image missing */
.marketplace-page .mp-card__img {
display: block;
background: rgba(0,0,0,0.03);
border-bottom: 1px solid rgba(140,110,80,0.10);
}
.marketplace-page .mp-card__img img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
aspect-ratio: 4 / 3;
}
/* Hide broken image icon + alt text visual glitch */
.marketplace-page .mp-card__img img:not([src]),
.marketplace-page .mp-card__img img[src=""] {
display: none;
}
/* If image fails to load, still keep a visual block */
.marketplace-page .mp-card__img::before {
content: "";
display: block;
aspect-ratio: 4 / 3;
background:
linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.08));
}
/* If image exists, remove placeholder block */
.marketplace-page .mp-card__img:has(img[src]):before {
display: none;
}
/* Title link style */
.marketplace-page .mp-card__title a {
color: inherit;
text-decoration: none;
}
/* Button: remove blue link behavior */
.marketplace-page .mp-card__btn {
color: inherit;
}
/* ==========================================================
PRODUCT PAGE (Salty Secrets)
Scoped to .product-page to avoid side effects
========================================================== */
.product-page.pd-wrap {
width: min(1200px, calc(100% - 40px));
margin: 22px auto 48px;
background: rgba(255,255,255,.55);
border-radius: 28px;
border: 1px solid rgba(140,110,80,.18);
box-shadow: 0 18px 42px rgba(0,0,0,.08);
overflow: hidden;
}
/* Topbar */
.pd-topbar {
display:flex;
align-items:center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
border-bottom: 1px solid rgba(140,110,80,.14);
background: rgba(255,255,255,.35);
}
.pd-back {
border: 1px solid rgba(140,110,80,.20);
background: rgba(255,255,255,.55);
border-radius: 14px;
padding: 10px 14px;
cursor: pointer;
font-weight: 600;
}
.pd-crumbs {
font-size: 13px;
opacity: .75;
display:flex;
align-items:center;
gap: 10px;
flex-wrap: wrap;
}
.pd-crumbs a {
text-decoration:none;
color: inherit;
}
.pd-crumb-sep {
opacity: .6;
}
/* Hero layout */
.pd-hero {
display:grid;
grid-template-columns: 1.1fr .9fr;
gap: 22px;
padding: 22px;
}
.pd-gallery {
min-width: 0;
}
.pd-main-img {
border-radius: 22px;
overflow:hidden;
border: 1px solid rgba(140,110,80,.16);
box-shadow: 0 10px 26px rgba(0,0,0,.06);
background: rgba(0,0,0,.03);
}
.pd-main-img img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display:block;
transform: scale(1);
transition: transform .35s ease;
}
.pd-main-img:hover img {
transform: scale(1.02);
}
.pd-thumbs {
margin-top: 12px;
display:flex;
gap: 10px;
overflow:auto;
padding-bottom: 6px;
}
.pd-thumb {
border: 1px solid rgba(140,110,80,.18);
background: rgba(255,255,255,.55);
border-radius: 14px;
padding: 6px;
cursor: pointer;
flex: 0 0 auto;
}
.pd-thumb img {
width: 86px;
height: 62px;
border-radius: 10px;
object-fit: cover;
display:block;
}
.pd-thumb.is-active {
outline: 2px solid rgba(160,120,80,.35);
}
/* Buy panel */
.pd-buy {
border: 1px solid rgba(140,110,80,.16);
border-radius: 22px;
background: rgba(255,255,255,.55);
box-shadow: 0 10px 26px rgba(0,0,0,.06);
padding: 18px 18px 16px;
position: sticky;
top: 18px;
height: fit-content;
}
.pd-title {
margin: 2px 0 10px;
font-family: "Playfair Display", serif;
font-size: 34px;
}
.pd-rating {
display:flex;
align-items: center;
gap: 10px;
margin: 0 0 10px;
}
.pd-stars {
letter-spacing: 2px;
opacity: .8;
}
.pd-reviews {
font-size: 13px;
opacity: .75;
color: inherit;
text-decoration: none;
}
.pd-reviews:hover {
opacity: 1;
}
.pd-sub {
margin: 0 0 12px;
opacity: .8;
}
.pd-bullets {
margin: 0 0 14px;
padding-left: 18px;
opacity: .85;
}
.pd-bullets li {
margin: 6px 0;
}
.pd-price-row {
display:flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.pd-price {
font-family: "Playfair Display", serif;
font-size: 30px;
margin: 2px 0 12px;
}
.pd-actions {
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.pd-btn {
border-radius: 16px;
padding: 12px 14px;
font-weight: 700;
cursor: pointer;
border: 1px solid rgba(140,110,80,.22);
text-decoration: none;
text-align:center;
}
.pd-btn--primary {
background: rgba(160,120,80,.42);
}
.pd-btn--ghost {
background: rgba(255,255,255,.55);
}
.pd-btn:hover {
filter: brightness(.99);
transform: translateY(-1px);
}
.pd-trustline {
font-size: 12.5px;
opacity: .7;
margin: 6px 0 8px;
}
.pd-divider {
border: none;
border-top: 1px solid rgba(140,110,80,.14);
margin: 14px 0;
}
.pd-desc h2 {
font-family: "Playfair Display", serif;
font-size: 18px;
margin: 0 0 8px;
}
.pd-desc p {
margin: 0 0 10px;
opacity: .9;
line-height: 1.55;
}
.pd-contact {
display:inline-block;
margin-top: 6px;
opacity: .8;
text-decoration: none;
border-bottom: 1px solid rgba(140,110,80,.28);
}
.pd-contact:hover {
opacity: 1;
}
/* Mid section */
.pd-mid {
padding: 0 22px 22px;
}
.pd-seller {
border-top: 1px solid rgba(140,110,80,.14);
padding-top: 18px;
}
.pd-seller__head h2 {
font-family: "Playfair Display", serif;
font-size: 24px;
margin: 0 0 12px;
}
.pd-seller__card {
background: rgba(255,255,255,.50);
border: 1px solid rgba(140,110,80,.16);
border-radius: 22px;
padding: 16px;
box-shadow: 0 10px 26px rgba(0,0,0,.05);
}
.pd-seller__meta {
display:flex;
align-items:center;
gap: 14px;
margin-bottom: 10px;
}
.pd-avatar {
width: 72px;
height: 72px;
border-radius: 18px;
object-fit: cover;
border: 1px solid rgba(140,110,80,.18);
}
.pd-seller__name {
font-family: "Playfair Display", serif;
font-size: 22px;
margin-bottom: 4px;
}
.pd-seller__since {
font-size: 13px;
opacity: .75;
margin-bottom: 6px;
}
.pd-badge {
display:inline-block;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .75;
border: 1px solid rgba(140,110,80,.18);
padding: 6px 10px;
border-radius: 999px;
background: rgba(255,255,255,.55);
}
.pd-seller__bio {
margin: 10px 0 12px;
opacity: .9;
line-height: 1.55;
}
.pd-seller__actions {
display:flex;
gap: 10px;
flex-wrap: wrap;
}
/* “More from seller” framed inside seller block */
.pd-seller__more {
margin-top: 14px;
padding: 14px;
border-radius: 22px;
border: 1px solid rgba(140,110,80,.12);
background: rgba(255,255,255,.32);
}
/* Row header + nav */
.pd-rowhead {
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.pd-rowhead h2,
.pd-rowhead h3 {
font-family: "Playfair Display", serif;
margin: 0;
}
.pd-rowhead h3 {
font-size: 18px;
opacity: .95;
}
.pd-rownav {
display:flex;
gap: 8px;
}
.pd-rowbtn {
width: 40px;
height: 36px;
border-radius: 12px;
border: 1px solid rgba(140,110,80,.18);
background: rgba(255,255,255,.55);
cursor: pointer;
}
/* Horizontal strips */
.pd-strip {
display:flex;
gap: 12px;
overflow:auto;
padding-bottom: 6px;
scroll-behavior: smooth;
}
/* Small cards (seller-owned) */
.pd-mini {
flex: 0 0 190px;
background: rgba(255,255,255,.55);
border: 1px solid rgba(140,110,80,.16);
border-radius: 18px;
overflow:hidden;
box-shadow: 0 8px 20px rgba(0,0,0,.04);
transition: transform .15s ease, box-shadow .15s ease;
}
.pd-mini:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(0,0,0,.07);
}
.pd-mini img {
width:100%;
height: 110px;
object-fit: cover;
display:block;
}
.pd-mini__t {
font-weight: 700;
padding: 10px 10px 0;
}
.pd-mini__p {
padding: 6px 10px 10px;
opacity: .8;
}
.pd-mini__btn {
display:block;
margin: 0 10px 12px;
text-decoration:none;
text-align:center;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(140,110,80,.20);
background: rgba(160,120,80,.28);
font-weight: 700;
color: inherit;
}
/* Discovery section at bottom */
.pd-recs {
margin-top: 20px;
padding: 18px 16px 16px;
border-radius: 24px;
border: 1px solid rgba(140,110,80,.14);
background: rgba(255,255,255,.28);
}
.pd-strip--big .pd-cardmini {
flex: 0 0 260px;
}
.pd-cardmini {
background: rgba(255,255,255,.55);
border: 1px solid rgba(140,110,80,.16);
border-radius: 20px;
overflow:hidden;
box-shadow: 0 10px 26px rgba(0,0,0,.05);
transition: transform .15s ease, box-shadow .15s ease;
}
.pd-cardmini:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(0,0,0,.08);
}
.pd-cardmini img {
width:100%;
height: 160px;
object-fit: cover;
display:block;
}
.pd-cardmini__t {
font-family: "Playfair Display", serif;
font-size: 16px;
padding: 12px 12px 0;
}
.pd-cardmini__p {
padding: 6px 12px 10px;
opacity: .8;
font-weight: 700;
}
.pd-cardmini__btn {
display:block;
margin: 0 12px 14px;
text-decoration:none;
text-align:center;
padding: 12px 12px;
border-radius: 16px;
border: 1px solid rgba(140,110,80,.20);
background: rgba(160,120,80,.28);
font-weight: 800;
color: inherit;
}
/* Reveal animation */
.pd-reveal {
opacity: 0;
transform: translateY(10px);
transition: opacity .5s ease, transform .5s ease;
}
.pd-reveal.is-in {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 980px) {
.pd-hero {
grid-template-columns: 1fr;
}
.pd-buy {
position: relative;
top: auto;
}
}
@media (max-width: 520px) {
.product-page.pd-wrap {
width: calc(100% - 24px);
}
.pd-hero, .pd-mid {
padding-left: 14px;
padding-right: 14px;
}
.pd-topbar {
padding: 14px;
}
.pd-actions {
grid-template-columns: 1fr;
}
}
/* ==========================================================
PRODUCT PAGE FIX PACK — paste at END of styles.css
========================================================== */
/* Kill default "blue links" on product page */
.product-page a {
color: inherit;
text-decoration: none;
}
.product-page a:hover {
opacity: .92;
text-decoration: none;
}
/* Toast */
.pd-toast {
margin-top: 10px;
font-size: 13px;
opacity: 0;
transform: translateY(6px);
transition: opacity .25s ease, transform .25s ease;
color: rgba(43,31,26,.78);
}
.pd-toast.is-on {
opacity: 1;
transform: translateY(0);
}
/* Hide broken image icon + alt text by replacing with a classy placeholder */
.pd-img-fallback {
background:
linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.08));
position: relative;
}
.pd-img-fallback::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
opacity: .22;
background:
radial-gradient(600px 260px at 30% 20%, rgba(160,120,80,.25), transparent 60%),
radial-gradient(520px 240px at 70% 80%, rgba(239,220,210,.65), transparent 60%);
pointer-events: none;
}
/* ensure images behave */
.pd-main-img img,
.pd-mini img,
.pd-cardmini img {
display:block;
}
/* ==========================================================
PRODUCT PAGE — luxury typography tune
(paste at end of styles.css)
========================================================== */
.product-page {
--pd-ink: rgba(43, 31, 26, 0.92);
--pd-ink-soft: rgba(43, 31, 26, 0.76);
--pd-gold: rgba(160, 120, 80, 0.70);
}
.product-page .pd-title,
.product-page .pd-seller__head h2,
.product-page .pd-rowhead h2,
.product-page .pd-rowhead h3,
.product-page .pd-desc h2 {
color: var(--pd-ink);
font-family: "Playfair Display", serif;
font-weight: 600;
letter-spacing: 0.01em;
}
/* Main product title: softer + more luxury */
.product-page .pd-title {
font-size: 38px;
line-height: 1.08;
margin-bottom: 12px;
}
/* Section titles */
.product-page .pd-seller__head h2,
.product-page .pd-rowhead h2 {
font-size: 26px;
line-height: 1.12;
}
/* Subtitles + body copy tone */
.product-page .pd-sub,
.product-page .pd-desc p,
.product-page .pd-seller__bio,
.product-page .pd-bullets,
.product-page .pd-trustline,
.product-page .pd-crumbs {
color: var(--pd-ink-soft);
}
/* Stars + reviews feel “gold/soft” */
.product-page .pd-stars {
color: var(--pd-gold);
opacity: 0.9;
}
.product-page .pd-reviews {
color: var(--pd-ink-soft);
}
/* Remove any underline/blue look globally for product page */
.product-page a {
color: inherit;
text-decoration: none;
}
.product-page a:hover {
opacity: 0.92;
}
.product-page .pd-title {
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
}
/* ==========================================================
PRODUCT PAGE — Luxury headline + price treatment
Paste at END of styles.css
========================================================== */
.product-page {
--ink: rgba(44, 33, 28, 0.88);
--ink2: rgba(44, 33, 28, 0.68);
--gold: rgba(160, 120, 80, 0.62);
}
/* --- TITLE: lighter, more editorial, less “bold” --- */
.product-page .pd-title {
color: var(--ink);
font-family: "Playfair Display", serif;
font-weight: 500;
letter-spacing: 0.02em;
font-size: 40px;
line-height: 1.05;
margin: 0 0 10px;
}
/* optional small elegance line under title */
.product-page .pd-title::after {
content: "";
display: block;
width: 64px;
height: 2px;
margin-top: 10px;
border-radius: 2px;
background: rgba(160,120,80,.35);
}
/* Make section headings calmer too */
.product-page .pd-desc h2,
.product-page .pd-seller__head h2,
.product-page .pd-rowhead h2,
.product-page .pd-rowhead h3 {
color: var(--ink);
font-family: "Playfair Display", serif;
font-weight: 500;
letter-spacing: 0.02em;
}
/* Sub text */
.product-page .pd-sub,
.product-page .pd-bullets,
.product-page .pd-desc p,
.product-page .pd-trustline,
.product-page .pd-crumbs {
color: var(--ink2);
}
/* --- PRICE: premium badge instead of “random big text” --- */
.product-page .pd-price-row {
margin: 6px 0 10px;
}
.product-page .pd-price {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 10px 14px;
border-radius: 16px;
border: 1px solid rgba(160,120,80,.28);
background: rgba(255,255,255,.55);
box-shadow: 0 10px 22px rgba(0,0,0,.05);
font-family: "Playfair Display", serif;
font-weight: 500;
letter-spacing: 0.01em;
font-size: 28px;
color: var(--ink);
}
/* Optional: add “from” or “price” label */
.product-page .pd-price::before {
content: "Price";
font-family: "Inter", sans-serif;
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(44,33,28,.55);
margin-right: 8px;
}
/* --- Buttons: make them feel less “pill UI” and more luxury --- */
.product-page .pd-btn {
font-family: "Inter", sans-serif;
font-weight: 700;
letter-spacing: .02em;
}
.product-page .pd-btn--primary {
background: rgba(160,120,80,.45);
border-color: rgba(160,120,80,.35);
}
.product-page .pd-btn--ghost {
background: rgba(255,255,255,.65);
}
/* Stars: softer + gold */
.product-page .pd-stars {
color: var(--gold);
opacity: .9;
}
/* Remove any remaining blue-link look */
.product-page a {
color: inherit;
text-decoration: none;
}
.product-page a:hover {
opacity: .92;
}
.product-page .pd-eur {
font-size: 18px;
opacity: .7;
transform: translateY(-2px);
display: inline-block;
}
/* ==========================================================
PRODUCT PAGE — Title + Price numeric tuning (final)
Paste at END of styles.css
========================================================== */
/* Make title slightly smaller by default (better for long names) */
.product-page .pd-title {
font-size: 30px;
line-height: 1.08;
letter-spacing: 0.02em;
max-width: 22ch;
}
/* If the title is short, allow it to feel a bit bigger on wide screens */
@media (min-width: 1100px) {
.product-page .pd-title {
font-size: 36px;
}
}
/* PRICE: use Inter for numbers (luxury numeric feel) */
.product-page .pd-price {
display: inline-flex;
align-items: baseline;
gap: 14px;
padding: 10px 14px;
border-radius: 16px;
border: 1px solid rgba(160,120,80,.28);
background: rgba(255,255,255,.55);
box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.product-page .pd-price__label {
font-family: "Inter", sans-serif;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
opacity: .55;
}
/* The money part */
.product-page .pd-price__value {
font-family: "Inter", sans-serif;
font-weight: 700;
font-size: 28px;
letter-spacing: 0;
color: rgba(44,33,28,.90);
font-variant-numeric: tabular-nums;
}
/* Smaller euro symbol, slightly raised */
.product-page .pd-price__cur {
font-size: 16px;
opacity: .65;
display: inline-block;
transform: translateY(-2px);
margin-right: 2px;
}
/* Switchable views inside same modal (LOGIN <-> FORGOT) */
#ssLoginModal .ss-loginForm {
display: none;
}
#ssLoginModal .ss-loginForm.is-active {
display: block;
}
#ssLoginModal .ss-linkBtn {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--gold-d);
font: inherit;
text-decoration: none;
}
#ssLoginModal .ss-linkBtn:hover {
text-decoration: underline;
}
/* ==========================================================
PRODUCT PAGE — Body text refinement (smaller, calmer)
Paste at END of styles.css
========================================================== */
/* Base body copy on product page */
.product-page {
--pd-body-size: 12px;
--pd-body-line: 1.55;
--pd-body-color: rgba(44,33,28,.70);
}
/* Description text */
.product-page .pd-desc p {
font-size: var(--pd-body-size);
line-height: var(--pd-body-line);
color: var(--pd-body-color);
}
/* Bullet points under title */
.product-page .pd-bullets {
font-size: 12px;
line-height: 1.55;
color: var(--pd-body-color);
}
.product-page .pd-bullets li {
margin: 3px 0;
}
/* Short subtitle under title */
.product-page .pd-sub {
font-size: 12px;
color: rgba(44,33,28,.65);
margin-bottom: 8px;
}
/* Trust line under buttons */
.product-page .pd-trustline {
font-size: 11px;
color: rgba(44,33,28,.55);
}
/* Seller bio */
.product-page .pd-seller__bio {
font-size: 12px;
line-height: 1.55;
color: var(--pd-body-color);
}
/* Seller meta (member since, verified) */
.product-page .pd-seller__since {
font-size: 11px;
color: rgba(44,33,28,.55);
}
.product-page .pd-badge {
font-size: 10px;
}
/* Breadcrumbs */
.product-page .pd-crumbs {
font-size: 11px;
color: rgba(44,33,28,.55);
}
/* “Contact seller” link */
.product-page .pd-contact {
font-size: 12px;
color: rgba(44,33,28,.65);
}
/* Buttons text slightly tighter */
.product-page .pd-btn {
font-size: 14px;
}
/* ==========================================================
CHECKOUT PAGE (Salty Secrets)
Scoped to .checkout-page
========================================================== */
.checkout-page.ck-wrap {
width: min(1200px, calc(100% - 40px));
margin: 22px auto 48px;
background: rgba(255,255,255,.55);
border-radius: 28px;
border: 1px solid rgba(140,110,80,.18);
box-shadow: 0 18px 42px rgba(0,0,0,.08);
overflow: hidden;
}
.checkout-page {
--ink: rgba(44,33,28,.86);
--ink2: rgba(44,33,28,.64);
--gold: rgba(160,120,80,.55);
}
/* Topbar */
.ck-topbar {
display:grid;
grid-template-columns: 180px 1fr 320px;
align-items:center;
gap: 12px;
padding: 18px 22px;
border-bottom: 1px solid rgba(140,110,80,.14);
background: rgba(255,255,255,.35);
}
.ck-back {
border: 1px solid rgba(140,110,80,.20);
background: rgba(255,255,255,.55);
border-radius: 14px;
padding: 10px 14px;
cursor: pointer;
font-weight: 700;
}
.ck-brand {
text-align:center;
font-family: "Playfair Display", serif;
letter-spacing: .02em;
color: rgba(160,120,80,.85);
font-size: 28px;
}
.ck-crumbs {
display:flex;
justify-content:flex-end;
gap: 10px;
flex-wrap: wrap;
font-size: 12.5px;
color: rgba(44,33,28,.55);
}
.ck-crumbs a {
color: inherit;
text-decoration:none;
}
.ck-sep {
opacity: .6;
}
/* Grid */
.ck-grid {
display:grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
padding: 18px;
}
.ck-card {
background: rgba(255,255,255,.55);
border: 1px solid rgba(140,110,80,.16);
border-radius: 22px;
box-shadow: 0 10px 26px rgba(0,0,0,.06);
padding: 18px;
}
.ck-h1 {
margin: 0 0 14px;
font-family: "Playfair Display", serif;
font-weight: 500;
letter-spacing: .02em;
color: var(--ink);
font-size: 30px;
}
.ck-h2 {
margin: 0 0 10px;
font-family: "Playfair Display", serif;
font-weight: 500;
letter-spacing: .02em;
color: var(--ink);
font-size: 18px;
}
/* Summary item */
.ck-item {
display:flex;
gap: 14px;
align-items:flex-start;
margin-bottom: 12px;
}
.ck-item__img {
width: 94px;
height: 94px;
border-radius: 18px;
overflow:hidden;
border: 1px solid rgba(140,110,80,.16);
background: rgba(0,0,0,.03);
flex: 0 0 auto;
}
.ck-item__img img {
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.ck-item__title {
font-family: "Playfair Display", serif;
font-weight: 500;
letter-spacing: .02em;
color: var(--ink);
font-size: 18px;
}
.ck-item__price {
font-family: "Inter", sans-serif;
font-variant-numeric: tabular-nums;
font-weight: 800;
color: var(--ink);
margin-top: 6px;
font-size: 18px;
}
.ck-seller {
display:flex;
gap: 10px;
align-items:center;
margin-top: 10px;
}
.ck-seller__avatar {
width: 32px;
height: 32px;
border-radius: 12px;
object-fit: cover;
border: 1px solid rgba(140,110,80,.18);
}
.ck-seller__name {
font-weight: 700;
font-size: 13px;
color: var(--ink);
}
.ck-seller__badge {
font-size: 10.5px;
letter-spacing: .10em;
text-transform: uppercase;
color: rgba(44,33,28,.55);
margin-top: 2px;
}
.ck-minirow {
display:flex;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(140,110,80,.14);
background: rgba(255,255,255,.35);
color: var(--ink);
margin: 10px 0 12px;
}
.ck-note {
display:flex;
gap: 10px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(140,110,80,.12);
background: rgba(255,255,255,.28);
color: rgba(44,33,28,.70);
margin-bottom: 14px;
}
.ck-note p {
margin:0;
line-height: 1.45;
font-size: 14px;
}
.ck-note__icon {
opacity: .8;
}
/* Textarea */
.ck-textarea {
width: 100%;
min-height: 110px;
resize: vertical;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(140,110,80,.16);
background: rgba(255,255,255,.60);
color: var(--ink);
outline: none;
font-size: 14px;
line-height: 1.5;
}
.ck-help {
margin-top: 8px;
font-size: 12px;
color: rgba(44,33,28,.55);
}
/* Hint */
.ck-hint {
display:flex;
gap: 10px;
margin-top: 14px;
color: rgba(44,33,28,.60);
}
.ck-hint__t {
font-weight: 700;
font-size: 13px;
color: rgba(44,33,28,.72);
}
.ck-hint__p {
font-size: 13px;
}
.ck-hint__icon {
opacity: .7;
}
/* Right column */
.ck-loginbar {
display:flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 16px;
border: 1px solid rgba(140,110,80,.12);
background: rgba(255,255,255,.28);
color: rgba(44,33,28,.66);
margin-bottom: 12px;
font-size: 13px;
}
.ck-linkbtn {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: rgba(160,120,80,.95);
font-weight: 800;
letter-spacing: .02em;
}
.ck-linkbtn:hover {
opacity: .85;
}
.ck-field {
margin: 12px 0;
}
.ck-field label {
display:block;
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(44,33,28,.55);
margin-bottom: 6px;
}
.ck-field input {
width: 100%;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(140,110,80,.16);
background: rgba(255,255,255,.60);
color: var(--ink);
outline: none;
font-size: 14px;
}
/* Save account */
.ck-check {
display:flex;
align-items:center;
gap: 10px;
margin: 10px 0 12px;
font-size: 14px;
color: rgba(44,33,28,.70);
}
.ck-savebox {
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(140,110,80,.12);
background: rgba(255,255,255,.28);
}
.ck-savebox__title {
font-weight: 800;
color: rgba(44,33,28,.78);
margin-bottom: 4px;
}
.ck-savebox__sub {
font-size: 13px;
color: rgba(44,33,28,.55);
margin-bottom: 10px;
}
/* Payment placeholder */
.ck-paymentbox {
margin-top: 14px;
padding: 14px;
border-radius: 18px;
border: 1px solid rgba(140,110,80,.16);
background: rgba(255,255,255,.45);
}
.ck-paymentbox__head {
display:flex;
justify-content: space-between;
align-items:center;
font-weight: 800;
color: rgba(44,33,28,.72);
margin-bottom: 10px;
}
.ck-cards span {
display:inline-block;
font-size: 11px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,.14);
background: rgba(255,255,255,.50);
margin-left: 6px;
opacity: .8;
}
.ck-paygrid {
display:grid;
grid-template-columns: 1fr 120px 90px;
gap: 10px;
}
.ck-paygrid input {
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(140,110,80,.16);
background: rgba(255,255,255,.65);
font-size: 14px;
}
.ck-paygrid input:nth-child(4) {
grid-column: 1 / -1;
}
.ck-stripehint {
margin-top: 10px;
font-size: 12.5px;
color: rgba(44,33,28,.55);
display:flex;
gap: 8px;
align-items:center;
}
.ck-lock {
opacity: .7;
}
/* Breakdown */
.ck-breakdown {
margin-top: 14px;
border-top: 1px solid rgba(140,110,80,.14);
padding-top: 12px;
}
.ck-row {
display:flex;
justify-content: space-between;
padding: 8px 0;
color: rgba(44,33,28,.70);
font-size: 14px;
}
.ck-money {
font-family: "Inter", sans-serif;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: rgba(44,33,28,.84);
}
.ck-total {
border-top: 1px solid rgba(140,110,80,.14);
margin-top: 6px;
padding-top: 12px;
font-size: 16px;
}
.ck-total .ck-money {
font-size: 18px;
}
/* Pay button */
.ck-paybtn {
width: 100%;
margin-top: 14px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(160,120,80,.34);
background: rgba(160,120,80,.55);
font-weight: 900;
letter-spacing: .02em;
cursor: pointer;
}
.ck-trust {
margin-top: 12px;
font-size: 12.5px;
color: rgba(44,33,28,.55);
line-height: 1.55;
}
/* Responsive */
@media (max-width: 980px) {
.ck-topbar {
grid-template-columns: 1fr;
text-align:center;
}
.ck-crumbs {
justify-content:center;
}
.ck-grid {
grid-template-columns: 1fr;
}
.ck-paygrid {
grid-template-columns: 1fr 1fr;
}
.ck-paygrid input:nth-child(1) {
grid-column: 1 / -1;
}
}
/* Checkout: Shipping form (replaces card information) */
.checkout-page .ck-shipgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
}
.checkout-page .ck-shipspan2 {
grid-column: span 2;
}
.checkout-page .ck-shipgrid input,
.checkout-page .ck-shipgrid select {
width: 100%;
border: 1px solid rgba(140,110,80,0.18);
background: rgba(255,255,255,0.70);
border-radius: 12px;
padding: 10px 12px;
font: inherit;
outline: none;
}
.checkout-page .ck-shipopts {
display: grid;
gap: 10px;
margin-top: 12px;
}
.checkout-page .ck-shipopt {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: start;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(140,110,80,0.16);
background: rgba(255,255,255,0.55);
cursor: pointer;
}
.checkout-page .ck-shipopt input {
margin-top: 3px;
}
.checkout-page .ck-shipopt__label strong {
display: block;
font-weight: 700;
font-size: 13px;
}
.checkout-page .ck-shipopt__label em {
display: block;
font-style: normal;
font-size: 12px;
opacity: .75;
margin-top: 2px;
}
.checkout-page .ck-shipopt__price {
font-weight: 700;
opacity: .9;
}
/* Mobile */
@media (max-width: 560px) {
.checkout-page .ck-shipgrid {
grid-template-columns: 1fr;
}
.checkout-page .ck-shipspan2 {
grid-column: auto;
}
}
/* Payment step: Card form */
.checkout-page .ck-cardbrands {
display: flex;
gap: 8px;
align-items: center;
}
.checkout-page .ck-pill {
font-size: 11px;
letter-spacing: .08em;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.16);
background: rgba(255,255,255,0.55);
opacity: .85;
}
.checkout-page .ck-cardgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 10px;
}
.checkout-page .ck-span-2 {
grid-column: span 2;
}
.checkout-page .ck-cardgrid input {
width: 100%;
border: 1px solid rgba(140,110,80,0.18);
background: rgba(255,255,255,0.70);
border-radius: 12px;
padding: 10px 12px;
font: inherit;
outline: none;
}
@media (max-width: 560px) {
.checkout-page .ck-cardgrid {
grid-template-columns: 1fr;
}
.checkout-page .ck-span-2 {
grid-column: auto;
}
}
/* ==========================================================
CHECKOUT — Back button & Breadcrumb polish
========================================================== */
/* Back button */
.checkout-page .ck-back {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
border-radius: 14px;
border: 1px solid rgba(140,110,80,0.25);
background: rgba(255,255,255,0.55);
font-weight: 600;
text-decoration: none;
color: inherit;
transition: background .15s ease, transform .15s ease;
}
.checkout-page .ck-back:hover {
background: rgba(255,255,255,0.75);
transform: translateX(-1px);
}
/* Breadcrumb container */
.checkout-page .ck-crumbs {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
letter-spacing: .02em;
color: rgba(0,0,0,0.55);
}
/* Breadcrumb links */
.checkout-page .ck-crumbs a {
color: inherit;
text-decoration: none;
opacity: .8;
}
.checkout-page .ck-crumbs a:hover {
opacity: 1;
}
/* Separator */
.checkout-page .ck-sep {
opacity: .4;
}
/* Step states */
.checkout-page .ck-step {
font-weight: 600;
}
.checkout-page .ck-step.is-current {
color: #000;
}
.checkout-page .ck-step.is-future {
color: rgba(0,0,0,0.35);
font-weight: 500;
}
/* ==========================================================
CHECKOUT DENSITY TUNING (make everything smaller & tighter)
========================================================== */
.checkout-page {
font-size: 14px;
}
/* Top container */
.checkout-page .ck-wrap {
padding-top: 18px;
padding-bottom: 24px;
}
/* Header titles */
.checkout-page .ck-h1 {
font-size: 24px;
}
.checkout-page .ck-h2 {
font-size: 16px;
}
/* Cards */
.checkout-page .ck-card {
padding: 16px;
border-radius: 18px;
}
/* Order summary product image */
.checkout-page .ck-item__img {
width: 70px;
height: 70px;
}
/* Inputs */
.checkout-page input,
.checkout-page select,
.checkout-page textarea {
padding: 8px 10px;
border-radius: 10px;
font-size: 13px;
}
/* Card & shipping grids */
.checkout-page .ck-cardgrid,
.checkout-page .ck-shipgrid {
gap: 8px;
}
/* Radio options */
.checkout-page .ck-shipopt {
padding: 10px 12px;
border-radius: 14px;
}
/* Price rows */
.checkout-page .ck-row {
font-size: 13px;
}
/* Total row emphasis */
.checkout-page .ck-total {
font-size: 14px;
}
/* Pay button */
.checkout-page .ck-paybtn {
padding: 12px;
font-size: 14px;
border-radius: 14px;
}
/* Breadcrumb + back button */
.checkout-page .ck-crumbs {
font-size: 12px;
}
.checkout-page .ck-back {
padding: 8px 12px;
font-size: 13px;
}
/* Optional message textarea */
.checkout-page .ck-textarea {
min-height: 90px;
}
/* Reduce vertical gaps */
.checkout-page .ck-block,
.checkout-page .ck-note,
.checkout-page .ck-breakdown {
margin-top: 12px;
}
/* ==========================================================
CONFIRMATION PAGE (luxury finish)
Uses existing checkout layout + adds cf-* styles
========================================================== */
.checkout-page .cf-hero {
padding: 10px 0 6px;
text-align: left;
}
.checkout-page .cf-badge {
width: 42px;
height: 42px;
border-radius: 14px;
display: grid;
place-items: center;
font-weight: 800;
border: 1px solid rgba(140,110,80,0.20);
background: rgba(160,120,80,0.25);
margin-bottom: 10px;
}
.checkout-page .cf-title {
margin: 0;
}
.checkout-page .cf-sub {
margin: 6px 0 0;
font-size: 13px;
opacity: 0.78;
line-height: 1.55;
}
.checkout-page .cf-panel {
margin-top: 14px;
padding: 14px;
border-radius: 18px;
border: 1px solid rgba(140,110,80,0.14);
background: rgba(255,255,255,0.45);
}
.checkout-page .cf-steps {
list-style: none;
padding: 0;
margin: 10px 0 0;
display: grid;
gap: 10px;
}
.checkout-page .cf-steps li {
display: grid;
gap: 4px;
}
.checkout-page .cf-steps strong {
font-weight: 800;
font-size: 13px;
}
.checkout-page .cf-steps span {
font-size: 12.5px;
opacity: 0.78;
line-height: 1.5;
}
.checkout-page .cf-copy {
margin: 8px 0 0;
font-size: 12.8px;
opacity: 0.78;
line-height: 1.6;
}
.checkout-page .cf-tip {
margin-top: 10px;
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
align-items: start;
padding: 12px;
border-radius: 16px;
border: 1px dashed rgba(140,110,80,0.22);
background: rgba(255,255,255,0.55);
}
.checkout-page .cf-tip p {
margin: 0;
font-size: 12.5px;
opacity: 0.85;
line-height: 1.55;
}
.checkout-page .cf-track {
margin-top: 12px;
display: grid;
grid-template-columns: 10px 1fr 10px 1fr 10px;
align-items: center;
gap: 10px;
}
.checkout-page .cf-track__dot {
width: 10px;
height: 10px;
border-radius: 99px;
background: rgba(160,120,80,0.85);
box-shadow: 0 6px 18px rgba(160,120,80,0.25);
}
.checkout-page .cf-track__line {
height: 2px;
border-radius: 2px;
background: rgba(160,120,80,0.45);
}
.checkout-page .cf-track__dot.is-off {
background: rgba(0,0,0,0.18);
box-shadow: none;
}
.checkout-page .cf-track__line.is-off {
background: rgba(0,0,0,0.12);
}
.checkout-page .cf-tracklabels {
margin-top: 10px;
display: flex;
justify-content: space-between;
font-size: 12px;
opacity: 0.70;
}
.checkout-page .cf-actions {
margin-top: 14px;
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.checkout-page .ck-kv {
margin-top: 10px;
display: grid;
gap: 10px;
}
.checkout-page .ck-kv__row {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 13px;
opacity: 0.88;
}
.checkout-page .ck-softbtn {
margin-top: 14px;
display: inline-block;
text-align: center;
padding: 10px 14px;
border-radius: 14px;
border: 1px solid rgba(140,110,80,0.20);
background: rgba(255,255,255,0.50);
text-decoration: none;
color: inherit;
font-weight: 700;
}
/* Remove default blue link style inside buttons */
.checkout-page .ck-paybtn,
.checkout-page .ck-paybtn:visited {
color: #000;
text-decoration: none;
}
.checkout-page .ck-paybtn:hover {
color: #000;
}
/* Confirmation — email & tracking reassurance */
.checkout-page .cf-mailhint {
margin-top: 8px;
font-size: 12.5px;
line-height: 1.55;
opacity: 0.75;
max-width: 520px;
}
/* Luxury success glow */
.checkout-page .cf-badge {
position: relative;
overflow: hidden;
}
.checkout-page .cf-badge::after {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(circle, rgba(160,120,80,0.35) 0%, rgba(160,120,80,0) 60%);
transform: translate(-30%, -20%);
animation: cfGlow 2.8s ease-in-out infinite;
pointer-events: none;
}
@keyframes cfGlow {
0% {
transform: translate(-30%, -20%) scale(0.9);
opacity: .35;
}
50% {
transform: translate(10%, 10%) scale(1.05);
opacity: .55;
}
100% {
transform: translate(-30%, -20%) scale(0.9);
opacity: .35;
}
}
/* Respect accessibility */
@media (prefers-reduced-motion: reduce) {
.checkout-page .cf-badge::after {
animation: none;
}
}
/* ==========================================================
Confirmation page – gentle entrance (Option C)
========================================================== */
.checkout-page .cf-enter {
animation: cfEnter 1.5s ease-out both;
}
@keyframes cfEnter {
from {
opacity: 0;
transform: translateY(46px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Respect accessibility */
@media (prefers-reduced-motion: reduce) {
.checkout-page .cf-enter {
animation: none;
}
}
/* ==========================================================
SELLER DASHBOARD (scoped)
========================================================== */
.seller-dashboard-page .sd-shell {
width: min(1280px, calc(100% - 40px));
margin: 22px auto 44px;
display: grid;
grid-template-columns: 260px 1fr;
gap: 18px;
}
.seller-dashboard-page .sd-side {
background: rgba(255,255,255,0.50);
border: 1px solid rgba(140,110,80,0.16);
border-radius: 22px;
box-shadow: 0 16px 36px rgba(0,0,0,0.06);
padding: 18px;
position: sticky;
top: 14px;
height: fit-content;
}
.seller-dashboard-page .sd-side__brand {
display: flex;
gap: 12px;
align-items: center;
padding-bottom: 14px;
border-bottom: 1px solid rgba(140,110,80,0.12);
margin-bottom: 14px;
}
.seller-dashboard-page .sd-logo {
width: 44px;
height: 44px;
border-radius: 16px;
display: grid;
place-items: center;
font-weight: 800;
border: 1px solid rgba(140,110,80,0.18);
background: rgba(160,120,80,0.18);
letter-spacing: .08em;
}
.seller-dashboard-page .sd-side__name {
font-weight: 800;
}
.seller-dashboard-page .sd-side__tag {
font-size: 12px;
opacity: .75;
}
.seller-dashboard-page .sd-menu {
display: flex;
flex-direction: column;
gap: 8px;
}
.seller-dashboard-page .sd-menu__item {
display: flex;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 16px;
text-decoration: none;
color: inherit;
border: 1px solid transparent;
background: rgba(255,255,255,0.35);
}
.seller-dashboard-page .sd-menu__item:hover {
background: rgba(255,255,255,0.55);
}
.seller-dashboard-page .sd-menu__item.is-active {
background: rgba(160,120,80,0.22);
border-color: rgba(140,110,80,0.18);
font-weight: 700;
}
.seller-dashboard-page .sd-menu__spacer {
height: 8px;
}
.seller-dashboard-page .sd-menu__logout {
opacity: .8;
}
.seller-dashboard-page .sd-main {
min-width: 0;
}
.seller-dashboard-page .sd-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 18px;
margin-bottom: 14px;
}
.seller-dashboard-page .sd-title {
margin: 0;
font-family: "Playfair Display", serif;
font-size: 30px;
}
.seller-dashboard-page .sd-sub {
margin: 6px 0 0;
opacity: .75;
font-size: 13.5px;
}
.seller-dashboard-page .sd-head__right {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.seller-dashboard-page .sd-pillbar {
display: flex;
gap: 8px;
padding: 8px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.14);
background: rgba(255,255,255,0.50);
}
.seller-dashboard-page .sd-pill {
padding: 6px 10px;
border-radius: 999px;
font-size: 12.5px;
opacity: .85;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.55);
}
.seller-dashboard-page .sd-user {
display: flex;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.14);
background: rgba(255,255,255,0.50);
}
.seller-dashboard-page .sd-user__avatar {
width: 26px;
height: 26px;
border-radius: 999px;
object-fit: cover;
border: 1px solid rgba(140,110,80,0.14);
}
.seller-dashboard-page .sd-user__name {
font-weight: 700;
}
.seller-dashboard-page .sd-user__chev {
opacity: .6;
}
.seller-dashboard-page .sd-gridTop {
display: grid;
grid-template-columns: 1.6fr .9fr;
gap: 18px;
margin-bottom: 18px;
}
.seller-dashboard-page .sd-card {
background: rgba(255,255,255,0.50);
border: 1px solid rgba(140,110,80,0.16);
border-radius: 22px;
box-shadow: 0 16px 36px rgba(0,0,0,0.06);
padding: 18px;
}
.seller-dashboard-page .sd-wide {
grid-column: 1 / -1;
}
.seller-dashboard-page .sd-card__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.seller-dashboard-page .sd-card__head--split {
justify-content: space-between;
align-items: flex-start;
}
.seller-dashboard-page .sd-h2 {
margin: 0;
font-family: "Playfair Display", serif;
font-size: 18px;
}
.seller-dashboard-page .sd-muted {
margin: 6px 0 0;
opacity: .70;
font-size: 12.5px;
}
.seller-dashboard-page .sd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border-radius: 14px;
border: 1px solid rgba(140,110,80,0.22);
background: rgba(160,120,80,0.25);
text-decoration: none;
color: inherit;
font-weight: 700;
cursor: pointer;
}
.seller-dashboard-page .sd-btn--soft {
background: rgba(255,255,255,0.55);
}
.seller-dashboard-page .sd-btn--mini {
padding: 8px 10px;
border-radius: 12px;
font-size: 12.5px;
}
.seller-dashboard-page .sd-btn--ghost {
background: rgba(255,255,255,0.35);
font-weight: 600;
}
.seller-dashboard-page .sd-link {
color: inherit;
text-decoration: none;
opacity: .75;
font-weight: 700;
}
.seller-dashboard-page .sd-link:hover {
opacity: 1;
}
.seller-dashboard-page .sd-thumb {
width: 46px;
height: 46px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.10));
border: 1px solid rgba(140,110,80,0.14);
}
.seller-dashboard-page .sd-items {
display: grid;
gap: 10px;
}
.seller-dashboard-page .sd-itemRow {
display: grid;
grid-template-columns: 52px 1fr auto auto auto;
gap: 12px;
align-items: center;
padding: 12px;
border-radius: 18px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.45);
}
.seller-dashboard-page .sd-itemRow__title {
font-weight: 800;
}
.seller-dashboard-page .sd-itemRow__meta {
font-size: 12px;
opacity: .70;
margin-top: 2px;
}
.seller-dashboard-page .sd-itemRow__price {
font-weight: 800;
opacity: .9;
}
.seller-dashboard-page .sd-dot {
width: 9px;
height: 9px;
border-radius: 99px;
display: inline-block;
margin-right: 8px;
}
.seller-dashboard-page .sd-dot.is-on {
background: rgba(160,120,80,0.9);
}
.seller-dashboard-page .sd-dot.is-off {
background: rgba(0,0,0,0.22);
}
.seller-dashboard-page .sd-profile__top {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 12px;
}
.seller-dashboard-page .sd-profile__avatar {
width: 52px;
height: 52px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.12));
border: 1px solid rgba(140,110,80,0.14);
}
.seller-dashboard-page .sd-profile__handle {
font-weight: 900;
font-size: 16px;
}
.seller-dashboard-page .sd-profile__badge {
font-size: 12px;
opacity: .75;
margin-top: 2px;
}
.seller-dashboard-page .sd-profile__sold {
margin-top: 6px;
font-size: 12.5px;
opacity: .75;
}
.seller-dashboard-page .sd-bio {
padding: 14px;
border-radius: 18px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.45);
line-height: 1.6;
font-size: 13px;
opacity: .85;
}
.seller-dashboard-page .sd-profile__cta {
margin-top: 14px;
display: flex;
justify-content: flex-end;
}
.seller-dashboard-page .sd-controls {
display: flex;
gap: 12px;
align-items: flex-start;
flex-wrap: wrap;
justify-content: flex-end;
}
.seller-dashboard-page .sd-kpis {
display: flex;
gap: 14px;
align-items: flex-end;
}
.seller-dashboard-page .sd-kpi__big {
font-weight: 900;
font-size: 24px;
font-family: "Playfair Display", serif;
}
.seller-dashboard-page .sd-kpi__label {
font-size: 12.5px;
opacity: .75;
margin-top: 2px;
}
.seller-dashboard-page .sd-selectWrap {
display: inline-flex;
}
.seller-dashboard-page .sd-select {
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(140,110,80,0.14);
background: rgba(255,255,255,0.55);
font: inherit;
}
.seller-dashboard-page .sd-graph {
margin-top: 12px;
border-radius: 18px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.35);
padding: 12px;
overflow: hidden;
}
.seller-dashboard-page .sd-filterBar {
margin-top: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding-top: 8px;
}
.seller-dashboard-page .sd-tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.seller-dashboard-page .sd-tab {
border: none;
background: transparent;
padding: 8px 2px;
cursor: pointer;
font: inherit;
opacity: .70;
border-bottom: 2px solid transparent;
}
.seller-dashboard-page .sd-tab.is-active {
opacity: 1;
font-weight: 800;
border-bottom-color: rgba(160,120,80,0.8);
}
.seller-dashboard-page .sd-badge {
display: inline-block;
margin-left: 6px;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.14);
background: rgba(255,255,255,0.55);
font-size: 12px;
}
.seller-dashboard-page .sd-badge--hot {
background: rgba(160,120,80,0.22);
font-weight: 800;
}
.seller-dashboard-page .sd-activity {
margin-top: 10px;
display: grid;
gap: 10px;
}
.seller-dashboard-page .sd-actRow {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
padding: 12px;
border-radius: 18px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.45);
}
.seller-dashboard-page .sd-actRow__left {
display: flex;
gap: 12px;
align-items: center;
min-width: 0;
}
.seller-dashboard-page .sd-miniavatar {
width: 34px;
height: 34px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.10));
border: 1px solid rgba(140,110,80,0.14);
}
.seller-dashboard-page .sd-actRow__title {
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 620px;
}
.seller-dashboard-page .sd-actRow__meta {
font-size: 12px;
opacity: .72;
margin-top: 2px;
}
.seller-dashboard-page .sd-actRow__right {
display: flex;
align-items: center;
gap: 12px;
}
.seller-dashboard-page .sd-actRow__amount {
font-weight: 900;
white-space: nowrap;
}
.seller-dashboard-page .sd-actRow__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
/* Responsive */
@media (max-width: 980px) {
.seller-dashboard-page .sd-shell {
grid-template-columns: 1fr;
}
.seller-dashboard-page .sd-side {
position: relative;
top: auto;
}
.seller-dashboard-page .sd-gridTop {
grid-template-columns: 1fr;
}
.seller-dashboard-page .sd-itemRow {
grid-template-columns: 52px 1fr auto;
grid-auto-rows: auto;
}
.seller-dashboard-page .sd-itemRow__status,
.seller-dashboard-page .sd-itemRow__actions {
grid-column: 1 / -1;
justify-content: flex-end;
}
}
@media (max-width: 520px) {
.seller-dashboard-page .sd-shell {
width: calc(100% - 24px);
}
.seller-dashboard-page .sd-actRow {
flex-direction: column;
align-items: stretch;
}
.seller-dashboard-page .sd-actRow__right {
width: 100%;
justify-content: space-between;
}
}
/* ==========================================================
SELLER DASHBOARD — PREMIUM POLISH (match mockup)
========================================================== */
.seller-dashboard-page {
font-size: 14px;
}
/* Shell spacing (less airy, more premium) */
.seller-dashboard-page .sd-shell {
gap: 16px;
}
/* Side + cards: softer surfaces like mockup */
.seller-dashboard-page .sd-side,
.seller-dashboard-page .sd-card {
background: rgba(255,255,255,0.42);
border: 1px solid rgba(140,110,80,0.13);
box-shadow:
0 18px 42px rgba(0,0,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.55);
}
/* Reduce card padding a touch */
.seller-dashboard-page .sd-card {
padding: 16px;
border-radius: 24px;
}
.seller-dashboard-page .sd-side {
border-radius: 24px;
}
/* Headline sizing closer to mock */
.seller-dashboard-page .sd-title {
font-size: 28px;
letter-spacing: -0.01em;
}
.seller-dashboard-page .sd-sub {
font-size: 13px;
line-height: 1.5;
}
/* Pills: smaller + cleaner */
.seller-dashboard-page .sd-pillbar {
padding: 6px;
gap: 6px;
background: rgba(255,255,255,0.45);
border-color: rgba(140,110,80,0.12);
}
.seller-dashboard-page .sd-pill {
padding: 5px 9px;
font-size: 12px;
background: rgba(255,255,255,0.55);
border-color: rgba(140,110,80,0.10);
}
/* Sidebar items: more “soft tab” look */
.seller-dashboard-page .sd-menu__item {
background: rgba(255,255,255,0.28);
border: 1px solid rgba(140,110,80,0.00);
border-radius: 18px;
}
.seller-dashboard-page .sd-menu__item:hover {
background: rgba(255,255,255,0.45);
}
.seller-dashboard-page .sd-menu__item.is-active {
background: rgba(160,120,80,0.18);
border-color: rgba(140,110,80,0.14);
}
/* Item rows: tighter + more elegant */
.seller-dashboard-page .sd-itemRow,
.seller-dashboard-page .sd-actRow {
background: rgba(255,255,255,0.40);
border-color: rgba(140,110,80,0.11);
border-radius: 20px;
padding: 11px 12px;
}
/* Titles and meta */
.seller-dashboard-page .sd-itemRow__title,
.seller-dashboard-page .sd-actRow__title {
font-size: 14px;
}
.seller-dashboard-page .sd-itemRow__meta,
.seller-dashboard-page .sd-actRow__meta {
font-size: 11.5px;
opacity: 0.68;
}
/* Buttons: unify style (no harsh contrast) */
.seller-dashboard-page .sd-btn {
padding: 9px 12px;
border-radius: 16px;
border-color: rgba(140,110,80,0.18);
background: rgba(160,120,80,0.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
.seller-dashboard-page .sd-btn:hover {
background: rgba(160,120,80,0.28);
}
.seller-dashboard-page .sd-btn--soft {
background: rgba(255,255,255,0.50);
}
.seller-dashboard-page .sd-btn--soft:hover {
background: rgba(255,255,255,0.65);
}
.seller-dashboard-page .sd-btn--ghost {
background: rgba(255,255,255,0.34);
}
/* Filter tabs: make them look exactly like your key screenshot */
.seller-dashboard-page .sd-tab {
opacity: 0.65;
padding: 8px 0;
border-bottom-width: 2px;
}
.seller-dashboard-page .sd-tab.is-active {
opacity: 1;
border-bottom-color: rgba(160,120,80,0.85);
}
.seller-dashboard-page .sd-badge {
padding: 2px 8px;
font-size: 11.5px;
border-color: rgba(140,110,80,0.12);
background: rgba(255,255,255,0.55);
}
.seller-dashboard-page .sd-badge--hot {
background: rgba(160,120,80,0.18);
}
/* Graph panel a bit softer */
.seller-dashboard-page .sd-graph {
background: rgba(255,255,255,0.30);
border-color: rgba(140,110,80,0.10);
border-radius: 20px;
}
/* ==========================================================
Seller Dashboard — Softer, more sublime typography
========================================================== */
/* Global text tone on dashboard (warmer, less contrast) */
.seller-dashboard-page {
color: rgba(35, 26, 18, 0.88);
}
/* Main big title */
.seller-dashboard-page .sd-title {
color: rgba(35, 26, 18, 0.86);
font-weight: 650;
letter-spacing: -0.01em;
}
/* Section titles: "Your Items", "Account & Bio", "Income & Stats" */
.seller-dashboard-page .sd-h2 {
color: rgba(35, 26, 18, 0.82);
font-weight: 600;
letter-spacing: 0.01em;
}
/* Item titles inside rows */
.seller-dashboard-page .sd-itemRow__title,
.seller-dashboard-page .sd-actRow__title {
color: rgba(35, 26, 18, 0.80);
font-weight: 650;
font-size: 13.5px;
letter-spacing: 0.01em;
}
/* Price + strong numbers should not be pitch black either */
.seller-dashboard-page .sd-itemRow__price,
.seller-dashboard-page .sd-actRow__amount,
.seller-dashboard-page .sd-kpi__big {
color: rgba(35, 26, 18, 0.82);
}
/* Meta text: a touch lighter */
.seller-dashboard-page .sd-itemRow__meta,
.seller-dashboard-page .sd-actRow__meta,
.seller-dashboard-page .sd-sub,
.seller-dashboard-page .sd-muted {
color: rgba(35, 26, 18, 0.62);
}
/* Optional: gentle hover polish for rows */
.seller-dashboard-page .sd-itemRow:hover,
.seller-dashboard-page .sd-actRow:hover {
border-color: rgba(160,120,80,0.20);
background: rgba(255,255,255,0.48);
}
.seller-dashboard-page .sd-itemRow__title,
.seller-dashboard-page .sd-actRow__title {
font-family: "Playfair Display", serif;
font-weight: 600;
letter-spacing: 0.005em;
}
/* Seller dashboard — softer welcome headline */
.seller-dashboard-page .sd-title {
color: rgba(95, 78, 60, 0.88);
font-weight: 600;
letter-spacing: -0.01em;
}
/* ==========================================================
UPLOAD ITEM (seller) — premium form styling
========================================================== */
.seller-dashboard-page .sd-gridUpload {
display: grid;
grid-template-columns: 1.25fr .75fr;
gap: 18px;
}
.seller-dashboard-page .up-form label {
display: block;
font-size: 12.5px;
opacity: .75;
margin-bottom: 6px;
}
.seller-dashboard-page .up-field {
margin-top: 12px;
}
.seller-dashboard-page .up-row2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.seller-dashboard-page .up-row3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
.seller-dashboard-page .up-form input,
.seller-dashboard-page .up-form select,
.seller-dashboard-page .up-form textarea {
width: 100%;
border: 1px solid rgba(140,110,80,0.14);
background: rgba(255,255,255,0.55);
border-radius: 16px;
padding: 10px 12px;
font: inherit;
outline: none;
}
.seller-dashboard-page .up-form textarea {
resize: vertical;
min-height: 110px;
}
.seller-dashboard-page .up-hint {
margin: 10px 0 0;
font-size: 12.5px;
opacity: .70;
line-height: 1.55;
}
.seller-dashboard-page .up-help {
margin-top: 6px;
font-size: 12px;
opacity: .65;
}
.seller-dashboard-page .up-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.seller-dashboard-page .up-chip {
border: 1px solid rgba(140,110,80,0.14);
background: rgba(255,255,255,0.50);
border-radius: 999px;
padding: 8px 12px;
font: inherit;
font-size: 12.5px;
opacity: .85;
cursor: pointer;
}
.seller-dashboard-page .up-chip:hover {
background: rgba(255,255,255,0.65);
}
.seller-dashboard-page .up-chip.is-on {
background: rgba(160,120,80,0.18);
border-color: rgba(140,110,80,0.18);
opacity: 1;
font-weight: 700;
}
.seller-dashboard-page .up-actions {
margin-top: 16px;
display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.seller-dashboard-page .up-private {
margin-top: 14px;
padding: 14px;
border-radius: 20px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.38);
}
.seller-dashboard-page .up-private__head {
display: grid;
gap: 4px;
margin-bottom: 10px;
}
.seller-dashboard-page .up-h3 {
margin: 0;
font-family: "Playfair Display", serif;
font-size: 16px;
}
.seller-dashboard-page .up-muted {
font-size: 12.5px;
opacity: .70;
}
.seller-dashboard-page .up-check {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 12.5px;
opacity: .80;
}
.seller-dashboard-page .up-photoBox {
display: grid;
gap: 14px;
}
.seller-dashboard-page .up-drop {
border-radius: 22px;
border: 1px dashed rgba(140,110,80,0.22);
background: rgba(255,255,255,0.40);
padding: 16px;
text-align: center;
}
.seller-dashboard-page .up-drop__icon {
width: 44px;
height: 44px;
border-radius: 16px;
display: grid;
place-items: center;
margin: 0 auto 10px;
border: 1px solid rgba(140,110,80,0.16);
background: rgba(160,120,80,0.16);
font-weight: 900;
}
.seller-dashboard-page .up-drop__t {
font-weight: 800;
}
.seller-dashboard-page .up-drop__p {
margin-top: 4px;
font-size: 12.5px;
opacity: .70;
}
.seller-dashboard-page .up-uploadBtn {
margin-top: 12px;
}
.seller-dashboard-page .up-thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.seller-dashboard-page .up-thumb {
height: 56px;
border-radius: 16px;
border: 1px solid rgba(140,110,80,0.12);
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.10));
}
.seller-dashboard-page .up-previewCard {
margin-top: 10px;
border-radius: 22px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.42);
display: grid;
grid-template-columns: 92px 1fr;
gap: 12px;
padding: 12px;
align-items: center;
}
.seller-dashboard-page .up-previewImg {
width: 92px;
height: 92px;
border-radius: 18px;
border: 1px solid rgba(140,110,80,0.12);
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.10));
}
.seller-dashboard-page .up-previewTitle {
font-weight: 800;
font-family: "Playfair Display", serif;
font-size: 16px;
opacity: .88;
}
.seller-dashboard-page .up-previewSub {
margin-top: 4px;
font-size: 12.5px;
opacity: .70;
}
.seller-dashboard-page .up-previewPrice {
margin-top: 10px;
font-weight: 900;
opacity: .88;
}
.seller-dashboard-page .up-previewChips {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.seller-dashboard-page .up-miniChip {
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.55);
font-size: 12px;
opacity: .80;
}
/* Responsive */
@media (max-width: 980px) {
.seller-dashboard-page .sd-gridUpload {
grid-template-columns: 1fr;
}
.seller-dashboard-page .up-row3 {
grid-template-columns: 1fr;
}
.seller-dashboard-page .up-row2 {
grid-template-columns: 1fr;
}
}
/* ==========================================================
Account & Settings page (scoped)
========================================================== */
.seller-dashboard-page .as-form {
display: grid;
gap: 18px;
}
.seller-dashboard-page .as-grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.seller-dashboard-page .as-card {
padding: 16px;
}
.seller-dashboard-page .as-editBtn {
border: none;
background: transparent;
cursor: pointer;
font: inherit;
opacity: .70;
font-weight: 700;
}
.seller-dashboard-page .as-editBtn:hover {
opacity: 1;
}
.seller-dashboard-page .as-profile {
display: grid;
grid-template-columns: 72px 1fr;
gap: 14px;
align-items: start;
}
.seller-dashboard-page .as-avatar {
width: 72px;
height: 72px;
border-radius: 22px;
border: 1px solid rgba(140,110,80,0.12);
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.10));
}
.seller-dashboard-page .as-handleRow {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.seller-dashboard-page .as-handle {
font-weight: 900;
font-size: 18px;
font-family: "Playfair Display", serif;
opacity: .88;
}
.seller-dashboard-page .as-badge {
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(160,120,80,0.14);
font-size: 12px;
opacity: .85;
font-weight: 700;
}
.seller-dashboard-page .as-mini {
margin-top: 6px;
font-size: 12.5px;
opacity: .70;
line-height: 1.5;
}
.seller-dashboard-page .as-bioBox {
margin-top: 12px;
}
.seller-dashboard-page .as-bioBox textarea {
width: 100%;
border: 1px solid rgba(140,110,80,0.14);
background: rgba(255,255,255,0.55);
border-radius: 18px;
padding: 12px;
font: inherit;
resize: vertical;
min-height: 110px;
outline: none;
}
.seller-dashboard-page .as-rowActions {
margin-top: 12px;
display: flex;
justify-content: flex-end;
}
.seller-dashboard-page .as-divider {
height: 1px;
background: rgba(140,110,80,0.10);
margin: 12px 0;
}
.seller-dashboard-page .as-payoutTop {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.seller-dashboard-page .as-cardBrand {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 18px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.45);
}
.seller-dashboard-page .as-cardBrand__logo {
font-weight: 900;
letter-spacing: .08em;
opacity: .85;
}
.seller-dashboard-page .as-cardBrand__mask {
font-weight: 800;
opacity: .75;
}
.seller-dashboard-page .as-payoutMeta {
margin-top: 10px;
}
.seller-dashboard-page .as-payoutFoot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.seller-dashboard-page .as-amount {
font-weight: 900;
opacity: .88;
font-family: "Playfair Display", serif;
font-size: 18px;
}
.seller-dashboard-page .as-block {
display: grid;
gap: 10px;
}
.seller-dashboard-page .as-secRow,
.seller-dashboard-page .as-notiRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-radius: 18px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.40);
}
.seller-dashboard-page .as-strong {
font-weight: 800;
opacity: .86;
}
.seller-dashboard-page .as-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.seller-dashboard-page .as-linkBtn {
text-decoration: none;
color: inherit;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.45);
font-weight: 700;
opacity: .82;
}
.seller-dashboard-page .as-linkBtn:hover {
opacity: 1;
background: rgba(255,255,255,0.60);
}
.seller-dashboard-page .as-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
flex-wrap: wrap;
}
/* Switch */
.seller-dashboard-page .as-switch {
position: relative;
width: 46px;
height: 28px;
display: inline-block;
}
.seller-dashboard-page .as-switch input {
opacity: 0;
width: 0;
height: 0;
}
.seller-dashboard-page .as-slider {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.10);
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.12);
cursor: pointer;
transition: .2s ease;
}
.seller-dashboard-page .as-slider::after {
content: "";
position: absolute;
width: 22px;
height: 22px;
left: 3px;
top: 50%;
transform: translateY(-50%);
border-radius: 999px;
background: rgba(255,255,255,0.90);
border: 1px solid rgba(140,110,80,0.14);
transition: .2s ease;
}
.seller-dashboard-page .as-switch input:checked + .as-slider {
background: rgba(160,120,80,0.22);
}
.seller-dashboard-page .as-switch input:checked + .as-slider::after {
left: 21px;
}
/* Responsive */
@media (max-width: 980px) {
.seller-dashboard-page .as-grid2 {
grid-template-columns: 1fr;
}
.seller-dashboard-page .as-profile {
grid-template-columns: 1fr;
}
.seller-dashboard-page .as-avatar {
width: 64px;
height: 64px;
border-radius: 20px;
}
}
/* Account settings switches — match mockup (warm gold when ON) */
.seller-dashboard-page .as-slider {
background: rgba(160,120,80,0.16);
border: 1px solid rgba(140,110,80,0.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.seller-dashboard-page .as-switch input:checked + .as-slider {
background: rgba(160,120,80,0.32);
border-color: rgba(140,110,80,0.18);
}
.seller-dashboard-page .as-slider::after {
background: rgba(255,255,255,0.92);
box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}
/* ==========================================================
ACCOUNT PAGE — PREMIUM MATCH PACK
(makes it look like the mockup image)
========================================================== */
.seller-dashboard-page .as-form {
gap: 18px;
}
/* --- Softer typography (no harsh black) --- */
.seller-dashboard-page .sd-title,
.seller-dashboard-page .sd-h2,
.seller-dashboard-page .as-handle {
color: rgba(92, 76, 60, 0.88);
}
.seller-dashboard-page .sd-title {
font-weight: 600;
letter-spacing: -0.01em;
}
.seller-dashboard-page .sd-h2 {
font-weight: 600;
letter-spacing: 0.005em;
}
.seller-dashboard-page .sd-sub,
.seller-dashboard-page .as-mini,
.seller-dashboard-page .sd-muted {
color: rgba(92, 76, 60, 0.62);
}
/* --- Card surface (glass + inner highlight like mockup) --- */
.seller-dashboard-page .as-card,
.seller-dashboard-page .sd-side {
background: rgba(255,255,255,0.36);
border: 1px solid rgba(140,110,80,0.12);
box-shadow:
0 22px 50px rgba(0,0,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.62);
backdrop-filter: blur(6px);
}
.seller-dashboard-page .as-card {
border-radius: 26px;
padding: 18px;
}
/* --- Sidebar items closer to mockup --- */
.seller-dashboard-page .sd-menu__item {
background: rgba(255,255,255,0.24);
border: 1px solid rgba(140,110,80,0.00);
}
.seller-dashboard-page .sd-menu__item:hover {
background: rgba(255,255,255,0.38);
}
.seller-dashboard-page .sd-menu__item.is-active {
background: rgba(160,120,80,0.16);
border-color: rgba(140,110,80,0.14);
}
/* --- Profile bio textarea (more premium inset look) --- */
.seller-dashboard-page .as-bioBox textarea {
background: rgba(255,255,255,0.42);
border: 1px solid rgba(140,110,80,0.10);
border-radius: 22px;
padding: 14px 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}
/* --- Payout pill (VISA .... 4242) style --- */
.seller-dashboard-page .as-cardBrand {
background: rgba(255,255,255,0.42);
border-color: rgba(140,110,80,0.10);
border-radius: 999px;
padding: 10px 14px;
}
/* Pending payout amount: softer but strong */
.seller-dashboard-page .as-amount {
color: rgba(92, 76, 60, 0.86);
font-size: 20px;
}
/* --- Inner rows inside security/notifications: softer chips --- */
.seller-dashboard-page .as-secRow,
.seller-dashboard-page .as-notiRow {
background: rgba(255,255,255,0.34);
border: 1px solid rgba(140,110,80,0.10);
border-radius: 22px;
padding: 12px 14px;
}
/* --- Buttons: unify everything to premium pill style --- */
.seller-dashboard-page .sd-btn,
.seller-dashboard-page .sd-btn--soft,
.seller-dashboard-page .sd-btn--mini {
border-radius: 999px;
padding: 10px 16px;
border: 1px solid rgba(140,110,80,0.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.seller-dashboard-page .sd-btn {
background: rgba(160,120,80,0.22);
color: rgba(70,55,40,0.92);
font-weight: 700;
}
.seller-dashboard-page .sd-btn:hover {
background: rgba(160,120,80,0.28);
}
.seller-dashboard-page .sd-btn--soft {
background: rgba(255,255,255,0.45);
}
.seller-dashboard-page .sd-btn--soft:hover {
background: rgba(255,255,255,0.60);
}
/* Edit links calmer */
.seller-dashboard-page .as-editBtn {
opacity: .70;
}
.seller-dashboard-page .as-editBtn:hover {
opacity: 1;
}
/* --- Fix: 2FA select looks too default --- */
.seller-dashboard-page .as-select {
background: rgba(255,255,255,0.42);
border: 1px solid rgba(140,110,80,0.10);
border-radius: 999px;
padding: 10px 42px 10px 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
color: rgba(70,55,40,0.92);
}
/* Replace the "⌄" with a subtle caret look */
.seller-dashboard-page .as-selectIcon {
opacity: .45;
}
/* --- Switch styling: warm gold ON --- */
.seller-dashboard-page .as-slider {
background: rgba(160,120,80,0.14);
border-color: rgba(140,110,80,0.12);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.seller-dashboard-page .as-switch input:checked + .as-slider {
background: rgba(160,120,80,0.30);
border-color: rgba(140,110,80,0.16);
}
.seller-dashboard-page .as-slider::after {
background: rgba(255,255,255,0.92);
box-shadow: 0 8px 16px rgba(0,0,0,0.10);
}
/* Helpful links buttons */
.seller-dashboard-page .as-linkBtn {
border-radius: 999px;
background: rgba(255,255,255,0.42);
border-color: rgba(140,110,80,0.10);
}
/* Responsive polish */
@media (max-width: 980px) {
.seller-dashboard-page .as-card {
padding: 16px;
border-radius: 22px;
}
}
/* Helpful links — match mockup layout and spacing */
.seller-dashboard-page .as-helpCard {
padding: 18px;
}
.seller-dashboard-page .as-helpRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.seller-dashboard-page .as-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.seller-dashboard-page .as-actions {
display: flex;
gap: 12px;
align-items: center;
}
/* Make the links feel “pill-premium” like your mockup */
.seller-dashboard-page .as-linkBtn {
text-decoration: none;
color: inherit;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.40);
font-weight: 700;
opacity: .82;
}
.seller-dashboard-page .as-linkBtn:hover {
opacity: 1;
background: rgba(255,255,255,0.58);
}
/* helper copy under divider */
.seller-dashboard-page .as-helpNote {
margin: 10px 0 0;
font-size: 12.5px;
opacity: .62;
line-height: 1.55;
}
/* On small screens, stack actions below links */
@media (max-width: 720px) {
.seller-dashboard-page .as-helpRow {
align-items: stretch;
}
.seller-dashboard-page .as-actions {
justify-content: flex-start;
}
}
/* ==========================================================
Account page — Primary Save changes button emphasis
========================================================== */
/* Primary action: Save changes */
.seller-dashboard-page .as-actions .sd-btn:not(.sd-btn--soft) {
background: linear-gradient(
180deg,
rgba(190,150,110,0.45),
rgba(160,120,80,0.35)
);
border: 1px solid rgba(140,110,80,0.25);
color: rgba(60,45,30,0.95);
font-weight: 800;
box-shadow:
0 10px 26px rgba(140,110,80,0.25),
inset 0 1px 0 rgba(255,255,255,0.55);
}
.seller-dashboard-page .as-actions .sd-btn:not(.sd-btn--soft):hover {
background: linear-gradient(
180deg,
rgba(200,160,120,0.55),
rgba(170,130,90,0.45)
);
box-shadow:
0 14px 32px rgba(140,110,80,0.30),
inset 0 1px 0 rgba(255,255,255,0.60);
}
/* Secondary: Cancel */
.seller-dashboard-page .as-actions .sd-btn--soft {
background: rgba(255,255,255,0.35);
border: 1px solid rgba(140,110,80,0.12);
color: rgba(90,75,60,0.80);
font-weight: 600;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.seller-dashboard-page .as-actions .sd-btn--soft:hover {
background: rgba(255,255,255,0.55);
}
/* ==========================================================
BUYER DASHBOARD — premium + delicate
========================================================== */
.buyer-dashboard-page .bd-title {
color: rgba(95, 78, 60, 0.86);
font-weight: 600;
}
.buyer-dashboard-page .bd-sub {
color: rgba(95, 78, 60, 0.62);
}
.buyer-dashboard-page .bd-headRight {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.buyer-dashboard-page .bd-pills {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.buyer-dashboard-page .bd-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.35);
color: rgba(95, 78, 60, 0.76);
font-weight: 700;
font-size: 12.5px;
}
.buyer-dashboard-page .bd-dot {
width: 8px;
height: 8px;
border-radius: 99px;
background: rgba(160,120,80,0.40);
}
.buyer-dashboard-page .bd-dot--soft {
background: rgba(160,120,80,0.22);
}
.buyer-dashboard-page .bd-card {
border-radius: 26px;
background: rgba(255,255,255,0.34);
border: 1px solid rgba(140,110,80,0.12);
box-shadow: 0 22px 50px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.62);
backdrop-filter: blur(6px);
}
.buyer-dashboard-page .bd-link {
text-decoration: none;
color: rgba(120, 95, 70, 0.75);
font-weight: 800;
}
.buyer-dashboard-page .bd-link:hover {
color: rgba(120, 95, 70, 0.95);
}
/* Appear animation */
.buyer-dashboard-page .bd-appear {
opacity: 0;
transform: translateY(8px);
animation: bdIn 520ms ease forwards;
}
@keyframes bdIn {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Profile & Privacy */
.buyer-dashboard-page .bd-profile {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 14px;
align-items: center;
margin-top: 12px;
}
.buyer-dashboard-page .bd-avatar {
width: 64px;
height: 64px;
border-radius: 22px;
border: 1px solid rgba(140,110,80,0.12);
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.10));
}
.buyer-dashboard-page .bd-handleRow {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.buyer-dashboard-page .bd-handle {
font-family: "Playfair Display", serif;
font-weight: 600;
font-size: 18px;
color: rgba(95, 78, 60, 0.88);
}
.buyer-dashboard-page .bd-badge {
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(160,120,80,0.14);
font-size: 12px;
font-weight: 800;
color: rgba(95, 78, 60, 0.78);
}
.buyer-dashboard-page .bd-muted {
margin-top: 6px;
font-size: 12.5px;
color: rgba(95, 78, 60, 0.62);
}
.buyer-dashboard-page .bd-split {
margin-top: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.buyer-dashboard-page .bd-note {
font-size: 12.5px;
color: rgba(95, 78, 60, 0.66);
}
.buyer-dashboard-page .bd-note--right {
text-align: right;
}
.buyer-dashboard-page .bd-miniLink {
color: rgba(120, 95, 70, 0.85);
font-weight: 800;
text-decoration: none;
border-bottom: 1px solid rgba(120, 95, 70, 0.25);
}
.buyer-dashboard-page .bd-miniLink:hover {
border-bottom-color: rgba(120, 95, 70, 0.55);
}
/* Orders */
.buyer-dashboard-page .bd-ordersHead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin-bottom: 12px;
}
.buyer-dashboard-page .bd-viewAll {
text-decoration: none;
font-weight: 900;
color: rgba(120, 95, 70, 0.75);
}
.buyer-dashboard-page .bd-viewAll:hover {
color: rgba(120, 95, 70, 0.95);
}
.buyer-dashboard-page .bd-orderList {
display: grid;
gap: 12px;
margin-top: 8px;
}
.buyer-dashboard-page .bd-order {
display: grid;
grid-template-columns: 92px 1fr auto;
gap: 14px;
align-items: center;
padding: 12px;
border-radius: 24px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.32);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
}
.buyer-dashboard-page .bd-hover:hover {
background: rgba(255,255,255,0.44);
border-color: rgba(140,110,80,0.16);
}
.buyer-dashboard-page .bd-thumb {
width: 92px;
height: 92px;
border-radius: 22px;
border: 1px solid rgba(140,110,80,0.12);
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.12));
}
.buyer-dashboard-page .bd-thumb--2 {
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.10));
}
.buyer-dashboard-page .bd-thumb--3 {
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.14));
}
.buyer-dashboard-page .bd-orderTitle {
font-family: "Playfair Display", serif;
font-weight: 600;
font-size: 18px;
color: rgba(95, 78, 60, 0.86);
}
.buyer-dashboard-page .bd-orderMeta {
margin-top: 4px;
display: flex;
gap: 10px;
flex-wrap: wrap;
font-size: 12.5px;
color: rgba(95, 78, 60, 0.62);
align-items: center;
}
.buyer-dashboard-page .bd-verified {
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.40);
font-weight: 800;
font-size: 12px;
}
.buyer-dashboard-page .bd-orderBar {
margin-top: 10px;
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: center;
}
.buyer-dashboard-page .bd-statusPill {
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.12);
font-weight: 900;
font-size: 12px;
color: rgba(95, 78, 60, 0.78);
background: rgba(255,255,255,0.42);
white-space: nowrap;
}
.buyer-dashboard-page .bd-statusPill--ok {
background: rgba(160,120,80,0.16);
}
.buyer-dashboard-page .bd-statusPill--ok2 {
background: rgba(160,120,80,0.12);
}
.buyer-dashboard-page .bd-statusPill--mid {
background: rgba(255,255,255,0.34);
}
.buyer-dashboard-page .bd-progress {
height: 10px;
border-radius: 999px;
background: rgba(0,0,0,0.06);
border: 1px solid rgba(140,110,80,0.08);
overflow: hidden;
}
.buyer-dashboard-page .bd-progress__fill {
height: 100%;
width: var(--p, 0%);
border-radius: 999px;
background: rgba(160,120,80,0.30);
transform-origin: left;
transform: scaleX(0);
}
.buyer-dashboard-page .bd-progress__fill.is-anim {
animation: bdFill 900ms ease forwards;
}
@keyframes bdFill {
to {
transform: scaleX(1);
}
}
.buyer-dashboard-page .bd-smallNote {
margin-top: 10px;
font-size: 12.5px;
color: rgba(95, 78, 60, 0.62);
}
/* Rating */
.buyer-dashboard-page .bd-ratingRow {
margin-top: 12px;
display: grid;
grid-template-columns: auto auto auto 1fr;
gap: 12px;
align-items: center;
}
.buyer-dashboard-page .bd-ratingLabel {
font-size: 12.5px;
font-weight: 800;
color: rgba(95, 78, 60, 0.72);
}
.buyer-dashboard-page .bd-stars {
display: inline-flex;
gap: 6px;
}
.buyer-dashboard-page .bd-star {
width: 28px;
height: 28px;
border-radius: 10px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.44);
cursor: pointer;
font-size: 16px;
line-height: 1;
color: rgba(120, 95, 70, 0.30);
transition: transform .12s ease, background .12s ease, color .12s ease;
}
.buyer-dashboard-page .bd-star:hover {
transform: translateY(-1px);
background: rgba(255,255,255,0.60);
}
.buyer-dashboard-page .bd-star.is-on {
color: rgba(160,120,80,0.85);
border-color: rgba(140,110,80,0.18);
background: rgba(160,120,80,0.12);
}
.buyer-dashboard-page .bd-rateBtn {
padding: 10px 14px;
border-radius: 999px;
}
.buyer-dashboard-page .bd-rateBtn.is-ready {
box-shadow: 0 14px 30px rgba(140,110,80,0.18), inset 0 1px 0 rgba(255,255,255,0.55);
}
.buyer-dashboard-page .bd-rateBtn.is-shake {
animation: bdShake 420ms ease;
}
@keyframes bdShake {
15% {
transform: translateX(2px);
}
35% {
transform: translateX(-2px);
}
55% {
transform: translateX(2px);
}
75% {
transform: translateX(-2px);
}
}
.buyer-dashboard-page .bd-ratingThanks {
grid-column: 1 / -1;
font-size: 12.5px;
color: rgba(95, 78, 60, 0.62);
margin-top: 6px;
}
.buyer-dashboard-page .bd-ratingThanks.is-pop {
animation: bdPop 380ms ease;
}
@keyframes bdPop {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Support strip */
.buyer-dashboard-page .bd-support {
margin-top: 14px;
padding: 14px;
border-radius: 22px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.26);
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.buyer-dashboard-page .bd-supportText {
font-size: 12.5px;
color: rgba(95, 78, 60, 0.62);
}
/* Responsive */
@media (max-width: 980px) {
.buyer-dashboard-page .bd-profile {
grid-template-columns: 64px 1fr;
}
.buyer-dashboard-page .bd-profileActions {
grid-column: 1 / -1;
justify-self: start;
}
.buyer-dashboard-page .bd-split {
grid-template-columns: 1fr;
}
.buyer-dashboard-page .bd-note--right {
text-align: left;
}
.buyer-dashboard-page .bd-order {
grid-template-columns: 1fr;
text-align: left;
}
.buyer-dashboard-page .bd-orderActions {
justify-self: start;
}
.buyer-dashboard-page .bd-ratingRow {
grid-template-columns: 1fr;
align-items: start;
}
}
/* ==========================================================
Buyer dashboard — inline shipping form reveal
========================================================== */
.buyer-dashboard-page .bd-inlineEdit {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
font: inherit;
}
/* container that reveals */
.buyer-dashboard-page .bd-shipWrap {
margin-top: 12px;
overflow: hidden;
}
.buyer-dashboard-page .bd-shipCard {
border-radius: 22px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.30);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
padding: 14px;
transform: translateY(6px);
opacity: 0;
max-height: 0;
transition: max-height 420ms ease, opacity 260ms ease, transform 320ms ease;
}
/* when open (JS toggles this class) */
.buyer-dashboard-page .bd-shipWrap.is-open .bd-shipCard {
opacity: 1;
transform: translateY(0);
max-height: 900px;
}
.buyer-dashboard-page .bd-shipHead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.buyer-dashboard-page .bd-shipTitle {
font-family: "Playfair Display", serif;
font-weight: 600;
color: rgba(95, 78, 60, 0.86);
}
.buyer-dashboard-page .bd-shipClose {
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.38);
cursor: pointer;
font-size: 18px;
line-height: 1;
color: rgba(95, 78, 60, 0.70);
}
.buyer-dashboard-page .bd-shipClose:hover {
background: rgba(255,255,255,0.55);
}
.buyer-dashboard-page .bd-shipGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.buyer-dashboard-page .bd-field {
display: grid;
gap: 6px;
}
.buyer-dashboard-page .bd-field span {
font-size: 12.5px;
font-weight: 800;
color: rgba(95, 78, 60, 0.65);
}
.buyer-dashboard-page .bd-field input,
.buyer-dashboard-page .bd-field select {
width: 100%;
padding: 11px 12px;
border-radius: 16px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.45);
font: inherit;
color: rgba(70,55,40,0.90);
outline: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
}
.buyer-dashboard-page .bd-field input:focus,
.buyer-dashboard-page .bd-field select:focus {
border-color: rgba(140,110,80,0.18);
background: rgba(255,255,255,0.58);
}
.buyer-dashboard-page .bd-field--full {
grid-column: 1 / -1;
}
.buyer-dashboard-page .bd-shipActions {
margin-top: 12px;
display: flex;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.buyer-dashboard-page .bd-shipSaved {
margin-top: 10px;
font-size: 12.5px;
color: rgba(95, 78, 60, 0.62);
animation: bdPop 380ms ease;
}
/* responsive */
@media (max-width: 980px) {
.buyer-dashboard-page .bd-shipGrid {
grid-template-columns: 1fr;
}
}
/* ==========================================================
Buyer Dashboard — Orders pagination (marketplace style)
========================================================== */
.buyer-dashboard-page .bd-pagination {
margin-top: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.buyer-dashboard-page .bd-pages {
display: flex;
gap: 10px;
align-items: center;
}
.buyer-dashboard-page .bd-pageBtn {
border-radius: 999px;
padding: 10px 16px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.40);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
cursor: pointer;
font: inherit;
font-weight: 800;
color: rgba(95, 78, 60, 0.78);
}
.buyer-dashboard-page .bd-pageBtn:hover {
background: rgba(255,255,255,0.58);
border-color: rgba(140,110,80,0.16);
}
.buyer-dashboard-page .bd-pageBtn[disabled] {
opacity: .45;
cursor: not-allowed;
}
.buyer-dashboard-page .bd-pageBtn--num {
width: 44px;
height: 44px;
padding: 0;
display: inline-flex;
justify-content: center;
align-items: center;
}
.buyer-dashboard-page .bd-pageBtn.is-active {
background: rgba(160,120,80,0.26);
border-color: rgba(140,110,80,0.18);
color: rgba(70, 55, 40, 0.90);
}
.buyer-dashboard-page .bd-pageBtn--nav {
min-width: 140px;
}
/* subtle page transition */
.buyer-dashboard-page .bd-orderList.is-fading {
opacity: 0;
transform: translateY(6px);
transition: opacity 180ms ease, transform 180ms ease;
}
.buyer-dashboard-page .bd-orderList {
transition: opacity 220ms ease, transform 220ms ease;
}
/* ==========================================================
SAVED ITEMS PAGE — premium grid + seller sticker
========================================================== */
.saved-items-page .si-title {
color: rgba(95, 78, 60, 0.86);
font-weight: 600;
}
.saved-items-page .si-sub {
color: rgba(95, 78, 60, 0.62);
}
/* Header right */
.saved-items-page .si-headRight {
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}
.saved-items-page .si-pills {
display:flex;
gap:10px;
flex-wrap:wrap;
}
.saved-items-page .si-pill {
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
border:1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.35);
font-weight:800;
font-size:12.5px;
color: rgba(95,78,60,0.76);
}
/* Cards */
.saved-items-page .si-card {
border-radius: 26px;
background: rgba(255,255,255,0.34);
border: 1px solid rgba(140,110,80,0.12);
box-shadow: 0 22px 50px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.62);
backdrop-filter: blur(6px);
}
.saved-items-page .si-searchCard {
padding: 16px;
margin-bottom: 16px;
}
.saved-items-page .si-searchRow {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}
/* Search */
.saved-items-page .si-search {
flex: 1;
min-width: 260px;
display:flex;
align-items:center;
gap:10px;
border-radius:999px;
border:1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.35);
padding: 10px 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
}
.saved-items-page .si-searchIcon {
opacity:.55;
}
.saved-items-page .si-search input {
width:100%;
border:0;
outline:0;
background:transparent;
font:inherit;
color: rgba(70,55,40,0.90);
}
/* Clear */
.saved-items-page .si-clear {
background:transparent;
border:0;
cursor:pointer;
font-weight:900;
color: rgba(120, 95, 70, 0.70);
padding: 10px 6px;
}
.saved-items-page .si-clear:hover {
color: rgba(120, 95, 70, 0.95);
}
/* Filters */
.saved-items-page .si-filters {
margin-top: 12px;
display:flex;
gap: 12px;
flex-wrap:wrap;
}
.saved-items-page .si-filter select {
border-radius:999px;
border:1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.35);
padding: 10px 14px;
font:inherit;
font-weight: 800;
color: rgba(95,78,60,0.76);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
}
/* Grid wrapper */
.saved-items-page .si-gridCard {
padding: 16px;
}
.saved-items-page .si-grid {
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
transition: opacity 220ms ease, transform 220ms ease;
}
.saved-items-page .si-grid.is-fading {
opacity: 0;
transform: translateY(6px);
}
/* Item card */
.saved-items-page .si-item {
border-radius: 26px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.32);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.saved-items-page .si-item:hover {
transform: translateY(-2px);
background: rgba(255,255,255,0.44);
border-color: rgba(140,110,80,0.16);
box-shadow: 0 18px 40px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.62);
}
/* Media + seller pill (Option A) */
.saved-items-page .si-media {
position: relative;
padding: 12px;
}
.saved-items-page .si-photo {
height: 170px;
border-radius: 22px;
border: 1px solid rgba(140,110,80,0.12);
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.12));
}
.saved-items-page .si-photo--2 {
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.10));
}
.saved-items-page .si-photo--3 {
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.14));
}
.saved-items-page .si-photo--4 {
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.11));
}
.saved-items-page .si-photo--5 {
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.09));
}
.saved-items-page .si-photo--6 {
background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.15));
}
.saved-items-page .si-sellerPill {
position:absolute;
top: 18px;
left: 18px;
z-index: 2;
display:inline-flex;
align-items:center;
gap:8px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.14);
background: rgba(255,255,255,0.55);
color: rgba(95,78,60,0.80);
font-weight: 900;
font-size: 12.5px;
box-shadow: 0 10px 26px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.65);
backdrop-filter: blur(6px);
transition: transform .16s ease, background .16s ease, opacity .16s ease;
}
.saved-items-page .si-verify {
opacity: .65;
}
/* subtle “focus” on pill when hovering card */
.saved-items-page .si-item.is-hovered .si-sellerPill {
transform: translateY(-1px);
background: rgba(255,255,255,0.68);
}
/* Body */
.saved-items-page .si-body {
padding: 0 14px 14px;
}
.saved-items-page .si-name {
margin: 4px 0 6px;
font-family: "Playfair Display", serif;
font-weight: 600;
font-size: 18px;
color: rgba(95,78,60,0.86);
}
.saved-items-page .si-price {
font-weight: 800;
color: rgba(95,78,60,0.76);
margin-bottom: 10px;
}
/* tags */
.saved-items-page .si-tags {
display:flex;
gap: 8px;
flex-wrap:wrap;
margin-bottom: 12px;
}
.saved-items-page .si-tag {
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.38);
font-weight: 800;
font-size: 12px;
color: rgba(95,78,60,0.70);
}
/* Actions */
.saved-items-page .si-actions {
display:flex;
gap: 10px;
align-items:center;
justify-content: space-between;
flex-wrap:wrap;
}
.saved-items-page .si-view {
padding: 10px 16px;
border-radius: 999px;
}
.saved-items-page .si-remove {
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.28);
color: rgba(95,78,60,0.70);
border-radius: 999px;
padding: 10px 14px;
cursor:pointer;
font: inherit;
font-weight: 800;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
}
.saved-items-page .si-remove:hover {
background: rgba(255,255,255,0.50);
}
/* Corner availability pills */
.saved-items-page .si-cornerPill {
position:absolute;
top: 14px;
right: 14px;
padding: 7px 10px;
border-radius: 999px;
font-weight: 900;
font-size: 12px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.55);
color: rgba(95,78,60,0.74);
box-shadow: 0 10px 26px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.65);
}
.saved-items-page .si-cornerPill--sold {
background: rgba(140,110,80,0.16);
}
.saved-items-page .si-cornerPill--reserved {
background: rgba(255,255,255,0.42);
}
/* Note lines */
.saved-items-page .si-metaNote {
margin: -2px 0 12px;
font-size: 12.5px;
color: rgba(95,78,60,0.62);
}
.saved-items-page .si-savedAgo {
position:absolute;
bottom: 18px;
right: 18px;
font-size: 12.5px;
color: rgba(95,78,60,0.60);
background: rgba(255,255,255,0.45);
border: 1px solid rgba(140,110,80,0.10);
border-radius: 999px;
padding: 6px 10px;
backdrop-filter: blur(6px);
}
/* Removing animation */
.saved-items-page .si-item.is-removing {
opacity: .0;
transform: translateY(8px);
transition: opacity .22s ease, transform .22s ease;
}
/* Empty */
.saved-items-page .si-empty {
margin-top: 10px;
padding: 22px;
border-radius: 24px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.28);
text-align:center;
}
.saved-items-page .si-emptyTitle {
font-family:"Playfair Display", serif;
font-weight: 600;
font-size: 22px;
color: rgba(95,78,60,0.86);
}
.saved-items-page .si-emptyText {
margin: 8px 0 14px;
color: rgba(95,78,60,0.62);
}
/* Pagination */
.saved-items-page .si-pagination {
margin-top: 16px;
display:flex;
align-items:center;
justify-content:center;
gap: 12px;
flex-wrap:wrap;
}
.saved-items-page .si-pages {
display:flex;
gap: 10px;
align-items:center;
}
.saved-items-page .si-pageBtn {
border-radius:999px;
padding: 10px 16px;
border:1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.40);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.60);
cursor:pointer;
font: inherit;
font-weight: 800;
color: rgba(95,78,60,0.78);
}
.saved-items-page .si-pageBtn:hover {
background: rgba(255,255,255,0.58);
border-color: rgba(140,110,80,0.16);
}
.saved-items-page .si-pageBtn[disabled] {
opacity:.45;
cursor:not-allowed;
}
.saved-items-page .si-pageBtn--num {
width: 44px;
height: 44px;
padding: 0;
display:inline-flex;
justify-content:center;
align-items:center;
}
.saved-items-page .si-pageBtn.is-active {
background: rgba(160,120,80,0.26);
border-color: rgba(140,110,80,0.18);
color: rgba(70,55,40,0.90);
}
.saved-items-page .si-pageBtn--nav {
min-width: 140px;
}
/* Toast */
.saved-items-page .si-toast {
position: fixed;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
display:flex;
align-items:center;
gap: 14px;
padding: 12px 14px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.14);
background: rgba(255,255,255,0.72);
color: rgba(95,78,60,0.78);
font-weight: 800;
box-shadow: 0 24px 60px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.62);
backdrop-filter: blur(10px);
z-index: 999;
}
.saved-items-page .si-toast.is-in {
animation: siToastIn 220ms ease;
}
@keyframes siToastIn {
from {
opacity:0;
transform: translateX(-50%) translateY(10px);
}
to {
opacity:1;
transform: translateX(-50%) translateY(0);
}
}
.saved-items-page .si-toastUndo {
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(160,120,80,0.20);
padding: 8px 12px;
cursor:pointer;
font: inherit;
font-weight: 900;
color: rgba(70,55,40,0.90);
}
.saved-items-page .si-toastUndo:hover {
background: rgba(160,120,80,0.28);
}
/* Responsive columns */
@media (min-width: 1220px) {
.saved-items-page .si-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 980px) {
.saved-items-page .si-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.saved-items-page .si-grid {
grid-template-columns: 1fr;
}
.saved-items-page .si-pageBtn--nav {
min-width: 120px;
}
}
/* Screen reader helper */
.sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip: rect(0,0,0,0);
white-space:nowrap;
border:0;
}
/* --- FIX: prevent seller pill & status pill overlap --- */
/* 1) Make media a "safe zone" with padding */
.saved-items-page .si-media {
padding-top: 44px;
}
/* 2) Keep seller pill in top-left */
.saved-items-page .si-sellerPill {
top: 14px;
left: 14px;
}
/* 3) Keep corner status in top-right but aligned to same padding */
.saved-items-page .si-cornerPill {
top: 14px;
right: 14px;
}
/* 4) If the card is narrow, force the status pill to drop UNDER the top row */
@media (max-width: 620px) {
.saved-items-page .si-media {
padding-top: 64px;
}
.saved-items-page .si-cornerPill {
top: 46px;
right: 14px;
}
}
/* If overlap detected, drop status pill below */
.saved-items-page .si-cornerPill--stacked {
top: 46px !important;
}
/* ==========================================================
TERMS PAGE — premium layout
========================================================== */
.terms-page .legal-wrap {
max-width: 1120px;
margin: 0 auto;
padding: 36px 18px 80px;
}
/* HERO */
.terms-page .legal-hero {
margin-top: 18px;
border-radius: 28px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.30);
box-shadow: 0 22px 60px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.60);
backdrop-filter: blur(8px);
padding: 22px;
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 18px;
}
.terms-page .legal-hero h1 {
font-family: "Playfair Display", serif;
font-weight: 600;
font-size: clamp(34px, 4vw, 52px);
color: rgba(95,78,60,0.86);
margin: 0 0 8px;
}
.terms-page .legal-hero__sub {
color: rgba(95,78,60,0.62);
margin: 0 0 14px;
line-height: 1.6;
}
.terms-page .legal-hero__meta {
display:flex;
flex-wrap:wrap;
gap: 10px;
margin-bottom: 14px;
}
.terms-page .legal-chip {
display:inline-flex;
align-items:center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.35);
color: rgba(95,78,60,0.70);
font-weight: 700;
font-size: 12.5px;
}
.terms-page .legal-hero__actions {
display:flex;
gap: 10px;
flex-wrap:wrap;
}
.terms-page .legal-callout {
border-radius: 22px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.28);
padding: 16px;
}
.terms-page .legal-callout__title {
font-family: "Playfair Display", serif;
font-weight: 600;
color: rgba(95,78,60,0.86);
margin-bottom: 8px;
}
.terms-page .legal-callout__list {
margin: 0;
padding-left: 18px;
color: rgba(95,78,60,0.68);
line-height: 1.65;
}
/* LAYOUT */
.terms-page .legal-layout {
margin-top: 18px;
display: grid;
grid-template-columns: 320px 1fr;
gap: 16px;
align-items: start;
}
.terms-page .legal-side {
position: sticky;
top: 16px;
}
.terms-page .legal-side__card {
border-radius: 26px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.30);
box-shadow: 0 18px 46px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.60);
backdrop-filter: blur(8px);
padding: 16px;
}
.terms-page .legal-side__title {
font-family: "Playfair Display", serif;
font-weight: 600;
color: rgba(95,78,60,0.86);
margin-bottom: 10px;
}
.terms-page .legal-toc {
display:flex;
flex-direction:column;
gap: 6px;
}
.terms-page .legal-toc__link {
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.24);
color: rgba(95,78,60,0.72);
font-weight: 700;
text-decoration: none;
}
.terms-page .legal-toc__link:hover {
background: rgba(255,255,255,0.42);
}
.terms-page .legal-toc__link.is-active {
background: rgba(160,120,80,0.22);
color: rgba(70,55,40,0.90);
border-color: rgba(140,110,80,0.16);
}
.terms-page .legal-topLink {
display:inline-flex;
margin-top: 12px;
color: rgba(95,78,60,0.70);
font-weight: 800;
text-decoration: none;
}
/* mobile toc */
.terms-page .legal-tocToggle {
display:none;
}
.terms-page .legal-tocToggle summary {
cursor:pointer;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.24);
color: rgba(95,78,60,0.72);
font-weight: 800;
margin-bottom: 10px;
}
/* CONTENT sections as cards */
.terms-page .legal-main {
border-radius: 28px;
border: 1px solid rgba(140,110,80,0.12);
background: rgba(255,255,255,0.28);
box-shadow: 0 22px 60px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.60);
backdrop-filter: blur(8px);
padding: 16px;
}
.terms-page .legal-section {
border-radius: 22px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.24);
padding: 18px;
margin-bottom: 12px;
}
.terms-page .legal-section h2 {
font-family: "Playfair Display", serif;
font-weight: 600;
color: rgba(95,78,60,0.86);
margin: 0 0 8px;
}
.terms-page .legal-section p,
.terms-page .legal-section li {
color: rgba(95,78,60,0.68);
line-height: 1.75;
}
.terms-page .legal-list {
padding-left: 18px;
margin: 8px 0 0;
}
.terms-page .legal-note {
margin-top: 10px;
padding: 12px 14px;
border-radius: 18px;
border: 1px solid rgba(140,110,80,0.10);
background: rgba(255,255,255,0.32);
color: rgba(95,78,60,0.68);
}
/* bottom bar */
.terms-page .legal-bottomBar {
display:flex;
justify-content:space-between;
gap: 10px;
flex-wrap:wrap;
padding: 10px 2px 2px;
}
/* Responsive */
@media (max-width: 980px) {
.terms-page .legal-hero {
grid-template-columns: 1fr;
}
.terms-page .legal-layout {
grid-template-columns: 1fr;
}
.terms-page .legal-side {
position: relative;
top: auto;
}
.terms-page .legal-toc--desktop {
display:none;
}
.terms-page .legal-tocToggle {
display:block;
}
}
/* Print friendly */
@media print {
.nav, .site-footer, .legal-side, .legal-hero__actions {
display:none !important;
}
.terms-page .legal-hero, .terms-page .legal-main, .terms-page .legal-section {
box-shadow:none !important;
background:#fff !important;
border:1px solid #ddd !important;
}
}
/* ==========================================================
TERMS — polishing pass (buttons, links, chips, dividers)
========================================================== */
.terms-page {
--ink: rgba(95,78,60,.86);
--ink2: rgba(95,78,60,.70);
--ink3: rgba(95,78,60,.58);
--line: rgba(140,110,80,.14);
--line2: rgba(140,110,80,.10);
--glass: rgba(255,255,255,.30);
--glass2: rgba(255,255,255,.22);
--gold: rgba(173,134,88,.55);
}
/* Fix default blue links inside legal content */
.terms-page a {
color: var(--ink2);
text-decoration: none;
font-weight: 700;
}
.terms-page a:hover {
text-decoration: underline;
text-underline-offset: 3px;
opacity: .95;
}
/* Ensure hero card feels premium */
.terms-page .legal-hero {
border: 1px solid var(--line);
}
/* Hairline divider utility (gold-ish, super subtle) */
.terms-page .legal-divider {
height: 1px;
width: 100%;
background: linear-gradient(90deg,
rgba(0,0,0,0),
var(--gold),
rgba(0,0,0,0)
);
opacity: .55;
}
/* Put dividers inside hero */
.terms-page .legal-hero__meta {
position: relative;
padding-bottom: 14px;
}
.terms-page .legal-hero__meta::after {
content:"";
display:block;
margin-top: 14px;
height: 1px;
background: linear-gradient(90deg, rgba(0,0,0,0), var(--gold), rgba(0,0,0,0));
opacity: .50;
}
/* Chips refinement */
.terms-page .legal-chip {
border: 1px solid var(--line2);
background: rgba(255,255,255,.38);
color: var(--ink2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.60);
}
/* Buttons: force them to not look like browser defaults */
.terms-page .sd-btn,
.terms-page .sd-btn:visited {
-webkit-appearance: none;
appearance: none;
border: 1px solid var(--line);
background: rgba(255,255,255,.38);
color: var(--ink);
border-radius: 999px;
padding: 10px 14px;
font-weight: 800;
text-decoration: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 10px 26px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.65);
transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.terms-page .sd-btn:hover {
transform: translateY(-1px);
background: rgba(255,255,255,.52);
box-shadow: 0 14px 34px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.70);
}
.terms-page .sd-btn--soft {
background: rgba(255,255,255,.28);
}
/* Content: headings + spacing feel more “editorial” */
.terms-page .legal-section {
border: 1px solid var(--line2);
}
.terms-page .legal-section h2 {
letter-spacing: .2px;
}
/* Section divider between cards (adds that premium rhythm) */
.terms-page .legal-section + .legal-section {
position: relative;
margin-top: 14px;
}
.terms-page .legal-section + .legal-section::before {
content:"";
display:block;
height: 1px;
background: linear-gradient(90deg, rgba(0,0,0,0), var(--gold), rgba(0,0,0,0));
opacity: .40;
margin: -14px 10px 14px;
}
/* Optional: make the intro paragraph more elegant */
.terms-page .legal-section#intro p {
font-size: 15.5px;
color: var(--ink2);
}
/* ===============================
Terms & Conditions – Title tweak
=============================== */
/* FORCE override for the Terms hero title */
.terms-page .legal-hero h1 {
font-size: clamp(26px, 4vw, 36px) !important;
line-height: 1.15;
}