.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{
  --brown-900:#2e1b12; --brown-800:#3d2417; --brown-700:#6b4326; --brown-600:#8a5a34;
  --gold:#b9822f; --cream:#fbf7f0; --cream-2:#f5ede1; --card-border:#ece3d6;
  --red:#e0401f; --green:#1f8a4c; --green-bg:#eaf7ef; --peach-bg:#fdeee1; --gold-bg:#fdf3de;
  --text-dark:#2a1d14; --text-mid:#6b5e50; --star:#f5a623; --radius:14px;
  --font-display:'Fraunces', serif; --font-body:'Plus Jakarta Sans', sans-serif;
}
.jativo *{box-sizing:border-box;}
.jativo{font-family:var(--font-body); color:var(--text-dark);}
.jativo img{max-width:100%; display:block;}
.jativo a{color:inherit; text-decoration:none;}
.jativo button{font-family:inherit; cursor:pointer; border:none; background:none;}
.jativo .wrap{max-width:1400px; margin:0 auto; padding:0 clamp(16px,4vw,32px);}

/* ---------- TOPBAR (desktop only) ---------- */
.jativo .topbar{background:var(--brown-800); color:#f1e6d8; font-size:13px;}
.jativo .topbar .wrap{display:flex; justify-content:space-between; align-items:center; height:38px;}
.jativo .topbar-links{display:flex; gap:22px; align-items:center;}
.jativo .topbar-links a{opacity:.88;}
.jativo .topbar-links .divider{width:1px; height:12px; background:rgba(255,255,255,.25);}
@media (max-width:820px){ .jativo .topbar{display:none;} }

/* ---------- HEADER (single markup, adapts) ---------- */
.jativo header.main{border-bottom:1px solid var(--card-border); position:sticky; top:0; background:#fff; z-index:50;}
.jativo .header-row{display:flex; align-items:center; gap:20px; height:auto; min-height:72px; padding:12px 0; flex-wrap:wrap;}
.jativo .hamburger{display:none; width:24px; height:24px; flex-shrink:0;}
.jativo .logo{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.jativo .logo .mark{width:34px; height:34px; border-radius:8px; background:linear-gradient(145deg,var(--brown-600),var(--brown-800)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:16px;}
.jativo .logo .word{font-family:var(--font-display); font-weight:700; font-size:clamp(17px,2vw,22px); color:var(--brown-900); line-height:1;}
.jativo .logo .word span{display:block; font-family:var(--font-body); font-size:9px; letter-spacing:.22em; color:var(--gold); font-weight:600; margin-top:2px;}
.jativo .cat-trigger{display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--brown-900); flex-shrink:0;}
.jativo .search-box{flex:1 1 260px; display:flex; align-items:center; background:var(--cream); border:1px solid var(--card-border); border-radius:10px; height:46px; overflow:hidden; order:5;}
.jativo .search-box input{flex:1; border:none; background:none; padding:0 16px; font-size:14px; outline:none; font-family:inherit;}
.jativo .search-box button{width:52px; height:100%; background:var(--brown-800); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.jativo .header-icons{display:flex; align-items:center; gap:24px; flex-shrink:0; margin-left:auto;}
.jativo .icon-btn{position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; color:var(--text-mid); font-weight:600;}
.jativo .icon-btn svg{width:22px; height:22px; stroke:var(--brown-900);}
.jativo .icon-btn .lbl{display:inline;}
.jativo .badge{position:absolute; top:-6px; right:-9px; background:var(--red); color:#fff; font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px;}
@media (max-width:820px){
  .jativo .hamburger{display:block;}
  .jativo .cat-trigger{display:none;}
  .jativo .icon-btn .lbl{display:none;}
  .jativo .search-box{order:10; flex-basis:100%; height:44px;}
  .jativo .header-row{gap:14px;}
}

/* ---------- HERO ---------- */
.jativo .hero-section{padding:clamp(16px,3vw,28px) 0 0;}
.jativo .hero-grid{display:grid; grid-template-columns:2.7fr 1fr; gap:20px;}
.jativo .slider{position:relative; border-radius:var(--radius); overflow:hidden; height:clamp(240px,38vw,400px); background:var(--cream-2);}
.jativo .slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease;}
.jativo .slide.active{opacity:1;}
.jativo .slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.jativo .slide-overlay{position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,12,6,.65) 0%, rgba(20,12,6,.32) 48%, rgba(20,12,6,.05) 75%);}
.jativo .slide-content{position:relative; z-index:2; padding:0 clamp(20px,4vw,52px); max-width:min(480px,80%); color:#fff; height:100%; display:flex; flex-direction:column; justify-content:center;}
.jativo .slide-content h1{font-family:var(--font-display); font-size:clamp(21px,3.2vw,38px); line-height:1.16; font-weight:600; margin-bottom:12px;}
.jativo .slide-content p{font-size:clamp(12px,1.4vw,15px); opacity:.88; margin-bottom:18px; line-height:1.5;}
.jativo .btn-primary{display:inline-block; background:var(--brown-800); color:#fff; font-weight:600; font-size:13.5px; padding:12px 22px; border-radius:9px; width:fit-content;}
.jativo .slide-badge{position:absolute; top:16px; right:16px; z-index:3; background:#fff; color:var(--brown-900); text-align:center; padding:10px 14px; border-radius:12px; font-weight:700; box-shadow:0 8px 24px rgba(0,0,0,.18);}
.jativo .slide-badge .pct{font-family:var(--font-display); font-size:20px; color:var(--red); display:block;}
.jativo .slide-badge small{font-size:9px; font-weight:600; color:var(--text-mid); text-transform:uppercase;}
.jativo .slider-arrow{position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; z-index:4; box-shadow:0 4px 14px rgba(0,0,0,.15);}
.jativo .slider-arrow.prev{left:14px;} .jativo .slider-arrow.next{right:14px;}
@media (max-width:820px){ .jativo .slider-arrow{display:none;} }
.jativo .slider-dots{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:4;}
.jativo .dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); transition:all .2s; cursor:pointer;}
.jativo .dot.active{background:#fff; width:22px; border-radius:4px;}

.jativo .side-cards{display:grid; grid-template-columns:1fr; gap:14px;}
.jativo .side-card{border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; justify-content:space-between;}
.jativo .side-card.voucher{background:var(--gold-bg);}
.jativo .side-card.flash{background:var(--peach-bg);}
.jativo .side-card.store{background:var(--brown-800); color:#fff;}
.jativo .side-card.ongkir{background:var(--green-bg);}
.jativo .side-card h4{font-size:13px; font-weight:700; margin-bottom:2px;}
.jativo .side-card .sub{font-size:11px; color:var(--text-mid); margin-bottom:10px;}
.jativo .side-card .big{font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--brown-900);}
.jativo .side-card .cta{margin-top:12px; display:inline-block; background:var(--brown-800); color:#fff; font-size:12px; font-weight:600; padding:9px 14px; border-radius:8px; width:fit-content;}
.jativo .countdown{display:flex; gap:6px; margin:10px 0;}
.jativo .countdown span{background:var(--brown-900); color:#fff; font-size:13px; font-weight:700; padding:5px 8px; border-radius:6px;}
.jativo .side-card.store .row{display:flex; align-items:center; gap:10px;}
.jativo .check-circle{width:30px; height:30px; border-radius:50%; background:#fff; color:var(--brown-800); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
@media (max-width:820px){
  .jativo .hero-grid{grid-template-columns:1fr;}
  .jativo .side-cards{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
  .jativo .side-cards::-webkit-scrollbar{display:none;}
  .jativo .side-card{scroll-snap-align:start; flex:0 0 78%;}
}

/* ---------- TRUST STRIP ---------- */
.jativo .trust-strip{margin-top:24px; border:1px solid var(--card-border); border-radius:var(--radius); display:flex;}
.jativo .trust-item{flex:1; display:flex; align-items:center; gap:10px; padding:16px; border-right:1px solid var(--card-border);}
.jativo .trust-item:last-child{border-right:none;}
.jativo .trust-item .ic{width:30px; height:30px; flex-shrink:0; color:var(--brown-700);}
.jativo .trust-item strong{display:block; font-size:12.5px; font-weight:700;}
.jativo .trust-item span{font-size:11px; color:var(--text-mid);}
@media (max-width:820px){
  .jativo .trust-strip{border:none; border-radius:0; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;}
  .jativo .trust-strip::-webkit-scrollbar{display:none;}
  .jativo .trust-item{flex:0 0 auto; min-width:112px; flex-direction:column; align-items:flex-start; gap:8px; scroll-snap-align:start; border:1px solid var(--card-border); border-radius:10px; margin-right:8px;}
}

/* ---------- SECTION HEAD ---------- */
.jativo .section{padding:clamp(28px,4vw,44px) 0 0;}
.jativo .section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.jativo .section-head h2{font-family:var(--font-display); font-size:clamp(18px,2vw,23px); font-weight:600; color:var(--brown-900);}
.jativo .see-all{font-size:13px; font-weight:600; color:var(--brown-700); flex-shrink:0;}

/* ---------- SCROLLABLE GRID (kategori / produk / inspirasi) ---------- */
/* Desktop = CSS grid. Mobile = same items become a horizontal-scroll flex row. */
.jativo .cat-grid{display:grid; grid-template-columns:repeat(8,1fr); gap:14px;}
.jativo .cat-card{border:1px solid var(--card-border); border-radius:12px; padding:16px 8px; text-align:center;}
.jativo .cat-card .ic{width:38px; height:38px; margin:0 auto 8px; color:var(--brown-700);}
.jativo .cat-card span{font-size:12px; font-weight:600;}
@media (max-width:820px){
  .jativo .cat-grid{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px;}
  .jativo .cat-grid::-webkit-scrollbar{display:none;}
  .jativo .cat-card{flex:0 0 82px; scroll-snap-align:start;}
}

.jativo .tabs{display:flex; gap:6px; background:var(--cream); padding:4px; border-radius:9px; width:fit-content;}
.jativo .tab{padding:7px 14px; font-size:12.5px; font-weight:600; border-radius:7px; color:var(--text-mid);}
.jativo .tab.active{background:#fff; color:var(--brown-900); box-shadow:0 2px 6px rgba(0,0,0,.08);}
.jativo .tabs-row{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:16px; flex-wrap:wrap; gap:10px;}

.jativo .product-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.jativo .product-card{border:1px solid var(--card-border); border-radius:var(--radius); overflow:hidden;}
.jativo .product-img{position:relative; aspect-ratio:1/1; background:var(--cream-2); overflow:hidden;}
.jativo .product-img img{width:100%; height:100%; object-fit:cover;}
.jativo .discount-badge{position:absolute; top:10px; left:10px; background:var(--red); color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px;}
.jativo .product-info{padding:12px;}
.jativo .product-info h3{font-size:13px; font-weight:600; line-height:1.4; margin-bottom:8px; min-height:36px;}
.jativo .price-row{display:flex; align-items:baseline; gap:8px; margin-bottom:6px; flex-wrap:wrap;}
.jativo .price-now{color:var(--red); font-weight:700; font-size:14.5px;}
.jativo .price-old{color:#b5a999; font-size:11.5px; text-decoration:line-through;}
.jativo .rating-row{display:flex; justify-content:space-between; align-items:center;}
.jativo .rating{display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--text-mid);}
.jativo .rating .star{color:var(--star);}
.jativo .cart-mini{width:28px; height:28px; border:1px solid var(--red); border-radius:8px; color:var(--red); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
@media (max-width:820px){
  .jativo .product-grid{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px;}
  .jativo .product-grid::-webkit-scrollbar{display:none;}
  .jativo .product-card{flex:0 0 62%; scroll-snap-align:start;}
}

.jativo .inspire-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.jativo .inspire-card{border-radius:12px; overflow:hidden; position:relative; height:150px;}
.jativo .inspire-card img{width:100%; height:100%; object-fit:cover;}
.jativo .inspire-card .label{position:absolute; bottom:10px; left:12px; color:#fff; font-weight:700; font-size:13px; text-shadow:0 2px 8px rgba(0,0,0,.5);}
@media (max-width:820px){
  .jativo .inspire-grid{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px;}
  .jativo .inspire-grid::-webkit-scrollbar{display:none;}
  .jativo .inspire-card{flex:0 0 68%; height:130px; scroll-snap-align:start;}
}

/* ---------- WHY + CUSTOM ORDER BANNER ---------- */
.jativo .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,60px); align-items:center;}
.jativo .why-list{list-style:none; display:flex; flex-direction:column; gap:16px;}
.jativo .why-list li{display:flex; gap:14px; align-items:flex-start;}
.jativo .why-list .ic{width:36px; height:36px; border-radius:10px; background:var(--cream); color:var(--brown-700); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.jativo .why-list strong{display:block; font-size:14px; font-weight:700; margin-bottom:2px;}
.jativo .why-list span{font-size:12.5px; color:var(--text-mid);}
@media (max-width:820px){ .jativo .why-grid{grid-template-columns:1fr;} .jativo .why-grid > div:last-child{order:-1;} }

.jativo .custom-banner{margin-top:32px; border-radius:14px; overflow:hidden; position:relative; min-height:130px; display:flex; align-items:center;}
.jativo .custom-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.jativo .custom-banner .overlay{position:absolute; inset:0; background:rgba(20,12,6,.55);}
.jativo .custom-banner .content{position:relative; z-index:2; padding:clamp(16px,3vw,28px); color:#fff;}
.jativo .custom-banner .content .eyebrow{font-size:12px; opacity:.9;}
.jativo .custom-banner .content .headline{font-family:var(--font-display); font-size:clamp(16px,2vw,22px); margin:2px 0 10px;}

/* ---------- FOOTER ---------- */
.jativo .footer-strip{background:var(--cream); margin-top:clamp(28px,5vw,56px);}
.jativo .footer-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:24px clamp(16px,4vw,32px);}
.jativo .fs-item{display:flex; align-items:center; gap:10px;}
.jativo .fs-item .ic{width:28px; height:28px; color:var(--brown-700); flex-shrink:0;}
.jativo .fs-item strong{font-size:12px; display:block;}
.jativo .fs-item span{font-size:10.5px; color:var(--text-mid);}
@media (max-width:820px){ .jativo .footer-strip .wrap{grid-template-columns:1fr 1fr;} }

.jativo footer.main{background:var(--brown-900); color:#e4d6c6; padding:40px 0 22px;}
.jativo .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:28px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.1);}
.jativo .footer-grid h5{font-size:13px; font-weight:700; color:#fff; margin-bottom:14px;}
.jativo .footer-grid ul{list-style:none; display:flex; flex-direction:column; gap:9px;}
.jativo .footer-grid a{font-size:12.5px; opacity:.75;}
.jativo .footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:18px; font-size:12px; opacity:.6; flex-wrap:wrap; gap:8px;}
@media (max-width:820px){
  .jativo .footer-grid{grid-template-columns:1fr 1fr; gap:24px 16px;}
  .jativo footer.main{padding-bottom:88px;}
}

.jativo .wa-float{position:fixed; bottom:26px; right:20px; width:52px; height:52px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.25); z-index:60;}
.jativo .wa-float svg{width:26px; height:26px; fill:#fff;}
@media (max-width:820px){ .jativo .wa-float{bottom:76px; right:16px;} }

.jativo .bottom-nav{display:none; position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--card-border); z-index:60;}
.jativo .bottom-nav a{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 0 8px; font-size:10px; font-weight:600; color:var(--text-mid);}
.jativo .bottom-nav a.active{color:var(--brown-800);}
.jativo .bottom-nav svg{width:20px; height:20px;}
@media (max-width:820px){ .jativo .bottom-nav{display:flex;} }/* End custom CSS */