/* =============================================
   LUXE – Stylesheet
   Fonts : Playfair Display (headings) | Inter (body)
   Grid  : 100% Bootstrap 5 — no custom flex/grid
   Gutter: 64px via --page-gutter on .luxe-container
   ============================================= */

/* ── CSS Custom Properties ─────────────────── */
:root {
  --color-bg:         #ffffff;
  --color-bg-alt:     #F3F4F3;
  --color-text:       #1A1C1C;
  --color-text-light: #444844;
  --color-text-muted: #9b9b9b;
  --color-border:     #e0dedd;

  --font-display:  "Fraunces", serif;
  --font-body:     "Manrope", sans-serif;
  --page-gutter: 10px;
}

/* ── Base ───────────────────────────────────── */
body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/*
  .luxe-container
  A full-width wrapper that gives every section the
  exact 64px left/right margin from the viewport edge.
  Bootstrap's own container-fluid uses padding-left/right
  which we override here.
*/
.luxe-container {
  padding-left:  var(--page-gutter) !important; 
  padding-right: var(--page-gutter) !important; 
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}


/* =============================================
   NAVBAR
   Layout: 100% Bootstrap (navbar-expand-lg,
   mx-auto on nav list, d-flex ms-auto on icons)
   Custom CSS: only colours, font, height, shadow
   ============================================= */
.luxe-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: auto;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 29px 0px;
}

/* Vertically centre the inner Bootstrap container */
.luxe-nav .container-fluid {
  height: 100%;
}

.luxe-logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text) !important;
  text-decoration: none;
  line-height: 1;margin-right: 0;
}

.luxe-nav-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--color-text) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: opacity 0.2s;
}
.luxe-nav-link:hover { opacity: 0.55; }

/* Icon buttons – no Bootstrap component, kept minimal */
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--color-text);
  line-height: 0;
  transition: opacity 0.2s;
}
.icon-btn:hover { opacity: 0.55; }

.cart-badge {
  top: -4px;
  right: -6px;
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.menu_wrapper .luxe-logo{display: none;}

/* =============================================
   HERO
   Full-bleed section. Bootstrap is used inside
   hero-content-wrap (d-flex flex-column justify-
   content-end on the container) — layout classes
   are in the HTML.
   Custom CSS: background, overlay, typography.
   ============================================= */
.hero-section {
  margin-top: 91px; /* clear fixed navbar */
  padding-top: 64px;
}

.hero-image-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* Simulated editorial stone/fabric background */
.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.06)  0%,
    rgba(0,0,0,0.04)  40%,
    rgba(0,0,0,0.44)  80%,
    rgba(0,0,0,0.54) 100%
  );
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The Bootstrap d-flex container needs to sit above overlays */
.hero-content-wrap {
  position: relative;
  padding: 96px;
  height: 870px;
}

.hero-content {
  max-width: 650px;
  color: #fff;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 25px;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255,255,255,1);
  margin-bottom: 32px;
}

.hero-cta {
  display: inline-block;
  border: 1px solid #fff;
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 13px 36px;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.hero-cta:hover {
  background: #fff;
  color: var(--color-text);
}


/* =============================================
   FEATURED EDIT
   Layout: Bootstrap row > col-lg-4 col-md-4
   Custom CSS: product card visuals, typography
   ============================================= */
.featured-section {
  background: var(--color-bg);
  padding-top: 120px !important;
  padding-bottom: 120px !important;
}

.featured-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin: 0;
}

.divider{display: block;width: 100%;height: 1px;background: var(--color-border);margin: 24px 0 48px;}

.view-all-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 1px;
  transition: opacity 0.2s;
}
.view-all-link:hover { opacity: 0.5; }

/* Product card */
.product-card { cursor: pointer; }

/* .product-img-wrap {
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.product-img-wrap:hover .product-img { transform: scale(1.03); } */
/* 
.product-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.product-img img{
  width: inherit;
  height: 490px;
} */

/* Editorial placeholder gradients */
.product-img--blazer {
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, #e8dfc8 0%, #d4c9ac 45%, #c0b294 100%),
    linear-gradient(170deg, #f0e8d6 0%, #cfc0a0 100%);
}
.product-img--camisole {
  background:
    radial-gradient(ellipse 55% 65% at 50% 40%, #e2d4b0 0%, #cdb98a 50%, #7a6545 100%),
    linear-gradient(150deg, #c4a96e 0%, #5c4a35 100%);
}
.product-img--trousers {
  background:
    radial-gradient(ellipse 50% 80% at 55% 30%, #4a4a4a 0%, #2e2e2e 50%, #1a1a1a 100%),
    linear-gradient(170deg, #383838 0%, #111 100%);
}

.product-name {
  /* font-family: var(--font-body); */
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.4;
}
.product-color {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-light);
  letter-spacing: 1.5px;
}
.product-price {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  white-space: nowrap;
}


/* =============================================
   PHILOSOPHY
   Layout: Bootstrap row g-0 > col-lg-7 + col-lg-5
           d-flex flex-column justify-content-center
           on text col (in HTML)
   Custom CSS: bg colour, typography, image
   ============================================= */
.philosophy-section .luxe-container .row{
  background: var(--color-bg-alt);
}

/* Text column inner padding (not grid, just content breathing room) */
.philosophy-text-col {
  padding: var(--page-gutter);
  max-width: 510px;
  margin-left: auto;
  margin-right: 40px;
}

.philosophy-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--color-text-light);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.philosophy-quote {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-text);
  border: none;
  padding: 0;
  margin-bottom: 28px;
  
}

.philosophy-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--color-text);
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s;
}
.philosophy-link:hover { opacity: 0.5; }

/* Image column */
.philosophy-img-col {
  padding: var(--page-gutter) var(--page-gutter) var(--page-gutter) 0;
}

.philosophy-img {
  width: 100%;
  max-width: 412px;
  background-size: cover;
}
.philosophy-img img{
  width: 100%;
}

/* =============================================
   FOOTER
   Layout: Bootstrap row > col-auto (brand) +
           col-auto d-flex gap-5 (link groups)
           list-unstyled d-flex flex-column gap-2
           (link lists — in HTML Bootstrap classes)
   Custom CSS: colours, borders, typography only
   ============================================= */



.luxe-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: 120px 0px;
}

.footer-col-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-text);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-col a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--color-text); }

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  padding-bottom: 16px;
}

.footer-bottom p {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.copyright{
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-light);
}

/* =============================================
   RESPONSIVE
   Bootstrap breakpoints handle column stacking.
   Custom overrides only for non-grid items.
   ============================================= */

.philosophy-section .luxe-container .row{
  flex-wrap: nowrap;
}


/* =============================================
   LUXE – Collections Page Styles
   Extends style.css (shared nav/footer/tokens)
   ============================================= */

/* Offset fixed navbar */
.mt-nav { margin-top: 91px; }


/* =============================================
   COLLECTION HERO
   row g-0: text col (left) + image col (right)
   ============================================= */
.col-hero {
  background: url(../assets/images/bg-pro.jpg) no-repeat;
  background-size: cover;
  padding-top: 60px;
  padding-bottom: 60px;
  background-position: top 23% center;
}

/* Text column */
.col-hero-text {
  padding: 50px var(--page-gutter) 50px 0;
}

.col-hero-title {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: 24px;
}

.col-hero-desc {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 32px;
}

.col-hero-cta {
  display: inline-block;
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 14px 24px;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.col-hero-cta:hover {
  background: #333;
  color: #fff;
}

/* Image column — flush to right viewport edge */
.col-hero-img-wrap {
  overflow: hidden;
}

.col-hero-img {
  width: 100%;
  height: 420px;
  background-size: cover;
  background-position: center;
}

.col-hero-img img{
  width: 100%;
}


/* =============================================
   FILTER BAR
   Bootstrap d-flex flex-wrap gap-2 in HTML
   Custom: label + pill button styles
   ============================================= */
.filter-section {
  padding: 6rem 0;    position: sticky;
  top: 20px;
  /* border-bottom: 1px solid var(--color-border); */
  /* background: var(--color-bg); */
}

.filter-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-light);
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-right: 8px;
}

.filter-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 7px 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--color-text);
}

.filter-btn--active {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}


/* =============================================
   PRODUCT GRID
   Bootstrap: row g-4 > col-lg-4 col-md-4 col-sm-6
   Custom: card visuals, image gradients, typography
   ============================================= */
.products-section {
  /* background: var(--color-bg); */
  padding-top: 52px;
  padding-bottom: 32px;
}

.coll-product-card {
  cursor: pointer;
}

.coll-product-img-wrap {
  width: 100%;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.coll-product-img-wrap:hover .coll-product-img {
  transform: scale(1.03);
}

.coll-product-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.coll-product-img img{
  width: 100%;
  height: 490px;
}

/* ── Product image placeholders ── */
.coll-img--blazer {
  background:
    radial-gradient(ellipse 50% 80% at 50% 40%, #3a3a3a 0%, #222 50%, #111 100%),
    linear-gradient(170deg, #2e2e2e 0%, #0e0e0e 100%);
}

.coll-img--shirt {
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, #f4f2ef 0%, #e8e4de 45%, #d0cbc2 100%),
    linear-gradient(170deg, #eeebe5 0%, #d8d3cb 100%);
}

.coll-img--tee {
  background:
    radial-gradient(ellipse 55% 65% at 50% 42%, #e8dfc8 0%, #d6c9aa 50%, #bfb08e 100%),
    linear-gradient(160deg, #e2d8c0 0%, #c8b898 100%);
}

.coll-img--trouser {
  background:
    radial-gradient(ellipse 45% 85% at 50% 35%, #2a2a2a 0%, #1a1a1a 55%, #0d0d0d 100%),
    linear-gradient(170deg, #282828 0%, #101010 100%);
}

.coll-img--tote {
  background:
    radial-gradient(ellipse 55% 65% at 50% 55%, #7a3f28 0%, #5c2e1a 45%, #3a1c0e 100%),
    linear-gradient(150deg, #6b3520 0%, #3a1c10 100%);
}

.coll-img--knit {
  background:
    radial-gradient(ellipse 65% 55% at 50% 35%, #e8ddc8 0%, #d4c5a8 45%, #bfad8e 100%),
    linear-gradient(160deg, #e0d4ba 0%, #c8b898 100%);
}

/* Product text */
.coll-product-name {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 4px;
  line-height: 1.4;
}

.coll-product-price {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--color-text);
  margin: 0;
}


/* =============================================
   LOAD MORE BUTTON
   Bootstrap: d-flex justify-content-center in HTML
   Custom: outlined button style
   ============================================= */
.load-more-btn {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-text);
  padding: 14px 48px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.load-more-btn:hover {
  background: var(--color-text);
  color: #fff;
}


/* =============================================
   NUMBERED PAGINATION (rendered by js/pagination.js)
   Structure: .products-pagination > Previous btn, .pagination-pages, Next btn, .pagination-info
   ============================================= */
.products-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Previous / Next + each page number share the outlined theme button look */
.products-pagination .pagination-btn,
.products-pagination .page-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-text);
  padding: 8px 14px;
  min-width: 38px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;border-radius:10px;
}

.products-pagination .page-btn {
  padding: 8px 0;
}

.products-pagination .pagination-btn:hover:not([disabled]),
.products-pagination .page-btn:hover {
  background: var(--color-text);
  color: #fff;
}

/* Active / current page */
.products-pagination .page-btn.active {
  background: var(--color-text);
  color: #fff;
  cursor: default;
}

/* Disabled Previous/Next at the ends */
.products-pagination .pagination-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.products-pagination .dots {
  padding: 0 4px;
  color: var(--color-text-muted);
}

/* "Showing X to Y of Z records" — full width below the controls */
.products-pagination .pagination-info {
  flex-basis: 100%;
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-text-muted);
}


/* =============================================
   ACTIVE NAV LINK  (Collections page)
   ============================================= */
.active-link {
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 1px;
}


.shop_banner.col-hero{
    padding-top: var(--page-gutter);
    padding-bottom:  var(--page-gutter);
}

.shop_banner .col-hero-text{
    padding:0
}


/* =============================================
   LUXE – Shop All Page Styles
   Extends style.css (shared tokens/nav/footer)
   ============================================= */

.mt-nav { margin-top: 60px; }
.active-link { border-bottom: 1px solid var(--color-text); padding-bottom: 1px; }


/* =============================================
   PAGE BANNER
   title: 64px / 400 / #1A1C1C
   desc:  18px / #444844
   ============================================= */

.shop_banner.mt-nav{margin-top: 91px;}
   
.page-banner {
  background: var(--color-bg);
  padding: 52px 0 36px;
}

.banner-title {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  color: #1A1C1C;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.banner-desc {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: #444844;
  line-height: 1.65;
  margin: 0;
}


/* =============================================
   FILTER + SORT BAR
   filter: 12px / 600
   ============================================= */
.shop-filter-bar {
  background: var(--color-bg);
  padding: 20px 0 35px;
  border-bottom: 1px solid #C4C7C34D;
  margin-bottom: 0px;
}

.shop-filter-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.shop-filter-btn:hover { border-color: var(--color-text); }
.shop-filter-btn--active {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

/* Sort dropdown */
.sort-label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-light);
  white-space: nowrap;
}

.sort-select {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-text);
  padding: 2px 20px 2px 0;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231A1C1C' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

.shop-filter-bar .filter_btn_wrapper{max-width: 100%;overflow-x: auto;display: flex;gap: 10px;}


/* =============================================
   PRODUCT GRID — shared card styles
   shop-box-title: 24px
   shop-box-text:  16px
   ============================================= */




.shop-products {
  background: var(--color-bg);
  padding: var(--page-gutter) 0;
}

.shop-card { cursor: pointer; }

/* Image wrapper — 4:5 ratio for regular, taller for featured */
.shop-img-wrap {
  width: 100%;
  height: 475px;
  aspect-ratio: 4 / 4.5;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.shop-card--featured .shop-img-wrap {
  aspect-ratio: 4 / 3.2;
}

.shop-img-wrap:hover .shop-img { transform: scale(1.03); }

.shop-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

/* Featured badge overlay */
.featured-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text);
  background: rgba(255, 255, 255, 1);
  padding: 5px 10px;
  backdrop-filter: blur(4px);
}

/* Typography */
.shop-box-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: #1A1C1C;
  margin-bottom: 4px;
  line-height: 1.4;
}

.shop-card--featured .shop-box-title {
  font-size: 24px;
  font-family: var(--font-display);
}

.shop-box-text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--color-text-light);
  margin: 0;
}

.shop-price {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: #1A1C1C;
  margin: 0;
  white-space: nowrap;
}

.shop-card--featured .shop-price { font-size: 18px; }

.shop_divider{
    display: block;
    width: 100%;
    height: 1px;
    background: #C4C7C34D;
    margin: var(--page-gutter) 0;
}

/* ── Product Image Placeholders ── */
.shop-img--overcoat {
  background:
    radial-gradient(ellipse 50% 75% at 52% 28%, #d6c9b0 0%, #b8a78a 35%, transparent 65%),
    radial-gradient(ellipse 70% 55% at 25% 85%, #3a3530 0%, transparent 55%),
    linear-gradient(160deg, #5a5248 0%, #2e2a26 55%, #1a1714 100%);
}
.shop-img--frametote {
  background:
    radial-gradient(ellipse 55% 55% at 55% 45%, #3a3530 0%, #222018 45%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 70%, #1e1c18 0%, transparent 55%),
    linear-gradient(150deg, #2a2820 0%, #111008 100%);
}
.shop-img--woolblazer {
  background:
    radial-gradient(ellipse 50% 80% at 50% 40%, #3a3a3a 0%, #222 50%, #111 100%),
    linear-gradient(170deg, #2e2e2e 0%, #0e0e0e 100%);
}
.shop-img--shirt {
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, #f4f2ef 0%, #e8e4de 45%, #d0cbc2 100%),
    linear-gradient(170deg, #eeebe5 0%, #d8d3cb 100%);
}
.shop-img--tee {
  background:
    radial-gradient(ellipse 55% 65% at 50% 42%, #e8dfc8 0%, #d6c9aa 50%, #bfb08e 100%),
    linear-gradient(160deg, #e2d8c0 0%, #c8b898 100%);
}
.shop-img--trouser {
  background:
    radial-gradient(ellipse 45% 85% at 50% 35%, #2a2a2a 0%, #1a1a1a 55%, #0d0d0d 100%),
    linear-gradient(170deg, #282828 0%, #101010 100%);
}
.shop-img--tote {
  background:
    radial-gradient(ellipse 55% 65% at 50% 55%, #7a3f28 0%, #5c2e1a 45%, #3a1c0e 100%),
    linear-gradient(150deg, #6b3520 0%, #3a1c10 100%);
}
.shop-img--knit {
  background:
    radial-gradient(ellipse 65% 55% at 50% 35%, #e8ddc8 0%, #d4c5a8 45%, #bfad8e 100%),
    linear-gradient(160deg, #e0d4ba 0%, #c8b898 100%);
}
.shop-img--linenblazer {
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, #e8dfc8 0%, #d4c9ac 45%, #c0b294 100%),
    linear-gradient(170deg, #f0e8d6 0%, #cfc0a0 100%);
}
.shop-img--camisole {
  background:
    radial-gradient(ellipse 55% 65% at 50% 40%, #e2d4b0 0%, #cdb98a 50%, #7a6545 100%),
    linear-gradient(150deg, #c4a96e 0%, #5c4a35 100%);
}
.shop-img--wooltrousers {
  background:
    radial-gradient(ellipse 50% 80% at 55% 30%, #4a4a4a 0%, #2e2e2e 50%, #1a1a1a 100%),
    linear-gradient(170deg, #383838 0%, #111 100%);
}
.shop-img--reliefknit {
  background:
    radial-gradient(ellipse 60% 60% at 50% 38%, #e4dacc 0%, #d0c4b0 45%, #b8a890 100%),
    linear-gradient(160deg, #ddd0bc 0%, #c4b49e 100%);
}
.shop-img--solstice {
  background:
    radial-gradient(ellipse 40% 65% at 50% 55%, #c8b48a 0%, #a89060 45%, #7a6840 100%),
    radial-gradient(ellipse 70% 40% at 50% 85%, #3a3020 0%, transparent 60%),
    linear-gradient(160deg, #d4bc8a 0%, #8a7048 60%, #4a3828 100%);
}
.shop-img--sneaker {
  background:
    radial-gradient(ellipse 65% 50% at 50% 55%, #f0ece6 0%, #e0dbd2 45%, #c8c0b4 100%),
    linear-gradient(160deg, #eee8e0 0%, #d4ccc0 100%);
}


/* =============================================
   PAGINATION
   Bootstrap .pagination overrides for LUXE style
   ============================================= */

.pagination_wrapper{
  padding: var(--page-gutter) 0;
}

.pagination_row{margin-left: auto;margin-right: auto;}

.shop-pagination .page-link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  width: 42px;height: 42px;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0 !important;
  padding: 7px 13px;
  transition: background 0.2s, color 0.2s;
  margin: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-pagination .page-link:hover {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}
.shop-pagination .page-item.active .page-link {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}
.shop-pagination .page-item.disabled .page-link {
  color: var(--color-text-muted);
  background: transparent;
}

.pagination-count {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-light);
}


/* =============================================
   PROMO BANNER  (Optics Collection)
   row g-0: image (col-6) + text (col-6)
   ============================================= */
.promo-banner {
  background: #fff;
  margin-bottom: 128px;
}

.promo-img {
  width: 100%;
  min-height: 420px;
  height: 100%;
  background:
    radial-gradient(ellipse 55% 70% at 52% 42%, #c8a060 0%, #8a6830 30%, transparent 60%),
    radial-gradient(ellipse 80% 80% at 50% 50%, #2a1e10 0%, #1a1208 60%, #0d0804 100%),
    linear-gradient(160deg, #3a2810 0%, #140e06 100%);
  background-size: cover;
  background-position: center;
}

.promo-banner .promo-img{min-height: 662px;max-width: 662px;}

.promo-text-col {
  padding: 72px 20px 72px 64px;
  min-height: 420px;
}

.promo-eyebrow {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 4.8px;
  color: #181E1A;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.promo-heading {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.promo-desc {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--color-text-light);
  line-height: 1.7;
  max-width: 340px;
  width: 100%;
  margin-bottom: 32px;
}

.promo-cta {
  display: inline-block;
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 13px 35px;
  text-decoration: none;
  transition: background 0.25s;
}
.promo-cta:hover { background: #333; color: #fff; }


/* =============================================
   NEWSLETTER SECTION
   Centred: heading + desc + email/subscribe row
   ============================================= */
.newsletter-section {
  background: var(--color-bg-alt);
  padding: 120px 0;
}

.newsletter-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

.newsletter-desc {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-light);
  line-height: 1.65;
  margin-bottom: 16px;
}

.newsletter-input {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid #C4C7C3;
  border-right: none;
  padding: 14px 18px;
  outline: none;
  transition: border-color 0.2s;
  margin-right: 15px;
}
.newsletter-input::placeholder { color: var(--color-text-muted); }
.newsletter-input:focus { border-color: var(--color-text); }

.newsletter-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 14px 30px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.newsletter-btn:hover { background: #333; }


/* Wrapper holds the input + label together */
.float-input-wrap {
  position: relative;
  margin-right: 15px;
}

/* Input */
.newsletter-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  background: transparent;
  border:0;
  border-bottom: 1px solid var(--color-border);
  border-right: none;
  padding: 22px 18px 8px 0px; /* top padding makes room for the risen label */
  outline: none;
  transition: border-color 0.2s;
}
.newsletter-input:focus {
  border-color: var(--color-text);
}

/* Label — starts centred inside the input */
.float-input-wrap label {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text-muted);
  pointer-events: none;           /* click passes through to input */
  transition: top 0.2s ease,
              transform 0.2s ease,
              font-size 0.2s ease,
              color 0.2s ease;
}

/* Label rises when input is focused OR has content */
.newsletter-input:focus   + label
 {
  top: -5px;
  transform: translateY(0);
  color: var(--color-text-light);
}


/* =============================================
   RESPONSIVE
   Bootstrap handles col stacking.
   Custom tweaks only.
   ============================================= */


@media(max-width:1024px){
  .col-hero-title { font-size: 48px; }
  .col-hero-text { padding: 50px var(--page-gutter) 50px 0; }
  .col-hero-desc  { font-size: 16px; line-height: 1.6;}
  .col-hero{padding-top: 80px;padding-bottom: 80px;}
}

@media (max-width: 768px) {
  .col-hero-title { font-size: 48px; }
  .col-hero-title br{display: none;}
  .col-hero-text  { padding: 48px var(--page-gutter); min-height: auto; }
  .col-hero-img   { height: 600px; }
  .col-hero-text{padding-left: 0;padding-right: 0;padding-top: 0;}
  .filter_btn_wrapper{max-width: 100%;overflow-x: auto;display: flex;gap: 10px;}
}

@media(max-width:992px){
    .luxe-logo{display: none;}

    .menu_wrapper .luxe-logo{
        display: flex
    }

    /* Collapse closed state */
    .navbar-collapse {
    position: absolute;
    background: rgb(255, 255, 255);
    width: 100%;
    left: 0px;
    top: 100%;
    box-shadow: rgba(44, 44, 44, 0.22) 0px 22px 13px -17px;
    border-top: 1px solid rgb(239, 239, 239);

    /* Override Bootstrap's display:none mechanism */
    display: block !important;
    overflow: hidden;

    /* Collapsed state */
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 64px;
    padding-right: 64px;

    /* Smooth transition */
    transition: max-height 0.4s ease,
                opacity    0.3s ease,
                padding    0.4s ease;
    }

    /* Collapse open state */
    .navbar-collapse.show {
      max-height: 500px;   /* larger than your actual content height */
      opacity: 1;
      padding-top: 35px;
      padding-bottom: 35px;
    }

    /* While Bootstrap is mid-animation */
    .navbar-collapse.collapsing {
    display: block !important;
    overflow: hidden;
    }

    .philosophy-text-col{
        margin-right: auto;
    }

    .luxe-footer .luxe-logo{
        display: block;
    }

    .menu_wrapper{flex-grow: 1;}

    .menu_wrapper .luxe-logo{
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hero-content-wrap{padding: 40px;}
    :root{--page-gutter: 32px;}
    .hero-title{font-size: 45px;}
    .hero-subtitle{font-size: 14px;}
    .hero-content-wrap{height: 700px;}
    .product-name{font-size: 15px;}
    .product-price{font-size: 15px;}
    .luxe-footer{ padding: 80px 0px;}
    .philosophy-text-col{max-width: 100%;}
    .philosophy-img{max-width: 100%;}
    .philosophy-img-col{padding: var(--page-gutter);}
}

@media(max-width:724px){
    .luxe-footer .col-auto{width: 100%;}
    .footer_logo_wrapper .luxe-logo{margin-bottom: 32px;}
    .footer_logo_wrapper .copyright{margin-bottom: 32px !important;}
    .philosophy-section{padding-bottom: 80px;}
}

@media(max-width:681px){
    :root{--page-gutter: 20px;}
    .product-name {font-size: 16px;}
    .product-price {font-size: 16px;}
    .hero-subtitle{display: none;}
    .philosophy-section .luxe-container .row{flex-wrap: wrap;flex-direction: column;} 
    .philosophy-text-col {max-width: 100%;width: 100%;}
    .philosophy-img-col{width: 100%;}
    .filter_bar{flex-wrap: wrap;flex-direction: column-reverse;gap: 40px;}
    .navbar .luxe-container .logo_wrapper{width: 33%;flex-grow: 0 !important;}
    .navbar .luxe-container .menu_wrapper{width: 33%;flex-grow: 0 !important;}
    .navbar .luxe-container .account_control_wrapper{width: 33%;flex-grow: 0 !important;}
    .shop-img-wrap{height: 375px;}
    .philosophy-quote{font-size: 30px;}
    .pagination_wrapper{flex-direction: column-reverse;gap: 20px;}
    .promo-text-col{padding-left: 0;padding-right: 0;text-align: center;}
    .promo-desc{max-width: 100%;}
    .promo-banner{margin-bottom: 0;}
    .shop-card{margin-top: 20px;}
    .newsletter-section{padding: 80px 0px;}
    .promo-eyebrow{font-size: 13px;letter-spacing: 2.8px;}
    .promo-banner .promo-img{width: 100%;min-height: 500px;}
    .newsletter_form_wrapper{flex-direction: column;display: flex;}
    .float-input-wrap{margin-right: 0;margin-bottom: 20px;}
    .shop-box-title{line-height: 25px;}
    .shop-card--featured .shop-box-title{font-size: 22px;}
    .shop_banner .col-hero-text{text-align: center;}
}

@media(max-width:400px){
  .account_control_wrapper {
    width: 90px;
    flex-shrink: 0;
    height: 60px;
}
}