: ... This namespace prevents collisions with your sitewide styles. =================================================================== */ /* ---------- Design tokens (scoped) ---------- */ [data-hilltop] { --hilltop-brand: #1d3563; --hilltop-ink: #1b1f26; --hilltop-muted: #6b7280; --hilltop-bg: #fafafa; --hilltop-card: #ffffff; --hilltop-accent: #eaeef6; --hilltop-radius: 16px; --hilltop-border: #e5e7eb; --hilltop-shadow: 0 1px 2px rgba(0,0,0,.05); } /* ---------- Base (scoped reset & layout helpers) ---------- */ [data-hilltop] { color: var(--hilltop-ink); background: var(--hilltop-bg); } [data-hilltop] *, [data-hilltop] *::before, [data-hilltop] *::after { box-sizing: border-box; } [data-hilltop] .container { max-width: 1100px; margin: 0 auto; padding: 16px; } /* Typography: inherit your global font stack; avoid forcing custom families */ [data-hilltop] .h1 { font-size: clamp(28px, 5vw, 34px); line-height: 1.1; color: var(--hilltop-brand); margin: 0; } [data-hilltop] .small { font-size: 12px; color: var(--hilltop-muted); } /* Links (scoped) */ [data-hilltop] a { color: var(--hilltop-brand); text-decoration: none; } [data-hilltop] a:hover { text-decoration: underline; } /* ---------- Header & Tabs ---------- */ [data-hilltop] header { position: sticky; top: 0; background: var(--hilltop-card); border-bottom: 1px solid var(--hilltop-border); z-index: 10; } [data-hilltop] .badge { display:inline-block; padding:4px 8px; border-radius:999px; background:#DCFCE7; color:#166534; font-size:12px; margin-right:8px; } [data-hilltop] .promo { margin-top:6px; color: var(--hilltop-brand); font-weight:600; } [data-hilltop] .tabs { position: sticky; top: 76px; background: var(--hilltop-card); border-bottom:1px solid var(--hilltop-border); z-index: 9; overflow:auto; white-space:nowrap; } [data-hilltop] .tabs a { display:inline-block; padding:12px 16px; margin:0 4px; border-bottom:2px solid transparent; color: inherit; } [data-hilltop] .tabs a.active { border-color: var(--hilltop-brand); } /* 2-up by default on phones */ [data-hilltop] .grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; padding: 0px 16px 0px 16px;} /* ultra-narrow devices (older iPhones, small Androids) -> 1-up */ @media (max-width: 360px) { [data-hilltop] .grid { grid-template-columns:repeat(1, minmax(0,1fr)); } } /* tablets & up -> 3-up (your original desktop layout) */ @media (min-width: 900px) { [data-hilltop] .grid { grid-template-columns: repeat(3, minmax(0,1fr)); } [data-hilltop] .grid-checkout { grid-template-columns: 1fr !important; /* overrides the inline 1.2/.8 split */ gap: 16px; } /* optional: tighten padding a bit on small screens */ [data-hilltop] .grid-checkout .card, [data-hilltop] .grid-checkout aside.card { width: 100%; } } @media (max-width: 640px) { [data-hilltop] .card { padding:12px; } [data-hilltop] .thumb { border-radius:10px; } /* This targets the price + button row (it's the last direct

in your card) */ [data-hilltop] .grid .card > div:last-child { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; } /* Center the price above the button */ [data-hilltop] .grid .card > div:last-child .price { text-align: center; width: 100%; } /* Center the button and make it a comfy width on mobile */ [data-hilltop] .grid .card > div:last-child .btn { display: block; margin: 0 auto; width: 80%; max-width: 220px; } /* Tighter spacing on the price+button row */ [data-hilltop] .grid .card > div:last-child { gap: 6px; margin-top: 6px; } [data-hilltop] .btn { font-size: 13px; padding: 8px 12px; } [data-hilltop] #openCartHdr { display: none !important; } /* Make the button compact and not full-width */ [data-hilltop] .grid .card > div:last-child .btn { font-size: 13px; /* below h3(16) and above small(12) */ padding: 8px 12px; /* smaller hit area */ width: auto; /* no 80% width */ max-width: none; /* allow natural size */ } } [data-hilltop] .card { background: var(--hilltop-card); border: 1px solid var(--hilltop-border); border-radius: var(--hilltop-radius); padding: 16px; box-shadow: var(--hilltop-shadow); } [data-hilltop] .card h3 { margin: 8px 0 4px 0; } [data-hilltop] .price { color: var(--hilltop-brand); font-weight: 600; } /* --- Full-width responsive thumbnail --- */ [data-hilltop] .thumb { width: 100%; aspect-ratio: 4 / 3; /* uniform crop (try 3/2 or 16/9 to taste) */ height: auto; /* let aspect ratio define height */ border-radius: 12px; overflow: hidden; background: #e5e7eb; margin: 0 0 8px 0; } [data-hilltop] .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } [data-hilltop] .thumb .small { opacity: .7; text-transform: uppercase; letter-spacing: .02em; } /* ---------- Buttons ---------- */ [data-hilltop] .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; border:1px solid var(--hilltop-brand); padding:10px 14px; background: var(--hilltop-brand); color:#fff; cursor:pointer; } [data-hilltop] .btn.secondary { background:#fff; color:var(--hilltop-brand); } [data-hilltop] .btn.ghost { background:#fff; border-color: var(--hilltop-border); color: var(--hilltop-brand); } [data-hilltop] .btn.block { width: 100%; } /* Motion-safety */ @media (prefers-reduced-motion: reduce) { [data-hilltop] .btn, [data-hilltop] .tabs a, [data-hilltop] .drawer, [data-hilltop] .sticky-cart { transition: none !important; } } /* ---------- Quantity controls ---------- */ [data-hilltop] .qty { display:flex; align-items:center; gap:8px; } [data-hilltop] .qty button { width:32px; height:32px; border-radius:8px; border:1px solid var(--hilltop-border); background:#fff; cursor:pointer; } /* ---------- Sticky cart ---------- */ [data-hilltop] .sticky-cart { position: fixed; left: 0; right: 0; bottom: 0; background: var(--hilltop-brand); color:#fff; padding: 12px 16px; display:flex; justify-content:space-between; align-items:center; z-index: 20; gap:8px; flex-wrap: wrap; } [data-hilltop] .sticky-cart .btn { background:#fff; color:var(--hilltop-brand); } /* ---------- Drawer ---------- */ [data-hilltop] .drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter: blur(2px); display:none; z-index:30; } [data-hilltop] .drawer { position:fixed; top:0; right:-420px; width:100%; max-width:420px; height:100%; background: var(--hilltop-card); box-shadow:-8px 0 24px rgba(0,0,0,.15); transition:right .25s ease-in-out; z-index:31; display:flex; flex-direction:column; } [data-hilltop] .drawer.open { right: 0; } [data-hilltop] .drawer-header { padding:16px; border-bottom:1px solid var(--hilltop-border); display:flex; justify-content:space-between; align-items:center; } [data-hilltop] .drawer-body { padding:16px; overflow:auto; flex:1; } [data-hilltop] .drawer-footer { padding:16px; border-top:1px solid var(--hilltop-border); } [data-hilltop] .cart-line { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px dashed var(--hilltop-border); } [data-hilltop] .cart-line .name { font-weight: 600; } [data-hilltop] .remove-link { font-size:12px; color:#ef4444; background:#fee2e2; border:1px solid #fecaca; border-radius:8px; padding:4px 8px; cursor:pointer; } /* ---------- Scheduler ---------- */ [data-hilltop] .scheduler { background:#fff; border:1px solid var(--hilltop-border); border-radius:16px; padding:12px; margin:12px 0; display:flex; gap:12px; align-items:end; flex-wrap:wrap; } [data-hilltop] .scheduler .field { flex:1; min-width:200px; } [data-hilltop] .scheduler label { display:block; font-size:12px; color:var(--hilltop-muted); margin-bottom:4px; } [data-hilltop] .scheduler input[type="date"], [data-hilltop] .scheduler select { width:100%; padding:10px 12px; border:1px solid var(--hilltop-border); border-radius:10px; background: var(--hilltop-card); color: inherit; } [data-hilltop] .scheduler .status { font-size:12px; color:var(--hilltop-muted); } [data-hilltop] .scheduler .status.open { color:#166534; } [data-hilltop] .scheduler .status.closed { color:#b91c1c; } /* ---------- Forms ---------- */ [data-hilltop] input[type="text"], [data-hilltop] input[type="tel"], [data-hilltop] input[type="email"], [data-hilltop] select { width:100%; padding:12px; border:1px solid var(--hilltop-border); border-radius:10px; background: var(--hilltop-card); color: inherit; } /* ---------- Utilities ---------- */ [data-hilltop] .section { padding: 24px 0; } [data-hilltop] .hr { height:1px; background: var(--hilltop-border); margin:12px 0; } [data-hilltop] .tag { font-size:12px; color:#6b7280; background:#f3f4f6; border:1px solid var(--hilltop-border); padding:2px 8px; border-radius:999px; margin-left:8px; } [data-hilltop] .notice { background: var(--hilltop-accent); padding: 10px 12px; border-radius: 12px; } /* ---------- Footer (mock helper) ---------- */ [data-hilltop] .footer { padding:40px 0 100px; color: var(--hilltop-muted); text-align:center; } /* ---------- High-specificity guardrails ---------- */ /* Ensure mock drawer/sticky/cart elements render above common site elements */ [data-hilltop] .drawer, [data-hilltop] .drawer-backdrop, [data-hilltop] .sticky-cart { position: fixed; } [data-hilltop] .badge.open { color: #166534; background: #dcfce7; border: 1px solid #bbf7d0; } [data-hilltop] .badge.closed { color: #b91c1c; background: #fee2e2; border: 1px solid #fecaca; } [data-hilltop] .badge.info { color: #1d3563; background: #eaeef6; border: 1px solid #d7dfef; } /* ---- Customise Modal (single source of truth) ---- */ [data-hilltop] .modal { display: none; position: fixed; inset: 0; margin: auto; width: min(680px, 92%); max-height: 86vh; overflow: hidden; background: var(--hilltop-card, #fff); border: 1px solid var(--hilltop-border, #e5e7eb); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); z-index: 40; /* > drawer (31) & backdrop (30) */ flex-direction: column; } [data-hilltop] .modal.open { display: flex; } [data-hilltop] .modal-header, [data-hilltop] .modal-footer { padding: 16px; border-bottom: 1px solid var(--hilltop-border, #e5e7eb); } [data-hilltop] .modal-footer { border-bottom: none; border-top: 1px solid var(--hilltop-border, #e5e7eb); display:flex; justify-content:space-between; align-items:center; gap:12px; } [data-hilltop] .modal-body { padding: 16px; overflow: auto; } [data-hilltop] .opt-group { padding: 12px; border: 1px dashed var(--hilltop-border, #e5e7eb); border-radius: 12px; margin-bottom: 12px; } [data-hilltop] .opt-group h4 { margin: 0 0 6px 0; } [data-hilltop] .opt-choice { display:flex; align-items:center; justify-content:space-between; padding:6px 0; } [data-hilltop] .opt-choice label { display:flex; align-items:center; gap:8px; } [data-hilltop] .opt-delta { font-size:12px; opacity:.8; }