/*========================================================== INSTA COLORS - MASTER STYLE.CSS Combined from existing project CSS files. HTML/PHP structure unchanged. ==========================================================*/ /*========================================================== 01 VARIABLES ==========================================================*/ :root{ --primary:#111111; --primary-light:#2B2B2B; --secondary:#D83A73; --secondary-hover:#C62863; --accent:#F5D7E3; --white:#FFFFFF; --black:#000000; --body-bg:#FFFDFB; --card-bg:#FFFFFF; --text:#2B2B2B; --text-light:#666666; --text-muted:#999999; --border:#ECECEC; --success:#28A745; --warning:#FFC107; --danger:#DC3545; --info:#0DCAF0; --heading-font:Inter, sans-serif; --body-font:"KMR Waldenburg Buch", sans-serif; --font-size-xs:12px; --font-size-sm:16px; --font-size-md:18px; --font-size-lg:20px; --font-size-xl:24px; --font-size-2xl:35px; --font-size-3xl:46px; --font-size-4xl:60px; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --container-width:1400px; --container-padding:20px; --space-5:5px; --space-10:10px; --space-15:15px; --space-20:20px; --space-25:25px; --space-30:30px; --space-40:40px; --space-50:50px; --space-60:60px; --space-80:80px; --space-100:100px; --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:30px; --radius-round:999px; --shadow-sm:0 3px 10px rgba(0,0,0,.05); --shadow-md:0 10px 30px rgba(0,0,0,.08); --shadow-lg:0 20px 60px rgba(0,0,0,.12); --transition:.35s ease; --header-height:85px; --topbar-height:42px; --z-dropdown:100; --z-header:999; --z-overlay:1000; --z-modal:1100; --z-loader:9999; --btn-height:52px; --btn-radius:50px; --input-height:52px; --input-radius:12px; --product-image-height:420px; --product-radius:18px; --section-padding:90px; }
/*========================================================== 02 RESET ==========================================================*/ *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; }
html{ font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:var(--body-font); font-size:var(--font-size-md); color:var(--text); background:var(--body-bg); line-height:1.6; overflow-x:hidden; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1, h2, h3, h4, h5, h6{ font-weight:600; color:var(--primary); line-height:1.2; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; transition:var(--transition); }
ul, ol{ list-style:none; }
img{ display:block; max-width:100%; height:auto; }
button{ border:none; background:none; outline:none; cursor:pointer; font:inherit; }
input, textarea, select{ font:inherit; color:inherit; border:none; outline:none; background:none; }
textarea{ resize:vertical; }
table{ width:100%; border-collapse:collapse; }
iframe{ border:0; width:100%; }
svg{ display:block; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ appearance:textfield; -moz-appearance:textfield; }
::placeholder{ color:var(--text-muted); opacity:1; }
::selection{ background:var(--secondary); color:var(--white); }
:focus-visible{ outline:2px solid var(--secondary); outline-offset:3px; }
hr{ border:none; border-top:1px solid var(--border); }
summary{ cursor:pointer; }
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#f3f3f3; }
::-webkit-scrollbar-thumb{ background:var(--secondary); border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:var(--secondary-hover); }
.hidden{ display:none !important; }
.text-center{ text-align:center; }
.text-left{ text-align:left; }
.text-right{ text-align:right; }
.w-100{ width:100%; }
.h-100{ height:100%; }
.overflow-hidden{ overflow:hidden; }
video, canvas{ max-width:100%; display:block; }
button:disabled, input:disabled{ cursor:not-allowed; opacity:.6; }
@media (prefers-reduced-motion:reduce){
*{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
/*========================================================== 03 LAYOUT ==========================================================*/ .container{ width:100%; max-width:var(--container-width); margin-inline:auto; padding-inline:var(--container-padding); }
.container-fluid{ width:100%; padding-inline:30px; }
.section{ padding:var(--section-padding) 0; }
.section-sm{ padding:60px 0; }
.section-lg{ padding:120px 0; }
.grid{ display:grid; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:25px; }
.flex{ display:flex; }
.flex-wrap{ flex-wrap:wrap; }
.items-center{ align-items:center; }
.items-start{ align-items:flex-start; }
.items-end{ align-items:flex-end; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.justify-end{ justify-content:flex-end; }
.flex-column{ flex-direction:column; }
.gap-10{ gap:10px; }
.gap-15{ gap:15px; }
.gap-20{ gap:20px; }
.gap-25{ gap:25px; }
.gap-30{ gap:30px; }
.gap-40{ gap:40px; }
.gap-50{ gap:50px; }
.gap-60{ gap:60px; }
.w-25{ width:25%; }
.w-50{ width:50%; }
.w-75{ width:75%; }
.w-100{ width:100%; }
.h-100{ height:100%; }
.mt-10{ margin-top:10px; }
.mt-20{ margin-top:20px; }
.mt-30{ margin-top:30px; }
.mt-40{ margin-top:40px; }
.mt-50{ margin-top:50px; }
.mt-60{ margin-top:60px; }
.mt-80{ margin-top:80px; }
.mb-10{ margin-bottom:10px; }
.mb-20{ margin-bottom:20px; }
.mb-30{ margin-bottom:30px; }
.mb-40{ margin-bottom:40px; }
.mb-50{ margin-bottom:50px; }
.mb-60{ margin-bottom:60px; }
.mb-80{ margin-bottom:80px; }
.p-20{ padding:20px; }
.p-30{ padding:30px; }
.p-40{ padding:40px; }
.p-50{ padding:50px; }
.text-center{ text-align:center; }
.text-left{ text-align:left; }
.text-right{ text-align:right; }
.section-header{ max-width:720px; margin:0 auto 60px; text-align:center; }
.section-subtitle{ font-size:16px; letter-spacing:2px; text-transform:uppercase; color:var(--secondary); font-weight:600; margin-bottom:10px; }
.section-title{ font-size:48px; line-height:1.2; margin-bottom:20px; }
.section-description{ color:var(--text-light); font-size:16px; }
.card{ background:var(--card-bg); border:1px solid var(--border); border-radius:0; box-shadow:var(--shadow-sm); transition:var(--transition); }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.image-cover{ width:100%; height:100%; object-fit:cover; }
.image-contain{ width:100%; height:100%; object-fit:contain; }
.badge{ display:inline-flex; align-items:center; justify-content:center; padding:6px 16px; border-radius:0; background:var(--secondary); color:#fff; font-size:13px; font-weight:500; }
.divider{ width:100%; height:1px; background:var(--border); }
.radius-sm{ border-radius:0; }
.radius-md{ border-radius:0; }
.radius-lg{ border-radius:0; }
.radius-xl{ border-radius:0; }
.shadow-sm{ box-shadow:var(--shadow-sm); }
.shadow-md{ box-shadow:var(--shadow-md); }
.shadow-lg{ box-shadow:var(--shadow-lg); }
.relative{ position:relative; }
.absolute{ position:absolute; }
.overflow-hidden{ overflow:hidden; }
@media(max-width:1200px){
.grid-4{ grid-template-columns:repeat(3,1fr); }
.grid-5{ grid-template-columns:repeat(4,1fr); }
}
@media(max-width:992px){
.grid-2, .grid-3, .grid-4, .grid-5{ grid-template-columns:repeat(2,1fr); }
.section{ padding:70px 0; }
.section-title{ font-size:38px; }
}
@media(max-width:768px){
.grid-2, .grid-3, .grid-4, .grid-5{ grid-template-columns:1fr; }
.container{ padding-inline:16px; }
.container-fluid{ padding-inline:16px; }
.section{ padding:60px 0; }
.section-title{ font-size:30px; }
.section-header{ margin-bottom:40px; }
}
/*========================================================== 04 UTILITIES ==========================================================*/ .d-none{ display:none!important; }
.d-block{ display:block!important; }
.d-inline{ display:inline!important; }
.d-inline-block{ display:inline-block!important; }
.d-flex{ display:flex!important; }
.d-grid{ display:grid!important; }
.flex-row{ flex-direction:row; }
.flex-column{ flex-direction:column; }
.flex-wrap{ flex-wrap:wrap; }
.flex-nowrap{ flex-wrap:nowrap; }
.align-start{ align-items:flex-start; }
.align-center{ align-items:center; }
.align-end{ align-items:flex-end; }
.justify-start{ justify-content:flex-start; }
.justify-center{ justify-content:center; }
.justify-end{ justify-content:flex-end; }
.justify-between{ justify-content:space-between; }
.justify-around{ justify-content:space-around; }
.justify-evenly{ justify-content:space-evenly; }
.relative{ position:relative; }
.absolute{ position:absolute; }
.fixed{ position:fixed; }
.sticky{ position:sticky; }
.top-0{ top:0; }
.left-0{ left:0; }
.right-0{ right:0; }
.bottom-0{ bottom:0; }
.w-auto{ width:auto; }
.w-100{ width:100%; }
.w-75{ width:75%; }
.w-50{ width:50%; }
.w-25{ width:25%; }
.h-auto{ height:auto; }
.h-100{ height:100%; }
.text-left{ text-align:left; }
.text-center{ text-align:center; }
.text-right{ text-align:right; }
.fw-300{ font-weight:300; }
.fw-400{ font-weight:400; }
.fw-500{ font-weight:500; }
.fw-600{ font-weight:600; }
.fw-700{ font-weight:700; }
.text-primary{ color:var(--primary); }
.text-secondary{ color:var(--secondary); }
.text-light{ color:var(--text-light); }
.text-muted{ color:var(--text-muted); }
.text-white{ color:var(--white); }
.text-black{ color:var(--black); }
.bg-primary{ background:var(--primary); }
.bg-secondary{ background:var(--secondary); }
.bg-white{ background:var(--white); }
.bg-light{ background:#fafafa; }
.bg-transparent{ background:transparent; }
.border{ border:1px solid var(--border); }
.border-top{ border-top:1px solid var(--border); }
.border-bottom{ border-bottom:1px solid var(--border); }
.border-0{ border:none; }
.rounded-sm{ border-radius:0; }
.rounded{ border-radius:0; }
.rounded-lg{ border-radius:0; }
.rounded-xl{ border-radius:0; }
.rounded-pill{ border-radius:0; }
.rounded-circle{ border-radius:50%; }
.shadow-sm{ box-shadow:var(--shadow-sm); }
.shadow{ box-shadow:var(--shadow-md); }
.shadow-lg{ box-shadow:var(--shadow-lg); }
.shadow-none{ box-shadow:none; }
.opacity-0{ opacity:0; }
.opacity-25{ opacity:.25; }
.opacity-50{ opacity:.5; }
.opacity-75{ opacity:.75; }
.opacity-100{ opacity:1; }
.overflow-hidden{ overflow:hidden; }
.overflow-auto{ overflow:auto; }
.overflow-visible{ overflow:visible; }
.cursor-pointer{ cursor:pointer; }
.cursor-default{ cursor:default; }
.object-cover{ object-fit:cover; }
.object-contain{ object-fit:contain; }
.transition{ transition:var(--transition); }
.z-1{ z-index:1; }
.z-10{ z-index:10; }
.z-100{ z-index:100; }
.z-999{ z-index:999; }
.z-modal{ z-index:1100; }
.select-none{ user-select:none; }
.select-all{ user-select:all; }
.pe-none{ pointer-events:none; }
.pe-auto{ pointer-events:auto; }
.visible{ visibility:visible; }
.invisible{ visibility:hidden; }
.nowrap{ white-space:nowrap; }
.break-word{ word-break:break-word; }
.img-fluid{ width:100%; height:auto; display:block; }
.icon{ display:inline-flex; align-items:center; justify-content:center; }
.hover-shadow:hover{ box-shadow:var(--shadow-lg); }
.hover-scale:hover{ transform:scale(1.04); }
.hover-up:hover{ transform:translateY(-6px); }
.fade{ opacity:0; transition:.4s; }
.fade.show{ opacity:1; }
@media(max-width:768px){
.mobile-hide{ display:none!important; }
.mobile-center{ text-align:center; }
}
@media(min-width:769px){
.desktop-hide{ display:none!important; }
}
/*========================================================== 05 BUTTONS ==========================================================*/ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:160px; height:var(--btn-height); padding:0 28px; border:none; border-radius:0; font-family:var(--body-font); font-size:17px; font-weight:600; cursor:pointer; transition:var(--transition); text-decoration:none; white-space:nowrap; }
.btn-primary{ background:var(--primary); color:var(--white); }
.btn-primary:hover{ background:var(--secondary); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-secondary{ background:var(--secondary); color:var(--white); }
.btn-secondary:hover{ background:var(--secondary-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; border:2px solid var(--primary); color:var(--primary); }
.btn-outline:hover{ background:var(--primary); color:var(--white); }
.btn-outline-secondary{ background:transparent; border:2px solid var(--secondary); color:var(--secondary); }
.btn-outline-secondary:hover{ background:var(--secondary); color:var(--white); }
.btn-light{ background:var(--white); color:var(--primary); border:1px solid var(--border); }
.btn-light:hover{ box-shadow:var(--shadow-sm); }
.btn-icon{ width:52px; height:52px; min-width:52px; padding:0; border-radius:50%; }
.btn-icon i{ font-size:16px; }
.btn-sm{ height:42px; min-width:120px; padding:0 20px; font-size:16px; }
.btn-lg{ height:60px; min-width:190px; padding:0 36px; font-size:16px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.6; cursor:not-allowed; pointer-events:none; }
.btn-loading{ pointer-events:none; opacity:.8; }
.btn-loading::after{ content:""; width:18px; height:18px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:btnSpin .8s linear infinite; }
@keyframes btnSpin{
to{ transform:rotate(360deg); }
}
@media(max-width:768px){
.btn{ min-width:140px; height:48px; padding:0 22px; }
}
/*========================================================== 06 FORMS ==========================================================*/ .form-group{ margin-bottom:22px; }
.form-label{ display:block; margin-bottom:8px; font-size:16px; font-weight:600; color:var(--primary); }
.form-control{ width:100%; height:var(--input-height); padding:0 18px; border:1px solid var(--border); border-radius:0; background:var(--white); color:var(--text); transition:var(--transition); }
.form-control:focus{ border-color:var(--secondary); box-shadow:0 0 0 3px rgba(216,58,115,.15); }
textarea.form-control{ height:160px; padding:15px 18px; resize:vertical; }
select.form-control{ cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; background-size:14px; padding-right:45px; }
.form-check{ display:flex; align-items:center; gap:10px; }
.form-check input{ width:18px; height:18px; accent-color:var(--secondary); }
.form-radio{ display:flex; align-items:center; gap:10px; }
.form-radio input{ accent-color:var(--secondary); }
.input-group{ display:flex; align-items:center; border:1px solid var(--border); border-radius:0; overflow:hidden; background:var(--white); }
.input-group .form-control{ border:none; box-shadow:none; }
.input-group-text{ display:flex; align-items:center; justify-content:center; min-width:50px; color:var(--text-light); }
.is-invalid{ border-color:var(--danger)!important; }
.invalid-feedback{ margin-top:6px; font-size:13px; color:var(--danger); }
.is-valid{ border-color:var(--success)!important; }
.valid-feedback{ margin-top:6px; font-size:13px; color:var(--success); }
.search-form{ position:relative; }
.search-form .form-control{ padding-right:55px; }
.search-form button{ position:absolute; right:5px; top:5px; width:42px; height:42px; border-radius:50%; background:var(--secondary); color:var(--white); display:flex; align-items:center; justify-content:center; }
.newsletter-form{ display:flex; gap:15px; }
.newsletter-form .form-control{ flex:1; }
@media(max-width:768px){
.newsletter-form{ flex-direction:column; }
}
/*========================================================== 08 HEADER ==========================================================*/ .topbar{ height:var(--topbar-height); background:var(--primary); color:var(--white); display:flex; align-items:center; font-size:13px; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; }
.topbar-left, .topbar-right{ display:flex; align-items:center; gap:20px; }
.topbar a{ color:var(--white); opacity:.85; }
.topbar a:hover{ opacity:1; }
.site-header{ width:100%; background:var(--white); position:sticky; top:0; left:0; z-index:var(--z-header); box-shadow:0 1px 8px rgba(0,0,0,.05); transition:var(--transition); }
.site-header.sticky{ box-shadow:var(--shadow-md); }
.navbar{ height:var(--header-height); display:flex; align-items:center; justify-content:space-between; }
.logo{ flex-shrink:0; }
.logo img{ width:180px; height:auto; }
.nav-menu{ display:flex; align-items:center; gap:40px; }
.nav-menu>li{ position:relative; }
.nav-menu>li>a{ display:flex; align-items:center; gap:6px; color:var(--primary); font-size:17px; font-weight:500; padding:30px 0; transition:var(--transition); }
.nav-menu>li>a:hover, .nav-menu>li>a.active{ color:var(--secondary); }
.dropdown{ position:absolute; top:100%; left:0; min-width:230px; background:var(--white); border-radius:0; box-shadow:var(--shadow-lg); padding:15px 0; opacity:0; visibility:hidden; transform:translateY(15px); transition:var(--transition); }
.has-dropdown:hover>.dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown li{ width:100%; }
.dropdown li a{ display:block; padding:12px 25px; color:var(--text); transition:var(--transition); }
.dropdown li a:hover{ background:#fafafa; color:var(--secondary); padding-left:32px; }
.header-icons{ display:flex; align-items:center; gap:15px; }
.icon-btn{ position:relative; width:44px; height:44px; border-radius:50%; display:flex; justify-content:center; align-items:center; color:var(--primary); transition:var(--transition); }
.icon-btn:hover{ background:#f7f7f7; color:var(--secondary); }
.icon-btn i{ font-size:20px; }
.count{ position:absolute; top:-3px; right:-3px; width:18px; height:18px; background:var(--secondary); color:#fff; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:10px; font-weight:600; }
.mobile-toggle{ display:none; width:46px; height:46px; border-radius:50%; align-items:center; justify-content:center; font-size:26px; color:var(--primary); }
.mobile-toggle:hover{ background:#f5f5f5; }
.search-btn{ cursor:pointer; }
.mega-menu{ position:absolute; left:0; top:100%; width:900px; background:#fff; border-radius:0; padding:40px; box-shadow:var(--shadow-lg); display:none; }
.has-mega:hover .mega-menu{ display:block; }
@media(max-width:1100px){
.nav-menu{ gap:25px; }
.logo img{ width:160px; }
}
@media(max-width:991px){
.topbar{ display:none; }
.nav-menu{ display:none; }
.mobile-toggle{ display:flex; }
.header-icons{ gap:10px; }
.logo img{ width:150px; }
}
@media(max-width:576px){
.site-header{ box-shadow:0 2px 8px rgba(0,0,0,.08); }
.navbar{ height:72px; }
.logo img{ width:135px; }
.icon-btn{ width:40px; height:40px; }
.icon-btn i{ font-size:16px; }
}
/*========================================================== 09 HOME ==========================================================*/ .hero-image{ position:relative; display:flex; justify-content:center; align-items:center; min-height:650px; }
.hero-image::before{ content:""; position:absolute; width:620px; height:620px; border-radius:50%; background:linear-gradient(135deg,#fff8f5,#fde9ef); z-index:1; }
.hero-image::after{ content:""; position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(255,90,140,.08); filter:blur(90px); z-index:0; }
.hero-image img{ position:relative; z-index:5; width:100%; max-width:650px; height:auto; object-fit:contain; animation:heroFloat 6s ease-in-out infinite; filter:drop-shadow(0 35px 60px rgba(0,0,0,.15)); }
.hero-image img:hover{ transform:scale(1.02); transition:.4s; }
.hero-circle{ position:absolute; width:620px; height:620px; border-radius:50%; background:linear-gradient(135deg,#ffeaf3,#ffd6e6); z-index:1; }
.floating-card{ position:absolute; background:#fff; border-radius:0; padding:18px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:15px; z-index:5; }
.floating-card img{ width:65px; }
.floating-card h5{ font-size:17px; margin-bottom:5px; }
.floating-card p{ font-size:13px; color:var(--text-light); }
.card-top{ top:15%; left:-30px; }
.card-bottom{ right:-20px; bottom:12%; }
.hero-badge{ position:absolute; top:80px; right:20px; width:120px; height:120px; border-radius:50%; background:var(--secondary); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; z-index:4; animation:rotateBadge 12s linear infinite; }
.hero-badge strong{ font-size:28px; }
.hero-badge span{ font-size:13px; }
.hero-shape{ position:absolute; border-radius:50%; filter:blur(40px); opacity:.35; }
.shape-1{ width:220px; height:220px; background:#ffd7ea; top:-60px; left:-80px; }
.shape-2{ width:300px; height:300px; background:#ffe9c9; right:-80px; bottom:-100px; }
.hero-navigation{ position:absolute; bottom:50px; left:50%; transform:translateX(-50%); display:flex; gap:12px; z-index:20; }
.hero-navigation span{ width:14px; height:14px; border-radius:50%; background:#d8d8d8; cursor:pointer; transition:.3s; }
.hero-navigation .active{ width:40px; border-radius:0; background:var(--secondary); }
.features{ position:relative; margin-top:-70px; z-index:20; }
.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.feature-card{ background:#fff; border-radius:0; padding:40px 30px; text-align:center; box-shadow:var(--shadow-md); transition:var(--transition); border:1px solid transparent; }
.feature-card:hover{ transform:translateY(-10px); border-color:var(--secondary); box-shadow:var(--shadow-lg); }
.feature-icon{ width:80px; height:80px; margin:0 auto 25px; border-radius:50%; background:linear-gradient(135deg,#ffe6ef,#fff4f8); display:flex; justify-content:center; align-items:center; }
.feature-icon img{ width:42px; }
.feature-icon i{ font-size:36px; color:var(--secondary); }
.feature-title{ font-size:22px; margin-bottom:12px; color:var(--primary); }
.feature-description{ font-size:17px; color:var(--text-light); line-height:1.8; }
.categories{ position:relative; padding-top:120px; }
.categories-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:35px; }
.category-card{ position:relative; overflow:hidden; border-radius:0; background:#fff; transition:var(--transition); box-shadow:var(--shadow-sm); }
.category-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lg); }
.category-image{ position:relative; overflow:hidden; }
.category-image img{ width:100%; height:380px; object-fit:cover; transition:.6s; }
.category-card:hover .category-image img{ transform:scale(1.08); }
.category-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.08)); }
.category-content{ position:absolute; left:35px; bottom:35px; color:#fff; z-index:2; }
.category-content span{ display:inline-block; margin-bottom:10px; font-size:13px; letter-spacing:2px; text-transform:uppercase; opacity:.85; }
.category-content h3{ font-size:34px; margin-bottom:18px; color:#fff; }
.category-btn{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:16px; font-weight:600; }
.category-btn i{ transition:.3s; }
.category-card:hover .category-btn i{ transform:translateX(6px); }
.category-badge{ position:absolute; top:20px; left:20px; background:#fff; color:var(--secondary); font-size:12px; font-weight:600; padding:8px 16px; border-radius:0; z-index:5; }
.categories::before{ content:""; position:absolute; width:420px; height:420px; background:#fff3f8; border-radius:50%; left:-200px; top:100px; filter:blur(90px); }
.categories::after{ content:""; position:absolute; width:380px; height:380px; background:#fff7df; border-radius:50%; right:-180px; bottom:-120px; filter:blur(100px); }
.category-card::after{ content:""; position:absolute; inset:0; border:2px solid transparent; border-radius:0; transition:.35s; }
.category-card:hover::after{ border-color:rgba(255,255,255,.4); }
.best-sellers{ position:relative; padding:120px 0; background:#fff; }
.best-sellers::before{ content:""; position:absolute; width:380px; height:380px; border-radius:50%; background:#fff5f8; filter:blur(100px); top:0; right:-120px; }
.products-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:35px; }
.product-card{ position:relative; overflow:hidden; border-radius:0; background:#fff; border:1px solid var(--border); transition:.35s; }
.product-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lg); }
.product-image{ position:relative; overflow:hidden; background:#fafafa; height:420px; }
.product-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:0px; transition:.55s ease; }
.primary-image{ opacity:1; visibility:visible; }
.hover-image{ opacity:0; visibility:hidden; transform:scale(1.08); }
.product-card:hover .primary-image{ opacity:0; visibility:hidden; transform:scale(.94); }
.product-card:hover .hover-image{ opacity:1; visibility:visible; transform:scale(1); }
.product-card:hover .product-image img{ transform-origin:center; }
.product-badge{ position:absolute; top:18px; left:18px; display:flex; flex-direction:column; gap:10px; z-index:5; }
.badge-sale{ background:var(--secondary); color:#fff; }
.badge-new{ background:#111; color:#fff; }
.badge-hot{ background:#ff8a00; color:#fff; }
.product-badge span{ display:inline-flex; align-items:center; justify-content:center; min-width:72px; height:32px; padding:0 15px; border-radius:0; font-size:12px; font-weight:600; }
.product-actions{ position:absolute; top:20px; right:-70px; display:flex; flex-direction:column; gap:12px; transition:.35s; z-index:6; }
.product-card:hover .product-actions{ right:20px; }
.action-btn{ width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--primary); box-shadow:0 10px 25px rgba(0,0,0,.12); transition:.3s; }
.action-btn i{ font-size:16px; }
.action-btn:hover{ background:var(--secondary); color:#fff; }
.quick-view{ position:absolute; left:50%; bottom:22px; transform:translate(-50%,20px); width:calc(100% - 40px); height:50px; border-radius:0; background:#111; color:#fff; display:flex; justify-content:center; align-items:center; font-size:16px; font-weight:600; opacity:0; visibility:hidden; transition:.35s; z-index:5; }
.product-card:hover .quick-view{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.quick-view:hover{ background:var(--secondary); }
.product-image::after{ content:""; inset:0; background:linear-gradient(to top, rgba(255,255,255,.15), rgba(255,255,255,0)); opacity:0; transition:.3s; }
.product-card:hover .product-image::after{ opacity:1; }
.product-content{ padding:26px; }
.product-meta{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:15px; }
.product-brand{ font-size:12px; font-weight:600; color:var(--secondary); text-transform:uppercase; letter-spacing:1px; }
.product-category{ font-size:12px; color:var(--text-muted); }
.product-title{ font-size:19px; font-weight:600; line-height:1.45; color:var(--primary); margin-bottom:14px; transition:var(--transition); }
.product-title a{ color:inherit; }
.product-title:hover{ color:var(--secondary); }
.product-short{ font-size:16px; color:var(--text-light); line-height:1.8; margin-bottom:18px; }
.product-rating{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.rating-stars{ display:flex; align-items:center; gap:3px; }
.rating-stars i{ color:#FDBA12; font-size:16px; }
.rating-value{ font-size:13px; font-weight:600; color:var(--primary); }
.rating-count{ font-size:13px; color:var(--text-muted); }
.product-price{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.current-price{ font-size:26px; font-weight:700; color:var(--primary); }
.old-price{ font-size:17px; color:var(--text-muted); text-decoration:line-through; }
.discount{ display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 12px; border-radius:0; background:#EAF8EF; color:var(--success); font-size:12px; font-weight:600; }
.stock{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; }
.stock::before{ content:""; width:8px; height:8px; border-radius:50%; }
.stock.in-stock{ color:var(--success); }
.stock.in-stock::before{ background:var(--success); }
.stock.low-stock{ color:var(--warning); }
.stock.low-stock::before{ background:var(--warning); }
.stock.out-stock{ color:var(--danger); }
.stock.out-stock::before{ background:var(--danger); }
.product-divider{ width:100%; height:1px; background:var(--border); margin:20px 0; }
.product-info{ display:flex; flex-direction:column; gap:10px; }
.product-info li{ display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.product-info span:first-child{ color:var(--text-light); }
.product-info span:last-child{ color:var(--primary); font-weight:500; }
.product-card:hover .current-price{ color:var(--secondary); }
.product-card:hover .product-title{ color:var(--secondary); }
.product-swatches{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.swatch{ width:26px; height:26px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--border); cursor:pointer; transition:var(--transition); }
.swatch:hover{ transform:scale(1.18); }
.swatch.active{ transform:scale(1.18); box-shadow:0 0 0 2px var(--secondary); }
.product-quantity{ display:flex; align-items:center; justify-content:space-between; width:125px; height:46px; border:1px solid var(--border); border-radius:0; overflow:hidden; background:#fff; }
.qty-btn{ width:42px; height:46px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.3s; font-size:16px; color:var(--primary); }
.qty-btn:hover{ background:#f7f7f7; color:var(--secondary); }
.qty-value{ font-size:17px; font-weight:600; }
.product-footer{ display:flex; align-items:center; gap:15px; margin-top:22px; }
.product-footer .btn{ flex:1; }
.btn-cart{ background:var(--primary); color:#fff; }
.btn-cart:hover{ background:var(--secondary); }
.btn-buy{ background:var(--secondary); color:#fff; }
.btn-buy:hover{ background:var(--secondary-hover); }
.product-icon{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--border); background:#fff; cursor:pointer; transition:.3s; }
.product-icon i{ font-size:16px; }
.product-icon:hover{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.product-extra{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.product-extra a{ font-size:13px; color:var(--text-light); transition:.3s; }
.product-extra a:hover{ color:var(--secondary); }
.product-card:hover .product-footer .btn{ box-shadow:var(--shadow-md); }
.product-card:hover .product-icon{ transform:translateY(-3px); }
.btn-cart i, .btn-buy i{ margin-right:8px; transition:.3s; }
.btn-cart:hover i, .btn-buy:hover i{ transform:translateX(3px); }
.product-card:hover .product-image{ background:linear-gradient( 180deg, #ffffff, #fff6fa ); }
@keyframes heroFloat{
0%{ transform:translateY(0); }
50%{ transform:translateY(-15px); }
100%{ transform:translateY(0); }
}
@keyframes float{
0%{ transform:translateY(0); }
50%{ transform:translateY(-18px); }
100%{ transform:translateY(0); }
}
@keyframes rotateBadge{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}
@media(max-width:1200px){
.hero-image{ min-height:560px; }
.hero-image::before{ width:520px; height:520px; }
.hero-image img{ max-width:520px; }
.hero-title{ font-size:56px; }
.hero-slide{ min-height:760px; }
.hero-circle{ width:520px; height:520px; }
.features-grid{ grid-template-columns:repeat(2,1fr); }
.categories-grid{ grid-template-columns:repeat(2,1fr); }
.products-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:992px){
.hero-image{ margin-top:60px; min-height:450px; }
.hero-image::before{ width:430px; height:430px; }
.hero-image img{ max-width:430px; }
.hero .container{ grid-template-columns:1fr; text-align:center; }
.hero-content{ max-width:100%; }
.hero-buttons{ justify-content:center; }
.hero-stats{ justify-content:center; }
.card-top, .card-bottom{ display:none; }
.hero-circle{ width:450px; height:450px; }
.hero-title{ font-size:48px; }
.products-grid{ grid-template-columns:repeat(2,1fr); }
.product-image{ height:360px; }
.product-content{ padding:22px; }
.current-price{ font-size:23px; }
.product-footer{ flex-wrap:wrap; }
.product-footer .btn{ width:100%; }
.product-quantity{ width:100%; }
}
@media(max-width:768px){
.hero-image{ min-height:340px; }
.hero-image::before{ width:300px; height:300px; }
.hero-image img{ max-width:320px; }
.hero-slide{ min-height:auto; padding:90px 0; }
.hero-title{ font-size:38px; }
.hero-description{ font-size:17px; }
.hero-circle{ width:330px; height:330px; }
.hero-stats{ flex-wrap:wrap; gap:25px; }
.hero-badge{ display:none; }
.features{ margin-top:40px; }
.features-grid{ grid-template-columns:1fr; }
.categories{ padding-top:70px; }
.categories-grid{ grid-template-columns:1fr; }
.feature-card{ padding:35px 25px; }
.category-image img{ height:340px; }
.category-content h3{ font-size:28px; }
.best-sellers{ padding:80px 0; }
.products-grid{ grid-template-columns:1fr; }
.product-image{ height:340px; }
.product-actions{ right:20px; }
.quick-view{ opacity:1; visibility:visible; transform:translate(-50%,0); }
}
@media(max-width:480px){
.hero-title{ font-size:30px; }
.hero-buttons{ flex-direction:column; }
.hero-buttons .btn{ width:100%; }
.feature-title{ font-size:20px; }
.category-content{ left:25px; bottom:25px; }
.category-content h3{ font-size:24px; }
.product-image{ height:300px; }
.product-image img{ padding:22px; }
.action-btn{ width:42px; height:42px; }
}
@media(max-width:576px){
.product-title{ font-size:17px; }
.current-price{ font-size:22px; }
.old-price{ font-size:17px; }
.product-rating{ flex-wrap:wrap; gap:6px; }
.product-footer{ flex-direction:column; align-items:stretch; }
.product-icon{ width:100%; border-radius:0; }
.product-swatches{ flex-wrap:wrap; }
.product-extra{ flex-direction:column; gap:10px; }
}
/*========================================================== 11 PRODUCT ==========================================================*/ .shop-banner{ position:relative; padding:90px 0; background:linear-gradient(180deg,#fff,#fff7fa); overflow:hidden; }
.shop-banner::before{ content:""; position:absolute; width:380px; height:380px; border-radius:50%; background:#ffe8f1; filter:blur(90px); left:-120px; top:-80px; }
.shop-banner::after{ content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:#fff5dc; filter:blur(90px); right:-100px; bottom:-100px; }
.shop-banner-content{ position:relative; z-index:2; text-align:center; }
.shop-banner h1{ font-size:58px; margin-bottom:18px; }
.shop-banner p{ max-width:650px; margin:auto; color:var(--text-light); font-size:17px; }
.breadcrumb{ margin-top:18px; display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--text-light); transition:.3s; }
.breadcrumb a:hover{ color:var(--secondary); }
.breadcrumb span{ color:var(--secondary); font-weight:600; }
.shop-layout{ display:grid; grid-template-columns:300px 1fr; gap:40px; padding:80px 0; }
.shop-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:35px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.products-found{ font-size:17px; color:var(--text-light); }
.products-found strong{ color:var(--primary); }
.toolbar-right{ display:flex; align-items:center; gap:18px; }
.view-switch{ display:flex; gap:10px; }
.view-btn{ width:46px; height:46px; border-radius:0; border:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.3s; }
.view-btn i{ font-size:16px; }
.view-btn:hover, .view-btn.active{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.sort-select{ min-width:220px; }
.sort-select select{ width:100%; height:48px; padding:0 18px; border:1px solid var(--border); border-radius:0; background:#fff; cursor:pointer; }
.shop-sidebar{ display:flex; flex-direction:column; gap:30px; }
.filter-widget{ background:#fff; border:1px solid var(--border); border-radius:0; padding:28px; }
.filter-widget h4{ font-size:20px; margin-bottom:20px; }
.category-filter{ display:flex; flex-direction:column; gap:14px; }
.category-filter li{ display:flex; justify-content:space-between; align-items:center; }
.category-filter a{ color:var(--text); transition:.3s; }
.category-filter a:hover{ color:var(--secondary); }
.category-filter span{ color:var(--text-muted); font-size:13px; }
.brand-filter{ display:flex; flex-direction:column; gap:14px; }
.brand-filter label{ display:flex; justify-content:space-between; cursor:pointer; font-size:17px; }
.brand-filter input{ accent-color:var(--secondary); }
.price-range{ margin-top:10px; }
.price-slider{ width:100%; accent-color:var(--secondary); }
.price-values{ margin-top:15px; display:flex; justify-content:space-between; font-size:16px; color:var(--text-light); }
.rating-filter{ display:flex; flex-direction:column; gap:12px; }
.rating-item{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.rating-stars{ display:flex; gap:2px; }
.rating-stars i{ color:#FDBA12; font-size:16px; }
.rating-count{ font-size:13px; color:var(--text-muted); }
.filter-btn{ width:100%; margin-top:20px; }
.shop-content{ width:100%; }
.products-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.products-grid.list-view{ display:flex; flex-direction:column; gap:25px; }
.products-grid.list-view .product-card{ display:grid; grid-template-columns:320px 1fr; align-items:center; overflow:hidden; }
.products-grid.list-view .product-image{ height:340px; }
.products-grid.list-view .product-content{ padding:35px; }
.products-grid.list-view .product-short{ display:block; }
.products-grid.list-view .product-footer{ margin-top:25px; }
.products-grid .product-card{ transition:.35s ease; }
.products-grid .product-card:hover{ transform:translateY(-8px); }
.no-products{ text-align:center; padding:100px 30px; border:2px dashed var(--border); border-radius:0; }
.no-products img{ width:180px; margin:auto auto 25px; }
.no-products h3{ font-size:30px; margin-bottom:15px; }
.no-products p{ color:var(--text-light); margin-bottom:25px; }
.product-skeleton{ border-radius:0; overflow:hidden; background:#fff; border:1px solid var(--border); }
.skeleton-image{ height:360px; background:#efefef; animation:pulse 1.5s infinite; }
.skeleton-content{ padding:25px; }
.skeleton-line{ height:14px; margin-bottom:14px; border-radius:0; background:#efefef; animation:pulse 1.5s infinite; }
.skeleton-line.short{ width:60%; }
.skeleton-line.medium{ width:80%; }
.skeleton-line.full{ width:100%; }
.pagination{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:70px; }
.page-item{ list-style:none; }
.page-link{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; border:1px solid var(--border); color:var(--primary); font-weight:600; transition:.3s; }
.page-link:hover{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.page-item.active .page-link{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.load-more{ text-align:center; margin-top:60px; }
.result-info{ margin-bottom:25px; color:var(--text-light); font-size:17px; }
.result-info strong{ color:var(--primary); }
.product-count{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; border-radius:50%; background:var(--secondary); color:#fff; font-size:16px; font-weight:600; }
.product-details{ padding:100px 0; background:var(--white); }
.product-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:flex-start; }
.product-gallery{ position:sticky; top:120px; }
.gallery-main{ position:relative; background:#fafafa; border:1px solid var(--border); border-radius:0; overflow:hidden; height:650px; display:flex; justify-content:center; align-items:center; transition:.4s; }
.gallery-main img{ width:100%; max-width:520px; height:auto; object-fit:contain; transition:.45s; }
.gallery-main:hover img{ transform:scale(1.08); }
.gallery-badge{ position:absolute; top:25px; left:25px; background:var(--secondary); color:#fff; padding:10px 18px; border-radius:0; font-size:13px; font-weight:600; z-index:10; }
.zoom-btn{ position:absolute; right:25px; top:25px; width:50px; height:50px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); cursor:pointer; transition:.3s; z-index:10; }
.zoom-btn:hover{ background:var(--secondary); color:#fff; }
.gallery-nav{ position:absolute; top:50%; left:0; width:100%; display:flex; justify-content:space-between; transform:translateY(-50%); padding:0 20px; pointer-events:none; }
.gallery-arrow{ width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); cursor:pointer; transition:.3s; pointer-events:auto; }
.gallery-arrow:hover{ background:var(--secondary); color:#fff; }
.gallery-thumbs{ display:flex; gap:18px; margin-top:25px; }
.thumb{ width:95px; height:95px; border:2px solid transparent; border-radius:0; overflow:hidden; cursor:pointer; transition:.3s; background:#fafafa; }
.thumb img{ width:100%; height:100%; object-fit:contain; padding:10px; }
.thumb.active{ border-color:var(--secondary); }
.thumb:hover{ border-color:var(--secondary); }
.zoom-container{ overflow:hidden; cursor:zoom-in; }
.zoom-container img{ transition:.35s ease; }
.zoom-container:hover img{ transform:scale(1.15); }
.gallery-loading{ display:flex; justify-content:center; align-items:center; height:650px; background:#fafafa; }
.gallery-loading::after{ content:""; width:42px; height:42px; border:4px solid #e8e8e8; border-top-color:var(--secondary); border-radius:50%; animation:gallerySpin .8s linear infinite; }
.product-info{ display:flex; flex-direction:column; }
.product-brand{ display:inline-flex; align-items:center; width:max-content; padding:8px 16px; border-radius:0; background:#FFF4F8; color:var(--secondary); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:18px; }
.product-info .product-title{ font-size:46px; font-weight:700; line-height:1.2; color:var(--primary); margin-bottom:20px; transition:var(--transition); }
.product-sku{ display:flex; align-items:center; gap:8px; margin-bottom:22px; font-size:16px; }
.product-sku strong{ color:var(--primary); }
.product-sku span{ color:var(--text-light); }
.product-rating{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:25px; }
.product-rating .stars{ display:flex; gap:4px; }
.product-rating .stars i{ color:#FDBA12; font-size:16px; }
.review-count{ color:var(--text-light); font-size:16px; }
.review-count a{ color:var(--secondary); }
.product-price{ display:flex; align-items:center; flex-wrap:wrap; gap:15px; margin-bottom:25px; }
.current-price{ font-size:42px; font-weight:700; color:var(--primary); }
.old-price{ font-size:24px; text-decoration:line-through; color:var(--text-muted); }
.discount-tag{ padding:8px 15px; background:#EAF8EF; color:var(--success); border-radius:0; font-size:13px; font-weight:600; }
.availability{ display:flex; align-items:center; gap:10px; margin-bottom:28px; font-size:17px; font-weight:500; }
.availability.in-stock{ color:var(--success); }
.availability.low-stock{ color:#ff9800; }
.availability.out-stock{ color:var(--danger); }
.availability::before{ content:""; width:10px; height:10px; border-radius:50%; background:currentColor; }
.product-description{ color:var(--text-light); line-height:1.9; font-size:16px; margin-bottom:35px; }
.product-features{ align-items:flex-start; justify-content:flex-start; flex-direction:column; gap:16px; margin-bottom:35px; }
.product-features li{ align-items:flex-start; justify-content:flex-start; align-items:flex-start; gap:12px; line-height:19px; text-transform:uppercase; font-size:16px; border-bottom:1px solid #dcdcdc; padding:5px 0px 0px 0px; }
.product-features i{ color:var(--secondary); font-size:16px; margin-top:2px; }
.product-meta{ border-top:1px solid var(--border); padding-top:25px; display:flex; flex-direction:column; gap:15px; }
.product-meta-row{ display:flex; gap:10px; }
.product-meta-row strong{ min-width:110px; color:var(--primary); }
.product-meta-row span{ color:var(--text-light); }
.product-meta-row a{ color:var(--secondary); }
.product-info:hover .product-title{ color:var(--secondary); }
.product-options{ margin-top:35px; }
.option-group{ margin-bottom:30px; }
.option-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; font-size:17px; font-weight:600; color:var(--primary); }
.option-title span{ color:var(--secondary); }
.color-options{ display:flex; flex-wrap:wrap; gap:14px; }
.color-option{ width:42px; height:42px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px var(--border); cursor:pointer; transition:var(--transition); }
.color-option:hover{ transform:scale(1.12); }
.color-option.active{ transform:scale(1.12); box-shadow:0 0 0 2px var(--secondary); }
.size-options{ display:flex; flex-wrap:wrap; gap:12px; }
.size-option{ min-width:70px; height:46px; border:1px solid var(--border); border-radius:0; background:#fff; display:flex; justify-content:center; align-items:center; font-weight:600; cursor:pointer; transition:.3s; }
.size-option:hover{ border-color:var(--secondary); color:var(--secondary); }
.size-option.active{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.purchase-actions{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:35px 0; }
.quantity-box{ display:flex; align-items:center; justify-content:space-between; width:150px; height:56px; border:1px solid var(--border); border-radius:0; overflow:hidden; background:#fff; }
.quantity-btn{ width:48px; height:56px; display:flex; justify-content:center; align-items:center; cursor:pointer; transition:.3s; font-size:20px; }
.quantity-btn:hover{ background:#f7f7f7; color:var(--secondary); }
.quantity-value{ font-size:16px; font-weight:600; }
.btn-cart{ flex:1; min-width:220px; }
.btn-buy{ flex:1; min-width:220px; }
.product-actions{ display:flex; gap:14px; margin-top:10px; }
.action-circle{ width:54px; height:54px; border-radius:50%; border:1px solid var(--border); display:flex; justify-content:center; align-items:center; cursor:pointer; transition:.3s; background:#fff; }
.action-circle i{ font-size:20px; }
.action-circle:hover{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.delivery-info{ margin-top:35px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:25px 0; display:flex; flex-direction:column; gap:20px; }
.delivery-item{ display:flex; align-items:flex-start; gap:16px; }
.delivery-item i{ font-size:24px; color:var(--secondary); }
.delivery-item h5{ margin-bottom:4px; font-size:16px; }
.delivery-item p{ font-size:16px; color:var(--text-light); }
.payment-methods{ margin-top:30px; }
.payment-methods h5{ margin-bottom:15px; font-size:16px; }
.payment-icons{ display:flex; flex-wrap:wrap; gap:12px; }
.payment-icons img{ height:34px; width:auto; border:1px solid var(--border); border-radius:0; padding:6px; background:#fff; }
.share-product{ display:flex; align-items:center; gap:18px; margin-top:30px; }
.share-product span{ font-weight:600; }
.share-icons{ display:flex; gap:10px; }
.share-icons a{ width:42px; height:42px; border-radius:50%; display:flex; justify-content:center; align-items:center; background:#fff; border:1px solid var(--border); transition:.3s; }
.share-icons a:hover{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.product-summary{ background:#fff; border:1px solid var(--border); border-radius:0; padding:30px; box-shadow:var(--shadow-sm); transition:var(--transition); }
.product-summary:hover{ box-shadow:var(--shadow-lg); }
.sticky-purchase{ position:sticky; top:110px; }
.trust-badges{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:45px; }
.trust-item{ text-align:center; background:#fff; border:1px solid var(--border); border-radius:0; padding:24px 18px; transition:.35s; }
.trust-item:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.trust-item i{ font-size:34px; color:var(--secondary); margin-bottom:15px; }
.trust-item h5{ font-size:17px; margin-bottom:8px; color:var(--primary); }
.trust-item p{ font-size:13px; color:var(--text-light); line-height:1.6; }
.guarantee-strip{ margin-top:40px; padding:18px 25px; border-radius:0; background:#FFF7F9; border:1px solid rgba(255,105,180,.15); display:flex; justify-content:center; align-items:center; gap:15px; font-weight:600; color:var(--secondary); }
.guarantee-strip i{ font-size:22px; }
.product-highlights{ margin-top:40px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.highlight-box{ background:#fafafa; border-radius:0; padding:22px; border:1px solid var(--border); transition:.3s; }
.highlight-box:hover{ border-color:var(--secondary); transform:translateY(-5px); }
.highlight-box h6{ margin-bottom:10px; color:var(--primary); font-size:17px; }
.highlight-box p{ color:var(--text-light); line-height:1.7; font-size:16px; }
.recently-viewed{ margin-top:90px; }
.recently-viewed .section-title{ margin-bottom:35px; }
.product-gallery, .product-info{ animation:fadeUp .7s ease; }
.gallery-main:hover{ box-shadow:0 30px 60px rgba(0,0,0,.08); }
.btn-cart, .btn-buy{ position:relative; overflow:hidden; }
.btn-cart::before, .btn-buy::before{ content:""; position:absolute; top:0; left:-120%; width:100%; height:100%; background:rgba(255,255,255,.25); transform:skewX(-25deg); transition:.65s; }
.btn-cart:hover::before, .btn-buy:hover::before{ left:120%; }
.mobile-cart-bar{ position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--border); padding:12px 18px; display:none; align-items:center; gap:12px; z-index:999; box-shadow:0 -10px 30px rgba(0,0,0,.08); }
.mobile-price{ flex:1; }
.mobile-price strong{ display:block; font-size:22px; color:var(--primary); }
.mobile-price span{ font-size:13px; color:var(--text-light); }
.mobile-cart-bar .btn{ padding:14px 22px; }
.secure-checkout{ margin-top:25px; display:flex; align-items:center; gap:12px; color:var(--success); font-weight:600; }
.secure-checkout i{ font-size:16px; }
.stock-progress{ margin-top:20px; }
.stock-progress .progress{ width:100%; height:8px; background:#eee; border-radius:0; overflow:hidden; }
.stock-progress .progress span{ display:block; height:100%; width:70%; background:linear-gradient(90deg,var(--secondary),#ff95c5); }
@keyframes pulse{
0%{ opacity:.55; }
50%{ opacity:1; }
100%{ opacity:.55; }
}
@keyframes gallerySpin{
to{ transform:rotate(360deg); }
}
@keyframes fadeUp{
from{ opacity:0; transform:translateY(30px); }
to{ opacity:1; transform:translateY(0); }
}
@media(max-width:1100px){
.shop-layout{ grid-template-columns:260px 1fr; }
}
@media(max-width:992px){
.shop-layout{ grid-template-columns:1fr; }
.shop-sidebar{ order:2; }
.shop-content{ order:1; }
.products-grid.list-view .product-card{ grid-template-columns:1fr; }
.products-grid.list-view .product-image{ height:320px; }
.product-wrapper{ grid-template-columns:1fr; }
.product-gallery{ position:relative; top:0; }
.gallery-main{ height:520px; }
.product-info{ margin-top:40px; }
.product-info .product-title{ font-size:36px; }
.current-price{ font-size:32px; }
.old-price{ font-size:20px; }
.purchase-actions{ flex-direction:column; align-items:stretch; }
.quantity-box{ width:100%; }
.btn-cart, .btn-buy{ width:100%; }
.product-highlights{ grid-template-columns:1fr; }
.sticky-purchase{ position:relative; top:0; }
}
@media(max-width:768px){
.shop-banner{ padding:70px 0; }
.shop-banner h1{ font-size:40px; }
.shop-toolbar{ flex-direction:column; align-items:flex-start; gap:20px; }
.toolbar-right{ width:100%; justify-content:space-between; flex-wrap:wrap; }
.sort-select{ width:100%; }
.products-grid{ grid-template-columns:1fr; }
.pagination{ flex-wrap:wrap; gap:10px; }
.page-link{ width:44px; height:44px; }
.product-details{ padding:70px 0; padding-bottom:95px; }
.gallery-main{ height:420px; }
.gallery-main img{ max-width:340px; }
.gallery-thumbs{ justify-content:center; flex-wrap:wrap; }
.thumb{ width:80px; height:80px; }
.product-info .product-title{ font-size:30px; }
.product-description{ font-size:17px; }
.product-meta-row{ flex-direction:column; gap:4px; }
.product-meta-row strong{ min-width:auto; }
.product-actions{ justify-content:center; }
.delivery-item{ align-items:flex-start; }
.share-product{ flex-direction:column; align-items:flex-start; gap:15px; }
.trust-badges{ grid-template-columns:1fr 1fr; gap:15px; }
.guarantee-strip{ flex-direction:column; text-align:center; }
.mobile-cart-bar{ display:flex; }
}
@media(max-width:480px){
.shop-banner h1{ font-size:32px; }
.view-btn{ width:42px; height:42px; }
.filter-widget{ padding:22px; }
.gallery-main{ height:340px; }
.gallery-arrow{ width:40px; height:40px; }
.zoom-btn{ width:44px; height:44px; }
.thumb{ width:70px; height:70px; }
.product-info .product-title{ font-size:26px; }
.current-price{ font-size:28px; }
.old-price{ font-size:16px; }
.discount-tag{ font-size:12px; }
.color-option{ width:36px; height:36px; }
.size-option{ min-width:60px; height:42px; }
.action-circle{ width:48px; height:48px; }
.payment-icons{ justify-content:center; }
.trust-badges{ grid-template-columns:1fr; }
.mobile-cart-bar{ padding:10px; }
.mobile-price strong{ font-size:16px; }
.mobile-cart-bar .btn{ padding:12px 18px; font-size:16px; }
.highlight-box{ padding:18px; }
}
@media(max-width:1200px){
.products-grid{ grid-template-columns:repeat(2,1fr); }
.product-wrapper{ gap:45px; }
.gallery-main{ height:560px; }
.product-info .product-title{ font-size:40px; }
.current-price{ font-size:36px; }
.trust-badges{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:576px){
.products-grid.list-view .product-content{ padding:25px; }
.skeleton-image{ height:300px; }
.no-products{ padding:60px 20px; }
.no-products h3{ font-size:24px; }
}
/*========================================================== 13 FOOTER ==========================================================*/ .newsletter{ position:relative; padding:90px 0; background:linear-gradient(135deg,#111,#222); overflow:hidden; }
.newsletter::before{ content:""; position:absolute; width:380px; height:380px; background:rgba(255,255,255,.05); border-radius:50%; top:-180px; right:-120px; }
.newsletter::after{ content:""; position:absolute; width:260px; height:260px; background:rgba(255,255,255,.04); border-radius:50%; left:-120px; bottom:-120px; }
.newsletter-wrapper{ position:relative; z-index:2; display:grid; grid-template-columns:1fr auto; gap:60px; align-items:center; }
.newsletter-content h6{ color:var(--secondary); text-transform:uppercase; letter-spacing:2px; margin-bottom:15px; font-size:16px; }
.newsletter-content h2{ color:#fff; font-size:44px; line-height:1.2; margin-bottom:20px; }
.newsletter-content p{ color:rgba(255,255,255,.75); max-width:560px; line-height:1.8; }
.newsletter-form{ display:flex; align-items:center; background:#fff; border-radius:0; overflow:hidden; width:560px; max-width:100%; }
.newsletter-form input{ flex:1; border:none; padding:22px 30px; font-size:17px; background:transparent; }
.newsletter-form input:focus{ outline:none; }
.newsletter-form button{ border:none; padding:22px 38px; background:var(--secondary); color:#fff; cursor:pointer; font-weight:600; transition:.35s; }
.newsletter-form button:hover{ background:var(--primary); }
.business-hours{ display:flex; flex-direction:column; gap:16px; }
.business-hours li{ display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px dashed rgba(255,255,255,.08); }
.business-hours li:last-child{ border-bottom:none; }
.business-hours strong{ color:#fff; font-weight:500; }
.business-hours span{ color:rgba(255,255,255,.65); }
.footer-contact-card{ margin-top:30px; padding:22px; border-radius:0; background:rgba(255,255,255,.05); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.08); }
.footer-contact-card h5{ color:#fff; margin-bottom:12px; }
.footer-contact-card p{ color:rgba(255,255,255,.65); line-height:1.8; margin-bottom:18px; }
.footer-contact-card .btn{ width:100%; }
.footer-distributor{ margin-top:35px; padding:22px; border-radius:0; background:linear-gradient(135deg,var(--secondary),#ff82ba); color:#fff; text-align:center; }
.footer-distributor h4{ font-size:20px; margin-bottom:12px; }
.footer-distributor p{ opacity:.9; line-height:1.8; margin-bottom:18px; }
.footer-distributor .btn{ background:#fff; color:var(--secondary); }
.footer-distributor .btn:hover{ background:#111; color:#fff; }
.footer-badges{ display:flex; flex-wrap:wrap; gap:12px; margin-top:25px; }
.footer-badge{ padding:10px 16px; border-radius:0; background:rgba(255,255,255,.08); color:#fff; font-size:13px; transition:.3s; }
.footer-badge:hover{ background:var(--secondary); }
.footer-widget:hover{ transform:translateY(-4px); }
.footer-instagram{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.instagram-item{ position:relative; overflow:hidden; border-radius:0; aspect-ratio:1/1; cursor:pointer; }
.instagram-item img{ width:100%; height:100%; object-fit:cover; transition:.45s; }
.instagram-item::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:.35s; z-index:1; }
.instagram-item::after{ content:"\F437"; font-family:"bootstrap-icons"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.7); color:#fff; font-size:26px; opacity:0; transition:.35s; z-index:2; }
.instagram-item:hover img{ transform:scale(1.12); }
.instagram-item:hover::before{ opacity:1; }
.instagram-item:hover::after{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.footer-payments{ margin-top:35px; }
.footer-payments h5{ color:#fff; margin-bottom:16px; font-size:16px; }
.payment-list{ display:flex; flex-wrap:wrap; gap:12px; }
.payment-list img{ height:34px; width:auto; background:#fff; padding:6px 10px; border-radius:0; transition:.3s; }
.payment-list img:hover{ transform:translateY(-3px); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:25px 0; margin-top:70px; }
.footer-bottom-wrapper{ display:flex; justify-content:space-between; align-items:center; gap:25px; }
.footer-copyright{ color:rgba(255,255,255,.65); font-size:16px; }
.footer-copyright strong{ color:#fff; }
.footer-copyright a{ color:var(--secondary); }
.footer-bottom-menu{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-bottom-menu a{ color:rgba(255,255,255,.65); transition:.3s; font-size:16px; }
.footer-bottom-menu a:hover{ color:#fff; }
.footer-love{ margin-top:18px; text-align:center; color:rgba(255,255,255,.55); font-size:16px; }
.footer-love i{ color:#ff4d6d; animation:heartBeat 1.8s infinite; }
.back-to-top{ position:fixed; right:30px; bottom:30px; width:56px; height:56px; border-radius:50%; background:var(--secondary); color:#fff; display:flex; justify-content:center; align-items:center; font-size:22px; box-shadow:0 12px 30px rgba(0,0,0,.18); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(20px); transition:.35s; z-index:999; }
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ transform:translateY(-6px); background:var(--primary); }
.whatsapp-float{ position:fixed; left:30px; bottom:30px; width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff; display:flex; justify-content:center; align-items:center; font-size:28px; box-shadow:0 12px 30px rgba(0,0,0,.18); transition:.35s; z-index:999; }
.whatsapp-float:hover{ transform:translateY(-6px) scale(1.05); }
@keyframes heartBeat{
0%,100%{ transform:scale(1); }
50%{ transform:scale(1.2); }
}
@media(max-width:1200px){
.footer-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:992px){
.newsletter-wrapper{ grid-template-columns:1fr; text-align:center; }
.newsletter-content p{ margin:auto; }
.newsletter-form{ margin:auto; }
.footer-widget{ margin-bottom:20px; }
.footer-contact-card{ margin-top:25px; }
.footer-bottom-wrapper{ flex-direction:column; text-align:center; }
}
@media(max-width:768px){
.newsletter{ padding:70px 0; }
.newsletter-content h2{ font-size:34px; }
.footer{ padding-top:70px; }
.footer-grid{ grid-template-columns:1fr; gap:40px; }
.footer-about{ padding-right:0; }
.footer-widget-title{ font-size:16px; }
.footer-category{ padding:10px 0; }
.business-hours li{ flex-direction:column; align-items:flex-start; gap:6px; }
.footer-distributor{ padding:18px; }
.footer-instagram{ grid-template-columns:repeat(2,1fr); }
.footer-bottom{ margin-top:50px; }
.back-to-top{ width:50px; height:50px; right:20px; bottom:20px; }
.whatsapp-float{ width:54px; height:54px; left:20px; bottom:20px; }
}
@media(max-width:576px){
.newsletter-form{ flex-direction:column; border-radius:0; }
.newsletter-form input{ width:100%; text-align:center; }
.newsletter-form button{ width:100%; }
.newsletter-content h2{ font-size:28px; }
}
@media(max-width:480px){
.footer-links{ gap:12px; }
.footer-contact-card{ padding:18px; }
.footer-distributor h4{ font-size:16px; }
.footer-badges{ justify-content:center; }
.footer-instagram{ grid-template-columns:1fr 1fr; gap:10px; }
.payment-list{ justify-content:center; }
.footer-bottom-menu{ justify-content:center; gap:15px; }
.footer-copyright{ font-size:13px; }
.back-to-top{ width:46px; height:46px; font-size:16px; }
.whatsapp-float{ width:48px; height:48px; font-size:22px; }
}
/*========================================================== FINAL COMPATIBILITY OVERRIDES These align the current PHP component markup with the locked design. ==========================================================*/ .hero-wrapper{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,1fr); align-items:center; gap:80px; min-height:760px; padding:80px 0; }
.hero-content h1{ font-size:68px; line-height:1.08; font-weight:700; color:var(--primary); margin-bottom:26px; }
.hero-content p{ max-width:620px; font-size:17px; line-height:1.9; color:var(--text-light); margin-bottom:38px; }
.hero-stats .stat h3, .stat h3{ font-family:var(--body-font); font-size:34px; font-weight:700; color:var(--primary); margin-bottom:4px; }
.hero-stats .stat span, .stat span{ display:block; font-size:16px; color:var(--text-light); }
.product-image > .product-badge.sale, .product-image > .product-badge.new, .product-image > .product-badge.hot{ position:absolute; top:18px; left:18px; z-index:5; display:inline-flex; align-items:center; justify-content:center; min-width:68px; height:32px; padding:0 14px; border-radius:0; font-size:12px; font-weight:700; color:#fff; }
.product-image > .product-badge.sale{background:var(--secondary);}
.product-image > .product-badge.new{background:var(--primary);}
.product-image > .product-badge.hot{background:#ff8a00;}
.product-actions a{ width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--primary); box-shadow:0 10px 25px rgba(0,0,0,.12); transition:var(--transition); }
.product-actions a:hover{ background:var(--secondary); color:#fff; }
.new-price{ font-size:26px; font-weight:700; color:var(--primary); }
.brand-wrapper{ display:grid; grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr); align-items:center; gap:80px; }
.brand-image{ position:relative; border-radius:0; overflow:hidden; min-height:560px; background:#fff7fa; }
.brand-image img{ width:100%; height:100%; min-height:560px; object-fit:cover; }
.experience-box{ position:absolute; right:28px; bottom:28px; width:170px; min-height:150px; border-radius:0; background:#fff; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }
.experience-box h2{ font-family:var(--body-font); font-size:44px; color:var(--secondary); margin-bottom:6px; }
.experience-box span{ font-size:16px; color:var(--text-light); }
.brand-content p{ color:var(--text-light); line-height:1.9; margin-bottom:18px; }
.brand-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:32px 0; }
.feature-item{ display:flex; align-items:center; gap:10px; color:var(--primary); font-weight:500; }
.feature-item i{ color:var(--secondary); }
.brand-counters{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:34px 0; }
.counter{ padding:20px; border:1px solid var(--border); border-radius:0; background:#fff; text-align:center; }
.counter h3{ font-family:var(--body-font); font-size:30px; color:var(--secondary); }
.counter span{ color:var(--text-light); font-size:16px; }
.brand-buttons{ display:flex; gap:16px; flex-wrap:wrap; }
.testimonials{ background:#fff7fa; }
.testimonial-card{ background:#fff; border:1px solid var(--border); border-radius:0; padding:34px; box-shadow:var(--shadow-sm); }
.testimonial-rating{ display:flex; gap:4px; color:#FDBA12; margin-bottom:18px; }
.testimonial-text{ color:var(--text-light); line-height:1.9; margin-bottom:26px; }
.testimonial-user{ display:flex; align-items:center; gap:14px; }
.testimonial-user img{ width:58px; height:58px; border-radius:50%; object-fit:cover; background:#f3f3f3; }
.testimonial-user h4{ font-family:var(--body-font); font-size:16px; margin-bottom:2px; }
.testimonial-user span{ color:var(--text-muted); font-size:13px; }
.testimonial-counter{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:60px; }
.counter-box{ background:#fff; border:1px solid var(--border); border-radius:0; padding:26px 20px; text-align:center; }
.counter-box h3{ font-family:var(--body-font); font-size:32px; color:var(--secondary); }
.counter-box span{ color:var(--text-light); }
.newsletter-benefits{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:55px; }
.benefit-item{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); border-radius:0; padding:26px; color:#fff; }
.benefit-item i{ font-size:28px; color:var(--secondary); margin-bottom:16px; }
.benefit-item h4{ color:#fff; margin-bottom:10px; }
.benefit-item p{ color:rgba(255,255,255,.72); line-height:1.7; font-size:16px; }
.newsletter-cta{ position:relative; z-index:2; margin-top:44px; background:#fff; border-radius:0; padding:32px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.newsletter-cta h3{ font-size:28px; margin-bottom:8px; }
.newsletter-cta p{ color:var(--text-light); }
@media(max-width:1200px){
.hero-wrapper{ gap:50px; }
.hero-content h1{ font-size:56px; }
.brand-wrapper{ gap:50px; }
.newsletter-benefits{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:992px){
.hero-wrapper, .brand-wrapper{ grid-template-columns:1fr; text-align:center; }
.hero-content p{ margin-left:auto; margin-right:auto; }
.brand-features{ text-align:left; }
.testimonial-counter{ grid-template-columns:repeat(2,1fr); }
.newsletter-cta{ flex-direction:column; text-align:center; }
}
@media(max-width:768px){
.hero-wrapper{ min-height:auto; padding:70px 0; }
.hero-content h1{ font-size:38px; }
.hero-stats{ justify-content:center; flex-wrap:wrap; gap:26px; }
.brand-features, .brand-counters, .testimonial-counter, .newsletter-benefits{ grid-template-columns:1fr; }
.brand-image, .brand-image img{ min-height:360px; }
}
@media(max-width:480px){
.hero-content h1{ font-size:32px; }
.brand-buttons, .hero-buttons{ flex-direction:column; }
.brand-buttons .btn, .hero-buttons .btn{ width:100%; }
}
/*========================================================== BLOCK 1 FIX - TOPBAR, HEADER, HERO Paste this at the very end of assets/css/style.css ==========================================================*/ html, body{ width:100%; min-width:0; overflow-x:hidden; }
body{ background:#fffdfb; }
#page{ width:100%; min-height:100vh; overflow:hidden; }
.container{ width:100%; max-width:1400px; margin-inline:auto; padding-inline:24px; }
.section{ width:100%; padding:95px 0; position:relative; }
.section-header{ max-width:760px; margin:0 auto 58px; text-align:center; }
.section-subtitle{ display:block; margin-bottom:12px; color:#d83a73; font-size:13px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; }
.section-title{ font-family:'KMR Waldenburg Buch', Arial, Helvetica, sans-serif; font-size:48px; line-height:1.12; color:#111; margin-bottom:18px; }
.section-description{ color:#666; font-size:16px; line-height:1.8; }
/* Topbar */ .topbar{ width:100%; min-height:38px; background:#111; color:#fff; display:flex; align-items:center; font-size:13px; }
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
/* Header */ .site-header{ position:sticky; top:0; z-index:999; width:100%; background:#fff; border-bottom:1px solid #f0edf0; box-shadow:0 4px 18px rgba(17,17,17,.04); }
.navbar{ min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.logo a{ display:inline-flex; align-items:center; color:#111; font-size:24px; font-weight:800; letter-spacing:.2px; }
.logo img{ width:auto; max-height:76px; object-fit:contain; margin:10px 0px 0px 0px; }
.logo img:not([src]), .logo img[src='']{ display:none; }
.nav-menu{ display:flex; align-items:center; justify-content:center; gap:34px; }
.nav-menu > li{ position:relative; }
.nav-menu > li > a{ display:flex; align-items:center; gap:6px; padding:28px 0; color:#111; font-size:16px; font-weight:600; }
.nav-menu > li > a.active, .nav-menu > li > a:hover{ color:#d83a73; }
.dropdown{ position:absolute; top:100%; left:0; min-width:220px; padding:12px 0; background:#fff; border:1px solid #ececec; border-radius:0; box-shadow:0 18px 45px rgba(0,0,0,.10); opacity:0; visibility:hidden; transform:translateY(12px); transition:.25s ease; }
.has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:11px 20px; color:#333; font-size:16px; }
.dropdown a:hover{ color:#d83a73; background:#fff7fa; }
.header-icons{ display:flex; align-items:center; gap:10px; }
.icon-btn, .mobile-toggle{ width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#111; background:#fff; border:1px solid transparent; }
.icon-btn:hover, .mobile-toggle:hover{ color:#d83a73; border-color:#f3d5df; background:#fff7fa; }
.mobile-toggle{ display:none; }
/* Hero Slider containment */ .hero{ width:100%; position:relative; overflow:hidden; background:linear-gradient(135deg,#fffdfb 0%,#fff5f8 55%,#fff 100%); }
.heroSlider, .heroSlider .swiper-wrapper, .heroSlider .swiper-slide{ width:100%; }
.heroSlider{ position:relative; overflow:hidden; }
.heroSlider .swiper-wrapper{ display:flex; align-items:stretch; }
.heroSlider .swiper-slide{ flex:0 0 100%; min-width:100%; overflow:hidden; }
.hero-wrapper{ width:100%; min-height:720px; padding:84px 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,1fr); align-items:center; gap:76px; }
.hero-content{ max-width:660px; position:relative; z-index:2; }
.hero-subtitle{ display:inline-flex; align-items:center; gap:12px; margin-bottom:20px; color:#d83a73; font-size:13px; font-weight:800; letter-spacing:2.3px; text-transform:uppercase; }
.hero-subtitle::before{ content:""; width:42px; height:2px; background:#d83a73; border-radius:0; }
.hero-content h1{ font-family:'KMR Waldenburg Buch', Arial, Helvetica, sans-serif; color:#111; font-size:68px; line-height:1.06; font-weight:700; margin-bottom:26px; letter-spacing:0; }
.hero-content p{ max-width:610px; color:#666; font-size:17px; line-height:1.9; margin-bottom:38px; }
.hero-buttons{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.btn{ min-height:52px; min-width:160px; padding:0 28px; border-radius:0; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-size:17px; font-weight:700; border:1px solid transparent; transition:.25s ease; }
.btn-primary{ background:#111; color:#fff; }
.btn-primary:hover{ background:#d83a73; color:#fff; transform:translateY(-2px); box-shadow:0 14px 32px rgba(216,58,115,.22); }
.btn-outline{ background:#fff; color:#111; border-color:#111; }
.btn-outline:hover{ background:#111; color:#fff; transform:translateY(-2px); }
.hero-stats{ display:flex; align-items:flex-start; gap:44px; margin-top:52px; }
.hero-stats .stat h3{ font-family:'KMR Waldenburg Buch', sans-serif; color:#111; font-size:34px; line-height:1; font-weight:800; margin-bottom:8px; }
.hero-stats .stat span{ display:block; color:#777; font-size:16px; line-height:1.35; }
.hero-image{ min-width:0; min-height:560px; position:relative; display:flex; align-items:center; justify-content:center; }
.hero-image::before{ content:""; position:absolute; width:min(580px,90%); aspect-ratio:1; border-radius:50%; background:linear-gradient(135deg,#fff,#fde7ef); box-shadow:inset 0 0 0 1px rgba(216,58,115,.08); }
.hero-image::after{ content:""; position:absolute; width:min(470px,78%); aspect-ratio:1; border-radius:50%; background:rgba(216,58,115,.12); filter:blur(80px); }
.hero-image img{ position:relative; z-index:2; width:100%; max-width:560px; max-height:620px; object-fit:contain; filter:drop-shadow(0 32px 48px rgba(0,0,0,.16)); }
.hero-image img[src=''], .hero-image img:not([src]){ display:none; }
.hero-image:has(img[src=''])::before, .hero-image:has(img:not([src]))::before{ content:"Image Missing"; display:flex; align-items:center; justify-content:center; color:#d83a73; font-weight:700; }
.hero-next, .hero-prev{ width:48px; height:48px; border-radius:50%; background:#fff; color:#111; box-shadow:0 12px 30px rgba(0,0,0,.10); }
.hero-next::after, .hero-prev::after{ font-size:16px; font-weight:800; }
.hero-pagination{ bottom:24px !important; }
.hero-pagination .swiper-pagination-bullet{ width:10px; height:10px; background:#d83a73; opacity:.25; }
.hero-pagination .swiper-pagination-bullet-active{ width:34px; border-radius:0; opacity:1; }
@media(max-width:1100px){
.hero-wrapper{ grid-template-columns:1fr; min-height:auto; gap:45px; text-align:center; }
.hero-content{ max-width:820px; margin-inline:auto; }
.hero-content p{ margin-inline:auto; }
.hero-buttons, .hero-stats{ justify-content:center; }
.hero-image{ min-height:420px; }
}
@media(max-width:768px){
.container{ padding-inline:18px; }
.section{ padding:68px 0; }
.section-title{ font-size:34px; }
.nav-menu, .header-icons .icon-btn:not(.search-btn){ display:none; }
.mobile-toggle{ display:inline-flex; }
.navbar{ min-height:68px; }
.logo img{ width:140px; }
.hero-wrapper{ padding:62px 0 78px; }
.hero-content h1{ font-size:40px; }
.hero-content p{ font-size:17px; }
.hero-buttons{ flex-direction:column; align-items:stretch; }
.hero-buttons .btn{ width:100%; }
.hero-stats{ gap:22px; flex-wrap:wrap; }
.hero-stats .stat{ min-width:120px; }
.hero-image{ min-height:320px; }
.hero-image img{ max-width:310px; }
.hero-next, .hero-prev{ display:none; }
}
@media(max-width:480px){
.hero-content h1{ font-size:32px; }
.hero-subtitle{ font-size:11px; letter-spacing:1.7px; }
.hero-subtitle::before{ width:28px; }
}
/*========================================================== FONT CLEAN FIX Paste at the very end of assets/css/style.css ==========================================================*/ :root{ --heading-font:Inter, sans-serif; --body-font:'KMR Waldenburg Buch', Arial, sans-serif; }
html{ font-size:16px; -webkit-text-size-adjust:100%; }
body{ font-family:var(--body-font); font-size:17px; font-weight:400; line-height:1.7; letter-spacing:0; color:#2b2b2b; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1, h2, h3, h4, h5, h6, .section-title, .hero-content h1, .brand-content h2, .newsletter-content h2{ font-weight:700; letter-spacing:0; color:#111; }
.hero-content h1{ font-size:clamp(38px,5vw,68px); line-height:1.05; }
.section-title{ font-size:clamp(30px,3.4vw,48px); line-height:1.15; }
p, li, a, span, input, textarea, select, button{ font-family:var(--body-font); letter-spacing:0; }
p, .section-description, .hero-content p, .brand-content p, .testimonial-text, .newsletter-content p, .footer-about p{ font-size:17px; line-height:1.85; font-weight:400; color:#666; }
.nav-menu > li > a, .topbar, .btn, .product-brand, .section-subtitle, .category-content span{ font-family:var(--body-font); letter-spacing:.4px; }
.section-subtitle, .product-brand{ font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.btn{ font-size:16px; font-weight:600; }
.product-title, .feature-card h3, .highlight-item h4, .testimonial-user h4, .footer-widget-title{ font-weight:600; letter-spacing:0; }
.product-title{ font-size:17px; line-height:1.45; }
.current-price, .new-price, .counter h3, .counter-box h3, .hero-stats .stat h3{ font-family:var(--body-font); font-weight:800; letter-spacing:-.2px; }
@media(max-width:768px){
body{ font-size:16px; }
p, .section-description, .hero-content p, .brand-content p, .testimonial-text, .newsletter-content p, .footer-about p{ font-size:16px; line-height:1.75; }
}
/*========================================================== CLEAN HEADING FIX ==========================================================*/ h1, h2, h3, h4, h5, h6, .section-title, .hero-content h1, .brand-content h2, .newsletter-content h2, .footer-widget-title{ font-family:'KMR Waldenburg Buch', Arial, Helvetica, sans-serif; font-weight:600; letter-spacing:0; color:#111; text-transform:none; }
.hero-content h1{ font-size:clamp(36px,4.8vw,64px); line-height:1.08; max-width:720px; }
.section-title{ font-size:clamp(28px,3.1vw,44px); line-height:1.16; max-width:760px; margin-left:auto; margin-right:auto; }
.feature-card h3, .product-title, .highlight-item h4, .testimonial-user h4, .footer-widget-title{ font-family:'KMR Waldenburg Buch', Arial, sans-serif; font-weight:600; line-height:1.35; }
.product-title{ font-size:17px; }
.footer-widget-title{ font-size:16px; }
@media(max-width:768px){
.hero-content h1{ font-size:34px; }
.section-title{ font-size:30px; }
}
@media(max-width:480px){
.hero-content h1{ font-size:30px; }
.section-title{ font-size:26px; }
}
/*========================================================== CART PAGE ==========================================================*/ .cart-section{ background:#fffdfb; }
.cart-layout{ display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:36px; align-items:start; }
.cart-items, .summary-card, .summary-help{ background:#fff; border:1px solid #ececec; border-radius:0; box-shadow:0 10px 30px rgba(0,0,0,.05); }
.cart-items{ padding:30px; }
.cart-header{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:22px; margin-bottom:8px; border-bottom:1px solid #ececec; }
.cart-header h2{ font-family:'KMR Waldenburg Buch', Arial, Helvetica, sans-serif; font-size:32px; line-height:1.15; }
.cart-header span{ color:#d83a73; font-weight:600; }
.cart-item{ display:grid; grid-template-columns:minmax(0,1fr) 90px 130px 90px; gap:22px; align-items:center; padding:24px 0; border-bottom:1px solid #ececec; }
.cart-item:last-of-type{ border-bottom:none; }
.cart-product{ display:flex; align-items:center; gap:18px; min-width:0; }
.cart-product-image{ width:104px; height:116px; flex:0 0 104px; border-radius:0; background:#fff; border:1px solid #f0e6ea; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cart-product-image img{ width:100%; height:100%; object-fit:contain; padding:0px; }
.cart-product-info{ min-width:0; }
.cart-product-info h3{ font-family:'KMR Waldenburg Buch', Arial, sans-serif; font-size:17px; font-weight:600; line-height:1.35; margin:8px 0 6px; }
.cart-product-info h3 a:hover{ color:#d83a73; }
.cart-product-info p{ color:#777; font-size:16px; line-height:1.5; }
.remove-btn{ margin-top:12px; display:inline-flex; align-items:center; gap:7px; color:#d83a73; font-size:13px; font-weight:600; }
.remove-btn:hover{ color:#111; }
.cart-price, .cart-total{ font-size:16px; font-weight:700; color:#111; }
.cart-quantity{ width:124px; height:46px; border:1px solid #ececec; border-radius:0; display:flex; align-items:center; justify-content:space-between; background:#fff; overflow:hidden; }
.cart-quantity button{ width:40px; height:46px; display:flex; align-items:center; justify-content:center; color:#111; font-size:16px; transition:.25s ease; }
.cart-quantity button:hover{ background:#fff7fa; color:#d83a73; }
.cart-quantity span{ font-weight:700; }
.cart-actions{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:28px; padding-top:26px; border-top:1px solid #ececec; }
.cart-summary{ position:sticky; top:110px; }
.summary-card{ padding:30px; }
.summary-card h3{ font-family:'KMR Waldenburg Buch', Arial, Helvetica, sans-serif; font-size:30px; margin-bottom:24px; }
.coupon-box{ padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid #ececec; }
.coupon-box label{ display:block; margin-bottom:10px; color:#111; font-size:16px; font-weight:600; }
.coupon-form{ display:flex; gap:10px; }
.coupon-form input{ width:100%; height:48px; padding:0 16px; border:1px solid #ececec; border-radius:0; background:#fff; }
.coupon-form input:focus{ border-color:#d83a73; box-shadow:0 0 0 3px rgba(216,58,115,.12); }
.coupon-form button{ height:48px; padding:0 18px; border-radius:0; background:#111; color:#fff; font-weight:600; }
.coupon-form button:hover{ background:#d83a73; }
.summary-list{ display:flex; flex-direction:column; gap:16px; }
.summary-row, .summary-total{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.summary-row span{ color:#666; }
.summary-row strong{ color:#111; }
.summary-total{ margin:24px 0; padding-top:22px; border-top:1px solid #ececec; }
.summary-total span{ font-size:16px; font-weight:700; color:#111; }
.summary-total strong{ font-size:30px; color:#d83a73; }
.summary-card .btn-block{ width:100%; }
.secure-checkout{ margin-top:18px; display:flex; align-items:center; justify-content:center; gap:8px; color:#28a745; font-size:16px; font-weight:600; }
.summary-help{ margin-top:22px; padding:24px; display:flex; gap:16px; align-items:flex-start; }
.summary-help > i{ width:48px; height:48px; flex:0 0 48px; border-radius:50%; background:#fff7fa; color:#d83a73; display:flex; align-items:center; justify-content:center; font-size:22px; }
.summary-help h4{ font-family:'KMR Waldenburg Buch', Arial, sans-serif; font-size:17px; margin-bottom:6px; }
.summary-help p{ color:#666; font-size:16px; line-height:1.6; margin-bottom:8px; }
.summary-help a{ color:#d83a73; font-weight:600; font-size:16px; }
.text-secondary{ color:#d83a73 !important; }
/* Empty cart state, future use */ .empty-cart{ padding:80px 30px; text-align:center; background:#fff; border:1px dashed #e6d5dc; border-radius:0; }
.empty-cart i{ font-size:54px; color:#d83a73; margin-bottom:18px; }
.empty-cart h2{ font-size:34px; margin-bottom:10px; }
.empty-cart p{ max-width:520px; margin:0 auto 28px; color:#666; }
/* Cart responsive */ @media(max-width:1200px){
.cart-layout{ grid-template-columns:minmax(0,1fr) 350px; gap:28px; }
.cart-item{ grid-template-columns:minmax(0,1fr) 80px 120px 80px; gap:16px; }
}
@media(max-width:992px){
.cart-layout{ grid-template-columns:1fr; }
.cart-summary{ position:relative; top:auto; }
}
@media(max-width:768px){
.cart-items, .summary-card{ padding:22px; border-radius:0; }
.cart-header{ align-items:flex-start; flex-direction:column; gap:6px; }
.cart-header h2{ font-size:28px; }
.cart-item{ grid-template-columns:1fr; gap:14px; padding:24px 0; }
.cart-product{ align-items:flex-start; }
.cart-price, .cart-total{ display:flex; justify-content:space-between;}
/*========================================================== INSTA COLORS - MASTER STYLE.CSS Combined from existing project CSS files. HTML/PHP structure unchanged. ==========================================================*/ /*========================================================== 01 VARIABLES ==========================================================*/ :root{ --primary:#111111; --primary-light:#2B2B2B; --secondary:#D83A73; --secondary-hover:#C62863; --accent:#F5D7E3; --white:#FFFFFF; --black:#000000; --body-bg:#FFFDFB; --card-bg:#FFFFFF; --text:#2B2B2B; --text-light:#666666; --text-muted:#999999; --border:#ECECEC; --success:#28A745; --warning:#FFC107; --danger:#DC3545; --info:#0DCAF0; --heading-font:Inter, sans-serif; --body-font:"KMR Waldenburg Buch", sans-serif; --font-size-xs:12px; --font-size-sm:16px; --font-size-md:18px; --font-size-lg:20px; --font-size-xl:24px; --font-size-2xl:35px; --font-size-3xl:46px; --font-size-4xl:60px; --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --container-width:1400px; --container-padding:20px; --space-5:5px; --space-10:10px; --space-15:15px; --space-20:20px; --space-25:25px; --space-30:30px; --space-40:40px; --space-50:50px; --space-60:60px; --space-80:80px; --space-100:100px; --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:30px; --radius-round:999px; --shadow-sm:0 3px 10px rgba(0,0,0,.05); --shadow-md:0 10px 30px rgba(0,0,0,.08); --shadow-lg:0 20px 60px rgba(0,0,0,.12); --transition:.35s ease; --header-height:85px; --topbar-height:42px; --z-dropdown:100; --z-header:999; --z-overlay:1000; --z-modal:1100; --z-loader:9999; --btn-height:52px; --btn-radius:50px; --input-height:52px; --input-radius:12px; --product-image-height:420px; --product-radius:18px; --section-padding:90px; }
/*========================================================== 02 RESET ==========================================================*/ *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; }
html{ font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:var(--body-font); font-size:var(--font-size-md); color:var(--text); background:var(--body-bg); line-height:1.6; overflow-x:hidden; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1, h2, h3, h4, h5, h6{ font-weight:600; color:var(--primary); line-height:1.2; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; transition:var(--transition); }
ul, ol{ list-style:none; }
img{ display:block; max-width:100%; height:auto; }
button{ border:none; background:none; outline:none; cursor:pointer; font:inherit; }
input, textarea, select{ font:inherit; color:inherit; border:none; outline:none; background:none; }
textarea{ resize:vertical; }
table{ width:100%; border-collapse:collapse; }
iframe{ border:0; width:100%; }
svg{ display:block; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ appearance:textfield; -moz-appearance:textfield; }
::placeholder{ color:var(--text-muted); opacity:1; }
::selection{ background:var(--secondary); color:var(--white); }
:focus-visible{ outline:2px solid var(--secondary); outline-offset:3px; }
hr{ border:none; border-top:1px solid var(--border); }
summary{ cursor:pointer; }
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:#f3f3f3; }
::-webkit-scrollbar-thumb{ background:var(--secondary); border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:var(--secondary-hover); }
.hidden{ display:none !important; }
.text-center{ text-align:center; }
.text-left{ text-align:left; }
.text-right{ text-align:right; }
.w-100{ width:100%; }
.h-100{ height:100%; }
.overflow-hidden{ overflow:hidden; }
video, canvas{ max-width:100%; display:block; }
button:disabled, input:disabled{ cursor:not-allowed; opacity:.6; }
@media (prefers-reduced-motion:reduce){
*{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
/*========================================================== 03 LAYOUT ==========================================================*/ .container{ width:100%; max-width:var(--container-width); margin-inline:auto; padding-inline:var(--container-padding); }
.container-fluid{ width:100%; padding-inline:30px; }
.section{ padding:var(--section-padding) 0; }
.section-sm{ padding:60px 0; }
.section-lg{ padding:120px 0; }
.grid{ display:grid; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:30px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:25px; }
.flex{ display:flex; }
.flex-wrap{ flex-wrap:wrap; }
.items-center{ align-items:center; }
.items-start{ align-items:flex-start; }
.items-end{ align-items:flex-end; }
.justify-between{ justify-content:space-between; }
.justify-center{ justify-content:center; }
.justify-end{ justify-content:flex-end; }
.flex-column{ flex-direction:column; }
.gap-10{ gap:10px; }
.gap-15{ gap:15px; }
.gap-20{ gap:20px; }
.gap-25{ gap:25px; }
.gap-30{ gap:30px; }
.gap-40{ gap:40px; }
.gap-50{ gap:50px; }
.gap-60{ gap:60px; }
.w-25{ width:25%; }
.w-50{ width:50%; }
.w-75{ width:75%; }
.w-100{ width:100%; }
.h-100{ height:100%; }
.mt-10{ margin-top:10px; }
.mt-20{ margin-top:20px; }
.mt-30{ margin-top:30px; }
.mt-40{ margin-top:40px; }
.mt-50{ margin-top:50px; }
.mt-60{ margin-top:60px; }
.mt-80{ margin-top:80px; }
.mb-10{ margin-bottom:10px; }
.mb-20{ margin-bottom:20px; }
.mb-30{ margin-bottom:30px; }
.mb-40{ margin-bottom:40px; }
.mb-50{ margin-bottom:50px; }
.mb-60{ margin-bottom:60px; }
.mb-80{ margin-bottom:80px; }
.p-20{ padding:20px; }
.p-30{ padding:30px; }
.p-40{ padding:40px; }
.p-50{ padding:50px; }
.text-center{ text-align:center; }
.text-left{ text-align:left; }
.text-right{ text-align:right; }
.section-header{ max-width:720px; margin:0 auto 60px; text-align:center; }
.section-subtitle{ font-size:16px; letter-spacing:2px; text-transform:uppercase; color:var(--secondary); font-weight:600; margin-bottom:10px; }
.section-title{ font-size:48px; line-height:1.2; margin-bottom:20px; }
.section-description{ color:var(--text-light); font-size:16px; }
.card{ background:var(--card-bg); border:1px solid var(--border); border-radius:0; box-shadow:var(--shadow-sm); transition:var(--transition); }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.image-cover{ width:100%; height:100%; object-fit:cover; }
.image-contain{ width:100%; height:100%; object-fit:contain; }
.badge{ display:inline-flex; align-items:center; justify-content:center; padding:6px 16px; border-radius:0; background:var(--secondary); color:#fff; font-size:13px; font-weight:500; }
.divider{ width:100%; height:1px; background:var(--border); }
.radius-sm{ border-radius:0; }
.radius-md{ border-radius:0; }
.radius-lg{ border-radius:0; }
.radius-xl{ border-radius:0; }
.shadow-sm{ box-shadow:var(--shadow-sm); }
.shadow-md{ box-shadow:var(--shadow-md); }
.shadow-lg{ box-shadow:var(--shadow-lg); }
.relative{ position:relative; }
.absolute{ position:absolute; }
.overflow-hidden{ overflow:hidden; }
@media(max-width:1200px){
.grid-4{ grid-template-columns:repeat(3,1fr); }
.grid-5{ grid-template-columns:repeat(4,1fr); }
}
@media(max-width:992px){
.grid-2, .grid-3, .grid-4, .grid-5{ grid-template-columns:repeat(2,1fr); }
.section{ padding:70px 0; }
.section-title{ font-size:38px; }
}
@media(max-width:768px){
.grid-2, .grid-3, .grid-4, .grid-5{ grid-template-columns:1fr; }
.container{ padding-inline:16px; }
.container-fluid{ padding-inline:16px; }
.section{ padding:60px 0; }
.section-title{ font-size:30px; }
.section-header{ margin-bottom:40px; }
}
/*========================================================== 04 UTILITIES ==========================================================*/ .d-none{ display:none!important; }
.d-block{ display:block!important; }
.d-inline{ display:inline!important; }
.d-inline-block{ display:inline-block!important; }
.d-flex{ display:flex!important; }
.d-grid{ display:grid!important; }
.flex-row{ flex-direction:row; }
.flex-column{ flex-direction:column; }
.flex-wrap{ flex-wrap:wrap; }
.flex-nowrap{ flex-wrap:nowrap; }
.align-start{ align-items:flex-start; }
.align-center{ align-items:center; }
.align-end{ align-items:flex-end; }
.justify-start{ justify-content:flex-start; }
.justify-center{ justify-content:center; }
.justify-end{ justify-content:flex-end; }
.justify-between{ justify-content:space-between; }
.justify-around{ justify-content:space-around; }
.justify-evenly{ justify-content:space-evenly; }
.relative{ position:relative; }
.absolute{ position:absolute; }
.fixed{ position:fixed; }
.sticky{ position:sticky; }
.top-0{ top:0; }
.left-0{ left:0; }
.right-0{ right:0; }
.bottom-0{ bottom:0; }
.w-auto{ width:auto; }
.w-100{ width:100%; }
.w-75{ width:75%; }
.w-50{ width:50%; }
.w-25{ width:25%; }
.h-auto{ height:auto; }
.h-100{ height:100%; }
.text-left{ text-align:left; }
.text-center{ text-align:center; }
.text-right{ text-align:right; }
.fw-300{ font-weight:300; }
.fw-400{ font-weight:400; }
.fw-500{ font-weight:500; }
.fw-600{ font-weight:600; }
.fw-700{ font-weight:700; }
.text-primary{ color:var(--primary); }
.text-secondary{ color:var(--secondary); }
.text-light{ color:var(--text-light); }
.text-muted{ color:var(--text-muted); }
.text-white{ color:var(--white); }
.text-black{ color:var(--black); }
.bg-primary{ background:var(--primary); }
.bg-secondary{ background:var(--secondary); }
.bg-white{ background:var(--white); }
.bg-light{ background:#fafafa; }
.bg-transparent{ background:transparent; }
.border{ border:1px solid var(--border); }
.border-top{ border-top:1px solid var(--border); }
.border-bottom{ border-bottom:1px solid var(--border); }
.border-0{ border:none; }
.rounded-sm{ border-radius:0; }
.rounded{ border-radius:0; }
.rounded-lg{ border-radius:0; }
.rounded-xl{ border-radius:0; }
.rounded-pill{ border-radius:0; }
.rounded-circle{ border-radius:50%; }
.shadow-sm{ box-shadow:var(--shadow-sm); }
.shadow{ box-shadow:var(--shadow-md); }
.shadow-lg{ box-shadow:var(--shadow-lg); }
.shadow-none{ box-shadow:none; }
.opacity-0{ opacity:0; }
.opacity-25{ opacity:.25; }
.opacity-50{ opacity:.5; }
.opacity-75{ opacity:.75; }
.opacity-100{ opacity:1; }
.overflow-hidden{ overflow:hidden; }
.overflow-auto{ overflow:auto; }
.overflow-visible{ overflow:visible; }
.cursor-pointer{ cursor:pointer; }
.cursor-default{ cursor:default; }
.object-cover{ object-fit:cover; }
.object-contain{ object-fit:contain; }
.transition{ transition:var(--transition); }
.z-1{ z-index:1; }
.z-10{ z-index:10; }
.z-100{ z-index:100; }
.z-999{ z-index:999; }
.z-modal{ z-index:1100; }
.select-none{ user-select:none; }
.select-all{ user-select:all; }
.pe-none{ pointer-events:none; }
.pe-auto{ pointer-events:auto; }
.visible{ visibility:visible; }
.invisible{ visibility:hidden; }
.nowrap{ white-space:nowrap; }
.break-word{ word-break:break-word; }
.img-fluid{ width:100%; height:auto; display:block; }
.icon{ display:inline-flex; align-items:center; justify-content:center; }
.hover-shadow:hover{ box-shadow:var(--shadow-lg); }
.hover-scale:hover{ transform:scale(1.04); }
.hover-up:hover{ transform:translateY(-6px); }
.fade{ opacity:0; transition:.4s; }
.fade.show{ opacity:1; }
@media(max-width:768px){
.mobile-hide{ display:none!important; }
.mobile-center{ text-align:center; }
}
@media(min-width:769px){
.desktop-hide{ display:none!important; }
}
/*========================================================== 05 BUTTONS ==========================================================*/ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:160px; height:var(--btn-height); padding:0 28px; border:none; border-radius:0; font-family:var(--body-font); font-size:17px; font-weight:600; cursor:pointer; transition:var(--transition); text-decoration:none; white-space:nowrap; }
.btn-primary{ background:var(--primary); color:var(--white); }
.btn-primary:hover{ background:var(--secondary); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-secondary{ background:var(--secondary); color:var(--white); }
.btn-secondary:hover{ background:var(--secondary-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; border:2px solid var(--primary); color:var(--primary); }
.btn-outline:hover{ background:var(--primary); color:var(--white); }
.btn-outline-secondary{ background:transparent; border:2px solid var(--secondary); color:var(--secondary); }
.btn-outline-secondary:hover{ background:var(--secondary); color:var(--white); }
.btn-light{ background:var(--white); color:var(--primary); border:1px solid var(--border); }
.btn-light:hover{ box-shadow:var(--shadow-sm); }
.btn-icon{ width:52px; height:52px; min-width:52px; padding:0; border-radius:50%; }
.btn-icon i{ font-size:16px; }
.btn-sm{ height:42px; min-width:120px; padding:0 20px; font-size:16px; }
.btn-lg{ height:60px; min-width:190px; padding:0 36px; font-size:16px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.6; cursor:not-allowed; pointer-events:none; }
.btn-loading{ pointer-events:none; opacity:.8; }
.btn-loading::after{ content:""; width:18px; height:18px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:btnSpin .8s linear infinite; }
@keyframes btnSpin{
to{ transform:rotate(360deg); }
}
@media(max-width:768px){
.btn{ min-width:140px; height:48px; padding:0 22px; }
}
/*========================================================== 06 FORMS ==========================================================*/ .form-group{ margin-bottom:22px; }
.form-label{ display:block; margin-bottom:8px; font-size:16px; font-weight:600; color:var(--primary); }
.form-control{ width:100%; height:var(--input-height); padding:0 18px; border:1px solid var(--border); border-radius:0; background:var(--white); color:var(--text); transition:var(--transition); }
.form-control:focus{ border-color:var(--secondary); box-shadow:0 0 0 3px rgba(216,58,115,.15); }
textarea.form-control{ height:160px; padding:15px 18px; resize:vertical; }
select.form-control{ cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; background-size:14px; padding-right:45px; }
.form-check{ display:flex; align-items:center; gap:10px; }
.form-check input{ width:18px; height:18px; accent-color:var(--secondary); }
.form-radio{ display:flex; align-items:center; gap:10px; }
.form-radio input{ accent-color:var(--secondary); }
.input-group{ display:flex; align-items:center; border:1px solid var(--border); border-radius:0; overflow:hidden; background:var(--white); }
.input-group .form-control{ border:none; box-shadow:none; }
.input-group-text{ display:flex; align-items:center; justify-content:center; min-width:50px; color:var(--text-light); }
.is-invalid{ border-color:var(--danger)!important; }
.invalid-feedback{ margin-top:6px; font-size:13px; color:var(--danger); }
.is-valid{ border-color:var(--success)!important; }
.valid-feedback{ margin-top:6px; font-size:13px; color:var(--success); }
.search-form{ position:relative; }
.search-form .form-control{ padding-right:55px; }
.search-form button{ position:absolute; right:5px; top:5px; width:42px; height:42px; border-radius:50%; background:var(--secondary); color:var(--white); display:flex; align-items:center; justify-content:center; }
.newsletter-form{ display:flex; gap:15px; }
.newsletter-form .form-control{ flex:1; }
@media(max-width:768px){
.newsletter-form{ flex-direction:column; }
}
/*========================================================== 08 HEADER ==========================================================*/ .topbar{ height:var(--topbar-height); background:var(--primary); color:var(--white); display:flex; align-items:center; font-size:13px; }
.topbar .container{ display:flex; justify-content:space-between; align-items:center; }
.topbar-left, .topbar-right{ display:flex; align-items:center; gap:20px; }
.topbar a{ color:var(--white); opacity:.85; }
.topbar a:hover{ opacity:1; }
.site-header{ width:100%; background:var(--white); position:sticky; top:0; left:0; z-index:var(--z-header); box-shadow:0 1px 8px rgba(0,0,0,.05); transition:var(--transition); }
.site-header.sticky{ box-shadow:var(--shadow-md); }
.navbar{ height:var(--header-height); display:flex; align-items:center; justify-content:space-between; }
.logo{ flex-shrink:0; }
.logo img{ width:180px; height:auto; }
.nav-menu{ display:flex; align-items:center; gap:40px; }
.nav-menu>li{ position:relative; }
.nav-menu>li>a{ display:flex; align-items:center; gap:6px; color:var(--primary); font-size:17px; font-weight:500; padding:30px 0; transition:var(--transition); }
.nav-menu>li>a:hover, .nav-menu>li>a.active{ color:var(--secondary); }
.dropdown{ position:absolute; top:100%; left:0; min-width:230px; background:var(--white); border-radius:0; box-shadow:var(--shadow-lg); padding:15px 0; opacity:0; visibility:hidden; transform:translateY(15px); transition:var(--transition); }
.has-dropdown:hover>.dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown li{ width:100%; }
.dropdown li a{ display:block; padding:12px 25px; color:var(--text); transition:var(--transition); }
.dropdown li a:hover{ background:#fafafa; color:var(--secondary); padding-left:32px; }
.header-icons{ display:flex; align-items:center; gap:15px; }
.icon-btn{ position:relative; width:44px; height:44px; border-radius:50%; display:flex; justify-content:center; align-items:center; color:var(--primary); transition:var(--transition); }
.icon-btn:hover{ background:#f7f7f7; color:var(--secondary); }
.icon-btn i{ font-size:20px; }
.count{ position:absolute; top:-3px; right:-3px; width:18px; height:18px; background:var(--secondary); color:#fff; border-radius:50%; display:flex; justify-content:center; align-items:center; font-size:10px; font-weight:600; }
.mobile-toggle{ display:none; width:46px; height:46px; border-radius:50%; align-items:center; justify-content:center; font-size:26px; color:var(--primary); }
.mobile-toggle:hover{ background:#f5f5f5; }
.search-btn{ cursor:pointer; }
.mega-menu{ position:absolute; left:0; top:100%; width:900px; background:#fff; border-radius:0; padding:40px; box-shadow:var(--shadow-lg); display:none; }
.has-mega:hover .mega-menu{ display:block; }
@media(max-width:1100px){
.nav-menu{ gap:25px; }
.logo img{ width:160px; }
}
@media(max-width:991px){
.topbar{ display:none; }
.nav-menu{ display:none; }
.mobile-toggle{ display:flex; }
.header-icons{ gap:10px; }
.logo img{ width:150px; }
}
@media(max-width:576px){
.site-header{ box-shadow:0 2px 8px rgba(0,0,0,.08); }
.navbar{ height:72px; }
.logo img{ width:135px; }
.icon-btn{ width:40px; height:40px; }
.icon-btn i{ font-size:16px; }
}
/*========================================================== 09 HOME ==========================================================*/ .hero-image{ position:relative; display:flex; justify-content:center; align-items:center; min-height:650px; }
.hero-image::before{ content:""; position:absolute; width:620px; height:620px; border-radius:50%; background:linear-gradient(135deg,#fff8f5,#fde9ef); z-index:1; }
.hero-image::after{ content:""; position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(255,90,140,.08); filter:blur(90px); z-index:0; }
.hero-image img{ position:relative; z-index:5; width:100%; max-width:650px; height:auto; object-fit:contain; animation:heroFloat 6s ease-in-out infinite; filter:drop-shadow(0 35px 60px rgba(0,0,0,.15)); }
.hero-image img:hover{ transform:scale(1.02); transition:.4s; }
.hero-circle{ position:absolute; width:620px; height:620px; border-radius:50%; background:linear-gradient(135deg,#ffeaf3,#ffd6e6); z-index:1; }
.floating-card{ position:absolute; background:#fff; border-radius:0; padding:18px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:15px; z-index:5; }
.floating-card img{ width:65px; }
.floating-card h5{ font-size:17px; margin-bottom:5px; }
.floating-card p{ font-size:13px; color:var(--text-light); }
.card-top{ top:15%; left:-30px; }
.card-bottom{ right:-20px; bottom:12%; }
.hero-badge{ position:absolute; top:80px; right:20px; width:120px; height:120px; border-radius:50%; background:var(--secondary); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; z-index:4; animation:rotateBadge 12s linear infinite; }
.hero-badge strong{ font-size:28px; }
.hero-badge span{ font-size:13px; }
.hero-shape{ position:absolute; border-radius:50%; filter:blur(40px); opacity:.35; }
.shape-1{ width:220px; height:220px; background:#ffd7ea; top:-60px; left:-80px; }
.shape-2{ width:300px; height:300px; background:#ffe9c9; right:-80px; bottom:-100px; }
.hero-navigation{ position:absolute; bottom:50px; left:50%; transform:translateX(-50%); display:flex; gap:12px; z-index:20; }
.hero-navigation span{ width:14px; height:14px; border-radius:50%; background:#d8d8d8; cursor:pointer; transition:.3s; }
.hero-navigation .active{ width:40px; border-radius:0; background:var(--secondary); }
.features{ position:relative; margin-top:-70px; z-index:20; }
.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.feature-card{ background:#fff; border-radius:0; padding:40px 30px; text-align:center; box-shadow:var(--shadow-md); transition:var(--transition); border:1px solid transparent; }
.feature-card:hover{ transform:translateY(-10px); border-color:var(--secondary); box-shadow:var(--shadow-lg); }
.feature-icon{ width:80px; height:80px; margin:0 auto 25px; border-radius:50%; background:linear-gradient(135deg,#ffe6ef,#fff4f8); display:flex; justify-content:center; align-items:center; }
.feature-icon img{ width:42px; }
.feature-icon i{ font-size:36px; color:var(--secondary); }
.feature-title{ font-size:22px; margin-bottom:12px; color:var(--primary); }
.feature-description{ font-size:17px; color:var(--text-light); line-height:1.8; }
.categories{ position:relative; padding-top:120px; }
.categories-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:35px; }
.category-card{ position:relative; overflow:hidden; border-radius:0; background:#fff; transition:var(--transition); box-shadow:var(--shadow-sm); }
.category-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lg); }
.category-image{ position:relative; overflow:hidden; }
.category-image img{ width:100%; height:380px; object-fit:cover; transition:.6s; }
.category-card:hover .category-image img{ transform:scale(1.08); }
.category-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.08)); }
.category-content{ position:absolute; left:35px; bottom:35px; color:#fff; z-index:2; }
.category-content span{ display:inline-block; margin-bottom:10px; font-size:13px; letter-spacing:2px; text-transform:uppercase; opacity:.85; }
.category-content h3{ font-size:34px; margin-bottom:18px; color:#fff; }
.category-btn{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:16px; font-weight:600; }
.category-btn i{ transition:.3s; }
.category-card:hover .category-btn i{ transform:translateX(6px); }
.category-badge{ position:absolute; top:20px; left:20px; background:#fff; color:var(--secondary); font-size:12px; font-weight:600; padding:8px 16px; border-radius:0; z-index:5; }
.categories::before{ content:""; position:absolute; width:420px; height:420px; background:#fff3f8; border-radius:50%; left:-200px; top:100px; filter:blur(90px); }
.categories::after{ content:""; position:absolute; width:380px; height:380px; background:#fff7df; border-radius:50%; right:-180px; bottom:-120px; filter:blur(100px); }
.category-card::after{ content:""; position:absolute; inset:0; border:2px solid transparent; border-radius:0; transition:.35s; }
.category-card:hover::after{ border-color:rgba(255,255,255,.4); }
.best-sellers{ position:relative; padding:120px 0; background:#fff; }
.best-sellers::before{ content:""; position:absolute; width:380px; height:380px; border-radius:50%; background:#fff5f8; filter:blur(100px); top:0; right:-120px; }
.products-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:35px; }
.product-card{ position:relative; overflow:hidden; border-radius:0; background:#fff; border:1px solid var(--border); transition:.35s; }
.product-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lg); }
.product-image{ position:relative; overflow:hidden; background:#fafafa; height:420px; }
.product-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:30px; transition:.55s ease; }
.primary-image{ opacity:1; visibility:visible; }
.hover-image{ opacity:0; visibility:hidden; transform:scale(1.08); }
.product-card:hover .primary-image{ opacity:0; visibility:hidden; transform:scale(.94); }
.product-card:hover .hover-image{ opacity:1; visibility:visible; transform:scale(1); }
.product-card:hover .product-image img{ transform-origin:center; }
.product-badge{ position:absolute; top:18px; left:18px; display:flex; flex-direction:column; gap:10px; z-index:5; }
.badge-sale{ background:var(--secondary); color:#fff; }
.badge-new{ background:#111; color:#fff; }
.badge-hot{ background:#ff8a00; color:#fff; }
.product-badge span{ display:inline-flex; align-items:center; justify-content:center; min-width:72px; height:32px; padding:0 15px; border-radius:0; font-size:12px; font-weight:600; }
.product-actions{ position:absolute; top:20px; right:-70px; display:flex; flex-direction:column; gap:12px; transition:.35s; z-index:6; }
.product-card:hover .product-actions{ right:20px; }
.action-btn{ width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--primary); box-shadow:0 10px 25px rgba(0,0,0,.12); transition:.3s; }
.action-btn i{ font-size:16px; }
.action-btn:hover{ background:var(--secondary); color:#fff; }
.quick-view{ position:absolute; left:50%; bottom:22px; transform:translate(-50%,20px); width:calc(100% - 40px); height:50px; border-radius:0; background:#111; color:#fff; display:flex; justify-content:center; align-items:center; font-size:16px; font-weight:600; opacity:0; visibility:hidden; transition:.35s; z-index:5; }
.product-card:hover .quick-view{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.quick-view:hover{ background:var(--secondary); }
.product-image::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(255,255,255,.15), rgba(255,255,255,0)); opacity:0; transition:.3s; }
.product-card:hover .product-image::after{ opacity:1; }
.product-content{ padding:26px; }
.product-meta{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:15px; }
.product-brand{ font-size:12px; font-weight:600; color:var(--secondary); text-transform:uppercase; letter-spacing:1px; }
.product-category{ font-size:12px; color:var(--text-muted); }
.product-title{ font-size:19px; font-weight:600; line-height:1.45; color:var(--primary); margin-bottom:14px; transition:var(--transition); }
.product-title a{ color:inherit; }
.product-title:hover{ color:var(--secondary); }
.product-short{ font-size:16px; color:var(--text-light); line-height:1.8; margin-bottom:18px; }
.product-rating{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.rating-stars{ display:flex; align-items:center; gap:3px; }
.rating-stars i{ color:#FDBA12; font-size:16px; }
.rating-value{ font-size:13px; font-weight:600; color:var(--primary); }
.rating-count{ font-size:13px; color:var(--text-muted); }
.product-price{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.current-price{ font-size:26px; font-weight:700; color:var(--primary); }
.old-price{ font-size:17px; color:var(--text-muted); text-decoration:line-through; }
.discount{ display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 12px; border-radius:0; background:#EAF8EF; color:var(--success); font-size:12px; font-weight:600; }
.stock{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:500; }
.stock::before{ content:""; width:8px; height:8px; border-radius:50%; }
.stock.in-stock{ color:var(--success); }
.stock.in-stock::before{ background:var(--success); }
.stock.low-stock{ color:var(--warning); }
.stock.low-stock::before{ background:var(--warning); }
.stock.out-stock{ color:var(--danger); }
.stock.out-stock::before{ background:var(--danger); }
.product-divider{ width:100%; height:1px; background:var(--border); margin:20px 0; }
.product-info{ display:flex; flex-direction:column; gap:10px; }
.product-info li{ display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.product-info span:first-child{ color:var(--text-light); }
.product-info span:last-child{ color:var(--primary); font-weight:500; }
.product-card:hover .current-price{ color:var(--secondary); }
.product-card:hover .product-title{ color:var(--secondary); }
.product-swatches{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.swatch{ width:26px; height:26px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--border); cursor:pointer; transition:var(--transition); }
.swatch:hover{ transform:scale(1.18); }
.swatch.active{ transform:scale(1.18); box-shadow:0 0 0 2px var(--secondary); }
.product-quantity{ display:flex; align-items:center; justify-content:space-between; width:125px; height:46px; border:1px solid var(--border); border-radius:0; overflow:hidden; background:#fff; }
.qty-btn{ width:42px; height:46px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.3s; font-size:16px; color:var(--primary); }
.qty-btn:hover{ background:#f7f7f7; color:var(--secondary); }
.qty-value{ font-size:17px; font-weight:600; }
.product-footer{ display:flex; align-items:center; gap:15px; margin-top:22px; }
.product-footer .btn{ flex:1; }
.btn-cart{ background:var(--primary); color:#fff; }
.btn-cart:hover{ background:var(--secondary); }
.btn-buy{ background:var(--secondary); color:#fff; }
.btn-buy:hover{ background:var(--secondary-hover); }
.product-icon{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--border); background:#fff; cursor:pointer; transition:.3s; }
.product-icon i{ font-size:16px; }
.product-icon:hover{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.product-extra{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.product-extra a{ font-size:13px; color:var(--text-light); transition:.3s; }
.product-extra a:hover{ color:var(--secondary); }
.product-card:hover .product-footer .btn{ box-shadow:var(--shadow-md); }
.product-card:hover .product-icon{ transform:translateY(-3px); }
.btn-cart i, .btn-buy i{ margin-right:8px; transition:.3s; }
.btn-cart:hover i, .btn-buy:hover i{ transform:translateX(3px); }
.product-card:hover .product-image{ background:linear-gradient( 180deg, #ffffff, #fff6fa ); }
@keyframes heroFloat{
0%{ transform:translateY(0); }
50%{ transform:translateY(-15px); }
100%{ transform:translateY(0); }
}
@keyframes float{
0%{ transform:translateY(0); }
50%{ transform:translateY(-18px); }
100%{ transform:translateY(0); }
}
@keyframes rotateBadge{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}
@media(max-width:1200px){
.hero-image{ min-height:560px; }
.hero-image::before{ width:520px; height:520px; }
.hero-image img{ max-width:520px; }
.hero-title{ font-size:56px; }
.hero-slide{ min-height:760px; }
.hero-circle{ width:520px; height:520px; }
.features-grid{ grid-template-columns:repeat(2,1fr); }
.categories-grid{ grid-template-columns:repeat(2,1fr); }
.products-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:992px){
.hero-image{ margin-top:60px; min-height:450px; }
.hero-image::before{ width:430px; height:430px; }
.hero-image img{ max-width:430px; }
.hero .container{ grid-template-columns:1fr; text-align:center; }
.hero-content{ max-width:100%; }
.hero-buttons{ justify-content:center; }
.hero-stats{ justify-content:center; }
.card-top, .card-bottom{ display:none; }
.hero-circle{ width:450px; height:450px; }
.hero-title{ font-size:48px; }
.products-grid{ grid-template-columns:repeat(2,1fr); }
.product-image{ height:360px; }
.product-content{ padding:22px; }
.current-price{ font-size:23px; }
.product-footer{ flex-wrap:wrap; }
.product-footer .btn{ width:100%; }
.product-quantity{ width:100%; }
}
@media(max-width:768px){
.hero-image{ min-height:340px; }
.hero-image::before{ width:300px; height:300px; }
.hero-image img{ max-width:320px; }
.hero-slide{ min-height:auto; padding:90px 0; }
.hero-title{ font-size:38px; }
.hero-description{ font-size:17px; }
.hero-circle{ width:330px; height:330px; }
.hero-stats{ flex-wrap:wrap; gap:25px; }
.hero-badge{ display:none; }
.features{ margin-top:40px; }
.features-grid{ grid-template-columns:1fr; }
.categories{ padding-top:70px; }
.categories-grid{ grid-template-columns:1fr; }
.feature-card{ padding:35px 25px; }
.category-image img{ height:340px; }
.category-content h3{ font-size:28px; }
.best-sellers{ padding:80px 0; }
.products-grid{ grid-template-columns:1fr; }
.product-image{ height:340px; }
.product-actions{ right:20px; }
.quick-view{ opacity:1; visibility:visible; transform:translate(-50%,0); }
}
@media(max-width:480px){
.hero-title{ font-size:30px; }
.hero-buttons{ flex-direction:column; }
.hero-buttons .btn{ width:100%; }
.feature-title{ font-size:20px; }
.category-content{ left:25px; bottom:25px; }
.category-content h3{ font-size:24px; }
.product-image{ height:300px; }
.product-image img{ padding:22px; }
.action-btn{ width:42px; height:42px; }
}
@media(max-width:576px){
.product-title{ font-size:17px; }
.current-price{ font-size:22px; }
.old-price{ font-size:17px; }
.product-rating{ flex-wrap:wrap; gap:6px; }
.product-footer{ flex-direction:column; align-items:stretch; }
.product-icon{ width:100%; border-radius:0; }
.product-swatches{ flex-wrap:wrap; }
.product-extra{ flex-direction:column; gap:10px; }
}
/*========================================================== 11 PRODUCT ==========================================================*/ .shop-banner{ position:relative; padding:90px 0; background:linear-gradient(180deg,#fff,#fff7fa); overflow:hidden; }
.shop-banner::before{ content:""; position:absolute; width:380px; height:380px; border-radius:50%; background:#ffe8f1; filter:blur(90px); left:-120px; top:-80px; }
.shop-banner::after{ content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:#fff5dc; filter:blur(90px); right:-100px; bottom:-100px; }
.shop-banner-content{ position:relative; z-index:2; text-align:center; }
.shop-banner h1{ font-size:58px; margin-bottom:18px; }
.shop-banner p{ max-width:650px; margin:auto; color:var(--text-light); font-size:17px; }
.breadcrumb{ margin-top:18px; display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--text-light); transition:.3s; }
.breadcrumb a:hover{ color:var(--secondary); }
.breadcrumb span{ color:var(--secondary); font-weight:600; }
.shop-layout{ display:grid; grid-template-columns:300px 1fr; gap:40px; padding:80px 0; }
.shop-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:35px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.products-found{ font-size:17px; color:var(--text-light); }
.products-found strong{ color:var(--primary); }
.toolbar-right{ display:flex; align-items:center; gap:18px; }
.view-switch{ display:flex; gap:10px; }
.view-btn{ width:46px; height:46px; border-radius:0; border:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.3s; }
.view-btn i{ font-size:16px; }
.view-btn:hover, .view-btn.active{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.sort-select{ min-width:220px; }
.sort-select select{ width:100%; height:48px; padding:0 18px; border:1px solid var(--border); border-radius:0; background:#fff; cursor:pointer; }
.shop-sidebar{ display:flex; flex-direction:column; gap:30px; }
.filter-widget{ background:#fff; border:1px solid var(--border); border-radius:0; padding:28px; }
.filter-widget h4{ font-size:20px; margin-bottom:20px; }
.category-filter{ display:flex; flex-direction:column; gap:14px; }
.category-filter li{ display:flex; justify-content:space-between; align-items:center; }
.category-filter a{ color:var(--text); transition:.3s; }
.category-filter a:hover{ color:var(--secondary); }
.category-filter span{ color:var(--text-muted); font-size:13px; }
.brand-filter{ display:flex; flex-direction:column; gap:14px; }
.brand-filter label{ display:flex; justify-content:space-between; cursor:pointer; font-size:17px; }
.brand-filter input{ accent-color:var(--secondary); }
.price-range{ margin-top:10px; }
.price-slider{ width:100%; accent-color:var(--secondary); }
.price-values{ margin-top:15px; display:flex; justify-content:space-between; font-size:16px; color:var(--text-light); }
.rating-filter{ display:flex; flex-direction:column; gap:12px; }
.rating-item{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
.rating-stars{ display:flex; gap:2px; }
.rating-stars i{ color:#FDBA12; font-size:16px; }
.rating-count{ font-size:13px; color:var(--text-muted); }
.filter-btn{ width:100%; margin-top:20px; }
.shop-content{ width:100%; }
.products-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.products-grid.list-view{ display:flex; flex-direction:column; gap:25px; }
.products-grid.list-view .product-card{ display:grid; grid-template-columns:320px 1fr; align-items:center; overflow:hidden; }
.products-grid.list-view .product-image{ height:340px; }
.products-grid.list-view .product-content{ padding:35px; }
.products-grid.list-view .product-short{ display:block; }
.products-grid.list-view .product-footer{ margin-top:25px; }
.products-grid .product-card{ transition:.35s ease; }
.products-grid .product-card:hover{ transform:translateY(-8px); }
.no-products{ text-align:center; padding:100px 30px; border:2px dashed var(--border); border-radius:0; }
.no-products img{ width:180px; margin:auto auto 25px; }
.no-products h3{ font-size:30px; margin-bottom:15px; }
.no-products p{ color:var(--text-light); margin-bottom:25px; }
.product-skeleton{ border-radius:0; overflow:hidden; background:#fff; border:1px solid var(--border); }
.skeleton-image{ height:360px; background:#efefef; animation:pulse 1.5s infinite; }
.skeleton-content{ padding:25px; }
.skeleton-line{ height:14px; margin-bottom:14px; border-radius:0; background:#efefef; animation:pulse 1.5s infinite; }
.skeleton-line.short{ width:60%; }
.skeleton-line.medium{ width:80%; }
.skeleton-line.full{ width:100%; }
.pagination{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:70px; }
.page-item{ list-style:none; }
.page-link{ width:50px; height:50px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#fff; border:1px solid var(--border); color:var(--primary); font-weight:600; transition:.3s; }
.page-link:hover{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.page-item.active .page-link{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.load-more{ text-align:center; margin-top:60px; }
.result-info{ margin-bottom:25px; color:var(--text-light); font-size:17px; }
.result-info strong{ color:var(--primary); }
.product-count{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; border-radius:50%; background:var(--secondary); color:#fff; font-size:16px; font-weight:600; }
.product-details{ padding:100px 0; background:var(--white); }
.product-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:flex-start; }
.product-gallery{ position:sticky; top:120px; }
.gallery-main{ position:relative; background:#fafafa; border:1px solid var(--border); border-radius:0; overflow:hidden; height:650px; display:flex; justify-content:center; align-items:center; transition:.4s; }
.gallery-main img{ width:100%; max-width:520px; height:auto; object-fit:contain; transition:.45s; }
.gallery-main:hover img{ transform:scale(1.08); }
.gallery-badge{ position:absolute; top:25px; left:25px; background:var(--secondary); color:#fff; padding:10px 18px; border-radius:0; font-size:13px; font-weight:600; z-index:10; }
.zoom-btn{ position:absolute; right:25px; top:25px; width:50px; height:50px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); cursor:pointer; transition:.3s; z-index:10; }
.zoom-btn:hover{ background:var(--secondary); color:#fff; }
.gallery-nav{ position:absolute; top:50%; left:0; width:100%; display:flex; justify-content:space-between; transform:translateY(-50%); padding:0 20px; pointer-events:none; }
.gallery-arrow{ width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); cursor:pointer; transition:.3s; pointer-events:auto; }
.gallery-arrow:hover{ background:var(--secondary); color:#fff; }
.gallery-thumbs{ display:flex; gap:18px; margin-top:25px; }
.thumb{ width:95px; height:95px; border:2px solid transparent; border-radius:0; overflow:hidden; cursor:pointer; transition:.3s; background:#fafafa; }
.thumb img{ width:100%; height:100%; object-fit:contain; padding:10px; }
.thumb.active{ border-color:var(--secondary); }
.thumb:hover{ border-color:var(--secondary); }
.zoom-container{ overflow:hidden; cursor:zoom-in; }
.zoom-container img{ transition:.35s ease; }
.zoom-container:hover img{ transform:scale(1.15); }
.gallery-loading{ display:flex; justify-content:center; align-items:center; height:650px; background:#fafafa; }
.gallery-loading::after{ content:""; width:42px; height:42px; border:4px solid #e8e8e8; border-top-color:var(--secondary); border-radius:50%; animation:gallerySpin .8s linear infinite; }
.product-info{ display:flex; flex-direction:column; }
.product-brand{ display:inline-flex; align-items:center; width:max-content; padding:8px 16px; border-radius:0; background:#FFF4F8; color:var(--secondary); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:18px; }
.product-info .product-title{ font-size:46px; font-weight:700; line-height:1.2; color:var(--primary); margin-bottom:20px; transition:var(--transition); }
.product-sku{ display:flex; align-items:center; gap:8px; margin-bottom:22px; font-size:16px; }
.product-sku strong{ color:var(--primary); }
.product-sku span{ color:var(--text-light); }
.product-rating{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:25px; }
.product-rating .stars{ display:flex; gap:4px; }
.product-rating .stars i{ color:#FDBA12; font-size:16px; }
.review-count{ color:var(--text-light); font-size:16px; }
.review-count a{ color:var(--secondary); }
.product-price{ display:flex; align-items:center; flex-wrap:wrap; gap:15px; margin-bottom:25px; }
.current-price{ font-size:42px; font-weight:700; color:var(--primary); }
.old-price{ font-size:24px; text-decoration:line-through; color:var(--text-muted); }
.discount-tag{ padding:8px 15px; background:#EAF8EF; color:var(--success); border-radius:0; font-size:13px; font-weight:600; }
.availability{ display:flex; align-items:center; gap:10px; margin-bottom:28px; font-size:17px; font-weight:500; }
.availability.in-stock{ color:var(--success); }
.availability.low-stock{ color:#ff9800; }
.availability.out-stock{ color:var(--danger); }
.availability::before{ content:""; width:10px; height:10px; border-radius:50%; background:currentColor; }
.product-description{ color:var(--text-light); line-height:1.9; font-size:16px; margin-bottom:35px; }
.product-features{ display:flex; flex-direction:column; gap:16px; margin-bottom:35px; }
.product-features li{ display:flex; align-items:flex-start; gap:12px; color:var(--text); line-height:1.7; }
.product-features i{ color:var(--secondary); font-size:16px; margin-top:2px; }
.product-meta{ border-top:1px solid var(--border); padding-top:25px; display:flex; flex-direction:column; gap:15px; }
.product-meta-row{ display:flex; gap:10px; }
.product-meta-row strong{ min-width:110px; color:var(--primary); }
.product-meta-row span{ color:var(--text-light); }
.product-meta-row a{ color:var(--secondary); }
.product-info:hover .product-title{ color:var(--secondary); }
.product-options{ margin-top:35px; }
.option-group{ margin-bottom:30px; }
.option-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; font-size:17px; font-weight:600; color:var(--primary); }
.option-title span{ color:var(--secondary); }
.color-options{ display:flex; flex-wrap:wrap; gap:14px; }
.color-option{ width:42px; height:42px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px var(--border); cursor:pointer; transition:var(--transition); }
.color-option:hover{ transform:scale(1.12); }
.color-option.active{ transform:scale(1.12); box-shadow:0 0 0 2px var(--secondary); }
.size-options{ display:flex; flex-wrap:wrap; gap:12px; }
.size-option{ min-width:70px; height:46px; border:1px solid var(--border); border-radius:0; background:#fff; display:flex; justify-content:center; align-items:center; font-weight:600; cursor:pointer; transition:.3s; }
.size-option:hover{ border-color:var(--secondary); color:var(--secondary); }
.size-option.active{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.purchase-actions{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:35px 0; }
.quantity-box{ display:flex; align-items:center; justify-content:space-between; width:150px; height:56px; border:1px solid var(--border); border-radius:0; overflow:hidden; background:#fff; }
.quantity-btn{ width:48px; height:56px; display:flex; justify-content:center; align-items:center; cursor:pointer; transition:.3s; font-size:20px; }
.quantity-btn:hover{ background:#f7f7f7; color:var(--secondary); }
.quantity-value{ font-size:16px; font-weight:600; }
.btn-cart{ flex:1; min-width:220px; }
.btn-buy{ flex:1; min-width:220px; }
.product-actions{ display:flex; gap:14px; margin-top:10px; }
.action-circle{ width:54px; height:54px; border-radius:50%; border:1px solid var(--border); display:flex; justify-content:center; align-items:center; cursor:pointer; transition:.3s; background:#fff; }
.action-circle i{ font-size:20px; }
.action-circle:hover{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.delivery-info{ margin-top:35px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:25px 0; display:flex; flex-direction:column; gap:20px; }
.delivery-item{ display:flex; align-items:flex-start; gap:16px; }
.delivery-item i{ font-size:24px; color:var(--secondary); }
.delivery-item h5{ margin-bottom:4px; font-size:16px; }
.delivery-item p{ font-size:16px; color:var(--text-light); }
.payment-methods{ margin-top:30px; }
.payment-methods h5{ margin-bottom:15px; font-size:16px; }
.payment-icons{ display:flex; flex-wrap:wrap; gap:12px; }
.payment-icons img{ height:34px; width:auto; border:1px solid var(--border); border-radius:0; padding:6px; background:#fff; }
.share-product{ display:flex; align-items:center; gap:18px; margin-top:30px; }
.share-product span{ font-weight:600; }
.share-icons{ display:flex; gap:10px; }
.share-icons a{ width:42px; height:42px; border-radius:50%; display:flex; justify-content:center; align-items:center; background:#fff; border:1px solid var(--border); transition:.3s; }
.share-icons a:hover{ background:var(--secondary); color:#fff; border-color:var(--secondary); }
.product-summary{ background:#fff; border:1px solid var(--border); border-radius:0; padding:30px; box-shadow:var(--shadow-sm); transition:var(--transition); }
.product-summary:hover{ box-shadow:var(--shadow-lg); }
.sticky-purchase{ position:sticky; top:110px; }
.trust-badges{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:45px; }
.trust-item{ text-align:center; background:#fff; border:1px solid var(--border); border-radius:0; padding:24px 18px; transition:.35s; }
.trust-item:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.trust-item i{ font-size:34px; color:var(--secondary); margin-bottom:15px; }
.trust-item h5{ font-size:17px; margin-bottom:8px; color:var(--primary); }
.trust-item p{ font-size:13px; color:var(--text-light); line-height:1.6; }
.guarantee-strip{ margin-top:40px; padding:18px 25px; border-radius:0; background:#FFF7F9; border:1px solid rgba(255,105,180,.15); display:flex; justify-content:center; align-items:center; gap:15px; font-weight:600; color:var(--secondary); }
.guarantee-strip i{ font-size:22px; }
.product-highlights{ margin-top:40px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.highlight-box{ background:#fafafa; border-radius:0; padding:22px; border:1px solid var(--border); transition:.3s; }
.highlight-box:hover{ border-color:var(--secondary); transform:translateY(-5px); }
.highlight-box h6{ margin-bottom:10px; color:var(--primary); font-size:17px; }
.highlight-box p{ color:var(--text-light); line-height:1.7; font-size:16px; }
.recently-viewed{ margin-top:90px; }
.recently-viewed .section-title{ margin-bottom:35px; }
.product-gallery, .product-info{ animation:fadeUp .7s ease; }
.gallery-main:hover{ box-shadow:0 30px 60px rgba(0,0,0,.08); }
.btn-cart, .btn-buy{ position:relative; overflow:hidden; }
.btn-cart::before, .btn-buy::before{ content:""; position:absolute; top:0; left:-120%; width:100%; height:100%; background:rgba(255,255,255,.25); transform:skewX(-25deg); transition:.65s; }
.btn-cart:hover::before, .btn-buy:hover::before{ left:120%; }
.mobile-cart-bar{ position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--border); padding:12px 18px; display:none; align-items:center; gap:12px; z-index:999; box-shadow:0 -10px 30px rgba(0,0,0,.08); }
.mobile-price{ flex:1; }
.mobile-price strong{ display:block; font-size:22px; color:var(--primary); }
.mobile-price span{ font-size:13px; color:var(--text-light); }
.mobile-cart-bar .btn{ padding:14px 22px; }
.secure-checkout{ margin-top:25px; display:flex; align-items:center; gap:12px; color:var(--success); font-weight:600; }
.secure-checkout i{ font-size:16px; }
.stock-progress{ margin-top:20px; }
.stock-progress .progress{ width:100%; height:8px; background:#eee; border-radius:0; overflow:hidden; }
.stock-progress .progress span{ display:block; height:100%; width:70%; background:linear-gradient(90deg,var(--secondary),#ff95c5); }
@keyframes pulse{
0%{ opacity:.55; }
50%{ opacity:1; }
100%{ opacity:.55; }
}
@keyframes gallerySpin{
to{ transform:rotate(360deg); }
}
@keyframes fadeUp{
from{ opacity:0; transform:translateY(30px); }
to{ opacity:1; transform:translateY(0); }
}
@media(max-width:1100px){
.shop-layout{ grid-template-columns:260px 1fr; }
}
@media(max-width:992px){
.shop-layout{ grid-template-columns:1fr; }
.shop-sidebar{ order:2; }
.shop-content{ order:1; }
.products-grid.list-view .product-card{ grid-template-columns:1fr; }
.products-grid.list-view .product-image{ height:320px; }
.product-wrapper{ grid-template-columns:1fr; }
.product-gallery{ position:relative; top:0; }
.gallery-main{ height:520px; }
.product-info{ margin-top:40px; }
.product-info .product-title{ font-size:36px; }
.current-price{ font-size:32px; }
.old-price{ font-size:20px; }
.purchase-actions{ flex-direction:column; align-items:stretch; }
.quantity-box{ width:100%; }
.btn-cart, .btn-buy{ width:100%; }
.product-highlights{ grid-template-columns:1fr; }
.sticky-purchase{ position:relative; top:0; }
}
@media(max-width:768px){
.shop-banner{ padding:70px 0; }
.shop-banner h1{ font-size:40px; }
.shop-toolbar{ flex-direction:column; align-items:flex-start; gap:20px; }
.toolbar-right{ width:100%; justify-content:space-between; flex-wrap:wrap; }
.sort-select{ width:100%; }
.products-grid{ grid-template-columns:1fr; }
.pagination{ flex-wrap:wrap; gap:10px; }
.page-link{ width:44px; height:44px; }
.product-details{ padding:70px 0; padding-bottom:95px; }
.gallery-main{ height:420px; }
.gallery-main img{ max-width:340px; }
.gallery-thumbs{ justify-content:center; flex-wrap:wrap; }
.thumb{ width:80px; height:80px; }
.product-info .product-title{ font-size:30px; }
.product-description{ font-size:17px; }
.product-meta-row{ flex-direction:column; gap:4px; }
.product-meta-row strong{ min-width:auto; }
.product-actions{ justify-content:center; }
.delivery-item{ align-items:flex-start; }
.share-product{ flex-direction:column; align-items:flex-start; gap:15px; }
.trust-badges{ grid-template-columns:1fr 1fr; gap:15px; }
.guarantee-strip{ flex-direction:column; text-align:center; }
.mobile-cart-bar{ display:flex; }
}
@media(max-width:480px){
.shop-banner h1{ font-size:32px; }
.view-btn{ width:42px; height:42px; }
.filter-widget{ padding:22px; }
.gallery-main{ height:340px; }
.gallery-arrow{ width:40px; height:40px; }
.zoom-btn{ width:44px; height:44px; }
.thumb{ width:70px; height:70px; }
.product-info .product-title{ font-size:26px; }
.current-price{ font-size:28px; }
.old-price{ font-size:16px; }
.discount-tag{ font-size:12px; }
.color-option{ width:36px; height:36px; }
.size-option{ min-width:60px; height:42px; }
.action-circle{ width:48px; height:48px; }
.payment-icons{ justify-content:center; }
.trust-badges{ grid-template-columns:1fr; }
.mobile-cart-bar{ padding:10px; }
.mobile-price strong{ font-size:16px; }
.mobile-cart-bar .btn{ padding:12px 18px; font-size:16px; }
.highlight-box{ padding:18px; }
}
@media(max-width:1200px){
.products-grid{ grid-template-columns:repeat(2,1fr); }
.product-wrapper{ gap:45px; }
.gallery-main{ height:560px; }
.product-info .product-title{ font-size:40px; }
.current-price{ font-size:36px; }
.trust-badges{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:576px){
.products-grid.list-view .product-content{ padding:25px; }
.skeleton-image{ height:300px; }
.no-products{ padding:60px 20px; }
.no-products h3{ font-size:24px; }
}
/*========================================================== 13 FOOTER ==========================================================*/ .newsletter{ position:relative; padding:90px 0; background:linear-gradient(135deg,#111,#222); overflow:hidden; }
.newsletter::before{ content:""; position:absolute; width:380px; height:380px; background:rgba(255,255,255,.05); border-radius:50%; top:-180px; right:-120px; }
.newsletter::after{ content:""; position:absolute; width:260px; height:260px; background:rgba(255,255,255,.04); border-radius:50%; left:-120px; bottom:-120px; }
.newsletter-wrapper{ position:relative; z-index:2; display:grid; grid-template-columns:1fr auto; gap:60px; align-items:center; }
.newsletter-content h6{ color:var(--secondary); text-transform:uppercase; letter-spacing:2px; margin-bottom:15px; font-size:16px; }
.newsletter-content h2{ color:#fff; font-size:44px; line-height:1.2; margin-bottom:20px; }
.newsletter-content p{ color:rgba(255,255,255,.75); max-width:560px; line-height:1.8; }
.newsletter-form{ display:flex; align-items:center; background:#fff; border-radius:0; overflow:hidden; width:560px; max-width:100%; }
.newsletter-form input{ flex:1; border:none; padding:22px 30px; font-size:17px; background:transparent; }
.newsletter-form input:focus{ outline:none; }
.newsletter-form button{ border:none; padding:22px 38px; background:var(--secondary); color:#fff; cursor:pointer; font-weight:600; transition:.35s; }
.newsletter-form button:hover{ background:var(--primary); }
.footer{ background:#111; color:#ddd; padding-top:90px; }
.footer-top{ padding-bottom:70px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:50px; }
.footer-about{ padding-right:40px; }
.footer-logo{ display:inline-flex; align-items:center; margin-bottom:25px; }
.footer-logo img{ max-height:55px; width:auto; }
.footer-about p{ color:rgba(255,255,255,.65); line-height:1.9; margin-bottom:30px; }
.footer-contact{ display:flex; flex-direction:column; gap:18px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:15px; }
.footer-contact i{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); color:var(--secondary); flex-shrink:0; }
.footer-contact span{ color:rgba(255,255,255,.70); line-height:1.7; }
.footer-social{ display:flex; gap:15px; margin-top:30px; }
.footer-social a{ width:46px; height:46px; border-radius:50%; display:flex; justify-content:center; align-items:center; background:rgba(255,255,255,.08); color:#fff; transition:.35s; }
.footer-social a:hover{ background:var(--secondary); transform:translateY(-5px); }
.footer-widget{ position:relative; transition:.3s; }
.footer-widget-title{ font-size:20px; color:#fff; margin-bottom:28px; font-weight:600; position:relative; }
.footer-widget-title::after{ content:""; position:absolute; left:0; bottom:-10px; width:45px; height:3px; border-radius:0; background:var(--secondary); }
.footer-links{ display:flex; flex-direction:column; gap:16px; }
.footer-links li{ list-style:none; }
.footer-links a{ color:rgba(255,255,255,.68); text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition:var(--transition); }
.footer-links a i{ font-size:13px; color:var(--secondary); transition:var(--transition); }
.footer-links a:hover{ color:#fff; transform:translateX(8px); }
.footer-links a:hover i{ transform:translateX(3px); }
.footer-category{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px dashed rgba(255,255,255,.08); }
.footer-category:last-child{ border-bottom:none; }
.footer-category a{ color:rgba(255,255,255,.68); transition:.3s; }
.footer-category a:hover{ color:#fff; }
.footer-category span{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); color:#fff; font-size:12px; }
.business-hours{ display:flex; flex-direction:column; gap:16px; }
.business-hours li{ display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px dashed rgba(255,255,255,.08); }
.business-hours li:last-child{ border-bottom:none; }
.business-hours strong{ color:#fff; font-weight:500; }
.business-hours span{ color:rgba(255,255,255,.65); }
.footer-contact-card{ margin-top:30px; padding:22px; border-radius:0; background:rgba(255,255,255,.05); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.08); }
.footer-contact-card h5{ color:#fff; margin-bottom:12px; }
.footer-contact-card p{ color:rgba(255,255,255,.65); line-height:1.8; margin-bottom:18px; }
.footer-contact-card .btn{ width:100%; }
.footer-distributor{ margin-top:35px; padding:22px; border-radius:0; background:linear-gradient(135deg,var(--secondary),#ff82ba); color:#fff; text-align:center; }
.footer-distributor h4{ font-size:20px; margin-bottom:12px; }
.footer-distributor p{ opacity:.9; line-height:1.8; margin-bottom:18px; }
.footer-distributor .btn{ background:#fff; color:var(--secondary); }
.footer-distributor .btn:hover{ background:#111; color:#fff; }
.footer-badges{ display:flex; flex-wrap:wrap; gap:12px; margin-top:25px; }
.footer-badge{ padding:10px 16px; border-radius:0; background:rgba(255,255,255,.08); color:#fff; font-size:13px; transition:.3s; }
.footer-badge:hover{ background:var(--secondary); }
.footer-widget:hover{ transform:translateY(-4px); }
.footer-instagram{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.instagram-item{ position:relative; overflow:hidden; border-radius:0; aspect-ratio:1/1; cursor:pointer; }
.instagram-item img{ width:100%; height:100%; object-fit:cover; transition:.45s; }
.instagram-item::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:.35s; z-index:1; }
.instagram-item::after{ content:"\F437"; font-family:"bootstrap-icons"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.7); color:#fff; font-size:26px; opacity:0; transition:.35s; z-index:2; }
.instagram-item:hover img{ transform:scale(1.12); }
.instagram-item:hover::before{ opacity:1; }
.instagram-item:hover::after{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.footer-payments{ margin-top:35px; }
.footer-payments h5{ color:#fff; margin-bottom:16px; font-size:16px; }
.payment-list{ display:flex; flex-wrap:wrap; gap:12px; }
.payment-list img{ height:34px; width:auto; background:#fff; padding:6px 10px; border-radius:0; transition:.3s; }
.payment-list img:hover{ transform:translateY(-3px); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:25px 0; margin-top:70px; }
.footer-bottom-wrapper{ display:flex; justify-content:space-between; align-items:center; gap:25px; }
.footer-copyright{ color:rgba(255,255,255,.65); font-size:16px; }
.footer-copyright strong{ color:#fff; }
.footer-copyright a{ color:var(--secondary); }
.footer-bottom-menu{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-bottom-menu a{ color:rgba(255,255,255,.65); transition:.3s; font-size:16px; }
.footer-bottom-menu a:hover{ color:#fff; }
.footer-love{ margin-top:18px; text-align:center; color:rgba(255,255,255,.55); font-size:16px; }
.footer-love i{ color:#ff4d6d; animation:heartBeat 1.8s infinite; }
.back-to-top{ position:fixed; right:30px; bottom:30px; width:56px; height:56px; border-radius:50%; background:var(--secondary); color:#fff; display:flex; justify-content:center; align-items:center; font-size:22px; box-shadow:0 12px 30px rgba(0,0,0,.18); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(20px); transition:.35s; z-index:999; }
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ transform:translateY(-6px); background:var(--primary); }
.whatsapp-float{ position:fixed; left:30px; bottom:30px; width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff; display:flex; justify-content:center; align-items:center; font-size:28px; box-shadow:0 12px 30px rgba(0,0,0,.18); transition:.35s; z-index:999; }
.whatsapp-float:hover{ transform:translateY(-6px) scale(1.05); }
@keyframes heartBeat{
0%,100%{ transform:scale(1); }
50%{ transform:scale(1.2); }
}
@media(max-width:1200px){
.footer-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:992px){
.newsletter-wrapper{ grid-template-columns:1fr; text-align:center; }
.newsletter-content p{ margin:auto; }
.newsletter-form{ margin:auto; }
.footer-widget{ margin-bottom:20px; }
.footer-contact-card{ margin-top:25px; }
.footer-bottom-wrapper{ flex-direction:column; text-align:center; }
}
@media(max-width:768px){
.newsletter{ padding:70px 0; }
.newsletter-content h2{ font-size:34px; }
.footer{ padding-top:70px; }
.footer-grid{ grid-template-columns:1fr; gap:40px; }
.footer-about{ padding-right:0; }
.footer-widget-title{ font-size:16px; }
.footer-category{ padding:10px 0; }
.business-hours li{ flex-direction:column; align-items:flex-start; gap:6px; }
.footer-distributor{ padding:18px; }
.footer-instagram{ grid-template-columns:repeat(2,1fr); }
.footer-bottom{ margin-top:50px; }
.back-to-top{ width:50px; height:50px; right:20px; bottom:20px; }
.whatsapp-float{ width:54px; height:54px; left:20px; bottom:20px; }
}
@media(max-width:576px){
.newsletter-form{ flex-direction:column; border-radius:0; }
.newsletter-form input{ width:100%; text-align:center; }
.newsletter-form button{ width:100%; }
.newsletter-content h2{ font-size:28px; }
}
@media(max-width:480px){
.footer-links{ gap:12px; }
.footer-contact-card{ padding:18px; }
.footer-distributor h4{ font-size:16px; }
.footer-badges{ justify-content:center; }
.footer-instagram{ grid-template-columns:1fr 1fr; gap:10px; }
.payment-list{ justify-content:center; }
.footer-bottom-menu{ justify-content:center; gap:15px; }
.footer-copyright{ font-size:13px; }
.back-to-top{ width:46px; height:46px; font-size:16px; }
.whatsapp-float{ width:48px; height:48px; font-size:22px; }
}
/*========================================================== FINAL COMPATIBILITY OVERRIDES These align the current PHP component markup with the locked design. ==========================================================*/ .hero-wrapper{ display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,1fr); align-items:center; gap:80px; min-height:760px; padding:80px 0; }
.hero-content h1{ font-size:68px; line-height:1.08; font-weight:700; color:var(--primary); margin-bottom:26px; }
.hero-content p{ max-width:620px; font-size:17px; line-height:1.9; color:var(--text-light); margin-bottom:38px; }
.hero-stats .stat h3, .stat h3{ font-family:var(--body-font); font-size:34px; font-weight:700; color:var(--primary); margin-bottom:4px; }
.hero-stats .stat span, .stat span{ display:block; font-size:16px; color:var(--text-light); }
.product-image > .product-badge.sale, .product-image > .product-badge.new, .product-image > .product-badge.hot{ position:absolute; top:18px; left:18px; z-index:5; display:inline-flex; align-items:center; justify-content:center; min-width:68px; height:32px; padding:0 14px; border-radius:0; font-size:12px; font-weight:700; color:#fff; }
.product-image > .product-badge.sale{background:var(--secondary);}
.product-image > .product-badge.new{background:var(--primary);}
.product-image > .product-badge.hot{background:#ff8a00;}
.product-actions a{ width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--primary); box-shadow:0 10px 25px rgba(0,0,0,.12); transition:var(--transition); }
.product-actions a:hover{ background:var(--secondary); color:#fff; }
.new-price{ font-size:26px; font-weight:700; color:var(--primary); }
.brand-wrapper{ display:grid; grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr); align-items:center; gap:80px; }
.brand-image{ position:relative; border-radius:0; overflow:hidden; min-height:560px; background:#fff7fa; }
.brand-image img{ width:100%; height:100%; min-height:560px; object-fit:cover; }
.experience-box{ position:absolute; right:28px; bottom:28px; width:170px; min-height:150px; border-radius:0; background:#fff; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }
.experience-box h2{ font-family:var(--body-font); font-size:44px; color:var(--secondary); margin-bottom:6px; }
.experience-box span{ font-size:16px; color:var(--text-light); }
.brand-content p{ color:var(--text-light); line-height:1.9; margin-bottom:18px; }
.brand-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:32px 0; }
.feature-item{ display:flex; align-items:center; gap:10px; color:var(--primary); font-weight:500; }
.feature-item i{ color:var(--secondary); }
.brand-counters{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:34px 0; }
.counter{ padding:20px; border:1px solid var(--border); border-radius:0; background:#fff; text-align:center; }
.counter h3{ font-family:var(--body-font); font-size:30px; color:var(--secondary); }
.counter span{ color:var(--text-light); font-size:16px; }
.brand-buttons{ display:flex; gap:16px; flex-wrap:wrap; }
.testimonials{ background:#fff7fa; }
.testimonial-card{ height:100%; background:#fff; border:1px solid var(--border); border-radius:0; padding:34px; box-shadow:var(--shadow-sm); }
.testimonial-rating{ display:flex; gap:4px; color:#FDBA12; margin-bottom:18px; }
.testimonial-text{ color:var(--text-light); line-height:1.9; margin-bottom:26px; }
.testimonial-user{ display:flex; align-items:center; gap:14px; }
.testimonial-user img{ width:58px; height:58px; border-radius:50%; object-fit:cover; background:#f3f3f3; }
.testimonial-user h4{ font-family:var(--body-font); font-size:16px; margin-bottom:2px; }
.testimonial-user span{ color:var(--text-muted); font-size:13px; }
.testimonial-counter{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:60px; }
.counter-box{ background:#fff; border:1px solid var(--border); border-radius:0; padding:26px 20px; text-align:center; }
.counter-box h3{ font-family:var(--body-font); font-size:32px; color:var(--secondary); }
.counter-box span{ color:var(--text-light); }
.newsletter-benefits{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:55px; }
.benefit-item{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); border-radius:0; padding:26px; color:#fff; }
.benefit-item i{ font-size:28px; color:var(--secondary); margin-bottom:16px; }
.benefit-item h4{ color:#fff; margin-bottom:10px; }
.benefit-item p{ color:rgba(255,255,255,.72); line-height:1.7; font-size:16px; }
.newsletter-cta{ position:relative; z-index:2; margin-top:44px; background:#fff; border-radius:0; padding:32px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.newsletter-cta h3{ font-size:28px; margin-bottom:8px; }
.newsletter-cta p{ color:var(--text-light); }
@media(max-width:1200px){
.hero-wrapper{ gap:50px; }
.hero-content h1{ font-size:56px; }
.brand-wrapper{ gap:50px; }
.newsletter-benefits{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:992px){
.hero-wrapper, .brand-wrapper{ grid-template-columns:1fr; text-align:center; }
.hero-content p{ margin-left:auto; margin-right:auto; }
.brand-features{ text-align:left; }
.testimonial-counter{ grid-template-columns:repeat(2,1fr); }
.newsletter-cta{ flex-direction:column; text-align:center; }
}
@media(max-width:768px){
.hero-wrapper{ min-height:auto; padding:70px 0; }
.hero-content h1{ font-size:38px; }
.hero-stats{ justify-content:center; flex-wrap:wrap; gap:26px; }
.brand-features, .brand-counters, .testimonial-counter, .newsletter-benefits{ grid-template-columns:1fr; }
.brand-image, .brand-image img{ min-height:360px; }
}
@media(max-width:480px){
.hero-content h1{ font-size:32px; }
.brand-buttons, .hero-buttons{ flex-direction:column; }
.brand-buttons .btn, .hero-buttons .btn{ width:100%; }
}
/*========================================================== BLOCK 1 FIX - TOPBAR, HEADER, HERO Paste this at the very end of assets/css/style.css ==========================================================*/ html, body{ width:100%; min-width:0; overflow-x:hidden; }
body{ background:#fffdfb; }
#page{ width:100%; min-height:100vh; overflow:hidden; }
.container{ width:100%; max-width:1400px; margin-inline:auto; padding-inline:24px; }
.section{ width:100%; padding:95px 0; position:relative; }
.section-header{ max-width:760px; margin:0 auto 58px; text-align:center; }
.section-subtitle{ display:block; margin-bottom:12px; color:#d83a73; font-size:13px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; }
.section-title{ font-family:'KMR Waldenburg Buch', Arial, Helvetica, sans-serif; font-size:48px; line-height:1.12; color:#111; margin-bottom:18px; }
.section-description{ color:#666; font-size:16px; line-height:1.8; }
/* Topbar */ .topbar{ width:100%; min-height:38px; background:#111; color:#fff; display:flex; align-items:center; font-size:13px; }
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
/* Header */ .site-header{ position:sticky; top:0; z-index:999; width:100%; background:#fff; border-bottom:1px solid #f0edf0; box-shadow:0 4px 18px rgba(17,17,17,.04); }
.navbar{ min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
.logo a{ display:inline-flex; align-items:center; color:#111; font-size:24px; font-weight:800; letter-spacing:.2px; }
.logo img{ width:170px; max-height:56px; object-fit:contain; }
.logo img:not([src]), .logo img[src='']{ display:none; }
.nav-menu{ display:flex; align-items:center; justify-content:center; gap:34px; }
.nav-menu > li{ position:relative; }
.nav-menu > li > a{ display:flex; align-items:center; gap:6px; padding:28px 0; color:#111; font-size:16px; font-weight:600; }
.nav-menu > li > a.active, .nav-menu > li > a:hover{ color:#d83a73; }
.dropdown{ position:absolute; top:100%; left:0; min-width:220px; padding:12px 0; background:#fff; border:1px solid #ececec; border-radius:0; box-shadow:0 18px 45px rgba(0,0,0,.10); opacity:0; visibility:hidden; transform:translateY(12px); transition:.25s ease; }
.has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:11px 20px; color:#333; font-size:16px; }
.dropdown a:hover{ color:#d83a73; background:#fff7fa; }
.header-icons{ display:flex; align-items:center; gap:10px; }
.icon-btn, .mobile-toggle{ width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#111; background:#fff; border:1px solid transparent; }
.icon-btn:hover, .mobile-toggle:hover{ color:#d83a73; border-color:#f3d5df; background:#fff7fa; }
.mobile-toggle{ display:none; }
/* Hero Slider containment */ .hero{ width:100%; position:relative; overflow:hidden; background:linear-gradient(135deg,#fffdfb 0%,#fff5f8 55%,#fff 100%); }
.heroSlider, .heroSlider .swiper-wrapper, .heroSlider .swiper-slide{ width:100%; }
.heroSlider{ position:relative; overflow:hidden; }
.heroSlider .swiper-wrapper{ display:flex; align-items:stretch; }
.heroSlider .swiper-slide{ flex:0 0 100%; min-width:100%; overflow:hidden; }
.hero-wrapper{ width:100%; min-height:720px; padding:84px 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,1fr); align-items:center; gap:76px; }
.hero-content{ max-width:660px; position:relative; z-index:2; }
.hero-subtitle{ display:inline-flex; align-items:center; gap:12px; margin-bottom:20px; color:#d83a73; font-size:13px; font-weight:800; letter-spacing:2.3px; text-transform:uppercase; }
.hero-subtitle::before{ content:""; width:42px; height:2px; background:#d83a73; border-radius:0; }
.hero-content h1{ font-family:'KMR Waldenburg Buch', Arial, Helvetica, sans-serif; color:#111; font-size:68px; line-height:1.06; font-weight:700; margin-bottom:26px; letter-spacing:0; }
.hero-content p{ max-width:610px; color:#666; font-size:17px; line-height:1.9; margin-bottom:38px; }
.hero-buttons{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.btn{ min-height:52px; min-width:160px; padding:0 28px; border-radius:0; display:inline-flex; align-items:center; justify-content:center; gap:10px; font-size:17px; font-weight:700; border:1px solid transparent; transition:.25s ease; }
.btn-primary{ background:#111; color:#fff; }
.btn-primary:hover{ background:#d83a73; color:#fff; transform:translateY(-2px); box-shadow:0 14px 32px rgba(216,58,115,.22); }
.btn-outline{ background:#fff; color:#111; border-color:#111; }
.btn-outline:hover{ background:#111; color:#fff; transform:translateY(-2px); }
.hero-stats{ display:flex; align-items:flex-start; gap:44px; margin-top:52px; }
.hero-stats .stat h3{ font-family:'KMR Waldenburg Buch', sans-serif; color:#111; font-size:34px; line-height:1; font-weight:800; margin-bottom:8px; }
.hero-stats .stat span{ display:block; color:#777; font-size:16px; line-height:1.35; }
.hero-image{ min-width:0; min-height:560px; position:relative; display:flex; align-items:center; justify-content:center; }
.hero-image::before{ content:""; position:absolute; width:min(580px,90%); aspect-ratio:1; border-radius:50%; background:linear-gradient(135deg,#fff,#fde7ef); box-shadow:inset 0 0 0 1px rgba(216,58,115,.08); }
.hero-image::after{ content:""; position:absolute; width:min(470px,78%); aspect-ratio:1; border-radius:50%; background:rgba(216,58,115,.12); filter:blur(80px); }
.hero-image img{ position:relative; z-index:2; width:100%; max-width:560px; max-height:620px; object-fit:contain; filter:drop-shadow(0 32px 48px rgba(0,0,0,.16)); }
.hero-image img[src=''], .hero-image img:not([src]){ display:none; }
.hero-image:has(img[src=''])::before, .hero-image:has(img:not([src]))::before{ content:"Image Missing"; display:flex; align-items:center; justify-content:center; color:#d83a73; font-weight:700; }
.hero-next, .hero-prev{ width:48px; height:48px; border-radius:50%; background:#fff; color:#111; box-shadow:0 12px 30px rgba(0,0,0,.10); }
.hero-next::after, .hero-prev::after{ font-size:16px; font-weight:800; }
.hero-pagination{ bottom:24px !important; }
.hero-pagination .swiper-pagination-bullet{ width:10px; height:10px; background:#d83a73; opacity:.25; }
.hero-pagination .swiper-pagination-bullet-active{ width:34px; border-radius:0; opacity:1; }
@media(max-width:1100px){
.hero-wrapper{ grid-template-columns:1fr; min-height:auto; gap:45px; text-align:center; }
.hero-content{ max-width:820px; margin-inline:auto; }
.hero-content p{ margin-inline:auto; }
.hero-buttons, .hero-stats{ justify-content:center; }
.hero-image{ min-height:420px; }
}
@media(max-width:768px){
.container{ padding-inline:18px; }
.section{ padding:68px 0; }
.section-title{ font-size:34px; }
.nav-menu, .header-icons .icon-btn:not(.search-btn){ display:none; }
.mobile-toggle{ display:inline-flex; }
.navbar{ min-height:68px; }
.logo img{ width:140px; }
.hero-wrapper{ padding:62px 0 78px; }
.hero-content h1{ font-size:40px; }
.hero-content p{ font-size:17px; }
.hero-buttons{ flex-direction:column; align-items:stretch; }
.hero-buttons .btn{ width:100%; }
.hero-stats{ gap:22px; flex-wrap:wrap; }
.hero-stats .stat{ min-width:120px; }
.hero-image{ min-height:320px; }
.hero-image img{ max-width:310px; }
.hero-next, .hero-prev{ display:none; }
}
@media(max-width:480px){
.hero-content h1{ font-size:32px; }
.hero-subtitle{ font-size:11px; letter-spacing:1.7px; }
.hero-subtitle::before{ width:28px; }
}
/*========================================================== FONT CLEAN FIX Paste at the very end of assets/css/style.css ==========================================================*/ :root{ --heading-font:Inter, sans-serif; --body-font:'KMR Waldenburg Buch', Arial, sans-serif; }
html{ font-size:16px; -webkit-text-size-adjust:100%; }
body{ font-family:var(--body-font); font-size:17px; font-weight:400; line-height:1.7; letter-spacing:0; color:#2b2b2b; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1, h2, h3, h4, h5, h6, .section-title, .hero-content h1, .brand-content h2, .newsletter-content h2{ font-weight:700; letter-spacing:0; color:#111; }
.hero-content h1{ font-size:clamp(38px,5vw,68px); line-height:1.05; }
.section-title{ font-size:clamp(30px,3.4vw,48px); line-height:1.15; }
p, li, a, span, input, textarea, select, button{ font-family:var(--body-font); letter-spacing:0; }
p, .section-description, .hero-content p, .brand-content p, .testimonial-text, .newsletter-content p, .footer-about p{ font-size:17px; line-height:1.85; font-weight:400; color:#666; }
.nav-menu > li > a, .topbar, .btn, .product-brand, .section-subtitle, .category-content span{ font-family:var(--body-font); letter-spacing:.4px; }
.section-subtitle, .product-brand{ font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.btn{ font-size:16px; font-weight:600; }
.product-title, .feature-card h3, .highlight-item h4, .testimonial-user h4, .footer-widget-title{ font-weight:600; letter-spacing:0; }
.product-title{ font-size:17px; line-height:1.45; }
.current-price, .new-price, .counter h3, .counter-box h3, .hero-stats .stat h3{ font-family:var(--body-font); font-weight:800; letter-spacing:-.2px; }
@media(max-width:768px){
body{ font-size:16px; }
p, .section-description, .hero-content p, .brand-content p, .testimonial-text, .newsletter-content p, .footer-about p{ font-size:16px; line-height:1.75; }
}
/*========================================================== CLEAN HEADING FIX ==========================================================*/ h1, h2, h3, h4, h5, h6, .section-title, .hero-content h1, .brand-content h2, .newsletter-content h2, .footer-widget-title{ font-family:'KMR Waldenburg Buch', Arial, Helvetica, sans-serif; font-weight:600; letter-spacing:0; color:#111; text-transform:none; }
.hero-content h1{ font-size:clamp(36px,4.8vw,64px); line-height:1.08; max-width:720px; }
.section-title{ font-size:clamp(28px,3.1vw,44px); line-height:1.16; max-width:760px; margin-left:auto; margin-right:auto; }
.feature-card h3, .product-title, .highlight-item h4, .testimonial-user h4, .footer-widget-title{ font-family:'KMR Waldenburg Buch', Arial, sans-serif; font-weight:600; line-height:1.35; }
.product-title{ font-size:17px; }
.footer-widget-title{ font-size:16px; }
@media(max-width:768px){
.hero-content h1{ font-size:34px; }
.section-title{ font-size:30px; }
}
@media(max-width:480px){
.hero-content h1{ font-size:30px; }
.section-title{ font-size:26px; }
}
/*========================================================== CART PAGE ==========================================================*/ .cart-section{ background:#fffdfb; }
.cart-layout{ display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:36px; align-items:start; }
.cart-items, .summary-card, .summary-help{ background:#fff; border:1px solid #ececec; border-radius:0; box-shadow:0 10px 30px rgba(0,0,0,.05); }
.cart-items{ padding:30px; }
.cart-header{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:22px; margin-bottom:8px; border-bottom:1px solid #ececec; }
.cart-header h2{ font-family:'KMR Waldenburg Buch', Arial, Helvetica, sans-serif; font-size:32px; line-height:1.15; }
.cart-header span{ color:#d83a73; font-weight:600; }
.cart-item{ display:grid; grid-template-columns:minmax(0,1fr) 90px 130px 90px; gap:22px; align-items:center; padding:24px 0; border-bottom:1px solid #ececec; }
.cart-item:last-of-type{ border-bottom:none; }
.cart-product{ display:flex; align-items:center; gap:18px; min-width:0; }
.cart-product-image{ width:104px; height:116px; flex:0 0 104px; border-radius:0; background:#fff7fa; border:1px solid #fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cart-product-image img{ width:100%; height:100%; object-fit:contain; padding:14px; }
.cart-product-info{ min-width:0; }
.cart-product-info h3{ font-family:'KMR Waldenburg Buch', Arial, sans-serif; font-size:17px; font-weight:600; line-height:1.35; margin:8px 0 6px; }
.cart-product-info h3 a:hover{ color:#d83a73; }
.cart-product-info p{ color:#777; font-size:16px; line-height:1.5; }
.remove-btn{ margin-top:12px; display:inline-flex; align-items:center; gap:7px; color:#d83a73; font-size:13px; font-weight:600; }
.remove-btn:hover{ color:#111; }
.cart-price, .cart-total{ font-size:16px; font-weight:700; color:#111; }
.cart-quantity{ width:124px; height:46px; border:1px solid #ececec; border-radius:0; display:flex; align-items:center; justify-content:space-between; background:#fff; overflow:hidden; }
.cart-quantity button{ width:40px; height:46px; display:flex; align-items:center; justify-content:center; color:#111; font-size:16px; transition:.25s ease; }
.cart-quantity button:hover{ background:#fff7fa; color:#d83a73; }
.cart-quantity span{ font-weight:700; }
.cart-actions{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:28px; padding-top:26px; border-top:1px solid #ececec; }
.cart-summary{ position:sticky; top:110px; }
.summary-card{ padding:30px; }
.summary-card h3{ font-family:'KMR Waldenburg Buch', Arial, Helvetica, sans-serif; font-size:30px; margin-bottom:24px; }
.coupon-box{ padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid #ececec; }
.coupon-box label{ display:block; margin-bottom:10px; color:#111; font-size:16px; font-weight:600; }
.coupon-form{ display:flex; gap:10px; }
.coupon-form input{ width:100%; height:48px; padding:0 16px; border:1px solid #ececec; border-radius:0; background:#fff; }
.coupon-form input:focus{ border-color:#d83a73; box-shadow:0 0 0 3px rgba(216,58,115,.12); }
.coupon-form button{ height:48px; padding:0 18px; border-radius:0; background:#111; color:#fff; font-weight:600; }
.coupon-form button:hover{ background:#d83a73; }
.summary-list{ display:flex; flex-direction:column; gap:16px; }
.summary-row, .summary-total{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.summary-row span{ color:#666; }
.summary-row strong{ color:#111; }
.summary-total{ margin:24px 0; padding-top:22px; border-top:1px solid #ececec; }
.summary-total span{ font-size:16px; font-weight:700; color:#111; }
.summary-total strong{ font-size:30px; color:#d83a73; }
.summary-card .btn-block{ width:100%; }
.secure-checkout{ margin-top:18px; display:flex; align-items:center; justify-content:center; gap:8px; color:#28a745; font-size:16px; font-weight:600; }
.summary-help{ margin-top:22px; padding:24px; display:flex; gap:16px; align-items:flex-start; }
.summary-help > i{ width:48px; height:48px; flex:0 0 48px; border-radius:50%; background:#fff7fa; color:#d83a73; display:flex; align-items:center; justify-content:center; font-size:22px; }
.summary-help h4{ font-family:'KMR Waldenburg Buch', Arial, sans-serif; font-size:17px; margin-bottom:6px; }
.summary-help p{ color:#666; font-size:16px; line-height:1.6; margin-bottom:8px; }
.summary-help a{ color:#d83a73; font-weight:600; font-size:16px; }
.text-secondary{ color:#d83a73 !important; }
/* Empty cart state, future use */ .empty-cart{ padding:80px 30px; text-align:center; background:#fff; border:1px dashed #e6d5dc; border-radius:0; }
.empty-cart i{ font-size:54px; color:#d83a73; margin-bottom:18px; }
.empty-cart h2{ font-size:34px; margin-bottom:10px; }
.empty-cart p{ max-width:520px; margin:0 auto 28px; color:#666; }
/* Cart responsive */ @media(max-width:1200px){
.cart-layout{ grid-template-columns:minmax(0,1fr) 350px; gap:28px; }
.cart-item{ grid-template-columns:minmax(0,1fr) 80px 120px 80px; gap:16px; }
}
@media(max-width:992px){
.cart-layout{ grid-template-columns:1fr; }
.cart-summary{ position:relative; top:auto; }
}
@media(max-width:768px){
.cart-items, .summary-card{ padding:22px; border-radius:0; }
.cart-header{ align-items:flex-start; flex-direction:column; gap:6px; }
.cart-header h2{ font-size:28px; }
.cart-item{ grid-template-columns:1fr; gap:14px; padding:24px 0; }
.cart-product{ align-items:flex-start; }
.cart-price, .cart-total{ display:flex; justify-content:space-between;}
.homepage-banner img{ width:100%; height:550px; object-fit:cover; display:block; }

/* ==========================================================
   INSTA COLORS — PREMIUM GLOBAL BRAND SYSTEM
   Calm luxury / editorial storefront system.
   Typography and visual hierarchy only; no JS/functionality changes.
========================================================== */
:root{
--ic-black:#111111;
--ic-white:#ffffff;
--ic-offwhite:#fbfaf9;
--ic-text:#1b1b1b;
--ic-muted:#6b6b6b;
--ic-line:#e7e4e5;
--ic-pink:#d72f6d;
--ic-pink-dark:#b92359;
--ic-pink-soft:#fff5f8;
--ic-body-font:"KMR Waldenburg Buch",sans-serif;
--ic-heading-font:Inter,sans-serif;
}
html{font-size:16px;}
body{font-family:var(--ic-body-font)!important;font-size:16px!important;font-weight:400!important;line-height:1.55;color:var(--ic-text);}
body :where(p,li,a,label,input,textarea,select,option,button,small,span,td,th){font-family:var(--ic-body-font)!important;font-size:16px!important;font-weight:400!important;line-height:1.55;}
body :where(strong,b){font-family:var(--ic-body-font)!important;font-weight:500!important;}
body :where(h1,h2,h3,h4,h5,h6,.heading,.section-title,.section-heading,.page-title,.page-heading,.hero-title,.card-title,.product-title,.feature-title,.checkout-title,.account-title,.cart-title){font-family:var(--ic-heading-font)!important;font-weight:400!important;color:var(--ic-black);}
body :where(h1){font-size:48px!important;line-height:1.08!important;letter-spacing:-.025em;}
body :where(h2){font-size:38px!important;line-height:1.12!important;letter-spacing:-.02em;}
body :where(h3){font-size:28px!important;line-height:1.18!important;letter-spacing:-.015em;}
body :where(h4){font-size:22px!important;line-height:1.25!important;}
body :where(h5){font-size:18px!important;line-height:1.3!important;}
body :where(h6){font-size:16px!important;line-height:1.35!important;}
body :where(.page-title,.page-heading,.hero-title){font-family:var(--ic-heading-font)!important;font-size:48px!important;font-weight:400!important;line-height:1.08!important;}
body :where(.section-title,.section-heading,.checkout-title,.account-title,.cart-title){font-family:var(--ic-heading-font)!important;font-size:38px!important;font-weight:400!important;line-height:1.12!important;}
body :where(.card-title,.product-title,.feature-title){font-family:var(--ic-heading-font)!important;font-size:20px!important;font-weight:400!important;line-height:1.3!important;}
body :where(.section-subtitle,.section-eyebrow,.eyebrow,.kicker){font-family:var(--ic-body-font)!important;font-size:11px!important;font-weight:500!important;letter-spacing:.18em!important;text-transform:uppercase;}
body :where(input,textarea,select){font-size:15px!important;}
body :where(button,.btn,.button){font-size:14px!important;font-weight:400!important;letter-spacing:.01em;}
body :where(.text-muted,.muted,.section-description,.hero-description){color:var(--ic-muted);}
body :where(a){color:inherit;text-decoration:none;}
body :where(a:hover){color:var(--ic-pink);}
::selection{background:var(--ic-pink);color:#fff;}

/* Header — restrained, premium, no visual noise. */
.topbar{background:var(--ic-black)!important;color:#fff!important;font-size:13px!important;box-shadow:none!important;}
.topbar a{font-size:13px!important;color:#fff!important;}
.site-header{background:#fff!important;box-shadow:0 1px 0 var(--ic-line)!important;border-bottom:1px solid var(--ic-line)!important;}
.site-header.sticky{box-shadow:0 1px 0 var(--ic-line)!important;}
.navbar{min-height:78px;}
.nav-menu{gap:34px;}
.nav-menu>li>a{font-family:var(--ic-body-font)!important;font-size:16px!important;font-weight:400!important;letter-spacing:0!important;padding:28px 0!important;color:var(--ic-black)!important;}
.nav-menu>li>a:hover,.nav-menu>li>a.active{color:var(--ic-pink)!important;}
.dropdown{border:1px solid var(--ic-line)!important;border-radius:0!important;box-shadow:0 12px 35px rgba(17,17,17,.08)!important;}
.dropdown li a{font-family:var(--ic-body-font)!important;font-size:14px!important;font-weight:400!important;}

/* Common luxury surface language. */
body :where(.card,.product-card,.category-card,.account-card,.summary-card,.wishlist-card,.order-card,.address-card,.auth-card,.auth-info,.inner-card,.inner-sidebar-card){border-radius:0!important;box-shadow:none!important;border:1px solid var(--ic-line);}
body :where(.product-card,.category-card,.wishlist-card){transition:border-color .2s ease!important;}
body :where(.product-card:hover,.category-card:hover,.wishlist-card:hover){transform:none!important;box-shadow:none!important;border-color:#d2ced0!important;}
body :where(.product-card img,.category-card img,.wishlist-card img){transition:none!important;transform:none!important;filter:none!important;}

/* Buttons — one strong brand action, not multiple competing treatments. */
body :where(.btn,.button,.homepage-category-btn,.category-btn){border-radius:0!important;box-shadow:none!important;font-family:var(--ic-body-font)!important;font-weight:400!important;}
body :where(.btn-primary,.btn-dark,.btn-block,.homepage-category-btn){background:var(--ic-black)!important;color:#fff!important;border-color:var(--ic-black)!important;}
body :where(.btn-primary:hover,.btn-dark:hover,.btn-block:hover,.homepage-category-btn:hover){background:var(--ic-pink)!important;color:#fff!important;border-color:var(--ic-pink)!important;transform:none!important;}

/* Footer — black, quiet, editorial. */
footer,.site-footer{background:var(--ic-black)!important;color:#d9d9d9!important;border-top:0!important;}
footer h1,footer h2,footer h3,footer h4,footer h5,footer h6,.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,.site-footer h5,.site-footer h6{font-family:var(--ic-heading-font)!important;color:#fff!important;font-weight:400!important;}
footer p,footer li,footer a,footer span,footer small,.site-footer p,.site-footer li,.site-footer a,.site-footer span,.site-footer small{font-family:var(--ic-body-font)!important;color:#bdbdbd!important;font-size:15px!important;font-weight:400!important;line-height:1.7;}
footer a:hover,.site-footer a:hover{color:#fff!important;}
footer .footer-title,footer .widget-title,.site-footer .footer-title,.site-footer .widget-title{font-size:18px!important;font-weight:400!important;letter-spacing:.01em;}
footer .footer-distributor{background:var(--ic-pink)!important;}
footer .footer-distributor p,footer .footer-distributor a{color:#fff!important;}
footer .footer-bottom,.site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.12)!important;}

/* Mobile hierarchy. */
@media(max-width:768px){
body{font-size:15px!important;}
body :where(p,li,a,label,input,textarea,select,option,button,small,span,td,th){font-size:15px!important;}
body :where(h1){font-size:38px!important;}
body :where(h2){font-size:32px!important;}
body :where(h3){font-size:24px!important;}
body :where(h4){font-size:20px!important;}
body :where(h5){font-size:17px!important;}
body :where(h6){font-size:15px!important;}
body :where(.page-title,.page-heading,.hero-title){font-size:38px!important;}
body :where(.section-title,.section-heading,.checkout-title,.account-title,.cart-title){font-size:32px!important;}
body :where(.card-title,.product-title,.feature-title){font-size:18px!important;}
.nav-menu>li>a{font-size:15px!important;}
footer p,footer li,footer a,footer span,footer small,.site-footer p,.site-footer li,.site-footer a,.site-footer span,.site-footer small{font-size:14px!important;}
}

/* ==========================================================
   GLOBAL PRODUCT CARD — SAME VISUAL SYSTEM AS FEATURED PRODUCTS
   Visual-only rules. Existing HTML/PHP/JS and behavior unchanged.
   ========================================================== */
.product-card{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    border:1px solid #e5e5e5 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    transition:border-color .25s ease !important;
}
.product-card:hover{
    transform:none !important;
    border-color:#d2d2d2 !important;
    box-shadow:none !important;
}
.product-card .product-image{
    position:relative !important;
    width:100% !important;
    aspect-ratio:1 / 1.08 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#fafafa !important;
}
.product-card .product-image > a{
    display:block !important;
    width:100% !important;
    height:100% !important;
}
.product-card .product-image img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:cover !important;
    object-position:center !important;
    transition:none !important;
    transform:none !important;
    filter:none !important;
    box-shadow:none !important;
}
.product-card:hover .product-image img{
    transform:none !important;
    filter:none !important;
}
.product-card .product-badge{
    position:absolute !important;
    top:12px !important;
    left:12px !important;
    z-index:3 !important;
    padding:7px 10px !important;
    border-radius:0 !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:400 !important;
    letter-spacing:.04em !important;
}
.product-card .product-actions{
    position:absolute !important;
    right:12px !important;
    bottom:12px !important;
    z-index:4 !important;
    display:flex !important;
    gap:7px !important;
    opacity:0;
    transform:none !important;
    transition:opacity .2s ease !important;
}
.product-card:hover .product-actions,
.product-card .product-actions:focus-within{
    opacity:1 !important;
}
.product-card .product-actions a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:38px !important;
    height:38px !important;
    padding:0 !important;
    border:1px solid #e5e5e5 !important;
    border-radius:50% !important;
    background:#fff !important;
    color:#151515 !important;
    box-shadow:none !important;
    text-decoration:none !important;
}
.product-card .product-actions a:hover{
    background:#111 !important;
    border-color:#111 !important;
    color:#fff !important;
    transform:none !important;
}
.product-card .product-content{
    display:flex !important;
    flex:1 1 auto !important;
    flex-direction:column !important;
    align-items:center !important;
    padding:18px 18px 20px !important;
    background:#fff !important;
    text-align:center !important;
}
.product-card .product-title{
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    text-align:center !important;
    font-family:Inter,sans-serif !important;
    font-size:16px !important;
    line-height:1.25 !important;
    font-weight:400 !important;
}
.product-card .product-title a{
    color:#111 !important;
    text-decoration:none !important;
}
.product-card .product-title a:hover{
    color:#111 !important;
}
.product-card .product-rating{
    margin-top:7px !important;
    color:#f2a900 !important;
    font-size:12px !important;
    line-height:1 !important;
    text-align:center !important;
}
.product-card .product-rating span{
    color:#888 !important;
    font-size:10px !important;
}
.product-card .product-price{
    display:flex !important;
    align-items:baseline !important;
    justify-content:center !important;
    gap:8px !important;
    margin-top:8px !important;
    line-height:1.1 !important;
    text-align:center !important;
}
.product-card .new-price,
.product-card .sale-price{
    color:#111 !important;
    font-size:16px !important;
    font-weight:400 !important;
}
.product-card .old-price,
.product-card .mrp{
    color:#999 !important;
    font-size:12px !important;
    text-decoration:line-through !important;
}
.product-card .product-content .btn-block,
.product-card .product-content .add-to-cart{
    width:100% !important;
    min-height:40px !important;
    margin-top:13px !important;
    border-radius:0 !important;
    box-shadow:none !important;
    font-size:11px !important;
    font-weight:400 !important;
    letter-spacing:.04em !important;
}

@media(max-width:760px){
    .product-card .product-actions{opacity:1;transform:none !important;}
}