/* ===== Variables & layout ===== */
.wccs {
  --bg: #1A1B1F;
  --panel: #191b1f;
  --ink: #f4f6f8;
  --muted: #b5bcc5;
  --muted-2: #808891;
  --chip: #24272c;
  --chip-border: #cfd5db;
  --accent: #0e7fbe;
  --accent-2: #2299dc;
  --white: #ffffff;
  --radius-xl: 32px;
}

.wccs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: flex-end;
}
@media (min-width: 992px){
  /* left chips / right card width like the mock */
  .wccs-grid { grid-template-columns: 1fr 530px; }
}

/* ===== Chips (left) ===== */
.wccs-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	padding-bottom: 20px;
}
.wccs-tab {
	padding: 12px 28px;
	border-radius: 999px;
	font-weight: 400;
	border: 1.5px solid var(--chip-border);
	background: var(--white);
	color: #1a1e22;
	transition: .18s ease;
}
.wccs-tab:hover { filter: brightness(.98); }
.wccs-tab.is-active, .wccs-tab:hover {
  background: #242528;
  color: var(--white);
  border-color: #242528;
}

/* ===== Card (right) ===== */
.wccs-card {
	position: relative;
	color: var(--ink);
	background: var(--bg);
	border-radius: 32px;
	padding: 16px;
	overflow: hidden;
}

/* inner rounded “panel” layer */
.wccs-card::before{
  content:"";
  position:absolute; inset: 14px;
  background: #1b1f24;
  border-radius: 28px;
  z-index: 0;
}

/* header */
.wccs-card-header{
  position: relative; z-index: 2;
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 12px 0;
}
.wccs-card-title{ font-size: 15px; font-weight: 700; opacity: .9; }
.wccs-card-count {
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	text-align: right;
	position: relative;
	z-index: 2;
}

/* ===== Slide ===== */
.wccs-slide{ position: relative; z-index: 2; }
.wccs-slide-inner{
  display:flex; align-items:center; gap: 20px;
}

/* left media inset like the mock */
.wccs-media {
	width: 128px;
	min-width: 128px;
	height: 150px;
	border-radius: 22px;
	background: #242528;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wccs-img img{
  width: 88px; height: 88px; object-fit: contain; display:block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}

/* text block */
.wccs-content{ display:flex; flex-direction:column; gap: 8px; }
.wccs-title{ margin:0; font-size: 16px; font-weight: 500; line-height: 1.25; }
.wccs-title a{ color: var(--ink); text-decoration: none; }
.wccs-desc{ margin:0; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 360px; }

/* CTA pill */
.wccs-cta .add_to_cart_button,
.wccs-cta .button,
.wccs-cta .wccs-btn{
  display:inline-flex; align-items:center; gap:6px;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px; font-weight: 400;
}
.wccs-cta .button:hover{ filter:brightness(1.05); }


/* watermark on right */
.wccs-watermark{
  margin-left: auto;
  color: var(--muted-2);
  opacity: .5;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Swiper container padding */
.wccs-swiper .swiper{ padding: 6px 0 0; }

/* nav arrows bottom-right (white pills) */
.wccs-nav{
  position:absolute; right: 22px; bottom: 16px;
  display:flex; gap: 12px; z-index: 4;
}
.wccs-prev, .wccs-next {
  width: 44px; height: 28px; border-radius: 999px;
  background-color: transparent;
  color: white;
  border: 1px solid #dfe4ea;
  display:flex; align-items:center; justify-content:center;
  padding: 0;
}
.wccs-prev:hover, .wccs-next:hover {
  background-color: #fff;
  color: #1A1B1F;
}
.wccs-prev:hover, .wccs-next:hover{ filter: brightness(.97); }

/* general resets */
.wccs .button.add_to_cart_button{ margin: 0; }

.wccs-content .added_to_cart.wc-forward {
	display: none;
}

/* small screens */
@media (max-width: 640px){
  .wccs-grid { grid-template-columns: 1fr; }
  .wccs-slide-inner{ gap: 16px; }
  .wccs-watermark{ display:none; }
}