:root{
    --wine:#5C1229;
    --wine-deep:#3E0C1C;
    --gold:#B4863F;
    --gold-light:#D8B77A;
    --cream:#FBF6EF;
    --blush:#F1DED2;
    --ink:#241C1B;
    --ink-soft:#6b5f5b;
    --line: rgba(36,28,27,0.12);
  }

  *{box-sizing:border-box;}

  body{
    font-family:'Jost', sans-serif;
    color:var(--ink);
    background:var(--cream);
    font-weight:400;
    letter-spacing:.01em;
  }

  h1,h2,h3,.font-display{
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    letter-spacing:.005em;
  }

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

  .container-xl{max-width:1320px;}

  /* ===== Utility bar ===== */
  .utility-bar{
    background:var(--wine-deep);
    color:var(--blush);
    font-size:.78rem;
    letter-spacing:.03em;
    padding:6px 0;
  }
  .utility-bar a{color:var(--gold-light); transition:color .2s;}
  .utility-bar a:hover{color:#fff;}
  .utility-bar .divider{opacity:.3; margin:0 10px;}

  /* ===== Main header ===== */
  header.site-header{
    background:var(--cream);
    border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:1000;
    transition:box-shadow .25s ease, padding .25s ease;
  }
  header.site-header.scrolled{
    box-shadow:0 6px 18px rgba(60,20,30,.08);
  }

  /* Grid layout guarantees the logo sits dead-center regardless of
     how wide the left (menu/search) or right (icons) groups are */
  .header-row{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    column-gap:12px;
    padding: 7px 0 7px;
  }
  .header-left{
    display:flex;
    align-items:center;
    gap:14px;
    justify-self:start;
    min-width:0;
  }
  a.brand-mark img {
    width: 70px;
}
.footer-brand img {
    width: 96px;
}
  .brand-mark{
    font-family:'Cormorant Garamond', serif;
    font-size:2.1rem;
    font-weight:600;
    letter-spacing:.08em;
    color:var(--wine);
    text-align:center;
    line-height:1;
    justify-self:center;
    grid-column:2;
  }
  .brand-mark small{
    display:block;
    font-family:'Jost', sans-serif;
    font-size:.56rem;
    letter-spacing:.42em;
    color:var(--gold);
    font-weight:500;
    margin-top:2px;
  }
  .header-icons{
    display:flex; align-items:center; gap:22px;
    justify-self:end;
  }
  .header-icons a{
    color:var(--ink); font-size:1.05rem; position:relative;
    transition:color .2s;
  }
  .header-icons a:hover{color:var(--wine);}
  .header-icons .badge-dot{
    position:absolute; top:-6px; right:-9px;
    background:var(--wine); color:#fff;
    font-size:.55rem; font-family:'Jost';
    width:15px; height:15px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  .header-search{
    flex:1; max-width:360px; position:relative;
  }
  .header-search input{
    width:100%; border:1px solid var(--line); background:#fff;
    padding:9px 38px 9px 16px; font-size:.85rem; font-family:'Jost';
    border-radius:2px; outline:none;
  }
  .header-search input:focus{border-color:var(--gold);}
  .header-search i{
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    color:var(--ink-soft); font-size:.85rem;
  }

  /* category nav (desktop) */
  .cat-nav{
    background:var(--wine);
  }
  .cat-nav ul{
    display:flex; list-style:none; margin:0; padding:0;
    justify-content:center; flex-wrap:wrap;
  }
  .cat-nav a{
    display:block;
    padding:13px 20px;
    letter-spacing:.05em;
    color:#F3E4DA;
    border-bottom:2px solid transparent;
    transition:all .2s;
    text-decoration: none;
    white-space:nowrap;
  }
  .cat-nav a:hover, .cat-nav a.active{
    color:#fff; border-bottom-color:var(--gold-light);
  }

  .mobile-toggle{display:none; font-size:1.3rem; background:none; border:0; color:var(--ink); flex:0 0 auto;}

  /* ===== Mobile off-canvas nav (opens from the right) ===== */
  .offcanvas.offcanvas-end{
    background:var(--cream);
    max-width:82vw;
  }
  .offcanvas-header{
    border-bottom:1px solid var(--line);
  }
  .offcanvas-title{color:var(--wine); font-size:1.4rem;}
  .mobile-nav-list{margin:0; padding:0;}
  .mobile-nav-list li a{
    display:block;
    padding:16px 24px;
    color:var(--ink);
    border-bottom:1px solid var(--line);
    font-size:.95rem;
    letter-spacing:.03em;
    transition:background .15s, color .15s;
  }
  .mobile-nav-list li a:hover,
  .mobile-nav-list li a.active{
    background:var(--blush);
    color:var(--wine);
  }

  /* ===== Hero ===== */
  .hero{
    position:relative; min-height:78vh; overflow:hidden;
    display:flex; align-items:center;
  }
  .hero img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:top center;
    transition:opacity .3s ease;
  }
  .hero::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(30,10,16,.62) 0%, rgba(30,10,16,.28) 45%, rgba(30,10,16,0) 70%);
  }
  .hero-content{position:relative; z-index:2; color:#fff; padding:0 6vw; max-width:640px;}
  .hero-content .eyebrow{
    font-size:.78rem; letter-spacing:.28em; color:var(--gold-light); margin-bottom:14px; display:block;
  }
  .hero-content h1{
    font-size:clamp(2.4rem, 5vw, 4.2rem); line-height:1.05; margin-bottom:18px; color:#fff;
  }
  .hero-content p{font-size:1.02rem; color:#EFE2DA; margin-bottom:28px; max-width:440px; font-weight:300;}
  .btn-wine{
    background:var(--wine); color:#fff; border:1px solid var(--wine);
    padding:13px 34px; font-size:.82rem; letter-spacing:.12em;
    transition:all .25s; display:inline-block;
  }
  .btn-wine:hover{background:transparent; color:#fff; border-color:#fff;}
  .btn-outline-cream{
    border:1px solid rgba(255,255,255,.7); color:#fff;
    padding:13px 34px; font-size:.82rem; letter-spacing:.12em;
    display:inline-block; transition:all .25s;
  }
  .btn-outline-cream:hover{background:#fff; color:var(--wine);}

  .hero-dots{
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
    display:flex; gap:8px; z-index:2;
  }
  .hero-dots span{
    width:22px; height:2px; background:rgba(255,255,255,.4); cursor:pointer;
  }
  .hero-dots span.active{background:#fff;}

  /* ===== Hero arrows ===== */
  .hero-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:3;
    width:46px; height:46px; border-radius:50%;
    background:rgba(20,8,12,.32);
    border:1px solid rgba(255,255,255,.55);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:1rem;
    cursor:pointer;
    transition:background .2s, border-color .2s, transform .2s;
    backdrop-filter:blur(2px);
  }
  .hero-arrow:hover{background:rgba(20,8,12,.55); border-color:#fff;}
  .hero-arrow:active{transform:translateY(-50%) scale(.94);}
  .hero-arrow.prev{left:20px;}
  .hero-arrow.next{right:20px;}
  @media (max-width: 767px){
    .hero-arrow{width:38px; height:38px; font-size:.85rem;}
    .hero-arrow.prev{left:12px;}
    .hero-arrow.next{right:12px;}
  }

  /* ===== Section headings ===== */
  .section{padding:70px 0;}
  .section-head{text-align:center; margin-bottom:44px;}
  .section-head h2{font-size:2.1rem; color:var(--wine);}
  .section-head .rule{
    width:44px; height:1px; background:var(--gold); margin:14px auto 0;
  }

  /* ===== Loyalty strip ===== */
  .loyalty-strip{
    background:linear-gradient(120deg, var(--wine) 0%, #7A1E37 100%);
    color:#fff; padding:26px 0;
  }
  .loyalty-strip .tiers{display:flex; gap:34px; align-items:center;}
  .loyalty-strip .tier-icon{
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.35); font-size:1.1rem;
  }
  .loyalty-strip h3{color:var(--gold-light); font-size:1.5rem; margin:0;}
  .loyalty-strip p{margin:0; font-size:.82rem; color:#EFE2DA; letter-spacing:.05em;}

  /* ===== Category grid ===== */
  .cat-card{
    position:relative; overflow:hidden; border-radius:2px; display:block;
  }
  .cat-card img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease; display:block;}
  .cat-card:hover img{transform:scale(1.06);}
  .cat-card .cat-label{
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(0deg, rgba(20,8,12,.72), transparent);
    color:#fff; padding:20px 16px 14px; font-size:.92rem; letter-spacing:.06em;
  }

  /* ===== Bestsellers ===== */
  .best-tabs{
    display:flex; justify-content:center; gap:30px; margin-bottom:36px; flex-wrap:wrap;
  }
  .best-tabs .tab{
    text-align:center; cursor:pointer; opacity:.55; transition:.2s;
  }
  .best-tabs .tab.active{opacity:1;}
  .best-tabs .tab img{
    width:60px; height:60px; border-radius:50%; object-fit:cover;
    border:2px solid transparent; margin-bottom:8px;
  }
  .best-tabs .tab.active img{border-color:var(--gold);}
  .best-tabs .tab span{display:block; font-size:.72rem; letter-spacing:.08em; color:var(--ink-soft);}

  .product-scroller{
    display:flex; gap:20px; overflow-x:auto; padding-bottom:10px;
    scroll-behavior:smooth; scrollbar-width:none;
  }
  .product-scroller::-webkit-scrollbar{display:none;}
  .product-card{
    flex:0 0 240px; background:#fff; position:relative;
  }
  .product-card .img-wrap{position:relative; overflow:hidden; aspect-ratio:3/4;}
  .product-card img{width:100%; height:100%; object-fit:cover; transition:transform .5s;}
  .product-card:hover img{transform:scale(1.045);}
  .product-card .wish{
    position:absolute; top:12px; right:12px; background:#fff; width:32px; height:32px;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:var(--wine); font-size:.85rem; box-shadow:0 2px 6px rgba(0,0,0,.12);
  }
  .product-card .tag-new{
    position:absolute; top:12px; left:0; background:var(--wine); color:#fff;
    font-size:.62rem; letter-spacing:.08em; padding:4px 10px;
  }
  .product-card .info{padding:14px 4px;}
  .product-card .info .name{font-size: 14px;line-height:1.35;margin-bottom:6px;color:var(--ink);}
  .product-card .info .price{font-size:.92rem; font-weight:500; color:var(--wine);}
  .product-card .info .strike{color:var(--ink-soft); text-decoration:line-through; font-size:.78rem; margin-right:6px;}

  /* quick-add: sizes + add to cart, slides up over the image */
  .product-card .quick-add{
    position:absolute; left:0; right:0; bottom:0;
    background:#fff; padding:12px 10px 14px;
    transform:translateY(100%); opacity:0;
    transition:transform .28s ease, opacity .28s ease;
  }
  .product-card:hover .quick-add,
  .product-card .quick-add.is-open{
    transform:translateY(0); opacity:1;
  }
  .product-card .size-row{
    display:flex; gap:6px; justify-content:center; margin-bottom:10px; flex-wrap:wrap;
  }
  .product-card .size-btn{
    min-width:34px; height:30px; padding:0 6px;
    border:1px solid var(--line); background:#fff; color:var(--ink);
    font-size:.72rem; letter-spacing:.02em; font-family:'Jost';
    transition:all .15s;
  }
  .product-card .size-btn:hover{border-color:var(--wine); color:var(--wine);}
  .product-card .size-btn.selected{background:var(--wine); border-color:var(--wine); color:#fff;}
  .product-card .add-cart-btn{
    display:block; width:100%; background:#fff; color:var(--wine);
    border:1px solid var(--wine); padding:9px 0; font-size:.76rem;
    letter-spacing:.1em; font-family:'Jost'; font-weight:500;
    transition:all .2s;
  }
  .product-card .add-cart-btn:hover{background:var(--wine); color:#fff;}
  .product-card .add-cart-btn.added{background:var(--wine); color:#fff; border-color:var(--wine);}
  .product-card .add-cart-btn:disabled{cursor:not-allowed;}

  @media (max-width: 991px){
    /* no hover on touch devices — keep the quick-add visible at all times */
    .product-card .quick-add{
      position:static; transform:none; opacity:1; border-top:1px solid var(--line); margin-top:0;
    }
  }

  .scroller-nav{
    display:flex; justify-content:flex-end; gap:10px; margin-bottom:18px;
  }
  .scroller-nav button{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
    background:#fff; color:var(--wine); transition:.2s;
  }
  .scroller-nav button:hover{background:var(--wine); color:#fff; border-color:var(--wine);}

  /* ===== Occasion collage ===== */
  .occ-card{
    position:relative; overflow:hidden; min-height:260px; display:flex; align-items:flex-end;
  }
  .occ-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s;}
  .occ-card:hover img{transform:scale(1.05);}
  .occ-card::after{content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,8,12,.65), rgba(20,8,12,.05) 60%);}
  .occ-card .occ-text{position:relative; z-index:2; color:#fff; padding:22px;}
  .occ-card .occ-text .font-display{font-size:1.5rem;}
  .occ-card .occ-text p{font-size:.78rem; color:#EFE2DA; margin:4px 0 0;}
  .occ-feature{
    background:var(--wine); color:#fff; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; padding:40px 20px; min-height:260px;
  }
  .occ-feature h3{font-size:1.9rem; color:#fff; margin-bottom:6px;}
  .occ-feature p{font-size:.85rem; color:#EFE2DA; margin-bottom:20px; max-width:260px;}

  /* ===== Editorial / Trend journal ===== */
  .journal-card img{width:100%; aspect-ratio:4/3; object-fit:cover;}
  .journal-card .cat{font-size:.7rem; letter-spacing:.1em; color:var(--gold); margin:16px 0 6px;}
  .journal-card h3{font-size:1.25rem; margin-bottom:8px; color:var(--ink);}
  .journal-card p{font-size:.85rem; color:var(--ink-soft);}

  /* ===== Reviews ===== */
  .review-card{
    background:#fff; padding:28px; border:1px solid var(--line); height:100%;
  }
  .review-card .stars{color:var(--gold); font-size:.82rem; margin-bottom:12px;}
  .review-card p{font-size:.92rem; font-style:italic; color:var(--ink); margin-bottom:16px;}
  .review-card .who{font-size:.78rem; letter-spacing:.06em; color:var(--ink-soft);}

  /* ===== Newsletter ===== */
  .newsletter{
    background:var(--blush); padding:60px 0; text-align:center;
  }
  .newsletter h2{color:var(--wine); font-size:2rem; margin-bottom:10px;}
  .newsletter p{color:var(--ink-soft); margin-bottom:26px; font-size:.9rem;}
  .newsletter form{display:flex; max-width:440px; margin:0 auto;}
  .newsletter input{
    flex:1; border:1px solid var(--wine); border-right:0; padding:13px 16px;
    font-size:.85rem; background:#fff; outline:none;
  }
  .newsletter button{
    background:var(--wine); color:#fff; border:1px solid var(--wine);
    padding:0 24px; font-size:.78rem; letter-spacing:.1em;
  }

  /* ===== Footer ===== */
  footer{background:var(--wine-deep); color:#D9C4BE; padding:64px 0 0; font-size:.86rem;}
  footer h5{
    font-family:'Jost'; color:#fff; font-size:.82rem; letter-spacing:.1em;
    margin-bottom:20px; font-weight:500;
  }
  footer ul{list-style:none; padding:0; margin:0;}
  footer ul li{margin-bottom:11px;}
  footer a{color:#D9C4BE; transition:color .2s;}
  footer a:hover{color:var(--gold-light);}
  .footer-brand{font-family:'Cormorant Garamond'; font-size:1.7rem; color:#fff; letter-spacing:.06em;}
  .footer-social a{
    width:34px; height:34px; border:1px solid rgba(255,255,255,.25); border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center; margin-right:8px;
  }
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.12); margin-top:44px;
    padding:20px 0; font-size:.76rem; color:#B79D97;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }
  .footer-perks{
    border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12);
    padding:22px 0; margin-top:50px;
  }
  .footer-perks .perk{display:flex; align-items:center; gap:12px; font-size:.8rem; color:#EFE2DA;}
  .footer-perks .perk i{font-size:1.3rem; color:var(--gold-light);}

  @media (max-width: 991px){
    .mobile-toggle{display:block;}
    .cat-nav{display:none;}
    .header-search{display:none;}
    .brand-mark{font-size:1.5rem;}
    .section{padding:48px 0;}
  }









  /* ============================================================
     NEW — shop-page-only styles (breadcrumb, sidebar filters,
     size-pill bar, sort/view toolbar, discount badge, empty state)
     ============================================================ */

  .breadcrumb-bar{
    background:#fff; border-bottom:1px solid var(--line); padding:14px 0;
  }
  .breadcrumb-bar .crumbs{font-size:.78rem; letter-spacing:.03em; color:var(--ink-soft);}
  .breadcrumb-bar .crumbs a{color:var(--ink-soft); transition:color .2s;}
  .breadcrumb-bar .crumbs a:hover{color:var(--wine);}
  .breadcrumb-bar .crumbs .sep{margin:0 8px; opacity:.5;}
  .breadcrumb-bar .crumbs .current{color:var(--wine);}
  .breadcrumb-bar h1{font-size:1.6rem; color:var(--wine); margin:4px 0 0;}

  .shop-wrap{padding:36px 0 70px;}

  /* --- filter sidebar --- */
  .filter-sidebar{background:#fff; border:1px solid var(--line);}
  .filter-sidebar-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid var(--line);
  }
  .filter-sidebar-head h3{font-size:1.15rem; color:var(--wine); margin:0;}
  .filter-sidebar-head button{
    background:none; border:0; color:var(--ink-soft); font-size:.76rem;
    letter-spacing:.04em; text-decoration:underline; cursor:pointer;
  }
  .filter-sidebar-head button:hover{color:var(--wine);}

  .filter-group{border-bottom:1px solid var(--line);}
  .filter-group summary{
    list-style:none; cursor:pointer; padding:15px 20px;
    display:flex; align-items:center; justify-content:space-between;
    font-size:.86rem; letter-spacing:.03em; color:var(--ink); font-weight:500;
  }
  .filter-group summary::-webkit-details-marker{display:none;}
  .filter-group summary .chev{color:var(--gold); transition:transform .2s; font-size:.75rem;}
  .filter-group[open] summary .chev{transform:rotate(180deg);}
  .filter-group .filter-body{padding:2px 20px 16px;}

  .filter-check{
    display:flex; align-items:center; gap:10px; padding:6px 0; cursor:pointer;
    font-size:.83rem; color:var(--ink-soft);
  }
  .filter-check input{
    width:15px; height:15px; accent-color:var(--wine); cursor:pointer; flex:0 0 auto;
  }
  .filter-check .count{margin-left:auto; font-size:.72rem; color:var(--ink-soft); opacity:.7;}
  .filter-check:hover{color:var(--ink);}

  .price-inputs{display:flex; align-items:center; gap:8px; margin-top:8px;}
  .price-inputs input{
    width:100%; border:1px solid var(--line); padding:7px 10px; font-size:.8rem;
    font-family:'Jost'; outline:none; background:#fff;
  }
  .price-inputs input:focus{border-color:var(--gold);}
  .price-apply{
    margin-top:10px; width:100%; background:var(--wine); color:#fff; border:1px solid var(--wine);
    padding:8px 0; font-size:.74rem; letter-spacing:.1em; font-family:'Jost';
  }
  .price-apply:hover{background:transparent; color:var(--wine);}

  .active-filters{
    display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;
  }
  .active-filters .chip{
    display:flex; align-items:center; gap:8px; background:var(--blush); color:var(--wine);
    padding:6px 12px; font-size:.76rem; letter-spacing:.02em; border-radius:20px;
  }
  .active-filters .chip button{
    background:none; border:0; color:var(--wine); font-size:.7rem; cursor:pointer; line-height:1;
  }

  /* --- top toolbar: size pills, sort, count, view toggle --- */
  .shop-toolbar{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
    margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line);
  }
  .size-pillbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .size-pillbar .label{font-size:.78rem; letter-spacing:.04em; color:var(--ink-soft); margin-right:2px;}
  .size-pill{
    min-width:38px; height:34px; padding:0 12px; border:1px solid var(--line); background:#fff;
    color:var(--ink); font-size:.76rem; letter-spacing:.03em; font-family:'Jost'; cursor:pointer;
    transition:all .15s;
  }
  .size-pill:hover{border-color:var(--wine); color:var(--wine);}
  .size-pill.active{background:var(--wine); border-color:var(--wine); color:#fff;}

  .toolbar-right{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .result-count{font-size:.8rem; color:var(--ink-soft);}
  .sort-select{
    border:1px solid var(--line); background:#fff; padding:9px 32px 9px 14px;
    font-size:.8rem; font-family:'Jost'; color:var(--ink); outline:none;
    -webkit-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%235C1229'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center;
  }
  .sort-select:focus{border-color:var(--gold);}
  .view-toggle{display:flex; gap:6px;}
  .view-toggle button{
    width:34px; height:34px; border:1px solid var(--line); background:#fff; color:var(--ink-soft);
    display:flex; align-items:center; justify-content:center; font-size:.85rem;
  }
  .view-toggle button.active{background:var(--wine); border-color:var(--wine); color:#fff;}

  .filter-toggle-mobile{
    display:none; align-items:center; gap:8px; background:#fff; border:1px solid var(--wine);
    color:var(--wine); padding:9px 16px; font-size:.78rem; letter-spacing:.06em;
  }

  .discount-badge{
    position:absolute; top:12px; left:0; background:var(--wine); color:#fff;
    font-size:.68rem; letter-spacing:.02em; padding:4px 10px; z-index:2;
  }

  .no-results{
    text-align:center; padding:70px 20px; color:var(--ink-soft); display:none;
  }
  .no-results i{font-size:2rem; color:var(--gold); margin-bottom:14px; display:block;}
  .no-results h4{color:var(--wine); font-family:'Cormorant Garamond'; font-size:1.4rem; margin-bottom:8px;}

  .load-more-wrap{text-align:center; margin-top:36px;}
  .btn-outline-wine{
    border:1px solid var(--wine); color:var(--wine); background:transparent;
    padding:12px 36px; font-size:.8rem; letter-spacing:.12em; transition:all .2s;
  }
  .btn-outline-wine:hover{background:var(--wine); color:#fff;}

  @media (max-width: 991px){
    .filter-sidebar{
      position:fixed; top:0; left:-100%; width:82vw; height:100vh; z-index:2000;
      overflow-y:auto; transition:left .3s ease;
    }
    .filter-sidebar.open{left:0; box-shadow:0 0 30px rgba(0,0,0,.25);}
    .filter-toggle-mobile{display:inline-flex;}
    .filter-backdrop{
      display:none; position:fixed; inset:0; background:rgba(20,8,12,.45); z-index:1999;
    }
    .filter-backdrop.show{display:block;}
    .shop-toolbar{justify-content:flex-start;}
    .toolbar-right{width:100%; justify-content:space-between;}
  }



  /* about */



  /* ============================================================
   ABOUT PAGE
   ============================================================ */

.about-hero{
  min-height:520px;
  background:
    linear-gradient(90deg, rgba(30,10,16,.72), rgba(30,10,16,.20)),
    url('../img/product-3.webp') center/cover no-repeat;
  display:flex;
  align-items:center;
  color:#fff;
}

.about-hero-content{
  max-width:620px;
  padding:80px 0;
}

.about-eyebrow{
  display:block;
  font-family:'Jost', sans-serif;
  font-size:.72rem;
  letter-spacing:.28em;
  color:var(--gold-light);
  margin-bottom:16px;
}

.about-hero h1{
  color:#fff;
  font-size:clamp(3rem,6vw,5.2rem);
  line-height:.98;
  margin-bottom:22px;
}

.about-hero p{
  max-width:500px;
  color:#F1DED2;
  font-size:1rem;
  line-height:1.8;
  font-weight:300;
}


/* ===== About Images ===== */

.about-image{
  overflow:hidden;
  background:var(--blush);
}

.about-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .6s ease;
}

.about-image:hover img{
  transform:scale(1.035);
}

.about-image-main{
  aspect-ratio:4/5;
}

.about-image-tall{
  aspect-ratio:3/4;
}


/* ===== About Copy ===== */

.about-copy{
  padding:15px 20px;
}

.about-copy-wide{
  padding-left:0;
}

.about-small-title{
  display:block;
  color:var(--gold);
  font-size:.7rem;
  letter-spacing:.16em;
  margin-bottom:14px;
  font-weight:500;
}

.about-copy h2,
.about-circle-copy h2{
  color:var(--wine);
  font-size:clamp(2.1rem,4vw,3.2rem);
  line-height:1.05;
  margin-bottom:22px;
}

.about-copy p,
.about-circle-copy p{
  color:var(--ink-soft);
  font-size:.92rem;
  line-height:1.85;
  margin-bottom:16px;
}


/* ===== Brand Statement ===== */

.about-statement{
  background:var(--wine);
  color:#fff;
  padding:90px 20px;
  text-align:center;
}

.about-statement-inner{
  max-width:850px;
  margin:auto;
}

.about-statement .about-small-title{
  color:var(--gold-light);
}

.about-statement h2{
  color:#fff;
  font-size:clamp(2.2rem,4.5vw,4rem);
  line-height:1.1;
  margin-bottom:20px;
}

.about-statement p{
  color:#EFE2DA;
  font-size:.92rem;
  max-width:560px;
  margin:auto;
  line-height:1.8;
}


/* ===== Philosophy ===== */

.about-value{
  background:#fff;
  border:1px solid var(--line);
  padding:38px 30px;
  text-align:center;
  height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}

.about-value:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 30px rgba(60,20,30,.08);
}

.about-value-icon{
  width:58px;
  height:58px;
  margin:0 auto 20px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  font-size:1.1rem;
}

.about-value h3{
  color:var(--wine);
  font-size:1.65rem;
  margin-bottom:12px;
}

.about-value p{
  color:var(--ink-soft);
  font-size:.86rem;
  line-height:1.75;
  margin:0;
}


/* ===== Story Section ===== */

.about-story-section{
  background:#fff;
}

.about-points{
  margin-top:25px;
}

.about-point{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:13px;
  color:var(--ink);
  font-size:.87rem;
}

.about-point i{
  width:25px;
  height:25px;
  border-radius:50%;
  background:var(--blush);
  color:var(--wine);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.65rem;
}


/* ===== Collection Banner ===== */

.about-collection-banner{
  min-height:560px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.about-collection-banner > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.about-collection-banner::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(30,10,16,.48);
}

.about-collection-overlay{
  position:relative;
  z-index:2;
  color:#fff;
  padding:40px 20px;
}

.about-collection-overlay h2{
  color:#fff;
  font-size:clamp(2.5rem,5vw,4.5rem);
  line-height:1.02;
  margin-bottom:28px;
}


/* ===== Amoli Circle ===== */

.about-circle-section{
  background:var(--cream);
}

.about-circle-copy{
  max-width:560px;
}

.about-circle-box{
  background:#fff;
  border:1px solid var(--line);
  padding:15px 30px;
}

.circle-item{
  display:flex;
  align-items:center;
  gap:20px;
  padding:24px 5px;
  border-bottom:1px solid var(--line);
}

.circle-item:last-child{
  border-bottom:0;
}

.circle-item > i{
  width:48px;
  height:48px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  flex:0 0 auto;
}

.circle-item h4{
  font-family:'Jost',sans-serif;
  color:var(--wine);
  font-size:.92rem;
  font-weight:500;
  margin:0 0 5px;
}

.circle-item p{
  margin:0;
  color:var(--ink-soft);
  font-size:.78rem;
}


/* ===== Final CTA ===== */

.about-final{
  background:var(--wine-deep);
  color:#fff;
  text-align:center;
  padding:90px 20px;
}

.about-final-inner{
  max-width:760px;
  margin:auto;
}

.about-final h2{
  color:#fff;
  font-size:clamp(2.5rem,5vw,4.4rem);
  line-height:1;
  margin-bottom:20px;
}

.about-final p{
  color:#EFE2DA;
  font-size:.92rem;
  margin-bottom:28px;
}


/* ===== Mobile ===== */

@media (max-width:767px){

  .about-hero{
    min-height:480px;
    background-position:center;
  }

  .about-hero-content{
    padding:70px 15px;
  }

  .about-hero h1{
    font-size:3rem;
  }

  .about-hero p{
    font-size:.88rem;
    line-height:1.7;
  }

  .about-copy{
    padding:10px 0;
  }

  .about-copy h2,
  .about-circle-copy h2{
    font-size:2.3rem;
  }

  .about-statement{
    padding:65px 20px;
  }

  .about-statement h2{
    font-size:2.35rem;
  }

  .about-value{
    padding:30px 22px;
  }

  .about-collection-banner{
    min-height:480px;
  }

  .about-collection-overlay h2{
    font-size:2.7rem;
  }

  .about-circle-box{
    padding:10px 20px;
  }

  .circle-item{
    gap:14px;
  }

  .about-final{
    padding:70px 20px;
  }

  .about-final h2{
    font-size:2.8rem;
  }

}




```css
.contact-hero{
  min-height:480px;
  position:relative;
  background:url('./assest/img/4.webp') center/cover no-repeat;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
}

/* Left-side dark overlay */
.contact-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(30,10,16,.78) 0%,
    rgba(30,10,16,.60) 28%,
    rgba(30,10,16,.28) 55%,
    rgba(30,10,16,0) 78%
  );
  z-index:1;
}

.contact-hero .container-xl{
  position:relative;
  z-index:2;
}

.contact-hero-content{
  max-width:620px;
  padding:80px 0;
}

.contact-hero h1{
  color:#fff;
  font-size:clamp(3rem,6vw,5rem);
  line-height:.98;
  margin-bottom:20px;
}

.contact-hero p{
  color:#EFE2DA;
  max-width:500px;
  font-size:.95rem;
  line-height:1.8;
  font-weight:300;
}

@media (max-width:767px){

  .contact-hero{
    min-height:440px;
    background-position:center;
  }

  .contact-hero::before{
    background:linear-gradient(
      90deg,
      rgba(30,10,16,.78) 0%,
      rgba(30,10,16,.48) 65%,
      rgba(30,10,16,.20) 100%
    );
  }

  .contact-hero-content{
    padding:65px 15px;
  }

  .contact-hero h1{
    font-size:3rem;
  }

}

/* ============================================================
   CONTACT PAGE — COMPLETE CSS
   Theme: Wine / Cream / Gold
   ============================================================ */


/* ============================================================
   CONTACT HERO / BANNER
   ============================================================ */

.contact-hero{
  min-height:480px;
  position:relative;
  background:url('/assest/img/4.webp') center/cover no-repeat;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
}

/* LEFT SIDE OVERLAY */
.contact-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(30,10,16,.82) 0%,
    rgba(30,10,16,.68) 22%,
    rgba(30,10,16,.48) 42%,
    rgba(30,10,16,.20) 62%,
    rgba(30,10,16,0) 82%
  );
  z-index:1;
}

.contact-hero .container-xl{
  position:relative;
  z-index:2;
}

.contact-hero-content{
  max-width:620px;
  padding:80px 0;
}

.contact-hero .about-eyebrow{
  display:block;
  font-family:'Jost',sans-serif;
  font-size:.72rem;
  letter-spacing:.28em;
  color:var(--gold-light);
  margin-bottom:16px;
}

.contact-hero h1{
  color:#fff;
  font-size:clamp(3rem,6vw,5rem);
  line-height:.98;
  margin-bottom:20px;
}

.contact-hero p{
  color:#EFE2DA;
  max-width:500px;
  font-size:.95rem;
  line-height:1.8;
  font-weight:300;
  margin:0;
}


/* ============================================================
   CONTACT MAIN SECTION
   ============================================================ */

.contact-section{
  background:var(--cream);
}


/* ============================================================
   CONTACT INFORMATION
   ============================================================ */

.contact-info{
  padding:20px 25px 20px 0;
}

.contact-info .about-small-title{
  display:block;
  color:var(--gold);
  font-size:.7rem;
  letter-spacing:.16em;
  margin-bottom:14px;
  font-weight:500;
}

.contact-info h2{
  color:var(--wine);
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(2.3rem,4vw,3.5rem);
  line-height:1.05;
  margin-bottom:20px;
}

.contact-intro{
  color:var(--ink-soft);
  font-size:.9rem;
  line-height:1.8;
  max-width:480px;
  margin-bottom:35px;
}


/* ============================================================
   CONTACT DETAILS
   ============================================================ */

.contact-detail{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}

.contact-icon{
  width:44px;
  height:44px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  flex:0 0 auto;
  font-size:.9rem;
}

.contact-detail > div:last-child{
  padding-top:2px;
}

.contact-detail span{
  display:block;
  color:var(--gold);
  font-size:.65rem;
  letter-spacing:.12em;
  margin-bottom:5px;
}

.contact-detail a{
  color:var(--wine);
  font-size:.9rem;
  transition:color .2s;
}

.contact-detail a:hover{
  color:var(--gold);
}

.contact-detail p{
  margin:0;
  color:var(--ink-soft);
  font-size:.84rem;
  line-height:1.7;
}


/* ============================================================
   CONTACT SOCIAL
   ============================================================ */

.contact-social{
  padding-top:28px;
}

.contact-social > span{
  display:block;
  color:var(--gold);
  font-size:.65rem;
  letter-spacing:.12em;
  margin-bottom:12px;
}

.contact-social-links{
  display:flex;
  gap:9px;
}

.contact-social-links a{
  width:36px;
  height:36px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--wine);
  transition:all .2s ease;
}

.contact-social-links a:hover{
  background:var(--wine);
  border-color:var(--wine);
  color:#fff;
  transform:translateY(-2px);
}


/* ============================================================
   CONTACT FORM BOX
   ============================================================ */

.contact-form-box{
  background:#fff;
  border:1px solid var(--line);
  padding:40px;
}

.contact-form-head{
  margin-bottom:28px;
}

.contact-form-head .about-small-title{
  display:block;
  color:var(--gold);
  font-size:.7rem;
  letter-spacing:.16em;
  margin-bottom:10px;
  font-weight:500;
}

.contact-form-head h3{
  color:var(--wine);
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:2.2rem;
  line-height:1.1;
  margin:0;
}


/* ============================================================
   FORM LABELS
   ============================================================ */

.contact-form-box label{
  display:block;
  color:var(--ink);
  font-size:.76rem;
  letter-spacing:.04em;
  margin-bottom:7px;
  font-weight:400;
}


/* ============================================================
   FORM INPUTS
   ============================================================ */

.contact-form-box input,
.contact-form-box select,
.contact-form-box textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-size:.82rem;
  padding:12px 14px;
  outline:none;
  border-radius:0;
  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.contact-form-box input,
.contact-form-box select{
  height:46px;
}

.contact-form-box textarea{
  resize:vertical;
  min-height:145px;
  line-height:1.6;
}

.contact-form-box input::placeholder,
.contact-form-box textarea::placeholder{
  color:#9a8e89;
}

.contact-form-box select{
  cursor:pointer;
}


/* ============================================================
   FORM FOCUS
   ============================================================ */

.contact-form-box input:focus,
.contact-form-box select:focus,
.contact-form-box textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 2px rgba(180,134,63,.08);
}


/* ============================================================
   SUBMIT BUTTON
   ============================================================ */

.contact-submit{
  display:inline-block;
  border:1px solid var(--wine);
  background:var(--wine);
  color:#fff;
  padding:13px 34px;
  font-family:'Jost',sans-serif;
  font-size:.78rem;
  letter-spacing:.12em;
  cursor:pointer;
  transition:all .25s ease;
}

.contact-submit:hover{
  background:transparent;
  color:var(--wine);
  border-color:var(--wine);
}


/* ============================================================
   QUICK HELP SECTION
   ============================================================ */

.contact-help{
  background:#fff;
  padding:70px 0;
}


/* ============================================================
   HELP CARDS
   ============================================================ */

.help-card{
  display:block;
  height:100%;
  background:var(--cream);
  border:1px solid var(--line);
  padding:34px 28px;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.help-card:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 30px rgba(60,20,30,.08);
  border-color:rgba(180,134,63,.35);
}

.help-icon{
  width:50px;
  height:50px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  margin-bottom:20px;
  font-size:.95rem;
}

.help-card h3{
  color:var(--wine);
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:1.55rem;
  line-height:1.15;
  margin-bottom:10px;
}

.help-card p{
  color:var(--ink-soft);
  font-size:.82rem;
  line-height:1.7;
  margin-bottom:20px;
}

.help-card > span{
  color:var(--wine);
  font-size:.7rem;
  letter-spacing:.1em;
  transition:color .2s;
}

.help-card > span i{
  margin-left:6px;
  transition:transform .2s ease;
}

.help-card:hover > span{
  color:var(--gold);
}

.help-card:hover > span i{
  transform:translateX(4px);
}


/* ============================================================
   FINAL CONTACT CTA
   ============================================================ */

.contact-final{
  background:var(--wine-deep);
  color:#fff;
}

.contact-final .about-final-inner{
  max-width:760px;
  margin:auto;
  text-align:center;
}

.contact-final .about-eyebrow{
  display:block;
  color:var(--gold-light);
  font-size:.72rem;
  letter-spacing:.28em;
  margin-bottom:16px;
}

.contact-final h2{
  color:#fff;
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(2.5rem,5vw,4.4rem);
  line-height:1;
  margin-bottom:20px;
}

.contact-final p{
  color:#EFE2DA;
  font-size:.92rem;
  line-height:1.7;
  margin-bottom:28px;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width:991px){

  .contact-info{
    padding:0;
  }

  .contact-form-box{
    padding:32px;
  }

  .contact-hero{
    min-height:460px;
  }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width:767px){

  /* ===== Hero ===== */

  .contact-hero{
    min-height:440px;
    background-position:center center;
  }

  .contact-hero::before{
    background:linear-gradient(
      90deg,
      rgba(30,10,16,.82) 0%,
      rgba(30,10,16,.65) 35%,
      rgba(30,10,16,.38) 68%,
      rgba(30,10,16,.12) 100%
    );
  }

  .contact-hero-content{
    padding:65px 15px;
  }

  .contact-hero h1{
    font-size:3rem;
    line-height:.98;
  }

  .contact-hero p{
    font-size:.87rem;
    line-height:1.7;
    max-width:430px;
  }


  /* ===== Contact Information ===== */

  .contact-info{
    padding:0;
  }

  .contact-info h2{
    font-size:2.45rem;
  }

  .contact-intro{
    font-size:.86rem;
  }


  /* ===== Form ===== */

  .contact-form-box{
    padding:25px 20px;
  }

  .contact-form-head{
    margin-bottom:23px;
  }

  .contact-form-head h3{
    font-size:1.9rem;
  }

  .contact-form-box input,
  .contact-form-box select{
    height:44px;
  }

  .contact-form-box textarea{
    min-height:130px;
  }

  .contact-submit{
    width:100%;
    text-align:center;
  }


  /* ===== Help ===== */

  .contact-help{
    padding:50px 0;
  }

  .help-card{
    padding:28px 22px;
  }


  /* ===== Final CTA ===== */

  .contact-final{
    padding:70px 20px;
  }

  .contact-final h2{
    font-size:2.8rem;
  }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width:480px){

  .contact-hero{
    min-height:410px;
  }

  .contact-hero h1{
    font-size:2.7rem;
  }

  .contact-hero p{
    font-size:.82rem;
  }

  .contact-detail{
    gap:12px;
  }

  .contact-icon{
    width:40px;
    height:40px;
    font-size:.8rem;
  }

  .contact-detail a{
    font-size:.84rem;
  }

  .contact-form-box{
    padding:22px 16px;
  }

  .contact-final h2{
    font-size:2.55rem;
  }

}








/* ============================================================
   BLOG PAGE
   ============================================================ */


/* ============================================================
   BLOG HERO
   ============================================================ */

.blog-hero{
 
}

.blog-hero-content{
  max-width:650px;
  padding:80px 0;
  position:relative;
  z-index:2;
}

.blog-hero h1{
  color:#fff;
  font-size:clamp(3rem,6vw,5rem);
  line-height:.98;
  margin-bottom:22px;
}

.blog-hero p{
  color:#EFE2DA;
  max-width:500px;
  font-size:.95rem;
  line-height:1.8;
  font-weight:300;
  margin:0;
}



/* ============================================================
   FEATURED BLOG
   ============================================================ */

.blog-featured{
  background:var(--cream);
}

.featured-blog{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
}

.featured-blog-image{
  min-height:500px;
  overflow:hidden;
}

.featured-blog-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}

.featured-blog:hover .featured-blog-image img{
  transform:scale(1.035);
}

.featured-blog-content{
  padding:55px 50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.blog-label{
  color:var(--gold);
  font-size:.68rem;
  letter-spacing:.14em;
  margin-bottom:15px;
  font-weight:500;
}

.featured-blog-content h2{
  color:var(--wine);
  font-size:clamp(2.3rem,4vw,3.6rem);
  line-height:1.02;
  margin-bottom:20px;
}

.featured-blog-content > p{
  color:var(--ink-soft);
  font-size:.9rem;
  line-height:1.8;
  margin-bottom:22px;
  max-width:480px;
}


/* ============================================================
   BLOG META
   ============================================================ */

.blog-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  color:#8b7d78;
  font-size:.64rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  margin-bottom:24px;
}

.meta-dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--gold);
}


/* ============================================================
   LATEST BLOG
   ============================================================ */

.blog-latest{
  background:#fff;
}

.blog-heading-row{
  text-align:left;
  position:relative;
}

.blog-heading-row .rule{
  margin:14px 0 0;
}

.blog-heading-row h2{
  margin-bottom:0;
}


/* ============================================================
   BLOG CARD
   ============================================================ */

.blog-card{
  height:100%;
  background:var(--cream);
  border:1px solid var(--line);
  overflow:hidden;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.blog-card:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 30px rgba(60,20,30,.08);
}

.blog-card-image{
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
}

.blog-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}

.blog-card:hover .blog-card-image img{
  transform:scale(1.05);
}

.blog-card-category{
  position:absolute;
  left:0;
  bottom:0;
  background:var(--wine);
  color:#fff;
  padding:7px 13px;
  font-size:.62rem;
  letter-spacing:.1em;
}

.blog-card-content{
  padding:23px 24px 27px;
}

.blog-card-content .blog-meta{
  margin-bottom:12px;
}

.blog-card-content h3{
  color:var(--wine);
  font-size:1.55rem;
  line-height:1.08;
  margin-bottom:11px;
}

.blog-card-content p{
  color:var(--ink-soft);
  font-size:.82rem;
  line-height:1.7;
  margin-bottom:20px;
}

.blog-read-more{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--wine);
  font-size:.68rem;
  letter-spacing:.1em;
  transition:color .2s;
}

.blog-read-more i{
  transition:transform .2s ease;
}

.blog-read-more:hover{
  color:var(--gold);
}

.blog-read-more:hover i{
  transform:translateX(4px);
}


/* ============================================================
   LOAD MORE
   ============================================================ */

.blog-load-more{
  text-align:center;
  margin-top:45px;
}

.blog-load-more .btn-outline-wine{
  cursor:pointer;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width:991px){

  .blog-hero{
    min-height:460px;
  }

  .featured-blog{
    grid-template-columns:1fr;
  }

  .featured-blog-image{
    min-height:430px;
  }

  .featured-blog-content{
    padding:40px;
  }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width:767px){

  .blog-hero{
    min-height:440px;
    background-position:center;
  }

  .blog-hero{
    background:
      linear-gradient(
        90deg,
        rgba(30,10,16,.84) 0%,
        rgba(30,10,16,.66) 40%,
        rgba(30,10,16,.32) 75%,
        rgba(30,10,16,.12) 100%
      ),
      url('./assest/img/5.webp') center/cover no-repeat;
  }

  .blog-hero-content{
    padding:65px 15px;
  }

  .blog-hero h1{
    font-size:3rem;
  }

  .blog-hero p{
    font-size:.86rem;
    line-height:1.7;
  }


  /* Category scroll */

  .blog-categories{
    overflow:hidden;
  }

  .blog-category-list{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .blog-category-list::-webkit-scrollbar{
    display:none;
  }

  .blog-category-list a{
    flex:0 0 auto;
    padding:16px 15px;
    font-size:.65rem;
  }


  /* Featured */

  .featured-blog-image{
    min-height:350px;
  }

  .featured-blog-content{
    padding:30px 23px;
  }

  .featured-blog-content h2{
    font-size:2.45rem;
  }

  .featured-blog-content > p{
    font-size:.84rem;
  }


  /* Blog cards */

  .blog-card-content{
    padding:21px 20px 24px;
  }

  .blog-card-content h3{
    font-size:1.45rem;
  }

  .blog-card-content p{
    font-size:.8rem;
  }

  .blog-load-more{
    margin-top:35px;
  }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width:480px){

  .blog-hero{
    min-height:410px;
  }

  .blog-hero h1{
    font-size:2.7rem;
  }

  .featured-blog-image{
    min-height:300px;
  }

  .featured-blog-content{
    padding:26px 18px;
  }

  .featured-blog-content h2{
    font-size:2.2rem;
  }

  .blog-card-content h3{
    font-size:1.35rem;
  }

}










/* =========================================================
   ONLINE EXCLUSIVE SECTION
========================================================= */

.exclusive-section{
  background:#fff;
  padding:70px 0;
  overflow:hidden;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.exclusive-layout{
  display:grid;
  grid-template-columns:34% 66%;
  gap:22px;
  align-items:stretch;
}


/* =========================================================
   VIDEO
========================================================= */

.exclusive-video{
  position:relative;
  min-height:650px;
  overflow:hidden;
  background:#eee;
}

.exclusive-video-element{
  display:block;
  width:100%;
  height:100%;
  min-height:650px;
  object-fit:cover;
  object-position:center;
}


/* =========================================================
   PRODUCTS AREA
========================================================= */

.exclusive-products{
  min-width:0;
  padding:0 0 0 0;
}


/* =========================================================
   HEADING
========================================================= */

.exclusive-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  min-height:125px;
  position:relative;
}

.exclusive-heading-wrap{
  max-width:480px;
}

.exclusive-heading-wrap h2{
  margin:0;
  color:#111;
  font-family:'Jost',sans-serif;
  font-size:1.45rem;
  line-height:1.1;
  font-weight:600;
  letter-spacing:-.02em;
}

.exclusive-heading-wrap p{
  margin: 18px 0 0;
  max-width:330px;
  color:#8b817c;
  font-family:'Jost',sans-serif;
  font-size: 14px;
  line-height:1.55;
}


/* =========================================================
   SCROLLER NAV
========================================================= */

.exclusive-nav{
  display:flex;
  gap:7px;
  margin-top:0;
}

.exclusive-nav button{
  width:36px;
  height:36px;
  border:1px solid rgba(36,28,27,.16);
  background:#fff;
  color:var(--wine);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
}

.exclusive-nav button:hover{
  background:var(--wine);
  color:#fff;
  border-color:var(--wine);
}

.exclusive-nav button i{
  font-size:.65rem;
}


/* =========================================================
   PRODUCT SCROLLER
========================================================= */

.exclusive-product-scroller{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding:0 0 15px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.exclusive-product-scroller::-webkit-scrollbar{
  display:none;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.exclusive-product-scroller .product-card{
  flex:0 0 calc((100% - 20px) / 3);
  min-width:0;
  scroll-snap-align:start;
}


/* =========================================================
   IMAGE
========================================================= */

.exclusive-product-scroller .img-wrap{
  position:relative;
  overflow:hidden;
  background:#f2eee9;
  aspect-ratio:3 / 4;
}

.exclusive-product-scroller .img-wrap > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

.exclusive-product-scroller .product-card:hover .img-wrap > img{
  transform:scale(1.025);
}


/* =========================================================
   NEW TAG
========================================================= */

.exclusive-product-scroller .tag-new{
  position:absolute;
  top:14px;
  left:12px;
  z-index:3;
  background:#b83232;
  color:#fff;
  padding:5px 8px;
  font-family:'Jost',sans-serif;
  font-size:.5rem;
  line-height:1;
  letter-spacing:.05em;
}


/* =========================================================
   WISHLIST
========================================================= */

.exclusive-product-scroller .wish{
  position:absolute;
  top:13px;
  right:13px;
  z-index:3;
  width:31px;
  height:31px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d12727;
  cursor:pointer;
}

.exclusive-product-scroller .wish i{
  font-size:1.25rem;
}


/* =========================================================
   QUICK ADD
========================================================= */

.exclusive-product-scroller .quick-add{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:4;
  opacity:0;
  transform:translateY(8px);
  transition:all .25s ease;
}

.exclusive-product-scroller .product-card:hover .quick-add{
  opacity:1;
  transform:translateY(0);
}


/* =========================================================
   SIZES
========================================================= */

.exclusive-product-scroller .size-row{
  display:flex;
  justify-content:center;
  gap:4px;
  margin-bottom:8px;
}

.exclusive-product-scroller .size-btn{
  width:25px;
  height:24px;
  padding:0;
  border:1px solid rgba(36,28,27,.16);
  background:#fff;
  color:#444;
  font-family:'Jost',sans-serif;
  font-size:.5rem;
  cursor:pointer;
}

.exclusive-product-scroller .size-btn:hover,
.exclusive-product-scroller .size-btn.active{
  background:var(--wine);
  color:#fff;
  border-color:var(--wine);
}


/* =========================================================
   ADD CART
========================================================= */

.exclusive-product-scroller .add-cart-btn{
  display:block;
  width:100%;
  height:34px;
  border:1px solid #d54a4a;
  background:#fff;
  color:#b83232;
  font-family:'Jost',sans-serif;
  font-size:.58rem;
  letter-spacing:.16em;
  cursor:pointer;
  transition:all .2s ease;
}

.exclusive-product-scroller .add-cart-btn:hover{
  background:#b83232;
  color:#fff;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.exclusive-product-scroller .info{
  padding:9px 3px 0;
}

.exclusive-product-scroller .name{
  color:#625b57;
  font-family:'Jost',sans-serif;
  font-size:.65rem;
  line-height:1.4;
  min-height:32px;
}


/* =========================================================
   PRICE
========================================================= */

.exclusive-product-scroller .product-price{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
  font-family:'Jost',sans-serif;
  /* font-size: 14px; */
}

.exclusive-product-scroller .product-price del{
  color:#aaa;
}

.exclusive-product-scroller .product-price strong{
  color:#222;
  font-weight:600;
}

.exclusive-product-scroller .product-price span{
  color:#b83232;
  font-size:.55rem;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

  .exclusive-layout{
    grid-template-columns:32% 68%;
    gap:18px;
  }

  .exclusive-video,
  .exclusive-video-element{
    min-height:560px;
  }

  .exclusive-product-scroller .product-card{
    flex:0 0 calc((100% - 10px) / 2);
  }

  .exclusive-heading-wrap p{
    margin-top:35px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  .exclusive-section{
    padding:45px 0;
  }

  .exclusive-layout{
    display:block;
  }


  /* VIDEO FIRST */

  .exclusive-video{
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:4 / 5;
    margin-bottom:32px;
  }

  .exclusive-video-element{
    width:100%;
    height:100%;
    min-height:0;
    object-fit:cover;
  }


  /* PRODUCTS */

  .exclusive-head{
    min-height:auto;
    margin-bottom:22px;
    align-items:flex-end;
  }

  .exclusive-heading-wrap h2{
    font-size:1.15rem;
  }

  .exclusive-heading-wrap p{
    margin-top:10px;
    max-width:270px;
    font-size:.68rem;
    line-height:1.5;
  }


  /* MOBILE ARROWS */

  .exclusive-nav{
    flex-shrink:0;
    margin-left:15px;
  }

  .exclusive-nav button{
    width:31px;
    height:31px;
  }


  /* MOBILE HORIZONTAL PRODUCT */

  .exclusive-product-scroller{
    gap:10px;
    padding-right:20px;
    margin-right:-16px;
  }

  .exclusive-product-scroller .product-card{
    flex:0 0 78%;
    scroll-snap-align:start;
  }


  /* ALWAYS SHOW QUICK ADD AREA A LITTLE ON MOBILE */

  .exclusive-product-scroller .quick-add{
    opacity:1;
    transform:none;
    left:7px;
    right:7px;
    bottom:7px;
  }

  .exclusive-product-scroller .size-row{
    margin-bottom:6px;
  }

  .exclusive-product-scroller .size-btn{
    width:23px;
    height:22px;
  }

  .exclusive-product-scroller .add-cart-btn{
    height:32px;
  }

  .exclusive-product-scroller .name{
    font-size:.64rem;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

  .exclusive-section{
    padding:38px 0;
  }

  .exclusive-video{
    aspect-ratio:4 / 5;
    margin-bottom:27px;
  }

  .exclusive-head{
    align-items:flex-start;
  }

  .exclusive-heading-wrap h2{
    font-size:1.05rem;
  }

  .exclusive-heading-wrap p{
    font-size:.63rem;
    max-width:235px;
  }

  .exclusive-nav{
    margin-top:0;
  }

  .exclusive-nav button{
    width:29px;
    height:29px;
  }

  .exclusive-product-scroller .product-card{
    flex:0 0 84%;
  }

}



/* =========================================================
   SHIPPING POLICY PAGE
========================================================= */

.shipping-page{
    background:var(--cream);
    padding:55px 0 85px;
}


/* =========================================================
   HERO
========================================================= */

.shipping-hero{
    text-align:center;
    max-width:850px;
    margin:0 auto 45px;
}

.shipping-hero .eyebrow{
    display:block;
    color:var(--gold);
    font-size:.68rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-bottom:10px;
}

.shipping-hero h1{
    color:var(--wine);
    font-family:'Cormorant Garamond',serif;
    font-size:3.4rem;
    font-weight:500;
    line-height:1;
    margin:0 0 15px;
}

.shipping-hero p{
    color:var(--ink-soft);
    font-size:.82rem;
    line-height:1.8;
    max-width:650px;
    margin:0 auto;
}


/* =========================================================
   LAYOUT
========================================================= */

.shipping-layout{
    max-width:1050px;
    margin:auto;
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:45px;
    align-items:start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.shipping-sidebar{
    position:sticky;
    top:100px;
    background:#fff;
    border:1px solid var(--line);
    padding:22px;
}

.shipping-sidebar-title{
    color:var(--wine);
    font-family:'Cormorant Garamond',serif;
    font-size:1.35rem;
    margin-bottom:15px;
}

.shipping-sidebar a{
    display:block;
    color:var(--ink-soft);
    font-size:.7rem;
    padding:9px 0;
    border-bottom:1px solid #eee;
    transition:.2s;
}

.shipping-sidebar a:last-child{
    border-bottom:0;
}

.shipping-sidebar a:hover{
    color:var(--wine);
    padding-left:4px;
}


/* =========================================================
   CONTENT
========================================================= */

.shipping-content{
    background:#fff;
    border:1px solid var(--line);
    padding:40px 45px;
}

.shipping-section{
    padding-bottom:28px;
    margin-bottom:28px;
    border-bottom:1px solid var(--line);
}

.shipping-section:last-child{
    border-bottom:0;
    margin-bottom:0;
    padding-bottom:0;
}

.shipping-section h2{
    color:var(--wine);
    font-family:'Cormorant Garamond',serif;
    font-size:1.85rem;
    font-weight:500;
    margin:0 0 13px;
}

.shipping-section h3{
    color:var(--wine);
    font-family:'Cormorant Garamond',serif;
    font-size:1.3rem;
    font-weight:500;
    margin:20px 0 8px;
}

.shipping-section p{
    color:var(--ink-soft);
    font-size:.79rem;
    line-height:1.85;
    margin:0 0 12px;
}

.shipping-section ul{
    margin:10px 0 15px;
    padding-left:20px;
}

.shipping-section li{
    color:var(--ink-soft);
    font-size:.77rem;
    line-height:1.8;
    margin-bottom:5px;
}

.shipping-section strong{
    color:var(--ink);
    font-weight:500;
}


/* =========================================================
   SHIPPING HIGHLIGHTS
========================================================= */

.shipping-highlights{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin:20px 0 25px;
}

.shipping-highlight{
    border:1px solid var(--line);
    padding:20px 15px;
    text-align:center;
    background:#fffdfa;
}

.shipping-highlight i{
    color:var(--gold);
    font-size:1rem;
    margin-bottom:9px;
}

.shipping-highlight strong{
    display:block;
    color:var(--wine);
    font-family:'Cormorant Garamond',serif;
    font-size:1.15rem;
    font-weight:500;
    margin-bottom:3px;
}

.shipping-highlight span{
    color:var(--ink-soft);
    font-size:.65rem;
}


/* =========================================================
   NOTICE
========================================================= */

.shipping-notice{
    background:var(--blush);
    border:1px solid rgba(180,134,63,.25);
    padding:20px 22px;
    margin-top:18px;
}

.shipping-notice p{
    margin:0;
}


/* =========================================================
   CONTACT
========================================================= */

.shipping-contact{
    background:var(--blush);
    border:1px solid rgba(180,134,63,.25);
    padding:25px;
    margin-top:15px;
}

.shipping-contact-title{
    color:var(--wine);
    font-family:'Cormorant Garamond',serif;
    font-size:1.45rem;
    margin-bottom:8px;
}

.shipping-contact p{
    margin-bottom:5px;
}

.shipping-contact a{
    color:var(--wine);
    font-weight:500;
}


/* =========================================================
   UPDATED
========================================================= */

.shipping-updated{
    text-align:center;
    color:#988d88;
    font-size:.68rem;
    margin-top:28px;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:991px){

    .shipping-layout{
        grid-template-columns:1fr;
        gap:25px;
    }

    .shipping-sidebar{
        position:static;
    }

    .shipping-sidebar a{
        display:inline-block;
        border:1px solid var(--line);
        margin:4px;
        padding:7px 12px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

    .shipping-page{
        padding:40px 0 60px;
    }

    .shipping-hero{
        margin-bottom:30px;
    }

    .shipping-hero h1{
        font-size:2.6rem;
    }

    .shipping-hero p{
        font-size:.75rem;
    }

    .shipping-content{
        padding:27px 20px;
    }

    .shipping-section h2{
        font-size:1.6rem;
    }

    .shipping-section p{
        font-size:.75rem;
        line-height:1.8;
    }

    .shipping-section li{
        font-size:.73rem;
    }

    .shipping-highlights{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

    .shipping-hero h1{
        font-size:2.35rem;
    }

    .shipping-content{
        padding:23px 16px;
    }

    .shipping-sidebar{
        padding:15px;
    }

}

/* =========================================================
   PRIVACY POLICY PAGE
========================================================= */

.privacy-page{
    background:var(--cream);
    padding:55px 0 85px;
}


/* =========================================================
   PAGE HERO
========================================================= */

.privacy-hero{
    text-align:center;
    max-width:850px;
    margin:0 auto 45px;
}

.privacy-hero .eyebrow{
    display:block;
    color:var(--gold);
    font-size:.68rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-bottom:10px;
}

.privacy-hero h1{
    color:var(--wine);
    font-family:'Cormorant Garamond',serif;
    font-size:3.4rem;
    font-weight:500;
    line-height:1;
    margin:0 0 15px;
}

.privacy-hero p{
    color:var(--ink-soft);
    font-size:.82rem;
    line-height:1.8;
    max-width:650px;
    margin:0 auto;
}


/* =========================================================
   CONTENT WRAP
========================================================= */

.privacy-layout{
    max-width:1050px;
    margin:auto;
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:45px;
    align-items:start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.privacy-sidebar{
    position:sticky;
    top:100px;
    background:#fff;
    border:1px solid var(--line);
    padding:22px;
}

.privacy-sidebar-title{
    color:var(--wine);
    font-family:'Cormorant Garamond',serif;
    font-size:1.35rem;
    margin-bottom:15px;
}

.privacy-sidebar a{
    display:block;
    color:var(--ink-soft);
    font-size:.7rem;
    padding:9px 0;
    border-bottom:1px solid #eee;
    transition:.2s;
}

.privacy-sidebar a:last-child{
    border-bottom:0;
}

.privacy-sidebar a:hover{
    color:var(--wine);
    padding-left:4px;
}


/* =========================================================
   POLICY CONTENT
========================================================= */

.privacy-content{
    background:#fff;
    border:1px solid var(--line);
    padding:40px 45px;
}

.policy-section{
    padding-bottom:28px;
    margin-bottom:28px;
    border-bottom:1px solid var(--line);
}

.policy-section:last-child{
    border-bottom:0;
    margin-bottom:0;
    padding-bottom:0;
}

.policy-section h2{
    color:var(--wine);
    font-family:'Cormorant Garamond',serif;
    font-size:1.85rem;
    font-weight:500;
    margin:0 0 13px;
}

.policy-section h3{
    color:var(--wine);
    font-family:'Cormorant Garamond',serif;
    font-size:1.3rem;
    font-weight:500;
    margin:20px 0 8px;
}

.policy-section p{
    color:var(--ink-soft);
    font-size:.79rem;
    line-height:1.85;
    margin:0 0 12px;
}

.policy-section ul{
    margin:10px 0 15px;
    padding-left:20px;
}

.policy-section li{
    color:var(--ink-soft);
    font-size:.77rem;
    line-height:1.8;
    margin-bottom:5px;
}

.policy-section strong{
    color:var(--ink);
    font-weight:500;
}


/* =========================================================
   CONTACT BOX
========================================================= */

.policy-contact{
    background:var(--blush);
    border:1px solid rgba(180,134,63,.25);
    padding:25px;
    margin-top:15px;
}

.policy-contact-title{
    color:var(--wine);
    font-family:'Cormorant Garamond',serif;
    font-size:1.45rem;
    margin-bottom:8px;
}

.policy-contact p{
    margin-bottom:5px;
}

.policy-contact a{
    color:var(--wine);
    font-weight:500;
}


/* =========================================================
   LAST UPDATED
========================================================= */

.policy-updated{
    text-align:center;
    color:#988d88;
    font-size:.68rem;
    margin-top:28px;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:991px){

    .privacy-layout{
        grid-template-columns:1fr;
        gap:25px;
    }

    .privacy-sidebar{
        position:static;
    }

    .privacy-sidebar a{
        display:inline-block;
        border:1px solid var(--line);
        margin:4px;
        padding:7px 12px;
    }

}


@media(max-width:767px){

    .privacy-page{
        padding:40px 0 60px;
    }

    .privacy-hero{
        margin-bottom:30px;
    }

    .privacy-hero h1{
        font-size:2.6rem;
    }

    .privacy-hero p{
        font-size:.75rem;
    }

    .privacy-content{
        padding:27px 20px;
    }

    .policy-section h2{
        font-size:1.6rem;
    }

    .policy-section p{
        font-size:.75rem;
        line-height:1.8;
    }

    .policy-section li{
        font-size:.73rem;
    }

}


@media(max-width:480px){

    .privacy-hero h1{
        font-size:2.35rem;
    }

    .privacy-content{
        padding:23px 16px;
    }

    .privacy-sidebar{
        padding:15px;
    }

}






/* =========================================================
   JEWELLERY PAGE — OTHER SECTIONS ONLY
   Product HTML / Product CSS untouched
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.jewellery-page {
    width: 100%;
    background: #fff;
    color: #38151f;
    overflow: hidden;
}

.jewellery-page * {
    box-sizing: border-box;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.jewel-breadcrumb {
    background: #faf6f1;
    border-bottom: 1px solid #eee2d8;
}

.jewel-breadcrumb .container {
    min-height: 45px;

    display: flex;
    align-items: center;

    gap: 9px;
}

.jewel-breadcrumb a {
    color: #766861;
    text-decoration: none;

    font-size: 11px;

    transition: color .25s ease;
}

.jewel-breadcrumb a:hover {
    color: #68102c;
}

.jewel-breadcrumb span {
    color: #a18e83;
    font-size: 11px;
}

.jewel-breadcrumb span:last-child {
    color: #68102c;
}


/* =========================================================
   BANNER SECTION
========================================================= */

.jewel-banner-section {
    padding: 22px 0 0;
    background: #fff;
}

.jewel-banner {
    position: relative;

    width: 100%;
    height: 470px;

    overflow: hidden;

    background: #eee4da;
}

.jewel-banner > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   BANNER OVERLAY
========================================================= */

.jewel-banner-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(58, 7, 24, .78) 0%,
            rgba(58, 7, 24, .53) 34%,
            rgba(58, 7, 24, .17) 68%,
            rgba(58, 7, 24, 0) 100%
        );
}


/* =========================================================
   BANNER CONTENT
========================================================= */

.jewel-banner-content {
    position: absolute;

    top: 50%;
    left: 7%;

    width: 500px;
    max-width: 48%;

    transform: translateY(-50%);

    color: #fff;
}

.jewel-banner-content > span {
    display: block;

    margin-bottom: 14px;

    color: #fff;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
}

.jewel-banner-content h1 {
    margin: 0;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 52px;
    font-weight: 400;

    line-height: 1.08;
}

.jewel-banner-content p {
    max-width: 420px;

    margin: 18px 0 27px;

    color: rgba(255,255,255,.92);

    font-size: 12px;
    line-height: 1.8;
}

.jewel-banner-content a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 20px;

    border: 1px solid rgba(255,255,255,.85);

    background: #68102c;

    color: #fff;

    text-decoration: none;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 1.5px;

    transition: all .3s ease;
}

.jewel-banner-content a:hover {
    background: #fff;

    border-color: #fff;

    color: #68102c;
}

.jewel-banner-content a i {
    font-size: 8px;

    transition: transform .3s ease;
}

.jewel-banner-content a:hover i {
    transform: translateX(4px);
}


/* =========================================================
   INTRO
========================================================= */

.jewel-intro {
    padding: 70px 0 55px;

    background: #fff;
}

.jewel-intro-inner {
    max-width: 680px;

    margin: 0 auto;

    text-align: center;
}

.jewel-subtitle {
    display: block;

    color: #a07850;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 2.7px;
}

.jewel-intro-inner h2 {
    margin: 11px 0 16px;

    color: #5d0d28;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 37px;
    font-weight: 400;

    line-height: 1.2;
}

.jewel-intro-inner p {
    max-width: 570px;

    margin: auto;

    color: #766961;

    font-size: 12px;

    line-height: 1.85;
}


/* =========================================================
   DECORATIVE DIVIDER
========================================================= */

.jewel-divider {
    display: flex;

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

    gap: 12px;

    margin-top: 20px;
}

.jewel-divider span {
    width: 48px;
    height: 1px;

    background: #c9aa85;
}

.jewel-divider i {
    color: #9b704b;

    font-size: 11px;
}


/* =========================================================
   COLLECTION SECTION
========================================================= */

.jewel-collection {
    padding: 38px 0 72px;

    background: #faf5ef;
}


/* =========================================================
   COLLECTION HEADING
========================================================= */

.jewel-section-heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    padding-bottom: 22px;

    border-bottom: 1px solid #e4d8ce;
}

.jewel-section-heading > div > span {
    display: block;

    margin-bottom: 7px;

    color: #a07850;

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 2px;
}

.jewel-section-heading h2 {
    margin: 0;

    color: #5d0d28;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 31px;
    font-weight: 400;
}

.jewel-section-heading p {
    max-width: 290px;

    margin: 0;

    color: #776a63;

    font-size: 10px;

    line-height: 1.7;

    text-align: right;
}


/* =========================================================
   CATEGORY NAV
   UI ONLY — NO FILTERING
========================================================= */

.jewel-category-nav {
    display: flex;

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

    gap: 9px;

    margin: 26px 0 35px;
}

.jewel-category-nav button {
    padding: 10px 19px;

    border: 1px solid #d9cbc0;

    background: #fff;

    color: #70625b;

    font-size: 9px;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.jewel-category-nav button:hover,
.jewel-category-nav button.active {
    border-color: #68102c;

    background: #68102c;

    color: #fff;
}


/* =========================================================
   PAGINATION
========================================================= */

.jewel-pagination {
    display: flex;

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

    gap: 7px;

    margin-top: 55px;
}

.jewel-pagination button {
    width: 35px;
    height: 35px;

    padding: 0;

    border: 1px solid #d8cbc1;

    background: #fff;

    color: #68102c;

    display: flex;

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

    font-size: 9px;

    cursor: pointer;

    transition: all .25s ease;
}

.jewel-pagination button:hover,
.jewel-pagination button.active {
    border-color: #68102c;

    background: #68102c;

    color: #fff;
}

.jewel-pagination button:first-child,
.jewel-pagination button:last-child {
    border-radius: 50%;
}

.jewel-pagination span {
    color: #8c7d75;

    font-size: 10px;
}


/* =========================================================
   FEATURES SECTION
========================================================= */

.jewel-features {
    padding: 62px 0;

    background: #fff;

    border-top: 1px solid #eee2d8;
}

.jewel-feature {
    height: 100%;

    padding: 15px 25px;

    text-align: center;
}

.jewel-feature > i {
    width: 48px;
    height: 48px;

    margin: 0 auto 14px;

    border: 1px solid #d2b18a;

    border-radius: 50%;

    display: flex;

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

    color: #68102c;

    font-size: 15px;
}

.jewel-feature h3 {
    margin: 0 0 8px;

    color: #5d0d28;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;
    font-weight: 400;
}

.jewel-feature p {
    max-width: 270px;

    margin: auto;

    color: #776a63;

    font-size: 10px;

    line-height: 1.75;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .jewel-banner {
        height: 430px;
    }

    .jewel-banner-content {
        max-width: 55%;
    }

    .jewel-banner-content h1 {
        font-size: 45px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {


    /* -----------------------------------------------------
       CONTAINER
    ----------------------------------------------------- */

    .jewel-banner-section .container,
    .jewel-intro .container,
    .jewel-collection .container {
        width: calc(100% - 24px);
    }


    /* -----------------------------------------------------
       BREADCRUMB
    ----------------------------------------------------- */

    .jewel-breadcrumb .container {
        min-height: 38px;
    }

    .jewel-breadcrumb a,
    .jewel-breadcrumb span {
        font-size: 9px;
    }


    /* -----------------------------------------------------
       BANNER
    ----------------------------------------------------- */

    .jewel-banner-section {
        padding-top: 12px;
    }

    .jewel-banner {
        height: 380px;
    }

    .jewel-banner > img {
        object-position: center;
    }

    .jewel-banner-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(55,6,23,.82),
                rgba(55,6,23,.48),
                rgba(55,6,23,.12)
            );
    }

    .jewel-banner-content {
        left: 23px;
        right: 20px;

        width: auto;
        max-width: 340px;
    }

    .jewel-banner-content > span {
        margin-bottom: 10px;

        font-size: 8px;

        letter-spacing: 2px;
    }

    .jewel-banner-content h1 {
        font-size: 34px;

        line-height: 1.12;
    }

    .jewel-banner-content p {
        max-width: 300px;

        margin: 14px 0 21px;

        font-size: 10px;

        line-height: 1.7;
    }

    .jewel-banner-content a {
        padding: 10px 14px;

        font-size: 8px;
    }


    /* -----------------------------------------------------
       INTRO
    ----------------------------------------------------- */

    .jewel-intro {
        padding: 48px 0 42px;
    }

    .jewel-subtitle {
        font-size: 8px;

        letter-spacing: 2px;
    }

    .jewel-intro-inner h2 {
        margin: 9px 0 14px;

        font-size: 29px;
    }

    .jewel-intro-inner p {
        padding: 0 8px;

        font-size: 10px;

        line-height: 1.75;
    }

    .jewel-divider {
        margin-top: 17px;
    }


    /* -----------------------------------------------------
       COLLECTION
    ----------------------------------------------------- */

    .jewel-collection {
        padding: 30px 0 55px;
    }


    /* -----------------------------------------------------
       HEADING
    ----------------------------------------------------- */

    .jewel-section-heading {
        display: block;

        padding-bottom: 17px;
    }

    .jewel-section-heading > div > span {
        font-size: 7px;

        letter-spacing: 1.7px;
    }

    .jewel-section-heading h2 {
        font-size: 27px;
    }

    .jewel-section-heading p {
        max-width: 100%;

        margin-top: 8px;

        font-size: 9px;

        text-align: left;
    }


    /* -----------------------------------------------------
       CATEGORY NAV
    ----------------------------------------------------- */

    .jewel-category-nav {
        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;

        gap: 7px;

        margin: 18px -12px 25px;

        padding: 2px 12px 8px;

        scrollbar-width: none;
    }

    .jewel-category-nav::-webkit-scrollbar {
        display: none;
    }

    .jewel-category-nav button {
        flex: 0 0 auto;

        padding: 8px 13px;

        white-space: nowrap;

        font-size: 8px;
    }


    /* -----------------------------------------------------
       PAGINATION
    ----------------------------------------------------- */

    .jewel-pagination {
        margin-top: 38px;

        gap: 5px;
    }

    .jewel-pagination button {
        width: 30px;
        height: 30px;
    }


    /* -----------------------------------------------------
       FEATURES
    ----------------------------------------------------- */

    .jewel-features {
        padding: 42px 0;
    }

    .jewel-feature {
        padding: 12px 20px;
    }

    .jewel-feature h3 {
        font-size: 20px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .jewel-banner {
        height: 350px;
    }

    .jewel-banner-content h1 {
        font-size: 30px;
    }

    .jewel-intro-inner h2 {
        font-size: 27px;
    }

}

/* <!-- =========================================================
     JEWELLERY CSS
========================================================= --> */



/* =========================================================
   MAIN SECTION
========================================================= */

.jewellery-edit {
  position: relative;
  background: #faf5ef;
  padding: 75px 0 80px;
  overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.jewellery-header {
  max-width: 650px;
  margin: 0 auto 38px;
  text-align: center;
}

.jewellery-kicker {
  color: #a47b4e;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.8px;
  margin-bottom: 12px;
}

.jewellery-header h2 {
  margin: 0;
  color: #5d0d28;
  font-size: 40px;
  line-height: 1.17;
  font-weight: 500;
}

.jewellery-header p {
  max-width: 540px;
  margin: 16px auto 0;
  color: #75665f;
  font-size: 15px;
  line-height: 1.8;
}

.jewellery-line {
  display: flex;
  justify-content: center;a
  align-items: center;
  gap: 11px;
  margin-top: 18px;
}

.jewellery-line span {
  width: 42px;
  height: 1px;
  background: #c9a77d;
}

.jewellery-line i {
  color: #9d754b;
  font-size: 12px;
}


/* =========================================================
   CATEGORY NAV
========================================================= */

.jewellery-categories {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 34px;
  margin-bottom: 43px;
}

.jewel-category {
  width: 88px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  color: #81746d;
  font-size: 11px;
  transition: all .3s ease;
}

.jewel-circle {
  display: block;
  width: 76px;
  height: 76px;
  padding: 3px;
  margin: 0 auto 10px;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: all .3s ease;
}

.jewel-circle img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

.jewel-category:hover {
  color: #650d2b;
}

.jewel-category:hover .jewel-circle {
  transform: translateY(-3px);
}

.jewel-category.active {
  color: #650d2b;
  font-weight: 600;
}

.jewel-category.active .jewel-circle {
  padding: 4px;
  border-color: #9e754b;
  transform: translateY(-3px);
}


/* =========================================================
   PRODUCT HEADER
========================================================= */

.jewellery-products-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid #e5d9ce;
}

.jewellery-products-title span {
  display: block;
  color: #9a7655;
  font-size: 9px;
  letter-spacing: 2px;
}

.jewellery-products-title h3 {
  margin: 4px 0 0;
  color: #5d0d28;
  font-size: 25px;
  line-height: 1.2;
}


/* =========================================================
   ARROWS
========================================================= */

.jewellery-arrows {
  display: flex;
  gap: 8px;
}

.jewellery-arrows button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #d8c8bb;
  border-radius: 50%;
  background: #fff;
  color: #68102c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .25s ease;
}

.jewellery-arrows button:hover {
  color: #fff;
  background: #68102c;
  border-color: #68102c;
}


/* =========================================================
   PRODUCT SCROLLER
========================================================= */

.jewellery-products {
  display: flex;
  gap: 17px;
  padding: 2px 2px 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.jewellery-products::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.jewel-product {
  position: relative;
  flex: 0 0 calc(20% - 14px);
  min-width: 190px;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.jewel-image {
  position: relative;
  overflow: hidden;
  background: #eee5dc;
  aspect-ratio: 4 / 5;
}

.jewel-image > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition:
    transform .7s cubic-bezier(.2,.7,.2,1);
}

.jewel-product:hover .jewel-image > img {
  transform: scale(1.045);
}


/* =========================================================
   BADGE
========================================================= */

.jewel-badge {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  padding: 6px 9px;
  color: #fff;
  background: #67102c;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 1.4px;
}


/* =========================================================
   WISHLIST
========================================================= */

.jewel-wish {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: #67102c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .25s ease;
}

.jewel-wish:hover,
.jewel-wish.liked {
  color: #fff;
  background: #67102c;
}


/* =========================================================
   ADD TO Cart
========================================================= */

.jewel-add {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 13px;
  background:
    linear-gradient(
      to top,
      rgba(72,8,28,.96),
      rgba(72,8,28,.65),
      transparent
    );
  transform: translateY(100%);
  transition: transform .35s ease;
}

.jewel-product:hover .jewel-add {
  transform: translateY(0);
}

.jewel-add button {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.75);
  background: #fff;
  color: #67102c;
  font-size: 9px;
  letter-spacing: 1.3px;
  cursor: pointer;
  transition: all .25s ease;
  font-size: 15px;
  text-transform: uppercase;
}

.jewel-add button i {
  margin-left: 8px;
  font-size: 8px;
  transition: transform .25s ease;
}

.jewel-add button:hover {
  color: #fff;
  background: #67102c;
  /* font-size: 13px; */
}

.jewel-add button:hover i {
  transform: translateX(3px);
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.jewel-info {
  padding: 13px 3px 4px;
}

.jewel-type {
  margin-bottom: 5px;
  color: #a07c5b;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 1.6px;
}

.jewel-name {
  min-height: 39px;
  color: #38151f;
  font-size: 15px;
  line-height: 1.5;
}

.jewel-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.jewel-price del {
  color: #999;
  font-size: 10px;
}

.jewel-price strong {
  color: #67102c;
  font-size: 16px;
  font-weight: 600;
}


/* =========================================================
   VIEW ALL
========================================================= */

.jewellery-view {
  margin-top: 31px;
  text-align: center;
}

.jewellery-view a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #67102c;
  color: #67102c;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1.5px;
  transition: all .25s ease;
  font-weight: 700;
}

.jewellery-view a i {
  font-size: 9px;
  transition: transform .25s ease;
}

.jewellery-view a:hover {
  color: #8c5e3e;
  border-color: #8c5e3e;
}

.jewellery-view a:hover i {
  transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

  .jewellery-edit {
    padding: 60px 0 65px;
  }

  .jewel-product {
    flex: 0 0 calc(25% - 13px);
    min-width: 180px;
  }

  .jewellery-categories {
    gap: 25px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .jewellery-edit {
    padding: 50px 0 55px;
  }


  /* HEADER */

  .jewellery-header {
    padding: 0 12px;
    margin-bottom: 28px;
  }

  .jewellery-kicker {
    font-size: 8px;
    letter-spacing: 2px;
    margin-bottom: 9px;
  }

  .jewellery-header h2 {
    font-size: 30px;
    line-height: 1.2;
  }

  .jewellery-header p {
    max-width: 350px;
    margin-top: 13px;
    font-size: 11px;
    line-height: 1.75;
  }

  .jewellery-line {
    margin-top: 15px;
  }

  .jewellery-line span {
    width: 30px;
  }


  /* CATEGORIES */

  .jewellery-categories {
    justify-content: flex-start;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 15px 10px;
    margin: 0 -12px 28px;
    scrollbar-width: none;
  }

  .jewellery-categories::-webkit-scrollbar {
    display: none;
  }

  .jewel-category {
    flex: 0 0 70px;
    width: 70px;
    font-size: 9px;
  }

  .jewel-circle {
    width: 58px;
    height: 58px;
    margin-bottom: 8px;
  }


  /* PRODUCT HEADER */

  .jewellery-products-head {
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 13px;
  }

  .jewellery-products-title span {
    font-size: 7px;
    letter-spacing: 1.5px;
  }

  .jewellery-products-title h3 {
    margin-top: 3px;
    font-size: 20px;
  }

  .jewellery-arrows {
    display: none;
  }


  /* PRODUCTS */

  .jewellery-products {
    gap: 10px;
    padding: 2px 1px 15px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .jewel-product {
    flex: 0 0 calc(50% - 5px);
    min-width: 0;
    scroll-snap-align: start;
  }


  /* IMAGE */

  .jewel-image {
    aspect-ratio: 4 / 5;
  }


  /* BADGE */

  .jewel-badge {
    top: 7px;
    left: 7px;
    padding: 5px 7px;
    font-size: 6px;
  }


  /* WISHLIST */

  .jewel-wish {
    top: 7px;
    right: 7px;
    width: 28px;
    height: 28px;
    font-size: 10px;
  }


  /* ADD BUTTON ALWAYS VISIBLE */

  .jewel-add {
    padding: 7px;
    background:
      linear-gradient(
        to top,
        rgba(72,8,28,.85),
        transparent
      );
    transform: translateY(0);
  }

  .jewel-add button {
    height: 31px;
    padding: 0 7px;
    font-size: 7px;
    letter-spacing: 1px;
  }

  .jewel-add button i {
    margin-left: 5px;
    font-size: 7px;
  }


  /* INFO */

  .jewel-info {
    padding: 10px 2px 3px;
  }

  .jewel-type {
    margin-bottom: 4px;
    font-size: 7px;
    letter-spacing: 1.3px;
  }

  .jewel-name {
    min-height: 32px;
    font-size: 11px;
    line-height: 1.45;
  }

  .jewel-price {
    gap: 6px;
    margin-top: 5px;
  }

  .jewel-price del {
    font-size: 8px;
  }

  .jewel-price strong {
    font-size: 11px;
  }


  /* VIEW */

  .jewellery-view {
    margin-top: 24px;
  }

  .jewellery-view a {
    font-size: 9px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .jewellery-edit {
    padding-top: 44px;
  }

  .jewellery-header h2 {
    font-size: 27px;
  }

  .jewellery-categories {
    gap: 14px;
  }

  .jewel-category {
    flex-basis: 64px;
    width: 64px;
  }

  .jewel-circle {
    width: 54px;
    height: 54px;
  }

  .jewel-name {
    font-size: 10px;
  }

}