/* ============================================
ZENFIT — Global Stylesheet
Link this file in every HTML page:
============================================ */
/* =========================
1. IMPORTS
========================= */
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:ital,wght@0,400;0,700;1,400&family=Alegreya:ital,wght@0,400;0,500;0,700;1,400&display=swap');
/* =========================
2. ROOT VARIABLES
========================= */
:root {
--black: #0a4040;
--p-tag: #2d5a5a;
--white: #fdfcfa; /* #f5f9f6 */
--accent: #f0faf8; /* #f5f3ef */
--accent-dark: #b2d8c9;
--mid: #2a2a2a;
--muted: #6b6b6b;
--border: #e0ddd8;
--card-bg: #ffffff;
--font-display: 'Alegreya Sans SC', serif;
--font-body: 'Alegreya', serif;
--radius: 6px;
--radius-lg: 12px;
--shadow: 0 2px 16px rgba(0,0,0,0.07);
--shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
--max-width: 1200px;
--transition: 0.22s ease;
}
/* =========================
3. RESET / BASE STYLES
========================= */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
min-width: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background-color: var(--white);
color: var(--black);
font-size: 17px;
line-height: 1.8;
font-weight: 400;
overflow-x: clip;
}
img {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--transition);
}
a:hover {
color: var(--accent-dark);
}
ul, ol {
padding-left: 1.4rem;
}
hr {
display: none;
}
/* =========================
4. GLOBAL STYLES
========================= */
/* --- Typography --- */
h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 3.5rem);
letter-spacing: 2px;
line-height: 1.1;
margin-bottom: 1rem;
}
h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.2rem);
letter-spacing: 1.5px;
margin-bottom: 1rem;
}
h3 {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 0.4rem;
}
h4 {
font-family: var(--font-display);
font-size: 2.5rem;
color: var(--black);
letter-spacing: 1px;
}
h5 {
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-top: 1rem;
}
h6 {
font-size: 0.85rem;
font-weight: 400;
}
p {
color: #444;
line-height: 1.75;
margin-bottom: 0.8rem;
}
/* --- Accessibility --- */
.skip-link {
position: absolute;
left: -9999px;
top: 1rem;
z-index: 9999;
padding: .6rem 1.2rem;
background: var(--black);
color: var(--white);
font-size: 0.9rem;
font-weight: 500;
border-radius: 4px;
text-decoration: none;
transition: left 0s;
}
.skip-link:focus {
left: 1rem;
}
/* =========================
5. COMPONENTS
========================= */
/* --- Buttons --- */
.btn {
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 0.8rem 2rem;
border: 2px solid var(--black);
background-color: var(--accent);
color: var(--black);
border-radius: var(--radius);
cursor: pointer;
transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
display: inline-block;
}
.btn:hover {
background-color: var(--accent-dark);
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.btn-dark {
background-color: var(--black);
color: var(--white);
border-color: var(--black);
}
.btn-dark:hover {
background-color: var(--mid);
}
.btn-outline {
background-color: transparent;
color: var(--black);
border-color: var(--black);
}
.btn-outline:hover {
background-color: var(--black);
color: var(--white);
}
/* --- Forms & Inputs --- */
input[type="email"],
input[type="text"],
input[type="tel"],
input[type="number"],
textarea,
select {
font-family: var(--font-body);
font-size: 0.95rem;
padding: 0.85rem 1.1rem;
border: 1.5px solid var(--border);
border-radius: var(--radius);
background: var(--card-bg);
color: var(--black);
width: 100%;
transition: border-color var(--transition), box-shadow var(--transition);
outline: none;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
border-color: var(--black);
box-shadow: 0 0 0 3px rgba(200, 242, 90, 0.35);
outline: none;
}
textarea {
min-height: 120px;
resize: vertical;
}
input[readonly] {
background: #f5f5f5;
color: var(--muted);
cursor: not-allowed;
}
/* --- FAQ / Accordion (details/summary) --- */
details {
border: 1.5px solid var(--border);
border-radius: var(--radius);
margin-bottom: 0.8rem;
overflow: hidden;
transition: box-shadow var(--transition);
}
details[open] {
box-shadow: var(--shadow);
}
summary {
font-weight: 600;
font-size: 1rem;
padding: 1.1rem 1.4rem;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}
summary::-webkit-details-marker {
display: none;
}
summary::after {
content: '+';
font-size: 1.3rem;
font-weight: 300;
transition: transform var(--transition);
}
details[open] summary::after {
content: '−';
}
details p {
padding: 0 1.4rem 1.2rem;
font-size: 0.95rem;
color: var(--muted);
margin: 0;
}
/* --- Slide-In Nav Menu --- */
.nav-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 9998;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.nav-overlay.overlay-visible {
opacity: 1;
pointer-events: all;
}
.slide-nav {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100vh;
background: var(--black);
z-index: 9999;
padding: 1rem 1.8rem;
display: flex;
flex-direction: column;
gap: 2rem;
transform: translateX(-100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
}
.slide-nav.nav-open {
transform: translateX(0);
}
.nav-close {
background: transparent;
border: none;
color: var(--white);
font-size: 1.2rem;
cursor: pointer;
align-self: flex-end;
padding: 0.2rem;
box-shadow: none;
transform: none;
opacity: 0.7;
transition: opacity var(--transition);
pointer-events: auto;
}
.nav-close:hover {
opacity: 1;
background: transparent;
transform: none;
}
.nav-logo {
font-family: var(--font-display);
font-size: 1.8rem;
color: var(--accent);
letter-spacing: 2px;
display: block;
padding-bottom: 1rem;
}
.nav-logo img {
height: 25px;
width: auto;
object-fit: contain;
display: block;
}
.nav-links {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid rgba(255,255,255,0.1);
font-weight: 400;
}
.nav-links li a {
display: block;
padding: 1rem 0;
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 1.5px;
color: var(--white);
border-bottom: 1px solid rgba(255,255,255,0.1);
transition: color var(--transition), padding-left var(--transition);
}
.nav-links li a:hover,
.nav-links li a.active {
color: var(--accent);
padding-left: 0.5rem;
}
.nav-bottom {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 0.8rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
.nav-bottom a {
font-size: 0.82rem;
color: rgba(245,243,239,0.5);
letter-spacing: 0.5px;
transition: color var(--transition);
}
.nav-bottom a:hover {
color: var(--white);
}
/* --- Slide Nav: Categories Dropdown --- */
.nav-has-dropdown {
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav-dropdown-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1rem 0;
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 1.5px;
color: var(--white);
background: transparent;
border: none;
cursor: pointer;
box-shadow: none;
transform: none;
text-align: left;
transition: color var(--transition);
}
.nav-dropdown-toggle:hover {
color: var(--accent);
background: transparent;
transform: none;
box-shadow: none;
}
.nav-chevron {
flex-shrink: 0;
transition: transform 0.25s ease;
}
.dropdown-open .nav-chevron {
transform: rotate(180deg);
}
.nav-dropdown {
list-style: none;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.dropdown-open .nav-dropdown {
max-height: 300px;
padding-bottom: 0.8rem;
}
.nav-dropdown li a {
display: block;
padding: 0.65rem 0 0.65rem 1rem;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.5px;
color: rgba(245,243,239,0.65);
border-bottom: none;
border-left: 2px solid transparent;
transition: color var(--transition),
border-color var(--transition),
padding-left var(--transition);
}
.nav-dropdown li a:hover {
color: var(--accent);
border-left-color: var(--accent);
padding-left: 1.4rem;
}
/* --- Search Bar --- */
.search-bar-wrap {
background: var(--white);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
position: sticky;
top: 68px;
z-index: 99;
}
.search-bar-wrap.search-open {
max-height: 80px;
padding: 0.8rem 1.5rem;
overflow: visible;
}
.search-bar-inner {
display: flex;
align-items: center;
gap: 0.5rem;
max-width: var(--max-width);
margin: 0 auto;
position: relative;
}
.search-bar-inner input {
flex: 1;
font-size: 0.95rem;
padding: 0.65rem 1rem;
border: 1.5px solid var(--border);
border-radius: var(--radius);
outline: none;
transition: border-color 0.2s;
}
.search-bar-inner input:focus {
border-color: var(--black);
}
.search-submit {
padding: 0.65rem 1.5rem;
font-size: 0.82rem;
}
.search-close {
background: transparent;
border: none;
font-size: 1rem;
color: var(--muted);
cursor: pointer;
padding: 0.4rem;
box-shadow: none;
transform: none;
}
.search-close:hover {
background: transparent;
transform: none;
color: var(--black);
}
/* ── SEARCH DROPDOWN ── */
.search-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 52px; /* clear the close button */
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 32px rgba(0,0,0,0.13);
z-index: 200;
overflow: hidden;
max-height: 400px;
overflow-y: auto;
}
.search-dropdown-item {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.7rem 1rem;
cursor: pointer;
text-decoration: none;
color: var(--black);
transition: background 0.15s;
border-bottom: 1px solid var(--border);
}
.search-dropdown-item:last-child {
border-bottom: none;
}
.search-dropdown-item:hover,
.search-dropdown-item.active {
background: var(--surface, #f7f7f7);
}
.search-dropdown-img {
width: 40px;
height: 53px; /* 3:4 */
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
background: var(--border);
}
.search-dropdown-text {
flex: 1;
min-width: 0;
}
.search-dropdown-name {
font-size: 0.88rem;
font-weight: 600;
margin: 0 0 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-dropdown-name mark {
background: transparent;
color: var(--black);
font-weight: 800;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
}
.search-dropdown-meta {
font-size: 0.75rem;
color: var(--muted);
margin: 0;
}
.search-dropdown-price {
font-size: 0.82rem;
font-weight: 600;
color: var(--black);
flex-shrink: 0;
}
.search-dropdown-footer {
padding: 0.65rem 1rem;
font-size: 0.8rem;
color: var(--muted);
text-align: center;
cursor: pointer;
font-weight: 500;
letter-spacing: 0.02em;
}
.search-dropdown-footer:hover {
color: var(--black);
}
.search-no-results {
padding: 1.2rem 1rem;
font-size: 0.85rem;
color: var(--muted);
text-align: center;
}
/* --- Mini Cart --- */
.mini-cart {
position: fixed;
top: 0;
right: -420px;
width: 100%;
max-width: 400px;
height: 100vh;
background: var(--white);
z-index: 9999;
display: flex;
flex-direction: column;
box-shadow: -4px 0 24px rgba(0,0,0,0.12);
transition: right 0.35s ease;
}
.mini-cart.mini-cart-open {
right: 0;
}
.mini-cart-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.mini-cart-header h3 {
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 1px;
margin: 0;
}
.mini-cart-close {
background: none;
border: none;
font-size: 1rem;
cursor: pointer;
color: var(--muted);
box-shadow: none;
padding: 4px 8px;
}
.mini-cart-close:hover {
color: var(--black);
background: none;
transform: none;
box-shadow: none;
}
.mini-cart-items {
flex: 1;
overflow-y: auto;
padding: 1rem 1.5rem;
}
.mini-cart-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--border);
}
.mini-cart-img {
width: 54px;
height: 72px;
object-fit: cover;
border-radius: var(--radius);
flex-shrink: 0;
background: var(--card-bg);
}
.mini-cart-info {
flex: 1;
min-width: 0;
}
.mini-cart-name {
font-size: 0.9rem;
font-weight: 600;
margin: 0 0 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mini-cart-variant {
font-size: 0.78rem;
color: var(--muted);
margin: 0 0 4px;
}
.mini-cart-price {
font-size: 0.85rem;
color: var(--black);
margin: 0;
font-weight: 500;
}
.mini-cart-remove {
background: none;
border: none;
color: var(--muted);
font-size: 0.8rem;
cursor: pointer;
padding: 4px;
flex-shrink: 0;
box-shadow: none;
transform: none;
transition: color 0.2s;
}
.mini-cart-remove:hover {
color: #e53935;
background: none;
transform: none;
box-shadow: none;
}
.mini-cart-footer {
padding: 1.25rem 1.5rem;
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.mini-cart-total {
display: flex;
justify-content: space-between;
font-size: 1rem;
font-weight: 700;
margin-bottom: 1rem;
}
.mini-cart-view-btn {
display: block;
text-align: center;
width: 100%;
margin-bottom: 0.6rem;
padding: 0.85rem;
}
.mini-cart-checkout-btn {
display: block;
text-align: center;
width: 100%;
padding: 0.85rem;
}
.mini-cart-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 2rem;
text-align: center;
color: var(--muted);
}
.mini-cart {
transform: translateX(100%);
right: 0;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.mini-cart.mini-cart-open {
transform: translateX(0);
}
/* ===============================
MINI CART QTY CONTROL
================================= */
.mini-qty-control {
display: flex;
align-items: center;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
width: fit-content;
margin-top: 6px;
}
.mini-qty-control button {
width: 28px;
height: 28px;
border: none;
background: transparent;
color: var(--black);
font-size: 1rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--transition);
padding: 0;
}
.mini-qty-control button:hover {
background: var(--accent);
}
.mini-qty-control span {
font-size: 0.85rem;
min-width: 28px;
text-align: center;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
line-height: 28px;
color: var(--black);
}
/* --- Toast Notification --- */
.toast {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%) translateY(80px);
background: var(--black);
color: var(--white);
padding: 0.9rem 1.8rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 500;
box-shadow: var(--shadow-lg);
z-index: 9999;
transition: transform 0.35s ease, opacity 0.35s ease;
opacity: 0;
white-space: nowrap;
}
.toast.toast-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
/* --- Category Nav Pills --- */
.category-nav {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 0.5rem;
padding: 0.75rem 2rem 0.75rem 1rem; /* extra right padding so last pill isn't clipped */
scrollbar-width: none;
-ms-overflow-style: none;
}
.category-nav::-webkit-scrollbar {
display: none; /* hides scrollbar on Chrome/Safari */
}
.category-pill {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 0.5rem 1.2rem;
border-radius: 20px;
border: 1.5px solid var(--border);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--muted);
text-decoration: none;
white-space: nowrap;
transition: border-color var(--transition),
color var(--transition),
background var(--transition);
}
.category-pill:hover {
border-color: var(--black);
color: var(--black);
}
.category-pill.active-category {
background: var(--black);
color: var(--white);
border-color: var(--black);
}
/* ============================================================
SHOP TOOLBAR
============================================================ */
.shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
/* ============================================================
SORT DROPDOWN
============================================================ */
.sort-dropdown {
position: relative;
}
.sort-toggle {
display: flex;
align-items: center;
gap: 0.4rem;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 0.9rem;
text-transform: lowercase;
color: var(--black);
box-shadow: none;
}
.sort-toggle:hover {
background: none;
transform: none;
box-shadow: none;
}
.sort-toggle span:first-child {
opacity: 0.6;
}
/* --------------------------------------------
Menu
--------------------------------------------- */
.sort-menu {
position: absolute;
top: calc(100% + 0.6rem);
right: 0;
min-width: 210px;
background: #fff;
border: 1px solid var(--border);
padding: 0.4rem 0;
opacity: 0;
pointer-events: none;
transform: translateY(6px);
transition:
opacity 0.2s ease,
transform 0.2s ease;
z-index: 50;
}
.sort-menu.show {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* --------------------------------------------
Menu Items
--------------------------------------------- */
.sort-menu button {
width: 100%;
background: none;
border: none;
padding: 0.75rem 1rem;
text-align: left;
cursor: pointer;
font-size: 0.88rem;
text-transform: lowercase;
color: var(--black);
box-shadow: none;
}
.sort-menu button:hover {
background: #f7f7f7;
transform: none;
box-shadow: none;
}
/* =========================
6. LAYOUT (Header, Footer, Grid)
========================= */
/* --- Main & Section --- */
main {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1rem;
}
section {
padding: 3rem 0;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: 2px;
margin-bottom: 2.5rem;
text-align: center;
}
.shop-section {
padding: 1.5rem 0;
}
.shop-section-title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: 2px;
text-align: left;
margin-bottom: auto;
}
header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 2rem;
height: 68px;
background-color: var(--black);
position: sticky;
top: 0;
z-index: 100;
}
.header-left {
display: flex;
align-items: center;
gap: 1rem;
justify-content: flex-start;
}
.header-right {
display: flex;
align-items: center;
gap: 1rem;
justify-content: flex-end;
}
.logo-center {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.logo-img {
height: 40px;
width: auto;
display: block;
object-fit: contain;
}
.logo-text-fallback {
font-family: var(--font-display);
font-size: 1.8rem;
color: var(--accent);
letter-spacing: 2px;
display: none;
}
.header-icon-btn {
background: transparent;
border: none;
color: var(--white);
cursor: pointer;
padding: 0.4rem;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--transition), opacity var(--transition);
box-shadow: none;
transform: none;
position: relative;
text-decoration: none;
}
.header-icon-btn:hover {
color: var(--accent);
background: transparent;
transform: none;
box-shadow: none;
}
.hamburger {
background: transparent;
border: none;
cursor: pointer;
padding: 0.4rem;
display: flex;
flex-direction: column;
gap: 5px;
box-shadow: none;
transform: none;
}
.hamburger:hover {
background: transparent;
transform: none;
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--white);
border-radius: 2px;
transition: transform var(--transition), opacity var(--transition);
}
.cart-icon-btn {
position: relative;
}
.cart-count {
position: absolute;
top: -5px;
right: -7px;
background: var(--accent-dark);
color: var(--black);
font-size: 0.62rem;
font-weight: 700;
width: 17px;
height: 17px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* ============================================================
HOMEPAGE TRANSPARENT HEADER
============================================================ */
.home-page header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: transparent;
border-bottom: none;
z-index: 1000;
}
/* --------------------------------------------
Navigation Links
--------------------------------------------- */
.home-page .nav-links a,
.home-page .header-icon-btn,
.home-page .logo-text,
.home-page .mobile-menu-toggle {
color: #fff;
}
/* --------------------------------------------
Hover
--------------------------------------------- */
.home-page .nav-links a:hover,
.home-page .header-icon-btn:hover {
opacity: 0.8;
}
/* --------------------------------------------
Optional subtle gradient for readability
--------------------------------------------- */
.home-page header::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120%;
background:
linear-gradient(
to bottom,
rgba(0,0,0,0.18),
transparent
);
pointer-events: none;
z-index: -1;
}
/* --------------------------------------------
Search bar on homepage — needs solid bg
because the header is position:absolute
and the search bar would otherwise float
transparently over the hero image.
--------------------------------------------- */
.home-page .search-bar-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--white);
box-shadow: 0 2px 12px rgba(0,0,0,0.10);
z-index: 1100;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.home-page .search-bar-wrap.search-open {
max-height: 80px;
padding: 0.8rem 1.5rem;
overflow: visible;
}
/* --- Mobile Menu Toggle --- */
.menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}
.menu-toggle span {
width: 24px;
height: 2px;
background: var(--white);
border-radius: 2px;
transition: transform var(--transition), opacity var(--transition);
}
/* --- Footer --- */
footer {
background-color: var(--black);
color: var(--white);
padding: 4rem 2.5rem 2rem;
margin-top: 1.3rem;
}
.footer-grid {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
gap: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand .logo {
font-family: var(--font-display);
font-size: 2rem;
color: var(--accent);
letter-spacing: 2px;
display: block;
margin-bottom: 1rem;
}
.footer-brand p {
font-size: 0.88rem;
color: rgba(245,243,239,0.6);
line-height: 1.7;
margin: 0;
}
.footer-logo-img {
/*height: 25px;*/
margin-bottom: 25px;
margin-top: 15px;
}
.footer-socials {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.2rem;
}
.footer-socials a {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid rgba(245,243,239,0.2);
color: rgba(245,243,239,0.6);
transition: border-color var(--transition),
color var(--transition),
background var(--transition);
flex-shrink: 0;
}
.footer-socials a:hover {
border-color: var(--accent-dark);
color: var(--white);
background: rgba(178,216,201,0.15);
}
.footer-socials a svg {
width: 16px;
height: 16px;
}
.footer-col h3 {
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 1.5px;
color: var(--accent);
margin-bottom: 1.2rem;
}
.footer-col ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-col ul li a {
font-size: 0.9rem;
color: rgba(245,243,239,0.65);
transition: color var(--transition);
}
.footer-col ul li a:hover {
color: var(--accent);
}
.footer-newsletter input {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.2);
color: var(--white);
margin-bottom: 0.8rem;
}
.footer-newsletter input::placeholder {
color: rgba(255,255,255,0.4);
}
.footer-btn {
width: 100%;
text-align: left;
background-color: transparent;
color: var(--white);
border: 2px solid var(--white);
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 1rem 1rem;
border-radius: var(--radius);
cursor: pointer;
display: inline-block;
}
.footer-btn:hover {
background-color: var(--white);
color: var(--black);
transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.footer-bottom {
max-width: var(--max-width);
margin: 1.8rem auto 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-bottom p {
font-size: 0.82rem;
color: rgba(245,243,239,0.4);
margin: 0;
}
.footer-bottom-links {
display: flex;
gap: 1.5rem;
}
.footer-bottom-links a {
font-size: 0.82rem;
color: rgba(245,243,239,0.4);
transition: color var(--transition);
}
.footer-bottom-links a:hover {
color: var(--accent);
}
/* ============================================================
MOBILE FOOTER ACCORDIONS
============================================================ */
.footer-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: none;
border: none;
padding: 0;
cursor: pointer;
text-align: left;
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 1.5px;
color: var(--accent);
margin-bottom: 1.2rem;
text-transform: none;
transition: none;
transform: none;
box-shadow: none;
outline: none;
appearance: none;
}
.footer-accordion .footer-toggle:hover,
.footer-accordion .footer-toggle:focus,
.footer-accordion .footer-toggle:active {
background: none !important;
color: var(--accent) !important;
transform: none !important;
box-shadow: none !important;
outline: none !important;
text-transform: none !important;
transition: none !important;
}
.footer-arrow {
display: none;
font-size: 1rem;
color: var(--accent);
opacity: 0.7;
transition: transform 0.2s ease;
}
/* ============================================================
MOBILE ONLY
============================================================ */
@media (max-width: 768px) {
.footer-accordion .footer-links {
display: none;
padding-bottom: 1rem;
}
.footer-accordion.active .footer-links {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.footer-accordion.active .footer-arrow {
transform: rotate(45deg);
}
.footer-arrow {
display: inline-block;
}
}
/* =========================
7. PAGE-SPECIFIC STYLES
========================= */
/* ============================================================
HOMEPAGE HERO SYSTEM
============================================================ */
/* --------------------------------------------
Base Hero Layout
--------------------------------------------- */
.hero {
position: relative;
width: 100%;
aspect-ratio: 16 / 7.5;
display: flex;
align-items: flex-end;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-2 {
width: 100vw;
margin-left: calc(50% - 50vw);
aspect-ratio: 16 / 6.2;
margin-top: 2rem;
margin-bottom: 2rem;
}
/* --------------------------------------------
Overlay
--------------------------------------------- */
.hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(10, 64, 64, 0.55) 0%,
rgba(10, 64, 64, 0.1) 40%,
transparent 100%
);
pointer-events: none;
}
/* --------------------------------------------
Hero Content
--------------------------------------------- */
.hero-text {
position: relative;
z-index: 1;
max-width: 540px;
padding: 0 0 3rem 3rem;
}
/* --------------------------------------------
Eyebrow
--------------------------------------------- */
.hero-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
margin-bottom: 0.65rem;
}
/* --------------------------------------------
Heading
--------------------------------------------- */
.hero-text h1,
.hero-text h2 {
font-family: var(--font-display);
font-size: clamp(2.1rem, 5vw, 3.4rem);
font-weight: 700;
line-height: 1.02;
letter-spacing: 0.02em;
color: #fff;
margin-bottom: 1.2rem;
}
/* --------------------------------------------
Supporting Text
--------------------------------------------- */
.hero-text p {
font-size: 0.95rem;
line-height: 1.7;
color: rgba(255,255,255,0.82);
margin-bottom: 1.1rem;
max-width: 420px;
}
/* --------------------------------------------
CTA
--------------------------------------------- */
.hero-text .btn {
padding: 0.8rem 1.8rem;
border: none;
background: #fff;
color: var(--black);
font-size: 0.82rem;
letter-spacing: 0.12em;
}
/* --------------------------------------------
Hover
--------------------------------------------- */
.hero-text .btn:hover {
background: var(--accent);
}
/* ============================================================
SHOP BY CATEGORY
============================================================ */
.category-section {
padding: 3rem 0;
}
/* --------------------------------------------
Grid
--------------------------------------------- */
.category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1.5rem;
}
/* --------------------------------------------
Card
--------------------------------------------- */
.category-card {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: 0;
text-decoration: none;
color: #fff;
display: flex;
align-items: flex-end;
padding: 1.4rem;
background:
linear-gradient(
180deg,
#315454 0%,
#183636 100%
);
transition:
transform 0.35s ease,
opacity 0.35s ease;
isolation: isolate;
}
/* --------------------------------------------
Overlay
--------------------------------------------- */
.category-card::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(0,0,0,0.32) 0%,
rgba(0,0,0,0.08) 40%,
transparent 100%
);
z-index: -1;
}
/* --------------------------------------------
Hover
--------------------------------------------- */
.category-card:hover {
transform: translateY(-3px);
}
/* --------------------------------------------
Content
--------------------------------------------- */
.category-card-content {
position: relative;
z-index: 1;
}
/* --------------------------------------------
Title
--------------------------------------------- */
.category-card h3 {
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 0.04em;
margin: 0;
}
/* --------------------------------------------
Supporting Text
--------------------------------------------- */
.category-card p {
font-size: 0.78rem;
line-height: 1.5;
opacity: 0.85;
margin-top: 0.3rem;
max-width: 180px;
color: #ccc;
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 767px) {
.category-grid {
display: flex;
overflow-x: auto;
gap: 0.8rem;
padding-bottom: 0.3rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.category-grid::-webkit-scrollbar {
display: none;
}
.category-card {
flex: 0 0 74%;
scroll-snap-align: start;
}
}
/* ============================================================
IMAGE UPLOAD CONVENTIONS — where to drop your image files
============================================================
Hero banners (homepage):
images/hero-main.webp → homepage hero 1 (.hero-1)
images/hero-second.webp → homepage hero 2 (.hero-2)
Page heroes (billboard on shop/about/contact/FAQ etc):
images/hero-shop.webp → shop.html (.page-hero--shop)
images/hero-about.webp → about.html (.page-hero--about)
images/hero-contact.webp → contact.html (.page-hero--contact)
images/hero-faq.webp → FAQ.html (.page-hero--faq)
images/hero-collection.webp → collection.html (.page-hero--collection)
Category cards (homepage grid):
images/cat-legs-glutes.webp
images/cat-grip-wrist.webp
images/cat-nutrition.webp
images/cat-all.webp
Recommended size: 1200×600px for heroes, 600×800px for category cards.
Use .webp for best performance. Add the class to the HTML element.
============================================================ */
/* --- Homepage hero background images --- */
.hero-1 { background-image: url('images/hero-main.webp'); }
.hero-2 { background-image: url('images/hero-second.webp'); }
/* --- Page hero background images --- */
.page-hero--shop { background-image: url('images/hero-shop.webp'); }
.page-hero--about { background-image: url('images/hero-about.webp'); }
.page-hero--contact { background-image: url('images/hero-contact.webp'); }
.page-hero--faq { background-image: url('images/hero-faq.webp'); }
.page-hero--collection { background-image: url('images/hero-collection.webp'); }
.contact-banner--billboard { background-image: url('images/cont-bill.webp'); }
/* When a page-hero has a background image, add background-size cover */
.page-hero--shop,
.page-hero--about,
.page-hero--contact,
.page-hero--faq,
.page-hero--collection
.contact-banner--billboard {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* --- Category card background images --- */
/* Gradient is layered behind the image — if image is missing, gradient shows instead */
.category-card--legs { background: url('images/cat-legs-glutes.webp') center/cover no-repeat, linear-gradient(180deg, #315454 0%, #183636 100%); }
.category-card--grip { background: url('images/cat-grip-wrist.webp') center/cover no-repeat, linear-gradient(180deg, #315454 0%, #183636 100%); }
.category-card--nutrition { background: url('images/cat-nutrition.webp') center/cover no-repeat, linear-gradient(180deg, #315454 0%, #183636 100%); }
.category-card--all { background: url('images/cat-all.webp') center/cover no-repeat, linear-gradient(180deg, #315454 0%, #183636 100%); }
/* ============================================================
HOMEPAGE SECTION SPACING
============================================================ */
.home-section {
padding: 3rem 0 1.5rem;
}
/* --------------------------------------------
Section Titles
--------------------------------------------- */
.section-title--left {
text-align: left;
margin-bottom: 1rem;
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 768px) {
.hero {
aspect-ratio: 3 / 4.2;
}
.hero-1 {
background-position: 70% center;
}
.hero-2 {
aspect-ratio: 3/3.5;
}
.hero-2 img {
transform: rotate(90deg);
}
.hero-text {
padding: 0 1.2rem 1rem 1.2rem;
}
.hero-text h1,
.hero-text h2 {
font-size: clamp(1.8rem, 8vw, 2.4rem);
}
.hero-text p {
font-size: 0.9rem;
line-height: 1.6;
}
}
/* ============================================================
INTERNAL PAGE HERO for shop, about, contact pages
============================================================ */
.page-hero {
position: relative;
width: 100%;
padding: 5rem 2rem 3rem;
display: flex;
align-items: flex-end;
background: linear-gradient(
to top,
rgba(10, 64, 64, 0.55) 0%,
rgba(10, 64, 64, 0.1) 40%,
transparent 100%
);
overflow: hidden;
}
/* --------------------------------------------
Optional subtle overlay texture
--------------------------------------------- */
.page-hero::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(0,0,0,0.03),
transparent
);
pointer-events: none;
}
/* --------------------------------------------
Inner Container
--------------------------------------------- */
.page-hero-inner {
position: relative;
z-index: 1;
max-width: 680px;
}
/* --------------------------------------------
Eyebrow
--------------------------------------------- */
.page-hero-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-dark);
margin-bottom: 0.8rem;
}
/* --------------------------------------------
Heading
--------------------------------------------- */
.page-hero h1 {
font-family: var(--font-display);
font-size: clamp(2.2rem, 5vw, 4rem);
line-height: 0.98;
letter-spacing: 0.02em;
color: var(--black);
margin-bottom: 1rem;
}
/* --------------------------------------------
Supporting Text
--------------------------------------------- */
.page-hero p {
font-size: 1rem;
line-height: 1.75;
color: #466060;
max-width: 540px;
margin: 0;
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 768px) {
.page-hero {
padding:
4rem
1.2rem
2.5rem;
}
.page-hero h1 {
font-size: clamp(1.9rem, 8vw, 2.8rem);
}
.page-hero p {
font-size: 0.92rem;
line-height: 1.65;
}
}
/* ===============================
SHOP PRODUCT GRID
================================= */
.shop-product {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
}
@media (min-width: 768px) {
.shop-product {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
}
@media (min-width: 1024px) {
.shop-product {
grid-template-columns: repeat(4, 1fr);
}
}
/* ===============================
HOMEPAGE PRODUCT SCROLL
================================= */
/* Hide scrollbar while keeping scroll */
.product {
display: flex;
gap: 1.2rem;
overflow-x: auto;
padding: 1.5rem 0;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}
.product::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
/* ===============================
CARD WIDTH IN SCROLL
================================= */
.product-item {
flex: 0 0 70%;
scroll-snap-align: start;
}
@media (min-width: 768px) {
.product-item {
flex: 0 0 40%;
}
}
@media (min-width: 1024px) {
.product-item {
flex: 0 0 25%;
}
}
/* ===============================
PRODUCT CARD
================================= */
.product-item,
.shop-product-item {
background: transparent;
border: none;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
text-align: left;
align-items: flex-start;
transition: transform 0.3s ease;
}
.product-item:hover,
.shop-product-item:hover {
transform: translateY(-3px);
}
/* ===============================
SKELETON LOADING STATE
================================= */
.product-skeleton {
pointer-events: none;
}
.product-skeleton::before {
content: '';
display: block;
width: 100%;
aspect-ratio: 3 / 4;
background: linear-gradient(90deg, var(--border) 25%, #e8e8e8 50%, var(--border) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s infinite;
border-radius: 4px;
}
.product-skeleton::after {
content: '';
display: block;
width: 60%;
height: 1rem;
margin-top: 0.6rem;
background: linear-gradient(90deg, var(--border) 25%, #e8e8e8 50%, var(--border) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s infinite;
border-radius: 4px;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ===============================
IMAGE CONTAINER (3:4 RATIO)
================================= */
.product-image {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: 0;
}
/* ==========================================
PRODUCT BADGE (BOTTOM LEFT STYLE FOR HOME PAGE)
============================================= */
.product-home-badge {
position: absolute;
bottom: 10px;
left: 10px; /* ← bottom left ✓ already correct */
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 7px;
background: #f5f9f6;
color: #0a4040;
z-index: 3;
border-radius: 5px;
border: 1px solid #0a4040;
line-height: 1;
width: fit-content;
pointer-events: none;
}
.product-home-badge.new {
background: rgb(255 255 255 / 95%);
}
/* =============================================
PRODUCT CARD BADGE BOTTOM RIGHT the one connected to js
============================================== */
.product-card-badge {
position: absolute;
bottom: 8px;
right: 8px; /* ← changed from left to right */
left: unset; /* ← clears any inherited left value */
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 4px 6px;
background: #000;
color: #fff;
z-index: 2;
border-radius: 3px;
line-height: 1;
width: fit-content;
pointer-events: none;
}
.product-card-badge.low-stock {
background: #b91c1c;
}
.product-card-badge.sold-out {
background: #000;
opacity: 0.85;
}
/* ===============================
IMAGE SWAP
================================= */
.primary-img,
.secondary-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.4s ease, transform 0.5s ease;
}
.primary-img {
z-index: 1;
opacity: 1;
}
.secondary-img {
z-index: 2;
opacity: 0;
}
.product-item:hover .secondary-img,
.shop-product-item:hover .secondary-img {
opacity: 1;
}
.product-item:hover .primary-img,
.shop-product-item:hover .primary-img {
opacity: 0;
}
/* Scale only the visible top image on hover */
.product-item:hover .secondary-img,
.shop-product-item:hover .secondary-img {
transform: scale(1.08);
}
/* ===============================
ICON OVERLAY
================================= */
.product-actions {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 0.4rem;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.product-item:hover .product-actions,
.shop-product-item:hover .product-actions {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 767px) {
.product-actions {
opacity: 1;
transform: translateY(0);
}
}
.icon-btn {
/* Reset */
padding: 0;
border: none;
background: transparent;
color: var(--black);
font-size: 0;
/* Layout */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
/* Optional */
transition: color 0.25s ease, transform 0.25s ease;
}
.icon-btn:hover {
transform: scale(1.12);
background: var(--black);
color: #fff;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.icon-btn svg {
width: 18px;
height: 18px;
stroke-width: 2;
pointer-events: none;
}
.icon-btn.wishlist svg {
fill: none;
}
.icon-btn.wishlist.active svg {
fill: red;
stroke: red;
}
/* ===============================
TEXT
================================= */
.product-item h3,
.shop-product-item h3 {
font-size: 0.9rem;
font-weight: 500;
margin-top: 0.6rem;
margin-bottom: 0.2rem;
}
.product-item p,
.shop-product-item p {
font-size: 1rem;
font-weight: 600;
color: var(--black);
margin: 0;
}
/* ===============================
ACTIVE VARIANT STYLE (for product page)
================================= */
.active-variant {
border: 2px solid #0b4d4d;
background: #f5f5f5;
}
/* --- Features Strip --- */
.features-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
background: transparent;
padding: 1rem 0;
border-radius: 0;
justify-content: center;
}
.feature-item {
text-align: center;
padding-top: 1.5rem;
border-top: 3px solid var(--accent-dark);
}
.feature-item .feature-icon {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.feature-item .feature-icon svg {
width: 32px;
height: 32px;
stroke: var(--black);
stroke-width: 1.5;
}
.feature-item h3 {
font-family: var(--font-display);
font-size: 0.9rem;
letter-spacing: 1px;
color: var(--black);
margin-bottom: 0.4rem;
}
.feature-item p {
font-size: 0.85rem;
color: var(--muted);
margin: 0;
line-height: 1.6;
}
/* --- Testimonials --- */
.testimonials-section {
text-align: center;
padding: 4rem 0;
}
.section-eyebrow {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--black);
margin-bottom: 0.5rem;
text-align: left;
}
.testimonial {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 1.5rem;
padding-bottom: 1rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.testimonial::-webkit-scrollbar {
display: none;
}
.testimonial-item {
flex: 0 0 300px;
scroll-snap-align: start;
background: var(--card-bg);
border: 1px solid var(--border);
border: none;
background: #f7f7f7;
border-radius: var(--radius-lg);
padding: 2rem 1.5rem;
position: relative;
}
.testimonial-item::before {
content: '"';
font-family: var(--font-display);
font-size: 5rem;
color: var(--accent);
position: absolute;
top: -0.5rem;
left: 1.2rem;
line-height: 1;
}
.testimonial-item p {
font-style: italic;
font-size: 0.95rem;
margin-top: 1.5rem;
margin-bottom: 1.2rem;
}
.testimonial-item h4 {
font-size: 0.9rem;
font-family: var(--font-body);
font-weight: 700;
color: var(--muted);
}
/* --- Promo Banner --- */
.promo-banner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-radius: var(--radius-lg);
overflow: hidden;
margin: 2rem 0;
min-height: 420px;
}
.promo-banner-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.promo-banner-content {
background: var(--black);
color: var(--white);
padding: 4rem 3.5rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.2rem;
}
.promo-banner-content h2 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3vw, 2.8rem);
letter-spacing: 1.5px;
color: var(--white);
line-height: 1.1;
margin: 0;
}
.promo-banner-content h2 span {
color: var(--accent);
}
.promo-banner-content p {
font-size: 1rem;
color: rgba(245,243,239,0.7);
line-height: 1.75;
margin: 0;
max-width: 380px;
}
.promo-banner-content .btn {
align-self: flex-start;
margin-top: 0.5rem;
}
/* --- Newsletter Section --- */
.newsletter-section {
background: var(--black);
color: var(--white);
padding: 4rem 2.5rem;
text-align: center;
border-radius: var(--radius-lg);
}
.newsletter-section h2 {
font-family: var(--font-display);
font-size: 2.2rem;
color: var(--accent);
letter-spacing: 2px;
margin-bottom: 0.6rem;
}
.newsletter-section p {
color: rgba(245,243,239,0.7);
margin-bottom: 1.8rem;
}
.newsletter-form {
display: flex;
gap: 0.8rem;
justify-content: center;
flex-wrap: wrap;
max-width: 480px;
margin: 0 auto;
}
.newsletter-form input {
flex: 1;
min-width: 220px;
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.25);
color: var(--white);
}
.newsletter-form input::placeholder {
color: rgba(255,255,255,0.4);
}
.newsletter-form input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(200, 242, 90, 0.2);
}
/* --- Stats Row (About page) --- */
.stats-row {
display: flex;
flex-wrap: nowrap;
gap: 0;
margin: 2.5rem 0;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.stat-item {
flex: 1;
text-align: center;
padding: 2rem 1rem;
border-right: 1px solid var(--border);
}
.stat-item:last-child {
border-right: none;
}
.stat-item h4 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 3rem);
color: var(--black);
line-height: 1;
margin-bottom: 0.4rem;
}
.stat-item p {
font-size: clamp(0.7rem, 1.5vw, 0.85rem);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
color: var(--muted);
margin: 0;
}
/* --- Founder Section (About page) --- */
.founder-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-radius: var(--radius-lg);
overflow: hidden;
margin: 2rem 0;
min-height: 480px;
}
.founder-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Swap .founder-placeholder for an ![]()
once you have the photo */
.founder-placeholder {
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
.founder-content {
background: var(--black);
color: var(--white);
padding: 4rem 3.5rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.5rem;
}
.founder-content h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.5vw, 2rem);
letter-spacing: 1.5px;
color: var(--accent);
margin: 0;
}
.founder-content blockquote {
font-size: 1rem;
font-style: italic;
line-height: 1.85;
color: rgba(245,243,239,0.8);
border-left: 3px solid var(--accent);
padding-left: 1.2rem;
margin: 0;
}
.founder-content h5 {
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--white);
margin: 0;
}
.founder-content h6 {
font-size: 0.82rem;
font-weight: 400;
color: rgba(245,243,239,0.5);
letter-spacing: 1px;
margin: 0;
}
/* --- Mission Section (About page) --- */
.mission-section {
padding: 6rem 0;
}
.mission-header {
text-align: left;
margin-bottom: 3.5rem;
}
.mission-eyebrow {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--accent-dark);
margin-bottom: 0.75rem;
}
.mission-title {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.5rem);
letter-spacing: 3px;
color: var(--black);
margin: 0;
}
.mission-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.mission-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mission-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(10, 64, 64, 0.1);
}
.mission-card--accent {
background: var(--black);
border-color: var(--black);
}
.mission-card--accent .mission-card-num {
color: rgba(255, 255, 255, 0.15);
}
.mission-card--accent .mission-card-heading {
color: var(--accent-dark);
}
.mission-card--accent .mission-card-text {
color: rgba(255, 255, 255, 0.75);
}
.mission-card-num {
font-family: var(--font-display);
font-size: 4rem;
font-weight: 700;
color: var(--border);
line-height: 1;
letter-spacing: -2px;
margin-bottom: 0.25rem;
transition: color 0.3s ease;
}
.mission-card:not(.mission-card--accent):hover .mission-card-num {
color: var(--accent-dark);
}
.mission-card-heading {
font-family: var(--font-display);
font-size: 1.3rem;
letter-spacing: 1px;
color: var(--black);
margin: 0;
}
.mission-card-text {
font-size: 0.95rem;
line-height: 1.8;
color: var(--muted);
margin: 0;
}
.mission-card::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 60px;
height: 60px;
background: var(--accent-dark);
opacity: 0.08;
border-radius: var(--radius-lg) 0 var(--radius-lg) 0;
transition: opacity 0.3s ease;
}
.mission-card:hover::after {
opacity: 0.18;
}
.mission-card--accent::after {
background: var(--accent-dark);
opacity: 0.15;
}
@media (max-width: 900px) {
.mission-cards {
grid-template-columns: 1fr;
max-width: 520px;
margin: 0 auto;
}
}
@media (max-width: 640px) {
.mission-section {
padding: 4rem 0;
}
.mission-card {
padding: 2rem 1.5rem;
}
}
/* --- Contact Page --- */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2rem;
margin: 2rem 0;
}
.contact-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem 1.5rem;
}
.contact-card h2 {
font-family: var(--font-display);
font-size: 1.3rem;
letter-spacing: 1.5px;
margin-bottom: 0.8rem;
}
.contact-card p {
font-size: 0.95rem;
color: var(--muted);
margin: 0;
}
/* ============================================================
CONTACT — EDITORIAL BANNER
============================================================ */
.contact-banner {
position: relative;
width: 100%;
aspect-ratio: 16 / 6;
margin: 2rem 0;
display: flex;
align-items: flex-end;
overflow: hidden;
padding: 2rem;
width: 100vw;
margin-left: calc(50% - 50vw);
background:
linear-gradient(
180deg,
#315454 0%,
#183636 100%
);
}
/* --------------------------------------------
Overlay
--------------------------------------------- */
.contact-banner::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(0,0,0,0.35) 0%,
rgba(0,0,0,0.08) 45%,
transparent 100%
);
pointer-events: none;
}
/* --------------------------------------------
Content
--------------------------------------------- */
.contact-banner-content {
position: relative;
z-index: 1;
max-width: 520px;
color: #fff;
}
/* --------------------------------------------
Eyebrow
--------------------------------------------- */
.contact-banner-eyebrow {
display: inline-block;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
margin-bottom: 0.8rem;
}
/* --------------------------------------------
Heading
--------------------------------------------- */
.contact-banner h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1;
letter-spacing: 0.03em;
text-transform: lowercase;
margin-bottom: 1rem;
}
/* --------------------------------------------
Text
--------------------------------------------- */
.contact-banner p {
font-size: 0.95rem;
line-height: 1.7;
opacity: 0.88;
max-width: 420px;
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 768px) {
.contact-banner {
aspect-ratio: 3 / 3.5;
padding: 1.5rem;
}
.contact-banner h2 {
font-size: clamp(1.8rem, 8vw, 2.5rem);
}
.contact-banner p {
font-size: 0.9rem;
line-height: 1.6;
}
}
.contact-qa {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
padding: 4rem 0;
}
.contact-qa-label {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent-dark);
background: rgba(178, 216, 201, 0.2);
padding: 0.3rem 0.9rem;
border-radius: 20px;
margin-bottom: 1rem;
}
.contact-qa-left h2,
.contact-qa-right h2 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.5vw, 2rem);
letter-spacing: 1.5px;
margin-bottom: 0.6rem;
}
.contact-qa-left p,
.contact-qa-right > p {
color: var(--muted);
font-size: 0.95rem;
margin-bottom: 2rem;
}
.contact-message-form {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.contact-message-form button {
align-self: flex-start;
padding: 0.85rem 2.2rem;
}
.contact-faq {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-top: 0.5rem;
}
/* --- Cart Page --- */
.cart-table {
width: 100%;
border-collapse: collapse;
margin-top: 1.5rem;
}
.cart-table th {
text-align: left;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--muted);
padding: 0.8rem 1rem;
border-bottom: 2px solid var(--border);
}
.cart-table td {
padding: 1.2rem 1rem;
border-bottom: 1px solid var(--border);
vertical-align: middle;
font-size: 0.95rem;
}
.cart-table td img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: var(--radius);
}
.cart-summary {
margin-top: 2rem;
text-align: right;
border-top: 2px solid var(--border);
padding-top: 1.5rem;
}
.cart-summary .total-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--muted);
}
.cart-summary .total-amount {
font-family: var(--font-display);
font-size: 2.5rem;
letter-spacing: 1px;
margin: 0.3rem 0 1.2rem;
}
.qty-input {
width: 60px;
text-align: center;
padding: 0.4rem 0.5rem;
}
/* Cart Page — Extra CSS (cart.html) */
.cart-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 3rem;
align-items: start;
padding: 3rem 0;
}
.cart-product-info {
display: flex;
align-items: center;
gap: 1rem;
}
.cart-product-name {
font-weight: 600;
font-size: 0.95rem;
margin: 0 0 0.2rem;
color: var(--black);
}
.cart-product-variant {
font-size: 0.82rem;
color: var(--muted);
margin: 0;
}
.qty-control {
display: flex;
align-items: center;
gap: 0.4rem;
}
.qty-btn {
width: 30px;
height: 30px;
padding: 0;
font-size: 1rem;
border: 1.5px solid var(--border);
background: transparent;
border-radius: var(--radius);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition);
box-shadow: none;
transform: none;
}
.qty-btn:hover {
background: var(--accent);
border-color: var(--accent);
transform: none;
}
.qty-input {
width: 50px;
text-align: center;
padding: 0.3rem;
font-size: 0.9rem;
}
.remove-btn {
background: transparent;
border: none;
color: var(--muted);
font-size: 0.85rem;
padding: 0.3rem;
cursor: pointer;
box-shadow: none;
transform: none;
transition: color var(--transition);
}
.remove-btn:hover {
color: #e53935;
background: transparent;
transform: none;
}
.continue-shopping {
display: inline-block;
margin-top: 1.5rem;
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--muted);
text-decoration: underline;
}
.cart-summary-box {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
position: sticky;
top: 90px;
}
.cart-summary-box h2 {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 1.5px;
margin-bottom: 1.5rem;
}
.summary-row {
display: flex;
justify-content: space-between;
font-size: 0.95rem;
margin-bottom: 0.9rem;
color: var(--muted);
}
.summary-divider {
border-top: 1.5px solid var(--border);
margin: 1rem 0;
}
.summary-total {
font-size: 1.15rem;
font-weight: 700;
color: var(--black);
margin-bottom: 1.5rem;
}
.promo-code {
display: flex;
gap: 0.6rem;
margin-bottom: 1.2rem;
}
.promo-code input {
flex: 1;
font-size: 0.88rem;
padding: 0.65rem 0.9rem;
}
.promo-code .btn-outline {
font-size: 0.78rem;
padding: 0.65rem 1rem;
white-space: nowrap;
}
.checkout-btn {
display: block;
text-align: center;
width: 100%;
padding: 1rem;
}
.cart-reassurance {
text-align: center;
font-size: 0.78rem;
color: var(--muted);
margin-top: 0.8rem;
margin-bottom: 0;
}
.empty-cart {
text-align: center;
padding: 4rem 0;
}
.empty-cart p {
font-size: 1.1rem;
color: var(--muted);
margin-bottom: 1.5rem;
}
/* --- Account / Login Page --- */
.auth-container {
max-width: 460px;
margin: 4rem auto;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 3rem 2.5rem;
}
.auth-container h1 {
font-size: 2rem;
margin-bottom: 0.3rem;
}
.auth-container p.subtitle {
color: var(--muted);
font-size: 0.9rem;
margin-bottom: 2rem;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.auth-switch {
text-align: center;
margin-top: 1.2rem;
font-size: 0.9rem;
color: var(--muted);
}
.auth-switch a {
font-weight: 600;
color: var(--black);
text-decoration: underline;
}
/* Account Page — Extra CSS (account.html) */
.auth-container {
max-width: 480px;
margin: 3rem auto;
}
.auth-tabs {
display: flex;
border-bottom: 2px solid var(--border);
margin-bottom: 2rem;
}
.auth-tab {
flex: 1;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
padding: 0.9rem;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
color: var(--muted);
box-shadow: none;
transform: none;
margin-bottom: -2px;
transition: color var(--transition), border-color var(--transition);
}
.auth-tab:hover {
background: transparent;
transform: none;
}
.auth-tab.active-tab {
color: var(--black);
border-bottom-color: var(--accent);
}
.auth-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.auth-form h2 {
font-family: var(--font-display);
font-size: 1.8rem;
margin-bottom: 0;
}
.auth-form .subtitle {
color: var(--muted);
font-size: 0.9rem;
margin: 0 0 0.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.form-group label {
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.forgot-link {
font-size: 0.85rem;
color: var(--muted);
text-decoration: underline;
align-self: flex-start;
}
.form-check {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.85rem;
color: var(--muted);
}
.form-check input[type="checkbox"] {
width: auto;
margin-top: 3px;
flex-shrink: 0;
}
.form-check a {
color: var(--black);
text-decoration: underline;
}
/* Dashboard (logged-in view) */
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
flex-wrap: wrap;
gap: 1rem;
}
.dashboard-header h2 {
font-family: var(--font-display);
font-size: 2rem;
letter-spacing: 1px;
margin-bottom: 0.2rem;
}
.dashboard-header p {
color: var(--muted);
margin: 0;
font-size: 0.9rem;
}
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.dashboard-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.8rem;
}
.dashboard-card h3 {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 1.2rem;
}
.span-2 {
grid-column: span 2;
}
.orders-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
/* Wrap the table in this div in account.html to allow horizontal
scrolling on mobile without breaking the page layout */
.orders-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.orders-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
table-layout: fixed;
min-width: 520px;
}
/* Column widths — must add up to 100% */
.orders-table th:nth-child(1),
.orders-table td:nth-child(1) { width: 18%; } /* Order # */
.orders-table th:nth-child(2),
.orders-table td:nth-child(2) { width: 16%; } /* Date */
.orders-table th:nth-child(3),
.orders-table td:nth-child(3) { width: 38%; } /* Items — most space */
.orders-table th:nth-child(4),
.orders-table td:nth-child(4) { width: 16%; } /* Total */
.orders-table th:nth-child(5),
.orders-table td:nth-child(5) { width: 12%; } /* Status */
/* Items cell truncates instead of stretching the table */
.orders-table td:nth-child(3) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 0; /* triggers ellipsis with table-layout: fixed */
}
.orders-table th {
text-align: left;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--muted);
padding: 0.6rem 0.8rem;
border-bottom: 2px solid var(--border);
}
.orders-table td {
padding: 0.9rem 0.8rem;
border-bottom: 1px solid var(--border);
color: #444;
}
.status-badge {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.5px;
padding: 0.3rem 0.75rem;
border-radius: 20px;
text-transform: uppercase;
}
.status-badge.delivered {
background: #e8f5e9;
color: #2e7d32;
}
.status-badge.processing {
background: #fff8e1;
color: #f57f17;
}
.view-all-link {
display: inline-block;
margin-top: 1rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--black);
text-decoration: underline;
}
.saved-address {
font-style: normal;
font-size: 0.95rem;
line-height: 1.8;
color: #444;
margin-bottom: 1rem;
}
.edit-link {
font-size: 0.85rem;
font-weight: 600;
text-decoration: underline;
color: var(--black);
}
@media (max-width: 768px) {
.auth-container {
width: 100%;
max-width: 100%;
margin: 2rem 0;
padding: 2rem 1.2rem;
border-left: none;
border-right: none;
border-radius: 0;
}
}
/* acc buttons */
.acc-btn {
width: 100%;
text-align: left;
background-color: transparent;
color: var(--black);
border: 1.5px solid var(--accent-dark);
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 1rem 1rem;
border-radius: var(--radius);
cursor: pointer;
display: inline-block;
}
.acc-btn:hover {
background-color: var(--accent);
color: var(--black);
transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
/* --- Policy Pages (Privacy, Terms, Shipping) --- */
.policy-content {
max-width: 760px;
margin: 3rem auto;
padding-bottom: 3rem;
}
.policy-content h1 {
font-size: 2.5rem;
margin-bottom: 0.3rem;
}
.policy-content .last-updated {
font-size: 0.85rem;
color: var(--muted);
margin-bottom: 2.5rem;
display: block;
}
.policy-content h2 {
font-family: var(--font-display);
font-size: 1.4rem;
letter-spacing: 1px;
margin-top: 2.5rem;
margin-bottom: 0.8rem;
padding-bottom: 0.4rem;
border-bottom: 2px solid var(--accent);
display: inline-block;
}
.policy-content h3 {
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.4rem;
}
.policy-content li {
margin-bottom: 0.4rem;
font-size: 0.97rem;
color: #444;
}
/* --- Product Detail Page --- */
/* BREADCRUMB */
.breadcrumb {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 1.4rem 0 0.6rem;
font-size: 0.78rem;
letter-spacing: 0.5px;
color: var(--muted);
}
.breadcrumb a {
color: var(--muted);
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb a:hover {
color: var(--black);
}
.breadcrumb-sep {
color: var(--border);
}
.breadcrumb-current {
color: var(--black);
font-weight: 700;
}
/* PRODUCT HERO LAYOUT */
.product-detail-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
padding: 1.5rem 0 5rem;
align-items: start;
}
.product-images {
position: sticky;
top: 88px;
}
/* ===============================
PRODUCT HERO LAYOUT
================================= */
.product-detail-hero {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 3rem;
align-items: start;
}
@media (max-width: 768px) {
.product-detail-hero {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* ===============================
IMAGE GALLERY (CLEAN VERSION)
================================= */
.main-image-wrap {
position: relative;
overflow: hidden;
border-radius: 4px;
background: #f8f8f8;
padding: 1rem;
}
/* subtle overlay on hover */
.main-image-wrap::after {
content: '';
position: absolute;
inset: 0;
background: transparent;
transition: background 0.3s ease;
pointer-events: none;
}
.main-image-wrap:hover::after {
background: rgba(0,0,0,0.03);
}
/* MAIN IMAGE */
.main-image {
width: 100%;
aspect-ratio: 3 / 4; /* 🔥 correct for product pages */
object-fit: contain;
display: block;
opacity: 1;
transition: transform 0.45s ease, opacity 0.3s ease;
}
/* hover zoom */
.main-image-wrap:hover .main-image {
transform: scale(1.025);
}
/* ===============================
THUMBNAILS
================================= */
.thumbnail-row {
display: flex;
gap: 0.5rem;
margin-top: 0.8rem;
width: 100%; /* matches main image width exactly */
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
scrollbar-width: none;
}
.thumbnail-row::-webkit-scrollbar {
display: none;
}
.thumbnail {
width: calc(25% - 0.4rem); /* 4 visible at any container width */
aspect-ratio: 3 / 4;
flex-shrink: 0;
object-fit: cover;
border-radius: 3px;
border: 1px solid transparent;
background: #f3f1ee;
cursor: pointer;
transition: all 0.2s ease;
}
.thumbnail:hover {
opacity: 1;
}
.thumbnail.active-thumb {
opacity: 1;
border: 1.5px solid var(--black);
}
/* PRODUCT INFO — RIGHT COLUMN */
.product-info {
padding-top: 0.4rem;
}
.product-category-tag {
display: inline-block;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--black);
border: 1.5px solid var(--black);
background: transparent;
padding: 0.25rem 0.75rem;
border-radius: 2px;
margin-bottom: 1rem;
}
.product-name {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.5vw, 2rem);
letter-spacing: 1.5px;
line-height: 1.08;
margin-bottom: 0.9rem;
}
.rating-row {
display: flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 1.4rem;
}
.stars {
color: #c9a227;
font-size: 0.9rem;
letter-spacing: 1.5px;
}
.rating-count {
font-size: 0.8rem;
color: var(--muted);
}
.rating-link {
font-size: 0.8rem;
color: var(--muted);
text-decoration: underline;
}
/* PRICE */
.price-block {
display: flex;
align-items: baseline;
gap: 0.9rem;
margin-bottom: 1.4rem;
}
.current-price {
font-family: var(--font-display);
font-size: 1.6rem;
letter-spacing: 1px;
color: var(--black);
line-height: 1;
}
.original-price {
font-size: 1.1rem;
color: var(--muted);
text-decoration: line-through;
}
.discount-badge {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 1px;
background: var(--black);
color: var(--white);
padding: 0.3rem 0.65rem;
border-radius: 2px;
}
.short-desc {
font-size: 0.95rem;
line-height: 1.6;
color: #555;
margin-bottom: 0.5rem;
}
.value-points {
margin: 0.8rem 0;
padding-left: 1rem;
font-size: 0.9rem;
}
.value-points li {
margin-bottom: 0.3rem;
color: #555;
}
.info-divider {
border-top: 1px solid var(--border);
margin: 1.4rem 0;
}
/* VARIANT SELECTOR */
.variant-group,
.qty-group {
margin-bottom: 1.4rem;
}
.variant-label {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
margin-bottom: 0.7rem;
color: var(--black);
}
.variant-options {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.variant-btn {
padding: 0.5rem 1.1rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.5px;
background: transparent;
border: 1.5px solid var(--border);
border-radius: 2px;
cursor: pointer;
color: var(--black);
transition: border-color 0.2s, background 0.2s;
box-shadow: none;
transform: none;
}
.variant-btn:hover {
border-color: var(--black);
background: transparent;
transform: none;
}
.variant-btn.active-variant {
background: var(--black);
color: var(--white);
border-color: var(--black);
}
/* COLOUR SWATCH LINKS
Each swatch is an linking to its own colour variant page.
Usage:
*/
.color-swatches {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
}
.swatch-link {
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--swatch-color, #ccc);
border: 2.5px solid rgba(255,255,255,0.9);
box-shadow: 0 0 0 1.5px rgba(0,0,0,0.15);
cursor: pointer;
transition: box-shadow 0.18s, transform 0.18s;
flex-shrink: 0;
position: relative;
}
.swatch-link:hover {
transform: scale(1.12);
box-shadow: 0 0 0 2px var(--black);
}
.swatch-link.active-swatch {
box-shadow: 0 0 0 2.5px var(--black);
transform: scale(1.08);
}
.swatch-link[title]:hover::after {
content: attr(title);
position: absolute;
bottom: calc(100% + 7px);
left: 50%;
transform: translateX(-50%);
background: var(--black);
color: var(--white);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.5px;
white-space: nowrap;
padding: 0.25rem 0.55rem;
border-radius: 2px;
pointer-events: none;
}
.swatch-link[title]:hover::before {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: var(--black);
pointer-events: none;
}
/* QUANTITY CONTROL */
.qty-control {
display: flex;
align-items: center;
gap: 0;
border: 1.5px solid var(--border);
border-radius: 3px;
width: fit-content;
overflow: hidden;
}
.qty-btn {
width: 40px;
height: 40px;
padding: 0;
font-size: 1.2rem;
font-weight: 400;
border: none;
border-radius: 0;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.18s;
box-shadow: none;
transform: none;
color: var(--black);
}
.qty-btn:hover {
background: var(--accent);
border-color: transparent;
transform: none;
box-shadow: none;
}
.qty-input {
width: 52px;
height: 40px;
text-align: center;
font-size: 0.95rem;
font-weight: 700;
padding: 0;
border: none;
border-left: 1.5px solid var(--border);
border-right: 1.5px solid var(--border);
border-radius: 0;
background: transparent;
color: var(--black);
font-family: var(--font-body);
}
.qty-input:focus {
outline: none;
}
/* ACTION BUTTONS */
.action-buttons {
display: flex;
gap: 0.7rem;
margin: 1.6rem 0;
}
.add-to-cart-btn {
flex: 1;
text-align: center;
padding: 0.95rem 1rem;
font-size: 0.78rem;
letter-spacing: 1.8px;
border-radius: 2px;
min-width: 0;
}
.buy-now-btn {
flex: 1;
text-align: center;
padding: 0.95rem 1rem;
font-size: 0.78rem;
letter-spacing: 1.8px;
border-radius: 2px;
min-width: 0;
}
.stock-warning {
font-size: 0.85rem;
color: #b91c1c;
margin-top: 0.5rem;
}
/* ===============================
TRUST BADGES
================================= */
.trust-badges {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.6rem;
padding: 1.2rem 0;
margin-top: 1rem;
margin-bottom: 1.4rem;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: #444;
line-height: 1.3;
}
.trust-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: #f5f5f5;
}
.trust-icon svg {
width: 14px;
height: 14px;
stroke-width: 2;
}
/* SHARE ROW */
.share-row {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.8rem;
flex-wrap: wrap;
padding-top: 0.2rem;
}
.share-label {
color: var(--muted);
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 0.72rem;
}
.share-link {
color: var(--black);
font-weight: 700;
font-size: 0.78rem;
text-decoration: none;
border-bottom: 1px solid var(--border);
transition: border-color 0.2s;
}
.share-link:hover {
border-color: var(--black);
color: var(--black);
}
/* ===============================
FBT LIST (STRUCTURED)
================================= */
.fbt-list {
margin-top: 2rem;
border-top: 1px solid var(--border);
padding-top: 1rem;
}
.fbt-label {
font-size: 1rem;
color: #666;
margin-bottom: 0.6rem;
margin-top: 1rem;
}
/* row layout */
.fbt-row {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0;
border-bottom: 1px solid #eee;
}
/* image */
.fbt-img {
width: 100px;
aspect-ratio: 3 / 4; /* 🔥 matches main image */
background: #f6f6f6;
flex-shrink: 0;
}
.fbt-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* info */
.fbt-info {
flex: 1;
}
.fbt-name {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.4rem;
}
.fbt-price {
font-size: 0.85rem;
font-weight: 600;
display: block;
margin: 1px 0;
}
.fbt-desc {
font-size: 0.75rem;
color: #777;
}
/* add button */
.fbt-add {
border-radius: 10px;
border: none;
color: #0a4040;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: transparent;
height: 10px;
}
/* PRODUCT TABS */
.product-tabs-section {
border-top: 1px solid var(--border);
padding: 3.5rem 0;
}
.tabs-nav {
display: flex;
border-bottom: 1.5px solid var(--border);
margin-bottom: 2.5rem;
gap: 0;
}
.tab-btn {
padding: 0.85rem 1.8rem;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
background: transparent;
border: none;
border-bottom: 2.5px solid transparent;
margin-bottom: -1.5px;
cursor: pointer;
color: var(--muted);
box-shadow: none;
transform: none;
transition: color 0.2s, border-color 0.2s;
}
.tab-btn:hover {
background: transparent;
color: var(--black);
transform: none;
box-shadow: none;
}
.tab-btn.active-tab {
color: var(--black);
border-bottom-color: var(--black);
}
.tab-content h3 {
font-family: var(--font-display);
font-size: 1.1rem;
letter-spacing: 1px;
font-weight: 700;
margin-bottom: 0.8rem;
margin-top: 2rem;
}
.tab-content h3:first-child {
margin-top: 0;
}
.tab-content p {
font-size: 0.95rem;
line-height: 1.85;
color: #555;
max-width: 680px;
}
.feature-list {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 1.5rem;
max-width: 680px;
padding-left: 0;
list-style: none;
}
.feature-list li {
font-size: 0.93rem;
color: #555;
line-height: 1.75;
padding: 0.65rem 0 0.65rem 1.4rem;
border-bottom: 1px solid var(--border);
position: relative;
}
.feature-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--accent-dark);
font-weight: 700;
}
.specs-table {
width: 100%;
border-collapse: collapse;
max-width: 640px;
}
.specs-table tr {
border-bottom: 1px solid var(--border);
}
.specs-table tr:first-child {
border-top: 1px solid var(--border);
}
.specs-table tr:last-child {
border-bottom: none;
}
.specs-table td {
padding: 1rem 0;
font-size: 0.9rem;
color: #444;
vertical-align: top;
}
.spec-label {
font-weight: 700;
color: var(--black);
width: 38%;
font-size: 0.82rem;
letter-spacing: 0.3px;
text-transform: uppercase;
}
/* REVIEWS */
.reviews-summary {
margin-bottom: 2rem;
}
.overall-score {
display: flex;
align-items: center;
gap: 0.8rem;
}
.big-score {
font-family: var(--font-display);
font-size: 3.5rem;
line-height: 1;
color: var(--black);
}
.review-card {
padding: 1.5rem 0;
border-bottom: 1px solid var(--border);
}
.review-header {
display: flex;
align-items: flex-start;
gap: 0.9rem;
margin-bottom: 0.8rem;
}
.reviewer-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--black);
color: var(--white);
font-family: var(--font-display);
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-weight: 700;
}
.reviewer-name {
font-weight: 700;
font-size: 0.88rem;
margin-bottom: 0;
color: var(--black);
}
.review-date {
font-size: 0.78rem;
color: var(--muted);
margin: 0;
}
.review-stars {
margin-left: auto;
}
.review-title {
font-weight: 700;
font-size: 0.88rem;
margin-bottom: 0.3rem;
color: var(--black);
}
.review-body {
font-size: 0.88rem;
color: #555;
margin: 0;
}
.no-reviews-yet {
color: var(--muted);
font-size: 0.9rem;
}
.review-form-wrap {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
.review-form-wrap h3 {
margin-bottom: 1.2rem;
}
.form-group {
margin-bottom: 1.2rem;
}
.form-group label {
display: block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
margin-bottom: 0.5rem;
color: var(--black);
}
.form-group input,
.form-group textarea {
width: 100%;
max-width: 540px;
padding: 0.75rem 0.9rem;
border: 1.5px solid var(--border);
border-radius: 2px;
font-family: var(--font-body);
font-size: 0.92rem;
background: transparent;
color: var(--black);
transition: border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--black);
}
.star-picker {
display: flex;
gap: 0.25rem;
}
.star-pick {
background: transparent;
border: none;
font-size: 1.5rem;
color: var(--muted);
cursor: pointer;
padding: 0 0.1rem;
transition: color 0.15s;
box-shadow: none;
transform: none;
line-height: 1;
}
.star-pick:hover,
.star-pick.star-active {
color: #c9a227;
transform: none;
box-shadow: none;
background: transparent;
}
.review-submit-btn {
font-size: 0.78rem;
letter-spacing: 1.5px;
border-radius: 2px;
padding: 0.85rem 2rem;
}
/* PRODUCT BADGES FOR PRODUCT PAGES */
.product-badge {
position: absolute;
top: 1rem;
left: 1rem;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 2px;
padding: 0.35rem 0.8rem;
border-radius: 2px;
text-transform: uppercase;
}
.sale-badge {
background: var(--black);
color: var(--white);
}
.new-badge {
background: var(--accent-dark);
color: var(--black);
}
/* RELATED PRODUCTS */
.related-section {
padding: 3.5rem 0;
border-top: 1px solid var(--border);
}
.related-section .section-title {
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
letter-spacing: 2px;
margin-bottom: 2rem;
}
/* ===============================
STICKY ADD TO CART
================================= */
.sticky-cta {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: var(--white);
border-top: 2px solid var(--accent-dark);
box-shadow: 0 -4px 24px rgba(10, 64, 64, 0.1);
padding: 0.7rem 1.4rem;
transform: translateY(100%);
transition: transform 0.3s ease;
z-index: 999;
}
.sticky-cta.show {
transform: translateY(0);
}
.sticky-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
max-width: 720px;
margin: 0 auto;
}
/* ── Info (left) ── */
.sticky-info {
display: flex;
flex-direction: column;
gap: 0.05rem;
flex: 1;
min-width: 0;
}
.sticky-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
color: var(--black);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sticky-price {
font-size: 0.85rem;
color: var(--p-tag);
font-weight: 600;
}
/* ── Actions (right) ── */
.sticky-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
/* Qty control */
.sticky-qty {
display: flex;
align-items: center;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--card-bg);
}
.sticky-qty button {
width: 32px;
height: 36px;
border: none;
background: transparent;
color: var(--black);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background var(--transition);
flex-shrink: 0;
}
.sticky-qty button:hover {
background: var(--accent);
}
.sticky-qty input {
width: 38px;
height: 36px;
text-align: center;
border: none;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
font-size: 0.9rem;
font-family: var(--font-body);
color: var(--black);
background: var(--white);
appearance: none;
}
.sticky-qty input::-webkit-outer-spin-button,
.sticky-qty input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Add to cart button */
.sticky-btn {
display: flex;
align-items: center;
gap: 0.4rem;
background: var(--black);
color: var(--white);
padding: 0.6rem 1.3rem;
border: none;
border-radius: var(--radius);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.04em;
cursor: pointer;
white-space: nowrap;
transition: opacity var(--transition), transform var(--transition);
}
.sticky-btn:hover {
opacity: 0.88;
transform: translateY(-1px);
}
.sticky-btn svg {
width: 15px;
height: 15px;
stroke: var(--white);
flex-shrink: 0;
}
/* --- Checkout Page --- */
.checkout-header-note {
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.5px;
color: rgba(245,243,239,0.7);
}
.progress-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin: 2.5rem auto;
max-width: 480px;
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
.step-circle {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid var(--border);
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 700;
color: var(--muted);
}
.progress-step.done .step-circle {
background: var(--accent);
border-color: var(--accent);
color: var(--black);
}
.progress-step.active .step-circle {
background: var(--black);
border-color: var(--black);
color: var(--white);
}
.progress-step span {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--muted);
text-transform: uppercase;
}
.progress-step.active span,
.progress-step.done span {
color: var(--black);
}
.progress-line {
flex: 1;
height: 2px;
background: var(--border);
max-width: 80px;
margin-bottom: 1.4rem;
}
.checkout-layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 3rem;
align-items: start;
}
.checkout-section {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.checkout-section-title {
font-family: var(--font-display);
font-size: 1.3rem;
letter-spacing: 1.5px;
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 0.5rem;
}
.step-num {
width: 28px;
height: 28px;
background: var(--accent);
color: var(--black);
border-radius: 50%;
font-size: 0.85rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.form-group label {
font-size: 0.83rem;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--black);
}
.form-check-inline {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.85rem;
color: var(--muted);
}
.form-check-inline input[type="checkbox"] {
width: auto;
margin-top: 3px;
flex-shrink: 0;
}
.terms-check {
margin-top: 0.5rem;
}
.payment-options {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.payment-option {
display: flex;
align-items: center;
gap: 1rem;
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 1rem 1.2rem;
cursor: pointer;
transition: border-color var(--transition), background var(--transition);
}
.payment-option input[type="radio"] {
width: auto;
flex-shrink: 0;
}
.payment-option.selected {
border-color: var(--black);
background: #fafafa;
}
.payment-option-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.payment-label {
font-weight: 600;
font-size: 0.95rem;
}
.payment-accepted {
font-size: 0.8rem;
color: var(--muted);
}
.payment-logo {
font-size: 1.5rem;
}
.bank-details {
background: #f9f9f7;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.2rem;
font-size: 0.9rem;
}
.bank-details p {
margin-bottom: 0.4rem;
color: var(--black);
}
.bank-note {
margin-top: 0.8rem;
color: var(--muted) !important;
font-size: 0.85rem !important;
}
.place-order-btn {
width: 100%;
padding: 1.1rem;
font-size: 1rem;
letter-spacing: 1px;
margin-top: 0.5rem;
}
.security-note {
text-align: center;
font-size: 0.8rem;
color: var(--muted);
margin: 0.6rem 0 0;
}
.checkout-summary {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
position: sticky;
top: 90px;
}
.summary-heading {
font-family: var(--font-display);
font-size: 1.4rem;
letter-spacing: 1.5px;
margin-bottom: 1.5rem;
}
.summary-item {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.2rem;
}
.summary-img-wrap {
position: relative;
flex-shrink: 0;
}
.summary-img-wrap img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: var(--radius);
background: #eee;
}
.item-qty-badge {
position: absolute;
top: -6px;
right: -6px;
background: var(--black);
color: var(--white);
font-size: 0.7rem;
font-weight: 700;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.summary-item-info {
flex: 1;
}
.summary-item-name {
font-weight: 600;
font-size: 0.9rem;
margin: 0 0 0.2rem;
color: var(--black);
}
.summary-item-variant {
font-size: 0.8rem;
color: var(--muted);
margin: 0;
}
.summary-item-price {
font-weight: 600;
font-size: 0.9rem;
color: var(--black);
margin: 0;
white-space: nowrap;
}
.summary-divider {
border-top: 1px solid var(--border);
margin: 1rem 0;
}
.summary-row {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
color: var(--muted);
margin-bottom: 0.7rem;
}
.summary-grand-total {
font-size: 1.1rem;
font-weight: 700;
color: var(--black);
}
.delivery-estimate {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: var(--radius);
padding: 0.75rem 1rem;
font-size: 0.85rem;
color: #166534;
margin-top: 1.2rem;
}
.returns-reminder {
font-size: 0.8rem;
color: var(--muted);
margin-top: 0.8rem;
margin-bottom: 0;
}
.returns-reminder a {
color: var(--black);
text-decoration: underline;
}
.checkout-footer {
background: var(--black);
padding: 1.5rem 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
margin-top: 4rem;
}
.checkout-footer p {
font-size: 0.82rem;
color: rgba(245,243,239,0.4);
margin: 0;
}
/* --- Confirmation Page --- */
.confirmation-section {
max-width: 680px;
width: 100%;
margin: 4rem auto;
padding: 0 0 4rem;
text-align: center;
box-sizing: border-box;
overflow: hidden;
}
.confirm-icon {
width: 72px;
height: 72px;
background: #e8f5e9;
color: #2e7d32;
border-radius: 50%;
font-size: 2rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.confirmation-section h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: 2px;
margin-bottom: 0.8rem;
}
.confirm-subtitle {
color: var(--muted);
font-size: 1rem;
max-width: 480px;
margin: 0 auto 1.5rem;
}
.confirm-order-num {
display: inline-block;
background: var(--accent);
color: var(--black);
font-size: 0.9rem;
padding: 0.5rem 1.5rem;
border-radius: 20px;
margin-bottom: 3rem;
}
.confirm-next-steps {
text-align: left;
margin-bottom: 3rem;
}
.confirm-next-steps h2 {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 1px;
margin-bottom: 1.5rem;
text-align: center;
}
.next-steps-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem;
margin-bottom: 1.5rem;
}
.next-step {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.5rem;
}
.step-icon {
font-size: 1.5rem;
margin-bottom: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--accent);
border-radius: 50%;
margin-bottom: 1rem;
}
.step-icon svg {
width: 22px;
height: 22px;
stroke: var(--black);
stroke-width: 1.8;
}
.next-step h3 {
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 0.4rem;
color: var(--black);
}
.next-step p {
font-size: 0.85rem;
color: var(--muted);
margin: 0;
line-height: 1.6;
}
.confirm-order-summary {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
text-align: left;
margin-bottom: 2rem;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.confirm-order-summary h2 {
font-family: var(--font-display);
font-size: 1.3rem;
letter-spacing: 1px;
margin-bottom: 1.5rem;
}
.confirmation-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
padding: 0.8rem 0;
border-bottom: 1px solid var(--border);
width: 100%;
box-sizing: border-box;
min-width: 0;
}
.confirmation-item:last-child {
border-bottom: none;
}
.confirmation-item img {
width: 52px;
height: 52px;
min-width: 52px;
object-fit: cover;
border-radius: var(--radius);
background: #eee;
flex-shrink: 0;
}
.confirmation-item > div {
flex: 1;
min-width: 0;
overflow: hidden;
}
.conf-item-name {
font-weight: 600;
font-size: 0.88rem;
margin: 0 0 0.2rem;
color: var(--black);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conf-item-variant {
font-size: 0.8rem;
color: var(--muted);
margin: 0;
}
.conf-item-price {
margin-left: auto;
flex-shrink: 0;
padding-left: 0.5rem;
font-weight: 600;
font-size: 0.88rem;
color: var(--black);
white-space: nowrap;
margin-bottom: 0;
}
.confirm-summary-divider {
border-top: 2px solid var(--border);
margin: 1rem 0;
}
.confirm-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.05rem;
}
.confirm-total-row span {
color: var(--muted);
}
.confirm-total-row strong {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 1px;
}
.confirm-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================================
CART PAGE — OVERFLOW FIX
============================================================ */
/* Wrap the table so it scrolls horizontally on small screens
instead of breaking the page layout */
.cart-items {
min-width: 0;
overflow: hidden;
}
.cart-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Fix table column widths so they don't stretch */
.cart-table {
width: 100%;
table-layout: fixed;
min-width: 480px;
}
/* Product column gets most space */
.cart-table th:nth-child(1),
.cart-table td:nth-child(1) { width: 40%; }
/* Price column */
.cart-table th:nth-child(2),
.cart-table td:nth-child(2) { width: 15%; }
/* Quantity column */
.cart-table th:nth-child(3),
.cart-table td:nth-child(3) { width: 25%; }
/* Total column */
.cart-table th:nth-child(4),
.cart-table td:nth-child(4) { width: 12%; }
/* Remove button column */
.cart-table th:nth-child(5),
.cart-table td:nth-child(5) { width: 8%; }
/* Product name truncates instead of overflowing */
.cart-product-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
/* Product info cell — prevent image from squishing */
.cart-product-info {
min-width: 0;
}
.cart-product-info img {
flex-shrink: 0;
width: 64px;
height: 64px;
object-fit: cover;
}
/* Cart layout — prevent right column overflowing */
.cart-layout {
min-width: 0;
overflow: hidden;
}
@media (max-width: 900px) {
.cart-layout {
grid-template-columns: 1fr;
}
.cart-summary-box {
position: static;
}
}
@media (max-width: 600px) {
/* On mobile hide Price and Total columns — too cramped */
.cart-table th:nth-child(2),
.cart-table td:nth-child(2),
.cart-table th:nth-child(4),
.cart-table td:nth-child(4) {
display: none;
}
.cart-table th:nth-child(1),
.cart-table td:nth-child(1) { width: 60%; }
.cart-table th:nth-child(3),
.cart-table td:nth-child(3) { width: 30%; }
.cart-table th:nth-child(5),
.cart-table td:nth-child(5) { width: 10%; }
}
/* --- Quick Add Modal --- */
/* ===============================
QUICK ADD OVERLAY
================================= */
.qa-overlay {
position: fixed;
inset: 0;
background: rgba(2, 51, 51, 0.55);
z-index: 299;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
/* ===============================
QUICK ADD MODAL
================================= */
.qa-modal {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--white);
z-index: 300;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: 2rem;
max-height: 90vh;
overflow-y: auto;
transform: translateY(100%);
transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
}
.qa-modal.qa-open {
transform: translateY(0);
}
#quick-add-modal.qa-open {
transform: translateY(0);
opacity: 1;
pointer-events: all;
}
.qa-modal.qa-open ~ .qa-overlay,
.qa-overlay:has(~ .qa-modal.qa-open) {
opacity: 1;
pointer-events: all;
}
/* ===============================
CLOSE BUTTON
================================= */
.qa-close {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--black);
transition: background var(--transition);
padding: 0;
box-shadow: none;
}
.qa-close:hover {
background: var(--border);
}
/* ===============================
MOBILE HEADER (thumbnail + name)
================================= */
.qa-mobile-header {
display: none; /* hidden on desktop */
}
/* ===============================
INNER GRID
================================= */
.qa-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
}
/* ===============================
IMAGE COL (desktop)
================================= */
.qa-image-col {
border-radius: var(--radius-lg);
overflow: hidden;
background: #f0eeea;
align-self: stretch;
}
.qa-product-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: unset;
}
/* ===============================
INFO COL
================================= */
.qa-info-col {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 0.5rem;
}
.qa-product-name {
font-family: var(--font-display);
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
letter-spacing: 1.5px;
color: var(--black);
margin: 0;
line-height: 1.1;
}
.qa-product-price {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 1px;
color: var(--black);
margin: 0;
}
.qa-product-desc {
font-size: 0.88rem;
color: var(--muted);
line-height: 1.6;
margin: 0;
}
.qa-divider {
border-top: 1px solid var(--border);
}
/* ===============================
VARIANTS
================================= */
.qa-variant-section {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.qa-variant-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--black);
margin: 0;
display: flex;
gap: 0.4rem;
align-items: center;
}
.qa-variant-options {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.qa-variant-btn {
padding: 0.45rem 1rem;
font-size: 0.82rem;
font-weight: 600;
background: transparent;
border: 1.5px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
color: var(--black);
transition: border-color var(--transition), background var(--transition);
letter-spacing: 0.5px;
box-shadow: none;
}
.qa-variant-btn:hover {
border-color: var(--black);
}
.qa-variant-btn.qa-variant-active {
background: var(--black);
color: var(--white);
border-color: var(--black);
}
/* ===============================
QUANTITY
================================= */
.qa-qty-section {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.qa-qty-control {
display: flex;
align-items: center;
gap: 0.5rem;
}
.qa-qty-btn {
width: 34px;
height: 34px;
padding: 0;
font-size: 1.1rem;
border: 1.5px solid var(--border);
background: transparent;
border-radius: var(--radius);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition), border-color var(--transition);
box-shadow: none;
}
.qa-qty-btn:hover {
background: var(--accent);
border-color: var(--accent);
}
.qa-qty-input {
width: 55px;
text-align: center;
font-size: 0.95rem;
font-weight: 600;
padding: 0.35rem;
}
/* ===============================
ADD BUTTON + DETAIL LINK
================================= */
.qa-add-btn {
width: 100%;
padding: 1rem;
font-size: 0.88rem;
letter-spacing: 1px;
margin-top: 0.3rem;
}
.qa-add-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.qa-variant-btn.qa-variant-sold-out {
opacity: 0.45;
text-decoration: line-through;
cursor: not-allowed;
}
.qa-variant-btn.qa-variant-sold-out:hover {
border-color: var(--border);
background: transparent;
color: inherit;
}
.qa-detail-link {
display: block;
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: var(--muted);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--transition);
}
.qa-detail-link:hover {
color: var(--black);
}
/* ===============================
SWATCHES
================================= */
.qa-color-swatches {
display: flex;
gap: 0.5rem;
}
.qa-swatch {
width: 28px;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid #ddd;
cursor: pointer;
display: inline-block;
padding: 0;
transition: transform var(--transition);
}
.qa-swatch:hover {
transform: scale(1.1);
}
.qa-swatch.active {
border: 1.5px solid var(--black);
}
/* ===============================
CART BOUNCE
================================= */
.cart-bounce {
animation: cartPop 0.4s ease;
}
@keyframes cartPop {
0% { transform: scale(1); }
40% { transform: scale(1.25); }
100% { transform: scale(1); }
}
/* ===============================
MOBILE
================================= */
@media (max-width: 640px) {
.qa-modal {
padding: 1.4rem 1.2rem 2rem;
}
/* show mobile header */
.qa-mobile-header {
display: flex;
align-items: center;
gap: 0.9rem;
margin-bottom: 1.2rem;
padding-right: 2.5rem; /* clear the close button */
}
.qa-thumb-mini {
width: 60px;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--radius);
flex-shrink: 0;
background: #f0eeea;
}
.qa-mobile-header-text .qa-product-name {
font-size: 1rem;
letter-spacing: 0.5px;
}
.qa-mobile-header-text .qa-product-price {
font-size: 1rem;
letter-spacing: 0.5px;
}
/* collapse to single column, hide desktop image */
.qa-inner {
grid-template-columns: 1fr;
gap: 0.8rem;
}
.qa-image-col {
display: none;
}
/* hide desktop name/price since mobile header shows them */
.qa-desktop-only {
display: none;
}
}
/* =========================
8. UTILITIES
========================= */
.footer-newsletter-text {
color: rgba(245, 243, 239, 0.6);
font-size: 0.88rem;
margin-bottom: 1rem;
}
.text-center {
text-align: center;
}
.section-centered {
text-align: center;
padding: 4rem 1.5rem;
}
.section-centered p {
font-size: 1.1rem;
margin-bottom: 2rem;
color: var(--muted);
}
.section-centered .btn-group {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.guest-account-prompt {
margin-top: 2rem;
padding: 1.5rem;
border: 1px dashed var(--border);
border-radius: var(--radius);
text-align: center;
}
.guest-account-prompt p {
font-size: 0.95rem;
margin-bottom: 1rem;
color: var(--color-text-primary);
}
.guest-prompt-sub {
font-size: 0.8rem !important;
color: var(--muted) !important;
margin-top: .75rem !important;
margin-bottom: 0 !important;
}
.shipping-fee-display {
display: flex;
align-items: center;
gap: .75rem;
padding: .85rem 1rem;
background: var(--color-background-secondary);
border-radius: var(--border-radius-md);
margin-top: .5rem;
border: 0.5px solid var(--color-border-secondary);
}
.shipping-fee-label {
font-size: 13px;
color: var(--color-text-secondary);
}
.shipping-fee-amount {
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary);
}
.pickup-option {
margin-top: .75rem;
padding: .85rem 1rem;
background: var(--color-background-secondary);
border-radius: var(--border-radius-md);
border: 0.5px solid var(--color-border-secondary);
}
.pickup-label {
display: flex;
align-items: center;
gap: .6rem;
font-size: 14px;
cursor: pointer;
}
.pickup-sub {
font-size: 12px;
color: var(--color-text-secondary);
margin-top: .4rem;
margin-left: 1.5rem;
}
/* =========================
9. MEDIA QUERIES
========================= */
/* --- Promo Banner --- */
@media (max-width: 768px) {
.promo-banner {
grid-template-columns: 1fr;
min-height: auto;
}
.promo-banner-image {
height: 260px;
}
.promo-banner-content {
padding: 2.5rem 1.8rem;
}
}
/* --- Brand Features --- */
@media (max-width: 900px) {
.brand-features {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.brand-features {
grid-template-columns: 1fr;
}
}
/* --- Founder Section --- */
@media (max-width: 768px) {
.founder-section {
grid-template-columns: 1fr;
min-height: auto;
}
.founder-image {
height: 320px;
}
.founder-content {
padding: 2.5rem 1.8rem;
}
}
/* --- Mission Section --- */
@media (max-width: 768px) {
.mission-section {
grid-template-columns: 1fr;
gap: 2rem;
}
.mission-section {
grid-template-columns: 1fr;
}
}
/* --- Contact --- */
@media (max-width: 768px) {
.contact-qa {
grid-template-columns: 1fr;
gap: 3rem;
}
}
/* --- Product Detail Page --- */
@media (max-width: 900px) {
.product-detail-hero {
grid-template-columns: 1fr;
gap: 2rem;
}
.product-images {
position: static;
}
.action-buttons {
flex-direction: column;
}
.add-to-cart-btn,
.buy-now-btn {
width: 100%;
text-align: center;
}
}
@media (max-width: 600px) {
.tabs-nav {
overflow-x: auto;
scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar {
display: none;
}
.tab-btn {
white-space: nowrap;
padding: 0.75rem 1.2rem;
}
}
/* --- Cart Page --- */
@media (max-width: 768px) {
.cart-layout {
grid-template-columns: 1fr;
}
.cart-summary-box {
position: static;
}
}
/* --- Dashboard --- */
@media (max-width: 640px) {
.dashboard-grid {
grid-template-columns: 1fr;
}
.span-2 {
grid-column: span 1;
}
/* Reduce card padding on small screens */
.dashboard-card {
padding: 1.2rem;
}
}
/* --- Checkout Page --- */
@media (max-width: 900px) {
.checkout-layout {
grid-template-columns: 1fr;
}
.checkout-summary {
order: -1;
position: static;
}
.form-row {
grid-template-columns: 1fr;
}
}
/* --- Quick Add Modal (desktop) --- */
@media (min-width: 768px) {
.qa-modal {
bottom: auto;
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -40%);
width: 680px;
max-width: 90vw;
border-radius: var(--radius-lg);
opacity: 0;
pointer-events: none;
transition: transform 0.3s ease, opacity 0.3s ease;
}
#quick-add-modal.qa-open {
transform: translate(-50%, -50%);
opacity: 1;
pointer-events: all;
}
}
/* --- Quick Add Modal (mobile) --- */
@media (max-width: 767px) {
.qa-inner {
grid-template-columns: 1fr;
gap: 1.2rem;
}
.qa-image-col {
max-height: 240px;
overflow: hidden;
}
.qa-product-image {
aspect-ratio: 16 / 9;
}
.qa-modal {
padding: 1.5rem 1.2rem;
padding-top: 2.5rem;
}
}
/* --- Mini Cart --- */
@media (max-width: 480px) {
.mini-cart {
max-width: 100%;
}
}
@media (max-width: 768px) {
.next-steps-grid {
grid-template-columns: 1fr; /* 🔥 stack vertically */
}
}
/* --- Tablet --- */
@media (max-width: 900px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.features-strip {
grid-template-columns: repeat(2, 1fr);
}
.founder-section {
grid-template-columns: 1fr;
gap: 2rem;
}
.contact-grid {
grid-template-columns: 1fr;
}
}
/* --- Mobile --- */
@media (max-width: 640px) {
header {
padding: 0 1rem;
}
header nav {
display: none;
flex-direction: column;
position: absolute;
top: 68px;
left: 0;
right: 0;
background: var(--black);
padding: 1.5rem;
gap: 1.2rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
header nav.open {
display: flex;
}
.menu-toggle {
display: flex;
}
main {
padding: 0 1rem;
}
.hero {
padding: 3rem 1.5rem;
}
.product-grid,
.product {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.shop-product-grid,
.shop-product {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.features-strip {
grid-template-columns: 1fr 1fr;
padding: 2rem 1.2rem;
}
.testimonial {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.auth-container {
margin: 2rem 1rem;
padding: 2rem 1.5rem;
}
.newsletter-form {
flex-direction: column;
}
.stats-row {
justify-content: center;
}
.product-item {
flex: 0 0 200px;
}
.testimonial-item {
flex: 0 0 260px;
}
.slide-nav {
width: 280px;
}
.next-steps-grid {
grid-template-columns: 1fr;
}
.confirm-actions {
flex-direction: column;
}
}
/* ===============================
STICKY ADD TO CART
================================= */
.sticky-cta {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: var(--white);
border-top: 1px solid var(--border);
padding: 0.75rem 1.2rem;
transform: translateY(100%);
transition: transform 0.3s ease;
z-index: 999;
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}
.sticky-cta.show {
transform: translateY(0);
}
.sticky-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: 600px;
margin: 0 auto;
}
.sticky-info {
display: flex;
flex-direction: column;
gap: 0.1rem;
flex: 1;
min-width: 0;
}
.sticky-name {
font-weight: 600;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--black);
}
.sticky-price {
font-size: 0.85rem;
color: var(--muted);
}
.sticky-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
}
.sticky-qty {
display: flex;
align-items: center;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.sticky-qty button {
width: 32px;
height: 30px;
border: none;
background: transparent;
font-size: 1rem;
cursor: pointer;
color: var(--black);
transition: background 0.2s;
padding: 0;
}
.sticky-qty button:hover {
background: var(--accent);
}
.sticky-qty input {
width: 100px;
height: 30px;
text-align: center;
border: none;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
font-size: 0.9rem;
color: var(--black);
background: var(--white);
appearance: none;
}
.sticky-qty input::-webkit-outer-spin-button,
.sticky-qty input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.sticky-btn {
background: var(--black);
color: var(--white);
padding: 0.5rem 1.2rem;
border: none;
border-radius: var(--radius);
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
white-space: nowrap;
width: 100%;
transition: opacity 0.2s;
}
.sticky-btn:hover {
opacity: 0.85;
}
/* ===============================
IMAGE MODAL (CLEAN SYSTEM)
================================= */
.image-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(43, 45, 45, 0.92);
backdrop-filter: blur(3px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
z-index: 1100;
}
.image-modal.show {
opacity: 1;
pointer-events: all;
}
/* ===============================
MODAL IMAGE
================================= */
.image-modal img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
transform: scale(0.96);
transition: transform 0.25s ease, opacity 0.2s ease;
}
.image-modal.show img {
transform: scale(1);
}
/* ===============================
CLOSE BUTTON (NO BACKGROUND)
================================= */
.image-modal-close {
position: absolute;
top: 16px;
right: 16px;
background: none; /* 🔥 clean */
border: none;
color: #fff;
font-size: 1.4rem;
cursor: pointer;
line-height: 1;
}
/* ===============================
NAVIGATION (CONSISTENT STYLE)
================================= */
.modal-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.08); /* subtle */
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
cursor: pointer;
}
.modal-nav.prev {
left: 16px;
}
.modal-nav.next {
right: 16px;
}
/* ===============================
MOBILE OPTIMIZATION
================================= */
@media (max-width: 768px) {
.image-modal img {
max-width: 92%;
max-height: 70%;
}
/* hide arrows → swipe only */
.modal-nav {
display: none;
}
.image-modal-close {
top: 12px;
right: 12px;
font-size: 1.2rem;
}
}
/* ===============================
MINI CART UPSELL
================================= */
.mini-upsell {
margin-top: 1rem;
border-top: 1px solid #eee;
padding-top: 0.8rem;
}
.mini-upsell-title {
font-size: 0.8rem;
margin-bottom: 0.5rem;
color: #666;
}
/* ITEM LAYOUT */
.mini-upsell-item {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.6rem;
position: relative; /* 🔥 needed for button positioning */
}
/* IMAGE */
.mini-upsell-item img {
width: 48px;
height: 60px; /* 🔥 better ratio (not square) */
object-fit: cover;
flex-shrink: 0;
}
/* TEXT */
.mini-upsell-item p {
font-size: 0.8rem;
margin: 0;
}
.mini-upsell-item span {
font-size: 0.75rem;
color: #777;
}
/* RESET BUTTONS */
.mini-upsell-item button {
position: absolute;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
line-height: 1;
}
/* ❌ DISMISS (TOP RIGHT) */
.mini-upsell-remove {
top: 4px;
right: 6px;
font-size: 0.95rem;
color: #999;
}
/* ➕ ADD (BOTTOM RIGHT) */
.mini-upsell-item button:not(.mini-upsell-remove) {
bottom: 4px;
right: 6px;
font-size: 1.2rem;
color: #0a4040;
}
/* 🔥 OPTIONAL POLISH */
.mini-upsell-remove:hover {
color: #000;
}
.mini-upsell-item button:not(.mini-upsell-remove):hover {
transform: scale(1.1);
transition: 0.15s ease;
}
.mini-upsell-item:not(:last-child) {
border-bottom: 1px solid #f2f2f2;
padding-bottom: 0.5rem;
}
/* ============================================================
DYNAMIC PRODUCT PAGE (product.html?slug=)
All styles prefixed with .pdp- to avoid conflicts
with the old hardcoded product pages.
============================================================ */
/* ── Hero layout ── */
.pdp-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
max-width: var(--max-width);
margin: 2rem auto;
padding: 0 1.5rem;
align-items: start;
}
/* ── Gallery ── */
.pdp-gallery { position: sticky; top: 88px; }
.pdp-main-img-wrap {
position: relative;
border-radius: var(--radius);
overflow: hidden;
background: #f5f5f5;
cursor: zoom-in;
}
.pdp-main-img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.pdp-main-img:hover { transform: scale(1.03); }
.pdp-zoom-hint {
position: absolute;
top: 12px; right: 12px;
background: rgba(255,255,255,0.9);
border: none; border-radius: 50%;
width: 36px; height: 36px;
font-size: 1.1rem; cursor: pointer;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.2s;
}
.pdp-main-img-wrap:hover .pdp-zoom-hint { opacity: 1; }
/* ── Info column ── */
.pdp-info { display: flex; flex-direction: column; gap: 1rem; }
.pdp-category {
font-size: 0.72rem; letter-spacing: 2px;
text-transform: uppercase; color: var(--mid);
}
.pdp-name {
font-size: 1.8rem; font-weight: 700;
color: var(--black); line-height: 1.2;
font-family: var(--font-display);
}
.pdp-price-row { display: flex; align-items: center; gap: 1rem; }
.pdp-price {
font-size: 1.4rem; font-weight: 700; color: var(--black);
}
/* ── Stock indicator ── */
.pdp-stock {
display: inline-block;
font-size: 0.78rem; font-weight: 600;
padding: 4px 10px; border-radius: 20px;
}
.pdp-stock.ok { background: #e8f5e9; color: #2e7d32; }
.pdp-stock.low { background: #fff8e1; color: #f57f17; }
.pdp-stock.out { background: #fce4e4; color: #c62828; }
/* ── Description ── */
.pdp-desc {
font-size: 0.9rem; color: #555; line-height: 1.7;
}
/* ── Colour swatches ── */
.pdp-variant-group { display: flex; flex-direction: column; gap: 8px; }
.pdp-variant-label {
font-size: 0.8rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.5px; color: var(--black);
}
.pdp-variant-label strong { font-weight: 700; }
.pdp-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp-swatch {
width: 32px; height: 32px; border-radius: 50%;
border: 2px solid transparent;
cursor: pointer; transition: all 0.2s;
outline: 2px solid transparent; outline-offset: 2px;
}
.pdp-swatch:hover { outline-color: var(--black); }
.pdp-swatch-active {
border-color: var(--white);
outline: 2px solid var(--black);
}
/* ── Sub-variant buttons (resistance / set type) ── */
.pdp-sub-variants { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-sub-btn {
border: 1.5px solid var(--border);
background: var(--white);
border-radius: var(--radius);
padding: 0.5rem 1rem;
font-size: 0.78rem; font-weight: 600;
cursor: pointer; transition: all 0.2s;
text-align: center; line-height: 1.4;
}
.pdp-sub-btn:hover { border-color: var(--black); }
.pdp-sub-btn.pdp-sub-active {
border-color: var(--black);
background: var(--black);
color: var(--white);
}
.pdp-sub-price {
font-weight: 400; font-size: 0.72rem;
opacity: 0.8;
}
/* ── Quantity ── */
.pdp-qty-row { display: flex; flex-direction: column; gap: 6px; }
.pdp-qty-control {
display: flex; align-items: center; gap: 0;
border: 1.5px solid var(--border);
border-radius: var(--radius);
overflow: hidden; width: fit-content;
}
.pdp-qty-control button {
width: 40px; height: 40px;
background: transparent; border: none;
font-size: 1.1rem; cursor: pointer;
transition: background 0.15s;
display: flex; align-items: center; justify-content: center;
box-shadow: none; transform: none;
}
.pdp-qty-control button:hover { background: #f0f0f0; }
.pdp-qty-control input {
width: 48px; height: 40px;
border: none; border-left: 1.5px solid var(--border);
border-right: 1.5px solid var(--border);
text-align: center; font-size: 0.9rem;
font-family: var(--font-body);
-moz-appearance: textfield;
}
.pdp-qty-control input::-webkit-outer-spin-button,
.pdp-qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; }
/* ── Action buttons ── */
.pdp-actions {
display: flex; gap: 10px; flex-wrap: wrap;
}
.pdp-atc-btn { flex: 1; min-width: 0; }
.pdp-buynow-btn { flex: 1; min-width: 0; }
/* ── Trust badges ── */
.pdp-trust {
display: flex; flex-wrap: wrap; gap: 10px;
font-size: 0.75rem; color: #666;
}
.pdp-trust span { display: flex; align-items: center; gap: 4px; }
/* ── Accordions ── */
.pdp-accordions { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.pdp-accordion {
border-bottom: 1px solid var(--border);
}
.pdp-accordion summary {
padding: 0.9rem 0;
font-size: 0.85rem; font-weight: 600;
cursor: pointer; list-style: none;
display: flex; align-items: center; justify-content: space-between;
}
.pdp-accordion summary::-webkit-details-marker { display: none; }
.pdp-accordion summary::after {
content: '+'; font-size: 1.1rem; color: var(--mid);
transition: transform 0.2s;
}
.pdp-accordion[open] summary::after { content: '−'; }
.pdp-accordion p {
font-size: 0.85rem; color: #555; line-height: 1.7;
padding-bottom: 1rem;
}
/* ── Share ── */
.pdp-share {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; font-size: 0.78rem; color: #888;
}
.pdp-share-btn {
color: var(--black); text-decoration: none;
font-size: 0.75rem; font-weight: 600;
padding: 4px 10px; border: 1px solid var(--border);
border-radius: 20px; transition: all 0.2s;
}
.pdp-share-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }
/* ── Image modal ── */
.pdp-modal {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.92);
z-index: 1500; align-items: center; justify-content: center;
cursor: zoom-out;
}
.pdp-modal.pdp-modal-open { display: flex; }
.pdp-modal img {
max-width: 90vw; max-height: 90vh;
object-fit: contain; border-radius: 8px;
cursor: default;
}
.pdp-modal-close {
position: absolute; top: 1rem; right: 1.5rem;
background: transparent; border: none;
color: #fff; font-size: 2rem; cursor: pointer;
line-height: 1;
}
/* ── Related products ── */
.pdp-related {
max-width: var(--max-width);
margin: 3rem auto;
padding: 0 1.5rem 2rem;
}
.pdp-section-title {
font-size: 1.1rem; font-weight: 700;
font-family: var(--font-display);
margin-bottom: 1.25rem; color: var(--black);
}
.pdp-related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.pdp-related-card {
text-decoration: none; color: inherit;
border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--border);
transition: box-shadow 0.2s, transform 0.2s;
}
.pdp-related-card:hover {
box-shadow: 0 6px 24px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.pdp-related-img-wrap {
background: #f5f5f5; aspect-ratio: 1; overflow: hidden;
}
.pdp-related-img-wrap img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.35s;
}
.pdp-related-card:hover img { transform: scale(1.05); }
.pdp-related-info { padding: 0.75rem 1rem; }
.pdp-related-name { font-size: 0.85rem; font-weight: 600; color: var(--black); }
.pdp-related-price { font-size: 0.82rem; color: var(--mid); margin-top: 3px; }
/* ── MOBILE ── */
@media (max-width: 768px) {
.pdp-hero {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
margin: 1rem auto;
}
.pdp-gallery { position: static; }
.pdp-name { font-size: 1.4rem; }
.pdp-actions { flex-direction: column; }
.pdp-atc-btn, .pdp-buynow-btn { width: 100%; }
.pdp-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.pdp-related-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}
/* ── Wishlist heart hover + flash state ── */
.wishlist:hover i,
.wishlist:hover svg,
.wishlist:hover [data-lucide="heart"] {
color: #e74c3c;
fill: #e74c3c;
stroke: #e74c3c;
}
.wishlist.active i,
.wishlist.active svg,
.wishlist.active [data-lucide="heart"] {
color: #e74c3c;
fill: #e74c3c;
stroke: #e74c3c;
}
.wishlist i,
.wishlist svg,
.wishlist [data-lucide="heart"] {
transition: color 0.2s, fill 0.2s;
}