/* =========================================================
   CROWNBARSHOP
   HOMEPAGE V5.1 CLEAN
========================================================= */

:root{
  --black:#101010;
  --red:#dc171d;
  --red-dark:#bd1218;
  --bg:#f5f5f3;
  --text:#111;
  --muted:#666963;
  --line:#dedfdb;
}


/* BASE */

.cbs-homepage{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.cbs-homepage *{
  box-sizing:border-box;
}

.cbs-homepage a{
  text-decoration:none;
}

#cbs-site{
  width:100%;
  overflow:hidden;
}

.cbs-container{
  width:min(1360px,calc(100% - 48px));
  margin:0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.cbs-header{
  position:relative;
  z-index:50;
  background:var(--black);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.cbs-header-inner{
  min-height:76px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:40px;
}

.cbs-logo{
  display:flex;
  align-items:baseline;
  gap:7px;
  color:#fff;
  white-space:nowrap;
}

.cbs-logo span{
  font-size:19px;
  font-weight:800;
  letter-spacing:.8px;
}

.cbs-logo small{
  font-size:10px;
  font-weight:700;
  letter-spacing:2.4px;
  color:#ddd;
}

.cbs-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:34px;
}

.cbs-nav a{
  padding:29px 0;
  color:rgba(255,255,255,.75);
  font-size:13px;
  font-weight:600;
}

.cbs-nav a:hover{
  color:#fff;
}

.cbs-header-actions{
  display:flex;
  align-items:center;
  gap:13px;
}

.cbs-language{
  min-height:34px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  background:transparent;
  color:#fff;
  font-size:10px;
  font-weight:700;
}

.cbs-cart{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

.cbs-cart svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* =========================================================
   HERO
========================================================= */

.cbs-hero{
  position:relative;
  min-height:650px;
  overflow:hidden;

  background:
    url('https://www.crownbarshop.com/wp-content/uploads/2026/09/crown-bar-al-fakher-30k-60k-europe-hero.webp')
    center center / cover no-repeat;
}

.cbs-hero-image{
  display:none;
}

.cbs-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;

  background:
    linear-gradient(
      90deg,
      rgba(247,247,245,1) 0%,
      rgba(247,247,245,.99) 22%,
      rgba(247,247,245,.94) 33%,
      rgba(247,247,245,.72) 43%,
      rgba(247,247,245,.22) 55%,
      rgba(247,247,245,0) 67%
    );
}

.cbs-hero-inner{
  position:relative;
  z-index:2;

  min-height:650px;

  display:flex;
  align-items:center;

  padding:65px 0;
}

.cbs-hero-content{
  width:46%;
  max-width:610px;
}

.cbs-eyebrow{
  margin:0 0 17px;
  color:var(--red);
  font-size:11px;
  font-weight:800;
  letter-spacing:2.6px;
}

.cbs-hero h1{
  margin:0;
  font-size:clamp(60px,6vw,92px);
  line-height:.91;
  font-weight:800;
  letter-spacing:-4px;
}

.cbs-hero h1 span{
  display:block;
  margin-top:9px;
  color:#474946;
  font-weight:300;
}

.cbs-hero-text{
  max-width:510px;
  margin:27px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.68;
}

.cbs-hero-actions{
  margin-top:31px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.cbs-btn{
  min-height:51px;
  padding:0 27px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:5px;

  font-size:13px;
  font-weight:700;
}

.cbs-btn-primary{
  background:var(--red);
  color:#fff;
}

.cbs-btn-primary:hover{
  background:var(--red-dark);
  color:#fff;
}

.cbs-btn-secondary{
  border:1px solid #bfc1bd;
  background:rgba(255,255,255,.42);
  color:#171717;
}

.cbs-hero-meta{
  max-width:530px;

  margin-top:29px;
  padding-top:21px;

  display:flex;
  flex-wrap:wrap;
  gap:8px;

  border-top:1px solid #d9dad6;
}

.cbs-hero-meta span{
  padding:7px 11px;
  border:1px solid #d6d8d3;
  border-radius:20px;
  background:rgba(255,255,255,.6);
  color:#696c68;
  font-size:10px;
  font-weight:700;
}


/* =========================================================
   MODELS
========================================================= */

.cbs-models{
  padding:84px 0 76px;
  background:#fff;
  border-top:1px solid #e7e7e4;
}

.cbs-section-heading{
  max-width:680px;
  margin:0 auto 42px;
  text-align:center;
}

.cbs-section-kicker{
  margin:0 0 11px;
  color:var(--red);
  font-size:10px;
  font-weight:800;
  letter-spacing:2.5px;
}

.cbs-section-heading h2{
  margin:0;
  font-size:44px;
  line-height:1.1;
  letter-spacing:-1.7px;
}

.cbs-section-intro{
  margin:14px 0 0;
  color:#777975;
  font-size:15px;
}


/* GRID */

.cbs-model-grid{
  max-width:1120px;
  margin:0 auto;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}


/* CARD */

.cbs-model-card{
  min-width:0;
  overflow:hidden;

  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);

  min-height:330px;

  border:1px solid #e0e1dd;
  border-radius:16px;

  backgrou

  color:#111;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.cbs-model-card:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 50px rgba(20,20,20,.08);
  color:#111;
}


/* REAL PRODUCT IMAGE */

.cbs-model-image{
  min-width:0;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:22px;

  background:#f1f1ef;

  overflow:hidden;
}

.cbs-model-image img{
  display:block;

  width:100%;
  height:100%;

  max-height:295px;

  object-fit:contain;

  object-position:center;

  transition:transform .3s ease;
}

.cbs-model-card:hover .cbs-model-image img{
  transform:scale(1.025);
}


/* CONTENT */

.cbs-model-content{
  padding:28px 26px;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.cbs-model-topline{
  margin-bottom:16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.cbs-model-tag{
  color:var(--red);
  font-size:10px;
  font-weight:800;
  letter-spacing:1.8px;
}

.cbs-model-arrow{
  color:#999;
  font-size:20px;
}

.cbs-model-card:hover .cbs-model-arrow{
  color:#111;
}

.cbs-model-content h3{
  margin:0;
  font-size:30px;
  line-height:1.08;
  letter-spacing:-1px;
}

.cbs-model-content p{
  margin:15px 0 22px;
  color:#747671;
  font-size:14px;
  line-height:1.6;
}

.cbs-model-link{
  color:#151515;
  font-size:12px;
  font-weight:800;
  text-decoration:underline;
  text-unde
}


/* ALL */

.cbs-model-all{
  margin-top:34px;
  text-align:center;
}

.cbs-model-all a{
  display:inline-flex;
  align-items:center;
  gap:9px;

  color:#171717;

  font-size:13px;
  font-weight:700;
}


/* =========================================================
   FOOTER
========================================================= */

.cbs-footer{
  padding:30px 0;
  background:var(--black);
  color:rgba(255,255,255,.48);
  font-size:12px;
}

.cbs-footer p{
  margin:0;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

  .cbs-model-card{
    grid-template-columns:1fr;
  }

  .cbs-model-image{
    height:330px;
  }

  .cbs-model-image img{
    max-height:300px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:760px){

  .cbs-container{
    width:calc(100% - 32px);
  }


  /* HEADER */

  .cbs-header-inner{
    min-height:auto;
    padding-top:15px;
    grid-template-columns:1fr auto;
    gap:12px;
  }

  .cbs-logo span{
    font-size:16px;
  }

  .cbs-logo small{
    font-size:9px;
  }

  .cbs-header-actions{
    gap:5px;
  }

  .cbs-language{
    min-height:31px;
    padding:0 9px;
    font-size:9px;
  }

  .cbs-cart{
    width:34px;
    height:34px;
  }


  /* MOBILE NAV */

  .cbs-nav{
    grid-column:1 / -1;

    width:calc(100% + 32px);

    margin-left:-16px;
    padding:0 16px;

    justify-content:flex-start;
    gap:26px;

    overflow-x:auto;
    scrollbar-width:none;

    border-top:1px solid rgba(255,255,255,.07);
  }

  .cbs-nav::-webkit-scrollbar{
    display:none;
  }

  .cbs-nav a{
    flex:0 0 auto;
    padding:14px 0;
    font-size:12px;
  }


  /* HERO */

  .cbs-hero{
    display:flex;
    flex-direction:column;
    min-height:0;
    background:var(--bg);
  }

  .cbs-hero-overlay{
    display:none;
  }

  .cbs-hero-inner{
    order:1;

    width:calc(100% - 32px);
    min-height:0;

    margin:0 auto;
    padding:43px 0 32px;

    display:block;
  }

  .cbs-hero-content{
    width:100%;
  }

  .cbs-hero h1{
    font-size:50px;
    line-height:.94;
    letter-spacing:-2.6px;
  }

  .cbs-hero-text{
    margin-top:19px;
    font-size:15px;
  }

  .cbs-hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .cbs-btn{
    min-height:48px;
    padding:0 12px;
    font-size:12px;
  }

  .cbs-hero-meta{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .cbs-hero-meta::-webkit-scrollbar{
    display:none;
  }

  .cbs-hero-meta span{
    flex:0 0 auto;
  }

  .cbs-hero-image{
    position:relative;
    order:2;

    display:block;

    width:100%;
    aspect-ratio:16/9;

    overflow:hidden;
  }

  .cbs-hero-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }


  /* MODELS */

  .cbs-models{
    padding:59px 0 52px;
  }

  .cbs-section-heading{
    margin-bottom:29px;
  }

  .cbs-section-heading h2{
    font-size:33px;
  }

  .cbs-section-intro{
    font-size:14px;
  }


  /* horizontal cards */

  .cbs-model-grid{
    width:calc(100% + 16px);
    max-width:none;

    margin:0 -16px 0 0;
    padding:0 16px 4px 0;

    display:flex;
    gap:12px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
  }

  .cbs-model-grid::-webkit-scrollbar{
    display:none;
  }

  .cbs-model-card{
    flex:0 0 78%;
    max-width:330px;

    display:block;

    min-height:0;

    scroll-snap-align:start;

    border-radius:14px;
  }

  .cbs-model-image{
    width:100%;
    height:auto;

    aspect-ratio:4 / 3;

    padding:14px;

    background:#f3f3f1;
  }

  .cbs-model-image img{
    display:block;

    width:100%;
    height:100%;

    max-height:none;

    object-fit:contain;
    object-position:center;
  }

  .cbs-model-content{
    padding:21px 20px 24px;
  }

  .cbs-model-topline{
    margin-bottom:12px;
  }

  .cbs-model-content h3{
    font-size:25px;
    line-height:1.05;
    letter-spacing:-.7px;
  }

  .cbs-model-content p{
    margin:11px 0 17px;

    font-size:12px;
    line-height:1.55;
  }

  .cbs-model-link{
    font-size:11px;
  }


  .cbs-model-all{
    margin-top:28px;
  }

}


@media(max-width:430px){

  .cbs-logo small{
    display:none;
  }

  .cbs-hero h1{
    font-size:45px;
  }

  .cbs-hero-actions{
    grid-template-columns:1fr;
  }

  .cbs-model-card{
    flex-basis:88%;
  }

}