/* Import Premium Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Bodoni+Moda:wght@600;700&family=Lato:wght@400;500;600;700&display=swap");
/* Georgian script fonts */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Georgian:wght@400;600;700&display=swap");
/* BPG Nino (CDN) */
@import url("https://cdn.web-fonts.ge/fonts/bpg-nino/css/bpg-nino.min.css");
/* Georgian mode: use Playfair Display serif for Georgian texts */
body.lang-ka [data-ka] {
font-family: "Playfair Display", "Noto Serif Georgian", Georgia, serif !important;
font-weight: 500 !important;
letter-spacing: 1px !important;
}
/* Georgian mode: headings also use Playfair Display */
body.lang-ka h1[data-ka],
body.lang-ka h2[data-ka],
body.lang-ka h3[data-ka] {
font-family: "Playfair Display", "Noto Serif Georgian", Georgia, serif !important;
font-weight: 500 !important;
letter-spacing: 1px !important;
}
/* Stronger: when Georgian is active, prefer Playfair Display by default */
body.lang-ka {
font-family: "Playfair Display", "Noto Serif Georgian", Georgia, serif !important;
font-weight: 500 !important;
letter-spacing: 1px !important;
}
/* Theme tokens for the beige/dark-chocolate look */
:root {
--choco-900: #1b110b;
--choco-850: #2a1911;
--choco-800: #23140e;
--copper-600: #8b5b43;
--copper-500: #b37a56;
--gold-400: #d9b56b;
--beige-100: #f7efe4;
--beige-150: #eadfc9;
--white: #ffffff;
}
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Cormorant Garamond", "Georgia", serif;
line-height: 1.7;
color: #3c2415;
background: var(--choco-900);
font-weight: 400;
letter-spacing: 0.3px;
overflow-x: hidden;
}
/* Premium Typography */
h1,
h2,
h3 {
font-family: "Playfair Display", serif;
font-weight: 600;
letter-spacing: -0.8px;
line-height: 1.2;
text-shadow: 0 2px 4px rgba(92, 51, 23, 0.08);
}
h1 {
font-size: clamp(2.8rem, 5.5vw, 4.5rem);
font-weight: 700;
letter-spacing: -1.2px;
}
h2 {
font-size: clamp(2.2rem, 4.2vw, 3.5rem);
margin-bottom: 2.5rem;
font-weight: 600;
}
h3 {
font-size: clamp(1.6rem, 3.2vw, 2.2rem);
font-weight: 600;
}
p {
font-family: "Cormorant Garamond", serif;
font-size: 1.15rem;
line-height: 1.8;
font-weight: 400;
color: #5c3317;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
/* Reusable cards and buttons for account pages */
.dashboard-card { background: rgba(255,255,255,0.9); border: 1px solid rgba(230,211,163,0.35); border-radius: 18px; box-shadow: 0 12px 40px rgba(92,51,23,0.08); overflow: hidden; }
.card-header { display:flex; align-items:center; justify-content:space-between; padding: 16px 20px; border-bottom:1px solid rgba(230,211,163,0.3); }
.card-header h3 { margin:0; }
.btn-primary { background: linear-gradient(135deg, #e6d3a3 0%, #d9c089 100%); color:#3c2415; border:none; border-radius: 12px; padding: 10px 14px; cursor:pointer; transition:.25s; font-weight:600; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(230,211,163,0.35); }
.btn-sm { padding: 8px 10px; border-radius: 10px; font-size: 0.95rem; }
.btn-outline { background: transparent; border: 1px solid rgba(230,211,163,0.5); color:#3c2415; border-radius: 12px; padding: 10px 14px; }
input, select { background: #fffdf8; border: 1px solid rgba(230,211,163,0.55); border-radius: 12px; padding: 10px 12px; outline: none; }
input:focus, select:focus { border-color: #e6d3a3; box-shadow: 0 0 0 3px rgba(230,211,163,0.25); }
.form-row { display:flex; gap: 12px; }
.form-message { margin: 10px 0; padding: 10px 12px; border-radius: 12px; font-size: 0.98rem; }
.form-message.success { background: #e9f8ef; color:#166534; border:1px solid #bbf7d0; }
.form-message.error { background: #fdecec; color:#7f1d1d; border:1px solid #fecaca; }
.muted { color:#6f4e37; opacity:.75; }
/* Address book */
.address-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap: 22px; padding: 16px; }
.address-column { display:flex; flex-direction:column; gap:16px; }
.address-list { display:grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.address-card { position:relative; background:#fffdf8; border:1px solid rgba(230,211,163,0.55); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px; transition:.25s; }
.address-card:hover { box-shadow: 0 12px 30px rgba(92,51,23,0.08); transform: translateY(-1px); }
.address-head { display:flex; align-items:center; gap:10px; }
.address-icon { width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,#f5efde,#ecd8a8); border:1px solid rgba(230,211,163,0.6); display:flex; align-items:center; justify-content:center; color:#000000; }
.address-name { font-weight:700; letter-spacing:.2px; }
.address-text { color:#000000; line-height:1.5; }
.address-actions { display:flex; align-items:center; gap:8px; margin-top:6px; }
.badge { background:#f5efe2; color:#7a5a2e; padding:4px 8px; border-radius:999px; font-size:.85rem; border:1px solid rgba(230,211,163,0.6); }
.badge.default { background:#e9f8ef; color:#166534; border-color:#bbf7d0; }
.address-empty { background:#fffdf8; border:1px dashed rgba(230,211,163,0.6); border-radius:16px; padding:16px; text-align:center; }
.address-empty { text-align:left; }
.address-empty .title { font-weight:700; margin-bottom:4px; }
.add-address .section-title { font-weight:700; padding: 16px 20px; border-bottom:1px solid rgba(230,211,163,0.3); display:flex; align-items:center; gap:8px; }
@media (max-width: 1024px){ .address-grid { grid-template-columns: 1fr; } }
/* Payment methods (reuse address styles) */
.payment-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap: 22px; padding: 16px; }
.payment-column { display:flex; flex-direction:column; gap:16px; }
.pm-list { display:grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.pm-card { position:relative; background:linear-gradient(135deg,#fffdf8,#f7f0e1); border:1px solid rgba(230,211,163,0.55); border-radius:16px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; box-shadow:0 10px 28px rgba(92,51,23,0.06); transition:.25s; }
.pm-card:hover { transform: translateY(-1px); box-shadow:0 14px 36px rgba(92,51,23,0.1); }
.pm-card .pm-left { display:flex; align-items:flex-start; gap:14px; }
.pm-card .brand-chip { padding:6px 10px; border-radius:10px; font-weight:700; font-size:.9rem; color:#2b1a0b; border:1px solid rgba(230,211,163,0.6); background:#f5efe2; min-width:66px; text-align:center; }
.pm-card .number { font-weight:700; letter-spacing:1px; color:#000000; }
.pm-card .label { color:#6f4e37; opacity:.8; font-size:.95rem; margin-top:2px; }
.pm-card .meta { display:flex; flex-direction:column; }
.pm-card .actions { display:flex; gap:8px; }
/* Brand themes */
.pm-card.pm-visa .brand-chip { background:#eef5ff; border-color:#c7dafe; color:#1e3a8a; }
.pm-card.pm-mastercard .brand-chip { background:#fff1f2; border-color:#fecaca; color:#7f1d1d; }
.pm-card.pm-amex .brand-chip { background:#ecfeff; border-color:#a5f3fc; color:#155e75; }
.pm-card.pm-discover .brand-chip { background:#fff7ed; border-color:#fed7aa; color:#7c2d12; }
/* Accepted brands row */
.brand-accept { display:flex; align-items:center; gap:8px; }
.brand-chip.small { padding:4px 8px; border-radius:8px; border:1px solid rgba(230,211,163,0.6); background:#f5efe2; font-size:.85rem; font-weight:700; }
.brand-chip.small[data-brand="visa"] { background:#eef5ff; border-color:#c7dafe; color:#1e3a8a; }
.brand-chip.small[data-brand="mastercard"] { background:#fff1f2; border-color:#fecaca; color:#7f1d1d; }
.brand-chip.small[data-brand="amex"] { background:#ecfeff; border-color:#a5f3fc; color:#155e75; }
.brand-chip.small[data-brand="discover"] { background:#fff7ed; border-color:#fed7aa; color:#7c2d12; }
@media (max-width: 1024px){ .payment-grid { grid-template-columns: 1fr; } }
/* Map picker */
.map-wrap { border:1px solid rgba(230,211,163,0.55); border-radius:16px; overflow:hidden; background:#fffdf8; }
.map { width:100%; height: 280px; }
.list-header { padding: 0 4px; display:flex; justify-content:flex-end; }
.actions.center { justify-content:center; }
/* Orders */
.orders-list .order-item { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px dashed rgba(230,211,163,0.35); }
.order-status { padding:6px 10px; border-radius:999px; font-size:0.9rem; background: #f5efe2; }
.order-status.delivered { background:#e9f8ef; color:#166534; }
.order-status.processing { background:#f5f2ed; color:#7a5a2e; }
/* Favorites */
.favorites-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(340px,1fr)); gap:20px; }
#favoritesGrid, #favList { display:grid; grid-template-columns: repeat(auto-fill,minmax(340px,1fr)); gap:20px; width:100%; }
/* Center the two favorites on account dashboard */
#favoritesGrid { justify-content: center; }
@media (min-width: 821px){
/* Use fixed card widths and center when there are 1–2 items */
#favoritesGrid { grid-template-columns: repeat(auto-fit, minmax(320px, 320px)); }
}
@media (max-width: 640px){
#favoritesGrid { grid-template-columns: 1fr; }
}
@media (max-width: 640px){
.favorites-grid, #favoritesGrid, #favList { grid-template-columns: 1fr; }
}
.favorites-grid > * { width: 100%; }
.favorite-item { background: linear-gradient(135deg,#fffdf8,#f7f0e5); border:1px solid rgba(230,211,163,0.35); border-radius:14px; padding:14px 16px; display:flex; align-items:center; gap:14px; min-height: 88px; transition: box-shadow .25s, transform .2s, border-color .2s; }
.favorite-item:hover { box-shadow: 0 14px 36px rgba(92,51,23,.10); border-color: rgba(230,211,163,0.55); transform: translateY(-1px); }
.fav-thumb { width:72px; height:72px; border-radius:12px; background:linear-gradient(135deg,#fff,#faf6ee); border:1px solid rgba(230,211,163,0.45); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.fav-thumb img { width:100%; height:100%; object-fit:cover; object-position:50% 55%; display:block; border-radius:0 !important; }
.favorites-grid .favorite-item img { border-radius:0 !important; }
.favorites-page-grid .favorite-item img { border-radius:0 !important; }
.favorite-item .fav-body { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; width:100%; }
.favorite-item .fav-meta { display:flex; flex-direction:column; gap:8px; min-width:0; }
.favorite-item .fav-title { font-family: "Playfair Display", serif; font-weight:600; color:#000000; line-height: 1.2; letter-spacing:-0.2px; font-size: 1.06rem; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; text-overflow:ellipsis; }
.favorite-item .fav-price { font-weight:700; color:#000; white-space:nowrap; }
.favorite-item .fav-actions { display:flex; gap:8px; }
.favorite-item .btn-outline { padding:6px 10px; border-radius:10px; font-size:.9rem; }
/* Strong, scoped skin for the View All page to avoid old rules fighting */
.favorites-skin .favorite-item { background: linear-gradient(135deg,#fffdf8,#f7f0e5) !important; border:1px solid rgba(230,211,163,0.45) !important; border-radius:14px !important; padding:16px !important; gap:16px !important; min-height:96px !important; }
.favorites-skin .fav-thumb { width:80px !important; height:80px !important; border-radius:12px !important; background:#fff !important; border:1px solid rgba(230,211,163,0.5) !important; overflow:hidden !important; }
.favorites-skin .fav-thumb img { width:100% !important; height:100% !important; object-fit:cover !important; object-position:50% 55% !important; border-radius:0 !important; display:block !important; }
.favorites-skin .fav-body { display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:14px !important; width:100% !important; }
.favorites-skin .fav-meta { gap:8px !important; }
.favorites-skin .fav-title { font-family:"Playfair Display", serif !important; font-weight:600 !important; font-size:1.08rem !important; color:#000000 !important; line-height:1.25 !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; }
.favorites-skin .fav-price { font-weight:700 !important; color:#000 !important; white-space:nowrap !important; }
.favorites-skin .fav-actions { display:flex !important; gap:10px !important; }
.favorites-skin .btn-outline { padding:8px 12px !important; border-radius:10px !important; }
.favorite-item .btn-primary { flex-shrink: 0; }
@media (max-width: 768px){ .form-row{flex-direction:column;} }
/* Settings pages layout */
.settings-card { padding-bottom: 10px; }
.settings-page-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:stretch; }
.settings-page-grid > .settings-card { height:100%; display:flex; flex-direction:column; }
.settings-page-grid > .settings-card .settings-form { flex:1; display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; padding: 20px; }
.settings-page-grid > .settings-card .card-header { flex:0 0 auto; }
.settings-page-grid > .settings-card { min-height: 420px; }
.settings-form { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; padding: 20px; }
.settings-form .field-group { display:flex; flex-direction:column; gap:6px; }
.settings-form .field-group label { font-weight:600; }
.settings-form .field-group .help { color:#6f4e37; opacity:.7; font-size:.95rem; }
.settings-form .inline { display:flex; gap:8px; align-items:center; }
.settings-form .span-2 { grid-column: span 2; }
.settings-form .actions { display:flex; align-items:center; gap:10px; }
/* Pretty toggle switch */
.toggle-row { display:flex; align-items:flex-start; gap:14px; }
.toggle-row .title { font-weight:700; color:#000000; }
.switch { position:relative; display:inline-block; width:52px; height:30px; }
.switch input { opacity:0; width:0; height:0; }
.switch-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#eadfc9; transition:.3s; border-radius:999px; border:1px solid rgba(230,211,163,0.7); box-shadow: inset 0 2px 6px rgba(0,0,0,0.06); }
.switch-slider:before { content:""; position:absolute; height:24px; width:24px; left:3px; top:50%; transform:translateY(-50%); background:white; border-radius:50%; transition:.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.switch input:checked + .switch-slider { background:linear-gradient(135deg,#e6d3a3,#d9c089); }
.switch input:checked + .switch-slider:before { transform:translate(22px,-50%); }
/* Profile header */
.profile-header { display:flex; align-items:center; gap:16px; padding:16px 20px; border-bottom:1px solid rgba(230,211,163,0.3); }
.profile-header .avatar { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#f5efde,#ecd8a8); display:flex; align-items:center; justify-content:center; font-weight:700; color:#000000; border:1px solid rgba(230,211,163,0.6); }
.profile-header .who h3 { margin:0; }
.profile-header .who .muted { margin-top:2px; display:block; }
@media (max-width: 820px){
.settings-form { grid-template-columns: 1fr; }
.settings-form .span-2 { grid-column: auto; }
.settings-page-grid { grid-template-columns: 1fr; }
}
/* Navigation */
.navbar {
background: linear-gradient(180deg, #1c120d 0%, #140c08 100%); /* dark chocolate */
backdrop-filter: blur(8px);
box-shadow: 0 10px 40px rgba(0,0,0,0.35);
position: fixed;
top: 0; width: 100%; z-index: 1000;
border-bottom: 1px solid rgba(255,255,255,0.08);
transition: all .4s cubic-bezier(.4,0,.2,1);
position: fixed;
}
/* Thin gold accent line under header (matches other pages) */
.navbar::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(220,201,167,0.7), rgba(0,0,0,0));
pointer-events: none;
}
/* Build-Box: compact step header and box cards */
.build-box-page .steps-header.compact{padding-top:2px;margin:4px 0 8px}
.steps-header.compact .section-badge,.steps-header.compact .section-subtitle{display:none}
.build-box-page .steps-header.compact h2{font-size:32px;line-height:1.12;margin:0 0 8px;font-weight:700;text-align:center;color:#2b2a28;font-family:"Playfair Display",Georgia,serif;letter-spacing:.1px}
.build-box-page .box-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.build-box-page .box-card-grid.three-up{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.build-box-page .box-card-grid.two-up{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.build-box-page .box-card{border:1px solid rgba(211,185,122,.42);border-radius:18px;overflow:hidden;background:#fffef9;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.build-box-page .box-card:before{display:none}
.build-box-page .box-card:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(0,0,0,.08)}
.build-box-page .box-card.selected{border-color:#cda85c;box-shadow:0 0 0 2px rgba(205,168,92,.55) inset}
.build-box-page .box-photo{height:240px;background:#fffaf1;display:flex;align-items:center;justify-content:center;color:#7a6a4a;font-size:14px;border-top-left-radius:18px;border-top-right-radius:18px}
.build-box-page .box-photo.large{height:300px}
.build-box-page .box-photo img{width:100%;height:100%;object-fit:cover;border-top-left-radius:18px;border-top-right-radius:18px}
.build-box-page .box-card-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px}
.build-box-page .box-card-body h4{font-family:"Playfair Display", serif;letter-spacing:.1px;font-weight:700;margin:0;color:#2b2a28;font-size:1.18rem}
.build-box-page .box-card-body p{color:#6a6458;font-size:14.5px;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif}
.build-box-page .choose-box-btn{width:100%;border-color:#cbb784;color:#3a2f16;background:#fffdf6;border-radius:14px;padding:12px 14px}
.build-box-page .choose-box-btn:hover{background:#f4eddc;border-color:#bda86a}
.build-box-page .choose-box-btn.selected{background:#000000;color:#fff;border-color:#000000}
/* Offset page content from fixed navbar */
.account-content { padding-top: 220px; }
.account-hero { padding-top: 220px; }
@media (max-width: 820px){
.account-content, .account-hero { padding-top: 160px; }
}
.nav-container {
max-width: 1600px;
margin: 0 auto;
padding: 0 0.5rem; /* tighter to let actions hug the edge */
display: grid;
grid-template-columns: auto 1fr auto; /* left=logo, middle=links, right=actions */
align-items: center;
height: 100px; /* match main page header height */
}
.nav-logo h2 {
font-family: "Playfair Display", serif;
font-size: 2rem;
font-weight: 700;
background: linear-gradient(135deg, #e6d3a3 0%, #e6d3a3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-decoration: none;
position: relative;
letter-spacing: -1px;
text-shadow: 0 2px 4px rgba(230, 211, 163, 0.1);
margin: 0;
line-height: 1;
}
/* Image logo support */
.nav-logo { grid-column: 1; }
.nav-links { grid-column: 2; justify-self: center; }
.nav-actions { grid-column: 3; justify-self: end; }
.nav-logo img { margin-right:0; height:96px; width:auto; display:block; }
/* Responsive navbar sizing for logo */
@media (max-width: 820px){
.nav-container { height: 72px; padding: 0 .25rem; }
.nav-logo img { height: 56px; }
}
/* Nudge profile sections below nav */
.account-content .settings-page-grid { margin-top: 24px; }
.nav-logo h2::after {
content: "";
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #e6d3a3, #e6d3a3);
transform: scaleX(0);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2px;
}
.nav-logo:hover h2::after {
transform: scaleX(1);
}
.nav-menu { display:flex; list-style:none; gap:2.2rem; align-items:center; }
.nav-links { justify-content: center; }
.nav-actions { display:flex; align-items:center; gap:1rem; justify-self: end; margin-left:auto; }
/* Nudge header content slightly upward for perfect visual centering */
.navbar .nav-logo,
.navbar .nav-links,
.navbar .nav-actions { transform: translateY(-6px); }
/* Unify vertical centering for logo, links, actions */
.nav-logo img { height: 84px; display:block; }
.nav-menu a { padding: 0.6rem 1.1rem; line-height: 1; display: inline-flex; align-items: center; }
.lang-btn { padding: 0.6rem 1.4rem; line-height: 1; }
.cart-icon { line-height: 1; }
.nav-menu a {
color: #DCC9A7; /* beige links */
text-decoration: none;
font-weight: 700;
font-family: "Bodoni Moda", "Inter", serif;
font-size: 1rem;
letter-spacing: 0.6px;
text-transform: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
padding: 1rem 1.5rem;
border-radius: 12px;
}
.nav-menu a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(230, 211, 163, 0.12),
rgba(230, 211, 163, 0.12)
);
border-radius: 12px;
opacity: 0;
transform: scale(0.85);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-menu a:hover::before {
opacity: 1;
transform: scale(1);
}
.nav-menu a:hover {
color: #d9b56b; /* gold on hover */
transform: translateY(-1px);
}
/* Cart icon in header: use same text color as links */
.navbar .cart-icon,
.navbar .cart-icon i { color: #DCC9A7 !important; }
.navbar .cart-icon:hover,
.navbar .cart-icon:hover i { color: #d9b56b !important; }
/* Remove Products link from all headers */
.nav-menu a[href="products.html"] { display: none !important; }
.language-toggle {
margin-left: 1.5rem;
}
.lang-btn {
background: #DCC9A7; /* beige pill */
color: #140c08;
border: none;
padding: 0.8rem 1.8rem;
border-radius: 35px;
cursor: pointer;
font-weight: 600;
font-family: "Inter", sans-serif;
font-size: 0.95rem;
letter-spacing: 0.8px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.lang-btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.25),
transparent
);
transition: left 0.6s ease;
}
.lang-btn:hover::before {
left: 100%;
}
.lang-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
color: #ffffff;
}
.cart-icon { position: relative; font-size: 1.15rem; line-height: 1; display: inline-block; z-index: 3; }
.cart-icon i { font-size: 1.15rem; line-height: 1; vertical-align: middle; }
#cart-count {
position: absolute;
top: 0;
right: 0;
transform: translate(40%, -40%); /* sit at icon's top-right */
width: 18px;
height: 18px;
padding: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 800;
font-family: "Inter", sans-serif;
background: #DCC9A7; /* beige */
color: #140c08; /* dark chocolate */
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
border: 1px solid rgba(20,16,11,0.25);
}
/* Hero Section */
.hero {
margin-top: 80px;
position: relative;
height: 70vh;
overflow: hidden;
background: linear-gradient(
135deg,
rgba(250, 248, 245, 0.1) 0%,
rgba(245, 241, 235, 0.1) 100%
);
}
/* Home: polish hero controls to match beige/dark-chocolate theme */
body.home .slider-nav button {
background: rgba(230,211,163,0.18) !important;
color: #000000 !important;
border: 1px solid rgba(230,211,163,0.45) !important;
}
body.home .slider-nav button:hover { background: rgba(230,211,163,0.38) !important; }
body.home .slider-dots .dot { background: rgba(230,211,163,0.45) !important; border-color: rgba(230,211,163,0.6) !important; }
body.home .slider-dots .dot.active { background: #e6d3a3 !important; }
/* Mobile/tablet-only overlays are defined in responsive blocks below */
.slider-container {
position: relative;
height: 100%;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Vignette moved to responsive blocks */
.slide.active {
opacity: 1;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
filter: brightness(0.75) contrast(1.15) saturate(1.2);
}
.slide.active img {
transform: scale(1.08);
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
z-index: 2;
max-width: 700px;
padding: 0;
background: none;
backdrop-filter: none;
border-radius: 0;
border: none;
box-shadow: none;
}
.slide-content h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
margin-bottom: 1.5rem;
font-weight: 700;
font-family: "Playfair Display", serif;
text-shadow:
0 4px 12px rgba(0, 0, 0, 0.8),
0 2px 6px rgba(0, 0, 0, 0.6);
letter-spacing: -1px;
line-height: 1.1;
}
.slide-content p {
font-size: 1.3rem;
margin-bottom: 2.5rem;
opacity: 0.95;
font-family: "Cormorant Garamond", serif;
font-weight: 400;
line-height: 1.6;
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.7);
max-width: 600px;
margin-left: auto;
margin-right: auto;
color: rgba(255, 255, 255, 0.95);
}
.cta-btn {
background: linear-gradient(135deg, #e6d3a3 0%, #e6d3a3 100%);
color: #000000;
padding: 1rem 2.5rem;
border: 2px solid transparent;
border-radius: 50px;
font-size: 1rem;
font-weight: 700;
font-family: "Inter", sans-serif;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 2px;
box-shadow:
0 8px 25px rgba(230, 211, 163, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.cta-btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.35),
transparent
);
transition: left 0.7s ease;
}
.cta-btn:hover::before {
left: 100%;
}
.cta-btn:hover {
transform: translateY(-3px);
box-shadow:
0 15px 40px rgba(230, 211, 163, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
border-color: rgba(0, 0, 0, 0.2);
}
.slider-nav button {
background: rgba(230, 211, 163, 0.25);
border: none;
color: #000000;
padding: 20px;
border-radius: 50%;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(15px);
border: 1px solid rgba(0, 0, 0, 0.2);
font-size: 1.2rem;
}
.slider-nav button:hover {
background: rgba(230, 211, 163, 0.8);
transform: scale(1.15);
box-shadow: 0 8px 20px rgba(230, 211, 163, 0.4);
}
.slider-nav {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 3rem;
z-index: 3;
}
.slider-dots {
position: absolute;
bottom: 3rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 1rem;
z-index: 3;
}
.dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(255, 255, 255, 0.6);
}
.dot.active {
background: #daa520;
transform: scale(1.3);
box-shadow: 0 4px 12px rgba(218, 165, 32, 0.6);
}
/* Gift Box Section */
.giftbox-section {
padding: 60px 0;
background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%);
position: relative;
}
.giftbox-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.6;
}
.giftbox-section h2 {
text-align: center;
font-size: clamp(2rem, 3.5vw, 2.8rem);
margin-bottom: 3rem;
color: #2c1810;
font-weight: 600;
font-family: "Playfair Display", serif;
position: relative;
z-index: 2;
}
.giftbox-section h2::after {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, #daa520, #daa520, #8b4513);
border-radius: 2px;
box-shadow: 0 2px 8px rgba(218, 165, 32, 0.4);
}
.giftbox-slider {
display: flex;
justify-content: center;
gap: 2.5rem;
margin-bottom: 3rem;
position: relative;
z-index: 2;
}
.giftbox-card {
background: linear-gradient(135deg, #f7efe4 0%, #eadfc9 100%);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(139, 69, 19, 0.15);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
width: 280px;
border: 2px solid rgba(218, 165, 32, 0.15);
position: relative;
}
.giftbox-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(218, 165, 32, 0.05) 0%,
rgba(184, 134, 11, 0.05) 100%
);
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 25px;
}
.giftbox-card:hover::before {
opacity: 1;
}
.giftbox-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 30px 70px rgba(139, 69, 19, 0.28);
border-color: rgba(218, 165, 32, 0.3);
}
.box-visual {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f5f0e8 0%, #ede4d3 100%);
position: relative;
overflow: hidden;
}
.box-visual::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle at center,
rgba(218, 165, 32, 0.15) 0%,
transparent 70%
);
}
/* Removed old 3D color squares; now using real box images */
.giftbox-section .box-visual {
width: auto;
height: auto;
background: #ffffff;
transform: none;
transform-style: flat;
perspective: none;
padding: 12px 0;
}
.giftbox-section .box-visual::before { display:none; }
.giftbox-section .box-visual:hover { transform: none; }
.giftbox-section .box-visual img {
display:block;
width: 220px;
height: 160px;
object-fit: cover;
transform: none;
box-shadow: none;
border-radius: 14px;
}
/* Consistent featured image sizing */
.giftbox-img{ width:220px; height:160px; object-fit:cover; border-radius:14px; box-shadow:none; }
/* Keep card styling; only the image is plain (no shadows) */
.card-content {
padding: 1.8rem;
text-align: center;
position: relative;
z-index: 2;
}
.card-content h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: #2c1810;
font-weight: 600;
font-family: "Playfair Display", serif;
letter-spacing: -0.5px;
}
.price {
font-size: 2rem;
font-weight: 700;
color: #8b4513;
margin-bottom: 1.2rem;
font-family: "Inter", sans-serif;
text-shadow: 0 2px 4px rgba(139, 69, 19, 0.1);
}
/* Products Section */
.products-section {
padding: 60px 0;
background: linear-gradient(135deg, #faf7f2 0%, #f0e6d2 100%);
position: relative;
}
.products-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.7;
}
.products-section h2 {
text-align: center;
font-size: clamp(2rem, 3.5vw, 2.8rem);
margin-bottom: 3rem;
color: #2c1810;
font-weight: 600;
font-family: "Playfair Display", serif;
position: relative;
z-index: 2;
}
.products-section h2::after {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, #daa520, #daa520, #8b4513);
border-radius: 2px;
box-shadow: 0 2px 8px rgba(218, 165, 32, 0.4);
}
.products-slider {
display: flex;
justify-content: center;
gap: 2.5rem;
margin-bottom: 3rem;
position: relative;
z-index: 2;
}
.product-card {
background: linear-gradient(135deg, #f7efe4 0%, #eadfc9 100%);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(139, 69, 19, 0.12);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
width: 300px;
border: 2px solid rgba(218, 165, 32, 0.12);
position: relative;
}
/* Home overrides: products section background and transparent cards */
body.home .products-section {
background: url('../images/criteriobox1.jpeg') center / cover no-repeat;
}
body.home .products-section::before { display: none; }
body.home .product-card {
background: transparent;
border-color: rgba(255, 255, 255, 0.25);
box-shadow: none;
}
.product-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(218, 165, 32, 0.04) 0%,
rgba(184, 134, 11, 0.04) 100%
);
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 25px;
}
.product-card:hover::before {
opacity: 1;
}
.product-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 25px 60px rgba(139, 69, 19, 0.25);
border-color: rgba(218, 165, 32, 0.25);
}
.product-card .product-image {
position: relative;
overflow: hidden;
height: 200px;
}
.product-card .product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover .product-image img {
transform: scale(1.08);
}
.product-card .image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(44, 24, 16, 0.75);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
}
.product-card:hover .image-overlay {
opacity: 1;
}
.product-card .quick-view-btn {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border: none;
padding: 15px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 20px rgba(210, 105, 30, 0.5);
z-index: 15;
position: relative;
}
.product-card .quick-view-btn:hover {
transform: scale(1.15);
box-shadow: 0 12px 30px rgba(218, 165, 32, 0.7);
}
.product-card .product-content {
padding: 1.8rem;
text-align: center;
position: relative;
z-index: 2;
}
.product-card .product-content h4 {
font-size: 1.5rem;
margin-bottom: 0.8rem;
color: #2c1810;
font-weight: 600;
font-family: "Playfair Display", serif;
letter-spacing: -0.3px;
}
.product-card .product-content .price {
font-size: 1.6rem;
color: #8b4513;
font-weight: 700;
font-family: "Inter", sans-serif;
margin-bottom: 1rem;
}
.product-card .product-content .description {
color: #000000;
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 1.5rem;
font-family: "Cormorant Garamond", serif;
opacity: 0.9;
}
.product-card .product-actions {
display: flex;
gap: 0.8rem;
justify-content: center;
}
.product-card .product-actions button {
flex: 1;
padding: 12px 20px;
font-size: 0.9rem;
border-radius: 25px;
font-weight: 600;
font-family: "Inter", sans-serif;
cursor: pointer;
z-index: 10;
position: relative;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.product-card .product-actions .btn-outline {
background: transparent;
color: #8b4513;
border: 2px solid #d2691e;
}
.product-card .product-actions .btn-outline:hover {
background: #d2691e;
color: white;
transform: translateY(-2px);
}
.product-card .product-actions .btn-primary {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border: none;
box-shadow: 0 4px 15px rgba(210, 105, 30, 0.3);
}
.product-card .product-actions .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(210, 105, 30, 0.5);
}
/* Partners Section */
.partners-section {
padding: 80px 0;
background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%);
position: relative;
}
.partners-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.7;
}
.partners-section .section-header {
text-align: center;
margin-bottom: 4rem;
position: relative;
z-index: 2;
}
.partners-section .section-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
border: 2px solid #d2691e;
padding: 0.8rem 2rem;
border-radius: 50px;
margin-bottom: 2rem;
font-size: 0.9rem;
font-weight: 600;
color: #8b4513;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(210, 105, 30, 0.2);
}
.partners-section h2 {
font-size: clamp(2.2rem, 3.8vw, 3.2rem);
margin-bottom: 1.5rem;
color: #2c1810;
font-weight: 600;
font-family: "Playfair Display", serif;
}
.partners-section .section-header p {
font-size: 1.2rem;
color: #000000;
max-width: 600px;
margin: 0 auto;
opacity: 0.9;
font-family: "Cormorant Garamond", serif;
}
/* Home: partners description line to beige for contrast */
body.home .partners-section .section-header p { color: #e6d3a3 !important; }
/* Home: partners heading text to beige, badge to beige; partner cards text to dark chocolate */
body.home .partners-section h2 { color: #e6d3a3 !important; }
body.home .partners-section .section-badge { color: #e6d3a3 !important; border-color: #e6d3a3 !important; }
body.home .partners-section .section-badge i,
body.home .partners-section .section-badge span { color: #e6d3a3 !important; }
body.home .partners-section .partner-card .partner-info h4,
body.home .partners-section .partner-card .partner-info p,
body.home .partners-section .partner-badge { color: #000000 !important; }
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
position: relative;
z-index: 2;
}
.partner-card {
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 12px 30px rgba(139, 69, 19, 0.12);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(218, 165, 32, 0.1);
text-align: center;
position: relative;
overflow: hidden;
}
.partner-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(218, 165, 32, 0.04) 0%,
rgba(184, 134, 11, 0.04) 100%
);
opacity: 0;
transition: opacity 0.4s ease;
}
.partner-card:hover::before {
opacity: 1;
}
.partner-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 50px rgba(139, 69, 19, 0.2);
border-color: rgba(218, 165, 32, 0.25);
}
.partner-image {
margin-bottom: 1.5rem;
position: relative;
z-index: 2;
}
.partner-image img {
max-width: 150px;
height: 80px;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.partner-card:hover .partner-image img {
transform: scale(1.05);
}
.partner-info {
position: relative;
z-index: 2;
}
.partner-info h4 {
font-size: 1.4rem;
margin-bottom: 0.8rem;
color: #2c1810;
font-weight: 600;
font-family: "Playfair Display", serif;
}
.partner-info p {
color: #000000;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.2rem;
opacity: 0.9;
font-family: "Cormorant Garamond", serif;
}
.partner-badge {
display: inline-block;
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
padding: 0.4rem 1rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: "Inter", sans-serif;
box-shadow: 0 3px 10px rgba(210, 105, 30, 0.3);
}
/* Fancy Footer */
.footer {
background: linear-gradient(135deg, #e6d3a3 0%, #e6d3a3 100%);
color: #000000;
padding: 60px 0 30px;
position: relative;
overflow: hidden;
}
.footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #000000, transparent);
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 3rem;
margin-bottom: 3rem;
position: relative;
z-index: 2;
}
.footer-section:first-child {
padding-right: 2rem;
}
.footer-section h3 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
color: #000000;
font-weight: 600;
font-family: "Playfair Display", serif;
position: relative;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-section h3::after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
width: 30px;
height: 2px;
background: #d2691e;
border-radius: 1px;
}
.contact-info p {
margin-bottom: 0.8rem;
display: flex;
align-items: center;
gap: 10px;
color: #ede6d9;
font-size: 0.95rem;
transition: all 0.3s ease;
font-family: "Inter", sans-serif;
}
.contact-info p:hover {
color: #d2691e;
transform: translateX(3px);
}
.contact-info i {
color: #d2691e;
font-size: 1rem;
width: 16px;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.social-links a {
color: #ede6d9;
font-size: 1.3rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 8px;
border-radius: 50%;
background: rgba(210, 105, 30, 0.1);
border: 1px solid rgba(210, 105, 30, 0.2);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.social-links a:hover {
color: #f5f2ed;
background: #d2691e;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(210, 105, 30, 0.4);
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.6rem;
}
.footer-section ul li a {
color: #ede6d9;
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.95rem;
position: relative;
font-family: "Inter", sans-serif;
display: inline-block;
}
.footer-section ul li a:hover {
color: #d2691e;
padding-left: 8px;
}
.footer-section ul li a::before {
content: "→";
position: absolute;
left: -15px;
opacity: 0;
transition: all 0.3s ease;
color: #d2691e;
font-size: 0.8rem;
}
.footer-section ul li a:hover::before {
opacity: 1;
left: -10px;
}
.newsletter-form {
display: flex;
margin-top: 1.5rem;
border-radius: 25px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.newsletter-form input {
flex: 1;
padding: 12px 16px;
border: none;
background: rgba(245, 242, 237, 0.1);
color: #f5f2ed;
font-size: 0.95rem;
font-family: "Inter", sans-serif;
outline: none;
}
.newsletter-form input::placeholder {
color: rgba(237, 230, 217, 0.7);
}
.newsletter-form button {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border: none;
padding: 12px 20px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
font-family: "Inter", sans-serif;
font-size: 0.9rem;
}
.newsletter-form button:hover {
background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(210, 105, 30, 0.2);
color: rgba(237, 230, 217, 0.8);
font-size: 0.9rem;
position: relative;
z-index: 2;
font-family: "Inter", sans-serif;
}
/* Premium Buttons */
.btn-primary,
.btn-secondary,
.btn-outline {
padding: 18px 35px;
border: none;
border-radius: 35px;
cursor: pointer;
font-size: 1.1rem;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
display: inline-block;
text-align: center;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Inter", sans-serif;
position: relative;
overflow: hidden;
}
.btn-primary {
background: linear-gradient(135deg, #e6d3a3 0%, #e6d3a3 100%);
color: white;
box-shadow: 0 8px 25px rgba(230, 211, 163, 0.4);
}
.btn-primary::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.6s ease;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary:hover {
transform: translateY(-4px);
box-shadow: 0 12px 35px rgba(230, 211, 163, 0.6);
}
/* Secondary button uses the same accent */
.btn-secondary {
background: transparent;
color: #e6d3a3;
border: 2px solid #e6d3a3;
}
.btn-secondary:hover {
background: #e6d3a3;
color: #1b1b1b;
box-shadow: 0 10px 28px rgba(230, 211, 163, 0.45);
transform: translateY(-3px);
}
.btn-outline {
background: transparent;
color: #e6d3a3;
border: 3px solid #e6d3a3;
position: relative;
}
.btn-outline::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: linear-gradient(135deg, #e6d3a3 0%, #e6d3a3 100%);
transition: width 0.4s ease;
z-index: -1;
}
.btn-outline:hover::before {
width: 100%;
}
.btn-outline:hover {
color: white;
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(230, 211, 163, 0.4);
}
.view-more {
text-align: center;
margin-top: 2.5rem;
position: relative;
z-index: 2;
}
/* Hamburger Menu */
.hamburger {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
position: relative;
z-index: 1102; /* above menu/backdrop */
background: transparent !important;
border: 1px solid rgba(217,181,107,.35);
border-radius: 10px;
padding: 8px 10px;
pointer-events: auto;
}
.hamburger span {
width: 22px;
height: 2px;
background: #dcc9a7 !important; /* beige for contrast on dark header */
margin: 0;
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2px;
}
/* Page Hero Styles */
.page-hero {
background: linear-gradient(135deg, #2c1810 0%, #3c2e26 50%, #5d4e37 100%);
color: #f5f0e8;
padding: 160px 0 100px;
text-align: center;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
}
.page-hero h1 {
font-size: clamp(3rem, 5.5vw, 4.5rem);
margin-bottom: 2rem;
font-weight: 600;
font-family: "Playfair Display", serif;
position: relative;
z-index: 2;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.page-hero p {
font-size: 1.4rem;
opacity: 0.9;
max-width: 700px;
margin: 0 auto;
position: relative;
z-index: 2;
font-family: "Cormorant Garamond", serif;
line-height: 1.7;
}
/* Gift Boxes Grid Styles */
.giftboxes-grid-section {
padding: 60px 0;
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 100%);
}
/* Hide small words next to images on giftboxes (e.g., Artisan, Royal, Imperial) */
.giftboxes-grid .luxury-badge,
.giftboxes-grid .crown-icon { display: none !important; }
/* Giftboxes page: force action button text to black */
.giftboxes-grid .giftbox-actions .btn-outline,
.giftboxes-grid .giftbox-actions .btn-primary {
color: #000 !important;
}
/* Giftboxes page: price color to black */
.giftboxes-grid .giftbox-content .price {
color: #000 !important;
}
.giftboxes-grid {
display: grid;
grid-template-columns: repeat(3, minmax(300px, 1fr));
gap: 3rem;
margin-bottom: 5rem;
align-items: start;
}
/* Center the section header on Giftboxes page */
.giftboxes-grid-section .section-header {
text-align: center;
}
/* Center the Build Your Box button */
.build-your-box-section .build-box-content {
text-align: center;
}
.build-your-box-section .gift-content button {
margin: 0 auto;
}
.giftbox-item {
/* Darker at the bottom, lighter at the top to match home cards */
background: linear-gradient(to top, #8b5b43 0%, #b37a56 90%);
border-radius: 25px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(139, 69, 19, 0.18);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(218, 165, 32, 0.15);
}
.giftbox-item:hover {
transform: translateY(-15px);
box-shadow: 0 30px 70px rgba(139, 69, 19, 0.28);
}
.giftbox-image {
position: relative;
overflow: visible;
/* Match homepage featured card look */
height: auto;
display: flex;
align-items: center;
justify-content: center;
background: none;
}
.giftbox-image img {
/* Use the same sizing as .giftbox-img on the homepage */
width: 220px;
height: 160px;
object-fit: cover;
border-radius: 14px;
box-shadow: none;
transition: transform 0.3s ease;
}
.giftbox-item:hover .giftbox-image img {
/* Subtle hover to keep consistency */
transform: none;
}
.image-overlay {
position: absolute;
/* Overlay sized to the image box */
width: 220px;
height: 160px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 14px;
background: transparent; /* remove dark hover tint */
display: none; /* hide overlay entirely on giftbox cards */
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.giftbox-item:hover .image-overlay { opacity: 0; }
.quick-view-btn {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border: none;
padding: 18px;
border-radius: 50%;
cursor: pointer;
font-size: 1.4rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 20px rgba(210, 105, 30, 0.5);
z-index: 15;
position: relative;
}
/* Inline favorite button on product cards */
.fav-btn { position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:999px; border:1px solid rgba(230,211,163,0.6); background:rgba(255,253,248,0.9); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; z-index:2; }
.fav-btn i { color:#a37a3a; }
.fav-btn:hover { transform: translateY(-1px); box-shadow:0 8px 20px rgba(92,51,23,0.12); }
.fav-btn.active { background:linear-gradient(135deg,#e6d3a3,#d9c089); border-color:#e6d3a3; }
.fav-btn.active i { color:#000000; }
/* Remove all quick view buttons globally */
.quick-view-btn { display:none !important; }
.quick-view-btn:hover {
transform: scale(1.15);
box-shadow: 0 12px 30px rgba(218, 165, 32, 0.7);
}
.giftbox-content {
padding: 3rem;
}
.giftbox-content h3 {
font-size: 2rem;
margin-bottom: 1.2rem;
color: #2c1810;
font-weight: 600;
font-family: "Playfair Display", serif;
letter-spacing: -0.5px;
}
.giftbox-content .price {
font-size: 2.2rem;
font-weight: 700;
color: #8b4513;
margin-bottom: 1.8rem;
font-family: "Inter", sans-serif;
}
.giftbox-content .description {
color: #5d4e37;
line-height: 1.7;
margin-bottom: 2.5rem;
font-size: 1.15rem;
font-family: "Cormorant Garamond", serif;
}
.giftbox-actions {
display: flex;
gap: 1.2rem;
}
.giftbox-actions button {
flex: 1;
padding: 15px 25px;
font-size: 1rem;
border-radius: 30px;
font-weight: 600;
font-family: "Inter", sans-serif;
}
/* Build Box Item Styles */
.build-box-item {
background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
color: #f5f0e8;
border: 2px solid rgba(218, 165, 32, 0.3);
}
.build-box-visual {
height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(
135deg,
rgba(210, 105, 30, 0.2) 0%,
rgba(160, 82, 45, 0.2) 100%
);
}
.build-icon {
font-size: 3rem;
margin-bottom: 1rem;
color: #d2691e;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.build-text h4 {
font-size: 1.3rem;
font-family: "Playfair Display", serif;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.build-box-item .giftbox-content h3 {
color: #f5f0e8;
}
.build-box-item .price {
color: #000000;
}
.build-box-item .description {
color: rgba(245, 240, 232, 0.9);
}
.build-btn {
width: 100%;
background: linear-gradient(135deg, #daa520 0%, #daa520 100%);
color: white;
border: none;
padding: 18px 35px;
border-radius: 35px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
font-family: "Inter", sans-serif;
box-shadow: 0 6px 18px rgba(218, 165, 32, 0.4);
}
.build-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(218, 165, 32, 0.6);
}
/* Products Grid Styles */
.products-grid-section {
padding: 120px 0;
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 100%);
}
.products-filter {
display: flex;
justify-content: flex-end;
align-items: center;
margin-bottom: 6rem;
width: 100%;
position: relative;
min-height: 56px; /* ensure consistent bar height so abs children don't collapse */
}
/* Flowers page specific filter layout */
.flowers-filter {
display: grid;
grid-template-columns: 1fr auto 1fr; /* center area for filters */
align-items: center;
margin-bottom: 3rem;
width: 100%;
position: relative;
gap: 15px;
}
/* Ensure the filter button group stays on the left and doesn't shrink */
.flowers-filter .filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center; /* center the filter buttons */
align-items: center;
grid-column: 2; /* put in middle column */
}
.flowers-filter .filter-left {
display: flex;
align-items: center;
position: absolute;
left: 170px;
}
.flowers-filter .filter-center {
display: flex;
gap: 10px;
align-items: center;
justify-content: flex-end;
margin-right: 270px;
}
.flowers-filter .filter-right {
display: flex;
align-items: center;
}
/* Products page specific filter layout */
.products-filter .filter-left {
display: flex;
align-items: center;
position: absolute;
left: 60px; /* final small left shift */
top: 0; /* align to top of bar */
}
.products-filter .filter-center {
display: flex;
gap: 10px;
align-items: center;
justify-content: flex-end;
margin-right: 240px;
position: absolute;
right: 0;
top: 0; /* align to top of bar */
}
.products-filter .filter-right {
display: flex;
align-items: center;
}
/* Products page: pin Sort button a bit left and stable */
.products-filter .sort-btn {
position: absolute;
right: 40px; /* pull in from the far right */
top: 0; /* align with filter row */
}
.sort-btn {
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 100%);
color: #000000;
border: 2px solid #d2691e;
padding: 0.8rem 1.5rem;
border-radius: 25px;
cursor: pointer;
font-weight: 500;
font-family: "Inter", sans-serif;
transition: all 0.3s ease;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Flowers page: position sort button relative and nudge slightly left */
.flowers-filter .sort-btn {
position: relative;
right: auto;
grid-column: 3; /* right-side column */
justify-self: end; /* stick to the right edge of its column */
margin-right: 12px; /* slight inset from the edge */
}
.sort-btn:hover,
.sort-btn.active {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(210, 105, 30, 0.3);
}
.filter-btn {
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 100%);
color: #000000;
border: 2px solid #d2691e;
padding: 0.8rem 1.5rem;
border-radius: 25px;
cursor: pointer;
font-weight: 500;
font-family: "Inter", sans-serif;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.filter-btn:hover,
.filter-btn.active {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(210, 105, 30, 0.3);
}
.products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.product-item {
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(92, 51, 23, 0.12);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(210, 105, 30, 0.1);
aspect-ratio: 1;
display: flex;
flex-direction: column;
}
.product-item:hover {
transform: translateY(-12px);
box-shadow: 0 25px 60px rgba(139, 69, 19, 0.25);
}
.product-image {
position: relative;
overflow: hidden;
height: 60%;
flex-shrink: 0;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-item:hover .product-image img {
transform: scale(1.1);
}
.product-content {
padding: 1.2rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-content h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
color: #000000;
font-weight: 600;
font-family: "Playfair Display", serif;
letter-spacing: -0.2px;
line-height: 1.3;
}
.product-content .price {
font-size: 1.4rem;
font-weight: 700;
color: #8b4513;
margin-bottom: 0.8rem;
font-family: "Inter", sans-serif;
}
.product-content .description {
color: #000000;
line-height: 1.5;
margin-bottom: 1rem;
font-size: 0.9rem;
font-family: "Cormorant Garamond", serif;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-actions {
display: flex;
gap: 0.5rem;
margin-top: auto;
}
.product-actions button {
flex: 1;
padding: 8px 12px;
font-size: 0.8rem;
border-radius: 20px;
font-weight: 600;
font-family: "Inter", sans-serif;
cursor: pointer;
z-index: 10;
position: relative;
}
/* Why Choose Section */
.why-choose-section {
padding: 120px 0;
background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%);
}
.why-choose-section h2 {
text-align: center;
font-size: clamp(2.5rem, 4.5vw, 3.8rem);
margin-bottom: 5rem;
color: #2c1810;
font-weight: 600;
font-family: "Playfair Display", serif;
position: relative;
}
.why-choose-section h2::after {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, #daa520, #daa520, #8b4513);
border-radius: 2px;
box-shadow: 0 2px 8px rgba(218, 165, 32, 0.4);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 4rem;
}
.feature-item {
text-align: center;
padding: 3rem;
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
border-radius: 25px;
box-shadow: 0 15px 40px rgba(139, 69, 19, 0.12);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(218, 165, 32, 0.12);
}
.feature-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(139, 69, 19, 0.18);
}
.feature-icon {
font-size: 3.5rem;
color: #000000;
margin-bottom: 2rem;
text-shadow: 0 2px 4px rgba(218, 165, 32, 0.3);
}
.feature-item h4 {
font-size: 1.7rem;
margin-bottom: 1.2rem;
color: #2c1810;
font-weight: 600;
font-family: "Playfair Display", serif;
letter-spacing: -0.3px;
}
.feature-item p {
color: #5d4e37;
line-height: 1.7;
font-size: 1.15rem;
font-family: "Cormorant Garamond", serif;
}
/* Responsive Design */
/* Tablet refinements */
@media (max-width: 992px) {
.hero {
height: 60vh;
}
.slide-content {
max-width: 560px;
padding: 2rem;
}
.slide-content h1 {
font-size: clamp(2rem, 4.5vw, 2.6rem);
}
.slide-content p {
font-size: 1.05rem;
margin-bottom: 1.8rem;
}
.cta-btn {
padding: 0.9rem 2rem;
font-size: 0.95rem;
}
.giftboxes-grid,
.products-grid {
gap: 2rem;
}
}
/* Explicit desktop resets to prevent mobile rules leaking */
@media (min-width: 993px) {
/* Navbar baseline on desktop */
.nav-container { height: 80px; padding: 0 0.75rem 0 2rem; }
.hamburger {
display: none;
}
.nav-menu {
position: static;
left: auto;
top: auto;
flex-direction: row;
background: transparent;
backdrop-filter: none;
padding: 0;
box-shadow: none;
width: auto;
max-height: none;
overflow: visible;
}
.nav-menu.active {
left: auto;
}
/* Home hero/text sizing back to desktop defaults */
.hero {
height: 70vh;
}
.slide-content {
max-width: 700px;
padding: 0;
}
.slide-content h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
}
.slide-content p {
font-size: 1.3rem;
}
/* Giftboxes page desktop layout */
.giftboxes-grid {
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 4rem;
justify-content: flex-start;
justify-items: stretch;
max-width: none;
}
.giftboxes-grid-section .section-header {
text-align: center;
}
.build-your-box-section .build-box-content {
text-align: right;
}
.build-your-box-section .gift-content button {
margin: 0;
}
/* Build steps desktop behavior */
.steps-nav {
position: static;
overflow: visible;
background: transparent;
padding: 0;
}
#step-1 .products-grid {
gap: 2rem;
}
/* Home (desktop): ensure horizontal card rows */
.giftbox-slider,
.products-slider {
flex-direction: row;
align-items: stretch;
gap: 2.5rem;
}
.giftbox-section .giftbox-card {
width: 280px;
}
.products-section .product-card {
width: 280px;
}
}
/* Desktop-first guard for medium screens (≥769px) to avoid mobile order */
@media (min-width: 769px) {
/* Core grids back to multi-column */
.giftboxes-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 3rem;
justify-content: flex-start;
justify-items: stretch;
max-width: none;
}
.products-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
/* Build Your Box: desktop-like flow on medium screens too */
.steps-nav {
position: static;
overflow: visible;
background: transparent;
padding: 0;
}
#step-1 .products-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem;
}
#step-2 .box-sizes {
grid-template-columns: repeat(3, 1fr);
}
.build-box-card {
flex-direction: row;
text-align: left;
}
.build-box-content {
text-align: right;
padding-left: 40px;
}
.build-summary {
position: fixed;
top: 50%;
right: 2rem;
transform: translateY(-50%);
max-width: 320px;
}
/* Build Your Box: restore left-aligned filters on desktop */
.build-steps .product-filters {
text-align: left;
}
.build-steps .filter-row {
justify-content: flex-start;
}
.build-steps .filter-group {
margin-left: 0;
}
/* Build Your Box: revert to clean, aligned filters with subtle spacing */
.build-steps .filter-row {
gap: 16px;
flex-wrap: nowrap;
align-items: center;
}
.build-steps .filter-group {
background: transparent;
padding: 0;
border: 0;
box-shadow: none;
min-width: 150px;
}
/* Elegant desktop filter styling */
.build-steps .filter-group label {
font-family: "Inter", sans-serif;
font-weight: 600;
letter-spacing: 0.3px;
color: #000000;
}
.build-steps .filter-group select {
min-width: 190px;
height: 42px;
border-radius: 22px;
padding: 10px 36px 10px 14px;
border: 1.5px solid #d2691e;
background: linear-gradient(135deg, #fff7ea 0%, #ffeecf 100%);
box-shadow: 0 3px 10px rgba(92, 51, 23, 0.08);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B4513' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
transition:
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.build-steps .filter-group select:hover {
border-color: #a0522d;
box-shadow: 0 6px 16px rgba(210, 105, 30, 0.18);
}
.build-steps .filter-group select:focus {
outline: none;
border-color: #8b4513;
box-shadow:
0 0 0 4px rgba(210, 105, 30, 0.12),
0 8px 22px rgba(92, 51, 23, 0.18);
}
/* Align all 5 filters on one row */
.build-steps .product-filters {
display: grid;
grid-template-columns: repeat(6, minmax(170px, 1fr)); /* 5 filters + selected count inline */
gap: 16px 18px;
align-items: start; /* align all controls to the top */
}
.build-steps .product-filters .filter-row { display: contents; }
.build-steps .product-filters .selected-count {
justify-self: stretch;
align-self: start; /* align to top like the selects */
white-space: nowrap;
height: 42px;
min-width: 190px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
border-radius: 22px;
border: 1.5px solid #d2691e;
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
box-shadow: 0 3px 10px rgba(92, 51, 23, 0.08);
font-weight: 600;
color: #000000;
margin-top: 27px; /* fine-tune baseline alignment */
}
}
/* NAVBAR: authoritative overrides to ensure desktop shows correctly */
.navbar {
z-index: 1200;
}
.nav-backdrop { z-index: 1200; }
.nav-menu { z-index: 1201; }
.hamburger { z-index: 1202; }
.nav-container {
height: 80px;
}
.nav-menu {
display: flex;
}
@media (min-width: 993px) {
.hamburger {
display: none !important;
}
.nav-menu {
position: static !important;
left: auto !important;
top: auto !important;
flex-direction: row !important;
background: transparent !important;
backdrop-filter: none !important;
padding: 0 !important;
box-shadow: none !important;
width: auto !important;
max-height: none !important;
overflow: visible !important;
}
}
/* Treat <=992px as mobile/tablet for the navbar */
@media (max-width: 992px) {
.nav-container { height: 70px; padding: 0 1.25rem; }
.nav-logo img { height: 48px; }
.hamburger { display:flex !important; flex-direction:column; gap:6px; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; border:1px solid rgba(217,181,107,.35); border-radius:10px; background:rgba(0,0,0,.35); backdrop-filter: blur(10px); }
.hamburger span { width:22px; height:2px; background:#dcc9a7; display:block; }
.nav-menu { position: fixed !important; left: -100% !important; top: 70px !important; flex-direction: column !important; width: 100% !important; background: rgba(18,18,18,0.98) !important; color:#e6d3a3 !important; padding: 1.25rem 0 !important; box-shadow: 0 15px 35px rgba(0,0,0,0.35) !important; max-height: calc(100vh - 70px); overflow-y: auto; -webkit-overflow-scrolling: touch; border-top:1px solid rgba(217,181,107,.25); }
.nav-menu a { color:#e6d3a3 !important; display:block; padding: 0.95rem 1rem; font-size: 1.02rem; }
.nav-menu.active { left: 0 !important; }
.nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.nav-backdrop.active { opacity:1; pointer-events:auto; }
body.menu-open { overflow:hidden; }
}
@media (max-width: 768px) {
.hamburger {
display: flex !important;
}
.nav-menu {
position: fixed !important;
left: -100% !important;
top: 70px !important;
flex-direction: column !important;
width: 100% !important;
background: rgba(255, 255, 255, 0.98) !important;
padding: 1.5rem 0 !important;
box-shadow: 0 15px 35px rgba(139, 69, 19, 0.15) !important;
}
.nav-menu.active {
left: 0 !important;
}
}
@media (max-width: 768px) {
/* Giftboxes page: compact layout on phones */
.giftboxes-grid-section {
padding: 40px 0;
}
.giftboxes-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
max-width: 420px;
}
.giftboxes-grid-section .section-header {
margin-bottom: 2rem;
}
.giftboxes-grid-section .section-header h2 {
font-size: 1.8rem;
}
/* Giftbox cards: image + content sizing */
.giftboxes-grid .giftbox-image {
height: 220px;
}
.giftboxes-grid .giftbox-content {
padding: 1.25rem;
}
.giftboxes-grid .giftbox-content .price {
font-size: 1.4rem;
}
.giftboxes-grid .giftbox-content .description {
font-size: 0.95rem;
line-height: 1.6;
}
/* Actions: stack buttons full-width for easier taps */
.giftboxes-grid .giftbox-actions {
flex-direction: column;
gap: 0.75rem;
}
.giftboxes-grid .giftbox-actions .btn-outline,
.giftboxes-grid .giftbox-actions .btn-primary {
width: 100%;
}
/* “Build Your Box” promo card */
.build-your-box-section {
padding: 40px 0;
}
.build-box-card {
padding: 28px 20px;
gap: 22px;
}
.build-box-visual .build-icon {
width: 56px;
height: 56px;
}
.build-box-visual .build-icon i {
font-size: 22px;
}
.build-box-visual .build-text h3 {
font-size: 1.4rem;
}
.build-box-visual .build-text p {
font-size: 0.95rem;
}
.build-box-content .build-description {
font-size: 0.95rem;
}
.build-box-content .build-btn {
padding: 10px 16px;
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
/* Extra-small: a touch more compact */
.giftboxes-grid {
max-width: 360px;
gap: 1.25rem;
}
.giftboxes-grid .giftbox-image {
height: 200px;
}
.giftboxes-grid-section .section-header h2 {
font-size: 1.6rem;
}
.build-box-visual .build-text h3 {
font-size: 1.3rem;
}
}
@media (max-width: 768px) {
/* Slightly smaller header bar */
.nav-container { height: 70px; padding: 0 0.5rem; }
.nav-logo h2 {
font-size: 1.6rem;
}
.nav-logo img {
height: 36px;
}
.hamburger {
display: flex;
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px; /* match reduced header height */
flex-direction: column;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(15px);
width: 100%;
text-align: center;
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 15px 35px rgba(139, 69, 19, 0.15);
padding: 1.5rem 0; /* smaller padding to fit */
max-height: calc(100vh - 70px); /* prevent overflow */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.nav-menu.active {
left: 0;
}
.nav-menu a {
width: 100%;
display: block;
padding: 0.9rem 1rem; /* smaller tap target but still 44px+ */
font-size: 0.95rem;
}
.language-toggle {
margin-left: 0;
}
.lang-btn {
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
}
/* Home hero/text sizing only on mobile */
.hero {
height: 70vh;
}
.slide-content {
padding: 2.5rem;
}
.slide-content h1 {
font-size: clamp(2.2rem, 4.5vw, 3rem);
}
.slide-content p {
font-size: 1.2rem;
}
.giftbox-slider,
.products-slider {
flex-direction: column;
align-items: center;
gap: 3rem;
}
.giftbox-card,
.product-card {
width: 100%;
max-width: 380px;
}
.partners-grid {
gap: 2rem;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
gap: 3rem;
}
.newsletter-form {
flex-direction: column;
gap: 1.2rem;
}
.page-hero h1 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
}
.page-hero p {
font-size: 1.2rem;
}
.giftboxes-grid,
.products-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.giftbox-actions,
.product-actions {
flex-direction: column;
gap: 1rem;
}
.features-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.feature-item {
padding: 2.5rem;
}
}
/* Header: backdrop + scroll lock (mobile) */
@media (max-width: 768px) {
.nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.nav-backdrop.active { opacity: 1; pointer-events: auto; }
}
body.menu-open { overflow: hidden; }
/* Extra-small devices */
@media (max-width: 480px) {
.nav-logo h2 {
font-size: 1.45rem;
}
.nav-logo img {
height: 32px;
}
.nav-menu {
top: 66px;
max-height: calc(100vh - 66px);
}
.nav-menu a {
padding: 0.8rem 0.9rem;
font-size: 0.92rem;
}
}
/* Body lock when mobile menu open */
/* Removed overlay/body-lock to restore original navbar behavior */
@media (max-width: 480px) {
.container {
padding: 0 1.5rem;
}
.nav-container {
padding: 0 1.5rem;
}
.hero {
height: 60vh;
}
.slide-content {
padding: 2rem;
}
.giftbox-section,
.products-section {
padding: 80px 0;
}
.giftbox-content,
.product-content {
padding: 2rem;
}
.giftbox-content h3,
.product-content h3 {
font-size: 1.6rem;
}
.why-choose-section h2 {
font-size: clamp(2rem, 4vw, 2.8rem);
}
.feature-item {
padding: 2rem;
}
.footer {
padding: 80px 0 30px;
}
}
/* Home page spacing: tighten gap between Gift Boxes and Partners */
body.home .giftbox-section{ padding-bottom:24px !important; margin-bottom:0 !important; }
body.home .partners-section{ padding-top:16px !important; margin-top:0 !important; }
/* About Page Styles */
.about-hero {
background: linear-gradient(135deg, #2c1810 0%, #3c2e26 50%, #5d4e37 100%);
color: #f5f0e8;
padding: 140px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.about-hero h1 {
font-size: clamp(2.8rem, 5vw, 4rem);
margin-bottom: 1.5rem;
font-weight: 600;
font-family: "Playfair Display", serif;
}
.about-hero p {
font-size: 1.3rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
font-family: "Cormorant Garamond", serif;
}
.our-story {
padding: 120px 0;
background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%);
}
.story-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.story-text h2 {
font-size: 2.5rem;
margin-bottom: 2rem;
color: #2c1810;
font-family: "Playfair Display", serif;
}
.story-text p {
margin-bottom: 1.5rem;
font-size: 1.1rem;
line-height: 1.7;
color: #5d4e37;
}
.story-image img {
width: 100%;
border-radius: 15px;
box-shadow: 0 15px 35px rgba(139, 69, 19, 0.15);
}
.our-values {
padding: 80px 0;
background: linear-gradient(135deg, #f5f0e8 0%, #ede4d3 100%);
}
.our-values h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #2c1810;
font-family: "Playfair Display", serif;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
}
.value-card {
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
padding: 2.5rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 12px 30px rgba(139, 69, 19, 0.12);
transition: all 0.3s ease;
}
.value-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 45px rgba(139, 69, 19, 0.18);
}
.value-icon {
font-size: 3rem;
color: #000000;
margin-bottom: 1.5rem;
}
.value-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #2c1810;
font-family: "Playfair Display", serif;
}
.value-card p {
color: #5d4e37;
line-height: 1.6;
}
.our-team {
padding: 80px 0;
background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%);
}
.our-team h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #2c1810;
font-family: "Playfair Display", serif;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
}
.team-member {
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
padding: 2rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 12px 30px rgba(139, 69, 19, 0.12);
transition: all 0.3s ease;
}
.team-member:hover {
transform: translateY(-8px);
box-shadow: 0 20px 45px rgba(139, 69, 19, 0.18);
}
.team-member img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 1.5rem;
box-shadow: 0 8px 20px rgba(139, 69, 19, 0.15);
}
.team-member h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: #2c1810;
font-family: "Playfair Display", serif;
}
.team-member .role {
color: #000000;
font-weight: 600;
margin-bottom: 1rem;
font-family: "Inter", sans-serif;
}
.team-member p {
color: #5d4e37;
line-height: 1.6;
}
.our-mission {
padding: 80px 0;
background: linear-gradient(135deg, #f5f0e8 0%, #ede4d3 100%);
}
.mission-content h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 2rem;
color: #2c1810;
font-family: "Playfair Display", serif;
}
.mission-content p {
text-align: center;
font-size: 1.2rem;
line-height: 1.7;
color: #5d4e37;
max-width: 800px;
margin: 0 auto 3rem;
}
.mission-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.stat {
text-align: center;
padding: 2rem;
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
border-radius: 15px;
box-shadow: 0 10px 25px rgba(139, 69, 19, 0.1);
}
.stat h3 {
font-size: 2.5rem;
color: #000000;
margin-bottom: 0.5rem;
font-family: "Inter", sans-serif;
font-weight: 700;
}
.stat p {
color: #5d4e37;
font-weight: 500;
font-family: "Inter", sans-serif;
}
@media (max-width: 768px) {
.story-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.values-grid,
.team-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.mission-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* Product Detail Page Styles */
.product-detail {
padding: 120px 0 80px;
background: linear-gradient(135deg, #faf7f2 0%, #f5f0e8 100%);
}
.product-detail-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.product-images img {
width: 100%;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(139, 69, 19, 0.15);
}
.product-info h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #2c1810;
font-family: "Playfair Display", serif;
}
.product-info .price {
font-size: 2rem;
color: #8b4513;
font-weight: 700;
margin-bottom: 1.5rem;
font-family: "Inter", sans-serif;
}
.product-info .description {
font-size: 1.2rem;
line-height: 1.7;
color: #5d4e37;
margin-bottom: 2rem;
}
.product-features {
margin-bottom: 2.5rem;
}
.product-features h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #2c1810;
font-family: "Playfair Display", serif;
}
.product-features ul {
list-style: none;
padding: 0;
}
.product-features li {
padding: 0.5rem 0;
color: #5d4e37;
position: relative;
padding-left: 1.5rem;
}
.product-features li::before {
content: "✓";
position: absolute;
left: 0;
color: #000000;
font-weight: bold;
}
.product-actions {
display: flex;
gap: 1rem;
}
.product-actions button {
padding: 15px 30px;
font-size: 1rem;
}
@media (max-width: 768px) {
.product-detail-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.product-actions {
flex-direction: column;
}
}
/* Build Box Page Styles */
.build-hero {
background: linear-gradient(
135deg,
#2c1810 0%,
#000000 30%,
#000000 70%,
#8b4513 100%
);
color: #f5f2ed;
padding: 140px 0 100px;
text-align: center;
position: relative;
overflow: hidden;
}
.build-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.6;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: rgba(218, 165, 32, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(218, 165, 32, 0.3);
padding: 0.8rem 2rem;
border-radius: 50px;
margin-bottom: 2rem;
font-size: 0.95rem;
font-weight: 600;
color: #000000;
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-badge i {
font-size: 1.1rem;
}
.build-hero h1 {
font-size: clamp(3rem, 5.5vw, 4.5rem);
margin-bottom: 2rem;
font-family: "Playfair Display", serif;
font-weight: 700;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
line-height: 1.1;
}
.build-hero p {
font-size: 1.3rem;
max-width: 700px;
margin: 0 auto 3rem;
opacity: 0.95;
line-height: 1.7;
font-family: "Cormorant Garamond", serif;
}
.hero-features {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 3rem;
}
.hero-features .feature-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
padding: 1.5rem;
background: rgba(245, 242, 237, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
border: 1px solid rgba(218, 165, 32, 0.2);
transition: all 0.3s ease;
}
.hero-features .feature-item:hover {
transform: translateY(-5px);
background: rgba(218, 165, 32, 0.15);
border-color: rgba(218, 165, 32, 0.4);
}
.hero-features .feature-item i {
font-size: 2rem;
color: #000000;
}
.hero-features .feature-item span {
font-weight: 600;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.build-steps {
padding: 80px 0;
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 50%, #e5d5c8 100%);
position: relative;
}
/* Slightly lift heading on Build a Box page */
.build-box-page .build-steps { margin-top: 100px; padding-top: 24px; }
.build-box-page .steps-header { margin-bottom: 2.25rem; }
/* Add a bit more separation between the heading and the step cards */
.build-box-page .steps-header h2 {
/* Match size with "Choose Your Box" heading */
font-size: clamp(2.2rem, 3.5vw, 3rem) !important;
margin-bottom: 28px !important;
}
.build-box-page .steps-nav { margin-top: 24px; }
/* page-specific spacing removed per revert */
@media (max-width: 820px){
.build-box-page .build-steps { margin-top: 72px; padding-top: 16px; }
}
.build-steps::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.steps-header {
text-align: center;
margin-bottom: 4rem;
position: relative;
z-index: 2;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
border: 2px solid #d2691e;
padding: 0.8rem 2rem;
border-radius: 50px;
margin-bottom: 2rem;
font-size: 0.9rem;
font-weight: 600;
color: #8b4513;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(210, 105, 30, 0.2);
}
.steps-header h2 {
font-size: clamp(2.5rem, 4vw, 3.5rem);
margin-bottom: 1.5rem;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 700;
}
.section-subtitle {
font-size: 1.2rem;
color: #000000;
max-width: 600px;
margin: 0 auto 3rem;
opacity: 0.9;
font-family: "Cormorant Garamond", serif;
}
.steps-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 0;
margin-bottom: 3rem;
position: relative;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
padding: 1.5rem;
border-radius: 20px;
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
border: 2px solid transparent;
box-shadow: 0 8px 25px rgba(92, 51, 23, 0.1);
position: relative;
z-index: 2;
min-width: 180px;
}
.step:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(92, 51, 23, 0.2);
}
.step.active {
border-color: #d2691e;
background: linear-gradient(135deg, #fdf9f3 0%, #f5f0e8 100%);
transform: translateY(-12px) scale(1.05);
box-shadow: 0 20px 50px rgba(210, 105, 30, 0.3);
}
.step-connector {
width: 60px;
height: 3px;
background: linear-gradient(90deg, #d2691e 0%, #a0522d 100%);
position: relative;
z-index: 1;
border-radius: 2px;
margin: 0 -15px;
}
.step-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #ede6d9 0%, #d2c5b0 100%);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
transition: all 0.4s ease;
border: 3px solid transparent;
}
.step.active .step-icon {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 25px rgba(210, 105, 30, 0.4);
}
.step-icon i {
font-size: 1.6rem;
color: #8b4513;
transition: color 0.3s ease;
}
.step.active .step-icon i {
color: white;
}
.step-number {
font-size: 0.8rem;
font-weight: 700;
color: #a0522d;
margin-bottom: 0.5rem;
font-family: "Inter", sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
}
.step.active .step-number {
color: #d2691e;
}
.step-title {
font-weight: 700;
color: #000000;
font-family: "Playfair Display", serif;
font-size: 1.1rem;
margin-bottom: 0.3rem;
text-align: center;
}
.step-desc {
font-size: 0.85rem;
color: #000000;
opacity: 0.8;
text-align: center;
font-family: "Cormorant Garamond", serif;
}
.step-content {
display: none;
position: relative;
z-index: 2;
}
.step-content.active {
display: block;
animation: fadeInUp 0.6s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.content-header {
text-align: center;
margin-bottom: 4rem;
}
.content-header h3 {
font-size: clamp(2.2rem, 3.5vw, 3rem);
margin-bottom: 1.5rem;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 700;
}
.content-header p {
font-size: 1.2rem;
color: #000000;
max-width: 700px;
margin: 0 auto;
opacity: 0.9;
line-height: 1.7;
font-family: "Cormorant Garamond", serif;
}
/* Step 2: single capacity progress */
.capacity-progress{position:relative;height:36px;border-radius:18px;background:#f0ece4;border:1px solid #e3dac6;overflow:hidden;margin:14px 0 18px}
.capacity-progress .capacity-sections{display:grid;grid-template-columns:1fr 1fr 1fr;height:100%}
.capacity-progress .capacity-sections .cap-sec{position:relative;display:flex;align-items:center;justify-content:center;border-right:1px solid #e3dac6}
.capacity-progress .capacity-sections .cap-sec:last-child{border-right:none}
.capacity-progress .capacity-sections .cap-sec span{font-family:"Playfair Display",serif;font-weight:800;color:#000000;font-size:13.5px;letter-spacing:.3px}
.capacity-progress .capacity-fill{mix-blend-mode:multiply}
.size-suggestion{display:flex;gap:10px;align-items:center;background:#fff7ea;border:1px solid #e6d3a3;border-radius:12px;padding:8px 12px;color:#000000;margin:-6px 0 12px}
.size-suggestion .btn-outline{padding:6px 10px;border-radius:10px}
.capacity-progress .capacity-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#e6d3a3,#d9c089);transition:width .3s ease;border-radius:18px}
.choose-summary-grid{display:grid;grid-template-columns:360px 1fr;gap:20px;margin-bottom:16px}
.chosen-box-panel{background:#fff;border:1px solid #eee;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.chosen-box-thumb{width:140px;height:96px;background:#f5efe0;border:1px solid #e0d6bd;border-radius:10px}
.chosen-box-title{font-weight:800;color:#2b2a28;font-family:"Playfair Display",serif;margin-top:6px}
.chosen-box-info{color:#6a6458;font-size:1rem}
.chosen-products-panel{background:#fff;border:1px solid #eee;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.chosen-products-head{font-weight:800;color:#2b2a28;font-family:"Playfair Display",serif}
.chosen-products-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}
.chosen-products-list .selected-item{display:grid;grid-template-columns:1fr 110px 90px;align-items:center;gap:12px;font-size:.98rem}
.chosen-products-list .selected-item span:nth-child(1){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chosen-products-list .selected-item span:nth-child(2){text-align:center;}
.chosen-products-list .remove-btn{justify-self:end}
@media (max-width: 640px){
.chosen-products-list .selected-item{grid-template-columns:1fr 90px 72px}
}
.chosen-products-list .remove-btn{background:#fff;border:1px solid #e0d6bd;color:#000000;border-radius:8px;padding:2px 8px;font-size:.9rem;cursor:pointer}
.chosen-products-list .remove-btn:hover{background:#f5efe0}
.chosen-products-total{display:flex;justify-content:space-between;border-top:1px dashed #e5e5e5;padding-top:10px;font-weight:700}
/* Hide headings/labels on Step 2 per request */
.build-box-page #step-2 .chosen-box-title,
.build-box-page #step-2 .chosen-products-head,
.build-box-page #step-2 .chosen-products-total { display:none; }
/* Center the filters block on Build Box step */
.build-box-page .product-filters{
display:flex;
gap:18px;
justify-content:space-between; /* full row width */
align-items:flex-end;
margin:16px 0 22px; /* a bit more breathing room */
width:100%;
padding:12px 16px; /* taller section feel */
background: linear-gradient(180deg,#fffdf8,#f7f0e5);
border:1px solid rgba(230,211,163,.45);
border-radius:16px;
box-shadow: 0 10px 26px rgba(92,51,23,.06);
flex-wrap:nowrap;
}
.build-box-page .product-filters .filter-group{flex:1 1 0; max-width:260px}
.build-box-page .product-filters .filter-group label{font-weight:800;font-family:"Playfair Display",serif;color:#000000;margin-bottom:6px;display:block}
.build-box-page .product-filters .filter-group select{width:100%; height:46px}
.box-sizes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
margin-bottom: 3rem;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.box-size-option {
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
padding: 2.5rem 2rem;
border-radius: 25px;
box-shadow: 0 15px 40px rgba(92, 51, 23, 0.12);
cursor: pointer;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border: 3px solid transparent;
position: relative;
overflow: hidden;
}
.box-size-option::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(210, 105, 30, 0.05) 0%,
rgba(160, 82, 45, 0.05) 100%
);
opacity: 0;
transition: opacity 0.4s ease;
}
.box-size-option:hover::before {
opacity: 1;
}
.box-size-option:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 25px 60px rgba(92, 51, 23, 0.2);
border-color: rgba(210, 105, 30, 0.3);
}
.box-size-option.selected {
border-color: #d2691e;
background: linear-gradient(135deg, #fdf9f3 0%, #f5f0e8 100%);
transform: translateY(-15px) scale(1.05);
box-shadow: 0 30px 70px rgba(210, 105, 30, 0.3);
}
.box-size-option.selected::before {
opacity: 1;
}
.size-badge {
position: absolute;
top: -10px;
right: 20px;
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
padding: 0.5rem 1.2rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(210, 105, 30, 0.4);
font-family: "Inter", sans-serif;
}
.size-badge.premium {
background: linear-gradient(135deg, #8b4513 0%, #000000 100%);
}
.size-badge.deluxe {
background: linear-gradient(135deg, #2c1810 0%, #1a0f08 100%);
}
.box-visual-3d {
height: 160px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
perspective: 1000px;
}
.luxury-box {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease;
cursor: pointer;
}
.box-size-option:hover .luxury-box {
transform: rotateY(15deg) rotateX(10deg);
}
.box-lid,
.box-base {
position: absolute;
width: 100px;
height: 100px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.box-base {
background: linear-gradient(135deg, #deb887 0%, #cd853f 100%);
transform: translateZ(-10px);
}
.box-lid {
background: linear-gradient(135deg, #f4e4bc 0%, #deb887 100%);
transform: translateZ(10px);
border: 2px solid rgba(139, 69, 19, 0.3);
}
.premium-box .box-base {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
}
.premium-box .box-lid {
background: linear-gradient(135deg, #f4a460 0%, #d2691e 100%);
}
.deluxe-box .box-base {
background: linear-gradient(135deg, #8b4513 0%, #000000 100%);
}
.deluxe-box .box-lid {
background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);
}
.box-ribbon {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 18px;
background: linear-gradient(135deg, #daa520 0%, #daa520 100%);
transform: translate(-50%, -50%) rotateZ(45deg);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(218, 165, 32, 0.4);
z-index: 5;
}
.size-details {
text-align: center;
position: relative;
z-index: 2;
}
.size-details h4 {
font-size: 1.6rem;
margin-bottom: 0.8rem;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 700;
}
.size-desc {
font-size: 1rem;
color: #000000;
margin-bottom: 1.5rem;
opacity: 0.9;
font-family: "Cormorant Garamond", serif;
}
.size-specs {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.size-specs span {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: #8b4513;
font-weight: 500;
font-family: "Inter", sans-serif;
}
.size-specs i {
color: #d2691e;
font-size: 1rem;
}
.price-display {
text-align: center;
}
.price-label {
display: block;
font-size: 0.9rem;
color: #a0522d;
margin-bottom: 0.5rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: "Inter", sans-serif;
}
.price {
font-size: 2rem;
font-weight: 700;
color: #8b4513;
font-family: "Inter", sans-serif;
text-shadow: 0 2px 4px rgba(139, 69, 19, 0.1);
}
.box-visual {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
border-radius: 10px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
.small-box {
background: linear-gradient(135deg, #deb887 0%, #cd853f 100%);
}
.medium-box {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
}
.large-box {
background: linear-gradient(135deg, #8b4513 0%, #000000 100%);
}
.box-size-option h4 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
color: #000000;
font-family: "Playfair Display", serif;
}
.box-size-option p {
color: #000000;
margin-bottom: 1rem;
}
.box-size-option .price {
font-weight: 700;
color: #8b4513;
font-size: 1.1rem;
}
.product-categories {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.category-btn {
background: #ede6d9;
color: #000000;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 25px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.category-btn:hover,
.category-btn.active {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
transform: translateY(-2px);
}
.products-selection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.product-select-item {
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
padding: 1.5rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 20px rgba(92, 51, 23, 0.1);
transition: all 0.3s ease;
}
.product-select-item:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(92, 51, 23, 0.15);
}
.product-select-item img {
width: 100%;
height: 100px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 1rem;
}
.product-select-item h5 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: #000000;
font-family: "Playfair Display", serif;
}
.add-price {
color: #8b4513;
font-weight: 600;
display: block;
margin-bottom: 1rem;
}
.add-product-btn {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 20px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
}
.add-product-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(210, 105, 30, 0.3);
}
.customization-options {
max-width: 600px;
margin: 0 auto 3rem;
text-align: left;
}
.custom-option {
margin-bottom: 2rem;
}
.custom-option label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #000000;
font-family: "Inter", sans-serif;
}
.custom-option input,
.custom-option textarea {
width: 100%;
padding: 1rem;
border: 2px solid #ede6d9;
border-radius: 10px;
font-family: "Cormorant Garamond", serif;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.custom-option input:focus,
.custom-option textarea:focus {
outline: none;
border-color: #d2691e;
}
.custom-option textarea {
height: 100px;
resize: vertical;
}
.wrapping-options {
display: flex;
gap: 2rem;
}
.wrap-option {
display: flex;
align-items: center;
gap: 0.5rem;
}
.step-actions {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 4rem;
}
.step-actions button {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 18px 35px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 50px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Inter", sans-serif;
cursor: pointer;
position: relative;
overflow: hidden;
}
.step-actions button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
.step-actions button:not(:disabled):hover {
transform: translateY(-3px);
}
.step-actions .btn-primary {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border: none;
box-shadow: 0 8px 25px rgba(210, 105, 30, 0.4);
}
.step-actions .btn-primary:hover {
box-shadow: 0 12px 35px rgba(210, 105, 30, 0.6);
}
.step-actions .btn-outline {
background: transparent;
color: #8b4513;
border: 3px solid #d2691e;
}
.step-actions .btn-outline:hover {
background: #d2691e;
color: white;
box-shadow: 0 8px 25px rgba(210, 105, 30, 0.4);
}
.build-summary {
position: fixed;
top: 50%;
right: 2rem;
transform: translateY(-50%);
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
padding: 2rem;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(92, 51, 23, 0.15);
min-width: 250px;
z-index: 100;
}
.build-summary h4 {
font-size: 1.3rem;
margin-bottom: 1rem;
color: #000000;
font-family: "Playfair Display", serif;
}
.selected-items {
margin-bottom: 1rem;
color: #000000;
}
.total-price {
padding-top: 1rem;
border-top: 2px solid #ede6d9;
color: #8b4513;
font-size: 1.2rem;
}
@media (max-width: 768px) {
.steps-nav {
flex-direction: column;
gap: 1rem;
}
.box-sizes {
grid-template-columns: 1fr;
}
.build-summary {
position: static;
transform: none;
margin: 2rem auto;
max-width: 400px;
}
.step-navigation {
flex-direction: column;
align-items: center;
}
}
/* Gift Box Detail Pages */
.box-detail-hero {
padding: 100px 0 60px;
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 100%);
}
.box-detail-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.box-showcase {
text-align: center;
}
.box-3d-container {
perspective: 1000px;
margin-bottom: 2rem;
}
.box-3d {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
margin: 0 auto;
cursor: grab;
transition: transform 0.3s ease;
animation: rotate 10s infinite linear;
}
.box-3d:active {
cursor: grabbing;
}
.box-face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid rgba(92, 51, 23, 0.3);
border-radius: 10px;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
}
.essential-3d .box-face {
background: linear-gradient(135deg, #deb887 0%, #cd853f 100%);
}
.premium-3d .box-face {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
}
.deluxe-3d .box-face {
background: linear-gradient(135deg, #8b4513 0%, #000000 100%);
}
.box-face.front {
transform: rotateY(0deg) translateZ(100px);
}
.box-face.back {
transform: rotateY(180deg) translateZ(100px);
}
.box-face.right {
transform: rotateY(90deg) translateZ(100px);
}
.box-face.left {
transform: rotateY(-90deg) translateZ(100px);
}
.box-face.top {
transform: rotateX(90deg) translateZ(100px);
}
.box-face.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotate {
from {
transform: rotateX(15deg) rotateY(0deg);
}
to {
transform: rotateX(15deg) rotateY(360deg);
}
}
.interaction-hint {
color: #000000;
font-style: italic;
font-size: 0.9rem;
}
.box-info h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #000000;
font-family: "Playfair Display", serif;
}
.box-price {
font-size: 2.2rem;
color: #8b4513;
font-weight: 700;
margin-bottom: 1.5rem;
font-family: "Inter", sans-serif;
}
.box-description {
font-size: 1.2rem;
line-height: 1.7;
color: #000000;
margin-bottom: 2.5rem;
}
.box-contents {
margin-bottom: 2.5rem;
}
.box-contents h3 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: #000000;
font-family: "Playfair Display", serif;
}
.contents-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.content-item {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.8rem;
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
border-radius: 10px;
box-shadow: 0 4px 10px rgba(92, 51, 23, 0.1);
transition: all 0.3s ease;
}
.content-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(92, 51, 23, 0.15);
}
.content-item i {
color: #d2691e;
font-size: 1.2rem;
width: 20px;
}
.content-item span {
color: #000000;
font-weight: 500;
font-family: "Inter", sans-serif;
}
.box-actions {
display: flex;
gap: 1rem;
}
.box-actions button {
padding: 15px 30px;
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.box-features {
padding: 80px 0;
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
}
.box-features h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: #000000;
font-family: "Playfair Display", serif;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
padding: 2.5rem;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 30px rgba(92, 51, 23, 0.1);
transition: all 0.3s ease;
border: 2px solid rgba(210, 105, 30, 0.1);
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(92, 51, 23, 0.15);
border-color: rgba(210, 105, 30, 0.3);
}
.feature-icon {
font-size: 3rem;
color: #d2691e;
margin-bottom: 1.5rem;
}
.feature-card h4 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #000000;
font-family: "Playfair Display", serif;
}
.feature-card p {
color: #000000;
line-height: 1.6;
}
@media (max-width: 768px) {
.box-detail-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.box-3d {
width: 150px;
height: 150px;
}
.box-face {
width: 150px;
height: 150px;
}
.box-face.front {
transform: rotateY(0deg) translateZ(75px);
}
.box-face.back {
transform: rotateY(180deg) translateZ(75px);
}
.box-face.right {
transform: rotateY(90deg) translateZ(75px);
}
.box-face.left {
transform: rotateY(-90deg) translateZ(75px);
}
.box-face.top {
transform: rotateX(90deg) translateZ(75px);
}
.box-face.bottom {
transform: rotateX(-90deg) translateZ(75px);
}
.box-actions {
flex-direction: column;
}
.contents-grid {
grid-template-columns: 1fr;
}
}
/* Account Page Styles */
.account-hero {
background: linear-gradient(
135deg,
#2c1810 0%,
#000000 30%,
#000000 70%,
#8b4513 100%
);
color: #f5f2ed;
padding: 140px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.account-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.6;
}
.account-hero .hero-content {
position: relative;
z-index: 2;
}
.account-hero .hero-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: rgba(218, 165, 32, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(218, 165, 32, 0.3);
padding: 0.8rem 2rem;
border-radius: 50px;
margin-bottom: 2rem;
font-size: 0.95rem;
font-weight: 600;
color: #000000;
text-transform: uppercase;
letter-spacing: 1px;
}
.account-hero h1 {
font-size: clamp(2.8rem, 5vw, 4rem);
margin-bottom: 1.5rem;
font-family: "Playfair Display", serif;
font-weight: 700;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.account-hero p {
font-size: 1.3rem;
max-width: 600px;
margin: 0 auto;
opacity: 0.95;
line-height: 1.7;
font-family: "Cormorant Garamond", serif;
}
.account-content {
padding: 80px 0;
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 100%);
min-height: 70vh;
}
.auth-section {
max-width: 500px;
margin: 0 auto;
}
.auth-container {
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
border-radius: 25px;
box-shadow: 0 20px 50px rgba(92, 51, 23, 0.15);
overflow: hidden;
border: 2px solid rgba(210, 105, 30, 0.1);
}
.auth-tabs {
display: flex;
background: linear-gradient(135deg, #f5f0e8 0%, #ede4d3 100%);
}
.auth-tab {
flex: 1;
padding: 1.5rem;
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
color: #000000;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: "Inter", sans-serif;
}
.auth-tab.active {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
box-shadow: 0 4px 15px rgba(210, 105, 30, 0.3);
}
.auth-form {
display: none;
padding: 3rem;
}
.auth-form.active {
display: block;
}
.form-header {
text-align: center;
margin-bottom: 2.5rem;
}
.form-header h2 {
font-size: 2rem;
margin-bottom: 0.8rem;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 700;
}
.form-header p {
color: #000000;
opacity: 0.9;
font-family: "Cormorant Garamond", serif;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
font-weight: 600;
color: #000000;
font-family: "Inter", sans-serif;
font-size: 0.95rem;
}
.form-group label i {
color: #d2691e;
width: 16px;
}
.form-group input {
width: 100%;
padding: 1rem;
border: 2px solid #ede6d9;
border-radius: 12px;
font-family: "Cormorant Garamond", serif;
font-size: 1rem;
transition: all 0.3s ease;
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
}
.form-group input:focus {
outline: none;
border-color: #d2691e;
box-shadow: 0 0 0 3px rgba(210, 105, 30, 0.1);
}
.form-options {
margin-bottom: 2rem;
}
.checkbox-option {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1rem;
cursor: pointer;
font-family: "Inter", sans-serif;
font-size: 0.9rem;
color: #000000;
}
.checkbox-option input[type="checkbox"] {
width: auto;
margin: 0;
}
.forgot-password {
color: #d2691e;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: color 0.3s ease;
}
.forgot-password:hover {
color: #a0522d;
}
.auth-btn {
width: 100%;
padding: 1.2rem;
font-size: 1.1rem;
font-weight: 600;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
transition: all 0.3s ease;
}
.dashboard-section {
max-width: 1200px;
margin: 0 auto;
}
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 3rem;
padding: 2rem;
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(92, 51, 23, 0.1);
border: 2px solid rgba(210, 105, 30, 0.1);
}
.user-welcome {
display: flex;
align-items: center;
gap: 1.5rem;
}
.user-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2.5rem;
box-shadow: 0 8px 25px rgba(210, 105, 30, 0.3);
}
.user-info h2 {
font-size: 2rem;
margin-bottom: 0.5rem;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 700;
}
.user-info p {
color: #000000;
opacity: 0.9;
font-family: "Cormorant Garamond", serif;
}
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.dashboard-card {
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(92, 51, 23, 0.1);
border: 2px solid rgba(210, 105, 30, 0.1);
transition: all 0.3s ease;
}
.dashboard-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(92, 51, 23, 0.15);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid rgba(210, 105, 30, 0.1);
}
.card-header h3 {
font-size: 1.3rem;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.8rem;
}
.card-header h3 i {
color: #d2691e;
}
.view-all {
color: #d2691e;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: color 0.3s ease;
}
.view-all:hover {
color: #a0522d;
}
.order-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid rgba(237, 230, 217, 0.5);
}
.order-item:last-child {
border-bottom: none;
}
.order-info h4 {
font-size: 1.1rem;
margin-bottom: 0.3rem;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 600;
}
.order-info p {
color: #000000;
opacity: 0.8;
font-size: 0.9rem;
font-family: "Inter", sans-serif;
}
.order-status {
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: "Inter", sans-serif;
}
.order-status.delivered {
background: rgba(39, 174, 96, 0.1);
color: #27ae60;
}
.order-status.processing {
background: rgba(241, 196, 15, 0.1);
color: #f1c40f;
}
.favorites-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
}
.favorite-item {
text-align: center;
padding: 1rem;
border-radius: 12px;
background: linear-gradient(135deg, #f5f0e8 0%, #ede4d3 100%);
transition: all 0.3s ease;
cursor: pointer;
}
.favorite-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(92, 51, 23, 0.1);
}
.favorite-item img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 0.8rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.favorite-item span {
font-size: 0.9rem;
color: #000000;
font-weight: 500;
font-family: "Inter", sans-serif;
}
.settings-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.setting-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border-radius: 12px;
background: linear-gradient(135deg, #f5f0e8 0%, #ede4d3 100%);
text-decoration: none;
color: #000000;
transition: all 0.3s ease;
font-family: "Inter", sans-serif;
}
.setting-item:hover {
background: linear-gradient(135deg, #ede4d3 0%, #d2c5b0 100%);
transform: translateX(5px);
}
.setting-item i:first-child {
color: #d2691e;
width: 20px;
font-size: 1.1rem;
}
.setting-item span {
flex: 1;
font-weight: 500;
}
.setting-item i:last-child {
color: #a0522d;
opacity: 0.6;
}
.recommendation-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border-radius: 12px;
background: linear-gradient(135deg, #f5f0e8 0%, #ede4d3 100%);
transition: all 0.3s ease;
}
.recommendation-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(92, 51, 23, 0.1);
}
.recommendation-item img {
width: 60px;
height: 60px;
border-radius: 8px;
object-fit: cover;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.recommendation-info {
flex: 1;
}
.recommendation-info h4 {
font-size: 1rem;
margin-bottom: 0.3rem;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 600;
}
.recommendation-info p {
color: #000000;
opacity: 0.8;
font-size: 0.8rem;
margin-bottom: 0.3rem;
font-family: "Inter", sans-serif;
}
.recommendation-info .price {
color: #8b4513;
font-weight: 700;
font-size: 1rem;
font-family: "Inter", sans-serif;
}
.btn-sm {
padding: 0.6rem;
font-size: 0.9rem;
border-radius: 8px;
min-width: auto;
width: auto;
}
@media (max-width: 768px) {
.dashboard-header {
flex-direction: column;
gap: 1.5rem;
text-align: center;
}
.dashboard-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.auth-section {
margin: 0 1rem;
}
}
/* Customize Box Page */
.customize-hero {
background: linear-gradient(
135deg,
#2c1810 0%,
#000000 30%,
#000000 70%,
#8b4513 100%
);
color: #f5f2ed;
padding: 140px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.customize-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.7;
}
.customize-hero .hero-content {
position: relative;
z-index: 2;
}
.customize-hero .hero-badge {
background: rgba(210, 105, 30, 0.2);
border-color: rgba(210, 105, 30, 0.4);
color: #d2691e;
}
.customize-hero h1 {
font-size: clamp(2.8rem, 5vw, 4rem);
margin-bottom: 2rem;
font-family: "Playfair Display", serif;
font-weight: 700;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.customize-hero p {
font-size: 1.3rem;
max-width: 750px;
margin: 0 auto 2.5rem;
opacity: 0.95;
line-height: 1.7;
font-family: "Cormorant Garamond", serif;
}
.breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
font-size: 0.95rem;
font-weight: 500;
font-family: "Inter", sans-serif;
}
.breadcrumb span {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.5rem;
background: rgba(245, 242, 237, 0.1);
border-radius: 25px;
border: 1px solid rgba(218, 165, 32, 0.2);
transition: all 0.3s ease;
}
.breadcrumb span.active {
background: rgba(218, 165, 32, 0.2);
border-color: rgba(218, 165, 32, 0.4);
color: #000000;
}
.breadcrumb i.fas.fa-chevron-right {
color: rgba(245, 242, 237, 0.6);
font-size: 0.8rem;
}
.customize-content {
padding: 80px 0;
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 50%, #e5d5c8 100%);
position: relative;
}
.customize-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.8;
}
.customize-layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4rem;
margin-bottom: 4rem;
position: relative;
z-index: 2;
}
.current-box {
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
padding: 2.5rem;
border-radius: 25px;
box-shadow: 0 15px 40px rgba(92, 51, 23, 0.15);
height: fit-content;
position: sticky;
top: 2rem;
border: 2px solid rgba(210, 105, 30, 0.1);
transition: all 0.3s ease;
}
.current-box:hover {
box-shadow: 0 20px 50px rgba(92, 51, 23, 0.2);
border-color: rgba(210, 105, 30, 0.2);
}
.box-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid rgba(210, 105, 30, 0.1);
}
.box-header h3 {
font-size: 1.6rem;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.8rem;
}
.box-header h3 i {
color: #d2691e;
font-size: 1.4rem;
}
.edit-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: "Inter", sans-serif;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.box-preview {
text-align: center;
margin-bottom: 2rem;
padding: 2rem;
background: linear-gradient(135deg, #f5f0e8 0%, #ede4d3 100%);
border-radius: 20px;
position: relative;
overflow: hidden;
}
.box-preview::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(
circle at center,
rgba(210, 105, 30, 0.1) 0%,
transparent 70%
);
}
.preview-box-3d {
width: 100px;
height: 100px;
margin: 0 auto 1.5rem;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s ease;
cursor: pointer;
}
.preview-box-3d:hover {
transform: rotateY(20deg) rotateX(10deg);
}
.preview-lid,
.preview-base {
position: absolute;
width: 100px;
height: 100px;
border-radius: 10px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.preview-base {
background: linear-gradient(135deg, #deb887 0%, #cd853f 100%);
transform: translateZ(-8px);
}
.preview-lid {
background: linear-gradient(135deg, #f4e4bc 0%, #deb887 100%);
transform: translateZ(8px);
border: 2px solid rgba(139, 69, 19, 0.3);
}
.premium-preview .preview-base {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
}
.premium-preview .preview-lid {
background: linear-gradient(135deg, #f4a460 0%, #d2691e 100%);
}
.deluxe-preview .preview-base {
background: linear-gradient(135deg, #8b4513 0%, #000000 100%);
}
.deluxe-preview .preview-lid {
background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);
}
.preview-ribbon {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 15px;
background: linear-gradient(135deg, #daa520 0%, #daa520 100%);
transform: translate(-50%, -50%) rotateZ(45deg);
border-radius: 8px;
box-shadow: 0 3px 10px rgba(218, 165, 32, 0.4);
z-index: 5;
}
.box-info {
position: relative;
z-index: 2;
}
.box-info h4 {
font-size: 1.4rem;
margin-bottom: 0.8rem;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 700;
}
.preview-price {
font-size: 1.1rem;
color: #8b4513;
font-weight: 600;
font-family: "Inter", sans-serif;
}
.current-items {
margin-bottom: 2rem;
}
.items-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid rgba(210, 105, 30, 0.2);
}
.items-header h4 {
font-size: 1.2rem;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.6rem;
}
.items-header h4 i {
color: #d2691e;
}
.items-count {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
font-family: "Inter", sans-serif;
}
.current-items ul {
list-style: none;
padding: 0;
}
.current-items li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.8rem 0;
border-bottom: 1px solid rgba(237, 230, 217, 0.5);
transition: all 0.3s ease;
}
.current-items li:hover {
background: rgba(210, 105, 30, 0.05);
padding-left: 0.5rem;
border-radius: 8px;
}
.current-items li:last-child {
border-bottom: none;
}
.current-items li > span:first-of-type {
display: flex;
align-items: center;
gap: 0.8rem;
flex: 1;
color: #000000;
font-weight: 500;
}
.current-items i {
color: #d2691e;
width: 20px;
font-size: 1.1rem;
}
.item-price {
font-weight: 700;
color: #8b4513;
font-family: "Inter", sans-serif;
font-size: 0.95rem;
}
.remove-item {
background: none;
border: none;
color: #e74c3c;
cursor: pointer;
padding: 0.3rem;
border-radius: 50%;
transition: all 0.3s ease;
opacity: 0;
transform: scale(0.8);
}
.current-items li:hover .remove-item {
opacity: 1;
transform: scale(1);
}
.remove-item:hover {
background: rgba(231, 76, 60, 0.1);
transform: scale(1.1);
}
.total-preview {
padding-top: 1.5rem;
border-top: 2px solid rgba(210, 105, 30, 0.2);
}
.total-line {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.1rem;
font-weight: 600;
color: #2c1810;
font-family: "Inter", sans-serif;
}
.total-amount {
font-size: 1.3rem;
color: #8b4513;
font-weight: 700;
}
.box-preview {
text-align: center;
margin-bottom: 2rem;
}
.preview-box {
width: 120px;
height: 120px;
margin: 0 auto 1rem;
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.essential-preview {
background: linear-gradient(135deg, #deb887 0%, #cd853f 100%);
}
.premium-preview {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
}
.deluxe-preview {
background: linear-gradient(135deg, #8b4513 0%, #000000 100%);
}
.preview-box h4 {
color: white;
font-size: 1rem;
margin-bottom: 0.5rem;
font-family: "Playfair Display", serif;
}
.preview-price {
color: white;
font-weight: 700;
font-size: 1.1rem;
}
.current-items h4 {
font-size: 1.2rem;
margin-bottom: 1rem;
color: #000000;
font-family: "Playfair Display", serif;
}
.current-items ul {
list-style: none;
padding: 0;
}
.current-items li {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.5rem 0;
color: #000000;
}
.current-items i {
color: #d2691e;
width: 20px;
}
.customize-options {
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
padding: 3rem;
border-radius: 25px;
box-shadow: 0 15px 40px rgba(92, 51, 23, 0.15);
border: 2px solid rgba(210, 105, 30, 0.1);
transition: all 0.3s ease;
}
.customize-options:hover {
box-shadow: 0 20px 50px rgba(92, 51, 23, 0.2);
border-color: rgba(210, 105, 30, 0.2);
}
.option-section {
margin-bottom: 3.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(237, 230, 217, 0.5);
}
.option-section:last-child {
border-bottom: none;
margin-bottom: 0;
}
.section-header {
margin-bottom: 2rem;
}
.section-header h3 {
font-size: 1.8rem;
margin-bottom: 0.8rem;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.8rem;
}
.section-header h3 i {
color: #d2691e;
font-size: 1.6rem;
}
.section-header p {
color: #000000;
opacity: 0.9;
font-size: 1rem;
font-family: "Cormorant Garamond", serif;
line-height: 1.6;
}
.size-options {
display: flex;
gap: 1rem;
}
.size-option {
flex: 1;
padding: 1rem;
border: 2px solid #ede6d9;
border-radius: 15px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.size-option.active {
border-color: #d2691e;
background: rgba(210, 105, 30, 0.1);
}
.size-visual {
width: 60px;
height: 60px;
margin: 0 auto 0.5rem;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.item-categories {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.category-btn {
background: #ede6d9;
color: #000000;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 20px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.category-btn.active {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
}
.items-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
}
.item-option {
padding: 1rem;
border: 2px solid #ede6d9;
border-radius: 10px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.item-option.selected {
border-color: #d2691e;
background: rgba(210, 105, 30, 0.1);
}
.item-option img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 0.5rem;
}
.item-option span {
display: block;
font-size: 0.9rem;
color: #000000;
font-weight: 500;
}
.personal-options {
display: grid;
gap: 1.5rem;
}
.input-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #000000;
font-family: "Inter", sans-serif;
}
.input-group input,
.input-group textarea {
width: 100%;
padding: 0.8rem;
border: 2px solid #ede6d9;
border-radius: 10px;
font-family: "Cormorant Garamond", serif;
transition: border-color 0.3s ease;
}
.input-group input:focus,
.input-group textarea:focus {
outline: none;
border-color: #d2691e;
}
.input-group textarea {
height: 80px;
resize: vertical;
}
.wrapping-options {
display: flex;
gap: 2rem;
}
.radio-option {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.customize-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
padding: 3rem;
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
border-radius: 25px;
box-shadow: 0 15px 40px rgba(92, 51, 23, 0.15);
border: 2px solid rgba(210, 105, 30, 0.1);
position: relative;
z-index: 2;
}
.price-summary {
flex: 1;
max-width: 400px;
}
.price-breakdown {
background: linear-gradient(135deg, #f5f0e8 0%, #ede4d3 100%);
padding: 2rem;
border-radius: 20px;
border: 2px solid rgba(210, 105, 30, 0.1);
}
.breakdown-line {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem 0;
font-size: 1rem;
color: #000000;
font-family: "Inter", sans-serif;
border-bottom: 1px solid rgba(210, 105, 30, 0.1);
}
.breakdown-line:last-child {
border-bottom: none;
}
.breakdown-line.total {
font-size: 1.3rem;
font-weight: 700;
color: #2c1810;
padding-top: 1.2rem;
border-top: 2px solid #d2691e;
margin-top: 1rem;
}
.action-buttons {
display: flex;
gap: 1.5rem;
}
.action-buttons button {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 18px 30px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 50px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Inter", sans-serif;
cursor: pointer;
}
.action-buttons button:hover {
transform: translateY(-3px);
}
.action-buttons .btn-primary {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border: none;
box-shadow: 0 8px 25px rgba(210, 105, 30, 0.4);
}
.action-buttons .btn-primary:hover {
box-shadow: 0 12px 35px rgba(210, 105, 30, 0.6);
}
.action-buttons .btn-outline {
background: transparent;
color: #8b4513;
border: 3px solid #d2691e;
}
.action-buttons .btn-outline:hover {
background: #d2691e;
color: white;
box-shadow: 0 8px 25px rgba(210, 105, 30, 0.4);
}
@media (max-width: 768px) {
.hero-features {
flex-direction: column;
gap: 1.5rem;
}
.steps-nav {
flex-direction: column;
gap: 2rem;
}
.step-connector {
width: 3px;
height: 60px;
margin: -10px 0;
}
.box-sizes {
grid-template-columns: 1fr;
gap: 2rem;
}
.size-specs {
flex-direction: column;
gap: 1rem;
}
.step-actions {
flex-direction: column;
gap: 1rem;
}
.customize-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.current-box {
position: static;
}
.size-options {
flex-direction: column;
gap: 1rem;
}
.customize-actions {
flex-direction: column;
align-items: stretch;
gap: 2rem;
}
.action-buttons {
flex-direction: column;
gap: 1rem;
}
.breadcrumb {
flex-direction: column;
gap: 0.5rem;
}
.breadcrumb i.fas.fa-chevron-right {
transform: rotate(90deg);
}
}
/* Go Back Button */
.go-back-container {
position: fixed;
top: 20px;
left: 20px;
z-index: 1000;
}
.go-back-btn {
background: rgba(245, 242, 237, 0.95);
border: 2px solid #000000;
color: #000000;
padding: 12px 20px;
border-radius: 50px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(92, 51, 23, 0.2);
font-family: "Inter", sans-serif;
}
.go-back-btn:hover {
background: #000000;
color: #f5f2ed;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(92, 51, 23, 0.3);
}
.go-back-btn i {
margin-right: 8px;
}
/* Pinned Flower Card */
.flower-card.pinned {
border: 3px solid #d2691e;
box-shadow: 0 8px 25px rgba(210, 105, 30, 0.2);
transform: scale(1.02);
}
.flower-card.pinned .flower-badge {
background: linear-gradient(135deg, #d2691e, #a0522d);
color: white;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Modern Flower Cards */
.flower-card {
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(139, 69, 19, 0.12);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(218, 165, 32, 0.1);
position: relative;
display: flex;
flex-direction: column;
}
.flower-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 25px 60px rgba(139, 69, 19, 0.25);
border-color: rgba(218, 165, 32, 0.3);
}
.flower-image {
position: relative;
overflow: hidden;
height: 220px;
}
.flower-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.flower-card:hover .flower-image img {
transform: scale(1.08);
}
.flower-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(44, 24, 16, 0.75);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
}
.flower-card:hover .flower-overlay {
opacity: 1;
}
/* Do not show quick view on flowers; keep heart clickable */
.flower-overlay { pointer-events: none; }
.flower-overlay .quick-view-btn { display: none !important; }
.flower-badge {
position: absolute;
top: 15px;
left: 15px;
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: "Inter", sans-serif;
box-shadow: 0 4px 15px rgba(210, 105, 30, 0.4);
}
.flower-badge.seasonal {
background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}
.flower-badge.exotic {
background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
}
.flower-badge.bestseller {
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}
.flower-badge.rustic {
background: linear-gradient(135deg, #795548 0%, #5d4037 100%);
}
.flower-content {
padding: 20px;
text-align: center;
}
.flower-content h3 {
font-size: 1.3rem;
margin-bottom: 15px;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 600;
text-align: center;
position: relative;
padding-bottom: 8px;
}
.flower-content h3::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: #d2691e;
border-radius: 1px;
}
.flower-price {
margin: 15px 0;
text-align: center;
position: relative;
padding-bottom: 8px;
}
.flower-price::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: #a0522d;
border-radius: 1px;
}
.current-price {
font-size: 1.5rem;
font-weight: 700;
color: #8b4513;
font-family: "Inter", sans-serif;
margin-right: 8px;
}
.original-price {
font-size: 1.1rem;
color: #999;
text-decoration: line-through;
font-family: "Inter", sans-serif;
}
.flower-actions {
display: flex;
gap: 8px;
width: 100%;
}
.flower-actions button {
flex: 1;
padding: 8px 12px;
font-size: 0.8rem;
border-radius: 20px;
font-weight: 600;
font-family: "Inter", sans-serif;
cursor: pointer;
z-index: 10;
position: relative;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 5px;
justify-content: center;
border: none;
}
.flower-actions .btn-outline {
background: transparent;
color: #8b4513;
border: 2px solid #d2691e;
}
.flower-actions .btn-outline:hover {
background: #d2691e;
color: white;
transform: translateY(-2px);
}
.flower-actions .btn-primary {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border: 2px solid transparent;
}
.flower-actions .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(210, 105, 30, 0.3);
}
.flower-actions .btn-outline:disabled,
.flower-actions .btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.flower-actions .btn-outline:disabled:hover,
.flower-actions .btn-primary:disabled:hover {
transform: none;
box-shadow: none;
}
/* Modern Product Cards */
.product-card {
background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(139, 69, 19, 0.12);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(218, 165, 32, 0.1);
position: relative;
}
.product-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 25px 60px rgba(139, 69, 19, 0.25);
border-color: rgba(218, 165, 32, 0.3);
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(44, 24, 16, 0.75);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.product-card:hover .product-overlay {
opacity: 1;
}
/* Global outline removal */
* {
outline: none;
}
/* Smooth page transitions */
html {
scroll-behavior: smooth;
}
body {
transition: opacity 0.3s ease-in-out;
}
.page-transition {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.page-transition.loaded {
opacity: 1;
}
.product-badge {
position: absolute;
top: 15px;
left: 15px;
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: "Inter", sans-serif;
box-shadow: 0 4px 15px rgba(210, 105, 30, 0.4);
}
.product-badge.organic {
background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
}
.product-badge.bestseller {
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}
.product-badge.artisan {
background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
}
.product-badge.luxury {
background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}
.product-badge.natural {
background: linear-gradient(135deg, #16a085 0%, #1abc9c 100%);
}
.product-badge.gourmet {
background: linear-gradient(135deg, #d35400 0%, #e74c3c 100%);
}
.product-badge.therapeutic {
background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
}
.product-header {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 12px;
}
.product-header h3 {
font-size: 1.3rem;
margin: 0;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 600;
text-align: center;
}
.product-rating {
display: none;
}
.product-rating i {
color: #daa520;
}
.product-rating span {
margin-left: 5px;
color: #000000;
font-weight: 500;
font-family: "Inter", sans-serif;
}
.product-description {
color: #000000;
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 15px;
font-family: "Cormorant Garamond", serif;
}
.product-details {
display: none;
}
.product-quality,
.product-origin {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.8rem;
color: #8b4513;
font-weight: 500;
font-family: "Inter", sans-serif;
}
.product-quality i,
.product-origin i {
color: #27ae60;
font-size: 0.9rem;
}
.product-footer {
padding-top: 15px;
/* Remove thin divider line under card content */
border-top: none;
}
.product-price {
margin-bottom: 12px;
}
.product-actions {
display: flex;
gap: 8px;
width: 100%;
}
.product-actions button {
padding: 8px 16px;
font-size: 0.85rem;
border-radius: 20px;
font-weight: 600;
font-family: "Inter", sans-serif;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 5px;
flex: 1;
justify-content: center;
}
.more-btn {
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
color: #8b4513;
border: 2px solid #d2691e;
}
.more-btn:hover {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(210, 105, 30, 0.3);
}
.add-to-cart-btn {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border: 2px solid #d2691e;
}
.add-to-cart-btn:hover {
background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(139, 69, 19, 0.4);
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 40px;
}
/* Gender Filter Dropdown */
.gender-filter {
position: relative;
display: inline-block;
margin-right: 0;
}
.gender-dropdown-btn {
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
color: #8b4513;
border: 2px solid #d2691e;
padding: 12px 20px;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
font-family: "Inter", sans-serif;
transition: all 0.3s ease;
font-size: 1rem;
display: flex;
align-items: center;
gap: 8px;
height: 48px;
}
.gender-dropdown-btn:hover {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(210, 105, 30, 0.3);
}
.gender-dropdown-content {
display: none;
position: absolute;
background: white;
min-width: 200px;
box-shadow: 0 8px 25px rgba(92, 51, 23, 0.15);
border-radius: 15px;
z-index: 1000;
border: 2px solid rgba(210, 105, 30, 0.1);
top: 100%;
left: 0;
margin-top: 5px;
}
.gender-dropdown-content.show {
display: block;
}
.gender-option {
position: relative;
}
.gender-option > a {
color: #000000;
padding: 12px 16px;
text-decoration: none;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
font-family: "Inter", sans-serif;
transition: all 0.3s ease;
border-radius: 10px;
margin: 5px;
}
.gender-option > a:hover {
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 100%);
color: #d2691e;
}
.subcategory-dropdown {
display: none;
position: absolute;
left: 100%;
top: 0;
background: white;
min-width: 180px;
box-shadow: 0 8px 25px rgba(92, 51, 23, 0.15);
border-radius: 15px;
border: 2px solid rgba(210, 105, 30, 0.1);
z-index: 1001;
}
.gender-option:hover .subcategory-dropdown {
display: block;
}
.subcategory-dropdown a {
color: #000000;
padding: 10px 16px;
text-decoration: none;
display: block;
font-weight: 500;
font-family: "Inter", sans-serif;
transition: all 0.3s ease;
border-radius: 8px;
margin: 3px;
position: relative;
}
.subcategory-dropdown a:hover {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
}
.subcategory-dropdown a.selected {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
}
.subcategory-dropdown a.selected::after {
content: "✓";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
/* Sort Button */
.sort-btn {
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
color: #8b4513;
border: 2px solid #d2691e;
padding: 12px 20px;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
font-family: "Inter", sans-serif;
transition: all 0.3s ease;
font-size: 1rem;
display: flex;
align-items: center;
gap: 8px;
height: 48px;
position: absolute;
right: -10px;
}
.sort-btn:hover {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(210, 105, 30, 0.3);
}
.pagination-btn {
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
color: #8b4513;
border: 2px solid #d2691e;
padding: 12px 20px;
border-radius: 25px;
cursor: pointer;
font-weight: 600;
font-family: "Inter", sans-serif;
transition: all 0.3s ease;
font-size: 1rem;
min-width: 50px;
}
.pagination-btn:hover,
.pagination-btn.active {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(210, 105, 30, 0.3);
}
@media (max-width: 768px) {
.product-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.product-details {
flex-direction: column;
gap: 8px;
}
.product-footer {
align-items: stretch;
}
.product-actions {
justify-content: space-between;
}
}
.flower-card.out-of-stock {
opacity: 0.6;
pointer-events: none;
}
.product-card.out-of-stock {
opacity: 0.6;
pointer-events: none;
}
.out-of-stock-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(128, 128, 128, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.out-of-stock-text {
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-family: "Inter", sans-serif;
}
.out-of-stock-text span {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.flower-card.out-of-stock button {
opacity: 0.5;
cursor: not-allowed;
}
/* Modern Flowers Page Hero */
.page-hero {
position: relative;
background: linear-gradient(
135deg,
#2c1810 0%,
#000000 30%,
#000000 70%,
#8b4513 100%
);
color: #f5f2ed;
padding: 160px 0 100px;
text-align: center;
overflow: hidden;
opacity: 0;
animation: fadeIn 0.8s ease-in-out forwards;
}
/* Flowers Page Content */
.flowers-content,
.products-grid-section {
opacity: 0;
animation: fadeIn 0.8s ease-in-out forwards;
animation-delay: 0.1s;
}
/* Breadcrumb Section */
.breadcrumb-section {
padding: 10px 0;
margin-top: 80px;
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 100%);
border-bottom: 1px solid rgba(210, 105, 30, 0.1);
position: relative;
opacity: 0;
animation: fadeIn 0.8s ease-in-out forwards;
}
.go-back-btn-container {
position: absolute;
left: 2rem;
top: 50%;
transform: translateY(-50%);
}
.go-back-btn {
background: rgba(245, 242, 237, 0.9);
border: 2px solid #000000;
color: #000000;
padding: 10px 20px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: "Inter", sans-serif;
font-size: 0.9rem;
text-decoration: none;
display: inline-block;
}
.go-back-btn:hover {
background: #000000;
color: #f5f2ed;
}
.go-back-btn i {
margin-right: 8px;
}
/* Modern Flower Detail Page */
.flower-detail {
padding: 60px 0 80px;
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 100%);
opacity: 0;
animation: fadeIn 0.8s ease-in-out forwards;
animation-delay: 0.1s;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
font-size: 0.9rem;
color: #000000;
font-family: "Inter", sans-serif;
}
.breadcrumb a {
color: #8b4513;
text-decoration: none;
transition: all 0.3s ease;
padding: 0.6rem 1.2rem;
border-radius: 25px;
background: rgba(245, 242, 237, 0.8);
border: 2px solid rgba(210, 105, 30, 0.2);
font-weight: 500;
}
.breadcrumb a:hover {
color: #d2691e;
background: rgba(210, 105, 30, 0.1);
border-color: rgba(210, 105, 30, 0.4);
transform: translateY(-1px);
}
.breadcrumb span:not(.breadcrumb-dash) {
color: white;
font-weight: 600;
padding: 0.6rem 1.2rem;
border-radius: 25px;
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
box-shadow: 0 4px 15px rgba(210, 105, 30, 0.3);
}
.breadcrumb-dash {
color: #8b4513 !important;
font-weight: 500 !important;
padding: 0 !important;
border-radius: 0 !important;
background: none !important;
box-shadow: none !important;
border: none !important;
}
.breadcrumb-line {
width: 30px;
height: 1px;
background: rgba(210, 105, 30, 0.1);
}
.flower-detail-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.flower-gallery {
position: relative;
}
.main-image {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(92, 51, 23, 0.15);
}
.main-image img {
width: 100%;
height: 500px;
object-fit: cover;
transition: transform 0.3s ease;
}
.main-image:hover img {
transform: scale(1.05);
}
.flower-info h1 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: #2c1810;
font-family: "Playfair Display", serif;
font-weight: 700;
text-align: center;
}
.flower-info .flower-price {
margin-bottom: 2rem;
text-align: center;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(210, 105, 30, 0.1);
}
.flower-info .current-price {
font-size: 2rem;
font-weight: 700;
color: #8b4513;
font-family: "Inter", sans-serif;
}
.flower-description {
margin-bottom: 2.5rem;
}
.flower-description p {
font-size: 1.1rem;
line-height: 1.7;
color: #000000;
font-family: "Cormorant Garamond", serif;
}
.flower-features {
display: flex;
gap: 2rem;
margin-bottom: 3rem;
}
.feature {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
border-radius: 15px;
box-shadow: 0 4px 15px rgba(92, 51, 23, 0.1);
border: 1px solid rgba(210, 105, 30, 0.1);
}
.feature i {
color: #d2691e;
font-size: 1.2rem;
}
.feature span {
color: #000000;
font-weight: 500;
font-family: "Inter", sans-serif;
}
.flower-actions {
display: flex;
justify-content: center;
margin-top: 2rem;
}
.flower-actions .add-to-cart-btn {
padding: 15px 40px;
font-size: 1.1rem;
font-weight: 700;
border-radius: 30px;
min-width: 200px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Simplified Footer */
.footer {
background: linear-gradient(135deg, #e6d3a3 0%, #e6d3a3 100%);
color: #d2691e;
padding: 40px 0 20px;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.footer-contact h3 {
color: #000000;
margin-bottom: 20px;
font-family: "Inter", sans-serif;
font-size: 1.5rem;
font-weight: 600;
}
.footer-contact .contact-info p {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-family: "Inter", sans-serif;
color: #000000;
}
.footer-contact .contact-info i {
color: #000000;
width: 20px;
}
.footer-social .social-links {
display: flex;
gap: 15px;
}
.footer-social .social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: rgba(245, 242, 237, 0.1);
border: 2px solid #000000;
border-radius: 50%;
color: #000000;
font-size: 1.2rem;
transition: all 0.3s ease;
text-decoration: none;
}
.footer-social .social-links a:hover {
background: #000000;
color: #ffffff;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.3);
color: #000000 !important;
font-family: "Inter", sans-serif;
font-weight: 500;
}
.footer-bottom p {
color: #000000 !important;
}
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
gap: 30px;
text-align: center;
}
}
/* Build Box Product Selection Styles */
.product-filters {
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
padding: 25px;
border-radius: 20px;
margin-bottom: 30px;
border: 2px solid rgba(210, 105, 30, 0.1);
box-shadow: 0 8px 25px rgba(92, 51, 23, 0.08);
position: relative;
text-align: right;
}
.filter-row {
display: flex;
justify-content: flex-end;
margin-bottom: 15px;
}
.filter-row:last-child {
margin-bottom: 0;
}
.filter-group {
display: inline-flex;
flex-direction: column;
gap: 5px;
min-width: 150px;
margin-left: auto;
}
.filter-group label {
font-weight: 600;
color: #000000;
font-family: "Inter", sans-serif;
font-size: 0.9rem;
}
.filter-group select {
padding: 12px 16px;
border: none;
border-radius: 25px;
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
color: #000000;
font-family: "Inter", sans-serif;
border: 2px solid rgba(210, 105, 30, 0.2);
cursor: pointer;
transition: all 0.3s ease;
}
.filter-group select:hover {
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 100%);
border-color: #d2691e;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(210, 105, 30, 0.2);
}
.filter-group select:focus {
outline: none;
border-color: #d2691e;
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
box-shadow:
0 0 0 3px rgba(210, 105, 30, 0.1),
0 4px 12px rgba(210, 105, 30, 0.2);
}
.selected-count {
margin-left: auto;
padding: 12px 20px;
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border-radius: 25px;
font-weight: 600;
font-family: "Inter", sans-serif;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(210, 105, 30, 0.3);
border: 2px solid transparent;
transition: all 0.3s ease;
}
.selected-count:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(210, 105, 30, 0.4);
}
.product-card {
background: linear-gradient(145deg, #ffffff 0%, #fefcf8 50%, #f8f5f0 100%);
border-radius: 24px;
overflow: hidden;
box-shadow:
0 8px 32px rgba(92, 51, 23, 0.12),
0 2px 8px rgba(210, 105, 30, 0.08);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid rgba(210, 105, 30, 0.08);
position: relative;
backdrop-filter: blur(10px);
}
.product-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #d2691e, transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.product-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow:
0 20px 60px rgba(92, 51, 23, 0.2),
0 8px 24px rgba(210, 105, 30, 0.15);
border-color: rgba(210, 105, 30, 0.2);
}
.product-card:hover::before {
opacity: 1;
}
.product-card.selected {
border-color: #d2691e;
box-shadow:
0 12px 40px rgba(210, 105, 30, 0.25),
0 4px 16px rgba(210, 105, 30, 0.15);
background: linear-gradient(145deg, #ffffff 0%, #fef9f5 50%, #f5f2ed 100%);
}
.product-card.selected::before {
opacity: 1;
background: linear-gradient(90deg, #d2691e, #a0522d, #d2691e);
height: 3px;
}
.product-card .product-image {
position: relative;
overflow: hidden;
height: 220px;
}
.product-card .product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.product-card:hover .product-image img {
transform: scale(1.08);
filter: brightness(1.1) saturate(1.2);
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(44, 24, 16, 0.1) 0%,
rgba(92, 51, 23, 0.2) 100%
);
opacity: 0;
transition: all 0.3s ease;
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding: 15px;
}
.product-card:hover .product-overlay {
opacity: 1;
}
.product-badge {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(245, 242, 237, 0.95) 100%
);
color: #000000;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(10px);
border: 1px solid rgba(210, 105, 30, 0.2);
box-shadow: 0 2px 8px rgba(92, 51, 23, 0.15);
}
.product-badge.premium {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border-color: rgba(255, 255, 255, 0.2);
}
.product-content {
padding: 20px;
position: relative;
text-align: center;
}
.product-content h4 {
font-size: 1.1rem;
font-weight: 700;
color: #2c1810;
margin-bottom: 8px;
font-family: "Inter", sans-serif;
line-height: 1.3;
}
.select-product {
width: 100%;
padding: 10px;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
color: #8b4513;
border: 2px solid #d2691e;
font-weight: 600;
font-family: "Inter", sans-serif;
cursor: pointer;
transition: all 0.3s ease;
}
.select-product:hover {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
transform: translateY(-1px);
}
.select-product.selected {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
}
.select-product.selected i {
transform: rotate(45deg);
}
.selected-products-summary {
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 100%);
padding: 20px;
border-radius: 15px;
margin-bottom: 30px;
border: 1px solid rgba(210, 105, 30, 0.1);
}
.selected-products-summary h4 {
color: #000000;
margin-bottom: 15px;
font-family: "Inter", sans-serif;
}
.selected-items-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 15px;
}
.selected-item {
background: white;
padding: 8px 12px;
border-radius: 20px;
font-size: 0.9rem;
color: #000000;
border: 1px solid rgba(210, 105, 30, 0.2);
display: flex;
align-items: center;
gap: 8px;
}
.selected-item .remove-item {
background: none;
border: none;
color: #d2691e;
cursor: pointer;
font-size: 0.8rem;
padding: 0;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.selected-item .remove-item:hover {
background: #d2691e;
color: white;
}
.products-total {
text-align: right;
font-weight: 600;
color: #000000;
font-size: 1.1rem;
padding-top: 15px;
border-top: 1px solid rgba(210, 105, 30, 0.2);
}
@media (max-width: 768px) {
.filter-row {
flex-direction: column;
gap: 15px;
align-items: stretch;
}
.filter-group {
min-width: auto;
}
.selected-count {
margin-left: 0;
text-align: center;
}
}
.product-card .brand {
color: #d2691e;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Inter", sans-serif;
position: relative;
}
.product-card .brand::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 30px;
height: 1px;
background: linear-gradient(90deg, #d2691e, transparent);
}
.product-card .description {
display: none;
}
.product-card .product-price {
margin-bottom: 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.product-card .current-price {
font-size: 1.3rem;
font-weight: 700;
color: #2c1810;
font-family: "Inter", sans-serif;
}
.select-product {
width: 100%;
padding: 14px 20px;
border: none;
border-radius: 16px;
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
color: #000000;
border: 2px solid #d2691e;
font-weight: 600;
font-family: "Inter", sans-serif;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
.select-product::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transition: left 0.5s ease;
}
.select-product:hover::before {
left: 100%;
}
.select-product:hover {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(210, 105, 30, 0.3);
border-color: #a0522d;
}
.select-product.selected {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border-color: #a0522d;
box-shadow: 0 4px 16px rgba(210, 105, 30, 0.4);
}
.select-product.selected i {
transform: rotate(45deg);
transition: transform 0.3s ease;
}
.select-product i {
margin-right: 8px;
transition: transform 0.3s ease;
}
/* Premium card animations */
@keyframes cardGlow {
0%,
100% {
box-shadow:
0 8px 32px rgba(92, 51, 23, 0.12),
0 2px 8px rgba(210, 105, 30, 0.08);
}
50% {
box-shadow:
0 12px 40px rgba(92, 51, 23, 0.18),
0 4px 12px rgba(210, 105, 30, 0.12);
}
}
.product-card.selected {
animation: cardGlow 2s ease-in-out infinite;
}
/* Products Grid Layout */
.products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* Container for build box */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* Responsive adjustments */
@media (max-width: 1200px) {
.products-grid {
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
}
@media (max-width: 768px) {
.products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 0 15px;
}
.container {
padding: 0 15px;
}
}
@media (max-width: 480px) {
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* Box Selection Layout */
.box-selection-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.box-preview-section {
display: flex;
justify-content: center;
align-items: center;
}
.box-preview-container {
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #f5f2ed 0%, #ede6d9 100%);
border-radius: 20px;
box-shadow: 0 8px 25px rgba(92, 51, 23, 0.1);
}
.box-3d-preview {
perspective: 1000px;
}
.box-visual {
width: 150px;
height: 150px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-15deg) rotateY(25deg);
transition: all 0.3s ease;
}
.box-visual:hover {
transform: rotateX(-10deg) rotateY(30deg) scale(1.05);
}
.box-lid,
.box-base {
position: absolute;
width: 150px;
height: 150px;
border-radius: 8px;
}
.box-lid {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
transform: translateZ(20px) rotateX(-5deg);
box-shadow: 0 4px 15px rgba(210, 105, 30, 0.3);
}
.box-base {
background: linear-gradient(135deg, #8b4513 0%, #000000 100%);
transform: translateZ(0px);
}
.box-ribbon {
position: absolute;
top: 50%;
left: -10px;
right: -10px;
height: 20px;
background: linear-gradient(90deg, #ffd700 0%, #ffa500 100%);
transform: translateZ(25px) translateY(-50%);
border-radius: 10px;
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}
.selected-products-section {
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
padding: 25px;
border-radius: 20px;
border: 2px solid rgba(210, 105, 30, 0.1);
box-shadow: 0 8px 25px rgba(92, 51, 23, 0.08);
}
.selected-products-section h4 {
color: #000000;
margin-bottom: 20px;
font-family: "Inter", sans-serif;
font-size: 1.1rem;
}
.selected-items-scroll {
max-height: 200px;
overflow-y: auto;
margin-bottom: 20px;
padding: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.selected-items-scroll::-webkit-scrollbar {
width: 6px;
}
.selected-items-scroll::-webkit-scrollbar-track {
background: rgba(210, 105, 30, 0.1);
border-radius: 3px;
}
.selected-items-scroll::-webkit-scrollbar-thumb {
background: #d2691e;
border-radius: 3px;
}
.selected-item {
background: white;
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 10px;
border: 1px solid rgba(210, 105, 30, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: #000000;
}
.products-total {
padding-top: 20px;
border-top: 2px solid rgba(210, 105, 30, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
}
.total-label {
font-weight: 600;
color: #000000;
font-family: "Inter", sans-serif;
}
.total-amount {
font-weight: 700;
color: #2c1810;
font-size: 1.2rem;
font-family: "Inter", sans-serif;
}
.box-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-bottom: 30px;
}
.box-option {
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
padding: 25px;
border-radius: 20px;
border: 2px solid rgba(210, 105, 30, 0.1);
box-shadow: 0 8px 25px rgba(92, 51, 23, 0.08);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}
.box-option:hover:not(.disabled) {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(92, 51, 23, 0.15);
border-color: rgba(210, 105, 30, 0.3);
}
.box-option.disabled {
opacity: 0.5;
cursor: not-allowed;
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}
.box-option.selected {
border-color: #d2691e;
box-shadow: 0 12px 35px rgba(210, 105, 30, 0.25);
background: linear-gradient(135deg, #fef9f5 0%, #f5f2ed 100%);
}
.box-option-header {
text-align: center;
margin-bottom: 20px;
}
.box-option-header h4 {
color: #2c1810;
margin-bottom: 8px;
font-family: "Inter", sans-serif;
font-size: 1.1rem;
}
.price-range {
color: #d2691e;
font-weight: 600;
font-size: 0.9rem;
font-family: "Inter", sans-serif;
}
.color-options {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 15px;
}
.color-choice {
width: 40px;
height: 40px;
border-radius: 50%;
border: 3px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.color-choice:hover:not(.disabled) {
transform: scale(1.1);
border-color: #d2691e;
}
.color-choice.selected {
border-color: #d2691e;
box-shadow: 0 0 0 2px rgba(210, 105, 30, 0.3);
}
.color-choice.disabled {
opacity: 0.3;
cursor: not-allowed;
}
.restriction-text {
text-align: center;
font-size: 0.8rem;
color: #8b4513;
font-style: italic;
margin-top: 10px;
}
.box-option.disabled .restriction-text {
color: #999;
}
/* Box color variations */
.box-visual.beige .box-lid {
background: linear-gradient(135deg, #f5deb3 0%, #deb887 100%);
}
.box-visual.cream .box-lid {
background: linear-gradient(135deg, #fffdd0 0%, #f0e68c 100%);
}
.box-visual.white .box-lid {
background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
}
.box-visual.gold .box-lid {
background: linear-gradient(135deg, #ffd700 0%, #daa520 100%);
}
.box-visual.burgundy .box-lid {
background: linear-gradient(135deg, #800020 0%, #4a0012 100%);
}
.box-visual.black .box-lid {
background: linear-gradient(135deg, #2c2c2c 0%, #000000 100%);
}
@media (max-width: 768px) {
.box-selection-layout {
grid-template-columns: 1fr;
gap: 25px;
}
.box-options {
grid-template-columns: 1fr;
gap: 20px;
}
.box-preview-container {
width: 250px;
height: 250px;
}
}
/* Box Selection Selected Products Font Override */
.selected-items-scroll .selected-item span:first-child {
font-family: "Inter", sans-serif !important;
font-size: 1rem;
font-weight: 600;
color: #2c1810;
}
.selected-items-scroll .selected-item span:last-child {
font-family: "Inter", sans-serif !important;
font-size: 1rem;
font-weight: 700;
color: #8b4513;
}
/* Personalization Step Summary Styling */
.selected-product-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
margin-bottom: 8px;
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
border-radius: 12px;
border: 1px solid rgba(210, 105, 30, 0.1);
font-family: "Inter", sans-serif;
}
.selected-product-item span:first-child {
font-weight: 600;
color: #2c1810;
}
.selected-product-item span:last-child {
font-weight: 700;
color: #8b4513;
}
/* Modern Personalization Step Styling */
.personalization-layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
margin-bottom: 40px;
}
.box-display-section {
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
padding: 30px;
border-radius: 25px;
box-shadow: 0 15px 40px rgba(92, 51, 23, 0.15);
border: 2px solid rgba(210, 105, 30, 0.1);
text-align: center;
height: fit-content;
}
.box-preview-title {
font-size: 1.2rem;
font-weight: 700;
color: #2c1810;
margin-bottom: 20px;
font-family: "Inter", sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
}
.chosen-box-preview .box-icon {
width: 120px;
height: 120px;
margin: 0 auto 20px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f5f0e8 0%, #ede4d3 100%);
box-shadow: 0 8px 25px rgba(92, 51, 23, 0.1);
}
.chosen-box-preview .box-details h5 {
font-size: 1.3rem;
color: #2c1810;
margin-bottom: 8px;
font-family: "Inter", sans-serif;
font-weight: 700;
}
.chosen-box-preview .box-details p {
color: #8b4513;
font-weight: 600;
font-family: "Inter", sans-serif;
}
.personalization-form {
background: linear-gradient(135deg, #ffffff 0%, #f8f5f0 100%);
padding: 40px;
border-radius: 25px;
box-shadow: 0 15px 40px rgba(92, 51, 23, 0.15);
border: 2px solid rgba(210, 105, 30, 0.1);
}
.form-field {
margin-bottom: 30px;
}
.form-field label {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.1rem;
font-weight: 700;
color: #2c1810;
margin-bottom: 12px;
font-family: "Inter", sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-field label i {
color: #d2691e;
font-size: 1.2rem;
width: 20px;
}
.form-field input,
.form-field textarea {
width: 100%;
padding: 18px 24px;
border: none;
border-radius: 20px;
background: linear-gradient(135deg, #ffffff 0%, #f5f2ed 100%);
border: 2px solid rgba(210, 105, 30, 0.1);
font-family: "Inter", sans-serif;
font-size: 1rem;
color: #2c1810;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(92, 51, 23, 0.08);
}
.form-field input:focus,
.form-field textarea:focus {
outline: none;
border-color: #d2691e;
box-shadow:
0 0 0 4px rgba(210, 105, 30, 0.1),
0 8px 25px rgba(92, 51, 23, 0.15);
background: linear-gradient(135deg, #ffffff 0%, #fef9f5 100%);
transform: translateY(-2px);
}
.form-field textarea {
height: 120px;
resize: vertical;
font-family: "Cormorant Garamond", serif;
font-size: 1.1rem;
line-height: 1.6;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: rgba(92, 51, 23, 0.6);
font-style: italic;
}
@media (max-width: 768px) {
.personalization-layout {
grid-template-columns: 1fr;
gap: 25px;
}
.personalization-form {
padding: 25px;
}
.box-display-section {
padding: 25px;
}
}
/* Build Steps Section Adjustment */
.build-steps {
margin-top: 80px;
}
/* Build steps: mobile/tablet responsive polish */
@media (max-width: 992px) {
.steps-header h2 {
font-size: clamp(2rem, 4.2vw, 2.6rem);
}
.section-subtitle {
font-size: 1.05rem;
margin-bottom: 2rem;
}
/* Product grid: two columns on tablets for better density */
#step-1 .products-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
}
#step-1 .product-card .btn-primary {
padding: 10px 14px;
font-size: 0.95rem;
}
}
@media (max-width: 768px) {
/* Sticky, scrollable steps on phones */
.steps-nav {
position: sticky;
top: 70px;
z-index: 5;
background: rgba(245, 242, 237, 0.9);
backdrop-filter: blur(6px);
gap: 12px;
overflow-x: auto;
padding: 8px 8px 12px;
-webkit-overflow-scrolling: touch;
}
.steps-nav::-webkit-scrollbar {
height: 6px;
}
.steps-nav::-webkit-scrollbar-thumb {
background: rgba(139, 69, 19, 0.3);
border-radius: 6px;
}
.step {
min-width: 160px;
padding: 1rem;
}
.step.active {
transform: none;
}
.step-connector {
display: none;
}
.build-steps {
padding: 60px 0;
}
/* Filters block: full-width stacked */
.product-filters {
gap: 12px;
}
.filter-row {
flex-direction: column;
align-items: stretch;
}
.filter-group {
width: 100%;
}
.filter-group select {
width: 100%;
}
/* Product grid/cards: single column on phones */
#step-1 .products-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
#step-1 .product-card {
border-radius: 18px;
}
#step-1 .product-image {
height: 200px;
}
#step-1 .product-content {
padding: 1rem;
}
#step-1 .product-content h4 {
font-size: 1rem;
}
#step-1 .product-price .current-price {
font-size: 1.05rem;
}
#step-1 .btn-primary.select-product {
width: 100%;
justify-content: center;
padding: 12px 16px;
font-size: 1rem;
}
/* Box selection step */
#step-2 .box-sizes {
grid-template-columns: 1fr;
gap: 1rem;
}
#step-2 .box-option {
padding: 14px;
}
/* Personalization step already stacks via .personalization-layout rules */
/* Summary panel as footer CTA on phones */
.build-summary {
position: sticky;
bottom: 0;
top: auto;
right: auto;
transform: none;
margin: 1rem 0 0;
max-width: none;
border-radius: 16px;
}
.build-summary .btn-primary {
width: 100%;
}
}
@media (max-width: 480px) {
.step {
min-width: 140px;
}
#step-1 .product-image {
height: 180px;
}
.steps-header h2 {
font-size: 1.8rem;
}
.section-subtitle {
font-size: 0.95rem;
}
}
/* Updated Gift Boxes Grid - Smaller and Fancier */
.giftboxes-grid {
display: grid;
/* Center gracefully with any visible count (2 now, 3 later) */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
justify-content: center;
justify-items: center;
gap: 2rem;
margin-bottom: 4rem;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
/* Giftboxes page: fine-tune mobile spacing */
@media (max-width: 992px) {
.giftboxes-grid {
grid-template-columns: repeat(2, 1fr);
max-width: 720px;
}
}
@media (max-width: 768px) {
.giftboxes-grid-section {
padding: 40px 0;
}
}
.giftbox-item {
background: linear-gradient(145deg, #ffffff 0%, #fefcf8 50%, #f8f5f0 100%);
border-radius: 20px;
overflow: hidden;
box-shadow:
0 12px 35px rgba(92, 51, 23, 0.12),
0 4px 15px rgba(210, 105, 30, 0.08);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid rgba(210, 105, 30, 0.1);
position: relative;
backdrop-filter: blur(10px);
max-width: 320px;
}
.giftbox-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, #d2691e, transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.giftbox-item:hover {
transform: translateY(-15px) scale(1.02);
box-shadow:
0 25px 70px rgba(92, 51, 23, 0.2),
0 8px 25px rgba(210, 105, 30, 0.15);
border-color: rgba(210, 105, 30, 0.3);
}
.giftbox-item:hover::before {
opacity: 1;
}
.giftbox-image {
position: relative;
overflow: hidden;
height: 200px;
}
.giftbox-content {
padding: 20px;
text-align: center;
}
.giftbox-content h3 {
font-size: 1.3rem;
margin-bottom: 10px;
color: #2c1810;
font-family: "Inter", sans-serif;
font-weight: 700;
}
.giftbox-content .price {
font-size: 1.5rem;
font-weight: 700;
color: #8b4513;
margin-bottom: 12px;
font-family: "Inter", sans-serif;
}
.giftbox-content .description {
font-size: 0.9rem;
line-height: 1.5;
color: #000000;
margin-bottom: 20px;
font-family: "Cormorant Garamond", serif;
}
.giftbox-actions {
display: flex;
gap: 8px;
}
.giftbox-actions button {
flex: 1;
padding: 10px 16px;
font-size: 0.85rem;
border-radius: 20px;
font-weight: 600;
font-family: "Inter", sans-serif;
cursor: pointer;
transition: all 0.3s ease;
}
/* Build Your Box Section */
.build-your-box-section {
margin-top: 3rem;
padding-top: 3rem;
border-top: 2px solid rgba(210, 105, 30, 0.1);
}
.build-box-card {
background: linear-gradient(
135deg,
#2c1810 0%,
#000000 30%,
#000000 70%,
#8b4513 100%
);
border-radius: 25px;
padding: 40px;
display: flex;
align-items: center;
gap: 40px;
box-shadow: 0 20px 50px rgba(92, 51, 23, 0.25);
border: 2px solid rgba(210, 105, 30, 0.2);
position: relative;
overflow: hidden;
max-width: 800px;
margin: 0 auto;
}
.build-box-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.6;
}
.build-box-visual {
display: flex;
align-items: center;
gap: 20px;
position: relative;
z-index: 2;
}
.build-box-visual .build-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 25px rgba(210, 105, 30, 0.4);
border: 3px solid rgba(255, 255, 255, 0.2);
}
.build-box-visual .build-icon i {
font-size: 2rem;
color: white;
}
.build-box-visual .build-text h3 {
font-size: 1.8rem;
color: #f5f2ed;
margin-bottom: 8px;
font-family: "Inter", sans-serif;
font-weight: 700;
}
.build-box-visual .build-text p {
color: rgba(245, 242, 237, 0.8);
font-size: 1rem;
font-family: "Cormorant Garamond", serif;
font-style: italic;
}
.build-box-content {
flex: 1;
position: relative;
z-index: 2;
}
.build-box-content .build-description {
color: rgba(245, 242, 237, 0.9);
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 25px;
font-family: "Cormorant Garamond", serif;
}
.build-box-content .build-btn {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border: none;
padding: 15px 30px;
border-radius: 30px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
font-family: "Inter", sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 6px 20px rgba(210, 105, 30, 0.4);
display: flex;
align-items: center;
gap: 10px;
}
.build-box-content .build-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(210, 105, 30, 0.6);
background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);
}
@media (max-width: 768px) {
.giftboxes-grid {
grid-template-columns: 1fr;
gap: 2rem;
max-width: 400px;
}
.build-box-card {
flex-direction: column;
text-align: center;
gap: 25px;
padding: 30px 20px;
}
.build-box-visual {
flex-direction: column;
gap: 15px;
}
}
/* Already Done Boxes Text */
.already-done-text {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(
135deg,
rgba(139, 69, 19, 0.95) 0%,
rgba(160, 82, 45, 0.95) 100%
);
color: white;
padding: 8px 20px;
border-radius: 25px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
font-family: "Inter", sans-serif;
box-shadow: 0 4px 15px rgba(139, 69, 19, 0.4);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.already-done-text.royal {
background: linear-gradient(
135deg,
rgba(184, 134, 11, 0.95) 0%,
rgba(218, 165, 32, 0.95) 100%
);
box-shadow: 0 4px 15px rgba(184, 134, 11, 0.4);
}
.already-done-text.imperial {
background: linear-gradient(
135deg,
rgba(47, 79, 79, 0.95) 0%,
rgba(112, 128, 144, 0.95) 100%
);
box-shadow: 0 4px 15px rgba(47, 79, 79, 0.4);
}
/* Enhanced Build Your Box Section */
.build-your-box-section {
margin-top: 60px;
padding: 0 10px;
}
.build-box-card {
background: linear-gradient(
135deg,
#2c1810 0%,
#000000 30%,
#000000 70%,
#8b4513 100%
);
border-radius: 30px;
padding: 60px 40px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 25px 60px rgba(44, 24, 16, 0.3);
border: 3px solid rgba(210, 105, 30, 0.2);
position: relative;
overflow: hidden;
margin: 0 auto;
max-width: 95%;
}
.build-box-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(210, 105, 30, 0.1),
transparent
);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.build-box-visual {
display: flex;
align-items: center;
gap: 30px;
flex: 1;
}
.build-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(210, 105, 30, 0.4);
animation: iconPulse 2s ease-in-out infinite;
}
@keyframes iconPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.build-icon i {
font-size: 2rem;
color: white;
}
.build-text h3 {
font-size: 2.5rem;
font-weight: 700;
color: #f5f2ed;
margin-bottom: 10px;
font-family: "Playfair Display", serif;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.build-text p {
font-size: 1.2rem;
color: #d2691e;
font-family: "Inter", sans-serif;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
}
.build-box-content {
flex: 1;
text-align: right;
padding-left: 40px;
}
.build-description {
font-size: 1.1rem;
line-height: 1.6;
color: #ede6d9;
margin-bottom: 30px;
font-family: "Cormorant Garamond", serif;
font-style: italic;
}
.build-btn {
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
color: white;
border: none;
padding: 18px 40px;
border-radius: 30px;
font-size: 1.1rem;
font-weight: 700;
font-family: "Inter", sans-serif;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 12px;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 8px 25px rgba(210, 105, 30, 0.3);
}
.build-btn:hover {
background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(210, 105, 30, 0.5);
}
.build-btn i {
font-size: 1.2rem;
}
@media (max-width: 768px) {
.build-box-card {
flex-direction: column;
text-align: center;
padding: 40px 20px;
gap: 30px;
}
.build-box-content {
text-align: center;
padding-left: 0;
}
.build-text h3 {
font-size: 2rem;
}
}
/* Section Header for Already Done Boxes */
.section-header {
text-align: center;
margin-bottom: 50px;
}
.section-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: #2c1810;
font-family: "Playfair Display", serif;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(44, 24, 16, 0.1);
}
.header-underline {
width: 100px;
height: 4px;
background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%);
margin: 0 auto;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(210, 105, 30, 0.3);
}
/* Redesigned Build Your Box Card */
.build-box-card {
display: flex;
background: #f5efe6;
border-radius: 24px;
padding: 40px;
max-width: 1100px;
margin: auto;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
gap: 40px;
}
.gift-image {
flex: 0.9;
display: flex;
align-items: center;
justify-content: center;
}
.gift-image img {
width: 100%;
max-width: 320px;
border-radius: 18px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
.gift-content {
flex: 1.1;
display: flex;
flex-direction: column;
justify-content: center;
color: #2b1a12;
}
.eyebrow {
font-size: 12px;
letter-spacing: 2px;
color: #c9a45c;
margin-bottom: 12px;
font-family: "Inter", sans-serif;
font-weight: 600;
}
.gift-content h2 {
font-family: "Playfair Display", serif;
font-size: 42px;
margin-bottom: 16px;
font-weight: 700;
}
.gift-content p {
font-size: 16px;
line-height: 1.6;
max-width: 420px;
margin-bottom: 30px;
font-family: "Inter", sans-serif;
}
.gift-content button {
background: linear-gradient(135deg, #c9a45c, #b08a3e);
color: #fff;
border: none;
padding: 14px 34px;
border-radius: 40px;
font-size: 15px;
cursor: pointer;
width: fit-content;
box-shadow: 0 10px 25px rgba(201, 164, 92, 0.45);
transition: all 0.3s ease;
font-family: "Inter", sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.gift-content button:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(201, 164, 92, 0.6);
}
@media (max-width: 768px) {
.build-box-card {
flex-direction: column;
padding: 30px;
gap: 30px;
}
.gift-content h2 {
font-size: 32px;
}
}
/* Fix Filter Button Movement */
.filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
align-items: center;
}
.filter-btn {
flex-shrink: 0;
white-space: nowrap;
min-width: auto;
width: auto;
}
.flowers-filters,
.products-filters {
position: relative;
}
/* Scope left offset only to products-related containers; avoid flowers page */
.products-filters .filter-buttons {
margin-left: -100px;
}
/* Move Product Filter Buttons Left */
.products-page .filter-buttons,
.product-filters .filter-buttons,
.products-content .filter-buttons,
.filter-section .filter-buttons {
margin-left: -100px !important;
}
/* Universal Product Filter Button Movement */
body[class*="product"] .filter-btn,
.products-page .filter-btn,
.product-page .filter-btn,
[data-page="products"] .filter-btn {
transform: translateX(-200px) !important;
}
/* Move Pagination/Filter Buttons Left */
.products-page .pagination-btn,
.product-page .pagination-btn {
margin-left: -100px !important;
}
/* Move All Filter Elements Left */
/* Remove global left nudges; only adjust within product pages to avoid Flowers layout shifting */
.products-page .container > div:first-child,
.product-page .container > div:first-child,
.products-content > div:first-child,
.product-page .products-content > div:first-child,
.products-filters {
margin-left: -50px !important;
}
/* Move Dropdown Filters Right */
/* Keep dropdown filters aligned only in products contexts; do not affect Flowers */
.products-page select,
.product-page select,
.products-filters .filter-group select,
.products-filters .dropdown-filter,
.products-filters select[class*="filter"] {
position: absolute !important;
right: 50px !important;
z-index: 999 !important;
}
/* Build Your Box: keep filters in normal flow on desktop */
@media (min-width: 769px) {
.build-steps .product-filters,
.build-steps .product-filters .filter-group select,
.build-steps .product-filters select[class*="filter"],
.build-steps .product-filters .dropdown-filter {
position: static !important;
right: auto !important;
margin-left: 0 !important;
}
}
/* Home-only accent overrides */
/* Featured Gift Boxes: price color on home only */
body.home .giftbox-section .price { color: #ffffff !important; text-shadow: 0 2px 6px rgba(0,0,0,0.35); font-weight: 800 !important; }
/* Featured Gift Boxes: section title text beige on home */
body.home .giftbox-section h2 { color: #ffffff !important; text-shadow: 0 3px 12px rgba(0,0,0,0.45); }
/* Featured Gift Boxes: card titles to light brown */
body.home .giftbox-section .giftbox-card h3 {
color: #c9b477 !important;
}
/* Match giftboxes page look for Featured Gift Boxes */
body.home .giftbox-section .giftbox-card {
/* Enhanced frosted glass effect */
background: rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
border-radius: 25px !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, 0.4) !important;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37), 0 30px 80px rgba(0, 0, 0, 0.35) !important;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.home .giftbox-section .giftbox-card:hover {
transform: translateY(-12px) !important;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45) !important;
}
body.home .giftbox-section .card-content {
padding: 3rem !important;
}
body.home .giftbox-section .box-visual {
background: none !important;
}
body.home .giftbox-section .card-content h3 {
font-size: 2rem !important;
}
/* Home: cinematic background for Featured Gift Boxes (bokeh + floor vignette) */
body.home .giftbox-section {
position: relative;
background:
radial-gradient(220px 140px at 20% 18%, rgba(255,200,120,0.18), transparent 65%),
radial-gradient(240px 160px at 80% 15%, rgba(255,170,90,0.16), transparent 65%),
radial-gradient(180px 120px at 60% 28%, rgba(255,230,170,0.12), transparent 70%),
linear-gradient(180deg, #1a100b 0%, #23140e 40%, #1a100b 100%) !important;
}
body.home .giftbox-section::before {
content: "";
position: absolute; inset: 0;
pointer-events: none;
background:
radial-gradient(1200px 240px at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
radial-gradient(1200px 200px at 50% 100%, rgba(0,0,0,0.50), transparent 70%);
}
body.home .giftbox-section::after {
content: "";
position: absolute; left:0; right:0; bottom:0; height: 220px;
pointer-events: none;
background:
radial-gradient(800px 160px at 50% 100%, rgba(0,0,0,0.55), transparent 65%),
radial-gradient(600px 140px at 50% 96%, rgba(217,181,107,0.18), transparent 70%);
}
/* Featured Gift Boxes: "View All Gift Boxes" button text black */
body.home .giftbox-section .view-more .btn-outline { color: #ffffff !important; border-color: #d9b56b !important; box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important; }
body.home .giftbox-section .view-more .btn-outline:hover { color: #ffffff !important; background: rgba(217,181,107,0.15) !important; }
/* Featured Products: price and buttons on home only */
body.home .products-section .price {
color: #000000 !important;
}
body.home .products-section .btn-primary {
background: linear-gradient(135deg, #c9b477 0%, #c9b477 100%) !important;
box-shadow: 0 8px 25px rgba(201, 180, 119, 0.45) !important;
border-color: #e6d3a3 !important;
color: #000000 !important;
}
body.home .products-section .btn-primary:hover {
box-shadow: 0 12px 35px rgba(201, 180, 119, 0.6) !important;
}
body.home .products-section .btn-outline {
border-color: #e6d3a3 !important;
color: #000000 !important;
}
body.home .products-section .btn-outline:hover {
background: #c9b477 !important;
color: #000000 !important;
}
/* Featured Products: product names to #E6D3A3 */
body.home .products-section .product-card h4 {
color: #e6d3a3 !important;
}
/* Home: Featured Products quick-view eye icon color */
body.home .products-section .quick-view-btn i {
color: #e6d3a3 !important;
}
/* Keep icon black on hover for visibility */
body.home .products-section .quick-view-btn:hover i {
color: #000000 !important;
}
/* Home: Featured Products quick-view button ring/border */
body.home .products-section .quick-view-btn {
border: 2px solid #e6d3a3 !important;
box-shadow: 0 8px 20px rgba(230, 211, 163, 0.45) !important;
background: linear-gradient(135deg, #e6d3a3 0%, #e6d3a3 100%) !important;
}
body.home .products-section .quick-view-btn:hover {
box-shadow: 0 12px 30px rgba(230, 211, 163, 0.65) !important;
}
/* Ensure icon remains visible on filled background */
body.home .products-section .quick-view-btn i {
color: #1b1b1b !important;
}
/* Home: Featured Products background white, cards dark chocolate, text white */
/* CSS file is in styles/, so use ../images for the correct relative path */
/* Home: Featured Products — standout dark chocolate gradient */
body.home .products-section { background: linear-gradient(135deg, #2a1910 0%, #000000 60%, #2a1910 100%) !important; }
body.home .products-section::before { display:none !important; }
body.home .products-section .product-card {
background: linear-gradient(135deg, #f7efe4 0%, #eadfc9 100%) !important; /* beige */
border-color: rgba(60,36,21,0.18) !important;
}
/* Featured Products: section title color on home */
body.home .products-section h2 { color: #e6d3a3 !important; }
body.home .products-section .product-card .product-content h4,
body.home .products-section .product-card .product-content .price,
body.home .products-section .product-card .product-content .description {
color: #000000 !important; /* dark chocolate */
}
body.home .products-section .product-card .product-actions .btn-primary,
body.home .products-section .product-card .product-actions .btn-outline {
color: #000000 !important; /* dark chocolate text on buttons */
border-color: rgba(230,211,163,0.6) !important;
}
/* Ensure Featured Products background wins over earlier transparent rule */
body.home .products-section { background: linear-gradient(135deg, #2a1910 0%, #000000 60%, #2a1910 100%) !important; }
/* Re-enable a subtle premium overlay pattern for visual texture */
body.home .products-section::before {
display: block !important;
opacity: 0.18 !important;
background: url('data:image/svg+xml,') !important;
}
/* === HOME RESET TO BASE STYLES (revert) === */
/* Giftbox Section back to base visuals */
body.home .giftbox-section { background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%) !important; }
body.home .giftbox-section::before { content:""; position:absolute; inset:0; opacity:0.6 !important; background: url('data:image/svg+xml,') !important; }
body.home .giftbox-section::after { content:none !important; }
body.home .giftbox-section h2 { color: #2c1810 !important; text-shadow:none !important; }
body.home .giftbox-section .giftbox-card { background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%) !important; border-radius:20px !important; border: 2px solid rgba(218,165,32,0.15) !important; box-shadow: 0 15px 35px rgba(139,69,19,0.15) !important; }
body.home .giftbox-section .giftbox-card:hover { transform: translateY(-15px) scale(1.02) !important; box-shadow: 0 30px 70px rgba(139,69,19,0.28) !important; }
body.home .giftbox-section .card-content { padding: 1.8rem !important; }
body.home .giftbox-section .card-content h3 { font-size: 1.8rem !important; color:#2c1810 !important; text-shadow:none !important; }
body.home .giftbox-section .price { color:#8b4513 !important; font-weight:700 !important; text-shadow:none !important; }
body.home .giftbox-section .view-more .btn-outline { color:#000000 !important; border-color: rgba(230,211,163,0.5) !important; box-shadow:none !important; background: transparent !important; }
/* Products Section back to base visuals */
body.home .products-section { background: linear-gradient(135deg, #faf7f2 0%, #f0e6d2 100%) !important; }
body.home .products-section::before { content:""; position:absolute; inset:0; opacity:0.7 !important; background: url('data:image/svg+xml,') !important; }
body.home .products-section h2 { color:#2c1810 !important; }
body.home .products-section .product-card { background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%) !important; border:2px solid rgba(218,165,32,0.12) !important; box-shadow: 0 12px 30px rgba(139,69,19,0.12) !important; }
body.home .products-section .product-card .product-content h4 { color:#2c1810 !important; }
body.home .products-section .product-card .product-content .price { color:#8b4513 !important; }
body.home .products-section .product-card .product-content .description { color:#000000 !important; }
body.home .products-section .product-card .product-actions .btn-primary { background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%) !important; color:#ffffff !important; border:none !important; }
body.home .products-section .product-card .product-actions .btn-outline { border-color:#e6d3a3 !important; color:#000000 !important; background: transparent !important; }
body.home .products-section .view-more .btn-outline { color:#000000 !important; background: transparent !important; }
/* Partners Section back to base visuals */
body.home .partners-section { background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%) !important; }
body.home .partners-section::before { opacity:0.7 !important; }
body.home .partners-section h2 { color:#2c1810 !important; }
body.home .partners-section .section-header p { color:#000000 !important; }
body.home .partners-section .section-badge, body.home .partners-section .section-badge i, body.home .partners-section .section-badge span { color:#8b4513 !important; border-color:#d2691e !important; }
body.home .partners-section .partner-card .partner-info h4,
body.home .partners-section .partner-card .partner-info p,
body.home .partners-section .partner-badge { color: inherit !important; }
/* (reverted) Removed temporary black-forced overrides */
/* Home: Featured Products "View All Products" text to beige */
body.home .products-section .view-more .btn-outline { color: #e6d3a3 !important; }
body.home .products-section .view-more .btn-outline:hover { color: #e6d3a3 !important; background: #c9b477 !important; }
/* Featured Gift Boxes: titles and price to dark chocolate on home */
/* Align with reference: golden titles, white prices */
body.home .giftbox-section .card-content h3 { color: #d9b56b !important; }
body.home .giftbox-section .price { color: #ffffff !important; }
/* Home: let body dark background show through sections */
body.home .giftbox-section,
body.home .partners-section {
background: transparent !important;
}
body.home .giftbox-section::before,
body.home .partners-section::before {
display: none !important;
}
/* Remove image shadow only for homepage Featured Gift Boxes */
.giftbox-section .box-visual img { box-shadow: none !important; }
/* Final reset: ensure home section backgrounds are base (not transparent/dark) */
body.home .giftbox-section {
background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%) !important;
}
body.home .giftbox-section::before {
content: ""; position: absolute; inset: 0; display: block !important;
background: url('data:image/svg+xml,');
opacity: 0.6 !important;
}
body.home .partners-section {
background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%) !important;
}
body.home .partners-section::before { display: block !important; opacity: 0.7 !important; }
/* === Home: Featured Gift Boxes per provided mock with criteriobackground3.png === */
body.home .giftbox-section {
position: relative;
background: url('../images/criteriobackground3.png') center/cover no-repeat !important;
}
body.home .giftbox-section::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(1200px 220px at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
radial-gradient(1200px 260px at 50% 100%, rgba(0,0,0,0.55), transparent 70%);
opacity: 1 !important; display: block !important;
}
body.home .giftbox-section .giftbox-card {
background: linear-gradient(180deg, #f5efe6 0%, #efe3d3 100%) !important;
border-radius: 26px !important;
border: 1px solid rgba(217,181,107,0.4) !important;
box-shadow: 0 25px 70px rgba(0,0,0,0.35) !important;
}
body.home .giftbox-section .card-content h3 { color: #d9b56b !important; }
body.home .giftbox-section .price { color: #ffffff !important; text-shadow: 0 2px 6px rgba(0,0,0,0.35); font-weight: 800; }
body.home .giftbox-section .view-more .btn-outline { color: #ffffff !important; border-color: #d9b56b !important; border-width: 2px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important; }
body.home .giftbox-section .view-more .btn-outline:hover { background: rgba(217,181,107,0.15) !important; }
/* Home: darken Featured Products section background slightly for contrast */
/* Reverted: keep original products-section background on home */
/* Keep homepage texts original; only customize badges/borders */
body.home .partner-badge {
background: linear-gradient(135deg, #c9b477 0%, #c9b477 100%) !important;
color: white !important;
border-color: #e6d3a3 !important;
box-shadow: 0 3px 10px rgba(201, 180, 119, 0.35) !important;
}
/* Subtle tint on partner section decorative overlay */
body.home .partners-section::before {
opacity: 0.2;
}
/* Home: Trusted Partners pill (border + text) */
body.home .partners-section .section-badge {
border-color: #000000 !important;
color: #000000 !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
body.home .partners-section .section-badge i,
body.home .partners-section .section-badge span {
color: #000000 !important;
}
/* ==== FINAL HOME PRODUCTS OVERRIDES (Requested) ==== */
/* Force image background and transparent cards on home products section */
body.home section.products-section {
background: url('../images/criteriobox1.jpeg') center / cover no-repeat !important;
}
body.home section.products-section::before { display: none !important; }
body.home section.products-section .product-card {
background: #F1CC90 !important; /* requested gold tone */
border: 1px solid #7a5a24 !important; /* keep warm border */
box-shadow: 0 10px 22px rgba(122, 90, 36, 0.26) !important;
}
body.home section.products-section .product-card:hover {
box-shadow: 0 14px 34px rgba(168, 133, 58, 0.28) !important;
}
body.home section.products-section .product-card .product-content h4,
body.home section.products-section .product-card .product-content .price,
body.home section.products-section .product-card .product-content .description {
color: #000000 !important; /* dark text for contrast on gold */
}
/* Buttons and borders to black on home products */
body.home section.products-section .product-card .product-actions .btn-outline,
body.home section.products-section .product-card .product-actions .btn-primary,
body.home section.products-section .view-more .btn-outline {
color: #000000 !important;
border-color: #000000 !important;
}
/* Revert View All Products to gold styling */
body.home section.products-section .view-more .btn-outline {
color: #e6d3a3 !important;
border-color: #e6d3a3 !important;
}
body.home section.products-section .view-more .btn-outline:hover {
background: rgba(230,211,163,0.15) !important;
color: #e6d3a3 !important;
border-color: #e6d3a3 !important;
}
/* ==== HOME: Weekly Boxes (Featured Gift Boxes) image size tweaks ==== */
/* Increase box pictures on home giftbox cards while keeping layout intact */
body.home .giftbox-section .box-visual img,
body.home .giftbox-section .giftbox-img {
width: 260px !important;
height: 190px !important;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
body.home .giftbox-section .box-visual img,
body.home .giftbox-section .giftbox-img { width: 240px !important; height: 175px !important; }
}
@media (max-width: 768px) {
body.home .giftbox-section .box-visual img,
body.home .giftbox-section .giftbox-img { width: 220px !important; height: 160px !important; }
}
body.home section.products-section .product-card .product-actions .btn-primary {
background: transparent !important;
box-shadow: none !important;
}
body.home section.products-section .quick-view-btn {
border: 2px solid #000000 !important;
background: transparent !important;
box-shadow: none !important;
}
body.home section.products-section .quick-view-btn i {
color: #000000 !important;
}
/* Total Value Calculator */
.total-calculator {
position: fixed;
bottom: 30px;
right: 10px;
background: linear-gradient(135deg, #000000 0%, #6b3f24 100%);
border-radius: 8px;
padding: 12px 16px;
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 0 20px rgba(139, 111, 71, 0.2);
width: 180px;
z-index: 100;
animation: slideInUp 0.3s ease-out;
border: 1px solid rgba(255, 215, 0, 0.2);
}
/* ==== FINAL REVERT OVERRIDES (Home) ==== */
/* Force homepage sections back to original light theme and colors */
body.home .giftbox-section { background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%) !important; }
body.home .giftbox-section::before { content:""; position:absolute; inset:0; display:block !important; opacity:.6 !important; background: url('data:image/svg+xml,') !important; }
body.home .giftbox-section h2 { color:#2c1810 !important; text-shadow:none !important; }
body.home .giftbox-section .giftbox-card { background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%) !important; box-shadow: 0 15px 35px rgba(139,69,19,0.15) !important; border:2px solid rgba(218,165,32,0.15) !important; }
body.home .giftbox-section .card-content h3 { color:#2c1810 !important; }
body.home .giftbox-section .price { color:#8b4513 !important; text-shadow:none !important; font-weight:700 !important; }
body.home .giftbox-section .view-more .btn-outline { color:#000000 !important; background:transparent !important; border-color: rgba(230,211,163,0.5) !important; }
body.home .products-section { background: linear-gradient(135deg, #faf7f2 0%, #f0e6d2 100%) !important; }
body.home .products-section::before { content:""; position:absolute; inset:0; display:block !important; opacity:.7 !important; background: url('data:image/svg+xml,') !important; }
body.home .products-section h2 { color:#2c1810 !important; }
body.home .products-section .product-card { background: linear-gradient(135deg, #ffffff 0%, #fdf9f3 100%) !important; border:2px solid rgba(218,165,32,0.12) !important; box-shadow: 0 12px 30px rgba(139,69,19,0.12) !important; }
body.home .products-section .product-card .product-content h4 { color:#2c1810 !important; }
body.home .products-section .product-card .product-content .price { color:#8b4513 !important; }
body.home .products-section .product-card .product-content .description { color:#000000 !important; }
body.home .products-section .product-card .product-actions .btn-primary { background: linear-gradient(135deg, #d2691e 0%, #a0522d 100%) !important; color:#ffffff !important; border:none !important; }
body.home .products-section .product-card .product-actions .btn-outline { color:#000000 !important; border-color:#e6d3a3 !important; background:transparent !important; }
body.home .products-section .view-more .btn-outline { color:#000000 !important; background:transparent !important; }
body.home .partners-section { background: linear-gradient(135deg, #ffffff 0%, #faf7f2 100%) !important; }
body.home .partners-section::before { display:block !important; opacity:.7 !important; }
body.home .partners-section h2 { color:#2c1810 !important; }
body.home .partners-section .section-header p { color:#000000 !important; }
body.home .partners-section .section-badge, body.home .partners-section .section-badge i, body.home .partners-section .section-badge span { color:#8b4513 !important; border-color:#d2691e !important; }
body.home .partners-section .partner-card .partner-info h4,
body.home .partners-section .partner-card .partner-info p,
body.home .partners-section .partner-badge { color: inherit !important; }
.total-calculator .calculator-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-size: 0.85rem;
font-weight: 700;
color: #ffd700;
font-family: "Bodoni Moda", serif;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.total-calculator .calculator-header i {
color: #ffd700;
font-size: 0.9rem;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.total-calculator .calculator-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.total-calculator .items-count,
.total-calculator .total-amount {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 8px;
border-top: 1px solid rgba(255, 215, 0, 0.15);
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
margin: 0 -8px;
padding-left: 8px;
padding-right: 8px;
}
.total-calculator .items-count:first-child,
.total-calculator .total-amount:first-child {
border-top: none;
padding-top: 0;
}
.total-calculator .label {
color: rgba(255, 255, 255, 0.75);
font-size: 0.7rem;
font-family: "Lato", sans-serif;
letter-spacing: 0.3px;
font-weight: 700;
white-space: nowrap;
}
.total-calculator .value {
color: #ffffff;
font-weight: 900;
font-size: 0.85rem;
font-family: "Lato", sans-serif;
letter-spacing: 0.5px;
white-space: nowrap;
}
.total-calculator .value.amount {
color: #ffd700;
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.3px;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive: Move calculator on smaller screens */
@media (max-width: 768px) {
.total-calculator {
bottom: 20px;
right: 20px;
width: 170px;
padding: 10px 14px;
}
.total-calculator .calculator-header {
font-size: 0.8rem;
margin-bottom: 8px;
}
.total-calculator .label {
font-size: 0.7rem;
}
.total-calculator .value {
font-size: 0.85rem;
}
.total-calculator .value.amount {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.total-calculator {
bottom: 15px;
right: 15px;
width: 155px;
padding: 9px 12px;
}
.total-calculator .calculator-header {
gap: 6px;
font-size: 0.75rem;
margin-bottom: 7px;
}
.total-calculator .calculator-header i {
font-size: 0.8rem;
}
.total-calculator .items-count,
.total-calculator .total-amount {
padding: 5px 0;
gap: 8px;
}
.total-calculator .label {
font-size: 0.65rem;
}
.total-calculator .value {
font-size: 0.8rem;
}
.total-calculator .value.amount {
font-size: 0.9rem;
}
}
/* Product Quantity Control */
.product-quantity-control {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 8px 0;
background: rgba(210, 105, 30, 0.1);
border-radius: 8px;
margin-bottom: 12px;
}
.qty-btn {
width: 32px;
height: 32px;
border: 2px solid #d2691e;
background: white;
color: #d2691e;
border-radius: 6px;
font-size: 1.2rem;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.qty-btn:hover {
background: #d2691e;
color: white;
transform: scale(1.05);
}
.qty-btn:active {
transform: scale(0.95);
}
.qty-display {
font-weight: 700;
font-size: 1.1rem;
color: #2c1810;
min-width: 40px;
text-align: center;
font-family: "Inter", sans-serif;
}
.form-message { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.form-message.error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.form-message.success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
/* All favorites page grid */
.favorites-page-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.favorites-page-grid .favorite-item { align-items:flex-start; }
/* Step 3: Choose Card */
.cards-grid{display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:22px;margin:10px auto 18px;max-width:1100px}
.card-option{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:20px;overflow:hidden;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;display:flex;flex-direction:column;align-items:center;box-shadow:0 8px 18px rgba(0,0,0,.04)}
.card-option:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.08)}
.card-option.selected{border-color:#c9773a;box-shadow:0 0 0 3px rgba(201,119,58,.35) inset}
.card-thumb{width:100%;height:300px;object-fit:cover;background:#fff;display:block}
.card-thumb.none{display:flex;align-items:center;justify-content:center;height:220px;color:#7a6a4a;background:linear-gradient(180deg,#fffdf8,#f7f0e5)}
.card-name{padding:12px 14px 16px;font-weight:700;color:#2b2a28;text-align:center;font-family:"Playfair Display",serif}
.card-form{display:grid;grid-template-columns:420px 1fr;gap:20px;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:16px 18px;box-shadow:0 12px 28px rgba(0,0,0,.06);max-width:1100px;margin:0 auto}
.card-left{display:flex;flex-direction:column;min-height:100%}
.card-preview{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:12px;min-height:380px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:1}
.card-preview-inner{width:90%;height:85%;border:3px solid #d24a43;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#d24a43;font-family:"Playfair Display",serif}
.card-preview-actions{margin-top:14px;display:flex;justify-content:center}
.card-change-btn{background:linear-gradient(135deg,#e6d3a3,#d9c089);border:0;color:#000000;font-weight:800;font-family:"Playfair Display",serif;padding:12px 20px;border-radius:14px;cursor:pointer;box-shadow:0 8px 20px rgba(230,211,163,.38);font-size:1rem}
.card-change-btn:hover{filter:brightness(1.03)}
.card-fields .form-field{display:flex;flex-direction:column;gap:6px}
.card-fields .card-help{margin-bottom:8px;color:#6a6458}
.card-fields .card-help h4{margin:0 0 4px 0;font-family:"Playfair Display",serif}
.card-fields input,.card-fields textarea{background:#fffdf8;border:1px solid rgba(230,211,163,.55);border-radius:10px;padding:10px 12px}
.card-fields input{height:42px}
.card-fields textarea{min-height:120px}
.char-remaining{font-size:.9rem;color:#7a6a4a;margin-top:4px}
.checkbox-line{display:block;margin-top:10px;color:#000000}
.card-fields input:focus,.card-fields textarea:focus{outline:none;border-color:#e6d3a3;box-shadow:0 0 0 3px rgba(230,211,163,.22)}
.card-fields textarea{min-height:160px}
@media (max-width: 1100px){ .cards-grid{grid-template-columns:repeat(3,minmax(200px,1fr));} }
@media (max-width: 820px){ .cards-grid{grid-template-columns:repeat(2,minmax(180px,1fr));} .card-form{grid-template-columns:1fr;max-width:100%} .card-preview{min-height:260px} }
.content-sub{max-width:760px;margin: -6px auto 10px; color:#6a6458}
/* Card step: change button as elegant text link */
#cardsToolbar #changeCardBtn{background:transparent;border:none;color:#000000;font-weight:700;font-family:"Playfair Display",serif;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#cardsToolbar #changeCardBtn:hover{color:#2b2a28}
.review-panel{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:16px 18px;box-shadow:0 12px 28px rgba(0,0,0,.06);max-width:1100px;margin:16px auto}
.review-title{text-align:center;margin:0 0 10px 0;font-family:"Playfair Display",serif}
.review-grid{display:grid;grid-template-columns:260px 1fr 260px 200px;gap:16px;align-items:start}
.review-box-thumb{width:100%;height:120px;background:#f5efe0;border:1px solid #e0d6bd;border-radius:10px;margin-bottom:8px}
.review-line{display:flex;justify-content:space-between;border-bottom:1px dashed #eee;padding:6px 0;color:#000000}
.review-list{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow:auto}
.review-total{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.review-amount{font-family:"Playfair Display",serif;font-weight:800;font-size:1.25rem}
@media (max-width: 900px){ .review-grid{grid-template-columns:1fr; } .review-total{align-items:flex-start} }
/* Product Detail Pages (individual products) */
body.page-transition {
--bg-dark: #1c120d;
--bg-darker: #140c08;
--gold: #d9b56b;
--beige: #DCC9A7;
}
/* Navbar + header */
body.page-transition .navbar { background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-darker) 100%) !important; border-bottom:1px solid rgba(255,255,255,0.08) !important; box-shadow:0 10px 40px rgba(0,0,0,0.35) !important; }
body.page-transition .nav-menu a { color: var(--beige) !important; }
body.page-transition .nav-menu a:hover { color: var(--gold) !important; }
body.page-transition .lang-btn, body.page-transition #cart-count { background: var(--beige) !important; color: var(--bg-darker) !important; }
/* Breadcrumb */
body.page-transition .breadcrumb-section { background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-darker) 100%) !important; }
body.page-transition .breadcrumb a, body.page-transition .breadcrumb span, body.page-transition .go-back-btn { color: var(--beige) !important; }
body.page-transition .go-back-btn { border:2px solid var(--beige) !important; background: transparent !important; }
body.page-transition .go-back-btn:hover { background: rgba(220,201,167,0.15) !important; color:#000000 !important; }
/* Detail section */
body.page-transition .flower-detail { background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-darker) 100%) !important; }
body.page-transition .flower-info h1,
body.page-transition .flower-description p,
body.page-transition .flower-features .feature span,
body.page-transition .flower-features .feature i { color: var(--gold) !important; }
body.page-transition .flower-price .current-price { color: var(--gold) !important; }
/* Action button */
body.page-transition .flower-actions .btn-primary { background: transparent !important; color: var(--gold) !important; border: 2px solid var(--gold) !important; }
body.page-transition .flower-actions .btn-primary:hover { background: var(--beige) !important; color:#000000 !important; border-color: var(--beige) !important; }
/* Badge styling to match */
body.page-transition .flower-badge { background: rgba(0,0,0,0.25) !important; color: var(--gold) !important; border: 1px solid rgba(217,181,107,0.35) !important; }
/* Transparent cards + beige text on individual product pages */
/* Make any panels look transparent and text beige */
body.page-transition .flower-info,
body.page-transition .flower-detail .panel,
body.page-transition .flower-detail .card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Ensure all common text within the info column is beige/gold */
body.page-transition .flower-info h1,
body.page-transition .flower-info h2,
body.page-transition .flower-info h3,
body.page-transition .flower-info p,
body.page-transition .flower-info li,
body.page-transition .flower-info .feature span,
body.page-transition .flower-info .feature i,
body.page-transition .flower-info .flower-description p { color: var(--gold) !important; }
/* Optional subtle beige rim for the media box */
body.page-transition .flower-gallery .main-image { border: 1px solid rgba(220,201,167,0.45) !important; background: transparent !important; border-radius: 12px; }
/* Breadcrumb: remove white pills, switch to beige text/outline */
body.page-transition .breadcrumb-section { background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-darker) 100%) !important; border-bottom:1px solid rgba(255,255,255,0.08) !important; }
body.page-transition .breadcrumb { color: var(--beige) !important; }
body.page-transition .breadcrumb a { background: transparent !important; color: var(--beige) !important; border: 2px solid rgba(220,201,167,0.55) !important; }
body.page-transition .breadcrumb a:hover { background: rgba(220,201,167,0.12) !important; color:#000000 !important; border-color: rgba(220,201,167,0.75) !important; }
body.page-transition .breadcrumb span:not(.breadcrumb-dash) { background: transparent !important; color: var(--beige) !important; box-shadow:none !important; border: 2px solid rgba(220,201,167,0.55) !important; }
body.page-transition .breadcrumb-dash { color: var(--beige) !important; }
/* Price divider to beige on product detail */
/* Use the short centered line only; remove full-width border */
body.page-transition .flower-info .flower-price { border-bottom: none !important; }
body.page-transition .flower-price::after { background: #DCC9A7 !important; }
/* Feature cards on product pages: transparent with beige text */
body.page-transition .feature {
background: transparent !important;
border: 1px solid rgba(220,201,167,0.45) !important;
box-shadow: none !important;
}
body.page-transition .feature i,
body.page-transition .feature span { color: var(--gold) !important; }
/* Availability/stock text to beige (various possible class names) */
body.page-transition .flower-info .availability,
body.page-transition .flower-info .in-stock,
body.page-transition .flower-info .stock,
body.page-transition .flower-info .stock-count,
body.page-transition .flower-info .status,
body.page-transition .flower-info .inventory,
body.page-transition .flower-info .meta,
body.page-transition .flower-info .flower-meta { color: var(--gold) !important; }
/* Single-color background across the whole product detail page */
body.page-transition { background: #140c08 !important; }
body.page-transition .navbar,
body.page-transition .breadcrumb-section,
body.page-transition .flower-detail { background: #140c08 !important; }
/* Likely "In stock" text: make first info paragraph and common aliases beige */
body.page-transition .flower-info > p,
body.page-transition .flower-info .in-stock,
body.page-transition .flower-info .availability,
body.page-transition .flower-info .stock,
body.page-transition .flower-info .stock-count { color: #DCC9A7 !important; }
/* Extra-wide targeting for stock labels that may live outside .flower-info */
body.page-transition .stock,
body.page-transition .stock-status,
body.page-transition .availability,
body.page-transition .availability-status,
body.page-transition .stock-info,
body.page-transition .inventory,
body.page-transition .inventory-status,
body.page-transition .product-meta .stock,
body.page-transition .product-meta .status { color: #DCC9A7 !important; }
/* Mobile header: larger, perfectly centered logo (appended) */
@media (max-width: 992px) {
.nav-container { height: 84px !important; padding: 0 12px !important; }
.nav-logo img { height: 60px !important; }
.navbar .nav-logo,
.navbar .nav-links,
.navbar .nav-actions { transform: none !important; }
.nav-menu { top: 84px !important; max-height: calc(100vh - 84px) !important; }
}
@media (max-width: 768px) {
.nav-container { height: 80px !important; }
.nav-logo img { height: 56px !important; }
.nav-menu { top: 80px !important; max-height: calc(100vh - 80px) !important; }
}
@media (max-width: 480px) {
.nav-container { height: 78px !important; }
.nav-logo img { height: 54px !important; }
.nav-menu { top: 78px !important; max-height: calc(100vh - 78px) !important; }
}
/* Mobile menu polish: rounded panel, slide/blur, nicer links */
@media (max-width: 992px) {
.nav-menu {
margin: 0 auto;
width: 100%;
background: linear-gradient(180deg, rgba(10,10,10,.96), rgba(18,18,18,.98)) !important;
border-top: 1px solid rgba(217,181,107,.28) !important;
box-shadow: 0 18px 45px rgba(0,0,0,.35) !important;
backdrop-filter: blur(8px);
transform: translateY(-6px);
opacity: 0;
transition: opacity .18s ease, transform .18s ease;
pointer-events: none; /* disabled until active */
}
.nav-menu.active { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nav-menu li { list-style: none; }
.nav-menu a {
display: block !important;
padding: 14px 18px !important;
border-radius: 10px;
color: #e6d3a3 !important;
position: relative;
z-index: 9999; /* ensure on top of overlays */
pointer-events: auto !important;
cursor: pointer;
}
.nav-menu a:focus-visible {
outline: 2px solid #d9b56b;
outline-offset: 3px;
}
.nav-menu a::after {
content: "";
position: absolute;
left: 18px; right: 18px; bottom: 6px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(217,181,107,.25), transparent);
opacity: .6;
}
.nav-menu li:last-child a::after { display: none; }
.nav-menu a:hover { background: rgba(217,181,107,.10); color: #fff4d6 !important; }
/* Hamburger → X animation when open */
.hamburger { gap: 5px; }
.hamburger span { transition: transform .18s ease, opacity .18s ease, background-color .18s ease; }
body.menu-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* Mobile menu: light theme for better contrast */
@media (max-width: 992px) {
.nav-menu {
background: linear-gradient(180deg, rgba(255,249,238,.98), rgba(252,243,227,.98)) !important; /* light beige */
color: #3c2415 !important; /* dark text */
border-top: 1px solid rgba(139,69,19,.25) !important;
}
.nav-menu a { color: #3c2415 !important; }
.nav-menu a:hover { background: rgba(139,69,19,.08) !important; color: #000000 !important; }
.nav-menu a::after { background: linear-gradient(90deg, transparent, rgba(139,69,19,.25), transparent) !important; }
}
/* Mobile menu backdrop: reduce dimming (increase page brightness) */
@media (max-width: 992px) {
.nav-backdrop { background: rgba(0,0,0,0.12) !important; backdrop-filter: blur(2px) !important; }
}
/* Mobile menu: solid high-contrast theme, no blur */
@media (max-width: 992px) {
.nav-menu {
background: #14110f !important; /* solid dark */
color: #f5efe2 !important; /* light text */
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border-top: 1px solid rgba(230,211,163,.25) !important;
}
.nav-menu a { color: #f5efe2 !important; text-shadow: none !important; }
.nav-menu a:hover { background: rgba(230,211,163,.12) !important; color: #fff8e5 !important; }
.nav-backdrop { background: rgba(0,0,0,0.12) !important; }
}
/* HARD OVERRIDE: absolutely no blur anywhere while menu is open */
body.menu-open *,
body.menu-open *::before,
body.menu-open *::after {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
filter: none !important;
}
/* Ensure the backdrop itself is not blurring */
.nav-backdrop {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* Mobile menu: higher-contrast beige panel over dark site bg */
@media (max-width: 992px) {
.nav-menu {
background: #f5efe2 !important; /* warm light beige */
color: #2b1b12 !important; /* deep cocoa text */
border-top: 1px solid rgba(139,69,19,.28) !important;
box-shadow: 0 12px 32px rgba(0,0,0,.28) !important;
}
.nav-menu a { color: #2b1b12 !important; }
.nav-menu a:hover { background: rgba(139,69,19,.10) !important; color: #000000 !important; }
.nav-menu a::after { background: linear-gradient(90deg, transparent, rgba(139,69,19,.25), transparent) !important; }
.nav-backdrop { background: rgba(0,0,0,0.08) !important; } /* keep page bright */
}
/* Mobile menu: add outline matching text color for clearer separation */
@media (max-width: 992px) {
/* Panel outline uses the same light text color at low opacity */
.nav-menu {
color: #f5efe2 !important; /* ensure light text */
background: #1b1411 !important; /* keep dark panel */
box-shadow:
inset 0 0 0 1.5px rgba(245,239,226,.28), /* inner outline same as text */
0 18px 40px rgba(0,0,0,.35) !important; /* external shadow */
border-top: 1px solid rgba(245,239,226,.20) !important;
}
/* Burger outline aligns with text color */
.hamburger { border: 1.5px solid rgba(245,239,226,.35) !important; }
.hamburger:hover { border-color: rgba(245,239,226,.55) !important; }
/* Focus ring for accessibility in the same hue */
.nav-menu a:focus-visible {
outline: 2px solid rgba(245,239,226,.65) !important;
outline-offset: 3px;
}
}
/* Interactive button feedback (hover/active + ripple) */
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.btn-outline:hover { background: rgba(230,211,163,.12); color: #000; }
.btn-outline:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.lang-btn:active { transform: scale(.98); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.hamburger:hover { background: rgba(230,211,163,.10) !important; }
.hamburger:active { transform: scale(.96); }
.nav-menu a:active { transform: translateY(1px); }
/* Click ripple feedback */
.btn, .btn-primary, .btn-outline, .lang-btn, .build-btn, .hamburger {
position: relative;
overflow: hidden;
}
.ripple {
position: absolute; border-radius: 50%; pointer-events: none;
transform: scale(0); opacity: .35; background: currentColor;
animation: ripple .6s ease-out forwards;
}
@keyframes ripple { to { transform: scale(12); opacity: 0; } }
/* FINAL OVERRIDES: ensure mobile menu is topmost and clickable */
@media (max-width: 1200px) {
.nav-backdrop { z-index: 99998 !important; pointer-events: auto !important; }
.nav-menu { z-index: 99999 !important; pointer-events: none; position: fixed !important; width: 100% !important; }
.nav-menu.active { pointer-events: auto !important; left: 0 !important; }
.nav-menu a { position: relative !important; z-index: 100000 !important; pointer-events: auto !important; cursor: pointer !important; }
.nav-menu .ripple { display: none !important; }
}
/* Mobile Nav Reset — minimal, robust */
@media (max-width: 992px) {
.nav-container { height: 80px !important; }
.nav-backdrop { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.15) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .2s ease !important; z-index: 1000 !important; }
.nav-backdrop.active { opacity: 1 !important; pointer-events: auto !important; }
.hamburger { pointer-events: auto !important; z-index: 1002 !important; }
.nav-menu { position: fixed !important; top: 80px !important; left: 0 !important; right: 0 !important; background: #1b1411 !important; color: #f5efe2 !important; transform: translateY(-12px) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .2s ease, transform .2s ease !important; z-index: 1001 !important; }
.nav-menu.active { transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
.nav-menu a { pointer-events: auto !important; }
}
/* Mobile menu: ensure visible above header */
@media (max-width: 1200px) {
.nav-menu { z-index: 4000 !important; display:block !important; visibility:visible !important; }
.nav-menu.active { transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; }
.nav-backdrop { z-index: 3990 !important; }
.navbar { z-index: 3000 !important; }
.hamburger { z-index: 4001 !important; pointer-events: auto !important; }
}
/* Authoritative Mobile Nav (override all earlier rules) */
@media (max-width: 1200px) {
.nav-container { height: 84px !important; }
.navbar { z-index: 3000 !important; }
.nav-backdrop { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.12) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .2s ease !important; z-index: 3990 !important; }
.nav-backdrop.active { opacity: 1 !important; pointer-events: auto !important; }
.hamburger { z-index: 4001 !important; pointer-events: auto !important; }
.nav-menu {
position: fixed !important;
top: 84px !important;
left: 0 !important;
right: 0 !important;
display: flex !important;
flex-direction: column !important;
background: #1b1411 !important;
color: #f5efe2 !important;
max-height: calc(100vh - 84px) !important;
overflow-y: auto !important;
transform: translateY(-16px) !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity .2s ease, transform .2s ease !important;
z-index: 4000 !important;
}
.nav-menu.active { transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
.nav-menu a { position: relative !important; z-index: 4002 !important; pointer-events: auto !important; }
}
/* CSS-only nav toggle (checkbox hack) */
@media (max-width: 992px) {
.nav-toggle { display: none; }
.nav-menu { display: none !important; position: fixed !important; left:0; right:0; top: 80px; background:#1b1411; color:#f5efe2; z-index: 4000; }
.nav-toggle:checked ~ .nav-menu { display: block !important; }
.hamburger { cursor: pointer; }
}
/* Simple, authoritative mobile nav (CSS-only) */
.simple-nav { position: relative; z-index: 10; display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 10px 12px; }
.simple-brand img { height: 56px; display: block; }
.simple-burger { display: none; width: 42px; height: 42px; border: 1px solid rgba(230,211,163,.35); border-radius: 10px; display: grid; place-content: center; gap: 5px; cursor: pointer; background: #1b1411; z-index: 4001; }
.simple-burger span { width: 22px; height: 2px; background: #f5efe2; display: block; }
.simple-menu { display: flex; list-style: none; gap: 1.2rem; align-items: center; margin: 0; padding: 0; }
.simple-menu a { text-decoration: none; color: #f5efe2; font-weight: 700; }
@media (max-width: 992px) {
.simple-toggle { display: none; }
.simple-burger { display: grid; }
.simple-menu { position: fixed; left: 0; right: 0; top: 80px; display: none; flex-direction: column; align-items: stretch; background: #1b1411; color: #f5efe2; border-top: 1px solid rgba(230,211,163,.35); z-index: 99999; max-height: calc(100vh - 80px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.simple-menu li { border-bottom: 1px solid rgba(230,211,163,.15); }
.simple-menu a { padding: 14px 16px; display: block; }
.simple-toggle:checked ~ .simple-menu { display: flex; }
}