*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: #fff; font-family: 'Inter', sans-serif; color: #1A1A1A; font-weight: 400; line-height: 1.4; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } .container { max-width: 1680px; margin: 0 auto; padding: 0 24px; } @media (max-width: 900px) { .container { padding: 0 18px; } } @keyframes fadeInUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } } @keyframes scaleIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } } @keyframes glowPulse { 0%,100%{text-shadow:0 0 5px rgba(184,154,90,.3);} 50%{text-shadow:0 0 20px rgba(184,154,90,.6);} } @keyframes slideUpBlur { 0%{opacity:0;transform:translateY(40px) blur(12px);} 100%{opacity:1;transform:translateY(0) blur(0);} } @keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} } .animate-on-scroll { opacity:0; transform:translateY(30px); transition: all .8s cubic-bezier(.2,.9,.4,1); } .animate-on-scroll.visible { opacity:1; transform:translateY(0); } .overline { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:#B89A5A; font-weight:500; margin-bottom:20px; display:inline-block; position:relative; } .overline::after { content:''; position:absolute; bottom:-4px; left:0; width:30px; height:1px; background:#B89A5A; transition:width .3s; } .heading-lg { font-size:48px; font-weight:400; line-height:1.1; letter-spacing:-.02em; color:#1A1A1A; } .heading-md { font-size:32px; font-weight:400; line-height:1.2; letter-spacing:-.01em; color:#1A1A1A; } .body-text { font-size:15px; line-height:1.6; color:#5A5A5A; } .body-small { font-size:13px; line-height:1.5; color:#7A7A7A; } @media (max-width:768px) { .heading-lg { font-size:32px; } .heading-md { font-size:24px; } } .btn-primary, .btn-gold, .btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 32px; font-size:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase; border:none; cursor:pointer; position:relative; overflow:hidden; z-index:1; transition: all .4s cubic-bezier(.2,.9,.4,1); } .btn-primary::before, .btn-gold::before, .btn-outline::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); transition:left .6s; z-index:-1; } .btn-primary:hover::before, .btn-gold:hover::before, .btn-outline:hover::before { left:100%; } .btn-primary { background:#1A1A1A; color:#fff; box-shadow:0 4px 15px rgba(0,0,0,.1); } .btn-primary:hover { background:#B89A5A; transform:translateY(-3px); box-shadow:0 8px 25px rgba(184,154,90,.3); } .btn-gold { background:#B89A5A; color:#fff; box-shadow:0 4px 15px rgba(184,154,90,.2); } .btn-gold:hover { background:#9A7A3A; transform:translateY(-3px); box-shadow:0 8px 25px rgba(184,154,90,.4); } .btn-outline { background:transparent; color:#1A1A1A; border:1px solid #E0E0E0; } .btn-outline:hover { border-color:#B89A5A; color:#B89A5A; transform:translateY(-2px); } .header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.95); backdrop-filter:blur(20px); border-bottom:1px solid rgba(236,236,236,.6); } .header-inner { display:flex; justify-content:space-between; align-items:center; max-width:1680px; margin:0 auto; padding:20px 24px; flex-wrap:wrap; gap:24px; } @media (max-width:900px) { .header-inner { padding:14px 18px; } } .logo { text-decoration:none; transition:transform .3s; display:inline-block; } .logo:hover { transform:scale(1.02); } .logo-main { font-size:22px; font-weight:500; letter-spacing:1px; color:#1A1A1A; } .logo-slogan { font-size:10px; letter-spacing:1px; color:#B89A5A; margin-top:4px; } .nav { display:flex; gap:32px; align-items:center; flex-wrap:wrap; } .nav-link { font-size:12px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:#1A1A1A; position:relative; transition:color .3s; } .nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:#B89A5A; transition:width .3s; } .nav-link:hover::after, .nav-link.active::after { width:100%; } .nav-link:hover, .nav-link.active { color:#B89A5A; } .dropdown { position:relative; } .dropdown-menu { position:absolute; top:36px; left:-20px; background:#fff; min-width:240px; box-shadow:0 16px 40px rgba(0,0,0,.08); border:1px solid #ECECEC; padding:12px 0; opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .25s ease; z-index:200; } .dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateY(0); } .dropdown-title { font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#B89A5A; padding:8px 24px 4px; } .dropdown-menu a { display:block; padding:10px 24px; font-size:13px; color:#4A4A4A; transition:all .2s; } .dropdown-menu a:hover { background:#F8F8F8; color:#B89A5A; padding-left:28px; } .ecom-icons { display:flex; gap:24px; align-items:center; } .ecom-icon { position:relative; font-size:18px; color:#1A1A1A; cursor:pointer; transition:all .2s; user-select:none; } .ecom-icon:hover { color:#B89A5A; transform:scale(1.1); } .cart-count, .wishlist-count { position:absolute; top:-8px; right:-12px; background:#B89A5A; color:#fff; font-size:9px; font-weight:600; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; animation:pulse 2s infinite; } .nav-toggle { display:none; font-size:22px; color:#1A1A1A; background:none; border:none; padding:4px; } @media (max-width:900px) { .nav-toggle { display:block; } .nav { display:none; position:fixed; top:var(--nav-h,72px); left:0; right:0; background:#fff; flex-direction:column; align-items:flex-start; padding:20px 24px; border-bottom:1px solid #ECECEC; box-shadow:0 8px 24px rgba(0,0,0,.08); gap:16px; z-index:999; } .nav.open { display:flex; } .dropdown-menu { position:static; box-shadow:none; border:none; padding:4px 0 4px 16px; opacity:1; visibility:visible; transform:none; display:none; } .dropdown.open .dropdown-menu { display:block; } } .section { padding:80px 0; } .section-sm { padding:48px 0; } .section-border-top { padding:80px 0; border-top:1px solid #ECECEC; } .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:80px; } .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; } .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:48px; } @media (max-width:1024px) { .grid-3 { grid-template-columns:repeat(2,1fr); } .grid-4 { grid-template-columns:repeat(2,1fr); } } @media (max-width:768px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; gap:32px; } } .hero-slider { position:relative; width:100%; height:85vh; min-height:680px; overflow:hidden; } .hero-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.2s ease; display:flex; align-items:flex-end; } .hero-slide.active { opacity:1; z-index:2; } .hero-slide::before { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.2)); } .slide-content { position:relative; z-index:3; max-width:560px; margin:0 0 80px 80px; opacity:0; transform:translateY(30px); } .hero-slide.active .slide-content { animation:slideUpBlur .8s cubic-bezier(.2,.9,.4,1) .2s forwards; } .slide-label { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#B89A5A; margin-bottom:24px; } .slide-title { font-size:56px; font-weight:400; line-height:1.05; color:#fff; margin-bottom:24px; } .slide-desc { font-size:16px; color:rgba(255,255,255,.9); margin-bottom:32px; line-height:1.6; } .slide-link { color:#fff; font-size:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid #B89A5A; padding-bottom:6px; transition:color .3s; } .slide-link:hover { color:#B89A5A; } .slider-controls { position:absolute; bottom:40px; right:80px; z-index:20; display:flex; gap:12px; } .slider-btn { background:rgba(0,0,0,.4); backdrop-filter:blur(8px); border:none; color:#fff; font-size:20px; width:48px; height:48px; cursor:pointer; transition:all .3s; } .slider-btn:hover { background:#B89A5A; } @media (max-width:768px) { .slide-content { margin:0 0 60px 24px; } .slide-title { font-size:36px; } .slider-controls { right:24px; bottom:24px; } } .stat-item { border-left:1px solid #ECECEC; padding-left:24px; } .stat-number { font-size:56px; font-weight:300; color:#1A1A1A; line-height:1; margin-bottom:12px; } .filters-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; padding:32px 0; border-bottom:1px solid #ECECEC; margin-bottom:56px; } .filter-group { display:flex; gap:8px; flex-wrap:wrap; } .filter-chip { padding:8px 20px; font-size:12px; font-weight:500; color:#5A5A5A; background:transparent; border:1px solid #E0E0E0; cursor:pointer; transition:all .2s; } .filter-chip.active, .filter-chip:hover { border-color:#B89A5A; color:#B89A5A; } .sort-select { padding:8px 16px; font-size:12px; font-weight:500; background:transparent; border:1px solid #E0E0E0; cursor:pointer; font-family:inherit; } .product-card { text-decoration:none; color:inherit; display:block; transition:transform .4s ease; cursor:pointer; } .product-card:hover { transform:translateY(-6px); } .product-image-wrapper { position:relative; margin-bottom:24px; overflow:hidden; background:#EFEFEF; } .product-image { width:100%; aspect-ratio:1/1; background-size:contain; background-repeat:no-repeat; background-position:center; background-color:#EFEFEF; transition:transform .6s ease; } .product-card:hover .product-image { transform:scale(1.03); } .product-badge { position:absolute; top:12px; left:12px; background:#B89A5A; color:#fff; font-size:11px; font-weight:600; padding:4px 10px; z-index:2; letter-spacing:.5px; text-transform:uppercase; } .product-badge-sale { background:#1A1A1A; left:auto !important; right:12px !important; } .product-wishlist { position:absolute; top:16px; right:16px; background:rgba(255,255,255,.95); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; z-index:2; border:none; } .product-wishlist:hover, .product-wishlist.active { background:#B89A5A; color:#fff; } .product-quickview { position:absolute; bottom:0; left:0; right:0; background:rgba(26,26,26,.92); color:#fff; text-align:center; padding:14px; font-size:11px; font-weight:500; letter-spacing:1px; text-transform:uppercase; transform:translateY(100%); transition:transform .4s ease; cursor:pointer; z-index:2; } .product-image-wrapper:hover .product-quickview { transform:translateY(0); } .product-category { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#B89A5A; margin-bottom:8px; } .product-title { font-size:18px; font-weight:500; margin-bottom:8px; } .product-rating { display:flex; align-items:center; gap:8px; margin:12px 0; } .stars { color:#B89A5A; font-size:12px; letter-spacing:2px; } .product-price { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; flex-wrap:wrap; } .price-old { font-size:13px; text-decoration:line-through; color:#C0C0C0; } .price-current { font-size:20px; font-weight:500; color:#1A1A1A; } .price-b2b { font-size:11px; color:#B89A5A; margin-top:4px; margin-bottom:20px; font-weight:500; } .btn-cart { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#F5F5F5; color:#1A1A1A; padding:12px 20px; font-size:12px; font-weight:500; transition:all .2s; border:none; cursor:pointer; width:100%; font-family:inherit; } .btn-cart:hover, .btn-cart-added { background:#B89A5A; color:#fff; } .new-arrivals { background:#F8F6F2; } .new-arrivals-header { text-align:center; margin-bottom:56px; } .new-arrivals-badge { display:inline-block; background:#B89A5A; color:#fff; font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; padding:6px 16px; margin-bottom:20px; } .new-arrivals-title { font-size:40px; font-weight:400; margin-bottom:16px; letter-spacing:-.02em; } .new-arrivals-desc { font-size:15px; color:#5A5A5A; max-width:500px; margin:0 auto; } .new-arrivals-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; } @media (max-width:1024px) { .new-arrivals-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:600px) { .new-arrivals-grid { grid-template-columns:repeat(2,1fr); gap:14px 10px; } } .new-arrival-card { background:#fff; transition:transform .4s; cursor:pointer; } .new-arrival-card:hover { transform:translateY(-6px); } .new-arrival-image-wrapper { position:relative; overflow:hidden; } .new-arrival-image { aspect-ratio:1/1; background-size:contain; background-repeat:no-repeat; background-position:center; background-color:#EFEFEF; transition:transform .5s; } .new-arrival-card:hover .new-arrival-image { transform:scale(1.04); } .new-arrival-tag { position:absolute; top:12px; left:12px; background:#B89A5A; color:#fff; font-size:10px; font-weight:600; padding:4px 10px; letter-spacing:.5px; } .new-arrival-wishlist { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; border:none; } .new-arrival-wishlist:hover, .new-arrival-wishlist.active { background:#B89A5A; color:#fff; } .new-arrival-info { padding:20px 0 0; } .new-arrival-name { font-size:15px; font-weight:500; margin-bottom:8px; } .new-arrival-price { font-size:17px; font-weight:500; color:#1A1A1A; } .new-arrival-old-price { font-size:13px; text-decoration:line-through; color:#C0C0C0; margin-left:8px; } .solutions-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; } @media (max-width:900px) { .solutions-grid { grid-template-columns:1fr; } } .solution-card { border:1px solid #ECECEC; display:flex; flex-direction:column; overflow:hidden; transition:all .4s; } .solution-card:hover { box-shadow:0 20px 40px rgba(0,0,0,.08); transform:translateY(-4px); } .solution-image { aspect-ratio:16/9; background-size:cover; background-position:center; transition:transform .5s; } .solution-card:hover .solution-image { transform:scale(1.04); } .solution-content { padding:32px; flex:1; display:flex; flex-direction:column; } .solution-icon { font-size:24px; color:#B89A5A; margin-bottom:16px; } .solution-title { font-size:20px; font-weight:500; margin-bottom:12px; } .solution-desc { font-size:14px; color:#5A5A5A; line-height:1.6; margin-bottom:20px; flex:1; } .solution-features { list-style:none; margin-bottom:24px; display:flex; flex-direction:column; gap:8px; } .solution-features li { font-size:13px; color:#5A5A5A; display:flex; align-items:center; gap:8px; } .solution-features li i { color:#B89A5A; font-size:11px; } .solution-price { font-size:18px; font-weight:500; color:#B89A5A; margin-bottom:20px; } .solution-price span { font-size:12px; color:#7A7A7A; font-weight:400; } .solution-btn { background:#1A1A1A; color:#fff; border:none; padding:12px 24px; font-size:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all .3s; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; font-family:inherit; } .solution-btn:hover { background:#B89A5A; } .feature-item { border-top:1px solid #ECECEC; padding:56px 0; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; opacity:0; transform:translateY(30px); transition:all .6s ease; } .feature-item.visible { opacity:1; transform:translateY(0); } .feature-number { font-size:48px; font-weight:300; color:#B89A5A; line-height:1; flex-shrink:0; } .feature-content { flex:1; max-width:500px; } .feature-title { font-size:20px; font-weight:500; margin-bottom:12px; } .banner-gold { background:#F8F6F2; padding:80px; text-align:center; } @media (max-width:768px) { .banner-gold { padding:48px 24px; } } .form-group { margin-bottom:20px; } .form-group input, .form-group select, .form-group textarea { width:100%; padding:14px; border:1px solid #E0E0E0; font-family:inherit; font-size:14px; transition:border-color .2s; background:#fff; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:#B89A5A; } .collection-hero { padding:80px 0; background:#fff; } .collection-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } @media (max-width:1024px) { .collection-hero-grid { grid-template-columns:1fr; gap:48px; } } .collection-hero-image { aspect-ratio:4/5; background-size:cover; background-position:center; border-radius:2px; } .collection-hero-title { font-size:72px; font-weight:300; line-height:1; letter-spacing:-.03em; color:#1A1A1A; margin-bottom:32px; } @media (max-width:768px) { .collection-hero-title { font-size:48px; } } .feature-list { display:flex; flex-direction:column; gap:16px; margin-bottom:40px; } .feature-item-collection { display:flex; align-items:flex-start; gap:16px; } .feature-icon { color:#B89A5A; font-size:18px; line-height:1; flex-shrink:0; margin-top:2px; } .feature-text { font-size:14px; color:#5A5A5A; line-height:1.5; } .tabs-section { border-top:1px solid #ECECEC; border-bottom:1px solid #ECECEC; } .tabs-header { display:flex; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; } .tab-btn { background:transparent; border:none; padding:20px 32px; font-size:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:#7A7A7A; cursor:pointer; transition:all .3s; position:relative; white-space:nowrap; flex-shrink:0; } .tab-btn::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:#B89A5A; transition:width .3s; } .tab-btn.active::after, .tab-btn:hover::after { width:100%; } .tab-btn.active { color:#B89A5A; } .tab-content { display:none; padding:60px 0; animation:fadeInUp .4s ease; } .tab-content.active { display:block; } .products-section { padding:80px 0; } .products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } @media (max-width:1280px) { .products-grid { grid-template-columns:repeat(3,1fr); } } @media (max-width:1024px) { .products-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:600px) { .products-grid { grid-template-columns:repeat(2,1fr); gap:14px 10px; } } .products-filter-bar { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:48px; align-items:center; } .products-count { font-size:13px; color:#7A7A7A; margin-left:auto; } .specs-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:48px; } @media (max-width:768px) { .specs-grid { grid-template-columns:1fr; } } .specs-group { margin-bottom:32px; } .specs-group h4 { font-size:14px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#B89A5A; margin-bottom:20px; } .specs-table { width:100%; } .specs-table tr { border-bottom:1px solid #ECECEC; } .specs-table td { padding:12px 0; font-size:14px; } .specs-table td:first-child { font-weight:500; color:#1A1A1A; width:40%; } .documents-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; } @media (max-width:768px) { .documents-grid { grid-template-columns:1fr; } } .document-card { border:1px solid #ECECEC; padding:24px; text-align:center; transition:all .2s; } .document-card:hover { border-color:#B89A5A; box-shadow:0 8px 24px rgba(184,154,90,.1); } .document-icon { font-size:32px; color:#B89A5A; margin-bottom:16px; } .document-name { font-size:14px; font-weight:500; margin-bottom:8px; } .document-size { font-size:12px; color:#7A7A7A; margin-bottom:16px; } .document-link { font-size:12px; font-weight:500; color:#B89A5A; transition:color .2s; } .document-link:hover { color:#9A7A3A; text-decoration:underline; } .material-category { margin-bottom:80px; } .material-category-title { font-size:28px; font-weight:400; margin-bottom:32px; padding-bottom:16px; border-bottom:1px solid #ECECEC; } .material-colors { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:32px; } .color-swatch { width:48px; height:48px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:all .3s; } .color-swatch:hover { transform:scale(1.15); border-color:#B89A5A; box-shadow:0 0 0 3px rgba(184,154,90,.3); } .material-specs { background:#F8F8F8; padding:32px; margin-top:24px; } .sphere-section { padding:80px 0; background:#F8F6F2; } .sphere-tabs { display:flex; gap:12px; margin-bottom:48px; flex-wrap:wrap; } .sphere-tab { padding:14px 28px; font-size:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase; background:#fff; border:1px solid #E0E0E0; cursor:pointer; transition:all .3s; } .sphere-tab.active, .sphere-tab:hover { border-color:#B89A5A; color:#B89A5A; background:#fff; } .sphere-content { display:none; } .sphere-content.active { display:block; animation:fadeInUp .4s ease; } .sphere-main-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin-bottom:48px; } @media (max-width:900px) { .sphere-main-grid { grid-template-columns:1fr; } } .sphere-description h3 { font-size:28px; font-weight:400; margin-bottom:16px; } .sphere-highlight { font-size:14px; font-weight:500; color:#B89A5A; margin-bottom:20px; } .sphere-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:24px 0; } .sphere-stat-number { font-size:28px; font-weight:300; color:#1A1A1A; margin-bottom:4px; } .sphere-stat-label { font-size:11px; color:#7A7A7A; text-transform:uppercase; letter-spacing:.5px; } .feature-list-enhanced { list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:20px; } .feature-list-enhanced li { font-size:14px; color:#5A5A5A; display:flex; align-items:center; gap:10px; } .feature-list-enhanced li i { color:#B89A5A; font-size:12px; } .sphere-image { aspect-ratio:4/3; background-size:cover; background-position:center; border-radius:2px; box-shadow:0 20px 40px rgba(0,0,0,.1); } .tech-specs { background:#fff; border:1px solid #ECECEC; padding:32px; margin:40px 0; } .tech-specs h4 { font-size:14px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#B89A5A; margin-bottom:24px; } .tech-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } @media (max-width:768px) { .tech-grid { grid-template-columns:repeat(2,1fr); } } .tech-item { text-align:center; } .tech-value { font-size:20px; font-weight:500; color:#1A1A1A; margin-bottom:8px; } .tech-label { font-size:12px; color:#7A7A7A; } .project-calculator { background:#F8F6F2; padding:40px; margin:48px 0; border:1px solid #ECECEC; } .project-calculator h4 { font-size:20px; font-weight:500; margin-bottom:24px; } .calculator-form { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } @media (max-width:900px) { .calculator-form { grid-template-columns:1fr; } } .calc-field { display:flex; flex-direction:column; gap:8px; } .calc-field label { font-size:12px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:#7A7A7A; } .calc-field input, .calc-field select { padding:14px; border:1px solid #E0E0E0; font-family:inherit; font-size:14px; background:#fff; transition:border-color .3s; } .calc-field input:focus, .calc-field select:focus { outline:none; border-color:#B89A5A; } .calc-result { background:#fff; padding:24px; margin-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; } .calc-result-price { font-size:28px; font-weight:500; color:#B89A5A; } .breadcrumb-nav { padding:24px 0; font-size:13px; color:#7A7A7A; display:flex; gap:8px; align-items:center; flex-wrap:wrap; border-bottom:1px solid #ECECEC; } .breadcrumb-nav a { color:#7A7A7A; transition:color .2s; } .breadcrumb-nav a:hover { color:#B89A5A; } .breadcrumb-nav span { color:#B89A5A; } .product-page { padding:40px 0 80px; } .product-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(400px,1fr); gap:48px; margin-bottom:80px; align-items:start; } .product-grid > * { min-width:0; } @media (max-width:1280px) { .product-grid { grid-template-columns:minmax(0,1.2fr) minmax(340px,1fr); gap:36px; } } @media (max-width:1100px) { .product-grid { grid-template-columns:1fr; gap:40px; } } .product-gallery { position:sticky; top:90px; height:fit-content; min-width:0; } @media (max-width:1100px) { .product-gallery { position:static; } } .main-image { width:100%; aspect-ratio:4/5; background-size:cover; background-position:center; margin-bottom:24px; border-radius:2px; transition:transform .5s ease,box-shadow .5s; cursor:zoom-in; } .main-image:hover { transform:scale(1.01); box-shadow:0 20px 40px rgba(0,0,0,.1); } .thumbnail-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .thumbnail { aspect-ratio:1; background-size:cover; background-position:center; cursor:pointer; border:2px solid transparent; transition:all .3s; } .thumbnail:hover, .thumbnail.active { border-color:#B89A5A; } .product-info-sticky { position:sticky; top:90px; height:fit-content; min-width:0; } @media (max-width:1100px) { .product-info-sticky { position:static; } } .product-info { display:flex; flex-direction:column; gap:16px; min-width:0; position:relative; z-index:1; background:#fff; } .product-info .product-rating, .product-info .price-b2b { margin:0; } .product-info > * { min-width:0; } .product-title-lg { font-size:clamp(24px, 2.1vw, 34px); font-weight:400; line-height:1.18; letter-spacing:-.01em; margin:0; overflow-wrap:anywhere; hyphens:auto; } @media (max-width:768px) { .product-title-lg { font-size:26px; } } .product-price { align-items:baseline; gap:10px 12px; flex-wrap:wrap; margin:0; } .product-price .price-current { font-size:30px !important; line-height:1.1; white-space:nowrap; } .product-price .price-old { white-space:nowrap; } .discount-badge { flex-shrink:0; background:#B89A5A; color:#fff; padding:4px 12px; font-size:12px; font-weight:500; animation:glowPulse 2s infinite; } .variant-section { border-top:1px solid #ECECEC; padding-top:24px; } .variant-title { font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#B89A5A; margin-bottom:16px; } .color-options { display:flex; gap:12px; flex-wrap:wrap; } .color-option { width:44px; height:44px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:all .3s; position:relative; } .color-option:hover, .color-option.active { transform:scale(1.1); border-color:#B89A5A; box-shadow:0 0 0 2px rgba(184,154,90,.3); } .color-price-tooltip { position:absolute; bottom:-24px; left:50%; transform:translateX(-50%); background:#1A1A1A; color:#fff; padding:3px 8px; font-size:10px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s; border-radius:2px; } .color-option:hover .color-price-tooltip { opacity:1; } .material-options, .type-options, .combo-options { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; } .material-option, .type-option, .combo-option { padding:10px 18px; border:1px solid #E0E0E0; cursor:pointer; font-size:13px; transition:all .3s; } .material-option:hover, .type-option:hover, .combo-option:hover, .material-option.active, .type-option.active, .combo-option.active { border-color:#B89A5A; background:#F8F4EE; color:#B89A5A; } .option-price-diff { font-size:11px; color:#B89A5A; margin-left:4px; } .tech-features { background:#F8F8F8; padding:20px; margin:8px 0; } .tech-features h4 { font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#B89A5A; margin-bottom:16px; } .tech-features-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .tech-feature-item { display:flex; align-items:flex-start; gap:12px; } .tech-feature-icon { width:32px; height:32px; background:#fff; display:flex; align-items:center; justify-content:center; color:#B89A5A; flex-shrink:0; } .tech-feature-text { font-size:13px; font-weight:500; } .tech-feature-desc { font-size:11px; color:#7A7A7A; } .cart-block { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:14px 16px; margin:20px 0; padding:20px 0; border-top:1px solid #ECECEC; border-bottom:1px solid #ECECEC; } .cart-block .cart-price-block { justify-self:end; } .cart-block .btn-cart-large { grid-column:1 / -1; } .cart-block #wishlistBtn, .cart-block .compare-btn--lg { grid-row:3; } .cart-block #wishlistBtn { grid-column:1; } .cart-block .compare-btn--lg { grid-column:2; justify-self:start; } .quantity-selector { display:flex; align-items:center; border:1px solid #E0E0E0; } .quantity-btn-lg { width:48px; height:48px; background:transparent; border:none; font-size:20px; cursor:pointer; transition:all .2s; } .quantity-btn-lg:hover { color:#B89A5A; } .quantity-input { width:60px; height:48px; text-align:center; border:none; border-left:1px solid #E0E0E0; border-right:1px solid #E0E0E0; font-size:16px; font-weight:500; font-family:inherit; } .cart-total-price { font-size:24px; font-weight:600; color:#1A1A1A; white-space:nowrap; } .btn-cart-large { width:100%; padding:16px 24px; background:#B89A5A; color:#fff; border:none; font-size:14px; font-weight:600; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all .3s; position:relative; overflow:hidden; font-family:inherit; } .btn-cart-large:hover { background:#9A7A3A; transform:translateY(-2px); } .action-buttons { display:flex; gap:16px; flex-wrap:wrap; } .payment-methods-list { display:flex; gap:24px; flex-wrap:wrap; padding-top:20px; border-top:1px solid #ECECEC; } .payment-method-item { font-size:12px; color:#7A7A7A; display:flex; align-items:center; gap:6px; } .lead-magnet { background:#F8F6F2; padding:16px 20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; transition:background .3s; } .lead-magnet:hover { background:#F0EAE2; } .product-tabs { margin-top:40px; } .product-tabs-header { display:flex; border-bottom:1px solid #ECECEC; margin-bottom:32px; flex-wrap:wrap; } .product-tab-btn { background:transparent; border:none; padding:12px 28px; font-size:13px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:#7A7A7A; cursor:pointer; transition:all .3s; position:relative; font-family:inherit; } .product-tab-btn::after { content:''; position:absolute; bottom:-1px; left:0; width:0; height:2px; background:#B89A5A; transition:width .3s; } .product-tab-btn.active::after, .product-tab-btn:hover::after { width:100%; } .product-tab-btn.active { color:#B89A5A; } .product-tab-content { display:none; animation:fadeInUp .5s ease; } .product-tab-content.active { display:block; } .product-description p { margin-bottom:14px; line-height:1.7; font-size:15px; color:#5A5A5A; } .review-item { padding:24px 0; border-bottom:1px solid #ECECEC; transition:all .3s; } .review-item:hover { background:#F8F8F8; padding-left:16px; } .review-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:12px; } .review-author { font-weight:500; } .review-date { font-size:12px; color:#7A7A7A; } .review-text { font-size:14px; line-height:1.6; color:#5A5A5A; } .review-photos { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; } .review-photo { width:80px; height:80px; background-size:cover; background-position:center; border-radius:2px; cursor:pointer; transition:transform .3s; } .review-photo:hover { transform:scale(1.05); } .review-form { background:#F8F8F8; padding:32px; margin-top:32px; } .review-form input, .review-form textarea { width:100%; padding:14px; border:1px solid #E0E0E0; font-family:inherit; font-size:14px; margin-bottom:16px; transition:border-color .2s; } .review-form input:focus, .review-form textarea:focus { outline:none; border-color:#B89A5A; } .photo-upload-label { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border:1px dashed #B89A5A; cursor:pointer; font-size:13px; transition:all .3s; margin-bottom:16px; } .photo-upload-label:hover { background:rgba(184,154,90,.1); } .rating-stars i { font-size:20px; margin-right:4px; color:#D0D0D0; cursor:pointer; transition:all .2s; } .rating-stars i:hover { transform:scale(1.2); } .rating-stars i.active { color:#B89A5A; } .consult-form { background:#F8F8F8; padding:32px; } .consult-form input, .consult-form select, .consult-form textarea { width:100%; padding:14px; border:1px solid #E0E0E0; font-family:inherit; font-size:14px; margin-bottom:16px; transition:border-color .2s; } .consult-form input:focus, .consult-form select:focus, .consult-form textarea:focus { outline:none; border-color:#B89A5A; } .wishlist-page { padding:60px 0 80px; } .wishlist-empty { text-align:center; padding:80px 0; } .wishlist-empty-icon { font-size:64px; color:#ECECEC; margin-bottom:24px; } .wishlist-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; } @media (max-width:1024px) { .wishlist-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:600px) { .wishlist-grid { grid-template-columns:repeat(2,1fr); gap:14px 10px; } } .cart-sidebar { position:fixed; top:0; right:-520px; width:520px; height:100%; background:#fff; box-shadow:-8px 0 32px rgba(0,0,0,.1); z-index:1500; transition:right .4s cubic-bezier(.2,.9,.4,1); display:flex; flex-direction:column; } .cart-sidebar.active { right:0; } .cart-header { padding:28px 32px; border-bottom:1px solid #ECECEC; display:flex; justify-content:space-between; align-items:center; } .cart-header h3 { font-size:20px; font-weight:500; } .cart-items { flex:1; overflow-y:auto; padding:0 32px; } .cart-item { display:flex; gap:20px; padding:20px 0; border-bottom:1px solid #ECECEC; } .cart-item-image { width:80px; height:80px; background-size:cover; background-position:center; flex-shrink:0; } .cart-item-info { flex:1; min-width:0; } .cart-item-title { font-weight:500; margin-bottom:6px; font-size:14px; } .cart-item-variant { font-size:12px; color:#7A7A7A; margin-bottom:6px; } .cart-item-price { color:#B89A5A; font-weight:500; font-size:14px; } .cart-item-quantity { display:flex; align-items:center; gap:12px; margin-top:10px; } .quantity-btn { width:28px; height:28px; border:1px solid #E0E0E0; background:#fff; cursor:pointer; transition:all .2s; font-family:inherit; font-size:14px; } .quantity-btn:hover { border-color:#B89A5A; color:#B89A5A; } .cart-item-remove { color:#ccc; cursor:pointer; transition:color .2s; flex-shrink:0; padding:4px; } .cart-item-remove:hover { color:#B89A5A; } .cart-footer { padding:24px 32px; border-top:1px solid #ECECEC; background:#fff; } .cart-summary-row { display:flex; justify-content:space-between; margin-bottom:10px; font-size:14px; } .cart-total { font-size:18px; font-weight:600; display:flex; justify-content:space-between; padding-top:12px; border-top:1px solid #ECECEC; margin-top:12px; margin-bottom:20px; } .promo-code { display:flex; gap:10px; margin:16px 0; } .promo-code input { flex:1; padding:12px; border:1px solid #E0E0E0; font-family:inherit; font-size:13px; } .delivery-option select { width:100%; padding:12px; border:1px solid #E0E0E0; font-family:inherit; background:#fff; font-size:13px; margin-bottom:16px; } .cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1400; display:none; backdrop-filter:blur(4px); } .cart-overlay.active { display:block; } @media (max-width:600px) { .cart-sidebar { width:100%; right:-100%; } } .checkout-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:2000; justify-content:center; align-items:center; backdrop-filter:blur(8px); } .checkout-modal.active { display:flex; } .checkout-content { background:#fff; max-width:600px; width:90%; max-height:90vh; overflow-y:auto; padding:48px; position:relative; animation:scaleIn .3s ease; } .checkout-step { margin-bottom:32px; } .checkout-step h4 { font-size:15px; font-weight:600; margin-bottom:20px; padding-bottom:8px; border-bottom:1px solid #ECECEC; } .checkout-form-group { margin-bottom:16px; } .checkout-form-group input, .checkout-form-group select, .checkout-form-group textarea { width:100%; padding:14px; border:1px solid #E0E0E0; font-family:inherit; font-size:14px; } .checkout-payment-methods { display:flex; gap:12px; flex-wrap:wrap; } .checkout-payment-method { display:flex; align-items:center; gap:8px; padding:12px 16px; border:1px solid #E0E0E0; cursor:pointer; transition:all .2s; font-size:13px; } .checkout-payment-method.active { border-color:#B89A5A; color:#B89A5A; } .modal-close-btn { position:absolute; top:20px; right:20px; font-size:22px; cursor:pointer; color:#7A7A7A; transition:color .2s; background:none; border:none; padding:4px; } .modal-close-btn:hover { color:#1A1A1A; } .quick-view-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:2000; justify-content:center; align-items:center; backdrop-filter:blur(8px); } .quick-view-modal.active { display:flex; } .quick-view-content { background:#fff; max-width:1000px; width:92%; max-height:88vh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:48px; position:relative; animation:scaleIn .3s ease; } @media (max-width:768px) { .quick-view-content { grid-template-columns:1fr; padding:28px; gap:28px; } } .toast { position:fixed; bottom:32px; right:32px; background:#1A1A1A; color:#fff; padding:16px 24px; display:flex; align-items:center; gap:16px; z-index:3000; transform:translateX(calc(100% + 40px)); transition:transform .35s cubic-bezier(.2,.9,.4,1); border-radius:4px; min-width:280px; max-width:400px; box-shadow:0 8px 24px rgba(0,0,0,.2); } .toast.show { transform:translateX(0); } .toast a { color:#B89A5A; font-size:13px; white-space:nowrap; } @media (max-width:600px) { .toast { left:16px; right:16px; bottom:16px; max-width:none; } } .footer { background:#F8F8F8; padding:80px 24px 48px; } .footer > * { max-width:1680px; margin-left:auto; margin-right:auto; } @media (max-width:1200px) { .footer { padding:64px 24px 40px; } } @media (max-width:768px) { .footer { padding:48px 18px 32px; } } .footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:60px; margin-bottom:80px; } @media (max-width:1024px) { .footer-grid { grid-template-columns:repeat(2,1fr); gap:40px; } } @media (max-width:600px) { .footer-grid { grid-template-columns:1fr; gap:32px; } } .footer-col h4 { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#B89A5A; margin-bottom:24px; } .footer-col a { display:block; color:#5A5A5A; text-decoration:none; margin-bottom:12px; font-size:13px; transition:all .3s; } .footer-col a:hover { color:#B89A5A; transform:translateX(6px); } .copyright { text-align:center; font-size:12px; color:#9A9A9A; padding-top:48px; border-top:1px solid #ECECEC; } .slide-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; } .hero-slide[data-type="video"]::before { background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.25)); z-index: 2; } .hero-slide[data-type="video"] .slide-content { z-index: 3; } .slider-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 8px; } .slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); border: none; cursor: pointer; transition: all .3s; padding: 0; } .slider-dot.active { background: #B89A5A; width: 24px; border-radius: 4px; } @media (max-width: 768px) { .hero-slider { min-height: 520px; } .slide-title { font-size: 2.2rem; } .slider-dots { bottom: 16px; } } .checkout-payment-methods { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .checkout-payment-method { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid #E0E0E0; cursor: pointer; transition: all .2s; font-size: 13px; font-family: inherit; background: #fff; flex: 1; min-width: 120px; justify-content: center; } .checkout-payment-method:hover { border-color: #B89A5A; } .checkout-payment-method.active { border-color: #B89A5A; background: rgba(184,154,90,.06); color: #B89A5A; font-weight: 500; } .checkout-payment-method i { font-size: 1rem; } .section--gray { background: #F8F6F2; } @media (max-width: 900px) { #catalogLayout { grid-template-columns: 1fr !important; } #filterSidebar { display: none !important; } .filter-toggle-btn { display: flex !important; } } @media (max-width: 768px) { #catalogGrid.grid-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } } @media (max-width: 480px) { #catalogGrid.grid-3 { grid-template-columns: 1fr !important; gap: 20px !important; } } @media (max-width: 768px) { #colHero { height:320px !important; } #colHero h2 { font-size:2rem !important; } .col-tab { padding:10px 6px !important; font-size:.6rem !important; letter-spacing:0 !important; } } @media (max-width: 480px) { #colHero { height:260px !important; } #colHero h2 { font-size:1.6rem !important; } .col-products-row > a { flex:0 0 140px !important; padding:10px 8px !important; } } .collections-section { padding: 80px 0; background: #F8F6F2; } .collections-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .collection-card { text-decoration: none; color: inherit; display: block; transition: transform .3s; } .collection-card:hover { transform: translateY(-4px); } .collection-image { aspect-ratio: 3/4; min-height: 300px; background-size: cover; background-position: center; margin-bottom: 16px; background-color: #EFEFEF; } .collection-info { padding: 0 4px; } .collection-title { font-size: 1.1rem; font-weight: 500; margin-bottom: 6px; } img, video, iframe, canvas, object, embed { max-width: 100%; } @media (max-width: 768px) { *, *::before, *::after { min-width: 0; } html, body { max-width: 100%; overflow-x: hidden; } .container, header, main, footer, section, .header-inner, .footer { max-width: 100%; } p, a, span, li, td, h1, h2, h3, h4, h5, .heading-lg, .heading-md { overflow-wrap: break-word; } pre, code { white-space: pre-wrap; overflow-wrap: break-word; } table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .container { width: 100%; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; } h1, h2, h3, h4, h5, p, .heading-lg, .heading-md, .section-title, .section-subtitle, .lead, .new-arrivals-desc, .collection-info, .feature-content, .product-info, .specs, .documents { text-align: left !important; } .new-arrivals-desc, .section-subtitle, .lead, .feature-content { margin-left: 0 !important; margin-right: 0 !important; } .grid-2, .grid-3, .grid-4, .new-arrivals-grid, .products-grid, .solutions-grid, .specs-grid, .documents-grid, .tech-grid, .wishlist-grid, .collections-grid, .footer-grid { justify-items: start; text-align: left; } .products-grid, .cat-products-grid, .new-arrivals-grid, .wishlist-grid, .collections-grid, .rec-grid { justify-items: stretch; } .product-card, .collection-card, .rec-card { width: 100%; } .btn, .btn-cart-large, input, select, textarea { max-width: 100%; } } @media (max-width: 480px) { .container { padding-left: 14px; padding-right: 14px; } } .container { max-width: 1680px !important; } @media (max-width: 1680px) { .container { max-width: 100% !important; } } h1, h2, h3, .ohero-title, .heading-lg, .heading-md, .slide-title, .oc-title, .quiz-head h2, .hs-title, .new-arrivals-title, .rev-title, .pay-title, .deliv-title, .rl-title, .subs-title, .tips-title { font-weight: 400 !important; } body { font-weight: 400 !important; } .product-image, .product-image-wrapper, .product-card .product-image, .new-arrival-image, .collection-image, .thumbnail, .gallery-thumb, .product-gallery-side .main-image, .main-image, .quick-view-image { background-color: #EFEFEF !important; } .lead-magnet__label { display:flex; align-items:center; gap:12px; } .lead-magnet__meta { display:block; font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8A8A8A; margin-top:2px; } .lead-magnet--3d { background:#F8F6F2; border-left:2px solid #B89A5A; } .lead-magnet--3d:hover { background:#F0EAE2; } .icon-3d { width:22px; height:22px; flex-shrink:0; fill:none; stroke:#B89A5A; stroke-width:1.4; stroke-linejoin:round; stroke-linecap:round; transition:transform .35s ease; } .lead-magnet--3d:hover .icon-3d { transform:rotate(-12deg) scale(1.06); } .btn-3d { display:inline-flex; align-items:center; gap:8px; padding:8px 20px; border-color:#B89A5A; color:#1A1A1A; white-space:nowrap; } .btn-3d:hover { background:#B89A5A; border-color:#B89A5A; color:#fff; } .btn-3d:hover::before { display:none; } @media (max-width:520px) { .lead-magnet--3d { flex-direction:column; align-items:flex-start; } .btn-3d { width:100%; justify-content:center; } } .product-card { display:flex; flex-direction:column; height:100%; } .product-card .product-image-wrapper { margin-bottom:20px; } @media (max-width: 600px) { .product-card .product-image-wrapper { margin-bottom:10px; } } .product-card .product-category { min-height:14px; margin-bottom:6px; } .product-card .product-title { font-size:17px; line-height:1.28; margin-bottom:9px; overflow:hidden; } .product-card .product-title > a { display:block; color:inherit; text-decoration:none; } .product-card .product-title .pt-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; } .product-card .product-title .pt-mat { display:block; margin-top:0; font-size:15px; font-weight:400; line-height:1.1; color:#1A1A1A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .product-card .product-rating { min-height:18px; margin:6px 0 10px; } .product-card > div:has(> .card-swatch) { min-height:20px; margin-bottom:10px !important; } .product-card .product-price { display:flex; align-items:baseline; flex-wrap:nowrap; gap:10px; margin:auto 0 6px; min-height:34px; } .product-card .product-price .price-current { font-size:clamp(17px, 1.45vw, 26px) !important; white-space:nowrap; } .product-card .product-price .price-old { font-size:clamp(11px, .85vw, 13px); white-space:nowrap; } .product-card .discount-badge { flex-shrink:0; padding:3px 8px; font-size:clamp(10px, .75vw, 11px); } .product-card .price-b2b { min-height:15px; margin:0 0 14px; } @media (max-width: 600px) { .products-grid, .cat-products-grid, .new-arrivals-grid, .wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; } .product-card .product-title { font-size: 13.5px; line-height: 1.24; margin-bottom: 9px; min-height: calc(2.48em + 14px); } .product-card .product-title .pt-mat { font-size: 12.5px; line-height: 1.1; margin-top: 0; } .product-card .product-descr { font-size: 12px; line-height: 1.4; min-height: 2.8em; margin: 0 0 8px; } .product-card .product-descr .pd-full { display: none !important; } .product-card .product-descr .pd-short { display: inline !important; } .product-card .product-collection, .product-card .card-collection { font-size: 9.5px; letter-spacing: 1.2px; } .product-card .product-price { flex-wrap: wrap; gap: 3px 7px; min-height: 38px; margin-bottom: 8px; } .product-card .product-price .price-current { font-size: 16px !important; } .product-card .price-old { font-size: 11.5px; } .product-card .price-badge, .product-card .discount-badge { font-size: 10.5px; padding: 1px 5px; } .product-card .price-b2b { font-size: 10.5px; margin-bottom: 10px; } .product-card .quick-view-btn, .product-card .product-quick-view { font-size: 9px; letter-spacing: .6px; padding: 8px 4px; } .product-card .btn-cart, .product-card .add-to-cart { font-size: 12px; padding: 10px 6px; } .product-card .product-rating { font-size: 11px; } .product-card .card-swatch { width: 16px; height: 16px; } #catalogGrid.grid-3 { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; } #catalogGrid.grid-3[data-view="list"] { grid-template-columns: 1fr; } .grid-2:has(> .product-card), .grid-3:has(> .product-card), .grid-4:has(> .product-card) { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; } } .outline-search-icon, .product-wishlist, .new-arrival-wishlist, .quick-view-btn, .product-quick-view, .compare-btn, .product-compare, .filter-toggle-btn, .ohero-dot, .tips-dot, .tips-hot { color: #1A1A1A; -webkit-text-fill-color: currentColor; } .outline-search-icon svg, .outline-search-icon i, .product-wishlist svg, .product-wishlist i, .new-arrival-wishlist svg, .new-arrival-wishlist i, .quick-view-btn svg, .quick-view-btn i, .compare-btn svg, .product-compare svg, .filter-toggle-btn svg, .filter-toggle-btn i { color: inherit; fill: none; stroke: currentColor; } .product-wishlist svg, .product-wishlist i, .new-arrival-wishlist svg, .new-arrival-wishlist i { fill: currentColor; stroke: none; } .product-wishlist:hover, .product-wishlist.active, .new-arrival-wishlist:hover, .new-arrival-wishlist.active { color: #fff; -webkit-text-fill-color: #fff; } a, button, [role="button"], input[type="submit"], summary, label { -webkit-tap-highlight-color: rgba(168, 135, 78, .15); } @media (max-width: 600px) { .product-card .product-image-wrapper .product-wishlist, .product-card .product-image-wrapper .product-compare, .product-card .product-image-wrapper .compare-btn, .product-card .product-image-wrapper .new-arrival-wishlist { width: 30px !important; height: 30px !important; top: 6px !important; bottom: auto !important; } .product-card .product-image-wrapper .product-wishlist, .product-card .product-image-wrapper .new-arrival-wishlist { right: 6px !important; left: auto !important; } .product-card .product-image-wrapper .product-compare, .product-card .product-image-wrapper .compare-btn { right: 42px !important; left: auto !important; } .product-card .product-image-wrapper .product-wishlist i, .product-card .product-image-wrapper .new-arrival-wishlist i { font-size: 12px !important; } .product-card .product-image-wrapper .product-compare svg, .product-card .product-image-wrapper .compare-btn svg { width: 15px !important; height: 15px !important; } } .ol-crumbs, .acc-breadcrumbs, .collections-breadcrumbs, .wl-breadcrumbs, .post-breadcrumbs, .cat-breadcrumbs, .cmp-crumbs, .news-breadcrumbs { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; padding: 16px 0 !important; font-size: .8rem !important; line-height: 1.4 !important; color: #7A7A7A !important; } .ol-crumbs a, .acc-breadcrumbs a, .collections-breadcrumbs a, .wl-breadcrumbs a, .post-breadcrumbs a, .cat-breadcrumbs a, .cmp-crumbs a, .news-breadcrumbs a { color: #7A7A7A !important; text-decoration: none !important; transition: color .2s; } .ol-crumbs a:hover, .acc-breadcrumbs a:hover, .collections-breadcrumbs a:hover, .wl-breadcrumbs a:hover, .post-breadcrumbs a:hover, .cat-breadcrumbs a:hover, .cmp-crumbs a:hover, .news-breadcrumbs a:hover { color: #B89A5A !important; } .ol-crumbs > span, .acc-breadcrumbs > span, .collections-breadcrumbs > span, .wl-breadcrumbs > span, .post-breadcrumbs > span, .cat-breadcrumbs > span, .cmp-crumbs > span, .news-breadcrumbs > span { color: #B89A5A !important; margin: 0 !important; } .ol-crumbs > span:last-child, .acc-breadcrumbs > span:last-child, .collections-breadcrumbs > span:last-child, .wl-breadcrumbs > span:last-child, .post-breadcrumbs > span:last-child, .cat-breadcrumbs > span:last-child, .cmp-crumbs > span:last-child, .news-breadcrumbs > span:last-child, .ol-crumbs .current, .ol-crumbs .cur, .acc-breadcrumbs .current, .collections-breadcrumbs .current, .wl-breadcrumbs .current, .post-breadcrumbs .current, .cat-breadcrumbs .current, .cmp-crumbs .cur, .news-breadcrumbs .current { color: #1A1A1A !important; } .ol-crumbs--light { color: rgba(255,255,255,.6) !important; } .ol-crumbs--light a { color: rgba(255,255,255,.6) !important; } .ol-crumbs--light a:hover { color: #fff !important; } .ol-crumbs--light > span { color: #B89A5A !important; } .ol-crumbs--light > span:last-child, .ol-crumbs--light .current { color: #fff !important; } .product-title .pt-name { display:block; } .product-title .pt-mat { display:block; font-size:.88em; font-weight:400; color:#1A1A1A; line-height:1.35; } .product-descr{ margin: 0 0 10px; min-height: 2.9em; font-size: .8125rem; line-height: 1.45; color: #7A7A7A; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-tags{ display:flex; flex-wrap:wrap; gap:4px 8px; margin:0 0 8px; font-size:11.5px; line-height:1.35; color:#9A9A9A; min-height:16px; max-height:2.7em; overflow:hidden; } .product-tags a{color:#9A9A9A; text-decoration:none; transition:color .2s} .product-tags a:hover{color:#A8874E} @media (max-width:600px){ .product-tags{font-size:10.5px; gap:3px 6px; margin-bottom:6px; min-height:14px; max-height:1.35em} .product-tags > :nth-child(n+3){display:none} } .product-descr .pd-short { display: none; } .product-image[data-interior-on="1"] { background-size: cover !important; } input, select, textarea, option, button { color: #1A1A1A; accent-color: #B89A5A; caret-color: #1A1A1A; } input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: #B89A5A; } @media (max-width: 600px) { .product-card .product-category { margin-bottom: 4px; } .product-card .product-title { margin-bottom: 5px; } .product-card .product-descr { line-height: 1.3; min-height: 2.6em; margin: 0 0 5px; } .product-tags { margin-bottom: 4px; } .product-card .product-rating { margin: 4px 0 6px; } .product-card div:has(> .card-swatch) { margin-bottom: 5px !important; } .product-card .product-price { margin-bottom: 5px; } .product-card .price-b2b { margin-bottom: 8px; } } @media (max-width: 600px) { .product-image-wrapper:has(.ob2b-pbadge) { --ob-badge-top: auto; --ob-badge-bottom: 36px; --ob-pmark-top: 10px; } .product-image-wrapper:has(.ob2b-pbadge) .product-badge:not(.ob2b-pbadge) { max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9px !important; letter-spacing: .8px !important; padding: 5px 7px !important; } } :where(a, button, summary, label, [role="button"], [role="tab"], [tabindex]):focus:not(:focus-visible) { outline: none; } html body :is(a, button, summary, label, [role="button"], [role="tab"], [tabindex], input, select, textarea):focus-visible { outline: 2px solid #B89A5A !important; outline-offset: 2px; border-radius: 2px; } .product-descr:has(+ .product-about){ min-height:0; margin-bottom:4px; } .product-about{ margin:0 0 10px; font-size:.8125rem; line-height:1.45; color:#5A5A5A; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:4.35em; } @media (max-width:600px){ .product-card .product-about{ font-size:12px; line-height:1.4; -webkit-line-clamp:2; min-height:2.8em; margin-bottom:8px; } }