:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --gray: #a1a1a1;
  --gray-light: #ececec;
  --gray-dim: #f5f5f5;
  --gray-dark: #3d3d3d;
  --red: #ff0000;
  --red-deep: #c40000;
  --text-soft: rgba(255, 255, 255, 0.72);
  --line: rgba(161, 161, 161, 0.35);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white) !important;
  color: var(--black);
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  margin: 0;
  color: inherit;
}

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

img {
  max-width: 100%;
  display: block;
}

.wrap {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Discretion strip ---------- */
.discreet-note {
  background: var(--black);
  color: var(--white);
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  padding: 12px 20px;
}

.discreet-note span {
  color: var(--red);
}

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  max-width: 1220px;
  margin: 0 auto;
  color: var(--black);
}

.logo-img {
  height: 56px;
  width: auto;
  display: block;
}

.logo-link {
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 38px;
  font-size: 14.5px;
  letter-spacing: 0.02em;
}

.nav-links a {
  position: relative;
  padding-bottom: 4px;
  color: var(--gray-dark);
  transition: color 0.25s ease;
}

.nav-links a.active {
  color: var(--black);
}

.nav-links a:hover {
  color: var(--red);
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--red);
  transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.btn-line {
  border: 1px solid var(--red);
  color: var(--white);
  background: var(--red);
  padding: 9px 22px;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  border-radius: 2px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}

.btn-line:hover {
  background: transparent;
  color: var(--red);
}

.menu-toggle {
  display: none;
  color: var(--black);
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 70;
  position: relative;
}

/* ---------- Overlapping/transparent header (floats over a hero) ---------- */
.overlap-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.overlap-header .nav-links a {
  color: rgba(255, 255, 255, 0.88);
}

.overlap-header .nav-links a:hover,
.overlap-header .nav-links a.active {
  color: #fff;
}

.overlap-header .nav-links a::after {
  background: var(--red);
}

.overlap-header .menu-toggle {
  color: #fff;
}

.overlap-header .logo-img {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
}

.overlap-header.scrolled {
  position: fixed;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.overlap-header.scrolled .nav-links a {
  color: var(--gray-dark);
}

.overlap-header.scrolled .nav-links a:hover,
.overlap-header.scrolled .nav-links a.active {
  color: var(--black);
}

.overlap-header.scrolled .menu-toggle {
  color: var(--black);
}

.overlap-header.scrolled .logo-img {
  filter: none;
}

/* ---------- Sticky-header logo sizing ----------
   Proportions modelled on productphotography.co.ke: the logo occupies roughly
   55-60% of the sticky bar's height, leaving even whitespace above and below,
   and stays modest in width relative to the nav text. Height alone is set and
   width stays auto, so the mark's 1.75:1 aspect ratio is never distorted.
   Desktop sticky: 40px logo + 13px padding = ~66px bar (vs 84px at rest). */
.logo-img {
  transition: height 0.3s ease;
}

.nav {
  transition: padding 0.3s ease;
}

.overlap-header.scrolled .nav {
  padding-top: 13px;
  padding-bottom: 13px;
}

.overlap-header.scrolled .logo-img {
  height: 40px;
  width: auto;
}

@media (max-width:900px) {

  /* Tablet: same logo-to-bar relationship, scaled down. */
  .overlap-header.scrolled .nav {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .overlap-header.scrolled .logo-img {
    height: 34px;
  }
}

@media (max-width:480px) {

  /* Mobile: keep the bar shallow but the mark clearly legible. */
  .overlap-header.scrolled .nav {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .overlap-header.scrolled .logo-img {
    height: 30px;
  }
}

@media (max-width:900px) {
  .overlap-header .nav-links {
    background: var(--black);
  }
}

@media (max-width:900px) {
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 82vw);
    background: var(--black);
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 32px 40px;
    gap: 28px;
    font-size: 18px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    z-index: 65;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);
  }

  .nav-links.open {
    transform: translateX(0);
  }

  .menu-toggle {
    display: block;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .nav-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-cta .btn-line {
    padding: 8px 16px;
    font-size: 12.5px;
  }
}

/* ---------- Buttons ---------- */
.btn-solid {
  background: var(--red);
  color: var(--white);
  padding: 14px 30px;
  font-size: 14px;
  letter-spacing: 0.03em;
  border-radius: 2px;
  transition: background 0.25s ease, transform 0.25s ease;
  display: inline-block;
  border: none;
  cursor: pointer;
}

.btn-solid:hover {
  background: var(--red-deep);
  transform: translateY(-1px);
}

.woocommerce div.product form.cart .button {
  background: var(--red) !important;
  color: var(--white) !important;
  padding: 16px !important;
  font-size: 14.5px !important;
  letter-spacing: 0.03em !important;
  border-radius: 2px !important;
  transition: background 0.25s ease, transform 0.25s ease !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  border: none !important;
  cursor: pointer !important;
  margin-bottom: 14px !important;
  margin-top: 20px !important;
  flex: 1;
}

.woocommerce div.product form.cart .button:hover {
  background: var(--red-deep) !important;
  transform: translateY(-1px) !important;
}

.woocommerce div.product form.cart {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  flex-wrap: wrap;
  flex-direction: column;
}

.woocommerce div.product form.cart div.quantity {
  display: none !important;
  margin: 0;
  padding-top: 20px;
}

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--white);
  padding: 14px 28px;
  font-size: 14px;
  letter-spacing: 0.03em;
  border-radius: 2px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.btn-ghost:hover {
  border-color: var(--red);
  background: rgba(255, 0, 0, 0.08);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Trust strip ---------- */
.trust {
  /* Break out of any Elementor boxed containers */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--gray-dim);
  border-bottom: 1px solid var(--line);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 30px 0;
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0 28px;
  border-left: 1px solid var(--line);
}

.trust-item:first-child {
  border-left: none;
}

.trust-item .num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--red);
  font-size: 15px;
}

.trust-item h4 {
  font-size: 17px;
  font-weight: 500;
}

.trust-item p {
  margin: 0;
  font-size: 13.5px;
  color: var(--gray-dark);
}

@media (max-width:860px) {
  .trust-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 26px;
  }

  .trust-item:nth-child(3) {
    border-left: none;
  }
}

@media (max-width:520px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }

  .trust-item {
    border-left: none;
    padding: 0 4px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
  }

  .trust-item:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* ---------- Section heading pattern ---------- */
.section {
  padding: 96px 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 52px;
  gap: 24px;
  flex-wrap: wrap;
}

.section-head .tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--red);
  font-size: 16px;
  display: block;
  margin-bottom: 10px;
}

.section-head h2 {
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.1;
}

.section-head .view-all {
  font-size: 14px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--black);
  padding-bottom: 3px;
  white-space: nowrap;
}

/* ---------- Product grid (home) ---------- */
.section {
  /* Break out of any Elementor boxed containers */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 96px 0;
}

.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.product {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 24px 30px;
  position: relative;
  transition: background 0.3s ease;
  background: #fff;
}

.product:hover {
  background: var(--gray-dim);
}

.product .swatch {
  height: 190px;
  border-radius: 2px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.product .swatch img {
  max-height: 170px;
  width: auto;
  margin: 0 auto;
}

.product .badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--black);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 1px;
  z-index: 2;
}

.product .badge.sale {
  background: var(--red);
}

.product .cat {
  font-size: 12px;
  color: var(--red);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  margin-bottom: 8px;
  display: block;
}

.product h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 500;
  margin-bottom: 10px;
  min-height: 50px;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  color: var(--black);
}

.price-old {
  font-size: 14px;
  color: var(--gray);
  text-decoration: line-through;
}

.order-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--black);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.order-link:hover {
  border-color: var(--red);
  color: var(--red);
}

@media (max-width:960px) {
  .products {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:560px) {
  .products {
    grid-template-columns: 1fr;
  }
}

/* ---------- Hero (home) ---------- */
.hero {
  background: var(--black);
  color: var(--white);
  position: relative;
  overflow: hidden;
  /* Break out of any Elementor boxed containers to ensure full-bleed background */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  min-height: 640px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 112px;
  padding-bottom: 80px;
  padding-right: 60px;
  padding-left: max(var(--container-padding, 32px), calc((100vw - var(--container-width, 1220px)) / 2 + var(--container-padding, 32px)));
  box-sizing: content-box;
  max-width: 468px;
}

.page-hero h1 {
  font-size: clamp(38px, 5vw, 58px);
  margin: 0;
  line-height: 1.15;
  font-family: 'Cormorant Garamond', serif;
}

/* ---------- Contact Info ---------- */
.contact-info {
  /* Break out of any Elementor boxed containers */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--white);
  padding-bottom: 40px;
  /* Add some space if needed */
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
}

.info-card {
  padding: 60px 30px;
  text-align: center;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.info-card:last-child {
  border-right: none;
}

.info-card .icon {
  color: var(--red);
  font-size: 22px;
  margin-bottom: 12px;
  line-height: 1;
}

.info-card h4 {
  font-size: 17px;
  margin-bottom: 12px;
  font-weight: 500;
}

.info-card p {
  font-size: 14px;
  color: var(--gray-dark);
  line-height: 1.7;
  margin: 0;
}

.info-card a {
  color: var(--gray-dark);
  transition: color 0.2s ease;
}

.info-card a:hover {
  color: var(--red);
}

@media (max-width:860px) {
  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-card {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .info-card:last-child {
    border-bottom: none;
  }
}

/* ---------- Contact Form & Map ---------- */
.contact-layout {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--white);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 80px 0;
}

.contact-form-col .tag {
  color: var(--red);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 18px;
  display: block;
  margin-bottom: 12px;
}

.contact-form-col h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.15;
  margin-bottom: 30px;
  font-weight: 500;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-group label {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 16px;
  color: var(--gray-dark);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.form-group input,
.form-group textarea {
  padding: 12px 14px;
  border: 1px solid var(--line);
  font-family: 'Jost', sans-serif !important;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--red);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-btn {
  background: var(--red);
  color: var(--white);
  border: none;
  padding: 16px;
  font-family: 'Jost', sans-serif !important;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  width: 100%;
}

.contact-btn:hover {
  background: var(--red-deep);
}

.form-note {
  font-family: 'Jost', sans-serif !important;
  font-size: 11.5px;
  color: var(--gray);
  margin-top: 14px;
  display: block;
}

.map-col iframe {
  width: 100%;
  height: 420px;
  border: 1px solid var(--line);
  display: block;
}

.map-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--gray-dim);
  border: 1px solid var(--line);
  border-top: none;
}

.map-caption p {
  font-family: 'Jost', sans-serif !important;
  font-size: 13px;
  font-weight: 500;
  margin: 0;
}

.map-caption a {
  font-family: 'Jost', sans-serif !important;
  font-size: 12.5px;
  color: var(--red);
  border-bottom: 1px solid transparent;
}

.map-caption a:hover {
  border-color: var(--red);
}

@media (max-width:980px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .map-col iframe {
    height: 300px;
  }
}

@media (max-width:520px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
}

.hero-eyebrow {
  font-size: 14px;
  color: var(--red);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  margin-bottom: 18px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.1s forwards;
}

.hero-copy h1 {
  font-size: clamp(46px, 6vw, 72px);
  line-height: 1.03;
  letter-spacing: 0.005em;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.25s forwards;
}

.hero-copy h1 .accent {
  color: var(--red);
  font-style: italic;
}

.hero-copy p {
  margin-top: 26px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-soft);
  max-width: 440px;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.4s forwards;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 38px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.55s forwards;
}

.hero-plate {
  position: relative;
  min-height: 400px;
  background-size: cover;
  background-position: center;
}

.hero-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(10, 10, 10, 0.9) 0%, rgba(255, 0, 0, 0.18) 45%, rgba(10, 10, 10, 0.1) 100%);
}

@media (max-width:900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    padding: 100px 24px 40px;
  }

  .hero-plate {
    min-height: 320px;
  }
}

/* ---------- Category triptych ---------- */
.triptych {
  /* Break out of any Elementor boxed containers */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--line);
}

.cat-card {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  padding: 34px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0.05) 100%);
}

.cat-card h3 {
  position: relative;
  z-index: 1;
  color: var(--white);
  font-size: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cat-card h3 span {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--red);
  font-weight: 500;
}

.cat-card .note {
  position: relative;
  z-index: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 8px;
}

@media (max-width:860px) {
  .triptych {
    grid-template-columns: 1fr;
  }

  .cat-card {
    min-height: 300px;
  }
}

/* ---------- Journal ---------- */

/* ---------- Elementor Integration Fixes ---------- */
/* Remove gaps between the structural layout widgets so they stitch perfectly together */
.elementor-section:has(.elementor-widget-confidentlyhot_hero),
.elementor-section:has(.elementor-widget-confidentlyhot_page_hero) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.elementor-section:has(.elementor-widget-confidentlyhot_hero) .elementor-widget-wrap,
.elementor-section:has(.elementor-widget-confidentlyhot_page_hero) .elementor-widget-wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.elementor-widget-confidentlyhot_hero,
.elementor-widget-confidentlyhot_trust,
.elementor-widget-confidentlyhot_products,
.elementor-widget-confidentlyhot_categories,
.elementor-widget-confidentlyhot_journal,
.elementor-widget-confidentlyhot_closing,
.elementor-widget-confidentlyhot_page_hero,
.elementor-widget-confidentlyhot_contact_info,
.elementor-widget-confidentlyhot_contact_form,
.elementor-widget-confidentlyhot_shop {
  margin-bottom: 0 !important;
}

.journal-section {
  background: var(--black);
  color: var(--white);
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}

.journal-card .swatch {
  height: 190px;
  margin-bottom: 20px;
  border-radius: 2px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.journal-card .meta {
  font-size: 12.5px;
  color: var(--red);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}

.journal-card h3 {
  font-size: 23px;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--white);
}

.journal-card p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 14px;
}

.journal-card a {
  font-size: 13px;
  border-bottom: 1px solid var(--red);
  padding-bottom: 3px;
  color: var(--white);
}

@media (max-width:860px) {
  .journal-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ---------- Closing CTA ---------- */
.closing {
  /* Break out of any Elementor boxed containers */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 110px 0;
  text-align: center;
  background: var(--gray-dim);
}

.closing .tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--red);
  font-size: 17px;
  margin-bottom: 16px;
  display: block;
}

.closing h2 {
  font-size: clamp(34px, 5vw, 54px);
  max-width: 680px;
  margin: 0 auto 22px;
  line-height: 1.12;
}

.closing p {
  max-width: 480px;
  margin: 0 auto 36px;
  color: var(--gray-dark);
  font-size: 16px;
  line-height: 1.7;
}

/* ---------- Footer ---------- */
footer {
  background: var(--black);
  color: var(--text-soft);
  padding: 76px 0 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand img {
  height: 38px;
  margin-bottom: 18px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.75;
  max-width: 280px;
  color: var(--text-soft);
}

.foot-social {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}

.foot-social a {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  color: var(--white);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.foot-social a:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

footer h4 {
  color: var(--white);
  font-size: 17px;
  margin-bottom: 20px;
  font-weight: 500;
}

footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

footer ul a {
  font-size: 14px;
  color: var(--text-soft);
  transition: color 0.2s ease;
}

footer ul a:hover {
  color: var(--red);
}

.foot-bottom {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.42);
}

@media (max-width:860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width:520px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ================= NEWS / ARTICLE PAGE ================= */
.article-hero {
  background: var(--black);
  color: var(--white);
  padding: 60px 0 44px;
}

.article-hero .breadcrumb {
  color: var(--red);
  margin-bottom: 18px;
}

.article-hero .breadcrumb a {
  color: var(--text-soft);
}

.article-hero .breadcrumb a:hover {
  color: #fff;
}

.article-hero .eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--red);
  font-size: 15px;
  display: block;
  margin-bottom: 14px;
}

.article-hero h1 {
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.18;
  max-width: 820px;
}

.article-hero .meta {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--gray);
  letter-spacing: 0.02em;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) 1fr;
  gap: 56px;
  padding: 56px 0 80px;
}

.article-body {
  max-width: 760px;
}

.article-body h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 38px 0 16px;
  line-height: 1.3;
}

.article-body h3 {
  font-size: 19px;
  margin: 28px 0 12px;
  font-weight: 500;
}

.article-body p {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--gray-dark);
  margin: 0 0 16px;
}

.article-body ul {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
}

.article-body ul li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-dark);
  padding-left: 26px;
  position: relative;
  margin-bottom: 9px;
}

.article-body ul li::before {
  content: '\\2726';
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--red);
  font-size: 11px;
}

.article-faq {
  margin-top: 44px;
  border-top: 1px solid var(--line);
  padding-top: 36px;
}

.article-faq h2 {
  font-size: 24px;
  margin-bottom: 22px;
}

.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.faq-item .faq-q {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--black);
  margin-bottom: 8px;
}

.faq-item .faq-a {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--gray-dark);
  margin: 0;
}

.article-sidebar {
  position: sticky;
  top: 110px;
  align-self: start;
}

.sidebar-card {
  border: 1px solid var(--line);
  padding: 26px 24px;
  margin-bottom: 24px;
}

.sidebar-card h4 {
  font-size: 16px;
  margin-bottom: 14px;
  font-weight: 500;
}

.sidebar-card p {
  font-size: 13.5px;
  color: var(--gray-dark);
  line-height: 1.7;
  margin: 0 0 16px;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.related-list a {
  display: block;
  font-size: 13.5px;
  color: var(--gray-dark);
  line-height: 1.5;
  border-left: 2px solid var(--line);
  padding-left: 14px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.related-list a:hover {
  border-color: var(--red);
  color: var(--black);
}

@media (max-width:980px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .article-sidebar {
    position: static;
  }
}

.pdp-breadcrumb {
  padding: 20px 0 0;
  font-size: 12.5px;
  color: var(--gray);
}

.pdp-breadcrumb a {
  color: var(--gray-dark);
}

.pdp-breadcrumb a:hover {
  color: var(--red);
}

.pdp-breadcrumb span {
  color: var(--black);
}

.pdp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  padding: 40px 0 90px;
  align-items: start;
}

.pdp-image {
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  padding: 40px;
}

.pdp-image img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
}

.pdp-info {
  padding-top: 6px;
}

.pdp-cat {
  font-size: 13px;
  color: var(--red);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  display: block;
  margin-bottom: 14px;
}

.pdp-info h1 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.22;
  margin-bottom: 12px;
  font-weight: 500;
}

.pdp-tagline {
  font-size: 15px;
  color: var(--gray-dark);
  margin-bottom: 24px;
  line-height: 1.6;
}

.pdp-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.pdp-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  color: var(--black);
}

.pdp-price-old {
  font-size: 16px;
  color: var(--gray);
  text-decoration: line-through;
}

.pdp-pill {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  margin-left: 2px;
}

.pdp-pill.sale {
  background: var(--red);
  color: #fff;
}

.pdp-pill.new {
  background: var(--black);
  color: #fff;
}

.pdp-desc {
  font-size: 15px;
  line-height: 1.85;
  color: var(--gray-dark);
  margin-bottom: 24px;
}

.pdp-specs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.pdp-specs span {
  font-size: 12px;
  color: var(--gray-dark);
  border: 1px solid var(--line);
  padding: 6px 13px;
  letter-spacing: 0.02em;
}

.pdp-features,
.pdp-features-content ul {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pdp-features li,
.pdp-features-content ul li {
  font-size: 13.5px;
  color: var(--gray-dark);
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.pdp-features li::before,
.pdp-features-content ul li::before {
  content: '\2014';
  color: var(--red);
  font-size: 12px;
  margin-top: 1px;
}

.pdp-subhead,
.pdp-features-content h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 26px 0 12px;
  font-family: 'Jost', sans-serif;
}

.pdp-steps,
.pdp-features-content ol {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pdp-steps li,
.pdp-features-content ol li {
  font-size: 13.5px;
  color: var(--gray-dark);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  counter-increment: step;
}

.pdp-steps li::before,
.pdp-features-content ol li::before {
  content: counter(step);
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.pdp-cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px;
  font-size: 14.5px;
  margin-bottom: 14px;
}

.pdp-back {
  font-size: 12.5px;
  color: var(--gray-dark);
  border-bottom: 1px solid transparent;
}

.pdp-back:hover {
  color: var(--red);
  border-color: var(--red);
}

.pdp-note {
  font-size: 12px;
  color: var(--gray);
  line-height: 1.7;
  margin-top: 22px;
}

.pdp-related {
  padding: 0 0 90px;
}

.pdp-related h2 {
  font-size: clamp(24px, 3vw, 30px);
  margin-bottom: 26px;
}

@media (max-width:860px) {
  .pdp {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px 0 60px;
  }

  .pdp-image {
    aspect-ratio: auto;
    min-height: 300px;
  }
}

.shop-hero {
  background: var(--black);
  color: var(--white);
  padding: 100px 0 46px;
  position: relative;
}

.breadcrumb {
  font-size: 12.5px;
  color: var(--red);
  letter-spacing: 0.03em;
  margin-bottom: 18px;
}

.breadcrumb a {
  color: var(--text-soft);
}

.breadcrumb a:hover {
  color: var(--white);
}

.shop-hero h1 {
  font-size: clamp(38px, 5vw, 58px);
  margin-bottom: 14px;
}

.shop-hero p {
  max-width: 600px;
  color: var(--text-soft);
  font-size: 15.5px;
  line-height: 1.7;
}

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 16px;
}

.chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  font-size: 13px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--gray-dark);
  transition: all 0.2s ease;
  cursor: pointer;
  background: #fff;
}

.chip.active,
.chip:hover {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.sort-select {
  font-family: 'Jost', sans-serif;
  font-size: 13.5px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  color: var(--black);
  letter-spacing: 0.02em;
}

.result-count {
  font-size: 13px;
  color: var(--gray);
}

.shop-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 48px;
  padding: 48px 0 100px;
}

.filter-panel h4 {
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0.03em;
  color: var(--black);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
}

.filter-group {
  margin-bottom: 34px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--gray-dark);
  margin-bottom: 12px;
  cursor: pointer;
}

.filter-option input {
  accent-color: var(--red);
  width: 15px;
  height: 15px;
}

.filter-option:hover {
  color: var(--red);
}

.filter-count {
  margin-left: auto;
  color: var(--gray);
  font-size: 12.5px;
}

.filter-cta {
  background: var(--gray-dim);
  border: 1px solid var(--line);
  padding: 22px;
  text-align: center;
  margin-top: 8px;
}

.filter-cta p {
  font-size: 13px;
  color: var(--gray-dark);
  margin: 0 0 14px;
  line-height: 1.6;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.shop-card {
  background: #fff;
  border: 1px solid var(--line);
  position: relative;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.shop-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, 0.35);
}

.shop-card .tagrow {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}

.shop-card .tag-sale {
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 5px 10px;
}

.shop-card .tag-new {
  background: var(--black);
  color: var(--white);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 5px 10px;
}

.shop-card .shop-swatch {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 18px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.shop-card .shop-swatch img {
  max-height: 190px;
  width: auto;
}

.shop-card .shop-body {
  padding: 20px 22px 24px;
}

.shop-card .cat {
  font-size: 11.5px;
  color: var(--red);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  display: block;
  margin-bottom: 6px;
}

.shop-card h3 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  margin-bottom: 12px;
  min-height: 47px;
}

.shop-card .price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.shop-card .price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
}

.shop-card .price-old {
  font-size: 13px;
  color: var(--gray);
  text-decoration: line-through;
}

.shop-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  background: var(--black) !important;
  color: var(--white) !important;
  border: none !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  transition: background 0.25s ease !important;
  text-transform: none !important;
  font-weight: normal !important;
}

.shop-btn:hover {
  background: var(--red) !important;
  color: var(--white) !important;
}

.shop-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}

@media (max-width:980px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }

  .filter-panel {
    display: none;
  }

  .shop-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:560px) {
  .shop-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- General small-screen polish ---------- */
@media (max-width:480px) {
  .wrap {
    padding: 0 20px;
  }

  .nav {
    padding: 12px 20px;
  }

  .discreet-note {
    font-size: 11px;
    padding: 10px 14px;
  }

  .hero-copy {
    padding: 96px 20px 34px;
  }

  .section {
    padding: 64px 0;
  }

  .section-head {
    margin-bottom: 34px;
  }

  .closing {
    padding: 70px 0;
  }

  .shop-hero {
    padding: 88px 0 34px;
  }

  .contact-hero {
    padding: 52px 0 44px;
  }

  footer {
    padding: 56px 0 24px;
  }

  .info-card {
    padding: 34px 22px;
  }
}

img {
  height: auto;
}

/* ---------- Page Hero ---------- */
.page-hero {
  /* Break out of Elementor */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--black);
  color: var(--white);
  padding: 106px 0 60px;
  text-align: center;
  position: relative;
}

.page-hero .tag {
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.08em;
  color: var(--red) !important;
  display: block;
  margin-bottom: 14px;
  text-transform: uppercase;
  font-style: normal !important;
}

.page-hero h1 {
  font-size: clamp(36px, 5vw, 56px) !important;
  margin: 0;
  line-height: 1.15;
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--white) !important;
  font-weight: 500 !important;
}

@media (max-width:480px) {
  .page-hero {
    padding: 52px 0 44px;
  }
}

/* Remove default WooCommerce sidebar border from full-width layout */
body #primary,
body #main,
body .content-area,
body .site-main,
.woocommerce #primary,
.woocommerce-page #primary {
  border: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

body #primary::after,
body #main::after,
body .content-area::after,
body .site-main::after {
  display: none !important;
  content: none !important;
}

/* Reset .product grid styles that were leaking into the main single product wrapper */
body.single-product div.product,
.woocommerce.single-product div.product {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Modern Toast Notifications for WooCommerce Messages */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  z-index: 99999 !important;
  background: #fff !important;
  color: #333 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  border: none !important;
  outline: none !important;
  padding: 20px 25px !important;
  max-width: 450px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  animation: slideInRight 0.5s ease forwards;
}

.woocommerce-error {
  border-left-color: #ff3333 !important;
}

.woocommerce-info {
  border-left-color: #3399ff !important;
}

/* Keep the view cart button distinct */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  background: var(--black) !important;
  color: #fff !important;
  padding: 10px 18px !important;
  border-radius: 4px !important;
  margin-left: 20px !important;
  font-size: 14px !important;
  order: 2;
  /* Move button to the right side of the flex container */
  white-space: nowrap;
}

@keyframes slideInRight {
  from {
    transform: translateX(120%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 480px) {

  .woocommerce-message,
  .woocommerce-error,
  .woocommerce-info {
    bottom: 20px !important;
    right: 20px !important;
    left: 20px !important;
    max-width: calc(100% - 40px);
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .woocommerce-message .button,
  .woocommerce-error .button,
  .woocommerce-info .button {
    margin-left: 0 !important;
    width: 100%;
    text-align: center;
  }
}

/* =========================================================================
   CART PAGE REDESIGN
   ========================================================================= */

/* Hero Banner */
.cart-hero-banner {
  background: #111;
  color: #fff;
  padding: 120px 20px 60px;
  margin-bottom: 40px;
  width: 100%;
}

.cart-hero-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.cart-hero-inner .breadcrumb {
  color: #999;
  font-size: 14px;
  margin-bottom: 15px;
}

.cart-hero-inner .breadcrumb a {
  color: #ccc;
  text-decoration: none;
}

.cart-hero-inner h1 {
  color: #fff !important;
  font-size: clamp(32px, 4vw, 42px) !important;
  margin: 0 0 10px;
  font-weight: 600;
}

.cart-hero-inner p {
  color: #bbb;
  font-size: 16px;
  margin: 0;
}

/* Split Layout */
.woocommerce-cart .site-content {
  background-color: #f7f9fa;
  /* Light grey background for the whole cart area */
  padding-bottom: 60px;
}

.cart-split-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
  padding-bottom: 60px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 991px) {
  .cart-split-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.cart-split-main {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 30px;
  border: 1px solid #f0f0f0;
}

/* Order Summary Card */
.cart-split-sidebar {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  padding: 28px;
  border: 1px solid #e5e5e5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.cart-split-sidebar .cart_totals {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .woocommerce .cart-split-layout .cart-split-sidebar h2,
html body .cart-split-sidebar h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
  color: #111111 !important;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 18px;
  line-height: 1.2 !important;
  white-space: nowrap;
  text-align: left !important;
  width: 100% !important;
}

.cart-split-sidebar table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

.cart-split-sidebar table th,
.cart-split-sidebar table td {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  padding: 0;
  border-bottom: none;
  background: transparent;
  font-size: 15px !important;
  color: #333333 !important;
  vertical-align: middle;
}

.cart-split-sidebar table th {
  font-weight: 400 !important;
  white-space: nowrap !important;
  width: 50%;
  text-align: left !important;
  padding-top: 18px;
  padding-bottom: 18px;
}

.cart-split-sidebar table td {
  text-align: right !important;
  width: 50%;
  padding-top: 18px;
  padding-bottom: 18px;
}

.cart-split-sidebar table .order-total th,
.cart-split-sidebar table .order-total td {
  border-top: 1px solid #e5e5e5;
  padding-top: 20px;
  padding-bottom: 20px;
}

.cart-split-sidebar table .order-total th {
  font-weight: 700 !important;
  font-size: 20px !important;
  color: #111111 !important;
}

.cart-split-sidebar table .order-total td strong {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ff0000 !important;
}

.wc-proceed-to-checkout {
  margin-top: 22px;
}

.checkout-button {
  background: #ff0000 !important;
  color: #ffffff !important;
  border-radius: 5px !important;
  padding: 0 20px !important;
  height: 52px;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background 0.2s ease;
}

.checkout-button:hover {
  background: #cc0000 !important;
}

.checkout-button svg {
  margin-right: 8px;
}

.divider-or {
  display: flex;
  align-items: center;
  text-align: center;
  color: #999999;
  font-size: 12px;
  font-weight: 500;
  margin: 22px 0;
}

.divider-or::before,
.divider-or::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e5e5e5;
}

.divider-or::before {
  margin-right: 15px;
}

.divider-or::after {
  margin-left: 15px;
}

.divider-or span {
  background: #fff;
  padding: 0 15px;
  color: #aaa;
  font-size: 12px;
  position: relative;
  z-index: 2;
}

.whatsapp_button_cart {
  background: #fff !important;
  color: #008000 !important;
  border: 1px solid #008000 !important;
  border-radius: 6px !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.whatsapp_button_cart svg {
  fill: #008000;
}

.whatsapp_button_cart:hover {
  background: #f0fdf4 !important;
}

.cart-payment-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 25px;
}

.cart-payment-icons svg,
.cart-payment-icons img {
  height: 32px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  padding: 4px;
  background: #fff;
  object-fit: contain;
}

/* Cart Table Styling */
table.shop_table.cart {
  border: none;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 0;
  width: 100%;
}

table.shop_table.cart th,
table.shop_table.cart td {
  padding: 20px;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #f1f1f1 !important;
  vertical-align: middle;
  background: #fff !important;
}

table.shop_table.cart tbody tr:nth-child(odd) td,
table.shop_table.cart tbody tr:nth-child(even) td,
table.shop_table.cart tbody tr {
  background: #fff !important;
}

table.shop_table.cart thead th {
  background: #fff !important;
  font-weight: 600;
  text-transform: capitalize;
  color: #333;
  border-bottom: 2px solid #eee !important;
}

table.shop_table.cart tbody tr:last-child td {
  border-bottom: none !important;
}

table.shop_table.cart .product-remove a.remove {
  color: #999 !important;
  font-weight: 300;
  font-size: 24px;
}

table.shop_table.cart .product-remove a.remove:hover {
  background: transparent !important;
  color: #ff0000 !important;
}

table.shop_table.cart .product-thumbnail img {
  max-width: 90px;
  border-radius: 6px;
  height: auto;
}

table.shop_table.cart .cart-product-title {
  font-weight: 600;
  color: #333;
  font-size: 16px;
  display: block;
}

table.shop_table.cart .cart-product-cat {
  color: #888;
  font-size: 13px;
  margin-top: 4px;
}

table.shop_table.cart .product-price,
table.shop_table.cart .product-subtotal {
  font-weight: 500;
}

/* Quantity Wrapper Styling */
.qty-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  background: #f9f9f9;
}

.qty-wrapper .qty-btn {
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

.qty-wrapper .qty-btn:hover {
  background: #eee;
}

.qty-wrapper input.qty {
  border: none !important;
  background: transparent !important;
  text-align: center;
  width: 45px;
  padding: 8px 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty-wrapper input.qty::-webkit-outer-spin-button,
.qty-wrapper input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Cart Actions */
table.shop_table.cart td.actions {
  padding: 20px 0 0;
  text-align: right;
}

table.shop_table.cart td.actions .coupon {
  display: none;
}

.cart-actions-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.continue-shopping-btn {
  background: #fff !important;
  color: #333 !important;
  border: 1px solid #ddd !important;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
}

.continue-shopping-btn:hover {
  background: #f9f9f9 !important;
}

table.shop_table.cart td.actions button[name="update_cart"] {
  background: #f1f1f1;
  color: #333;
  padding: 12px 20px;
  border-radius: 4px;
  border: none;
  font-weight: 500;
}

table.shop_table.cart td.actions button[name="update_cart"]:hover {
  background: #e2e2e2;
}

/* Cart Totals */
.cart_totals h2 {
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
  font-weight: 600;
}

.cart_totals table.shop_table {
  border: none;
  width: 100%;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
  border-top: none;
  border-bottom: 1px solid #eaeaea;
  padding: 15px 0;
  background: transparent;
}

.cart_totals table.shop_table th {
  font-weight: 500;
  color: #555;
  text-align: left;
}

.cart_totals table.shop_table td {
  text-align: right;
  font-weight: 500;
}

.cart_totals table.shop_table tr.order-total th {
  font-size: 18px;
  color: #111;
  font-weight: 700;
  border-bottom: none;
}

.cart_totals table.shop_table tr.order-total td {
  border-bottom: none;
}

.cart_totals table.shop_table tr.order-total .amount {
  color: #e60000;
  font-size: 22px;
  font-weight: 700;
}

.wc-proceed-to-checkout {
  padding: 0 !important;
  margin-top: 20px;
}

.wc-proceed-to-checkout .checkout-button {
  background: #e60000 !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 16px !important;
  font-weight: 600 !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.wc-proceed-to-checkout .checkout-button:hover {
  background: #cc0000 !important;
}

/* Custom Buttons in Cart */
.cart-custom-buttons {
  margin-top: 20px;
}

.divider-or {
  text-align: center;
  position: relative;
  margin: 25px 0;
}

.divider-or::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid #eaeaea;
  z-index: 1;
}

.divider-or span {
  background: #fff;
  padding: 0 15px;
  color: #999;
  font-size: 12px;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

.whatsapp_button_cart {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff !important;
  color: #25D366 !important;
  border: 1px solid #25D366 !important;
  border-radius: 6px !important;
  padding: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  width: 100%;
}

.whatsapp_button_cart:hover {
  background: #f0fcf4 !important;
}

.cart-payment-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 25px;
}

.cart-payment-icons img {
  height: 25px;
  object-fit: contain;
}

/* Quantity Input Styling Override for Cart */
table.shop_table.cart .quantity .qty {
  width: 45px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 5px;
}

@media (max-width: 991px) {
  .cart-split-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  table.shop_table.cart .product-thumbnail {
    display: none !important;
  }
}

/* =========================================
   CART PAGE REDESIGN
   ========================================= */

/* 1. Empty Cart Section */
.empty-cart-redesign {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 24px 90px;
}

.empty-cart-redesign .cart-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  background-color: #111111;
  color: #ffffff;
  border-radius: 50%;
  margin-bottom: 18px;
}

.empty-cart-redesign .cart-icon-wrapper svg {
  width: 45px;
  height: 45px;
}

.empty-cart-redesign h2 {
  font-size: 28px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 8px;
  font-family: var(--font-family-sans, 'Jost', sans-serif);
}

.empty-cart-redesign p {
  font-size: 15px;
  color: #666666;
  margin: 0 0 22px;
}

.empty-cart-redesign .button.return-to-shop {
  background-color: #111111;
  color: #ffffff;
  height: 48px;
  padding: 0 35px;
  border-radius: 5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  transition: background-color 0.3s;
}

.empty-cart-redesign .button.return-to-shop:hover {
  background-color: #ff0000;
  color: #ffffff;
}

/* 2. Separator */
.cart-separator {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid #e5e5e5;
}

/* 3. New in Store Section */
.new-in-store-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 45px 24px;
  text-align: center;
}

.new-in-store-section h2 {
  font-size: 28px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 8px;
  font-family: var(--font-family-sans, 'Jost', sans-serif);
}

.new-in-store-section .red-underline {
  width: 40px;
  height: 3px;
  background-color: #ff0000;
  margin: 0 auto 10px;
}

.new-in-store-section .subtitle {
  font-size: 15px;
  color: #666666;
  margin: 0 0 28px;
}

/* 4. Product Grid */
.new-in-store-section .woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.new-in-store-section .woocommerce ul.products li.product {
  background: #ffffff;
  border: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  margin: 0;
  width: 100%;
}

/* 5. Product Image */
.new-in-store-section .woocommerce ul.products li.product .woocommerce-LoopProduct-link>img,
.new-in-store-section .woocommerce ul.products li.product img {
  height: 220px;
  width: 100%;
  object-fit: contain;
  margin: 0 auto 15px;
  max-width: 170px;
  max-height: 210px;
}

/* 6. Product Titles */
.new-in-store-section .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px;
  font-weight: 500;
  color: #e6003d;
  /* Matching original color from screenshot if needed, but #ff0000 works. Requirement says #e6003d */
  margin: 0 0 10px;
  min-height: 40px;
  /* Force 2 lines max height */
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 7. Prices */
.new-in-store-section .woocommerce ul.products li.product .price {
  font-size: 16px;
  font-weight: 500;
  color: #222222;
  margin: auto 0 15px;
  /* Auto top margin pushes it down so heights align */
}

/* 8. Add to Cart Button */
.new-in-store-section .woocommerce ul.products li.product .button.add_to_cart_button {
  background-color: #111111;
  color: #ffffff;
  border: none;
  border-radius: 22px;
  height: 42px;
  padding: 0 25px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: background-color 0.3s;
}

.new-in-store-section .woocommerce ul.products li.product .button.add_to_cart_button:hover {
  background-color: #e60000;
}

/* 10. Bottom Trust Bar */
.cart-trust-bar {
  background-color: #f7f7f7;
  padding: 22px 0;
  margin-top: 40px;
}

.cart-trust-bar .cart-trust-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: center;
}

.cart-trust-bar .trust-column {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  position: relative;
}

.cart-trust-bar .trust-column:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background-color: #e5e5e5;
}

.cart-trust-bar .trust-column svg {
  color: #111111;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.cart-trust-bar .trust-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.cart-trust-bar .trust-text strong {
  font-size: 15px;
  font-weight: 600;
  color: #111111;
  line-height: 1.2;
}

.cart-trust-bar .trust-text span {
  font-size: 13px;
  color: #666666;
  line-height: 1.2;
  margin-top: 2px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .new-in-store-section .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .cart-trust-bar .cart-trust-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .cart-trust-bar .trust-column:not(:last-child)::after {
    display: none;
  }

  .cart-trust-bar .trust-column {
    justify-content: flex-start;
    max-width: 250px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .new-in-store-section .woocommerce ul.products {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   CHECKOUT PAGE REDESIGN
   ========================================= */

/* Hero Section */
.checkout-hero-banner {
    background-color: #111111;
    color: #ffffff;
    padding: 35px 24px;
}
.checkout-hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.hero-text-section .breadcrumb {
    font-size: 14px;
    color: #999999;
    margin-bottom: 10px;
}
.hero-text-section .breadcrumb a {
    color: #cccccc;
    text-decoration: none;
}
.hero-text-section h1 {
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 5px;
    color: #ffffff;
}
.hero-text-section p {
    font-size: 16px;
    color: #dddddd;
    margin: 0;
}
.hero-trust-features {
    display: flex;
    gap: 30px;
}
.hero-trust-features .trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hero-trust-features .trust-item svg {
    width: 28px;
    height: 28px;
    color: #ffffff;
    opacity: 0.8;
}
.hero-trust-features .trust-text {
    font-size: 13px;
    line-height: 1.3;
    color: #dddddd;
}
.hero-trust-features .trust-text strong {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    display: block;
}

/* Main Layout */
.checkout-split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
    gap: 28px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 24px;
}

/* Cards */
.checkout-billing-card,
.checkout-order-review-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* Form Fields */
.checkout-billing-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    color: #111111;
}

/* Let's fake the numbering via CSS if WooCommerce outputs standard h3 */
.woocommerce-billing-fields h3 {
    display: none; /* Hide standard heading */
}
.checkout-billing-card::before {
    content: "1. Billing Details";
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #111111;
}

.woocommerce-additional-fields h3 {
    display: none;
}
.woocommerce-additional-fields::before {
    content: "2. Additional Information";
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin: 30px 0 20px;
    padding-top: 25px;
    border-top: 1px solid #e5e5e5;
    color: #111111;
}

.woocommerce form .form-row {
    padding: 0;
    margin: 0 0 16px;
}
.woocommerce form .form-row label {
    font-size: 14px;
    color: #111111;
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
}
.woocommerce form .form-row .required {
    color: #ff0000;
    text-decoration: none;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container .select2-selection--single {
    width: 100%;
    height: 48px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 15px;
    font-size: 15px;
    background-color: #ffffff;
    box-shadow: none;
}
.woocommerce form .form-row textarea {
    height: 110px;
    resize: vertical;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 46px;
    padding-left: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
}

/* Grid layout for First/Last Name */
.woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
    width: 100%;
    float: none;
}
.woocommerce form .form-row-wide {
    grid-column: span 2;
}
.hidden-field {
    display: none !important;
}

/* Order Review Section */
.checkout-order-review-card h3.step-heading {
    font-size: 20px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
    color: #111111;
    display: flex;
    align-items: center;
}

.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 15px 0;
    border-top: none;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.woocommerce-checkout-review-order-table thead th {
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    border-bottom: 2px solid #e5e5e5;
}
.woocommerce-checkout-review-order-table .product-name {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 15px;
    color: #111111;
}
.woocommerce-checkout-review-order-table .product-name img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 2px;
}
.woocommerce-checkout-review-order-table .product-total {
    text-align: right;
    font-weight: 500;
    font-size: 15px;
    color: #111111;
}

/* Totals */
.woocommerce-checkout-review-order-table tfoot tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}
.woocommerce-checkout-review-order-table tfoot tr th {
    padding: 0;
    border: none;
    font-weight: 500;
    color: #666;
}
.woocommerce-checkout-review-order-table tfoot tr td {
    padding: 0;
    border: none;
    text-align: right;
    font-weight: 600;
}
.woocommerce-checkout-review-order-table tfoot .order-total {
    border-bottom: none;
    padding-top: 20px;
}
.woocommerce-checkout-review-order-table tfoot .order-total th {
    font-size: 20px;
    font-weight: 700;
    color: #111111;
}
.woocommerce-checkout-review-order-table tfoot .order-total td bdi {
    font-size: 22px;
    font-weight: 700;
    color: #ff0000;
}

/* Payment Methods */
#payment {
    background: transparent;
    border-radius: 0;
    padding: 0;
}
#payment::before {
    content: "4. Payment Method";
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin: 20px 0 15px;
    color: #111111;
}
#payment ul.payment_methods {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 0;
    margin: 0 0 20px;
    background: #fafafa;
}
#payment ul.payment_methods li {
    padding: 15px 20px;
    margin: 0;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}
#payment ul.payment_methods li:last-child {
    border-bottom: none;
}
#payment ul.payment_methods li:hover {
    background: #f0f0f0;
}
#payment ul.payment_methods li input[type="radio"] {
    margin-right: 15px;
    transform: scale(1.2);
}
#payment ul.payment_methods li label {
    font-size: 15px;
    font-weight: 500;
    color: #111111;
    margin: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#payment ul.payment_methods li img {
    max-height: 24px;
    margin-left: 10px;
}
#payment div.payment_box {
    width: 100%;
    margin-top: 15px;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #666;
}

/* Place Order Button */
.checkout-personal-data-notice {
    font-size: 12px;
    color: #666666;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}
.checkout-personal-data-notice svg {
    color: #888;
}

#place_order {
    width: 100%;
    height: 52px;
    background: #ff0000;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    white-space: nowrap;
}
#place_order:hover {
    background: #d90000;
}
.woocommerce-terms-and-conditions-wrapper {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: 15px;
}
.woocommerce-terms-and-conditions-wrapper a {
    color: #ff0000;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
    .checkout-split-layout {
        grid-template-columns: 1fr;
    }
    .checkout-hero-inner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .hero-trust-features {
        justify-content: center;
        flex-wrap: wrap;
    }
}
@media (max-width: 767px) {
    .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
    .woocommerce form .form-row-wide {
        grid-column: 1;
    }
    .hero-trust-features .trust-item {
        width: 100%;
        justify-content: center;
    }
}
/* ==========================================================================
   Single Post Redesign (Confidently Hot Blog)
   ========================================================================== */

.article-hero {
    background-color: #111111;
    color: #ffffff;
    padding: 120px 0 60px; /* Accounts for transparent header */
    text-align: center;
}
.article-hero .wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}
.article-hero .breadcrumb {
    font-size: 13px;
    color: #aaaaaa;
    margin-bottom: 20px;
}
.article-hero .breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}
.article-hero .eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #ff0000;
    color: #fff;
    padding: 4px 10px;
    border-radius: 3px;
    margin-bottom: 15px;
}
.article-hero h1 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 15px 0;
    color: #ffffff;
}
.article-hero .meta {
    font-size: 14px;
    color: #cccccc;
}

.article-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 20px;
    max-width: 1100px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .article-layout {
        grid-template-columns: 1fr 340px;
        gap: 60px;
    }
}

.article-body {
    font-size: 18px;
    line-height: 1.7;
    color: #333333;
}
.article-body h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 40px 0 20px;
    color: #111111;
}
.article-body h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 30px 0 15px;
}
.article-body p {
    margin-bottom: 20px;
}
.article-body ul, .article-body ol {
    margin-bottom: 20px;
    padding-left: 20px;
}
.article-body li {
    margin-bottom: 10px;
}

.article-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}
.sidebar-card {
    background: #f9f9f9;
    border: 1px solid #eeeeee;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 30px;
}
.sidebar-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: #111111;
}
.sidebar-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 15px;
}
.related-list a {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: #111111;
    text-decoration: none;
    margin-bottom: 12px;
    font-weight: 500;
    transition: color 0.2s ease;
}
.related-list a:hover {
    color: #ff0000;
}
.related-list a:last-child {
    margin-bottom: 0;
}