/* ===========================================================
   DASH — design tokens
   =========================================================== */
:root{
  --ink:      #14120F;
  --ivory:    #F6F2EA;
  --paper:    #FBF9F5;
  --wine:     #7A2331;
  --wine-dark:#5C1A25;
  --sand:     #C9B48A;
  --line:     #DDD5C4;

  /* bootstrap variable overrides — square corners, brand palette */
  --bs-body-bg: var(--ivory);
  --bs-body-color: var(--ink);
  --bs-body-font-family: 'Jost', sans-serif;
  --bs-link-color: var(--ink);
  --bs-link-hover-color: var(--wine);
  --bs-link-decoration: none;
  --bs-primary: var(--wine);
  --bs-primary-rgb: 122,35,49;
  --bs-border-color: var(--line);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-2xl: 0;
}

::selection{ background: var(--wine); color: var(--ivory); }

body{ background: var(--ivory); }

h1,h2,h3,h4,h5,.font-display{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  letter-spacing:.01em;
  color: var(--ink);
}

#erimg {
    width: 50%;
    margin-top: 60px;
}

#logo {
    width: 100%;
    height: 60px;
}

#error_code {
    text-align: center;
    color: red;
}

#footerlogo {
    width: 30%;
	filter: brightness(0) invert(1);
    /* height: 50px; */
}

#paystackimg {
    width: 30%;
}

#stickstick {
    position: sticky;
    top: 130px;
}

#danger {
    position: fixed;
    z-index: 9999;
    width: 50%;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 80px;
    border-radius: 10px;
}

.display-serif{ font-family:'Cormorant Garamond', serif; font-weight:600; }
.eyebrow{
  font-family:'Jost', sans-serif;
  font-size:.72rem;
  letter-spacing:.22em;
  color: var(--wine);
  font-weight:500;
}
p, li, span, a, label, input, textarea, select, button{ font-family:'Jost', sans-serif; }
.lede{ font-family:'Cormorant Garamond', serif; font-size:1.3rem; line-height:1.55; color:#3b362f; }

a{ transition: color .2s ease, opacity .2s ease; }

hr, .hairline{ border-top:1px solid var(--line); opacity:1; }

/* ===========================================================
   Buttons
   =========================================================== */
.btn{ border-radius:0; font-size:.85rem; letter-spacing:.08em; padding:.75rem 1.6rem; }
.btn-dash{
  background: var(--ink); color:var(--ivory); border:1px solid var(--ink);
}
.btn-dash:hover{ background: var(--wine); border-color:var(--wine); color:var(--ivory); }
.btn-outline-dash{
  background:transparent; color:var(--ink); border:1px solid var(--ink);
}
.btn-outline-dash:hover{ background:var(--ink); color:var(--ivory); }
.btn-wine{ background:var(--wine); border:1px solid var(--wine); color:var(--ivory); }
.btn-wine:hover{ background:var(--wine-dark); border-color:var(--wine-dark); color:var(--ivory); }
.btn-link-underline{
  color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px; font-size:.85rem; letter-spacing:.08em;
}
.btn-link-underline:hover{ color:var(--wine); border-color:var(--wine); }

.form-control, .form-select{
  border-radius:0; border-color:var(--line); background:var(--paper); padding:.65rem .85rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--ink); box-shadow:none; background:#fff;
}
.form-label{ font-size:.78rem; letter-spacing:.06em; color:#4a453c; margin-bottom:.35rem; }

/* ===========================================================
   Announcement bar + Navbar
   =========================================================== */
.announce-bar{
  background:var(--ink); color:var(--ivory); font-size:.72rem; letter-spacing:.15em;
  text-align:center; padding:.5rem 1rem;
}

.site-navbar{ background:var(--ivory); border-bottom:1px solid var(--line); }
.brand-mark{ display:flex; align-items:center; gap:.6rem; }
.brand-mark svg{ width:26px; height:26px; color:var(--ink); }
.brand-word{
  font-family:'Cormorant Garamond', serif; font-weight:600; font-size:1.7rem;
  letter-spacing:.14em; color:var(--ink); margin:0;
}
.nav-links .nav-link{
  font-size:.85rem; letter-spacing:.06em; color:var(--ink); padding:.4rem .2rem; margin:0 .85rem; position:relative;
}
.nav-links .nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--wine);
  transform:scaleX(0); transition:transform .2s ease;
}
.nav-links .nav-link:hover::after{ transform:scaleX(1); }
.icon-btn{
  border:none; background:transparent; color:var(--ink); font-size:1.2rem; line-height:1; padding:.3rem;
  position:relative;
}
.icon-btn:hover{ color:var(--wine); }
.cart-count{
  position:absolute; top:-4px; right:-6px; background:var(--wine); color:#fff; font-size:.62rem;
  width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.dropdown-menu{ border-radius:0; border-color:var(--line); }
.dropdown-item{ font-size:.85rem; padding:.5rem 1.1rem; }
.dropdown-item:hover{ background:var(--ivory); color:var(--wine); }

/* ===========================================================
   Offcanvas side menu
   =========================================================== */
.offcanvas{ background:var(--paper); width:min(390px,88vw); }
.offcanvas-header{ border-bottom:1px solid var(--line); }
.offcanvas-title{ font-family:'Cormorant Garamond',serif; font-size:1.35rem; letter-spacing:.1em; }
.menu-account{ display:flex; align-items:center; gap:.85rem; }
.menu-account .bi{ font-size:2.1rem; color:var(--sand); }
.menu-label{ font-size:.7rem; letter-spacing:.18em; color:#8a8272; margin-bottom:.7rem; text-transform:uppercase; }
.cat-tile{ display:block; position:relative; text-decoration:none; overflow:hidden; }
.cat-tile img{ width:100%; height:86px; object-fit:cover; display:block; filter:grayscale(8%); }
.cat-tile span{
  position:absolute; left:0; right:0; bottom:0; background:linear-gradient(0deg, rgba(20,18,15,.78), transparent);
  color:#fff; font-size:.74rem; letter-spacing:.07em; padding:.5rem .55rem .35rem;
}
.menu-links li{ border-bottom:1px solid var(--line); }
.menu-links a{
  display:flex; align-items:center; justify-content:space-between; padding:.75rem .1rem; color:var(--ink); font-size:.9rem;
}
.menu-links a:hover{ color:var(--wine); }
.menu-item-mini{ display:flex; gap:.7rem; align-items:center; padding:.5rem 0; }
.menu-item-mini img{ width:46px; height:58px; object-fit:cover; }
.menu-item-mini .ttl{ font-size:.82rem; margin:0; }
.menu-item-mini .price{ font-size:.8rem; color:var(--wine); margin:0; }
.menu-foot a{ display:block; padding:.5rem 0; font-size:.85rem; color:var(--ink); }
.menu-foot a:hover{ color:var(--wine); }

/* ===========================================================
   Hero
   =========================================================== */
.hero{ background:var(--ink); }
.hero-copy{ padding:5rem 3rem; }
.hero-copy .brand-word{ font-size:4.4rem; letter-spacing:.12em; color:var(--ivory); line-height:1; }
.hero-copy .eyebrow{ color:var(--sand); }
.hero-copy p.lede{ color:#d8d2c4; }
.hero-img{ min-height:525px; background-size:cover; background-position:center; }

/* ===========================================================
   Category tiles (home)
   =========================================================== */
.category-tile{ position:relative; display:block; overflow:hidden; text-decoration:none; }
.category-tile img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .5s ease; }
.category-tile:hover img{ transform:scale(1.04); }
.category-tile .cat-label{
  position:absolute; left:1rem; bottom:1rem; color:#fff; z-index:2;
}
.category-tile .cat-label h3{ color:#fff; font-size:1.5rem; margin:0; }
.category-tile .cat-label small{ letter-spacing:.14em; font-size:.68rem; }
.category-tile::after{
  content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,18,15,.6), transparent 55%);
}

/* ===========================================================
   Product cards
   =========================================================== */
.product-card{ text-decoration:none; color:var(--ink); display:block; }
.product-thumb{ position:relative; overflow:hidden; background:var(--paper); }
.product-thumb img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:opacity .4s ease; }
.product-thumb .img-alt{ position:absolute; inset:0; opacity:0; }
.product-card:hover .img-alt{ opacity:1; }
.product-thumb .tag{
  position:absolute; top:.7rem; left:.7rem; background:var(--wine); color:#fff; font-size:.65rem;
  letter-spacing:.1em; padding:.25rem .55rem;
}
.product-quickadd{
  position:absolute; left:.6rem; right:.6rem; bottom:.6rem; background:var(--ink); color:var(--ivory);
  text-align:center; padding:.55rem; font-size:.72rem; letter-spacing:.1em; opacity:0; transform:translateY(6px);
  transition:.2s ease;
}
.product-card:hover .product-quickadd{ opacity:1; transform:translateY(0); }
.product-info{ padding-top:.85rem; }
.product-info h3{ font-size:1.05rem; margin:0 0 .15rem; font-weight:500; }
.product-info .price{ font-size:.9rem; color:var(--wine); font-family:'Jost',sans-serif; }
.product-info .swatches{ display:flex; gap:.3rem; margin-top:.4rem; }
.swatch{ width:13px; height:13px; border-radius:50%; border:1px solid rgba(0,0,0,.15); display:inline-block; }

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:2rem; }

/* ===========================================================
   Editorial band / About
   =========================================================== */
.editorial{ background:var(--sand); }
.editorial-img{ min-height:360px; background-size:cover; background-position:center; }

.newsletter-band{ background:var(--ink); color:var(--ivory); }
.newsletter-band .form-control{ background:transparent; border:1px solid #4a453c; color:#fff; }
.newsletter-band .form-control::placeholder{ color:#a79f8d; }
.newsletter-band .form-control:focus{ border-color:var(--sand); }

/* ===========================================================
   Footer
   =========================================================== */
.site-footer{ background:var(--ink); color:#c9c2b3; }
.site-footer h6{ color:var(--sand); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.1rem; }
.site-footer a{ color:#c9c2b3; font-size:.88rem; }
.site-footer a:hover{ color:#fff; }
.site-footer .brand-word{ color:var(--ivory); }
.site-footer .socials a{
  width:34px; height:34px; border:1px solid #45403590; display:inline-flex; align-items:center; justify-content:center;
  margin-right:.4rem;
}
.site-footer .socials a:hover{ border-color:var(--sand); color:var(--sand); }
.foot-bottom{ border-top:1px solid #322e27; font-size:.78rem; color:#8a8272; }

/* ===========================================================
   Shop / filters
   =========================================================== */
.shop-hero{ background:var(--ink); color:var(--ivory); padding:3.2rem 0; }
.filter-group summary, .filter-title{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-bottom:.85rem;
  display:flex; justify-content:space-between; cursor:pointer;
}
.filter-check{ font-size:.9rem; padding:.3rem 0; }
.filter-check .form-check-input{ border-radius:0; border-color:var(--line); }
.filter-check .form-check-input:checked{ background-color:var(--wine); border-color:var(--wine); }
.price-chip{
  border:1px solid var(--line); padding:.35rem .8rem; font-size:.78rem; margin:.2rem .3rem .2rem 0; display:inline-block; cursor:pointer;
}
.price-chip:hover, .price-chip.active{ border-color:var(--ink); background:var(--ink); color:var(--ivory); }
.sort-select{ max-width:220px; }
.page-link{ border-radius:0; color:var(--ink); border-color:var(--line); }
.page-item.active .page-link{ background:var(--ink); border-color:var(--ink); }

/* ===========================================================
   Product detail page
   =========================================================== */
.size-swatch{
  border:1px solid var(--line); min-width:44px; padding:.45rem; text-align:center; font-size:.82rem; cursor:pointer;
}
.size-swatch input{ display:none; }
.size-swatch:has(input:checked){ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.color-swatch{
  width:30px; height:30px; border-radius:50%; border:2px solid transparent; padding:2px; cursor:pointer; display:inline-block;
}
.color-swatch input{ display:none; }
.color-swatch:has(input:checked){ border-color:var(--wine); }
.color-swatch i{ display:block; width:100%; height:100%; border-radius:50%; border:1px solid rgba(0,0,0,.15); }
.accordion-item{ background:transparent; border-color:var(--line); }
.accordion-button{ border-radius:0 !important; background:transparent; font-size:.9rem; letter-spacing:.04em; }
.accordion-button:not(.collapsed){ background:transparent; color:var(--wine); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; }
.accordion-button::after{ filter:grayscale(1); }
.thumb-strip img{ cursor:pointer; opacity:.55; border:1px solid transparent; }
.thumb-strip img.active{ opacity:1; border-color:var(--ink); }

/* ===========================================================
   Reviews
   =========================================================== */
.review-summary{ background:var(--paper); border:1px solid var(--line); padding:2rem; }
.review-avg{ font-family:'Cormorant Garamond',serif; font-size:3.4rem; line-height:1; color:var(--ink); }
.review-stars{ color:var(--sand); letter-spacing:.1em; }
.review-stars.sm{ font-size:.85rem; }
.review-stars.lg{ font-size:1.15rem; }
.rating-bar-row{ display:flex; align-items:center; gap:.6rem; font-size:.8rem; margin-bottom:.4rem; }
.rating-bar-row .label{ width:44px; color:#4a453c; }
.rating-bar-track{ flex:1; height:6px; background:var(--line); position:relative; }
.rating-bar-fill{ position:absolute; inset:0; background:var(--wine); width:0; }
.rating-bar-row .pct{ width:34px; text-align:right; color:#8a8272; }

.star-rating-input{ display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:.15rem; }
.star-rating-input input{ display:none; }
.star-rating-input label{
  font-size:1.6rem; color:var(--line); cursor:pointer; line-height:1; transition:color .15s ease;
}
.star-rating-input label:hover,
.star-rating-input label:hover ~ label,
.star-rating-input input:checked ~ label{ color:var(--sand); }

.review-card{ border-bottom:1px solid var(--line); padding:1.6rem 0; }
.review-card:first-child{ padding-top:0; }
.reviewer-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--ink); color:var(--ivory);
  display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:1.1rem;
}
.verified-badge{ font-size:.68rem; letter-spacing:.05em; color:#3f6e2c; background:#e4ecdf; padding:.15rem .5rem; }
.review-helpful{ font-size:.8rem; color:#8a8272; background:none; border:1px solid var(--line); padding:.3rem .75rem; }
.review-helpful:hover{ border-color:var(--ink); color:var(--ink); }
.review-photos img{ width:64px; height:64px; object-fit:cover; margin-right:.5rem; cursor:pointer; }

/* ===========================================================
   Cart / Checkout
   =========================================================== */
.cart-row{ display:flex; gap:1.1rem; padding:1.4rem 0; border-bottom:1px solid var(--line); }
.cart-row img{ width:96px; height:120px; object-fit:cover; }
.qty-stepper{ display:inline-flex; border:1px solid var(--line); }
.qty-stepper .btn{ padding:.35rem .75rem; border:none; }
.qty-stepper input{ width:42px; border:none; text-align:center; background:transparent; }
.summary-card{ background:var(--paper); border:1px solid var(--line); padding:1.6rem; position:sticky;top:120px; }
.summary-card .row-line{ display:flex; justify-content:space-between; font-size:.92rem; padding:.4rem 0; }
.promo-form .form-control{ border-right:0; }
.checkout-step-num{
  width:28px; height:28px; border:1px solid var(--ink); border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; font-family:'Cormorant Garamond',serif; font-size:.95rem; margin-right:.6rem;
}
.pay-option{ border:1px solid var(--line); padding:.9rem 1rem; cursor:pointer; }
.pay-option:has(input:checked){ border-color:var(--ink); background:var(--paper); }

/* ===========================================================
   Account pages
   =========================================================== */
.auth-wrap{ min-height:70vh; }
.auth-side{ background:var(--ink); min-height:100%; background-size:cover; background-position:center; }
.account-nav .nav-link{
  color:var(--ink); border-radius:0; padding:.75rem 1rem; font-size:.88rem; letter-spacing:.03em;
  border-left:2px solid transparent; text-align:left;
}
.account-nav .nav-link.active{ background:var(--paper); border-left-color:var(--wine); color:var(--wine); }
.account-nav .nav-link:hover{ color:var(--wine); }
.account-card{ background:var(--paper); border:1px solid var(--line); padding:1.75rem; }
.order-table th{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#8a8272; border-bottom:1px solid var(--line); font-weight:500; }
.order-table td{ font-size:.88rem; vertical-align:middle; border-bottom:1px solid var(--line); }
.status-pill{ font-size:.7rem; letter-spacing:.05em; padding:.28rem .7rem; display:inline-block; }
.status-delivered{ background:#e4ecdf; color:#3f6e2c; }
.status-transit{ background:#eee2c8; color:#8a5b17; }
.status-processing{ background:#e7e2f4; color:#5a4a9c; }
.status-cancelled{ background:#f2ded9; color:#a33c2b; }

/* ===========================================================
   Misc
   =========================================================== */
.stat-num{ font-family:'Cormorant Garamond',serif; font-size:2.4rem; color:var(--wine); line-height:1; }
.stat-label{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#8a8272; }
.breadcrumb-item+.breadcrumb-item::before{ content:"/"; }
.breadcrumb{ font-size:.8rem; }

@media (max-width:991.98px){
  .hero-copy{ padding:3.2rem 1.6rem; }
  .hero-copy .brand-word{ font-size:3rem; }
  
#danger {
    position: fixed;
    z-index: 9999;
    width: 90%;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 80px;
    border-radius: 10px;
}

#stickstick {
    position:relative;
    top: 0;
}

#owl_imgg {
    overflow-y: scroll;
}
}
