/* ===================================================== HOUSE OF DIVY — SITE STYLESHEET Shared base styles + page-specific styles (scoped by the of each page). One file for the whole site — see /js/script.js for behaviour. ===================================================== */ /* ---------- BASE (shared across every page) ---------- */ :root{ --cream:#efe7d8; --charcoal:#211f1c; --gold:#a67c43; --gold-light:#c9a877; --emerald:#2f4538; --burgundy:#6b2737; --line:rgba(33,31,28,0.15); } *{margin:0;padding:0;box-sizing:border-box;} h1,h2,h3,.serif{font-family:'Playfair Display',serif;} a{color:inherit;text-decoration:none;} .logo{display:flex;align-items:center;gap:14px;} .logo svg{width:52px;height:52px;} .logo-text{line-height:1.1;} .logo-text .name{font-family:'Playfair Display',serif;font-size:20px;letter-spacing:3px;} .logo-text .tag{font-size:10px;letter-spacing:4px;color:var(--gold);} nav{display:flex;gap:38px;font-size:14px;letter-spacing:1px;} nav a{position:relative;padding-bottom:4px;} nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .3s ease;} nav a:hover::after{width:100%;} .header-icons{display:flex;gap:20px;font-size:14px;letter-spacing:1px;} .section-head .eyebrow{font-size:12px;letter-spacing:5px;color:var(--gold);margin-bottom:10px;} .footer-col .name{font-size:16px;letter-spacing:3px;margin-bottom:10px;} .footer-col .tag{font-size:10px;letter-spacing:3px;color:var(--gold);margin-bottom:18px;} .footer-col p{font-size:13px;line-height:1.7;color:#5b564c;max-width:280px;} .footer-col h4{font-size:12px;letter-spacing:2px;margin-bottom:20px;color:var(--charcoal);} .footer-col ul{list-style:none;} .footer-col ul li{margin-bottom:12px;} .footer-col ul li a{font-size:13px;color:#5b564c;transition:color .25s ease;} .footer-col ul li a:hover{color:var(--gold);} body{background:var(--cream);color:var(--charcoal);font-family:'Jost',sans-serif;font-weight:300;} /* Header */ header{ display:flex;align-items:center;justify-content:space-between; padding:22px 6%;border-bottom:1px solid var(--line); position:sticky;top:0;background:var(--cream);z-index:50; } nav a.active::after{width:100%;} .breadcrumb{padding:22px 8% 0;font-size:12px;letter-spacing:1px;color:#8a8272;} .breadcrumb a:hover{color:var(--gold);} /* Footer */ .footer-top{ padding:70px 8% 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px; border-top:1px solid var(--line); } .footer-bottom{ display:flex;justify-content:space-between;align-items:center;padding:22px 8%; border-top:1px solid var(--line);font-size:12px;letter-spacing:1px;color:#5b564c; } @media(max-width:860px){ .footer-top{grid-template-columns:1fr 1fr;} .footer-bottom{flex-direction:column;gap:10px;text-align:center;} } /* ---------- PAGE: HOME (#page-home) ---------- */ #page-home { background:var(--cream); color:var(--charcoal); font-family:'Jost',sans-serif; font-weight:300; } #page-home /* Header */ header { display:flex;align-items:center;justify-content:space-between; padding:22px 6%; border-bottom:1px solid var(--line); position:sticky;top:0;background:var(--cream);z-index:50; } #page-home /* Slider */ .slider {position:relative;height:78vh;min-height:460px;overflow:hidden;} #page-home .slide { position:absolute;inset:0; display:flex;align-items:center; padding:0 8%; opacity:0;transition:opacity 1s ease; color:#f4ede0; } #page-home .slide.active {opacity:1;} #page-home .slide .overlay {position:absolute;inset:0;z-index:0;} #page-home .slide-content {position:relative;z-index:1;max-width:520px;} #page-home .slide-eyebrow {font-size:12px;letter-spacing:5px;color:var(--gold-light);margin-bottom:16px;} #page-home .slide h1 {font-size:52px;font-weight:500;line-height:1.15;margin-bottom:18px;} #page-home .slide p {font-size:15px;line-height:1.7;margin-bottom:28px;max-width:420px;color:#e7ddc9;} #page-home .btn { display:inline-block;padding:14px 34px; border:1px solid var(--gold-light); font-size:12px;letter-spacing:3px; transition:background .3s ease,color .3s ease; } #page-home .btn:hover {background:var(--gold-light);color:var(--charcoal);} #page-home .slide1 .overlay {background:linear-gradient(120deg,#211f1c 0%,#3a3327 60%,#4d3f2a 100%);} #page-home .slide2 .overlay {background:linear-gradient(120deg,#211f1c 0%,#2f4538 70%);} #page-home .slide3 .overlay {background:linear-gradient(120deg,#211f1c 0%,#5a2430 70%);} #page-home .dots {position:absolute;bottom:28px;left:8%;z-index:2;display:flex;gap:10px;} #page-home .dot {width:9px;height:9px;border-radius:50%;border:1px solid var(--gold-light);cursor:pointer;background:transparent;transition:background .3s ease;} #page-home .dot.active {background:var(--gold-light);} #page-home .slider-arrow { position:absolute;top:50%;transform:translateY(-50%); z-index:2;background:none;border:none;color:#f4ede0; font-size:22px;cursor:pointer;padding:10px;opacity:.7; } #page-home .slider-arrow:hover {opacity:1;} #page-home .arrow-left {left:2%;} #page-home .arrow-right {right:2%;} #page-home /* Announcement strip */ .strip { background:var(--charcoal);color:var(--cream); text-align:center;padding:11px;font-size:12px;letter-spacing:3px; } #page-home /* Collections */ .section {padding:90px 8%;} #page-home .section-head {text-align:center;margin-bottom:56px;} #page-home .section-head h2 {font-size:34px;font-weight:500;} #page-home .collections {display:grid;grid-template-columns:repeat(3,1fr);gap:28px;} #page-home .collection-card {position:relative;height:420px;overflow:hidden;cursor:pointer;} #page-home .collection-card .fill {position:absolute;inset:0;transition:transform .6s ease;} #page-home .collection-card:hover .fill {transform:scale(1.06);} #page-home .c1 .fill {background:linear-gradient(160deg,#c9a877,#8a6a3f);} #page-home .c2 .fill {background:linear-gradient(160deg,#4a6152,#2f4538);} #page-home .c3 .fill {background:linear-gradient(160deg,#8a3d4b,#6b2737);} #page-home .collection-card .label { position:absolute;left:0;right:0;bottom:0;padding:26px; background:linear-gradient(to top,rgba(0,0,0,.55),transparent); color:#f4ede0; } #page-home .collection-card .label .serif {font-size:22px;margin-bottom:6px;} #page-home .collection-card .label span {font-size:11px;letter-spacing:2px;color:var(--gold-light);} #page-home /* Product listing */ .products {display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;} #page-home .product-card {cursor:pointer;} #page-home .product-image { position:relative;height:340px;overflow:hidden; background:linear-gradient(160deg,#ddd0b0,#a67c43); } #page-home .product-card:nth-child(2) .product-image {background:linear-gradient(160deg,#8fa596,#2f4538);} #page-home .product-card:nth-child(3) .product-image {background:linear-gradient(160deg,#c98d9c,#6b2737);} #page-home .product-card:nth-child(4) .product-image {background:linear-gradient(160deg,#cbb98f,#5a4626);} #page-home .product-image .badge { position:absolute;top:14px;left:14px; background:var(--charcoal);color:var(--cream); font-size:10px;letter-spacing:2px;padding:5px 10px; } #page-home .product-image .quick-add { position:absolute;left:0;right:0;bottom:0; padding:12px;text-align:center; background:rgba(33,31,28,0.85);color:var(--cream); font-size:11px;letter-spacing:2px; transform:translateY(100%);transition:transform .35s ease; } #page-home .product-card:hover .quick-add {transform:translateY(0);} #page-home .product-info {padding-top:16px;} #page-home .product-info .p-name {font-family:'Playfair Display',serif;font-size:17px;margin-bottom:4px;} #page-home .product-info .p-cat {font-size:11px;letter-spacing:2px;color:var(--gold);margin-bottom:8px;} #page-home .product-info .p-price {font-size:14px;color:var(--charcoal);} #page-home .product-info .p-price .old {color:#9a927e;text-decoration:line-through;margin-right:8px;font-size:13px;} #page-home .section-cta {text-align:center;margin-top:52px;} @media(max-width:860px) { #page-home .products {grid-template-columns:repeat(2,1fr);} } #page-home /* Gallery */ .gallery {display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:130px;gap:10px;} #page-home .gallery-item {position:relative;overflow:hidden;cursor:pointer;} #page-home .gallery-item .fill {position:absolute;inset:0;transition:transform .5s ease;} #page-home .gallery-item:hover .fill {transform:scale(1.08);} #page-home .gallery-item .overlay-icon { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(33,31,28,0);color:#f4ede0;font-size:11px;letter-spacing:2px; opacity:0;transition:opacity .35s ease,background .35s ease; } #page-home .gallery-item:hover .overlay-icon {opacity:1;background:rgba(33,31,28,0.4);} #page-home .g1 {grid-column:1/3;grid-row:1/3;} #page-home .g2 {grid-column:3/5;grid-row:1/2;} #page-home .g3 {grid-column:5/7;grid-row:1/3;} #page-home .g4 {grid-column:3/4;grid-row:2/3;} #page-home .g5 {grid-column:4/5;grid-row:2/3;} #page-home .g6 {grid-column:1/7;grid-row:3/4;} #page-home .gi1 .fill {background:linear-gradient(150deg,#d8c39b,#a67c43);} #page-home .gi2 .fill {background:linear-gradient(150deg,#7f9587,#2f4538);} #page-home .gi3 .fill {background:linear-gradient(150deg,#b46f7f,#6b2737);} #page-home .gi4 .fill {background:linear-gradient(150deg,#c9b487,#8a6a3f);} #page-home .gi5 .fill {background:linear-gradient(150deg,#9fae9f,#3f5245);} #page-home .gi6 .fill {background:linear-gradient(150deg,#cbb2b8,#7a3a44);} @media(max-width:860px) { #page-home .gallery {grid-template-columns:repeat(3,1fr);grid-auto-rows:110px;} #page-home .g1 {grid-column:1/3;grid-row:1/3;} #page-home .g2 {grid-column:3/4;grid-row:1/2;} #page-home .g3 {grid-column:3/4;grid-row:2/3;} #page-home .g4 {grid-column:1/2;grid-row:3/4;} #page-home .g5 {grid-column:2/3;grid-row:3/4;} #page-home .g6 {grid-column:3/4;grid-row:3/4;} } #page-home .candle-illustration {position:absolute;bottom:8px;right:8px;width:54px;height:64px;z-index:1;} #page-home /* Gallery modal popup */ .modal-overlay { position:fixed;inset:0;z-index:300; background:rgba(33,31,28,0.78); display:none;align-items:center;justify-content:center;padding:24px; } #page-home .modal-overlay.active {display:flex;} #page-home .modal-card { background:var(--cream);width:100%;max-width:660px; display:grid;grid-template-columns:1fr 1fr; position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.35); } #page-home .modal-image {position:relative;min-height:360px;overflow:hidden;} #page-home .modal-image svg {position:absolute;bottom:18px;right:18px;width:90px;height:106px;} #page-home .modal-info {padding:44px 38px;display:flex;flex-direction:column;justify-content:center;} #page-home .modal-info .m-cat {font-size:11px;letter-spacing:3px;color:var(--gold);margin-bottom:10px;} #page-home .modal-info h3 {font-size:26px;margin-bottom:14px;} #page-home .modal-info p {font-size:14px;line-height:1.7;color:#5b564c;margin-bottom:22px;} #page-home .modal-info .m-price {font-size:18px;margin-bottom:26px;} #page-home .modal-close { position:absolute;top:16px;right:16px;z-index:10; width:34px;height:34px;border-radius:50%; background:var(--charcoal);color:var(--cream); border:none;font-size:16px;cursor:pointer; display:flex;align-items:center;justify-content:center; } @media(max-width:640px) { #page-home .modal-card {grid-template-columns:1fr;} #page-home .modal-image {min-height:220px;} } #page-home /* Newsletter form */ .newsletter { background:var(--charcoal);color:var(--cream); padding:80px 8%;text-align:center; } #page-home .newsletter h2 {font-size:30px;font-weight:500;margin-bottom:12px;} #page-home .newsletter p {font-size:14px;color:#c9c2b0;margin-bottom:34px;} #page-home .newsletter-form { display:flex;justify-content:center;gap:0;max-width:460px;margin:0 auto; border-bottom:1px solid var(--gold-light);padding-bottom:8px; } #page-home .newsletter-form input { flex:1;background:transparent;border:none;outline:none; color:var(--cream);font-family:'Jost',sans-serif;font-size:14px; letter-spacing:1px;padding:10px 4px; } #page-home .newsletter-form input::placeholder {color:#8a8272;} #page-home .newsletter-form button { background:none;border:none;color:var(--gold-light); font-size:12px;letter-spacing:3px;cursor:pointer; padding:10px 14px;white-space:nowrap; } #page-home .newsletter-form button:hover {color:#f4ede0;} #page-home .form-note {font-size:11px;color:#8a8272;margin-top:16px;letter-spacing:1px;} #page-home /* Footer */ .footer-top { padding:70px 8% 40px; display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px; border-top:1px solid var(--line); } #page-home .footer-bottom { display:flex;justify-content:space-between;align-items:center; padding:22px 8%;border-top:1px solid var(--line); font-size:12px;letter-spacing:1px;color:#5b564c; } @media(max-width:860px) { #page-home .footer-top {grid-template-columns:1fr 1fr;} #page-home .footer-bottom {flex-direction:column;gap:10px;text-align:center;} #page-home nav {display:none;} #page-home .slide h1 {font-size:34px;} #page-home .collections {grid-template-columns:1fr;} } /* ---------- PAGE: SHOP ALL (#page-products) ---------- */ #page-products .shop-hero {padding:18px 8% 32px;} #page-products .shop-hero h1 {font-size:38px;font-weight:500;margin-bottom:10px;} #page-products .shop-hero p {font-size:14px;color:#5b564c;max-width:520px;line-height:1.7;} #page-products /* Category tabs */ .cat-tabs { display:flex;gap:34px;padding:0 8%;border-bottom:1px solid var(--line); font-size:12px;letter-spacing:2px;overflow-x:auto; } #page-products .cat-tab {padding-bottom:18px;cursor:pointer;color:#8a8272;border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap;} #page-products .cat-tab.active {color:var(--charcoal);border-color:var(--gold);} #page-products /* Toolbar */ .shop-toolbar { display:flex;justify-content:space-between;align-items:center; padding:26px 8% 0;font-size:13px;color:#5b564c; } #page-products .toolbar-right {display:flex;align-items:center;gap:18px;} #page-products .shop-toolbar select { background:transparent;border:1px solid var(--line);padding:8px 12px; font-family:'Jost',sans-serif;font-size:12px;letter-spacing:1px;color:var(--charcoal); } #page-products .view-toggle {display:flex;gap:8px;} #page-products .view-toggle span { width:30px;height:30px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center; cursor:pointer;font-size:12px;transition:border-color .25s ease,color .25s ease; } #page-products .view-toggle span.active {border-color:var(--gold);color:var(--gold);} #page-products /* Product grid */ .products { display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px; padding:36px 8% 20px; } #page-products .products.list-view {grid-template-columns:1fr;} #page-products .products.list-view .product-card {display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center;} #page-products .products.list-view .product-image {height:200px;} #page-products .product-card {cursor:pointer;} #page-products .product-image {position:relative;height:340px;overflow:hidden;} #page-products .product-image .badge { position:absolute;top:14px;left:14px;background:var(--charcoal);color:var(--cream); font-size:10px;letter-spacing:2px;padding:5px 10px;z-index:2; } #page-products .product-image .wishlist { position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%; background:rgba(239,231,216,0.9);display:flex;align-items:center;justify-content:center; font-size:13px;cursor:pointer;z-index:2; } #page-products .product-image .quick-add { position:absolute;left:0;right:0;bottom:0;padding:12px;text-align:center; background:rgba(33,31,28,0.85);color:var(--cream);font-size:11px;letter-spacing:2px; transform:translateY(100%);transition:transform .35s ease; } #page-products .product-card:hover .quick-add {transform:translateY(0);} #page-products .pc1 .product-image {background:linear-gradient(160deg,#ddd0b0,#a67c43);} #page-products .pc2 .product-image {background:linear-gradient(160deg,#8fa596,#2f4538);} #page-products .pc3 .product-image {background:linear-gradient(160deg,#c98d9c,#6b2737);} #page-products .pc4 .product-image {background:linear-gradient(160deg,#cbb98f,#5a4626);} #page-products .pc5 .product-image {background:linear-gradient(160deg,#b9c2b0,#4a6152);} #page-products .pc6 .product-image {background:linear-gradient(160deg,#d8b7be,#8a3d4b);} #page-products .pc7 .product-image {background:linear-gradient(160deg,#e0d3ad,#8a6a3f);} #page-products .pc8 .product-image {background:linear-gradient(160deg,#a6b3a9,#2f4538);} #page-products .pc9 .product-image {background:linear-gradient(160deg,#c9a3ab,#6b2737);} #page-products .pc10 .product-image {background:linear-gradient(160deg,#3a3327,#211f1c);} #page-products .pc11 .product-image {background:linear-gradient(160deg,#d3c9a8,#7a6234);} #page-products .pc12 .product-image {background:linear-gradient(160deg,#95a89a,#2f4538);} #page-products .product-info {padding-top:16px;} #page-products .product-info .p-cat {font-size:11px;letter-spacing:2px;color:var(--gold);margin-bottom:8px;} #page-products .product-info .p-name {font-family:'Playfair Display',serif;font-size:17px;margin-bottom:4px;} #page-products .product-info .p-desc {font-size:13px;color:#5b564c;margin:8px 0;display:none;line-height:1.6;} #page-products .products.list-view .p-desc {display:block;} #page-products .product-info .p-price {font-size:14px;} #page-products .product-info .p-price .old {color:#9a927e;text-decoration:line-through;margin-right:8px;font-size:13px;} #page-products .pagination {display:flex;justify-content:center;gap:14px;padding:50px 8% 90px;font-size:13px;} #page-products .pagination a, #page-products .pagination span { width:34px;height:34px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);cursor:pointer;transition:border-color .25s ease,color .25s ease; } #page-products .pagination a:hover, #page-products .pagination .active {border-color:var(--gold);color:var(--gold);} @media(max-width:960px) { #page-products nav {display:none;} #page-products .products {grid-template-columns:repeat(2,1fr);padding:30px 6% 10px;} #page-products .shop-hero h1 {font-size:28px;} #page-products .products.list-view .product-card {grid-template-columns:130px 1fr;} #page-products .products.list-view .product-image {height:150px;} } /* ---------- PAGE: CATEGORY (WOMEN) (#page-category) ---------- */ #page-category /* Breadcrumb + title */ .breadcrumb {padding:22px 8% 0;font-size:12px;letter-spacing:1px;color:#8a8272;} #page-category .category-hero {padding:18px 8% 40px;border-bottom:1px solid var(--line);} #page-category .category-hero h1 {font-size:38px;font-weight:500;margin-bottom:10px;} #page-category .category-hero p {font-size:14px;color:#5b564c;max-width:520px;line-height:1.7;} #page-category /* Layout */ .shop-layout {display:grid;grid-template-columns:230px 1fr;gap:48px;padding:50px 8% 90px;} #page-category /* Filters */ .filters h4 {font-size:12px;letter-spacing:2px;color:var(--gold);margin:0 0 16px;} #page-category .filter-group {margin-bottom:36px;} #page-category .filter-group ul {list-style:none;} #page-category .filter-group li {margin-bottom:12px;} #page-category .filter-group label { display:flex;align-items:center;gap:10px;font-size:13px;color:var(--charcoal);cursor:pointer; } #page-category .filter-group input[type="checkbox"] { width:14px;height:14px;accent-color:var(--gold);cursor:pointer; } #page-category .size-grid {display:flex;flex-wrap:wrap;gap:8px;} #page-category .size-box { width:36px;height:36px;border:1px solid var(--line); display:flex;align-items:center;justify-content:center; font-size:12px;cursor:pointer;transition:border-color .25s ease,color .25s ease; } #page-category .size-box:hover, #page-category .size-box.active {border-color:var(--gold);color:var(--gold);} #page-category .color-grid {display:flex;flex-wrap:wrap;gap:10px;} #page-category .color-dot {width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .25s ease;} #page-category .color-dot.active {border-color:var(--charcoal);} #page-category .clear-filters {font-size:11px;letter-spacing:2px;color:var(--gold);cursor:pointer;border-bottom:1px solid var(--gold);padding-bottom:2px;} #page-category /* Toolbar */ .shop-toolbar { display:flex;justify-content:space-between;align-items:center; margin-bottom:32px;padding-bottom:18px;border-bottom:1px solid var(--line); font-size:13px;color:#5b564c; } #page-category .shop-toolbar select { background:transparent;border:1px solid var(--line);padding:8px 12px; font-family:'Jost',sans-serif;font-size:12px;letter-spacing:1px;color:var(--charcoal); } #page-category /* Product grid */ .products {display:grid;grid-template-columns:repeat(3,1fr);gap:32px 24px;} #page-category .product-card {cursor:pointer;} #page-category .product-image {position:relative;height:360px;overflow:hidden;} #page-category .product-image .badge { position:absolute;top:14px;left:14px;background:var(--charcoal);color:var(--cream); font-size:10px;letter-spacing:2px;padding:5px 10px;z-index:2; } #page-category .product-image .wishlist { position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%; background:rgba(239,231,216,0.9);display:flex;align-items:center;justify-content:center; font-size:13px;cursor:pointer;z-index:2; } #page-category .product-image .quick-add { position:absolute;left:0;right:0;bottom:0;padding:12px;text-align:center; background:rgba(33,31,28,0.85);color:var(--cream);font-size:11px;letter-spacing:2px; transform:translateY(100%);transition:transform .35s ease; } #page-category .product-card:hover .quick-add {transform:translateY(0);} #page-category .pc1 .product-image {background:linear-gradient(160deg,#ddd0b0,#a67c43);} #page-category .pc2 .product-image {background:linear-gradient(160deg,#8fa596,#2f4538);} #page-category .pc3 .product-image {background:linear-gradient(160deg,#c98d9c,#6b2737);} #page-category .pc4 .product-image {background:linear-gradient(160deg,#cbb98f,#5a4626);} #page-category .pc5 .product-image {background:linear-gradient(160deg,#b9c2b0,#4a6152);} #page-category .pc6 .product-image {background:linear-gradient(160deg,#d8b7be,#8a3d4b);} #page-category .pc7 .product-image {background:linear-gradient(160deg,#e0d3ad,#8a6a3f);} #page-category .pc8 .product-image {background:linear-gradient(160deg,#a6b3a9,#2f4538);} #page-category .pc9 .product-image {background:linear-gradient(160deg,#c9a3ab,#6b2737);} #page-category .product-info {padding-top:16px;} #page-category .product-info .p-cat {font-size:11px;letter-spacing:2px;color:var(--gold);margin-bottom:8px;} #page-category .product-info .p-name {font-family:'Playfair Display',serif;font-size:17px;margin-bottom:4px;} #page-category .product-info .p-price {font-size:14px;} #page-category .product-info .p-price .old {color:#9a927e;text-decoration:line-through;margin-right:8px;font-size:13px;} #page-category /* Pagination */ .pagination {display:flex;justify-content:center;gap:14px;margin-top:64px;font-size:13px;} #page-category .pagination a, #page-category .pagination span { width:34px;height:34px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);cursor:pointer;transition:border-color .25s ease,color .25s ease; } #page-category .pagination a:hover, #page-category .pagination .active {border-color:var(--gold);color:var(--gold);} @media(max-width:960px) { #page-category nav {display:none;} #page-category .shop-layout {grid-template-columns:1fr;} #page-category .filters {display:flex;flex-wrap:wrap;gap:30px;} #page-category .filter-group {margin-bottom:0;flex:1 1 160px;} #page-category .products {grid-template-columns:repeat(2,1fr);} #page-category .category-hero h1 {font-size:28px;} } @media(max-width:860px) { #page-category .footer-top {grid-template-columns:1fr 1fr;} #page-category .footer-bottom {flex-direction:column;gap:10px;text-align:center;} #page-category .products {grid-template-columns:1fr 1fr;} } /* ---------- PAGE: SINGLE PRODUCT (#page-product) ---------- */ #page-product /* Product layout */ .product-layout {display:grid;grid-template-columns:80px 1fr 1fr;gap:24px;padding:36px 8% 80px;} #page-product .thumbs {display:flex;flex-direction:column;gap:14px;} #page-product .thumb {height:96px;cursor:pointer;border:1px solid transparent;transition:border-color .25s ease;} #page-product .thumb.active {border-color:var(--gold);} #page-product .th1 {background:linear-gradient(160deg,#ddd0b0,#a67c43);} #page-product .th2 {background:linear-gradient(160deg,#c9a877,#8a6a3f);} #page-product .th3 {background:linear-gradient(160deg,#e0d3ad,#a67c43);} #page-product .th4 {background:linear-gradient(160deg,#211f1c,#4d3f2a);} #page-product .main-image {height:620px;background:linear-gradient(160deg,#ddd0b0,#a67c43);position:relative;} #page-product .main-image .badge { position:absolute;top:20px;left:20px;background:var(--charcoal);color:var(--cream); font-size:10px;letter-spacing:2px;padding:6px 12px; } #page-product .product-details {padding:6px 0 0 20px;} #page-product .p-cat {font-size:12px;letter-spacing:3px;color:var(--gold);margin-bottom:12px;} #page-product .product-details h1 {font-size:32px;font-weight:500;margin-bottom:14px;} #page-product .rating {display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:13px;color:#5b564c;} #page-product .rating .stars {color:var(--gold);letter-spacing:2px;} #page-product .price-row {display:flex;align-items:center;gap:14px;margin-bottom:26px;} #page-product .price-row .price {font-size:24px;} #page-product .price-row .old-price {font-size:16px;color:#9a927e;text-decoration:line-through;} #page-product .desc {font-size:14px;line-height:1.8;color:#5b564c;margin-bottom:30px;} #page-product .option-group {margin-bottom:28px;} #page-product .option-group h4 {font-size:11px;letter-spacing:2px;color:var(--charcoal);margin-bottom:12px;display:flex;justify-content:space-between;} #page-product .option-group h4 span {color:var(--gold);cursor:pointer;font-weight:400;} #page-product .size-grid {display:flex;flex-wrap:wrap;gap:8px;} #page-product .size-box { width:42px;height:42px;border:1px solid var(--line); display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer; transition:border-color .25s ease,color .25s ease,background .25s ease; } #page-product .size-box:hover {border-color:var(--gold);color:var(--gold);} #page-product .size-box.active {background:var(--charcoal);border-color:var(--charcoal);color:var(--cream);} #page-product .color-grid {display:flex;gap:10px;} #page-product .color-dot {width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color .25s ease;} #page-product .color-dot.active {border-color:var(--charcoal);} #page-product .qty-row {display:flex;align-items:center;gap:20px;margin-bottom:26px;} #page-product .qty-control {display:flex;align-items:center;border:1px solid var(--line);} #page-product .qty-control button { width:38px;height:42px;background:none;border:none;font-size:16px;cursor:pointer;color:var(--charcoal); } #page-product .qty-control span {width:36px;text-align:center;font-size:14px;} #page-product .action-row {display:flex;gap:14px;margin-bottom:30px;} #page-product .add-bag { flex:1;padding:16px;background:var(--charcoal);color:var(--cream); border:none;font-size:12px;letter-spacing:3px;cursor:pointer;transition:background .3s ease; } #page-product .add-bag:hover {background:var(--gold);} #page-product .wishlist-btn { width:52px;border:1px solid var(--line);background:none;font-size:16px;cursor:pointer; transition:border-color .25s ease,color .25s ease; } #page-product .wishlist-btn:hover {border-color:var(--gold);color:var(--gold);} #page-product .add-status {font-size:12px;color:var(--emerald);min-height:18px;margin-bottom:22px;} #page-product .meta-list {border-top:1px solid var(--line);padding-top:20px;font-size:13px;color:#5b564c;} #page-product .meta-list div {display:flex;justify-content:space-between;margin-bottom:10px;} #page-product .meta-list span:first-child {color:var(--charcoal);} #page-product /* Tabs */ .tabs-section {padding:0 8% 90px;max-width:900px;} #page-product .tab-heads {display:flex;gap:36px;border-bottom:1px solid var(--line);margin-bottom:28px;} #page-product .tab-head { font-size:12px;letter-spacing:2px;padding-bottom:16px;cursor:pointer; color:#8a8272;border-bottom:1px solid transparent;margin-bottom:-1px; } #page-product .tab-head.active {color:var(--charcoal);border-color:var(--gold);} #page-product .tab-panel {display:none;font-size:14px;line-height:1.8;color:#5b564c;} #page-product .tab-panel.active {display:block;} #page-product .tab-panel ul {padding-left:20px;margin-top:10px;} #page-product .tab-panel li {margin-bottom:8px;} #page-product /* Related */ .related {padding:0 8% 90px;} #page-product .section-head {text-align:center;margin-bottom:48px;} #page-product .section-head h2 {font-size:30px;font-weight:500;} #page-product .related-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} #page-product .rel-card {cursor:pointer;} #page-product .rel-image {height:280px;} #page-product .r1 {background:linear-gradient(160deg,#8fa596,#2f4538);} #page-product .r2 {background:linear-gradient(160deg,#c98d9c,#6b2737);} #page-product .r3 {background:linear-gradient(160deg,#cbb98f,#5a4626);} #page-product .r4 {background:linear-gradient(160deg,#a6b3a9,#2f4538);} #page-product .rel-info {padding-top:14px;} #page-product .rel-info .p-name {font-family:'Playfair Display',serif;font-size:15px;margin-bottom:4px;} #page-product .rel-info .p-price {font-size:13px;color:#5b564c;} @media(max-width:900px) { #page-product nav {display:none;} #page-product .product-layout {grid-template-columns:1fr;padding:30px 6% 60px;} #page-product .thumbs {flex-direction:row;order:2;} #page-product .main-image {height:420px;order:1;} #page-product .product-details {padding:0;order:3;margin-top:20px;} #page-product .related-grid {grid-template-columns:1fr 1fr;} } @media(max-width:860px) { #page-product .footer-top {grid-template-columns:1fr 1fr;} #page-product .footer-bottom {flex-direction:column;gap:10px;text-align:center;} #page-product .related-grid {grid-template-columns:1fr 1fr;} } /* ---------- PAGE: GALLERY (#page-gallery) ---------- */ #page-gallery .gallery-hero {padding:18px 8% 32px;} #page-gallery .gallery-hero h1 {font-size:38px;font-weight:500;margin-bottom:10px;} #page-gallery .gallery-hero p {font-size:14px;color:#5b564c;max-width:520px;line-height:1.7;} #page-gallery /* Category tabs */ .gal-tabs { display:flex;gap:34px;padding:0 8%;border-bottom:1px solid var(--line); font-size:12px;letter-spacing:2px;overflow-x:auto; } #page-gallery .gal-tab {padding-bottom:18px;cursor:pointer;color:#8a8272;border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap;} #page-gallery .gal-tab.active {color:var(--charcoal);border-color:var(--gold);} #page-gallery /* Gallery grid */ .gallery-grid { display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:14px; padding:40px 8% 90px; } #page-gallery .gallery-item {position:relative;overflow:hidden;cursor:pointer;} #page-gallery .gallery-item .fill {position:absolute;inset:0;transition:transform .5s ease;} #page-gallery .gallery-item:hover .fill {transform:scale(1.08);} #page-gallery .gallery-item .g-label { position:absolute;left:0;right:0;bottom:0;padding:16px; background:linear-gradient(to top,rgba(33,31,28,0.65),transparent); color:#f4ede0; } #page-gallery .gallery-item .g-label .g-title {font-family:'Playfair Display',serif;font-size:15px;} #page-gallery .gallery-item .g-label .g-cat {font-size:10px;letter-spacing:2px;color:var(--gold-light);} #page-gallery .gallery-item .overlay-icon { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(33,31,28,0);color:#f4ede0;font-size:11px;letter-spacing:2px; opacity:0;transition:opacity .35s ease,background .35s ease; } #page-gallery .gallery-item:hover .overlay-icon {opacity:1;background:rgba(33,31,28,0.45);} #page-gallery .tall {grid-row:span 2;} #page-gallery .gi1 .fill {background:linear-gradient(150deg,#d8c39b,#a67c43);} #page-gallery .gi2 .fill {background:linear-gradient(150deg,#7f9587,#2f4538);} #page-gallery .gi3 .fill {background:linear-gradient(150deg,#b46f7f,#6b2737);} #page-gallery .gi4 .fill {background:linear-gradient(150deg,#c9b487,#8a6a3f);} #page-gallery .gi5 .fill {background:linear-gradient(150deg,#9fae9f,#3f5245);} #page-gallery .gi6 .fill {background:linear-gradient(150deg,#cbb2b8,#7a3a44);} #page-gallery .gi7 .fill {background:linear-gradient(150deg,#3a3327,#211f1c);} #page-gallery .gi8 .fill {background:linear-gradient(150deg,#d3c9a8,#7a6234);} #page-gallery .gi9 .fill {background:linear-gradient(150deg,#95a89a,#2f4538);} #page-gallery .gi10 .fill {background:linear-gradient(150deg,#c9a3ab,#6b2737);} #page-gallery .candle-illustration {position:absolute;bottom:12px;right:12px;width:50px;height:58px;z-index:1;} #page-gallery /* Modal popup */ .modal-overlay { position:fixed;inset:0;z-index:300; background:rgba(33,31,28,0.78); display:none;align-items:center;justify-content:center;padding:24px; } #page-gallery .modal-overlay.active {display:flex;} #page-gallery .modal-card { background:var(--cream);width:100%;max-width:660px; display:grid;grid-template-columns:1fr 1fr; position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.35); } #page-gallery .modal-image {position:relative;min-height:360px;overflow:hidden;} #page-gallery .modal-image svg {position:absolute;bottom:18px;right:18px;width:90px;height:106px;} #page-gallery .modal-info {padding:44px 38px;display:flex;flex-direction:column;justify-content:center;} #page-gallery .modal-info .m-cat {font-size:11px;letter-spacing:3px;color:var(--gold);margin-bottom:10px;} #page-gallery .modal-info h3 {font-size:26px;margin-bottom:14px;} #page-gallery .modal-info p {font-size:14px;line-height:1.7;color:#5b564c;margin-bottom:22px;} #page-gallery .modal-info .m-price {font-size:18px;margin-bottom:26px;} #page-gallery .btn { display:inline-block;padding:14px 28px;border:1px solid var(--gold); font-size:12px;letter-spacing:3px;color:var(--charcoal);width:fit-content; transition:background .3s ease,color .3s ease; } #page-gallery .btn:hover {background:var(--gold);color:var(--cream);} #page-gallery .modal-close { position:absolute;top:16px;right:16px;z-index:10; width:34px;height:34px;border-radius:50%; background:var(--charcoal);color:var(--cream); border:none;font-size:16px;cursor:pointer; display:flex;align-items:center;justify-content:center; } @media(max-width:960px) { #page-gallery nav {display:none;} #page-gallery .gallery-grid {grid-template-columns:repeat(2,1fr);grid-auto-rows:190px;} #page-gallery .gallery-hero h1 {font-size:28px;} } @media(max-width:640px) { #page-gallery .modal-card {grid-template-columns:1fr;} #page-gallery .modal-image {min-height:220px;} } /* ---------- PAGE: ABOUT (#page-about) ---------- */ #page-about /* Hero */ .about-hero { position:relative;height:56vh;min-height:380px;overflow:hidden; display:flex;align-items:center;justify-content:center;text-align:center; background:linear-gradient(120deg,#211f1c 0%,#3a3327 55%,#6b2737 100%); color:#f4ede0; } #page-about .about-hero .eyebrow {font-size:12px;letter-spacing:5px;color:var(--gold-light);margin-bottom:16px;} #page-about .about-hero h1 {font-size:48px;font-weight:500;max-width:640px;line-height:1.2;} #page-about /* Story */ .story { display:grid;grid-template-columns:1fr 1fr;gap:60px; padding:90px 8%;align-items:center; } #page-about .story-image {height:420px;background:linear-gradient(150deg,#d8c39b,#a67c43);} #page-about .story-text .eyebrow {font-size:12px;letter-spacing:5px;color:var(--gold);margin-bottom:14px;} #page-about .story-text h2 {font-size:32px;font-weight:500;margin-bottom:22px;} #page-about .story-text p {font-size:15px;line-height:1.8;color:#5b564c;margin-bottom:18px;} #page-about /* Stats */ .stats { display:grid;grid-template-columns:repeat(4,1fr); background:var(--charcoal);color:var(--cream); padding:60px 8%;text-align:center; } #page-about .stat .num {font-family:'Playfair Display',serif;font-size:38px;color:var(--gold-light);margin-bottom:8px;} #page-about .stat .label {font-size:11px;letter-spacing:2px;color:#c9c2b0;} #page-about /* Values */ .values {padding:90px 8%;} #page-about .section-head {text-align:center;margin-bottom:56px;} #page-about .section-head h2 {font-size:34px;font-weight:500;} #page-about .values-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:40px;} #page-about .value-card {text-align:center;padding:0 20px;} #page-about .value-card .mark { width:56px;height:56px;border:1px solid var(--gold);border-radius:50%; display:flex;align-items:center;justify-content:center;margin:0 auto 22px; font-family:'Playfair Display',serif;font-size:20px;color:var(--gold); } #page-about .value-card h3 {font-size:18px;margin-bottom:12px;} #page-about .value-card p {font-size:14px;line-height:1.7;color:#5b564c;} #page-about /* Team */ .team {padding:0 8% 90px;} #page-about .team-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:28px;} #page-about .team-card {text-align:center;} #page-about .team-photo {height:280px;margin-bottom:16px;} #page-about .t1 {background:linear-gradient(160deg,#ddd0b0,#a67c43);} #page-about .t2 {background:linear-gradient(160deg,#8fa596,#2f4538);} #page-about .t3 {background:linear-gradient(160deg,#c98d9c,#6b2737);} #page-about .t4 {background:linear-gradient(160deg,#cbb98f,#5a4626);} #page-about .team-card .t-name {font-family:'Playfair Display',serif;font-size:17px;margin-bottom:4px;} #page-about .team-card .t-role {font-size:11px;letter-spacing:2px;color:var(--gold);} #page-about /* CTA */ .about-cta { background:linear-gradient(120deg,#2f4538,#211f1c); color:#f4ede0;text-align:center;padding:80px 8%; } #page-about .about-cta h2 {font-size:30px;font-weight:500;margin-bottom:16px;} #page-about .about-cta p {font-size:14px;color:#c9c2b0;margin-bottom:30px;} #page-about .btn { display:inline-block;padding:14px 34px;border:1px solid var(--gold-light); font-size:12px;letter-spacing:3px;transition:background .3s ease,color .3s ease; } #page-about .btn:hover {background:var(--gold-light);color:var(--charcoal);} @media(max-width:900px) { #page-about nav {display:none;} #page-about .about-hero h1 {font-size:32px;} #page-about .story {grid-template-columns:1fr;gap:32px;padding:60px 6%;} #page-about .stats {grid-template-columns:repeat(2,1fr);gap:30px;} #page-about .values-grid {grid-template-columns:1fr;gap:36px;} #page-about .team-grid {grid-template-columns:1fr 1fr;} } /* ---------- PAGE: CONTACT (#page-contact) ---------- */ #page-contact /* Page intro */ .page-hero { padding:70px 8% 50px;text-align:center; border-bottom:1px solid var(--line); } #page-contact .page-hero .eyebrow {font-size:12px;letter-spacing:5px;color:var(--gold);margin-bottom:14px;} #page-contact .page-hero h1 {font-size:44px;font-weight:500;margin-bottom:16px;} #page-contact .page-hero p {font-size:15px;color:#5b564c;max-width:520px;margin:0 auto;line-height:1.7;} #page-contact /* Contact layout */ .contact-wrap { display:grid;grid-template-columns:1fr 1.2fr;gap:60px; padding:80px 8%; } #page-contact .info-col .info-block {margin-bottom:38px;} #page-contact .info-col h3 {font-size:14px;letter-spacing:2px;color:var(--gold);margin-bottom:12px;} #page-contact .info-col p, #page-contact .info-col a {font-size:15px;line-height:1.8;color:var(--charcoal);} #page-contact .map-block { height:220px;border:1px solid var(--line); display:flex;align-items:center;justify-content:center; background:linear-gradient(150deg,#e3d8bc,#cbb98f); color:var(--charcoal);font-size:12px;letter-spacing:3px;margin-top:10px; } #page-contact .social-row {display:flex;gap:18px;margin-top:8px;} #page-contact .social-row a { width:36px;height:36px;border:1px solid var(--gold);border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:12px; transition:background .3s ease,color .3s ease; } #page-contact .social-row a:hover {background:var(--gold);color:var(--cream);} #page-contact /* Form */ .contact-form h2 {font-size:26px;margin-bottom:10px;} #page-contact .contact-form > p {font-size:14px;color:#5b564c;margin-bottom:32px;} #page-contact .form-row {display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;} #page-contact .field {display:flex;flex-direction:column;} #page-contact .field label {font-size:11px;letter-spacing:2px;color:var(--gold);margin-bottom:8px;} #page-contact .field input, #page-contact .field select, #page-contact .field textarea { background:transparent;border:none;border-bottom:1px solid var(--line); outline:none;padding:10px 2px;font-family:'Jost',sans-serif;font-size:14px; color:var(--charcoal);transition:border-color .25s ease; } #page-contact .field input:focus, #page-contact .field select:focus, #page-contact .field textarea:focus {border-color:var(--gold);} #page-contact .field textarea {resize:vertical;min-height:110px;} #page-contact .full {grid-column:1/3;} #page-contact .submit-btn { margin-top:10px;padding:15px 40px;background:var(--charcoal);color:var(--cream); border:none;font-size:12px;letter-spacing:3px;cursor:pointer; transition:background .3s ease; } #page-contact .submit-btn:hover {background:var(--gold);} #page-contact .form-status {margin-top:18px;font-size:13px;color:var(--emerald);min-height:20px;} @media(max-width:860px) { #page-contact nav {display:none;} #page-contact .contact-wrap {grid-template-columns:1fr;padding:60px 6%;gap:50px;} #page-contact .form-row {grid-template-columns:1fr;} #page-contact .full {grid-column:1/2;} #page-contact .page-hero h1 {font-size:32px;} } #page-contact /* Footer */ .footer-top { padding:70px 8% 40px; display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px; border-top:1px solid var(--line); } #page-contact .footer-bottom { display:flex;justify-content:space-between;align-items:center; padding:22px 8%;border-top:1px solid var(--line); font-size:12px;letter-spacing:1px;color:#5b564c; } /* ---------- PAGE: JOURNAL LISTING (#page-blog) ---------- */ #page-blog .blog-hero {padding:18px 8% 32px;text-align:center;} #page-blog .blog-hero .eyebrow {font-size:12px;letter-spacing:5px;color:var(--gold);margin-bottom:14px;} #page-blog .blog-hero h1 {font-size:40px;font-weight:500;margin-bottom:12px;} #page-blog .blog-hero p {font-size:14px;color:#5b564c;max-width:480px;margin:0 auto;line-height:1.7;} #page-blog /* Featured post */ .featured { margin:20px 8% 60px;display:grid;grid-template-columns:1.2fr 1fr; border:1px solid var(--line);overflow:hidden;cursor:pointer; } #page-blog .featured-image {min-height:380px;background:linear-gradient(150deg,#d8c39b,#a67c43);} #page-blog .featured-info {padding:44px;display:flex;flex-direction:column;justify-content:center;} #page-blog .featured-info .f-cat {font-size:11px;letter-spacing:2px;color:var(--gold);margin-bottom:14px;} #page-blog .featured-info h2 {font-size:28px;margin-bottom:16px;line-height:1.3;} #page-blog .featured-info p {font-size:14px;color:#5b564c;line-height:1.7;margin-bottom:20px;} #page-blog .featured-info .f-meta {font-size:12px;color:#8a8272;letter-spacing:1px;} #page-blog /* Category tabs */ .blog-tabs { display:flex;gap:34px;padding:0 8%;border-bottom:1px solid var(--line); font-size:12px;letter-spacing:2px;overflow-x:auto; } #page-blog .blog-tab {padding-bottom:18px;cursor:pointer;color:#8a8272;border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap;} #page-blog .blog-tab.active {color:var(--charcoal);border-color:var(--gold);} #page-blog /* Blog grid */ .blog-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px; padding:44px 8% 30px; } #page-blog .post-card {cursor:pointer;} #page-blog .post-image {height:260px;margin-bottom:18px;} #page-blog .b1 {background:linear-gradient(160deg,#8fa596,#2f4538);} #page-blog .b2 {background:linear-gradient(160deg,#c98d9c,#6b2737);} #page-blog .b3 {background:linear-gradient(160deg,#cbb98f,#5a4626);} #page-blog .b4 {background:linear-gradient(160deg,#a6b3a9,#2f4538);} #page-blog .b5 {background:linear-gradient(160deg,#d3c9a8,#7a6234);} #page-blog .b6 {background:linear-gradient(160deg,#c9a3ab,#6b2737);} #page-blog .post-info .p-cat {font-size:11px;letter-spacing:2px;color:var(--gold);margin-bottom:10px;} #page-blog .post-info h3 {font-size:19px;line-height:1.4;margin-bottom:10px;} #page-blog .post-info p {font-size:13px;color:#5b564c;line-height:1.7;margin-bottom:12px;} #page-blog .post-info .p-meta {font-size:11px;color:#8a8272;letter-spacing:1px;} #page-blog /* Newsletter */ .newsletter { background:var(--charcoal);color:var(--cream); padding:70px 8%;text-align:center;margin-top:40px; } #page-blog .newsletter h2 {font-size:26px;font-weight:500;margin-bottom:12px;} #page-blog .newsletter p {font-size:14px;color:#c9c2b0;margin-bottom:30px;} #page-blog .newsletter-form { display:flex;justify-content:center;gap:0;max-width:420px;margin:0 auto; border-bottom:1px solid var(--gold-light);padding-bottom:8px; } #page-blog .newsletter-form input { flex:1;background:transparent;border:none;outline:none; color:var(--cream);font-family:'Jost',sans-serif;font-size:14px; letter-spacing:1px;padding:10px 4px; } #page-blog .newsletter-form input::placeholder {color:#8a8272;} #page-blog .newsletter-form button { background:none;border:none;color:var(--gold-light); font-size:12px;letter-spacing:3px;cursor:pointer;padding:10px 14px;white-space:nowrap; } #page-blog .newsletter-form button:hover {color:#f4ede0;} #page-blog .pagination {display:flex;justify-content:center;gap:14px;padding:60px 8% 0;font-size:13px;} #page-blog .pagination a, #page-blog .pagination span { width:34px;height:34px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);cursor:pointer;transition:border-color .25s ease,color .25s ease; } #page-blog .pagination a:hover, #page-blog .pagination .active {border-color:var(--gold);color:var(--gold);} @media(max-width:900px) { #page-blog nav {display:none;} #page-blog .featured {grid-template-columns:1fr;margin:20px 6% 40px;} #page-blog .blog-grid {grid-template-columns:1fr 1fr;padding:36px 6% 10px;} #page-blog .blog-hero h1 {font-size:28px;} } @media(max-width:600px) { #page-blog .blog-grid {grid-template-columns:1fr;} } /* ---------- PAGE: JOURNAL SINGLE POST (#page-blog-single) ---------- */ #page-blog-single /* Article header */ .article-head {padding:36px 12% 0;text-align:center;max-width:900px;margin:0 auto;} #page-blog-single .article-head .a-cat {font-size:12px;letter-spacing:4px;color:var(--gold);margin-bottom:18px;} #page-blog-single .article-head h1 {font-size:44px;font-weight:500;line-height:1.25;margin-bottom:22px;} #page-blog-single .article-head .a-meta {font-size:13px;color:#8a8272;letter-spacing:1px;} #page-blog-single .article-head .a-meta span {margin:0 8px;} #page-blog-single .article-hero { height:56vh;min-height:360px;margin:40px 8% 0; background:linear-gradient(150deg,#d8c39b,#a67c43); } #page-blog-single /* Article body */ .article-body {max-width:700px;margin:0 auto;padding:56px 8% 20px;} #page-blog-single .article-body p {font-size:16px;line-height:1.9;color:#3a362f;margin-bottom:24px;} #page-blog-single .article-body h2 {font-size:24px;margin:44px 0 18px;} #page-blog-single .article-body .drop {font-size:19px;color:var(--charcoal);} #page-blog-single .pull-quote { border-left:2px solid var(--gold);padding:6px 0 6px 28px;margin:44px 0; } #page-blog-single .pull-quote p {font-family:'Playfair Display',serif;font-size:22px;font-style:italic;color:var(--charcoal);line-height:1.5;} #page-blog-single .inline-image {height:340px;margin:44px 0;background:linear-gradient(150deg,#8fa596,#2f4538);} #page-blog-single .inline-caption {font-size:12px;color:#8a8272;letter-spacing:1px;margin-top:-30px;margin-bottom:44px;text-align:center;} #page-blog-single /* Author + share */ .article-footer { max-width:700px;margin:0 auto;padding:20px 8% 60px; display:flex;justify-content:space-between;align-items:center; border-top:1px solid var(--line);border-bottom:1px solid var(--line); margin-top:40px;padding-top:30px;padding-bottom:30px; } #page-blog-single .author {display:flex;align-items:center;gap:14px;} #page-blog-single .author-photo {width:52px;height:52px;border-radius:50%;background:linear-gradient(150deg,#ddd0b0,#a67c43);} #page-blog-single .author-name {font-size:14px;} #page-blog-single .author-role {font-size:11px;letter-spacing:1px;color:#8a8272;} #page-blog-single .share {display:flex;gap:14px;font-size:11px;letter-spacing:2px;} #page-blog-single .share a {border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .25s ease,color .25s ease;} #page-blog-single .share a:hover {border-color:var(--gold);color:var(--gold);} #page-blog-single /* Related posts */ .related-posts {padding:70px 8% 90px;} #page-blog-single .section-head {text-align:center;margin-bottom:48px;} #page-blog-single .section-head h2 {font-size:30px;font-weight:500;} #page-blog-single .related-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:32px;} #page-blog-single .rp-card {cursor:pointer;} #page-blog-single .rp-image {height:220px;margin-bottom:16px;} #page-blog-single .rp1 {background:linear-gradient(160deg,#c98d9c,#6b2737);} #page-blog-single .rp2 {background:linear-gradient(160deg,#cbb98f,#5a4626);} #page-blog-single .rp3 {background:linear-gradient(160deg,#a6b3a9,#2f4538);} #page-blog-single .rp-card .p-cat {font-size:11px;letter-spacing:2px;color:var(--gold);margin-bottom:8px;} #page-blog-single .rp-card h3 {font-size:16px;line-height:1.4;} @media(max-width:900px) { #page-blog-single nav {display:none;} #page-blog-single .article-head h1 {font-size:30px;} #page-blog-single .article-footer {flex-direction:column;gap:20px;align-items:flex-start;} #page-blog-single .related-grid {grid-template-columns:1fr;} } @media (max-width: 860px) { #page-home .products { grid-template-columns: repeat(2, 1fr); display: block; gap: 32px 24px; margin-bottom: 29px; } #page-home .product-card { cursor: pointer; margin-bottom: 20px; } }