:root {
--ink:#123b2a;
--ink-strong:#0b2a1d;
--green:#16834a;
--green-dark:#0d5c34;
--green-light:#eaf7ef;
--green-soft:#f4fbf6;
--muted:#617067;
--line:#dce9e0;
--soft:#f3f8f4;
--paper:#fff;
--radius:24px;
--shadow:0 18px 50px rgba(18,59,42,.08)}

* {
box-sizing:border-box}

html {
scroll-behavior:smooth}

body {
margin:0;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
color:var(--ink);
background:var(--paper);
font-size:16px;
line-height:1.65;
-webkit-font-smoothing:antialiased}

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

img {
display:block;
max-width:100%}

.header {
min-height:82px;
display:flex;
align-items:center;
gap:32px;
padding:0 5%;
position:sticky;
top:0;
background:rgba(255,255,255,.94);
backdrop-filter:blur(18px);
z-index:20;
border-bottom:1px solid var(--line)}

.brand {
display:flex;
align-items:center;
gap:10px;
font-size:16px;
letter-spacing:.08em;
font-weight:800;
margin-right:auto}

.brand b {
font-weight:400}

.main-nav {
display:flex;
gap:27px;
font-size:15px;
font-weight:700}

.main-nav a {
position:relative;
padding:29px 0;
color:#294438}

.main-nav a:after {
content:"";
position:absolute;
left:0;
right:100%;
bottom:20px;
height:2px;
background:var(--green);
transition:.25s}

.main-nav a:hover:after,.main-nav a.active:after {
right:0}

.btn {
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 22px;
border-radius:999px;
font-weight:800;
font-size:15px;
line-height:1.2}

.btn-dark {
background:var(--ink-strong);
color:#fff}

.btn-light {
background:#fff;
color:var(--green-dark)}

.menu-toggle {
display:none;
border:0;
background:none;
font-size:26px}

.hero {
min-height:680px;
position:relative;
overflow:hidden;
background:#123b2a}

.hero-slide {
position:absolute;
inset:0;
display:flex;
align-items:center;
padding:7% 8%;
color:#fff;
background-size:cover;
background-position:center;
opacity:0;
visibility:hidden;
transform:scale(1.025);
transition:opacity .7s ease,transform 6s ease,visibility .7s;
z-index:0}

.hero-slide.active {
opacity:1;
visibility:visible;
transform:scale(1);
z-index:1}

.hero-slide>div {
position:relative;
z-index:2;
max-width:790px}

.hero-slide:after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.18) 65%,rgba(0,0,0,.08))}

.hero-slide .btn {
margin-top:10px}

.hero-slider-controls {
position:absolute;
left:8%;
right:8%;
bottom:28px;
z-index:5;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px}

.hero-dots {
display:flex;
gap:8px}

.hero-dot {
width:34px;
height:4px;
border:0;
border-radius:99px;
background:rgba(255,255,255,.45);
padding:0;
cursor:pointer;
transition:.25s}

.hero-dot.active {
background:#fff;
width:52px}

.hero-arrow {
width:42px;
height:42px;
border:1px solid rgba(255,255,255,.45);
border-radius:50%;
background:rgba(0,0,0,.18);
color:#fff;
cursor:pointer;
font-size:20px;
line-height:1;
transition:.25s}

.hero-arrow:hover {
background:rgba(255,255,255,.16)}

.hero-controls-right {
display:flex;
gap:8px}

@media(max-width:760px) {
.hero-slide {
min-height:620px;
padding:12% 6%}

.hero-slider-controls {
left:6%;
right:6%;
bottom:20px}

.hero-dot {
width:22px}

.hero-dot.active {
width:34px}

}

.demo-hero {
background:linear-gradient(110deg,#123b2a 0%,#175e3a 58%,#319565 100%);
display:flex;
align-items:center;
padding:7% 8%;
color:#fff}

.hero:after {
content:"";
position:absolute;
width:52vw;
height:52vw;
right:-17vw;
top:-15vw;
border-radius:50%;
border:1px solid rgba(255,255,255,.2);
box-shadow:0 0 0 70px rgba(255,255,255,.03),0 0 0 140px rgba(255,255,255,.025)}

.hero-content {
max-width:790px;
position:relative;
z-index:2}

.eyebrow,.section-kicker,.section small,.hero-note {
font-size:12px;
letter-spacing:.16em;
font-weight:800}

.hero h1 {
font-size:clamp(48px,7vw,88px);
line-height:.98;
letter-spacing:-.045em;
margin:18px 0 24px}

.hero h1 em {
font-family:Georgia,serif;
font-weight:400}

.hero p {
font-size:19px;
line-height:1.75;
max-width:650px;
color:#edf5ef}

.hero-actions {
display:flex;
align-items:center;
gap:25px;
margin-top:32px}

.text-link {
font-weight:800;
font-size:15px}

.text-link.light {
color:#fff}

.hero-note {
position:absolute;
bottom:35px;
left:8%;
right:8%;
display:flex;
justify-content:space-between;
color:#d2e3d8;
z-index:2}

.section {
padding:110px 5%;
max-width:1500px;
margin:auto}

.soft {
max-width:none;
background:var(--soft)}

.section-head {
display:flex;
justify-content:space-between;
align-items:end;
gap:30px;
margin-bottom:44px}

.section h2 {
font-size:clamp(36px,4vw,56px);
line-height:1.08;
letter-spacing:-.04em;
max-width:800px;
margin:10px 0 0}

.intro {
padding-top:85px;
padding-bottom:85px}

.intro-grid {
display:grid;
grid-template-columns:1.25fr .75fr;
gap:10%;
align-items:end}

.intro-grid h2 {
font-size:clamp(38px,4.7vw,64px);
margin:15px 0 0;
line-height:1.04}

.intro-grid p {
color:var(--muted);
font-size:18px;
line-height:1.85;
margin:0}

.category-grid {
display:grid;
grid-template-columns:1.3fr 1fr 1fr;
grid-template-rows:270px 270px;
gap:18px}

.category-card {
position:relative;
overflow:hidden;
border-radius:var(--radius);
background:#ddd}

.category-card.tall {
grid-row:span 2}

.category-card img {
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(.2);
transition:transform .5s}

.category-card:hover img {
transform:scale(1.04)}

.category-card span {
position:absolute;
left:25px;
right:25px;
bottom:22px;
color:#fff;
text-shadow:0 2px 12px #000}

.category-card b {
display:block;
font-size:25px}

.category-card small {
font-size:13px;
opacity:.9}

.product-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
max-width:1500px;
margin:auto}

.product-card {
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
overflow:hidden;
transition:.25s ease;
box-shadow:0 8px 24px rgba(18,59,42,.04)}

.product-card:hover {
transform:translateY(-4px);
box-shadow:var(--shadow)}

.product-image {
aspect-ratio:1/1;
background:#e5e5e0;
overflow:hidden}

.product-image img {
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s}

.product-card:hover img {
transform:scale(1.035)}

.product-info {
padding:24px}

.product-info small {
color:#718077;
font-size:12px;
letter-spacing:.08em}

.product-info h3 {
font-size:22px;
line-height:1.25;
margin:9px 0}

.product-info p {
font-size:15px;
line-height:1.7;
color:var(--muted);
margin:10px 0 0}

.service-modern {
display:grid;
grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--line)}

.service-modern article {
padding:30px 25px 38px 0;
border-bottom:1px solid var(--line)}

.service-modern article+article {
padding-left:25px;
border-left:1px solid var(--line)}

.service-modern span {
font-size:13px;
color:#78857d;
letter-spacing:.1em}

.service-modern h3 {
font-size:25px;
line-height:1.2;
margin:55px 0 13px}

.service-modern p {
font-size:16px;
color:var(--muted);
line-height:1.75;
margin:0}

.portfolio-section {
padding-bottom:120px}

.portfolio-modern {
display:grid;
grid-template-columns:1.35fr 1fr 1fr;
grid-template-rows:250px 250px;
gap:18px}

.portfolio-modern figure {
margin:0;
position:relative;
overflow:hidden;
border-radius:var(--radius);
background:#ddd}

.portfolio-modern .large {
grid-row:span 2}

.portfolio-modern img {
width:100%;
height:100%;
object-fit:cover}

.portfolio-modern figcaption {
position:absolute;
left:20px;
bottom:18px;
color:#fff;
font-weight:800;
text-shadow:0 2px 10px #000}

.cta-modern {
margin:0 5% 105px;
padding:70px 6%;
border-radius:32px;
background:var(--ink-strong);
color:#fff;
display:flex;
align-items:end;
justify-content:space-between;
gap:50px}

.cta-modern h2 {
font-size:clamp(38px,5vw,68px);
line-height:1;
letter-spacing:-.04em;
max-width:820px;
margin:10px 0 15px}

.cta-modern p {
max-width:680px;
color:#c8d6ce;
font-size:17px;
line-height:1.75}

.cta-modern .btn {
flex:none}

footer {
background:#0b2a1d;
color:#fff;
padding:68px 5% 30px;
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:45px}

footer p,footer a {
color:#b8c8bf;
line-height:1.85}

footer a {
display:block;
font-size:15px}

.footer-brand p {
max-width:330px}

.copyright {
grid-column:1/-1;
border-top:1px solid #315040;
padding-top:25px;
color:#8fa298;
font-size:13px}

.site-logo {
width:138px;
height:auto;
display:block}

.footer-site-logo {
width:150px}

.company-info {
padding-top:10px}

.info-card {
display:grid;
grid-template-columns:1.4fr .8fr;
gap:24px;
padding:36px;
border:1px solid var(--line);
border-radius:var(--radius);
background:linear-gradient(135deg,var(--green-soft),#fff);
box-shadow:0 12px 35px rgba(18,59,42,.05)}

.info-card h2 {
margin:.25rem 0 .5rem;
color:var(--green-dark)}

.info-card p {
margin:.35rem 0;
color:var(--muted);
font-size:16px}

.marketplace-box {
display:flex;
flex-direction:column;
justify-content:center;
gap:12px}

.marketplace-link {
display:flex;
align-items:center;
gap:14px;
padding:17px 18px;
border:1px solid var(--line);
border-radius:18px;
background:#fff;
transition:.25s ease}

.marketplace-link:hover {
transform:translateY(-3px);
border-color:#b8d9c4;
box-shadow:0 12px 30px rgba(13,92,52,.10)}

.marketplace-link b {
display:block;
font-size:15px}

.marketplace-link small {
display:block;
color:var(--muted);
margin-top:4px;
font-size:13px}

.marketplace-icon {
width:48px;
height:48px;
display:grid;
place-items:center;
border-radius:14px;
background:#ee4d2d;
color:#fff;
font-size:25px;
font-weight:900;
flex:none}

.marketplace-section {
padding-top:20px}

.marketplace-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:16px}

.large-market {
padding:22px}

.wa-float {
position:fixed;
right:24px;
bottom:24px;
z-index:100;
display:flex;
align-items:center;
gap:10px;
padding:13px 17px;
border-radius:999px;
background:#19a463;
color:#fff;
box-shadow:0 14px 35px rgba(13,92,52,.28);
font-weight:800;
transition:.25s}

.wa-float:hover {
transform:translateY(-3px);
box-shadow:0 18px 40px rgba(13,92,52,.34)}

.wa-icon {
width:34px;
height:34px;
border-radius:50%;
display:grid;
place-items:center;
background:#fff;
color:#16834a;
font-size:21px;
font-weight:900}

.wa-text {
white-space:nowrap}

.tokopedia-icon {
background:#03ac0e}

@media(max-width:1000px) {
.main-nav {
display:none;
position:absolute;
top:82px;
left:0;
right:0;
padding:20px 5%;
background:#fff;
border-bottom:1px solid var(--line);
flex-direction:column;
gap:0}

.main-nav.open {
display:flex}

.main-nav a {
padding:13px 0}

.main-nav a:after {
display:none}

.menu-toggle {
display:block}

.nav-cta {
display:none}

.category-grid {
grid-template-columns:1fr 1fr;
grid-template-rows:300px 300px}

.category-card.tall {
grid-row:auto}

.product-grid {
grid-template-columns:repeat(2,1fr)}

.service-modern {
grid-template-columns:repeat(2,1fr)}

.service-modern article+article {
padding-left:0;
border-left:0}

.service-modern article:nth-child(even) {
padding-left:25px;
border-left:1px solid var(--line)}

.portfolio-modern {
grid-template-columns:1fr 1fr;
grid-template-rows:260px 260px}

.portfolio-modern .large {
grid-row:auto}

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

}

@media(max-width:760px) {
.header {
padding:0 4%}

.hero {
min-height:620px}

.demo-hero {
padding:12% 6%}

.hero h1 {
font-size:48px}

.hero p {
font-size:17px}

.hero-actions {
align-items:flex-start;
flex-direction:column;
gap:18px}

.section {
padding:78px 5%}

.section-head {
display:block}

.section-head>.text-link,.section-head>a {
display:inline-block;
margin-top:18px}

.category-grid,.product-grid,.service-modern,.portfolio-modern {
grid-template-columns:1fr}

.category-grid {
grid-template-rows:auto}

.category-card,.category-card.tall {
height:280px;
grid-row:auto}

.portfolio-modern {
grid-template-rows:auto}

.portfolio-modern figure,.portfolio-modern .large {
height:280px}

.service-modern article,.service-modern article:nth-child(even) {
padding:28px 0;
border-left:0}

.service-modern article+article {
border-top:1px solid var(--line)}

.cta-modern {
margin:0 4% 70px;
padding:45px 7%;
display:block}

.cta-modern .btn {
margin-top:20px}

footer {
grid-template-columns:1fr;
padding:55px 5% 25px}

.copyright {
grid-column:auto}

.site-logo {
width:118px}

.info-card {
grid-template-columns:1fr;
padding:24px}

.marketplace-grid {
grid-template-columns:1fr}

.wa-float {
right:16px;
bottom:16px;
padding:11px 14px}

.wa-text {
display:none}

.wa-icon {
width:40px;
height:40px}

}

.product-detail {
align-items:start}

.product-gallery {
position:relative;
aspect-ratio:1/1;
min-height:420px;
overflow:hidden;
border-radius:var(--radius);
background:#f0f3f0}

.product-gallery-slide {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
visibility:hidden;
transition:opacity .45s ease}

.product-gallery-slide.active {
opacity:1;
visibility:visible}

.gallery-arrow {
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px;
height:44px;
border:1px solid rgba(255,255,255,.65);
border-radius:50%;
background:rgba(0,0,0,.25);
color:#fff;
cursor:pointer;
font-size:20px}

.gallery-prev {
left:16px}

.gallery-next {
right:16px}

.gallery-dots {
position:absolute;
left:0;
right:0;
bottom:18px;
display:flex;
justify-content:center;
gap:7px}

.gallery-dot {
width:28px;
height:4px;
padding:0;
border:0;
border-radius:99px;
background:rgba(255,255,255,.55);
cursor:pointer}

.gallery-dot.active {
background:#fff;
width:42px}

@media(max-width:760px) {
.product-gallery {
min-height:320px}

}

.catalog-toolbar {
display:grid;
gap:18px;
margin-bottom:30px}

.catalog-search {
display:flex;
gap:10px;
max-width:760px}

.catalog-search input {
flex:1;
min-width:0;
padding:14px 17px;
border:1px solid var(--line);
border-radius:14px;
font:inherit;
outline:0;
background:#fff}

.catalog-search input:focus {
border-color:var(--green);
box-shadow:0 0 0 4px rgba(22,131,74,.08)}

.catalog-search button {
border:0;
border-radius:14px;
padding:0 24px;
background:var(--ink-strong);
color:#fff;
font-weight:800;
cursor:pointer}

.chips {
display:flex;
flex-wrap:wrap;
gap:9px}

.chips a {
padding:8px 15px;
border:1px solid var(--line);
border-radius:999px;
background:#fff;
color:var(--muted);
font-size:14px;
font-weight:750}

.chips a:hover,.chips a.active {
background:var(--green-soft);
border-color:#b8d9c4;
color:var(--green-dark)}

.empty-state {
text-align:center;
padding:70px 20px;
border:1px dashed var(--line);
border-radius:var(--radius);
background:var(--green-soft)}

.empty-state h3 {
margin:0 0 6px;
font-size:24px}

.empty-state p {
margin:0;
color:var(--muted)}

.pagination {
display:flex;
align-items:center;
justify-content:center;
gap:14px;
margin-top:42px}

.pagination>div {
display:flex;
gap:7px}

.pagination a {
min-width:40px;
height:40px;
padding:0 12px;
display:grid;
place-items:center;
border:1px solid var(--line);
border-radius:10px;
background:#fff;
font-size:14px;
font-weight:800}

.pagination a:hover,.pagination a.active {
background:var(--ink-strong);
border-color:var(--ink-strong);
color:#fff}

@media(max-width:760px) {
.catalog-search {
display:grid;
grid-template-columns:1fr auto}

.catalog-search button {
padding:0 18px}

.pagination {
gap:8px;
flex-wrap:wrap}

}

.header-search {
display:flex;
align-items:center;
gap:8px;
width:min(240px,22vw);
height:42px;
padding:0 13px;
border:1px solid var(--line);
border-radius:999px;
background:#fff;
transition:.2s ease}

.header-search:focus-within {
border-color:var(--green);
box-shadow:0 0 0 4px rgba(22,131,74,.08)}

.header-search-icon {
width:19px;
height:19px;
display:grid;
place-items:center;
color:var(--muted);
flex:none}

.header-search-icon svg {
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round}

.header-search input {
width:100%;
min-width:0;
border:0;
outline:0;
background:transparent;
font:inherit;
font-size:14px;
color:var(--ink)}

.header-search input::placeholder {
color:#89968f}

.header-search-clear {
display:none;
width:24px;
height:24px;
flex:none;
padding:0;
border:0;
border-radius:50%;
background:transparent;
color:#718077;
font-size:20px;
line-height:20px;
cursor:pointer}

.header-search-clear:hover {
background:var(--green-light);
color:var(--green-dark)}

.header-search.has-value .header-search-clear {
display:grid;
place-items:center}

@media(max-width:1000px) {
.header-search {
width:min(260px,38vw)}

}

@media(max-width:760px) {
.header {
gap:12px}

.header-search {
flex:1;
width:auto;
min-width:120px;
height:40px}

.header-search input {
font-size:13px}

.header-search-icon {
font-size:18px}

}

.header-search {
display:flex;
align-items:center;
gap:8px;
width:260px;
flex:0 1 260px;
height:42px;
padding:0 13px;
border:1px solid var(--line);
border-radius:999px;
background:#fff;
transition:.2s ease;
position:relative;
z-index:2}

.header-search:focus-within {
border-color:var(--green);
box-shadow:0 0 0 4px rgba(22,131,74,.08)}

.header-search-icon {
width:19px;
height:19px;
display:grid;
place-items:center;
color:var(--muted);
flex:none}

.header-search-icon svg {
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round}

.header-search input {
width:100%;
min-width:0;
border:0;
outline:0;
background:transparent;
font:inherit;
font-size:14px;
color:var(--ink)}

.header-search input::placeholder {
color:#89968f}

.header-search-clear {
display:none;
width:24px;
height:24px;
flex:none;
padding:0;
border:0;
border-radius:50%;
background:transparent;
color:#718077;
font-size:20px;
line-height:20px;
cursor:pointer}

.header-search-clear:hover {
background:var(--green-light);
color:var(--green-dark)}

.header-search.has-value .header-search-clear {
display:grid;
place-items:center}

@media(max-width:1200px) {
.header {
gap:18px}

.header-search {
width:220px;
flex-basis:220px}

.main-nav {
gap:17px;
font-size:14px}

}

@media(max-width:1000px) {
.header {
gap:12px}

.header-search {
order:2;
flex:1;
width:auto;
min-width:140px;
max-width:320px}

.main-nav {
order:4}

.nav-cta {
display:none}

}

@media(max-width:760px) {
.header {
min-height:70px;
padding:0 4%;
gap:10px}

.site-logo {
width:108px}

.header-search {
min-width:0;
max-width:none;
height:40px}

.header-search input {
font-size:13px}

.header-search-icon {
width:18px;
height:18px}

.main-nav {
top:70px}

}

/* HEADER SEARCH FINAL */
.header {
display:grid!important;
grid-template-columns:auto minmax(220px,280px) 1fr auto!important;
align-items:center!important;
gap:24px!important;
padding:0 5%!important}

.header .brand {
margin:0!important;
min-width:0!important;
flex:none!important}

.header .header-search {
display:flex!important;
width:100%!important;
min-width:220px!important;
max-width:280px!important;
flex:none!important;
height:44px!important;
padding:0 14px!important;
background:#fff!important;
border:2px solid var(--green)!important;
border-radius:999px!important;
visibility:visible!important;
opacity:1!important}

.header .header-search-icon {
display:grid!important;
width:20px!important;
height:20px!important;
color:var(--green-dark)!important;
flex:none!important}

.header .header-search-icon svg {
display:block!important;
width:20px!important;
height:20px!important;
stroke:currentColor!important;
fill:none!important}

.header .header-search input {
display:block!important;
visibility:visible!important;
opacity:1!important;
color:var(--ink-strong)!important;
background:transparent!important;
font-size:14px!important}

.header .header-search input::placeholder {
color:#6b7b72!important;
opacity:1!important}

.header .main-nav {
display:flex!important;
justify-content:flex-end!important;
align-items:center!important;
gap:20px!important;
min-width:0!important;
white-space:nowrap!important}

.header .nav-cta {
white-space:nowrap!important;
flex:none!important}

@media(max-width:1200px) {
.header {
grid-template-columns:auto minmax(200px,260px) auto!important;
gap:16px!important}

.header .main-nav {
display:none!important}

.header .header-search {
max-width:260px!important}

.header .nav-cta {
display:none!important}

}

@media(max-width:760px) {
.header {
grid-template-columns:auto minmax(0,1fr)!important;
gap:10px!important;
padding:0 4%!important;
min-height:70px!important}

.header .site-logo {
width:108px!important}

.header .header-search {
min-width:0!important;
max-width:none!important;
height:40px!important}

.header .header-search input {
font-size:13px!important}

.header .main-nav {
display:none!important}

}

/* HEADER CLEAN LAYOUT */
.header {
min-height:82px!important;
display:grid!important;
grid-template-columns:180px 300px minmax(0,1fr) auto!important;
align-items:center!important;
gap:24px!important;
padding:0 5%!important;
overflow:visible!important;
}

.header .brand {
display:flex!important;
align-items:center!important;
width:180px!important;
min-width:180px!important;
margin:0!important;
}

.header .site-logo {
display:block!important;
width:180px!important;
max-width:100%!important;
height:auto!important;
object-fit:contain!important;
}

.header .header-search {
order:0!important;
display:flex!important;
align-items:center!important;
width:300px!important;
max-width:300px!important;
min-width:0!important;
height:44px!important;
margin:0!important;
padding:0 12px 0 14px!important;
gap:9px!important;
border:1px solid #cfdad3!important;
border-radius:12px!important;
background:#fff!important;
box-shadow:none!important;
visibility:visible!important;
opacity:1!important;
}

.header .header-search:focus-within {
border-color:var(--green)!important;
box-shadow:0 0 0 3px rgba(22,131,74,.10)!important;
}

.header .header-search-icon {
display:grid!important;
place-items:center!important;
width:20px!important;
height:20px!important;
flex:0 0 20px!important;
color:var(--green-dark)!important;
}

.header .header-search-icon svg {
display:block!important;
width:20px!important;
height:20px!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:2!important;
stroke-linecap:round!important;
}

.header .header-search input {
display:block!important;
flex:1 1 auto!important;
width:100%!important;
min-width:0!important;
height:100%!important;
padding:0!important;
border:0!important;
outline:0!important;
background:transparent!important;
color:var(--ink-strong)!important;
font:inherit!important;
font-size:14px!important;
}

.header .header-search input::placeholder {
color:#77857d!important;
opacity:1!important;
}

.header .header-search-clear {
display:none!important;
place-items:center!important;
width:26px!important;
height:26px!important;
flex:0 0 26px!important;
padding:0!important;
border:0!important;
border-radius:50%!important;
background:transparent!important;
color:#6d7a73!important;
font-size:20px!important;
line-height:1!important;
cursor:pointer!important;
}

.header .header-search.has-value .header-search-clear {
display:grid!important;
}

.header .header-search-clear:hover {
background:var(--green-soft)!important;
color:var(--green-dark)!important;
}

.header .main-nav {
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:20px!important;
min-width:0!important;
white-space:nowrap!important;
margin:0!important;
}

.header .main-nav a {
display:block!important;
white-space:nowrap!important;
}

.header .nav-cta {
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
white-space:nowrap!important;
margin:0!important;
}

@media(max-width:1180px) {
.header {
grid-template-columns:160px minmax(220px,300px) auto!important;
gap:18px!important;
}

.header .brand {
width:160px!important;
min-width:160px!important}

.header .main-nav {
display:none!important}

.header .header-search {
width:100%!important;
max-width:300px!important}

.header .nav-cta {
display:inline-flex!important}

}

@media(max-width:760px) {
.header {
min-height:70px!important;
grid-template-columns:minmax(0,1fr) minmax(150px,1fr)!important;
gap:10px!important;
padding:0 4%!important;
}

.header .brand {
width:auto!important;
min-width:0!important;
}

.header .site-logo {
width:120px!important;
}

.header .header-search {
width:100%!important;
max-width:none!important;
height:40px!important;
padding-left:11px!important;
}

.header .header-search input {
font-size:13px!important}

.header .nav-cta {
display:none!important}

}

@media(max-width:380px) {
.header {
grid-template-columns:1fr!important;
min-height:auto!important;
padding-top:12px!important;
padding-bottom:12px!important;
}

.header .brand {
justify-content:center!important}

.header .header-search {
max-width:none!important}

}

/* =========================================================
MARKETPLACE LOGOS
========================================================= */
.marketplace-logo-icon {
width:72px!important;
height:58px!important;
border-radius:12px!important;
display:grid!important;
place-items:center!important;
background:#fff!important;
border:1px solid var(--line)!important;
overflow:hidden!important;
flex:none!important;
}

.marketplace-logo-icon img {
width:88%!important;
height:88%!important;
object-fit:contain!important;
display:block!important;
}

.shopee-logo-icon {
background:#fff7f4!important}

.tokopedia-logo-icon {
background:#f2fff4!important}

.footer-marketplace-logo {
width:22px!important;
height:22px!important;
object-fit:contain!important;
display:inline-block!important;
vertical-align:middle!important;
margin-right:7px!important;
}

@media(max-width:760px) {
.marketplace-logo-icon {
width:64px!important;
height:54px!important;
}

}

/* FINAL HEADER NAV + EXPANDING WHATSAPP */
@media(min-width:1181px) {
.header .main-nav {
display:flex!important}

}

@media(min-width:1001px) and (max-width:1180px) {
.header .main-nav {
display:flex!important;
gap:12px!important;
font-size:13px!important}

.header {
grid-template-columns:150px 200px 1fr auto!important;
gap:12px!important}

.header .brand {
width:150px!important;
min-width:150px!important}

.header .header-search {
width:200px!important;
max-width:200px!important}

.header .nav-cta {
display:none!important}

}

@media(max-width:1000px) {
.header .main-nav {
display:none!important}

}

.wa-float {
position:fixed!important;
right:24px!important;
bottom:24px!important;
z-index:9999!important;
display:flex!important;
align-items:center!important;
gap:10px!important;
width:58px!important;
height:58px!important;
padding:0 17px!important;
overflow:hidden!important;
border-radius:999px!important;
background:#19a463!important;
color:#fff!important;
box-shadow:0 12px 30px rgba(13,92,52,.28)!important;
transition:width .28s ease,box-shadow .28s ease,transform .2s ease!important;
}

.wa-float:hover,.wa-float:focus-visible {
width:290px!important;
transform:translateY(-3px)!important;
box-shadow:0 16px 38px rgba(13,92,52,.34)!important;
}

.wa-icon {
width:34px!important;
height:34px!important;
flex:0 0 34px!important;
display:grid!important;
place-items:center!important;
border-radius:50%!important;
background:transparent!important;
color:#fff!important;
}

.wa-icon svg {
width:34px!important;
height:34px!important;
display:block!important}

.wa-text {
white-space:nowrap!important;
opacity:0!important;
transform:translateX(8px)!important;
transition:opacity .18s ease .08s,transform .22s ease .08s!important;
}

.wa-float:hover .wa-text,.wa-float:focus-visible .wa-text {
opacity:1!important;
transform:translateX(0)!important;
}

@media(max-width:760px) {
.wa-float {
right:16px!important;
bottom:16px!important;
width:54px!important;
height:54px!important;
padding:0 15px!important}

.wa-float:hover,.wa-float:focus-visible {
width:270px!important}

.wa-icon,.wa-icon svg {
width:32px!important;
height:32px!important}

}

/* FOOTER LOGO FIX */
.footer-logo {
display:flex!important;
align-items:center!important}

.footer-site-logo {
width:150px!important;
height:auto!important;
object-fit:contain!important}

.footer-marketplace-logo {
width:24px!important;
height:24px!important;
object-fit:contain!important;
display:inline-block!important;
vertical-align:middle!important}

.footer-tokopedia-logo {
padding:1px!important}

/* CLEAN ANIMO LOGO OVERRIDE */
.header .brand {
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
width:auto!important;
min-width:0!important;
flex:none!important;
margin:0!important}

.header .site-logo {
display:block!important;
width:130px!important;
height:auto!important;
max-height:58px!important;
object-fit:contain!important}

.footer-logo {
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
width:auto!important;
margin:0!important}

.footer-site-logo {
display:block!important;
width:120px!important;
height:auto!important;
max-height:70px!important;
object-fit:contain!important}

@media(max-width:760px) {
.header .site-logo {
width:108px!important;
max-height:48px!important}

.footer-site-logo {
width:130px!important;
max-height:60px!important}

}

/* FOOTER MARKETPLACE — RAPAPIKAN LOGO + TEKS SEBARIS */
footer .footer-marketplace-logo {
width:28px!important;
height:28px!important;
min-width:28px!important;
flex:0 0 28px!important;
display:block!important;
object-fit:contain!important;
margin:0!important;
}

footer > div:nth-child(4) > a {
display:flex!important;
align-items:center!important;
gap:9px!important;
white-space:nowrap!important;
line-height:1.2!important;
min-height:36px!important;
text-decoration:none!important;
}

footer > div:nth-child(4) > a img {
vertical-align:middle!important;
}

footer > div:nth-child(4) {
min-width:190px!important;
}

@media(max-width:760px) {
footer > div:nth-child(4) {
min-width:0!important;
}

footer > div:nth-child(4) > a {
white-space:normal!important;
}

}

/* FORCE FOOTER MARKETPLACE INLINE ALIGNMENT */
footer .footer-marketplace-text {
display:inline-block!important;
white-space:nowrap!important;
vertical-align:middle!important;
line-height:28px!important;
}

footer .footer-marketplace-logo {
display:inline-block!important;
width:28px!important;
height:28px!important;
min-width:28px!important;
max-width:28px!important;
object-fit:contain!important;
vertical-align:middle!important;
margin:0 8px 0 0!important;
}

footer > div:nth-child(4) > a {
display:flex!important;
flex-direction:row!important;
align-items:center!important;
flex-wrap:nowrap!important;
gap:0!important;
width:max-content!important;
max-width:100%!important;
white-space:nowrap!important;
}

/* FOOTER MARKETPLACE — MATCH SHOPEE & TOKOPEDIA VISUAL SIZE */
footer .footer-marketplace-logo,
footer .footer-tokopedia-logo {
width:32px!important;
height:32px!important;
min-width:32px!important;
max-width:32px!important;
flex:0 0 32px!important;
object-fit:contain!important;
display:block!important;
box-sizing:border-box!important;
padding:0!important;
}

/* FOOTER TOKOPEDIA — SAMAKAN UKURAN VISUAL DENGAN SHOPEE */
footer .footer-tokopedia-logo {
width:32px!important;
height:32px!important;
transform:scale(1.38)!important;
transform-origin:center!important;
}

/* FINAL WHATSAPP FLOAT — CLEAN PROPORTIONAL EXPANSION */
.wa-float {
position:fixed!important;
right:22px!important;
bottom:22px!important;
z-index:99999!important;
box-sizing:border-box!important;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:flex-start!important;
gap:11px!important;
width:58px!important;
height:58px!important;
padding:0 12px!important;
overflow:hidden!important;
border:0!important;
border-radius:29px!important;
background:#19a463!important;
color:#fff!important;
box-shadow:0 8px 24px rgba(13,92,52,.24)!important;
transition:width .25s ease,transform .2s ease,box-shadow .25s ease!important;
text-decoration:none!important;
}

.wa-float .wa-icon {
width:34px!important;
height:34px!important;
min-width:34px!important;
flex:0 0 34px!important;
display:grid!important;
place-items:center!important;
border-radius:50%!important;
background:transparent!important;
color:#fff!important;
padding:0!important;
}

.wa-float .wa-icon svg {
width:34px!important;
height:34px!important;
display:block!important;
}

.wa-float .wa-text {
display:block!important;
flex:0 0 auto!important;
width:auto!important;
margin:0!important;
padding:0!important;
white-space:nowrap!important;
font-size:13px!important;
font-weight:800!important;
line-height:1!important;
letter-spacing:.01em!important;
opacity:0!important;
transform:translateX(6px)!important;
transition:opacity .18s ease .05s,transform .2s ease .05s!important;
}

.wa-float:hover,
.wa-float:focus-visible {
width:285px!important;
transform:translateY(-2px)!important;
box-shadow:0 12px 30px rgba(13,92,52,.30)!important;
}

.wa-float:hover .wa-text,
.wa-float:focus-visible .wa-text {
opacity:1!important;
transform:translateX(0)!important;
}

@media(max-width:760px) {
.wa-float {
right:16px!important;
bottom:16px!important;
width:54px!important;
height:54px!important;
padding:0 10px!important;
border-radius:27px!important;
}

.wa-float .wa-icon,
.wa-float .wa-icon svg {
width:32px!important;
height:32px!important;
min-width:32px!important;
}

.wa-float:hover,
.wa-float:focus-visible {
width:260px!important;
}

.wa-float .wa-text {
font-size:12px!important}

}

/* FINAL WHATSAPP — PROVIDED ICON + CLEAR LABEL */
.wa-float {
width:60px!important;
height:60px!important;
padding:0 13px!important;
gap:12px!important;
border-radius:30px!important;
background:#19a463!important;
}

.wa-float .wa-icon {
width:34px!important;
height:34px!important;
min-width:34px!important;
flex:0 0 34px!important;
background:transparent!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}

.wa-float .wa-icon img {
display:block!important;
width:34px!important;
height:34px!important;
max-width:none!important;
object-fit:contain!important;
}

.wa-float .wa-text {
color:#fff!important;
font-size:14px!important;
font-weight:800!important;
letter-spacing:.01em!important;
line-height:1.25!important;
text-shadow:0 1px 2px rgba(0,0,0,.18)!important;
}

.wa-float:hover,
.wa-float:focus-visible {
width:320px!important;
padding-right:22px!important;
}

@media(max-width:760px) {
.wa-float {
width:56px!important;
height:56px!important;
padding:0 12px!important;
border-radius:28px!important;
}

.wa-float .wa-icon,
.wa-float .wa-icon img {
width:32px!important;
height:32px!important;
min-width:32px!important;
}

.wa-float:hover,
.wa-float:focus-visible {
width:285px!important;
}

.wa-float .wa-text {
font-size:12px!important;
}

}

\n/* CATALOG 2026 */\n.catalog-shell {
padding-top:8px}

.catalog-toolbar-modern {
display:grid;
gap:18px;
margin-bottom:30px}

.catalog-search {
display:flex;
align-items:center;
gap:10px;
max-width:760px;
min-height:54px;
padding:7px 9px 7px 15px;
border:1px solid var(--line);
border-radius:16px;
background:#fff;
box-shadow:0 8px 25px rgba(18,59,42,.06)}

.catalog-search .header-search-icon {
position:static;
display:grid;
place-items:center;
width:28px;
height:28px;
flex:0 0 28px}

.catalog-search .header-search-icon svg {
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:2}

.catalog-search input {
border:0;
outline:0;
flex:1;
min-width:0;
background:transparent;
font:inherit;
color:var(--ink)}

.catalog-search button {
border:0;
border-radius:10px;
padding:9px 13px;
background:var(--green-light);
color:var(--green-dark);
font-weight:800;
cursor:pointer}

.catalog-meta {
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
color:var(--muted);
font-size:14px}

.catalog-meta a {
font-weight:800;
color:var(--green-dark)}

.catalog-chips {
display:flex;
flex-wrap:wrap;
gap:9px}

.catalog-chips button {
border:1px solid var(--line);
background:#fff;
color:var(--ink);
border-radius:999px;
padding:9px 14px;
font:inherit;
font-weight:700;
cursor:pointer;
transition:.18s ease}

.catalog-chips button:hover,.catalog-chips button.active {
background:var(--green);
border-color:var(--green);
color:#fff}

.catalog-grid {
grid-template-columns:repeat(4,minmax(0,1fr))}

.catalog-product-card .product-image {
aspect-ratio:1/1;
display:flex;
align-items:center;
justify-content:center;
background:var(--green-soft);
overflow:hidden}

.catalog-product-card .product-image img {
width:100%;
height:100%;
object-fit:cover}

.catalog-product-card .product-info h3 {
min-height:3.2em}

.catalog-product-card .product-info strong {
display:block;
margin-top:8px;
font-size:17px;
color:var(--green-dark)}

@media(max-width:1100px) {
.catalog-grid {
grid-template-columns:repeat(3,minmax(0,1fr))}

}

@media(max-width:760px) {
.catalog-grid {
grid-template-columns:repeat(2,minmax(0,1fr))}

.catalog-meta {
align-items:flex-start;
flex-direction:column}

.catalog-search {
max-width:none}

.catalog-chips {
flex-wrap:nowrap;
overflow:auto;
padding-bottom:5px}

.catalog-chips button {
white-space:nowrap}

.catalog-product-card .product-info h3 {
min-height:auto}

}

@media(max-width:520px) {
.catalog-grid {
grid-template-columns:1fr}

}


/* PRODUCT PHOTO PRESENTATION */
.catalog-product-card .product-image {
position:relative;
aspect-ratio:1/1!important;
padding:18px!important;
background:linear-gradient(145deg,#f7fbf8,#edf5ef)!important;
}

.catalog-product-card .product-image:after {
content:"ANIMO LABEL";
position:absolute;
left:14px;
bottom:12px;
padding:5px 8px;
border-radius:999px;
background:rgba(255,255,255,.88);
color:var(--green-dark);
font-size:9px;
font-weight:900;
letter-spacing:.1em;
pointer-events:none;
}

.catalog-product-card .product-image img {
width:100%!important;
height:100%!important;
object-fit:contain!important;
mix-blend-mode:multiply;
filter:contrast(1.04) saturate(.98);
transition:transform .35s ease,filter .35s ease;
}

.catalog-product-card:hover .product-image img {
transform:scale(1.045);
filter:contrast(1.08) saturate(1.02);
}

.catalog-product-card .product-info {
padding:20px 20px 22px!important;
}

.catalog-product-card .product-info small {
display:inline-block;
padding:5px 9px;
border-radius:999px;
background:var(--ffffff);
color:var(--ffffff);
font-size:10px;
font-weight:900;
letter-spacing:.08em;
}

.catalog-product-card .product-info h3 {
font-size:19px!important;
line-height:1.3!important;
margin:11px 0 8px!important;
}

.catalog-product-card .product-info p {
min-height:3.4em;
font-size:14px!important;
}

.catalog-product-card .product-info .text-link {
display:inline-block;
margin-top:12px;
color:var(--green-dark);
}

@media(max-width:760px) {
.catalog-product-card .product-image {
padding:12px!important}

.catalog-product-card .product-info {
padding:16px!important}

.catalog-product-card .product-info h3 {
font-size:16px!important}

.catalog-product-card .product-info p {
font-size:13px!important}

}

/* STATIC PRODUCT DETAIL */
.static-product-detail {
max-width:1180px;
margin:0 auto;
padding:56px 24px 90px;
min-height:65vh}

.detail-breadcrumb {
margin-bottom:24px}

.detail-breadcrumb a {
color:var(--white,ffffff);
font-weight:700;
text-decoration:none}

.static-detail-grid {
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
gap:56px;
align-items:start}

.detail-photo-panel {
position:sticky;
top:24px}

.detail-photo {
background:linear-gradient(145deg,#f8fbf9,#eef5f1);
border:1px solid #e2ebe6;
border-radius:28px;
min-height:560px;
display:flex;
align-items:center;
justify-content:center;
padding:38px;
box-shadow:0 18px 50px rgba(18,65,43,.08)}

.detail-photo img {
width:100%;
height:480px;
object-fit:contain;
mix-blend-mode:multiply;
filter:contrast(1.04) saturate(1.04)}

.detail-photo-note {
font-size:13px;
color:#6d7b73;
margin-top:12px}

.detail-copy {
padding:20px 0}

.detail-copy>small {
text-transform:uppercase;
letter-spacing:.12em;
font-weight:800;
color:#16834a}

.detail-copy h1 {
font-size:clamp(32px,4vw,54px);
line-height:1.05;
margin:14px 0 20px;
letter-spacing:-.035em}

.detail-copy>p {
font-size:18px;
line-height:1.75;
color:#53615a;
margin-bottom:22px}

.detail-price {
font-size:25px;
font-weight:850;
color:#111;
margin:20px 0 28px}

.detail-actions {
display:flex;
flex-wrap:wrap;
gap:12px}

.detail-actions .btn {
min-height:48px}

.detail-shop {
border:1px solid #d7e2dc!important;
background:#fff!important;
color:#163126!important}

.detail-note {
margin-top:28px;
padding:18px 20px;
border-left:4px solid #16834a;
background:#f4f8f5;
color:#58655f;
line-height:1.65;
border-radius:0 14px 14px 0}

.detail-loading,.detail-not-found {
text-align:center;
padding:100px 20px}

.detail-not-found h1 {
font-size:42px;
margin-bottom:10px}

.product-card-actions {
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:8px}

.product-card-actions .text-link {
margin-top:0}

@media(max-width:850px) {
.static-product-detail {
padding:34px 18px 65px}

.static-detail-grid {
grid-template-columns:1fr;
gap:25px}

.detail-photo-panel {
position:static}

.detail-photo {
min-height:360px;
padding:24px;
border-radius:22px}

.detail-photo img {
height:320px}

.detail-copy {
padding:4px 0}

.detail-copy h1 {
font-size:34px}

.detail-copy>p {
font-size:16px}

}

/* CMS-backed dynamic product gallery */
.product-detail {
max-width:1180px;
margin:0 auto;
padding:52px 24px 90px}

.product-detail .detail-breadcrumb {
margin-bottom:24px}

.product-detail .detail-breadcrumb a {
color:#16834a;
font-weight:800;
text-decoration:none}

.dynamic-detail-grid {
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
gap:54px;
align-items:start}

.dynamic-gallery {
min-width:0}

.dynamic-main-photo {
height:560px;
border:1px solid #e2ebe6;
border-radius:28px;
background:linear-gradient(145deg,#f8fbf9,#eef5f1);
display:flex;
align-items:center;
justify-content:center;
padding:35px;
box-shadow:0 18px 50px rgba(18,65,43,.08)}

.dynamic-main-photo img {
width:100%;
height:100%;
object-fit:contain;
mix-blend-mode:multiply;
transition:opacity .18s ease}

.dynamic-thumbs {
display:grid;
grid-template-columns:repeat(6,1fr);
gap:10px;
margin-top:14px}

.dynamic-thumb {
height:92px;
padding:5px;
border:1px solid #dce6e0;
background:#fff;
border-radius:12px;
cursor:pointer}

.dynamic-thumb.active {
border:2px solid #16834a;
box-shadow:0 0 0 2px rgba(22,131,74,.1)}

.dynamic-thumb img {
width:100%;
height:100%;
object-fit:contain}

.gallery-caption {
font-size:13px;
color:#75817b;
margin:10px 2px 0}

.dynamic-detail-copy {
padding:20px 0}

.dynamic-detail-copy>small {
color:#16834a;
font-weight:900;
text-transform:uppercase;
letter-spacing:.11em}

.dynamic-detail-copy h1 {
font-size:clamp(32px,4vw,54px);
line-height:1.06;
letter-spacing:-.035em;
margin:14px 0 20px}

.dynamic-detail-copy>p {
font-size:18px;
line-height:1.75;
color:#53615a}

@media(max-width:850px) {
.product-detail {
padding:34px 18px 65px}

.dynamic-detail-grid {
grid-template-columns:1fr;
gap:28px}

.dynamic-main-photo {
height:380px;
padding:22px;
border-radius:22px}

.dynamic-thumbs {
grid-template-columns:repeat(5,1fr)}

.dynamic-thumb {
height:72px}

.dynamic-detail-copy {
padding:0}

.dynamic-detail-copy h1 {
font-size:34px}

.dynamic-detail-copy>p {
font-size:16px}

}
/* =====================================================
   DETAIL PRODUK — CLEAN PRODUCT PHOTO
===================================================== */

.dynamic-main-photo {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    min-height: 560px;
    height: 560px;

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

    padding: 35px;

    background: #ffffff !important;

    border: 1px solid #e5e5e5;
    border-radius: 28px;

    box-shadow: 0 12px 35px rgba(0,0,0,.06);
}

/* Tidak ada overlay */
.dynamic-main-photo::before,
.dynamic-main-photo::after {
    content: none !important;
    display: none !important;
}

/* =====================================================
   FOTO PRODUK
===================================================== */

.product-image-area {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.product-image-area > #dynamicMainPhoto {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;
}


/* =====================================================
   THUMBNAIL
===================================================== */

.dynamic-thumb {
    background: #ffffff !important;
    border: 1px solid #e2e2e2;
    box-shadow: none;
}

.dynamic-thumb:hover {
    background: #ffffff !important;
}

.dynamic-thumb.active {
    background: #ffffff !important;
    border: 2px solid #16834a;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.dynamic-thumb img {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

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

@media(max-width:850px) {

    .dynamic-main-photo {
        min-height: 380px;
        height: 380px;
        padding: 22px;
        border-radius: 22px;
        background: #ffffff !important;
    }

    .dynamic-main-photo img {
        max-width: 94%;
        max-height: 94%;
    }

}

/* PREMIUM CATALOG PAGE */
.pagehead {
max-width:1500px;
margin:0 auto;
padding:78px 5% 46px;
background:
radial-gradient(circle at 88% 20%,rgba(214,240,225,.72),transparent 28%),
linear-gradient(180deg,#fbfefc 0%,#fff 100%);
}

.pagehead small {
color:var(--green);
font-size:12px;
letter-spacing:.18em;
font-weight:900}

.pagehead h1 {
max-width:850px;
font-size:clamp(42px,5.2vw,68px);
line-height:1.02;
letter-spacing:-.045em;
margin:12px 0 16px}

.pagehead p {
max-width:760px;
color:var(--muted);
font-size:17px;
line-height:1.75;
margin:0}

.catalog-shell {
max-width:none;
padding:28px 5% 110px;
background:#f7faf8;
border-top:1px solid #edf3ef;
}

.catalog-toolbar-modern {
max-width:1500px;
margin:0 auto 34px;
padding:22px;
background:rgba(255,255,255,.92);
border:1px solid var(--line);
border-radius:22px;
box-shadow:0 12px 35px rgba(18,59,42,.055);
}

.catalog-toolbar-modern .catalog-search {
max-width:none;
height:52px;
}

.catalog-toolbar-modern .catalog-search input {
border-radius:14px;
background:#fbfdfc;
padding:0 17px;
}

.catalog-toolbar-modern .catalog-search button {
min-width:100px;
}

.catalog-meta {
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:2px 2px 0;
color:var(--muted);
font-size:14px;
font-weight:700;
}

.catalog-meta a {
color:var(--green-dark);
font-weight:850;
}

.catalog-chips {
padding-top:4px;
display:flex;
gap:9px;
flex-wrap:wrap;
}

.catalog-chips button {
border:1px solid #dce8e1;
background:#fff;
color:#53635a;
border-radius:999px;
padding:9px 15px;
font:inherit;
font-size:13px;
font-weight:800;
cursor:pointer;
transition:.2s ease;
}

.catalog-chips button:hover {
transform:translateY(-1px);
border-color:#b8d9c4;
color:var(--green-dark);
}

.catalog-chips button.active {
background:var(--ink-strong);
border-color:var(--ink-strong);
color:#fff;
box-shadow:0 7px 18px rgba(11,42,29,.12);
}

.catalog-grid {
max-width:1500px;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:22px;
}

.catalog-product-card {
border:1px solid #e0e9e3;
border-radius:20px;
box-shadow:0 8px 25px rgba(18,59,42,.045);
background:#fff;
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.catalog-product-card:hover {
transform:translateY(-5px);
border-color:#c8ddd0;
box-shadow:0 18px 40px rgba(18,59,42,.11);
}

.catalog-product-card .product-image {
aspect-ratio:1/1;
padding:20px!important;
border-bottom:1px solid #edf2ee;
background:
radial-gradient(circle at 50% 15%,rgba(255,255,255,.98),transparent 40%),
linear-gradient(145deg,#f9fcfa,#edf5f0)!important;
}

.catalog-product-card .product-image:after {
left:12px;
bottom:11px;
font-size:8px;
padding:4px 7px;
}

.catalog-product-card .product-info {
padding:18px 19px 20px!important;
}

.catalog-product-card .product-info h3 {
font-size:18px!important;
line-height:1.28!important;
margin:10px 0 7px!important;
min-height:46px;
}

.catalog-product-card .product-info p {
min-height:48px;
font-size:13.5px!important;
line-height:1.55!important;
color:#6a776f;
margin:0 0 8px!important;
}

.catalog-product-card .product-info strong {
font-size:16px!important;
margin-top:10px!important;
}

.product-card-actions {
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px 15px;
margin-top:13px;
padding-top:12px;
border-top:1px solid #edf2ee;
}

.product-card-actions .text-link {
font-size:13px;
margin:0!important;
}

.cta-modern {
margin:0 5% 90px;
max-width:1400px;
margin-left:auto;
margin-right:auto;
border-radius:26px;
}

@media(max-width:1100px) {
.catalog-grid {
grid-template-columns:repeat(3,minmax(0,1fr))}

.header {
gap:20px}

}

@media(max-width:850px) {
.pagehead {
padding:58px 5% 34px}

.catalog-shell {
padding:22px 4% 75px}

.catalog-toolbar-modern {
padding:17px;
border-radius:18px}

.catalog-grid {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:15px}

.catalog-product-card .product-image {
padding:13px!important}

.catalog-product-card .product-info {
padding:15px!important}

.catalog-product-card .product-info h3 {
font-size:16px!important;
min-height:42px}

.catalog-product-card .product-info p {
font-size:12.5px!important;
min-height:0}

}

@media(max-width:560px) {
.pagehead h1 {
font-size:40px}

.pagehead p {
font-size:15px}

.catalog-meta {
align-items:flex-start;
flex-direction:column;
gap:8px}

.catalog-search {
grid-template-columns:1fr auto!important}

.catalog-search button {
min-width:auto}

.catalog-grid {
grid-template-columns:1fr 1fr;
gap:12px}

.catalog-product-card {
border-radius:16px}

.catalog-product-card .product-image {
padding:9px!important}

.catalog-product-card .product-info {
padding:13px!important}

.catalog-product-card .product-info small {
font-size:8px;
padding:4px 6px}

.catalog-product-card .product-info h3 {
font-size:14px!important;
min-height:36px}

.catalog-product-card .product-info p {
display:none}

.catalog-product-card .product-info strong {
font-size:14px!important}

.product-card-actions {
gap:6px;
margin-top:10px;
padding-top:9px}

.product-card-actions .text-link {
font-size:11px}

}

/* CLEAN PROFESSIONAL PRODUCT PHOTO TREATMENT */
.catalog-product-card .product-image {
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
aspect-ratio:1/1!important;
padding:24px!important;
background:
radial-gradient(circle at 50% 25%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.78) 30%,transparent 62%),
linear-gradient(180deg,#ffffff 0%,#f7faf8 72%,#eef4f0 100%)!important;
}

.catalog-product-card .product-image:before {
content:"";
position:absolute;
left:14%;
right:14%;
bottom:12%;
height:14%;
border-radius:50%;
background:rgba(33,70,50,.075);
filter:blur(18px);
pointer-events:none;
}

.catalog-product-card .product-image:after {
content:"ANIMO LABEL";
position:absolute;
left:12px;
bottom:10px;
padding:4px 7px;
border-radius:6px;
background:rgba(255,255,255,.88);
border:1px solid rgba(216,230,222,.9);
color:#47715a;
font-size:8px;
font-weight:900;
letter-spacing:.1em;
line-height:1;
pointer-events:none;
}

.catalog-product-card .product-image img {
position:relative;
z-index:2;
width:100%!important;
height:100%!important;
object-fit:contain!important;
mix-blend-mode:multiply;
filter:contrast(1.015) saturate(.96);
transition:transform .3s ease,filter .3s ease;
}

.catalog-product-card:hover .product-image img {
transform:scale(1.025);
filter:contrast(1.03) saturate(1);
}

.catalog-product-card .product-info small {
background:#f0f7f3!important;
border:1px solid #e0ece5;
color:#32714d!important;
}

/* Shared premium polish for CMS-backed pages */
.header-search-submit {
font-size:12px}

.main-nav a.active {
color:var(--green-dark)}

.category-strip {
position:relative;
z-index:10}

.category-strip-inner {
scrollbar-width:none}

.category-strip-inner::-webkit-scrollbar {
display:none}

.pagehead {
border-bottom:1px solid #e8efeb}

.product-card {
border-radius:18px}

.product-card .product-info {
padding:20px}

.empty-state {
max-width:760px;
margin:40px auto;
padding:55px 30px;
text-align:center;
background:#fff;
border:1px dashed #cddbd3;
border-radius:20px}

.pagination {
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
margin:38px auto 0;
max-width:1500px}

.pagination>div {
display:flex;
gap:7px}

.pagination a {
padding:9px 13px;
border:1px solid var(--line);
border-radius:10px;
background:#fff;
font-weight:800}

.pagination a.active {
background:var(--ink-strong);
color:#fff;
border-color:var(--ink-strong)}

@media(max-width:850px) {
.pagination {
flex-wrap:wrap}

.pagination>div {
order:3;
width:100%;
justify-content:center}

.pagination>a {
font-size:13px}

}
/* =========================================================
WHATSAPP — HUBUNGI KAMI DI FOOTER
Khusus footer, tidak mempengaruhi WhatsApp floating
========================================================= */

.footer-whatsapp-section{
margin-top:22px!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
}

.footer-whatsapp-section .footer-marketplace-title{
display:block!important;
margin:0 0 10px 0!important;
}

.footer-whatsapp-section .footer-whatsapp-link{
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
width:auto!important;
height:auto!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
}

.footer-whatsapp-section .footer-whatsapp-icon{
display:block!important;
width:52px!important;
height:52px!important;
max-width:52px!important;
max-height:52px!important;
margin:0!important;
padding:0!important;
object-fit:contain!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
transition:transform .2s ease!important;
}

.footer-whatsapp-section .footer-whatsapp-link:hover .footer-whatsapp-icon{
transform:translateY(-2px) scale(1.05)!important;
}

@media(max-width:760px){


.footer-whatsapp-section{
    margin-top:20px!important;
}

.footer-whatsapp-section .footer-whatsapp-icon{
    width:48px!important;
    height:48px!important;
    max-width:48px!important;
    max-height:48px!important;
}

/* =====================================================
   CATEGORY STRIP — DI ATAS BANNER
===================================================== */

.category-strip {
    position: relative;
    z-index: 20;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e5ece7;
}

.category-strip-inner {
    width: 92%;
    max-width: 1400px;
    min-height: 54px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.category-strip-inner::-webkit-scrollbar {
    display: none;
}

.category-strip-item {
    position: relative;

    flex: 0 0 auto;

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

    height: 54px;

    padding: 0 2px;

    color: #294438;
    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;
    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}

.category-strip-item::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background: #16834a;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .2s ease;
}

.category-strip-item:hover {
    color: #16834a;
    transform: translateY(-1px);
}

.category-strip-item:hover::after {
    transform: scaleX(1);
}


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

@media (max-width: 760px) {

    .category-strip-inner {
        width: 100%;
        min-height: 48px;

        justify-content: flex-start;

        gap: 24px;

        padding: 0 18px;
    }

    .category-strip-item {
        height: 48px;

        font-size: 13px;
    }