* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --cyan: #0cc0d8;
    --cyan-dark: #08aec8;
    --blue: #1739cf;
    --blue-dark: #1530bd;
    --white: #fff;
    --header-h: 62px;
}

html {scroll-behavior: smooth}
body {font-family: 'Sofia Sans', sans-serif;color: #fff;overflow-x: hidden;background: #08bfd8}
img {max-width: 100%;display: block}
a {color: inherit;text-decoration: none}
.site-header {position: fixed;inset: 0 0 auto 0;width: 100%;height: var(--header-h);background: #05C3DE;z-index: 1000;box-shadow: 0 2px 7px rgba(0,0,0,.18)}
.header-inner {width: min(1180px, 94%);height: 100%;margin: auto;display: flex;align-items: center;justify-content: space-between}
.brand {width: 102px;display: flex;align-items: center; transform: translateY(12px)}
.brand img {width: 102px;height: auto}
.main-nav {display: flex;align-items: center;gap: 38px;font-size: 14px;transform: translateX(-420px);font-family: 'Poppins', sans-serif}
.main-nav a {transition: opacity .2s ease, transform .2s ease}
.main-nav a:hover {opacity: .75;transform: translateY(-1px)}
.menu-toggle {display: none;border: 0;background: transparent;width: 38px;height: 38px;cursor: pointer}
.menu-toggle span {width: 24px;height: 2px;background: #fff;display: block;margin: 5px auto}
.hero {position: relative;min-height: clamp(500px, 53vw, 770px);margin-top: var(--header-h);overflow: hidden;background:linear-gradient(180deg, rgba(72,190,238,.08), rgba(255,255,255,0)),url("../images/image1.svg") center center / cover no-repeat}
.hero-content {width: min(1440px, 100%);min-height: inherit;margin: auto;position: relative}
.hero-copy {position: absolute;z-index: 4;width: 39%;left: 7%;top: 25%}
.hero-title-image {width: 100%}
.hero-hashtag {width: 43%;margin: 30px 0 0 15%}
.hero-visual {position: absolute;z-index: 5;width: 27%;left: 43%;top: 10%}
.hero-visual img {width: 100%;filter: drop-shadow(8px 15px 18px rgba(0,0,0,.18))}
.hero-people {position: absolute;z-index: 4;width: 43%;right: 5%;bottom: 0}
.hero-people img {width: 100%}

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

.about {position: relative;min-height: clamp(610px, 57vw, 715px);overflow: hidden;background:url("../images/image2.svg") center center / cover no-repeat}
.about::before,
.about::after {content: "";position: absolute;pointer-events: none;inset: 0;background:url("../images/about-decor.png") center / cover no-repeat;opacity: .3}
.about-inner {position: relative;z-index: 2;width: min(980px, 90%);margin: auto;text-align: center;padding: clamp(60px, 6vw, 95px) 0 45px}
.about h1 {font-size: clamp(44px, 6vw, 90px);line-height: .95;letter-spacing: 2px;font-weight: 800}
.about-subtitle {margin-top: 12px;font-size: clamp(13px, 1.7vw, 22px);letter-spacing: 3px}
.about-text {max-width: 930px;margin: 42px auto 0;font-size: clamp(29.90px, 1.2vw, 34px);line-height: 1.5}
.quality-list {display: flex;justify-content: center;gap: clamp(35px, 6vw, 90px);margin-top: 38px}
.quality-item {width: 120px;text-align: center;font-size: 15px;line-height: 1.1}
.quality-icon {width: 82px;height: 82px;margin: auto auto 10px}
.quality-icon img {width: 100%;height: 100%;object-fit: contain}
.quality-item:hover .quality-icon,
.quality-item.active .quality-icon {background: #ffffff;border-color: #00CDF6;border-radius: 50%;overflow: hidden;transform: scale(1.08);box-shadow:0 0 0 2px rgba(32, 200, 232, 0.15)}
.quality-item:hover .quality-icon img,
.quality-item.active .quality-icon img {filter:brightness(0)saturate(100%)invert(70%)sepia(90%)saturate(1500%)hue-rotate(155deg)brightness(100%)contrast(100%);transform: scale(1.02)}
.quality-item:hover strong,
.quality-item.active strong {color: #ffffff;transform: translateY(3px)}

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

.products { position: relative; overflow: visible; width: 100%; height: 780px; background-image: url("../images/image11.png"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%}
.products-bg {position: absolute;inset: 0;opacity: .65}
.products-inner {width: min(1150px, 92%);margin: auto;position: relative;z-index: 2;padding-top: clamp(35px, 4vw, 60px)}
.product-features {display: grid;grid-template-columns: 1.5fr .55fr .55fr 1.5fr;align-items: center;gap: 20px;text-align: center}
.feature:first-child {flex: 0 0 37%;margin-right: -100px}
.feature:last-child {flex: 0 0 37%;margin-left: -100px}
.feature p {max-width: 400px;margin: auto;font-size: clamp(20px, 1.1vw, 18px);line-height: 1.35;font-weight: 500}
.feature-icon {width: 82px;margin: auto}
.feature-icon img {width: 100%}
.product-showcase {min-height: 430px;display: flex;align-items: flex-end;justify-content: center;gap: 3px;padding-top: 30px;transform: translateY(clamp(-250px, -11.0vw, -91px));overflow: visible !important}
.product-card {flex: 0 0 auto;display: flex;align-items: flex-end;justify-content: center;margin-left: -1px;margin-right: -1px;position: relative;overflow: visible !important;cursor: pointer}
.product-card.botol350 {width: 6%}
.product-card.botol1500 {width: 9%}
.product-card.botol1000 {width: 8.5%}
.product-card.botol600 {width: 8%}
.product-card.botol330 {width: 6%}
.product-card.botol220 {width: 5%}
.product-card.galon {width: 22%}
.product-card.cup {width: 12%}
.product-card img {width: 100%;height: auto;object-fit: contain;display: block;filter:drop-shadow(0 8px 8px rgba(0,0,0,.12))}
.product-card:hover {z-index: 10000}
.product-card:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto}
.popup-category {margin:0 0 4px 0;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 13px;line-height: 18px;font-weight: 500;letter-spacing: 1.5px;color: #163ed4;text-transform: uppercase}
.popup-title {margin:0 0 14px 0;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 22px;line-height: 27px;font-weight: 600;color: #12365d;white-space: nowrap}
.popup-title2 {margin:0 0 14px 0;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 15px;line-height: 2px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
.popup-buy {width: 100%;height: 51px;padding: 0;margin: 0;border: none;border-radius: 28px;background: #113ACA;color: #ffffff;display: flex;align-items: center;justify-content: center;gap: 11px;font-family:"Poppins",sans-serif;font-size: 16px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background .2s ease,transform .15s ease}
.popup-buy {transition:background .2s ease,box-shadow .2s ease,transform .15s ease}
.popup-buy:hover {background: #1238c5;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.30)}
.popup-buy:active {transform: scale(.98)}
.bag-icon {position: relative;display: inline-block;width: 17px;height: 18px;border:1.8px solid #ffffff;border-radius: 2px;box-sizing: border-box;flex-shrink: 0}
.bag-icon::before {content: "";position: absolute;left: 50%;top: -7px;width: 8px;height: 7px;transform:translateX(-50%);border:1.8px solid #ffffff;border-bottom: 0;border-radius:8px 8px 0 0;box-sizing: border-box}
.product-card img {transition:transform .25s ease;transform-origin:center bottom}
.product-card.galon:hover img {transform: translateY(-8px)}
.product-card.botol350:hover img {transform: translateY(-8px)}
.product-card.botol1500:hover img {transform: translateY(-8px)}
.product-card.botol1000:hover img {transform: translateY(-8px)}
.product-card.botol600:hover img {transform: translateY(-8px)}
.product-card.botol330:hover img {transform: translateY(-8px)}
.product-card.botol220:hover img {transform: translateY(-8px)}
.product-card.cup:hover img {transform: translateY(-8px)}
.product-card.galon:hover,
.product-card.botol350:hover,
.product-card.botol1500:hover,
.product-card.botol1000:hover,
.product-card.botol600:hover,
.product-card.botol330:hover,
.product-card.botol220:hover,
.product-card.cup:hover {z-index: 10000}
.iconify {display: inline-flex;align-items: center;vertical-align: middle;margin-right: 5px;font-size: 28px;line-height: 1}
.iconify2 {font-size: 24px;display: flex;align-items: center;justify-content: center}
iconify-icon {display: inline-flex;align-items: center;vertical-align: middle;margin-right: 5px;font-size: 28px;line-height: 1}

.product-plus {position: absolute;width: 16px;height: 16px;display: flex;align-items: center;justify-content: center;border: 1.5px solid #fff;border-radius: 50%;color: #fff;background: transparent;font-family: Arial, sans-serif;font-size: 16px;font-weight: 400;line-height: 1;z-index: 20;box-sizing: border-box;pointer-events: none}
.product-card.galon .product-plus {top: 165px;right: 75px}
.product-card.botol350 .product-plus {top: 191px;right: -1px}
.product-card.botol1500 .product-plus {top: 202px;right: 6px}
.product-card.botol1000 .product-plus {top: 215px;right: -1px}
.product-card.botol600 .product-plus {top: 193px;right: 12px}
.product-card.botol330 .product-plus {top: 205px;right: -5px}
.product-card.botol220 .product-plus {top: 172px;right: -8px}
.product-card.cup .product-plus {top: 154px;right: 48px}
.product-card:hover .product-plus {background: #113ACA;border-color: #113ACA;color: #fff;transform: translateY(-8px) scale(1.08)}

.product-popup {position: absolute;left: 50%;bottom: 78%;width: 248px;height: 166px;box-sizing: border-box;transform:translateX(-50%)translateY(0);background: #ffffff;border-radius: 20px;box-shadow:0 4px 0 rgba(0, 0, 0, 0.16),0 7px 10px
rgba(0, 0, 0, 0.12);padding:14px 17px 16px;opacity: 0;visibility: hidden;pointer-events: none;z-index: 99999;transition:opacity .18s ease,visibility .18s ease}
.product-popup::after {content: "";position: absolute;left: 50%;bottom: -10px;width: 20px;height: 20px;background: #ffffff;transform:translateX(-50%)rotate(45deg);box-shadow:4px 4px 4px
rgba(0, 0, 0, 0.10);z-index: -1}

.product-card.botol350 .product-popup {position: absolute;left: 50%;bottom: 62%;width: 248px;height: 166px;box-sizing: border-box;transform: translateX(-50%) translateY(8px);background: #ffffff;border-radius: 20px;box-shadow:0 4px 0 rgba(0, 0, 0, 0.16),0 7px 10px rgba(0, 0, 0, 0.12);
 padding: 14px 17px 16px;opacity: 0;visibility: hidden;pointer-events: none;z-index: 99999;transition:opacity 0.18s ease,visibility 0.18s ease,transform 0.18s ease}
.product-card.botol350 .product-popup::after {content: "";position: absolute;left: 50%;bottom: -9px;width: 18px;height: 18px;background: #ffffff;transform: translateX(-50%) rotate(45deg);z-index: -1}
.product-card.botol350 .popup-category {margin: 0 0 4px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 13px;line-height: 18px;font-weight: 500;letter-spacing: 1.5px;color: #163ed4;text-transform: uppercase}
.product-card.botol350 .popup-title {margin: 0 0 10px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 22px;line-height: 27px;font-weight: 600;color: #12365d;white-space: nowrap}
.product-card.botol350 .popup-title2 {margin: 0 0 14px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 15px;line-height: 18px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
.product-card.botol350 .popup-buy {width: 100%;height: 43px;padding: 0;margin: 0;border: none;border-radius: 28px;background: #113ACA;color: #ffffff;display: flex;align-items: center;justify-content: center;gap: 11px;font-family: 'Poppins', sans-serif;font-size: 14px;line-height: 1;font-weight: 500;
 cursor: pointer;box-sizing: border-box;transition:background 0.2s ease,box-shadow 0.2s ease,transform 0.15s ease}
.product-card.botol350 .popup-buy .iconify {font-size: 22px}
.product-card.botol350 .popup-buy:hover {background: #1238c5;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.20)}
.product-card.botol350 .popup-buy:active {transform: scale(0.98)}
.product-card.botol350:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto;transform: translateX(-50%) translateY(0)}

.product-card.botol1500 .product-popup {position: absolute;left: 50%;bottom: 72%;width: 248px;height: 166px;box-sizing: border-box;transform: translateX(-50%) translateY(8px);background: #ffffff;border-radius: 20px;box-shadow:0 4px 0 rgba(0, 0, 0, 0.16),0 7px 10px rgba(0, 0, 0, 0.12);padding: 14px 17px 16px;opacity: 0;visibility: hidden;
 pointer-events: none;z-index: 99999;transition:opacity 0.18s ease,visibility 0.18s ease,transform 0.18s ease}
.product-card.botol1500 .product-popup::after {content: "";position: absolute;left: 50%;bottom: -9px;width: 18px;height: 18px;background: #ffffff;transform: translateX(-50%) rotate(45deg);z-index: -1}
.product-card.botol1500 .popup-category {margin: 0 0 4px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 13px;line-height: 18px;font-weight: 500;letter-spacing: 1.5px;color: #163ed4;text-transform: uppercase}
.product-card.botol1500 .popup-title {margin: 0 0 10px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 22px;line-height: 27px;font-weight: 600;color: #12365d;white-space: nowrap}
.product-card.botol1500 .popup-title2 {margin: 0 0 14px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 15px;line-height: 18px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
.product-card.botol1500 .popup-buy {width: 100%;height: 43px;padding: 0;margin: 0;border: none;border-radius: 28px;background: #113ACA;color: #ffffff;display: flex;align-items: center;
justify-content: center;gap: 11px;font-family: 'Poppins', sans-serif;font-size: 14px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background 0.2s ease,box-shadow 0.2s ease,transform 0.15s ease}
.product-card.botol1500 .popup-buy .iconify {font-size: 22px}
.product-card.botol1500 .popup-buy:hover {background: #1238c5;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.20)}
.product-card.botol1500 .popup-buy:active {transform: scale(0.98)}
.product-card.botol1500:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto;transform: translateX(-50%) translateY(0)}

.product-card.botol1000 .product-popup {position: absolute;left: 50%;bottom: 66%;width: 248px;height: 166px;box-sizing: border-box;transform: translateX(-50%) translateY(8px);background: #ffffff;border-radius: 20px;box-shadow:0 4px 0 rgba(0, 0, 0, 0.16),0 7px 10px rgba(0, 0, 0, 0.12);padding: 14px 17px 16px;opacity: 0;visibility: hidden;
 pointer-events: none;z-index: 99999;transition:opacity 0.18s ease,visibility 0.18s ease,transform 0.18s ease}
.product-card.botol1000 .product-popup::after {content: "";position: absolute;left: 50%;bottom: -9px;width: 18px;height: 18px;background: #ffffff;transform: translateX(-50%) rotate(45deg);z-index: -1}
.product-card.botol1000 .popup-category {margin: 0 0 4px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 13px;line-height: 18px;font-weight: 500;letter-spacing: 1.5px;color: #163ed4;text-transform: uppercase}
.product-card.botol1000 .popup-title {margin: 0 0 10px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 22px;line-height: 27px;font-weight: 600;color: #12365d;white-space: nowrap}
.product-card.botol1000 .popup-title2 {margin: 0 0 14px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 15px;line-height: 18px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
.product-card.botol1000 .popup-buy {width: 100%;height: 43px;padding: 0;margin: 0;border: none;border-radius: 28px;background: #113ACA;color: #ffffff;display: flex;align-items: center;
justify-content: center;gap: 11px;font-family: 'Poppins', sans-serif;font-size: 14px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background 0.2s ease,box-shadow 0.2s ease,transform 0.15s ease}
.product-card.botol1000 .popup-buy .iconify {font-size: 22px}
.product-card.botol1000 .popup-buy:hover {background: #1238c5;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.20)}
.product-card.botol1000 .popup-buy:active {transform: scale(0.98)}
.product-card.botol1000:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto;transform: translateX(-50%) translateY(0)}

.product-card.botol600 .product-popup {position: absolute;left: 50%;bottom: 64%;width: 248px;height: 166px;box-sizing: border-box;transform: translateX(-50%) translateY(8px);background: #ffffff;border-radius: 20px;box-shadow:0 4px 0 rgba(0, 0, 0, 0.16),0 7px 10px rgba(0, 0, 0, 0.12);padding: 14px 17px 16px;opacity: 0;visibility: hidden;
 pointer-events: none;z-index: 99999;transition:opacity 0.18s ease,visibility 0.18s ease,transform 0.18s ease}
.product-card.botol600 .product-popup::after {content: "";position: absolute;left: 50%;bottom: -9px;width: 18px;height: 18px;background: #ffffff;transform: translateX(-50%) rotate(45deg);z-index: -1}
.product-card.botol600 .popup-category {margin: 0 0 4px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 13px;line-height: 18px;font-weight: 500;letter-spacing: 1.5px;color: #163ed4;text-transform: uppercase}
.product-card.botol600 .popup-title {margin: 0 0 10px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 22px;line-height: 27px;font-weight: 600;color: #12365d;white-space: nowrap}
.product-card.botol600 .popup-title2 {margin: 0 0 14px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 15px;line-height: 18px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
.product-card.botol600 .popup-buy {width: 100%;height: 43px;padding: 0;margin: 0;border: none;border-radius: 28px;background: #113ACA;color: #ffffff;display: flex;align-items: center;
justify-content: center;gap: 11px;font-family: 'Poppins', sans-serif;font-size: 14px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background 0.2s ease,box-shadow 0.2s ease,transform 0.15s ease}
.product-card.botol600 .popup-buy .iconify {font-size: 22px}
.product-card.botol600 .popup-buy:hover {background: #1238c5;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.20)}
.product-card.botol600 .popup-buy:active {transform: scale(0.98)}
.product-card.botol600:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto;transform: translateX(-50%) translateY(0)}

.product-card.botol330 .product-popup {position: absolute;left: 50%;bottom: 58%;width: 248px;height: 166px;box-sizing: border-box;transform: translateX(-50%) translateY(8px);background: #ffffff;border-radius: 20px;box-shadow:0 4px 0 rgba(0, 0, 0, 0.16),0 7px 10px rgba(0, 0, 0, 0.12);padding: 14px 17px 16px;opacity: 0;visibility: hidden;
 pointer-events: none;z-index: 99999;transition:opacity 0.18s ease,visibility 0.18s ease,transform 0.18s ease}
.product-card.botol330 .product-popup::after {content: "";position: absolute;left: 50%;bottom: -9px;width: 18px;height: 18px;background: #ffffff;transform: translateX(-50%) rotate(45deg);z-index: -1}
.product-card.botol330 .popup-category {margin: 0 0 4px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 13px;line-height: 18px;font-weight: 500;letter-spacing: 1.5px;color: #163ed4;text-transform: uppercase}
.product-card.botol330 .popup-title {margin: 0 0 10px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 22px;line-height: 27px;font-weight: 600;color: #12365d;white-space: nowrap}
.product-card.botol330 .popup-title2 {margin: 0 0 14px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 15px;line-height: 18px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
.product-card.botol330 .popup-buy {width: 100%;height: 43px;padding: 0;margin: 0;border: none;border-radius: 28px;background: #113ACA;color: #ffffff;display: flex;align-items: center;
justify-content: center;gap: 11px;font-family: 'Poppins', sans-serif;font-size: 14px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background 0.2s ease,box-shadow 0.2s ease,transform 0.15s ease}
.product-card.botol330 .popup-buy .iconify {font-size: 22px}
.product-card.botol330 .popup-buy:hover {background: #1238c5;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.20)}
.product-card.botol330 .popup-buy:active {transform: scale(0.98)}
.product-card.botol330:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto;transform: translateX(-50%) translateY(0)}

.product-card.botol220 .product-popup {position: absolute;left: 50%;bottom: 57%;width: 248px;height: 166px;box-sizing: border-box;transform: translateX(-50%) translateY(8px);background: #ffffff;border-radius: 20px;box-shadow:0 4px 0 rgba(0, 0, 0, 0.16),0 7px 10px rgba(0, 0, 0, 0.12);padding: 14px 17px 16px;opacity: 0;visibility: hidden;
 pointer-events: none;z-index: 99999;transition:opacity 0.18s ease,visibility 0.18s ease,transform 0.18s ease}
.product-card.botol220 .product-popup::after {content: "";position: absolute;left: 50%;bottom: -9px;width: 18px;height: 18px;background: #ffffff;transform: translateX(-50%) rotate(45deg);z-index: -1}
.product-card.botol220 .popup-category {margin: 0 0 4px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 13px;line-height: 18px;font-weight: 500;letter-spacing: 1.5px;color: #163ed4;text-transform: uppercase}
.product-card.botol220 .popup-title {margin: 0 0 10px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 22px;line-height: 27px;font-weight: 600;color: #12365d;white-space: nowrap}
.product-card.botol220 .popup-title2 {margin: 0 0 14px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 15px;line-height: 18px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
.product-card.botol220 .popup-buy {width: 100%;height: 43px;padding: 0;margin: 0;border: none;border-radius: 28px;background: #113ACA;color: #ffffff;display: flex;align-items: center;
justify-content: center;gap: 11px;font-family: 'Poppins', sans-serif;font-size: 14px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background 0.2s ease,box-shadow 0.2s ease,transform 0.15s ease}
.product-card.botol220 .popup-buy .iconify {font-size: 22px}
.product-card.botol220 .popup-buy:hover {background: #1238c5;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.20)}
.product-card.botol220 .popup-buy:active {transform: scale(0.98)}
.product-card.botol220:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto;transform: translateX(-50%) translateY(0)}

.product-card.cup .product-popup {position: absolute;left: 50%;bottom: 52%;width: 248px;height: 166px;box-sizing: border-box;transform: translateX(-50%) translateY(8px);background: #ffffff;border-radius: 20px;box-shadow:0 4px 0 rgba(0, 0, 0, 0.16),0 7px 10px rgba(0, 0, 0, 0.12);padding: 14px 17px 16px;opacity: 0;visibility: hidden;
 pointer-events: none;z-index: 99999;transition:opacity 0.18s ease,visibility 0.18s ease,transform 0.18s ease}
.product-card.cup .product-popup::after {content: "";position: absolute;left: 50%;bottom: -9px;width: 18px;height: 18px;background: #ffffff;transform: translateX(-50%) rotate(45deg);z-index: -1}
.product-card.cup .popup-category {margin: 0 0 4px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 13px;line-height: 18px;font-weight: 500;letter-spacing: 1.5px;color: #163ed4;text-transform: uppercase}
.product-card.cup .popup-title {margin: 0 0 10px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 22px;line-height: 27px;font-weight: 600;color: #12365d;white-space: nowrap}
.product-card.cup .popup-title2 {margin: 0 0 14px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 15px;line-height: 18px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
.product-card.cup .popup-buy {width: 100%;height: 43px;padding: 0;margin: 0;border: none;border-radius: 28px;background: #113ACA;color: #ffffff;display: flex;align-items: center;
justify-content: center;gap: 11px;font-family: 'Poppins', sans-serif;font-size: 14px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background 0.2s ease,box-shadow 0.2s ease,transform 0.15s ease}
.product-card.cup .popup-buy .iconify {font-size: 22px}
.product-card.cup .popup-buy:hover {background: #1238c5;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.20)}
.product-card.cup .popup-buy:active {transform: scale(0.98)}
.product-card.cup:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto;transform: translateX(-50%) translateY(0)}

/* ================= FOOTER ================= */

.site-footer {background: #05C3DE;min-height: 300px;padding: 50px 0 15px}
.footer-inner {width: min(1080px, 90%);margin: auto;display: grid;grid-template-columns: 1.3fr 1fr 1.1fr;gap: 60px}
.footer-brand img {width: 120px}
.footer-menu,
.footer-contact {display: flex;flex-direction: column;gap: 22px;font-size: 18px;font-family: 'Poppins', sans-serif}
.socials {display: flex;gap: 20px;font-size: 28px;font-weight: bold;margin-bottom: 15px;transform: translateY(-10px)}
.footer-contact h4 {margin-bottom: -7px;font-size: 16px;font-family: 'Poppins', sans-serif}
.footer-bottom {width: min(1080px, 90%);margin: 45px auto 0;padding-top: 13px;border-top: 1px solid rgba(255,255,255,.8);font-size: 13px;font-family: 'Poppins', sans-serif}


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

@media (max-width: 1032px) {
    :root {--header-h: 58px}
    .main-nav {display: flex;align-items: center;gap: 38px;font-size: 14px;transform: translateX(-150px);font-family: 'Poppins', sans-serif}
    .hero{height: 400px;min-height: 420px}
    .hero-copy {width: 44%;left: 5%;top: 27%}
    .hero-visual {width: 28%;left: 41%;top: 14%}
    .hero-people {width: 49%;right: 1%}
    .about {height: 560px;min-height: 560px}
    .about h1 {font-size: clamp(48px, 8vw, 92px);line-height: .95;letter-spacing: 2px;font-weight: 800}
    .about-text {font-size: 23px}
    .feature p {max-width: 250px;margin: auto;font-size: clamp(12px, 1.1vw, 8px);line-height: 1.35;font-weight: 500}
    .feature:first-child {flex: 0 0 37%;margin-right: -80px}
    .feature:last-child {flex: 0 0 37%;margin-left: -80px}
    .products-inner {width: 94%;padding-top: 100px}
    .product-plus {display: none !important}
    .product-showcase {min-height: 250px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-top: 10px; transform: translateY(-80px);overflow: visible !important}
    .footer-contact span {margin-bottom: -7px;font-size: 13px;font-family: 'Poppins', sans-serif}
    iconify-icon {display: inline-flex;align-items: center;vertical-align: middle;margin-right: 5px;font-size: 20px;line-height: 1}
}


@media (max-width: 900px) {
    :root {--header-h: 58px}
    .main-nav {display: flex;align-items: center;gap: 38px;font-size: 14px;transform: translateX(-150px);font-family: 'Poppins', sans-serif}
    .hero{height: 400px;min-height: 420px}
    .hero-copy {width: 44%;left: 5%;top: 27%}
    .hero-visual {width: 28%;left: 41%;top: 14%}
    .hero-people {width: 49%;right: 1%}
    .about {height: 560px;min-height: 560px}
    .about h1 {font-size: clamp(48px, 8vw, 92px);line-height: .95;letter-spacing: 2px;font-weight: 800}
    .about-text {font-size: 23px}
    .feature p {max-width: 250px;margin: auto;font-size: clamp(12px, 1.1vw, 8px);line-height: 1.35;font-weight: 500}
    .feature:first-child {flex: 0 0 37%;margin-right: -50px}
    .feature:last-child {flex: 0 0 37%;margin-left: -50px}
    .products-inner {width: 94%;padding-top: 100px}
    .product-plus {display: none !important}
    .product-showcase {min-height: 250px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-top: 10px; transform: translateY(60px);overflow: visible !important}
    .footer-contact span {margin-bottom: -7px;font-size: 13px;font-family: 'Poppins', sans-serif}
    iconify-icon {display: inline-flex;align-items: center;vertical-align: middle;margin-right: 5px;font-size: 20px;line-height: 1}
    .product-popup {left: 50%;bottom: 80%}
    .product-card.botol350 .product-popup {left: 50%;bottom: 65%}
    .product-card.botol1500 .product-popup {left: 50%;bottom: 76%}
    .product-card.botol1000 .product-popup {left: 50%;bottom: 70%}
    .product-card.botol600 .product-popup {left: 50%;bottom: 68%}
    .product-card.botol330 .product-popup {left: 50%;bottom: 63%}
    .product-card.botol220 .product-popup {left: 50%;bottom: 63%}
    .product-card.cup .product-popup {left: 50%;bottom: 62%}
}

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

@media (max-width: 700px) {
    .menu-toggle {display: block}
    .main-nav {position: absolute;top: var(--header-h);left: 0;width: 100%;background: #08b8d1;padding: 18px 25px 22px;display: none;flex-direction: column;align-items: flex-start;gap: 17px;box-shadow: 0 5px 12px rgba(0,0,0,.15)}
    .main-nav.open {display: flex}
    .brand,
    .brand img {width: 67px}
    .hero {min-height: 570px;background-position: center center}
    .hero-copy {width: 57%;left: 5%;top: 18%}
    .hero-hashtag {width: 48%;margin-top: 18px;margin-left: 12%}
    .hero-visual {width: 31%;left: 42%;top: 22%}
    .hero-people {width: 73%;right: -4%;bottom: 0}
    .about {min-height: 650px}
    .about-inner {width: 91%;padding-top: 55px}
    .about h1 {font-size: clamp(38px, 11vw, 60px);letter-spacing: 1px}
    .about-subtitle {font-size: 12px;letter-spacing: 2px}
    .about-text {margin-top: 28px;font-size: 16px;line-height: 1.55}
    .quality-list {gap: 18px;margin-top: 30px}
    .quality-item {width: 92px;font-size: 12px}
    .quality-icon {width: 67px;height: 67px}
    .products {min-height: 610px}
    .product-features {grid-template-columns: 1fr 1fr;gap: 20px 10px}
    .feature:nth-child(1) {grid-column: 1}
    .feature:nth-child(4) {grid-column: 2}
    .feature-icon {width: 65px}
    .feature p {max-width: 200px;margin: auto;font-size: clamp(11px, 1.1vw, 9px);line-height: 1.35;font-weight: 500}
    .product-showcase {min-height: 300px;gap: 1px;align-items: flex-end;padding-top: 25px}
    .product-card {width: 14%}
    .product-card.galon {width: 29%}
    .product-card.cup {width: 15%}
    .footer-inner {grid-template-columns: 1fr 1fr;gap: 35px}
    .footer-contact {grid-column: 1 / -1}
}

/* ================= SMALL PHONE ================= */

@media (max-width: 480px) {

    .hero{height: 200px;min-height: 220px}
    .hero-copy {width: 61%;top: 17%}
    .hero-visual {width: 32%;left: 44%;top: 25%}
    .hero-people {width: 76%;right: -8%}
    .about {height: 360px;min-height: 380px}
    .about-inner {padding-top: 45px}
    .about h1 {font-size: clamp(38px, 5vw, 75px);line-height: .95;letter-spacing: 2px;font-weight: 800}
    .about-subtitle {margin-top: 12px;font-size: clamp(9px, 1.1vw, 14px);letter-spacing: 2px}
    .about-text {font-size: 11.5px}
    .quality-list {gap: 4px}
    .quality-item {width: 82px;font-size: 10px}
    .quality-icon {width: 55px;height: 55px}
    .products {position: relative;width: 100%;height: 80px;background-image: url("../images/image20.png");background-repeat: no-repeat;background-position: center top;background-size: 100% 100%}
    .products-bg {position: absolute;inset: 0;opacity: .65}
    .products-inner {width: min(1150px, 92%);margin: auto;position: relative;z-index: 2;padding-top: 60px}
    /*.product-showcase {min-height: 250px;display: flex;align-items: flex-end;justify-content: center;gap: 3px;padding-top: 30px;transform: translateY(clamp(-170px, -12vw, 120px));overflow: visible !important}*/
    .product-showcase {min-height: 250px;display: flex;align-items: flex-end;justify-content: center;gap: 3px;padding-top: 35px;transform: translateX(20px) translateY(clamp(-170px, -12vw, 120px));overflow: visible !important}
    .product-popup {position: absolute;left: 50%;bottom: 78%;width: 82px;height: 53px;box-sizing: border-box;transform: translateX(-50%) translateY(0);background: #fff;border-radius: 6px;box-shadow:0 1px 0 rgba(0, 0, 0, .12),0 2px 4px rgba(0, 0, 0, .10);padding: 3px 4px;opacity: 0;visibility: hidden;pointer-events: none;z-index: 99999;transition: opacity .18s ease, visibility .18s ease}
    .product-popup::after {content: "";position: absolute;left: 50%;bottom: -3px;width: 6px;height: 6px;background: #fff;transform: translateX(-50%) rotate(45deg);box-shadow: 1px 1px 1px rgba(0, 0, 0, .08);z-index: -1}
    .product-card:hover {z-index: 10000}
    .product-card:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto}
    .popup-category {margin: 0 0 1px;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 500;letter-spacing: .3px;color: #163ed4;text-transform: uppercase}
    .popup-title {margin: 0 0 2px;font-family: 'Sofia Sans', sans-serif;font-size: 6.5px;line-height: 7px;font-weight: 600;color: #12365d;white-space: nowrap}
    .popup-title2 {margin: 0 0 2px;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
    .popup-buy {width: 100%;height: 14px;padding: 0;border: none;border-radius: 7px;background: #113ACA;color: #fff;display: flex;align-items: center;justify-content: center;gap: 2px;font-family: "Poppins", sans-serif;font-size: 4.5px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background .2s ease,box-shadow .2s ease,transform .15s ease}
    .popup-buy:hover {background: #1238c5;box-shadow: 0 2px 3px rgba(0, 0, 0, .18)}
    .popup-buy:active {transform: scale(.98)}
    .bag-icon {position: relative;display: inline-block;width: 5px;height: 6px;border: .7px solid #fff;border-radius: 1px;box-sizing: border-box;flex-shrink: 0}
    .bag-icon::before {content: "";position: absolute;left: 50%;top: -3px;width: 3px;height: 2.5px;transform: translateX(-50%);border: .7px solid #fff;border-bottom: 0;border-radius: 3px 3px 0 0;box-sizing: border-box}
    .iconify {display: inline-flex;align-items: center;vertical-align: middle;margin-right: 3px;font-size: 6.5px;line-height: 1;transform: translateY(-1px)}
    .product-plus {position: absolute;width: 9px;height: 9px;display: flex;align-items: center;justify-content: center;border: 1.5px solid #fff;border-radius: 50%;color: #fff;background: transparent;font-family: Arial, sans-serif;font-size: 9px;font-weight: 300;line-height: 1;z-index: 20;box-sizing: border-box;pointer-events: none; display: none !important}
    .footer-inner {grid-template-columns: 1fr;text-align: center}
    .footer-brand img {margin: auto}
    .footer-menu,
    .footer-contact {align-items: center}

    .header-inner {position: relative;display: flex;align-items: center;justify-content: space-between}
    .menu-toggle {display: flex !important;flex-direction: column;justify-content: center;align-items: center;gap: 5px;width: 42px;height: 42px;padding: 0;margin-left: auto;border: none;background: transparent;cursor: pointer;position: relative;z-index: 10001}
    .menu-toggle span {display: block !important;width: 28px;height: 3px;margin: 0;background: #fff;border-radius: 3px;transition: all .3s ease}
    .main-nav {position: absolute !important;top: 100% !important;left: 0 !important;width: 100% !important;display: flex !important;flex-direction: column !important;align-items: stretch !important;background: #05C3DE !important;padding: 10px 0 !important;box-sizing: border-box;z-index: 10000;opacity: 0;visibility: hidden;pointer-events: none;transform: translateY(-10px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease;box-shadow: 0 5px 15px rgba(0,0,0,.15)}
    .main-nav.active {opacity: 1 !important;visibility: visible !important;pointer-events: auto !important;transform: translateY(0)}
    .main-nav a {display: block !important;width: 100% !important;padding: 14px 25px !important;box-sizing: border-box;color: #fff !important;text-decoration: none !important;font-size: 16px}
    .main-nav a:hover {background: #f5f5f5}
    .menu-toggle.active span:nth-child(1) {transform: translateY(8px) rotate(45deg)}
    .menu-toggle.active span:nth-child(2) {opacity: 0}
    .menu-toggle.active span:nth-child(3) {transform: translateY(-8px) rotate(-45deg)}   

    .product-card.botol350 .product-popup {position: absolute;left: 50%;bottom: 66%;width: 82px;height: 53px;box-sizing: border-box;transform: translateX(-50%) translateY(0);background: #fff;border-radius: 6px;box-shadow:
     0 1px 0 rgba(0, 0, 0, .12),0 2px 4px rgba(0, 0, 0, .10);padding: 3px 4px;opacity: 0;visibility: hidden;pointer-events: none;z-index: 99999;transition:opacity .18s ease,visibility .18s ease}
    .product-card.botol350 .product-popup::after {content: "";position: absolute;left: 50%;bottom: -3px;width: 6px;height: 6px;background: #fff;transform: translateX(-50%) rotate(45deg);box-shadow: 1px 1px 1px rgba(0, 0, 0, .08);z-index: -1}
    .product-card.botol350:hover {z-index: 10000}
    .product-card.botol350:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto}
    .product-card.botol350 .popup-category {margin: 0 0 1px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 500;letter-spacing: .3px;color: #163ed4;text-transform: uppercase}
    .product-card.botol350 .popup-title {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 6.5px;line-height: 7px;font-weight: 600;color: #12365d;white-space: nowrap}
    .product-card.botol350 .popup-title2 {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
    .product-card.botol350 .popup-buy {width: 100%;height: 14px;padding: 0;margin: 0;border: none;border-radius: 7px;background: #113ACA;color: #fff;display: flex;align-items: center;justify-content: center;
     gap: 2px;font-family: 'Poppins', sans-serif;font-size: 4.5px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background .2s ease,box-shadow .2s ease,transform .15s ease}
    .product-card.botol350 .popup-buy .iconify {font-size: 7px}
    .product-card.botol350 .popup-buy:hover {background: #1238c5;box-shadow: 0 2px 3px rgba(0, 0, 0, .18)}
    .product-card.botol350 .popup-buy:active {transform: scale(.98)}

    .product-card.botol1500 .product-popup {position: absolute;left: 50%;bottom: 76%;width: 82px;height: 53px;box-sizing: border-box;transform: translateX(-50%) translateY(0);background: #fff;border-radius: 6px;box-shadow:
     0 1px 0 rgba(0, 0, 0, .12),0 2px 4px rgba(0, 0, 0, .10);padding: 3px 4px;opacity: 0;visibility: hidden;pointer-events: none;z-index: 99999;transition:opacity .18s ease,visibility .18s ease}
    .product-card.botol1500 .product-popup::after {content: "";position: absolute;left: 50%;bottom: -3px;width: 6px;height: 6px;background: #fff;transform: translateX(-50%) rotate(45deg);box-shadow: 1px 1px 1px rgba(0, 0, 0, .08);z-index: -1}
    .product-card.botol1500:hover {z-index: 10000}
    .product-card.botol1500:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto}
    .product-card.botol1500 .popup-category {margin: 0 0 1px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 500;letter-spacing: .3px;color: #163ed4;text-transform: uppercase}
    .product-card.botol1500 .popup-title {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 6.5px;line-height: 7px;font-weight: 600;color: #12365d;white-space: nowrap}
    .product-card.botol1500 .popup-title2 {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
    .product-card.botol1500 .popup-buy {width: 100%;height: 14px;padding: 0;margin: 0;border: none;border-radius: 7px;background: #113ACA;color: #fff;display: flex;align-items: center;justify-content: center;
     gap: 2px;font-family: 'Poppins', sans-serif;font-size: 4.5px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background .2s ease,box-shadow .2s ease,transform .15s ease}
    .product-card.botol1500 .popup-buy .iconify {font-size: 7px}
    .product-card.botol1500 .popup-buy:hover {background: #1238c5;box-shadow: 0 2px 3px rgba(0, 0, 0, .18)}
    .product-card.botol1500 .popup-buy:active {transform: scale(.98)}

    .product-card.botol1000 .product-popup {position: absolute;left: 50%;bottom: 70%;width: 82px;height: 53px;box-sizing: border-box;transform: translateX(-50%) translateY(0);background: #fff;border-radius: 6px;box-shadow:
     0 1px 0 rgba(0, 0, 0, .12),0 2px 4px rgba(0, 0, 0, .10);padding: 3px 4px;opacity: 0;visibility: hidden;pointer-events: none;z-index: 99999;transition:opacity .18s ease,visibility .18s ease}
    .product-card.botol1000 .product-popup::after {content: "";position: absolute;left: 50%;bottom: -3px;width: 6px;height: 6px;background: #fff;transform: translateX(-50%) rotate(45deg);box-shadow: 1px 1px 1px rgba(0, 0, 0, .08);z-index: -1}
    .product-card.botol1000:hover {z-index: 10000}
    .product-card.botol1000:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto}
    .product-card.botol1000 .popup-category {margin: 0 0 1px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 500;letter-spacing: .3px;color: #163ed4;text-transform: uppercase}
    .product-card.botol1000 .popup-title {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 6.5px;line-height: 7px;font-weight: 600;color: #12365d;white-space: nowrap}
    .product-card.botol1000 .popup-title2 {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
    .product-card.botol1000 .popup-buy {width: 100%;height: 14px;padding: 0;margin: 0;border: none;border-radius: 7px;background: #113ACA;color: #fff;display: flex;align-items: center;justify-content: center;
     gap: 2px;font-family: 'Poppins', sans-serif;font-size: 4.5px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background .2s ease,box-shadow .2s ease,transform .15s ease}
    .product-card.botol1000 .popup-buy .iconify {font-size: 7px}
    .product-card.botol1000 .popup-buy:hover {background: #1238c5;box-shadow: 0 2px 3px rgba(0, 0, 0, .18)}
    .product-card.botol1000 .popup-buy:active {transform: scale(.98)}

    .product-card.botol600 .product-popup {position: absolute;left: 50%;bottom: 68%;width: 82px;height: 53px;box-sizing: border-box;transform: translateX(-50%) translateY(0);background: #fff;border-radius: 6px;box-shadow:
     0 1px 0 rgba(0, 0, 0, .12),0 2px 4px rgba(0, 0, 0, .10);padding: 3px 4px;opacity: 0;visibility: hidden;pointer-events: none;z-index: 99999;transition:opacity .18s ease,visibility .18s ease}
    .product-card.botol600 .product-popup::after {content: "";position: absolute;left: 50%;bottom: -3px;width: 6px;height: 6px;background: #fff;transform: translateX(-50%) rotate(45deg);box-shadow: 1px 1px 1px rgba(0, 0, 0, .08);z-index: -1}
    .product-card.botol600:hover {z-index: 10000}
    .product-card.botol600:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto}
    .product-card.botol600 .popup-category {margin: 0 0 1px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 500;letter-spacing: .3px;color: #163ed4;text-transform: uppercase}
    .product-card.botol600 .popup-title {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 6.5px;line-height: 7px;font-weight: 600;color: #12365d;white-space: nowrap}
    .product-card.botol600 .popup-title2 {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
    .product-card.botol600 .popup-buy {width: 100%;height: 14px;padding: 0;margin: 0;border: none;border-radius: 7px;background: #113ACA;color: #fff;display: flex;align-items: center;justify-content: center;
     gap: 2px;font-family: 'Poppins', sans-serif;font-size: 4.5px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background .2s ease,box-shadow .2s ease,transform .15s ease}
    .product-card.botol600 .popup-buy .iconify {font-size: 7px}
    .product-card.botol600 .popup-buy:hover {background: #1238c5;box-shadow: 0 2px 3px rgba(0, 0, 0, .18)}
    .product-card.botol600 .popup-buy:active {transform: scale(.98)}

    .product-card.botol330 .product-popup {position: absolute;left: 50%;bottom: 62%;width: 82px;height: 53px;box-sizing: border-box;transform: translateX(-50%) translateY(0);background: #fff;border-radius: 6px;box-shadow:
     0 1px 0 rgba(0, 0, 0, .12),0 2px 4px rgba(0, 0, 0, .10);padding: 3px 4px;opacity: 0;visibility: hidden;pointer-events: none;z-index: 99999;transition:opacity .18s ease,visibility .18s ease}
    .product-card.botol330 .product-popup::after {content: "";position: absolute;left: 50%;bottom: -3px;width: 6px;height: 6px;background: #fff;transform: translateX(-50%) rotate(45deg);box-shadow: 1px 1px 1px rgba(0, 0, 0, .08);z-index: -1}
    .product-card.botol330:hover {z-index: 10000}
    .product-card.botol330:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto}
    .product-card.botol330 .popup-category {margin: 0 0 1px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 500;letter-spacing: .3px;color: #163ed4;text-transform: uppercase}
    .product-card.botol330 .popup-title {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 6.5px;line-height: 7px;font-weight: 600;color: #12365d;white-space: nowrap}
    .product-card.botol330 .popup-title2 {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
    .product-card.botol330 .popup-buy {width: 100%;height: 14px;padding: 0;margin: 0;border: none;border-radius: 7px;background: #113ACA;color: #fff;display: flex;align-items: center;justify-content: center;
     gap: 2px;font-family: 'Poppins', sans-serif;font-size: 4.5px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background .2s ease,box-shadow .2s ease,transform .15s ease}
    .product-card.botol330 .popup-buy .iconify {font-size: 7px}
    .product-card.botol330 .popup-buy:hover {background: #1238c5;box-shadow: 0 2px 3px rgba(0, 0, 0, .18)}
    .product-card.botol330 .popup-buy:active {transform: scale(.98)}

    .product-card.botol220 .product-popup {position: absolute;left: 50%;bottom: 64%;width: 82px;height: 53px;box-sizing: border-box;transform: translateX(-50%) translateY(0);background: #fff;border-radius: 6px;box-shadow:
     0 1px 0 rgba(0, 0, 0, .12),0 2px 4px rgba(0, 0, 0, .10);padding: 3px 4px;opacity: 0;visibility: hidden;pointer-events: none;z-index: 99999;transition:opacity .18s ease,visibility .18s ease}
    .product-card.botol220 .product-popup::after {content: "";position: absolute;left: 50%;bottom: -3px;width: 6px;height: 6px;background: #fff;transform: translateX(-50%) rotate(45deg);box-shadow: 1px 1px 1px rgba(0, 0, 0, .08);z-index: -1}
    .product-card.botol220:hover {z-index: 10000}
    .product-card.botol220:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto}
    .product-card.botol220 .popup-category {margin: 0 0 1px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 500;letter-spacing: .3px;color: #163ed4;text-transform: uppercase}
    .product-card.botol220 .popup-title {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 6.5px;line-height: 7px;font-weight: 600;color: #12365d;white-space: nowrap}
    .product-card.botol220 .popup-title2 {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
    .product-card.botol220 .popup-buy {width: 100%;height: 14px;padding: 0;margin: 0;border: none;border-radius: 7px;background: #113ACA;color: #fff;display: flex;align-items: center;justify-content: center;
     gap: 2px;font-family: 'Poppins', sans-serif;font-size: 4.5px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background .2s ease,box-shadow .2s ease,transform .15s ease}
    .product-card.botol220 .popup-buy .iconify {font-size: 7px}
    .product-card.botol220 .popup-buy:hover {background: #1238c5;box-shadow: 0 2px 3px rgba(0, 0, 0, .18)}
    .product-card.botol220 .popup-buy:active {transform: scale(.98)}

    .product-card.cup .product-popup {position: absolute;left: 50%;bottom: 58%;width: 82px;height: 53px;box-sizing: border-box;transform: translateX(-50%) translateY(0);background: #fff;border-radius: 6px;box-shadow:
     0 1px 0 rgba(0, 0, 0, .12),0 2px 4px rgba(0, 0, 0, .10);padding: 3px 4px;opacity: 0;visibility: hidden;pointer-events: none;z-index: 99999;transition:opacity .18s ease,visibility .18s ease}
    .product-card.cup .product-popup::after {content: "";position: absolute;left: 50%;bottom: -3px;width: 6px;height: 6px;background: #fff;transform: translateX(-50%) rotate(45deg);box-shadow: 1px 1px 1px rgba(0, 0, 0, .08);z-index: -1}
    .product-card.cup:hover {z-index: 10000}
    .product-card.cup:hover .product-popup {opacity: 1;visibility: visible;pointer-events: auto}
    .product-card.cup .popup-category {margin: 0 0 1px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 500;letter-spacing: .3px;color: #163ed4;text-transform: uppercase}
    .product-card.cup .popup-title {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 6.5px;line-height: 7px;font-weight: 600;color: #12365d;white-space: nowrap}
    .product-card.cup .popup-title2 {margin: 0 0 2px;padding: 0;font-family: 'Sofia Sans', sans-serif;font-size: 4.5px;line-height: 5px;font-weight: 400;color: #A1A1A1;white-space: nowrap}
    .product-card.cup .popup-buy {width: 100%;height: 14px;padding: 0;margin: 0;border: none;border-radius: 7px;background: #113ACA;color: #fff;display: flex;align-items: center;justify-content: center;
     gap: 2px;font-family: 'Poppins', sans-serif;font-size: 4.5px;line-height: 1;font-weight: 500;cursor: pointer;box-sizing: border-box;transition:background .2s ease,box-shadow .2s ease,transform .15s ease}
    .product-card.cup .popup-buy .iconify {font-size: 7px}
    .product-card.cup .popup-buy:hover {background: #1238c5;box-shadow: 0 2px 3px rgba(0, 0, 0, .18)}
    .product-card.cup .popup-buy:active {transform: scale(.98)}
}

@media (max-width: 360px) {

    .hero{height: 180px;min-height: 200px}
    .feature:first-child {flex: 0 0 37%;margin-right: -80px}
    .feature:last-child {flex: 0 0 37%;margin-left: -80px}
    .products-inner {width: min(1150px, 92%);margin: auto;position: relative;z-index: 2;padding-top: 60px}
    .product-card.cup .product-popup {position: absolute;left: 40%;bottom: 58%}
}



/* ================= 125% / 150% BROWSER ZOOM =================
   Layout uses percentages/clamp, so it remains usable at browser
   zoom levels without forcing horizontal scrolling. */
@media (min-resolution: 120dpi) and (max-width: 1280px) {
    .header-inner,
    .products-inner,
    .footer-inner {
        width: 92%;
    }
}