html,body{margin:0;padding:0;background:#fff}
.hf-cprice{margin-top:10px;font-size:13.5px;color:var(--body)}.hf-cprice b{color:var(--navy);font-size:19px;font-weight:800;letter-spacing:-.3px}
.hf-faqlist{max-width:920px;margin-left:auto;margin-right:auto;gap:10px}
.hf-faqlist .hfv2-faq__item summary{padding:15px 22px;font-size:15.5px}
.hf-faqlist .hfv2-faq__a{padding:0 22px 17px}
/* shop by category */
.hf-catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.hf-catcard{position:relative;display:block;border-radius:18px;overflow:hidden;text-decoration:none;background:var(--navy-deep);box-shadow:0 16px 38px -22px rgba(16,35,61,.45);aspect-ratio:1/1.08}
.hf-catcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.hf-catcard:hover img{transform:scale(1.07)}
.hf-catcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,20,36,0) 32%,rgba(7,20,36,.92) 100%)}
.hf-catcard__b{position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:2}
.hf-catcard__n{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1.1}
.hf-catcard__c{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:4px}
.hf-catcard__s{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:13px;font-weight:800;letter-spacing:.3px;color:var(--green)}
.hf-catcard:hover .hf-catcard__s{gap:11px}
.hf-catcard--all{display:grid;place-items:center;background:linear-gradient(160deg,#16365f,#0a1f3d);text-align:center}
.hf-catcard--all::after{display:none}
.hf-catcard__allb{position:relative;z-index:2;padding:22px}
.hf-catcard__alln{display:block;font-size:21px;font-weight:800;color:#fff}
.hf-catcard__allc{display:block;font-size:12.5px;color:rgba(255,255,255,.7);margin-top:6px}
.hf-catcard--all .hf-catcard__s{margin-top:14px}
.hf-roomgrid{grid-template-columns:repeat(5,1fr)}
@media(max-width:980px){.hf-catgrid{grid-template-columns:repeat(2,1fr)}.hf-roomgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.hf-catgrid{grid-template-columns:1fr}.hf-roomgrid{grid-template-columns:repeat(2,1fr)}}
/* HFV2 CONTENT SECTIONS */
/* --- articles sections --- */
.hf-fa{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border:1px solid rgba(18,43,76,.08);border-radius:22px;overflow:hidden;box-shadow:0 26px 60px -30px rgba(16,35,61,.32);max-width:960px;margin:16px auto 0;text-decoration:none;transition:transform .22s ease,box-shadow .22s ease}
.hf-fa:hover{transform:translateY(-4px);box-shadow:0 44px 84px -34px rgba(16,35,61,.4)}
.hf-fa__m{position:relative;min-height:320px;overflow:hidden}
.hf-fa__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.hf-fa:hover .hf-fa__m img{transform:scale(1.045)}
.hf-fa__tag{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--green);color:var(--green-ink);font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.hf-fa__b{padding:clamp(28px,3vw,46px);display:flex;flex-direction:column;justify-content:center}
.hf-fa__meta{display:flex;gap:14px;color:var(--green-text);font-size:12px;font-weight:600;margin-bottom:12px}
.hf-fa__t{color:var(--navy);font-size:clamp(23px,2.3vw,32px);font-weight:800;line-height:1.18;letter-spacing:-.5px;margin:0 0 14px}
.hf-fa__d{color:var(--body);font-size:15px;line-height:1.6;margin:0 0 22px}
.hf-art__x{margin-top:auto;display:inline-flex;align-items:center;gap:7px;color:var(--green-text);font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.hf-art__x i{transition:transform .2s}
.hf-art:hover .hf-art__x i{transform:translateX(4px)}
@media(max-width:820px){.hf-fa{grid-template-columns:1fr;max-width:520px}.hf-fa__m{min-height:230px}}
/* --- guides sections --- */
.hf-cat{display:block;background:#fff;border:1px solid rgba(18,43,76,.08);border-radius:18px;padding:28px 24px;text-decoration:none;box-shadow:0 12px 30px -16px rgba(16,35,61,.16);transition:transform .25s,box-shadow .25s,border-color .25s}
.hf-cat:hover{transform:translateY(-6px);box-shadow:0 28px 52px -20px rgba(16,35,61,.22);border-color:rgba(74,213,93,.4)}
.hf-cat__ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:linear-gradient(160deg,#1e3d68 0%,#0a1f3d 100%);color:#fff;border:1.5px solid rgba(74,213,93,.5);font-size:26px;margin-bottom:18px;box-shadow:0 12px 26px -8px rgba(10,31,58,.4)}
.hf-cat__t{color:var(--navy);font-size:18px;font-weight:800;margin:0 0 8px}
.hf-cat__d{color:var(--body);font-size:13.5px;line-height:1.55;margin:0 0 14px}
.hf-cat__c{display:inline-flex;align-items:center;gap:7px;color:var(--green-text);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
/* --- case-studies sections --- */
.hf-flow{display:flex;align-items:stretch;gap:16px;margin-top:42px}
.hf-fcard{flex:1;position:relative;background:linear-gradient(165deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.035) 100%);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:30px 26px;box-shadow:0 18px 40px -22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09);transition:transform .25s,border-color .25s}
.hf-fcard:hover{transform:translateY(-6px);border-color:rgba(74,213,93,.55)}
.hf-fcard__n{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#57e06b 0%,#37c34c 100%);color:var(--green-ink);font-size:20px;font-weight:800;box-shadow:0 12px 26px -6px rgba(74,213,93,.6);margin-bottom:18px}
.hf-fcard__t{color:#fff;font-size:18px;font-weight:800;margin:0 0 9px}
.hf-fcard__d{color:rgba(255,255,255,.76);font-size:14px;line-height:1.6;margin:0}
.hf-farrow{flex:none;display:flex;align-items:center;color:var(--green);font-size:26px;opacity:.75}
.hf-flow-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:40px}
.hf-flow{flex-direction:column}
.hf-farrow{transform:rotate(90deg);justify-content:center}
@media(max-width:820px){.hf-flow{flex-direction:column}.hf-farrow{transform:rotate(90deg);justify-content:center}}
/* --- case-studies shop-the-looks --- */
.hf-grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:38px}
.hf-shop{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(18,43,76,.08);border-radius:18px;overflow:hidden;text-decoration:none;box-shadow:0 12px 32px -14px rgba(16,35,61,.16);transition:transform .25s,box-shadow .25s}
.hf-shop:hover{transform:translateY(-6px);box-shadow:0 28px 56px -18px rgba(16,35,61,.26)}
.hf-shop__m{position:relative;aspect-ratio:16/11;overflow:hidden;transform:translateZ(0)}
.hf-shop__m img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.hf-shop:hover .hf-shop__m img{transform:scale(1.07)}
.hf-shop__b{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:18px 20px 22px}
.hf-shop__t{color:var(--navy);font-size:18px;font-weight:800;margin:0 0 8px}
.hf-shop__d{color:var(--body);font-size:13px;line-height:1.5;margin:0 0 16px}
.hf-shop__cta{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding:11px 18px;border-radius:999px;background:var(--green);color:var(--green-ink);font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;box-shadow:0 10px 24px -6px rgba(74,213,93,.5)}
.hf-shop__cta i{font-size:15px}
/* HFV2 LANDING+TOP5 SECTIONS */
.hf-vband{padding:clamp(24px,3vw,40px) 0}
.hf-vband .hfv2-center{max-width:920px}
.hf-vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.hf-vcard{position:relative;background:linear-gradient(165deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.035) 100%);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:17px 16px;box-shadow:0 18px 40px -22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09);transition:transform .25s,border-color .25s,box-shadow .25s}
.hf-vcard:hover{transform:translateY(-6px);border-color:rgba(74,213,93,.55);box-shadow:0 28px 56px -22px rgba(0,0,0,.65)}
.hf-vcard__ic{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#57e06b 0%,#37c34c 100%);color:var(--green-ink);font-size:20px;margin-bottom:10px;box-shadow:0 12px 26px -6px rgba(74,213,93,.6)}
.hf-vcard__t{color:#fff;font-size:17px;font-weight:800;letter-spacing:-.2px;margin:0 0 8px}
.hf-vcard__d{color:rgba(255,255,255,.74);font-size:13.5px;line-height:1.55;margin:0}
.hf-vcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:13px;margin-top:22px}
.hf-vtrust{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.85);font-size:14px;font-weight:600}
.hf-vtrust .st{color:var(--green);letter-spacing:2px}
@media(max-width:820px){.hf-vgrid{grid-template-columns:1fr 1fr}}
.hf-rk{display:grid;grid-template-columns:minmax(280px,40%) 1fr;background:#fff;border:1px solid rgba(18,43,76,.1);border-radius:20px;overflow:hidden;box-shadow:0 16px 42px -22px rgba(16,35,61,.2);margin-top:22px}
.hf-rk--top{border:1.5px solid rgba(74,213,93,.55);box-shadow:0 26px 56px -22px rgba(74,213,93,.28)}
.hf-rk__m{position:relative;min-height:280px;overflow:hidden}
.hf-rk__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hf-rk__rank{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:999px;background:linear-gradient(160deg,#1e3d68 0%,#0a1f3d 100%);color:#fff;font-weight:800;font-size:15px;border:1.5px solid rgba(255,255,255,.28);box-shadow:0 10px 22px -6px rgba(10,31,58,.5)}
.hf-rk--top .hf-rk__rank{background:linear-gradient(160deg,#57e06b 0%,#37c34c 100%);color:var(--green-ink)}
.hf-rk__b{padding:clamp(22px,2.4vw,32px)}
.hf-rk__tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:rgba(35,122,58,.1);color:var(--green-text);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:12px}
.hf-rk__t{color:var(--navy);font-size:clamp(20px,1.9vw,25px);font-weight:800;letter-spacing:-.4px;margin:0 0 7px}
.hf-rk__stars{color:var(--green-text);font-size:14px;letter-spacing:1px;margin-bottom:13px}
.hf-rk__stars b{color:var(--ink);font-weight:700;margin-left:7px;font-size:13px}
.hf-rk__v{color:var(--body);font-size:14.5px;line-height:1.6;margin:0 0 16px}
.hf-rk__specs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.hf-rk__spec{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;background:#f1f5f9;color:var(--navy);font-size:12.5px;font-weight:600}
.hf-rk__spec i{color:var(--green-text);font-size:15px}
.hf-rk__pros{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:7px}
.hf-rk__pros li{display:flex;align-items:flex-start;gap:9px;color:var(--ink);font-size:13.5px}
.hf-rk__pros i{color:var(--green-text);font-size:17px;flex:none}
.hf-rk__cta{display:flex;flex-wrap:wrap;gap:12px}
.hf-cmp-wrap{overflow-x:auto;border-radius:14px;box-shadow:0 16px 40px -20px rgba(16,35,61,.18);border:1px solid rgba(18,43,76,.08);margin-top:32px}
.hf-cmp{width:100%;border-collapse:collapse;font-size:13.5px;min-width:680px;background:#fff}
.hf-cmp th,.hf-cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(18,43,76,.09)}
.hf-cmp thead th{background:var(--navy);color:#fff;font-weight:700;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase}
.hf-cmp tbody tr:last-child td{border-bottom:0}
.hf-cmp tbody tr:hover{background:#f6f9fc}
.hf-cmp td:first-child{font-weight:700;color:var(--navy)}
.hf-cmp__rk{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:800;margin-right:9px}
.hf-cmp i.ok{color:var(--green-text);font-size:18px}
.hf-cmp .st{color:var(--green-text);letter-spacing:1px}
@media(max-width:760px){.hf-rk{grid-template-columns:1fr}.hf-rk__m{min-height:220px}}
/* HFV2 hero-trust + vband-light */
.hfv2-hero__trust{display:flex;flex-wrap:wrap;gap:20px;margin-top:24px;color:rgba(255,255,255,.92);font-size:13.5px;font-weight:500}
.hfv2-hero__trust span{display:inline-flex;align-items:center;gap:8px;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.hfv2-hero__trust i{color:var(--green);font-size:17px}
.hf-vband--light .hf-vcard{background:#fff;border-color:rgba(18,43,76,.08);box-shadow:0 12px 30px -16px rgba(16,35,61,.16)}
.hf-vband--light .hf-vcard:hover{border-color:rgba(74,213,93,.5);box-shadow:0 24px 48px -18px rgba(16,35,61,.22)}
.hf-vband--light .hf-vcard__t{color:var(--navy)}
.hf-vband--light .hf-vcard__d{color:var(--body)}
.hf-vband--light .hf-vtrust{color:var(--ink)}
.hf-vband--light .hf-vtrust .st{color:var(--green-text)}
/* HFV2 PAGE-CSS GAP FIX */
.hf-sample{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(18,43,76,.08);border-radius:16px;overflow:hidden;box-shadow:0 12px 30px -16px rgba(16,35,61,.14);transition:transform .25s,box-shadow .25s}
.hf-sample:hover{transform:translateY(-5px);box-shadow:0 26px 50px -20px rgba(16,35,61,.2)}
.hf-sample__m{position:relative;aspect-ratio:1/1;overflow:hidden;transform:translateZ(0)}
.hf-sample__m img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.hf-sample:hover .hf-sample__m img{transform:scale(1.06)}
.hf-sample__badge{position:absolute;top:12px;left:12px;padding:6px 12px;border-radius:999px;background:var(--green);color:var(--green-ink);font-size:11px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;box-shadow:0 8px 18px -6px rgba(74,213,93,.5)}
.hf-sample__b{display:flex;flex-direction:column;flex:1;padding:16px}
.hf-sample__meta{color:var(--green-text);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px}
.hf-sample__t{color:var(--navy);font-size:14px;font-weight:700;line-height:1.3;margin:0 0 14px;min-height:36px}
.hf-sample__act{margin-top:auto}
.hf-sample__btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:999px;background:linear-gradient(135deg,#57e06b 0%,#37c34c 100%);color:var(--green-ink);font-size:12.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;border:0;cursor:pointer;box-shadow:0 12px 26px -8px rgba(74,213,93,.6),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .15s,box-shadow .18s,filter .15s}
.hf-sample__btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -8px rgba(74,213,93,.78),inset 0 1px 0 rgba(255,255,255,.4);filter:brightness(1.03)}
.hf-sample__btn:active{transform:translateY(0)}
.hf-sample__btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none;filter:grayscale(.25)}
/* ---- premium sample shop (sidebar filter + grid) ---- */
.hf-shop2{display:grid;grid-template-columns:250px 1fr;gap:32px;margin-top:40px;align-items:start}
.hf-fbar{position:sticky;top:18px;background:#fff;border:1px solid rgba(18,43,76,.08);border-radius:18px;padding:22px 16px;box-shadow:0 16px 40px -22px rgba(16,35,61,.2)}
.hf-fbar__h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--green-text);margin:0 6px 14px}
.hf-fbar__h i{font-size:16px}
.hf-fnav{display:flex;flex-direction:column;gap:2px}
.hf-f{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:10px 12px;color:var(--navy);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.hf-f:hover{background:rgba(18,43,76,.05)}
.hf-f.is-active{background:var(--navy);color:#fff}
.hf-f.is-active em{color:rgba(255,255,255,.65)}
.hf-f em{font-style:normal;font-size:12px;color:#9aa3b0;font-weight:600}
.hf-f--cat{margin-top:8px;font-weight:700}
.hf-f--sub{padding:8px 12px 8px 26px;font-size:13px;font-weight:500;color:var(--body)}
.hf-stoolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.hf-scount{color:var(--body);font-size:14px}
.hf-scount b{color:var(--navy);font-weight:800}
.hf-sbasket{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:rgba(74,213,93,.14);color:var(--green-text);font-size:13px;font-weight:700}
.hf-sbasket i{font-size:17px}
.hf-sbasket b{color:var(--navy);font-weight:800}
.hf-sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hf-sample.is-selected{border-color:var(--green);box-shadow:0 0 0 2px var(--green) inset,0 18px 38px -18px rgba(74,213,93,.45)}
.hf-sample.is-selected .hf-sample__btn{background:var(--navy);color:#fff;box-shadow:none}
.hf-shop2{grid-template-columns:1fr}
@media(max-width:1040px){.hf-sgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.hf-sgrid{grid-template-columns:1fr}}
/* HFV2 catcard image hard-pin — WooCommerce/theme stylesheets load AFTER extra-shop.css; a same-specificity
(0,1,1) `... img` reset ties with `.hf-catcard img` and wins by cascade order, collapsing the
banner to an in-flow strip (image top + navy panel). Pin cover with higher specificity + !important. */
.hfv2-page .hf-catgrid .hf-catcard img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;max-width:none!important;display:block!important}
/* HFV2 shop-by-room polish — pin the tile image (same cascade override as .hf-catcard) + premium hover lift +
stronger gradient so the room label always reads. */
.hfv2-page .hf-roomgrid .hfv2-disc-tile img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;max-width:none!important}
.hfv2-page .hf-roomgrid .hfv2-disc-tile{aspect-ratio:4/3.2;border-radius:16px;box-shadow:0 8px 22px rgba(18,43,76,.10);transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s}
.hfv2-page .hf-roomgrid .hfv2-disc-tile::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(7,18,33,.86) 0%,rgba(7,18,33,.28) 42%,transparent 66%)}
.hfv2-page .hf-roomgrid .hfv2-disc-tile img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.hfv2-page .hf-roomgrid .hfv2-disc-tile:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(18,43,76,.22)}
.hfv2-page .hf-roomgrid .hfv2-disc-tile:hover img{transform:scale(1.06)}
.hfv2-page .hf-roomgrid .hfv2-disc-tile__name{left:18px;right:16px;bottom:16px;z-index:2;font-size:17px;font-weight:700;text-shadow:0 1px 10px rgba(0,0,0,.45)}
/* HFV2 room landing pages — best-floors / consider cards, styling tips, curated product grid. */
.hfv2-page .hf-room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.hfv2-page .hf-room-card{background:#fff;border:1px solid rgba(18,43,76,.08);border-radius:16px;padding:26px 22px;box-shadow:0 8px 22px rgba(18,43,76,.05)}
.hfv2-page .hf-room-card__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:13px;background:var(--bg-light,#eef3f8);color:var(--green-text,#1f8a3b);font-size:24px;margin-bottom:16px}
.hfv2-page .hf-room-card__t{color:var(--navy)!important;font-size:17px;font-weight:800;margin:0 0 8px;line-height:1.2}
.hfv2-page .hf-room-card__d{color:var(--body,#59616b)!important;font-size:13.5px;line-height:1.55;margin:0}
.hfv2-page .hf-room-card--dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none}
.hfv2-page .hf-room-card--dark .hf-room-card__ic{background:rgba(74,213,93,.14);color:#6bf07f}
.hfv2-page .hf-room-card--dark .hf-room-card__t{color:#fff!important}
.hfv2-page .hf-room-card--dark .hf-room-card__d{color:rgba(255,255,255,.74)!important}
.hfv2-page .hf-room-products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.hfv2-page .hf-room-products .hfv2-pcard{box-shadow:0 6px 22px rgba(18,43,76,.06)}
.hfv2-page .hf-room-tips{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 34px;margin:32px auto 0;max-width:960px}
.hfv2-page .hf-room-tip{display:flex;gap:15px;align-items:flex-start}
.hfv2-page .hf-room-tip__n{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff!important;font-weight:800;font-size:15px}
.hfv2-page .hf-room-tip__t{color:var(--navy)!important;font-size:16px;font-weight:800;margin:2px 0 5px}
.hfv2-page .hf-room-tip__d{color:var(--body,#59616b)!important;font-size:13.5px;line-height:1.55;margin:0}
@media(max-width:900px){.hfv2-page .hf-room-grid,.hfv2-page .hf-room-products{grid-template-columns:repeat(2,1fr)}.hfv2-page .hf-room-tips{grid-template-columns:1fr}}
@media(max-width:560px){.hfv2-page .hf-room-grid,.hfv2-page .hf-room-products{grid-template-columns:1fr}}
/* HFV2 bestselling bag — static white picker bag on the bestselling carousel (like category .hf-cgrid). */
.hfv2-page .hfv2-pgrid .hfv2-pcard__bag,.hfv2-page .hfv2-pgrid .hf-atc,.hfv2-page .hfv2-pgrid .hf-atc:hover{right:14px!important;bottom:14px!important;width:50px!important;min-width:50px!important;max-width:50px!important;height:50px!important;padding:0!important;gap:0!important;border-radius:50%!important;overflow:hidden!important;transform:none!important;font-size:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.hfv2-page .hfv2-pgrid .hfv2-pcard__bag{background:rgba(248,251,255,.97)!important;color:#0e2a4d!important;border:1px solid rgba(18,43,76,.12)!important;box-shadow:0 10px 26px rgba(18,43,76,.16)!important;transition:background .18s,color .18s!important}
.hfv2-page .hfv2-pgrid .hfv2-pcard__bag:hover{background:var(--green)!important;color:#08331a!important;border-color:var(--green)!important}
.hfv2-page .hfv2-pgrid .hf-atc::before,.hfv2-page .hfv2-pgrid .hf-atc::after{content:none!important;display:none!important}
/* HFV2 bestselling card float — elevated white cards on the dark section (premium, like the PDP related row). */
.hfv2-page .hfv2-pgrid .hfv2-pcard{box-shadow:0 12px 34px rgba(0,0,0,.22)!important;transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s}
.hfv2-page .hfv2-pgrid .hfv2-pcard:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,0,0,.34)!important}
/* HFV2 bestselling card shape — kill the square look (theme overrides border-radius): hard-round card + image top,
tidy body padding, keep the elevated float. */
.hfv2-page .hfv2-pgrid .hfv2-pcard{border-radius:16px!important;overflow:hidden!important;border:1px solid rgba(18,43,76,.06)!important}
.hfv2-page .hfv2-pgrid .hfv2-pcard__m{border-radius:16px 16px 0 0!important}
.hfv2-page .hfv2-pgrid .hfv2-pcard__b{padding:18px 18px 20px!important}
.hfv2-page .hfv2-pgrid .hfv2-pcard__meta{margin-bottom:9px}
.hfv2-page .hfv2-pgrid .hfv2-pcard__t{margin-bottom:10px;min-height:0}
/* HFV2 samples how-it-works flow — the @media(820) stack rules got flattened into the base (missing display:flex → cards
stacked full-width as blocks; arrows stuck pointing down; white titles landed on a white bg).
Re-assert the intended horizontal glassy row on desktop; keep the vertical stack for real mobile. */
.hfv2-page .hf-flow{display:flex!important;flex-direction:row!important;align-items:stretch!important;gap:16px!important;margin-top:42px}
.hfv2-page .hf-fcard{flex:1 1 0!important;position:relative;background:#fff!important;border:1px solid rgba(18,43,76,.06)!important;border-radius:16px!important;padding:26px 24px!important;box-shadow:0 16px 42px rgba(0,0,0,.30)!important}
.hfv2-page .hfv2-sec--dark .hf-flow .hf-fcard .hf-fcard__t{color:var(--navy,#0e2a4d)!important}
.hfv2-page .hf-fcard__d{color:var(--body,#59616b)!important}
.hfv2-page .hf-fcard__n{color:#0e2a4d!important}
.hfv2-page .hf-farrow{transform:none!important;flex:none!important;display:flex;align-items:center;color:var(--green,#4ad55d)!important;opacity:.8}
@media(max-width:820px){.hfv2-page .hf-flow{flex-direction:column!important}.hfv2-page .hf-farrow{transform:rotate(90deg)!important}}
/* HFV2 samples shop layout — the @media stack rule got flattened into base (.hf-shop2 lost display:grid → filter
sidebar rendered full-width). Re-assert sidebar + grid; 4 samples per row; make the sample's
.hf-atc picker trigger render as the green text link (not the round bag). */
.hfv2-page .hf-shop2{display:grid!important;grid-template-columns:212px 1fr!important;gap:26px!important;align-items:start;margin-top:30px}
.hfv2-page .hf-sgrid{grid-template-columns:repeat(4,1fr)!important}
@media(max-width:980px){.hfv2-page .hf-shop2{grid-template-columns:1fr!important}.hfv2-page .hf-sgrid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:720px){.hfv2-page .hf-sgrid{grid-template-columns:1fr 1fr!important}}
@media(max-width:480px){.hfv2-page .hf-sgrid{grid-template-columns:1fr!important}}
/* HFV2 samples order button + confirm modal */
.hfv2-page .hf-sample .hf-sorder{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;width:100%;background:var(--green,#4ad55d);color:#08331a;border:0;border-radius:11px;padding:11px 16px;font-size:13px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;cursor:pointer;font-family:inherit;box-shadow:0 8px 20px rgba(74,213,93,.28);transition:background .18s,transform .12s}
.hfv2-page .hf-sample .hf-sorder:hover{background:#3cc551;transform:translateY(-1px)}
.hfv2-page .hf-sample .hf-sorder:active{transform:translateY(0)}
.hfv2-page .hf-sample .hf-sorder i{font-size:17px}
/* HFV2 sample picker modal — self-contained sample selector (image + Sample format + qty max 2 + add). */
.hfv2-page .hf-spick[hidden]{display:none}
.hfv2-page .hf-spick{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:20px}
.hfv2-page .hf-spick__bd{position:absolute;inset:0;background:rgba(9,21,38,.6)}
.hfv2-page .hf-spick__card{position:relative;background:#fff;border-radius:20px;overflow:hidden;max-width:420px;width:100%;box-shadow:0 30px 70px rgba(9,21,38,.45)}
.hfv2-page .hf-spick__x{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:0;font-size:20px;line-height:1;cursor:pointer;color:var(--navy)}
.hfv2-page .hf-spick__m{position:relative;aspect-ratio:16/10;background:#e7ecf3;overflow:hidden}
.hfv2-page .hf-spick__m img{width:100%!important;height:100%!important;object-fit:cover!important;display:block}
.hfv2-page .hf-spick__badge{position:absolute;top:14px;left:14px;background:var(--green,#4ad55d);color:#08331a;font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px}
.hfv2-page .hf-spick__b{padding:22px 24px 24px}
.hfv2-page .hf-spick__eye{color:var(--green-text,#1f8a3b);font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.hfv2-page .hf-spick__t{color:var(--navy)!important;font-size:19px;font-weight:800;line-height:1.2;margin:6px 0 16px}
.hfv2-page .hf-spick__fmt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:var(--bg-light,#eef3f8);border:1px solid rgba(74,213,93,.45);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.hfv2-page .hf-spick__fmt-l{font-weight:800;color:var(--navy)!important}
.hfv2-page .hf-spick__fmt-p{font-weight:800;color:var(--green-text,#1f8a3b)!important;margin-left:auto}
.hfv2-page .hf-spick__fmt-s{flex-basis:100%;font-size:12px;color:var(--body,#59616b)!important}
.hfv2-page .hf-spick__qty{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.hfv2-page .hf-spick__qty>span{font-weight:700;color:var(--navy)!important;font-size:14px}
.hfv2-page .hf-spick__qty small{color:var(--body,#59616b)!important;font-size:12px;margin-left:auto}
.hfv2-page .hf-qbox{display:inline-flex;align-items:center;border:1px solid rgba(18,43,76,.16);border-radius:10px;overflow:hidden}
.hfv2-page .hf-qbox button{width:38px;height:38px;border:0;background:#fff;font-size:18px;cursor:pointer;color:var(--navy)!important}
.hfv2-page .hf-qbox span{min-width:34px;text-align:center;font-weight:800;color:var(--navy)!important}
.hfv2-page .hf-spick__add{width:100%;min-height:50px;background:var(--green,#4ad55d)!important;color:#08331a!important;border:0;border-radius:12px;font-size:14px;font-weight:800;text-transform:uppercase;cursor:pointer;box-shadow:var(--glow)}
.hfv2-page .hf-spick__add:disabled{opacity:.7;cursor:default}
.hfv2-page .hf-spick__note{font-size:13px;margin:12px 0 0;text-align:center;min-height:1px}
/* ===== Articles/Guides: filter tabs + article grid (ported from preview, theme-guarded) ===== */
.hfv2-page .hf-arttabs{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 28px;border-bottom:1px solid rgba(18,43,76,.12);max-width:820px;margin:34px auto 0;padding:0}
.hfv2-page .hf-arttab{background:none!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;margin:0 0 -1px 0!important;padding:13px 2px!important;color:#8a93a0!important;font-size:12px!important;font-weight:700!important;letter-spacing:.6px!important;text-transform:uppercase!important;cursor:pointer!important;box-shadow:none!important;min-height:0!important;width:auto!important;transition:color .18s,border-color .18s}
.hfv2-page .hf-arttab:hover{color:var(--navy)!important;background:none!important}
.hfv2-page .hf-arttab[aria-selected="true"]{color:var(--navy)!important;border-bottom-color:var(--green)!important;background:none!important}
.hfv2-page .hf-artgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.hfv2-page .hf-art{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(18,43,76,.08);border-radius:18px;overflow:hidden;text-decoration:none;box-shadow:0 12px 32px -16px rgba(16,35,61,.16);transition:transform .25s,box-shadow .25s}
.hfv2-page .hf-art:hover{transform:translateY(-6px);box-shadow:0 28px 54px -20px rgba(16,35,61,.22)}
.hfv2-page .hf-art__m{position:relative;aspect-ratio:16/10;overflow:hidden;transform:translateZ(0)}
.hfv2-page .hf-art__m img{width:100%!important;height:100%!important;object-fit:cover!important;display:block;transition:transform .5s;border-radius:0!important}
.hfv2-page .hf-art:hover .hf-art__m img{transform:scale(1.06)}
.hfv2-page .hf-art__tag{position:absolute;top:14px;left:14px;padding:6px 13px;border-radius:999px;background:rgba(10,31,58,.86);color:#fff!important;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.hfv2-page .hf-art__b{display:flex;flex-direction:column;flex:1;padding:22px}
.hfv2-page .hf-art__meta{color:var(--green-text)!important;font-size:12px;font-weight:600;margin-bottom:9px}
.hfv2-page .hf-art__t{color:var(--navy)!important;font-size:18px!important;font-weight:800!important;line-height:1.32;letter-spacing:-.3px;margin:0 0 10px!important}
.hfv2-page .hf-art__d{color:var(--body)!important;font-size:13.5px;line-height:1.55;margin:0 0 16px}
.hfv2-page .hf-art__x{margin-top:auto;display:inline-flex;align-items:center;gap:7px;color:var(--green-text)!important;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.hfv2-page .hf-art__x i{transition:transform .2s}
.hfv2-page .hf-art:hover .hf-art__x i{transform:translateX(4px)}
.hfv2-page .hf-art[hidden]{display:none!important}
@media(max-width:900px){.hfv2-page .hf-artgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.hfv2-page .hf-artgrid{grid-template-columns:1fr}}
/* Samples page polish + 5-sample gate (2026-07-13) */
.hf-sample__m{aspect-ratio:4/3}
.hf-sample__t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;margin:0 0 4px}
.hf-sample__dims{display:block;color:#8b93a1;font-size:11.5px;font-weight:600;letter-spacing:.2px;margin:0 0 12px}
.hf-sample__b .hf-sorder{margin-top:auto}
.hf-sbasket.is-full{background:rgba(255,171,64,.16);color:#8a5a1f}
.hf-sbasket.is-full b{color:#8a5a1f}
.hf-slimit{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:20px}
.hf-slimit[hidden]{display:none}
.hf-slimit__bd{position:absolute;inset:0;background:rgba(10,31,58,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hf-slimit__card{position:relative;background:#fff;border-radius:20px;padding:30px 28px 26px;width:min(440px,94vw);text-align:center;box-shadow:0 30px 70px -20px rgba(10,31,58,.5);font-family:'Poppins',system-ui,sans-serif}
.hf-slimit__ic{width:54px;height:54px;border-radius:50%;background:rgba(74,213,93,.16);color:#237a3a;display:grid;place-items:center;margin:0 auto 14px;font-size:24px}
.hf-slimit__t{font-size:20px;font-weight:800;color:#122B4C;margin:0 0 8px;letter-spacing:-.3px}
.hf-slimit__d{font-size:14px;color:#59616b;line-height:1.55;margin:0 auto 20px;max-width:36ch}
.hf-slimit__d b{color:#122B4C}
.hf-slimit__btns{display:flex;gap:10px;flex-wrap:wrap}
.hf-slimit__go{flex:1 1 auto;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;background:linear-gradient(135deg,#57e06b,#37c34c);color:#0a2a12;font-size:13.5px;font-weight:800;text-decoration:none;padding:0 18px;box-shadow:0 12px 26px -8px rgba(74,213,93,.6)}
.hf-slimit__go:hover{filter:brightness(1.04)}
.hf-slimit__stay{flex:1 1 auto;min-height:48px;border-radius:999px;background:#fff;border:1.5px solid rgba(18,43,76,.18);color:#122B4C;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit}
.hf-slimit__stay:hover{border-color:rgba(74,213,93,.55);background:rgba(74,213,93,.05)}
/* Samples filter (2026-07-14): on mobile a collapsible filter — closed by default,
the "Filter samples" pill toggles a tidy 2-column panel. Desktop sidebar untouched. */
button.hf-fbar__h{background:none;border:0;padding:0;cursor:default;font-family:inherit;width:100%;text-align:left}
.hf-fbar__chev{display:none}
@media(max-width:980px){
.hfv2-page .hf-shop2>*{min-width:0}
.hfv2-page .hf-fbar{position:static!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
.hfv2-page .hf-fbar__h{display:flex!important;width:100%!important;align-items:center;gap:9px;background:#fff;border:1px solid rgba(18,43,76,.14)!important;border-radius:999px;padding:11px 18px!important;margin:0!important;font-size:13px;font-weight:700;letter-spacing:.3px;color:var(--navy,#122B4C);text-transform:none;cursor:pointer;box-shadow:0 6px 14px -10px rgba(16,35,61,.25)}
.hfv2-page .hf-fbar__h>i:first-child{font-size:16px;color:var(--green-text,#237a3a)}
.hfv2-page .hf-fbar__chev{display:inline-block;margin-left:auto;font-size:15px;color:#8b93a1;transition:transform .2s}
.hfv2-page .hf-fbar.is-open .hf-fbar__chev{transform:rotate(180deg)}
.hfv2-page .hf-fnav{display:none!important}
.hfv2-page .hf-fbar.is-open .hf-fnav{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;background:#fff;border:1px solid rgba(18,43,76,.1);border-radius:16px;padding:12px;margin-top:10px;box-shadow:0 18px 40px -22px rgba(16,35,61,.3)}
.hfv2-page .hf-fbar.is-open .hf-f{width:100%!important;justify-content:center;text-align:center;background:#f6f8fa;border:1px solid rgba(18,43,76,.1);border-radius:999px;padding:10px 8px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hfv2-page .hf-fbar.is-open .hf-f.is-active{background:var(--navy,#122B4C);color:#fff;border-color:var(--navy,#122B4C)}
.hfv2-page .hf-stoolbar{margin-top:12px}
}
/* Samples catalogue: match the category archive canvas and card rhythm. */
.hf-samples-page .hf-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.hf-samples-page .hf-samples-catalog{padding:clamp(26px,3.4vw,44px) 0 clamp(56px,6vw,88px)!important}
.hf-samples-page .hf-samples-catalog>.hfv2-wrap{width:auto!important;max-width:none!important;margin:0!important;padding-left:clamp(18px,3.4vw,54px)!important;padding-right:clamp(18px,3.4vw,54px)!important}
.hf-samples-page .hf-shop2{grid-template-columns:248px minmax(0,1fr)!important;gap:28px!important;margin-top:0!important}
.hf-samples-page .hf-fbar{position:sticky!important;top:18px!important;background:#fff!important;border:1px solid rgba(18,43,76,.1)!important;border-radius:18px!important;padding:20px 16px!important;box-shadow:0 16px 40px -26px rgba(16,35,61,.4)!important}
.hf-samples-page .hf-fbar__h{padding:0 6px 14px!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--navy,#122b4c)!important;font-size:15px!important;font-weight:800!important;letter-spacing:0!important;text-transform:none!important;cursor:default!important}
.hf-samples-page .hf-fbar__h>i:first-child{color:var(--green-text,#237a3a)!important}
.hf-samples-page .hf-sgrid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}
.hf-samples-page .hf-sample{border:0!important;border-radius:20px!important;box-shadow:0 24px 54px -32px rgba(16,35,61,.42)!important;transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease!important}
.hf-samples-page .hf-sample:hover{transform:translateY(-6px)!important;box-shadow:0 40px 70px -34px rgba(16,35,61,.5)!important}
.hf-samples-page .hf-sample__m{aspect-ratio:1/1!important;border-radius:20px 20px 0 0!important;background:#e7ecf2!important}
.hf-samples-page .hf-sample__m::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,16,30,.16),transparent 34%);pointer-events:none;z-index:1}
.hf-samples-page .hf-sample__badge{z-index:2;top:14px;left:14px;padding:6px 11px;border-radius:8px;background:#49cf5b;color:#082d18;font-size:9.5px;font-weight:800;letter-spacing:1px;box-shadow:0 10px 24px -12px rgba(13,61,30,.55)}
.hf-samples-page .hf-sample__b{padding:17px 18px 19px!important;background:#fff}
.hf-samples-page .hf-sample__meta{margin:0 0 8px;font-size:9.5px;font-weight:700;letter-spacing:1.9px;color:#2f9e44}
.hf-samples-page .hf-sample__t{min-height:40px;margin:0 0 6px;font-size:15px;font-weight:600;line-height:1.35;color:#101f36}
.hf-samples-page .hf-sample__t a{color:inherit!important;text-decoration:none!important}
.hf-samples-page .hf-sample__dims{min-height:18px;margin:0 0 14px;font-size:11.5px;font-weight:500;color:#8e98a5}
.hf-samples-page .hf-sample .hf-sorder{min-height:46px;margin-top:auto;border-radius:10px;padding:12px 14px;font-size:11px;letter-spacing:1px;box-shadow:none;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.hf-samples-page .hf-sample .hf-sorder:hover{background:#37c34c;box-shadow:0 12px 24px -14px rgba(26,112,45,.6)}
.hf-samples-page .hf-stoolbar{min-height:42px;margin:0 0 20px}
.hf-samples-page .hf-scount{font-size:14px}
@media(max-width:1280px){
.hf-samples-page .hf-shop2{grid-template-columns:220px minmax(0,1fr)!important;gap:24px!important}
.hf-samples-page .hf-sgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:980px){
.hf-samples-page .hf-shop2{grid-template-columns:1fr!important;gap:20px!important}
.hf-samples-page .hf-sgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.hf-samples-page .hf-fbar{position:static!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
.hf-samples-page .hf-fbar__h{cursor:pointer!important;padding:11px 18px!important;border:1px solid rgba(18,43,76,.14)!important;border-radius:999px!important;box-shadow:0 6px 14px -10px rgba(16,35,61,.25)!important;font-size:13px!important;font-weight:700!important}
}
@media(max-width:760px){
.hf-samples-page .hf-samples-catalog{padding-top:20px!important}
.hf-samples-page .hf-sgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
.hf-samples-page .hf-sample__b{padding:15px 15px 16px!important}
}
@media(max-width:520px){
.hf-samples-page .hf-samples-catalog>.hfv2-wrap{padding-left:16px!important;padding-right:16px!important}
.hf-samples-page .hf-stoolbar{align-items:center;margin-bottom:16px}
.hf-samples-page .hf-sbasket{padding:8px 12px;font-size:12px}
}
@media(max-width:640px){.hf-samples-page .hf-sgrid{grid-template-columns:1fr!important}}
/* ===== samples "How it works" — compact timeline (2026-07-15) =============
Replaces the three tall white cards + arrows: one glass card, three short
rows with a connected number rail on mobile; three light columns on desktop. */
.hf-steps{position:relative;display:flex;flex-direction:column;max-width:560px;margin:30px auto 0;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:6px 18px}
.hf-step{position:relative;display:flex;align-items:center;gap:14px;padding:16px 0}
.hf-step + .hf-step{border-top:1px solid rgba(255,255,255,.08)}
.hf-step__n{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(145deg,#57e06b 0%,#37c34c 100%);color:#0a2a12;font-size:15px;font-weight:800;box-shadow:0 8px 18px -6px rgba(74,213,93,.55)}
.hf-step::before{content:"";position:absolute;left:17px;top:calc(50% + 22px);bottom:-22px;width:2px;background:linear-gradient(180deg,rgba(74,213,93,.45),rgba(74,213,93,.12))}
.hf-step:last-child::before{display:none}
.hf-step__tx{flex:1;min-width:0}
.hf-step__t{margin:0;color:#fff;font-size:15px;font-weight:800;letter-spacing:-.1px}
.hf-step__d{margin:2px 0 0;color:rgba(255,255,255,.66);font-size:12.5px;line-height:1.45}
.hf-step__i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(74,213,93,.12);color:#53cd63;font-size:17px}
@media(min-width:821px){
.hf-steps{flex-direction:row;max-width:960px;background:transparent;border:0;padding:0;gap:14px}
.hf-step{flex:1 1 0;align-items:flex-start;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:20px}
.hf-step + .hf-step{border-top:1px solid rgba(255,255,255,.13)}
.hf-step::before{display:none}
.hf-step__t{font-size:16px}
.hf-step__d{font-size:13px}
}
/* ===== shop page rework (2026-07-15) ======================================
Hero/reviews/FAQ/final-CTA removed in shop.php — the page is a pure
distributor now: categories (H1) → bestsellers → rooms → sample CTA. */
/* categories: two columns on phones (was a 3500px single-column tower) */
@media(max-width:560px){
.hfv2-page .hf-catgrid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important;margin-top:26px!important}
.hfv2-page .hf-catcard{aspect-ratio:1/1.05!important;border-radius:14px!important}
.hfv2-page .hf-catcard__n{font-size:14.5px!important}
.hfv2-page .hf-catcard__c{font-size:11px!important}
.hfv2-page .hf-catcard__s{display:none!important}
}
/* "Browse everything": slim full-width row instead of another giant tile */
.hfv2-page .hf-catcard--all{grid-column:1/-1!important;aspect-ratio:auto!important;min-height:0!important;background:linear-gradient(135deg,#0a1f3a,#122B4C)!important}
.hfv2-page .hf-catcard--all .hf-catcard__allb{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:18px 22px!important;position:static!important}
.hfv2-page .hf-catcard--all .hf-catcard__alln{font-size:15px;font-weight:800;color:#fff}
.hfv2-page .hf-catcard--all .hf-catcard__allc{flex:1;font-size:12px;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hfv2-page .hf-catcard--all .hf-catcard__s{display:inline-flex!important;position:static!important;color:#4ad55d!important;font-size:12px!important;white-space:nowrap}
@media(max-width:560px){.hfv2-page .hf-catcard--all .hf-catcard__allc{display:none}}
/* rooms: uniform 4:5 cards, navy gradient, swipe band on phones */
.hf-rooms{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:34px}
.hf-room{position:relative;display:block;aspect-ratio:4/5;border-radius:16px;overflow:hidden;text-decoration:none;background:#0a1f3a;box-shadow:0 16px 38px -22px rgba(16,35,61,.4);transition:transform .22s ease,box-shadow .22s ease}
.hf-room img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;display:block!important;transition:transform .45s ease}
.hf-room::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,27,49,0) 42%,rgba(6,27,49,.86) 100%)}
.hf-room:hover{transform:translateY(-5px);box-shadow:0 26px 52px -24px rgba(16,35,61,.55)}
.hf-room:hover img{transform:scale(1.06)}
.hf-room__tx{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:2px}
.hf-room__tx b{color:#fff;font-size:16px;font-weight:800;letter-spacing:-.2px}
.hf-room__tx em{display:inline-flex;align-items:center;gap:6px;font-style:normal;color:#4ad55d;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.hf-room:focus-visible{outline:2px solid #37c34c;outline-offset:2px}
@media(max-width:900px){
.hf-rooms{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px;margin:26px -4vw 0;padding:4px 4vw 18px;scroll-padding-left:4vw}
.hf-rooms::-webkit-scrollbar{display:none}
.hf-room{flex:0 0 min(56vw,230px);scroll-snap-align:start}
}
/* sample CTA: tighter on phones */
@media(max-width:760px){
.hfv2-page .hfv2-sample__media img{max-height:240px;object-fit:cover}
.hfv2-page .hfv2-sample .hfv2-lead{margin-bottom:18px}
}