/* =====================================================================
   Harbour House — inner pages
   Shared building blocks (page head, panels, forms, summary, empty states)
   + shop, product, cart, checkout, success, auth, account, wishlist, contact.
   ===================================================================== */

.hh-page { padding-bottom: clamp(30px, 4vw, 56px); }
.hh-page--grey { background: var(--hh-bg); }

/* ---------- Page head: deep-ocean banner with a drifting wave edge ---------- */
.hh-pagehead {
    position: relative; overflow: hidden; isolation: isolate; color: #fff;
    padding: clamp(26px, 3.4vw, 42px) 0 clamp(44px, 5vw, 64px);
    background: var(--hh-grad-ocean);
}
.hh-pagehead::before {
    content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; z-index: -1; pointer-events: none;
    background: radial-gradient(circle, rgba(19, 163, 180, .45), transparent 65%);
    animation: hh-glow-drift 14s ease-in-out infinite alternate;
}
.hh-pagehead::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; z-index: 1; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C150 4 300 4 450 20 S750 38 900 22 S1100 6 1200 20 V40 H0Z' fill='%23ffffff' fill-opacity='.14'/%3E%3C/svg%3E") repeat-x 0 0 / 1200px 34px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C150 4 300 4 450 20 S750 38 900 22 S1100 6 1200 20 V40 H0Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x 0 0 / 1200px 34px;
    animation: hh-wave 18s linear infinite;
}
.hh-page--grey .hh-pagehead::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C150 4 300 4 450 20 S750 38 900 22 S1100 6 1200 20 V40 H0Z' fill='%23ffffff' fill-opacity='.14'/%3E%3C/svg%3E") repeat-x 0 0 / 1200px 34px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C150 4 300 4 450 20 S750 38 900 22 S1100 6 1200 20 V40 H0Z' fill='%23F3F7F9'/%3E%3C/svg%3E") repeat-x 0 0 / 1200px 34px; }
@keyframes hh-wave { to { background-position: -1200px 0, 1200px 0; } }
@keyframes hh-glow-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-120px, 60px) scale(1.15); } }
.hh-pagehead__row { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hh-pagehead h1 { font: 700 clamp(26px, 3.2vw, 38px)/1.2 var(--hh-head) !important; color: #fff !important; margin: 8px 0 0 !important; letter-spacing: -.01em; animation: hh-head-in .8s var(--hh-ease) .05s both; }
.hh-pagehead p { margin-top: 6px !important; color: rgba(255, 255, 255, .78); font-size: 15px; animation: hh-head-in .8s var(--hh-ease) .14s both; }
.hh-pagehead .hh-btn { animation: hh-head-in .8s var(--hh-ease) .2s both; }
@keyframes hh-head-in { from { opacity: 0; transform: translateY(18px); } }
.hh-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--hh-muted); animation: hh-head-in .7s var(--hh-ease) both; }
.hh-crumbs a { color: var(--hh-muted); display: inline-flex; align-items: center; gap: 4px; transition: color .2s; }
.hh-crumbs a:hover { color: var(--hh-red); }
.hh-crumbs li + li::before { content: "\203A"; margin-right: 6px; color: var(--hh-faint); }
.hh-crumbs li:last-child { color: var(--hh-ink); font-weight: 600; }
.hh-pagehead .hh-crumbs, .hh-pagehead .hh-crumbs a { color: rgba(255, 255, 255, .7); }
.hh-pagehead .hh-crumbs a:hover { color: var(--hh-amber); }
.hh-pagehead .hh-crumbs li + li::before { color: rgba(255, 255, 255, .4); }
.hh-pagehead .hh-crumbs li:last-child { color: #fff; }
.hh-pagehead + * { position: relative; }

/* ---------- Steps (cart → checkout → done) ---------- */
.hh-stepsbar { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.hh-stepsbar li { display: flex; align-items: center; gap: 8px; font: 600 13px var(--hh-font); color: var(--hh-faint); }
.hh-stepsbar li b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--hh-line); font-size: 12px; transition: all .4s var(--hh-ease); }
.hh-stepsbar li + li::before { content: ""; width: clamp(24px, 4vw, 56px); height: 2px; margin: 0 10px; background: var(--hh-line); border-radius: 2px; }
.hh-stepsbar li.is-done, .hh-stepsbar li.is-current { color: var(--hh-ink); }
.hh-stepsbar li.is-done b { background: var(--hh-green); border-color: var(--hh-green); color: #fff; }
.hh-stepsbar li.is-current b { background: var(--hh-red); border-color: var(--hh-red); color: #fff; box-shadow: 0 0 0 5px var(--hh-red-50); }
.hh-stepsbar li.is-done + li::before, .hh-stepsbar li.is-done + li.is-current::before { background: var(--hh-green); }
.hh-pagehead .hh-stepsbar { animation: hh-head-in .8s var(--hh-ease) .2s both; }
.hh-pagehead .hh-stepsbar li { color: rgba(255, 255, 255, .55); }
.hh-pagehead .hh-stepsbar li.is-done, .hh-pagehead .hh-stepsbar li.is-current { color: #fff; }
.hh-pagehead .hh-stepsbar li b { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.hh-pagehead .hh-stepsbar li.is-done b { background: var(--hh-green); border-color: var(--hh-green); }
.hh-pagehead .hh-stepsbar li.is-current b { background: var(--hh-red); border-color: var(--hh-red); box-shadow: 0 0 0 5px rgba(215, 38, 61, .25); animation: hh-pulse-ring 2s ease-out infinite; }
.hh-pagehead .hh-stepsbar li + li::before { background: rgba(255, 255, 255, .22); }
@keyframes hh-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(215, 38, 61, .55); } 100% { box-shadow: 0 0 0 12px rgba(215, 38, 61, 0); } }

/* ---------- Panels ---------- */
.hh-panel { background: #fff; border: 1px solid var(--hh-line); border-radius: var(--hh-r-lg); padding: clamp(18px, 2.2vw, 26px); box-shadow: var(--hh-shadow-xs); }
.hh-panel + .hh-panel { margin-top: 18px; }
.hh-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.hh-panel__title { display: flex; align-items: center; gap: 12px; }
.hh-panel__title > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--hh-ocean-50); color: var(--hh-ocean); font-size: 21px; flex: none; }
.hh-panel__title h2, .hh-panel__title h3 { font: 700 18px/1.3 var(--hh-head) !important; color: var(--hh-ink) !important; margin: 0 !important; }
.hh-panel__title p { font-size: 13px; color: var(--hh-muted); margin: 2px 0 0 !important; }
.hh-panel__link { font: 600 14px var(--hh-font); color: var(--hh-red) !important; display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Forms ---------- */
.hh-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hh-form-grid .is-full { grid-column: 1 / -1; }
.hh-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hh-field { display: flex; flex-direction: column; gap: 6px; }
.hh-field label { font: 600 13px var(--hh-font); color: var(--hh-ink); }
.hh-field label em { color: var(--hh-red); font-style: normal; }
.hh-input, .hh-select, .hh-textarea {
    width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--hh-line); border-radius: var(--hh-r); background: #fff;
    font: 500 15px var(--hh-font); color: var(--hh-ink); outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance: none; appearance: none;
}
.hh-textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.hh-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 256'%3E%3Cpath fill='%236F7681' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
.hh-input:hover, .hh-select:hover, .hh-textarea:hover { border-color: #D9DDE3; }
.hh-input:focus, .hh-select:focus, .hh-textarea:focus { border-color: var(--hh-red); box-shadow: 0 0 0 4px rgba(215, 38, 61, .1); }
.hh-input::placeholder, .hh-textarea::placeholder { color: #A9AFB8; font-weight: 400; }
.hh-input:disabled { background: var(--hh-bg); color: var(--hh-muted); }
.hh-input.is-invalid, .hh-select.is-invalid, .hh-textarea.is-invalid { border-color: var(--hh-red); animation: hh-shake-x .4s; }
@keyframes hh-shake-x { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.hh-hint { font-size: 12.5px; color: var(--hh-muted); min-height: 1em; }
.hh-hint.is-ok { color: var(--hh-green); }
.hh-hint.is-bad { color: var(--hh-red); }
.hh-inputwrap { position: relative; }
.hh-inputwrap > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--hh-muted); font-size: 18px; pointer-events: none; }
.hh-inputwrap > .hh-input { padding-left: 42px; }
.hh-inputwrap > button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 8px; background: none; color: var(--hh-muted); font-size: 18px; cursor: pointer; }
.hh-inputwrap > button:hover { color: var(--hh-ink); background: var(--hh-bg); }

.hh-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--hh-text); user-select: none; }
.hh-check input { position: absolute; opacity: 0; pointer-events: none; }
.hh-check__box { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 1.5px solid #CDD2D9; border-radius: 6px; background: #fff; transition: all .25s var(--hh-ease); }
.hh-check__box::after { content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform .3s var(--hh-spring); }
.hh-check input:checked + .hh-check__box { background: var(--hh-red); border-color: var(--hh-red); }
.hh-check input:checked + .hh-check__box::after { transform: rotate(-45deg) scale(1); }
.hh-check input:focus-visible + .hh-check__box { box-shadow: 0 0 0 4px rgba(215, 38, 61, .15); }

/* Selectable option cards (payment, address) */
.hh-options { display: grid; gap: 12px; }
.hh-option { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px; border: 1.5px solid var(--hh-line); border-radius: var(--hh-r-lg); background: #fff; cursor: pointer; transition: border-color .25s, background .25s, box-shadow .3s, transform .3s var(--hh-ease); }
.hh-option:hover { border-color: #D3D8DE; transform: translateY(-2px); }
.hh-option input { position: absolute; opacity: 0; pointer-events: none; }
.hh-option__radio { width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; border: 2px solid #CDD2D9; display: grid; place-items: center; transition: border-color .25s; }
.hh-option__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--hh-red); transform: scale(0); transition: transform .35s var(--hh-spring); }
.hh-option__body { flex: 1; min-width: 0; }
.hh-option__body strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 15px var(--hh-font); color: var(--hh-ink); }
.hh-option__body p, .hh-option__body small { display: block; margin-top: 3px !important; font-size: 13px; color: var(--hh-muted); line-height: 1.5; }
.hh-option__icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--hh-bg); color: var(--hh-ink); font-size: 22px; transition: background .25s, color .25s; }
.hh-option:has(input:checked) { border-color: var(--hh-red); background: #FFFBFB; box-shadow: 0 10px 24px -14px rgba(215, 38, 61, .5); }
.hh-option:has(input:checked) .hh-option__radio { border-color: var(--hh-red); }
.hh-option:has(input:checked) .hh-option__radio::after { transform: scale(1); }
.hh-option:has(input:checked) .hh-option__icon { background: var(--hh-red); color: #fff; }
.hh-option:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(215, 38, 61, .15); }
.hh-pay-logos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hh-pay-logos span { padding: 3px 8px; border-radius: 6px; background: var(--hh-bg); font: 700 11px var(--hh-font); color: var(--hh-text); }

/* ---------- Alerts & status pills ---------- */
.hh-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--hh-r); font-size: 14px; line-height: 1.5; animation: hh-fade-up .45s var(--hh-ease); }
.hh-alert i { font-size: 20px; flex: none; }
.hh-alert--info { background: #EEF5FF; color: #1D4F91; }
.hh-alert--ok { background: var(--hh-green-50); color: var(--hh-green); }
.hh-alert--warn { background: var(--hh-amber-50); color: #8A5A00; }
.hh-alert--bad { background: var(--hh-red-50); color: var(--hh-red-600); }
.hh-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 12px var(--hh-font); white-space: nowrap; }
.hh-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hh-status--pending { background: var(--hh-amber-50); color: #A26A00; }
.hh-status--processing { background: #EEF5FF; color: #1D5FC2; }
.hh-status--out-for-delivery { background: var(--hh-teal-50); color: var(--hh-teal); }
.hh-status--delivered, .hh-status--paid { background: var(--hh-green-50); color: var(--hh-green); }
.hh-status--cancelled, .hh-status--failed, .hh-status--refunded { background: var(--hh-red-50); color: var(--hh-red); }
.hh-status--unpaid { background: #F2F4F7; color: #5B6470; }

/* ---------- Order summary ---------- */
.hh-summary { display: grid; gap: 10px; }
.hh-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; color: var(--hh-text); }
.hh-summary__row span:last-child { font-weight: 600; color: var(--hh-ink); white-space: nowrap; }
.hh-summary__row.is-save span:last-child, .hh-summary__row.is-save span:first-child { color: var(--hh-green); }
.hh-summary__row.is-free span:last-child { color: var(--hh-green); }
.hh-summary__row small { display: block; font-size: 12px; color: var(--hh-muted); }
.hh-summary__divider { height: 1px; margin: 4px 0; background: repeating-linear-gradient(90deg, var(--hh-line) 0 6px, transparent 6px 10px); }
.hh-summary__total { display: flex; justify-content: space-between; align-items: baseline; font: 700 16px var(--hh-head); color: var(--hh-ink); }
.hh-summary__total strong { font: 800 24px var(--hh-head); }
.hh-savings { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: var(--hh-r); background: var(--hh-green-50); color: var(--hh-green); font: 600 13.5px var(--hh-font); animation: hh-fade-up .5s var(--hh-ease); }
.hh-savings i { font-size: 18px; }
.hh-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 12.5px; color: var(--hh-muted); }
.hh-secure i { color: var(--hh-green); }
.hh-mini-items { display: grid; gap: 12px; margin-bottom: 16px; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.hh-mini-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.hh-mini-item img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--hh-bg); }
.hh-mini-item strong { display: block; font: 600 14px/1.3 var(--hh-font); color: var(--hh-ink); text-transform: capitalize; }
.hh-mini-item small { font-size: 12px; color: var(--hh-muted); }
.hh-mini-item > span { font: 700 14px var(--hh-font); color: var(--hh-ink); }

/* ---------- Empty states ---------- */
.hh-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: clamp(36px, 6vw, 70px) 20px; }
.hh-empty__icon { position: relative; width: 120px; height: 120px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; background: var(--hh-red-50); color: var(--hh-red); font-size: 52px; animation: hh-float 3.2s ease-in-out infinite; }
.hh-empty__icon::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px dashed var(--hh-red-100); animation: hh-spin-slow 18s linear infinite; }
@keyframes hh-spin-slow { to { transform: rotate(360deg); } }
.hh-empty h2, .hh-empty h3 { font: 700 22px var(--hh-head) !important; color: var(--hh-ink) !important; margin: 0 !important; }
.hh-empty p { max-width: 420px; color: var(--hh-muted); }
.hh-empty .hh-btn { margin-top: 10px; }

/* ---------- Pagination ---------- */
.hh-pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 34px; padding: 0; list-style: none; }
.hh-pager a, .hh-pager span { min-width: 42px; height: 42px; padding: 0 12px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--hh-line); background: #fff; font: 600 14px var(--hh-font); color: var(--hh-ink); transition: all .25s var(--hh-ease); }
.hh-pager a:hover { border-color: var(--hh-red); color: var(--hh-red); transform: translateY(-2px); }
.hh-pager .is-current { background: var(--hh-red); border-color: var(--hh-red); color: #fff; box-shadow: 0 8px 18px -8px rgba(215, 38, 61, .6); }
.hh-pager .is-disabled { opacity: .4; pointer-events: none; }

/* ---------- Modal ---------- */
.hh-modal { position: fixed; inset: 0; z-index: 2300; display: grid; place-items: center; padding: 16px; visibility: hidden; overflow: hidden; }
.hh-modal.is-open { visibility: visible; }
.hh-modal__backdrop { position: absolute; inset: 0; background: rgba(14, 34, 51, .5); opacity: 0; transition: opacity .35s; }
.hh-modal.is-open .hh-modal__backdrop { opacity: 1; }
.hh-modal__card { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px; border-radius: var(--hh-r-xl); background: #fff; box-shadow: var(--hh-shadow-lg); transform: translateY(24px) scale(.97); opacity: 0; transition: transform .45s var(--hh-spring), opacity .3s; }
.hh-modal.is-open .hh-modal__card { transform: none; opacity: 1; }
.hh-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hh-modal__head h3 { font: 700 19px var(--hh-head) !important; color: var(--hh-ink) !important; margin: 0 !important; }
.hh-modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* =====================================================================
   SHOP (products.php)
   ===================================================================== */
.hh-catstrip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 18px 2px 4px; }
.hh-catstrip::-webkit-scrollbar { display: none; }
.hh-catstrip a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 5px; border: 1.5px solid var(--hh-line); border-radius: 999px; background: #fff; font: 600 14px var(--hh-font); color: var(--hh-ink); transition: all .3s var(--hh-ease); }
.hh-catstrip a img, .hh-catstrip a .hh-catstrip__all { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--hh-bg); display: grid; place-items: center; }
.hh-catstrip a:hover { border-color: var(--hh-red); transform: translateY(-2px); }
.hh-catstrip a.is-active { background: var(--hh-ocean); border-color: var(--hh-ocean); color: #fff; box-shadow: var(--hh-glow-ocean); }
.hh-catstrip a.is-active .hh-catstrip__all { background: rgba(255, 255, 255, .2); color: #fff; }

.hh-shop { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 26px; align-items: start; padding-top: 24px; }
.hh-filters { position: sticky; top: 96px; display: grid; gap: 14px; }
.hh-filters__head { display: none; }
.hh-fgroup { padding: 18px; border: 1px solid var(--hh-line); border-radius: var(--hh-r-lg); background: #fff; }
.hh-fgroup h3 { display: flex; align-items: center; justify-content: space-between; font: 700 15px var(--hh-head) !important; color: var(--hh-ink) !important; margin: 0 0 14px !important; }
.hh-fgroup ul { display: grid; gap: 4px; }
.hh-fgroup li label { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; transition: background .2s; }
.hh-fgroup li label:hover { background: var(--hh-bg); }
.hh-fgroup li img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--hh-bg); }
.hh-fgroup li span.hh-fname { flex: 1; font-size: 14px; color: var(--hh-ink); }
.hh-fgroup li small { min-width: 26px; padding: 2px 7px; border-radius: 999px; background: var(--hh-bg); font: 600 11.5px var(--hh-font); color: var(--hh-muted); text-align: center; }
.hh-price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.hh-price-inputs .hh-input { height: 42px; padding: 0 10px; font-size: 14px; }
.hh-price-inputs span { color: var(--hh-faint); }
.hh-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hh-quick button { padding: 6px 10px; border: 1px solid var(--hh-line); border-radius: 999px; background: #fff; font: 600 12px var(--hh-font); color: var(--hh-text); cursor: pointer; transition: all .2s; }
.hh-quick button:hover, .hh-quick button.is-active { border-color: var(--hh-ocean); color: var(--hh-ocean); background: var(--hh-ocean-50); }
.hh-toggles { display: grid; gap: 10px; }
.hh-filters__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.hh-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--hh-line); border-radius: var(--hh-r-lg); background: #fff; }
.hh-toolbar__count { font-size: 14px; color: var(--hh-muted); }
.hh-toolbar__count strong { color: var(--hh-ink); }
.hh-toolbar__right { display: flex; align-items: center; gap: 10px; }
.hh-toolbar .hh-select { height: 40px; width: auto; min-width: 190px; font-size: 14px; }
.hh-filterbtn { display: none; }
.hh-activechips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.hh-activechips a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border-radius: 999px; background: var(--hh-red-50); color: var(--hh-red); font: 600 12.5px var(--hh-font); transition: background .2s; animation: hh-fade-up .35s var(--hh-ease); }
.hh-activechips a:hover { background: var(--hh-red-100); }
.hh-activechips a.is-clear { background: none; color: var(--hh-muted); text-decoration: underline; }

.hh-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hh-pgrid > * { min-width: 0; }
.hh-filters__backdrop { display: none; }

/* =====================================================================
   PRODUCT DETAILS
   ===================================================================== */
.hh-pd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: start; padding-top: 26px; }
.hh-gallery { position: sticky; top: 96px; display: grid; gap: 12px; }
.hh-gallery__stage { position: relative; aspect-ratio: 1 / 1; border-radius: var(--hh-r-xl); overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, #E3F0F5 0%, #F1F7FA 55%, #F7FAFC 100%); border: 1px solid var(--hh-line); cursor: zoom-in; }
.hh-gallery__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; transition: opacity .45s var(--hh-ease), transform .5s var(--hh-ease); }
.hh-gallery__stage img.is-photo { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.hh-gallery__stage img.is-swapping { opacity: 0; transform: scale(1.04); }
.hh-gallery__stage.is-zoom img { transform: scale(1.9); transition: transform .2s ease-out; }
.hh-gallery__tags { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.hh-gallery__nav { position: absolute; top: 50%; z-index: 2; width: 42px; height: 42px; margin-top: -21px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--hh-ink); font-size: 16px; display: grid; place-items: center; cursor: pointer; box-shadow: var(--hh-shadow-sm); opacity: 0; transition: opacity .3s, transform .3s var(--hh-ease), color .2s; }
.hh-gallery__nav--prev { left: 12px; transform: translateX(-8px); }
.hh-gallery__nav--next { right: 12px; transform: translateX(8px); }
.hh-gallery__stage:hover .hh-gallery__nav { opacity: 1; transform: none; }
.hh-gallery__nav:hover { color: var(--hh-red); }
.hh-gallery__thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.hh-gallery__thumbs button { flex: none; width: 76px; height: 76px; padding: 0; border: 2px solid transparent; border-radius: 14px; overflow: hidden; background: #F4F8FA; cursor: pointer; opacity: .7; transition: all .3s var(--hh-ease); }
.hh-gallery__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.hh-gallery__thumbs button:hover { opacity: 1; transform: translateY(-2px); }
.hh-gallery__thumbs button.is-active { border-color: var(--hh-ocean); opacity: 1; box-shadow: 0 0 0 3px var(--hh-ocean-50); }

.hh-pinfo > * { animation: hh-fade-up .6s var(--hh-ease) both; }
.hh-pinfo > :nth-child(2) { animation-delay: .05s; } .hh-pinfo > :nth-child(3) { animation-delay: .1s; }
.hh-pinfo > :nth-child(4) { animation-delay: .15s; } .hh-pinfo > :nth-child(5) { animation-delay: .2s; }
.hh-pinfo > :nth-child(n+6) { animation-delay: .25s; }
.hh-pinfo__cat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--hh-teal-50); color: var(--hh-teal) !important; font: 600 12.5px var(--hh-font); }
.hh-pinfo h1 { margin: 12px 0 8px !important; font: 700 clamp(24px, 2.8vw, 34px)/1.2 var(--hh-head) !important; color: var(--hh-ink) !important; text-transform: capitalize; }
.hh-rating-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--hh-muted); }
.hh-stars { display: inline-flex; gap: 2px; color: var(--hh-amber); font-size: 16px; }
.hh-stars .is-off { color: #DADDE2; }
.hh-rating-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: var(--hh-green); color: #fff; font: 700 13px var(--hh-font); }
.hh-pprice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; }
.hh-pprice strong { font: 800 34px var(--hh-head); color: var(--hh-ink); }
.hh-pprice del { font-size: 17px; color: var(--hh-faint); }
.hh-pprice em { font-style: normal; padding: 4px 9px; border-radius: 8px; background: var(--hh-green-50); color: var(--hh-green); font: 700 14px var(--hh-font); }
.hh-tax { font-size: 12.5px; color: var(--hh-muted); }
.hh-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.hh-spec { padding: 12px; border: 1px solid var(--hh-line); border-radius: var(--hh-r); background: #fff; transition: border-color .25s, transform .3s var(--hh-ease), box-shadow .3s; }
.hh-spec:hover { border-color: var(--hh-red-100); transform: translateY(-3px); box-shadow: var(--hh-shadow-sm); }
.hh-spec i { font-size: 20px; color: var(--hh-red); }
.hh-spec small { display: block; margin-top: 6px; font-size: 12px; color: var(--hh-muted); }
.hh-spec strong { font: 700 15px var(--hh-font); color: var(--hh-ink); }
.hh-buy { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.hh-qtybox { display: inline-flex; align-items: center; height: 54px; border: 1.5px solid var(--hh-line); border-radius: var(--hh-r); background: #fff; overflow: hidden; }
.hh-qtybox button { width: 46px; height: 100%; border: 0; background: none; color: var(--hh-ink); font-size: 16px; cursor: pointer; transition: background .2s, color .2s; }
.hh-qtybox button:hover { background: var(--hh-red-50); color: var(--hh-red); }
.hh-qtybox input { width: 44px; height: 100%; border: 0; text-align: center; font: 700 17px var(--hh-font); color: var(--hh-ink); outline: none; -moz-appearance: textfield; appearance: textfield; background: none; }
.hh-qtybox input::-webkit-outer-spin-button, .hh-qtybox input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hh-buy .hh-btn { height: 54px; flex: 1; min-width: 150px; }
.hh-buy .hh-iconbtn { width: 54px; height: 54px; flex: none; border: 1.5px solid var(--hh-line); border-radius: var(--hh-r); background: #fff; color: var(--hh-ink); font-size: 22px; display: grid; place-items: center; cursor: pointer; transition: all .25s var(--hh-ease); }
.hh-buy .hh-iconbtn:hover { border-color: var(--hh-red); color: var(--hh-red); transform: translateY(-2px); }
.hh-buy .hh-iconbtn.is-active { color: var(--hh-red); border-color: var(--hh-red-100); background: var(--hh-red-50); }
.hh-stockline { display: flex; align-items: center; gap: 6px; margin-top: 12px; font: 600 13.5px var(--hh-font); }
.hh-stockline.is-in { color: var(--hh-green); }
.hh-stockline.is-low { color: #B86E00; }
.hh-stockline.is-out { color: var(--hh-red); }
.hh-delcheck { margin-top: 20px; padding: 16px; border-radius: var(--hh-r-lg); background: var(--hh-bg); }
.hh-delcheck h3 { display: flex; align-items: center; gap: 8px; font: 600 15px var(--hh-font) !important; color: var(--hh-ink) !important; margin: 0 0 10px !important; }
.hh-delcheck form { display: flex; gap: 8px; }
.hh-delcheck .hh-input { height: 44px; letter-spacing: .08em; }
.hh-delcheck .hh-btn { height: 44px; }
.hh-pdtrust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.hh-pdtrust div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--hh-r); border: 1px dashed var(--hh-line); text-align: center; font: 600 12.5px var(--hh-font); color: var(--hh-text); }
.hh-pdtrust i { font-size: 22px; color: var(--hh-red); }
.hh-fonote { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: var(--hh-r); background: var(--hh-amber-50); color: #8A5A00; font: 600 13.5px var(--hh-font); }

.hh-ptabs { margin-top: clamp(34px, 5vw, 56px); }
.hh-ptabs__nav { position: relative; display: flex; gap: 6px; border-bottom: 1px solid var(--hh-line); overflow-x: auto; scrollbar-width: none; }
.hh-ptabs__nav button { flex: none; padding: 14px 18px; border: 0; background: none; font: 600 15px var(--hh-font); color: var(--hh-muted); cursor: pointer; transition: color .25s; }
.hh-ptabs__nav button[aria-selected="true"], .hh-ptabs__nav button:hover { color: var(--hh-ink); }
.hh-ptabs__ink { position: absolute; bottom: -1px; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--hh-red); transition: transform .45s var(--hh-ease), width .45s var(--hh-ease); }
.hh-ptabs__pane { padding: 24px 0 0; animation: hh-fade-up .5s var(--hh-ease); }
.hh-ptabs__pane[hidden] { display: none; }
.hh-prose { font-size: 15px; line-height: 1.8; color: var(--hh-text); max-width: 820px; }
.hh-prose p + p { margin-top: 12px !important; }
.hh-spectable { width: 100%; max-width: 720px; border-collapse: collapse; font-size: 14.5px; }
.hh-spectable th, .hh-spectable td { padding: 12px 14px; border-bottom: 1px solid var(--hh-line); text-align: left; }
.hh-spectable th { width: 40%; color: var(--hh-muted); font-weight: 500; background: var(--hh-bg); }
.hh-spectable td { color: var(--hh-ink); font-weight: 600; }

.hh-reviews { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; }
.hh-rsum { padding: 20px; border: 1px solid var(--hh-line); border-radius: var(--hh-r-lg); align-self: start; }
.hh-rsum__big { display: flex; align-items: baseline; gap: 8px; }
.hh-rsum__big strong { font: 800 44px var(--hh-head); color: var(--hh-ink); }
.hh-rsum__bars { display: grid; gap: 6px; margin: 14px 0 18px; }
.hh-rsum__bar { display: grid; grid-template-columns: 26px 1fr 30px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--hh-muted); }
.hh-rsum__bar span:nth-child(2) { height: 7px; border-radius: 7px; background: var(--hh-bg); overflow: hidden; }
.hh-rsum__bar b { display: block; height: 100%; border-radius: inherit; background: var(--hh-amber); width: 0; transition: width 1s var(--hh-ease); }
.hh-rlist { display: grid; gap: 14px; }
.hh-review { padding: 16px; border: 1px solid var(--hh-line); border-radius: var(--hh-r-lg); animation: hh-fade-up .5s var(--hh-ease) both; }
.hh-review__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.hh-review__who { display: flex; align-items: center; gap: 10px; font: 600 14px var(--hh-font); color: var(--hh-ink); }
.hh-review__who span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--hh-red-50); color: var(--hh-red); font-weight: 700; }
.hh-review__who small { display: block; font-weight: 500; font-size: 12px; color: var(--hh-green); }
.hh-review p { font-size: 14.5px; color: var(--hh-text); line-height: 1.6; }
.hh-review time { font-size: 12px; color: var(--hh-faint); }
.hh-rform { display: grid; gap: 12px; padding: 18px; border-radius: var(--hh-r-lg); background: var(--hh-bg); }
.hh-rform h3 { font: 700 16px var(--hh-head) !important; color: var(--hh-ink) !important; margin: 0 !important; }
.hh-starpick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.hh-starpick input { position: absolute; opacity: 0; pointer-events: none; }
.hh-starpick label { font-size: 30px; color: #D3D7DD; cursor: pointer; transition: color .15s, transform .25s var(--hh-spring); }
.hh-starpick label:hover, .hh-starpick label:hover ~ label, .hh-starpick input:checked ~ label { color: var(--hh-amber); }
.hh-starpick label:hover { transform: scale(1.18); }

.hh-section-sm { padding-block: clamp(34px, 4vw, 50px); }
.hh-buybar { display: none; }

/* =====================================================================
   CART & CHECKOUT
   ===================================================================== */
.hh-cartwrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; padding-top: 24px; }
.hh-aside { position: sticky; top: 96px; display: grid; gap: 16px; }
.hh-litems { display: grid; }
.hh-litem { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--hh-line); animation: hh-fade-up .5s var(--hh-ease) both; transition: opacity .35s, transform .35s var(--hh-ease); }
.hh-litem:first-child { padding-top: 0; }
.hh-litem:last-child { border-bottom: 0; padding-bottom: 0; }
.hh-litem.is-removing { opacity: 0; transform: translateX(40px); }
.hh-litem__img { width: 92px; height: 92px; border-radius: 14px; overflow: hidden; background: #F4F8FA; display: grid; place-items: center; }
.hh-litem__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--hh-ease); }
.hh-litem:hover .hh-litem__img img { transform: scale(1.06); }
.hh-litem__cat { font: 600 11px var(--hh-font); letter-spacing: .04em; text-transform: uppercase; color: var(--hh-teal); }
.hh-litem h3 { margin: 2px 0 4px !important; font: 600 16px/1.35 var(--hh-font) !important; color: var(--hh-ink) !important; text-transform: capitalize; }
.hh-litem h3 a { color: inherit; transition: color .2s; }
.hh-litem h3 a:hover { color: var(--hh-red); }
.hh-litem__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--hh-muted); }
.hh-litem__price { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; font-size: 13px; }
.hh-litem__price strong { font: 700 15px var(--hh-font); color: var(--hh-ink); }
.hh-litem__price del { color: var(--hh-faint); }
.hh-litem__price em { font-style: normal; font-weight: 700; color: var(--hh-green); }
.hh-litem__fo { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 8px; border-radius: 6px; background: var(--hh-amber-50); color: #8A5A00; font: 600 12px var(--hh-font); }
.hh-litem__warn { margin-top: 6px; font: 600 12.5px var(--hh-font); color: var(--hh-red); }
.hh-litem__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hh-litem__total { font: 800 17px var(--hh-head); color: var(--hh-ink); }
.hh-litem__remove { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 0; background: none; color: var(--hh-muted); font: 600 12.5px var(--hh-font); cursor: pointer; border-radius: 6px; transition: color .2s, background .2s; }
.hh-litem__remove:hover { color: var(--hh-red); background: var(--hh-red-50); }
.hh-litem .hh-addbox { width: 108px; height: 38px; }
.hh-litem .hh-stepper { opacity: 1; transform: none; pointer-events: auto; }

.hh-coupon-form { display: flex; gap: 8px; }
.hh-coupon-form .hh-input { height: 46px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.hh-coupon-form .hh-btn { height: 46px; }
.hh-coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1.5px dashed var(--hh-green); border-radius: var(--hh-r); background: var(--hh-green-50); animation: hh-pop .5s var(--hh-spring); }
@keyframes hh-pop { from { transform: scale(.94); opacity: 0; } }
.hh-coupon-applied strong { display: flex; align-items: center; gap: 6px; font: 700 14px var(--hh-font); color: var(--hh-green); letter-spacing: .06em; }
.hh-coupon-applied small { display: block; font-size: 12.5px; color: var(--hh-green); letter-spacing: 0; font-weight: 500; }
.hh-coupon-applied button { border: 0; background: none; color: var(--hh-red); font: 600 13px var(--hh-font); cursor: pointer; }
.hh-coupon-list { display: grid; gap: 8px; margin-top: 12px; }
.hh-coupon-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px dashed var(--hh-line); border-radius: var(--hh-r); transition: border-color .25s; }
.hh-coupon-item:hover { border-color: var(--hh-red-100); }
.hh-coupon-item strong { display: block; font: 700 13.5px var(--hh-font); color: var(--hh-ink); letter-spacing: .06em; }
.hh-coupon-item small { font-size: 12px; color: var(--hh-muted); }
.hh-coupon-item button { padding: 6px 12px; border: 1px solid var(--hh-red); border-radius: 8px; background: #fff; color: var(--hh-red); font: 700 12.5px var(--hh-font); cursor: pointer; transition: all .2s; }
.hh-coupon-item button:hover { background: var(--hh-red); color: #fff; }
.hh-coupon-item button:disabled { border-color: var(--hh-line); color: var(--hh-faint); cursor: not-allowed; background: #fff; }
.hh-cart-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.hh-cartfade { transition: opacity .25s; }
.hh-cartfade.is-loading { opacity: .5; pointer-events: none; }

.hh-addr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hh-addr-new { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 90px; border: 1.5px dashed #D3D8DE; border-radius: var(--hh-r-lg); background: none; color: var(--hh-red); font: 600 14px var(--hh-font); cursor: pointer; transition: all .25s; }
.hh-addr-new:hover { background: var(--hh-red-50); border-color: var(--hh-red); }
.hh-tag-mini { padding: 2px 8px; border-radius: 6px; background: var(--hh-bg); font: 700 10.5px var(--hh-font); letter-spacing: .04em; text-transform: uppercase; color: var(--hh-muted); }
.hh-tag-mini--red { background: var(--hh-red-50); color: var(--hh-red); }
.hh-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--hh-ease); }
.hh-collapse > div { overflow: hidden; }
.hh-collapse.is-open { grid-template-rows: 1fr; }
.hh-collapse.is-open > div { padding-top: 16px; }
.hh-placebtn { width: 100%; height: 56px; font-size: 16px; }
.hh-placebtn .hh-spin { display: none; }
.hh-placebtn.is-loading .hh-spin { display: inline-block; animation: hh-spin .8s linear infinite; }
.hh-placebtn.is-loading .hh-placebtn__icon { display: none; }
@keyframes hh-spin { to { transform: rotate(360deg); } }

/* =====================================================================
   ORDER SUCCESS / DETAILS
   ===================================================================== */
.hh-success { max-width: 880px; margin: 0 auto; padding-top: clamp(26px, 4vw, 44px); }
.hh-success__hero { position: relative; overflow: hidden; text-align: center; padding: clamp(28px, 4vw, 44px) 20px; border-radius: var(--hh-r-xl); background: linear-gradient(160deg, #F0FAF3 0%, #fff 60%); border: 1px solid #D8EFE0; }
.hh-success__hero.is-pending { background: linear-gradient(160deg, #FFF8E8 0%, #fff 60%); border-color: #F5E2B5; }
.hh-checkmark { width: 96px; height: 96px; margin: 0 auto 16px; }
.hh-checkmark circle { fill: none; stroke: var(--hh-green); stroke-width: 4; stroke-dasharray: 290; stroke-dashoffset: 290; animation: hh-draw .9s var(--hh-ease) forwards; }
.hh-checkmark path { fill: none; stroke: var(--hh-green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: hh-draw .5s var(--hh-ease) .75s forwards; }
.hh-success__hero.is-pending .hh-checkmark circle, .hh-success__hero.is-pending .hh-checkmark path { stroke: var(--hh-amber); }
@keyframes hh-draw { to { stroke-dashoffset: 0; } }
.hh-success__hero h1 { font: 800 clamp(24px, 3vw, 32px)/1.2 var(--hh-head) !important; color: var(--hh-ink) !important; margin: 0 0 8px !important; animation: hh-fade-up .6s var(--hh-ease) .4s both; }
.hh-success__hero p { color: var(--hh-muted); max-width: 520px; margin: 0 auto !important; animation: hh-fade-up .6s var(--hh-ease) .5s both; }
.hh-success__meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; animation: hh-fade-up .6s var(--hh-ease) .6s both; }
.hh-success__meta span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--hh-line); font: 600 13.5px var(--hh-font); color: var(--hh-ink); }
.hh-success__ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; animation: hh-fade-up .6s var(--hh-ease) .7s both; }
.hh-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hh-confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: hh-confetti 2.6s ease-in forwards; }
@keyframes hh-confetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(420px) rotate(540deg); } }
.hh-track { display: grid; grid-template-columns: repeat(4, 1fr); margin: 6px 0 4px; }
.hh-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font: 600 12.5px var(--hh-font); color: var(--hh-faint); }
.hh-track li::before { content: ""; position: absolute; top: 17px; left: -50%; right: 50%; height: 3px; background: var(--hh-line); z-index: 0; }
.hh-track li:first-child::before { display: none; }
.hh-track li b { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--hh-line); font-size: 17px; transition: all .4s var(--hh-ease); }
.hh-track li.is-done { color: var(--hh-ink); }
.hh-track li.is-done b { background: var(--hh-green); border-color: var(--hh-green); color: #fff; }
.hh-track li.is-done::before { background: var(--hh-green); }
.hh-track li.is-current b { box-shadow: 0 0 0 6px var(--hh-green-50); }
.hh-track.is-cancelled li.is-done b { background: var(--hh-red); border-color: var(--hh-red); }
.hh-order-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.hh-kv { display: grid; gap: 10px; font-size: 14px; }
.hh-kv div { display: flex; justify-content: space-between; gap: 12px; }
.hh-kv dt { color: var(--hh-muted); }
.hh-kv dd { margin: 0; font-weight: 600; color: var(--hh-ink); text-align: right; }

/* =====================================================================
   AUTH (account.php — logged out)
   ===================================================================== */
.hh-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 560px; margin-top: 28px; border-radius: var(--hh-r-xl); overflow: hidden; background: #fff; border: 1px solid var(--hh-line); box-shadow: var(--hh-shadow); }
.hh-auth__visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: clamp(26px, 4vw, 44px); color: #fff; background: #0A2234; isolation: isolate; }
.hh-auth__visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .85; transform: scale(1.05); animation: hh-kenburns 14s ease-in-out infinite alternate; }
@keyframes hh-kenburns { to { transform: scale(1.14) translateX(-2%); } }
.hh-auth__visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 43, 61, .1) 0%, rgba(5, 43, 61, .9) 75%); }
.hh-auth__visual h2 { font: 800 clamp(24px, 2.6vw, 32px)/1.2 var(--hh-head) !important; color: #fff !important; margin: 0 !important; }
.hh-auth__visual h2 span { color: var(--hh-amber); }
.hh-auth__visual ul { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.hh-auth__visual li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; opacity: .92; }
.hh-auth__visual li i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .15); color: var(--hh-amber); }
.hh-auth__main { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 48px); }
#auth-container { width: min(420px, 100%); }
.hh-authcard { animation: hh-auth-in .55s var(--hh-ease) both; }
@keyframes hh-auth-in { from { opacity: 0; transform: translateX(24px); } }
.hh-authcard__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--hh-red-50); color: var(--hh-red); font-size: 28px; margin-bottom: 16px; }
.hh-authcard h2 { font: 700 26px/1.2 var(--hh-head) !important; color: var(--hh-ink) !important; margin: 0 0 6px !important; }
.hh-authcard > p { color: var(--hh-muted); margin-bottom: 22px !important; font-size: 14.5px; }
.hh-authcard form { display: grid; gap: 16px; }
.hh-authcard .hh-btn { width: 100%; height: 50px; }
.hh-authsep { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--hh-faint); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; }
.hh-authsep::before, .hh-authsep::after { content: ""; flex: 1; height: 1px; background: var(--hh-line); }
.hh-authmsg { min-height: 22px; margin-top: 12px !important; text-align: center; font: 600 13.5px var(--hh-font); color: var(--hh-red); }
.hh-authmsg.is-ok { color: var(--hh-green); }
.hh-emailchip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; margin-bottom: 18px; border-radius: var(--hh-r); background: var(--hh-bg); font: 600 14px var(--hh-font); color: var(--hh-ink); }
.hh-emailchip a, .hh-emailchip button { border: 0; background: none; color: var(--hh-red); font: 600 13px var(--hh-font); cursor: pointer; }
.hh-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.hh-otp input { width: 100%; height: 54px; border: 1.5px solid var(--hh-line); border-radius: var(--hh-r); text-align: center; font: 700 22px var(--hh-head); color: var(--hh-ink); outline: none; transition: border-color .2s, box-shadow .2s, transform .2s var(--hh-spring); }
.hh-otp input:focus { border-color: var(--hh-red); box-shadow: 0 0 0 4px rgba(215, 38, 61, .1); transform: translateY(-2px); }
.hh-otp input.is-filled { border-color: var(--hh-ink); }
.hh-otp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13px; color: var(--hh-muted); }
.hh-otp-foot button { border: 0; background: none; color: var(--hh-red); font: 600 13px var(--hh-font); cursor: pointer; }
.hh-pwmeter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.hh-pwmeter span { height: 4px; border-radius: 4px; background: var(--hh-line); transition: background .3s; }
.hh-pwmeter[data-score="1"] span:nth-child(-n+1) { background: var(--hh-red); }
.hh-pwmeter[data-score="2"] span:nth-child(-n+2) { background: #F08A24; }
.hh-pwmeter[data-score="3"] span:nth-child(-n+3) { background: var(--hh-amber); }
.hh-pwmeter[data-score="4"] span { background: var(--hh-green); }
.hh-gbtn { display: flex; justify-content: center; min-height: 44px; }
.hh-loading-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 0; color: var(--hh-muted); }
.hh-loader { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--hh-red-100); border-top-color: var(--hh-red); animation: hh-spin .8s linear infinite; }

/* =====================================================================
   ACCOUNT DASHBOARD
   ===================================================================== */
.hh-dash { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 24px; }
.hh-dash__side { position: sticky; top: 96px; display: grid; gap: 14px; }
.hh-profile { position: relative; overflow: hidden; padding: 24px 20px 20px; border-radius: var(--hh-r-xl); text-align: center; color: #fff; background: var(--hh-grad-ocean); }
.hh-profile::before { content: ""; position: absolute; width: 200px; height: 200px; right: -70px; top: -90px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.hh-avatar { position: relative; width: 92px; height: 92px; margin: 0 auto 12px; }
.hh-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255, 255, 255, .85); background: #fff; cursor: zoom-in; transition: transform .4s var(--hh-spring); }
.hh-avatar img:hover { transform: scale(1.04); }
.hh-avatar label { position: absolute; right: 0; bottom: 2px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--hh-red); font-size: 16px; cursor: pointer; box-shadow: var(--hh-shadow-sm); transition: transform .3s var(--hh-spring); }
.hh-avatar label:hover { transform: scale(1.12); }
.hh-avatar.is-uploading img { opacity: .5; }
.hh-profile h2 { font: 700 19px var(--hh-head) !important; color: #fff !important; margin: 0 !important; }
.hh-profile p { font-size: 13px; opacity: .9; margin-top: 2px !important; word-break: break-all; }
.hh-dash__nav { padding: 8px; border: 1px solid var(--hh-line); border-radius: var(--hh-r-lg); background: #fff; display: grid; gap: 2px; }
.hh-dash__nav button, .hh-dash__nav a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px; border: 0; border-radius: var(--hh-r); background: none; font: 600 14.5px var(--hh-font); color: var(--hh-text); text-align: left; cursor: pointer; transition: background .2s, color .2s; }
.hh-dash__nav i { font-size: 20px; color: var(--hh-muted); transition: color .2s; }
.hh-dash__nav button:hover, .hh-dash__nav a:hover { background: var(--hh-bg); color: var(--hh-ink); }
.hh-dash__nav button[aria-selected="true"] { background: var(--hh-red-50); color: var(--hh-red); }
.hh-dash__nav button[aria-selected="true"] i { color: var(--hh-red); }
.hh-dash__nav .is-logout { color: var(--hh-red); }
.hh-dash__nav .is-logout i { color: var(--hh-red); }
.hh-dash__nav b { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--hh-bg); font: 700 11.5px var(--hh-font); color: var(--hh-muted); text-align: center; }
.hh-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.hh-stat { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--hh-line); border-radius: var(--hh-r-lg); background: #fff; cursor: pointer; transition: transform .35s var(--hh-ease), box-shadow .35s, border-color .3s; text-align: left; }
.hh-stat:hover { transform: translateY(-4px); box-shadow: var(--hh-shadow-sm); border-color: transparent; }
.hh-stat > i { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; font-size: 22px; }
.hh-stat:nth-child(1) > i { background: var(--hh-red-50); color: var(--hh-red); }
.hh-stat:nth-child(2) > i { background: #FDEFF6; color: #C2185B; }
.hh-stat:nth-child(3) > i { background: var(--hh-amber-50); color: var(--hh-amber-600); }
.hh-stat:nth-child(4) > i { background: var(--hh-teal-50); color: var(--hh-teal); }
.hh-stat strong { display: block; font: 800 22px/1.1 var(--hh-head); color: var(--hh-ink); }
.hh-stat small { font-size: 12.5px; color: var(--hh-muted); }
.hh-dash__pane { animation: hh-fade-up .45s var(--hh-ease); }
.hh-dash__pane[hidden] { display: none; }
.hh-orders { display: grid; gap: 12px; }
.hh-order { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--hh-line); border-radius: var(--hh-r-lg); background: #fff; transition: border-color .25s, transform .3s var(--hh-ease), box-shadow .3s; animation: hh-fade-up .45s var(--hh-ease) both; }
.hh-order:hover { border-color: var(--hh-red-100); transform: translateY(-2px); box-shadow: var(--hh-shadow-sm); }
.hh-order > i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--hh-bg); color: var(--hh-ink); font-size: 22px; }
.hh-order strong { display: block; font: 700 15px var(--hh-font); color: var(--hh-ink); }
.hh-order small { display: block; font-size: 13px; color: var(--hh-muted); margin-top: 2px; }
.hh-order__right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hh-order__right b { font: 800 16px var(--hh-head); color: var(--hh-ink); }
.hh-addr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hh-addr { position: relative; padding: 16px; border: 1.5px solid var(--hh-line); border-radius: var(--hh-r-lg); background: #fff; animation: hh-fade-up .45s var(--hh-ease) both; transition: border-color .25s; }
.hh-addr.is-default { border-color: var(--hh-red-100); background: #FFFBFB; }
.hh-addr h4 { display: flex; align-items: center; gap: 8px; font: 700 15px var(--hh-font) !important; color: var(--hh-ink) !important; margin: 0 0 6px !important; text-transform: capitalize; }
.hh-addr p { font-size: 14px; color: var(--hh-text); line-height: 1.6; }
.hh-addr__actions { display: flex; gap: 14px; margin-top: 12px; }
.hh-addr__actions button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: 600 13px var(--hh-font); color: var(--hh-red); cursor: pointer; }
.hh-addr__actions button.is-muted { color: var(--hh-muted); }
.hh-notes { display: grid; gap: 10px; }
.hh-note { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px; border: 1px solid var(--hh-line); border-radius: var(--hh-r-lg); animation: hh-fade-up .45s var(--hh-ease) both; }
.hh-note > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--hh-amber-50); color: var(--hh-amber-600); font-size: 20px; }
.hh-note strong { font: 600 14.5px var(--hh-font); color: var(--hh-ink); }
.hh-note p { font-size: 13.5px; color: var(--hh-text); margin-top: 2px !important; }
.hh-note time { font-size: 12px; color: var(--hh-faint); }
.hh-skel { height: 76px; border-radius: var(--hh-r-lg); background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%) #EDF3F6; background-size: 200% 100%; animation: hh-shimmer 1.3s linear infinite; }
.hh-skel + .hh-skel { margin-top: 12px; }
.hh-lightbox img { width: 100%; border-radius: var(--hh-r-lg); }

/* =====================================================================
   CONTACT
   ===================================================================== */
.hh-contact { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: start; padding-top: 24px; }
.hh-cinfo { display: grid; gap: 12px; }
.hh-cinfo a, .hh-cinfo div.hh-cinfo__item { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--hh-line); border-radius: var(--hh-r-lg); background: #fff; transition: transform .3s var(--hh-ease), box-shadow .3s, border-color .25s; }
.hh-cinfo a:hover { transform: translateY(-3px); box-shadow: var(--hh-shadow-sm); border-color: var(--hh-red-100); }
.hh-cinfo i { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--hh-red-50); color: var(--hh-red); font-size: 22px; }
.hh-cinfo small { display: block; font-size: 12.5px; color: var(--hh-muted); }
.hh-cinfo strong { font: 600 15px var(--hh-font); color: var(--hh-ink); word-break: break-word; }
.hh-map { margin-top: 24px; border-radius: var(--hh-r-xl); overflow: hidden; border: 1px solid var(--hh-line); height: 340px; background: var(--hh-bg); }
.hh-map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.9); }
.hh-faq { display: grid; gap: 10px; }
.hh-faq details { border: 1px solid var(--hh-line); border-radius: var(--hh-r-lg); background: #fff; overflow: hidden; transition: border-color .25s; }
.hh-faq details[open] { border-color: var(--hh-red-100); }
.hh-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px; font: 600 15px var(--hh-font); color: var(--hh-ink); cursor: pointer; list-style: none; }
.hh-faq summary::-webkit-details-marker { display: none; }
.hh-faq summary::after { content: "+"; width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--hh-bg); color: var(--hh-red); font-size: 18px; transition: transform .35s var(--hh-ease); }
.hh-faq details[open] summary::after { transform: rotate(45deg); }
.hh-faq details p { padding: 0 16px 16px; font-size: 14.5px; color: var(--hh-text); line-height: 1.7; animation: hh-fade-up .4s var(--hh-ease); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1199px) {
    .hh-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hh-cartwrap { grid-template-columns: minmax(0, 1fr) 340px; }
    .hh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hh-contact { grid-template-columns: 320px minmax(0, 1fr); }
}
@media (max-width: 991px) {
    .hh-shop { grid-template-columns: 1fr; padding-top: 16px; }
    .hh-filters { position: fixed; z-index: 2050; inset: 0 auto 0 0; width: min(340px, 88vw); padding: 0 16px 16px; overflow-y: auto; background: var(--hh-bg); transform: translateX(-105%); transition: transform .5s var(--hh-ease); align-content: start; }
    .hh-filters.is-open { transform: none; box-shadow: var(--hh-shadow-lg); }
    .hh-filters__head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; margin: 0 -16px; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--hh-line); font: 700 17px var(--hh-head); color: var(--hh-ink); }
    .hh-filters__backdrop { display: block; position: fixed; inset: 0; z-index: 2040; background: rgba(14, 34, 51, .5); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
    .hh-filters__backdrop.is-open { opacity: 1; visibility: visible; }
    .hh-filterbtn { display: inline-flex; }
    .hh-pd { grid-template-columns: 1fr; padding-top: 16px; }
    .hh-gallery { position: relative; top: 0; }
    .hh-reviews { grid-template-columns: 1fr; }
    .hh-cartwrap { grid-template-columns: 1fr; padding-top: 16px; }
    .hh-aside { position: relative; top: 0; }
    .hh-dash { grid-template-columns: 1fr; }
    .hh-dash__side { position: relative; top: 0; }
    .hh-dash__nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
    .hh-dash__nav::-webkit-scrollbar { display: none; }
    .hh-dash__nav button, .hh-dash__nav a { white-space: nowrap; }
    .hh-dash__nav b { margin-left: 4px; }
    .hh-auth { grid-template-columns: 1fr; }
    .hh-auth__visual { min-height: 220px; }
    .hh-contact { grid-template-columns: 1fr; }
    .hh-order-grid { grid-template-columns: 1fr; }
    .hh-buybar { position: fixed; z-index: 1480; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-top: 1px solid var(--hh-line); box-shadow: 0 -8px 24px -14px rgba(14, 34, 51, .3); transform: translateY(120%); transition: transform .45s var(--hh-ease); }
    .hh-buybar.is-visible { transform: none; }
    .hh-buybar__price { display: flex; flex-direction: column; line-height: 1.2; }
    .hh-buybar__price strong { font: 800 18px var(--hh-head); color: var(--hh-ink); }
    .hh-buybar__price del { font-size: 12px; color: var(--hh-faint); }
    .hh-buybar .hh-btn { flex: 1; height: 46px; }
    body.hh-has-buybar .hh-cartbar { display: none; }
}
@media (max-width: 767px) {
    .hh-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .hh-form-grid, .hh-form-grid--3 { grid-template-columns: 1fr; }
    .hh-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .hh-spec { padding: 10px; }
    .hh-spec strong { font-size: 13.5px; }
    .hh-spec small { font-size: 11px; }
    .hh-litem { grid-template-columns: 76px minmax(0, 1fr); }
    .hh-litem__img { width: 76px; height: 76px; }
    .hh-litem__side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
    .hh-addr-list, .hh-addr-cards { grid-template-columns: 1fr; }
    .hh-toolbar .hh-select { min-width: 0; }
    .hh-toolbar__count { width: 100%; }
    .hh-toolbar__right { width: 100%; }
    .hh-toolbar__right .hh-select { flex: 1; }
    .hh-stepsbar li span { display: none; }
    .hh-order { grid-template-columns: minmax(0, 1fr) auto; }
    .hh-order > i { display: none; }
    .hh-track li { font-size: 11px; }
    .hh-pdtrust { grid-template-columns: repeat(3, 1fr); }
    .hh-pdtrust div { font-size: 11.5px; }
}
@media (max-width: 575px) {
    .hh-stats { gap: 10px; }
    .hh-stat { padding: 12px; gap: 10px; }
    .hh-stat > i { width: 40px; height: 40px; font-size: 19px; }
    .hh-stat strong { font-size: 19px; }
    .hh-pprice strong { font-size: 28px; }
    .hh-buy .hh-btn { min-width: 0; }
    .hh-otp input { height: 48px; font-size: 19px; }
}

/* Product page buy row on phones: [qty][♥][share] then [Add to Cart][Buy Now] */
@media (max-width: 767px) {
    .hh-buy { flex-wrap: wrap; gap: 10px; }
    .hh-buy > .hh-qtybox { order: 0; flex: 1 1 auto; justify-content: space-between; }
    .hh-buy > .hh-qtybox input { flex: 1; }
    .hh-buy > .hh-iconbtn { order: 1; }
    .hh-buy > .hh-btn { order: 2; flex: 1 1 calc(50% - 5px); min-width: 0; height: 52px; padding: 0 12px; font-size: 15px; }
}