/*
Theme Name: Dottus
Theme URI: http://entertainmentbug.test
Author: ApexDMIT
Author URI: https://apexdmit.com
Description: Dottus — "A way of thinking". Contemporary Italian metal storage systems. Custom theme built from the client HTML, with a fully dynamic Collections → Category → Product catalogue (products can belong to multiple categories).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dottus
*/

:root {
  --black: #000;
  --white: #ffffff;
  --red: #CC2500;
  --yellow: #F6A800;
  --blue: #003399;
  --violet: #8F4E8B;
  --green: #5E7F3E;
  --brown: #954800;
  --orange: #E35000;
  --antracite: #383E42;
  --sand: #DBBE8A;
  --grey: #888888;
  --grey-light: #F4F4F2;
  --grey-border: #E8E8E8;
  --it-green: #009246;
  --it-red: #CE2B37;
  --nav-h: 64px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; color: var(--black); background: var(--white); font-size: 15px; line-height: 1.6; }
 
nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  background: var(--black); z-index: 1000;
  display: flex; align-items: center; padding: 0 60px; gap: 0;
}
.nav-logo { display: flex; flex-direction: column; text-decoration: none; color: var(--white); margin-right: 5%; flex-shrink: 0; }
.nav-logo-name { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.2em; color: var(--white); }
.nav-logo-tag { font-size: 9px; letter-spacing: 0.15em; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 9%; flex: 1; list-style: none; }
.nav-links a { position:relative;transition: background-color 0.3s ease; text-transform: uppercase;font-size: 12px; font-weight: 500; letter-spacing: 0.05em; 
text-decoration: none; color:#fff;   }
.nav-links a:hover { transition: all 0.3s ease-in-out;color: var(--white);   }
.nav-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.lang-toggle { display: flex; align-items: center; gap: 2px; font-size: 11px; }
.lang-btn { padding: 4px 8px; border: none; background: none; cursor: pointer; color: rgba(255,255,255,1); font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; transition: color 0.2s; }

  
.nav-links a::after {
   content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 1px;
    background: var(--it-red);
    transition: width 0.4s ease-in-out;
}
.nav-links a:hover::after {
    width: 100%;
} 
  
  .nav-links a.active::after {
   content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
       width: 100%;
    height: 1px;
    background: var(--it-red);
    transition: width 0.4s ease-in-out;
}
 
  
 

.lang-sep { color: rgba(255,255,255,0.3); font-size: 10px; }
.btn-cta {transition: background-color 0.5s ease;text-transform: uppercase; background: var(--white); color: var(--black); border: none; padding: 10px 20px;
 font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer;  text-decoration: none; display: inline-block; }
 
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--white); transition: all 0.3s; }
.mobile-menu { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: var(--black); z-index: 999; padding: 32px 24px; flex-direction: column; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 20px; font-weight: 500; color: var(--white); text-decoration: none; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }



/* TRICOLOR */
.tricolor { display: flex; width: 80px; height: 3px; margin-bottom: 16px; }
.tricolor .tc-g { flex: 1; background: var(--it-green); }
.tricolor .tc-w { flex: 1; background: #e0e0e0; }
.tricolor .tc-r { flex: 1; background: var(--it-red); }

/* SECTIONS */
.wrapper { padding-top: calc(var(--nav-h) + 10px); padding-bottom: 80px; padding-left: 40px; padding-right: 40px; max-width: 1400px; margin: 0 auto; }
.section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-bottom: 12px; }
h1, h2 { font-family: 'Playfair Display', serif; }
h1 { font-size: clamp(36px, 4.5vw, 64px); font-weight: 700; line-height: 1.05; margin-bottom: 16px; }
h2 { font-size: clamp(26px, 3vw, 44px); font-weight: 600; line-height: 1.1; margin-bottom: 12px; }
.subtitle { font-family: 'Playfair Display', serif; font-style: italic; font-size: 17px; color: var(--grey); margin-bottom: 40px; }
.btn-outline { border: 1.5px solid var(--white); color: var(--white); padding: 10px 24px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
cursor: pointer; transition: background-color 0.5s ease; text-decoration: none; background: transparent; display: inline-block; }


/* Color */
.btn-outline:hover{background: var(--red);border: 1.5px solid var(--red);transition: all 0.5s ease-in-out;}
.bg-color-bg{background:#f4f4f2;}
.btn-red:hover{background:#fff; color:var(--red); transition: all 0.5s ease-in-out;}
.nav-links a.active{color:var(--red);}
.nav-links a:hover{color:var(--red);}
.btn-cta:hover{transition: all 0.5s ease-in-out;background:var(--red); color:#fff;}
.lang-btn:hover{color:var(--red)}
.lang-btn.active { color: var(--red); font-weight: 600; }
.cat-card:hover .cat-bar{background:var(--red) !Important;transition: all 0.5s ease-in-out;}
.cat-card:hover .cat-info{background:var(--red) !Important;transition: all 0.5s ease-in-out;}
.cat-card:hover .cat-name{color:#fff}
.cat-card:hover .cat-name-it{color:#fff}
.cat-card:hover .cat-models{color:#fff}
.btn-white:hover {background:var(--red) !Important;color:#fff;transition: all 0.5s ease-in-out;}
.btn-submit:hover {background:var(--red) !Important;color:#fff;transition: all 0.5s ease-in-out;}
.footer-links a:hover {color:var(--red) }

 

/* HERO */
#hero { min-height: 100vh; display: flex; align-items: stretch; padding: 0; max-width: 100%; position: relative; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: 100vh; }
.hero-left { height: 100vh; background: var(--black); padding: 80px 60px 60px; display: flex; flex-direction: column; 
justify-content: center; padding-top: calc(var(--nav-h) + 50px); }
.hero-label { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-bottom: 2px; }
.hero-logo-img { width: min(310px, 90%); margin-bottom: 32px; display: block; }
.hero-payoff { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(28px, 3.5vw, 51px); color: var(--white); margin-bottom: 10px; line-height: 1.15; }
.hero-sub { font-size: clamp(14px, 1.5vw, 10px); font-weight: 600; color: var(--white); margin-bottom: 36px; line-height: 1.4; }
.hero-sub em { color: var(--red); font-style: italic; font-family: 'Playfair Display', serif; }
.hero-cta-row { display: flex; gap: 16px; margin-bottom: 52px; flex-wrap: wrap; }
.btn-red { transition: background-color 0.5s ease; background: var(--red); color: var(--white); border: none; padding: 12px 28px; 
font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-red:hover { opacity: 0.9; }
.hero-stats { display: flex; gap: 48px; }
.hero-stat-num { font-family: 'Playfair Display', serif; font-size: 36px; font-weight: 700; color: var(--white); display: block; line-height: 1; margin-bottom: 4px; }
.hero-stat-label { font-size: 11px; color: var(--grey); letter-spacing: 0.05em; }
.hero-right { background: #f0f0ee; position: relative; display: flex; align-items: center; justify-content: center; padding-top: var(--nav-h); }
.hero-dots { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; }
.hero-dot { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; transition: transform 0.2s; border: 2px solid transparent; }
.hero-dot:hover { transform: scale(1.2); }
.hero-dot.active { border-color: rgba(0,0,0,0.3); transform: scale(1.15); }
.hero-placeholder { text-align: center; color: var(--grey); font-size: 13px; padding: 40px; }
.hero-placeholder-icon { font-size: 48px; display: block; margin-bottom: 16px; opacity: 0.4; }
.hero-tooltip { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); background: var(--white); padding: 12px 20px; border: 1px solid var(--grey-border); min-width: 180px; }
.hero-tooltip-name { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.hero-tooltip-color { font-size: 12px; color: var(--grey); }

/* COLLECTIONS */
.cat-info{ transition: background-color 0.5s ease;}
#collections { background: var(--white); }
.collections-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; flex-wrap: wrap; gap: 16px; }
.view-all { font-size: 12px; font-weight: 500; color: var(--red); text-decoration: none; letter-spacing: 0.05em; }
.view-all:hover { text-decoration: underline; }
.collections-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.cat-card {background: var(--white); cursor: pointer; transition: transform 0.2s; border: 1px solid var(--grey-border); }
.cat-card:hover {   transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

.cat-bar { height: 4px; width: 100%; }
.cat-info { padding: 16px 20px 20px; }
.cat-name { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 600; margin-bottom: 2px; }
.cat-name-it { font-size: 12px; color: var(--grey); font-style: italic; margin-bottom: 8px; }
.cat-models { font-size: 12px; color: #444; }

.category-image { height: 260px; background: var(--grey-light); display: flex; overflow: hidden;  align-items: center; justify-content: center; color: var(--grey); font-size: 12px; }
.category-image img{height:100%;width:100%;  transition: transform 0.8s ease-in-out;}

.category-image:hover img{transform: scale(1.1);}
 

/* COLOURS */
#colours { background: var(--white); }
.colours-intro {  margin-bottom: 48px; }
.colours-intro p { font-size: 15px; line-height: 1.8; color: #444; margin-bottom: 10px; }
.colours-section-title { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #000; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--grey-border); }
.ral-dots-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; align-items: flex-end; }
.ral-dot { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.ral-dot-circle { width: 44px; height: 44px; border-radius: 50%; transition: transform 0.2s, box-shadow 0.2s; }
.ral-dot:hover .ral-dot-circle { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.ral-dot-name {font-size: 9px;color: var(--grey); text-align: center; max-width: 80px; line-height: 1.2; }
.ral-count { font-size: 18px; font-weight: 700; color: var(--grey); align-self: center; margin-left: 8px; }
.finishes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-bottom: 25px; }
.finish-card { background: #fff; padding: 22px 16px; border: 1px solid var(--grey-border); text-align: center; }
.finish-name { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.finish-en { font-size: 11px; color: var(--grey); font-style: italic; }
.special-section { background: var(--white); padding: 40px; margin-top: 20px; }
.special-intro { font-size: 15px; color: #444; line-height: 1.8; margin-bottom: 28px; }
.special-section .colours-section-title { color: #444; border-bottom-color: #444; }
.special-dots-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; align-items: flex-end; }
.special-finishes-row { display: flex; flex-wrap: wrap; gap: 2px; }
.sf-card { padding: 18px 20px; text-align: center; min-width: 120px; flex: 1; }
.sf-card.dark { background: #222; }
.sf-card.highlight { background: var(--red); }
.sf-card.mid { background: #333; }
.sf-name { font-weight: 600; font-size: 13px; color: var(--white); margin-bottom: 3px; }
.sf-en { font-size: 11px; color: rgba(255,255,255,0.5); font-style: italic; }

/* ABOUT */
#about { background: var(--white); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 0px; }
.about-img { height: 520px; background: var(--grey-light); display: flex; align-items: center; justify-content: center; color: var(--grey); font-size: 13px; }
.about-text p { font-size: 15px; line-height: 1.85; color: #444; margin-bottom: 22px; }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; padding-top: 10px; border-top: 1px solid var(--grey-border); }
.stat-num { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 700; color: var(--red); display: block; }
.stat-label { font-size: 11px; color: var(--grey); letter-spacing: 0.05em; }

/* MANUFACTURING */
 
.manuf-intro {   margin-bottom: 48px; }
.manuf-intro p { font-size: 15px; line-height: 1.8; color: #444; margin-top: 12px; }
.manuf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-bottom: 2px; }
.manuf-step { background: var(--white); padding: 28px 22px; border: 1px solid var(--grey-border); }
.step-num { font-family: 'Playfair Display', serif; font-size: 44px; font-weight: 700; color: #ebebeb; display: block; margin-bottom: 12px; line-height: 1; }
.step-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.step-desc { font-size: 13px; color: var(--grey); line-height: 1.65; }
.manuf-img-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2px; }
.manuf-img { height: 220px; background: var(--antracite); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); font-size: 12px; }

/* B2B */
#b2b { background: var(--white); }
.b2b-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-top: 40px; }
.b2b-text p { font-size: 15px; line-height: 1.85; color: #444; margin-bottom: 20px; }
.b2b-features { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 32px; }
.b2b-feature { padding: 24px 20px; border: 1px solid var(--grey-border); }
.b2b-feature-icon { font-size: 18px; margin-bottom: 10px; }
.b2b-feature-title { font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.b2b-feature-desc { font-size: 12px; color: var(--grey); line-height: 1.6; }
.b2b-cta-box { background: var(--black); padding: 40px; }
.b2b-cta-box h3 { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 600; color: var(--white); margin-bottom: 14px; }
.b2b-cta-box p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.7; margin-bottom: 28px; }
.btn-white {transition: background-color 0.5s ease; background: var(--white); color: var(--black); padding: 14px 32px; font-family: 'DM Sans', sans-serif; font-size: 13px;font-weight: 600; cursor: pointer; border: none; display: block; width: 100%; text-align: center; text-decoration: none; margin-bottom: 10px;   }
.btn-white:hover { opacity: 0.9; }

/* CONTACT */ 
#small-block{width:100%; height:200px}
.contact_bg{background:#fff;padding:20px}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.contact-map { height: 200px; background:#fff; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; color: var(--grey); font-size: 12px; }
.contact-detail { display: flex; gap: 12px; margin-bottom: 12px; font-size: 13px; }
.contact-detail-label { font-weight: 600; min-width: 100px; color: var(--black); }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color:#000; margin-bottom: 6px; }
.form-input { width: 100%; padding: 12px 16px; border: 1px solid #e0e0e0; font-family: 'DM Sans', sans-serif; font-size: 14px; outline: none; transition: border-color 0.2s; background: var(--white); }
.form-input:focus { border-color: var(--black); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
textarea.form-input { resize: vertical; min-height: 100px; }
.btn-submit {transition: background-color 0.5s ease; background: var(--black); color: var(--white); border: none; width: 100%; padding: 16px;font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.5s ease; margin-top: 0px; }
 
 
 /* Collection single page */
 #collections_single_page{margin-top: 50px;}
 
 
 
 
 

/* FOOTER */
footer { background: var(--black); color: var(--white); padding: 60px; }
.footer-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 48px; }
.footer-logo-name { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.2em; margin-bottom: 4px; }
.footer-logo-tag { font-size: 9px; letter-spacing: 0.15em; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 16px; }
.footer-desc { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.7; }
.footer-col-title { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 18px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s; }
.footer-bottom { max-width: 1400px; margin: 0 auto; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; }
.footer-copy { font-size: 11px; color: rgba(255,255,255,0.3); }
.footer-links a{position:relative}
.footer-links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0;
	height: 1px;
	background: var(--it-red);
	transition: width 0.4s ease-in-out;
}
.footer-links a:hover::after {
    width: 100%;
} 




.color1{background: var(--it-green);}
.color2{background: #e0e0e0;}
.color3{background: var(--it-red);}

.hero-right{ 
    height:100vh;
    position:relative;
    overflow:hidden;
    background:#fff;
}

.slider{
    width:100%;
    height:100%;
    position:relative;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:1s ease;
}

.slide.active{
    opacity:1;
    z-index:2;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.content{
    position:absolute;
    bottom:70px;
    left:60px;
    color:#fff;
    max-width:420px;
}

.content h2{
    font-size:42px;
    margin-bottom:15px;
    font-weight:700;
}

.content p{
    font-size:18px;
    line-height:28px;
}

.dots{
    position:absolute;
    right:25px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:18px;
    z-index:20;
}

.dot{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#bbb;
    cursor:pointer;
    transition:.4s;
}

.dot.active{
    background:#d33b00;
    transform:scale(1.3);
}

@media(max-width:991px){

.hero-right{
    width:100%;
    height:500px;
}

.content{
    left:25px;
    bottom:35px;
}

.content h2{
    font-size:30px;
}

.content p{
    font-size:15px;
}

.dots{
    flex-direction:row;
    bottom:20px;
    top:auto;
    right:50%;
    transform:translateX(50%);
}

}


/* MOBILE */
@media (max-width: 767px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .lang-toggle { display: none; }
  section { padding-left: 20px; padding-right: 20px; padding-top: calc(var(--nav-h) + 32px); padding-bottom: 56px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-right { display: none; }
  .hero-left { padding: 40px 20px; }
  .hero-cta-row { flex-direction: column; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }
  .collections-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-img { height: 240px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .manuf-grid { grid-template-columns: 1fr 1fr; }
  .manuf-img-row { grid-template-columns: 1fr; }
  .manuf-img:not(:first-child) { display: none; }
  .b2b-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .finishes-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .collections-grid { grid-template-columns: repeat(2, 1fr); }
  .manuf-grid { grid-template-columns: repeat(2, 1fr); }
  .b2b-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
}
















#product_details_page{margin-top:38px !important;}

/*==========================
Google Font
==========================*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
 

a{
    text-decoration:none;
    color:inherit;
}

 
.container{
    width:90%;
    max-width:1400px;
    margin:auto;
    padding:40px 0 80px;
}

/*==========================
Breadcrumb
==========================*/

.breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    margin-bottom:40px;
    color:#666;
}

.breadcrumb a{
    transition:.3s;
}

.breadcrumb a:hover{
    color:#000;
}

.breadcrumb .active{
    color:#111;
    font-weight:600;
}

/*==========================
Main Layout
==========================*/

.product-wrapper{

   display: grid;
  grid-template-columns: 50% 50%;
  gap: 43px;
  align-items: flex-start;
}

/*==========================
Left Side
==========================*/

.left-side{
    position:sticky;
    top:40px;
}

.product-image{
 
    text-align:center;

    border-radius:12px;

}

.product-image img{

    width:100%;
 
    margin:auto;

    transition:.4s;

}

.product-image:hover img{

    transform:scale(1.04);

} 

.change-color{

    margin-top:18px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:13px;

    color:#999;

}

.change-color i{

    color:#d71920;

}

/*==========================
Right Side
==========================*/

.right-side h1{

  font-family: 'Playfair Display', serif;
font-weight: 600;
  line-height: 1.1;
  margin-bottom: 12px;
    font-size:46px;

    font-weight:600;

    margin-bottom:8px;

    color:#111;

}

.right-side h3 {
  font-size: 14px;
  font-weight: 400;
  color: #666;
  margin-bottom: 15px;
  font-style: italic;
}

/*==========================
Italian Line
==========================*/

.flag-line{

    display:flex;

    width:170px;

    height:4px;

    margin-bottom:15px;

}

.green{

    flex:1;

    background:#0c8c3d;

}

.white{

    flex:1;

    background:#ddd;

}

.red{

    flex:1;

    background:#c91520;

}

/*==========================
Section
==========================*/

.section{

    margin-bottom:22px;

}

.section h5{

  font-size: 10px;
  letter-spacing: 1px;
  color: #777;
  text-transform: uppercase;
  margin-bottom: 9px;

}

/*==========================
Available Sizes
==========================*/

.sizes{

    display:flex;

    flex-wrap:wrap;

    gap:2px;

}

.sizes a{

  padding: 3px 7px;
  border: 1px solid #ddd;
  border-radius: 0;
  transition: .3s;
  font-size: 10px;

}

.sizes a:hover{

    background:#111;

    color:#fff;

    border-color:#111;

}

/*==========================
Color Circles
==========================*/

.color-list{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

}

.color-list span{

    width:34px;

    height:34px;

    border-radius:50%;
  
    cursor:pointer;

    transition:.3s;

}

.color-list span:hover{

    transform:scale(1.18);

    box-shadow:0 0 0 2px #111;

}

/*==============================
Colour Combination
==============================*/

.combo-wrapper{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
}

.combo{
  display: block ruby;
    cursor:pointer;
    transition:.35s;  
}



.combo span{width:40px;height:35px;Display:block}


.combo:hover{
  
}

.red-blue{
    background:linear-gradient(135deg,#d42027 50%,#0b55d9 50%);
}

.yellow-black{
    background:linear-gradient(135deg,#ffc400 50%,#222 50%);
}

.cream-gray{
    background:linear-gradient(135deg,#ece7db 50%,#8f9399 50%);
}

.green-yellow{
    background:linear-gradient(135deg,#4d7d39 50%,#f0c531 50%);
}

.more-color{
    font-size:14px;
    color:#777;
}

/*==============================
Finish Buttons
==============================*/

.finish{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.finish button{
    padding:7px 28px;
    border:1px solid #d8d8d8;
    background:#fff;
    cursor:pointer; 
    font-size:12px;
    transition:.3s;
}

.finish button:hover{
    background:#111;
    color:#fff;
    border-color:#111;
}

.finish button.active{
    background:#111;
    color:#fff;
    border-color:#111;
}

/*==============================
Details
==============================*/

.section ul{
    padding-left:1px;
}

.section ul li{
  list-style: none;
  color: #000;
  margin-bottom: 12px;
  font-size: 12px;
line-height: 6px;}

/*==============================
Other Models
==============================*/

.other-model{
    margin-top:60px;
}

.other-model h4{
    
  font-family: 'Playfair Display', serif;
font-weight: 600;
  line-height: 1.1;
    font-size:22px;
    margin-bottom:25px;
    color:#111;
}

.model-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}

.card{
    background:#fff; 
    overflow:hidden;
    cursor:pointer;
    transition:.35s;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.card img{
    width:100%; 
    object-fit:contain;
    background:#fafafa; 
    transition:.35s;
}

.card:hover img{
    transform:scale(1.08);
}

.card p{
    padding: 0 11px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
}

/*==============================
Scrollbar
==============================*/

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:#bbb;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#888;
}

/*==============================
Smooth Animation
==============================*/

.product-image,
.card,
.finish button,
.sizes a,
.combo,
.color-list span{
    transition:all .35s ease;
}
/*==============================
Dynamic Catalogue additions
(Collections listing / Category archive / Product cards)
==============================*/
.archive-head { margin-bottom: 40px; }
.archive-head .breadcrumb { margin-bottom: 24px; }
.cat-card-link { text-decoration: none; color: inherit; display: block; }
.cat-count { display:inline-block; margin-top:8px; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--red); }
.cat-card:hover .cat-count { color:#fff; }

/* Product grid (products inside a category) */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.product-card { background:var(--white); border:1px solid var(--grey-border); cursor:pointer; transition: transform .3s, box-shadow .3s; display:flex; flex-direction:column; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0,0,0,.08); }
.product-card-img { height: 240px; overflow:hidden; background:var(--grey-light); }
.product-card-img img { width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.product-card:hover .product-card-img img { transform: scale(1.08); }
.product-card-body { padding:16px 18px 20px; }
.product-card-cats { font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey); margin-bottom:6px; }
.product-card-title { font-family:'Playfair Display', serif; font-size:19px; font-weight:600; margin-bottom:4px; color:var(--black); }
.product-card-sub { font-size:12px; color:#666; font-style:italic; }
.empty-state { padding:60px 0; color:var(--grey); font-size:15px; }

/* Category chips on product details (multiple categories) */
.product-cats-line { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:15px; }
.product-cats-line a { font-size:10px; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; color:#555; border:1px solid var(--grey-border); padding:5px 12px; transition:.3s; }
.product-cats-line a:hover { background:var(--black); color:#fff; border-color:var(--black); }

@media (max-width:1023px){ .product-grid { grid-template-columns: repeat(3, 1fr); } .model-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:767px){ .product-grid { grid-template-columns: 1fr 1fr; gap:14px; } .product-wrapper{grid-template-columns:1fr !important;} .model-grid{grid-template-columns:repeat(2,1fr);} .left-side{position:static;} }

/*==============================
Monocolour → colour-wise image swap
==============================*/
.color-list span.swatch { cursor:pointer; }
.color-list span.swatch.active { transform: scale(1.18); box-shadow: 0 0 0 2px #111; }
.selected-colour { margin-top: 12px; font-size: 12px; color: #555; min-height: 16px; letter-spacing: 0.02em; }
#dottus-main-image { transition: opacity .35s ease, transform .4s ease; }

/* Colour combinations — two colours strictly side by side (per product) */
.combo { display: inline-flex !important; align-items: center; overflow: hidden; border:1px solid var(--grey-border); }
.combo span { width: 40px; height: 35px; display: block; }
.combo:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }

/*==============================
Product image — consistent bounded frame
(colour swap loads images of varying aspect ratios; keep one stable frame so
 the image never overflows past the details/Dimensions column)
==============================*/
.product-image { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px; }
.product-image img,
#dottus-main-image { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px){ .product-image { aspect-ratio: 4 / 3; } }

/*==============================
Other Models — uniform thumbnail frames so the grid aligns
==============================*/
.model-grid { align-items: start; }
.model-grid .card { display: flex; flex-direction: column; }
.model-grid .card img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 8px; }
.model-grid .card p { margin-top: 8px; }