:root{
--bg:#f8f8f8;
--surface:#ffffff;
--surface-2:#f2f2f2;
--accent:#b8860b;
--accent-strong:#d4af37;
--text:#333333;
--btn-bg:var(--accent);
--btn-hover:var(--accent-strong);
--btn-text:#ffffff;
--btn-shadow:rgba(184,134,11,0.35);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
scroll-behavior:smooth;
}

body{
background:var(--bg);
color:var(--text);
transition: all 0.4s ease;
overflow-x:hidden;
}

body.dark-mode{
background:#1a1a1a;
color:#e0e0e0;
}

/* Hide scrollbars globally but keep scrolling enabled */
*{
	scrollbar-width:none;
	-ms-overflow-style:none;
}

*::-webkit-scrollbar{
	width:0;
	height:0;
}

/* HEADER */
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 50px;
background:linear-gradient(120deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.85) 60%, rgba(212,175,55,0.12) 100%);
border-bottom:1px solid rgba(0,0,0,0.04);
box-shadow:0 10px 30px rgba(0,0,0,0.08);
position:fixed;
width:100%;
top:0;
z-index:1000;
transition: all 0.4s ease;
}

body.dark-mode header{
background:linear-gradient(120deg, rgba(34,34,34,0.95) 0%, rgba(34,34,34,0.9) 60%, rgba(184,134,11,0.15) 100%);
border-bottom:1px solid rgba(255,255,255,0.05);
box-shadow:0 12px 32px rgba(0,0,0,0.4);
}

.nav-icons{
display:flex;
gap:15px;
align-items:center;
}

.logo{
font-family:'Cinzel', 'Playfair Display', 'Times New Roman', serif;
font-size:28px;
letter-spacing:1.4px;
font-weight:700;
color:#b8860b;
display:flex;
align-items:center;
gap:8px;
animation: glow 3s ease-in-out infinite;
position:relative;
padding-right:10px;
transition:transform 0.2s ease, color 0.2s ease;
}

.logo-mark{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:12px;
	background:linear-gradient(160deg, #d4af37 0%, #b8860b 60%, #8f6b00 100%);
	color:#1a1a1a;
	font-weight:800;
	font-size:17px;
	letter-spacing:0.5px;
	box-shadow:0 6px 14px rgba(0,0,0,0.2);
	border:1px solid rgba(255,255,255,0.35);
}

.logo::after{
	content:'';
	position:absolute;
	right:0;
	bottom:-6px;
	width:46px;
	height:2px;
	background:linear-gradient(90deg, #d4af37, rgba(184,134,11,0));
	border-radius:2px;
}

.logo:hover{
	transform:translateY(-1px);
	color:#a17407;
}

.back-home{
	font-weight:700;
	color:#333;
	text-decoration:none;
	padding:8px 10px;
	border-radius:10px;
	background:#f3f3f3;
	box-shadow:0 3px 10px rgba(0,0,0,0.08);
}
body.dark-mode .back-home{
	color:#e0e0e0;
	background:#1f1f1f;
	box-shadow:0 3px 10px rgba(0,0,0,0.25);
}

@keyframes glow{
0%, 100%{ text-shadow: 0 0 6px rgba(184,134,11,0.6); }
50%{ text-shadow: 0 0 18px rgba(212,175,55,0.9); }
}

nav ul{
list-style:none;
display:flex;
gap:25px;
align-items:center;
padding:0;
margin:0;
}

nav a{
text-decoration:none;
color:var(--text);
transition: all 0.3s ease;
font-weight:500;
position:relative;
}

body.dark-mode nav a{
color:#e0e0e0;
}

nav a::after{
content:'';
position:absolute;
bottom:-5px;
left:0;
width:0;
height:2px;
background:var(--accent);
transition: width 0.3s ease;
}

nav a:hover::after{
width:100%;
}

nav a:hover{
color:var(--accent-strong);
}

/* Menu toggle + drawer (dashboard) */
.menu-toggle{
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:5px;
	background:none;
	border:none;
	cursor:pointer;
	padding:8px;
}
.menu-toggle span{
	display:block;
	width:22px;
	height:2px;
	background:#333;
}
body.dark-mode .menu-toggle span{ background:#e0e0e0; }

.side-menu{
	position:fixed;
	top:0;
	right:-100%;
	width:80%;
	max-width:360px;
	height:100vh;
	background:#fff;
	box-shadow:-6px 0 18px rgba(0,0,0,0.18);
	z-index:1200;
	padding:18px;
	display:flex;
	flex-direction:column;
	gap:16px;
	transition:right 0.3s ease;
	overflow:hidden;
}
.side-menu.active{ right:0; }
body.dark-mode .side-menu{
	background:#1c1c1c;
	box-shadow:-6px 0 18px rgba(0,0,0,0.4);
}
.side-menu-header{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.side-menu-header h3{ margin:0; }
.menu-close{
	background:none;
	border:none;
	font-size:26px;
	cursor:pointer;
	color:#555;
}
body.dark-mode .menu-close{ color:#ddd; }
.side-menu-list{
	list-style:none;
	padding:0;
	margin:0;
	display:flex;
	flex-direction:column;
	gap:14px;
	font-weight:700;
	font-size:16px;
	flex:1 1 auto;
	min-height:0;
	overflow-y:auto;
	overflow-x:hidden;
	padding-right:4px;
	-webkit-overflow-scrolling:touch;
	overscroll-behavior:contain;
}
.side-menu-list a,
.side-link-btn{
	text-decoration:none;
	color:inherit;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	padding:10px 0;
	border-bottom:1px solid #eee;
	background:none;
	border-left:none;
	border-right:none;
	border-top:none;
	width:100%;
	font:inherit;
	cursor:pointer;
	text-align:left;
}

.side-link-btn{
	justify-content:space-between;
}
body.dark-mode .side-menu-list a,
body.dark-mode .side-link-btn{ border-bottom-color:#2a2a2a; }

.side-menu-list .side-sub-link a{
	font-size:14px;
	font-weight:600;
	padding:7px 0 7px 14px;
	border-bottom-style:dashed;
	opacity:0.92;
}

.side-submenu{
	display:flex;
	flex-direction:column;
	gap:2px;
	padding-top:2px;
}

.side-submenu[hidden]{
	display:none;
}

.side-menu-list .side-sub-link a::before{
	content:'\2022';
	margin-right:8px;
	color:#b8860b;
}

.theme-caret{
	font-size:12px;
	opacity:0.8;
	transition:transform 0.2s ease;
}

.side-link-btn[aria-expanded="true"] .theme-caret{
	transform:rotate(180deg);
}

.theme-options{
	display:flex;
	gap:8px;
	padding:8px 0 2px;
}

.theme-options[hidden]{
	display:none;
}

.theme-option-btn{
	flex:1;
	padding:8px 10px;
	border:1px solid #ddd;
	border-radius:9px;
	background:#f7f7f7;
	color:#333;
	font-weight:700;
	cursor:pointer;
	transition:all 0.2s ease;
}

.theme-option-btn:hover{
	transform:translateY(-1px);
	box-shadow:0 5px 12px rgba(0,0,0,0.12);
}

.theme-option-btn.active{
	background:linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
	color:white;
	border-color:transparent;
	box-shadow:0 8px 18px rgba(184,134,11,0.28);
}

body.dark-mode .theme-option-btn{
	background:#232323;
	color:#e0e0e0;
	border-color:#444;
}

body.dark-mode .theme-option-btn.active{
	color:white;
}
.side-menu-social{
	display:flex;
	gap:16px;
	font-size:18px;
	flex-shrink:0;
}
.side-menu-social a{
	color:#333;
}
body.dark-mode .side-menu-social a{ color:#e0e0e0; }

/* Floating cart */
.float-cart{
	position:fixed;
	right:16px;
	bottom:18px;
	background:linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-bg) 100%);
	color:var(--btn-text);
	border:1px solid var(--accent-strong);
	border-radius:28px;
	padding:10px 14px;
	display:flex;
	align-items:center;
	gap:8px;
	box-shadow:0 10px 25px rgba(0,0,0,0.25);
	cursor:pointer;
	z-index:1300;
}
.float-cart i{
	font-size:18px;
}
.float-cart span{
	background:white;
	color:#b8860b;
	padding:2px 8px;
	border-radius:999px;
	font-weight:700;
	font-size:12px;
}
@media(max-width:768px){
	.float-cart{
		right:12px;
		bottom:12px;
	}
}

/* Back to top */
.back-to-top{
	position:fixed;
	right:16px;
	bottom:86px;
	width:44px;
	height:44px;
	border:none;
	border-radius:50%;
	background:linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:16px;
	box-shadow:0 10px 24px rgba(0,0,0,0.28);
	cursor:pointer;
	z-index:1302;
	opacity:0;
	visibility:hidden;
	transform:translateY(8px);
	transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.back-to-top.visible{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

.back-to-top:hover{
	transform:translateY(-2px);
	box-shadow:0 14px 28px rgba(0,0,0,0.32);
}

.back-to-top:active{
	transform:translateY(0);
}

body.dark-mode .back-to-top{
	box-shadow:0 10px 24px rgba(0,0,0,0.55);
}

.theme-toggle{
background:none;
border:none;
font-size:20px;
cursor:pointer;
transition: all 0.3s ease;
padding:5px 10px;
border-radius:50%;
}

.theme-toggle:hover{
transform: rotate(20deg) scale(1.1);
background: rgba(184,134,11,0.2);
}

.cart-icon{
cursor:pointer;
font-size:20px;
transition: all 0.3s ease;
}

.cart-icon:hover{
color:#b8860b;
transform: scale(1.2);
}

/* Animated press state for primary buttons */
.product button:active,
.tester-btn:active,
.submit-btn:active,
.cart-btn:active,
.shipping-btn:active,
.theme-toggle:active{
transform: translateY(-2px) scale(0.995);
}

#cart-count{
background:var(--accent);
color:white;
padding:3px 7px;
border-radius:50%;
font-size:12px;
font-weight:bold;
animation: pulse 2s infinite;
}

@keyframes pulse{
0%, 100%{ transform: scale(1); }
50%{ transform: scale(1.1); }
}

/* HERO */
.hero{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
background:#fff;
text-align:center;
padding-top:80px;
animation:fadeIn 1s ease;
transition: all 0.4s ease;
scroll-margin-top:90px;
}

body.dark-mode .hero{
background:#fff;
}

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.hero h1{
font-size:50px;
margin-bottom:20px;
animation: slideInDown 1s ease;
}

.hero p{
font-size:20px;
margin-bottom:30px;
animation: slideInUp 1s ease;
}

@keyframes slideInDown{
from{
opacity:0;
transform:translateY(-30px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes slideInUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.hero button{
padding:15px 40px;
border:1px solid var(--accent-strong);
background:linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-bg) 100%);
color:var(--btn-text);
cursor:pointer;
font-size:16px;
font-weight:bold;
border-radius:50px;
transition: all 0.3s ease;
box-shadow: 0 6px 14px var(--btn-shadow);
position:relative;
overflow:hidden;
}

.hero button::before{
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:rgba(255,255,255,0.2);
transition: left 0.3s ease;
}

.hero button:hover::before{
left:100%;
}

.hero button:hover{
transform:scale(1.05);
box-shadow: 0 10px 26px var(--btn-shadow);
}

.hero button:active{
transform:scale(0.98);
}

/* home section picture */
.hero-img-wrap{
    position:relative;
    width:100%;
    height:100vh; /* full viewport height */
    overflow:hidden;
    border-radius:0; /* remove rounding since full screen */
    background:#fff;
    
}

/* ensure image covers container */
.hero .home-img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform:translateZ(0);
    will-change:transform;
    image-rendering:auto;
}
.hero-feature-strip{
    position:absolute;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    z-index:3;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:999px;
    background:linear-gradient(135deg, rgba(255,239,193,0.97) 0%, rgba(241,196,15,0.95) 100%);
    color:#3b2a00;
    border:1px solid rgba(255,255,255,0.55);
    box-shadow:0 8px 20px rgba(0,0,0,0.25);
    font-weight:700;
    letter-spacing:0.2px;
    width:auto;
    max-width:94%;
    white-space:nowrap;
    overflow:hidden;
    transition:transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
    background-size:180% 180%;
    animation:featureGradientMove 7s ease-in-out infinite;
}

.hero-feature-strip::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:linear-gradient(90deg, rgba(255,255,255,0), #fff, rgba(255,255,255,0));
    transform:translateX(-110%);
    animation:featureLineSweep 2.8s linear infinite;
}

.hero-feature-strip:hover{
    transform:translateX(-50%) translateY(-3px) scale(1.02);
    box-shadow:0 14px 30px rgba(0,0,0,0.3);
    filter:saturate(1.08);
}

.feature-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:999px;
    background:#2a1c00;
    color:#fff;
    font-size:clamp(9px, 1.6vw, 12px);
    font-weight:800;
    letter-spacing:0.4px;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    flex-shrink:0;
}

.feature-text{
    position:relative;
    z-index:2;
    display:block;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    font-size:clamp(10px, 2vw, 14px);
    font-weight:800;
    letter-spacing:0;
}

.promo-line{
    display:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.promo-line.is-active{
    display:block;
}

.hero-feature-strip:hover .feature-pill{
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(0,0,0,0.24);
}

@keyframes featureLineSweep{
    0%{
        transform:translateX(-110%);
    }
    100%{
        transform:translateX(110%);
    }
}

@keyframes featureGradientMove{
    0%, 100%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
}

body.dark-mode .hero-feature-strip{
    background:linear-gradient(135deg, rgba(212,175,55,0.95) 0%, rgba(184,134,11,0.96) 100%);
    color:#111;
    border-color:rgba(255,255,255,0.25);
    box-shadow:0 10px 26px rgba(0,0,0,0.45);
}

.hero-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:min(92%, 760px);
    color:white;
    text-align:center;
    text-shadow:0 2px 8px rgba(0,0,0,0.6);
    padding:0 20px;
    z-index:2; /* above overlay */
}
.hero-content h1{
    font-size:clamp(30px, 5vw, 54px);
    line-height:1.12;
    margin-bottom:10px;
}
.hero-content p{
    font-size:clamp(15px, 2.2vw, 20px);
    margin-bottom:20px;
}
.hero-img-wrap::after{
    /* no overlay so hero image retains original brightness */
    content:'';
    position:absolute;
    inset:0;
    background:transparent;
    z-index:1;
}

/* DASHBOARD */
.dashboard{
padding:80px clamp(16px, 4vw, 50px);
text-align:center;
background:linear-gradient(135deg,#f7f7f7 0%, #ffffff 100%);
}

body.dark-mode .dashboard{
background:linear-gradient(135deg,#1b1b1b 0%, #111 100%);
}

.dashboard h2{
font-size:40px;
margin-bottom:10px;
}

.dash-subtitle{
color:#777;
margin-bottom:30px;
}

body.dark-mode .dash-subtitle{
color:#b5b5b5;
}

.dash-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
}

.track-form{
display:flex;
gap:8px;
width:100%;
flex-wrap:wrap;
justify-content:center;
}

.track-form input{
flex:1 1 160px;
padding:10px 12px;
border:1px solid #ddd;
border-radius:10px;
font-size:14px;
}

#order-id{
	font-family:Consolas, "Courier New", monospace;
	font-size:12px;
	letter-spacing:0.2px;
	text-align:center;
	height:34px;
	padding:0 8px;
	line-height:34px;
	box-sizing:border-box;
}

.track-result{
margin-top:8px;
display:none;
width:100%;
max-width:520px;
margin-left:auto;
margin-right:auto;
text-align:left;
}

.track-result.visible{
display:block;
}

.tracked-order-card{
	border:1px solid rgba(184,134,11,0.28);
	border-left:4px solid #b8860b;
	border-radius:10px;
	padding:12px;
	background:#fff8e7;
	color:#2f2410;
	box-shadow:0 6px 14px rgba(0,0,0,0.06);
	width:100%;
	box-sizing:border-box;
	overflow:hidden;
}

.tracked-order-card p{
	margin:6px 0;
	font-size:13px;
	line-height:1.35;
	overflow-wrap:anywhere;
	word-break:break-word;
}

.tracked-order-items{
	margin:6px 0 0 16px;
	padding:0;
}

.tracked-order-items li{
	margin:4px 0;
	font-size:13px;
	overflow-wrap:anywhere;
	word-break:break-word;
}

body.dark-mode .track-form input{
background:#1a1a1a;
border-color:#444;
color:#e0e0e0;
}

body.dark-mode .tracked-order-card{
	background:#2b2414;
	color:#f2e8d1;
	border-color:#85631e;
}

/* List-style dashboard */
.dash-list-view{
display:flex;
flex-direction:column;
gap:12px;
max-width:720px;
margin:0 auto;
}
.dash-item{
background:#fff;
border-radius:14px;
box-shadow:0 6px 16px rgba(0,0,0,0.08);
overflow:hidden;
transition:box-shadow 0.2s ease;
}
.dash-item[open]{
box-shadow:0 10px 24px rgba(184,134,11,0.15);
}
.dash-item summary{
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
font-weight:700;
}
.dash-item summary::-webkit-details-marker{ display:none; }
.dash-item .sum-left{
display:flex;
align-items:center;
gap:10px;
}
.dash-item i{
color:#b8860b;
font-size:18px;
}
.chevron{
font-size:18px;
transition:transform 0.2s ease;
}
.dash-item[open] .chevron{
transform:rotate(90deg);
}
.dash-body{
padding:0 16px 16px 16px;
display:flex;
flex-direction:column;
gap:10px;
}
.dash-body p{
color:#555;
font-size:14px;
margin:0;
}
body.dark-mode .dash-item{
background:#1f1f1f;
box-shadow:0 6px 18px rgba(0,0,0,0.4);
}
body.dark-mode .dash-body p{
color:#c8c8c8;
}
body.dark-mode .dash-actions.duo-cards .dash-btn{
	background:linear-gradient(135deg, #2b2414 0%, #20180e 100%);
	color:#f2e8d5;
	border-color:#6e5625;
	box-shadow:0 8px 18px rgba(0,0,0,0.35);
}
body.dark-mode .dash-actions.duo-cards .dash-btn i{
	color:#d4af37;
}
body.dark-mode .women-icon{
	color:#d4af37;
}
body.dark-mode .dash-btn-sub{
	color:#cbb88e;
}
.dash-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.dash-actions.duo-cards .dash-btn{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;
	min-width:140px;
	background:linear-gradient(135deg, #fff5d8 0%, #f2d589 100%);
	color:#3b2f1f;
	border:1px solid rgba(184,134,11,0.35);
	box-shadow:0 8px 18px rgba(184,134,11,0.18);
}

.dash-actions.duo-cards .dash-btn i{
	font-size:18px;
	color:#b8860b;
}

.women-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:20px;
	height:20px;
	color:#b8860b;
}

.women-icon svg{
	width:100%;
	height:100%;
	display:block;
}

.dash-btn-title{
	font-size:13px;
	font-weight:800;
	letter-spacing:0.2px;
}

.dash-btn-sub{
	font-size:11px;
	font-weight:600;
	color:#6b5b3b;
}

.dash-actions.one-column{
	flex-direction:column;
	flex-wrap:nowrap;
	max-width:220px;
	margin:0 auto;
}

.dash-actions.one-column .dash-btn{
	width:100%;
}

.one-column-pays{
	align-items:center;
}

.one-column-pays .pay-chip{
	display:flex;
	width:100%;
	max-width:420px;
	justify-content:center;
	text-align:center;
	margin:0 auto;
}

.dash-btn{
padding:9px 14px;
border:none;
border-radius:10px;
background:linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
color:white;
cursor:pointer;
font-weight:700;
font-size:13px;
box-shadow:0 4px 12px rgba(184,134,11,0.3);
transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(184,134,11,0.35);
}
.dash-btn:active{
transform:translateY(0);
}
.pay-chip{
display:inline-flex;
align-items:center;
padding:6px 10px;
background:#f0f0f0;
border-radius:12px;
font-weight:700;
font-size:12px;
}
body.dark-mode .pay-chip{
background:#2a2a2a;
color:#eee;
}
.dash-note{
font-size:12px;
color:#888;
margin:4px 0 0;
}

.track-form.one-column{
	flex-direction:column;
	align-items:stretch;
	justify-content:flex-start;
	width:min(100%, 520px);
	max-width:520px;
	margin:0 auto;
}

.track-form.one-column input,
.track-form.one-column .dash-btn{
	width:100%;
}

body.dark-mode .dash-note{ color:#aaa; }

@media(min-width:992px){
	.dash-item .dash-body{
		text-align:center;
		align-items:center;
	}
}

@media(max-width:768px){
	.dashboard{
		padding:86px 14px 36px;
	}
	.dash-list-view{
		max-width:100%;
	}
	.track-form.one-column{
		width:100%;
		max-width:100%;
	}
	.track-result{
		max-width:100%;
	}
	.tracked-order-card{
		padding:10px;
		border-left-width:3px;
	}
	.two-column-mobile{
		flex-direction:row;
		flex-wrap:wrap;
		max-width:100%;
		gap:8px;
		justify-content:space-between;
	}
	.two-column-mobile .dash-btn{
		flex:1 1 48%;
		min-width:0;
		width:100%;
		padding:7px 4px;
		font-size:10px;
		border-radius:8px;
		white-space:nowrap;
	}
	.two-column-mobile .dash-btn.full-mobile{
		flex:1 1 100%;
	}
	.dash-actions.duo-cards .dash-btn{
		min-width:0;
	}
	.dash-actions.duo-cards .dash-btn i{
		font-size:14px;
	}
	.women-icon{
		width:16px;
		height:16px;
	}
	.dash-btn-sub{
		font-size:9px;
	}
	#contact-option .dash-actions.one-column{
		flex-direction:row;
		flex-wrap:nowrap;
		max-width:100%;
		gap:8px;
	}
	#contact-option .dash-actions.one-column .dash-btn{
		width:100%;
		padding:8px 6px;
		font-size:11px;
		border-radius:8px;
	}
	.three-column-mobile{
		flex-direction:row;
		flex-wrap:nowrap;
		max-width:100%;
		gap:8px;
		justify-content:space-between;
	}
	.three-column-mobile .dash-btn{
		flex:1 1 0;
		min-width:0;
		width:100%;
		padding:7px 4px;
		font-size:10px;
		border-radius:8px;
		white-space:nowrap;
	}
}

/* Contact + footer for dashboard */
.dashboard-contact{
padding:50px 20px;
text-align:center;
}
.contact-blocks{
display:flex;
gap:16px;
flex-wrap:wrap;
justify-content:center;
}
.contact-block{
display:flex;
align-items:center;
gap:8px;
padding:10px 14px;
border-radius:10px;
background:#fff;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
.contact-block a{ color:inherit; text-decoration:none; font-weight:600; }
body.dark-mode .contact-block{
background:#1f1f1f;
box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.foot-bar{
padding:20px;
text-align:center;
background:linear-gradient(135deg, #f6f1e6 0%, #efe4cf 100%);
color:#2f2a20;
border-top:1px solid rgba(184,134,11,0.22);
}
.foot-bar .foot-social{
display:flex;
gap:14px;
justify-content:center;
margin-bottom:10px;
}
.foot-bar a{ color:#2f2a20; font-size:18px; }

.foot-meta{
display:flex;
justify-content:center;
gap:16px;
flex-wrap:wrap;
margin-bottom:8px;
}

.foot-meta a{
font-size:13px;
text-decoration:none;
color:inherit;
display:inline-flex;
align-items:center;
gap:6px;
}

.foot-links{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
flex-wrap:wrap;
margin-bottom:8px;
font-size:13px;
}

.foot-links a{
text-decoration:none;
color:inherit;
}

.foot-links a:hover{
color:#b8860b;
}

.foot-note{
font-size:12px;
opacity:0.9;
margin-top:6px;
}

body.dark-mode .foot-bar{
background:#0b0b0b;
color:#eee;
border-top-color:#222;
}

body.dark-mode .foot-bar a{
color:#eee;
}

body.dark-mode .foot-links a{
color:#eee;
}

body.dark-mode .foot-links a:hover{
color:#d4af37;
}
/* PRODUCTS */
.products{
padding:100px 50px;
text-align:center;
transition: all 0.s ease;
background:var(--bg);
scroll-margin-top:90px;
}

body.dark-mode .products{
background:#1a1a1a;
}

.products h2{
font-size:40px;
margin-bottom:20px;
animation: fadeIn 1s ease;
}

.product-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
margin-top:40px;
align-items:stretch;
}

.product{
background:var(--surface);
padding:8px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
overflow:hidden;
position:relative;
opacity:0;
display:flex;
flex-direction:column;
height:100%;
}

.product.animate-in{
animation: fadeInScale 0.6s ease forwards;
}

@keyframes fadeInScale{
from{
opacity:0;
transform:translateY(30px) scale(0.9);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}

body.dark-mode .product{
background:#2a2a2a;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
}

.product:hover{
transform:translateY(-15px);
box-shadow:0 15px 30px rgba(184,134,11,0.2);
}

.product img{
width:100%;
height:150px;
object-fit:cover;
border-radius:10px;
transition: transform 0.3s ease;
}

.product h3{
font-family:'Cinzel', serif;
font-size:18px;
margin-top:12px;
margin-bottom:4px;
font-weight:700;
letter-spacing:0.6px;
text-transform:capitalize;
color:#3b2f1f;
line-height:1.2;
text-align:center;
}

.product h6{
font-size:12px;
margin-top:2px;
}

.product-meta{
margin-top:5px;
display:flex;
justify-content:center;
align-items:center;
gap:8px;
font-size:11px;
font-weight:600;
color:#756a57;
letter-spacing:0.15px;
min-height:16px;
}

.product-meta span{
display:inline-flex;
align-items:center;
line-height:1.2;
}

.product-meta span + span::before{
content:"|";
opacity:0.55;
margin-right:8px;
}

body.dark-mode .product-meta{
color:#cfcfcf;
}

body.dark-mode .product h3{
color:#f2e8d5;
}

.product p{
font-size:13px;
margin-top:6px;
}

.price-wrap{
	display:flex;
	align-items:baseline;
	justify-content:center;
	gap:8px;
	margin-top:8px;
	margin-bottom:10px;
}

.price-wrap .old-price{
	font-size:12px;
	color:#999;
	text-decoration:line-through;
}

.price-wrap .new-price{
	font-size:14px;
	color:#b8860b;
	font-weight:700;
}

.product:hover img{
transform: scale(1.05);
}

/* Enhanced hover/touch zoom */
.img-wrap:hover .main-img,
.product:focus-within .img-wrap .main-img{
	transform:scale(1.08) translateY(-6px);
}

@media(max-width:768px){
	.product:active .img-wrap .main-img{
		transform:scale(1.05) translateY(-4px);
	}
}

.img-wrap{
	width:100%;
	aspect-ratio: 1 / 1;
	position:relative;
	overflow:hidden;
	border-radius:10px;
	cursor:pointer;
}
.product-badges{
	position:absolute;
	top:0;
	left:0;
	z-index:6;
	pointer-events:none;
}
.badge{
	display:inline-block;
	padding:4px 8px;
	border-radius:8px;
	font-size:10px;
	font-weight:700;
	color:white;
	box-shadow:0 6px 14px rgba(0,0,0,0.18);
	background:linear-gradient(135deg, #f8e3b5 0%, #f0c971 45%, #d79a0a 100%);
	border:1px solid rgba(255,255,255,0.2);
	transition:transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.badge.discount{
	position:absolute;
	top:11px;
	left:-36px;
	min-width:118px;
	padding:6px 0;
	border-radius:0;
	text-align:center;
	letter-spacing:0.45px;
	font-size:11px;
	font-weight:800;
	background:linear-gradient(135deg, #f8d98d 0%, #e3b347 48%, #bb7d12 100%);
	color:#2a1b00;
	border:1px solid rgba(83,50,0,0.24);
	box-shadow:0 8px 16px rgba(0,0,0,0.22);
	transform:rotate(-45deg);
	transform-origin:center;
	text-transform:uppercase;
}

@media(min-width:992px){
	.badge.discount{
		top:14px;
		left:-46px;
		min-width:144px;
		padding:8px 0;
		font-size:13px;
		letter-spacing:0.55px;
	}
}

.img-wrap img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
	display:block;
}
.img-wrap .main-img{
	position:absolute;
	z-index:1;
	opacity:1;
	transform:translateY(0) scale(1);
}

.img-wrap .main-img.is-brightened{
	filter:brightness(1.12) contrast(1.04) saturate(1.02);
}

.img-wrap .main-img.flash{
	animation: flashBlink 0.35s ease;
}

@keyframes flashBlink{
	from{ opacity:0.72; }
	to{ opacity:1; }
}

.img-wrap.animating .main-img{
	animation: imageSlideUp 0.5s ease;
}

@keyframes imageSlideUp{
	from{
		opacity:0;
		transform:translateY(18px) scale(0.98);
	}
	to{
		opacity:1;
		transform:translateY(0) scale(1);
	}
}

.product button{
margin-top:auto;
padding:8px 12px;
background:linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-bg) 100%);
color:var(--btn-text);
border:1px solid var(--accent-strong);
border-radius:20px;
cursor:pointer;
font-weight:bold;
font-size:12px;
transition: all 0.3s ease;
box-shadow: 0 6px 14px var(--btn-shadow);
position:relative;
overflow:hidden;
width:100%;
}

.product button::after{
content:'';
position:absolute;
top:50%;
left:50%;
width:0;
height:0;
background:rgba(255,255,255,0.3);
border-radius:50%;
transform:translate(-50%, -50%);
transition: width 0.4s, height 0.4s;
}

.product button:hover::after{
width:300px;
height:300px;
}

.product button:hover{
transform:translateY(-2px);
box-shadow: 0 5px 20px rgba(184,134,11,0.4);
}

.product button:active{
transform:translateY(0);
}

body.product-detail-open{
	overflow:hidden;
}

.product-detail-view{
	position:fixed;
	inset:0;
	z-index:1700;
	background:rgba(11,11,11,0.82);
	backdrop-filter:blur(4px);
	padding:84px 16px 16px;
	overflow:auto;
}

.product-detail-view[hidden]{
	display:none !important;
}

.product-detail-shell{
	width:min(980px, 100%);
	margin:0 auto;
	background:var(--surface);
	border-radius:18px;
	border:1px solid rgba(184,134,11,0.25);
	box-shadow:0 18px 40px rgba(0,0,0,0.32);
	padding:14px;
}

.product-detail-back{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:9px 14px;
	border:1px solid rgba(184,134,11,0.55);
	border-radius:999px;
	background:#fff8e7;
	color:#3c2d0b;
	font-size:13px;
	font-weight:700;
	cursor:pointer;
	transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.product-detail-back:hover{
	transform:translateY(-1px);
	box-shadow:0 8px 16px rgba(0,0,0,0.14);
}

.product-detail-content{
	margin-top:12px;
	display:grid;
	grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
	gap:14px;
}

.product-detail-gallery{
	display:flex;
	flex-direction:column;
	gap:10px;
}

.product-detail-main-wrap{
	position:relative;
}

.product-detail-main-img{
	width:100%;
	aspect-ratio:1 / 1;
	object-fit:cover;
	border-radius:14px;
	border:1px solid rgba(184,134,11,0.3);
	background:#f7f7f7;
}

.product-detail-nav{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:34px;
	height:34px;
	border:none;
	border-radius:50%;
	background:rgba(0,0,0,0.58);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

.product-detail-nav.prev{
	left:8px;
}

.product-detail-nav.next{
	right:8px;
}

.product-detail-image-count{
	position:absolute;
	right:10px;
	bottom:10px;
	padding:4px 8px;
	border-radius:999px;
	background:rgba(0,0,0,0.6);
	color:#fff;
	font-size:11px;
	font-weight:700;
}

.product-detail-thumbs{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:8px;
}

.product-detail-thumb{
	padding:0;
	border:2px solid transparent;
	border-radius:10px;
	overflow:hidden;
	cursor:pointer;
	background:#fff;
	transition:border-color 0.2s ease, transform 0.2s ease;
}

.product-detail-thumb img{
	display:block;
	width:100%;
	height:94px;
	object-fit:cover;
}

.product-detail-thumb.active{
	border-color:#b8860b;
}

.product-detail-thumb:hover{
	transform:translateY(-1px);
}

.product-detail-info{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	text-align:left;
	gap:10px;
	padding:6px 4px;
}

.product-detail-badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:5px 10px;
	border-radius:999px;
	font-size:11px;
	font-weight:800;
	background:linear-gradient(135deg, #f8d98d 0%, #e3b347 48%, #bb7d12 100%);
	color:#2a1b00;
}

.product-detail-info h2{
	margin:0;
	font-family:'Cinzel', serif;
	font-size:30px;
	color:#3b2f1f;
}

.product-detail-meta{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0;
	color:#6f6554;
	font-size:14px;
	font-weight:600;
}

.product-detail-meta span + span::before{
	content:"|";
	margin-right:8px;
	opacity:0.45;
}

.product-detail-price{
	display:flex;
	align-items:center;
	gap:10px;
}

.product-detail-price .old-price{
	font-size:16px;
	color:#8f8f8f;
	text-decoration:line-through;
}

.product-detail-price .new-price{
	font-size:24px;
	color:#b8860b;
	font-weight:800;
}

.product-detail-description{
	margin:0;
	font-size:13px;
	line-height:1.5;
	color:#4e4332;
}

.product-detail-highlights{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:6px;
	width:100%;
}

.product-detail-highlights span{
	padding:6px 8px;
	border-radius:8px;
	font-size:12px;
	background:#f6efde;
	color:#45361d;
}

.product-detail-highlights strong{
	font-weight:700;
}

.product-detail-highlights em{
	font-style:normal;
	font-weight:700;
}

.product-detail-features{
	margin:0;
	padding:0 0 0 16px;
	display:grid;
	grid-template-columns:1fr;
	gap:4px;
	width:100%;
}

.product-detail-features li{
	font-size:12px;
	color:#3f3526;
}

.product-detail-actions{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
	width:100%;
}

.product-detail-qty{
	grid-column:1 / -1;
	display:inline-flex;
	align-items:center;
	justify-self:flex-start;
	border:1px solid rgba(184,134,11,0.35);
	border-radius:999px;
	background:#f7efdd;
	padding:4px;
}

.product-detail-qty button{
	width:28px;
	height:28px;
	border:none;
	border-radius:50%;
	background:#b8860b;
	color:#fff;
	font-size:16px;
	font-weight:700;
	cursor:pointer;
}

.product-detail-qty span{
	min-width:34px;
	text-align:center;
	font-size:14px;
	font-weight:700;
	color:#3f2e04;
}

.product-detail-add-btn{
	padding:10px 16px;
	background:linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-bg) 100%);
	color:var(--btn-text);
	border:1px solid var(--accent-strong);
	border-radius:24px;
	font-weight:700;
	cursor:pointer;
}

.product-detail-buy-btn{
	padding:10px 16px;
	background:#262626;
	color:#fff;
	border:1px solid #262626;
	border-radius:24px;
	font-weight:700;
	cursor:pointer;
}

body.dark-mode .product-detail-shell{
	background:#232323;
	border-color:#6e5625;
}

body.dark-mode .product-detail-back{
	background:#2a2a2a;
	color:#f1e7d1;
	border-color:#836525;
}

body.dark-mode .product-detail-main-img{
	background:#171717;
	border-color:#4b3e24;
}

body.dark-mode .product-detail-nav{
	background:rgba(0,0,0,0.7);
}

body.dark-mode .product-detail-thumb{
	background:#1a1a1a;
}

body.dark-mode .product-detail-info h2{
	color:#f2e8d5;
}

body.dark-mode .product-detail-meta{
	color:#ccc;
}

body.dark-mode .product-detail-description{
	color:#d0c5b3;
}

body.dark-mode .product-detail-highlights span{
	background:#2d2618;
	color:#eadcc2;
}

body.dark-mode .product-detail-features li{
	color:#d7cab0;
}

body.dark-mode .product-detail-qty{
	background:#2b2416;
	border-color:#785f2a;
}

body.dark-mode .product-detail-qty span{
	color:#f1e2c0;
}

body.dark-mode .product-detail-buy-btn{
	background:#151515;
	border-color:#383838;
}

@media(max-width:768px){
	.product-detail-view{
		padding:74px 10px 12px;
	}
	.product-detail-shell{
		padding:10px;
		border-radius:14px;
	}
	.product-detail-content{
		grid-template-columns:1fr;
		gap:10px;
	}
	.product-detail-thumb img{
		height:80px;
	}
	.product-detail-nav{
		width:30px;
		height:30px;
	}
	.product-detail-image-count{
		font-size:10px;
	}
	.product-detail-info h2{
		font-size:24px;
	}
	.product-detail-price .new-price{
		font-size:20px;
	}
	.product-detail-highlights{
		grid-template-columns:1fr;
	}
	.product-detail-actions{
		grid-template-columns:1fr;
	}
}

/* REVIEWS */
.reviews{
background:var(--surface);
padding:80px 50px;
text-align:left;
transition: all 0.4s ease;
display:flex;
flex-direction:column;
gap:18px;
align-items:center;
}

body.dark-mode .reviews{
background:#1a1a1a;
}

.reviews h2{
font-size:40px;
margin-bottom:10px;
text-align:center;
width:100%;
}

.reviews-shell{
width:100%;
max-width:980px;
display:flex;
flex-direction:column;
gap:18px;
}

.review-list{
display:flex;
flex-direction:column;
gap:14px;
}

.review-empty{
margin:0;
padding:14px 16px;
border-radius:12px;
border:1px dashed rgba(184,134,11,0.3);
background:#fff8e7;
color:#7b5b21;
font-size:14px;
text-align:center;
}

.review-toggle{
align-self:center;
padding:8px 18px;
border-radius:999px;
border:1px solid var(--accent-strong);
background:linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-bg) 100%);
color:var(--btn-text);
font-weight:700;
cursor:pointer;
box-shadow:0 8px 18px var(--btn-shadow);
transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.review-toggle:hover{
transform:translateY(-1px);
box-shadow:0 12px 22px var(--btn-shadow);
}


.review-box{
margin:0;
width:100%;
max-width:840px;
padding:22px;
background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
box-shadow:0 5px 18px rgba(0,0,0,0.1);
border-radius:18px;
transition: all 0.3s ease;
border:1px solid rgba(184,134,11,0.18);
opacity:0;
height:100%;
display:flex;
flex-direction:column;
gap:14px;
}

body.dark-mode .review-box{
background:linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
box-shadow:0 5px 15px rgba(0,0,0,0.3);
border-color:rgba(212,175,55,0.25);
}

.review-box.animate-in{
animation: slideInLeft 0.6s ease forwards;
}

@keyframes slideInLeft{
from{
opacity:0;
transform:translateX(-50px);
}
to{
opacity:1;
transform:translateX(0);
}
}

.review-box:hover{
transform:translateY(-2px);
box-shadow:0 14px 28px rgba(184,134,11,0.18);
}

.review-header{
display:flex;
align-items:center;
gap:14px;
}

.review-meta-block{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:6px;
}

.review-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.review-identity{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}

.review-avatar{
width:52px;
height:52px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:18px;
color:#fff;
background:linear-gradient(135deg, #0f5b4d 0%, #0b3b35 100%);
border:2px solid rgba(255,255,255,0.45);
box-shadow:0 6px 14px rgba(0,0,0,0.12);
flex-shrink:0;
text-shadow:0 1px 2px rgba(0,0,0,0.35);
}

.review-avatar img{
width:100%;
height:100%;
border-radius:50%;
object-fit:cover;
display:block;
}

.review-avatar.is-purple{
background:linear-gradient(135deg, #6a22b5 0%, #3b0d6e 100%);
}

.review-avatar.is-green{
background:linear-gradient(135deg, #1c7a4f 0%, #0f4b31 100%);
}

.review-title{
flex:1;
min-width:0;
}

.review-title h4{
margin:0 0 6px;
font-size:16px;
font-weight:700;
color:#2f2410;
}

.review-badge{
padding:3px 8px;
border-radius:999px;
background:#f2e8d1;
color:#3b2f1f;
font-size:10px;
font-weight:800;
letter-spacing:0.3px;
text-transform:uppercase;
}

.review-menu{
border:none;
background:transparent;
color:#7a7a7a;
font-size:18px;
cursor:pointer;
padding:6px;
border-radius:50%;
transition:background 0.2s ease, color 0.2s ease;
}

.review-menu:hover{
background:rgba(0,0,0,0.06);
color:#333;
}

.review-rating{
display:flex;
align-items:center;
gap:10px;
font-size:13px;
color:#666;
}

.review-score{
font-size:12px;
font-weight:700;
color:#2f2410;
background:#f4f4f4;
padding:2px 6px;
border-radius:999px;
}

.stars{
display:flex;
gap:2px;
line-height:1;
}

.star{
font-size:14px;
color:#cfcfcf;
}

.star.filled{
color:#1aa64a;
}

.review-date{
font-size:12px;
color:#7a7a7a;
}

.review-msg{
font-size:15px;
margin:0;
color:#4d4d4d;
line-height:1.6;
overflow-wrap:anywhere;
word-break:break-word;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.review-msg.is-expanded{
display:block;
overflow:visible;
}

.review-expand-btn{
align-self:flex-start;
border:none;
background:none;
color:#b8860b;
font-weight:700;
font-size:12px;
cursor:pointer;
padding:2px 0;
}

.review-expand-btn:hover{
text-decoration:underline;
}

.review-divider{
height:1px;
background:linear-gradient(90deg, rgba(184,134,11,0.08) 0%, rgba(184,134,11,0.35) 50%, rgba(184,134,11,0.08) 100%);
border-radius:999px;
}

.review-actions-row{
display:flex;
align-items:center;
gap:10px;
margin-top:4px;
}

.review-action-btn{
border:none;
background:none;
color:#6b6b6b;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
border-radius:10px;
transition:background 0.2s ease, color 0.2s ease;
font-size:12px;
font-weight:600;
}

.review-action-btn:hover{
background:rgba(0,0,0,0.06);
color:#2f2410;
}

.review-action-btn.is-active{
color:#1a73e8;
}

.review-action-btn.is-reported{
color:#b43b3b;
}

.review-like-count{
font-weight:800;
}

.review-form-card{
border-radius:18px;
padding:18px;
background:linear-gradient(135deg, #fff8e7 0%, #fff2cc 100%);
border:1px solid rgba(184,134,11,0.25);
box-shadow:0 10px 24px rgba(184,134,11,0.12);
display:flex;
flex-direction:column;
gap:12px;
}

.review-form-card h3{
margin:0;
font-size:18px;
color:#3b2f1f;
}

#review-form{
display:flex;
flex-direction:column;
gap:10px;
}

.review-form-row{
display:flex;
gap:10px;
flex-wrap:wrap;
}


#review-name,
#review-rating,
#review-message{
padding:10px 12px;
border-radius:12px;
border:1px solid #e0d3b1;
font-size:14px;
background:#fffdf8;
transition:border-color 0.2s ease, box-shadow 0.2s ease;
}

#review-name{
flex:1 1 180px;
}

#review-rating{
display:none;
}

.review-star-picker{
flex:0 0 200px;
display:flex;
align-items:center;
gap:6px;
padding:8px 10px;
border-radius:12px;
border:1px solid #e0d3b1;
background:#fffdf8;
}

.review-star{
border:none;
background:none;
font-size:16px;
cursor:pointer;
color:#cfcfcf;
padding:0;
line-height:1;
transition:transform 0.15s ease, color 0.15s ease;
}

.review-star.is-active{
color:#1aa64a;
}

.review-star:hover{
transform:translateY(-1px) scale(1.05);
}

.review-star-score{
margin-left:auto;
font-size:12px;
font-weight:700;
color:#2f2410;
background:#f4f4f4;
padding:2px 6px;
border-radius:999px;
}

#review-message{
min-height:90px;
resize:vertical;
}

#review-name:focus,
#review-rating:focus,
#review-message:focus{
border-color:#b8860b;
box-shadow:0 0 0 3px rgba(184,134,11,0.18);
outline:none;
background:#fff;
}

.review-form-actions{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

#review-counter{
font-size:12px;
color:#8b7a55;
font-weight:600;
}

.review-submit-btn{
padding:9px 18px;
border-radius:999px;
border:1px solid var(--accent-strong);
background:linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-bg) 100%);
color:var(--btn-text);
font-weight:700;
cursor:pointer;
box-shadow:0 8px 18px var(--btn-shadow);
transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.review-submit-btn:hover{
transform:translateY(-1px);
box-shadow:0 12px 22px var(--btn-shadow);
}

.review-helpful{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
font-size:13px;
color:#6a6a6a;
}

.review-actions{
display:flex;
gap:8px;
}

.review-btn{
border:1px solid #cfcfcf;
background:#fff;
color:#555;
padding:6px 16px;
border-radius:14px;
font-weight:600;
cursor:pointer;
transition:all 0.2s ease;
}

.review-btn:hover{
border-color:#b8860b;
color:#3b2a00;
box-shadow:0 6px 14px rgba(0,0,0,0.08);
}

.review-reply{
background:#f7f7f7;
border:1px solid #e6e6e6;
border-radius:14px;
padding:14px 16px;
display:flex;
flex-direction:column;
gap:8px;
color:#4a4a4a;
}

.review-reply p{
margin:0;
font-size:14px;
line-height:1.55;
}

.reply-header{
display:flex;
justify-content:space-between;
gap:12px;
font-size:13px;
color:#6a6a6a;
}

.reply-header strong{
color:#3b2f1f;
font-weight:700;
}

.review-comments{
border-top:1px dashed rgba(0,0,0,0.12);
padding-top:12px;
display:flex;
flex-direction:column;
gap:10px;
}

.comment-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.comment-title{
display:flex;
align-items:center;
gap:10px;
}

.comment-title h5{
margin:0;
font-size:14px;
color:#3b2f1f;
}

.comment-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:24px;
height:22px;
padding:0 8px;
border-radius:999px;
background:#f2e8d1;
color:#3b2f1f;
font-size:12px;
font-weight:700;
}

.comment-sort{
display:flex;
align-items:center;
gap:6px;
font-size:12px;
color:#6b6b6b;
}

.comment-sort-select{
padding:6px 8px;
border-radius:8px;
border:1px solid #ddd;
background:#fff;
font-size:12px;
cursor:pointer;
}

.comment-list{
display:flex;
flex-direction:column;
gap:10px;
}

.comment-guidelines{
background:#faf8f1;
border:1px solid #eee2c7;
border-radius:12px;
padding:8px 10px;
color:#6b5b3b;
font-size:12px;
}

.comment-guidelines summary{
cursor:pointer;
font-weight:700;
}

.comment-guidelines p{
margin:6px 0 0;
line-height:1.5;
}

.comment-item{
background:#fff;
border:1px solid #e8e8e8;
border-radius:12px;
padding:10px 12px;
display:flex;
flex-direction:column;
gap:6px;
}

.comment-meta{
display:flex;
justify-content:space-between;
gap:10px;
font-size:12px;
color:#777;
}

.comment-author{
display:flex;
align-items:center;
gap:8px;
min-width:0;
}

.comment-avatar{
width:26px;
height:26px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#ececec;
color:#4b4b4b;
font-weight:700;
font-size:12px;
flex-shrink:0;
}

.comment-author strong{
font-weight:700;
color:#2f2410;
}

.comment-badge{
padding:2px 6px;
border-radius:999px;
background:#eef6ff;
color:#2b5ca7;
font-size:10px;
font-weight:700;
letter-spacing:0.2px;
text-transform:uppercase;
}

.comment-date{
color:#8a8a8a;
}

.comment-text{
margin:0;
font-size:13px;
color:#4a4a4a;
line-height:1.5;
overflow-wrap:anywhere;
word-break:break-word;
}

.comment-actions{
display:flex;
align-items:center;
gap:10px;
margin-top:2px;
font-size:12px;
}

.comment-action-btn{
border:none;
background:none;
color:#6b6b6b;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:6px;
padding:4px 6px;
border-radius:8px;
transition:background 0.2s ease, color 0.2s ease;
}

.comment-action-btn:hover{
background:rgba(0,0,0,0.06);
color:#2f2410;
}

.comment-action-btn.is-liked{
color:#1a73e8;
font-weight:700;
}

.comment-like-count{
font-weight:700;
}

.comment-form{
display:grid;
grid-template-columns:1fr;
gap:8px;
}

.comment-field-row{
display:flex;
align-items:center;
gap:10px;
}

.comment-counter{
margin-left:auto;
font-size:11px;
color:#8a8a8a;
font-weight:600;
}

.comment-form input,
.comment-form textarea{
padding:8px 10px;
border:1px solid #ddd;
border-radius:10px;
font-size:13px;
background:#fafafa;
transition:border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-form input:focus,
.comment-form textarea:focus{
border-color:#b8860b;
box-shadow:0 0 0 3px rgba(184,134,11,0.18);
outline:none;
background:#fff;
}

.comment-submit{
justify-self:flex-start;
padding:7px 16px;
border-radius:999px;
border:1px solid var(--accent-strong);
background:linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-bg) 100%);
color:var(--btn-text);
font-weight:700;
cursor:pointer;
font-size:12px;
box-shadow:0 6px 14px var(--btn-shadow);
transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.comment-submit:hover{
transform:translateY(-1px);
box-shadow:0 10px 18px var(--btn-shadow);
}

.comment-form-actions{
display:flex;
align-items:center;
gap:10px;
}

.comment-clear{
padding:6px 14px;
border-radius:999px;
border:1px solid #d6d6d6;
background:#fff;
color:#6b6b6b;
font-weight:700;
font-size:12px;
cursor:pointer;
transition:all 0.2s ease;
}

.comment-clear:hover{
border-color:#b8860b;
color:#3b2f1f;
}

.comment-empty{
font-size:12px;
color:#8a8a8a;
}

body.dark-mode .review-title h4{
color:#f2e8d5;
}

body.dark-mode .review-badge{
background:#3a2b12;
color:#f2e0b8;
}

body.dark-mode .review-menu{
color:#cfcfcf;
}

body.dark-mode .review-menu:hover{
background:rgba(255,255,255,0.08);
color:#fff;
}

body.dark-mode .review-rating{
color:#c9c9c9;
}

body.dark-mode .review-date{
color:#a7a7a7;
}

body.dark-mode .review-msg{
color:#d3d3d3;
}

body.dark-mode .review-expand-btn{
color:#d4af37;
}

body.dark-mode .review-score{
background:#2a2a2a;
color:#f2e8d5;
}

body.dark-mode .review-action-btn{
color:#bdbdbd;
}

body.dark-mode .review-action-btn:hover{
background:rgba(255,255,255,0.08);
color:#fff;
}

body.dark-mode .review-action-btn.is-active{
color:#7fb4ff;
}

body.dark-mode .review-action-btn.is-reported{
color:#ff9b9b;
}

body.dark-mode .review-empty{
background:#2a2416;
border-color:#4a3a1b;
color:#e3d3a6;
}

body.dark-mode .review-toggle{
box-shadow:0 8px 18px rgba(0,0,0,0.4);
}

body.dark-mode .review-form-card{
background:linear-gradient(135deg, #2b2414 0%, #231d12 100%);
border-color:#6e5625;
box-shadow:0 12px 24px rgba(0,0,0,0.35);
}

body.dark-mode .review-form-card h3{
color:#f2e8d5;
}

body.dark-mode #review-name,
body.dark-mode #review-message{
background:#1f1f1f;
border-color:#3b3b3b;
color:#e0e0e0;
}

body.dark-mode .review-star-picker{
background:#1f1f1f;
border-color:#3b3b3b;
}

body.dark-mode .review-star{
color:#555;
}

body.dark-mode .review-star.is-active{
color:#2ecc71;
}

body.dark-mode .review-star-score{
background:#2a2a2a;
color:#f2e8d5;
}


body.dark-mode #review-name:focus,
body.dark-mode #review-rating:focus,
body.dark-mode #review-message:focus{
border-color:#d4af37;
box-shadow:0 0 0 3px rgba(212,175,55,0.2);
background:#202020;
}

body.dark-mode #review-counter{
color:#bba982;
}

body.dark-mode .review-btn{
background:#1f1f1f;
border-color:#3b3b3b;
color:#d6d6d6;
}

body.dark-mode .review-btn:hover{
border-color:#d4af37;
color:#fff;
}

body.dark-mode .review-reply{
background:#202020;
border-color:#2f2f2f;
color:#d8d8d8;
}

body.dark-mode .reply-header{
color:#b5b5b5;
}

body.dark-mode .reply-header strong{
color:#f2e8d5;
}

body.dark-mode .review-comments{
border-top-color:rgba(255,255,255,0.12);
}

body.dark-mode .comment-title h5{
color:#f2e8d5;
}

body.dark-mode .comment-count{
background:#3a2b12;
color:#f2e0b8;
}

body.dark-mode .comment-sort{
color:#c9c9c9;
}

body.dark-mode .comment-sort-select{
background:#1f1f1f;
border-color:#3b3b3b;
color:#d6d6d6;
}

body.dark-mode .comment-guidelines{
background:#2a2416;
border-color:#4a3a1b;
color:#d3c7a9;
}

body.dark-mode .comment-item{
background:#1a1a1a;
border-color:#2e2e2e;
}

body.dark-mode .comment-meta{
color:#b9b9b9;
}

body.dark-mode .comment-author strong{
color:#f2e8d5;
}

body.dark-mode .comment-avatar{
background:#2b2b2b;
color:#ddd;
}

body.dark-mode .comment-badge{
background:#1f2a38;
color:#a8c5ff;
}

body.dark-mode .comment-text{
color:#d4d4d4;
}

body.dark-mode .comment-action-btn{
color:#bdbdbd;
}

body.dark-mode .comment-action-btn:hover{
background:rgba(255,255,255,0.08);
color:#fff;
}

body.dark-mode .comment-action-btn.is-liked{
color:#7fb4ff;
}

body.dark-mode .comment-form input,
body.dark-mode .comment-form textarea{
background:#1f1f1f;
border-color:#3b3b3b;
color:#e0e0e0;
}

body.dark-mode .comment-form input:focus,
body.dark-mode .comment-form textarea:focus{
border-color:#d4af37;
box-shadow:0 0 0 3px rgba(212,175,55,0.2);
background:#202020;
}

body.dark-mode .comment-counter{
color:#b0b0b0;
}

body.dark-mode .comment-clear{
background:#1f1f1f;
border-color:#3b3b3b;
color:#c9c9c9;
}

body.dark-mode .comment-clear:hover{
border-color:#d4af37;
color:#fff;
}

body.dark-mode .comment-empty{
color:#a7a7a7;
}


/* TESTERS SECTION */
.testers{
padding:100px 50px;
text-align:center;
background:linear-gradient(135deg, #f9f4f0 0%, #ffffff 100%);
transition: all 0.4s ease;
scroll-margin-top:90px;
}

body.dark-mode .testers{
background:linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.testers h2{
font-size:45px;
margin-bottom:15px;
animation: fadeIn 1s ease;
}

.testers-subtitle{
font-size:18px;
color:#888;
margin-bottom:50px;
animation: slideInUp 1s ease;
}

body.dark-mode .testers-subtitle{
color:#aaa;
}

.testers-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:40px;
}

.tester-box{
background:var(--surface);
padding:25px;
border-radius:15px;
box-shadow:0 5px 20px rgba(184,134,11,0.15);
transition: all 0.3s ease;
position:relative;
overflow:hidden;
animation: fadeInScale 0.6s ease forwards;
border-top:4px solid #b8860b;
}

body.dark-mode .tester-box{
background:#2a2a2a;
box-shadow:0 5px 20px rgba(184,134,11,0.2);
}

.tester-badge{
position:absolute;
top:-10px;
right:0;
background:linear-gradient(135deg, var(--surface-2) 0%, var(--accent) 100%);
color:white;
padding:8px 15px;
font-size:12px;
font-weight:bold;
transform:rotate(0deg);
animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat{
0%, 100%{ transform:translateY(0px) rotate(0deg); }
50%{ transform:translateY(-5px) rotate(2deg); }
}

.tester-box i{
font-size:50px;
color:#b8860b;
margin-bottom:15px;
animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat{
0%, 100%{ transform:translateY(0px); }
50%{ transform:translateY(-10px); }
}

.tester-box h3{
font-size:18px;
color:#333;
margin:10px 0;
}

body.dark-mode .tester-box h3{
color:#e0e0e0;
}

.tester-price{
font-size:22px;
color:#b8860b;
font-weight:bold;
margin:10px 0;
}

.tester-desc{
font-size:14px;
color:#666;
margin-bottom:15px;
}

body.dark-mode .tester-desc{
color:#aaa;
}

.tester-box:hover{
transform:translateY(-12px);
box-shadow:0 15px 35px rgba(184,134,11,0.3);
}

.tester-btn{
width:100%;
padding:12px;
background:linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-bg) 100%);
color:var(--btn-text);
border:1px solid var(--accent-strong);
border-radius:8px;
cursor:pointer;
font-weight:bold;
transition: all 0.3s ease;
box-shadow: 0 6px 14px var(--btn-shadow);
position:relative;
overflow:hidden;
}

.tester-btn::before{
content:'';
position:absolute;
top:50%;
left:50%;
width:0;
height:0;
background:rgba(255,255,255,0.3);
border-radius:50%;
transform:translate(-50%, -50%);
transition: width 0.4s, height 0.4s;
}

.tester-btn:hover::before{
width:300px;
height:300px;
}

.tester-btn:hover{
transform:translateY(-2px);
box-shadow: 0 5px 20px rgba(184,134,11,0.4);
}

.tester-btn:active{
transform:translateY(0);
}

/* CONTACT */
.contact{
padding:80px 50px;
text-align:center;
background:linear-gradient(135deg, var(--bg) 0%, var(--surface) 100%);
transition: all 0.4s ease;
scroll-margin-top:90px;
}

body.dark-mode .contact{
background:linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.contact h2{
font-size:45px;
margin-bottom:15px;
animation: fadeIn 1s ease;
}

.contact-intro{
font-size:18px;
color:#888;
margin-bottom:40px;
animation: slideInUp 0.8s ease;
}

body.dark-mode .contact-intro{
color:#aaa;
}

.contact-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-bottom:60px;
}

.contact-box{
background:var(--surface);
padding:30px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
animation: fadeInScale 0.6s ease forwards;
}

body.dark-mode .contact-box{
background:#2a2a2a;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
}

.contact-box i{
font-size:35px;
color:#b8860b;
margin-bottom:15px;
animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce{
0%, 100%{ transform:translateY(0px); }
50%{ transform:translateY(-10px); }
}

.contact-box h3{
font-size:18px;
margin-bottom:10px;
color:#b8860b;
}

.contact-link{
	color:inherit;
	text-decoration:none;
	font-weight:600;
	display:block;
	width:100%;
	text-align:center;
	overflow-wrap:anywhere;
	line-height:1.35;
}

.contact-link:hover{
	color:#b8860b;
	text-decoration:underline;
}

.contact-box p{
	margin:0;
	width:100%;
}

.contact-box:hover{
transform:translateY(-10px);
box-shadow:0 15px 30px rgba(184,134,11,0.2);
}

/* SOCIAL CONTACT */
.social-contact{
margin:40px 0;
padding:40px;
background:var(--surface);
border-radius:15px;
box-shadow:0 5px 20px rgba(184,134,11,0.1);
animation: fadeInScale 0.7s ease;
}

body.dark-mode .social-contact{
background:#2a2a2a;
box-shadow:0 5px 20px rgba(184,134,11,0.2);
}

.social-contact h3{
font-size:24px;
margin-bottom:25px;
color:#b8860b;
}

.social-buttons{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.social-btn{
display:flex;
align-items:center;
gap:10px;
padding:15px 25px;
border-radius:50px;
text-decoration:none;
font-weight:bold;
transition: all 0.3s ease;
box-shadow:0 3px 15px rgba(0,0,0,0.1);
animation: slideInUp 0.6s ease;
position:relative;
overflow:hidden;
}

.social-btn::before{
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:rgba(255,255,255,0.2);
transition: left 0.3s ease;
}

.social-btn:hover::before{
left:100%;
}

.social-btn i{
font-size:20px;
transition: all 0.3s ease;
}

.whatsapp{
background:linear-gradient(135deg, var(--surface-2) 0%, var(--accent) 100%);
color:white;
}

.whatsapp:hover{
transform:translateY(-5px) scale(1.05);
box-shadow:0 8px 25px rgba(37,211,102,0.4);
}

.whatsapp:hover i{
transform:scale(1.2) rotate(10deg);
}

.instagram{
background:linear-gradient(135deg, var(--surface-2) 0%, var(--accent) 100%);
color:white;
}

.instagram:hover{
transform:translateY(-5px) scale(1.05);
box-shadow:0 8px 25px rgba(228,64,95,0.4);
}

.instagram:hover i{
transform:scale(1.2) rotate(-10deg);
}

.phone{
background:linear-gradient(135deg, var(--surface-2) 0%, var(--accent) 100%);
color:white;
}

.phone:hover{
transform:translateY(-5px) scale(1.05);
box-shadow:0 8px 25px rgba(184,134,11,0.4);
}

.phone:hover i{
transform:scale(1.2) rotate(20deg);
}

.contact-form{
max-width:600px;
margin:0 auto;
padding:40px;
background:var(--surface);
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
transition: all 0.4s ease;
animation: fadeInScale 0.8s ease;
}

body.dark-mode .contact-form{
background:#2a2a2a;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
}

.contact-form h3{
font-size:22px;
margin-bottom:20px;
color:#b8860b;
}

.form-input{
width:100%;
padding:15px;
margin:10px 0;
border:2px solid #ddd;
border-radius:10px;
font-size:16px;
transition: all 0.3s ease;
background:white;
color:#333;
}

body.dark-mode .form-input{
background:#1a1a1a;
color:#e0e0e0;
border-color:#444;
}

.form-input:focus{
outline:none;
border-color:#b8860b;
box-shadow:0 0 10px rgba(184,134,11,0.3);
transform:translateY(-2px);
}

.form-input::placeholder{
color:#aaa;
}

.submit-btn{
width:100%;
padding:15px;
margin-top:15px;
background:linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-bg) 100%);
color:var(--btn-text);
border:1px solid var(--accent-strong);
border-radius:25px;
font-size:16px;
font-weight:bold;
cursor:pointer;
transition: all 0.3s ease;
box-shadow: 0 6px 14px var(--btn-shadow);
position:relative;
overflow:hidden;
}

.submit-btn::before{
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:rgba(255,255,255,0.2);
transition: left 0.3s ease;
}

.submit-btn:hover::before{
left:100%;
}

.submit-btn:hover{
transform:translateY(-3px);
box-shadow: 0 8px 25px rgba(184,134,11,0.5);
}

.submit-btn:active{
transform:translateY(-1px);
}

/* FOOTER */
footer{
background:linear-gradient(135deg, #f6f1e6 0%, #efe4cf 100%);
color:#2f2a20;
text-align:center;
padding:50px 20px 20px;
transition: all 0.4s ease;
border-top:1px solid rgba(184,134,11,0.22);
}

body.dark-mode footer{
background:#0b0b0b;
color:#f3f3f3;
border-top-color:#222;
}

.footer-content{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-areas:
"quick contact"
"why why"
"follow follow";
gap:22px;
margin-bottom:22px;
max-width:1000px;
margin-left:auto;
margin-right:auto;
}

.footer-quick{ grid-area:quick; }
.footer-contact{ grid-area:contact; }
.footer-follow{ grid-area:follow; }

.footer-section{
text-align:center;
animation: fadeIn 1s ease;
}

.footer-quick,
.footer-contact{
padding:10px 12px;
border-radius:12px;
background:rgba(255,255,255,0.32);
border:1px solid rgba(184,134,11,0.12);
}

.footer-section-wide{
grid-area:why;
padding:14px 16px;
border-radius:14px;
background:rgba(255,255,255,0.45);
border:1px solid rgba(184,134,11,0.18);
}

.footer-section-wide .footer-feature-list{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
text-align:center;
}

.footer-section-wide .footer-feature-list li{
justify-content:center;
padding:8px 10px;
border-radius:10px;
background:rgba(255,255,255,0.38);
transition:all 0.25s ease;
}

.footer-section-wide .footer-feature-list li:hover{
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(184,134,11,0.15);
}

.footer-section h4{
font-size:16px;
margin-bottom:10px;
color:#b8860b;
}

.footer-section ul{
list-style:none;
}

.footer-section ul li{
margin:4px 0;
}

.footer-quick ul,
.footer-contact-list{
max-width:280px;
margin:0 auto;
text-align:left;
}

.footer-quick ul li a,
.footer-contact-list a{
display:block;
padding:2px 0;
}

.footer-section ul li a{
text-decoration:none;
color:#5b5345;
transition: all 0.3s ease;
}

.footer-section ul li a:hover{
color:#b8860b;
transform:translateX(5px);
}

.footer-feature-link{
text-decoration:none;
color:inherit;
font-weight:600;
line-height:1.25;
display:inline-flex;
align-items:center;
justify-content:center;
}

.footer-section .footer-feature-list .footer-feature-link:hover{
color:#b8860b;
text-decoration:underline;
transform:none;
}

body.dark-mode .footer-section ul li a{
color:#ddd;
}

body.dark-mode .footer-quick,
body.dark-mode .footer-contact{
background:rgba(255,255,255,0.02);
border-color:rgba(212,175,55,0.18);
}

body.dark-mode .footer-section-wide{
background:rgba(255,255,255,0.03);
border-color:rgba(212,175,55,0.22);
}

body.dark-mode .footer-section-wide .footer-feature-list li{
background:rgba(255,255,255,0.02);
}

.footer-contact-list,
.footer-feature-list{
list-style:none;
padding:0;
margin:0;
display:flex;
flex-direction:column;
gap:6px;
text-align:left;
}

.footer-contact-list li,
.footer-feature-list li{
display:flex;
align-items:flex-start;
gap:8px;
font-size:14px;
color:#4f4637;
width:100%;
}

.footer-contact-list li{
gap:4px;
align-items:center;
margin:0;
}

.footer-contact-list li i,
.footer-feature-list li i{
color:#b8860b;
margin-top:2px;
}

.footer-contact-list li i{
margin-top:0;
font-size:13px;
}

.footer-contact-list a{
text-decoration:none;
color:#4f4637;
word-break:break-word;
display:block;
width:100%;
line-height:1.2;
padding:0;
}

.footer-contact-list a:hover{
color:#b8860b;
}

.footer-contact-list li:last-child{
width:100%;
}

body.dark-mode .footer-contact-list li,
body.dark-mode .footer-feature-list li{
color:#ddd;
}

body.dark-mode .footer-contact-list a{
color:#ddd;
}

body.dark-mode .footer-feature-link{
color:#ddd;
}

body.dark-mode .footer-feature-link:hover{
color:#d4af37;
}

.footer-social{
display:flex;
justify-content:center;
gap:20px;
}

.footer-social a{
display:inline-block;
width:40px;
height:40px;
background:linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:white;
text-decoration:none;
transition: all 0.3s ease;
}

.footer-social a:hover{
transform:translateY(-5px) scale(1.1);
box-shadow:0 8px 20px rgba(184,134,11,0.4);
}

.footer-bottom{
border-top:1px solid rgba(64,56,40,0.3);
padding-top:20px;
color:#6f6758;
font-size:14px;
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
}

.footer-bottom p{
margin:0;
}

.footer-copy{
font-weight:600;
letter-spacing:0.2px;
}

.footer-note{
margin-top:0;
font-size:12px;
opacity:0.9;
line-height:1.35;
}

.footer-meta-links,
.footer-bottom-links{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
flex-wrap:wrap;
}

.footer-inline-link{
color:inherit;
text-decoration:none;
display:inline-flex;
align-items:center;
gap:6px;
}

.footer-inline-link:hover{
color:#b8860b;
}

.footer-divider{
opacity:0.65;
}

body.dark-mode .footer-bottom{
border-top-color:#222;
color:#999;
}

body.dark-mode .footer-inline-link{
color:#d3d3d3;
}

body.dark-mode .footer-inline-link:hover{
color:#d4af37;
}

/* CART */
.cart{
position:fixed;
right:-400px;
top:0;
width:350px;
height:100vh;
background:var(--surface);
box-shadow:-5px 0 15px rgba(0,0,0,0.2);
padding:20px;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
overflow-y:auto;
z-index:1500;
}

body.dark-mode .cart{
background:#2a2a2a;
box-shadow:-5px 0 15px rgba(0,0,0,0.5);
}

.cart.active{
right:0;
}

.cart h2{
color:var(--accent);
margin-bottom:20px;
font-size:22px;
}

.cart-close{
position:absolute;
top:15px;
right:15px;
background:none;
border:none;
font-size:24px;
cursor:pointer;
color:#666;
transition: all 0.3s ease;
}

body.dark-mode .cart-close{
color:#ccc;
}

.cart-close:hover{
color:#b8860b;
transform:rotate(90deg);
}

.cart-items-list{
list-style:none;
max-height:50vh;
overflow-y:auto;
margin-bottom:20px;
}

.cart-empty-state{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:8px;
	text-align:center;
	padding:20px 14px;
	margin-bottom:14px;
	border:1px dashed rgba(184,134,11,0.4);
	border-radius:12px;
	background:linear-gradient(135deg, #fffdf7 0%, #f8f0dd 100%);
	color:#5a4b2f;
}

.cart-empty-state[hidden],
.cart-items-list[hidden]{
	display:none !important;
}

.cart-empty-state i{
	font-size:24px;
	color:#b8860b;
}

.cart-empty-state h3{
	font-size:18px;
	margin:0;
	color:#8b6a08;
}

.cart-empty-state p{
	margin:0;
	font-size:13px;
	line-height:1.45;
}

body.dark-mode .cart-empty-state{
	background:linear-gradient(135deg, #22211d 0%, #1a1916 100%);
	color:#d7cab0;
	border-color:rgba(212,175,55,0.35);
}

.cart-section-hidden{
	display:none !important;
}

.cart-items-list li{
padding:12px;
margin:8px 0;
background:var(--surface-2);
border-radius:8px;
transition: all 0.3s ease;
border-left:4px solid #b8860b;
animation: slideInLeft 0.3s ease;
}

.cart-item-row{
	display:grid;
	grid-template-columns:52px minmax(0,1fr) auto;
	gap:10px;
	align-items:center;
}

.thumbnail{
	width:52px;
	height:52px;
	border-radius:8px;
	object-fit:cover;
	display:block;
	border:1px solid rgba(0,0,0,0.1);
}

.thumbnail-fallback{
	display:flex;
	align-items:center;
	justify-content:center;
	background:linear-gradient(135deg, #f6d887 0%, #e2b650 100%);
	color:#3f2e04;
	font-weight:800;
	font-size:18px;
}

.cart-item-info{
	min-width:0;
}

.cart-item-actions{
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:6px;
}

.qty-controls{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:3px;
	border-radius:999px;
	background:#efe7d2;
	border:1px solid rgba(184,134,11,0.25);
}

.qty-btn{
	width:24px;
	height:24px;
	border:none;
	border-radius:50%;
	background:#b8860b;
	color:#fff;
	font-size:14px;
	font-weight:800;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	line-height:1;
}

.qty-btn:hover{
	filter:brightness(1.08);
}

.qty-value{
	min-width:20px;
	text-align:center;
	font-size:12px;
	font-weight:800;
	color:#3f2e04;
}

.cart-item-name{
	margin:0;
	font-size:13px;
	font-weight:700;
	line-height:1.25;
	color:#2f2a20;
	white-space:normal;
	overflow-wrap:anywhere;
}

.cart-item-price{
	margin:4px 0 0;
	font-size:12px;
	font-weight:700;
	color:#7a5d1b;
}

body.dark-mode .cart-items-list li{
background:#1a1a1a;
}

body.dark-mode .thumbnail{
	border-color:rgba(255,255,255,0.12);
}

body.dark-mode .thumbnail-fallback{
	background:linear-gradient(135deg, #5e4515 0%, #7c5a19 100%);
	color:#f7e6bd;
}

body.dark-mode .cart-item-name{
	color:#e9e9e9;
}

body.dark-mode .cart-item-price{
	color:#d8b76a;
}

body.dark-mode .qty-controls{
	background:#2a2416;
	border-color:#6f5b2e;
}

body.dark-mode .qty-value{
	color:#f2d38c;
}

.cart-items-list li:hover{
transform:translateX(10px);
box-shadow:0 3px 10px rgba(184,134,11,0.2);
}

.cart-summary{
border-top:2px solid #ddd;
padding-top:15px;
display:flex;
flex-direction:column;
gap:12px;
}

.cart-summary .cart-lines p,
.cart-summary #grand-total{
	white-space:nowrap;
}

.cart-summary .cart-lines p{
	font-size:13px;
}

.cart-summary #subtotal,
.cart-summary #shipping-line{
	padding-bottom:6px;
	border-bottom:1px solid #e2e2e2;
}

.cart-summary #delivery-estimate-line{
	padding:8px 10px;
	border-radius:10px;
	border:1px solid #b5dcb9;
	border-left:4px solid #2d9f59;
	background:linear-gradient(135deg,#f2fff4 0%,#e2f8e6 100%);
	color:#1f6639;
	font-weight:700;
	font-size:12px;
}

.cart-summary #advance-due,
.cart-summary #due-on-delivery{
	padding:8px 10px;
	border-radius:10px;
	border:1px solid transparent;
	font-weight:700;
	letter-spacing:0.1px;
	font-size:12px;
}

.cart-summary #advance-due{
	background:linear-gradient(135deg,#fff8e4 0%,#f8edc9 100%);
	border-color:#e2c26b;
	border-left:4px solid #b8860b;
	color:#5b4300;
}

.cart-summary #due-on-delivery{
	background:linear-gradient(135deg,#f2f7ff 0%,#e8f1ff 100%);
	border-color:#a9c0e6;
	border-left:4px solid #5a7fb6;
	color:#20385d;
}

.cart-summary .cart-lines hr{
	border:none;
	height:1px;
	background:linear-gradient(90deg, rgba(184,134,11,0.08) 0%, rgba(184,134,11,0.45) 50%, rgba(184,134,11,0.08) 100%);
	margin:2px 0 4px;
}

.cart-summary #grand-total{
	margin:0;
	padding:9px 11px;
	border-radius:12px;
	background:linear-gradient(135deg,#fff5d8 0%,#f6d887 48%,#e9ba53 100%);
	background-size:180% 180%;
	border:1px solid #c9942a;
	border-left:5px solid #8f640f;
	color:#3f2900;
	font-size:16px;
	font-weight:800;
	letter-spacing:0.35px;
	text-transform:uppercase;
	box-shadow:0 12px 24px rgba(184,134,11,0.28), inset 0 1px 0 rgba(255,255,255,0.45);
	text-shadow:0 1px 0 rgba(255,255,255,0.35);
	animation:grandTotalGlow 4s ease-in-out infinite;
	transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.cart-summary #grand-total:hover{
	transform:translateY(-1px);
	box-shadow:0 14px 26px rgba(184,134,11,0.34), inset 0 1px 0 rgba(255,255,255,0.45);
}

@keyframes grandTotalGlow{
	0%,100%{
		background-position:0% 50%;
	}
	50%{
		background-position:100% 50%;
	}
}

.payment-section{
	border-top:1px solid #e6e6e6;
	margin-top:14px;
	padding-top:12px;
	display:flex;
	flex-direction:column;
	gap:10px;
}

.payment-buttons{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
	gap:12px;
}

.pay-btn{
	padding:10px 12px;
	border:1px solid #ddd;
	border-radius:8px;
	background:white;
	cursor:pointer;
	font-weight:600;
	transition:all 0.2s ease;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
}

.pay-btn:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 18px rgba(0,0,0,0.08);
}

.pay-btn.active{
	background:linear-gradient(135deg,#b8860b 0%,#d4af37 100%);
	color:white;
	border-color:transparent;
	box-shadow:0 10px 24px rgba(184,134,11,0.25);
}

.pay-btn i{
	font-size:18px;
	line-height:1;
}

.pay-btn.is-unavailable{
	opacity:0.9;
	border-style:dashed;
}

.payment-details{
	padding:10px 12px;
	border:1px solid #f0f0f0;
	border-radius:10px;
	background:#fafafa;
	font-size:14px;
	color:#444;
	line-height:1.5;
}

.payment-line{
	display:none;
}

.payment-line.active{
	display:block;
}

.payment-line.unavailable{
	color:#9f2d2d;
	font-weight:700;
}

.payment-help{
	margin:0 0 10px;
	font-size:13px;
	color:#555;
}

.card-form{
	display:grid;
	grid-template-columns:1fr;
	gap:8px;
}

.card-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
}

.card-field{
	display:flex;
	flex-direction:column;
	gap:4px;
}

.card-field-wide{
	grid-column:1 / -1;
}

.card-field span{
	font-size:12px;
	color:#555;
}

.card-field input{
	padding:9px 11px;
	border:1px solid #ddd;
	border-radius:8px;
	background:#fff;
	font-size:14px;
	transition:border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-field input:focus{
	border-color:#b8860b;
	box-shadow:0 0 0 3px rgba(184,134,11,0.18);
	outline:none;
}

@media(max-width:420px){
	.card-row{
		grid-template-columns:1fr;
	}
}

body.dark-mode .payment-section{
	border-color:#333;
}

body.dark-mode .pay-btn{
	background:#1f1f1f;
	border-color:#444;
	color:#e0e0e0;
}

body.dark-mode .pay-btn.active{
	color:white;
}

body.dark-mode .pay-btn.is-unavailable{
	border-color:#7a4f4f;
}

body.dark-mode .payment-details{
	background:#1b1b1b;
	border-color:#333;
	color:#ddd;
}

body.dark-mode .payment-line.unavailable{
	color:#ff9f9f;
}

body.dark-mode .payment-help,
body.dark-mode .card-field span{
	color:#cfcfcf;
}

body.dark-mode .card-field input{
	background:#121212;
	border-color:#444;
	color:#e8e8e8;
}

body.dark-mode .card-field input:focus{
	border-color:#d4af37;
	box-shadow:0 0 0 3px rgba(212,175,55,0.2);
}

.cart-form{
	border-top:1px solid #e6e6e6;
	margin-top:12px;
	padding-top:12px;
	display:flex;
	flex-direction:column;
	gap:10px;
}

.cart-fields{
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
}

.cart-field{
	display:flex;
	flex-direction:column;
	gap:4px;
	text-align:left;
}

.cart-field span{
	font-size:13px;
	color:#555;
}

.cart-field input,
.cart-field textarea{
	padding:10px 12px;
	border:1px solid #ddd;
	border-radius:8px;
	background:#fafafa;
	font-size:14px;
	transition:border-color 0.2s ease, box-shadow 0.2s ease;
}

.cart-field textarea{
	resize:vertical;
	min-height:70px;
}

.cart-field input:focus,
.cart-field textarea:focus{
	border-color:#b8860b;
	box-shadow:0 0 0 3px rgba(184,134,11,0.18);
	outline:none;
}

.cart-remember{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	color:#555;
}

.cart-remember input{
	width:16px;
	height:16px;
}

body.dark-mode .cart-form{
	border-color:#333;
}

body.dark-mode .cart-field span,
body.dark-mode .cart-remember{
	color:#ccc;
}

body.dark-mode .cart-field input,
body.dark-mode .cart-field textarea{
	background:#1f1f1f;
	border-color:#444;
	color:#e0e0e0;
}

body.dark-mode .cart-field input:focus,
body.dark-mode .cart-field textarea:focus{
	border-color:#d4af37;
	box-shadow:0 0 0 3px rgba(212,175,55,0.18);
}

/* Shipping buttons */
.shipping-options{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}

.shipping-btn{
	padding:8px 12px;
	border-radius:8px;
	border:1px solid #ddd;
	background:white;
	cursor:pointer;
	font-weight:600;
	transition:all 0.25s ease;
}

.shipping-btn:hover{
	transform:translateY(-3px);
	box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.shipping-btn.active{
	background:linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-bg) 100%);
	color:var(--btn-text);
	border-color:var(--accent-strong);
	box-shadow:0 8px 18px var(--btn-shadow);
}

body.dark-mode .shipping-btn{
	background:#222;
	color:#e0e0e0;
	border-color:#444;
}

.shipping-select{ display:none; }

.order-confirmation{
	margin-top:14px;
	padding:14px;
	border-radius:12px;
	border:1px solid #2d9f59;
	background:linear-gradient(135deg,#f0fff4 0%,#dff7e7 100%);
	color:#17472b;
	display:flex;
	flex-direction:column;
	gap:10px;
}

.order-confirmation[hidden]{
	display:none !important;
}

.order-confirmation h3,
.order-confirmation h4{
	margin:0;
}

.order-confirmation h3{
	font-size:19px;
	color:#166438;
}

.order-confirmation h4{
	font-size:14px;
	color:#1e5f38;
}

#order-confirmation-intro{
	margin:0;
	font-size:13px;
	line-height:1.45;
}

.order-confirmation-summary{
	display:grid;
	grid-template-columns:1fr;
	gap:6px;
}

.order-confirmation-summary .oc-row{
	display:flex;
	justify-content:space-between;
	gap:10px;
	padding:6px 8px;
	border-radius:8px;
	background:#ffffff;
	border:1px solid #c9e8d5;
	font-size:13px;
}

.order-confirmation-summary .oc-label{
	font-weight:700;
	color:#27543d;
}

.order-confirmation-summary .oc-value{
	text-align:right;
	font-weight:700;
	color:#124b2b;
}

.order-confirmation-features-wrap{
	border-top:1px dashed rgba(31,93,59,0.35);
	padding-top:8px;
}

.order-confirmation-features{
	margin:8px 0 0;
	padding:0 0 0 18px;
	display:flex;
	flex-direction:column;
	gap:6px;
}

.order-confirmation-features li{
	font-size:13px;
	line-height:1.35;
}

.order-confirmation-features li.success{
	color:#1b663d;
}

.order-confirmation-features li.pending{
	color:#7b5c15;
}

.order-confirmation-receipt{
	border:1px dashed rgba(31,93,59,0.35);
	border-radius:12px;
	padding:10px;
	background:rgba(255,255,255,0.7);
	display:flex;
	flex-direction:column;
	gap:8px;
}

.order-confirmation-receipt img{
	width:100%;
	max-width:420px;
	border-radius:10px;
	border:1px solid rgba(0,0,0,0.08);
	background:#fff;
	align-self:center;
}

.order-receipt-actions{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
}

@media(max-width:520px){
	.order-receipt-actions{
		grid-template-columns:1fr;
	}
}

.order-owner-actions{
	border-top:1px dashed rgba(31,93,59,0.35);
	padding-top:8px;
}

.order-owner-actions-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:8px;
}

.order-owner-actions .cart-btn{
	margin-top:0;
}

@media(max-width:520px){
	.order-owner-actions-grid{
		grid-template-columns:1fr;
	}
}

/* Remove button in cart items */
.remove-btn{
	margin-left:10px;
	padding:6px 10px;
	background:#ff6b6b;
	color:white;
	border:none;
	border-radius:6px;
	cursor:pointer;
	font-weight:600;
	transition:transform 0.15s ease, box-shadow 0.15s ease;
	white-space:nowrap;
}

.remove-btn:hover{
	transform:translateY(-2px);
	box-shadow:0 6px 14px rgba(0,0,0,0.12);
}

body.dark-mode .remove-btn{
	background:#ff5a5a;
}

body.dark-mode .cart-summary{
border-color:#444;
}

body.dark-mode .order-confirmation{
	background:linear-gradient(135deg,#18281d 0%,#142217 100%);
	border-color:#2e8c54;
	color:#b9e7cb;
}

body.dark-mode .order-confirmation h3{
	color:#8ee3b3;
}

body.dark-mode .order-confirmation h4{
	color:#8bd3ad;
}

body.dark-mode .order-confirmation-summary .oc-row{
	background:#0f1712;
	border-color:#2b4a38;
}

body.dark-mode .order-confirmation-summary .oc-label{
	color:#9fd7bb;
}

body.dark-mode .order-confirmation-summary .oc-value{
	color:#d0ffe3;
}

body.dark-mode .order-confirmation-features-wrap{
	border-top-color:rgba(142,227,179,0.35);
}

body.dark-mode .order-confirmation-features li.success{
	color:#8ee3b3;
}

body.dark-mode .order-confirmation-features li.pending{
	color:#f2d38c;
}

body.dark-mode .order-confirmation-receipt{
	background:rgba(8,16,10,0.7);
	border-color:rgba(142,227,179,0.35);
}

body.dark-mode .order-confirmation-receipt img{
	border-color:#2b4a38;
	background:#111;
}

body.dark-mode .order-owner-actions{
	border-top-color:rgba(142,227,179,0.35);
}

body.dark-mode .cart-summary #advance-due{
	background:linear-gradient(135deg,#2b2414 0%,#201a0e 100%);
	border-color:#85631e;
	color:#f2d38c;
}

body.dark-mode .cart-summary #delivery-estimate-line{
	background:linear-gradient(135deg,#16291d 0%,#102015 100%);
	border-color:#3b7b4f;
	color:#9de0b3;
}

body.dark-mode .cart-summary #due-on-delivery{
	background:linear-gradient(135deg,#182335 0%,#121a28 100%);
	border-color:#3e5f90;
	color:#b8d3ff;
}

body.dark-mode .cart-summary .cart-lines hr{
	background:linear-gradient(90deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.45) 50%, rgba(212,175,55,0.08) 100%);
}

body.dark-mode .cart-summary #grand-total{
	background:linear-gradient(135deg,#4a3612 0%,#3c2809 48%,#2b1c06 100%);
	background-size:180% 180%;
	border-color:#9d7426;
	border-left-color:#d4af37;
	color:#ffe0a0;
	text-shadow:0 1px 0 rgba(0,0,0,0.35);
	box-shadow:0 12px 24px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
}

#total{
color:#b8860b;
font-size:18px;
margin-bottom:15px;
}

.cart-btn{
width:100%;
padding:12px;
margin:8px 0;
border:none;
border-radius:8px;
cursor:pointer;
font-weight:bold;
transition: all 0.3s ease;
font-size:15px;
}

.buy-btn{
background:linear-gradient(135deg, var(--btn-hover) 0%, var(--btn-bg) 100%);
color:var(--btn-text);
border:1px solid var(--accent-strong);
box-shadow: 0 6px 14px var(--btn-shadow);
}

.buy-btn:hover{
transform:translateY(-2px);
box-shadow: 0 8px 18px var(--btn-shadow);
}

.cart-btn:disabled{
	opacity:0.6;
	cursor:not-allowed;
	transform:none !important;
	box-shadow:none !important;
}

.close-btn{
background:#ddd;
color:#333;
transition: all 0.3s ease;
}

body.dark-mode .close-btn{
background:#444;
color:#e0e0e0;
}

.close-btn:hover{
background:#999;
}

/* ANIMATION */
@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}

/* RESPONSIVE */
@media(max-width:768px){
header{
flex-direction:row;
align-items:center;
justify-content:space-between;
padding:12px 14px;
min-height:64px;
gap:10px;
}

.logo{
font-size:24px;
}

nav ul{
gap:15px;
}

body.has-drawer .menu-toggle{
	display:flex;
	align-self:auto;
	margin-left:8px;
}

body.has-drawer nav{
	display:none;
}

body.has-drawer nav ul{
	display:none;
}

body.has-drawer .nav-icons{
	display:flex;
	margin-left:auto;
	align-items:center;
}

.product-grid{
	grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
	gap:12px;
}

.product img{
	height:140px;
	object-fit:contain;
}

.img-wrap{
	height:140px;
	aspect-ratio:auto;
	background:#f6f6f6;
	display:flex;
	align-items:center;
	justify-content:center;
}

.img-wrap img{
	object-fit:contain;
	padding:6px;
}

.img-wrap .main-img{
	transform:none;
}

.product:active .img-wrap .main-img{
	transform:none;
}

body.dark-mode .img-wrap{
	background:#1f1f1f;
}

.hero h1{
font-size:30px;
}

.hero p{
font-size:16px;
}

.hero button{
padding:12px 30px;
font-size:14px;
}

.hero{
	min-height:auto;
	height:auto;
	padding-top:64px;
}

.hero-content{
	top:54%;
	width:min(94%,390px);
	padding:14px 16px;
	border-radius:16px;
	background:rgba(0,0,0,0.34);
	backdrop-filter:blur(2px);
}

body.dark-mode .hero-content{
	background:rgba(0,0,0,0.5);
}

.hero-content h1{
	font-size:28px;
}
.hero-content p{
	font-size:14px;
}

.hero-feature-strip{
	top:10px;
	padding:8px 10px;
	gap:6px;
	max-width:96%;
}

.feature-pill{
	font-size:11px;
	padding:4px 8px;
}

.feature-text{
	font-size:11px;
}

.hero-img-wrap{
	height:auto;
	aspect-ratio:16 / 9;
	max-height:calc(100svh - 64px);
}
.hero .home-img{
	height:100%;
	width:100%;
	object-fit:contain;
	object-position:center center;
}

.products{
padding:50px 20px;
}

.testers{
padding:50px 20px;
}

.testers h2{
font-size:32px;
}

.testers-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}

.contact{
padding:50px 20px;
}

.contact h2{
font-size:32px;
}

.reviews{
padding:50px 20px;
display:flex;
flex-direction:column;
gap:12px;
align-items:center;
}

.reviews h2{
margin-bottom:4px;
}

.review-box{
margin:0;
padding:16px 12px;
}

.review-header{
gap:10px;
}

.review-avatar{
width:46px;
height:46px;
}

.review-rating{
gap:8px;
}

.review-msg{
font-size:14px;
}

.review-helpful{
flex-direction:column;
align-items:flex-start;
}

.review-actions{
width:100%;
}

.review-btn{
flex:1;
}

.comment-head{
flex-direction:column;
align-items:flex-start;
}

.comment-sort{
width:100%;
justify-content:space-between;
}

.comment-sort-select{
width:100%;
}

.comment-form-actions{
width:100%;
}

.comment-submit,
.comment-clear{
flex:1;
}

.review-box h4{
font-size:13px;
}

.contact-container{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-bottom:24px;
}

.contact-container .contact-box:last-child{
grid-column:1 / -1;
}

.contact-box{
padding:16px 10px;
border-radius:12px;
}

.contact-box i{
font-size:28px;
margin-bottom:10px;
}

.contact-box h3{
font-size:15px;
}

.social-contact{
padding:20px 14px;
}

.social-buttons{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.social-btn{
width:100%;
justify-content:center;
padding:12px 10px;
border-radius:14px;
}

.social-btn.phone{
grid-column:1 / -1;
max-width:280px;
margin:0 auto;
}

.contact-form{
padding:20px;
}

.form-input,
.submit-btn{
padding:12px;
font-size:14px;
}

.cart{
width:100%;
right:-100%;
}

.cart.active{
right:0;
}

footer{
padding:40px 20px 20px;
}

.footer-content{
gap:12px;
grid-template-columns:1fr;
grid-template-areas:
"quick"
"contact"
"why"
"follow";
}

.footer-contact-list,
.footer-feature-list{
	text-align:left;
}

.footer-contact-list li,
.footer-feature-list li{
	justify-content:flex-start;
}

.footer-section-wide .footer-feature-list{
	text-align:center;
}

.footer-section-wide .footer-feature-list li{
	justify-content:center;
}

.footer-quick ul,
.footer-contact-list{
	text-align:center;
}

.footer-quick ul li a,
.footer-contact-list a{
	text-align:center;
}

.footer-quick ul li a{
	text-align:center;
}

.footer-contact-list li{
	justify-content:center;
	align-items:center;
}

.footer-section-wide{
	grid-area:why;
}

.footer-section-wide .footer-feature-list{
	grid-template-columns:repeat(3,minmax(0,1fr));
}

.footer-quick,
.footer-contact{
	padding:8px 8px;
}

.back-to-top{
	right:12px;
	bottom:76px;
	width:40px;
	height:40px;
}
}

@media(max-width:480px){
  header{
    padding:10px 12px;
    min-height:58px;
  }
  .logo{
    font-size:21px;
    gap:6px;
  }
  .logo-mark{
    width:28px;
    height:28px;
    border-radius:10px;
    font-size:15px;
  }
  .menu-toggle{
    padding:6px;
  }
  .product-grid{ grid-template-columns:repeat(2,minmax(110px,1fr)); gap:6px; }
.testers-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; margin-top:20px; }
  .reviews{ padding:44px 14px; gap:8px; }
  .review-box{ padding:12px 10px; border-radius:12px; }
  .review-header{ gap:10px; }
  .review-avatar{ width:42px; height:42px; font-size:14px; }
  .review-top{ flex-direction:column; align-items:flex-start; }
  .review-identity{ gap:8px; }
  .review-title h4{ font-size:13px; margin-bottom:4px; }
  .review-badge{ font-size:9px; padding:2px 6px; }
  .review-rating{ gap:6px; font-size:11px; }
  .review-score{ font-size:10px; }
  .review-msg{ font-size:12px; }
  .review-expand-btn{ font-size:11px; }
  .review-actions-row{ flex-wrap:wrap; }
  .review-form-card{ padding:14px; border-radius:14px; }
  .review-form-actions{ flex-direction:column; align-items:flex-start; }
  .review-submit-btn{ width:100%; }
  .review-star-picker{ width:100%; }
  .testers{ padding:44px 14px; }
  .tester-box{ padding:14px 10px; border-radius:12px; }
  .tester-box i{ font-size:34px; margin-bottom:8px; }
  .tester-box h3{ font-size:14px; margin:6px 0; }
  .tester-price{ font-size:16px; margin:6px 0; }
  .tester-desc{ font-size:12px; margin-bottom:10px; }
  .tester-btn{ padding:9px; font-size:12px; }
  .contact{ padding:44px 14px; }
  .contact-container{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:18px; }
  .contact-container .contact-box:last-child{ grid-column:1 / -1; }
  .contact-box{ padding:12px 8px; border-radius:10px; }
  .contact-box i{ font-size:22px; margin-bottom:8px; }
  .contact-box h3{ font-size:13px; margin-bottom:6px; }
  .contact-box p, .contact-link{ font-size:11px; }
  .social-contact{ padding:14px 10px; border-radius:12px; margin:24px 0; }
  .social-contact h3{ font-size:18px; margin-bottom:14px; }
  .social-buttons{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .social-btn{ padding:10px 8px; border-radius:12px; gap:6px; }
  .social-btn i{ font-size:16px; }
  .social-btn span{ font-size:11px; }
  .social-btn.phone{ max-width:220px; }
  .footer-content{
    grid-template-columns:1fr;
    grid-template-areas:
    "quick"
    "contact"
    "why"
    "follow";
    gap:8px;
  }
  .footer-quick, .footer-contact{ padding:6px 6px; border-radius:10px; }
  .footer-section h4{ margin-bottom:7px; font-size:14px; }
  .footer-section ul li{ margin:2px 0; }
  .footer-quick ul li a, .footer-contact-list a{ padding:1px 0; }
  .cart-summary .cart-lines p{
    font-size:11px;
  }
  .cart-summary #grand-total{
    font-size:14px;
    padding:8px 10px;
    border-left-width:4px;
    letter-spacing:0.2px;
  }
  .footer-bottom{ font-size:12px; gap:4px; }
  .footer-copy{ font-size:12px; }
  .footer-note{ font-size:11px; }
  .footer-meta-links, .footer-bottom-links{ gap:5px; }
  .footer-meta-links .footer-inline-link, .footer-bottom-links .footer-inline-link{ font-size:11px; }
  .footer-divider{ font-size:10px; }
  .foot-meta, .foot-links{ gap:8px; }
  .foot-meta a, .foot-links a{ font-size:12px; }
  .footer-section-wide .footer-feature-list{ grid-template-columns:1fr; gap:8px; }
  .product{ padding:5px; }
  .product img{
    height:108px;
    object-fit:contain;
  }
  .img-wrap{
    height:108px;
    aspect-ratio:auto;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .img-wrap img{
    object-fit:contain;
    padding:4px;
  }
  .img-wrap .main-img{
    transform:none;
  }
  .product:active .img-wrap .main-img{
    transform:none;
  }
  .product-badges{
    top:0;
    left:0;
  }
  .badge{
    padding:3px 6px;
    border-radius:9px;
    font-size:9px;
  }
  .badge.discount{
    top:7px;
    left:-28px;
    min-width:82px;
    padding:3px 0;
    font-size:7px;
    letter-spacing:0.15px;
  }
  .hero{
    min-height:auto;
    height:auto;
    padding-top:58px;
  }
  .hero-img-wrap{
    height:auto;
    aspect-ratio:16 / 9;
    max-height:calc(100svh - 58px);
  }
  .hero-content{
    top:56%;
    width:min(95%,320px);
    padding:10px 10px;
    border-radius:14px;
  }
  .hero-content h1{
    font-size:22px;
  }
  .hero-content p{
    font-size:12px;
  }

  .hero-feature-strip{
    top:8px;
    max-width:97%;
    justify-content:center;
    line-height:1;
    padding:7px 6px;
    border-radius:14px;
    align-items:center;
    gap:3px;
    white-space:nowrap;
  }

  .feature-pill{
    font-size:8px;
    padding:2px 5px;
  }

  .feature-text{
    font-size:8px;
  }

  .back-to-top{
    right:10px;
    bottom:72px;
    width:38px;
    height:38px;
    font-size:14px;
  }
}

@media(max-width:360px){
  .hero-content{
    top:57%;
    width:96%;
    padding:9px 8px;
  }
  .hero-content h1{
    font-size:20px;
  }
  .hero-content p{
    font-size:11px;
  }
  .hero-feature-strip{
    top:6px;
    max-width:98%;
    padding:5px 3px;
    gap:2px;
    white-space:nowrap;
    flex-wrap:nowrap;
    justify-content:center;
    line-height:1;
    text-align:left;
  }
  .feature-pill{
    font-size:7px;
    padding:2px 4px;
  }
  .feature-text{
    font-size:7px;
    display:block;
  }
  .footer-meta-links, .footer-bottom-links{ gap:4px; }
  .footer-meta-links .footer-inline-link, .footer-bottom-links .footer-inline-link{
    font-size:10px;
  }
  .foot-meta a, .foot-links a{ font-size:11px; }
}