/* GENERATED by tools/version-assets.mjs from css/style.css, css/auth.css, css/cart.css — edit those files, not this one. */
/* ---- css/style.css ---- */
/* Roboto + Roboto Condensed, served from our own domain (2026-11-06; see /fonts/README.txt).
Was a to fonts.googleapis.com on every page: two extra servers to reach before text
could draw in the right font. Latin + Latin Extended only; one variable file covers all weights. */
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/roboto-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/roboto-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/roboto-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/roboto-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/roboto-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/roboto-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/roboto-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/roboto-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/roboto-condensed-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/roboto-condensed-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/roboto-condensed-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/roboto-condensed-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/roboto-condensed-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/roboto-condensed-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Material Icons, self-hosted (Apache 2.0, see /fonts/README.txt). Kept here rather than in its own
file so pages that show icons don't wait on one more stylesheet; the font itself is only
downloaded by pages that actually draw an icon. */
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(/fonts/material-icons.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
/* Arial sized to Roboto's metrics (2026-11-06). Until the Roboto web font arrives the page is drawn
in this, so the swap no longer re-flows the text — Lighthouse measured a 0.41 layout shift on
the long Find a Doctor page when the font landed after first paint. Published Roboto metrics. */
@font-face {
font-family: 'Roboto Fallback';
src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica');
size-adjust: 100.3%;
ascent-override: 92.77%;
descent-override: 24.41%;
line-gap-override: 0%;
}
/* All Love Dispensary - Dark Tropical Theme
Updated: 2026-04-06 */
:root {
/* How tall the fixed header actually is, measured by js/main.js on load and on resize.
Everything that has to sit clear of the header reads this instead of guessing.
The 88px fallback is deliberately GENEROUS: it is taller than any header we render, so a
page where the script has not run yet leaves too much space rather than too little. A
heading with a gap above it looks slightly loose; a heading sliced in half by the header
is the bug this replaces. */
--header-h: 88px;
/* All Love "vacation" theme 2026-07-10 — warm sand, sea glass, sunshine */
--bg-primary: #f7f2e9;
--bg-secondary: rgba(255, 255, 255, 0.86);
--bg-tertiary: rgba(250, 246, 238, 0.88);
--bg-card: rgba(255, 255, 255, 0.94);
--text-primary: #223540;
--text-secondary: #3c5260;
--text-muted: #5a6b75; /* was #6b7f8a: 3.9:1 on cream; this is 5.0 (2026-11-06) */
/* primary accent -> brand cross green, deepened for light ground.
#0f7a4a since 2026-11-06 (operator): the old #159a5e was 3.55:1 as text on the cream
ground and 3.61:1 under white button text — WCAG AA needs 4.5. This is 5.3 / 5.4.
Green on a DARK ground uses --accent-green-bright instead (the darker green would sink). */
--accent-green: #0f7a4a;
--accent-green-hover: #0b6640;
--accent-green-bright: #22b573;
--accent-gold: #c9973f;
--accent-cyan: #2596a8;
--accent-purple: #9b7fc9;
--iridescent: linear-gradient(100deg, #e8a23c 0%, #f07f5f 38%, #45c4b0 70%, #2596a8 100%);
--accent-yellow: #e8b93c;
--border-color: #e3d9c8;
--success: #2e9e57;
--error: #d84a3f;
--font-primary: 'Roboto', 'Roboto Fallback', sans-serif;
--font-heading: 'Roboto Condensed', sans-serif;
--transition: all 0.3s ease;
--shadow: 0 4px 20px rgba(96, 76, 44, 0.16);
--radius: 8px;
--radius-lg: 16px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-primary);
background-color: var(--bg-primary);
background-image: url('../images/bg-body-wash.webp');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
a {
color: var(--accent-green);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: var(--accent-green-hover);
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* Buttons */
.btn {
display: inline-block;
padding: 12px 28px;
border-radius: var(--radius);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: var(--transition);
border: none;
text-align: center;
}
.btn-primary {
background: var(--accent-green);
color: var(--bg-primary);
}
.btn-primary:hover {
background: var(--accent-green-hover);
color: var(--bg-primary);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(109, 167, 56, 0.4);
}
.btn-secondary {
background: transparent;
color: var(--text-primary);
border: 2px solid var(--text-primary);
}
.btn-secondary:hover {
background: var(--text-primary);
color: var(--bg-primary);
}
.btn-large {
padding: 16px 40px;
font-size: 16px;
}
/* Age Gate */
.age-gate {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-primary);
display: flex; /* Shown by default, JS hides if verified */
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 1;
transition: opacity 0.5s ease;
}
.age-gate.hidden {
opacity: 0;
pointer-events: none;
}
.age-gate-content {
text-align: center;
padding: 60px;
background: var(--bg-secondary);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
max-width: 500px;
}
.age-gate-logo h1 {
font-family: var(--font-heading);
font-size: 36px;
letter-spacing: 4px;
margin-bottom: 30px;
color: var(--accent-green);
}
.age-gate-content p {
font-size: 18px;
margin-bottom: 30px;
color: var(--text-secondary);
}
.age-gate-buttons {
display: flex;
gap: 20px;
justify-content: center;
}
/* Header */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #ffffff;
backdrop-filter: blur(10px);
z-index: 1000;
border-bottom: 1px solid #e0e0e0;
}
.header .cart-toggle,
.header .mobile-menu-toggle span,
.header a:not(.btn),
.header .main-nav a {
color: #000000 !important;
}
.header .cart-toggle svg {
stroke: #000000;
}
.header .mobile-menu-toggle span {
background: #000000;
}
.header .cart-count {
background: var(--accent-green);
color: #000000;
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 40px;
max-width: 1600px;
margin: 0 auto;
}
.logo a {
text-decoration: none;
}
.logo .logo-text {
display:inline-block;
}
.logo h1, .logo .logo-text {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 700;
letter-spacing: 3px;
color: var(--text-primary);
transition: var(--transition);
}
.logo a:hover h1, .logo a:hover .logo-text {
color: var(--accent-green);
}
.main-nav ul {
display: flex;
list-style: none;
gap: 40px;
}
.main-nav a {
color: var(--text-primary);
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 0;
position: relative;
}
.main-nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--accent-green);
transition: var(--transition);
}
.main-nav a:hover::after {
width: 100%;
}
.header-actions {
display: flex;
align-items: center;
gap: 20px;
}
.mobile-menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 5px;
}
.mobile-menu-toggle span {
width: 25px;
height: 2px;
background: var(--text-primary);
transition: var(--transition);
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(10, 10, 20, 0.7) 0%, rgba(10, 10, 20, 0.5) 100%);
position: relative;
overflow: hidden;
padding-top: 140px;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(109, 167, 56, 0.1) 0%, transparent 70%);
}
.hero-slide {
text-align: center;
z-index: 1;
}
.hero-content h2 {
font-family: var(--font-heading);
font-size: 72px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 20px;
text-transform: uppercase;
}
.hero-heading {
font-size: clamp(18px, 5.5vw, 72px);
text-align: center;
width: 100%;
}
.hero-content p {
font-size: 20px;
color: var(--text-secondary);
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
display: flex;
gap: 20px;
justify-content: center;
}
/* Hero search — sits under Shop Now. Solid white rather than a translucent panel
because it lands over a photo, and placeholder text on glass fails contrast. */
.hero-search {
display: flex;
width: 100%;
max-width: 420px;
margin: 16px auto 0;
background: #fff;
border-radius: 999px;
box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
overflow: hidden;
}
.hero-search input {
flex: 1;
min-width: 0;
border: 0;
background: none;
padding: 15px 20px;
font: inherit;
font-size: 16px; /* 16px min, or iOS Safari zooms the page on focus */
color: var(--text-primary, #1d2a22);
}
.hero-search input::placeholder { color: #6b7a71; }
.hero-search input:focus { outline: none; }
.hero-search:focus-within { box-shadow: 0 0 0 3px rgba(26, 143, 79, .45), 0 4px 18px rgba(0, 0, 0, .18); }
.hero-search button {
flex: 0 0 auto;
border: 0;
background: var(--accent-green, #1a8f4f);
color: #fff;
padding: 0 22px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.hero-search button:hover { filter: brightness(1.08); }
/* Chrome/Safari draw their own clear affordance on type=search; it collides with the pill */
.hero-search input::-webkit-search-decoration,
.hero-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Store policy notice under the hero search. Solid dark pill with gold text so it
reads over the bright sky photo — it must not be missable. */
.hero-content .hero-notice {
display: inline-block;
margin: 18px auto 0;
padding: 10px 22px;
background: #111;
color: #ffd166;
border: 2px solid #ffd166;
border-radius: 999px;
font-size: 18px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
text-align: center;
box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
/* "Red prices already include 40% off" — the red is the menu's sale-price red (menu.css
.sale-price), so the notice names the exact color customers will see on the shop page. */
.hero-content .hero-notice .hero-sale,
.hero-content .hero-notice .hero-notice-rule { display: block; }
.hero-content .hero-notice .hero-sale { color: #fff; }
.hero-content .hero-notice .hero-sale-red { color: #ff5a5a; }
.hero-content .hero-notice .hero-sale + .hero-notice-rule {
margin-top: 4px;
font-size: .8em;
}
.hero-content .hero-notice .hero-sale[hidden] { display: none; }
/* "New patients: 50% off your first visit" (2026-11-06, operator) — first line of the notice. */
.hero-content .hero-notice .hero-first { display: block; margin-bottom: 4px; color: #ffd166; text-decoration: none; }
.hero-content .hero-notice .hero-first:hover { text-decoration: underline; }
.hero-content .hero-notice .hero-first-pct { white-space: nowrap; }
.hero-content .hero-notice { max-width: 100%; box-sizing: border-box; border-radius: 22px; }
.hero-content .hero-notice .hero-sale-pct { white-space: nowrap; }
@media (max-width: 480px) {
.hero-content .hero-notice { font-size: 14px; padding: 9px 16px; letter-spacing: .02em; }
}
/* Section Styles */
section {
padding: 100px 0;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 50px;
}
.section-header h2 {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}
.view-all {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
}
/* Promotional Banner */
.promo-banner-section {
padding: 0;
}
.promo-banner {
display: block;
background: linear-gradient(135deg, #2d5016 0%, #6da738 100%);
border-radius: 12px;
padding: 30px 40px;
text-decoration: none;
color: white;
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
margin: 30px auto;
max-width: 1000px;
}
.promo-banner:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(109, 167, 56, 0.3);
}
.promo-banner-content {
position: relative;
}
.promo-badge {
display: inline-block;
background: rgba(255,255,255,0.2);
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 12px;
}
.promo-banner h3 {
font-size: 28px;
font-weight: 700;
margin: 0 0 8px;
}
.promo-banner p {
font-size: 16px;
margin: 0;
opacity: 0.9;
}
@media (max-width: 768px) {
.promo-banner {
padding: 25px 20px;
margin: 20px 15px;
border-radius: 10px;
}
.promo-banner h3 {
font-size: 22px;
}
.promo-banner p {
font-size: 14px;
}
}
/* Featured/Newest Products */
.featured-section {
background: var(--bg-secondary);
}
/* Products Carousel */
.carousel-wrapper {
position: relative;
margin: 0 -20px;
padding: 0 20px;
}
/* The bleed must match the .container gutter (16px ≤768, 12px ≤480) — at -20px it ran 8px past
the screen, so phones zoomed the homepage out and let it slide sideways (2026-10-27, same fault
as the shop's category bar on 10-24). */
@media (max-width: 768px) {
.carousel-wrapper { margin: 0 -16px; padding: 0 16px; }
}
@media (max-width: 480px) {
.carousel-wrapper { margin: 0 -12px; padding: 0 12px; }
}
.products-carousel {
display: flex;
overflow-x: auto;
gap: 16px;
padding: 10px 0 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.products-carousel::-webkit-scrollbar {
display: none;
}
.carousel-product-card {
flex: 0 0 180px;
background: var(--bg-primary);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
border: 1px solid var(--border-color);
scroll-snap-align: start;
}
.carousel-product-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(96, 76, 44, 0.16);
}
.carousel-product-card .badge {
position: absolute;
top: 8px;
left: 8px;
padding: 4px 10px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
z-index: 2;
}
.carousel-product-card .badge.sale {
background: #dc3545;
color: white;
}
.carousel-product-image {
width: 100%;
height: 140px;
overflow: hidden;
background: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.carousel-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.carousel-product-image.no-image img {
width: 60%;
height: auto;
object-fit: contain;
opacity: 0.5;
}
.carousel-product-card:hover .carousel-product-image img {
transform: scale(1.05);
}
.carousel-product-info {
padding: 12px;
}
.carousel-product-info h4, .carousel-product-info h3 {
margin: 0 0 6px;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.carousel-product-info .thc {
display: block;
font-size: 11px;
color: var(--accent-green);
margin-bottom: 4px;
}
.carousel-product-info .price {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
}
.carousel-product-info .price.on-sale {
color: #c82333; /* was #dc3545: 4.06:1 on cream (2026-11-06) */
}
.carousel-product-info .price s {
color: var(--text-secondary);
font-weight: 400;
font-size: 12px;
margin-right: 4px;
}
/* Location Toggle */
.newest-location-toggle {
display: flex;
gap: 8px;
}
.newest-location-toggle .location-btn {
padding: 8px 16px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 20px;
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.newest-location-toggle .location-btn:hover {
border-color: var(--accent-green);
color: var(--text-primary);
}
.newest-location-toggle .location-btn.active {
background: var(--accent-green);
border-color: var(--accent-green);
color: var(--bg-primary);
}
@media (max-width: 768px) {
.carousel-product-card {
flex: 0 0 150px;
}
.carousel-product-image {
height: 120px;
}
.carousel-product-info {
padding: 10px;
}
.carousel-product-info h4, .carousel-product-info h3 {
font-size: 13px;
}
.carousel-product-info .price {
font-size: 14px;
}
}
/* Location toggle for newest products */
/* Swipe hint */
.swipe-hint {
text-align: center;
color: var(--text-secondary);
font-size: 13px;
margin-bottom: 20px;
opacity: 0.7;
}
/* Category Rows - Horizontal Scrolling */
.category-row {
margin-bottom: 30px;
}
.category-row-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding: 0 4px;
}
.category-row-header h3 {
font-size: 20px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.category-row-header .cat-icon {
font-size: 22px;
}
.category-row-header .see-all {
color: var(--accent-green);
font-size: 14px;
text-decoration: none;
font-weight: 500;
}
.category-row-header .see-all:hover {
text-decoration: underline;
}
.category-scroll-wrapper {
position: relative;
}
.category-scroll {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 4px 0 12px;
/* Safari fallback: use margin instead of gap */
margin-left: -8px;
}
.category-scroll > * {
margin-left: 16px;
}
/* Modern browsers: use gap (overrides margin approach) */
@supports (gap: 16px) {
.category-scroll {
gap: 16px;
margin-left: 0;
}
.category-scroll > * {
margin-left: 0;
}
}
.category-scroll::-webkit-scrollbar {
display: none;
}
/* Scroll Product Cards */
.scroll-product-card {
flex: 0 0 160px;
background: var(--bg-card);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
border: 1px solid var(--border-color);
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
}
.scroll-product-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(96, 76, 44, 0.15);
border-color: var(--accent-green);
}
.scroll-product-card .badge {
position: absolute;
top: 8px;
left: 8px;
background: #e53935;
color: white;
font-size: 10px;
font-weight: 700;
padding: 3px 6px;
border-radius: 4px;
text-transform: uppercase;
z-index: 1;
}
.scroll-product-image {
width: 100%;
height: 120px;
background: var(--bg-tertiary);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.scroll-product-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.scroll-product-image.no-image {
background: var(--bg-secondary);
padding: 15px;
}
.scroll-product-image.no-image img {
object-fit: contain;
opacity: 0.5;
}
.scroll-product-info {
padding: 10px;
}
.scroll-product-info h4 {
font-size: 13px;
font-weight: 500;
margin: 0 0 4px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 34px;
}
.scroll-product-info .thc {
display: block;
font-size: 11px;
color: var(--accent-green);
margin-bottom: 4px;
}
.scroll-product-info .price {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.scroll-product-info .price.on-sale {
color: #e53935;
}
.scroll-product-info .price s {
color: var(--text-secondary);
font-size: 12px;
font-weight: 400;
}
/* Mobile adjustments for scroll cards */
@media (max-width: 600px) {
.scroll-product-card {
flex: 0 0 220px;
}
.scroll-product-image {
height: 160px;
}
.scroll-product-info {
padding: 12px;
}
.scroll-product-info h4 {
font-size: 14px;
min-height: 36px;
-webkit-line-clamp: 2;
}
.scroll-product-info .thc {
font-size: 12px;
}
.scroll-product-info .price {
font-size: 16px;
}
.category-row-header h3 {
font-size: 18px;
}
.category-row-header .see-all {
font-size: 13px;
}
.category-scroll {
gap: 12px;
}
.category-row {
margin-bottom: 28px;
}
.swipe-hint {
font-size: 12px;
margin-bottom: 16px;
}
}
.newest-location-toggle {
display: flex;
gap: 8px;
}
.newest-location-toggle .location-btn {
padding: 8px 16px;
border: 1px solid var(--border-color);
background: transparent;
color: var(--text-secondary);
border-radius: 20px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s ease;
}
.newest-location-toggle .location-btn:hover {
border-color: var(--accent-green);
color: var(--accent-green);
}
.newest-location-toggle .location-btn.active {
background: var(--accent-green);
border-color: var(--accent-green);
color: white;
}
/* Loading spinner for products */
.loading-spinner {
grid-column: 1 / -1;
text-align: center;
padding: 40px;
color: var(--text-secondary);
}
.no-products,
.error-message {
grid-column: 1 / -1;
text-align: center;
padding: 40px;
color: var(--text-secondary);
}
/* Product card link styling */
a.product-card {
text-decoration: none;
color: inherit;
display: block;
}
/* Product price styling */
.product-price {
margin-top: 8px;
font-size: 16px;
}
.product-price .original-price {
text-decoration: line-through;
color: var(--text-secondary);
font-size: 14px;
margin-right: 8px;
}
.product-price .current-price {
color: var(--text-primary);
font-weight: 600;
}
.product-price .sale-price {
color: #e53935;
}
/* Product brand and THC */
.product-brand {
font-size: 12px;
color: var(--text-secondary);
margin: 4px 0;
}
.product-thc {
font-size: 12px;
color: var(--accent-green);
font-weight: 500;
}
/* Sale badge */
.product-badge.sale {
background: #e53935;
}
.product-slider {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1200px) {
.product-slider {
grid-template-columns: repeat(3, 1fr);
}
}
/* Hide mobile-only items on desktop */
.mobile-only {
display: none;
}
/* Medium screens - tighten header spacing */
@media (max-width: 1100px) {
.main-nav ul {
gap: 20px;
}
.header-actions {
gap: 10px;
}
.header-actions .btn {
padding: 8px 16px;
font-size: 12px;
}
}
/* Switch to mobile nav earlier to prevent overlap */
@media (max-width: 900px) {
.main-nav {
position: fixed;
top: var(--header-h);
left: 0;
width: 100%;
height: calc(100vh - var(--header-h));
background: #ffffff;
border-bottom: 1px solid #e0e0e0;
display: none;
overflow-y: auto;
}
.main-nav.active {
display: block;
}
.main-nav ul {
flex-direction: column;
gap: 0;
padding: 8px 16px;
}
.main-nav li {
border-bottom: 1px solid #e0e0e0;
}
.main-nav a {
display: block;
padding: 16px 0;
font-size: 16px;
color: #000000 !important;
}
.header-actions .btn {
display: none;
}
.mobile-menu-toggle {
display: flex;
}
/* Show mobile-only nav items */
.mobile-only {
display: block;
}
.mobile-only a {
color: var(--accent-green);
}
.mobile-order-btn {
background: var(--accent-green);
color: var(--bg-primary) !important;
text-align: center;
border-radius: var(--radius-sm);
margin-top: 8px;
}
.product-slider {
grid-template-columns: repeat(2, 1fr);
}
/* Keep user menu visible on mobile */
.user-menu {
display: block;
}
}
@media (max-width: 600px) {
.product-slider {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.product-image {
height: 140px;
}
.product-info {
padding: 10px;
}
.product-info h3 {
font-size: 14px;
margin: 4px 0;
}
.product-category {
font-size: 10px;
}
.product-price {
font-size: 14px;
}
.product-badge {
font-size: 9px;
padding: 3px 6px;
}
.newest-location-toggle .location-btn {
padding: 6px 12px;
font-size: 12px;
}
}
@media (max-width: 400px) {
.product-slider {
grid-template-columns: 1fr;
}
}
.product-card {
background: var(--bg-card);
border-radius: var(--radius);
overflow: hidden;
transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease, border-color 0.3s ease;
border: 1px solid var(--border-color);
position: relative;
opacity: 0;
transform: translateY(15px);
}
.product-card.product-card-visible {
opacity: 1;
transform: translateY(0);
}
.product-card.product-card-visible:hover {
transform: translateY(-5px);
}
.product-card.skeleton {
opacity: 1;
transform: none;
}
.product-card.product-card-visible:hover {
box-shadow: var(--shadow);
border-color: var(--accent-green);
}
.product-badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--accent-green);
color: var(--bg-primary);
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
z-index: 1;
}
.product-badge.new {
background: var(--accent-gold);
}
.product-image {
height: 180px;
background: var(--bg-tertiary);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-image.no-image {
background: var(--bg-secondary);
padding: 20px;
}
.product-image.no-image img {
object-fit: contain;
}
.product-placeholder {
width: 80%;
height: 80%;
border: 2px dashed var(--border-color);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 14px;
}
.product-info {
padding: 15px;
}
.product-category {
font-size: 11px;
text-transform: uppercase;
color: var(--accent-green);
letter-spacing: 1px;
font-weight: 600;
}
.product-info h3 {
font-size: 16px;
margin: 8px 0;
font-weight: 600;
}
.product-strain {
font-size: 13px;
color: var(--text-secondary);
}
/* Categories Section */
.categories-section {
background: var(--bg-primary);
}
.categories-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
.category-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 40px 20px;
text-align: center;
transition: var(--transition);
}
.category-card:hover {
border-color: var(--accent-green);
transform: translateY(-5px);
box-shadow: var(--shadow);
}
.category-card:hover .category-icon {
color: var(--accent-green);
}
.category-icon {
width: 60px;
height: 60px;
margin: 0 auto 20px;
color: var(--text-secondary);
transition: var(--transition);
}
.category-icon svg {
width: 100%;
height: 100%;
}
.category-card h3 {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
/* Locations Section */
.locations-section {
background: var(--bg-secondary);
}
.locations-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.location-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 40px;
transition: var(--transition);
}
.location-card:hover {
border-color: var(--accent-green);
box-shadow: var(--shadow);
}
.location-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.location-header h3, .location-header h2 {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}
.location-status {
padding: 6px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.location-status.open {
background: rgba(76, 175, 80, 0.2);
color: var(--success);
}
.location-status.closed {
background: rgba(244, 67, 54, 0.2);
color: var(--error);
}
.location-info {
margin-bottom: 25px;
}
.location-address,
.location-phone {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 15px;
color: var(--text-secondary);
}
.location-address svg,
.location-phone svg {
flex-shrink: 0;
margin-top: 4px;
color: var(--accent-green);
}
.location-phone a {
color: var(--text-secondary);
}
.location-phone a:hover {
color: var(--accent-green);
}
.location-hours {
background: var(--bg-tertiary);
padding: 15px 20px;
border-radius: var(--radius);
margin-top: 20px;
}
/* Homepage location box: link to the Jackson page (internal link for "dispensary jackson ms", 2026-11-06). */
.location-more { margin-top: 14px; font-weight: 600; }
.location-hours p {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 5px;
}
.location-hours p:last-child {
margin-bottom: 0;
}
/* Why Section */
.why-section {
background: var(--bg-primary);
}
.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.why-card {
text-align: center;
padding: 40px 30px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
transition: var(--transition);
}
.why-card:hover {
border-color: var(--accent-green);
transform: translateY(-5px);
}
.why-icon {
width: 60px;
height: 60px;
margin: 0 auto 25px;
color: var(--accent-green);
}
.why-icon svg {
width: 100%;
height: 100%;
}
.why-card h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
}
.why-card p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.7;
}
/* Social Links */
.social-links a {
transition: opacity 0.3s ease;
}
.social-links a:hover {
opacity: 0.8;
}
/* Footer */
.footer {
background: #ffffff;
border-top: 1px solid #e0e0e0;
padding: 80px 0 40px;
}
.footer, .footer p, .footer a, .footer li, .footer h4, .footer .footer-h, .footer strong,
.footer .footer-brand p, .footer .footer-locations p, .footer .footer-locations strong,
.footer .footer-bottom p, .footer .disclaimer {
color: #222222 !important;
}
.footer a:hover {
color: #000000 !important;
}
.footer .footer-links a, .footer .footer-legal a {
color: #444444 !important;
}
.footer .footer-links a:hover, .footer .footer-legal a:hover {
color: #000000 !important;
}
.footer .social-links a {
color: #444444 !important;
}
.footer .newsletter-form input {
background: #f5f5f5;
border-color: #ddd;
color: #000000;
}
.footer .newsletter-form button {
background: #000000;
color: #ffffff;
}
.footer .footer-bottom {
border-top-color: #e0e0e0;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr 1fr 1.5fr;
gap: 40px;
margin-bottom: 60px;
}
.footer-brand h2 {
font-family: var(--font-heading);
font-size: 28px;
letter-spacing: 3px;
margin-bottom: 15px;
}
.footer-brand p {
color: var(--text-secondary);
font-size: 16px;
}
.footer h4, .footer .footer-h {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 25px;
color: var(--text-primary);
}
.footer-links ul,
.footer-legal ul {
list-style: none;
}
.footer-links li,
.footer-legal li {
margin-bottom: 12px;
}
.footer-links a,
.footer-legal a {
color: var(--text-secondary);
font-size: 14px;
}
.footer-links a:hover,
.footer-legal a:hover {
color: var(--accent-green);
}
.footer-locations p {
color: var(--text-secondary);
font-size: 14px;
margin-bottom: 20px;
line-height: 1.8;
}
.footer-locations strong {
color: var(--text-primary);
}
.footer-bottom {
padding-top: 40px;
border-top: 1px solid var(--border-color);
text-align: center;
}
.footer-bottom p {
color: var(--text-secondary);
font-size: 14px;
margin-bottom: 15px;
}
.disclaimer {
font-size: 12px !important;
color: var(--text-muted) !important;
max-width: 800px;
margin: 0 auto;
}
/* ==========================================================================
RESPONSIVE - MOBILE OPTIMIZATIONS
========================================================================== */
/* Tablet and below */
@media (max-width: 1200px) {
.product-slider {
grid-template-columns: repeat(3, 1fr);
}
.categories-grid {
grid-template-columns: repeat(3, 1fr);
}
.why-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 992px) {
.hero-content h2 {
font-size: 48px;
}
.locations-grid {
grid-template-columns: 1fr;
}
}
/* Mobile - Primary breakpoint */
@media (max-width: 768px) {
/* Base mobile adjustments */
:root {
--radius-sm: 6px;
}
body {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
.container {
padding: 0 16px;
}
/* Header - Mobile optimized */
.header-container {
padding: 12px 16px;
}
.logo img {
height: 50px !important;
width: auto !important;
}
.main-nav {
position: fixed;
top: var(--header-h);
left: 0;
width: 100%;
height: calc(100vh - var(--header-h));
background: #ffffff;
border-bottom: 1px solid #e0e0e0;
display: none;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.main-nav.active {
display: block;
}
.main-nav ul {
flex-direction: column;
gap: 0;
padding: 8px 16px;
}
.main-nav li {
border-bottom: 1px solid #e0e0e0;
}
/* Touch-friendly nav links (min 48px touch target) */
.main-nav a {
display: block;
padding: 16px 0;
font-size: 16px;
min-height: 48px;
color: #000000 !important;
}
.header-actions {
gap: 8px;
}
.header-actions .btn {
display: none;
}
/* Mobile menu toggle - larger touch target */
.mobile-menu-toggle {
display: flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
padding: 10px;
}
.mobile-menu-toggle span {
width: 24px;
height: 3px;
border-radius: 2px;
}
/* Cart toggle - larger touch target */
.cart-toggle {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* Hero - Mobile optimized */
.hero {
padding-top: 100px;
min-height: calc(100vh - var(--header-h));
}
.hero-slide {
padding: 0 16px;
}
.hero-content h2 {
font-size: 28px;
line-height: 1.2;
margin-bottom: 16px;
}
.hero-content p {
font-size: 15px;
line-height: 1.6;
margin-bottom: 28px;
padding: 0 8px;
}
.hero-buttons {
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
/* Match the Shop Now button width so the two read as one stacked group */
.hero-search {
max-width: 300px;
margin-top: 12px;
}
.hero-search input { padding: 13px 16px; }
.hero-search button { padding: 0 18px; }
/* Buttons - Touch optimized (min 48px height) */
.btn {
padding: 14px 24px;
font-size: 14px;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-large {
padding: 16px 32px;
min-height: 52px;
}
/* Sections - Better mobile spacing */
section {
padding: 48px 0;
}
.section-header {
flex-direction: column;
gap: 16px;
text-align: center;
margin-bottom: 32px;
}
.section-header h2 {
font-size: 24px;
letter-spacing: 1px;
}
.view-all {
font-size: 13px;
}
/* Product grid - 2 columns on mobile */
.product-slider {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.product-card {
border-radius: var(--radius);
}
.product-info {
padding: 12px;
}
.product-info h3 {
font-size: 14px;
line-height: 1.3;
}
.product-category {
font-size: 10px;
}
.product-strain {
font-size: 12px;
}
/* Categories grid */
.categories-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.category-card {
padding: 24px 16px;
}
.category-icon {
width: 48px;
height: 48px;
margin-bottom: 12px;
}
.category-card h3 {
font-size: 14px;
}
/* Why grid */
.why-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.why-card {
padding: 28px 20px;
}
.why-icon {
width: 48px;
height: 48px;
margin-bottom: 16px;
}
.why-card h3 {
font-size: 16px;
margin-bottom: 12px;
}
.why-card p {
font-size: 14px;
}
/* Location cards */
.locations-grid {
gap: 16px;
}
.location-card {
padding: 24px;
}
.location-header h3, .location-header h2 {
font-size: 22px;
}
.location-status {
font-size: 11px;
padding: 5px 10px;
}
/* Footer - Mobile optimized */
.footer {
padding: 48px 0 32px;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 32px;
text-align: center;
}
.footer-brand {
margin-bottom: 8px;
}
.footer-brand img {
max-width: 180px !important;
}
.footer h4, .footer .footer-h {
font-size: 13px;
margin-bottom: 16px;
}
.footer-links ul,
.footer-legal ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 16px;
}
.footer-links li,
.footer-legal li {
margin-bottom: 0;
}
/* Footer links - touch friendly */
.footer-links a,
.footer-legal a {
padding: 8px 0;
display: inline-block;
min-height: 44px;
line-height: 28px;
}
.footer-locations p {
font-size: 13px;
line-height: 1.7;
margin-bottom: 16px;
}
.footer-bottom {
padding-top: 24px;
}
.footer-bottom p {
font-size: 13px;
}
.disclaimer {
font-size: 11px !important;
padding: 0 8px;
}
/* Social links */
.social-links {
justify-content: center !important;
}
.social-links a {
width: 44px;
height: 44px;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.social-links svg {
width: 28px !important;
height: 28px !important;
}
/* Age Gate - Mobile optimized */
.age-gate-content {
padding: 32px 24px;
margin: 16px;
border-radius: var(--radius);
max-width: calc(100vw - 32px);
}
.age-gate-logo img {
width: 250px !important;
max-width: 100% !important;
}
.age-gate-content p {
font-size: 15px;
margin-bottom: 24px;
line-height: 1.5;
}
.age-gate-buttons {
flex-direction: column;
gap: 12px;
}
.age-gate-buttons .btn {
width: 100%;
}
/* Page header - Mobile */
.page-header {
padding: 100px 0 48px;
}
.page-header h1 {
font-size: 28px;
letter-spacing: 1px;
}
.page-header p {
font-size: 15px;
padding: 0 16px;
}
}
/* Small phones */
@media (max-width: 480px) {
.container {
padding: 0 12px;
}
.hero-content h2 {
font-size: 24px;
}
.hero-content p {
font-size: 14px;
}
.product-slider {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.product-info {
padding: 10px;
}
.product-info h3 {
font-size: 13px;
}
.categories-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.category-card {
padding: 20px 12px;
}
.category-card h3 {
font-size: 13px;
}
.age-gate-content {
padding: 28px 20px;
margin: 12px;
}
.age-gate-logo img {
width: 200px !important;
}
.location-card {
padding: 20px;
}
.location-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.location-header h3, .location-header h2 {
font-size: 20px;
}
.section-header h2 {
font-size: 22px;
}
.page-header h1 {
font-size: 24px;
}
}
/* Very small phones (iPhone SE, etc.) */
@media (max-width: 375px) {
.hero-content h2 {
font-size: 22px;
}
.btn {
padding: 12px 20px;
font-size: 13px;
}
.product-slider {
gap: 8px;
}
.product-info {
padding: 8px;
}
.product-info h3 {
font-size: 12px;
}
.product-category {
font-size: 9px;
}
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
/* Remove hover effects that don't work well on touch */
.product-card.product-card-visible:hover {
transform: none;
}
.category-card:hover {
transform: none;
}
.why-card:hover {
transform: none;
}
.btn-primary:hover {
transform: none;
}
/* Add active states instead */
.product-card.product-card-visible:active {
transform: scale(0.98);
opacity: 0.9;
}
.category-card:active {
transform: scale(0.98);
}
.btn:active {
transform: scale(0.97);
opacity: 0.9;
}
}
/* Landscape phones */
@media (max-width: 812px) and (orientation: landscape) {
.hero {
min-height: auto;
padding: 100px 0 60px;
}
.age-gate {
overflow-y: auto;
}
.age-gate-content {
margin: 20px auto;
}
}
/* Page Specific Styles */
.page-header {
padding: 150px 0 80px;
background: rgba(10, 10, 20, 0.80);
text-align: center;
}
.page-header h1 {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 15px;
}
.page-header p {
font-size: 18px;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
/* Shop Page */
.shop-container {
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
padding: 60px 0;
}
.shop-sidebar {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 30px;
height: fit-content;
position: sticky;
top: 100px;
}
.filter-group {
margin-bottom: 30px;
}
.filter-group h4 {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
color: var(--text-primary);
}
.filter-group ul {
list-style: none;
}
.filter-group li {
margin-bottom: 10px;
}
.filter-group a {
color: var(--text-secondary);
font-size: 14px;
display: block;
padding: 8px 0;
border-bottom: 1px solid var(--border-color);
}
.filter-group a:hover,
.filter-group a.active {
color: var(--accent-green);
}
.shop-products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.menu-embed-placeholder {
background: var(--bg-card);
border: 2px dashed var(--border-color);
border-radius: var(--radius-lg);
padding: 80px;
text-align: center;
min-height: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.menu-embed-placeholder h3 {
font-size: 24px;
margin-bottom: 15px;
}
.menu-embed-placeholder p {
color: var(--text-secondary);
max-width: 400px;
}
/* Contact Page */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
padding: 60px 0;
}
.contact-form {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 40px;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
font-size: 14px;
font-weight: 500;
margin-bottom: 10px;
color: var(--text-primary);
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 14px 18px;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
color: var(--text-primary);
font-size: 16px;
font-family: var(--font-primary);
transition: var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--accent-green);
}
.form-group textarea {
min-height: 150px;
resize: vertical;
}
.contact-info-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 30px;
margin-bottom: 25px;
}
.contact-info-card h3 {
font-size: 20px;
margin-bottom: 20px;
color: var(--accent-green);
}
/* About Page */
.about-content {
padding: 80px 0;
}
.about-section {
margin-bottom: 80px;
}
.about-section h2 {
font-family: var(--font-heading);
font-size: 32px;
margin-bottom: 25px;
color: var(--accent-green);
}
.about-section p {
font-size: 18px;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 20px;
max-width: 800px;
}
/* Location Page Map Placeholder */
.map-placeholder {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
height: 300px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
margin-top: 25px;
}
@media (max-width: 992px) {
.shop-container {
grid-template-columns: 1fr;
}
.shop-sidebar {
position: static;
}
.contact-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.shop-products {
grid-template-columns: repeat(2, 1fr);
}
.page-header h1 {
font-size: 32px;
}
}
/* ==========================================================================
Mobile/Android Rendering Fixes
========================================================================== */
/* Logo optimization for sharp rendering */
.logo img,
.age-gate-logo img,
.footer-brand img {
image-rendering: -webkit-optimize-contrast;
image-rendering: smooth;
-webkit-font-smoothing: antialiased;
}
/* Prevent header logo from causing layout shifts */
.header .logo img {
width: auto;
max-width: 200px;
contain: layout style;
}
/* GPU acceleration for smooth scrolling on mobile */
.header {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
/* Fix for Android Chrome touch scrolling */
@media (hover: none) and (pointer: coarse) {
body {
-webkit-overflow-scrolling: touch;
}
.header {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* ==========================================================================
Newsletter Footer Section
========================================================================== */
.footer-newsletter {
text-align: left;
}
.footer-newsletter h4, .footer-newsletter .footer-h {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 12px;
color: var(--text-primary);
}
.footer-newsletter p {
color: var(--text-muted);
font-size: 14px;
margin-bottom: 15px;
line-height: 1.5;
}
.newsletter-form {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.newsletter-form input[type="email"] {
flex: 1;
min-width: 180px;
padding: 12px 15px;
border: 1px solid var(--border-color);
border-radius: var(--radius);
background: var(--bg-tertiary);
color: var(--text-primary);
font-size: 14px;
transition: var(--transition);
}
.newsletter-form input[type="email"]:focus {
outline: none;
border-color: var(--accent-green);
box-shadow: 0 0 0 2px rgba(109, 167, 56, 0.2);
}
.newsletter-form input[type="email"]::placeholder {
color: var(--text-muted);
opacity: 0.6;
}
.newsletter-form button {
padding: 12px 24px;
background: var(--accent-green);
color: var(--bg-primary);
border: none;
border-radius: var(--radius);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.newsletter-form button:hover {
background: var(--accent-green-hover);
transform: translateY(-1px);
}
.newsletter-form button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.newsletter-message {
margin-top: 12px;
font-size: 14px;
padding: 10px 15px;
border-radius: var(--radius);
}
.newsletter-message.success {
background: rgba(109, 167, 56, 0.15);
color: var(--accent-green);
border: 1px solid rgba(109, 167, 56, 0.3);
}
.newsletter-message.error {
background: rgba(220, 53, 69, 0.15);
color: #dc3545;
border: 1px solid rgba(220, 53, 69, 0.3);
}
/* Mobile responsive adjustments */
@media (max-width: 768px) {
.footer-newsletter {
text-align: center;
}
.newsletter-form {
flex-direction: column;
}
.newsletter-form input[type="email"] {
width: 100%;
}
.newsletter-form button {
width: 100%;
}
}
/* ============================================
Smoke Drift Background Effect
============================================ */
.smoke-container {
/* rising-smoke effect retired for the vacation theme (2026-07-15) */
display: none !important;
}
.smoke-particle {
position: absolute;
bottom: -200px;
width: 300px;
height: 300px;
background: radial-gradient(ellipse at center,
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 255, 0.2) 30%,
rgba(255, 255, 255, 0.1) 50%,
transparent 70%);
border-radius: 50%;
filter: blur(25px);
animation: smokeDrift linear infinite;
opacity: 0;
}
.smoke-particle:nth-child(1) {
left: 5%;
width: 250px;
height: 250px;
animation-duration: 20s;
animation-delay: 0s;
}
.smoke-particle:nth-child(2) {
left: 20%;
width: 350px;
height: 350px;
animation-duration: 25s;
animation-delay: 3s;
}
.smoke-particle:nth-child(3) {
left: 40%;
width: 280px;
height: 280px;
animation-duration: 22s;
animation-delay: 7s;
}
.smoke-particle:nth-child(4) {
left: 60%;
width: 320px;
height: 320px;
animation-duration: 28s;
animation-delay: 2s;
}
.smoke-particle:nth-child(5) {
left: 75%;
width: 260px;
height: 260px;
animation-duration: 24s;
animation-delay: 5s;
}
.smoke-particle:nth-child(6) {
left: 90%;
width: 300px;
height: 300px;
animation-duration: 26s;
animation-delay: 10s;
}
.smoke-particle:nth-child(7) {
left: 10%;
width: 220px;
height: 220px;
animation-duration: 18s;
animation-delay: 12s;
}
.smoke-particle:nth-child(8) {
left: 50%;
width: 380px;
height: 380px;
animation-duration: 30s;
animation-delay: 8s;
}
@keyframes smokeDrift {
0% {
transform: translateY(0) translateX(0) scale(0.8);
opacity: 0;
}
10% {
opacity: 0.6;
}
50% {
opacity: 0.4;
}
90% {
opacity: 0.2;
}
100% {
transform: translateY(-120vh) translateX(50px) scale(1.5);
opacity: 0;
}
}
/* Subtle horizontal sway for more natural movement */
.smoke-particle:nth-child(odd) {
animation-name: smokeDriftLeft;
}
.smoke-particle:nth-child(even) {
animation-name: smokeDriftRight;
}
@keyframes smokeDriftLeft {
0% {
transform: translateY(0) translateX(0) scale(0.8);
opacity: 0;
}
10% {
opacity: 0.6;
}
25% {
transform: translateY(-30vh) translateX(-30px) scale(1);
}
50% {
opacity: 0.4;
transform: translateY(-60vh) translateX(20px) scale(1.2);
}
75% {
transform: translateY(-90vh) translateX(-40px) scale(1.3);
}
90% {
opacity: 0.2;
}
100% {
transform: translateY(-120vh) translateX(30px) scale(1.5);
opacity: 0;
}
}
@keyframes smokeDriftRight {
0% {
transform: translateY(0) translateX(0) scale(0.8);
opacity: 0;
}
10% {
opacity: 0.6;
}
25% {
transform: translateY(-30vh) translateX(40px) scale(1);
}
50% {
opacity: 0.4;
transform: translateY(-60vh) translateX(-25px) scale(1.2);
}
75% {
transform: translateY(-90vh) translateX(50px) scale(1.3);
}
90% {
opacity: 0.2;
}
100% {
transform: translateY(-120vh) translateX(-20px) scale(1.5);
opacity: 0;
}
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
.smoke-container {
display: none;
}
}
/* =========================================================================
Universal hamburger menu (2026-05-19)
8 nav items wrap awkwardly on desktop. Use the drawer pattern everywhere
so the header stays clean. Also fixes the low-contrast Sign In button
that was invisible against the white header.
========================================================================= */
/* Always hide horizontal nav — use drawer at every viewport */
.main-nav {
position: fixed;
top: var(--header-h);
left: 0;
width: 100%;
max-width: 100vw;
height: calc(100vh - var(--header-h));
background: #ffffff;
border-bottom: 1px solid #e0e0e0;
display: none;
overflow-y: auto;
z-index: 1000;
}
.main-nav.active {
display: block;
}
.main-nav ul {
flex-direction: column;
gap: 0;
padding: 16px 32px;
}
.main-nav li {
border-bottom: 1px solid #e0e0e0;
list-style: none;
}
.main-nav a {
display: block;
padding: 18px 0;
font-size: 17px;
color: #000000 !important;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
}
.main-nav a:hover {
color: var(--accent-green) !important;
}
/* Always show hamburger toggle (was mobile-only) */
.mobile-menu-toggle {
display: flex !important;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.mobile-menu-toggle span {
width: 28px;
height: 3px;
background: var(--text-primary);
transition: var(--transition);
}
/* Hide the duplicate "Order Online" btn in the header — it duplicates Menu */
.header-actions .btn:not(.sign-in-link) {
display: none;
}
/* Make Sign In always visible — green-pill style matches the brand */
.sign-in-link {
background: var(--accent-green, #0f7a4a) !important;
color: #ffffff !important;
border: none;
padding: 8px 18px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 12px;
border-radius: var(--radius, 6px);
display: inline-block !important;
text-decoration: none;
transition: opacity 0.2s ease;
}
.sign-in-link:hover {
opacity: 0.85;
color: #ffffff !important;
}
/* Green text on dark grounds (photo banners) keeps a bright green: the deepened
--accent-green is for light grounds and would be unreadable here. */
.page-header.brand-hero a { color: var(--accent-green-bright) !important; }
/* ...except inside the light "Claim this listing" box that sits in that banner. */
.page-header.brand-hero .claim-top a { color: var(--accent-green) !important; }
/* License badges on the dark supplier banner. */
.sup-hero .lic { color: var(--accent-green-bright); background: rgba(34,181,115,.16); }
/* Mobile-only nav items (Sign In / Create Account, Order Online) — show
inside the drawer at every viewport since the drawer is now universal */
.mobile-only {
display: list-item !important;
}
/* Text wordmark replacing removed logo images. Footer bg is white. */
.footer-wordmark{font-family:var(--font-heading);font-size:24px;font-weight:700;letter-spacing:2px;color:#1a1a1a;display:inline-block;margin-bottom:15px;line-height:1.1;}
/* ============================================================
All Love "3000" logo + iridescent theme additions (2026-06-20)
============================================================ */
.logo a { display: flex; align-items: center; gap: 12px; }
.logo .logo-mark { height: 50px; width: auto; display: block; }
/* chrome / iridescent wordmark text */
.logo .logo-text {
font-family: var(--font-heading);
font-weight: 800;
letter-spacing: 4px;
font-size: 22px;
text-transform: uppercase;
background: var(--iridescent);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
line-height: 1;
}
/* hero brand logo (the full lockup) */
.hero-logo {
width: 460px; max-width: 88%; height: auto; display: block;
margin: 0 auto 26px;
filter: drop-shadow(0 0 36px rgba(95, 207, 232, 0.18));
}
/* iridescent hero heading */
.hero-content h1, .hero-heading {
background: var(--iridescent);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* footer brand logo image */
.footer .footer-logo-img { width: 240px; max-width: 80%; height: auto; display: block; margin-bottom: 14px; }
/* glowing iridescent hairline under the header */
.header { border-bottom: 1px solid transparent; border-image: var(--iridescent) 1; }
/* primary buttons pick up the warm-gold accent automatically via --accent-green;
give the main CTA an iridescent sheen */
.btn-primary {
background-image: none; background: var(--accent-green);
border: none; color: #ffffff; font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.08); background: var(--accent-green-hover); }
/* --- black header + black footer with white text (2026-07-15, operator request) --- */
.header {
background: #000000 !important;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.header .cart-toggle,
.header .mobile-menu-toggle span,
.header a:not(.btn),
.header .main-nav a { color: #ffffff !important; }
.header .cart-toggle svg { stroke: #ffffff !important; }
.header .mobile-menu-toggle span { background: #ffffff !important; }
.header .main-nav a:hover { color: var(--accent-cyan) !important; }
.header .cart-count { background: var(--accent-green) !important; color: #ffffff !important; }
.footer {
background: #000000 !important;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer, .footer p, .footer a, .footer li, .footer h4, .footer .footer-h, .footer strong,
.footer .footer-brand p, .footer .footer-locations p, .footer .footer-locations strong,
.footer .footer-bottom p, .footer .disclaimer,
.footer .footer-links a, .footer .footer-legal a { color: #ffffff !important; }
.footer h4, .footer .footer-h { color: #ffffff !important; }
.footer a:hover, .footer .footer-links a:hover, .footer .footer-legal a:hover { color: var(--accent-cyan) !important; }
.footer .social-links a { color: #ffffff !important; }
/* vacation theme: the dark "Year 3000" bands are retired (operator dropped 3000 branding) */
.future-band, .grow3000 { display: none !important; }
/* ============================================================
Motion / animations (All Love "3000") 2026-06-20
============================================================ */
@keyframes irid-flow { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
.hero-heading, .logo .logo-text, .btn-primary {
background-size: 200% auto;
animation: irid-flow 7s linear infinite;
}
@keyframes logo-glow {
0%,100% { filter: drop-shadow(0 0 26px rgba(95,207,232,0.16)) drop-shadow(0 0 10px rgba(230,178,119,0.12)); }
50% { filter: drop-shadow(0 0 46px rgba(180,131,216,0.30)) drop-shadow(0 0 20px rgba(230,178,119,0.22)); }
}
@keyframes hero-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.hero-logo { animation: logo-glow 5s ease-in-out infinite, hero-float 7s ease-in-out infinite; }
.logo .logo-mark { transition: filter .3s ease; }
.logo a:hover .logo-mark { filter: drop-shadow(0 0 10px rgba(95,207,232,0.55)); }
/* glowing drifting particles (re-skin existing .smoke-particle) */
.smoke-particle {
background: radial-gradient(circle, rgba(95,207,232,0.45) 0%, rgba(180,131,216,0.22) 45%, transparent 72%) !important;
filter: blur(2px);
animation-duration: 15s !important;
}
/* hover-lift glow */
.btn-primary, .product-card, .category-card, .featured-card, .carousel-product-card, .city-card, .blog-card {
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 26px rgba(95,207,232,0.35), 0 0 18px rgba(230,178,119,0.22); }
.product-card:hover, .category-card:hover, .featured-card:hover, .carousel-product-card:hover, .city-card:hover, .blog-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(96,76,44,0.20), 0 0 24px rgba(69,196,176,0.18);
}
/* scroll-reveal */
/* Scoped to .anim-ready, which animations.js adds to as it starts. Without that class
— script blocked, failed, still loading — .reveal does nothing and content is readable.
Previously a JS failure left whole sections at opacity:0, i.e. invisible. */
.anim-ready .reveal { opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.anim-ready .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
.hero-heading,.logo .logo-text,.btn-primary,.hero-logo,.smoke-particle { animation: none !important; }
.anim-ready .reveal { opacity:1 !important; transform:none !important; transition:none; }
}
/* ============================================================
"3000" dark scene rebuild (replaces tropical photo) 2026-06-20
============================================================ */
/* kill the gradient-wipe animation — keep gradients static */
.hero-heading, .logo .logo-text, .btn-primary { animation: none !important; }
/* vacation theme: whole-site beach backdrop (2026-07-10, was dark cosmic) */
body {
background-image: url('../images/bg-body-wash.webp') !important;
background-size: cover !important;
background-position: center !important;
background-attachment: fixed !important;
}
/* hero as a deep-space scene with a glowing horizon */
.hero {
background:
radial-gradient(ellipse 60% 40% at 50% 118%, rgba(95,207,232,0.22), transparent 62%),
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(180,131,216,0.10), transparent 60%),
linear-gradient(180deg, rgba(8,8,16,0.30) 0%, rgba(5,5,10,0.88) 100%) !important;
}
/* starfield */
.hero::before {
content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:
radial-gradient(1.2px 1.2px at 18% 22%, #ffffff, transparent),
radial-gradient(1px 1px at 33% 65%, #cfe8ff, transparent),
radial-gradient(1.4px 1.4px at 52% 18%, #ffffff, transparent),
radial-gradient(1px 1px at 68% 48%, #ffe9c9, transparent),
radial-gradient(1.2px 1.2px at 81% 28%, #e7d4ff, transparent),
radial-gradient(1px 1px at 90% 70%, #ffffff, transparent),
radial-gradient(1px 1px at 8% 78%, #cfe8ff, transparent),
radial-gradient(1.3px 1.3px at 44% 82%, #ffffff, transparent);
background-repeat: no-repeat; opacity:.85;
animation: twinkle 4s ease-in-out infinite alternate;
}
@keyframes twinkle { from{opacity:.5} to{opacity:.95} }
/* glowing iridescent horizon line at the base of the hero */
.hero::after {
content:''; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:1;
background: var(--iridescent);
box-shadow: 0 0 40px 8px rgba(95,207,232,0.45), 0 0 14px 2px rgba(230,178,119,0.4);
}
.hero-slide, .hero-content { position: relative; z-index: 2; }
/* bigger, more dramatic hero logo */
.hero-logo { width: 540px; max-width: 92%; margin-bottom: 18px; }
/* brand tagline under the hero heading */
.hero-tagline {
font-family: var(--font-heading);
letter-spacing: 6px; text-transform: uppercase;
font-size: clamp(10px, 1.5vw, 15px);
color: var(--accent-cyan);
margin: -8px 0 26px; opacity:.95;
}
/* ============================================================
"3000" generated imagery: hero photo + gallery + band 2026-06-20
============================================================ */
.hero {
background:
linear-gradient(180deg, rgba(255,253,247,0.15) 0%, rgba(255,253,247,0.02) 55%, rgba(247,242,233,0.80) 100%),
url('../images/bg-main-light.webp?v=4') center/cover no-repeat !important;
}
.hero::before { display: none !important; } /* photo already has stars/aurora */
@media (max-width: 820px) {
.hero {
background:
linear-gradient(180deg, rgba(255,253,247,0.12) 0%, rgba(247,242,233,0.80) 100%),
url('../images/bg-main-light.webp?v=4') center/cover no-repeat !important;
}
}
/* Upright phones show only the middle strip of the 1920px hero, so they get that strip as its
own file: 720x1079 center crop, 46 KB instead of 157 KB, same sharpness where it is seen
(Lighthouse main-content time, 2026-11-06). Sideways phones and larger screens keep the full photo. */
@media (max-width: 820px) and (orientation: portrait) {
.hero {
background:
linear-gradient(180deg, rgba(255,253,247,0.12) 0%, rgba(247,242,233,0.80) 100%),
url('../images/bg-main-light-phone.webp') center/cover no-repeat !important;
}
}
/* Grown-in-3000 gallery */
.grow3000 { text-align: center; }
.grow3000 .section-title {
font-family: var(--font-heading); font-size: clamp(28px,4vw,46px);
text-transform: uppercase; letter-spacing: 3px;
background: var(--iridescent); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.grow3000 .sub { color: #aeb6c6; margin: 10px 0 40px; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; }
.grow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px; max-width: 1080px; margin: 0 auto; }
.grow-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(143,180,224,0.18); box-shadow: 0 10px 40px rgba(96,76,44,0.18); }
.grow-card img { width: 100%; height: 320px; object-fit: cover; display: block; transition: transform .6s ease; }
.grow-card:hover img { transform: scale(1.06); }
.grow-card figcaption {
position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 16px 16px;
font-family: var(--font-heading); letter-spacing: 2px; text-transform: uppercase; font-size: 13px; color: #fff;
background: linear-gradient(transparent, rgba(5,5,12,0.88));
}
/* wide future-island band */
.future-band {
position: relative; min-height: 440px; padding: 60px 20px;
display: flex; align-items: center; justify-content: center; text-align: center;
background: linear-gradient(rgba(5,5,12,0.30), rgba(5,5,12,0.55)), url('../images/band-gardens.webp') center/cover no-repeat;
}
.future-band h2 {
font-family: var(--font-heading); font-size: clamp(26px,4.5vw,52px);
text-transform: uppercase; letter-spacing: 4px;
background: var(--iridescent); -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.future-band p { color: #cdd4e2; letter-spacing: 3px; margin-top: 12px; text-transform: uppercase; font-size: 14px; }
/* ============================================================
Rooted in Mississippi — vacation theme 2026-07-10
============================================================ */
.ms-pride { padding: 70px 0 60px; background: rgba(255,255,255,0.55); }
.ms-pride .section-header h2 { color: var(--text-primary); }
.ms-pride-sub { color: var(--text-muted); margin-top: 8px; font-size: 17px; }
.ms-pride-grid {
display: grid; gap: 22px; margin-top: 34px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ms-pride-card { margin: 0; border-radius: var(--radius-lg); overflow: hidden;
background: var(--bg-card); box-shadow: var(--shadow); border: 1px solid var(--border-color); }
.ms-pride-card img { width: 100%; height: 230px; object-fit: cover; display: block; }
.ms-pride-card figcaption { padding: 14px 16px 16px; }
.ms-pride-card figcaption strong { display: block; color: var(--text-primary); font-size: 16px; letter-spacing: .4px; }
.ms-pride-card figcaption span { color: var(--text-muted); font-size: 13.5px; line-height: 1.45; display: block; margin-top: 3px; }
.ms-pride-credits { margin-top: 26px; font-size: 11.5px; color: var(--text-muted); opacity: .75; text-align: center; }
.ms-pride .section-header { display: block; }
.ms-pride .section-header h2 { margin-bottom: 0; }
/* readability over the vivid beach scene: solid ink headline + white halo */
.hero h1, .hero .hero-heading {
background: none !important;
-webkit-background-clip: initial !important; background-clip: initial !important;
-webkit-text-fill-color: var(--text-primary) !important; color: var(--text-primary) !important;
text-shadow: 0 2px 26px rgba(255,255,255,0.95), 0 0 10px rgba(255,255,255,0.8);
/* always clearly larger than the .hero-lead (24–30px) at every screen size */
font-size: clamp(32px, 8vw, 64px) !important;
}
.hero { perspective: 750px; }
.hero .hero-tagline {
color: #f0b93f !important;
font-weight: 700 !important;
/* extruded gold: bright face + stacked bronze sides = depth AND legibility on sky */
text-shadow:
0 1px 0 #c8901f,
0 2px 0 #b07d17,
0 3px 0 #8f6512,
0 4px 0 #704e0d,
0 5px 0 #573c0a,
0 6px 12px rgba(0,0,0,0.5),
0 0 3px rgba(50,32,0,0.9) !important;
transform-style: preserve-3d;
animation: taglineFlyIn 1.15s cubic-bezier(0.16,0.9,0.25,1) both;
will-change: transform, opacity;
}
@keyframes taglineFlyIn {
0% { opacity: 0; transform: translateZ(-1000px) scale(0.25) translateY(24px); }
55% { opacity: 1; }
100% { opacity: 1; transform: translateZ(0) scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero .hero-tagline { animation: none !important; }
}
.hero p {
color: #1c2f3a !important;
font-weight: 600 !important;
text-shadow: 0 1px 3px rgba(255,255,255,0.98), 0 2px 14px rgba(255,255,255,0.9) !important;
}
/* ============================================================
Rolling customer reviews marquee — 2026-07-15
============================================================ */
.reviews-roll { padding: 70px 0 64px; background: rgba(255,255,255,0.55); }
.reviews-viewport { overflow: hidden; margin-top: 34px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reviews-track { display: flex; gap: 24px; width: max-content; padding: 4px 0 14px;
animation: reviews-scroll calc(var(--review-count, 6) * 6.5s) linear infinite; }
/* pause-on-hover only for real pointers — on touch, a tap sticks :hover and freezes the roll */
@media (hover: hover) and (pointer: fine) {
.reviews-viewport:hover .reviews-track { animation-play-state: paused; }
}
@keyframes reviews-scroll { to { transform: translateX(-50%); } }
.review-card { margin: 0; flex: 0 0 auto; width: min(340px, 78vw);
background: var(--bg-card); border: 1px solid var(--border-color);
border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px 24px 18px; }
.review-stars { color: var(--accent-yellow); font-size: 18px; letter-spacing: 3px; margin-bottom: 10px; }
.review-product { color: var(--accent-green); font-weight: 700; font-size: 13px; letter-spacing: .4px;
text-transform: uppercase; margin: -2px 0 10px; }
/* Cards live in a flex row, so every card stretches to the height of the tallest one — the
one with a photo. Text-only cards were left with a slab of dead space under the author
name, which reads as a half-rendered card rather than a shorter review. Make each card a
column and push the caption to the bottom so the extra height becomes spacing. */
.review-card { display: flex; flex-direction: column; }
.review-card .review-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.review-card figcaption { margin-top: auto; padding-top: 8px; }
.review-card blockquote { margin: 0 0 14px; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.review-card blockquote::before { content: '\201C'; color: var(--accent-green); font-size: 26px;
line-height: 0; vertical-align: -8px; margin-right: 4px; }
.review-card figcaption { color: var(--text-primary); font-weight: 700; font-size: 13.5px;
letter-spacing: .6px; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
.reviews-track { animation: none; }
.reviews-viewport { overflow-x: auto; }
}
/* ============================================================
Location card with embedded Google Map — 2026-07-15
============================================================ */
.locations-section .locations-grid { grid-template-columns: 1fr; }
.locations-section .location-card {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 36px;
align-items: stretch;
}
.location-details { display: flex; flex-direction: column; }
.location-details .btn { margin-top: auto; align-self: flex-start; }
.location-map {
border-radius: 12px;
overflow: hidden;
min-height: 340px;
border: 1px solid var(--border-color);
background: #e8eef2;
}
.location-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
@media (max-width: 560px) {
.locations-section .location-card { grid-template-columns: 1fr; }
.location-map { min-height: 240px; }
}
/* review cards with photos (2026-07-15) */
.review-card.has-photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Customer photos show in FULL — no crop. The box used to be a fixed 170px with
object-fit: cover, which filled the frame by discarding ~35% of the image (measured on the
Dragon Fire photo: 1399x1084 into 340x170). The height is now driven by the photo's own
aspect ratio, so the whole frame the customer submitted is visible in the card. */
.review-card .review-photo { width: 100%; height: auto; overflow: hidden; background: #dce6ec; }
.review-card .review-photo img { width: 100%; height: auto; object-fit: contain; display: block; }
/* Catalogue fallback shot: contained on a neutral field and not zoomable, so it reads as a
product image rather than a photo the customer took. */
.review-card .review-photo.is-product { background: var(--bg-tertiary, #f2f5f7); height: 170px; }
.review-card .review-photo.is-product img { height: 100%; object-fit: contain; padding: 10px; cursor: default; }
.review-card.has-photo .review-body { padding: 18px 22px 16px; }
/* enlarged hero lead line (2026-07-15) — tagline removed */
.hero .hero-lead { font-size: clamp(24px, 3.5vw, 30px) !important; line-height: 1.35; margin-top: 2px; }
.hero-content p.hero-lead { font-size: clamp(24px, 3.5vw, 30px) !important; }
/* ============================================================
Reviews: pause/play control + photo lightbox — 2026-07-15
============================================================ */
.reviews-track.paused { animation-play-state: paused !important; }
.reviews-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.reviews-toggle {
flex: 0 0 auto;
background: var(--bg-card); color: var(--text-primary);
border: 1px solid var(--border-color); border-radius: 999px;
padding: 8px 16px; font-size: 13px; font-weight: 700; letter-spacing: .5px;
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.reviews-toggle:hover { border-color: var(--accent-green); color: var(--accent-green); }
.reviews-toggle .rt-play { display: none; }
#reviews-roll.is-paused .reviews-toggle .rt-pause { display: none; }
#reviews-roll.is-paused .reviews-toggle .rt-play { display: inline; }
.review-photo img { cursor: zoom-in; }
.review-lightbox {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,0.92);
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.review-lightbox[hidden] { display: none; }
.review-lightbox img { max-width: 100%; max-height: 90vh; border-radius: 10px; box-shadow: 0 10px 50px rgba(0,0,0,0.6); }
.review-lightbox-close {
position: absolute; top: 14px; right: 20px;
background: none; border: none; color: #fff; font-size: 44px; line-height: 1;
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* tappable address → opens directions (2026-07-15) */
.location-address a { color: inherit; text-decoration: none; }
.location-address a:hover, .location-address a:focus { color: var(--accent-green); text-decoration: underline; }
/* Hamburger overlay menu — this site uses the hamburger at ALL widths (14 nav items
don't fit inline), so the dark panel + white links must apply at every width, not
just <=900px. The old max-width:900px gate left desktop (>900px) white-on-white.
(2026-07-15 mobile fix; 2026-07-18 extended to all widths for the PC bug.) */
.header .main-nav {
background: #0b0b0b !important;
border-bottom: 1px solid rgba(255,255,255,0.14) !important;
height: auto !important;
max-height: calc(100vh - var(--header-h)) !important;
box-shadow: 0 12px 30px rgba(0,0,0,0.5) !important;
}
.header .main-nav li { border-bottom-color: rgba(255,255,255,0.14) !important; }
.header .main-nav a { color: #ffffff !important; }
.header .main-nav a:hover { color: var(--accent-green) !important; }
/* ============================================================
Homepage featured-guide callout — 2026-07-16
============================================================ */
.learn-band { padding: 64px 0; background: rgba(255,255,255,0.55); }
.learn-card {
max-width: 780px; margin: 0 auto; text-align: center;
background: var(--bg-card); border: 1px solid var(--border-color);
border-radius: var(--radius-lg); box-shadow: var(--shadow);
padding: 44px 36px;
border-top: 4px solid var(--accent-green);
}
.learn-eyebrow { display: inline-block; font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
font-weight: 700; color: var(--accent-green); margin-bottom: 12px; }
.learn-card h2 { color: var(--text-primary); font-size: clamp(24px, 3.5vw, 34px); margin: 0 0 14px; line-height: 1.2; }
.learn-card p { color: var(--text-secondary); font-size: 17px; line-height: 1.6; max-width: 60ch; margin: 0 auto 26px; }
.learn-actions { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }
.learn-more-link { color: var(--accent-green); font-weight: 700; text-decoration: none; }
.learn-more-link:hover { text-decoration: underline; }
/* Discover floating button (homepage) — 2026-07-16 */
.discover-fab {
position: fixed; right: 16px; bottom: 18px; z-index: 900;
background: linear-gradient(135deg, #0f7a4a, #0b6640); color: #fff;
font-weight: 700; font-size: 15px; letter-spacing: .3px;
padding: 13px 22px; border-radius: 999px; text-decoration: none;
box-shadow: 0 6px 24px rgba(21,154,94,.5); border: 1px solid rgba(255,255,255,.25);
}
.discover-fab:hover { filter: brightness(1.07); }
/* profile dropdown menu: dark text on its white panel (fixes white-on-white) 2026-07-16 */
.header .user-menu .user-menu-dropdown a,
.header .user-menu .user-menu-dropdown button { color: #223540 !important; }
.header .user-menu .user-menu-dropdown a:hover,
.header .user-menu .user-menu-dropdown button:hover { color: var(--accent-green) !important; background: var(--bg-tertiary) !important; }
/* MS Directory dropdown menu (2026-07-24) */
.main-nav li.has-dropdown { position: relative; }
.main-nav li.has-dropdown > a .caret { font-size: 10px; margin-left: 5px; display: inline-block; }
.main-nav .dropdown {
display: flex; flex-direction: column; gap: 2px;
position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
min-width: 184px; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
box-shadow: 0 14px 34px rgba(0,0,0,.13); padding: 6px; margin: 0;
opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 1001;
}
.main-nav li.has-dropdown:hover .dropdown,
.main-nav li.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px); }
.main-nav .dropdown li { display: block; }
.main-nav .dropdown a { display: block; padding: 9px 14px; text-transform: none; letter-spacing: .3px; font-size: 14px; border-radius: 7px; }
.main-nav .dropdown a::after { display: none; }
.main-nav .dropdown a:hover { background: rgba(21,154,94,.1); color: var(--accent-green) !important; }
@media (max-width: 900px) {
.main-nav .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; padding: 2px 0 2px 18px; min-width: 0; }
.main-nav li.has-dropdown > a .caret { display: none; }
}
/* MMCP dispensary license line in the footer (E-E-A-T / YMYL trust signal, 2026-07-25).
Inherits the footer-bottom colour rules; slightly smaller and letter-spaced so it
reads as a regulatory notice rather than body copy. */
.footer .footer-bottom p.license {
font-size: 0.82rem;
letter-spacing: 0.03em;
opacity: 0.9;
margin-top: 0.35rem;
}
.footer .footer-bottom p.license strong {
font-weight: 700;
letter-spacing: 0.06em;
}
/* Staff-review disclosure (FTC material-connection, 2026-07-25).
Insider reviews must be visibly distinguishable from customer reviews. */
.reviews-disclosure {
margin: 0.4rem 0 0;
font-size: 0.82rem;
opacity: 0.75;
}
.review-staff-badge {
display: inline-block;
margin-left: 0.5rem;
padding: 0.12rem 0.5rem;
border: 1px solid currentColor;
border-radius: 999px;
font-size: 0.66rem;
letter-spacing: 0.08em;
text-transform: uppercase;
vertical-align: middle;
opacity: 0.85;
}
/* Running MMECU allotment tally in the cart drawer (2026-07-26).
Mississippi measures purchases in MMECU, not dollars — this answers "can I
actually buy this basket", which is where patients get caught at the register. */
.cart-allotment {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin: 0 1rem 0.75rem;
padding: 0.85rem 1rem;
border: 1px solid var(--border-color);
border-left: 3px solid var(--accent-green);
border-radius: 8px;
background: var(--bg-secondary);
}
.cart-allotment[hidden] { display: none; }
.cart-allotment .ca-label {
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.75;
}
.cart-allotment .ca-value {
font-family: 'Roboto Condensed', sans-serif;
font-size: 1.45rem;
font-weight: 700;
line-height: 1.1;
color: var(--accent-green);
}
.cart-allotment .ca-note { font-size: 0.76rem; line-height: 1.45; opacity: 0.8; }
.cart-allotment .ca-note a { color: var(--accent-green); }
/* Claim prompt in the page header.
The existing claim CTA sits ~81% down these listing pages — an owner arriving at their own
listing would have to scroll past the whole record to find out they can manage it. This is
the same offer, stated where they land, and names what they actually get rather than the
vague "keep your details accurate". */
.claim-top{
margin:14px auto 0;max-width:640px;background:rgba(255,255,255,.92);
border:1px solid var(--border-color);border-left:4px solid var(--accent-green);
border-radius:var(--radius);padding:11px 15px;font-size:14.5px;line-height:1.5;
color:var(--text-primary);text-align:left;
}
.claim-top a{color:var(--accent-green);font-weight:700;text-decoration:underline}
@media (max-width:600px){ .claim-top{font-size:14px;padding:10px 13px} }
/* Out-the-door price — shelf price plus Mississippi sales tax, shown under the
product price so a shopper does not have to do the sum at the shelf. Muted on
purpose: the sale price is the headline, this is the reassurance. */
.product-out-the-door {
margin-top: 2px;
font-size: 0.82rem;
font-weight: 600;
color: var(--bp-forest, #123a28);
line-height: 1.3;
}
.product-out-the-door .otd-note {
display: block;
font-weight: 400;
font-size: 0.72rem;
color: var(--text-muted, #6b7f8a);
}
/* The rules above use a descendant selector (.product-price .original-price) but
menu.js puts both classes on the SAME element — — so they never matched and the strike-through never rendered.
Nothing had been on sale until the store-wide promotion, so it went unnoticed.
These compound selectors match the markup as it is actually written. */
.product-price.original-price {
text-decoration: line-through;
color: var(--text-secondary, #3c5260);
font-size: 14px;
font-weight: 400;
margin-left: 8px;
}
.product-price.sale-price {
color: #d84a3f;
font-weight: 700;
}
.product-pricing.on-sale {
display: flex;
align-items: baseline;
gap: 2px;
margin-top: 8px;
}
/* Pack breakdown beside the total weight — "3.5g (7 × 0.5g)". The total is what
counts against a patient's allotment, so it stays the primary figure; the
breakdown is there so nobody thinks a seven-pack is a single joint. */
.product-weight .pack-breakdown {
font-weight: 400;
color: var(--text-muted, #6b7f8a);
}
/* Strain type colors + tag (Indica purple, Hybrid green, Sativa orange, CBD blue — the Green
Light kiosk/TV scheme). Here, not menu.css, because static product pages load only this file.
The shop's chips (menu.css .strain-chip) use the same color classes. */
.strain-indica { --strain-fg: #6d28d9; --strain-bg: rgba(139, 92, 246, 0.12); }
.strain-hybrid { --strain-fg: #166534; --strain-bg: rgba(34, 197, 94, 0.12); }
.strain-sativa { --strain-fg: #9a3412; --strain-bg: rgba(249, 115, 22, 0.12); }
.strain-cbd { --strain-fg: #1d4ed8; --strain-bg: rgba(59, 130, 246, 0.12); }
.strain-badge {
display: inline-block;
align-self: flex-start;
margin: 2px 0 4px;
padding: 2px 9px;
border-radius: 999px;
background: var(--strain-bg);
color: var(--strain-fg);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
}
.strain-badge[hidden] { display: none; }
/* Narrow phones, signed out (2026-10-24): logo (217px) + Sign In pill + cart + menu + padding came to
428px on a 412px screen, so the whole page could be dragged sideways and the logo looked cut off.
Slightly tighter wordmark, and Sign In stays on one line in a slimmer pill instead of wrapping. */
@media (max-width: 440px) {
.header-container { gap: 6px; }
.logo { min-width: 0; }
.logo a { gap: 8px; }
.logo .logo-text { letter-spacing: 2.5px; font-size: 20px; }
.sign-in-link { padding: 7px 12px !important; font-size: 12px; white-space: nowrap;
display: inline-flex !important; align-items: center; justify-content: center; }
}
/* Footer column headings are h2.footer-h (2026-11-06; were h4, which skipped heading levels on
every page). Browser h2 defaults reset so they look exactly as before. */
.footer .footer-h { margin-top: 0; font-weight: 700; line-height: 1.3; font-family: inherit; }
.footer-newsletter .footer-h { font-weight: 600; }
/* Links inside running text are underlined so they don't rely on color alone
(Lighthouse link-in-text-block / WCAG 1.4.1, 2026-11-06). Buttons are excluded. */
p a:not(.btn):not([class*="btn"]), .dr-card p a, blockquote a,
.callout a:not(.btn), .blog-meta a, article li a:not(.btn), .doctor-section li a:not(.btn),
dd a:not(.btn) {
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
/* Read by screen readers, not shown (keeps heading levels in order, 2026-11-06). */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Category pages ("On the shelf right now"): same-size stand-ins for the 8 product cards
until the live menu answers, so the text below never jumps (Lighthouse CLS, 2026-11-06).
Square image + 51px two-line name, matching the cards js/pages/.js builds. */
.cat-skel { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; background: var(--bg-secondary); }
.cat-skel::before { content: ""; display: block; aspect-ratio: 1; background: var(--border-color); opacity: .5; }
.cat-skel::after { content: ""; display: block; height: 51px; }
/* ---- css/auth.css ---- */
/* Auth Pages Styles - All Love Dispensary */
/* ==========================================================================
AUTH SECTION
========================================================================== */
.auth-section {
padding: 3rem 0;
min-height: calc(100vh - 400px);
}
.auth-card {
max-width: 450px;
margin: 0 auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 2rem;
}
/* ==========================================================================
AUTH MESSAGES
========================================================================== */
.auth-message {
padding: 1rem;
border-radius: 8px;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.auth-error {
background: #fee2e2;
color: #dc2626;
border: 1px solid #fecaca;
}
.auth-success {
background: #d1fae5;
color: #059669;
border: 1px solid #a7f3d0;
}
/* ==========================================================================
SOCIAL LOGIN
========================================================================== */
.social-login {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.btn-social {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.875rem 1.5rem;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-social:hover {
background: #f7f7f7;
border-color: #ccc;
}
.btn-social svg {
flex-shrink: 0;
}
.btn-google:hover {
border-color: #4285F4;
}
.btn-facebook:hover {
border-color: #1877F2;
}
/* ==========================================================================
DIVIDER
========================================================================== */
.auth-divider {
display: flex;
align-items: center;
margin: 1.5rem 0;
color: var(--text-muted);
font-size: 0.9rem;
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: #ddd;
}
.auth-divider span {
padding: 0 1rem;
}
/* ==========================================================================
AUTH FORM
========================================================================== */
.auth-form {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-group label {
font-weight: 500;
color: #333;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
padding: 0.875rem 1rem;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus {
outline: none;
border-color: var(--primary-color, #2d5a27);
box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.1);
}
.form-hint {
font-size: 0.8rem;
color: var(--text-muted);
margin: 0;
}
/* Password Toggle */
.password-input-wrapper {
position: relative;
}
.password-input-wrapper input {
width: 100%;
padding-right: 3rem;
}
.password-toggle {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
color: var(--text-muted);
}
.password-toggle:hover {
color: #333;
}
.password-toggle svg {
fill: currentColor;
}
/* Form Row */
.form-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Checkbox */
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
}
.checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
cursor: pointer;
}
.checkbox-label a {
color: var(--primary-color, #2d5a27);
}
/* Forgot Link */
.forgot-link {
color: var(--primary-color, #2d5a27);
font-size: 0.9rem;
text-decoration: none;
}
.forgot-link:hover {
text-decoration: underline;
}
/* Button Block */
.btn-block {
width: 100%;
padding: 1rem;
}
.btn-loading {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* Auth Footer */
.auth-footer {
text-align: center;
margin-top: 1.5rem;
color: var(--text-secondary);
}
.auth-footer a {
color: var(--primary-color, #2d5a27);
font-weight: 500;
}
/* ==========================================================================
PROFILE PAGE
========================================================================== */
.profile-section {
padding: 2rem 0 4rem;
}
.profile-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 2rem;
}
@media (max-width: 1024px) {
.profile-layout {
grid-template-columns: 240px 1fr;
gap: 1.5rem;
}
}
@media (max-width: 900px) {
.profile-layout {
grid-template-columns: 220px 1fr;
gap: 1rem;
}
}
@media (max-width: 768px) {
.profile-layout {
grid-template-columns: 1fr;
}
}
/* Profile Sidebar */
.profile-sidebar {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
padding: 1.5rem;
height: fit-content;
}
.profile-avatar-section {
text-align: center;
padding-bottom: 1.5rem;
border-bottom: 1px solid #eee;
margin-bottom: 1.5rem;
}
.avatar-wrapper {
position: relative;
display: inline-block;
margin-bottom: 1rem;
}
.avatar-image {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--primary-color, #2d5a27);
}
.avatar-upload-btn {
position: absolute;
bottom: 0;
right: 0;
width: 32px;
height: 32px;
background: var(--primary-color, #2d5a27);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s;
}
.avatar-upload-btn:hover {
transform: scale(1.1);
}
.avatar-upload-btn svg {
fill: #fff;
}
.profile-sidebar h3 {
margin: 0 0 0.25rem;
font-size: 1.25rem;
color: #333;
}
.user-email {
color: #666;
font-size: 0.9rem;
margin: 0 0 0.5rem;
word-break: break-word;
}
.user-since {
color: #888;
font-size: 0.8rem;
margin: 0;
}
/* Profile Nav */
.profile-nav {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-bottom: 1.5rem;
}
.profile-nav-item {
background: none;
border: none;
padding: 0.75rem 1rem;
text-align: left;
border-radius: 8px;
cursor: pointer;
font-size: 0.95rem;
color: #333;
transition: background 0.2s;
}
.profile-nav-item:hover {
background: #f5f5f5;
}
.profile-nav-item.active {
background: var(--primary-color, #2d5a27);
color: #fff;
}
.logout-btn {
margin-top: auto;
}
/* Profile Main */
.profile-main {
min-height: 400px;
}
.profile-tab {
display: none;
}
.profile-tab.active {
display: block;
}
/* Profile Stats */
.profile-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.stat-card {
background: #fff;
border-radius: 12px;
padding: 1.5rem;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.stat-value {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--primary-color, #2d5a27);
}
.stat-label {
color: #666;
font-size: 0.9rem;
}
/* Profile Section Card */
.profile-section-card {
background: #fff;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.profile-section-card h3 {
margin: 0 0 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #eee;
color: #333;
}
/* Settings Form */
.settings-form {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 400px;
}
.settings-form .btn {
width: fit-content;
}
/* Danger Zone */
.danger-zone {
border: 1px solid #fee2e2;
}
.danger-zone h3 {
color: #dc2626;
}
.btn-danger {
background: #dc2626;
color: #fff;
}
.btn-danger:hover {
background: #b91c1c;
}
/* User Reviews List */
.user-reviews-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.user-review-card {
padding: 1rem;
border: 1px solid #eee;
border-radius: 8px;
}
.user-review-card .review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.user-review-card .review-rating {
color: #f59e0b;
}
.user-review-card .review-date {
color: #888;
font-size: 0.85rem;
}
.user-review-card .review-title {
margin: 0 0 0.5rem;
font-size: 1rem;
}
.user-review-card .review-body {
color: #444;
margin: 0 0 0.75rem;
line-height: 1.5;
}
.user-review-card .review-meta {
display: flex;
gap: 1rem;
font-size: 0.85rem;
color: #888;
margin-bottom: 0.75rem;
}
.user-review-card .review-actions {
display: flex;
gap: 1rem;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 2rem;
color: #666;
}
.empty-state a {
color: var(--primary-color, #2d5a27);
}
/* ==========================================================================
USER MENU (Header)
========================================================================== */
.user-menu {
position: relative;
}
.user-menu-toggle {
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
}
.user-avatar-small {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--primary-color, #2d5a27);
}
.user-menu-dropdown {
position: absolute;
top: 100%;
right: 0;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
min-width: 180px;
padding: 0.5rem 0;
z-index: 100;
display: none;
}
.user-menu.open .user-menu-dropdown {
display: block;
}
.user-menu-dropdown a,
.user-menu-dropdown button {
display: block;
width: 100%;
padding: 0.75rem 1rem;
text-align: left;
background: none;
border: none;
color: #333;
text-decoration: none;
cursor: pointer;
font-size: 0.9rem;
}
.user-menu-dropdown a:hover,
.user-menu-dropdown button:hover {
background: #f5f5f5;
}
/* ==========================================================================
BUTTON TEXT VARIANT
========================================================================== */
.btn-text {
background: none;
border: none;
color: var(--primary-color, #2d5a27);
cursor: pointer;
padding: 0.25rem 0.5rem;
font-size: 0.9rem;
}
.btn-text:hover {
text-decoration: underline;
}
.btn-text.btn-danger {
color: #dc2626;
background: none;
}
/* ==========================================================================
RESPONSIVE - MOBILE OPTIMIZATIONS
========================================================================== */
/* Tablet and mobile */
@media (max-width: 768px) {
.auth-section {
padding: 2rem 0;
}
.auth-card {
max-width: 100%;
margin: 0 16px;
padding: 1.75rem;
border-radius: 10px;
}
/* Touch-friendly social buttons */
.btn-social {
min-height: 48px;
padding: 0.875rem 1.25rem;
font-size: 0.95rem;
}
/* Touch-friendly form inputs */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
min-height: 48px;
padding: 0.875rem 1rem;
font-size: 16px; /* Prevents iOS zoom on focus */
}
/* Touch-friendly checkboxes */
.checkbox-label input[type="checkbox"] {
width: 22px;
height: 22px;
}
.checkbox-label {
font-size: 0.875rem;
line-height: 1.4;
}
/* Touch-friendly password toggle */
.password-toggle {
width: 44px;
height: 44px;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Touch-friendly submit button */
.btn-block {
min-height: 52px;
font-size: 1rem;
}
/* Profile layout */
.profile-layout {
gap: 1.5rem;
}
.profile-sidebar {
padding: 1.25rem;
}
/* Touch-friendly profile nav */
.profile-nav {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.5rem !important;
}
button.profile-nav-item {
min-height: 48px !important;
padding: 0.875rem 1rem !important;
font-size: 1rem !important;
text-align: center !important;
font-weight: 600 !important;
border-radius: 8px !important;
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
}
button.profile-nav-item.active {
background: #2d5a27 !important;
color: #ffffff !important;
border-color: #3d7a37 !important;
}
/* Profile stats */
.profile-stats {
gap: 0.75rem;
}
.stat-card {
padding: 1.25rem;
}
.stat-value {
font-size: 1.75rem;
}
/* Profile section cards */
.profile-section-card {
padding: 1.25rem;
margin-bottom: 1.25rem;
}
/* Settings form */
.settings-form {
max-width: 100%;
}
/* User avatar in header */
.user-menu-toggle {
width: 44px;
height: 44px;
padding: 4px;
}
.user-avatar-small {
width: 36px;
height: 36px;
}
}
/* Small phones */
@media (max-width: 480px) {
.auth-card {
padding: 1.5rem;
margin: 0 12px;
}
.social-login .btn-social {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.auth-divider {
margin: 1.25rem 0;
}
.auth-form {
gap: 1rem;
}
.form-group label {
font-size: 0.9rem;
}
/* Profile sidebar on small screens */
.profile-sidebar {
padding: 1rem;
}
.avatar-image {
width: 80px;
height: 80px;
}
.avatar-upload-btn {
width: 28px;
height: 28px;
}
.profile-sidebar h3 {
font-size: 1.1rem;
}
/* Smaller profile nav on small phones */
.profile-nav-item {
padding: 0.875rem 0.5rem;
font-size: 0.95rem;
}
/* User reviews */
.user-review-card {
padding: 0.875rem;
}
.user-review-card .review-title {
font-size: 0.95rem;
}
.user-review-card .review-body {
font-size: 0.9rem;
}
}
/* Very small phones */
@media (max-width: 375px) {
.auth-card {
padding: 1.25rem;
margin: 0 8px;
}
.btn-block {
min-height: 48px;
font-size: 0.9rem;
}
.profile-stats {
grid-template-columns: repeat(2, 1fr);
}
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
.btn-social:hover {
background: #fff;
border-color: #ddd;
}
.btn-social:active {
background: #f0f0f0;
transform: scale(0.98);
}
button.profile-nav-item:hover {
background: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
}
button.profile-nav-item:active {
opacity: 0.9;
transform: scale(0.98);
}
button.profile-nav-item.active:hover {
background: #2d5a27 !important;
}
.form-group input:focus {
/* Better touch feedback */
box-shadow: 0 0 0 4px rgba(45, 90, 39, 0.15);
}
}
/* ---- css/cart.css ---- */
/* Cart Toggle Button */
.cart-toggle {
position: relative;
background: none;
border: none;
cursor: pointer;
padding: 8px;
color: var(--text-primary);
transition: var(--transition);
}
.cart-toggle:hover {
color: var(--accent-green);
}
.cart-toggle svg {
display: block;
}
.cart-count {
position: absolute;
top: 0;
right: 0;
background: var(--accent-green);
color: white;
font-size: 11px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
.cart-count:empty,
.cart-count[data-count="0"] {
display: none;
}
/* Cart Overlay */
.cart-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 1001;
}
.cart-overlay.active {
opacity: 1;
visibility: visible;
}
/* Cart Drawer */
.cart-drawer {
position: fixed;
top: 0;
right: -520px;
width: 100%;
/* 480 (was 400, 11-05): room for a product name on two or three lines. */
max-width: 480px;
height: 100%;
background: var(--bg-primary);
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
transition: right 0.3s ease;
/* Above the site header (1000): at 999 the header covered "Your Cart" and the close button
(operator's tablet photo, 11-05). Overlay sits between them. */
z-index: 1002;
display: flex;
flex-direction: column;
}
.cart-drawer.active {
right: 0;
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid var(--border-color);
}
.cart-header h2 {
font-family: var(--font-heading);
font-size: 24px;
color: var(--text-primary);
margin: 0;
}
.cart-close {
background: none;
border: none;
font-size: 32px;
cursor: pointer;
color: var(--text-secondary);
padding: 0;
line-height: 1;
transition: var(--transition);
}
.cart-close:hover {
color: var(--accent-green);
}
/* Cart Location Indicator */
.cart-location {
padding: 12px 20px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
font-size: 14px;
color: var(--text-secondary);
}
.cart-location strong {
color: var(--accent-green);
}
.cart-location:empty {
display: none;
}
/* Cart Items */
.cart-items {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.cart-empty {
text-align: center;
color: var(--text-secondary);
padding: 40px 20px;
}
.cart-item {
display: flex;
gap: 15px;
padding: 12px 0;
border-bottom: 1px solid var(--border-color);
}
.cart-item:last-child {
border-bottom: none;
}
.cart-item-image {
width: 70px;
height: 70px;
border-radius: 8px;
object-fit: cover;
background: var(--bg-secondary);
}
.cart-item-details {
flex: 1;
min-width: 0;
}
.cart-item-name {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
/* Up to three lines, not one with "...": "BEST MOOD | JEAL..." and "BEST MOOD | KING..."
could not be told apart (operator, 11-05). */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
/* Picture and name open the product's page. */
.cart-item-link {
color: inherit;
text-decoration: none;
}
.cart-item-link:hover,
.cart-item-link:focus-visible {
text-decoration: underline;
}
.cart-item-image-link {
flex-shrink: 0;
display: block;
line-height: 0;
}
.cart-item-variant {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 4px;
}
.cart-item-price {
font-weight: 600;
color: var(--accent-green);
}
/* Sale Price in Cart */
.cart-item-price.on-sale {
/* Sale and regular price side by side: one line, not two — more of the basket in view (11-05). */
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 8px;
}
.cart-item-price.on-sale .sale-price {
color: #ef4444;
font-weight: 700;
}
.cart-item-price.on-sale .original-price {
color: var(--text-secondary);
font-size: 12px;
font-weight: 400;
text-decoration: line-through;
}
.cart-item-controls {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
.cart-item-remove {
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 4px;
font-size: 18px;
line-height: 1;
transition: var(--transition);
}
.cart-item-remove:hover {
color: #dc3545;
}
/* Quantity Controls */
.quantity-controls {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border-color);
border-radius: 6px;
overflow: hidden;
}
.quantity-btn {
background: var(--bg-secondary);
border: none;
width: 30px;
height: 30px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
transition: var(--transition);
}
.quantity-btn:hover {
background: var(--accent-green);
color: white;
}
.quantity-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.quantity-value {
width: 30px;
text-align: center;
font-weight: 600;
color: var(--text-primary);
}
/* Cart Footer */
.cart-footer {
padding: 20px;
border-top: 1px solid var(--border-color);
background: var(--bg-primary);
}
.cart-subtotal {
display: flex;
justify-content: space-between;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
color: var(--text-primary);
}
.cart-subtotal span:last-child {
color: var(--accent-green);
}
.cart-note {
font-size: 13px;
color: var(--text-secondary);
text-align: center;
margin-top: 10px;
}
/* Add to Cart Button */
.add-to-cart {
transition: all 0.2s ease;
}
.add-to-cart.adding {
pointer-events: none;
opacity: 0.7;
}
.add-to-cart.added {
background: var(--accent-green) !important;
color: white !important;
}
/* Product Card Cart Button */
.product-card .add-to-cart {
width: 100%;
margin-top: 10px;
}
/* Out of Stock State */
.out-of-stock {
opacity: 0.6;
cursor: not-allowed;
}
.out-of-stock .add-to-cart {
background: var(--text-secondary) !important;
cursor: not-allowed;
}
/* ==========================================================================
MOBILE RESPONSIVE
========================================================================== */
/* Tablet portrait - fix cart drawer visibility */
@media (max-width: 1024px) and (orientation: portrait) {
.cart-drawer:not(.active) {
right: -100vw; /* Ensure drawer is fully hidden on tablets in portrait */
}
}
/* Tablet and mobile */
@media (max-width: 768px) {
.cart-drawer {
max-width: 100%;
width: 100%;
right: -100%; /* Fix: hide full-width drawer properly */
}
.cart-drawer.active {
right: 0;
}
.cart-header {
padding: 16px;
}
.cart-header h2 {
font-size: 20px;
}
/* Larger touch target for close button */
.cart-close {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
.cart-location {
padding: 10px 16px;
font-size: 13px;
}
.cart-items {
padding: 16px;
}
.cart-item {
gap: 12px;
padding: 12px 0;
}
.cart-item-image {
width: 70px;
height: 70px;
border-radius: 6px;
}
.cart-item-name {
font-size: 14px;
}
.cart-item-variant {
font-size: 12px;
}
/* Touch-friendly remove button */
.cart-item-remove {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
/* Touch-friendly quantity controls */
.quantity-btn {
width: 40px;
height: 40px;
font-size: 18px;
}
.quantity-value {
width: 36px;
font-size: 15px;
}
.cart-footer {
padding: 16px;
}
.cart-subtotal {
font-size: 16px;
}
.cart-footer .btn {
min-height: 48px;
font-size: 14px;
}
.cart-note {
font-size: 12px;
}
}
/* Small phones */
@media (max-width: 480px) {
.cart-item {
flex-wrap: wrap;
}
.cart-item-image {
width: 60px;
height: 60px;
}
.cart-item-controls {
flex-direction: row;
width: 100%;
justify-content: space-between;
margin-top: 10px;
}
.cart-item-details {
flex: 1;
}
.cart-item-name {
font-size: 13px;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
.cart-close:hover,
.cart-item-remove:hover,
.quantity-btn:hover {
background: inherit;
color: inherit;
}
.cart-close:active,
.cart-item-remove:active {
opacity: 0.7;
transform: scale(0.95);
}
.quantity-btn:active {
background: var(--accent-green);
color: white;
}
}
/* Header Actions Alignment */
.header-actions {
display: flex;
align-items: center;
gap: 15px;
}
/* Smaller Order Online button in header */
.header-actions .btn-sm {
padding: 6px 12px;
font-size: 11px;
letter-spacing: 0.5px;
}
@media (max-width: 768px) {
.header-actions .btn-sm {
display: none;
}
.header-actions .cart-toggle {
display: flex;
}
}