:root{
  --cream:#f4f0e5; --paper:#fbf8ef; --ink:#254527; --blue:#254527; --yellow:#f1c933; --orange:#ed774e; --red:#c2984b; --line:rgba(20,47,58,.18);
  --shadow:0 22px 50px rgba(20,47,58,.10); --radius:24px; --display:'Roboto Mono',sans-serif; --body:'DM Sans',sans-serif; --mono:'DM Mono',monospace;
}

*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5} a{color:inherit;text-decoration:none} button,input{font:inherit} button{cursor:pointer}
.announcement{background:var(--ink);color:#fff;text-align:center;padding:9px 12px;font:500 11px var(--mono);letter-spacing:.12em}.announcement span{margin:0 9px;opacity:.6}
.site-header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line);position:sticky;top:0;background:#f4f0e5f0;backdrop-filter:blur(10px);z-index:50}.brand{display:flex;align-items:center;gap:9px}.brand-mark{width:31px;height:31px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font:700 16px var(--display)}.brand-name{font:700 24px var(--display);letter-spacing:-.06em}.brand-sub{font:500 9px var(--mono);letter-spacing:.2em;align-self:flex-end;margin:0 0 5px 1px}.main-nav{display:flex;gap:30px;font:500 11px var(--mono);letter-spacing:.11em}.main-nav a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}.header-actions{display:flex;align-items:center;gap:8px}.icon-btn,.cart-btn,.menu-btn,.close-btn{border:0;background:transparent;color:var(--ink)}.icon-btn{font-size:28px;line-height:1}.cart-btn{font:500 11px var(--mono);letter-spacing:.11em;padding:10px 12px}.cart-btn span{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;margin-left:5px}.menu-btn{display:none;font-size:22px}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
  margin-left: 16px; 
}
.section-shell{width:min(1240px,92vw);margin-inline:auto}.section{padding-block:110px}.hero{min-height:700px;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;padding-top:2px}.hero-copy{padding:50px 0}.eyebrow,.section-kicker,.hero-meta,.story-points span,.guide-card small,.footer small{font:500 11px var(--mono);letter-spacing:.14em}.hero h1{font:700 clamp(54px,8vw,110px) var(--display);line-height:.86;letter-spacing:-.08em;margin:20px 0 28px}.hero h1 em,.story-copy em{font-style:normal;color:var(--red)}.hero p{max-width:520px;font-size:19px;line-height:1.6;margin:0 0 34px}.hero-actions{display:flex;align-items:center;gap:24px}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1px solid var(--ink);padding:15px 19px;min-width:150px;font:600 11px var(--mono);letter-spacing:.11em;transition:.2s}.button:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(20,47,58,.13)}.button-dark{background:var(--ink);color:#fff}.text-link{font:500 11px var(--mono);letter-spacing:.08em}.hero-meta{display:flex;gap:18px;margin-top:55px;flex-wrap:wrap;color:rgba(20,47,58,.65)}
/* .hero-art{position:relative;min-height:590px;display:grid;place-items:center}.hero-art:before{content:"";position:absolute;width:76%;height:76%;border-radius:50%;background:var(--yellow);filter:blur(.2px);right:5%;top:12%;z-index:-1}.hero-bag{width:min(310px,57%);height:430px;background:#dfd3bd;border-radius:28px 28px 12px 12px;box-shadow:0 30px 50px rgba(20,47,58,.2);transform:rotate(5deg);position:relative;overflow:hidden}.hero-bag:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.28),transparent 35%,rgba(20,47,58,.06));pointer-events:none}.bag-top{height:36px;background:#c7b595;border-bottom:3px solid rgba(20,47,58,.15)}.bag-label{position:absolute;left:32px;right:32px;top:86px;bottom:54px;background:var(--red);padding:25px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}.bag-label small{font:500 10px var(--mono);letter-spacing:.13em}.bag-label strong{font:700 43px/0.88 var(--display);letter-spacing:-.06em}.bag-label span,.bag-label i{font:400 10px var(--mono)}.bag-label i{font-style:normal;border-top:1px solid rgba(255,255,255,.35);padding-top:12px}.bag-stamp{position:absolute;right:24px;bottom:20px;border:1px solid var(--ink);border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font:500 11px var(--mono);background:var(--cream)}.scribble,.hero-note{position:absolute;font:700 11px var(--mono);letter-spacing:.13em;line-height:1.3}.scribble{left:6%;top:17%;transform:rotate(-8deg)}.hero-note{right:2%;bottom:14%;transform:rotate(7deg);text-align:right}.bean{position:absolute;font-size:44px;color:var(--ink);line-height:1}.bean-a{left:12%;bottom:19%;transform:rotate(18deg)}.bean-b{right:11%;top:23%;transform:rotate(-25deg)}.bean-c{left:18%;top:31%;transform:rotate(-15deg);font-size:28px} */
.hero-art {
  position: relative;
  min-height: 590px;
  display: grid;
  place-items: center;
}

.hero-image {
  display: block;
  width: min(100%, 600px);
  height: auto;
  padding-bottom: 13%;
  max-height: 900px;
  object-fit: contain;
  object-position: center;
}
.ticker{overflow:hidden;background:var(--blue);color:#fff;padding:14px 0;font:600 11px var(--mono);letter-spacing:.13em;white-space:nowrap}.ticker-track{width:max-content;animation:marquee 24s linear infinite}.ticker span{margin:0 22px;color:var(--yellow)}@keyframes marquee{to{transform:translateX(-50%)}}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:35px}.section-heading h2{font:600 clamp(37px,5vw,64px) var(--display);line-height:.95;letter-spacing:-.06em;margin:10px 0 0}.section-heading p{max-width:430px;margin:0;color:#254527}.section-heading-tight{align-items:center}.collection-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.collection-card{min-height:310px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--ink);position:relative;overflow:hidden;transition:.25s}.collection-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.collection-card small{font:500 10px var(--mono);letter-spacing:.1em}.collection-card h3{font:700 42px/.86 var(--display);letter-spacing:-.07em;margin:14px 0 0}.card-index{font:500 10px var(--mono)}.arrow{font-size:25px;align-self:flex-end}.card-blue{background:#23617b;color:#fff}.card-yellow{background:var(--yellow)}.card-orange{background:var(--orange)}.card-cream{background:var(--paper)}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.filter-pill{border:1px solid var(--ink);background:transparent;padding:9px 12px;font:500 10px var(--mono);letter-spacing:.08em}.filter-pill.active,.filter-pill:hover{background:var(--ink);color:#fff}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}.product-card{position:relative}.product-image{height:420px;position:relative;overflow:hidden;display:grid;place-items:center;background:var(--paper);border:1px solid var(--line)}.product-card:nth-child(4n+2) .product-image{background:#dfe9e7}.product-card:nth-child(4n+3) .product-image{background:#efe0b3}.product-card:nth-child(4n+4) .product-image{background:#ead1c3}.product-bag{width:52%;height:72%;border-radius:22px 22px 9px 9px;background:#ded2bf;box-shadow:0 26px 34px rgba(20,47,58,.15);position:relative;transform:rotate(3deg)}.product-bag:before{content:"";position:absolute;left:0;right:0;top:0;height:25px;background:#c6b38f}.product-bag:after{content:"";position:absolute;left:13%;right:13%;top:18%;height:56%;background:var(--blue)}.product-card:nth-child(4n+2) .product-bag:after{background:var(--red)}.product-card:nth-child(4n+3) .product-bag:after{background:#7a5a33}.product-card:nth-child(4n+4) .product-bag:after{background:#f1c933}.product-label-text{position:absolute;left:19%;right:19%;top:24%;height:45%;z-index:2;color:#fff;font:700 22px/.9 var(--display);letter-spacing:-.06em;display:flex;align-items:center;justify-content:center;text-align:center}.product-card:nth-child(4n+4) .product-label-text{color:var(--ink)}.product-tag{position:absolute;left:12px;top:12px;background:var(--ink);color:#fff;padding:7px 9px;font:500 9px var(--mono);letter-spacing:.1em}.product-info{padding:15px 2px 0}.product-info h3{font:600 19px var(--display);margin:0 0 7px;letter-spacing:-.03em}.product-info p{font-size:13px;color:rgba(20,47,58,.65);margin:0 0 11px}.price-row{display:flex;justify-content:space-between;align-items:center}.price{font:500 12px var(--mono)}.add{border:0;background:none;font:500 10px var(--mono);letter-spacing:.08em;text-decoration:underline;text-underline-offset:4px}.hide{display:none!important}
.product-image{
  aspect-ratio:1 / 1;      /* samakan dengan rasio fotomu */
  height:auto;
  position:relative;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
}
.product-image img{
    position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;   /* ganti ke "contain" kalau gambar tidak ingin terpotong */
  display:block;
}
a.guide-card{
  text-decoration:none;
}
a.guide-card.guide-dark,
a.guide-card.guide-red{
  color:#fff;
}
a.guide-card.guide-white{
  color:var(--ink);
}
a.guide-card:hover{
  transform:translateY(-4px);
}
.guide-card{
  transition:transform .2s;
}
.story-block{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.story-image{min-height:570px;position:relative;background:#bfd7d7;overflow:hidden}.story-field{position:absolute;inset:0;background:linear-gradient(160deg,#bfd7d7 0 48%,#88a9a8 48% 55%,#4d7377 55% 66%,#315961 66%);overflow:hidden}.story-field:after{content:"";position:absolute;inset:auto 0 0;height:38%;background:repeating-linear-gradient(160deg,transparent 0 26px,rgba(255,255,255,.08) 27px 28px)}.story-field span{position:absolute;right:30px;bottom:25px;font:500 10px var(--mono);letter-spacing:.13em;color:#fff}.story-circle{position:absolute;z-index:2;left:14%;top:17%;width:180px;height:180px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;text-align:center;font:700 18px/.95 var(--display);letter-spacing:-.05em;transform:rotate(-9deg)}.story-copy h2{font:600 clamp(45px,6vw,75px)/.9 var(--display);letter-spacing:-.07em;margin:17px 0 24px}.story-copy>p{font-size:18px;max-width:520px;color:rgba(20,47,58,.78)}.story-points{border-top:1px solid var(--line);margin-top:35px}.story-points>div{display:grid;grid-template-columns:35px 1fr 1fr;align-items:start;gap:10px;padding:15px 0;border-bottom:1px solid var(--line)}.story-points b{font:500 10px var(--mono)}.story-points span{font-size:10px}.story-points small{color:rgba(20,47,58,.64)}
.guide-section{background:var(--red);color:#fff}.guide-section .section-kicker{color:rgba(255,255,255,.65)}.guide-section .section-heading h2{color:#fff}.guide-section .text-link{color:#fff}.guide-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}.guide-card{min-height:330px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(255,255,255,.4)}.guide-dark{background:#173b48}.guide-red{background:#c63d35}.guide-white{background:var(--paper);color:var(--ink);border-color:var(--ink)}.guide-number{font:500 11px var(--mono)}.guide-card h3{font:600 30px/.98 var(--display);letter-spacing:-.05em;margin:9px 0}.guide-card p{margin:0;opacity:.75}.guide-card small{opacity:.75}
.newsletter{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}.newsletter h2{font:600 clamp(50px,6vw,82px)/.87 var(--display);letter-spacing:-.08em;margin:17px 0 0}.newsletter-form{display:flex;flex-direction:column;gap:12px}.newsletter-form input{border:0;border-bottom:1px solid var(--ink);background:transparent;padding:14px 0;outline:none;font-size:18px}.newsletter-form small{min-height:18px;font:500 10px var(--mono)}
.footer{background:var(--ink);color:#fff;padding-top:75px}.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:70px}.footer-grid>div{display:flex;flex-direction:column;gap:8px}.footer-brand{font:700 48px var(--display);letter-spacing:-.08em}.footer-brand span{font:400 11px var(--mono);vertical-align:top;margin-left:5px}.footer-grid p{max-width:240px;color:rgba(255,255,255,.65)}.footer-grid small{color:rgba(255,255,255,.5);margin-bottom:8px}.footer-grid a,.footer-grid span{color:rgba(255,255,255,.78);font-size:14px}.footer-grid a:hover{text-decoration:underline}.footer-bottom{border-top:1px solid rgba(255,255,255,.18);padding-block:19px;display:flex;justify-content:space-between;color:rgba(255,255,255,.5);font:400 10px var(--mono);letter-spacing:.05em}
.overlay{position:fixed;inset:0;background:rgba(20,47,58,.34);opacity:0;pointer-events:none;transition:.25s;z-index:80}.overlay.show{opacity:1;pointer-events:auto}.drawer{position:fixed;top:0;right:0;width:min(440px,92vw);height:100dvh;background:var(--paper);z-index:90;transform:translateX(105%);transition:.3s;display:flex;flex-direction:column}.drawer.open{transform:translateX(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}.drawer-head h3{margin:0;font:600 24px var(--display)}.close-btn{font-size:32px;line-height:1}.cart-items{flex:1;overflow:auto;padding:18px 24px}.cart-line{display:grid;grid-template-columns:70px 1fr auto;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);align-items:center}.cart-thumb{height:78px;background:var(--yellow);display:grid;place-items:center;font:700 11px var(--mono)}.cart-line h4{margin:0 0 4px;font:600 15px var(--display)}.cart-line small{display:block;color:rgba(20,47,58,.6);font-size:12px;margin-bottom:7px}.qty{display:flex;align-items:center;gap:8px}.qty button{width:24px;height:24px;border:1px solid var(--line);background:transparent}.cart-line strong{font:500 11px var(--mono);white-space:nowrap}.drawer-footer{padding:22px 24px;border-top:1px solid var(--line)}.drawer-footer>div{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.drawer-footer span{color:rgba(20,47,58,.6)}.drawer-footer strong{font:600 15px var(--mono)}.drawer-footer small{display:block;color:rgba(20,47,58,.55);font-size:11px;margin-top:10px}.full{width:100%}
.search-modal{position:fixed;inset:0;display:grid;place-items:start center;padding-top:12vh;background:rgba(20,47,58,.45);backdrop-filter:blur(8px);z-index:95;opacity:0;pointer-events:none;transition:.2s}.search-modal.open{opacity:1;pointer-events:auto}.search-box{width:min(700px,92vw);background:var(--paper);padding:34px;position:relative}.search-box input{width:100%;border:0;border-bottom:2px solid var(--ink);background:transparent;padding:18px 0;font:600 38px var(--display);outline:none;letter-spacing:-.04em}.search-result{padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px}.search-result strong{font:600 17px var(--display)}.search-result small{font:500 10px var(--mono);color:rgba(20,47,58,.6)}
@media (max-width:1020px){.main-nav{display:none}.main-nav.mobile-open{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--paper);padding:18px 4vw;border-bottom:1px solid var(--line);flex-direction:column;gap:18px;box-shadow:0 18px 30px rgba(20,47,58,.10)}.menu-btn{display:block}.collection-grid,.products{grid-template-columns:repeat(2,1fr)}.story-block{gap:45px}.hero{grid-template-columns:1fr 1fr}.hero-art{min-height:510px}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (max-width:720px){.announcement{font-size:9px}.site-header{height:72px;padding:0 4vw}.brand-name{font-size:22px}.brand-sub{display:none}.section{padding-block:75px}.hero{grid-template-columns:1fr;min-height:auto;padding-top:35px}.hero-copy{padding:20px 0}.hero h1{font-size:63px}.hero p{font-size:16px}.hero-art{min-height:470px}.hero-bag{width:49%;height:370px}.scribble{left:0}.hero-note{right:0}.section-heading{align-items:flex-start;flex-direction:column}.section-heading-tight{align-items:flex-start}.filter-row{justify-content:flex-start}.collection-grid,.products,.guide-grid,.story-block,.newsletter{grid-template-columns:1fr}.collection-card{min-height:250px}.story-image{min-height:440px}.story-copy{padding-bottom:20px}.guide-card{min-height:270px}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column;gap:6px}.newsletter-form{max-width:520px}}
@media (max-width:480px){.hero h1{font-size:53px}.hero-meta{gap:10px;font-size:9px}.collection-grid,.products,.footer-grid{grid-template-columns:1fr}.collection-card{min-height:210px}.story-points>div{grid-template-columns:30px 1fr}.story-points small{grid-column:2}.footer-grid{gap:28px}.search-box{padding:25px}.search-box input{font-size:30px}}
@media (max-width:720px){
  .brand-logo{
    height:30px;
    margin-left:0;      /* margin 12px tadi bisa dihapus di HP */
  }
}
@media (max-width:480px){
  .brand-logo{
    height:26px;
  }
}
/* Checkout address confirmation */
.checkout-modal{position:fixed;inset:0;z-index:120;background:rgba(20,47,58,.58);display:none;align-items:center;justify-content:center;padding:18px}.checkout-modal.open{display:flex}.checkout-box{width:min(600px,100%);max-height:92dvh;overflow:auto;background:var(--paper);padding:clamp(20px,4vw,34px);box-shadow:0 24px 80px rgba(0,0,0,.2)}.checkout-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}.checkout-heading h2{font:600 clamp(25px,5vw,34px) var(--display);margin:7px 0 0;letter-spacing:-.04em}.checkout-heading .close-btn{border:0;background:transparent}.shipping-notice{padding:14px 16px;margin:0 0 20px;background:#f4e8cf;border-left:3px solid var(--red);font-size:13px;line-height:1.55}.checkout-form{display:grid;gap:14px}.checkout-form label{display:grid;gap:6px;font-size:12px;font-weight:600;color:var(--ink)}.checkout-form input,.checkout-form textarea{width:100%;min-width:0;border:1px solid var(--line);border-radius:0;padding:12px;background:#fffdf8;color:var(--ink);font:400 14px var(--body);outline-offset:2px}.checkout-form textarea{resize:vertical}.checkout-fields-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.optional-label{font-weight:400;color:rgba(20,47,58,.55)}.checkout-summary{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:14px;margin-top:3px}.checkout-summary strong{font:600 15px var(--mono)}.checkout-help{margin:-5px 0 0;font-size:12px;color:rgba(20,47,58,.7)}@media(max-width:480px){.checkout-box{padding:20px 16px}.checkout-fields-two{grid-template-columns:1fr;gap:14px}.checkout-modal{padding:8px}.checkout-box{max-height:96dvh}}

section{scroll-margin-top:90px;}