/* =========================================
   Winehouse – produktový detail (wc-wine)
   ========================================= */

.wc-wine{
  max-width:100%;
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  color:#222;
}

.wc-section{
  margin:40px 0;
}

.wc-head{
  margin-bottom:20px;
}

.wc-h2{
  font-size:26px;
  margin-bottom:8px;
}

.wc-h3{
  font-size:18px;
  margin-bottom:8px;
}

.wc-lead{
  color:#555;
}

/* =========================================
   Tabs
   ========================================= */

.wc-tabs{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid #eee;
}

.wc-tabs__inner{
  display:flex;
  gap:10px;
  overflow:auto;
  padding:10px 0;
}

.wc-tab{
  appearance:none;
  border:1px solid #eee;
  background:#fff;
  color:#444;
  font-size:14px;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  white-space:nowrap;
}

.wc-tab:hover{
  background:#f6f6f6;
}

.wc-tab.is-active{
  background:#111;
  color:#fff;
  border-color:#111;
}

/* =========================================
   Slider
   ========================================= */

.wc-slider{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#111;
  color:#fff;
}

.wc-slider__viewport{
  overflow:hidden;
}

.wc-slider__track{
  display:flex;
  transition:none;
}

.wc-slider__btn{
  border:0;
  background:rgba(0,0,0,.55);
  color:#fff;
  width:40px;
  height:40px;
  border-radius:999px;
  cursor:pointer;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

.wc-slider__btn--prev{ left:12px; }
.wc-slider__btn--next{ right:12px; }

.wc-slide{
  min-width:100%;
  padding:40px;
  display:grid;
  gap:14px;
  grid-template-columns:120px 1fr;
  align-items:center;
}

.wc-slide__img{
  width:120px;
  height:120px;
  object-fit:contain;
}

.wc-slide__title{
  font-size:24px;
  margin-bottom:10px;
}

.wc-slide__text{
  opacity:.9;
}

  25%{transform:translateX(-100%)}
  50%{transform:translateX(-200%)}
  75%{transform:translateX(-300%)}
  100%{transform:translateX(0)}
}

/* =========================================
   Grid
   ========================================= */

.wc-grid{
  display:grid;
  gap:20px;
}

.wc-grid--2{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* =========================================
   Card
   ========================================= */

.wc-card{
  border:1px solid #eee;
  border-radius:12px;
  padding:20px;
  background:#fff;
}

.wc-mt{
  margin-top:20px;
}

/* =========================================
   Pills
   ========================================= */

.wc-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  list-style:none;
}

.wc-pill{
  background:#f4f4f4;
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
}

.wc-pill__ico{
  width:18px;
  height:18px;
  object-fit:contain;
  flex:0 0 auto;
}

/* =========================================
   Trust
   ========================================= */

.wc-trust{
  list-style:none;
  padding:0;
}

.wc-trust__item{
  padding:6px 0;
  display:flex;
  align-items:center;
  gap:10px;
}

.wc-trust__ico{
  width:18px;
  height:18px;
  object-fit:contain;
  flex:0 0 auto;
}

/* =========================================
   Spec cards
   ========================================= */

.wc-spec{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}

.wc-spec__card{
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid #eee;
  padding:10px;
  border-radius:10px;
}

.wc-spec__icon{
  width:42px;
  height:42px;
}

.wc-spec__k{
  font-size:12px;
  color:#777;
}

.wc-spec__v{
  font-weight:600;
}

/* =========================================
   Pairing
   ========================================= */

.wc-pairing__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
  gap:10px;
  margin-bottom:20px;
}

.wc-pair{
  text-align:center;
  text-decoration:none;
  color:#333;
}

.wc-pair img{
  width:60px;
  height:60px;
  object-fit:contain;
  display:block;
  margin:0 auto 6px;
}

/* =========================================
   Icons
   ========================================= */

.wc-ico{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:16px;
}

.wc-ico__card{
  text-align:center;
}

.wc-ico__img{
  width:60px;
  margin-bottom:8px;
}

/* =========================================
   Video
   ========================================= */

.wc-video{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.wc-iframe{
  width:100%;
  border-radius:10px;
}

/* =========================================
   Reels
   ========================================= */

.wc-reels{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}

.wc-reel{
  border:1px solid #eee;
  border-radius:10px;
  padding:16px;
  text-decoration:none;
  color:#222;
  display:block;
}

.wc-reel__badge{
  font-size:12px;
  color:#777;
}

.wc-reel__title{
  display:block;
  margin-top:4px;
  font-weight:600;
}

/* =========================================
   FAQ
   ========================================= */

.wc-details{
  border:1px solid #eee;
  border-radius:10px;
  margin-bottom:10px;
}

.wc-summary{
  padding:12px;
  cursor:pointer;
  font-weight:600;
}

.wc-details__body{
  padding:12px;
  border-top:1px solid #eee;
}

/* =========================================
   Tags
   ========================================= */

.wc-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.wc-tag{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:20px;
  background:#f5f5f5;
  font-size:13px;
}

.wc-tag img{
  width:18px;
}

/* =========================================
   QR
   ========================================= */

.wc-qr{
  display:flex;
  gap:20px;
  align-items:center;
}

.wc-qr__img{
  width:120px;
}

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

.wc-btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:8px;
  background:#111;
  color:#fff;
  text-decoration:none;
  margin-top:10px;
}

.wc-btn:hover{
  background:#333;
}

/* =========================================
   Responsive
   ========================================= */

@media(max-width:768px){

.wc-slide{
  grid-template-columns:1fr;
  text-align:left;
}

.wc-slide__img{
  width:80px;
  height:80px;
}

.wc-video{
  grid-template-columns:1fr;
}

.wc-qr{
  flex-direction:column;
  text-align:center;
}

.wc-slide{
  padding:24px;
}

}

/* =========================================
   Instagram icon
   ========================================= */

.wc-ig{
  width:18px;
  height:18px;
  vertical-align:middle;
  margin-right:8px;
  fill:currentColor;
}