/* Root: hide everything after our content */
.dpg-root + *, .dpg-root ~ *{ display:none !important; }

/* Page padding so content isn't stuck to the edges */
.dpg-container { padding: 0 12px; }

/* Grid */
.dpg-grid{display:grid;gap:16px}
.dpg-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.dpg-cols-2{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Chips */
.dpg-chipsbar{position:relative;margin:6px 0 8px}
.dpg-chips{display:flex;gap:10px;overflow:auto;padding:8px 4px 4px;scroll-snap-type:x proximity}
.dpg-chips::-webkit-scrollbar{height:8px}
.dpg-chips::-webkit-scrollbar-track{background:transparent}
.dpg-chips::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:8px}
.dpg-chip{flex:0 0 auto;scroll-snap-align:start;height:30px;padding:0 12px;border-radius:999px;border:1.5px solid #e5e7eb;background:#fff;font-weight:800}
.dpg-chip:active{transform:translateY(1px)}
.dpg-chipsbar:before,.dpg-chipsbar:after{content:"";position:absolute;top:0;bottom:0;width:20px;pointer-events:none}
.dpg-chipsbar:before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.dpg-chipsbar:after{right:0;background:linear-gradient(-90deg,#fff,rgba(255,255,255,0))}

/* Promo banner */
.dpg-promo{margin:8px 0 6px; display:flex; justify-content:center}
.dpg-promo img{max-width:100%; height:auto; display:block; border-radius:18px; box-shadow:0 6px 18px rgba(27,47,68,.08)}

/* Card */
.dpg-card{background:#fff;border-radius:20px;box-shadow:0 6px 18px rgba(27,47,68,.08);overflow:hidden;display:flex;flex-direction:column}
.dpg-card *{box-sizing:border-box}
.dpg-card__media{position:relative;padding:16px 16px 8px;display:flex;justify-content:center;align-items:center;min-height:160px;background:#fff}
.dpg-img{width:140px;height:140px;border-radius:12px !important;object-fit:contain !important;background:#fff !important}
.dpg-price-badge{position:absolute;left:12px;top:10px;background:#ff3b30;color:#fff;border-radius:999px;padding:6px 10px;font-weight:700;font-size:14px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.dpg-pill{position:absolute;right:12px;bottom:10px;background:#fff;color:#1b5ebd;border-radius:999px;padding:2px 10px;font-size:12px;border:1.5px solid #cfe1ff;font-weight:600;height:24px;line-height:20px;display:inline-flex;align-items:center;justify-content:center}

/* Indicate clickable milk cards */
.dpg-card[data-direct-url]{cursor:pointer}

/* Badges */
.dpg-badges{position:absolute; left:10px; bottom:8px; display:flex; gap:6px; flex-wrap:wrap; max-width:70%}
.dpg-badge{background:#111827; color:#fff; border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; opacity:.92}

/* Body */
.dpg-card__body{padding:12px 16px 16px}
.dpg-title{font-size:16px;font-weight:700;line-height:1.3;margin:0 0 8px;height:42px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dpg-title a{text-decoration:none;color:inherit}
.dpg-price{font-weight:700;margin-bottom:12px}
.dpg-card__media .price{display:none !important}

.dpg-actions{min-height:44px}
.dpg-add{width:100%;height:44px;border:2px solid #16a34a;color:#16a34a;background:transparent;border-radius:999px;font-weight:800;letter-spacing:.2px}
.dpg-add:hover{background:#eaf7ef}

/* Borderless compact stepper */
.dpg-stepper{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0;border:none;background:transparent}
.dpg-stepper button{width:24px;height:24px;border:none;background:transparent;color:#16a34a;font-size:18px;line-height:1;border-radius:4px;outline:none;box-shadow:none}
.dpg-stepper .dpg-qty{min-width:18px;text-align:center;font-weight:800;font-size:13px;color:#0c8a2a}

/* Bottom sheet */
.dpg-sheet{position:fixed;inset:0;z-index:2147483647;display:none}
.dpg-sheet.is-open{display:block}
.dpg-sheet__scrim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.dpg-sheet__panel{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top-left-radius:20px;border-top-right-radius:20px;max-height:min(82vh,700px);overflow:auto;box-shadow:0 -8px 24px rgba(0,0,0,.18);padding-bottom:calc(env(safe-area-inset-bottom) + 96px)}
.dpg-sheet__header{display:flex;justify-content:space-between;align-items:center;padding:16px}
.dpg-sheet__content{padding:8px 12px 24px;overflow:auto;max-height:calc(min(82vh,700px) - 64px)}
.dpg-sheet__close{width:40px;height:40px;border-radius:999px;border:2px solid #e5e7eb;background:#fff;position:relative}
.dpg-sheet__close:before,.dpg-sheet__close:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:2px;background:#111827;border-radius:2px}
.dpg-sheet__close:before{transform:translate(-50%,-50%) rotate(45deg)}
.dpg-sheet__close:after{transform:translate(-50%,-50%) rotate(-45deg)}
.dpg-sheet__close:hover{background:#f9fafb}

/* Variants */
.dpg-variant{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee;padding:8px 4px}
.dpg-variant__img{width:48px;height:48px;border-radius:8px;object-fit:contain;background:#fff}
.dpg-variant__meta{flex:1;padding:0 10px}
.dpg-variant__name{font-size:14px;font-weight:600}
.dpg-variant__price{font-weight:700;margin-top:2px}
.dpg-variant__action button{height:32px;min-width:70px;padding:0 12px;border:2px solid #16a34a;border-radius:999px;background:transparent;color:#16a34a;font-weight:700;font-size:14px;line-height:30px;display:inline-flex;align-items:center;justify-content:center}

/* Load more */
.dpg-loadmore-wrap{display:flex;justify-content:center;margin:12px 0 24px}
.dpg-loadmore{--dpg-green:#16a34a; --dpg-green-050:#ecf8f0; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 16px; border-radius:999px; border:2px solid var(--dpg-green); background:#fff; color:var(--dpg-green); font-weight:800; letter-spacing:.15px; line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.05); transition:transform .06s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease}
.dpg-loadmore:hover{ background:var(--dpg-green-050); box-shadow:0 2px 6px rgba(0,0,0,.08) }
.dpg-loadmore:active{ transform:translateY(1px) }
.dpg-loadmore[disabled]{ opacity:.55; cursor:not-allowed; filter:saturate(.6) }
.dpg-loadmore.is-loading::after{content:""; width:16px; height:16px; border-radius:50%; border:2px solid rgba(22,163,74,.45); border-top-color:#16a34a; animation:dpg-spin .8s linear infinite}
@keyframes dpg-spin{ to{ transform:rotate(360deg) } }

/* Section head */
.dpg-section{margin:10px 0 16px}
.dpg-section__hdr{display:flex; align-items:center; justify-content:space-between; padding:2px 2px 6px}
.dpg-section__title{font-size:18px; font-weight:800; margin:0}
.dpg-seeall{font-weight:800; color:#16a34a; text-decoration:none}

/* Scrollbar polish (sheet) */
.dpg-sheet__content::-webkit-scrollbar{height:10px;width:10px}
.dpg-sheet__content::-webkit-scrollbar-track{background:#f1f5f9;border-radius:8px}
.dpg-sheet__content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px;border:2px solid #f1f5f9}
.dpg-sheet__content{scrollbar-width:thin; scrollbar-color:#cbd5e1 #f1f5f9}
html.dpg-lock, body.dpg-lock{overflow:hidden}