.about .btn-get-started {
    color: #fff;
}


.about .btn-get-started-outline {
    background-color: transparent;
    color: var(--accent-color);
    border-radius: 30px;
    padding: 8px 30px;
    border: 2px solid var(--accent-color);
    transition: 0.3s all ease-in-out;
    font-size: 14px;
}

.about .btn-get-started-outline:hover {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: #000;
}

.hero-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
}

.fixed-art-image {
    height: 220px;
    object-fit: cover;
}


/***** white ****/
/* === Home page only (index) === */
.index-page-white #header{
  position: absolute;          /* sits over the hero */
  top: 0; left: 0; right: 0;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 1000;
}

/* nav links + icons white on hero */
.index-page-white .navmenu ul li a,
.index-page-white .navmenu i,
.index-page-white .navmenu .fab { color: #fff !important; }

/* active/hover state (pick your accent if you want) */
.index-page-white .navmenu ul li a:hover,
.index-page-white .navmenu ul li a.active { opacity: .9; }

/* make the hero start *behind* the header and give breathing room for content */
.index-page-white .hero-merge {
  position: relative;
  /*min-height: 80vh;*/            /* optional: big hero */
  padding-top: 120px;          /* header height compensation so text isn’t hidden */
}

/* dark overlay for readability on any image */
.index-page-white .hero-merge::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.55),
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.15)
  );
  z-index: 1;
}
.index-page-white .hero-merge > .container { position: relative; z-index: 2; }

/* ensure white cart badge looks good on dark hero (optional) */
.index-page-white .navmenu .badge { background: #fff; color:#111; }


.index-page-white #about {
  padding-top: 160px !important;
  padding-bottom: 160px !important;
}

@media (max-width: 1199px) {
  .index-page-white .navmenu ul {
    background-color: #000;
  }
}

.index-page-white .header .logo img {
  max-height: 90px;

}

.index-page-white h3 {
    font-weight: normal;
}


/** ===========================
    SHOP PAGE STYLES
=========================== **/

/* Card structure */
.product-card {
  border: 2px solid #50ba6b;   /* subtle green outline */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card .card-body {
  display: flex;
  flex-direction: column; /* lets footer stick at bottom */
}

/* --- Thumbnails: preserve 500x686 ratio --- */
.thumb-wrap {
  width: 100%;
  aspect-ratio: 500 / 686;   /* keeps the original aspect ratio */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #fff;          /* clean backdrop */
}
.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* show entire product image */
  object-position: center;
  border-radius: 8px;        /* soft corners */
  display: block;
}

/* Product title & description */
.product-title {
  font-size: 14px;
  font-weight: 600;
}
.product-desc {
  font-size: 13px;
  color: #666;
  min-height: 54px;          /* keeps row heights consistent */
  margin-bottom: 8px;
}

/* Footer area pinned to bottom */
.bottom-cta {
  margin-top: auto;
}
.sizes-slot {
  min-height: 36px;          /* reserve space even if no sizes */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* Sizes pill styling */
.sizes-pill {
  background: #e6f4ea;
  color: #0b6b2a;
  border: 1px solid #b7e1c2;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* CTA button */
.btn-success {
  background-color: #50ba6b;
  border-color: #50ba6b;
}
.btn-success:hover {
  background-color: #0a5e25;
  border-color: #0a5e25;
}

/* Responsive tweaks */
@media (min-width: 992px) {
  .thumb-wrap {
    max-width: 260px;       /* cap thumbnail size on desktops */
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .product-desc { min-height: 48px; }
  .sizes-slot { min-height: 32px; }
  .thumb-wrap { padding: 6px; }
}


/**home page**/
/** HOME – category strip **/

/* Category tile (white block) */
.category-tile {
  background: #fff;
  border: 2px solid #50ba6b;   /* green outline like mock */
  border-radius: 10px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;         /* horizontal centering */
  justify-content: center;     /* vertical centering */
  text-align: center;
  min-height: 210px;           /* ensures block height */
}
.category-tile h4 { font-weight: 800; margin-bottom: 10px; }
.category-tile p  { color: #666; margin-bottom: 14px; }

/* Product cards (same vibe as shop) */
.product-card {
  border: 2px solid #50ba6b;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* Image area uses 500×686 aspect; contained so packs look crisp */
.thumb-wrap {
  width: 100%;
  aspect-ratio: 500 / 686;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #fff;
}
.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* show full pack */
  object-position: center;
  border-radius: 8px;
  display: block;
}

/* Text + alignment */
.product-card .card-body { display: flex; flex-direction: column; }
.product-title { font-size: 14px; }
.product-desc  { font-size: 13px; min-height: 54px; margin-bottom: 8px; }

/* Bottom area pinned so buttons align */
.bottom-cta  { margin-top: auto; }
.sizes-slot  { min-height: 36px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.sizes-pill  { background:#e6f4ea; color:#0b6b2a; border:1px solid #b7e1c2; font-size:12px; padding:6px 10px; border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Buttons */
.btn-success        { background-color:#50ba6b; border-color:#50ba6b; }
.btn-success:hover  { background-color:#0a5e25; border-color:#0a5e25; }

/* Responsive tweaks */
@media (min-width: 992px) {
  .thumb-wrap { max-width: 260px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .product-desc { min-height: 48px; }
  .sizes-slot   { min-height: 32px; }
  .thumb-wrap   { padding: 6px; }
}


/* ===== About / Feature Slab ===== */
.feature-slab {
  background: #f4f6f5; /* soft grey like the mock */
}

.feature-title {
  font-weight: 800;
  line-height: 1.2;
}

.feature-copy {
  color: #2f2f2f;
  font-size: 13.5px;      /* compact like the screenshot */
  line-height: 1.6;
  max-width: 640px;       /* keeps lines tidy on wide screens */
}

/* Image block: tidy ratio, rounded corners, subtle shadow */
.feature-image-wrap {
  width: 100%;
  max-width: 420px;       /* controls image width on desktop */
  aspect-ratio: 4 / 3;    /* close to the mock’s shape */
  overflow: hidden;
  border-radius: 10px;
}

.feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills nicely; use 'contain' if you want letterboxing */
  object-position: center;
  display: block;
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
  .feature-image-wrap {
    max-width: 100%;
    aspect-ratio: 16 / 10;   /* a bit wider on phones */
    margin-bottom: 6px;
  }
  .feature-title { font-size: 1.35rem; }
}