/* ===================== GRAVIX FASHION — Homepage ===================== */

.gx-home .gx-container{ max-width:var(--gx-container); margin:0 auto; padding:0 24px; }
.gx-section{ padding:44px 0; }
.gx-section-tight{ padding:32px 0; }

.gx-eyebrow{
  font-family:var(--gx-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gx-accent);
  margin:0 0 14px;
}
.gx-h2{
  font-family:var(--gx-heading);
  font-weight:800;
  font-size:clamp(24px,3vw,34px);
  letter-spacing:0.01em;
  text-transform:uppercase;
  margin:0 0 28px;
  color:var(--gx-ink);
}
.gx-h2.gx-on-dark{ color:#fff; }
.gx-h2-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:40px; }
.gx-h2-row .gx-h2{ margin-bottom:0; }

/* Buttons */
.gx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 30px;
  font-family:var(--gx-body);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--gx-black);
  cursor:pointer;
  transition:all .18s ease;
  white-space:nowrap;
}
.gx-btn-primary{ background:var(--gx-black); color:#fff; }
.gx-btn-primary:hover{ background:#2a2a2a; }
.gx-btn-outline{ background:transparent; color:var(--gx-black); }
.gx-btn-outline:hover{ background:var(--gx-black); color:#fff; }
.gx-btn-light{ border-color:#fff; color:#fff; background:transparent; }
.gx-btn-light:hover{ background:#fff; color:var(--gx-black); }
.gx-btn-sm{ padding:10px 20px; font-size:11px; }

/* Placeholder image blocks (declared local placeholders — swap for real photography) */
.gx-ph{
  position:relative;
  background:linear-gradient(135deg,#EDEBE4 0%,#E3DFD3 45%,#D9D2C2 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.gx-ph::after{
  content:attr(data-label);
  font-family:var(--gx-body);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#8b8271;
  border:1px dashed #b8ae98;
  padding:8px 14px;
}
.gx-ph-dark{ background:linear-gradient(135deg,#1c1c1c 0%,#0A0A0A 100%); }
.gx-ph-dark::after{ color:#7a7a7a; border-color:#3a3a3a; }

/* ===== Hero ===== */
.gx-hero{ background:var(--gx-bg); }
.gx-hero .gx-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  padding-top:36px;
  padding-bottom:28px;
}
/* Grid items default to min-width:auto, refusing to shrink below their content's
   natural size — the hero photo is 819px wide natively, which was forcing the grid
   track (and everything else on the page) wider than the mobile viewport. */
.gx-hero .gx-container > *{
  min-width:0;
}
.gx-hero-visual, .gx-hero-visual img{
  max-width:100%;
}
.gx-hero-eyebrow{
  font-family:var(--gx-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#6b6b6b;
  margin:0 0 18px;
}
.gx-hero h1{
  font-family:var(--gx-heading);
  font-weight:900;
  font-size:clamp(34px,4.4vw,58px);
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:0 0 22px;
  text-transform:uppercase;
  color:var(--gx-ink);
}
.gx-hero h1 .gx-accent{ color:var(--gx-accent); }
.gx-hero p{
  font-size:16px;
  line-height:1.7;
  color:#4a4a4a;
  max-width:38ch;
  margin:0 0 34px;
}
.gx-hero-ctas{ display:flex; gap:14px; margin-bottom:28px; flex-wrap:wrap; }
.gx-hero-visual{ aspect-ratio:4/5; }

.gx-benefits{ display:flex; gap:28px; flex-wrap:wrap; }
.gx-benefit{ display:flex; align-items:flex-start; gap:12px; max-width:220px; }
.gx-benefit svg{ width:26px; height:26px; flex-shrink:0; color:var(--gx-accent); margin-top:2px; }
.gx-benefit strong{
  display:block;
  font-family:var(--gx-heading);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.gx-benefit span{ font-size:13px; color:#666; line-height:1.5; }

@media (max-width:900px){
  .gx-hero .gx-container{ grid-template-columns:1fr; padding-top:36px; }
  .gx-hero-visual{ order:-1; aspect-ratio:4/5; min-height:320px; width:100%; }
}

/* ===== Trust / service bar ===== */
.gx-trustbar{ background:var(--gx-black); color:#fff; }
.gx-trustbar .gx-container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:26px 24px;
}
.gx-trust-item{
  text-align:center;
  padding:0 20px;
  position:relative;
}
.gx-trust-item:not(:last-child)::after{
  content:'';
  position:absolute;
  right:0; top:50%; transform:translateY(-50%);
  width:1px; height:34px;
  background:rgba(255,255,255,0.14);
}
.gx-trust-item svg{ width:26px; height:26px; color:var(--gx-accent); margin-bottom:10px; }
.gx-trust-item strong{
  display:block;
  font-family:var(--gx-heading);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.gx-trust-item span{ font-size:12.5px; color:#a8a8a8; }

@media (max-width:700px){
  .gx-trustbar .gx-container{ grid-template-columns:1fr 1fr; row-gap:28px; }
  .gx-trust-item:nth-child(2)::after{ display:none; }
  .gx-trust-item::after{ display:none; }
}

/* ===== Shop by category ===== */
.gx-cats{ background:#fff; }
.gx-cat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.gx-cat-card{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  display:block;
  text-decoration:none;
  color:#fff;
}
.gx-cat-card .gx-ph{ position:absolute; inset:0; transition:transform .4s ease; }
.gx-cat-card:hover .gx-ph{ transform:scale(1.05); }
.gx-cat-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,0) 35%,rgba(10,10,10,0.82) 100%);
}
.gx-cat-content{
  position:absolute; left:0; right:0; bottom:0;
  padding:24px;
}
.gx-cat-content h3{
  font-family:var(--gx-heading);
  font-weight:800;
  font-size:17px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  margin:0 0 6px;
  color:#c78228;
}
.gx-cat-content p{ font-size:12.5px; color:#dcdcdc; margin:0 0 16px; }

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

/* ===== Product grids (WooCommerce shortcode output, restyled) ===== */
.gx-products .gx-container > .woocommerce{ margin:0; }
.gx-products ul.products{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:24px !important;
  list-style:none !important;
  margin:0 !important; padding:0 !important;
}
.gx-products ul.products li.product{
  position:relative;
  display:flex !important;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid var(--gx-line);
  padding:0 0 16px;
  text-align:left !important;
}
/* Astra wraps thumbnail + summary in their own divs — make the summary a flex column
   so the button always sits at the bottom regardless of title/price/rating height */
.gx-products ul.products li.product .astra-shop-thumbnail-wrap{
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.gx-products ul.products li.product .astra-shop-summary-wrap{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}
/* Hide Astra's category label above the title — redundant since sections are already category-filtered */
.gx-products ul.products li.product .ast-woo-product-category{
  display:none !important;
}
.gx-products ul.products li.product a img{
  aspect-ratio:4/5;
  object-fit:cover;
  width:100%;
  margin:0 !important;
  display:block;
}
.gx-products ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--gx-body);
  font-weight:600;
  font-size:14px;
  line-height:20px;
  color:var(--gx-ink);
  padding:12px 14px 0;
  margin:0;
  height:54px;
  box-sizing:content-box;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.gx-products ul.products li.product .price{
  padding:0 14px;
  font-family:var(--gx-body);
  font-weight:700;
  font-size:13.5px;
  color:var(--gx-ink);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  min-height:18px;
  height:auto;
  overflow:visible;
}
.gx-products ul.products li.product .price del{ color:#999; font-weight:400; }
.gx-products ul.products li.product .price del,
.gx-products ul.products li.product .price ins{ display:inline-flex; align-items:center; }
.gx-products ul.products li.product .price ins{ text-decoration:none; color:var(--gx-accent); }
.gx-products ul.products li.product .star-rating{
  margin:6px 14px 0;
  min-height:16px;
}.gx-products ul.products li.product .button{
  display:block;
  margin:0 14px 12px !important;
  margin-top:auto !important;
  width:calc(100% - 28px);
  background:var(--gx-black) !important;
  color:#fff !important;
  border-radius:0 !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:12px !important;
  text-align:center;
}
.gx-products ul.products li.product .button:hover{ background:#2a2a2a !important; }
/* Sale badge: cover both the generic WooCommerce class and Astra's own class */
.gx-products ul.products li.product .onsale,
.gx-products ul.products li.product .ast-onsale-card{
  position:absolute !important;
  background:var(--gx-accent) !important;
  color:#0A0A0A !important;
  border-radius:0 !important;
  font-size:10px !important;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  min-height:auto !important;
  min-width:auto !important;
  padding:5px 9px !important;
  left:0; top:0; right:auto;
  line-height:1;
  z-index:2;
}

@media (max-width:1100px){ .gx-products ul.products{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:640px){ .gx-products ul.products{ grid-template-columns:repeat(2,1fr) !important; gap:14px !important; } }

/* ===== Complete Look + Journal ===== */
.gx-look-journal{ background:var(--gx-bg); }
.gx-lj-grid{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:32px;
  align-items:stretch;
}
.gx-look{ position:relative; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; min-height:460px; }
.gx-look .gx-ph{ min-height:460px; height:100%; }
.gx-look-content{
  position:absolute; left:24px; bottom:24px;
  background:#fff;
  padding:20px 22px;
  max-width:220px;
}
.gx-look-content h3{
  font-family:var(--gx-heading);
  font-weight:800;
  font-size:15px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  margin:0 0 6px;
}
.gx-look-content p{ font-size:12px; color:#666; margin:0 0 14px; line-height:1.5; }

.gx-journal{ padding-left:0; display:flex; flex-direction:column; }
.gx-journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.gx-journal-card{ background:#fff; }
.gx-journal-card .gx-ph{ aspect-ratio:4/3; }
.gx-journal-card .gx-jc-body{ padding:16px 4px 0; }
.gx-journal-cat{
  font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gx-accent); margin:0 0 8px;
}
.gx-journal-card h4{
  font-family:var(--gx-heading);
  font-weight:700;
  font-size:15px;
  line-height:1.3;
  margin:0 0 10px;
  color:var(--gx-ink);
}
.gx-journal-card h4 a{ color:inherit; text-decoration:none; }
.gx-journal-card p{ font-size:13px; color:#666; line-height:1.55; margin:0 0 12px; }
.gx-read-more{
  font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--gx-ink); text-decoration:none;
}
.gx-read-more:hover{ color:var(--gx-accent); }

@media (max-width:1000px){
  .gx-lj-grid{ grid-template-columns:1fr; }
  .gx-journal{ padding-left:0; margin-top:48px; }
}
@media (max-width:700px){
  .gx-look{ grid-template-columns:1fr; }
  .gx-journal-grid{ grid-template-columns:1fr; }
}

/* ===== Promo banner ===== */
.gx-promo{ background:var(--gx-black); color:#fff; overflow:hidden; }
.gx-promo .gx-container{
  display:grid;
  grid-template-columns:0.9fr 1.4fr 0.7fr;
  align-items:stretch;
  gap:32px;
  padding-top:0;
  padding-bottom:0;
}
.gx-promo-visual{ min-height:320px; align-self:stretch; }
.gx-promo-visual img.gx-real-img{ min-height:100%; }
.gx-promo-mid, .gx-promo-right{ align-self:center; padding:40px 0; }
.gx-promo-mid h2{
  font-family:var(--gx-heading);
  font-weight:900;
  font-size:clamp(26px,3.4vw,42px);
  text-transform:uppercase;
  margin:0 0 6px;
  line-height:1.05;
}
.gx-promo-mid p{ font-size:14px; color:#c7c7c7; margin:0 0 18px; }
.gx-promo-code{
  display:inline-block;
  border:1px dashed var(--gx-accent);
  color:var(--gx-accent);
  font-family:var(--gx-heading);
  font-weight:700;
  letter-spacing:0.08em;
  padding:8px 16px;
  font-size:14px;
}
.gx-promo-right{ text-align:right; }

@media (max-width:900px){
  .gx-promo .gx-container{ grid-template-columns:1fr; text-align:center; gap:24px; }
  .gx-promo-visual{ aspect-ratio:16/9; min-height:200px; width:100%; align-self:auto; }
  .gx-promo-right{ text-align:center; }
}

/* ===== Trust features ===== */
.gx-features{ background:#fff; border-top:1px solid var(--gx-line); border-bottom:1px solid var(--gx-line); }
.gx-features .gx-container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  padding:26px 24px;
}
.gx-feature{ display:flex; align-items:center; gap:12px; }
.gx-feature svg{ width:24px; height:24px; color:var(--gx-accent); flex-shrink:0; }
.gx-feature span{
  font-family:var(--gx-heading);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  line-height:1.35;
}

@media (max-width:800px){ .gx-features .gx-container{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .gx-features .gx-container{ grid-template-columns:1fr; } }


/* Real sideloaded images (Pexels) filling the same frames as the placeholders */
.gx-hero-visual img.gx-real-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.gx-cat-card img.gx-real-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease;
}
.gx-cat-card:hover img.gx-real-img{ transform:scale(1.05); }
.gx-look img.gx-real-img{ width:100%; height:100%; object-fit:cover; display:block; min-height:420px; }
.gx-promo-visual img.gx-real-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* All Products section — 4 columns x up to 4 rows */
.gx-products.gx-products-4col ul.products{
  grid-template-columns:repeat(4,1fr) !important;
}
@media (max-width:1100px){
  .gx-products.gx-products-4col ul.products{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:640px){
  .gx-products.gx-products-4col ul.products{ grid-template-columns:repeat(2,1fr) !important; }
}

/* ---------- Shop by Category (Elementor): align all buttons on the same line ---------- */
/* Makes all 4 columns equal height and pins each "Shop Now" button to the
   bottom of its column, regardless of how long each description text is. */
.gx-elementor-cats-wrap .elementor-row,
.gx-elementor-cats-wrap .elementor-container{
  align-items: stretch !important;
}
.gx-elementor-cats-wrap .elementor-column{
  display: flex !important;
}
.gx-elementor-cats-wrap .elementor-column .elementor-widget-wrap{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100%;
}
.gx-elementor-cats-wrap .elementor-widget-button{
  margin-top: auto !important;
}

/* ---------- Shop by Category (Elementor): make all 4 images the same height ---------- */
/* The source photos have different aspect ratios (Shirts is a tall portrait
   shot vs. the others), which was pushing every row below it (title,
   description, button) out of alignment even after the button-alignment fix. */
.gx-elementor-cats-wrap .elementor-widget-image img{
  width: 100% !important;
  height: 340px !important;
  object-fit: cover !important;
  display: block;
}
@media (max-width: 767px){
  .gx-elementor-cats-wrap .elementor-widget-image img{
    height: 220px !important;
  }
}

/* ---------- Shop by Category: complete flex alignment fix (v2) ---------- */
/* Guarantees: equal image height, equal card height, titles on one line,
   descriptions starting on one line, and buttons on one exact line --
   regardless of how long each title/description text is. Achieved by
   letting the description absorb any leftover height via flex-grow, so
   the button below it always lands in the same spot. */
.gx-elementor-cats-wrap .elementor-container{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: space-between !important;
}
.gx-elementor-cats-wrap .elementor-column{
  display: flex !important;
}
.gx-elementor-cats-wrap .elementor-widget-wrap{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100%;
}
.gx-elementor-cats-wrap .elementor-widget-image{
  flex: 0 0 auto !important;
}
.gx-elementor-cats-wrap .elementor-widget-heading{
  flex: 0 0 auto !important;
}
.gx-elementor-cats-wrap .elementor-widget-text-editor{
  flex: 1 1 auto !important;
}
.gx-elementor-cats-wrap .elementor-widget-button{
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  align-self: center;
}

/* ---------- Product card hover: lift, shadow, image zoom ---------- */
/* Applies to New Arrivals — Clothing, New Arrivals — Shoes, and All
   Products — all three homepage sections share the .gx-products wrapper. */
.gx-products ul.products li.product{
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gx-products ul.products li.product:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.08);
}
.gx-products ul.products li.product img{
  transition: transform 0.4s ease;
}
.gx-products ul.products li.product:hover img{
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce){
  .gx-products ul.products li.product,
  .gx-products ul.products li.product img{
    transition: none;
  }
}