/* ===== account.html ===== */
:root{
--rose:#a03138;--rose-light:#d4896e;--blush:#fdf0eb;--nude:#f0ddd3;
--bark:#5c3a2e;--ink:#1a0f0a;--white:#ffffff;--gray-50:#fafafa;
--border:rgba(160,49,8,.14);--shadow:0 4px 20px rgba(92,58,46,.1);
--green:#5a7a4e;--ff-serif:'Playfair Display',Georgia,serif;
--ff-sans:'DM Sans',sans-serif;--ff-num:'Fraunces','Playfair Display',serif;
--ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Mobile yatay overflow sigortası — herhangi bir alt element taşarsa görünmez kalır */
html,body{overflow-x:hidden;max-width:100%}
/* Targeted media — global img kuralı header logo gibi sabit boyutlu öğeleri bozmasın */
.gallery-main img, .lightbox img, .product-content img, .blog-content img, article img, .related-section img, video, iframe, embed{max-width:100%;height:auto}
/* Header logo aspect ratio koruması — flex column stretch override */
header a.logo, .header-inner a.logo, .site-header-inner a.logo{align-items:flex-start;flex-shrink:0}
header a.logo > img, .header-inner a.logo > img, .site-header-inner a.logo > img{width:auto !important;max-width:none !important;align-self:flex-start;flex-shrink:0}
body{font-family:var(--ff-sans);background:var(--gray-50);color:var(--ink)}
a{text-decoration:none;color:inherit}
.icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ── HEADER ── */
.topbar{background:var(--rose);color:var(--white);font-size:12px;font-weight:300;letter-spacing:.08em;text-align:center;padding:9px 20px}
.topbar-svg{vertical-align:middle;margin-right:4px;display:inline-block}
header{background:var(--white);border-bottom:1px solid var(--border);padding:0 40px;position:sticky;top:0;z-index:100}
.header-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px}
nav{display:flex;gap:32px}
nav a{font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--bark);transition:color .2s}
nav a:hover,nav a.active{color:var(--rose)}
.header-actions{display:flex;align-items:center;gap:16px}
.header-actions a,.header-actions button{background:none;border:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:6px;font-family:var(--ff-sans);font-size:13px;transition:color .2s}
.header-actions a:hover,.header-actions button:hover{color:var(--rose)}
.cart-btn{background:var(--rose)!important;color:var(--white)!important;border-radius:20px;padding:8px 18px!important;font-size:12px!important;letter-spacing:.06em;text-transform:uppercase}
.cart-badge{background:var(--white);color:var(--rose);border-radius:50%;width:17px;height:17px;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
/* ── ACCOUNT LAYOUT ── */
.account-wrap{max-width:1320px;margin:0 auto;padding:40px;display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
/* ── SIDEBAR ── */
.account-sidebar{background:var(--white);border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}
.sidebar-profile{background:linear-gradient(135deg,var(--rose) 0%,var(--bark) 100%);padding:28px;text-align:center;position:relative}
.sidebar-profile::after{content:'🌹';position:absolute;top:-10px;right:-10px;font-size:80px;opacity:.1}
.profile-avatar{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.2);border:3px solid rgba(255,255,255,.4);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--white)}
.profile-name{font-family:var(--ff-serif);font-size:18px;font-weight:400;color:var(--white);margin-bottom:4px}
.profile-email{font-size:11px;font-weight:300;color:rgba(255,255,255,.75)}
.profile-type{display:inline-block;background:rgba(255,255,255,.15);border-radius:20px;padding:3px 12px;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-top:8px}
.sidebar-nav{padding:16px 0}
.sidebar-nav-item{display:flex;align-items:center;gap:12px;padding:13px 24px;font-size:13px;font-weight:400;color:var(--bark);cursor:pointer;transition:all .2s;border-left:3px solid transparent}
.sidebar-nav-item:hover{background:var(--blush);color:var(--rose)}
.sidebar-nav-item.active{background:var(--blush);color:var(--rose);border-left-color:var(--rose);font-weight:500}
.sidebar-nav-item svg{flex-shrink:0;color:inherit}
.sidebar-badge{margin-left:auto;background:var(--rose);color:var(--white);border-radius:20px;padding:1px 8px;font-size:10px;font-weight:600}
.sidebar-divider{height:1px;background:var(--border);margin:8px 24px}
/* ── MAIN CONTENT ── */
.account-main{}
.page-view{display:none}.page-view.active{display:block}
.page-title{font-family:var(--ff-serif);font-size:28px;font-weight:400;color:var(--ink);margin-bottom:6px}
.page-title em{font-style:italic;color:var(--rose)}
.page-sub{font-size:13px;font-weight:300;color:var(--bark);margin-bottom:28px}
/* ── DASHBOARD CARDS ── */
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.stat-card{background:var(--white);border-radius:8px;padding:22px;box-shadow:var(--shadow);display:flex;align-items:center;gap:16px}
.stat-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.stat-icon.rose{background:var(--blush)}
.stat-icon.green{background:#edf4eb}
.stat-icon.blue{background:#edf0f7}
.stat-icon.gold{background:#fef9ec}
.stat-num{font-family:var(--ff-num);font-size:26px;font-weight:400;color:var(--ink);line-height:1}
.stat-label{font-size:11px;font-weight:300;color:var(--bark);margin-top:3px}
/* Recent Orders */
.section-card{background:var(--white);border-radius:8px;box-shadow:var(--shadow);margin-bottom:20px;overflow:hidden}
.section-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.section-head-title{font-size:15px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:10px}
.section-head-title svg{color:var(--rose)}
.see-all{font-size:12px;color:var(--rose);font-weight:400;transition:opacity .2s}
.see-all:hover{opacity:.7}
.order-table{width:100%;border-collapse:collapse}
.order-table th{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--bark);padding:12px 20px;text-align:left;background:var(--gray-50)}
.order-table td{padding:16px 20px;border-top:1px solid var(--border);font-size:13px;color:var(--ink)}
.order-num{font-family:var(--ff-num);font-weight:400;color:var(--rose)}
.order-thumb{width:40px;height:40px;border-radius:4px;background:var(--blush);display:flex;align-items:center;justify-content:center;font-size:20px}
.order-name{font-size:13px;font-weight:400;color:var(--ink)}
.order-meta{font-size:11px;font-weight:300;color:var(--bark);margin-top:2px}
.status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:10px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.status-badge.delivered{background:#edf4eb;color:var(--green)}
.status-badge.shipping{background:#eef3fb;color:#3a6bbf}
.status-badge.preparing{background:#fef9ec;color:#b5860d}
.status-badge.cancelled{background:#fef0f0;color:#c0392b}
.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.order-price{font-family:var(--ff-num);font-size:15px;font-weight:400;color:var(--rose)}
.action-btn{padding:6px 14px;border:1.5px solid var(--border);border-radius:4px;background:none;cursor:pointer;font-family:var(--ff-sans);font-size:11px;font-weight:400;color:var(--bark);transition:all .2s}
.action-btn:hover{border-color:var(--rose);color:var(--rose)}
/* Address Cards */
.address-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:20px}
.address-card{border:1.5px solid var(--border);border-radius:6px;padding:20px;position:relative;cursor:pointer;transition:border-color .2s}
.address-card:hover{border-color:var(--rose-light)}
.address-card.default{border-color:var(--rose)}
.address-default-tag{position:absolute;top:12px;right:12px;background:var(--rose);color:var(--white);border-radius:20px;padding:2px 10px;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.address-type{font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.address-name{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:4px}
.address-text{font-size:12px;font-weight:300;color:var(--bark);line-height:1.7}
.address-actions{display:flex;gap:8px;margin-top:14px}
.address-action-btn{font-size:11px;color:var(--bark);border:none;background:none;cursor:pointer;padding:0;transition:color .2s;font-family:var(--ff-sans)}
.address-action-btn:hover{color:var(--rose)}
.address-add{border:2px dashed var(--border);border-radius:6px;padding:28px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:border-color .2s;color:var(--bark)}
.address-add:hover{border-color:var(--rose);color:var(--rose)}
.address-add-icon{width:40px;height:40px;border-radius:50%;background:var(--blush);display:flex;align-items:center;justify-content:center}
/* Subscription widget */
.sub-widget{background:linear-gradient(135deg,var(--blush) 0%,var(--nude) 100%);border-radius:8px;padding:24px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.sub-widget-title{font-family:var(--ff-serif);font-size:18px;font-weight:400;color:var(--ink);margin-bottom:6px}
.sub-widget-desc{font-size:12px;font-weight:300;color:var(--bark);line-height:1.6}
.sub-widget-cta{white-space:nowrap;padding:12px 22px;background:var(--rose);color:var(--white);border:none;border-radius:4px;cursor:pointer;font-family:var(--ff-sans);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:background .25s}
.sub-widget-cta:hover{background:var(--bark)}
/* ── PROFILE EDIT PAGE ── */
.profile-form-wrap{background:var(--white);border-radius:8px;box-shadow:var(--shadow);padding:32px}
.form-section-title{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-row.full{grid-template-columns:1fr}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.form-input,.form-select,.form-textarea{padding:11px 14px;border:1.5px solid var(--border);border-radius:4px;background:#fafafa;font-family:var(--ff-sans);font-size:13px;color:var(--ink);outline:none;transition:border-color .2s,background .2s;width:100%}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--rose);background:var(--white)}
.form-hint{font-size:11px;color:var(--bark);font-weight:300}
.avatar-edit{display:flex;align-items:center;gap:20px;margin-bottom:28px}
.avatar-big{width:80px;height:80px;border-radius:50%;background:var(--blush);display:flex;align-items:center;justify-content:center;font-size:36px;border:3px solid var(--nude);flex-shrink:0}
.avatar-edit-btns{display:flex;flex-direction:column;gap:8px}
.btn-sm-rose{padding:8px 16px;background:var(--rose);color:var(--white);border:none;border-radius:4px;cursor:pointer;font-family:var(--ff-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;transition:background .2s}
.btn-sm-rose:hover{background:var(--bark)}
.btn-sm-outline{padding:8px 16px;background:none;color:var(--bark);border:1.5px solid var(--border);border-radius:4px;cursor:pointer;font-family:var(--ff-sans);font-size:11px;transition:border-color .2s,color .2s}
.btn-sm-outline:hover{border-color:var(--rose);color:var(--rose)}
.save-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-top:20px;border-top:1px solid var(--border);margin-top:20px}
.btn-save{padding:12px 32px;background:var(--rose);color:var(--white);border:none;border-radius:4px;cursor:pointer;font-family:var(--ff-sans);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:background .2s}
.btn-save:hover{background:var(--bark)}
.btn-cancel{padding:12px 24px;background:none;color:var(--bark);border:1.5px solid var(--border);border-radius:4px;cursor:pointer;font-family:var(--ff-sans);font-size:12px;transition:all .2s}
.btn-cancel:hover{border-color:var(--rose);color:var(--rose)}
/* ── ORDER HISTORY ── */
.order-filters{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.order-filter-btn{padding:8px 16px;border:1.5px solid var(--border);border-radius:20px;background:none;cursor:pointer;font-family:var(--ff-sans);font-size:12px;color:var(--bark);transition:all .2s}
.order-filter-btn.active,.order-filter-btn:hover{border-color:var(--rose);color:var(--rose);background:var(--blush)}
.order-card{background:var(--white);border-radius:8px;box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.order-card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;background:var(--gray-50);border-bottom:1px solid var(--border)}
.order-card-num{font-family:var(--ff-num);font-size:16px;color:var(--rose)}
.order-card-date{font-size:12px;color:var(--bark);font-weight:300}
.order-card-body{padding:20px 22px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px}
.order-products{display:flex;gap:10px;flex-wrap:wrap}
.order-product-thumb{width:56px;height:56px;border-radius:4px;background:var(--blush);display:flex;align-items:center;justify-content:center;font-size:28px}
.order-product-info{flex:1;min-width:200px}
.order-product-name{font-size:14px;font-weight:400;color:var(--ink)}
.order-product-meta{font-size:12px;font-weight:300;color:var(--bark);margin-top:3px}
.order-card-total{text-align:right}
.order-total-label{font-size:11px;font-weight:300;color:var(--bark)}
.order-total-val{font-family:var(--ff-num);font-size:22px;font-weight:400;color:var(--rose)}
.order-card-actions{display:flex;gap:8px;padding:14px 22px;border-top:1px solid var(--border);justify-content:flex-end}
/* ── SUBSCRIPTION PAGE ── */
.sub-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:28px}
.sub-plan{border:2px solid var(--border);border-radius:8px;padding:28px;position:relative;cursor:pointer;transition:all .25s}
.sub-plan:hover{border-color:var(--rose-light);box-shadow:var(--shadow)}
.sub-plan.recommended{border-color:var(--rose);background:var(--blush)}
.sub-plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--rose);color:var(--white);border-radius:20px;padding:3px 14px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.sub-plan-title{font-family:var(--ff-serif);font-size:22px;font-weight:400;color:var(--ink);margin-bottom:6px}
.sub-plan-price{font-family:var(--ff-num);font-size:36px;font-weight:400;color:var(--rose);margin-bottom:4px}
.sub-plan-period{font-size:12px;font-weight:300;color:var(--bark);margin-bottom:20px}
.sub-plan-features{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.sub-plan-feat{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:300;color:var(--bark)}
.sub-plan-feat svg{color:var(--green);flex-shrink:0;width:14px;height:14px}
.btn-sub-select{width:100%;padding:12px;background:var(--rose);color:var(--white);border:none;border-radius:4px;cursor:pointer;font-family:var(--ff-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;transition:background .25s}
.btn-sub-select:hover{background:var(--bark)}
.sub-plan.recommended .btn-sub-select{background:var(--bark)}
/* Active sub info */
.active-sub{background:var(--white);border-radius:8px;box-shadow:var(--shadow);padding:28px;margin-bottom:20px}
.active-sub-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.active-sub-title{font-family:var(--ff-serif);font-size:20px;font-weight:400;color:var(--ink)}
.sub-status{display:inline-flex;align-items:center;gap:6px;background:#edf4eb;color:var(--green);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:500}
.sub-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.sub-detail-item{background:var(--blush);border-radius:6px;padding:16px}
.sub-detail-label{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--bark);margin-bottom:6px}
.sub-detail-val{font-size:14px;font-weight:400;color:var(--ink)}
.sub-next-delivery{background:linear-gradient(135deg,var(--rose) 0%,var(--bark) 100%);border-radius:6px;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;color:var(--white)}
.sub-next-label{font-size:11px;font-weight:300;opacity:.8;margin-bottom:4px}
.sub-next-date{font-family:var(--ff-num);font-size:20px;font-weight:400}
.sub-pause-btn{padding:8px 16px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);border-radius:4px;color:var(--white);cursor:pointer;font-family:var(--ff-sans);font-size:11px;transition:background .2s}
.sub-pause-btn:hover{background:rgba(255,255,255,.35)}
/* ── ORDER TRACKING ── */
.tracking-wrap{background:var(--white);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.tracking-head{background:linear-gradient(135deg,var(--blush) 0%,var(--nude) 100%);padding:24px 28px}
.tracking-order-num{font-family:var(--ff-num);font-size:28px;font-weight:400;color:var(--rose)}
.tracking-date{font-size:12px;font-weight:300;color:var(--bark);margin-top:4px}
.tracking-body{padding:28px}
.tracking-steps{display:flex;flex-direction:column;gap:0;position:relative;margin-bottom:28px}
.tracking-step{display:grid;grid-template-columns:48px 1fr;gap:0;position:relative}
.tracking-step:not(:last-child) .step-line{position:absolute;left:23px;top:44px;width:2px;height:calc(100% - 4px);background:var(--border)}
.tracking-step.done:not(:last-child) .step-line{background:var(--rose)}
.step-dot{width:46px;height:46px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;background:var(--white);position:relative;z-index:1;flex-shrink:0;font-size:18px;transition:all .3s}
.tracking-step.done .step-dot{border-color:var(--rose);background:var(--rose)}
.tracking-step.active .step-dot{border-color:var(--rose);background:var(--blush)}
.step-content{padding:10px 0 28px 16px}
.step-title{font-size:14px;font-weight:500;color:var(--ink)}
.tracking-step.done .step-title{color:var(--rose)}
.step-time{font-size:11px;font-weight:300;color:var(--bark);margin-top:3px}
.step-detail{font-size:12px;font-weight:300;color:var(--bark);margin-top:6px;line-height:1.6}
.tracking-products{background:var(--blush);border-radius:6px;padding:18px}
.tracking-products-title{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--bark);margin-bottom:14px}
.tracking-product-item{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.tp-thumb{width:44px;height:44px;border-radius:4px;background:var(--white);display:flex;align-items:center;justify-content:center;font-size:22px}
.tp-name{font-size:13px;font-weight:400;color:var(--ink)}
.tp-meta{font-size:11px;font-weight:300;color:var(--bark)}
.tp-price{font-family:var(--ff-num);font-size:15px;color:var(--rose);margin-left:auto}
/* Responsive */
@media(max-width:1060px){.account-wrap{grid-template-columns:1fr}.account-sidebar{display:flex;overflow-x:auto}.sidebar-profile{display:none}.sidebar-nav{display:flex;padding:8px 0;gap:0}}
@media(max-width:860px){header{padding:0 20px}nav{display:none}.account-wrap{padding:20px 16px}.dash-stats{grid-template-columns:repeat(2,1fr)}.sub-plans{grid-template-columns:1fr}}
/* ===== blog.html ===== */
:root{--rose:#a03138;--rose-light:#d4896e;--blush:#fdf0eb;--nude:#f0ddd3;--bark:#5c3a2e;--ink:#1a0f0a;--white:#ffffff;--gray-50:#fafafa;--border:rgba(160,49,8,.14);--shadow:0 8px 40px rgba(92,58,46,.12);--ff-serif:'Playfair Display',Georgia,serif;--ff-sans:'DM Sans',sans-serif;--ff-num:'Fraunces','Playfair Display',serif;--ease:cubic-bezier(.4,0,.2,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff-sans);background:var(--white);color:var(--ink)}
a{text-decoration:none;color:inherit}
.icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.topbar{background:var(--rose);color:var(--white);font-size:12px;font-weight:300;text-align:center;padding:9px 20px}
header{background:var(--white);border-bottom:1px solid var(--border);padding:0 40px;position:sticky;top:0;z-index:100}
.header-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px}
nav{display:flex;gap:32px}
nav a{font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--bark);transition:color .2s;position:relative;padding-bottom:2px}
nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--rose);transition:width .3s}
nav a:hover,nav a.active{color:var(--rose)}
nav a.active::after,nav a:hover::after{width:100%}
.header-actions{display:flex;align-items:center;gap:16px}
.header-actions a,.header-actions button{background:none;border:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:6px;font-family:var(--ff-sans);font-size:13px;transition:color .2s}
.cart-btn{background:var(--rose)!important;color:var(--white)!important;border-radius:20px;padding:8px 18px!important;font-size:12px!important;letter-spacing:.06em;text-transform:uppercase}
.cart-badge{background:var(--white);color:var(--rose);border-radius:50%;width:17px;height:17px;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
/* VIEWS */
.view{display:none}.view.active{display:block}
/* ── BLOG LIST ── */
.blog-hero{background:linear-gradient(135deg,var(--blush) 0%,var(--nude) 100%);padding:80px 40px;text-align:center}
.hero-tag{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--rose);margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:10px}
.hero-tag::before,.hero-tag::after{content:'';display:block;width:24px;height:1px;background:var(--rose)}
.blog-hero-title{font-family:var(--ff-serif);font-size:clamp(40px,4.5vw,64px);font-weight:400;color:var(--ink);margin-bottom:14px}
.blog-hero-title em{font-style:italic;color:var(--rose)}
.blog-hero-desc{font-size:14px;font-weight:300;color:var(--bark);max-width:500px;margin:0 auto;line-height:1.8}
/* Category filter */
.blog-cats-wrap{background:var(--white);border-bottom:1px solid var(--border);padding:0 40px;overflow-x:auto;scrollbar-width:none}
.blog-cats-wrap::-webkit-scrollbar{display:none}
.blog-cats{max-width:1320px;margin:0 auto;display:flex;gap:0}
.blog-cat-btn{flex-shrink:0;padding:16px 22px;font-family:var(--ff-sans);font-size:13px;color:var(--bark);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:all .2s}
.blog-cat-btn:hover{color:var(--rose)}
.blog-cat-btn.active{color:var(--rose);border-bottom-color:var(--rose);font-weight:500}
/* Featured Post */
.featured-wrap{max-width:1320px;margin:0 auto;padding:56px 40px 40px}
.featured-post{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;background:var(--blush);border-radius:10px;overflow:hidden;margin-bottom:56px}
.featured-img{min-height:380px;background:linear-gradient(160deg,var(--nude) 0%,var(--rose-light) 100%);display:flex;align-items:center;justify-content:center;font-size:120px}
.featured-content{padding:48px 48px 48px 0}
.post-cat-tag{font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.post-cat-tag::before{content:'';display:block;width:20px;height:1px;background:var(--rose)}
.featured-title{font-family:var(--ff-serif);font-size:clamp(24px,2.5vw,36px);font-weight:400;color:var(--ink);line-height:1.25;margin-bottom:14px;cursor:pointer;transition:color .2s}
.featured-title:hover{color:var(--rose)}
.featured-excerpt{font-size:14px;font-weight:300;color:var(--bark);line-height:1.8;margin-bottom:24px}
.post-meta{display:flex;align-items:center;gap:16px;font-size:12px;font-weight:300;color:var(--bark);margin-bottom:20px}
.post-meta-sep{color:var(--rose-light)}
.read-more{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--rose);display:inline-flex;align-items:center;gap:8px;transition:gap .25s}
.read-more::after{content:'→';transition:transform .2s}
.read-more:hover{gap:12px}
/* Blog Grid */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.blog-layout{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
.blog-main{}
.blog-card{background:var(--white);border-radius:8px;overflow:hidden;box-shadow:0 2px 12px rgba(92,58,46,.06);transition:box-shadow .3s,transform .3s;cursor:pointer}
.blog-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.blog-card-img{aspect-ratio:16/10;background:linear-gradient(160deg,var(--blush),var(--nude));display:flex;align-items:center;justify-content:center;font-size:64px;position:relative;overflow:hidden}
.blog-card-cat{position:absolute;top:12px;left:12px;background:var(--rose);color:var(--white);border-radius:2px;padding:3px 10px;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.blog-card-body{padding:22px}
.blog-card-title{font-family:var(--ff-serif);font-size:18px;font-weight:400;color:var(--ink);line-height:1.3;margin-bottom:10px;transition:color .2s}
.blog-card:hover .blog-card-title{color:var(--rose)}
.blog-card-excerpt{font-size:12px;font-weight:300;color:var(--bark);line-height:1.7;margin-bottom:16px}
.blog-card-meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:300;color:var(--bark)}
.blog-card-date{display:flex;align-items:center;gap:5px}
.read-time{background:var(--blush);border-radius:20px;padding:3px 10px;font-size:10px;color:var(--rose);font-weight:500}
/* Sidebar */
.blog-sidebar{}
.sidebar-widget{background:var(--white);border-radius:8px;padding:24px;box-shadow:0 2px 12px rgba(92,58,46,.06);margin-bottom:20px}
.widget-title{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.popular-post{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start;cursor:pointer}
.popular-post:hover .popular-title{color:var(--rose)}
.popular-thumb{width:56px;height:56px;border-radius:4px;background:var(--blush);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.popular-title{font-size:13px;font-weight:400;color:var(--ink);line-height:1.4;transition:color .2s;margin-bottom:4px}
.popular-date{font-size:10px;font-weight:300;color:var(--bark)}
.cat-list{display:flex;flex-direction:column;gap:8px}
.cat-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:4px;cursor:pointer;transition:background .2s;font-size:13px;color:var(--bark)}
.cat-item:hover{background:var(--blush);color:var(--rose)}
.cat-count{background:var(--blush);border-radius:20px;padding:2px 8px;font-size:10px;color:var(--rose);font-weight:500}
.tag-cloud{display:flex;flex-wrap:wrap;gap:6px}
.tag{padding:5px 12px;border:1.5px solid var(--border);border-radius:20px;font-size:11px;color:var(--bark);cursor:pointer;transition:all .2s}
.tag:hover{border-color:var(--rose);color:var(--rose);background:var(--blush)}
.newsletter-widget{background:linear-gradient(135deg,var(--rose) 0%,var(--bark) 100%);border-radius:8px;padding:24px;text-align:center}
.newsletter-widget-title{font-family:var(--ff-serif);font-size:18px;font-weight:400;color:var(--white);margin-bottom:8px}
.newsletter-widget-desc{font-size:12px;font-weight:300;color:rgba(255,255,255,.8);margin-bottom:16px;line-height:1.6}
.newsletter-widget-input{width:100%;padding:10px 14px;border:1px solid rgba(255,255,255,.3);border-radius:4px;background:rgba(255,255,255,.15);color:var(--white);font-family:var(--ff-sans);font-size:13px;outline:none;margin-bottom:8px}
.newsletter-widget-input::placeholder{color:rgba(255,255,255,.6)}
.newsletter-widget-btn{width:100%;padding:10px;background:var(--white);color:var(--rose);border:none;border-radius:4px;cursor:pointer;font-family:var(--ff-sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:background .2s}
.newsletter-widget-btn:hover{background:var(--nude)}
/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:40px 0 56px}
.page-btn{width:38px;height:38px;border:1.5px solid var(--border);border-radius:4px;background:var(--white);cursor:pointer;font-family:var(--ff-sans);font-size:13px;color:var(--bark);display:flex;align-items:center;justify-content:center;transition:all .2s}
.page-btn:hover{border-color:var(--rose);color:var(--rose)}
.page-btn.active{background:var(--rose);border-color:var(--rose);color:var(--white)}
/* ── BLOG DETAIL ── */
.detail-breadcrumb{background:var(--white);border-bottom:1px solid var(--border);padding:14px 40px}
.breadcrumb{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--bark)}
.breadcrumb a{transition:color .2s}.breadcrumb a:hover{color:var(--rose)}
.detail-hero{max-width:1320px;margin:0 auto;padding:56px 40px 0}
.detail-hero-meta{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.detail-cat{background:var(--rose);color:var(--white);border-radius:2px;padding:4px 12px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.detail-date{font-size:12px;font-weight:300;color:var(--bark)}
.detail-read{font-size:12px;font-weight:300;color:var(--bark);display:flex;align-items:center;gap:4px}
.detail-title{font-family:var(--ff-serif);font-size:clamp(30px,3.5vw,52px);font-weight:400;color:var(--ink);line-height:1.2;margin-bottom:16px}
.detail-subtitle{font-family:var(--ff-serif);font-size:20px;font-style:italic;font-weight:300;color:var(--bark);margin-bottom:28px}
.detail-author{display:flex;align-items:center;gap:12px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.author-avatar{width:44px;height:44px;border-radius:50%;background:var(--blush);display:flex;align-items:center;justify-content:center;font-size:20px}
.author-name{font-size:14px;font-weight:500;color:var(--ink)}
.author-role{font-size:11px;font-weight:300;color:var(--bark)}
.detail-layout{max-width:1320px;margin:0 auto;padding:0 40px 80px;display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start}
.detail-main{}
.detail-feature-img{width:100%;height:420px;border-radius:8px;background:linear-gradient(160deg,var(--blush) 0%,var(--nude) 100%);display:flex;align-items:center;justify-content:center;font-size:140px;margin:32px 0;overflow:hidden}
.article-body{font-size:15px;font-weight:300;line-height:2;color:var(--bark)}
.article-body p{margin-bottom:20px}
.article-body h2{font-family:var(--ff-serif);font-size:26px;font-weight:400;color:var(--ink);margin:32px 0 14px;line-height:1.3}
.article-body h3{font-family:var(--ff-serif);font-size:20px;font-weight:400;color:var(--ink);margin:24px 0 10px}
.article-body strong{font-weight:500;color:var(--ink)}
.article-body ul{padding-left:20px;margin-bottom:20px}
.article-body ul li{margin-bottom:8px}
.article-blockquote{background:var(--blush);border-left:3px solid var(--rose);border-radius:0 6px 6px 0;padding:20px 24px;margin:28px 0;font-family:var(--ff-serif);font-size:18px;font-style:italic;color:var(--bark);line-height:1.7}
.article-img-caption{text-align:center;font-size:11px;font-weight:300;color:var(--bark);margin-top:-16px;margin-bottom:20px;font-style:italic}
.article-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--border);margin-top:28px}
.article-tags-label{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--bark)}
.article-share{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--border)}
.share-label{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--bark)}
.share-btn{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;background:none}
.share-btn:hover{border-color:var(--rose);background:var(--blush)}
/* Related articles */
.related-articles{background:var(--blush);padding:64px 40px}
.related-inner{max-width:1320px;margin:0 auto}
.related-title{font-family:var(--ff-serif);font-size:32px;font-weight:400;color:var(--ink);margin-bottom:32px}
.related-title em{font-style:italic;color:var(--rose)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* Footer */
footer{background:var(--ink);padding:40px}
.footer-bottom{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:300;color:rgba(255,255,255,.3)}
@media(max-width:960px){.blog-layout,.detail-layout{grid-template-columns:1fr}.blog-sidebar,.detail-hero,.featured-post{padding:0 20px}.related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){header{padding:0 20px}nav{display:none}.featured-post{grid-template-columns:1fr}.featured-content{padding:28px}.blog-grid{grid-template-columns:1fr}.featured-wrap{padding:32px 20px}}
/* ===== cart.html ===== */
:root {
--rose: #a03138;
--rose-light: #d4896e;
--blush: #fdf0eb;
--cream: #ffffff;
--nude: #f0ddd3;
--bark: #5c3a2e;
--ink: #2E1F1F;
--white: #FFFFFF;
--border: rgba(201,114,122,.18);
--shadow: 0 8px 40px rgba(139,111,106,.12);
--green: #7A9C72;
--ff-serif: 'Playfair Display', Georgia, serif;
--ff-sans: 'DM Sans', sans-serif;
--ff-num: 'Fraunces', 'Playfair Display', serif;
--ease: cubic-bezier(.4,0,.2,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--ff-sans); background: var(--cream); color: var(--ink); }
a { text-decoration: none; color: inherit; }
.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* HEADER */
.site-header {
background: var(--white); border-bottom: 1px solid var(--border);
padding: 0 40px; position: sticky; top: 0; z-index: 100;
}
.site-header-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; flex-direction: column; gap: 1px; }
.logo-name { font-family: var(--ff-serif); font-size: 26px; font-weight: 400; color: var(--ink); line-height: 1; }
.logo-sub { font-size: 9px; font-weight: 300; letter-spacing: .25em; text-transform: uppercase; color: var(--rose); line-height: 1; }
.header-secure { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 300; color: var(--bark); }
.header-secure svg { color: var(--green); }
/* CHECKOUT PROGRESS */
.checkout-progress { background: var(--white); border-bottom: 1px solid var(--border); padding: 0 40px; }
.progress-inner { max-width: 860px; margin: 0 auto; display: flex; align-items: center; }
.progress-step { flex: 1; display: flex; align-items: center; flex-direction: column; padding: 16px 0; position: relative; cursor: pointer; }
.progress-step:not(:last-child)::after {
content: ''; position: absolute;
top: 26px; left: 60%;
width: 80%; height: 1px;
background: var(--border);
}
.progress-step.done:not(:last-child)::after { background: var(--rose); }
.step-circle {
width: 32px; height: 32px; border-radius: 50%;
border: 1.5px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 500; color: var(--bark);
margin-bottom: 6px; background: var(--white);
transition: all .3s; z-index: 1;
}
.progress-step.active .step-circle { border-color: var(--rose); background: var(--rose); color: var(--white); }
.progress-step.done .step-circle { border-color: var(--rose); background: var(--rose); color: var(--white); }
.step-label { font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--bark); }
.progress-step.active .step-label { color: var(--rose); font-weight: 500; }
/* MAIN VIEW TOGGLE */
.view { display: none; }
.view.active { display: block; }
/* ─── CART VIEW ─── */
.cart-layout { max-width: 1320px; margin: 0 auto; padding: 48px 40px; display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
/* Cart Items */
.cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.cart-title { font-family: var(--ff-serif); font-size: 28px; font-weight: 300; color: var(--ink); }
.cart-count { font-size: 13px; font-weight: 300; color: var(--bark); }
.continue-link { font-size: 12px; font-weight: 400; color: var(--rose); display: flex; align-items: center; gap: 6px; }
.continue-link:hover { text-decoration: underline; }
.cart-items { display: flex; flex-direction: column; gap: 16px; }
.cart-item {
background: var(--white); border-radius: 4px;
padding: 20px; display: grid;
grid-template-columns: 96px 1fr auto;
gap: 20px; align-items: center;
transition: box-shadow .25s;
}
.cart-item:hover { box-shadow: var(--shadow); }
.cart-thumb {
width: 96px; height: 96px; border-radius: 3px;
background: linear-gradient(160deg, var(--blush), var(--nude));
display: flex; align-items: center; justify-content: center;
font-size: 44px; overflow: hidden; flex-shrink: 0;
}
.cart-item-info {}
.cart-item-cat { font-size: 10px; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; color: var(--rose); margin-bottom: 5px; }
.cart-item-name { font-family: var(--ff-serif); font-size: 18px; font-weight: 400; color: var(--ink); margin-bottom: 6px; }
.cart-item-meta { font-size: 12px; font-weight: 300; color: var(--bark); display: flex; gap: 12px; flex-wrap: wrap; }
.cart-item-meta span { display: flex; align-items: center; gap: 4px; }
.cart-item-note { font-size: 11px; font-weight: 300; font-style: italic; color: var(--rose); margin-top: 6px; }
.cart-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.cart-item-price { font-family: var(--ff-serif); font-size: 22px; font-weight: 400; color: var(--rose); }
font-family: var(--ff-num) !important;
.cart-item-old { font-size: 12px; color: var(--rose-light); text-decoration: line-through; }
.qty-ctrl { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 3px; }
.qty-btn { width: 32px; height: 32px; background: none; border: none; cursor: pointer; color: var(--rose); font-size: 16px; display: flex; align-items: center; justify-content: center; }
.qty-btn:hover { background: var(--blush); }
.qty-val { min-width: 36px; text-align: center; font-size: 14px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); line-height: 32px; }
.remove-btn { background: none; border: none; cursor: pointer; color: var(--rose-light); font-size: 11px; font-weight: 300; letter-spacing: .06em; text-transform: uppercase; padding: 0; font-family: var(--ff-sans); display: flex; align-items: center; gap: 4px; transition: color .2s; }
.remove-btn:hover { color: var(--rose); }
/* Coupon */
.coupon-section { background: var(--white); border-radius: 4px; padding: 20px; margin-top: 16px; }
.coupon-title { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.coupon-form { display: flex; gap: 10px; }
.coupon-input { flex: 1; padding: 11px 16px; border: 1.5px solid var(--border); border-radius: 3px; font-family: var(--ff-sans); font-size: 13px; color: var(--ink); outline: none; transition: border-color .2s; text-transform: uppercase; letter-spacing: .08em; }
.coupon-input:focus { border-color: var(--rose); }
.coupon-input::placeholder { text-transform: none; letter-spacing: 0; }
.coupon-btn { padding: 11px 20px; background: var(--rose); color: var(--white); border: none; border-radius: 3px; cursor: pointer; font-family: var(--ff-sans); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: background .25s; }
.coupon-btn:hover { background: var(--bark); }
.coupon-success { font-size: 12px; color: var(--green); margin-top: 10px; display: flex; align-items: center; gap: 6px; }
/* ORDER SUMMARY */
.order-summary { background: var(--white); border-radius: 4px; padding: 28px; position: sticky; top: 88px; }
.summary-title { font-family: var(--ff-serif); font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.summary-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.summary-row .key { font-weight: 300; color: var(--bark); }
.summary-row .val { font-weight: 400; color: var(--ink); }
.summary-row.discount .val { color: var(--green); font-weight: 500; }
.summary-row.delivery .val { color: var(--bark); }
.summary-divider { height: 1px; background: var(--border); margin: 8px 0; }
.summary-total { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 500; color: var(--ink); margin-bottom: 24px; }
.summary-total-price { font-family: var(--ff-serif); font-size: 28px; font-weight: 400; color: var(--rose); }
font-family: var(--ff-num) !important;
.btn-checkout { width: 100%; padding: 16px; background: var(--rose); color: var(--white); border: none; border-radius: 3px; cursor: pointer; font-family: var(--ff-sans); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .3s, transform .2s; margin-bottom: 12px; }
.btn-checkout:hover { background: var(--ink); transform: translateY(-1px); }
.payment-icons { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.pay-icon { height: 22px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 3px; font-size: 10px; font-weight: 600; color: var(--bark); letter-spacing: .04em; display: flex; align-items: center; justify-content: center; }
.summary-note { font-size: 11px; font-weight: 300; color: var(--bark); text-align: center; line-height: 1.7; margin-top: 12px; }
.summary-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.summary-feat { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 300; color: var(--bark); }
.summary-feat svg { color: var(--green); flex-shrink: 0; }
/* ─── CHECKOUT VIEW ─── */
.checkout-layout { max-width: 1140px; margin: 0 auto; padding: 48px 40px; display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.checkout-form-title { font-family: var(--ff-serif); font-size: 22px; font-weight: 300; color: var(--ink); margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }
.checkout-form-title span { width: 28px; height: 28px; background: var(--rose); color: var(--white); border-radius: 50%; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.form-section { background: var(--white); border-radius: 4px; padding: 28px; margin-bottom: 20px; }
.form-section-head { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-row.full { grid-template-columns: 1fr; }
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.form-input, .form-select, .form-textarea {
padding: 12px 14px;
border: 1.5px solid var(--border); border-radius: 3px;
background: var(--cream); font-family: var(--ff-sans); font-size: 13px; color: var(--ink);
outline: none; transition: border-color .2s, background .2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--rose); background: var(--white); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--rose-light); font-weight: 300; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B6F6A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; }
.form-textarea { resize: none; height: 80px; }
.form-hint { font-size: 11px; font-weight: 300; color: var(--bark); margin-top: 4px; }
.form-error { font-size: 11px; color: #D14; margin-top: 4px; display: none; }
/* Delivery date picker */
.date-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.date-opt { text-align: center; padding: 10px 8px; border: 1.5px solid var(--border); border-radius: 3px; cursor: pointer; transition: all .2s; }
.date-opt:hover { border-color: var(--rose-light); }
.date-opt.selected { border-color: var(--rose); background: var(--blush); }
.date-day { font-size: 10px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--bark); }
.date-num { font-family: var(--ff-serif); font-size: 22px; font-weight: 400; color: var(--ink); }
.date-opt.selected .date-day, .date-opt.selected .date-num { color: var(--rose); }
.time-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.time-opt { text-align: center; padding: 10px; border: 1.5px solid var(--border); border-radius: 3px; cursor: pointer; font-size: 12px; font-weight: 300; color: var(--bark); transition: all .2s; }
.time-opt:hover { border-color: var(--rose-light); }
.time-opt.selected { border-color: var(--rose); background: var(--blush); color: var(--rose); font-weight: 500; }
/* Payment Methods */
.payment-methods { display: flex; flex-direction: column; gap: 10px; }
.payment-method { border: 1.5px solid var(--border); border-radius: 3px; overflow: hidden; cursor: pointer; transition: border-color .2s; }
.payment-method.selected { border-color: var(--rose); }
.payment-method-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.method-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--rose-light); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.payment-method.selected .method-radio { border-color: var(--rose); background: var(--rose); }
.payment-method.selected .method-radio::after { content: ''; width: 7px; height: 7px; background: var(--white); border-radius: 50%; }
.method-label { font-size: 14px; font-weight: 400; color: var(--ink); }
.method-icons { display: flex; gap: 6px; margin-left: auto; }
.method-icon { height: 20px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 2px; font-size: 9px; font-weight: 700; color: var(--bark); display: flex; align-items: center; }
.payment-method-body { padding: 0 18px 18px; display: none; }
.payment-method.selected .payment-method-body { display: block; }
/* Card inputs */
.card-field { position: relative; }
.card-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--rose-light); }
/* Installments */
.installment-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.installment-opt { padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 3px; cursor: pointer; transition: all .2s; }
.installment-opt:hover { border-color: var(--rose-light); }
.installment-opt.selected { border-color: var(--rose); background: var(--blush); }
.inst-label { font-size: 11px; font-weight: 500; color: var(--ink); }
.inst-price { font-size: 12px; font-weight: 300; color: var(--bark); margin-top: 2px; }
.installment-opt.selected .inst-label { color: var(--rose); }
/* Agreement */
.agreement-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; cursor: pointer; }
.custom-check { width: 18px; height: 18px; border: 1.5px solid var(--rose-light); border-radius: 3px; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.agreement-row.checked .custom-check { background: var(--rose); border-color: var(--rose); }
.agreement-row.checked .custom-check::after { content: '✓'; font-size: 10px; color: var(--white); }
.agreement-text { font-size: 12px; font-weight: 300; color: var(--bark); line-height: 1.6; }
.agreement-text a { color: var(--rose); text-decoration: underline; }
/* Order summary in checkout */
.checkout-summary { background: var(--white); border-radius: 4px; padding: 28px; position: sticky; top: 88px; }
.checkout-summary-title { font-family: var(--ff-serif); font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.mini-cart-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.mini-cart-item { display: flex; gap: 12px; align-items: center; }
.mini-thumb { width: 54px; height: 54px; border-radius: 3px; background: linear-gradient(160deg, var(--blush), var(--nude)); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; position: relative; }
.mini-badge { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: var(--rose); color: var(--white); border-radius: 50%; font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.mini-info { flex: 1; }
.mini-name { font-size: 12px; font-weight: 400; color: var(--ink); }
.mini-meta { font-size: 11px; font-weight: 300; color: var(--bark); margin-top: 2px; }
.mini-price { font-family: var(--ff-serif); font-size: 16px; color: var(--rose); }
.btn-place-order { width: 100%; padding: 16px; background: var(--rose); color: var(--white); border: none; border-radius: 3px; cursor: pointer; font-family: var(--ff-sans); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .3s, transform .2s; margin-bottom: 12px; }
.btn-place-order:hover { background: var(--ink); transform: translateY(-1px); }
/* ─── SUCCESS VIEW ─── */
.success-view { max-width: 620px; margin: 80px auto; padding: 0 40px; text-align: center; }
.success-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--blush), var(--nude)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; font-size: 36px; }
.success-title { font-family: var(--ff-serif); font-size: 40px; font-weight: 300; color: var(--ink); margin-bottom: 14px; }
.success-title em { font-style: italic; color: var(--rose); }
.success-desc { font-size: 14px; font-weight: 300; line-height: 1.9; color: var(--bark); margin-bottom: 36px; }
.order-number-box { background: var(--white); border-radius: 4px; padding: 20px 28px; display: inline-block; margin-bottom: 36px; }
.order-number-label { font-size: 10px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--bark); margin-bottom: 4px; }
.order-number { font-family: var(--ff-serif); font-size: 28px; font-weight: 400; color: var(--rose); letter-spacing: .06em; }
.success-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }
.success-step { background: var(--white); border-radius: 4px; padding: 20px; text-align: center; }
.success-step-icon { font-size: 28px; margin-bottom: 10px; }
.success-step-title { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.success-step-desc { font-size: 11px; font-weight: 300; color: var(--bark); line-height: 1.6; }
.success-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-primary { padding: 14px 36px; background: var(--rose); color: var(--white); border: none; border-radius: 3px; cursor: pointer; font-family: var(--ff-sans); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transition: background .3s; display: inline-block; }
.btn-primary:hover { background: var(--ink); }
.btn-outline { padding: 14px 28px; background: transparent; color: var(--ink); border: 1.5px solid var(--border); border-radius: 3px; cursor: pointer; font-family: var(--ff-sans); font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; transition: border-color .3s, color .3s; display: inline-block; }
.btn-outline:hover { border-color: var(--rose); color: var(--rose); }
/* Footer */
footer { background: var(--ink); padding: 32px 40px; }
.footer-bottom { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 300; color: rgba(255,255,255,.3); }
.footer-logo { font-family: var(--ff-serif); font-size: 22px; color: rgba(255,255,255,.7); }
/* RESPONSIVE */
@media (max-width: 960px) { .cart-layout, .checkout-layout { grid-template-columns: 1fr; } .order-summary, .checkout-summary { position: static; } }
@media (max-width: 700px) { .cart-item { grid-template-columns: 72px 1fr; } .cart-item-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } .site-header { padding: 0 20px; } .cart-layout, .checkout-layout { padding: 24px 16px; } .date-options { grid-template-columns: repeat(2, 1fr); } .installment-opts { grid-template-columns: 1fr; } .success-steps { grid-template-columns: 1fr; } .progress-step .step-label { display: none; } }
/* ===== category.html ===== */
:root {
--rose: #a03138;
--rose-light: #d4896e;
--blush: #fdf0eb;
--cream: #ffffff;
--nude: #f0ddd3;
--bark: #5c3a2e;
--ink: #2E1F1F;
--white: #FFFFFF;
--border: rgba(201,114,122,.18);
--shadow: 0 8px 40px rgba(139,111,106,.12);
--ff-serif: 'Playfair Display', Georgia, serif;
--ff-sans: 'DM Sans', sans-serif;
--ff-num: 'Fraunces', 'Playfair Display', serif;
--ease: cubic-bezier(.4,0,.2,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--ff-sans); background: var(--cream); color: var(--ink); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* ── TOPBAR ── */
.topbar {
background: var(--rose); color: var(--white);
font-size: 12px; font-weight: 300; letter-spacing: .08em;
text-align: center; padding: 9px 20px;
display: flex; align-items: center; justify-content: center; gap: 24px;
}
/* ── HEADER ── */
header {
position: sticky; top: 0; z-index: 100;
background: rgba(251,247,245,.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
padding: 0 40px;
}
.header-inner {
max-width: 1320px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
height: 72px;
}
.logo { display: flex; flex-direction: column; gap: 1px; }
.logo-name { font-family: var(--ff-serif); font-size: 26px; font-weight: 400; color: var(--ink); letter-spacing: .02em; line-height: 1; }
.logo-sub { font-size: 9px; font-weight: 300; letter-spacing: .25em; text-transform: uppercase; color: var(--rose); line-height: 1; }
nav { display: flex; align-items: center; gap: 36px; }
nav a { font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--bark); transition: color .25s; }
nav a:hover, nav a.active { color: var(--rose); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-actions button, .header-actions a { background: none; border: none; cursor: pointer; color: var(--ink); display: flex; align-items: center; gap: 7px; font-family: var(--ff-sans); font-size: 13px; transition: color .25s; }
.header-actions button:hover, .header-actions a:hover { color: var(--rose); }
.cart-btn { background: var(--rose) !important; color: var(--white) !important; border-radius: 24px; padding: 9px 20px !important; font-size: 12px !important; letter-spacing: .06em; text-transform: uppercase; }
.cart-badge { background: var(--white); color: var(--rose); border-radius: 50%; width: 18px; height: 18px; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
/* ── BREADCRUMB ── */
.breadcrumb-wrap { background: var(--white); border-bottom: 1px solid var(--border); padding: 14px 40px; }
.breadcrumb { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 300; color: var(--bark); }
.breadcrumb a { color: var(--bark); transition: color .2s; }
.breadcrumb a:hover { color: var(--rose); }
.breadcrumb-sep { color: var(--rose-light); }
.breadcrumb-current { color: var(--ink); }
/* ── CATEGORY HERO ── */
.cat-hero {
background: linear-gradient(135deg, var(--blush) 0%, var(--nude) 100%);
padding: 64px 40px;
}
.cat-hero-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.cat-hero-text {}
.cat-hero-label { font-size: 10px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--rose); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.cat-hero-label::before { content: ''; display: block; width: 24px; height: 1px; background: var(--rose); }
.cat-hero-title { font-family: var(--ff-serif); font-size: clamp(40px, 4vw, 60px); font-weight: 300; color: var(--ink); line-height: 1.1; }
.cat-hero-title em { font-style: italic; color: var(--rose); }
.cat-hero-desc { font-size: 14px; font-weight: 300; color: var(--bark); line-height: 1.8; margin-top: 14px; max-width: 440px; }
.cat-hero-emoji { font-size: 120px; opacity: .6; }
/* ── SUB-CATS SCROLL ── */
.sub-cats-wrap { background: var(--white); border-bottom: 1px solid var(--border); padding: 0 40px; overflow-x: auto; scrollbar-width: none; }
.sub-cats-wrap::-webkit-scrollbar { display: none; }
.sub-cats { max-width: 1320px; margin: 0 auto; display: flex; gap: 0; }
.sub-cat-btn {
flex-shrink: 0; padding: 18px 24px;
font-family: var(--ff-sans); font-size: 13px; font-weight: 400;
letter-spacing: .04em; color: var(--bark);
background: none; border: none; border-bottom: 2px solid transparent;
cursor: pointer; white-space: nowrap;
transition: color .25s, border-color .25s;
}
.sub-cat-btn:hover { color: var(--rose); }
.sub-cat-btn.active { color: var(--rose); border-bottom-color: var(--rose); font-weight: 500; }
/* ── LAYOUT ── */
.shop-layout { max-width: 1320px; margin: 0 auto; padding: 48px 40px; display: grid; grid-template-columns: 260px 1fr; gap: 48px; }
/* ── SIDEBAR ── */
.sidebar {}
.sidebar-section { margin-bottom: 36px; }
.sidebar-title { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.filter-list { display: flex; flex-direction: column; gap: 10px; }
.filter-item { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.filter-check { width: 16px; height: 16px; border: 1.5px solid var(--rose-light); border-radius: 3px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; }
.filter-item.checked .filter-check { background: var(--rose); border-color: var(--rose); }
.filter-item.checked .filter-check::after { content: '✓'; font-size: 9px; color: var(--white); }
.filter-label { font-size: 13px; font-weight: 300; color: var(--bark); transition: color .2s; }
.filter-item:hover .filter-label { color: var(--rose); }
.filter-item.checked .filter-label { color: var(--ink); font-weight: 400; }
.filter-count { font-size: 11px; color: var(--rose-light); margin-left: auto; }
/* Price Range */
.price-range { margin-top: 8px; }
.price-inputs { display: flex; gap: 10px; align-items: center; }
.price-inp {
flex: 1; padding: 9px 12px;
border: 1px solid var(--border); border-radius: 3px;
background: var(--white); font-family: var(--ff-sans); font-size: 13px;
color: var(--ink); outline: none;
transition: border-color .2s;
}
.price-inp:focus { border-color: var(--rose); }
.price-sep { color: var(--bark); font-size: 12px; }
.range-slider { margin-top: 14px; }
input[type=range] { width: 100%; accent-color: var(--rose); height: 3px; }
/* Colors */
.color-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.color-sw { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .2s, border-color .2s; }
.color-sw:hover { transform: scale(1.15); }
.color-sw.active { border-color: var(--rose); }
.btn-filter-apply {
width: 100%; padding: 12px;
background: var(--rose); color: var(--white);
border: none; border-radius: 3px; cursor: pointer;
font-family: var(--ff-sans); font-size: 12px; font-weight: 500;
letter-spacing: .08em; text-transform: uppercase;
margin-top: 8px;
transition: background .25s;
}
.btn-filter-apply:hover { background: var(--bark); }
.btn-filter-clear { width: 100%; padding: 10px; background: none; color: var(--bark); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; font-family: var(--ff-sans); font-size: 12px; margin-top: 8px; transition: border-color .2s, color .2s; }
.btn-filter-clear:hover { border-color: var(--rose); color: var(--rose); }
/* ── PRODUCTS AREA ── */
.products-area {}
.products-toolbar {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.result-count { font-size: 13px; font-weight: 300; color: var(--bark); }
.result-count strong { color: var(--ink); font-weight: 500; }
.toolbar-right { display: flex; align-items: center; gap: 16px; }
.sort-select {
padding: 9px 14px; border: 1px solid var(--border); border-radius: 3px;
background: var(--white); font-family: var(--ff-sans); font-size: 13px;
color: var(--ink); cursor: pointer; outline: none;
appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B6F6A' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px;
transition: border-color .2s;
}
.sort-select:focus { border-color: var(--rose); }
.view-toggle { display: flex; gap: 4px; }
.view-btn { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 3px; background: none; cursor: pointer; color: var(--bark); display: flex; align-items: center; justify-content: center; transition: all .2s; }
.view-btn.active, .view-btn:hover { background: var(--rose); border-color: var(--rose); color: var(--white); }
/* Active Filters */
.active-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-tag {
display: flex; align-items: center; gap: 6px;
padding: 5px 12px; background: var(--blush);
border-radius: 20px; font-size: 11px; font-weight: 400; color: var(--rose);
}
.filter-tag button { background: none; border: none; cursor: pointer; color: var(--rose); display: flex; font-size: 14px; line-height: 1; padding: 0; }
.clear-all { font-size: 11px; font-weight: 400; color: var(--bark); text-decoration: underline; cursor: pointer; margin-left: 4px; }
/* Products Grid */
.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.product-card {
background: var(--white);
border-radius: 4px; overflow: hidden;
cursor: pointer;
transition: box-shadow .3s var(--ease), transform .3s;
position: relative;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.product-thumb {
aspect-ratio: 4/5; overflow: hidden; position: relative;
background: var(--blush);
}
.product-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 72px; background: linear-gradient(160deg, var(--blush) 0%, var(--nude) 100%); }
.product-badge { position: absolute; top: 12px; left: 12px; background: var(--rose); color: var(--white); font-size: 10px; font-weight: 500; letter-spacing: .06em; padding: 3px 9px; border-radius: 2px; text-transform: uppercase; }
.product-badge.new { background: var(--bark); }
.product-badge.best { background: #7A9C72; }
.product-wishlist { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s; border: none; cursor: pointer; color: var(--rose); }
.product-card:hover .product-wishlist { opacity: 1; transform: scale(1); }
.product-quick-add { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(201,114,122,.92); color: var(--white); text-align: center; padding: 13px; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transform: translateY(100%); transition: transform .3s var(--ease); cursor: pointer; border: none; font-family: var(--ff-sans); }
.product-card:hover .product-quick-add { transform: translateY(0); }
.product-info { padding: 18px; }
.product-cat { font-size: 10px; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; color: var(--rose); margin-bottom: 5px; }
.product-name { font-family: var(--ff-serif); font-size: 17px; font-weight: 400; color: var(--ink); line-height: 1.3; margin-bottom: 8px; }
.product-desc { font-size: 12px; font-weight: 300; color: var(--bark); line-height: 1.6; }
.product-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.product-price { font-family: var(--ff-serif); font-size: 20px; font-weight: 400; color: var(--rose); }
font-family: var(--ff-num) !important;
.product-old { font-size: 12px; color: var(--rose-light); text-decoration: line-through; margin-left: 6px; }
.product-rating { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--bark); }
.product-rating .stars { color: #E8A838; letter-spacing: 1px; }
.add-cart-btn { width: 34px; height: 34px; background: var(--blush); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--rose); transition: background .25s, transform .2s; }
.add-cart-btn:hover { background: var(--rose); color: var(--white); transform: scale(1.1); }
/* List View */
.products-grid.list-view { grid-template-columns: 1fr; gap: 16px; }
.products-grid.list-view .product-card { display: grid; grid-template-columns: 200px 1fr; }
.products-grid.list-view .product-thumb { aspect-ratio: auto; height: 200px; }
.products-grid.list-view .product-info { padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.products-grid.list-view .product-desc { display: block; }
/* ── PAGINATION ── */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }
.page-btn { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 3px; background: var(--white); cursor: pointer; font-family: var(--ff-sans); font-size: 13px; color: var(--bark); display: flex; align-items: center; justify-content: center; transition: all .2s; }
.page-btn:hover { border-color: var(--rose); color: var(--rose); }
.page-btn.active { background: var(--rose); border-color: var(--rose); color: var(--white); }
.page-btn:disabled { opacity: .4; cursor: default; }
.page-dots { color: var(--rose-light); font-size: 16px; padding: 0 4px; }
/* ── FOOTER ── */
footer { background: var(--ink); padding: 60px 40px 36px; }
.footer-bottom { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 300; color: rgba(255,255,255,.3); }
.footer-logo { font-family: var(--ff-serif); font-size: 22px; color: rgba(255,255,255,.7); }
/* ── RESPONSIVE ── */
@media (max-width: 1060px) { .shop-layout { grid-template-columns: 1fr; } .sidebar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (max-width: 860px) { header { padding: 0 20px; } nav { display: none; } .products-grid { grid-template-columns: repeat(2, 1fr); } .shop-layout { padding: 32px 20px; } }
@media (max-width: 500px) { .products-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
/* ===== contact.html ===== */
:root{--rose:#a03138;--rose-light:#d4896e;--blush:#fdf0eb;--nude:#f0ddd3;--bark:#5c3a2e;--ink:#1a0f0a;--white:#ffffff;--gray-50:#fafafa;--border:rgba(160,49,8,.14);--shadow:0 8px 40px rgba(92,58,46,.12);--green:#5a7a4e;--ff-serif:'Playfair Display',Georgia,serif;--ff-sans:'DM Sans',sans-serif;--ff-num:'Fraunces','Playfair Display',serif;--ease:cubic-bezier(.4,0,.2,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff-sans);background:var(--white);color:var(--ink)}
a{text-decoration:none;color:inherit}
.icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.topbar{background:var(--rose);color:var(--white);font-size:12px;font-weight:300;letter-spacing:.08em;text-align:center;padding:9px 20px;display:flex;align-items:center;justify-content:center;gap:24px}
header{background:var(--white);border-bottom:1px solid var(--border);padding:0 40px;position:sticky;top:0;z-index:100}
.header-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px}
nav{display:flex;gap:32px}
nav a{font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--bark);transition:color .2s;position:relative;padding-bottom:3px}
nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--rose);transition:width .3s}
nav a:hover,nav a.active{color:var(--rose)}
nav a.active::after,nav a:hover::after{width:100%}
.header-actions{display:flex;align-items:center;gap:16px}
.header-actions a,.header-actions button{background:none;border:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:6px;font-family:var(--ff-sans);font-size:13px;transition:color .2s}
.cart-btn{background:var(--rose)!important;color:var(--white)!important;border-radius:20px;padding:8px 18px!important;font-size:12px!important;letter-spacing:.06em;text-transform:uppercase}
.cart-badge{background:var(--white);color:var(--rose);border-radius:50%;width:17px;height:17px;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
/* PAGE HERO */
.page-hero{background:linear-gradient(135deg,var(--blush) 0%,var(--nude) 100%);padding:80px 40px;text-align:center}
.hero-tag{font-size:10px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--rose);margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:10px}
.hero-tag::before,.hero-tag::after{content:'';display:block;width:24px;height:1px;background:var(--rose)}
.page-hero-title{font-family:var(--ff-serif);font-size:clamp(40px,4.5vw,64px);font-weight:400;color:var(--ink);line-height:1.15;margin-bottom:14px}
.page-hero-title em{font-style:italic;color:var(--rose)}
.page-hero-desc{font-size:14px;font-weight:300;color:var(--bark);max-width:500px;margin:0 auto;line-height:1.8}
/* CONTACT INFO CARDS */
.info-cards-wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.info-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:-40px;margin-bottom:0;position:relative;z-index:10}
.info-card{background:var(--white);border-radius:8px;padding:28px 22px;box-shadow:var(--shadow);text-align:center;transition:transform .3s,box-shadow .3s}
.info-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(92,58,46,.16)}
.info-card-icon{width:56px;height:56px;border-radius:50%;background:var(--blush);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--rose)}
.info-card-title{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:8px}
.info-card-val{font-size:13px;font-weight:300;color:var(--bark);line-height:1.7}
.info-card-val a{color:var(--rose);transition:opacity .2s}
.info-card-val a:hover{opacity:.7}
/* MAP + FORM */
.contact-layout{max-width:1320px;margin:0 auto;padding:64px 40px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
/* Map */
.map-section{}
.map-title{font-family:var(--ff-serif);font-size:28px;font-weight:400;color:var(--ink);margin-bottom:6px}
.map-title em{font-style:italic;color:var(--rose)}
.map-sub{font-size:13px;font-weight:300;color:var(--bark);margin-bottom:24px;line-height:1.7}
.map-container{width:100%;height:380px;border-radius:8px;overflow:hidden;position:relative;background:var(--blush)}
.map-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--blush) 0%,var(--nude) 100%);gap:16px}
.map-placeholder-pin{font-size:48px}
.map-placeholder-text{font-family:var(--ff-serif);font-size:18px;color:var(--bark);font-style:italic}
.map-placeholder-addr{font-size:13px;font-weight:300;color:var(--bark);text-align:center;line-height:1.7}
/* Real map iframe */
.map-container iframe{width:100%;height:100%;border:none;filter:sepia(.2) saturate(.8)}
.map-directions{display:flex;gap:10px;margin-top:16px}
.dir-btn{flex:1;padding:11px;border:1.5px solid var(--border);border-radius:4px;background:none;cursor:pointer;font-family:var(--ff-sans);font-size:12px;color:var(--bark);display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}
.dir-btn:hover,.dir-btn.primary{border-color:var(--rose);color:var(--rose);background:var(--blush)}
.dir-btn.primary{background:var(--rose);color:var(--white)}
.dir-btn.primary:hover{background:var(--bark)}
/* Working hours */
.hours-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:20px}
.hours-row{display:flex;justify-content:space-between;padding:8px 12px;background:var(--blush);border-radius:4px;font-size:12px}
.hours-day{font-weight:400;color:var(--bark)}
.hours-time{font-weight:400;color:var(--ink)}
.hours-row.today{background:var(--rose);color:var(--white)}
.hours-row.today .hours-day,.hours-row.today .hours-time{color:var(--white)}
.hours-closed{color:var(--rose-light)!important}
/* Form */
.form-section{}
.form-title{font-family:var(--ff-serif);font-size:28px;font-weight:400;color:var(--ink);margin-bottom:6px}
.form-title em{font-style:italic;color:var(--rose)}
.form-sub{font-size:13px;font-weight:300;color:var(--bark);margin-bottom:28px;line-height:1.7}
.contact-form{}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-row.full{grid-template-columns:1fr}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.form-input,.form-select,.form-textarea{padding:12px 14px;border:1.5px solid var(--border);border-radius:4px;background:var(--gray-50);font-family:var(--ff-sans);font-size:13px;color:var(--ink);outline:none;transition:border-color .2s,background .2s;width:100%}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--rose);background:var(--white)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--rose-light);font-weight:300}
.form-textarea{resize:none;height:120px}
/* Subject chips */
.subject-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.subject-chip{padding:7px 14px;border:1.5px solid var(--border);border-radius:20px;background:none;cursor:pointer;font-family:var(--ff-sans);font-size:11px;font-weight:400;color:var(--bark);transition:all .2s}
.subject-chip:hover{border-color:var(--rose-light);color:var(--rose)}
.subject-chip.active{border-color:var(--rose);background:var(--blush);color:var(--rose);font-weight:500}
.btn-send{width:100%;padding:15px;background:var(--rose);color:var(--white);border:none;border-radius:4px;cursor:pointer;font-family:var(--ff-sans);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .3s,transform .2s;margin-top:6px}
.btn-send:hover{background:var(--ink);transform:translateY(-1px)}
/* Social contact */
.social-contact{display:flex;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.social-contact-btn{flex:1;padding:12px;border:1.5px solid var(--border);border-radius:4px;background:none;cursor:pointer;font-family:var(--ff-sans);font-size:12px;color:var(--bark);display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}
.social-contact-btn:hover{border-color:var(--rose-light);background:var(--blush);color:var(--rose)}
/* FAQ */
.faq-section{background:var(--blush);padding:80px 40px}
.faq-inner{max-width:800px;margin:0 auto}
.faq-title{font-family:var(--ff-serif);font-size:clamp(28px,3vw,42px);font-weight:400;color:var(--ink);text-align:center;margin-bottom:6px}
.faq-title em{font-style:italic;color:var(--rose)}
.faq-sub{font-size:13px;font-weight:300;color:var(--bark);text-align:center;margin-bottom:40px}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--white);border-radius:6px;overflow:hidden}
.faq-question{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;cursor:pointer;font-size:14px;font-weight:400;color:var(--ink);transition:color .2s}
.faq-question:hover{color:var(--rose)}
.faq-icon{width:22px;height:22px;border-radius:50%;background:var(--blush);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--rose);font-size:16px;transition:transform .3s,background .3s}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--rose);color:var(--white)}
.faq-answer{font-size:13px;font-weight:300;color:var(--bark);line-height:1.8;padding:0 22px;max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .3s}
.faq-item.open .faq-answer{max-height:200px;padding-bottom:18px}
/* Footer */
footer{background:var(--ink);padding:40px}
.footer-bottom{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:300;color:rgba(255,255,255,.3)}
@media(max-width:960px){.contact-layout{grid-template-columns:1fr}.info-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){header{padding:0 20px}nav{display:none}.contact-layout{padding:40px 20px}.page-hero{padding:60px 20px}.faq-section{padding:60px 20px}.info-cards{grid-template-columns:1fr 1fr}.form-row{grid-template-columns:1fr}}
/* ===== index.html ===== */
:root {
--rose: #a03138;
--rose-light: #d4896e;
--blush: #fdf0eb;
--cream: #ffffff;
--nude: #f0ddd3;
--bark: #5c3a2e;
--ink: #2E1F1F;
--white: #FFFFFF;
--border: rgba(201,114,122,.18);
--shadow: 0 8px 40px rgba(139,111,106,.12);
--ff-serif: 'Playfair Display', Georgia, serif;
--ff-sans: 'DM Sans', sans-serif;
--ff-num: 'Fraunces', 'Playfair Display', serif;
--ease: cubic-bezier(.4,0,.2,1);
--ease-out: cubic-bezier(0,.55,.45,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--ff-sans); background: var(--cream); color: var(--ink); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
/* ── TOPBAR ── */
.topbar {
background: var(--rose);
color: var(--white);
font-size: 12px;
font-weight: 300;
letter-spacing: .08em;
text-align: center;
padding: 9px 20px;
display: flex; align-items: center; justify-content: center; gap: 24px;
}
.topbar span { opacity: .9; }
.topbar strong { font-weight: 500; }
/* ── HEADER ── */
header {
position: sticky; top: 0; z-index: 100;
background: rgba(251,247,245,.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
padding: 0 40px;
}
.header-inner {
max-width: 1320px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
height: 72px;
}
.logo { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.logo-name {
font-family: var(--ff-serif);
font-size: 26px; font-weight: 400;
color: var(--ink); letter-spacing: .02em;
line-height: 1;
}
.logo-sub {
font-family: var(--ff-sans);
font-size: 9px; font-weight: 300;
letter-spacing: .25em; text-transform: uppercase;
color: var(--rose); line-height: 1;
}
nav { display: flex; align-items: center; gap: 36px; }
nav a {
font-size: 13px; font-weight: 400; letter-spacing: .06em;
text-transform: uppercase; color: var(--bark);
position: relative; padding-bottom: 3px;
transition: color .25s var(--ease);
}
nav a::after {
content: ''; position: absolute; bottom: 0; left: 0;
width: 0; height: 1px; background: var(--rose);
transition: width .3s var(--ease);
}
nav a:hover { color: var(--rose); }
nav a:hover::after { width: 100%; }
nav a.active { color: var(--rose); }
nav a.active::after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-actions button, .header-actions a {
background: none; border: none; cursor: pointer;
color: var(--ink); display: flex; align-items: center; gap: 7px;
font-family: var(--ff-sans); font-size: 13px;
transition: color .25s;
}
.header-actions button:hover, .header-actions a:hover { color: var(--rose); }
.cart-btn {
background: var(--rose) !important;
color: var(--white) !important;
border-radius: 24px;
padding: 9px 20px !important;
font-size: 12px !important;
letter-spacing: .06em;
text-transform: uppercase;
transition: background .25s, transform .2s !important;
}
.cart-btn:hover { background: var(--bark) !important; transform: translateY(-1px); }
.cart-badge {
background: var(--white); color: var(--rose);
border-radius: 50%; width: 18px; height: 18px;
font-size: 10px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* ── HERO ── */
.hero {
min-height: calc(100vh - 105px);
display: grid; grid-template-columns: 1fr 1fr;
overflow: hidden;
}
.hero-content {
display: flex; flex-direction: column; justify-content: center;
padding: 80px 80px 80px 120px;
background: var(--cream);
position: relative;
}
.hero-content::before {
content: '';
position: absolute; top: 60px; left: 80px;
width: 180px; height: 180px;
background: radial-gradient(circle, var(--nude) 0%, transparent 70%);
border-radius: 50%; opacity: .5;
}
.hero-tag {
font-size: 11px; font-weight: 400; letter-spacing: .22em;
text-transform: uppercase; color: var(--rose);
margin-bottom: 28px;
display: flex; align-items: center; gap: 12px;
}
.hero-tag::before {
content: ''; display: block;
width: 32px; height: 1px; background: var(--rose);
}
.hero-title {
font-family: var(--ff-serif);
font-size: clamp(52px, 5.5vw, 84px);
font-weight: 300; line-height: 1.08;
letter-spacing: -.01em;
color: var(--ink);
margin-bottom: 24px;
}
.hero-title em { font-style: italic; color: var(--rose); }
.hero-desc {
font-size: 15px; font-weight: 300; line-height: 1.8;
color: var(--bark); max-width: 400px; margin-bottom: 48px;
}
.hero-cta { display: flex; align-items: center; gap: 20px; }
.btn-primary {
background: var(--rose); color: var(--white);
border: none; cursor: pointer;
padding: 15px 40px;
font-family: var(--ff-sans);
font-size: 12px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
border-radius: 2px;
transition: background .3s var(--ease), transform .2s;
display: inline-block;
}
.btn-primary:hover { background: var(--ink); transform: translateY(-2px); }
.btn-outline {
background: transparent; color: var(--ink);
border: 1px solid var(--border);
padding: 15px 32px;
font-family: var(--ff-sans);
font-size: 12px; font-weight: 400;
letter-spacing: .1em; text-transform: uppercase;
border-radius: 2px; cursor: pointer;
transition: border-color .3s, color .3s;
display: inline-block;
}
.btn-outline:hover { border-color: var(--rose); color: var(--rose); }
.hero-stats {
display: flex; gap: 40px; margin-top: 64px;
padding-top: 40px; border-top: 1px solid var(--border);
}
.stat-num {
font-family: var(--ff-num) !important;
font-family: var(--ff-serif);
font-size: 32px; font-weight: 400; color: var(--rose);
}
.stat-label {
font-size: 11px; font-weight: 300; letter-spacing: .1em;
text-transform: uppercase; color: var(--bark); margin-top: 4px;
}
.hero-visual {
position: relative; overflow: hidden;
background: linear-gradient(160deg, var(--blush) 0%, var(--nude) 100%);
}
.hero-img-grid {
display: grid; grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
height: 100%; gap: 3px;
}
.hero-img-cell {
overflow: hidden; position: relative;
background: var(--nude);
}
.hero-img-cell img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .6s var(--ease);
}
.hero-img-cell:hover img { transform: scale(1.04); }
.hero-img-cell:first-child { grid-row: 1 / 3; }
.hero-badge {
position: absolute; bottom: 30px; right: 30px;
background: var(--white); border-radius: 4px;
padding: 16px 20px;
box-shadow: var(--shadow);
z-index: 2;
}
.hero-badge-text {
font-family: var(--ff-serif);
font-size: 13px; font-style: italic; color: var(--bark);
}
.hero-badge-num {
font-family: var(--ff-num) !important;
font-family: var(--ff-serif);
font-size: 28px; font-weight: 400; color: var(--rose);
line-height: 1;
}
/* ── MARQUEE ── */
.marquee-wrap {
background: var(--rose); overflow: hidden;
padding: 14px 0; border: none;
}
.marquee-track {
display: flex; gap: 0;
animation: marquee 22s linear infinite;
white-space: nowrap;
}
.marquee-item {
display: inline-flex; align-items: center; gap: 16px;
padding: 0 32px;
font-size: 11px; font-weight: 400; letter-spacing: .18em;
text-transform: uppercase; color: rgba(255,255,255,.9);
}
.marquee-dot { width: 4px; height: 4px; background: rgba(255,255,255,.5); border-radius: 50%; flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ── SECTION HEADER ── */
.section { padding: 100px 40px; max-width: 1320px; margin: 0 auto; }
.sec-label {
font-size: 10px; font-weight: 400; letter-spacing: .28em;
text-transform: uppercase; color: var(--rose);
margin-bottom: 16px;
display: flex; align-items: center; gap: 12px;
}
.sec-label::before { content: ''; display: block; width: 24px; height: 1px; background: var(--rose); }
.sec-title {
font-family: var(--ff-serif);
font-size: clamp(36px, 3.5vw, 54px);
font-weight: 300; line-height: 1.15;
color: var(--ink);
}
.sec-title em { font-style: italic; color: var(--rose); }
.sec-desc {
font-size: 14px; font-weight: 300; line-height: 1.9;
color: var(--bark); max-width: 480px; margin-top: 16px;
}
.sec-head-row {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 56px;
}
/* ── CATEGORIES ── */
.cats-section { background: var(--white); padding: 100px 40px; }
.cats-inner { max-width: 1320px; margin: 0 auto; }
.cats-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
margin-top: 56px;
}
.cat-card {
background: var(--blush);
border-radius: 4px;
overflow: hidden;
cursor: pointer;
transition: transform .3s var(--ease), box-shadow .3s;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cat-thumb {
aspect-ratio: 3/4;
overflow: hidden;
background: var(--nude);
position: relative;
}
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.cat-card:hover .cat-thumb img { transform: scale(1.06); }
.cat-img-ph {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 48px;
background: linear-gradient(160deg, var(--blush), var(--nude));
}
.cat-info { padding: 16px 14px; }
.cat-name {
font-family: var(--ff-serif);
font-size: 16px; font-weight: 400; color: var(--ink);
}
.cat-count { font-size: 11px; font-weight: 300; color: var(--bark); margin-top: 3px; }
/* ── FEATURED PRODUCTS ── */
.products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.product-card {
background: var(--white);
border-radius: 4px; overflow: hidden;
cursor: pointer;
transition: box-shadow .3s var(--ease), transform .3s;
position: relative;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.product-thumb {
aspect-ratio: 4/5;
overflow: hidden; position: relative;
background: var(--blush);
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.product-card:hover .product-thumb img { transform: scale(1.05); }
.product-ph {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 64px;
background: linear-gradient(160deg, var(--blush) 0%, var(--nude) 100%);
}
.product-badge {
position: absolute; top: 14px; left: 14px;
background: var(--rose); color: var(--white);
font-size: 10px; font-weight: 500; letter-spacing: .08em;
padding: 4px 10px; border-radius: 2px; text-transform: uppercase;
}
.product-badge.new { background: var(--bark); }
.product-wishlist {
position: absolute; top: 14px; right: 14px;
width: 36px; height: 36px;
background: var(--white); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
opacity: 0; transform: scale(.8);
transition: opacity .25s, transform .25s;
border: none; cursor: pointer; color: var(--rose);
}
.product-card:hover .product-wishlist { opacity: 1; transform: scale(1); }
.product-info { padding: 20px; }
.product-cat { font-size: 10px; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; color: var(--rose); margin-bottom: 6px; }
.product-name { font-family: var(--ff-serif); font-size: 18px; font-weight: 400; color: var(--ink); line-height: 1.3; margin-bottom: 10px; }
.product-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.product-price { font-family: var(--ff-serif); font-size: 20px; font-weight: 400; color: var(--rose); }
font-family: var(--ff-num) !important;
.product-old { font-size: 13px; color: var(--rose-light); text-decoration: line-through; margin-left: 6px; }
.add-cart-btn {
width: 34px; height: 34px;
background: var(--blush); border: none; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--rose);
transition: background .25s, color .25s, transform .2s;
}
.add-cart-btn:hover { background: var(--rose); color: var(--white); transform: scale(1.1); }
/* ── PROMO BANNER ── */
.promo-section { background: var(--blush); padding: 100px 40px; }
.promo-inner { max-width: 1320px; margin: 0 auto; }
.promo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 6px; overflow: hidden; }
.promo-card {
padding: 64px;
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--nude) 0%, var(--blush) 100%);
min-height: 340px;
display: flex; flex-direction: column; justify-content: flex-end;
cursor: pointer;
transition: opacity .3s;
}
.promo-card:hover { opacity: .92; }
.promo-card:first-child { background: linear-gradient(135deg, var(--rose) 0%, var(--bark) 100%); }
.promo-card:first-child .promo-label,
.promo-card:first-child .promo-title,
.promo-card:first-child .promo-desc,
.promo-card:first-child .promo-link { color: var(--white); }
.promo-card:first-child .promo-link::after { background: var(--white); }
.promo-bg {
position: absolute; top: 0; right: 0; bottom: 0;
width: 55%; font-size: 160px;
display: flex; align-items: center; justify-content: flex-end;
padding-right: 40px; opacity: .15;
pointer-events: none;
}
.promo-label {
font-size: 10px; font-weight: 400; letter-spacing: .22em;
text-transform: uppercase; color: var(--rose); margin-bottom: 14px;
}
.promo-title {
font-family: var(--ff-serif);
font-size: 38px; font-weight: 300; line-height: 1.2;
color: var(--ink); margin-bottom: 14px;
}
.promo-desc { font-size: 14px; font-weight: 300; color: var(--bark); line-height: 1.7; margin-bottom: 28px; }
.promo-link {
font-size: 12px; font-weight: 500; letter-spacing: .1em;
text-transform: uppercase; color: var(--rose);
display: inline-flex; align-items: center; gap: 10px;
position: relative;
}
.promo-link::after {
content: ''; display: block;
width: 24px; height: 1px; background: var(--rose);
transition: width .3s;
}
.promo-card:hover .promo-link::after { width: 40px; }
/* ── WHY US ── */
.why-section { background: var(--cream); padding: 100px 40px; }
.why-inner { max-width: 1320px; margin: 0 auto; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 64px; }
.why-card { text-align: center; padding: 40px 24px; }
.why-icon {
width: 64px; height: 64px; margin: 0 auto 24px;
background: var(--blush); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--rose);
}
.why-title { font-family: var(--ff-serif); font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 12px; }
.why-desc { font-size: 13px; font-weight: 300; line-height: 1.8; color: var(--bark); }
/* ── TESTIMONIALS ── */
.testi-section { background: var(--white); padding: 100px 40px; }
.testi-inner { max-width: 1320px; margin: 0 auto; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.testi-card {
background: var(--blush); border-radius: 4px;
padding: 36px; position: relative;
}
.testi-quote {
font-family: var(--ff-serif);
font-size: 64px; line-height: .8;
color: var(--rose-light);
position: absolute; top: 20px; right: 28px;
}
.testi-text {
font-family: var(--ff-serif);
font-size: 17px; font-style: italic; font-weight: 300;
line-height: 1.75; color: var(--ink); margin-bottom: 28px;
}
.testi-author { display: flex; align-items: center; gap: 14px; }
.testi-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: var(--nude); overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
}
.testi-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.testi-loc { font-size: 11px; font-weight: 300; color: var(--bark); margin-top: 2px; }
.stars { color: var(--rose); font-size: 12px; letter-spacing: 2px; margin-bottom: 16px; }
/* ── NEWSLETTER ── */
.newsletter-section {
background: linear-gradient(135deg, var(--rose) 0%, var(--bark) 100%);
padding: 80px 40px; text-align: center;
}
.newsletter-inner { max-width: 560px; margin: 0 auto; }
.newsletter-title {
font-family: var(--ff-serif);
font-size: 44px; font-weight: 300; line-height: 1.2;
color: var(--white); margin-bottom: 14px;
}
.newsletter-desc { font-size: 14px; font-weight: 300; color: rgba(255,255,255,.8); margin-bottom: 36px; }
.newsletter-form { display: flex; gap: 0; max-width: 440px; margin: 0 auto; }
.newsletter-input {
flex: 1; padding: 15px 20px;
border: 1px solid rgba(255,255,255,.3);
border-right: none;
background: rgba(255,255,255,.15);
color: var(--white); font-family: var(--ff-sans); font-size: 13px;
border-radius: 2px 0 0 2px;
outline: none;
}
.newsletter-input::placeholder { color: rgba(255,255,255,.6); }
.newsletter-btn {
background: var(--white); color: var(--rose);
border: none; cursor: pointer;
padding: 15px 28px;
font-family: var(--ff-sans); font-size: 12px; font-weight: 500;
letter-spacing: .08em; text-transform: uppercase;
border-radius: 0 2px 2px 0;
transition: background .25s;
}
.newsletter-btn:hover { background: var(--cream); }
/* ── FOOTER ── */
footer {
background: var(--ink);
padding: 80px 40px 40px;
}
.footer-inner { max-width: 1320px; margin: 0 auto; }
.footer-grid {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px; padding-bottom: 60px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand .logo-name { color: var(--white); font-size: 28px; }
.footer-brand .logo-sub { color: var(--rose-light); }
.footer-desc {
font-size: 13px; font-weight: 300; line-height: 1.8;
color: rgba(255,255,255,.5); margin-top: 20px; max-width: 280px;
}
.footer-social { display: flex; gap: 12px; margin-top: 28px; }
.social-btn {
width: 36px; height: 36px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.5);
transition: border-color .25s, color .25s, background .25s;
font-size: 13px;
}
.social-btn:hover { border-color: var(--rose); color: var(--rose); }
.footer-col h4 {
font-size: 11px; font-weight: 500; letter-spacing: .18em;
text-transform: uppercase; color: var(--white);
margin-bottom: 24px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul li a {
font-size: 13px; font-weight: 300; color: rgba(255,255,255,.5);
transition: color .25s;
}
.footer-col ul li a:hover { color: var(--rose-light); }
.footer-bottom {
display: flex; align-items: center; justify-content: space-between;
padding-top: 36px;
font-size: 12px; font-weight: 300; color: rgba(255,255,255,.3);
}
/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.hero-tag { animation: fadeUp .6s var(--ease-out) .1s both; }
.hero-title { animation: fadeUp .7s var(--ease-out) .2s both; }
.hero-desc { animation: fadeUp .7s var(--ease-out) .35s both; }
.hero-cta { animation: fadeUp .7s var(--ease-out) .45s both; }
.hero-stats { animation: fadeUp .7s var(--ease-out) .55s both; }
/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
.cats-grid { grid-template-columns: repeat(3, 1fr); }
.products-grid { grid-template-columns: repeat(3, 1fr); }
.why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
header { padding: 0 20px; }
.header-inner { height: 60px; }
nav { display: none; }
.hero { grid-template-columns: 1fr; min-height: auto; }
.hero-content { padding: 60px 24px; }
.hero-visual { min-height: 400px; }
.section { padding: 60px 20px; }
.cats-section, .promo-section, .why-section, .testi-section { padding: 60px 20px; }
.promo-grid { grid-template-columns: 1fr; }
.cats-grid { grid-template-columns: repeat(2, 1fr); }
.products-grid { grid-template-columns: repeat(2, 1fr); }
.testi-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
.sec-head-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 540px) {
.products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.why-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.newsletter-form { flex-direction: column; }
.newsletter-input { border-right: 1px solid rgba(255,255,255,.3); border-radius: 2px; border-bottom: none; }
.newsletter-btn { border-radius: 2px; }
}
/* ===== login.html ===== */
:root {
--rose:#a03138; --rose-light:#d4896e; --blush:#fdf0eb; --nude:#f0ddd3;
--bark:#5c3a2e; --ink:#1a0f0a; --white:#ffffff; --border:rgba(160,49,8,.14);
--shadow:0 8px 40px rgba(92,58,46,.13); --green:#5a7a4e;
--ff-serif:'Playfair Display',Georgia,serif; --ff-sans:'DM Sans',sans-serif;
--ff-num:'Fraunces','Playfair Display',serif; --ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff-sans);background:var(--blush);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
a{text-decoration:none;color:inherit}
.icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ── AUTH HEADER ── */
.auth-header{background:var(--white);border-bottom:1px solid var(--border);padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:68px}
.logo-img{height:40px;width:auto}
.back-link{font-size:12px;color:var(--bark);display:flex;align-items:center;gap:6px;transition:color .2s}
.back-link:hover{color:var(--rose)}
/* ── MAIN ── */
.auth-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 20px}
.auth-card{background:var(--white);border-radius:8px;box-shadow:var(--shadow);width:100%;max-width:960px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
/* ── PANEL ── */
.auth-panel{padding:52px 48px}
.auth-panel-title{font-family:var(--ff-serif);font-size:32px;font-weight:400;color:var(--ink);margin-bottom:6px}
.auth-panel-title em{font-style:italic;color:var(--rose)}
.auth-panel-sub{font-size:13px;font-weight:300;color:var(--bark);margin-bottom:32px;line-height:1.6}
/* Tabs */
.auth-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:28px}
.auth-tab{flex:1;padding:12px;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:var(--ff-sans);font-size:13px;font-weight:400;color:var(--bark);transition:all .2s;text-align:center;letter-spacing:.04em}
.auth-tab.active{color:var(--rose);border-bottom-color:var(--rose);font-weight:500}
/* Register type toggle */
.reg-type{display:flex;gap:10px;margin-bottom:24px}
.reg-type-btn{flex:1;padding:13px;border:1.5px solid var(--border);border-radius:4px;background:none;cursor:pointer;font-family:var(--ff-sans);font-size:13px;color:var(--bark);display:flex;align-items:center;justify-content:center;gap:8px;transition:all .25s}
.reg-type-btn:hover{border-color:var(--rose-light)}
.reg-type-btn.active{border-color:var(--rose);background:var(--blush);color:var(--rose);font-weight:500}
.reg-type-icon{font-size:18px}
/* Form */
.form-view{display:none}.form-view.active{display:block}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-row.full{grid-template-columns:1fr}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.form-input,.form-select{
padding:12px 14px;border:1.5px solid var(--border);border-radius:4px;
background:#fafafa;font-family:var(--ff-sans);font-size:13px;color:var(--ink);
outline:none;transition:border-color .2s,background .2s;width:100%}
.form-input:focus,.form-select:focus{border-color:var(--rose);background:var(--white)}
.form-input::placeholder{color:var(--rose-light);font-weight:300}
.input-icon-wrap{position:relative}
.input-icon-wrap .form-input{padding-left:40px}
.input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--rose-light)}
.input-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--bark)}
.form-hint{font-size:11px;color:var(--bark);font-weight:300}
/* Divider */
.or-divider{display:flex;align-items:center;gap:12px;margin:20px 0;font-size:11px;color:var(--bark);font-weight:300;letter-spacing:.08em;text-transform:uppercase}
.or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:var(--border)}
/* Social */
.social-auth{display:flex;gap:10px;margin-bottom:20px}
.social-btn-auth{flex:1;padding:11px;border:1.5px solid var(--border);border-radius:4px;background:var(--white);cursor:pointer;font-family:var(--ff-sans);font-size:12px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;transition:border-color .2s,background .2s}
.social-btn-auth:hover{border-color:var(--rose-light);background:var(--blush)}
/* Agreement */
.check-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;cursor:pointer}
.custom-check{width:17px;height:17px;border:1.5px solid var(--rose-light);border-radius:3px;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.check-row.checked .custom-check{background:var(--rose);border-color:var(--rose)}
.check-row.checked .custom-check::after{content:'✓';font-size:9px;color:var(--white)}
.check-text{font-size:12px;font-weight:300;color:var(--bark);line-height:1.6}
.check-text a{color:var(--rose);text-decoration:underline}
/* Submit */
.btn-auth{width:100%;padding:15px;background:var(--rose);color:var(--white);border:none;border-radius:4px;cursor:pointer;font-family:var(--ff-sans);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:background .3s,transform .2s;margin-top:4px}
.btn-auth:hover{background:var(--ink);transform:translateY(-1px)}
.auth-switch{text-align:center;font-size:12px;font-weight:300;color:var(--bark);margin-top:16px}
.auth-switch a{color:var(--rose);font-weight:500}
.forgot-link{font-size:11px;color:var(--bark);text-align:right;display:block;margin-top:6px;transition:color .2s}
.forgot-link:hover{color:var(--rose)}
/* ── PROMO SIDE ── */
.auth-promo{background:linear-gradient(160deg,var(--rose) 0%,var(--bark) 100%);padding:52px 48px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.auth-promo::before{content:'🌹';position:absolute;top:-20px;right:-20px;font-size:220px;opacity:.08;pointer-events:none}
.promo-logo{margin-bottom:40px}
.promo-logo img{height:48px;filter:brightness(0) invert(1);opacity:.9}
.promo-tag{font-size:10px;font-weight:400;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:14px}
.promo-title{font-family:var(--ff-serif);font-size:36px;font-weight:400;color:var(--white);line-height:1.2;margin-bottom:20px}
.promo-title em{font-style:italic}
.promo-desc{font-size:13px;font-weight:300;color:rgba(255,255,255,.75);line-height:1.8;margin-bottom:36px}
.promo-benefits{display:flex;flex-direction:column;gap:14px}
.promo-benefit{display:flex;align-items:center;gap:12px;font-size:13px;color:rgba(255,255,255,.85)}
.benefit-dot{width:28px;height:28px;background:rgba(255,255,255,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
/* Password strength */
.pw-strength{height:3px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden}
.pw-strength-bar{height:100%;border-radius:2px;transition:width .4s,background .4s;width:0}
/* Responsive */
@media(max-width:760px){.auth-card{grid-template-columns:1fr}.auth-promo{display:none}.auth-panel{padding:36px 28px}.form-row{grid-template-columns:1fr}}
/* ===== product.html ===== */
:root {
--rose: #a03138;
--rose-light: #d4896e;
--blush: #fdf0eb;
--cream: #ffffff;
--nude: #f0ddd3;
--bark: #5c3a2e;
--ink: #2E1F1F;
--white: #FFFFFF;
--border: rgba(201,114,122,.18);
--shadow: 0 8px 40px rgba(139,111,106,.12);
--green: #7A9C72;
--ff-serif: 'Playfair Display', Georgia, serif;
--ff-sans: 'DM Sans', sans-serif;
--ff-num: 'Fraunces', 'Playfair Display', serif;
--ease: cubic-bezier(.4,0,.2,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--ff-sans); background: var(--cream); color: var(--ink); }
a { text-decoration: none; color: inherit; }
.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* TOPBAR + HEADER (same) */
.topbar { background: var(--rose); color: var(--white); font-size: 12px; font-weight: 300; letter-spacing: .08em; text-align: center; padding: 9px 20px; display: flex; align-items: center; justify-content: center; gap: 24px; }
header { position: sticky; top: 0; z-index: 100; background: rgba(251,247,245,.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 0 40px; }
.header-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; flex-direction: column; gap: 1px; }
.logo-name { font-family: var(--ff-serif); font-size: 26px; font-weight: 400; color: var(--ink); letter-spacing: .02em; line-height: 1; }
.logo-sub { font-size: 9px; font-weight: 300; letter-spacing: .25em; text-transform: uppercase; color: var(--rose); line-height: 1; }
nav { display: flex; align-items: center; gap: 36px; }
nav a { font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--bark); transition: color .25s; }
nav a:hover { color: var(--rose); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-actions button, .header-actions a { background: none; border: none; cursor: pointer; color: var(--ink); display: flex; align-items: center; gap: 7px; font-family: var(--ff-sans); font-size: 13px; transition: color .25s; }
.header-actions button:hover, .header-actions a:hover { color: var(--rose); }
.cart-btn { background: var(--rose) !important; color: var(--white) !important; border-radius: 24px; padding: 9px 20px !important; font-size: 12px !important; letter-spacing: .06em; text-transform: uppercase; }
.cart-badge { background: var(--white); color: var(--rose); border-radius: 50%; width: 18px; height: 18px; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
/* BREADCRUMB */
.breadcrumb-wrap { background: var(--white); border-bottom: 1px solid var(--border); padding: 14px 40px; }
.breadcrumb { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 300; color: var(--bark); }
.breadcrumb a { color: var(--bark); transition: color .2s; }
.breadcrumb a:hover { color: var(--rose); }
.breadcrumb-sep { color: var(--rose-light); }
/* PRODUCT LAYOUT */
.product-layout { max-width: 1320px; margin: 0 auto; padding: 56px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
/* GALLERY */
.gallery {}
.gallery-main {
aspect-ratio: 4/5;
background: linear-gradient(160deg, var(--blush) 0%, var(--nude) 100%);
border-radius: 4px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-size: 180px; margin-bottom: 12px;
position: relative; cursor: zoom-in;
}
.gallery-zoom-hint {
position: absolute; bottom: 16px; right: 16px;
background: rgba(255,255,255,.9); border-radius: 20px;
padding: 6px 12px; font-size: 11px; font-weight: 400;
color: var(--bark); display: flex; align-items: center; gap: 6px;
letter-spacing: .06em;
}
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery-thumb {
aspect-ratio: 1; background: var(--blush); border-radius: 3px;
display: flex; align-items: center; justify-content: center;
font-size: 32px; cursor: pointer;
border: 2px solid transparent;
transition: border-color .2s;
overflow: hidden;
}
.gallery-thumb.active { border-color: var(--rose); }
.gallery-thumb:hover { border-color: var(--rose-light); }
/* PRODUCT INFO */
.product-info {}
.product-badges { display: flex; gap: 8px; margin-bottom: 16px; }
.badge { font-size: 10px; font-weight: 500; letter-spacing: .08em; padding: 4px 10px; border-radius: 2px; text-transform: uppercase; }
.badge-sale { background: var(--rose); color: var(--white); }
.badge-fresh { background: var(--green); color: var(--white); }
.badge-popular { background: var(--nude); color: var(--bark); }
.product-cat { font-size: 10px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--rose); margin-bottom: 10px; }
.product-title { font-family: var(--ff-serif); font-size: clamp(30px, 3vw, 44px); font-weight: 300; color: var(--ink); line-height: 1.2; margin-bottom: 14px; }
.product-subtitle { font-family: var(--ff-serif); font-size: 18px; font-style: italic; font-weight: 300; color: var(--bark); margin-bottom: 20px; }
/* Rating */
.rating-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.stars-lg { color: #E8A838; font-size: 16px; letter-spacing: 3px; }
.rating-score { font-family: var(--ff-serif); font-size: 20px; font-weight: 400; color: var(--ink); }
.rating-count { font-size: 12px; font-weight: 300; color: var(--bark); }
.rating-sep { color: var(--border); }
.verified-badge { font-size: 11px; color: var(--green); display: flex; align-items: center; gap: 4px; }
/* Price */
.price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.price-main { font-family: var(--ff-serif); font-size: 38px; font-weight: 400; color: var(--rose); }
font-family: var(--ff-num) !important;
.price-old { font-family: var(--ff-serif); font-size: 22px; font-weight: 300; color: var(--rose-light); text-decoration: line-through; }
.price-save { font-size: 12px; font-weight: 500; color: var(--green); background: rgba(122,156,114,.1); padding: 3px 10px; border-radius: 20px; }
.price-note { font-size: 12px; font-weight: 300; color: var(--bark); margin-bottom: 28px; }
/* Options */
.option-section { margin-bottom: 24px; }
.option-label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.option-label span { font-weight: 300; color: var(--rose); letter-spacing: 0; text-transform: none; font-size: 12px; }
/* Size Options */
.size-options { display: flex; gap: 10px; }
.size-btn { padding: 10px 20px; border: 1.5px solid var(--border); border-radius: 3px; background: var(--white); font-family: var(--ff-sans); font-size: 13px; color: var(--bark); cursor: pointer; transition: all .2s; white-space: nowrap; }
.size-btn.active { border-color: var(--rose); background: var(--blush); color: var(--rose); font-weight: 500; }
.size-btn:hover:not(.active) { border-color: var(--rose-light); }
.size-btn.sold-out { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
/* Color Options */
.color-options { display: flex; gap: 10px; flex-wrap: wrap; }
.color-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.color-circle { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; transition: transform .2s, border-color .2s; }
.color-opt.active .color-circle { border-color: var(--rose); transform: scale(1.1); }
.color-opt:hover .color-circle { transform: scale(1.08); }
.color-name { font-size: 10px; color: var(--bark); font-weight: 300; }
/* Delivery Date */
.delivery-section { background: var(--blush); border-radius: 4px; padding: 18px 20px; margin-bottom: 24px; }
.delivery-title { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.delivery-title svg { color: var(--rose); }
.delivery-options { display: flex; flex-direction: column; gap: 10px; }
.delivery-opt { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--white); border-radius: 3px; border: 1.5px solid transparent; cursor: pointer; transition: border-color .2s; }
.delivery-opt.selected { border-color: var(--rose); }
.delivery-opt-left { display: flex; align-items: center; gap: 10px; }
.delivery-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--rose-light); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.delivery-opt.selected .delivery-radio { border-color: var(--rose); background: var(--rose); }
.delivery-opt.selected .delivery-radio::after { content: ''; width: 6px; height: 6px; background: var(--white); border-radius: 50%; }
.delivery-name { font-size: 13px; font-weight: 400; color: var(--ink); }
.delivery-date { font-size: 11px; font-weight: 300; color: var(--bark); }
.delivery-price { font-size: 13px; font-weight: 500; color: var(--rose); }
/* Quantity */
.qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.qty-label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.qty-ctrl { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 3px; overflow: hidden; }
.qty-btn { width: 40px; height: 40px; background: none; border: none; cursor: pointer; color: var(--rose); font-size: 18px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.qty-btn:hover { background: var(--blush); }
.qty-val { min-width: 48px; text-align: center; font-size: 15px; font-weight: 400; color: var(--ink); border-left: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0 4px; line-height: 40px; }
/* Note */
.note-input {
width: 100%; padding: 12px 16px;
border: 1.5px solid var(--border); border-radius: 3px;
background: var(--white); font-family: var(--ff-sans); font-size: 13px; color: var(--ink);
outline: none; resize: none; height: 80px; margin-bottom: 20px;
transition: border-color .2s;
}
.note-input:focus { border-color: var(--rose); }
.note-input::placeholder { color: var(--rose-light); }
/* CTA */
.cta-row { display: flex; gap: 12px; margin-bottom: 20px; }
.btn-add-cart {
flex: 1; padding: 16px;
background: var(--rose); color: var(--white);
border: none; border-radius: 3px; cursor: pointer;
font-family: var(--ff-sans); font-size: 13px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
display: flex; align-items: center; justify-content: center; gap: 10px;
transition: background .3s, transform .2s;
}
.btn-add-cart:hover { background: var(--ink); transform: translateY(-1px); }
.btn-wishlist {
width: 52px; height: 52px;
background: none; border: 1.5px solid var(--border); border-radius: 3px; cursor: pointer;
color: var(--rose); display: flex; align-items: center; justify-content: center;
transition: border-color .25s, background .25s;
}
.btn-wishlist:hover { border-color: var(--rose); background: var(--blush); }
.btn-buy-now {
width: 100%; padding: 15px;
background: var(--ink); color: var(--white);
border: none; border-radius: 3px; cursor: pointer;
font-family: var(--ff-sans); font-size: 13px; font-weight: 400;
letter-spacing: .1em; text-transform: uppercase;
transition: background .3s;
}
.btn-buy-now:hover { background: var(--bark); }
/* Trust */
.trust-row { display: flex; gap: 20px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 300; color: var(--bark); }
.trust-item svg { color: var(--rose); flex-shrink: 0; }
/* TABS */
.tabs-section { max-width: 1320px; margin: 0 auto; padding: 0 40px 80px; }
.tabs-nav { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 40px; }
.tab-btn { padding: 16px 28px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--ff-sans); font-size: 13px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--bark); transition: all .2s; margin-bottom: -1px; }
.tab-btn.active { color: var(--rose); border-bottom-color: var(--rose); }
.tab-btn:hover { color: var(--rose); }
.tab-content { display: none; }
.tab-content.active { display: block; }
/* Description */
.desc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.desc-text { font-size: 14px; font-weight: 300; line-height: 2; color: var(--bark); }
.desc-text p { margin-bottom: 16px; }
.desc-title { font-family: var(--ff-serif); font-size: 24px; font-weight: 300; color: var(--ink); margin-bottom: 20px; }
.details-list { display: flex; flex-direction: column; gap: 14px; }
.detail-row { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.detail-key { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--bark); width: 120px; flex-shrink: 0; padding-top: 2px; }
.detail-val { font-size: 13px; font-weight: 300; color: var(--ink); line-height: 1.6; }
/* Reviews */
.reviews-layout { display: grid; grid-template-columns: 280px 1fr; gap: 56px; }
.review-summary { position: sticky; top: 100px; }
.review-score-big { font-family: var(--ff-serif); font-size: 72px; font-weight: 300; color: var(--rose); line-height: 1; }
font-family: var(--ff-num) !important;
.review-stars-lg { font-size: 20px; color: #E8A838; letter-spacing: 4px; margin: 8px 0; }
.review-total { font-size: 13px; font-weight: 300; color: var(--bark); margin-bottom: 28px; }
.rating-bars { display: flex; flex-direction: column; gap: 8px; }
.rating-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--bark); }
.bar-track { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--rose); border-radius: 3px; }
.reviews-list { display: flex; flex-direction: column; gap: 28px; }
.review-card { padding: 28px; background: var(--white); border-radius: 4px; }
.review-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.reviewer-info { display: flex; align-items: center; gap: 12px; }
.reviewer-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--blush); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.reviewer-name { font-size: 14px; font-weight: 400; color: var(--ink); }
.reviewer-date { font-size: 11px; font-weight: 300; color: var(--bark); margin-top: 2px; }
.review-stars { color: #E8A838; font-size: 14px; letter-spacing: 2px; }
.review-verified { font-size: 10px; color: var(--green); display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.review-text { font-size: 13px; font-weight: 300; line-height: 1.8; color: var(--bark); }
/* RELATED */
.related-section { background: var(--white); padding: 80px 40px; }
.related-inner { max-width: 1320px; margin: 0 auto; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
.product-card-sm { background: var(--cream); border-radius: 4px; overflow: hidden; cursor: pointer; transition: box-shadow .3s, transform .3s; }
.product-card-sm:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.product-card-sm .thumb { aspect-ratio: 4/5; background: var(--blush); display: flex; align-items: center; justify-content: center; font-size: 60px; }
.product-card-sm .info { padding: 16px; }
.product-card-sm .name { font-family: var(--ff-serif); font-size: 16px; font-weight: 300; color: var(--ink); margin-bottom: 8px; }
.product-card-sm .price { font-family: var(--ff-serif); font-size: 18px; color: var(--rose); }
/* ── FOOTER ── */
footer { background: var(--ink); padding: 40px; }
.footer-bottom { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 300; color: rgba(255,255,255,.3); }
.footer-logo { font-family: var(--ff-serif); font-size: 22px; color: rgba(255,255,255,.7); }
/* STICKY ADD TO CART (mobile) */
.sticky-cta { display: none; }
/* RESPONSIVE */
@media (max-width: 1060px) { .product-layout { grid-template-columns: 1fr; gap: 40px; } .desc-grid { grid-template-columns: 1fr; } .reviews-layout { grid-template-columns: 1fr; } .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { header { padding: 0 20px; } nav { display: none; } .product-layout { padding: 32px 20px; } .tabs-section { padding: 0 20px 60px; } .sticky-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; padding: 16px 20px; background: var(--white); border-top: 1px solid var(--border); gap: 12px; z-index: 90; } .sticky-cta .btn-add-cart { flex: 1; } }
/* ===== services.html ===== */
:root{
--rose:#a03138;--rose-light:#d4896e;--blush:#fdf0eb;--nude:#f0ddd3;
--bark:#5c3a2e;--ink:#1a0f0a;--white:#ffffff;--gray-50:#fafafa;
--border:rgba(160,49,8,.14);--shadow:0 8px 40px rgba(92,58,46,.12);
--shadow-sm:0 2px 14px rgba(92,58,46,.07);--green:#5a7a4e;
--ff-serif:'Playfair Display',Georgia,serif;--ff-sans:'DM Sans',sans-serif;
--ff-num:'Fraunces','Playfair Display',serif;--ease:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff-sans);background:var(--white);color:var(--ink)}
a{text-decoration:none;color:inherit}
.icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* ─── HEADER ─── */
.topbar{background:var(--rose);color:var(--white);font-size:12px;font-weight:300;text-align:center;padding:9px 20px;display:flex;align-items:center;justify-content:center;gap:24px}
header{background:var(--white);border-bottom:1px solid var(--border);padding:0 40px;position:sticky;top:0;z-index:100}
.header-inner{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:68px}
nav{display:flex;gap:32px}
nav a{font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--bark);transition:color .2s;position:relative;padding-bottom:2px}
nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--rose);transition:width .3s}
nav a:hover,nav a.active{color:var(--rose)}
nav a.active::after,nav a:hover::after{width:100%}
.h-actions{display:flex;align-items:center;gap:16px}
.h-actions a,.h-actions button{background:none;border:none;cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:6px;font-family:var(--ff-sans);font-size:13px;transition:color .2s}
.h-actions a:hover,.h-actions button:hover{color:var(--rose)}
.cart-btn{background:var(--rose)!important;color:var(--white)!important;border-radius:20px;padding:8px 18px!important;font-size:12px!important;letter-spacing:.06em;text-transform:uppercase}
.cart-badge{background:var(--white);color:var(--rose);border-radius:50%;width:17px;height:17px;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
/* ─── VIEWS ─── */
.view{display:none}.view.active{display:block}
/* ═══════════════════════════════
SERVICES LIST VIEW
═══════════════════════════════ */
.svc-hero{background:linear-gradient(145deg,var(--ink) 0%,var(--bark) 60%,#3a1a0a 100%);padding:100px 40px;text-align:center;position:relative;overflow:hidden}
.svc-hero::before{content:'🌹';position:absolute;top:-60px;right:-40px;font-size:340px;opacity:.05;pointer-events:none;line-height:1}
.svc-hero::after{content:'🌸';position:absolute;bottom:-50px;left:-30px;font-size:240px;opacity:.04;pointer-events:none;line-height:1}
.hero-tag{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--rose-light);margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:10px}
.hero-tag::before,.hero-tag::after{content:'';display:block;width:24px;height:1px;background:var(--rose-light)}
.svc-hero-title{font-family:var(--ff-serif);font-size:clamp(44px,5vw,76px);font-weight:400;color:var(--white);line-height:1.1;margin-bottom:18px}
.svc-hero-title em{font-style:italic;color:var(--rose-light)}
.svc-hero-desc{font-size:15px;font-weight:300;color:rgba(255,255,255,.65);max-width:560px;margin:0 auto 40px;line-height:1.8}
.svc-hero-nums{display:flex;justify-content:center;gap:56px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1)}
.svc-hero-num{text-align:center}
.svc-hero-num-val{font-family:var(--ff-num);font-size:38px;font-weight:400;color:var(--rose-light)}
.svc-hero-num-lbl{font-size:11px;font-weight:300;color:rgba(255,255,255,.5);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
/* section helpers */
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.sec-label{font-size:10px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:var(--rose);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.sec-label.center{justify-content:center}
.sec-label::before{content:'';display:block;width:20px;height:1px;background:var(--rose)}
.sec-label.center::after{content:'';display:block;width:20px;height:1px;background:var(--rose)}
.sec-title{font-family:var(--ff-serif);font-size:clamp(30px,3vw,46px);font-weight:400;color:var(--ink)}
.sec-title em{font-style:italic;color:var(--rose)}
.sec-desc{font-size:14px;font-weight:300;color:var(--bark);max-width:560px;margin-top:10px;line-height:1.8}
.sec-desc.center{margin-left:auto;margin-right:auto;text-align:center}
/* services grid */
.svc-grid-section{padding:80px 0}
.svc-header{text-align:center;margin-bottom:56px}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-card{background:var(--white);border-radius:10px;border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.svc-thumb{height:220px;display:flex;align-items:center;justify-content:center;font-size:80px;position:relative}
.svc-thumb.wedding{background:linear-gradient(160deg,#f8f0f5,#ead5e8)}
.svc-thumb.corporate{background:linear-gradient(160deg,#eef3fa,#cde0f5)}
.svc-thumb.subscription{background:linear-gradient(160deg,var(--blush),var(--nude))}
.svc-thumb.funeral{background:linear-gradient(160deg,#f2f2f2,#e2e2e2)}
.svc-thumb.design{background:linear-gradient(160deg,#faf5e8,#f0e5c0)}
.svc-thumb.workshop{background:linear-gradient(160deg,#edf5eb,#c4dfbf)}
.svc-badge{position:absolute;top:14px;right:14px;border-radius:20px;padding:4px 12px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.svc-badge.hot{background:var(--rose);color:var(--white)}
.svc-badge.new{background:var(--green);color:var(--white)}
.svc-body{padding:24px}
.svc-title{font-family:var(--ff-serif);font-size:21px;font-weight:400;color:var(--ink);margin-bottom:8px}
.svc-desc{font-size:13px;font-weight:300;color:var(--bark);line-height:1.7;margin-bottom:16px}
.svc-feats{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.svc-feat{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:300;color:var(--bark)}
.svc-feat-dot{width:4px;height:4px;background:var(--rose);border-radius:50%;flex-shrink:0}
.svc-footer{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--border)}
.svc-from{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--bark)}
.svc-price{font-family:var(--ff-num);font-size:22px;font-weight:400;color:var(--rose)}
.btn-svc{padding:9px 18px;background:var(--rose);color:var(--white);border:none;border-radius:4px;cursor:pointer;font-family:var(--ff-sans);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:background .2s}
.btn-svc:hover{background:var(--bark)}
/* process */
.process-section{background:var(--blush);padding:80px 0}
.process-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:52px;position:relative}
.process-steps::before{content:'';position:absolute;top:26px;left:10%;right:10%;height:1px;background:var(--border);z-index:0}
.process-step{text-align:center;position:relative;z-index:1;padding:0 8px}
.process-num{width:52px;height:52px;border-radius:50%;background:var(--rose);color:var(--white);font-family:var(--ff-num);font-size:20px;font-weight:400;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 4px 16px rgba(160,49,8,.28)}
.process-title{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:5px}
.process-desc{font-size:11px;font-weight:300;color:var(--bark);line-height:1.6}
/* testimonials */
.testi-section{padding:80px 0}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.testi-card{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:28px}
.testi-stars{color:#E8A838;font-size:14px;letter-spacing:2px;margin-bottom:14px}
.testi-text{font-family:var(--ff-serif);font-size:15px;font-style:italic;color:var(--bark);line-height:1.8;margin-bottom:18px;position:relative}
.testi-author{display:flex;align-items:center;gap:12px}
.testi-avatar{width:40px;height:40px;border-radius:50%;background:var(--blush);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.testi-name{font-size:13px;font-weight:500;color:var(--ink)}
.testi-label{font-size:11px;font-weight:300;color:var(--bark);margin-top:2px}
/* CTA Banner */
.cta-section{background:linear-gradient(135deg,var(--rose) 0%,var(--bark) 100%);padding:72px 40px;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'🌹';position:absolute;right:-20px;top:-40px;font-size:220px;opacity:.07;line-height:1}
.cta-title{font-family:var(--ff-serif);font-size:clamp(30px,3.5vw,48px);font-weight:400;color:var(--white);margin-bottom:14px}
.cta-title em{font-style:italic}
.cta-desc{font-size:14px;font-weight:300;color:rgba(255,255,255,.78);margin-bottom:32px;max-width:480px;margin-left:auto;margin-right:auto;line-height:1.8}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-white{padding:14px 36px;background:var(--white);color:var(--rose);border:none;border-radius:4px;cursor:pointer;font-family:var(--ff-sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:background .2s;display:inline-block}
.btn-white:hover{background:var(--nude)}
.btn-outline-white{padding:14px 32px;background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.4);border-radius:4px;cursor:pointer;font-family:var(--ff-sans);font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;transition:border-color .2s;display:inline-block}
.btn-outline-white:hover{border-color:rgba(255,255,255,.85)}
/* ═══════════════════════════════
SERVICE DETAIL VIEW
═══════════════════════════════ */
.breadcrumb-bar{background:var(--white);border-bottom:1px solid var(--border);padding:13px 40px}
.breadcrumb{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--bark);flex-wrap:wrap}
.breadcrumb a{transition:color .2s}.breadcrumb a:hover{color:var(--rose)}
.breadcrumb-sep{color:var(--rose-light)}
.detail-hero{padding:72px 40px;position:relative;overflow:hidden}
.detail-hero-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.d-hero-tag{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--rose);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.d-hero-tag::before{content:'';display:block;width:18px;height:1px;background:var(--rose)}
.d-hero-title{font-family:var(--ff-serif);font-size:clamp(34px,4vw,56px);font-weight:400;color:var(--ink);line-height:1.15;margin-bottom:14px}
.d-hero-title em{font-style:italic;color:var(--rose)}
.d-hero-desc{font-size:14px;font-weight:300;color:var(--bark);line-height:1.9;margin-bottom:28px}
.d-hero-stats{display:flex;gap:28px;padding-top:24px;border-top:1px solid var(--border)}
.d-stat-val{font-family:var(--ff-num);font-size:28px;font-weight:400;color:var(--rose)}
.d-stat-lbl{font-size:11px;font-weight:300;color:var(--bark);margin-top:2px}
.d-hero-img{height:420px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:160px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.d-hero-img.wedding{background:linear-gradient(160deg,#f8f0f5,#ead5e8)}
.d-hero-img.corporate{background:linear-gradient(160deg,#eef3fa,#cde0f5)}
.d-hero-img.subscription{background:linear-gradient(160deg,var(--blush),var(--nude))}
.d-hero-img.funeral{background:linear-gradient(160deg,#f2f2f2,#e2e2e2)}
.d-hero-img.design{background:linear-gradient(160deg,#faf5e8,#f0e5c0)}
.d-hero-img.workshop{background:linear-gradient(160deg,#edf5eb,#c4dfbf)}
/* detail body */
.detail-body-wrap{max-width:1320px;margin:0 auto;padding:56px 40px;display:grid;grid-template-columns:1fr 360px;gap:52px;align-items:start}
.detail-main{}
.d-section-title{font-family:var(--ff-serif);font-size:26px;font-weight:400;color:var(--ink);margin-bottom:16px}
.d-section-title em{font-style:italic;color:var(--rose)}
.body-text{font-size:14px;font-weight:300;color:var(--bark);line-height:1.95;margin-bottom:22px}
/* includes grid */
.includes-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}
.include-item{display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--blush);border-radius:6px}
.inc-icon{width:34px;height:34px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.inc-title{font-size:13px;font-weight:500;color:var(--ink);margin-bottom:3px}
.inc-desc{font-size:11px;font-weight:300;color:var(--bark);line-height:1.5}
/* pricing table */
.pricing-table{border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:28px}
.pt-header{display:grid;grid-template-columns:1fr 80px 120px;gap:16px;padding:13px 18px;background:var(--ink);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.pt-row{display:grid;grid-template-columns:1fr 80px 120px;gap:16px;padding:16px 18px;border-top:1px solid var(--border);align-items:center}
.pt-name{font-size:13px;font-weight:400;color:var(--ink)}
.pt-detail{font-size:11px;font-weight:300;color:var(--bark);margin-top:2px}
.pt-inc{font-size:12px;color:var(--bark);text-align:center}
.pt-price{font-family:var(--ff-num);font-size:18px;font-weight:400;color:var(--rose);text-align:right}
/* gallery */
.detail-gallery{margin-bottom:32px}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;gap:10px}
.g-item{border-radius:6px;overflow:hidden;background:var(--blush);display:flex;align-items:center;justify-content:center;font-size:48px;cursor:pointer;transition:transform .3s;min-height:120px}
.g-item:first-child{grid-row:1/3;font-size:80px;min-height:260px}
.g-item:hover{transform:scale(1.02)}
/* inquiry sidebar */
.inquiry-card{background:var(--white);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;position:sticky;top:88px}
.inq-head{background:linear-gradient(135deg,var(--rose) 0%,var(--bark) 100%);padding:22px 24px;text-align:center}
.inq-title{font-family:var(--ff-serif);font-size:20px;font-weight:400;color:var(--white);margin-bottom:3px}
.inq-sub{font-size:12px;font-weight:300;color:rgba(255,255,255,.75)}
.inq-body{padding:22px}
.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.fl{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.fi,.fs,.ft{padding:11px 13px;border:1.5px solid var(--border);border-radius:4px;background:#fafafa;font-family:var(--ff-sans);font-size:13px;color:var(--ink);outline:none;transition:border-color .2s,background .2s;width:100%}
.fi:focus,.fs:focus,.ft:focus{border-color:var(--rose);background:var(--white)}
.fi::placeholder,.ft::placeholder{color:var(--rose-light);font-weight:300}
.ft{resize:none;height:72px}
.btn-inq{width:100%;padding:13px;background:var(--rose);color:var(--white);border:none;border-radius:4px;cursor:pointer;font-family:var(--ff-sans);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:background .2s;margin-top:2px}
.btn-inq:hover{background:var(--bark)}
.inq-trust{display:flex;flex-direction:column;gap:7px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.trust-row{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:300;color:var(--bark)}
.trust-row svg{color:var(--green);flex-shrink:0;width:13px;height:13px}
.inq-divider{height:1px;background:var(--border);margin:14px 0}
.inq-phone{text-align:center;font-size:13px;color:var(--bark)}
.inq-phone a{color:var(--rose);font-weight:500;font-size:16px;display:block;margin-top:4px}
/* related services */
.related-svc{background:var(--blush);padding:72px 40px}
.related-inner{max-width:1320px;margin:0 auto}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.related-card{background:var(--white);border-radius:8px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:all .3s}
.related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.related-thumb{height:150px;display:flex;align-items:center;justify-content:center;font-size:52px}
.related-info{padding:18px}
.related-name{font-family:var(--ff-serif);font-size:17px;font-weight:400;color:var(--ink);margin-bottom:6px}
.related-from{font-size:12px;color:var(--bark);font-weight:300}
.related-price{font-family:var(--ff-num);font-size:16px;color:var(--rose)}
/* footer */
footer{background:var(--ink);padding:40px}
.footer-bottom{max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:300;color:rgba(255,255,255,.3)}
/* responsive */
@media(max-width:1060px){.svc-grid{grid-template-columns:repeat(2,1fr)}.testi-grid{grid-template-columns:1fr 1fr}.detail-body-wrap{grid-template-columns:1fr}.inquiry-card{position:static}.detail-hero-inner{grid-template-columns:1fr}}
@media(max-width:760px){header{padding:0 20px}nav{display:none}.wrap{padding:0 20px}.svc-hero,.svc-grid-section,.process-section,.testi-section,.cta-section,.detail-hero,.related-svc{padding-left:20px;padding-right:20px}.svc-grid{grid-template-columns:1fr}.testi-grid{grid-template-columns:1fr}.process-steps{grid-template-columns:1fr 1fr;gap:24px}.process-steps::before{display:none}.includes-grid{grid-template-columns:1fr}.related-grid{grid-template-columns:1fr 1fr}.svc-hero-nums{gap:28px}.detail-body-wrap{padding:32px 20px}}
/* ── ACCOUNT SIDEBAR — nav override ────────────────────────────────────
Global `nav { display:flex; gap:32px }` makes ALL