/*
Theme Name: Dottus
Theme URI: http://entertainmentbug.test
 
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
*/

.nav-links li {
    width: 16.6%;
    text-align: center;
}
.nav-links{    display: flex;
    align-items: center; 
    flex: 1;
    list-style: none;
    width: 100%;}

#dottus-selected{display:none}
: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;
}


.hero-sub { 
  text-align: center;
}
.hero-logo-img{margin:0 auto 28px}
 .hero-label { 
    text-align: center;
	 font-family: arial;
  font-weight: bold;
    font-weight: 800;
	 
  }

* { 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; }
 
.right-side h3{display:none}

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 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; }

.swatch.active{width: 38px;
  height: 38px;
  margin-top: -3px;}
  
.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 */
.hero-left .tricolor { display: flex; width: 113px; height: 4px; margin: 0 auto 16px; }


.tricolor { display: flex; width: 80px; height: 4px; margin: 0 0 16px 0; }


.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: 'Georgia Bold'; }
h1 { font-size: clamp(36px, 4.5vw, 60px); font-weight: 500; line-height: 1.05; margin-bottom: 16px; }
h2 { font-size: clamp(26px, 3vw, 44px); font-weight: 500; line-height: 1.1; margin-bottom: 12px; }
.subtitle {  font-family: 'Georgia Bold';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; }


.new-heading-small{margin:0 0 20px 0;}

/* 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 5px; display: flex; flex-direction: column; 
justify-content: center; padding-top: calc(var(--nav-h) + 5px); }
.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(300px, 90%); margin-bottom: 28px; display: block; }
.hero-payoff { font-family: 'Georgia Bold'; 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(16px, 1.5vw, 10px); font-weight: 600; color: var(--white); margin-bottom: 40px; line-height: 1.4; }
.hero-sub em { color: var(--red); font-style: italic; font-family: 'Georgia Bold'; }
.hero-cta-row { text-align: center; gap: 16px; margin-bottom: 40px; 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; }
.hero-cta-row a{margin:0 10px}
.btn-red:hover { opacity: 0.9; }
.hero-stats {
    width: 465px;
    clear: both;
    overflow: hidden;
    margin: 0 auto;
}

.hero-stats div:nth-child(1){width: 37%;
    margin-left: 1%;
    float: left;}
.hero-stats div:nth-child(2){width: 29%;
    float: left;}
.hero-stats div:nth-child(3){width: 32%;
    float: left;}

.hero-stat-num { font-family: 'Georgia Bold';  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: 'Georgia Bold';   font-size: 19px; font-weight: 500; 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: 245px; background:#fff; 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; object-fit:Cover}

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

/* 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: 6px;
  margin-bottom: 25px;
  width: 57%; }
.finish-card {background: #f4f4f2; 
  border: 2px solid var(--grey-border);
  text-align: center;
  padding: 0px 0 19px 0;}
  
  .finish-card img{margin-bottom:10px;width: 138px;}
  
    
.finish-card.double_pad {padding: 0 0 10px 0;}
.finish-card.double_pad img {margin-bottom:5px;}


  .finishes-grid.nine-block{display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  margin-bottom: 25px;
  width: 100%; }
  
  .finish-card.red_bg{background:#CC2500 !important; color:#fff;}
   .finish-card.red_bg .finish-en { font-size: 11px; color: #fff;  }
   
  
    .block-left{width:100%;float:left}
  .block-right{width:100%;float:left;margin: 39px 0 0 0;}
  
  .mn-43{padding:0px 0 0px 0;}
  
  .only-p{margin:-10px 0 30px 0;}
  #heading-m{font-size: 19px;
  line-height: 1.8;
  color: gray;
  margin-top: 12px;
  letter-spacing: 2px;
  margin-bottom: 0px;
  font-weight: 500;}
  
  
  
  
  
.finish-name { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.finish-en { font-size: 11px; color: #000;  }
.special-section { background:#f4f4f2; 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: 13px; line-height: 1.60; color: #444; margin-bottom: 18px; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; padding-top: 10px; border-top: 1px solid var(--grey-border); }
.stat-num {font-family: 'Georgia Bold';  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: 13px;
  line-height: 1.6;
  color: #444;
  margin-top: 12px;
  width: 79%; }
.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: 'Georgia Bold'; font-size: 44px; font-weight: 500; 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: block;
  clear: both;
  margin-top: 32px;
  overflow: hidden;
}
  .b2b-feature-title { 
  height: 32px;
}
  
.dots .dot:nth-child(1){background:#f8c502 !important;}
.dots .dot:nth-child(2){background:#dc3320 !important;}

.dots .dot:nth-child(3){background:#253e80 !important;}
.dots .dot:nth-child(4){background:#9a999e !important;}
.dots .dot:nth-child(5){background:#2e2d29 !important;} 

  
  
.b2b-feature {
  padding: 24px 20px;
  border: 1px solid var(--grey-border);
  float: left;
  width: 24%;
  margin: 0 0.5%;
}
.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: 'Georgia Bold';  font-size: 26px; font-weight: 500; 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;margin-top: -40px;
}

.content{
    position:absolute;
    bottom:25px;
    left:0px;
    color:#fff;
   width: 100%;
}

.content h2 {
  font-size: 25px;
  margin: 0 0;
  font-weight: 700;
  color: #000;
  width: 95%;
  min-width: 95%;
  text-align: right;
}

.content p{
       font-size: 18px;
    line-height: 28px;
    color: #000;
    text-align: right;
    margin-right: 5%;
    font-weight: 600;
}

.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) {
 
.hero-cta-row a {
  margin: 6px 10px;

}
	.btn-red { 
  padding: 12px 28px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; 
}
	 .hero-cta-row a { 
    width: 223px;
  }
	#coll-viewall{display:none}
	footer .lang-toggle{display:block !important}
  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 { 
    margin: 0 auto;
    width: 288px; }
	
	.hero-stats div:nth-child(1) {
    width: 40%;
    margin-left: 1%;
    float: left;
}
	.hero-stats div:nth-child(2) {
    width: 33%;
    float: left;
}
	.hero-stats div:nth-child(3) {
    width: 22%;
    float: left;
}
  .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: 48% 50%;
  gap: 49px;
  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: 'Georgia Bold'; 
font-weight: 500;
line-height: 1.1;
margin-bottom: 12px;
font-size:34px;
font-weight:500;
margin-bottom:8px;
color:#111;

}

.right-side h3 {
  font-size: 14px;
  font-weight: normal;
   font-family: 'Georgia Regular';
  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{ 

}

/*==========================
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: 'Georgia Bold'; 
font-weight: 500;
  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:#fff; 
    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:none; 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: 'Georgia Bold';  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.0); box-shadow: 0 0 0 1px #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 {   border-radius: 0px; }
.product-image img  {border: 1px solid #e5e5e5; width: 100%; margin:0 auto; height: auto; display: block;}
#dottus-main-image {
  border: 1px solid #e5e5e5;
  width: 600px;
  margin: 0 auto;
  height: 600px;
  display: block;
  object-fit: contain;
}

.term-double-door .collections-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 19px;}
.term-double-door .category-image{height:500px}

.term-single-door .collections-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 19px;}
.term-single-door .category-image{height:500px}
.term-single-door .category-image img{height:auto}



.term-pivot-a4 .collections-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 19px;}
.term-pivot-a4 .category-image{height:500px}
 
.term-multidrawer-desk .collections-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 19px;}
.term-multidrawer-desk .category-image{height:500px}


.product-cats-line{ display:none; }}
.model-grid .card p { display:none; }

@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: content; border-radius: 8px; }
.model-grid .card p { margin-top: 8px; }



 @media (min-width: 1440px) {
.hero-logo-img {width: min(356px, 90%);margin-bottom: 28px;display: block;}
.hero-label {font-size: 12px; }
.hero-payoff { font-size: clamp(33px, 5.5vw, 50px); }  
.hero-sub {font-size: clamp(18px, 1.5vw, 12px); }
.hero-stat-num { font-size: 40px; }

.btn-outline, .btn-red { padding: 12px 24px 14px 20px !important;font-size: 14px; }

 }


@media (min-width: 1920px) {
.hero-logo-img {width: min(436px, 90%);margin-bottom: 28px;display: block;}
.hero-label {font-size: 18px; }
.hero-payoff { font-size: clamp(44px, 5.5vw, 66px); }  
.hero-sub {font-size: clamp(28px, 1.5vw, 15px); }
.hero-stat-num { font-size: 58px; }
.hero-stat-label {font-size: 22px;}
.tricolor {  width: 105px;} 
.btn-outline, .btn-red { padding: 23px 24px 26px 20px !important;font-size: 16px; }
}





@media  only screen and (max-width: 767px) {


.block-left {width: 100%;float: none;}
.block-right {width: 100%;float: none;}
.main-small {
  width: 20% !important;
  text-align: center;
  float: left;
  margin-bottom: 69px !important;
}

.finishes-grid.nine-block {
  display: block;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  margin-bottom: 15px;
  width: 100%;
  clear: both;
  overflow: hidden;
}

 body .finish-card, body .finish-card.double_pad {
  background: #f4f4f2; 
  padding: 0px 0 19px 0;
 width: 33.3%;
  min-height: 101px;
  margin-bottom: 10px;float: left;
}

.finish-card img {
  margin-bottom: 10px !important;
  width: 100%;
  height: 45px;
  object-fit: cover;
}
.finish-card.double_pad img {
  margin-bottom: 4px !Important;
}
.finish-card.double_pad {
  padding: 0 0 3px 0 !important;
  margin-top: -1px;
}
.manuf-img-ft {
  margin: 10px 0 !important;
  width: 100%  !important;
  float: left !important;
}
.manuf-img {
     margin: 10px 0!important;
  width: 100% !important;
  float: left !important;
}

.manuf-img:not(:first-child) {
    display: block !important;
  }
  #b2b{padding:0 20px !Important;}

.b2b-feature {
  padding: 24px 20px;
  border: 1px solid var(--grey-border);
  float: left;
  width: 99%  !Important;
  margin: 0 0.5% !Important;
}

#contact .wrapper{padding-bottom:10px !Important;}
#manufacturing .wrapper{padding-top:10px !Important; padding-bottom:10px !Important;}
#collections{padding-bottom:10px !Important;}

.contact_bg {
  background: #fff;
  padding:20px 0 !Important;
}


.manuf-grid {
    grid-template-columns: repeat(1, 1fr);
  }

.bg-color-bg{padding-bottom:0px !Important;}
.bg-color-bg .wrapper{padding-bottom:0px !Important; padding-top:10px !Important}

.ral-dot-name {
  font-size: 9px;
  color: var(--grey);
  text-align: center;
  max-width: 80px;
  line-height: 1.2;
  margin-top: 11px;
}
.ral-dots-row {
  display: block;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
  align-items: flex-end;
  float: left;
  width: 100%;
}
.ral-dot {
  display: block;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  float: left;
  width: anchor-size;
  margin: 0 6px 20px 6px;
}




footer { padding: 60px 20px;} 
.wrapper { padding-left: 0;padding-right: 0; } 
section {padding-top: 0;  }
#about { padding: 50px 20px;}
#collections{padding-left:20px; padding-right:20px;}
.special-section {padding: 20px 20px; }
 .collections-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  .footer-links a {
  font-size: 13px; 
  margin: 0 0 -7px 0;
  display: block;
}
 .hero-logo-img {
  width: min(210px, 90%);
  margin-bottom: 28px;
  display: block;
} 
  .category-image {
  height: auto;}
  
  
  
  #dottus-main-image {
  border: 1px solid #e5e5e5;
  width: 100%;
  margin: 0 auto;
  height: auto;
  display: block;
  object-fit: contain;
}

  
  .term-double-door .collections-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 19px;
}


#collections_single_page {
  margin-top: 70px;
  padding: 0 15px 20px 15px;

}
#product_details_page{padding:52px 15px 20px 15px;}
.term-multidrawer-desk .collections-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 19px;
}
.breadcrumb {
  display: flex; 
  gap: 7px;
  font-size: 12px;
  margin-bottom: 19px; 
}


.right-side h1 { 
  font-size: 26px; }


.hero-inner {min-height: auto !important;}
.hero-right {display: block !important}
 .content { 
    bottom: 0px;
    position: relative;
    left: 0px;}
    
    
    
     .dots { 
    bottom: 5px;  
  }
    
   .content p {
    font-size: 15px;
    text-align: center;
    margin: 0px !important;
    padding: 0px !Important;
  }  
    
     
.b2b-text p {
  font-size: 13px;
  line-height: 22px;
  color: #444;
  margin-bottom: 20px;
}
    
    
   .manuf-intro p { 
  width: 100%;
} 
  #col-ral-label{clear: both;}
 
.manuf-img-row1 video {
  height: 100% !important;
}
  
}


 .hero-right { 
    padding-bottom: 48px;
  }

.slider   .content h2 {font-size: 22px !important;text-align:center !Important;}


 section {
    padding-top: 50px !important;
  }




.model-grid .card p {display: none;}

.term-12 .cat-models{display:none;}
.term-13 .cat-models{display:none;}
.term-15 .cat-models{display:none;}
.term-16 .cat-models{display:none;}




.cat-card-link{position:relative;}

.contact-grid .contact-detail:last-child .contact-detail-label{font-weight:normal}
.contact-grid .contact-detail:last-child  {font-size:11px}

.home .collections-grid .cat-card-link:last-child::before {
  background: url(https://www.dottus.com/it/wp-content/uploads/2026/09/new-project-soon.png) no-repeat; 
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 9;
  content: "";
 font-size: 12px;width: 100%;height: 100%;background-size: cover;}

.home .collections-grid .cat-card-link:last-child{ pointer-events: none;
    cursor: default;}