/* =========================
   Product Page Shared Styles
   ========================= */

/* Hero section */
.product-hero {
  background: linear-gradient(135deg, rgba(47,54,81,1), rgba(47,54,81,0.92));
  color: #fff;
  padding: 34px 0;
}

.product-hero h1 {
  margin: 0;
  font-weight: 800;
}

/* Breadcrumb */
.breadcrumb-wrap {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}


/* =========================
   Product Image Container
   ========================= */

.product-image {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}

.product-image img {
  max-width: 100%;
  max-height: 340px;
  object-fit: contain;
  image-rendering: auto;
}


/* =========================
   Badge (Sale / Limited)
   ========================= */

.badge-pill {
  display: inline-block;
  background: #ff7a3d;
  color: #fff;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}


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

.benefits-card {
  border: 1px solid #e9ecef;
  border-radius: 14px;
  background: #ffffff;
  padding: 16px;
  margin-top: 15px;
}

.benefits-card h5 {
  font-weight: 600;
}

.benefits-card ul {
  margin-bottom: 0;
}


/* =========================
   Product Price
   ========================= */

.product-price {
  font-size: 26px;
  font-weight: bold;
}

.product-compare {
  text-decoration: line-through;
  color: #6c757d;
}


/* =========================
   Quantity input
   ========================= */

.qty-input {
  max-width: 120px;
}


/* =========================
   Product description
   ========================= */

.product-description {
  color: #6c757d;
}


/* =========================
   Button consistency
   ========================= */

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus-visible {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn-dark,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark:visited,
.btn-dark:focus-visible {
  background-color: #212529 !important;
  border-color: #212529 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}


/* =========================
   Mobile responsive
   ========================= */

@media (max-width: 768px) {
  .product-image {
    min-height: 260px;
    padding: 15px;
  }

  .product-image img {
    max-height: 240px;
  }
}



/* =========================
   Mobile responsiveness fixes (iPhone/iPad)
   ========================= */



body{
  width: auto !important;
  max-width: none !important;
  overflow-x: hidden !important;
}



/* 2) Make sizing predictable */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 3) Ensure media never overflows */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 4) Collection hero spacing on smaller screens */
.collection-hero {
  padding: 48px 0;
}
@media (max-width: 576px) {
  .collection-hero {
    padding: 34px 0;
  }
  .collection-hero h1 {
    font-size: 1.6rem;
    line-height: 1.15;
  }
}

/* 5) Toolbar: stop select/label from forcing horizontal width */
.toolbar form {
  width: 100%;
}
.toolbar .form-select {
  width: auto;
  min-width: 170px;
  max-width: 100%;
}
@media (max-width: 576px) {
  .toolbar {
    gap: 10px !important;
  }
  .toolbar form {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .toolbar .form-select {
    width: 100%;
    min-width: 0;
  }
}

/* 6) Product card layout (responsive + iOS safe) */
.product-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  overflow: hidden;              /* keeps badge + image clean */
  height: 100%;                  /* makes columns equal height */
  display: flex;
  flex-direction: column;
}

.product-thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f8f9fa;
}

/* Maintain a consistent image area so cards don't jump */
.product-thumb a {
  display: block;
  width: 100%;
}

/* Use aspect-ratio when available (modern Safari supports it) */
.product-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;           /* square crop area */
  object-fit: cover;
}

/* If any title is long, don’t let it stretch the grid */
.product-card .fw-bold {
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* show max 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Keep the button at the bottom if descriptions grow */
.product-card .p-3 {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card .btn {
  margin-top: auto;
  white-space: normal;           /* allow wrap on small devices */
}

/* 7) Badge positioning that won’t overflow on small screens */
.badge-pill-custom {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: #ff7a3d;
  color: #fff;
  max-width: calc(100% - 20px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 8) Breadcrumb wrap safe spacing on mobile */
.breadcrumb-wrap .breadcrumb {
  flex-wrap: wrap;
}
.breadcrumb-wrap a {
  word-break: break-word;
}

/* ✅ DO NOT override Bootstrap container widths */
/* .container, .container-fluid { max-width: 100%; }  <-- REMOVE THIS */

/* If you need protection from overflow on mobile, use this instead: */
body { overflow-x: hidden; }



.page-collections { overflow-x: hidden; }
.page-collections img { max-width: 100%; height: auto; display: block; }



/* 10) iOS text auto-zoom quirks on form fields */
input, select, textarea, button {
  font-size: 16px; /* prevents iOS from zooming when focusing */
}



/* =========================
   FIX: Restore Bootstrap container widths (desktop boxed layout)
   Put this at the VERY END of custom.css
   ========================= */

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

/* Bootstrap 5.3 default container max-widths */
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }



/* =========================
   GLOBAL FIX: keep header/footer full width, content responsive
   Put at END of custom.css
   ========================= */

/* Never box the entire site */
html{ background: #fff !important; }
body{
  max-width: none !important;
  margin: 0 !important;
  width: auto !important;
  overflow-x: hidden !important;
}

/* ---- Top orange ribbon: keep in one line (desktop), wrap on mobile ---- */
/* Adjust selectors if your ribbon class differs */
.top-ribbon, .topbar, .header-top, .promo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;              /* one line */
  text-align: center;
  padding: 8px 12px;
}

.top-ribbon p, .topbar p, .header-top p, .promo-bar p,
.top-ribbon a, .topbar a, .header-top a, .promo-bar a,
.top-ribbon span, .topbar span, .header-top span, .promo-bar span {
  margin: 0 !important;
  display: inline !important;     /* stop vertical stacking */
  white-space: nowrap;
}

/* On small screens, allow wrapping so it doesn't overflow */
@media (max-width: 576px){
  .top-ribbon, .topbar, .header-top, .promo-bar{
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .top-ribbon p, .topbar p, .header-top p, .promo-bar p,
  .top-ribbon a, .topbar a, .header-top a, .promo-bar a,
  .top-ribbon span, .topbar span, .header-top span, .promo-bar span{
    white-space: normal;
  }
}



/* =========================
   FINAL FIX: icon + text same line in top-bar
   ========================= */

.top-bar .container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
}

/* Each span should hold icon + text inline */
.top-bar span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Make icons inline and aligned */
.top-bar i,
.top-bar svg {
  display: inline-block;
  vertical-align: middle;
}

/* Mobile wrap nicely */
@media (max-width: 576px) {
  .top-bar .container {
    flex-wrap: wrap;
    gap: 8px;
  }
}


/* =========================
   Top Announcement Bar (one straight line)
   ========================= */

.top-bar .container{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: nowrap;            /* keep in one line */
  white-space: nowrap;
}

/* each message = icon + text */
.top-bar .container > span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* make the inline svg icons size nicely */
.top-bar .lucide-icon{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* style the separator */
.top-bar .container > span + span::before{
  content: "|";
  margin: 0 14px;
  opacity: 0.9;
}

/* remove your &nbsp;|&nbsp; spacing visually (safe even if still in HTML) */
.top-bar .container{
  letter-spacing: 0;
}

/* On mobile, allow wrap so it doesn’t overflow */
@media (max-width: 576px){
  .top-bar .container{
    flex-wrap: wrap;
    white-space: normal;
    gap: 8px;
  }
  .top-bar .container > span + span::before{
    content: "";
    margin: 0;
  }
}