/* ============================================================
   COMMON.CSS
   Shared styles for header, footer, and other common sections.
   ============================================================ */
:root{
    --gutter: 64px;
}
@media (max-width:1024px) and (min-width:769px){
  :root{ --gutter: 36px; }
}
@media (max-width:768px){
  :root{ --gutter: 20px; }
}

:root{
    --font-primary: 'Beautique Display';
    --font-secondary: 'Poppins', sans-serif;
    --font-tertiary: 'Config Condensed';
}

/* hidden attribute must beat display:flex on buttons/steppers */
[hidden]{ display:none !important; }

/* =================== WHATSAPP STICKY BUTTON =================== */
.desktop-whatsapp-sticky{
    position:fixed;
    top:75%;
    right:1px;
    transform:translateY(-50%);
    width:44px;
    height:128px;

    background:#F6FAFF;
    border:1px solid #D9D9D9;
    border-radius:8px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;

    padding:10px 0;

    text-decoration:none;
    color:#19325C;

    box-shadow:0 6px 20px rgba(0,0,0,.08);

    z-index:9999;

    transition:.25s ease;
}

.desktop-whatsapp-sticky:hover{
    transform:translateY(-50%) translateX(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}

.desktop-whatsapp-sticky .wa-text{
    writing-mode:vertical-rl;
    transform:rotate(180deg);

    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:400;
    line-height:1;
    letter-spacing:0;

    color:#19325C;
}

.desktop-whatsapp-sticky .wa-icon{
    width:24px;
    height:24px;

    border-radius:50%;
    background:#25D366;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#F6FAFF;
}

.desktop-whatsapp-sticky .wa-icon svg{
    width:14px;
    height:14px;
}

/* Hide on tablet & mobile */
@media (max-width:991px){
    .desktop-whatsapp-sticky{
        display:none;
    }
}

/* =================== ANNOUNCEMENT BAR =================== */
.announce{background:#19325C;color:#F6FAFF; text-align:center; font-size:14px; padding-top:9px; padding-bottom:9px; padding-left:var(--gutter); padding-right:var(--gutter); letter-spacing:.2px;}
.announce span{display:inline-flex; align-items:center; gap:8px;font-family: var(--font-secondary);}

@media (max-width:768px){
  .announce{display:none;}
}

/* =================== HEADER =================== */
.header{background:#E1E1DC; position:relative; z-index:50;}
.header-top{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:22px; padding-bottom:16px; padding-left:var(--gutter); padding-right:var(--gutter);}
.logo img{height:48px; width:auto; display:block;}
.logo{ font-weight:700; font-size:30px; letter-spacing:1px; color:#1B3358; line-height:1;}
.logo small{display:block;  font-weight:500; font-size:10px; letter-spacing:5px; color:#1B3358; margin-top:4px;}
.search-bar{flex:1; max-width:650px; display:flex; align-items:center; background:#F6FAFF; border-radius:30px; padding:6px 8px 6px 18px; gap:32px; border:1px solid #e3e6ea;}
.search-bar .pin{display:flex; align-items:center; gap:6px; font-size: 16px; color:#425671; white-space:nowrap; padding-right:22px; border-right:2px solid #CDAF8C;}
.search-bar .pin{font-family: var(--font-secondary);font-weight: 500;font-style: normal;}.search-bar input::placeholder {color:#425671;}
.search-bar input{width:100%;border:none; outline:none; background:transparent; flex:1; font-size: 16px; font-family: var(--font-secondary); color:#425671;}
.search-bar button{width:34px; height:34px; border-radius:50%; background:#F6FAFF; border:none; color:#F6FAFF; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.header-actions{display:flex; align-items:center; gap:24px; font-size: 16px; white-space:nowrap;}
.header-actions a{display:flex; align-items:center; gap:8px; font-size: 14px;transition:color .25s ease;}
.header-actions a span{font-weight: 500;}
.header-bottom{display:flex; align-items:center; justify-content:space-between; padding-bottom:20px;padding-top:20px; gap:20px; padding-left:var(--gutter); padding-right:var(--gutter);}
  .main-nav{display:flex; align-items:center; gap:48px; font-size:15px; }
.main-nav a{display:flex; align-items:center; gap:4px; font-size: 16px; color:#19325C;}
.nav-item{position:relative; display:inline-block;}
.nav-link{display:flex; align-items:center; gap:3px; font-size: 16px; color:#19325C;cursor:pointer;}
.nav-link .chev{ margin-top:2px;transition:transform .2s ease;}
.nav-item.open .nav-link .chev{transform:rotate(180deg);}
.mega-menu{
  display:none;
  position:absolute; top:calc(100% + 32px); left:0;
  width:max-content; max-width:min(1040px, calc(100vw - 64px));
  background:#F6F8FC; border-radius:14px; overflow:hidden;
  box-shadow:0 20px 50px rgba(20,30,60,.18); z-index:100;
}
.nav-item.open .mega-menu{display:flex;}
.mega-sidebar{background:#1B3358; width:320px; padding:24px 0; flex-shrink:0;}
.mega-menu{color:#19325C!important;}
.nav-link:focus, .nav-link:hover {color:#19325C!important;}
.mega-side-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; color:#c1bcd3 !important; font-size:15px;
}

.mega-side-link.active, .mega-side-link:hover{color:#DCC091!important; background:rgba(255,255,255,.04);}

.mega-content{display:flex; flex-wrap:wrap; padding:20px 20px; gap:6px; align-items:flex-start;}
.mega-links-col{display:flex; flex-direction:column; gap:16px; font-size:14px; padding-right:36px; width:max-content; flex:0 0 auto; }
.mega-links-col:last-of-type{border-right:none;}
.mega-links-col a{color:#1B3358; white-space:nowrap;}
.mega-promo{width:210px; flex-shrink:0;}
.mega-promo img{width:100%; height:130px; object-fit:cover; border-radius:10px; margin-bottom:14px;}
.mega-promo p{font-size:13px; color:#4b5568; line-height:1.5; margin-bottom:14px;}
.btn-outline-navy{display:inline-flex; align-items:center; gap:6px; border:1.5px solid #1B3358; color:#1B3358; background:transparent; padding:10px 18px; font-size:13px; font-weight:500;}
  .header-cta{display:flex; align-items:center; gap:14px;}
  .header-cta .btn-call span.num{color:#0A0A0A;font-size: 16px;font-weight:400;}
  .btn-express{background:#1B3358; color:#F6FAFF; padding:13px 22px; border-radius:8px; font-size:14px;  border:none;}
  .btn-call{background:#D8B98C; color:#1B3358; padding:13px 20px; border-radius:8px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; border:none;}
  .hamburger{display:none; background:none; border:none; color:#1B3358;}

.logo{flex:0 0 auto; min-width:auto;}
.logo img{height:48px; width:auto; max-width:none;}

.header a {
    text-decoration: none;
}
@media (max-width:1024px) and (min-width:769px){
  .header-top{gap:14px;}
  .logo img{height:38px;}
  .search-bar{max-width:320px; padding:6px 6px 6px 14px;}
  .search-bar .pin{display:none;}
  .header-actions{gap:14px; font-size:14px;}
  .header-actions a{font-size:14px;}
  .header-actions a svg{width:20px; height:20px;}
  .header-cta{gap:10px;}
  .btn-express, .btn-call{padding:10px 14px; font-size:13px;}
  .main-nav{gap:22px; font-size:14px;}
}

@media (max-width:768px){
    .search-bar{display:none;}
    .header-actions{display:none;}
    .main-nav{display:none;}
    .header-cta .btn-call span.num{display:none;}
    .hamburger{display:flex;}
    .header-top{padding-top:20px; padding-bottom:12px;}
    .header-bottom{padding-bottom:16px;}
  }

  /* ---------- Mobile nav (Bootstrap Offcanvas) ---------- */
  .jb-mobile-nav{background:#1B3358; color:#F6FAFF; width:280px;}
  .jb-mobile-nav .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.15); padding:18px 20px;}
  .jb-mobile-nav .offcanvas-body{padding:20px;}
  .jb-mobile-nav-list li{margin-bottom:4px;}
  .jb-mobile-nav-list a{display:block; padding:12px 6px; font-size:16px; color:#F6FAFF; font-weight:500;}
  .jb-mobile-nav-list a:hover, .jb-mobile-nav-list a:active{color:#DCC091;}
  .jb-mobile-nav hr{border-color:rgba(255,255,255,.15); margin:8px 0;}

@media (max-width:768px){
  .logo img{height:36px;}
  .search-bar,
  .header-actions,
  .header-bottom{display:none;}
  .hamburger{display:flex; align-items:center; padding:0;}
  .hamburger svg{width:32px; height:32px; stroke-width:2.2;}
}
/* ===== Header action icons ===== */
.header-actions a{
  display:flex;
  align-items:center;
  gap:8px;
  color:#425671;
  transition:color .25s ease;
  font-weight:500;
}
.header-actions a:hover{
  color:#84461F !important;
}
.header-actions a span{
  display:flex;
  transition:transform .25s ease, color .25s ease;
}

/* Track Order */
.header-actions a.track-link svg{ transform-origin:center; }
.header-actions a.track-link svg path{ transition:stroke .25s ease; }
.header-actions a.track-link:hover svg{ transform:rotate(30deg); }
.header-actions a.track-link:hover svg path{ stroke:#84461F !important; }
.header-actions a.track-link:hover span{ transform:scale(1.08); }

/* Account / Sign In */
.header-actions a.signin-link .signin-person{
  transition:transform .25s ease, stroke .25s ease;
  transform-origin:center;
  transform-box:fill-box;
}
.header-actions a.signin-link .signin-outer{ transition:stroke .25s ease; }
.header-actions a.signin-link:hover .signin-person{
  transform:translateY(-2px);
  stroke:#84461F !important;
}
.header-actions a.signin-link:hover .signin-outer{ stroke:#84461F !important; }

/* Wishlist */
.header-actions a.wishlist-link{ position:relative; }
.header-actions a.wishlist-link .wishlist-heart{
  transition:fill .25s ease, stroke .25s ease, transform .25s ease;
  transform-origin:center;
  transform-box:fill-box;
}
.header-actions a.wishlist-link:hover .wishlist-heart{
  stroke:#84461F !important;
  fill:#84461F;
  transform:scale(1.08);
}

/* Cart */
.header-actions a.cart-link{ position:relative; }
.header-actions a.cart-link .cart-body{
  transition:transform .25s ease, stroke .25s ease;
  transform-origin:center;
  transform-box:fill-box;
}
.header-actions a.cart-link .cart-wheels{ transition:stroke .25s ease; }
.header-actions a.cart-link:hover .cart-body{
  transform:translateX(1px);
  stroke:#84461F !important;
}
.header-actions a.cart-link:hover .cart-wheels{ stroke:#84461F !important; }
.header-actions a.cart-link:hover span{ transform:translateX(1px); }

/* ===== Header CTA buttons ===== */
.btn-express{ transition:background .25s ease; }
.btn-express:hover{
  background:#9FBAD4;
  color:#1B3358;
}
.btn-call{ transition:background .25s ease; }
.btn-call:hover{ background:#CDAF8C; }
.btn-call .num-prefix{
  display:inline-block;
  max-width:0;
  overflow:hidden;
  opacity:0;
  white-space:nowrap;
  vertical-align:bottom;
  transition:max-width .35s ease, opacity .25s ease;
}
.btn-call:hover .num-prefix{
  max-width:80px;
  opacity:1;
}
.header-bottom,.header-top{
    background:#E1E1DC;
}

.cart-badge{
  position:absolute;
  top:-6px;
  right:-8px;
  background:#E0455F;
  color:#fff;
  font-size:10px;
  font-weight:600;
  min-width:16px;
  height:16px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  line-height:1;
}

/* ===== Mobile accordion menu ===== */
.jb-acc-item{border-bottom:1px solid rgba(255,255,255,.12);}
.jb-acc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 6px;
  cursor:pointer;
}
.jb-acc-head span{
  font-size:16px;
  font-weight:600;
  color:#F6FAFF;
}
.jb-acc-toggle{
  width:28px; height:28px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:transparent;
  color:#F6FAFF;
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .2s ease, transform .2s ease;
}
.jb-acc-item.open > .jb-acc-head .jb-acc-toggle{
  background:#DCC091;
  color:#1B3358;
  border-color:#DCC091;
  transform:rotate(45deg);
}
.jb-acc-body{
  display:none;
  padding:0 0 10px 10px;
}
.jb-acc-item.open > .jb-acc-body{
  display:block;
}

.jb-acc-subitem{border-top:1px solid rgba(255,255,255,.08);}
.jb-acc-subhead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 6px;
}
.jb-acc-subhead a{
  padding:0;
  font-size:14.5px;
  font-weight:500;
  color:#DCC091;
  flex:1;
}
.jb-acc-toggle-sm{
  width:22px; height:22px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#F6FAFF;
  font-size:14px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-left:8px;
  transition:background .2s ease, transform .2s ease;
}
.jb-acc-subitem.open > .jb-acc-subhead .jb-acc-toggle-sm{
  background:#DCC091;
  color:#1B3358;
  border-color:#DCC091;
  transform:rotate(45deg);
}
.jb-acc-subbody{
  display:none;
  padding:0 0 8px 14px;
}
.jb-acc-subitem.open > .jb-acc-subbody{
  display:block;
}
.jb-acc-subbody a{
  display:block;
  padding:8px 6px;
  font-size:13.5px;
  font-weight:400;
  color:#c9d2e0;
}
.jb-acc-subbody a:hover{color:#F6FAFF;}
.jb-acc-subbody .jb-acc-empty{
  padding:8px 6px;
  font-size:13px;
  color:#7f8aa3;
  font-style:italic;
}
:root {
    --rust: #84461F;
}
a {
    text-decoration: none !important;
    color: inherit;
}

/*--------breadcrumb css---------*/
.breadcrumb{padding:20px 64px;background:#ECECEC;}
.breadcrumb ol{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0;}
.breadcrumb li{display:flex;align-items:center;gap:10px; font-family: var(--font-secondary)}
.breadcrumb a{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-family: var(--font-secondary) color:#19325C;font-size:16px;text-decoration:none;}
.breadcrumb a:hover{color:#19325C}
.breadcrumb a svg{flex:none}
.breadcrumb li[aria-current="page"]{color:#19325C;font-weight:500; font-family: var(--font-secondary);font-size:16px;}
.breadcrumb .sep{color:var(--line)}
@media (max-width: 600px) {.breadcrumb {display: none;}}
@media (max-width:900px){.breadcrumb{padding:14px 16px}.breadcrumb a,.breadcrumb li[aria-current="page"]{font-size:13px}}

/* ---------- HERO (empty state) ---------- */
.hero.is-empty{ display:none; }

/* ---------- ABOUT (moved off inline styles) ---------- */
.about-box--bg{
  background-image:url('../../img1/Rectangle 78.png');
}
.about-card h3{
  font-size:32px;
}

  /* ---------- Footer ---------- */
:root{
  --navy:#1B3358;
  --gold-light:#DCC091;
  --steel-light:#9FBAD4;
  --footer-bg:#3D5372;
}

.footer{background:var(--footer-bg); color:#F6FAFF; padding-top:56px; padding-left:var(--gutter); padding-right:var(--gutter); font-family:'Poppins', sans-serif;}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:32px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.15);
  margin:0 auto;
}

.footer-brand{
  display:flex;
  align-items:flex-start;
  gap:28px;
}
.footer-brand .logo-col img{width:150px; display:block;}
.footer-brand .text-col p{
  font-size:15px;
  line-height:1.6;
  color:#E7EAF1;
  max-width:320px;
  margin-bottom:20px;
}
.footer-know-more{
  background:#81a1b7;
  color:#1B3358;
  border:none;
  padding:12px 22px;
  font-size:14px;
  font-weight:600;
  margin-bottom:22px;
  cursor:pointer;
  display:inline-block;
}
.footer-follow-label{font-size:15px; color:#F6FAFF; margin-bottom:14px;}
.footer-social{display:flex; align-items:center; gap:18px;}
.footer-social a{
  color:#F6FAFF;
  display:flex;
  align-items:center;
  width:22px; height:22px;
}
.footer-social svg{width:100%; height:100%;}

.footer-col h4{
  color:#DCC091;
  font-family: var(--font-secondary);
  font-size:18px;
  font-style:normal;
  margin-bottom:20px;
}
.footer-col ul{list-style:none; margin:0; padding:0;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{
  color:#F6FAFF;
  font-size:14px;
  text-decoration:none;
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:22px 0;
  font-size:13.5px;
  color:#C7CDDB;
  margin:0 auto;
}
.footer-bottom a{color:#C7CDDB; text-decoration:none;}
.footer-bottom a:hover{color:#F6FAFF;}
.footer-follow-mobile{display:none;}
@media (max-width:1024px){
  .footer-grid{row-gap:36px;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:768px){
  .footer{padding-top:40px;}
  .footer-grid{grid-template-columns:1fr; text-align:center;}
  .footer-brand{flex-direction:column; align-items:center; gap:16px;}
  .footer-brand .text-col p{margin:0 auto 20px;}
  .footer-know-more{margin:0 auto 22px;}
  .footer-bottom{flex-direction:column; text-align:center;}
}

.footer-logo-col img{
  width:200px;
  max-width:100%;
  height:auto;
  display:block;
}
@media (min-width:1025px){
  .footer-grid .products-col{
    padding-left:40px;
  }
}
@media (max-width:1024px) and (min-width:769px){
  .footer-grid{
    grid-template-columns:auto 1fr 1fr;
    align-items:start;
    gap:28px 24px;
  }
  .footer-logo-col{
    grid-column:1;
    grid-row:1;
  }
  .footer-text-col{
    grid-column:2 / -1;
    grid-row:1;
  }
  .footer-text-col p{max-width:none;}
}
.footer-know-more:hover{
  background:#F6FAFF;
  color:#1B3358;
}
@media (max-width:768px){
    .footer-grid{grid-template-columns:1fr 1fr; gap:30px;}
  }

@media (max-width:768px){
  .footer{padding-top:20px;}
  .footer-grid{grid-template-columns:auto 1fr; gap:24px 18px; text-align:left; padding-bottom:24px;}
  .footer-logo-col{grid-column:1; grid-row:1;}
  .footer-logo-col img{width:150px;}
  .footer-text-col{grid-column:2; grid-row:1;}
  .footer-text-col p{font-size:14px; margin-bottom:16px; max-width:none;}
  .footer-know-more{margin-bottom:0; padding:11px 20px;}

  .footer-text-col .footer-follow-label,
  .footer-text-col .footer-social{display:none;}

  .footer-col{grid-column:auto;}
  .footer-col h4{font-size:17px; margin-bottom:14px;}
  .footer-col ul li{margin-bottom:12px;}
  .footer-follow-mobile{display:block;}
  .footer-follow-mobile .footer-social{gap:22px;}
  .footer-follow-mobile .footer-social a{width:24px; height:24px;}

  .footer-bottom{flex-direction:column; text-align:center; gap:8px; padding:20px 0;}
}
/* default: wrappers don't exist as far as the grid is concerned */
.f-brand-row, .f-links-row{ display:contents; }

@media (max-width:768px){
  .footer-grid{
    display:flex;
    flex-direction:column;
    gap:24px;
    text-align:left;
    padding-bottom:24px;
  }
  .f-brand-row{
    display:flex;
    gap:20px;
    align-items:flex-start;
  }
  .f-links-row{
    display:flex;
    gap:26px;
  }
  .footer-logo-col{ flex:0 0 130px; }
  .footer-logo-col img{ width:130px; height:auto; }
  .footer-text-col{ flex:1 1 auto; }
  .f-links-row .footer-col{ flex:1 1 0; }
  .footer-follow-mobile{ display:block; }
}
/* =================== SECTION HEAD / PRODUCT GRID =================== */
.section-pad{padding-top:70px; padding-bottom:70px; padding-left:var(--gutter); padding-right:var(--gutter);}
.section-head h2{
    font-size:48px;
    color: #19325C;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:150px;
  margin-bottom:36px;
  flex-wrap:wrap;
}
.section-head .desc{
  font-size:16px;
  color:#495166;
  max-width:520px;
}
.section-head .btn-view-all{
  margin-left:auto;
}
.btn-view-all{background:#1B3358; color:#F6FAFF; border:none; padding:3px 13px;font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}

.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.product-card{ border-radius:12px; overflow:hidden;}
.product-img{position:relative; aspect-ratio:313/300; overflow:hidden;}
.product-img img{width:100%; height:100%; object-fit:cover; border-radius: 10px;}
.badge-off{position:absolute; top:10px; right:10px; background:#F6FAFF; font-size:11px; font-weight:600; padding:6px 8px; border-radius:5px; text-align:center; line-height:1.2; box-shadow:0 1px 3px rgba(0,0,0,.15);}
.product-body{padding:10px;}
.product-name-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;}
.rating{display:flex; align-items:center; gap:4px; font-size:16px; font-family: var(--font-secondary); color:#000; font-weight:500; flex:0 0 auto;}
.price-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.price{color:#84461F;  font-size:18px;}
.btn-add{background:#1B3358; color:#F6FAFF; border:none; border-radius:7px; padding:6px 10px; font-size:12px; font-weight:500; display:flex; align-items:center; gap:6px;}

/* ---- product name : always one line ---- */
.product-name{
  font-size:18px;
  font-weight:500;
  font-family: var(--font-secondary);
  color:#000;
  flex:1 1 auto;
  min-width:0;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.product-name a{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---- price + weight chip ---- */
.price-wrap{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.weight-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 12px;
  border-radius:8px;
  background:#EDF0F8;
  color:#1B3358;
  font-family:var(--font-secondary);
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
}
.cart-controls{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.product-img > a{
  display:block;
  width:100%;
}

@media (min-width:1025px){
  .section-head{flex-wrap:nowrap; gap:60px;}
}
@media (max-width:1024px) and (min-width:769px){
  .section-head{
    flex-wrap:wrap;
    align-items:center;
    gap:0px;
    margin-bottom:28px;
  }
  .section-head h2{flex:0 0 100%; font-size:32px !important;}
  .section-head .desc{flex:1 1 auto;}
  .section-head .btn-view-all{flex:0 0 auto; margin-left:auto;}
}

/* ===== Bestsellers: exactly 3 cards + swipe, 1150 → 769 ===== */
@media (max-width:1150px) and (min-width:769px){
  section.section-pad > .product-grid{
    display:flex !important;
    grid-template-columns:none !important;
    gap:24px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  section.section-pad > .product-grid::-webkit-scrollbar{ display:none; }
  section.section-pad > .product-grid > .product-card{
    flex:0 0 calc((100% - 48px) / 3) !important;
    width:calc((100% - 48px) / 3) !important;
    max-width:calc((100% - 48px) / 3) !important;
    margin:0 !important;
    scroll-snap-align:start;
  }
  section.section-pad > .product-grid + .m-dots{
    display:flex !important;
    justify-content:center;
    gap:14px;
    margin-top:20px;
  }
  section.section-pad > .product-grid + .m-dots span{
    width:12px; height:12px;
    border-radius:0;
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
    background:rgba(27,51,88,.22);
    cursor:pointer;
  }
  section.section-pad > .product-grid + .m-dots span.active{ background:#1B3358; }
}

/* price shouldn't break onto two lines */
.product-card .price{ white-space:nowrap; }

/* fixed cart bar clearance */
body{ padding-bottom:0 !important; }
body:has(.cart-bar){ padding-bottom:64px !important; }

@media (max-width:768px){
    .product-grid, .occ-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
    .section-head h2{font-size:28px;}
  }
@media (max-width:768px){
  .section-pad{padding-top:20px; padding-bottom:20px;}
  .section-head{flex-direction:column; align-items:center; text-align:center; gap:14px; margin-bottom:22px;}
  .section-head h2{font-size:32px !important;}
  .section-head .desc{font-size:16px; max-width:100%;}
  .section-head .btn-view-all{margin:0 auto; font-size:16px !important;}
  .product-grid,
  .occ-grid{
    display:flex; gap:14px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:2px;
  }
  .product-grid::-webkit-scrollbar,
  .occ-grid::-webkit-scrollbar{display:none;}
  .product-card,
  .occ-card{flex:0 0 72%; scroll-snap-align:center;}
  .product-body{padding:12px 2px 0;}
  .product-name{font-size:16px;}
  .rating{font-size:15px;}
  .price{font-size:14px;}
  .btn-add{padding:7px 12px; font-size:13px; border-radius:8px;}
}

/* ===== carousel dots ===== */
.m-dots{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:20px;
}
.m-dots span{
  width:12px; height:12px;
  border-radius:0;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:rgba(27,51,88,.22);
  cursor:pointer;
}
.m-dots span.active{
  background:#1B3358;
}
/* hidden on desktop… */
@media (min-width:769px){
  .m-dots{display:none;}
}
/* …but the Bestsellers dots stay visible down to 769px
   (higher specificity, so it wins over the rule above) */
@media (max-width:1150px) and (min-width:769px){
  .product-grid + .m-dots{ display:flex; }
}

/* =================== OCCASIONS =================== */
.product-img{ position:relative; }
.product-img img{
  transition:filter .3s ease;
}
.product-card:hover .product-img img{
  filter:sepia(.3) saturate(1.4) brightness(.92) hue-rotate(-8deg);
}
.wishlist-btn{
  position:absolute;
  bottom:14px;
  right:14px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#F6FAFF;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#7a7a7a;
  cursor:pointer;
  opacity:0;
  transform:translateY(8px) scale(.9);
  transition:opacity .25s ease, transform .25s ease, color .2s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  z-index:3;
}
.wishlist-btn svg{ width:18px; height:18px; }
.product-card:hover .wishlist-btn{
  opacity:1;
  transform:translateY(0) scale(1);
}
.wishlist-btn.is-active{
  color:#E0455F;
}
.wishlist-btn.is-active svg{
  fill:#E0455F;
}
.wishlist-btn.pop svg{
  animation:heartPop .35s ease;
}
* {
    box-sizing: border-box;
}
@keyframes heartPop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.3); }
  100%{ transform:scale(1); }
}
.btn-add{
  transition:background .25s ease;
}
.product-card:hover .btn-add{
  background:#84461F;
}
.qty-stepper{
  display:flex; align-items:center; justify-content:center; gap:16px;
  background:#1B3358;
  border:1px solid #1B3358;
  border-radius:7px;
  padding:6px 10px;
}
.qty-stepper button{
  background:none;
  border:none;
  color:#F6FAFF;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  padding:0;
  width:14px;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  outline:none;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
}
.qty-stepper button:focus,
.qty-stepper button:active{
  outline:none;
  box-shadow:none;
}
.qty-stepper output{ font-size:14px; font-weight:500; color:#F6FAFF; min-width:14px; text-align:center; }

.occasions{background:#CDAF8C; }
.occasions .section-head h2, .occasions .section-head .desc{color:#1B3358;}
.section-head h2{
    font-family: var(--font-primary);
    font-style: italic;
}
.occ-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.occ-card img{border-radius:12px; aspect-ratio:313/290; object-fit:cover; width:100%; margin-bottom:18px;}
.occ-label-row{display:flex; align-items:center; justify-content:space-between; gap:10px;padding: 0 10px 10px}
.occ-label{font-family:var(--font-secondary);  font-size:24px; color:#1B3358; line-height:1.25;}
.occ-arrow{width:38px; height:38px; border-radius:9px; background:#7A3626; color:#F6FAFF; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.occ-card img{
  transition:filter .3s ease;
}
.occ-card:hover img{
  filter:brightness(0.72);
}
.occ-arrow{
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.occ-arrow svg{
  transition:transform .25s ease;
}
.occ-card:hover .occ-arrow{
  background:#1B3358;
  color:#F6FAFF;
}
@media (max-width:768px){
  .occ-card{
      width:241px;
  }
  .occ-card img{
    height:231px!important;
    width:241px!important;
    aspect-ratio:unset !important;
    object-fit:cover;
    flex-shrink:0;
    margin-bottom:14px;
    border-radius:12px;
  }
  .occ-label-row{
    flex:1;
    display:flex;
    align-items:center;
    padding:0 10px 0;
  }
  .occ-label{font-size:21px;}
  .occ-arrow{width:44px; height:44px;}
}

/*=================== PHOTO CAKE BANNER ===================*/
.photocake-section{
  margin:0 auto 60px;
  padding-top:70px;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.photocake-wrap{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  margin:0 auto;
}
.photocake-track{display:flex; width:100%; transition:transform .6s ease;}
.photocake-slide{min-width:100%; line-height:0; aspect-ratio:1312/600;}
.photocake-slide img{width:100%; height:100%; display:block; object-fit:cover;}
.photocake-dots{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:22px;
}
.photocake-dots span{
  position:relative;
  width:12px; height:12px;
  border-radius:0;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  cursor:pointer;
  background:#CDAF8C;
  transition:background .2s ease;
}
.photocake-dots span::before{
  content:'';
  position:absolute;
  inset:-7px;
  border:1.5px dotted #CDAF8C;
}
.photocake-dots span.active{
  background:#19325C;
}
.photocake-dots span.active::before{
  border-style:solid;
  border-color:#19325C;
}
@media (max-width:768px){
    .photocake{padding:34px 22px;}
    .photocake h2{font-size:30px;}
    .photocake h2 em{font-size:32px;}
  }
@media (max-width:768px){
  .photocake-section{margin-bottom:20px; padding-top:24px;}
  .photocake-wrap{border-radius:14px;}
  .photocake-slide{aspect-ratio:430/700;}
  .photocake-slide img{object-fit:cover; object-position:center;}
  .photocake-dots{margin-top:16px; gap:12px;}
}

@media (max-width: 900px) {
    .grid {
        padding-bottom: 20px !important;
    }
}
/* ============================================================
   LISTING RESPONSIVE — applies to category + sub-category alike
   (both pages use .listing / .filters / .grid / .pcard)
   ============================================================ */

/* Narrow the filter rail so three cards still fit comfortably.
   --rail is the sidebar column width set in category.css. */
@media (min-width:1151px) and (max-width:1400px){
  .listing{--rail:270px;column-gap:18px}
}
@media (min-width:901px) and (max-width:1150px){
  .listing{--rail:230px;column-gap:16px}
  .filters{padding:14px}
  .facet-head{font-size:16px}
  .filter-row{font-size:14px;gap:10px}
  .mode button{font-size:14px;height:38px}
  .grid{gap:28px 16px}
}

/* ---- card foot: never let the button overlap the price ----
   .add was flex:0 0 auto, so once the card got narrow it kept its
   full width and slid on top of the weight pill. Now the button
   may shrink, and the whole row wraps before anything collides. */
.grid .pcard .pcard-foot{
  flex-wrap:wrap;
  row-gap:8px;
}
.grid .pcard .price-row{flex:0 1 auto;min-width:0}
.grid .pcard .add{
  flex:0 1 auto;min-width:0;
  overflow:hidden;
}

/* tighter card chrome in the squeezed range */
@media (min-width:901px) and (max-width:1150px){
  .grid .pcard .pcard-title h2{font-size:15px}
  .grid .pcard .pcard-rate{font-size:14px}
  .grid .pcard .price{font-size:15px}
  .grid .pcard .weight-pill{height:24px;padding:0 9px;font-size:11px}
  .grid .pcard .add{height:36px;padding:0 12px;font-size:13px;gap:6px}
  .grid .pcard .add svg{width:15px;height:15px}
  .grid .pcard .add-stepper{height:36px;padding:0 12px;gap:12px}
}
/* =================== MESSAGE ON CAKE POPUP =================== */
.jb-msg-back{position:fixed;inset:0;z-index:99999;padding:20px;background:rgba(29,54,77,.45);display:none;align-items:center;justify-content:center;}
.jb-msg-back.open{display:flex}
.jb-msg{position:relative;width:100%;max-width:340px;box-sizing:border-box;background:#FAFCFE;border-radius:12px;padding:22px 20px 20px;box-shadow:0 18px 40px rgba(29,54,77,.28);font-family:'Poppins',sans-serif;text-align:left;}
.jb-msg h3{margin:0 0 4px;padding:0;font-family:'Poppins',sans-serif;font-style:normal;font-size:17px;font-weight:500;color:#1D364D;line-height:1.3;}
.jb-msg .jb-msg-sub{margin:0 0 14px;font-size:13px;line-height:1.45;color:#726C6C;}
.jb-msg input[type=text]{display:block;width:100%;height:44px;box-sizing:border-box;border:1px solid #C9D0D8;border-radius:6px;background:#fff;padding:0 14px;font-family:'Poppins',sans-serif;font-size:15px;color:#1D364D;outline:none;}
.jb-msg input[type=text]:focus{border-color:#1D364D}
.jb-msg input[type=text].has-err{border-color:#93400C}
.jb-msg .jb-msg-count{display:block;margin-top:6px;font-size:12px;color:#726C6C}
.jb-msg .jb-msg-err{display:block;min-height:16px;margin-top:4px;font-size:12px;color:#93400C}
.jb-msg .jb-msg-add{display:block;width:100%;height:44px;margin:10px 0 0;border:0;border-radius:6px;background:#1B3358;color:#F6FAFF;font-family:'Poppins',sans-serif;font-size:15px;cursor:pointer;transition:background .2s ease;}
.jb-msg .jb-msg-add:hover{background:#84461F}
.jb-msg .jb-msg-x{position:absolute;top:10px;right:10px;width:28px;height:28px;border:0;border-radius:50%;background:#F3F3F3;color:#1D364D;font-size:19px;line-height:1;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
@media (max-width:600px){.jb-msg{max-width:100%;padding:20px 16px 16px}}

/*search suggestion css*/
/* =================== SEARCH AUTOCOMPLETE =================== */
.search-bar{ position:relative; }

.search-suggest{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:100%;
  background:#F6FAFF;
  border:1px solid #e3e6ea;
  border-radius:14px;
  box-shadow:0 16px 40px rgba(20,30,60,.14);
  overflow:hidden;
  z-index:200;
  max-height:420px;
  overflow-y:auto;
}

.search-suggest-label{
  padding:12px 18px 6px;
  font-family:var(--font-secondary);
  font-size:12px;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#8892a6;
}

.search-suggest-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 18px;
  cursor:pointer;
  color:#19325C;
  text-decoration:none;
}
.search-suggest-row.is-active,
.search-suggest-row:hover{
  background:#EDF0F8;
}

.ss-recent-icon{
  font-size:14px;
  color:#8892a6;
  flex-shrink:0;
}
.ss-recent-text{
  font-family:var(--font-secondary);
  font-size:14px;
}

.ss-thumb{
  width:40px; height:40px;
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
  background:#EDF0F8;
}
.ss-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ss-img-placeholder{ display:block; width:100%; height:100%; }

.ss-name{
  flex:1;
  font-family:var(--font-secondary);
  font-size:14px;
  font-weight:500;
  color:#19325C;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ss-price{
  font-family:var(--font-secondary);
  font-size:13px;
  font-weight:600;
  color:#84461F;
  flex-shrink:0;
}

.search-suggest-empty{
  padding:16px 18px;
  font-family:var(--font-secondary);
  font-size:13px;
  color:#8892a6;
}

@media (max-width:768px){
  .search-suggest{ display:none; } /* search bar itself is hidden below 768px already */
}

/* ---- Mobile search row: overrides the three .search-bar / .search-suggest
   hide rules above WITHOUT editing them — higher specificity wins here,
   so desktop/tablet behavior is untouched. ---- */
.search-bar.search-bar--mobile{
  display:none; /* hidden by default; only shown under 768px below */
}
@media (max-width:768px){
  .search-bar.search-bar--mobile{
    display:flex;
    max-width:none;
    width:calc(100% - (2 * var(--gutter)));
    margin:0 var(--gutter) 14px;
  }
  .search-bar.search-bar--mobile .search-suggest{
    display:block; /* only overrides display; [hidden] attribute still
                       controls actual open/closed state via JS */
  }
}
.grid .pcard .add {
    font-family:var(--font-secondary);
}
/* ---- header search bar: two equal halves, divider dead centre ----
   .pin and the product input are both flex:1 1 0, so they take exactly
   half the bar each and the gold divider lands in the middle.

   The button is taken OUT of the flex flow (absolute, pinned right).
   If it stayed in the flow it would eat ~34px from the right half only,
   and the divider would sit left of centre. The product input gets
   padding-right so its text never runs under the icon.

   min-width:0 on both halves is what lets them shrink evenly instead of
   refusing to go below their placeholder width. */
.search-bar{position:relative}

.search-bar .pin{
  flex:1 1 0;
  min-width:0;
  cursor:text;
  overflow:hidden;
  gap:12px;                 /* was 6px - matches the breathing room the
                               product side gets after the divider */
  font-weight:400;          /* .pin was 500, which made the left text read
                               bolder than "Search here...". Both 400 now. */
}
.search-bar .pin-input{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  border:none;outline:none;background:transparent;padding:0;
  /* identical to the product input: same family, size, weight, colour */
  font-family:var(--font-secondary);font-size:16px;font-weight:400;color:#425671;
  text-overflow:ellipsis;
}
.search-bar .pin-input::placeholder{color:#425671;font-weight:400;opacity:1}
.search-bar .pin-input.is-ok{color:#1B7A4B}
.search-bar .pin-input.is-bad{color:#B3261E}

.search-bar input[name="q"]{
  flex:1 1 0;
  width:100%;
  min-width:0;
  padding-right:38px;          /* clear of the absolutely placed button */
  text-overflow:ellipsis;
}

.search-bar button{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  margin:0;
}

/* ---- responsive: nothing may run off the right edge ----
   The two halves shrink together, so only the gaps, the type size and
   the bar's own max-width need stepping down. */
.header-top{flex-wrap:nowrap;min-width:0}
.search-bar{min-width:0}
.header-actions{flex:0 0 auto}

@media (max-width:1400px){
  .header-top{gap:18px}
  .search-bar{gap:18px; max-width:560px}
  .search-bar .pin{padding-right:14px}
  .header-actions{gap:18px}
}

@media (max-width:1240px){
  /*.header-top{gap:14px; padding-left:24px; padding-right:24px}*/
  .search-bar{gap:12px; max-width:470px}
  .search-bar .pin{padding-right:10px}
  .search-bar .pin{gap:8px}
  .search-bar .pin-input{font-size:14px;font-weight:400}
  .search-bar input[name="q"]{font-size:14px}
  .header-actions{gap:12px}
  .header-actions a{gap:5px; font-size:13px}
  .header-actions a svg{width:20px; height:20px}
  .logo img{height:42px}
}

@media (max-width:1100px){
  /* labels go before icons do - this is what finally lets Cart fit */
  .header-actions a span{display:none}
  .header-actions{gap:16px}
  .search-bar{max-width:420px}
  .logo img{height:38px}
}