/*
Theme Name: VNESHOME
Theme URI: https://biv11440-vneshome.biv.vn/
Author: BIV Team
Author URI: https://biv.vn
Description: VNESHOME - Handcrafted Natural Home Decor. Japandi warm minimalist e-commerce theme with WooCommerce support.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vneshome
Tags: e-commerce, woocommerce, custom-menu, featured-images
*/

/* ============================================
   DESIGN SYSTEM - VNESHOME
   Pseudo-Tailwind CSS Utilities
   ============================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Colors - Core & Brand */
  --color-primary: #000000;
  --color-primary-dark: #1d1b19;
  --color-primary-light: #4b4640;
  --color-secondary: #98462b;
  --color-secondary-dark: #752c13;
  --color-secondary-light: #fd9574;
  --color-bg-header: #ffffff;
  --color-lightgray: #f5f3f0;
  --color-gray: #7d766f;
  --color-white: #ffffff;
  --color-black: #000000;

  /* Theme Tokens */
  --color-on-primary: #ffffff;
  --color-primary-container: #1d1b19;
  --color-on-primary-container: #878380;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #fd9574;
  --color-on-secondary-container: #752c13;
  --color-tertiary: #000000;
  --color-surface: #fbf9f6;
  --color-background: #fbf9f6;
  --color-on-surface: #1b1c1a;
  --color-on-background: #1b1c1a;
  --color-surface-variant: #e4e2df;
  --color-on-surface-variant: #4b4640;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f3f0;
  --color-surface-container: #efeeeb;
  --color-surface-container-high: #eae8e5;
  --color-surface-container-highest: #e4e2df;
  --color-surface-dim: #dbdad7;
  --color-surface-bright: #fbf9f6;
  --color-surface-tint: #615e5b;
  --color-outline: #7d766f;
  --color-outline-variant: #cec5bd;
  --color-inverse-surface: #30312f;
  --color-inverse-on-surface: #f2f0ed;
  --color-inverse-primary: #cbc5c2;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-tertiary-container: #191d0f;
  --color-tertiary-fixed-dim: #c4c9b2;
  --color-secondary-fixed: #ffdbd0;

  /* Animation */
  --animate-slide: slide 0.3s ease-in-out;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --margin-mobile: 1.25rem;
  --margin-desktop: 3rem;
  --gutter-mobile: 1rem;
  --gutter-desktop: 2rem;

  /* Border Radius */
  --radius-default: 0.125rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.5rem;
  --radius-full: 0.75rem;

  /* Transitions */
  --transition-fast: 200ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-slower: 700ms ease-out;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  color: var(--color-on-surface);
  background-color: var(--color-surface);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface-container-low); }
::-webkit-scrollbar-thumb { background: var(--color-outline-variant); border-radius: 3px; }

/* --- Typography --- */
.font-display-lg { font-family: 'Playfair Display', serif; font-size: 56px; line-height: 64px; letter-spacing: -0.02em; font-weight: 400; }
.font-display-lg-mobile { font-family: 'Playfair Display', serif; font-size: 36px; line-height: 44px; letter-spacing: -0.01em; font-weight: 400; }
.font-display-sm { font-family: 'Playfair Display', serif; font-size: 40px; line-height: 48px; letter-spacing: -0.01em; font-weight: 400; }
.font-display-sm-mobile { font-family: 'Playfair Display', serif; font-size: 28px; line-height: 36px; font-weight: 400; }
.font-headline-xl { font-family: 'Playfair Display', serif; font-size: 32px; line-height: 40px; font-weight: 500; }
.font-headline-lg { font-family: 'Playfair Display', serif; font-size: 24px; line-height: 32px; font-weight: 500; }
.font-headline-md { font-family: 'Playfair Display', serif; font-size: 20px; line-height: 28px; font-weight: 600; }
.font-body-xl { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; line-height: 28px; font-weight: 400; }
.font-body-md { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; line-height: 24px; font-weight: 400; }
.font-body-sm { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; line-height: 20px; font-weight: 400; }
.font-label-lg { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 0.04em; font-weight: 600; }
.font-label-md { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; line-height: 16px; letter-spacing: 0.06em; font-weight: 600; }
.font-price-lg { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; line-height: 28px; font-weight: 600; }
.font-price-md { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; line-height: 22px; font-weight: 600; }

/* --- VNESHOME Specific Helpers --- */
.container { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }
@media (min-width: 1024px) { .container { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); } }

.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-on-primary { color: var(--color-on-primary); }
.text-on-secondary { color: var(--color-on-secondary); }
.text-outline { color: var(--color-outline); }
.text-outline-variant { color: var(--color-outline-variant); }
.text-surface-variant { color: var(--color-surface-variant); }
.text-error { color: var(--color-error); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-container-lowest { background-color: var(--color-surface-container-lowest); }
.bg-surface-container-low { background-color: var(--color-surface-container-low); }
.bg-surface-container { background-color: var(--color-surface-container); }
.bg-surface-container-high { background-color: var(--color-surface-container-high); }
.bg-surface-container-highest { background-color: var(--color-surface-container-highest); }

/* Tailwind style - begin */
@keyframes slide {
	0% { transform: translateX(0); }
	50% { transform: translateX(4px); }
	100% { transform: translateX(0); }
}

.break-words {
	overflow-wrap: break-word;
}
.break-all {
	word-break: break-all;
}
.min-w-50 {
	min-width: calc(0.25rem*50);
}
.backdrop-blur {
	backdrop-filter: blur(0.5rem);
}
.backdrop-blur-sm {
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.backdrop-blur-md {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.max-w-1\/2 {
	max-width: 50%;
}
.max-w-xl {
	max-width: 36rem;
}
.max-w-2xl {
	max-width: 42rem;
}
.max-w-\[28rem\] {
	max-width: 28rem;
}
.max-w-\[32rem\] {
	max-width: 32rem;
}
.max-w-\[600px\] {
	max-width: 600px;
}
.max-h-\[85vh\] {
	max-height: 85vh;
}
.-translate-1\/2 {
	transform: translate(-50%, -50%);
}
.-translate-y-1\/2 {
	transform: translatey(-50%);
}
.left-0 {
	left: 0;
}
.left-1\/2 {
	left: 50%;
}
.underline {
	text-decoration: underline;
}
.opacity-0 {
	opacity: 0;
}
.opacity-100 {
	opacity: 100%;
}
.line-clamp-2 {
	display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.line-clamp-3 {
	display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.line-clamp-4 {
	display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.line-clamp-5 {
	display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.transition-all {
	transition: all;
}
.transition-colors {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}
.duration-300 {
	transition-duration: 0.3s;
}
.duration-3000 {
	transition-duration: 3s;
}
.duration-5000 {
	transition-duration: 5s;
}
.p-0 {
	padding: calc(0.25rem*0);
}
.p-1 {
	padding: calc(0.25rem*1);
}
.p-2 {
	padding: calc(0.25rem*2);
}
.p-3 {
	padding: calc(0.25rem*3);
}
.p-4 {
	padding: calc(0.25rem*4);
}
.p-6 {
	padding: calc(0.25rem*6);
}
.p-8 {
	padding: calc(0.25rem*8);
}
.p-10 {
	padding: calc(0.25rem*10);
}
.p-20 {
	padding: calc(0.25rem*20);
}
.pt-2 {
	padding-top: calc(0.25rem*2);
}
.pt-3 {
	padding-top: calc(0.25rem*3);
}
.pt-4 {
	padding-top: calc(0.25rem*4);
}
.pt-7 {
	padding-top: calc(0.25rem*7);
}
.pt-10 {
	padding-top: calc(0.25rem*10);
}
.pt-28 {
	padding-top: calc(0.25rem*28);
}
.pt-36 {
	padding-top: 9rem;
}
.pr-10 {
	padding-right: calc(0.25rem*10);
}
.pb-2 {
	padding-bottom: calc(0.25rem*2);
}
.pb-4 {
	padding-bottom: calc(0.25rem*4);
}
.pb-8 {
	padding-bottom: calc(0.25rem*8);
}
.pb-10 {
	padding-bottom: calc(0.25rem*10);
}
.pb-20 {
	padding-bottom: calc(0.25rem*20);
}
.pb-24 {
	padding-bottom: 6rem;
}
.pl-2 {
	padding-left: calc(0.25rem*2);
}
.pl-3 {
	padding-left: calc(0.25rem*3);
}
.pl-10 {
	padding-left: calc(0.25rem*10);
}
.object-contain {	
	object-fit: contain;
}
.object-cover {	
	object-fit: cover;
}
.z-0 {
	z-index: 0;
}
.z-1 {
	z-index: 1;
}
.z-2 {
	z-index: 2;
}
.z-10 {
	z-index: 10;
}
.z-20 {
	z-index: 20;
}
.z-30 {
	z-index: 30;
}
.z-40 {
	z-index: 40;
}
.z-50 {
	z-index: 50;
}
.z-\[9999\] {
	z-index: 9999;
}
.bg-header {
	background-color: var(--color-bg-header);
}
.bg-primary-dark {
	background-color: var(--color-primary-dark);
}
.bg-primary {
	background-color: var(--color-primary);
}
.bg-primary\/10 {
	background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.bg-primary\/80 {
	background-color: color-mix(in srgb, var(--color-primary) 80%, transparent);
}
.bg-secondary {
	background-color: var(--color-secondary);
}
.bg-white {
	background-color: white;
}
.bg-lightgray {
	background-color: var(--color-lightgray);
}
.bg-black\/50 {
	background-color: color-mix(in srgb, black 50%, transparent);
}
.bg-white\/10 {
	background-color: color-mix(in srgb, white 10%, transparent);
}
.bg-white\/50 {
	background-color: color-mix(in srgb, white 50%, transparent);
}
.bg-white\/80 {
	background-color: color-mix(in srgb, white 80%, transparent);
}
.bg-white\/90 {
	background-color: rgba(255, 255, 255, 0.9);
}
.bg-white\/92 {
	background-color: rgba(255, 255, 255, 0.92);
}
.bg-black\/80 {
	background-color: rgba(0, 0, 0, 0.8);
}
.bg-primary\/50 {
	background-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.bg-transparent {
	background-color: transparent;
}
.flex {
	display: flex;
}
.inline-flex {
	display: inline-flex;
}
.flex-row {
	flex-direction: row;
}
.flex-col {
	flex-direction: column;
}
.flex-shrink-0 {
	flex-shrink: 0;
}
.flex-wrap {
	flex-wrap: wrap;
}
.flex-nowrap {
	flex-wrap: nowrap;
}
.flex-1 {
	flex: 1;
}
.items-start {
	align-items: start;
}
.items-center {
	align-items: center;
}
.items-end {
	align-items: end;
}
.items-stretch {
	align-items: stretch;
}
.w-1\.5 {
	width: 0.375rem;
}
.w-3 {
	width: calc(0.25rem*3);
}
.w-4 {
	width: calc(0.25rem*4);
}
.w-8 {
	width: calc(0.25rem*8);
}
.w-10 {
	width: calc(0.25rem*10);
}
.w-12 {
	width: calc(0.25rem*12);
}
.w-14 {
	width: 3.5rem;
}
.w-15 {
	width: calc(0.25rem*15);
}
.w-18 {
	width: calc(0.25rem*18);
}
.w-20 {
	width: calc(0.25rem*20);
}
.w-30 {
	width: calc(0.25rem*30);
}
.w-44 {
	width: 11rem;
}
.w-50 {
	width: calc(0.25rem*50);
}
.w-full {
	width: 100%;
}
.w-auto {
	width: auto;
}
.w-fit {
	width: fit-content !important;
}
.w-1\/3 {
	width: 33.33%;
}
.w-2\/3 {
	width: 66.67%;
}
.w-1\/4 {
	width: 25%;
}
.w-3\/4 {
	width: 75%;
}
.gap-1 {
	gap: calc(0.25rem*1);
}
.gap-2 {
	gap: calc(0.25rem*2);
}
.gap-3 {
	gap: calc(0.25rem*3);
}
.gap-4 {
	gap: calc(0.25rem*4);
}
.gap-6 {
	gap: calc(0.25rem*6);
}
.gap-8 {
	gap: calc(0.25rem*8);
}
.gap-10 {
	gap: calc(0.25rem*10);
}
.gap-15 {
	gap: calc(0.25rem*15);
}
.gap-y-3 {
  row-gap: calc(0.25rem*3);
}
.gap-y-4 {
  row-gap: calc(0.25rem*4);
}
.gap-y-6 {
  row-gap: calc(0.25rem*10);
}
.gap-y-10 {
  row-gap: calc(0.25rem*10);
}
.h-1\.5 {
	height: 0.375rem;
}
.h-2 {
	height: calc(0.25rem*2);
}
.h-4 {
	height: calc(0.25rem*4);
}
.h-5 {
	height: calc(0.25rem*5);
}
.h-6 {
	height: calc(0.25rem*6);
}
.h-8 {
	height: calc(0.25rem*8);
}
.h-10 {
	height: calc(0.25rem*10);
}
.h-12 {
	height: calc(0.25rem*12);
}
.h-14 {
	height: 3.5rem;
}
.h-15 {
	height: calc(0.25rem*15);
}
.h-18 {
	height: calc(0.25rem*18);
}
.h-20 {
	height: calc(0.25rem*20);
}
.h-100 {
	height: calc(0.25rem*100);
}
.h-full {
	height: 100%;
}
.h-auto {
	height: auto;
}
.h-fit {
	height: fit-content;
}
.h-\[100vh\] {
	height: 100vh;
}
.min-h-12 {
	min-height: calc(0.25rem*12);
}
.min-h-75 {
	min-height: calc(0.25rem*75);
}
.min-h-80 {
	min-height: calc(0.25rem*80);
}
.min-h-100 {
	min-height: calc(0.25rem*100);
}
.min-h-screen {
	min-height: 100vh;
}
.cursor-pointer {
	cursor: pointer;
}
.px-0 {
	padding-left: calc(0.25rem*0);
	padding-right: calc(0.25rem*0);
}
.px-2 {
	padding-left: calc(0.25rem*2);
	padding-right: calc(0.25rem*2);
}
.px-3 {
	padding-left: calc(0.25rem*3);
	padding-right: calc(0.25rem*3);
}
.px-3\.5 {
	padding-left: 0.875rem;
	padding-right: 0.875rem;
}
.px-4 {
	padding-left: calc(0.25rem*4);
	padding-right: calc(0.25rem*4);
}
.px-5 {
	padding-left: calc(0.25rem*5);
	padding-right: calc(0.25rem*5);
}
.px-6 {
	padding-left: calc(0.25rem*6);
	padding-right: calc(0.25rem*6);
}
.px-8 {
	padding-left: calc(0.25rem*8);
	padding-right: calc(0.25rem*8);
}
.py-1\.5 {
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
}
.py-1 {
	padding-top: calc(0.25rem*1);
	padding-bottom: calc(0.25rem*1);
}
.py-2 {
	padding-top: calc(0.25rem*2);
	padding-bottom: calc(0.25rem*2);
}
.py-3 {
	padding-top: calc(0.25rem*3);
	padding-bottom: calc(0.25rem*3);
}
.py-3\.5 {
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
}
.py-4 {
	padding-top: calc(0.25rem*4);
	padding-bottom: calc(0.25rem*4);
}
.py-6 {
	padding-top: calc(0.25rem*6);
	padding-bottom: calc(0.25rem*6);
}
.py-8 {
	padding-top: calc(0.25rem*8);
	padding-bottom: calc(0.25rem*8);
}
.py-10 {
	padding-top: calc(0.25rem*10);
	padding-bottom: calc(0.25rem*10);
}
.py-12 {
	padding-top: calc(0.25rem*12);
	padding-bottom: calc(0.25rem*12);
}
.py-14 {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}
.py-16 {
	padding-top: calc(0.25rem*16);
	padding-bottom: calc(0.25rem*16);
}
.py-18 {
	padding-top: 4.5rem;
	padding-bottom: 4.5rem;
}
.py-20 {
	padding-top: calc(0.25rem*20);
	padding-bottom: calc(0.25rem*20);
}
.py-22 {
	padding-top: 5.5rem;
	padding-bottom: 5.5rem;
}
.py-24 {
	padding-top: 6rem;
	padding-bottom: 6rem;
}
.justify-between {
	justify-content: space-between;
}
.justify-start {
	justify-content: flex-start;
}
.justify-end {
	justify-content: flex-end;
}
.justify-center {
	justify-content: center;
}
.hidden {
	display: none;
}
.block {
	display: block;
}
.grid {
	display: grid;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.col-span-5 {
  grid-column: span 5 / span 5;
}
.col-span-6 {
  grid-column: span 6 / span 6;
}
.col-span-7 {
  grid-column: span 7 / span 7;
}
.col-span-12 {
  grid-column: span 12 / span 12;
}
.fill-primary {
	fill: var(--color-primary);
}
.fill-secondary {
	fill: var(--color-secondary);
}
.fill-white {
	fill: white;
}
.fill-red {
	fill: red;
}
.fill-white\/50 {
	fill: color-mix(in srgb, white 50%, transparent);
}
.text-justify {
	text-align: justify;
}
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-xs {
  font-size: 0.75rem;
	line-height: 1rem;
}
.text-sm {
  font-size: 0.875rem; line-height: 1.25rem;
}
.text-base {
  font-size: 1rem;
	line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
	line-height: 1.75rem;
}
.text-xl {
  font-size: 1.25rem;
	line-height: 1.75rem;
}
.text-2xl {
  font-size: 1.5rem;
	line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13px\] { font-size: 13px; }
.text-\[14px\] { font-size: 14px; }
.text-\[15px\] { font-size: 15px; }
.text-\[16px\] { font-size: 16px; }
.text-\[18px\] { font-size: 18px; }
.text-\[20px\] { font-size: 20px; }
.text-\[22px\] { font-size: 22px; }
.text-\[24px\] { font-size: 24px; }
.text-\[32px\] { font-size: 32px; }
.text-\[40px\] { font-size: 40px; }
.text-\[64px\] { font-size: 64px; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

.text-primary {
	color: var(--color-primary);
}
.text-primary-light {
	color: var(--color-primary-light);
}
.text-secondary {
	color: var(--color-secondary);
}
.text-gray {
	color: gray;
}
.text-lightgray {
	color: var(--color-lightgray);
}
.text-white {
	color: white;
}
.text-white\/50 {
	color: color-mix(in srgb, white 50%, transparent);
}
.text-white\/60 {
	color: rgba(255, 255, 255, 0.6);
}
.text-white\/80 {
	color: rgba(255, 255, 255, 0.8);
}
.text-red-600 {
	color: #dc2626;	
}

.font-normal {
	font-weight: 400;
}
.font-medium {
	font-weight: 500;
}
.font-semibold {
	font-weight: 600;
}
.font-bold {
  font-weight: bold;
}
.m-0 {
  margin: 0;
}
.mb-1 {
	margin-bottom: calc(0.25rem*1);
}
.mb-2 {
	margin-bottom: calc(0.25rem*2);
}
.mb-3 {
	margin-bottom: calc(0.25rem*3);
}
.mb-4 {
	margin-bottom: calc(0.25rem*4);
}
.mb-6 {
	margin-bottom: calc(0.25rem*6);
}
.mb-8 {
	margin-bottom: calc(0.25rem*8);
}
.mb-10 {
	margin-bottom: calc(0.25rem*10);
}
.mb-12 {
	margin-bottom: calc(0.25rem*12);
}
.mb-14 {
	margin-bottom: 3.5rem;
}
.mb-16 {
	margin-bottom: calc(0.25rem*16);
}
.mb-18 {
	margin-bottom: 4.5rem;
}
.mt-1 {
	margin-top: calc(0.25rem*1);
}
.mt-2 {
	margin-top: calc(0.25rem*2);
}
.mt-3 {
	margin-top: calc(0.25rem*3);
}
.mt-4 {
	margin-top: calc(0.25rem*4);
}
.mt-6 {
	margin-top: calc(0.25rem*6);
}
.mt-8 {
	margin-top: calc(0.25rem*8);
}
.mt-10 {
	margin-top: calc(0.25rem*10);
}
.mt-12 {
	margin-top: calc(0.25rem*12);
}
.mt-20 {
	margin-top: calc(0.25rem*20);
}
.mt-24 {
	margin-top: 6rem;
}
.-mt-8 {
	margin-top: -2rem;
}
.mt-auto {
	margin-top: auto;
}
.ml-1 {
	margin-left: calc(0.25rem*1);
}
.ml-2 {
	margin-left: 0.5rem;
}
.ml-3 {
	margin-left: 0.75rem;
}
.mx-auto {
	margin-left: auto;
	margin-right: auto;
}
.uppercase {
	text-transform: uppercase;
}
.capitalize {
	text-transform: capitalize;
}
.space-y-2 > * + * {
  margin-top: calc(0.25rem*2);
}
.space-y-3 > * + * {
  margin-top: calc(0.25rem*3);
}
.space-y-4 > * + * {
  margin-top: calc(0.25rem*4);
}
.space-y-6 > * + * {
  margin-top: calc(0.25rem*6);
}
.space-y-10 > * + * {
  margin-top: calc(0.25rem*10);
}
.aspect-square {
	aspect-ratio: 1/1;
}
.aspect-video, .aspect-16\/9 {
	aspect-ratio: 16/9;
}
.aspect-4\/3, .aspect-4-3, .aspect-\[4\/3\] {
	aspect-ratio: 4/3;
}
.aspect-3\/4 {
	aspect-ratio: 3/4;
}
.aspect-4-5 {
	aspect-ratio: 4/5;
}
.aspect-2\/1 {
	aspect-ratio: 2/1;
}
.bg-center {
	background-position: center;
}
.rounded-sm {
	border-radius: 0.125rem;
}
.rounded {
	border-radius: 0.25rem;
}
.rounded-md {
	border-radius: 0.375rem;
}
.rounded-lg {
	border-radius: 0.5rem;
}
.rounded-xl {
	border-radius: 0.75rem;
}
.rounded-2xl {
	border-radius: 1rem;
}
.rounded-3xl {
	border-radius: 1.5rem;
}
.rounded-full {
	border-radius: 9999px;
}
.rounded-\[99px\] {
	border-radius: 99px;
}
.rounded-tl-2xl {
	border-top-left-radius: 1rem;
}
.rounded-tl-\[99px\] {
	border-top-left-radius: 99px;
}
.rounded-br-2xl {
	border-bottom-right-radius: 1rem;
}
.rounded-br-\[99px\] {
	border-bottom-right-radius: 99px;
}
.border {
	border-style: solid;
	border-width: 1px;
}
.border-b {
	border-bottom-style: solid;
	border-bottom-width: 1px;
}
.border-t {
	border-top-style: solid;
	border-top-width: 1px;
}
.border-2 {
	border-style: solid;
	border-width: 2px;
}
.border-4 {
	border-style: solid;
	border-width: 4px;
}
.border-primary {
	border-color: var(--color-primary);
}
.border-primary\/50 {
	border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.border-primary-light {
	border-color: var(--color-primary-light);
}
.border-secondary {
	border-color: var(--color-secondary);
}
.border-lightgray {
	border-color: lightgray;
}
.border-gray {
	border-color: gray;
}
.border-white {
	border-color: white;
}
.border-white\/10 {
	border-color: color-mix(in srgb, white 10%, transparent);
}
.border-white\/30 {
	border-color: color-mix(in srgb, white 30%, transparent);
}
.border-white\/50 {
	border-color: color-mix(in srgb, white 50%, transparent);
}
.overflow-hidden {
	overflow: hidden;
}
.overflow-x-scroll {
	overflow-x: scroll;
}
.overflow-x-auto {
	overflow-x: auto;
}
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.fixed {
	position: fixed;
}
.sticky {
	position: sticky;
}
.inset-0 {
	inset: 0;
}
.top-0 {
	top: 0;
}
.right-0 {
	right: 0;
}
.bottom-0 {
	bottom: 0;
}
.top-4 {
	top: 1rem;
}
.left-4 {
	left: 1rem;
}
.bottom-4 {
	bottom: 1rem;
}
.right-4 {
	right: calc(0.25rem*4);
}
.right-6 {
	right: calc(0.25rem*6);
}
.top-6 {
	top: calc(0.25rem*6);
}
.top-full {
	top: 100%;
}
.top-1\/2 {
	top: 50%;
}
.bottom-20 {
	bottom: calc(0.25rem*20);
}
.bottom-30 {
	bottom: calc(0.25rem*30);
}
.shadow-sm {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.shadow-md {
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
.shadow-lg {
	box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}
.shadow-xl {
	box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.hover\:border-primary:hover {
	border-color: var(--color-primary);
}
.hover\:border-secondary:hover {
	border-color: var(--color-secondary);
}
.hover\:bg-primary:hover {
	background-color: var(--color-primary);
}
.hover\:bg-primary\/50:hover {
	background-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.hover\:bg-secondary:hover {
	background-color: var(--color-secondary);
}
.hover\:text-white:hover {
	color: white;
}
.hover\:animate-slide:hover {
	animation: var(--animate-slide);
}
.hover\:scale-105:hover {
	transform: scale(105%);
}
.hover\:scale-110:hover {
	transform: scale(110%);
}
.group:hover .group-hover\:scale-105 {
	transform: scale(105%);
}
.group:hover .group-hover\:opacity-100 {
	opacity: 1;
}

/* Mobile ngang - sm */
@media screen and (min-width: 640px) {
  .sm\:flex {
    display: flex;
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Tablet dọc - md */
@media screen and (min-width: 768px) {
  .md\:flex {
    display: flex;
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .md\:gap-x-6 {
    column-gap: calc(0.25rem*6);
  }
  .md\:gap-x-10 {
    column-gap: calc(0.25rem*10);
  }
  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .md\:border-b-0 {
    border-bottom-width: 0;
  }
  .md\:border-t-0 {
    border-top-width: 0;
  }
  .md\:border-r {
    border-right-width: 1px;
    border-right-style: solid;
  }
  .md\:border-l {
    border-left-width: 1px;
    border-left-style: solid;
  }
  .md\:w-1\/3 {
    width: 33.33%;
  }
  .md\:w-2\/3 {
    width: 66.67%;
  }
  .md\:w-12 {
    width: calc(0.25rem*12);
  }
  .md\:h-10 {
    height: calc(0.25rem*10);
  }
  .md\:h-12 {
    height: calc(0.25rem*12);
  }
  .md\:pl-3 {
    padding-left: calc(0.25rem*3);
  }
  .md\:px-10 {
    padding-left: calc(0.25rem*10);
    padding-right: calc(0.25rem*10);
  }
  .md\:items-end {
    align-items: flex-end;
  }
}

/* Tablet ngang - lg */
@media screen and (min-width: 1024px) {
  .lg\:flex {
    display: flex;
  }
  .lg\:hidden {
    display: none;
  }
  .lg\:block {
    display: block;
  }
  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .lg\:gap-x-3 {
    column-gap: calc(0.25rem*3);
  }
  .lg\:gap-x-6 {
    column-gap: calc(0.25rem*6);
  }
  .lg\:gap-x-10 {
    column-gap: calc(0.25rem*10);
  }
  .lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:border-b-0 {
    border-bottom-width: 0;
  }
  .lg\:border-l {
    border-left-width: 1px;
    border-left-style: solid;
  }
  .lg\:border-r {
    border-right-width: 1px;
    border-right-style: solid;
  }
  .lg\:border-gray {
    border-color: gray;
  }
  .lg\:border-lightgray {
    border-color: lightgray;
  }
  .lg\:-order-1 {
    order: -1;
  }
  .lg\:p-10 {
    padding: calc(0.25rem*10);
  }
  .lg\:pr-10 {
    padding-right: calc(0.25rem*10);
  }
  .lg\:pl-4 {
    padding-left: 1rem;
  }
  .lg\:pl-6 {
    padding-left: calc(0.25rem*6);
  }
  .lg\:pl-10 {
    padding-left: calc(0.25rem*10);
  }
  .lg\:pt-0 {
    padding-top: 0;
  }
  .lg\:text-right {
    text-align: right;
  }
  .lg\:absolute {
    position: absolute;
  }
  .lg\:-top-30 {
    top: calc(-0.25rem*30);
  }
  .lg\:aspect-video {
    aspect-ratio: 16/9;
  }
  .lg\:max-w-1\/2 {
    max-width: 50%;
  }
}

/* Desktop - xl */
@media screen and (min-width: 1280px) {
  .xl\:flex {
    display: flex;
  }
  .xl\:hidden {
    display: none;
  }
  .xl\:gap-x-6 {
    column-gap: calc(0.25rem*6);
  }
  .xl\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .xl\:text-6xl {
    font-size: 3.75rem;
    line-height: 4rem;
  }
  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xl\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .xl\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .xl\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .xl\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .xl\:-order-1 {
    order: -1;
  }
  .xl\:px-4 {
    padding-left: calc(0.25rem*4);
    padding-right: calc(0.25rem*4);
  }
}

/* Tailwind style - end */



/* ============================================
   COMPONENT STYLES
   ============================================ */

/* --- Announcement Bar --- */
.announcement-bar {
  background-color: var(--color-primary-container);
  color: var(--color-surface-container-lowest);
  padding: 0.5rem var(--margin-mobile);
  text-align: center;
}
@media (min-width: 1024px) {
  .announcement-bar { padding: 0.5rem var(--margin-desktop); }
}

/* --- Header Wrapper & Sticky Header --- */
.site-header-wrapper {
  position: relative;
  width: 100%;
}
.site-header {
  position: relative;
  width: 100%;
  z-index: 40;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-fixed {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  background: rgba(255,255,255,0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  animation: headerSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes headerSlideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
body.admin-bar .site-header.is-fixed {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .site-header.is-fixed {
    top: 46px;
  }
}
.header-inner {
  height: 5rem;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--margin-mobile);
  gap: 1rem;
}
@media (min-width: 1024px) {
  .header-inner { padding: 0 var(--margin-desktop); }
}
.site-logo { display: flex; align-items: center; gap: 0.5rem; }
.site-logo img { height: 2rem; width: auto; object-fit: contain; }
.site-logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 24px; line-height: 32px; font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-on-surface);
  margin-left: 0.25rem;
}
.main-nav { display: none; align-items: center; gap: var(--space-xl); }
@media (min-width: 1200px) { .main-nav { display: flex; } }
.main-nav a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; line-height: 20px;
  letter-spacing: 0.04em; font-weight: 600;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  padding: 0.5rem 0;
  transition: color var(--transition-fast);
}
.main-nav a:hover, .main-nav a.active { color: var(--color-on-surface); }
.main-nav .sale-badge {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-default);
  font-size: 10px; font-weight: 600;
  letter-spacing: normal;
}
.header-actions { display: flex; align-items: center; gap: var(--space-md); }
.header-action-btn {
  display: flex; align-items: center; gap: 0.25rem;
  color: var(--color-on-surface-variant);
  padding: 0.375rem;
  transition: color var(--transition-fast);
}
.header-action-btn:hover { color: var(--color-on-surface); }
.cart-count {
  width: 1rem; height: 1rem;
  background: var(--color-secondary);
  color: var(--color-on-secondary);
  font-size: 10px; font-weight: 700;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* --- Mobile Menu --- */
.mobile-menu-toggle { display: flex; padding: 0.375rem; color: var(--color-on-surface); }
@media (min-width: 1200px) { .mobile-menu-toggle { display: none; } }
.mobile-menu {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-surface-container-lowest);
  z-index: 105; padding: 5rem var(--margin-mobile) var(--margin-mobile);
  display: none; flex-direction: column; gap: 0;
  overflow-y: auto;
}
.mobile-menu.active { display: flex; }
.mobile-menu a {
  display: block; padding: 1rem 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-on-surface);
  border-bottom: 1px solid var(--color-surface-container-high);
}
.mobile-menu-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-on-surface);
}

/* --- Hero Section --- */
.hero-section {
  position: relative; overflow: hidden;
  background-color: var(--color-surface-container-low);
  min-height: 620px;
  display: flex; align-items: center;
}
@media (min-width: 1024px) { .hero-section { min-height: 760px; } }
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 1s ease;
  transform: scale(1.02);
}
.hero-section:hover .hero-bg { transform: scale(1); }
.hero-overlay-lr {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(251,249,246,0.6), transparent);
}
@media (min-width: 1024px) { .hero-overlay-lr { width: 60%; } }
.hero-overlay-bt { position: absolute; inset: 0; background: linear-gradient(to top, var(--color-surface), transparent, transparent); }
@media (min-width: 1024px) { .hero-overlay-bt { display: none; } }
.hero-content { position: relative; z-index: 10; max-width: 640px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgba(251,249,246,0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  margin-bottom: var(--space-md);
}
.hero-badge-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-secondary); }
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 36px; line-height: 44px;
  letter-spacing: -0.01em;
  color: var(--color-on-surface);
  margin-bottom: var(--space-md);
}
@media (min-width: 1024px) {
  .hero-title { font-size: 56px; line-height: 64px; letter-spacing: -0.02em; }
}
.hero-subtitle {
  font-size: 18px; line-height: 28px;
  color: var(--color-on-surface-variant);
  max-width: 32rem;
  margin-bottom: var(--space-2xl);
}
.hero-cta-group { display: flex; flex-direction: column; gap: var(--space-sm); }
@media (min-width: 640px) { .hero-cta-group { flex-direction: row; align-items: center; } }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.875rem var(--space-xl);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; line-height: 20px;
  letter-spacing: 0.04em; font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--radius-default);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.btn-primary:hover { background: var(--color-on-surface-variant); }
.btn-secondary { background: rgba(255,255,255,0.9); color: var(--color-on-surface); box-shadow: 0 1px 2px rgba(0,0,0,0.05); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.btn-secondary:hover { background: var(--color-surface); }
.btn-accent { background: var(--color-secondary); color: var(--color-on-secondary); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.btn-accent:hover { background: #7a2f16; }
.btn-outline { background: transparent; border: 1px solid var(--color-outline-variant); color: var(--color-on-surface); }
.btn-outline:hover { border-color: var(--color-on-surface); }
.btn-sm { padding: 0.5rem 1rem; font-size: 12px; }

/* --- Section Headers --- */
.section-eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.06em; font-weight: 600;
  text-transform: uppercase;
  color: var(--color-outline);
  display: block; margin-bottom: 0.25rem;
}
.section-eyebrow.accent { color: var(--color-secondary); }
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: 32px; line-height: 40px;
  font-weight: 500;
  color: var(--color-on-surface);
}
.section-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; line-height: 20px;
  letter-spacing: 0.04em; font-weight: 600;
  text-transform: uppercase;
  color: var(--color-on-surface);
  display: inline-flex; align-items: center; gap: 0.25rem;
  transition: color var(--transition-fast);
}
.section-link:hover { color: var(--color-secondary); }
.section-link .material-symbols-outlined { transition: transform var(--transition-normal); }
.section-link:hover .material-symbols-outlined { transform: translateX(0.25rem); }

/* --- Product Card --- */
.product-card {
  display: flex; flex-direction: column;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-default);
  padding: 0.75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all var(--transition-normal);
  width: 100%;
  min-width: 0;
}
.product-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.product-card-image {
  position: relative;
  width: 100%; aspect-ratio: 1/1;
  background: var(--color-surface-container);
  overflow: hidden;
  border-radius: var(--radius-default);
  margin-bottom: 0.75rem;
}
.product-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.product-card:hover .product-card-image img { transform: scale(1.05); }
.product-card-badge {
  position: absolute; top: 0.625rem; left: 0.625rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-default);
  z-index: 2;
}
.product-card-badge.best-seller { background: var(--color-secondary); color: var(--color-on-secondary); }
.product-card-badge.free-shipping { background: #2d6a2e; color: white; }
.product-card-badge.limited { background: var(--color-on-surface-variant); color: white; }
.product-card-wishlist {
  position: absolute; top: 0.625rem; right: 0.625rem;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-on-surface);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all var(--transition-fast);
  z-index: 2;
  cursor: pointer;
}
.product-card-wishlist:hover { color: var(--color-secondary); transform: scale(1.1); }
.product-card-quick-view {
  position: absolute;
  bottom: 0.625rem; left: 0.625rem; right: 0.625rem;
  background: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--color-on-surface);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.5rem;
  border-radius: var(--radius-default);
  text-align: center;
  opacity: 0; transform: translateY(0.5rem);
  transition: all var(--transition-fast);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  z-index: 2;
  cursor: pointer;
}
.product-card:hover .product-card-quick-view {
  opacity: 1; transform: translateY(0);
}
.product-card-quick-view:hover { background: var(--color-primary); color: var(--color-on-primary); }
.product-card-rating { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.25rem; }
.product-card-rating .stars { display: flex; color: var(--color-secondary-container); }
.product-card-rating .stars .material-symbols-outlined { font-size: 15px; color: var(--color-secondary); }
.product-card-rating .stars .material-symbols-outlined.empty { color: var(--color-outline-variant); }
.product-card-rating .count { font-size: 13px; color: var(--color-on-surface-variant); font-weight: 500; }
.product-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; line-height: 28px; font-weight: 600;
  color: var(--color-on-surface);
  margin-bottom: 0.25rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--transition-fast);
}
.product-card:hover .product-card-title { color: var(--color-secondary); }
.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.75rem;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.product-card-price {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.product-card-price .original {
  font-size: 13px;
  color: var(--color-outline);
  text-decoration: line-through;
  margin-left: 0.35rem;
  font-weight: 400;
}
.product-card-price .sale {
  color: var(--color-secondary);
}

/* Product Card Action / Add to Cart */
.product-card-action {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.product-card-action a.button,
.product-card-action a.add_to_cart_button,
.product-card-action button.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  padding: 0.45rem 1rem !important;
  height: 36px !important;
  line-height: normal !important;
  background: var(--color-primary, #000000) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
.product-card-action a.button:hover,
.product-card-action a.add_to_cart_button:hover {
  background: var(--color-secondary, #98462b) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(152, 70, 43, 0.25) !important;
}
.product-card-action a.button.loading {
  opacity: 0.7 !important;
  padding-right: 2rem !important;
}
.product-card-action a.button.loading::after {
  content: "" !important;
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  margin-top: -6px !important;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: spin 0.6s linear infinite !important;
}
.product-card-action a.button.added::after {
  content: " ✓" !important;
  margin-left: 0.25rem !important;
}
.product-card-action a.added_to_cart {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--color-secondary, #98462b) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  margin-left: 0.5rem !important;
  white-space: nowrap !important;
}
.color-swatches { display: flex; align-items: center; gap: 0.375rem; }
.color-swatch {
  width: 0.875rem; height: 0.875rem;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.color-swatch:hover { transform: scale(1.2); }
.color-swatch.active { outline: 1px solid var(--color-primary); outline-offset: 2px; }
.product-card-info {
  font-size: 12px; color: var(--color-on-surface-variant); margin-top: 0.125rem;
}
.product-card-status {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em;
}
.product-card-status.in-stock { color: #2d6a2e; }
.product-card-status.free-delivery { color: var(--color-secondary); }

/* --- Category Card --- */
.category-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-surface-container);
  border-radius: var(--radius-default);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all var(--transition-slow);
}
.category-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.category-card-image {
  position: relative;
  width: 100%; aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--color-surface-container-high);
}
.category-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition-slower);
}
.category-card:hover .category-card-image img { transform: scale(1.05); }
.category-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2), transparent);
}
.category-card-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--space-lg);
  color: var(--color-on-primary);
}
.category-card-content .eyebrow {
  font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  color: var(--color-surface-variant);
  margin-bottom: 0.25rem;
}
.category-card-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px; line-height: 32px; font-weight: 500;
  margin-bottom: 0.25rem;
}
.category-card-content .desc {
  font-size: 13px; color: var(--color-surface-variant);
  margin-bottom: var(--space-md); opacity: 0.9;
}
.category-card-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: white;
  transition: color var(--transition-fast);
}
.category-card-link:hover { color: var(--color-secondary-fixed); }
.category-card-link .material-symbols-outlined {
  font-size: 16px;
  transition: transform var(--transition-normal);
}
.category-card:hover .category-card-link .material-symbols-outlined {
  transform: translateX(0.25rem);
}

/* --- Product Card Variant 2 / Fan Card (Minimal Compact) --- */
.product-card-2,
.fan-card {
  background: var(--color-surface-container);
  border-radius: var(--radius-default);
  padding: 0.75rem;
  transition: background-color var(--transition-fast);
}
.product-card-2:hover,
.fan-card:hover { background: var(--color-surface-container-high); }
.product-card-2 .fan-card-image,
.fan-card-image {
  aspect-ratio: 1/1;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-default);
  overflow: hidden; margin-bottom: 0.5rem;
}
.product-card-2 .fan-card-image img,
.fan-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition-normal);
}
.product-card-2 .fan-card-image img:hover,
.fan-card-image img:hover { transform: scale(1.05); }
.product-card-2 .size-label,
.fan-card .size-label {
  font-size: 12px; letter-spacing: 0.06em; font-weight: 600;
  text-transform: uppercase; color: var(--color-outline);
  margin-bottom: 0.125rem;
}
.product-card-2 h4,
.fan-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 600;
  color: var(--color-on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 0.25rem;
}
.product-card-2 h4 a,
.fan-card h4 a {
  color: inherit;
  transition: color var(--transition-fast);
}
.product-card-2 h4 a:hover,
.fan-card h4 a:hover {
  color: var(--color-secondary);
}
.product-card-2 .fan-card-footer,
.fan-card-footer { display: flex; align-items: center; justify-content: space-between; }
.product-card-2 .fan-card-price,
.fan-card-price {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px; font-weight: 600;
  color: var(--color-on-surface);
}
.product-card-2 .fan-card-add,
.fan-card-add {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-secondary);
  cursor: pointer;
}
.product-card-2 .fan-card-add:hover,
.fan-card-add:hover { text-decoration: underline; }

/* --- Best Seller Card --- */
.bestseller-card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-default);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all var(--transition-normal);
}
.bestseller-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.bestseller-card-image {
  position: relative; aspect-ratio: 1/1;
  background: var(--color-surface-container);
  overflow: hidden;
}
.bestseller-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition-slow);
}
.bestseller-card:hover .bestseller-card-image img { transform: scale(1.05); }
.bestseller-card-body { padding: var(--space-md); }
.bestseller-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 600;
  color: var(--color-on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 0.25rem;
}
.bestseller-card-subtitle {
  font-size: 13px; color: var(--color-on-surface-variant); margin-bottom: 0.5rem;
}
.bestseller-card-footer { display: flex; align-items: center; justify-content: space-between; }

/* --- Review Card --- */
.review-card {
  display: flex; flex-direction: column;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-default);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.review-card-image {
  aspect-ratio: 4/3;
  background: var(--color-surface-container);
  overflow: hidden;
}
.review-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transition-slow);
}
.review-card-image:hover img { transform: scale(1.05); }
.review-card-body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.review-card .stars { display: flex; color: var(--color-secondary); margin-bottom: 0.5rem; }
.review-card .stars .material-symbols-outlined { font-size: 16px; }
.review-card .quote {
  font-size: 15px; line-height: 24px;
  font-style: italic;
  color: var(--color-on-surface);
  margin-bottom: var(--space-md);
}
.review-card-author { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-xs); }
.review-card-author .name { font-size: 14px; font-weight: 600; color: var(--color-on-surface); }
.review-card-author .location { font-size: 13px; color: var(--color-outline); }
.verified-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 11px; font-weight: 600;
  color: var(--color-tertiary-fixed-dim);
  background: var(--color-tertiary-container);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-lg);
}

/* --- USP Section --- */
.usp-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: var(--space-md);
  border-radius: var(--radius-default);
  background: var(--color-surface-container);
}
.usp-icon {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--color-surface-container-lowest);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-secondary);
  margin-bottom: var(--space-sm);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.usp-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 600;
  color: var(--color-on-surface);
  margin-bottom: 0.25rem;
}
.usp-card p { font-size: 13px; color: var(--color-on-surface-variant); }

/* --- Newsletter Section --- */
.newsletter-section {
  background: var(--color-surface-container-high);
  padding: 5rem 0;
  margin-bottom: 0 !important;
}
.newsletter-inner { max-width: 800px; margin: 0 auto; text-align: center; padding: 0 var(--margin-mobile); }
.newsletter-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 28rem; margin: 0 auto; }
@media (min-width: 640px) { .newsletter-form { flex-direction: row; } }
.newsletter-input {
  flex: 1; height: 3rem;
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  padding: 0 1rem;
  font-size: 13px;
  border-radius: var(--radius-default);
  border: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
  transition: background var(--transition-fast);
}
.newsletter-input:focus { background: var(--color-surface); outline: none; }
.newsletter-btn {
  height: 3rem; padding: 0 var(--space-xl);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-radius: var(--radius-default);
  border: none; cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  transition: background var(--transition-fast);
}
.newsletter-btn:hover { background: var(--color-secondary); }

/* --- Footer --- */
.site-footer {
  background: var(--color-surface-container-low);
  color: var(--color-on-surface);
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-2xl);
  margin-top: 0 !important;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter-desktop);
  margin-bottom: var(--space-3xl);
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-col h4 {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 600;
  margin-bottom: var(--space-lg);
}
.footer-col ul li { margin-bottom: var(--space-xs); }
.footer-col ul li a {
  font-size: 15px; color: var(--color-on-surface-variant);
  transition: color var(--transition-fast);
}
.footer-col ul li a:hover { color: var(--color-on-surface); }
.footer-subscribe-form { display: flex; }
.footer-subscribe-input {
  flex: 1; height: 3rem;
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  padding: 0 var(--space-md);
  font-size: 13px;
  border: none;
  border-radius: var(--radius-full) 0 0 var(--radius-full);
}
.footer-subscribe-input:focus { outline: none; }
.footer-subscribe-btn {
  height: 3rem;
  padding: 0 var(--space-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: none; cursor: pointer;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  transition: background var(--transition-fast);
}
.footer-subscribe-btn:hover { background: var(--color-primary-container); }
.footer-social { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.footer-social span { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-outline); }
.footer-social a { font-size: 13px; color: var(--color-on-surface-variant); transition: color var(--transition-fast); }
.footer-social a:hover { color: var(--color-on-surface); }
.footer-social .sep { opacity: 0.3; }
.footer-bottom {
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(206,197,189,0.3);
  display: flex; flex-direction: column;
  align-items: center; gap: var(--space-lg);
}
@media (min-width: 1024px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.payment-icons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md); }
.payment-icon {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-outline);
  background: var(--color-surface-container);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-lg);
}
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md); font-size: 13px; color: var(--color-on-surface-variant); }
.footer-links a:hover { color: var(--color-on-surface); }
.footer-links .sep { opacity: 0.3; }
.footer-copyright { font-size: 13px; color: var(--color-outline); text-align: center; }
@media (min-width: 1024px) { .footer-copyright { text-align: right; } }
.footer-contact { padding-top: var(--space-xs); font-size: 13px; color: var(--color-outline); }

/* --- Shop The Look --- */
.shop-look-card {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-sm); background: var(--color-surface-container-lowest);
  border-radius: var(--radius-default);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: box-shadow var(--transition-normal);
}
.shop-look-card:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.shop-look-card img { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-default); object-fit: cover; }
.shop-look-card .title { font-size: 14px; font-weight: 600; color: var(--color-on-surface); }
.shop-look-card .price { font-size: 13px; color: var(--color-outline); }

/* --- Swiper overrides --- */
.swiper { width: 100%; }
.swiper-button-prev, .swiper-button-next {
  width: 2.5rem !important; height: 2.5rem !important;
  border-radius: 50%;
  background: var(--color-surface-container-lowest);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  color: var(--color-on-surface) !important;
}
.swiper-button-prev::after, .swiper-button-next::after { font-size: 14px !important; font-weight: 700; }
.swiper-button-prev:hover, .swiper-button-next:hover {
  background: var(--color-primary);
  color: var(--color-on-primary) !important;
}
.swiper-pagination-bullet { background: var(--color-outline-variant) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: var(--color-secondary) !important; }

/* --- WooCommerce Overrides --- */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter-desktop); }
@media (min-width: 768px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); } }
.woocommerce ul.products li.product { margin: 0 !important; padding: 0 !important; width: 100% !important; float: none !important; }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin-bottom: var(--space-lg); }
.woocommerce nav.woocommerce-pagination ul { border: none; display: flex; gap: 0.5rem; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  padding: 0.5rem 1rem; border-radius: var(--radius-default);
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  font-size: 14px; font-weight: 600;
  border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-primary); color: var(--color-on-primary);
}
.woocommerce .price { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; color: var(--color-on-surface) !important; }
.woocommerce .price del { color: var(--color-outline) !important; }
.woocommerce .price ins { text-decoration: none; color: var(--color-secondary) !important; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  border-radius: var(--radius-default) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 0.75rem 1.5rem !important;
  border: none !important;
  transition: background var(--transition-fast) !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover {
  background: var(--color-secondary) !important;
}
.woocommerce .quantity .qty {
  width: 3rem; text-align: center;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-default);
  padding: 0.5rem;
}
.woocommerce div.product div.images { margin-bottom: var(--space-2xl); }
.woocommerce div.product div.summary { margin-bottom: var(--space-2xl); }
.woocommerce .woocommerce-tabs { margin-top: var(--space-2xl); }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--color-secondary) !important;
}
.woocommerce-message::before { color: var(--color-secondary) !important; }

/* --- Single Product --- */
.single-product-layout { display: grid; grid-template-columns: 1fr; gap: var(--gutter-desktop); }
@media (min-width: 1024px) { .single-product-layout { grid-template-columns: 1fr 1fr; } }
.product-gallery { position: sticky; top: 7rem; }
.product-gallery-main { aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius-default); background: var(--color-surface-container); margin-bottom: var(--space-sm); }
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery-thumbs { display: flex; gap: var(--space-xs); }
.product-gallery-thumb {
  width: 5rem; height: 5rem;
  border-radius: var(--radius-default);
  overflow: hidden; cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition-fast);
}
.product-gallery-thumb.active { border-color: var(--color-primary); }
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-details .product-title {
  font-family: 'Playfair Display', serif;
  font-size: 32px; line-height: 40px; font-weight: 500;
  color: var(--color-on-surface);
  margin-bottom: var(--space-sm);
}
.product-details .product-price-large {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 28px; font-weight: 600;
  color: var(--color-on-surface);
  margin-bottom: var(--space-lg);
}

/* --- Accordion --- */
.accordion-item { border-bottom: 1px solid var(--color-surface-container-high); }
.accordion-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md) 0;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 500; font-style: italic;
  color: var(--color-on-surface);
}
.accordion-header .material-symbols-outlined { transition: transform var(--transition-normal); }
.accordion-item.active .accordion-header .material-symbols-outlined { transform: rotate(180deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); }
.accordion-item.active .accordion-body { max-height: 500px; }
.accordion-body-inner { padding-bottom: var(--space-md); font-size: 15px; color: var(--color-on-surface-variant); line-height: 1.6; }


/* --- Material Symbols --- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  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;
}

/* Star filled */
.star-filled { font-variation-settings: 'FILL' 1; }

/* ============================================
   ARCHIVE / SHOP PAGE
   ============================================ */

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: var(--color-on-surface-variant);
}
.breadcrumb a { color: var(--color-on-surface-variant); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--color-secondary); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: var(--color-on-surface); font-weight: 500; }

/* Archive Header */
.archive-header .section-title { margin-bottom: 0.5rem; }
.archive-desc {
  font-size: 15px;
  color: var(--color-on-surface-variant);
  max-width: 36rem;
  line-height: 1.6;
}

/* Category Filter Pills */
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.category-pills .pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-on-surface-variant);
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-outline-variant);
  transition: all 0.2s;
  cursor: pointer;
}
.category-pills .pill:hover {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
  border-color: var(--color-outline);
}
.category-pills .pill.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

/* Archive Toolbar */
.archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-count {
  font-size: 14px;
  color: var(--color-on-surface-variant);
  font-weight: 500;
}

/* Product Grid */
.product-grid {
  display: grid;
  gap: var(--gutter-desktop, 1.5rem);
}
.product-grid:not([class*="grid-cols"]) {
  grid-template-columns: repeat(4, 1fr);
}
.product-grid .product-card {
  width: 100%;
}

/* Pagination */
.archive-pagination { text-align: center; }
.archive-pagination .woocommerce-pagination {
  display: flex;
  justify-content: center;
}
.archive-pagination .page-numbers {
  display: flex;
  gap: 0.375rem;
  list-style: none;
  padding: 0;
}
.archive-pagination .page-numbers li a,
.archive-pagination .page-numbers li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface-variant);
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  transition: all 0.2s;
}
.archive-pagination .page-numbers li a:hover {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
}
.archive-pagination .page-numbers li span.current {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

/* Empty State */
.archive-empty {
  text-align: center;
  padding: 6rem 2rem;
  color: var(--color-on-surface-variant);
}
.archive-empty .material-symbols-outlined {
  font-size: 64px;
  opacity: 0.3;
  margin-bottom: 1rem;
}
.archive-empty h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: var(--color-on-surface);
  margin-bottom: 0.5rem;
}
.archive-empty p {
  font-size: 15px;
  margin-bottom: 2rem;
}

/* ============================================
   RESPONSIVE - ARCHIVE GRID
   ============================================ */
@media (max-width: 1024px) {
  .product-grid:not([class*="grid-cols"]),
  .woocommerce ul.products,
  .woocommerce .products,
  ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .product-grid:not([class*="grid-cols"]),
  .woocommerce ul.products,
  .woocommerce .products,
  ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md, 1rem);
  }
}
@media (max-width: 480px) {
  .product-grid:not([class*="grid-cols"]),
  .woocommerce ul.products,
  .woocommerce .products,
  ul.products {
    grid-template-columns: 1fr;
    gap: var(--space-sm, 0.75rem);
  }
}

/* ============================================
   WOOCOMMERCE - CART, CHECKOUT & NOTICES
   ============================================ */

/* WooCommerce Messages & Alerts */
.woocommerce-notices-wrapper {
  width: 100%;
  margin-bottom: 2rem;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.125rem 1.5rem !important;
  border-radius: var(--radius-default, 4px) !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: 2rem !important;
  list-style: none !important;
  border-left: 4px solid transparent !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.woocommerce-message {
  background: #f2f7f3 !important;
  color: #1e4620 !important;
  border-left-color: #2e7d32 !important;
}
.woocommerce-info {
  background: #f7f5f2 !important;
  color: #2c2926 !important;
  border-left-color: var(--color-secondary, #98462b) !important;
}
.woocommerce-error {
  background: #fdf2f2 !important;
  color: #991b1b !important;
  border-left-color: #dc2626 !important;
}
.woocommerce-message a.button,
.woocommerce-info a.button {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--color-primary, #000) !important;
  color: #fff !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  transition: background 0.2s ease !important;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
  background: var(--color-secondary, #98462b) !important;
}

/* Cart Container & Layout */
.vneshome-cart-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}
.vneshome-cart-header {
  margin-bottom: 2.5rem;
}
.vneshome-cart-header .section-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--color-on-surface, #1b1c1a);
  letter-spacing: -0.01em;
}

.vneshome-cart-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
}
.vneshome-cart-main {
  min-width: 0;
}
.vneshome-cart-collaterals {
  min-width: 0;
}

/* Cart Form & Table */
.woocommerce-cart-form {
  width: 100%;
}
table.shop_table.cart,
table.woocommerce-cart-form__contents {
  width: 100% !important;
  display: table !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--color-surface-container-lowest, #ffffff) !important;
  border: 1px solid var(--color-surface-variant, #e4e2df) !important;
  border-radius: var(--radius-default, 4px) !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
}

table.shop_table.cart thead,
table.woocommerce-cart-form__contents thead {
  display: table-header-group !important;
}
table.shop_table.cart tbody,
table.woocommerce-cart-form__contents tbody {
  display: table-row-group !important;
}
table.shop_table.cart tr,
table.woocommerce-cart-form__contents tr {
  display: table-row !important;
}

table.shop_table.cart thead th,
table.woocommerce-cart-form__contents thead th {
  display: table-cell !important;
  background: var(--color-surface-container-high, #f5f3f0) !important;
  padding: 1.125rem 1rem !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--color-on-surface-variant, #4b4640) !important;
  border-bottom: 1px solid var(--color-surface-variant, #e4e2df) !important;
  text-align: left !important;
}
table.shop_table.cart thead th.product-subtotal {
  text-align: right !important;
}

table.shop_table.cart tbody td,
table.woocommerce-cart-form__contents tbody td {
  display: table-cell !important;
  padding: 1.25rem 1rem !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--color-surface-variant, #f0ede8) !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
}
table.shop_table.cart tbody tr:last-child td {
  border-bottom: none !important;
}

/* Column Widths & Alignments */
td.product-remove,
th.product-remove {
  width: 44px !important;
  text-align: center !important;
}
td.product-remove a.remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  color: var(--color-outline, #7d766f) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
td.product-remove a.remove:hover {
  background: #fcece8 !important;
  color: var(--color-secondary, #98462b) !important;
}

td.product-thumbnail,
th.product-thumbnail {
  width: 90px !important;
  max-width: 90px !important;
}
td.product-thumbnail img,
.woocommerce-cart-form__cart-item .product-thumbnail img,
.product-thumbnail img {
  width: 76px !important;
  height: 76px !important;
  min-width: 76px !important;
  min-height: 76px !important;
  max-width: 76px !important;
  max-height: 76px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  display: block !important;
  border: 1px solid var(--color-surface-variant, #eae8e5) !important;
}

td.product-name {
  padding-left: 1.25rem !important;
}
td.product-name a.cart-item-title,
td.product-name a:not(.remove) {
  font-family: var(--font-display, 'Playfair Display', serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-on-surface, #1b1c1a) !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
  display: inline-block !important;
  transition: color 0.2s ease !important;
}
td.product-name a.cart-item-title:hover,
td.product-name a:not(.remove):hover {
  color: var(--color-secondary, #98462b) !important;
}

td.product-price,
td.product-subtotal {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--color-on-surface, #1b1c1a) !important;
  white-space: nowrap !important;
}
td.product-subtotal {
  text-align: right !important;
  font-weight: 600 !important;
  color: var(--color-secondary, #98462b) !important;
}

/* Quantity Field */
td.product-quantity {
  width: 130px !important;
}
td.product-quantity .quantity {
  display: inline-flex !important;
  align-items: center !important;
}
td.product-quantity .quantity input.qty {
  width: 64px !important;
  height: 42px !important;
  text-align: center !important;
  border: 1px solid var(--color-outline-variant, #cec5bd) !important;
  border-radius: 3px !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--color-on-surface, #1b1c1a) !important;
  background: var(--color-surface, #fbf9f6) !important;
}
td.product-quantity .quantity input.qty:focus {
  outline: none !important;
  border-color: var(--color-primary, #000) !important;
}

/* Actions Row (Coupon & Update Cart) */
table.shop_table.cart td.actions {
  padding: 1.5rem 1.25rem !important;
  background: var(--color-surface-container-lowest, #ffffff) !important;
}
.cart-actions-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
}
.cart-actions-bar .coupon {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.cart-actions-bar .coupon input.input-text {
  height: 44px !important;
  padding: 0 1rem !important;
  border: 1px solid var(--color-outline-variant, #cec5bd) !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  width: 200px !important;
  background: var(--color-surface, #fbf9f6) !important;
  color: var(--color-on-surface, #1b1c1a) !important;
}
.cart-actions-bar .coupon input.input-text:focus {
  outline: none !important;
  border-color: var(--color-primary, #000) !important;
}

.btn-apply-coupon,
.btn-update-cart,
button[name="apply_coupon"],
button[name="update_cart"] {
  height: 44px !important;
  padding: 0 1.5rem !important;
  border-radius: 3px !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-apply-coupon,
button[name="apply_coupon"] {
  background: transparent !important;
  color: var(--color-on-surface, #1b1c1a) !important;
  border: 1px solid var(--color-primary, #000) !important;
}
.btn-apply-coupon:hover,
button[name="apply_coupon"]:hover {
  background: var(--color-primary, #000) !important;
  color: #ffffff !important;
}
.btn-update-cart,
button[name="update_cart"] {
  background: var(--color-surface-container-high, #f5f3f0) !important;
  color: var(--color-on-surface, #1b1c1a) !important;
  border: 1px solid var(--color-surface-variant, #dcd8d3) !important;
}
.btn-update-cart:hover,
button[name="update_cart"]:hover {
  background: var(--color-surface-variant, #e4e2df) !important;
  color: #000000 !important;
}

/* Cart Collaterals & Totals */
.cart-collaterals .cart_totals {
  background: var(--color-surface-container-lowest, #ffffff) !important;
  border: 1px solid var(--color-surface-variant, #e4e2df) !important;
  border-radius: var(--radius-default, 4px) !important;
  padding: 2rem !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
  width: 100% !important;
  float: none !important;
}
.cart-collaterals .cart_totals h2 {
  font-family: var(--font-display, 'Playfair Display', serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--color-surface-variant, #e4e2df) !important;
  color: var(--color-on-surface, #1b1c1a) !important;
  letter-spacing: -0.01em !important;
}
.cart-collaterals .cart_totals table.shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
  border: none !important;
  margin-bottom: 0 !important;
}
.cart-collaterals .cart_totals table.shop_table th,
.cart-collaterals .cart_totals table.shop_table td {
  padding: 0.875rem 0 !important;
  border-bottom: 1px solid var(--color-surface-variant, #f0ede8) !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 14px !important;
  vertical-align: middle !important;
}
.cart-collaterals .cart_totals table.shop_table th {
  text-align: left !important;
  font-weight: 500 !important;
  color: var(--color-on-surface-variant, #4b4640) !important;
  width: 40% !important;
}
.cart-collaterals .cart_totals table.shop_table td {
  text-align: right !important;
  font-weight: 600 !important;
  color: var(--color-on-surface, #1b1c1a) !important;
}
.cart-collaterals .cart_totals table.shop_table tr.order-total th,
.cart-collaterals .cart_totals table.shop_table tr.order-total td {
  border-bottom: none !important;
  padding-top: 1.25rem !important;
  font-size: 16px !important;
}
.cart-collaterals .cart_totals table.shop_table tr.order-total td strong {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--color-secondary, #98462b) !important;
}

/* Proceed to Checkout Button */
.wc-proceed-to-checkout {
  padding: 0 !important;
}
.wc-proceed-to-checkout a.checkout-button,
a.checkout-button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: var(--color-primary, #000000) !important;
  color: #ffffff !important;
  padding: 1.125rem 1.5rem !important;
  border-radius: 3px !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  margin-top: 1.5rem !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06) !important;
}
.wc-proceed-to-checkout a.checkout-button:hover,
a.checkout-button:hover {
  background: var(--color-secondary, #98462b) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(152,70,43,0.2) !important;
}

/* Responsive Cart Table on Mobile */
@media (max-width: 991px) {
  .vneshome-cart-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 767px) {
  table.shop_table.cart thead,
  table.woocommerce-cart-form__contents thead {
    display: none !important;
  }
  table.shop_table.cart tr.woocommerce-cart-form__cart-item,
  table.woocommerce-cart-form__contents tr.woocommerce-cart-form__cart-item {
    display: block !important;
    position: relative !important;
    padding: 1.25rem 1rem !important;
    border-bottom: 1px solid var(--color-surface-variant, #e4e2df) !important;
  }
  table.shop_table.cart td,
  table.woocommerce-cart-form__contents td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border: none !important;
    padding: 0.5rem 0 !important;
    width: 100% !important;
  }
  table.shop_table.cart td.product-remove,
  table.woocommerce-cart-form__contents td.product-remove {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    width: auto !important;
  }
  table.shop_table.cart td.product-thumbnail,
  table.woocommerce-cart-form__contents td.product-thumbnail {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0.75rem !important;
  }
  table.shop_table.cart td.product-thumbnail img,
  table.woocommerce-cart-form__contents td.product-thumbnail img {
    width: 90px !important;
    height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
  }
  table.shop_table.cart td.product-name,
  table.woocommerce-cart-form__contents td.product-name {
    padding-left: 0 !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
  }
  table.shop_table.cart td[data-title]:not(.product-thumbnail):not(.product-name)::before,
  table.woocommerce-cart-form__contents td[data-title]:not(.product-thumbnail):not(.product-name)::before {
    content: attr(data-title) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--color-on-surface-variant, #4b4640) !important;
  }
  .cart-actions-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .cart-actions-bar .coupon {
    width: 100% !important;
  }
  .cart-actions-bar .coupon input.input-text {
    flex: 1 !important;
    width: auto !important;
  }
  .btn-update-cart,
  button[name="update_cart"] {
    width: 100% !important;
  }
}

/* ============================================
   WOOCOMMERCE - CHECKOUT
   ============================================ */

/* Checkout Page Container */
.vneshome-checkout-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}
.vneshome-checkout-header {
  margin-bottom: 2.5rem;
}
.vneshome-checkout-header .section-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 36px;
  font-weight: 600;
  color: var(--color-on-surface, #1b1c1a);
  letter-spacing: -0.01em;
}

/* Coupon & Login Toggles */
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle {
  margin-bottom: 1.5rem;
}
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
  background: var(--color-surface-container-low, #f5f3f0) !important;
  border-left: 4px solid var(--color-secondary, #98462b) !important;
  color: var(--color-on-surface, #1b1c1a) !important;
  padding: 1rem 1.5rem !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  display: block !important;
}
.woocommerce-form-login-toggle a.showlogin,
.woocommerce-form-coupon-toggle a.showcoupon {
  color: var(--color-secondary, #98462b);
  font-weight: 600;
  text-decoration: underline;
  margin-left: 0.25rem;
  transition: color 0.2s ease;
}
.woocommerce-form-login-toggle a.showlogin:hover,
.woocommerce-form-coupon-toggle a.showcoupon:hover {
  color: var(--color-secondary-dark, #752c13);
}

/* Toggleable Forms */
form.checkout_coupon,
form.login {
  background: var(--color-surface-container-lowest, #ffffff) !important;
  border: 1px solid var(--color-surface-variant, #e4e2df) !important;
  border-radius: 4px !important;
  padding: 1.75rem !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
}
form.checkout_coupon {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
form.checkout_coupon .form-row-first {
  width: auto;
  flex: 1;
  min-width: 240px;
  margin: 0;
}
form.checkout_coupon input.input-text {
  width: 100%;
  height: 46px;
  padding: 0 1rem;
  border: 1px solid var(--color-outline-variant, #cec5bd);
  border-radius: 3px;
  font-size: 14px;
  background: var(--color-surface, #fbf9f6);
}
form.checkout_coupon button.button {
  height: 46px;
  padding: 0 1.5rem;
  background: var(--color-primary, #000);
  color: #fff;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: all 0.2s ease;
}
form.checkout_coupon button.button:hover {
  background: var(--color-secondary, #98462b);
}

/* 2-Column Checkout Layout */
.vneshome-checkout-layout {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 3rem;
  align-items: start;
}
.vneshome-checkout-billing {
  min-width: 0;
}
.vneshome-checkout-review {
  min-width: 0;
}

/* Customer Details (Billing & Shipping) Box */
#customer_details {
  background: var(--color-surface-container-lowest, #ffffff);
  border: 1px solid var(--color-surface-variant, #e4e2df);
  border-radius: var(--radius-default, 4px);
  padding: 2.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
#customer_details h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-on-surface, #1b1c1a);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-surface-variant, #e4e2df);
  letter-spacing: -0.01em;
}
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
  margin-top: 2rem;
}

/* Checkout Form Fields */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1rem;
}
.form-row {
  margin: 0 !important;
  padding: 0 !important;
}
.form-row-wide,
.woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-shipping-fields__field-wrapper .form-row-wide,
.woocommerce-additional-fields__field-wrapper .form-row-wide,
#order_comments_field {
  grid-column: 1 / -1;
  width: 100% !important;
}

.form-row label {
  display: block;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface, #1b1c1a);
  margin-bottom: 0.4rem;
}
.form-row label .required {
  color: var(--color-error, #ba1a1a);
  text-decoration: none;
  font-weight: 700;
  margin-left: 0.2rem;
}
.form-row label .optional {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-outline, #7d766f);
  margin-left: 0.25rem;
}

.woocommerce-input-wrapper {
  width: 100%;
  display: block;
}
.form-row input.input-text,
.form-row textarea,
.form-row select {
  width: 100% !important;
  height: 46px;
  padding: 0 1rem;
  border: 1px solid var(--color-outline-variant, #cec5bd);
  border-radius: 3px;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 14px;
  color: var(--color-on-surface, #1b1c1a);
  background: var(--color-surface, #fbf9f6);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-row textarea {
  height: auto;
  min-height: 100px;
  padding: 0.75rem 1rem;
  resize: vertical;
}
.form-row input.input-text:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--color-primary, #000);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}

/* Select2 Custom Styling for Country / State dropdowns */
.select2-container--default .select2-selection--single {
  height: 46px !important;
  border: 1px solid var(--color-outline-variant, #cec5bd) !important;
  border-radius: 3px !important;
  background: var(--color-surface, #fbf9f6) !important;
  display: flex !important;
  align-items: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px !important;
  padding-left: 1rem !important;
  font-size: 14px !important;
  color: var(--color-on-surface, #1b1c1a) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px !important;
  right: 0.75rem !important;
}

/* Checkbox Fields */
.woocommerce-form__label-for-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-on-surface, #1b1c1a) !important;
}
.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--color-secondary, #98462b);
  cursor: pointer;
}

/* Order Review Card (Right Sticky Column) */
.vneshome-order-review-card {
  background: var(--color-surface-container-lowest, #ffffff);
  border: 1px solid var(--color-surface-variant, #e4e2df);
  border-radius: var(--radius-default, 4px);
  padding: 2.25rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.vneshome-review-heading {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-on-surface, #1b1c1a);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-surface-variant, #e4e2df);
  letter-spacing: -0.01em;
}

/* Review Order Table */
table.woocommerce-checkout-review-order-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 1.5rem !important;
  border: none !important;
}
table.woocommerce-checkout-review-order-table thead th {
  padding: 0.75rem 0 !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--color-on-surface-variant, #4b4640) !important;
  border-bottom: 1px solid var(--color-surface-variant, #e4e2df) !important;
  text-align: left !important;
}
table.woocommerce-checkout-review-order-table thead th.product-total {
  text-align: right !important;
}

table.woocommerce-checkout-review-order-table tbody td {
  padding: 1rem 0 !important;
  border-bottom: 1px solid var(--color-surface-variant, #f0ede8) !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 14px !important;
  vertical-align: middle !important;
}
table.woocommerce-checkout-review-order-table td.product-name {
  color: var(--color-on-surface, #1b1c1a) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
table.woocommerce-checkout-review-order-table td.product-name .product-quantity {
  color: var(--color-secondary, #98462b) !important;
  font-weight: 600 !important;
  margin-left: 0.25rem !important;
}
table.woocommerce-checkout-review-order-table td.product-total {
  text-align: right !important;
  font-weight: 600 !important;
  color: var(--color-on-surface, #1b1c1a) !important;
}

/* Review Order Table Footers */
table.woocommerce-checkout-review-order-table tfoot th,
table.woocommerce-checkout-review-order-table tfoot td {
  padding: 0.875rem 0 !important;
  border-bottom: 1px solid var(--color-surface-variant, #f0ede8) !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 14px !important;
}
table.woocommerce-checkout-review-order-table tfoot th {
  text-align: left !important;
  font-weight: 500 !important;
  color: var(--color-on-surface-variant, #4b4640) !important;
}
table.woocommerce-checkout-review-order-table tfoot td {
  text-align: right !important;
  font-weight: 600 !important;
  color: var(--color-on-surface, #1b1c1a) !important;
}
table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-bottom: none !important;
  padding-top: 1.25rem !important;
}
table.woocommerce-checkout-review-order-table tfoot tr.order-total td strong {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--color-secondary, #98462b) !important;
}

/* Payment Box */
#payment {
  background: var(--color-surface-container-high, #f5f3f0) !important;
  border: 1px solid var(--color-surface-variant, #e4e2df) !important;
  border-radius: 4px !important;
  padding: 1.5rem !important;
  margin-top: 1rem !important;
}
#payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#payment ul.payment_methods li.wc_payment_method {
  padding: 0.75rem 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
#payment ul.payment_methods li.wc_payment_method:last-child {
  border-bottom: none !important;
}
#payment ul.payment_methods li label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  color: var(--color-on-surface, #1b1c1a) !important;
}
#payment ul.payment_methods li input[type="radio"] {
  accent-color: var(--color-secondary, #98462b) !important;
  cursor: pointer !important;
}
#payment div.payment_box {
  background: #ffffff !important;
  border: 1px solid var(--color-surface-variant, #e4e2df) !important;
  border-radius: 4px !important;
  padding: 1rem 1.25rem !important;
  margin-top: 0.6rem !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--color-on-surface-variant, #4b4640) !important;
  position: relative !important;
}
#payment div.payment_box::before {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  left: 20px !important;
  width: 10px !important;
  height: 10px !important;
  background: #ffffff !important;
  border-top: 1px solid var(--color-surface-variant, #e4e2df) !important;
  border-left: 1px solid var(--color-surface-variant, #e4e2df) !important;
  transform: rotate(45deg) !important;
}

/* Terms & Conditions */
.woocommerce-terms-and-conditions-wrapper {
  margin-top: 1.25rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--color-surface-variant, #e4e2df) !important;
  font-size: 13px !important;
  color: var(--color-on-surface-variant, #4b4640) !important;
  line-height: 1.5 !important;
}
.woocommerce-terms-and-conditions-wrapper a {
  color: var(--color-secondary, #98462b) !important;
  text-decoration: underline !important;
}

/* Place Order Button */
#place_order,
button#place_order {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: var(--color-primary, #000000) !important;
  color: #ffffff !important;
  padding: 1.2rem 1.5rem !important;
  border-radius: 3px !important;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  margin-top: 1.25rem !important;
  transition: all 0.25s ease !important;
  border: none !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
}
#place_order:hover,
button#place_order:hover {
  background: var(--color-secondary, #98462b) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(152,70,43,0.25) !important;
}

/* Trust Box */
.checkout-trust-box {
  margin-top: 1.5rem;
  background: var(--color-surface-container-lowest, #ffffff);
  border: 1px solid var(--color-surface-variant, #e4e2df);
  border-radius: var(--radius-default, 4px);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.checkout-trust-box .trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}
.checkout-trust-box .trust-item span.material-symbols-outlined {
  color: var(--color-secondary, #98462b);
  font-size: 22px;
  margin-top: 1px;
}
.checkout-trust-box .trust-item strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface, #1b1c1a);
  margin-bottom: 2px;
}
.checkout-trust-box .trust-item p {
  font-size: 12px;
  color: var(--color-outline, #7d766f);
  line-height: 1.4;
  margin: 0;
}

/* Thankyou / Order Received Page */
.woocommerce-order {
  max-width: 900px;
  margin: 0 auto;
}
.woocommerce-thankyou-order-received {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 28px;
  font-weight: 600;
  color: #1b5e20;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: #f0f7f2;
  border-radius: 4px;
  border-left: 4px solid #2e7d32;
}
ul.order_details {
  list-style: none !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.25rem;
  background: var(--color-surface-container-lowest, #ffffff);
  border: 1px solid var(--color-surface-variant, #e4e2df);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 2.5rem;
}
ul.order_details li {
  font-size: 13px;
  color: var(--color-on-surface-variant, #4b4640);
  border-right: 1px solid var(--color-surface-variant, #e4e2df);
  padding-right: 1rem;
}
ul.order_details li:last-child {
  border-right: none;
}
ul.order_details li strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-on-surface, #1b1c1a);
  margin-top: 0.25rem;
}

/* Responsive Checkout */
@media (max-width: 991px) {
  .vneshome-checkout-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 640px) {
  #customer_details,
  .vneshome-order-review-card {
    padding: 1.5rem;
  }
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
  .form-row-first,
  .form-row-last {
    width: 100% !important;
  }
}

/* ==========================================================================
   WOOCOMMERCE NOTICES & ALERTS
   ========================================================================== */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0.875rem;
  font-size: 14px;
  line-height: 1.6;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid transparent;
  width: 100%;
  box-sizing: border-box;
}
.woocommerce-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.woocommerce-message {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.woocommerce-info {
  background: #fdfbf7;
  border-color: var(--color-surface-variant, #e4e2df);
  color: var(--color-on-surface, #1b1c1a);
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button {
  display: inline-block;
  padding: 0.4rem 1rem !important;
  font-size: 12px !important;
  border-radius: 9999px !important;
  background: #000000 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  margin-left: auto;
}

/* ==========================================================================
   WOOCOMMERCE MY ACCOUNT - MODERN MINIMALIST (VNESHOME)
   ========================================================================== */

/* --------------------------------------------------
   1. GUEST / LOGGED-OUT STATE (LOGIN & REGISTER)
   -------------------------------------------------- */

/* Center container when user is logged out */
body:not(.logged-in).woocommerce-account .page-content {
  max-width: 500px;
  margin: 0 auto;
}

/* If registration is also enabled side-by-side */
body:not(.logged-in).woocommerce-account #customer_login {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2.5rem;
  max-width: 980px;
  margin: 0 auto;
}

/* Card wrappers */
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register,
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2,
.woocommerce-account form.woocommerce-ResetPassword {
  background: var(--color-surface-container-lowest, #ffffff);
  border: 1px solid var(--color-surface-variant, #e4e2df);
  border-radius: 1.25rem;
  padding: 2.5rem 2.25rem;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.03);
}

/* Title on logged out page */
.woocommerce-account .woocommerce > h2,
.woocommerce-account #customer_login h2 {
  font-family: var(--font-headline, 'Playfair Display', serif);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-on-surface, #1b1c1a);
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
}

.woocommerce-account .woocommerce > h2::after,
.woocommerce-account #customer_login h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-primary, #000000);
  margin: 0.75rem auto 0;
  border-radius: 1px;
}

/* Form row elements */
.woocommerce-account .woocommerce form .form-row {
  margin-bottom: 1.25rem;
  padding: 0;
}

.woocommerce-account .woocommerce form .form-row label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-on-surface-variant, #4b4640);
  margin-bottom: 0.5rem;
}

.woocommerce-account .woocommerce form .form-row label .required {
  color: var(--color-error, #ba1a1a);
}

.woocommerce-account .woocommerce form .form-row .input-text {
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  font-size: 14px;
  color: var(--color-on-surface, #1b1c1a);
  background: #faf8f5;
  border: 1px solid var(--color-surface-variant, #e4e2df);
  border-radius: 0.625rem;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.woocommerce-account .woocommerce form .form-row .input-text:focus {
  background: #ffffff;
  border-color: var(--color-primary, #000000);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

/* Login submit button and remember me */
.woocommerce-form-login__rememberme {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin-top: 0.5rem;
  margin-bottom: 1.25rem !important;
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--color-on-surface-variant, #4b4640) !important;
  user-select: none;
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary, #000000);
  cursor: pointer;
}

.woocommerce-account .woocommerce form .button,
.woocommerce-account .woocommerce form button[type="submit"] {
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  background: var(--color-primary, #000000);
  color: #ffffff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  padding: 0;
}

.woocommerce-account .woocommerce form .button:hover,
.woocommerce-account .woocommerce form button[type="submit"]:hover {
  background: #2b2b2b;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

/* Lost password link */
.woocommerce-account .lost_password {
  text-align: center;
  margin-top: 1.25rem;
  margin-bottom: 0;
}

.woocommerce-account .lost_password a {
  font-size: 13px;
  color: #78716c;
  text-decoration: none;
  border-bottom: 1px dashed #d6d3d1;
  padding-bottom: 2px;
  transition: all 0.2s ease;
}

.woocommerce-account .lost_password a:hover {
  color: var(--color-primary, #000000);
  border-bottom-color: var(--color-primary, #000000);
}

/* --------------------------------------------------
   2. LOGGED-IN DASHBOARD (2-COLUMN MODERN LAYOUT)
   -------------------------------------------------- */

body.logged-in.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* Sidebar Navigation */
.woocommerce-MyAccount-navigation {
  background: var(--color-surface-container-lowest, #ffffff);
  border: 1px solid var(--color-surface-variant, #e4e2df);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  position: sticky;
  top: 6.5rem;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.woocommerce-MyAccount-navigation ul li {
  margin: 0;
  padding: 0;
}

.woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem;
  border-radius: 0.625rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-on-surface-variant, #4b4640);
  text-decoration: none;
  transition: all 0.2s ease;
}

.woocommerce-MyAccount-navigation .vneshome-nav-item-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.woocommerce-MyAccount-navigation .nav-icon {
  font-size: 20px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.woocommerce-MyAccount-navigation .nav-arrow {
  font-size: 16px;
  opacity: 0.3;
  transition: transform 0.2s, opacity 0.2s;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background: #faf8f5;
  color: var(--color-primary, #000000);
}

.woocommerce-MyAccount-navigation ul li a:hover .nav-arrow {
  opacity: 0.8;
  transform: translateX(2px);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--color-primary, #000000);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.woocommerce-MyAccount-navigation ul li.is-active a .nav-icon {
  opacity: 1;
}

.woocommerce-MyAccount-navigation ul li.is-active a .nav-arrow {
  opacity: 0.8;
}

/* Logout link with distinctive soft tone */
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 0.5rem;
  border-top: 1px solid var(--color-surface-variant, #e4e2df);
  padding-top: 0.5rem;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: #ef4444;
}

.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* Main Content Card */
.woocommerce-MyAccount-content {
  background: var(--color-surface-container-lowest, #ffffff);
  border: 1px solid var(--color-surface-variant, #e4e2df);
  border-radius: 1.25rem;
  padding: 2.5rem;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.02);
  min-height: 420px;
}

/* --------------------------------------------------
   3. DASHBOARD WELCOME & ACTION CARDS
   -------------------------------------------------- */

.vneshome-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-surface-variant, #e4e2df);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.vneshome-user-badge {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.vneshome-avatar-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1b1c1a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.vneshome-welcome-title {
  font-family: var(--font-headline, 'Playfair Display', serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-on-surface, #1b1c1a);
}

.vneshome-welcome-email {
  font-size: 13px;
  color: var(--color-on-surface-variant, #78716c);
  margin: 0.15rem 0 0;
}

.vneshome-signout-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1.15rem;
  border-radius: 9999px;
  border: 1px solid var(--color-surface-variant, #e4e2df);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-on-surface-variant, #4b4640);
  text-decoration: none;
  transition: all 0.2s ease;
}

.vneshome-signout-btn:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.vneshome-dashboard-intro {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-on-surface-variant, #4b4640);
  margin-bottom: 2rem;
}

.vneshome-dashboard-intro a {
  color: var(--color-secondary, #98462b);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

.vneshome-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.vneshome-dash-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: #faf8f5;
  border: 1px solid var(--color-surface-variant, #e4e2df);
  border-radius: 1rem;
  text-decoration: none;
  color: var(--color-on-surface, #1b1c1a);
  transition: all 0.25s ease;
}

.vneshome-dash-card:hover {
  background: #ffffff;
  border-color: var(--color-primary, #000000);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.vneshome-dash-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 0.75rem;
  background: #ffffff;
  border: 1px solid var(--color-surface-variant, #e4e2df);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary, #000000);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.vneshome-dash-card:hover .vneshome-dash-card-icon {
  background: var(--color-primary, #000000);
  color: #ffffff;
}

.vneshome-dash-card-content {
  flex: 1;
}

.vneshome-dash-card-content h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--color-on-surface, #1b1c1a);
}

.vneshome-dash-card-content p {
  font-size: 12px;
  color: var(--color-on-surface-variant, #78716c);
  margin: 0.2rem 0 0;
  line-height: 1.4;
}

.vneshome-dash-card-arrow {
  font-size: 18px;
  color: #a8a29e;
  transition: transform 0.2s, color 0.2s;
}

.vneshome-dash-card:hover .vneshome-dash-card-arrow {
  transform: translateX(3px);
  color: var(--color-primary, #000000);
}

/* --------------------------------------------------
   4. ORDERS TABLE & DOWNLOADS
   -------------------------------------------------- */

table.woocommerce-orders-table,
table.woocommerce-table--order-downloads {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-surface-variant, #e4e2df);
  border-radius: 0.875rem;
  overflow: hidden;
  margin-bottom: 2rem;
}

table.woocommerce-orders-table th,
table.woocommerce-table--order-downloads th {
  background: #faf8f5;
  padding: 1rem 1.25rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-on-surface-variant, #4b4640);
  border-bottom: 1px solid var(--color-surface-variant, #e4e2df);
  text-align: left;
}

table.woocommerce-orders-table td,
table.woocommerce-table--order-downloads td {
  padding: 1.15rem 1.25rem;
  font-size: 14px;
  color: var(--color-on-surface, #1b1c1a);
  border-bottom: 1px solid var(--color-surface-variant, #e4e2df);
  vertical-align: middle;
}

table.woocommerce-orders-table tr:last-child td {
  border-bottom: none;
}

.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-table--order-downloads .button {
  display: inline-block;
  padding: 0.45rem 1.15rem !important;
  height: auto !important;
  line-height: normal !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  background: var(--color-primary, #000000) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-table--order-downloads .button:hover {
  background: #2b2b2b !important;
  transform: translateY(-1px) !important;
}

/* --------------------------------------------------
   5. ADDRESSES SECTION
   -------------------------------------------------- */

.woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
  margin-top: 1.5rem;
}

.woocommerce-Address {
  background: #faf8f5;
  border: 1px solid var(--color-surface-variant, #e4e2df);
  border-radius: 1rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-surface-variant, #e4e2df);
}

.woocommerce-Address-title h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-on-surface, #1b1c1a);
}

.woocommerce-Address-title .edit {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary, #000000);
  background: #ffffff;
  border: 1px solid var(--color-surface-variant, #e4e2df);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.woocommerce-Address-title .edit:hover {
  background: var(--color-primary, #000000);
  color: #ffffff;
  border-color: var(--color-primary, #000000);
}

.woocommerce-Address address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-on-surface-variant, #4b4640);
  margin: 0;
}

/* --------------------------------------------------
   6. ACCOUNT DETAILS FORM & FIELDSETS
   -------------------------------------------------- */

form.woocommerce-EditAccountForm,
form.woocommerce-address-fields {
  max-width: 680px;
}

form.woocommerce-EditAccountForm fieldset {
  border: 1px solid var(--color-surface-variant, #e4e2df);
  border-radius: 0.875rem;
  padding: 1.75rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

form.woocommerce-EditAccountForm fieldset legend {
  font-size: 1rem;
  font-weight: 600;
  padding: 0 0.5rem;
  color: var(--color-on-surface, #1b1c1a);
}

form.woocommerce-EditAccountForm em {
  display: block;
  font-size: 12px;
  color: var(--color-on-surface-variant, #78716c);
  margin-top: -0.25rem;
  margin-bottom: 0.75rem;
}

form.woocommerce-EditAccountForm .button,
form.woocommerce-address-fields .button {
  max-width: 240px;
  margin-top: 1rem;
}

/* --------------------------------------------------
   7. RESPONSIVE MEDIA QUERIES
   -------------------------------------------------- */

@media (max-width: 991px) {
  body.logged-in.woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .woocommerce-MyAccount-navigation {
    position: static;
  }
  .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .woocommerce-MyAccount-navigation ul li {
    flex: 1 1 auto;
  }
  .woocommerce-MyAccount-navigation ul li a {
    justify-content: center;
    text-align: center;
  }
  .woocommerce-MyAccount-navigation .nav-arrow {
    display: none;
  }
}

@media (max-width: 640px) {
  .woocommerce-account form.woocommerce-form-login,
  .woocommerce-account form.woocommerce-form-register,
  .woocommerce-account #customer_login .u-column1,
  .woocommerce-account #customer_login .u-column2,
  .woocommerce-MyAccount-content {
    padding: 1.5rem;
  }
  .woocommerce-MyAccount-navigation ul {
    flex-direction: column;
  }
  .vneshome-dashboard-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .vneshome-signout-btn {
    align-self: flex-start;
  }
}

/* ============================================
   FLOATING ACTION BUTTONS & BACK TO TOP
   ============================================ */
.vnes-floating-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.vnes-float-btn {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.25s ease, 
              background-color 0.2s ease, 
              opacity 0.3s ease, 
              visibility 0.3s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.vnes-float-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
  color: #ffffff !important;
}

.vnes-float-btn:active {
  transform: scale(0.96);
}

.vnes-float-icon {
  display: block;
  pointer-events: none;
}

/* Call Button */
.vnes-btn-call {
  background: #107c41;
  box-shadow: 0 4px 14px rgba(16, 124, 65, 0.35);
}
.vnes-btn-call:hover {
  background: #0b6333;
  box-shadow: 0 6px 20px rgba(16, 124, 65, 0.45);
}

/* Pulse animation on call button */
.vnes-btn-call::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  border: 2px solid #107c41;
  opacity: 0.6;
  animation: vnesPulse 2.4s infinite cubic-bezier(0.25, 0, 0, 1);
  pointer-events: none;
}
@keyframes vnesPulse {
  0% { transform: scale(1); opacity: 0.8; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Email Button */
.vnes-btn-email {
  background: #ea4335;
  box-shadow: 0 4px 14px rgba(234, 67, 53, 0.35);
}
.vnes-btn-email:hover {
  background: #d33828;
  box-shadow: 0 6px 20px rgba(234, 67, 53, 0.45);
}

/* Messenger Button */
.vnes-btn-messenger {
  background: linear-gradient(135deg, #0084ff 0%, #a033ff 50%, #ff5252 100%);
  box-shadow: 0 4px 14px rgba(0, 132, 255, 0.35);
}
.vnes-btn-messenger:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(0, 132, 255, 0.45);
}

/* Back to Top Button */
.vnes-btn-backtotop {
  background: #1c1917;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px);
}
.vnes-btn-backtotop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.vnes-btn-backtotop:hover {
  background: #000000;
}

/* Tooltip on Hover */
.vnes-float-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: rgba(28, 25, 23, 0.94);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: inherit;
  letter-spacing: 0.02em;
}

.vnes-float-tooltip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: rgba(28, 25, 23, 0.94);
}

.vnes-float-btn:hover .vnes-float-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Mobile responsive */
@media (max-width: 767px) {
  .vnes-floating-actions {
    right: 16px;
    bottom: 20px;
    gap: 8px;
  }
  .vnes-float-btn {
    width: 42px;
    height: 42px;
  }
  .vnes-float-btn svg {
    width: 18px;
    height: 18px;
  }
  .vnes-float-tooltip {
    display: none !important;
  }
}


/* ============================================
   OUR CRAFT & BAMBOO STORY PAGE
   ============================================ */

/* --- Story Hero --- */
.story-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.story-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.05);
  transition: transform 8s ease-out;
}
.story-hero:hover .story-hero-bg {
  transform: scale(1);
}
.story-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.55) 100%);
}
.story-hero-content {
  text-align: center;
  color: #fff;
  max-width: 720px;
  margin: 0 auto;
  padding: 6rem 0 4rem;
}
.story-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1.5rem;
}
.story-hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary-light);
  display: inline-block;
}
.story-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: 56px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: #fff;
}
.story-hero-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
  max-width: 540px;
  margin: 0 auto 2.5rem;
}
.story-hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: storyBounce 2s ease-in-out infinite;
}
.story-hero-scroll .material-symbols-outlined {
  font-size: 28px;
}
@keyframes storyBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (max-width: 768px) {
  .story-hero { min-height: 70vh; }
  .story-hero-title { font-size: 36px; }
  .story-hero-subtitle { font-size: 15px; }
  .story-hero-content { padding: 4rem 0 3rem; }
}

/* --- Story Sections Common --- */
.story-page .section-eyebrow.accent {
  display: block;
  margin-bottom: 0.5rem;
}
.story-page .section-title {
  margin-bottom: 0.5rem;
}

/* --- Story Image Frame --- */
.story-image-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.story-image-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.story-image-frame:hover img {
  transform: scale(1.03);
}
.story-image-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 14px;
  border-radius: var(--radius-default);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.story-image-tag.right {
  left: auto;
  right: 16px;
}

/* --- Story Text Block --- */
.story-text-block p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-on-surface-variant);
  margin-bottom: 1.25rem;
}
.story-text-block p:last-child {
  margin-bottom: 0;
}

/* --- Story Timeline --- */
.story-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
}
.story-timeline::before {
  content: '';
  position: absolute;
  top: 52px;
  left: calc(12.5% + 1rem);
  right: calc(12.5% + 1rem);
  height: 2px;
  background: var(--color-outline-variant);
  z-index: 0;
}
.story-timeline-step {
  text-align: center;
  position: relative;
  z-index: 1;
}
.story-timeline-number {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-secondary);
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}
.story-timeline-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-surface-container-lowest);
  border: 2px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: all 0.3s ease;
}
.story-timeline-step:hover .story-timeline-icon {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}
.story-timeline-step:hover .story-timeline-icon .material-symbols-outlined {
  color: #fff;
}
.story-timeline-icon .material-symbols-outlined {
  font-size: 24px;
  color: var(--color-secondary);
  transition: color 0.3s ease;
}
.story-timeline-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--color-on-surface);
}
.story-timeline-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
}
@media (max-width: 768px) {
  .story-timeline {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .story-timeline::before {
    top: 0;
    bottom: 0;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .story-timeline-step {
    text-align: left;
    padding-left: 72px;
  }
  .story-timeline-icon {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
  }
  .story-timeline-number {
    margin-bottom: 0.25rem;
  }
}

/* --- Story Materials Grid --- */
.story-materials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.story-material-card {
  background: var(--color-surface-container-low);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--color-surface-variant);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}
.story-material-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-secondary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.story-material-card:hover::before {
  transform: scaleX(1);
}
.story-material-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transform: translateY(-4px);
}
.story-material-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-secondary-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.story-material-icon .material-symbols-outlined {
  font-size: 24px;
  color: var(--color-secondary-dark);
}
.story-material-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: var(--color-on-surface);
}
.story-material-card p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
  margin-bottom: 1.25rem;
}
.story-material-tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-surface-variant);
}
@media (max-width: 768px) {
  .story-materials-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Story Stats --- */
.story-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-surface-variant);
}
.story-stat {
  text-align: center;
}
.story-stat-number {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 500;
  color: var(--color-secondary);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.story-stat-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-on-surface-variant);
  letter-spacing: 0.02em;
}
@media (max-width: 480px) {
  .story-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .story-stat-number { font-size: 28px; }
}

/* --- Story Quote Section --- */
.story-quote-section {
  position: relative;
  padding: 6rem 0;
  background: var(--color-primary-dark);
  overflow: hidden;
}
.story-quote-bg {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 60px,
    rgba(255,255,255,0.02) 60px,
    rgba(255,255,255,0.02) 61px
  );
}
.story-quote-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
.story-quote-mark {
  font-family: 'Playfair Display', serif;
  font-size: 80px;
  line-height: 1;
  color: var(--color-secondary);
  display: block;
  margin-bottom: -0.5rem;
}
.story-quote-text {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  line-height: 1.6;
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2rem;
}
.story-quote-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
}
.story-quote-dash {
  width: 32px;
  height: 1px;
  background: var(--color-secondary);
}
@media (max-width: 768px) {
  .story-quote-section { padding: 4rem 0; }
  .story-quote-text { font-size: 20px; }
  .story-quote-mark { font-size: 60px; }
}

/* --- Story Values Grid --- */
.story-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.story-value-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-low);
  border: 1px solid var(--color-surface-variant);
  transition: all 0.35s ease;
}
.story-value-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transform: translateY(-4px);
}
.story-value-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-secondary-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.story-value-icon .material-symbols-outlined {
  font-size: 26px;
  color: var(--color-secondary-dark);
}
.story-value-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: var(--color-on-surface);
}
.story-value-card p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
}
@media (max-width: 1024px) {
  .story-values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .story-values-grid { grid-template-columns: 1fr; }
}

/* --- Story CTA Section --- */
.story-cta-section {
  padding: 5rem 0;
  background: var(--color-surface-container-low);
  border-top: 1px solid var(--color-surface-variant);
}
.story-cta-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}





/* ====== FIX: Our Story Page - Image overflow in grid ====== */
.story-page .grid > * {
  min-width: 0;
  overflow: hidden;
}

.story-image-frame {
  max-width: 100%;
}

.story-image-frame img {
  max-width: 100%;
  width: 100%;
}

/* Fix stats section on mobile */
@media (max-width: 768px) {
  .story-stats {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
  }
  .story-stats .story-stat {
    width: 100%;
    max-width: 280px;
  }
}

/* Fix floating buttons on mobile */
@media (max-width: 480px) {
  .floating-contact-buttons,
  .whatsapp-button,
  .zalo-button,
  .email-float-button,
  .messenger-button {
    transform: scale(0.8);
    transform-origin: bottom right;
  }
}

/* Fix image tag badge on mobile */
@media (max-width: 768px) {
  .story-image-tag {
    top: 10px;
    left: 10px;
    font-size: 10px;
    padding: 4px 10px;
  }
}