/* =============================================
   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:  font-family: "Poppins", sans-serif;
  --font-body:    'Inter', sans-serif;

  --page-gutter: 64px;
}

/* ── 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;}


/* =============================================
   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: var(--color-bg);
  padding-top: 120px;padding-bottom: 120px;
}

/* 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: 36px 0;
  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);
}

/* The server marks the active filter with data-app-current, the same way it
   marks the current page; --active is kept for themes that still set it from
   the client. */
.filter-btn--active,
.filter-btn[data-app-current] {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

/* Filters are anchors now, not buttons: keep them looking like controls rather
   than links. */
.filter-btn {
  text-decoration: none;
}

/* "All" carries data-app-current from the server like any other filter, so the
   rule above already covers it — no sibling-state selector needed. */


/* =============================================
   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;
}

.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(6 5 27);
    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;}
}
/* Current page — the runtime marks it with data-app-current instead of the
   .active class the old pagination.js added. Same treatment. */
.products-pagination .page-btn[data-app-current] {
  background: var(--color-text);
  color: #fff;
  cursor: default;
}

/* =============================================
   PAGINATION
   The theme's own rules already lay this out: a centred flex row that wraps,
   with "Showing x to y of z" dropping to its own line via flex-basis:100%.
   Only two things needed adding.
   ============================================= */

/* 1. The gap marker must occupy a number's worth of space. Left as three bare
      dots it is narrower than a page button, so the strip changed width as the
      elision moved and Next slid sideways under the cursor. */
.products-pagination .pagination-pages .dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
}

/* 2. Current page: the runtime marks it with data-app-current, while the stock
      theme styled .active. Match the attribute so the highlight still shows. */
.products-pagination .page-btn[data-app-current] {
  background: var(--color-text);
  color: #fff;
  cursor: default;
}

/* =============================================
   <product> AS A LAYOUT BOX
   The server leaves <product> in the DOM as a real element. Being a custom
   element it defaults to display:inline, so wherever the theme puts the
   Bootstrap column classes on the tag ITSELF — as the search results grid does
   — the widths never apply and the cards collapse into misaligned boxes.
   Making it a block restores normal column behaviour. Where the column is a
   CHILD of the tag instead (the collection grid), display:contents is used
   below so the column still reaches its .row.
   ============================================= */
product[class*="col-"],
crosssellproduct[class*="col-"],
productcategory[class*="col-"],
purchasedproduct[class*="col-"],
shippingmethod[class*="col-"] {
  display: block;
}

/* =============================================
   COLLECTION GRID
   The server leaves <product> in the DOM as a real element wrapping each card,
   so the Bootstrap columns are grandchildren of .row rather than direct
   children — and Bootstrap's grid only lays out direct children. Making
   <product> a transparent box (display: contents) hands its column straight to
   the row, so the cards sit side by side with the normal gutter.
   ============================================= */
#categoryArea > product {
  display: contents;
}

/* display:contents removes the wrapper from layout, but Bootstrap puts the
   gutter on the COLUMN via --bs-gutter-x padding — inherited from .row, which
   the column no longer sees as its parent box. Restore it so the cards keep
   their spacing instead of their buttons running edge to edge. */
#categoryArea > product > .product-category {
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  margin-top: var(--bs-gutter-y, 0);
}

/* Fallback for browsers without display:contents — behave like a column. */
@supports not (display: contents) {
  #categoryArea > product {
    display: block;
    width: 100%;
  }
  #categoryArea > product > .product-category {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
}

/* =============================================
   COLLECTION CARD ALIGNMENT
   Cards in a row hold different amounts of content: only a tagged product has
   a variant <select>, and names run to one line or three. Left alone each card
   is just as tall as its own content, so the prices and the buttons sit at
   different heights across the row.

   The fix is two-part: every card fills the full height of its column, and the
   button is pushed to the bottom of the card. Then the row lines up whatever
   each product happens to carry.
   ============================================= */
#categoryArea .product-category {
  display: flex;
}

#categoryArea .product-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* The body takes the leftover height so its own bottom-margin auto can work. */
#categoryArea .product-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* margin-top:auto absorbs the difference between a card with a variant select
   and one without, so every "view more" lands on the same line. */
#categoryArea .product-body .add-btn {
  margin-top: auto;
}

/* Uniform image box: one height for every card, so the text below all starts
   at the same line. object-fit keeps the subject centred and undistorted while
   the box itself scales with the column. */
#categoryArea .product-thumb {
  width: 100%;
  margin-bottom: 16px;
}

#categoryArea .product-thumb .product-image {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  background: var(--color-bg-alt);
}

/* Hold the name to a constant two lines so the price below it starts at the
   same height in every card, however long the product name is. */
#categoryArea .product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  margin-bottom: 4px;
}

/* The variant control on a product card — collection, landing and shop all
   render the same bare <select>. Left unstyled it is the raw OS control, which
   reads as an unfinished form field against the flat cards, so the chrome is
   removed and the arrow drawn as a background SVG instead. appearance:none
   drops the native arrow along with the styling, hence the replacement.

   .product-variant-select is the hook a card marks itself with; the two
   structural selectors keep the existing collection markup working unchanged. */
/* The select sits in its own wrapper on the landing and shop cards; the
   collection card puts it inside .product-body, which already has spacing. */
.product-variant-wrap {
  margin-top: 12px;
}

.product-variant-select,
#categoryArea .product-body select,
.shop-card select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  margin-bottom: 12px;
  padding: 11px 36px 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background-color: #fff;
  /* Chevron, inlined so the card needs no extra request. */
  background-image: url("data:image/svg+xml;charset=utf-8,%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' fill='none' stroke='%231A1C1C' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s;
}

.product-variant-select:hover,
#categoryArea .product-body select:hover,
.shop-card select:hover,
.product-variant-select:focus,
#categoryArea .product-body select:focus,
.shop-card select:focus {
  outline: none;
  border-color: var(--color-text);
}


/* =============================================
   CROSS-SELL
   One card per <crosssellproduct>. Selecting it posts a products[n][cross]
   row and the extended-subscription flag; the runtime marks the chosen card
   data-app-selected, so the state is styled here rather than in script.
   ============================================= */
.summary-crosssell,
.upsell-crosssell {
  margin: 20px 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, #e5e5e5);
}

.summary-crosssell-title,
.upsell-crosssell-title {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #777);
  margin-bottom: 10px;
}

.summary-crosssell .summary-product,
.upsell-crosssell-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.summary-crosssell .summary-product:hover,
.upsell-crosssell-card:hover { border-color: var(--color-text, #16181d); }

/* Chosen: the runtime sets this, no class toggling in the theme. */
[data-app-selected] .summary-product,
[data-app-selected] .upsell-crosssell-card,
.summary-crosssell label:has(input:checked),
.upsell-crosssell label:has(input:checked) {
  border-color: var(--color-text, #16181d);
  background: rgba(0, 0, 0, .03);
}

.summary-crosssell img,
.upsell-crosssell-card img { width: 48px; height: 48px; object-fit: contain; }

.upsell-crosssell-name { flex: 1; }


/* ============================================================
   Selected-state feedback (FIX-A)

   The runtime marks the chosen record by putting `data-app-selected` on the
   <product> / <shippingmethod> / <crosssellproduct> element itself. Without a
   style for it the customer clicks a package, a shipping method or a cross-sell
   and nothing changes on screen.

   Keyed ONLY on the contract attribute and the record tag -- no class, id or
   name is referenced, so renaming any theme class leaves this working.
   ============================================================ */

/* The record itself, when it is the visual card */
product[data-app-selected],
shippingmethod[data-app-selected],
crosssellproduct[data-app-selected] {
  background-color: rgba(0, 0, 0, 0.035);
}

/* ...and when the card is the record's own child wrapper */