:root{
  /* Brand */
  --green:#1f3b2e;
  --green2:#234737;
  --gold:#d7b56d;
  --burg:#8a2e3b;

  /* Base */
  --bg:#f5efe6;
  --bg2:#fbf7f1;
  --card:rgba(255,255,255,.94);
  --ink:#1f2b26;
  --muted:rgba(31,43,38,.70);

  --radius:18px;
  --shadow:0 10px 26px rgba(0,0,0,.06);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(31,59,46,.10), transparent 55%),
    radial-gradient(1000px 480px at 85% 10%, rgba(215,181,109,.18), transparent 60%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 55%, #efe7db 100%);
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ width:min(1100px, calc(100% - 32px)); margin:0 auto; }
.muted{ color:var(--muted); }
.sub{ color:var(--muted); margin:6px 0 0; }

/* =========================
   HEADER
   ========================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.80);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:1000;
  color:var(--green);
}
.brand img{
  width:34px; height:34px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid rgba(0,0,0,.08);
}

.nav-links{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}
.nav-links a{
  font-size:14px;
  color:rgba(31,43,38,.78);
  padding:8px 10px;
  border-radius:12px;
}
.nav-links a:hover{
  background:rgba(31,59,46,.06);
  text-decoration:none;
}

.nav-right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:nowrap;
}

/* =========================
   BUTTONS
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 16px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.90);
  color:var(--green);
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover{ transform:translateY(-1px); text-decoration:none; }
.btn:active{ transform:translateY(0); }

.btn-primary{
  background:linear-gradient(180deg, #2b5a45, var(--green));
  border-color:rgba(0,0,0,.08);
  color:#fff;
}
.btn-primary:hover{ filter:brightness(1.05); }

.viewall{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:rgba(31,43,38,.80);
  font-weight:800;
  transition: filter .12s ease, transform .12s ease;
}
.viewall:hover{ text-decoration:none; background:rgba(255,255,255,.92); transform:translateY(-1px); }
.viewall:active{ transform:translateY(0); }

/* Optional “burgundy chip” style */
.viewall-burg{
  background:linear-gradient(180deg, #a33a4a, var(--burg));
  color:#fff;
  border-color:rgba(0,0,0,.08);
}
.viewall-burg:hover{ filter:brightness(1.05); }

/* =========================
   HERO (WIDE)
   ========================= */
.hero-wide{ padding:18px 0 12px; }

.hero-wide__wrap{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 30px rgba(0,0,0,.07);
  min-height:420px;
  background:#fff;
}

/* Background images (fade rotator) */
.hero-wide__bg{
  position:absolute;
  inset:0;
  background:#fff;
}
.hero-wide__bg img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 900ms ease;
  transform:scale(1.01);
}
.hero-wide__bg img.is-active{ opacity:1; }

/* Bright mist overlay */
.hero-wide__wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(245,239,230,.92) 0%,
      rgba(245,239,230,.55) 42%,
      rgba(245,239,230,.18) 62%,
      rgba(245,239,230,0) 78%);
  pointer-events:none;
}

/* Text panel */
.hero-wide__content{
  position:relative;
  z-index:2;
  max-width:640px;
  padding:26px;
  margin:18px;
  border-radius:18px;
  background:rgba(255,255,255,.35);
  backdrop-filter: blur(2px);
}

.hero-wide__content h1{
  margin:0 0 10px;
  color:var(--green);
  font-size:46px;
  line-height:1.05;
  letter-spacing:-.6px;
}

.hero-wide__content p{
  margin:0;
  color:rgba(31,43,38,.82);
  line-height:1.55;
  font-size:15.5px;
  max-width:60ch;
}

@media (max-width:950px){
  .hero-wide__wrap{ min-height:330px; }
  .hero-wide__content{ max-width:unset; margin:12px; }
  .hero-wide__content h1{ font-size:34px; }
}

/* =========================
   SECTIONS
   ========================= */
.section{ padding:18px 0; }
.section-soft{
  background:linear-gradient(180deg, rgba(31,59,46,.04), rgba(31,59,46,0));
  border-top:1px solid rgba(0,0,0,.04);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.section-head h2{
  margin:0;
  color:var(--green);
  font-size:28px;
  letter-spacing:-.3px;
}

/* =========================
   TILES (Landing)
   ========================= */
.grid-tiles{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
@media (max-width:1050px){ .grid-tiles{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:900px){ .grid-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .grid-tiles{ grid-template-columns:1fr; } }

.tile{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.07);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
}
.tile:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.10);
  text-decoration:none;
}

.tile-img{ height:170px; background:#fff; }
.tile-img img{ width:100%; height:100%; object-fit:cover; }
.tile-title{
  padding:12px;
  text-align:center;
  font-weight:1000;
  color:var(--green);
}

/* =========================
   TRUST STRIP
   ========================= */
.trust{ padding:10px 0 22px; }
.trust-inner{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
@media (max-width:900px){ .trust-inner{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .trust-inner{ grid-template-columns:1fr; } }

.trust-item{
  background:rgba(31,59,46,.10);
  border:1px solid rgba(31,59,46,.12);
  border-radius:18px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
}
.trust-ico{ font-size:22px; }

/* =========================
   CONTACT PAGE
   ========================= */
.contact-card{
  background:var(--card);
  border:1px solid rgba(0,0,0,.06);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:16px;
  margin-top:14px;
}
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.contact-title{ margin:0; color:var(--green); }
.contact-list{ margin:12px 0 0; padding-left:18px; color:rgba(31,43,38,.85); }
.contact-list li{ margin:6px 0; }

.contact-form label{ display:block; margin-bottom:10px; }
.contact-form span{
  display:block;
  font-weight:900;
  color:rgba(31,43,38,.82);
  font-size:13px;
  margin-bottom:6px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  padding:10px 12px;
  font:inherit;
  outline:none;
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:rgba(31,59,46,.30);
  box-shadow:0 0 0 3px rgba(31,59,46,.10);
}

/* =========================
   FOOTER
   ========================= */
.footer{
  background:linear-gradient(180deg, var(--green2), var(--green));
  color:#fff;
  padding:16px 0;
  margin-top:18px;
}
.foot{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.foot small{ display:block; margin-top:6px; color:rgba(255,255,255,.80); }
.foot-links{ display:flex; gap:12px; flex-wrap:wrap; }
.foot-links a{ color:rgba(255,255,255,.92); }
.foot-links a:hover{ text-decoration:underline; }

/* =========================
   CATEGORY PAGE HEADER
   ========================= */
.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}
.crumbs{ color:rgba(31,43,38,.7); font-size:13px; }
.top-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.page-title{ margin:6px 0 0; color:var(--green); }
.page-sub{ margin:6px 0 0; }
.category-links{ display:flex; gap:10px; flex-wrap:wrap; }

/* =========================
   CATEGORY PRODUCT CARDS
   ========================= */
.grid-products{
  display:grid;
  gap:14px;
  margin-top:14px;
  grid-template-columns:repeat(4, minmax(0,1fr));
}
.grid-products > *{ min-width:0; } /* overflow prevention */

@media (max-width:1050px){ .grid-products{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:900px){ .grid-products{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* Mobile: 2 columns looks good for gifts */
@media (max-width:520px){
  .grid-products{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
}

.pcard{
  background:var(--card);
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}

.imgwrap{ height:170px; background:#fff; cursor:pointer; }
.imgwrap img{ width:100%; height:100%; object-fit:cover; }

.pbody{ padding:12px; }
.ptitle{
  margin:0;
  font-weight:1000;
  color:var(--green);
  cursor:pointer;
}
.pmeta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  color:rgba(31,43,38,.75);
  font-size:13px;
}
.pprice{ color:var(--burg); font-weight:1000; }

.pbtn{
  width:100%;
  margin-top:10px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:linear-gradient(180deg, var(--green2), var(--green));
  padding:10px 12px;
  font-weight:1000;
  color:#fff;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  transition: filter .12s ease, transform .12s ease;
}
.pbtn:hover{ filter:brightness(1.06); }
.pbtn:active{ transform:translateY(1px); }

/* Category card mobile sizing */
@media (max-width:520px){
  .imgwrap{ height:130px; }
  .pbody{ padding:10px; }
  .ptitle{ font-size:14px; line-height:1.2; }
  .pmeta{ font-size:12px; }
  .pbtn{ padding:12px 10px; }
}

/* =========================
   QUICK VIEW MODAL
   ========================= */
.qv-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:1000;
}
.qv-backdrop.open{ display:flex; }

.qv-modal{
  width:min(980px, 100%);
  background:rgba(255,255,255,.96);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 22px 60px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
}

.qv-close{
  position:absolute;
  top:10px; right:10px;
  width:38px; height:38px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  font-size:22px;
  font-weight:900;
  cursor:pointer;
}

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

.qv-img{
  height:420px;
  background:#fff;
  border-right:1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:900px){
  .qv-img{ border-right:none; border-bottom:1px solid rgba(0,0,0,.06); }
}
.qv-img img{ width:100%; height:100%; object-fit:contain; }

.qv-thumbs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:10px;
  border-right:1px solid rgba(0,0,0,.06);
}
@media (max-width:900px){ .qv-thumbs{ border-right:none; } }

.qv-thumb{
  width:86px; height:64px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  overflow:hidden;
  cursor:pointer;
  padding:0;
}
.qv-thumb img{ width:100%; height:100%; object-fit:cover; }

.qv-title{ margin:18px 16px 0; font-size:24px; color:var(--green); }
.qv-price{ margin:10px 16px 0; font-size:20px; font-weight:1000; color:var(--burg); }
.qv-city{ margin:6px 16px 0; color:rgba(31,43,38,.72); font-size:13px; }
.qv-desc{ margin:12px 16px 0; color:rgba(31,43,38,.84); line-height:1.55; }

.qv-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:14px 16px 0;
  align-items:center;
}

.qv-qty{ display:flex; align-items:center; gap:8px; }
.qv-qty button{
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  cursor:pointer;
  font-weight:1000;
}
.qv-qty input{
  width:58px; height:34px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.10);
  text-align:center;
  font-weight:1000;
}

.qv-table{ margin:14px 16px 18px; border-top:1px solid rgba(0,0,0,.08); }
.qv-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.qv-row strong{ color:rgba(31,43,38,.85); }
.qv-row span{ color:rgba(31,43,38,.75); text-align:right; }

/* Optional: left-side actions (if quickview.js uses it) */
.qv-left-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.qv-left-actions .qv-qty button{ width:36px; height:36px; border-radius:10px; }
.qv-left-actions #qvQty{
  width:56px; height:36px;
  text-align:center;
  font-weight:700;
}

/* =========================
   COMING SOON CATEGORY (DISABLED)
   ========================= */
.category-disabled{
  position:relative;
  pointer-events:none;
  opacity:.6;
}
.category-disabled::after{
  content:"Will be ready soon";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  text-align:center;
  padding:12px;
  border-radius:8px;
}

/* =========================
   CHECKOUT TRUST (PAYMENT LOGOS)
   ========================= */
.paytrust{
  margin-top:10px;
  padding:12px 12px 10px;
  border:1px solid rgba(31,43,38,.14);
  border-radius:14px;
  background:rgba(255,255,255,.70);
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  backdrop-filter: blur(6px);
}

.paytrust__top{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:700;
  color:#1f3b2e;
  margin-bottom:10px;
}

.paytrust__lock{
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  font-size:14px;
}

.paytrust__logos{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.paytrust__logos img{
  display:inline-block;
  height:28px;
  width:auto;
  max-height:28px;
  max-width:92px;
  background:#fff;
  border:1px solid rgba(31,43,38,.18);
  border-radius:8px;
  padding:6px 8px;
}

.paytrust__note,
.paytrust__fineprint{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.45;
  color:rgba(31,43,38,.85);
}

@media (max-width:520px){
  .paytrust__logos img{
    height:24px;
    max-height:24px;
    max-width:80px;
    padding:4px 6px;
  }
}

/* =========================
   MOBILE: HEADER + HERO (FINAL)
   ========================= */
@media (max-width:600px){

  /* Hide top menu links (keep Brand + Cart/Checkout) */
  .nav-links{ display:none; }

  /* Keep right buttons compact */
  .nav-right{
    gap:8px;
    flex-wrap:nowrap;
  }
  .nav-right .btn{
    padding:10px 12px;
    font-size:13px;
    border-radius:999px;
    white-space:nowrap;
  }

  /* If space is tight, show only Checkout (primary) */
  .nav-right .btn:not(.btn-primary){
    display:none;
  }

  /* Smaller hero */
  .hero-wide__wrap{ min-height:240px; }
  .hero-wide__content{ padding:12px; margin:12px; }
  .hero-wide__content h1{ font-size:24px; line-height:1.15; margin:0 0 8px; }
  .hero-wide__content p{ font-size:13px; line-height:1.35; }
  .hero-wide__bg{ height:240px; }
}

/* =========================
   CHECKOUT: FORCE 1 COLUMN ON MOBILE (SAFE)
   ========================= */
@media (max-width:900px){
  .checkout{
    display:block !important;
    grid-template-columns:none !important;
    width:100% !important;
    max-width:100% !important;
  }
  .checkout > *{
    width:100% !important;
    max-width:100% !important;
    float:none !important;
  }
}
/* =========================================================
   HERO OVERLAY FIX (LIVE) — Option 1A: Bottom Gradient Bar
   Paste at VERY END of /styles.css
========================================================= */

/* Ensure hero is the positioning context */
.hero-wide__wrap{
  position: relative;
}

/* Put overlay at bottom as a bar (does NOT cover center of image) */
.hero-wide__content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  margin: 0 !important;
  max-width: none !important;

  padding: 16px 18px 16px;
  border-radius: 0 0 22px 22px;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.35) 35%,
    rgba(0,0,0,.60) 100%
  );

  color: #fff;
  z-index: 5;
}

/* Make text readable */
.hero-wide__content h1{
  color: #fff !important;
  margin: 0 0 6px;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

.hero-wide__content p{
  color: rgba(255,255,255,.92) !important;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.30);
  max-width: 78ch;
}

/* Buttons inside the bar */
.hero-actions{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Mobile: keep bar compact + optionally hide paragraph */
@media (max-width: 600px){
  .hero-wide__content{
    padding: 12px 12px 12px;
  }

  .hero-wide__content h1{
    font-size: 22px;
    line-height: 1.15;
  }

  .hero-wide__content p{
    display: none; /* remove if you want the paragraph on mobile */
  }

  .hero-actions .btn{
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 13px;
  }
}

/* =========================================================
   MOBILE: HOMEPAGE ONLY — FORCE 2 COLUMNS FOR TILES
   (Does NOT affect .grid-products category pages)
========================================================= */
@media (max-width: 600px){

  /* Homepage: Product Categories */
  #categories .grid-tiles{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }

  /* Homepage: Shop by Occasion */
  #occasions .grid-tiles{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }

  /* Make the cards fit nicely in 2 columns */
  #categories .tile-img,
  #occasions .tile-img{
    height: 120px !important;
  }

  #categories .tile-title,
  #occasions .tile-title{
    font-size: 13px !important;
    padding: 10px !important;
  }
}