/* group-hub-v12.css · /group/{slug} hub · one layout for all 16 groups · scope .gh-wrap
   1) every colour is declared ONCE below; block rules only use var(--gh-*)
   2) site variables first, fallback = value live on printblur.com today */
.gh-wrap{
--gh-ink:var(--pr-color-dark-x,#222);--gh-text:var(--darkness,#444);--gh-muted:var(--pr-color-dark-2,#595959);
--gh-link:var(--primary,#0b5179);--gh-link-h:var(--primary-dk,#094364);--gh-accent:var(--secondary,#A7165C);--gh-trend:var(--successful,#258635);
--gh-line:var(--pr-color-neutral-200,#D6DADF);--gh-line-2:var(--pr-color-neutral-100,#e1e1e1);--gh-surface:var(--light,#f5f5f5);--gh-chip-text:var(--primary-dk,#094364);
--gh-bg:#fff;--gh-chip:#f1f1f1;--gh-chip-h:#e6e6e6;--gh-accent-tint:#FAEEF3;--gh-tint:#EEF4FB;
--gh-focus:var(--primary,#0b5179);--gh-shadow:0 6px 18px rgba(0,0,0,.08);--gh-shadow-s:0 2px 8px rgba(0,0,0,.08);
--gh-r:12px;--gh-r-s:8px;--gh-r-pill:38px;--gh-gap:16px;--gh-section:48px;--gh-t:.15s ease;
--gh-down:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");--gh-chev:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m9 5 7 7-7 7%27/%3E%3C/svg%3E");--gh-arrow:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12h14m-5-5 5 5-5 5%27/%3E%3C/svg%3E");--gh-check:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m5 12.5 4.5 4.5L19 7.5%27/%3E%3C/svg%3E");
color:var(--gh-text)}
.gh-wrap[data-theme=mint]{--gh-tint:#EDF7F2}.gh-wrap[data-theme=sand]{--gh-tint:#FAF3EA}.gh-wrap[data-theme=rose]{--gh-tint:#FBEFF3}
/* base: zero specificity, never overrides reused site components */
:where(.gh-wrap) :where(h1,h2,h3){color:var(--gh-ink);margin:0;text-wrap:balance}:where(.gh-wrap) :where(ul,ol){list-style:none;margin:0;padding:0}:where(.gh-wrap) :where(p){margin:0}
:where(.gh-wrap) :where(a){color:var(--gh-link)}:where(.gh-wrap) :where(a:hover){color:var(--gh-link-h)}
:where(.gh-wrap) :where(a,button):focus-visible{outline:3px solid var(--gh-focus);outline-offset:2px;border-radius:6px}
:where(.gh-wrap) svg{flex:none}:where(.gh-wrap) img{display:block;max-width:100%}
.gh-sr{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gh-ic-arrow::after,.gh-ic-chev::after,.gh-ic-down::after{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--gh-arrow) center/16px no-repeat;mask:var(--gh-arrow) center/16px no-repeat}
.gh-ic-down::after{-webkit-mask-image:var(--gh-down);mask-image:var(--gh-down)}
.gh-ic-chev::after{-webkit-mask-image:var(--gh-chev);mask-image:var(--gh-chev);width:14px;height:14px;-webkit-mask-size:14px;mask-size:14px}
/* 1 hero */
.gh-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding:28px 32px;border-radius:var(--gh-r);background:var(--gh-tint)}
.gh-hero h1{font-size:34px;line-height:40px;font-weight:700;letter-spacing:-.02em}
.gh-hero-text p{max-width:66ch;margin-top:10px;font-size:15px;line-height:24px}
.gh-facts{display:flex;gap:6px 20px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:13px;line-height:20px}
.gh-facts li{display:inline-flex;align-items:center;gap:6px;color:var(--gh-ink);font-weight:500}
.gh-facts li:not(.gh-fact-link)::before{content:"";width:16px;height:16px;background:var(--gh-accent);-webkit-mask:var(--gh-check) center/16px no-repeat;mask:var(--gh-check) center/16px no-repeat}
.gh-facts a{display:inline-flex;gap:4px;align-items:center;min-height:32px;font-weight:700;text-decoration:none}
.gh-hero-vis{display:block;width:184px;height:184px}
.gh-hero-vis img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.gh-hero-vis.is-photo img{object-fit:cover;mix-blend-mode:normal;border-radius:16px;border:4px solid var(--gh-bg);box-shadow:var(--gh-shadow-s);background:var(--gh-surface)}
.gh-hero-ic{display:grid;place-items:center;width:112px;height:112px;margin:0 36px;border-radius:50%;background:var(--gh-bg);color:var(--gh-link)}.gh-hero-ic svg{width:56px;height:56px}
/* 2 on-page nav */
.gh-jump{display:flex;gap:24px;border-bottom:1px solid var(--gh-line-2);margin:8px 0 32px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.gh-jump::-webkit-scrollbar{display:none}
.gh-jump a{display:flex;align-items:center;min-height:44px;font-size:13px;color:var(--gh-text);font-weight:600;border-bottom:2px solid transparent;text-decoration:none;transition:color var(--gh-t),border-color var(--gh-t)}
.gh-jump a:hover{color:var(--gh-link);border-color:var(--gh-link)}
/* section shell: same header pattern for every block */
.gh-sec{margin-top:var(--gh-section);scroll-margin-top:16px}.gh-sec.is-first{margin-top:0}
.gh-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.gh-head h2,.gh-about h2{font-size:24px;line-height:30px;font-weight:700;letter-spacing:-.015em}
.gh-wrap h3{font-size:16px;line-height:22px;font-weight:700}
.gh-sub{font-size:14px;line-height:20px;margin-top:4px;color:var(--gh-muted)}
.gh-more{display:inline-flex;align-items:center;gap:4px;min-height:40px;font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none}
.gh-more:hover{text-decoration:underline;text-underline-offset:3px}
/* chip: same values as the listing occasion chip (.quick-filter-item) */
.gh-chip{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:4px 14px;border-radius:var(--gh-r-pill);background:var(--gh-chip);font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;text-decoration:none;transition:background-color var(--gh-t)}
.gh-wrap .gh-chip{color:var(--gh-chip-text)}.gh-wrap .gh-chip:hover{background:var(--gh-chip-h);color:var(--gh-chip-text)}
.gh-chip.has-ic{padding-left:10px}.gh-oi{width:20px;height:20px}.gh-tr{width:20px;height:20px;color:var(--gh-trend)}
.gh-chip.is-sm{min-height:32px;padding:5px 12px;font-size:13px;line-height:18px;font-weight:400}
/* 3 category tiles: category image as uploaded, 4:3 frame */
.gh-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gh-gap)}
.gh-tile{display:flex;flex-direction:column;gap:10px;text-align:center;font-weight:600;font-size:14px;line-height:20px;text-decoration:none}
.gh-wrap .gh-tile{color:var(--gh-ink)}
.gh-tile-img{display:grid;place-items:center;overflow:hidden;aspect-ratio:4/3;background:var(--gh-surface);border-radius:var(--gh-r);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);transition:box-shadow var(--gh-t)}
.gh-tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gh-tile-img.is-icon{background:var(--gh-tint);color:var(--gh-link)}.gh-tile-img.is-icon svg{width:44px;height:44px}
.gh-tile:hover .gh-tile-img{box-shadow:var(--gh-shadow)}.gh-tile:hover img{transform:scale(1.03)}.gh-tile:hover .gh-tile-name{text-decoration:underline;text-underline-offset:3px}
.gh-tile-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
/* 4 occasions strip */
.gh-occ{margin-top:28px;display:flex;align-items:center;gap:20px;padding:14px 0;border-block:1px solid var(--gh-line-2)}
.gh-occ h2{font-size:16px;line-height:22px;white-space:nowrap;font-weight:700}
.gh-rail-wrap{display:flex;gap:8px;min-width:0;flex:1;align-items:center}
.gh-rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;flex:1;padding:3px 2px}
.gh-rail::-webkit-scrollbar,.gh-bs-track::-webkit-scrollbar,.gh-groups::-webkit-scrollbar{display:none}
.gh-rail li{scroll-snap-align:start;flex:none}
.gh-rail-btn{width:40px;height:40px;flex:none;border:1px solid var(--gh-line);background:var(--gh-bg);border-radius:50%;display:grid;place-items:center;color:var(--gh-ink);cursor:pointer;transition:background-color var(--gh-t)}
.gh-rail-btn:hover:not(:disabled){background:var(--gh-surface)}.gh-rail-btn svg{width:18px;height:18px}.gh-rail-btn.prev svg{transform:rotate(180deg)}.gh-rail-btn:disabled{opacity:.35;cursor:default}
/* 5 best sellers: markup + CSS of /explore/ "Best Selling" reused as-is; only layout rules here */
.gh-bs .explore-best-seller-list{position:relative}
.gh-bs-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * 20px) / 5);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.gh-bs-track>li{scroll-snap-align:start;min-width:0}
.gh-bs-nav{position:absolute;top:calc(16px + (100% - 32px - 112px) / 2 - 24px);z-index:2;width:36px;height:48px;display:grid;place-items:center;border:0;background:var(--gh-bg);color:var(--gh-ink);box-shadow:var(--gh-shadow-s);cursor:pointer}
.gh-bs-nav svg{width:18px;height:18px}.gh-bs-nav.prev{left:0;border-radius:0 8px 8px 0}.gh-bs-nav.prev svg{transform:rotate(180deg)}.gh-bs-nav.next{right:0;border-radius:8px 0 0 8px}.gh-bs-nav:disabled{opacity:0;pointer-events:none}
/* 6 recipients */
.gh-recip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.gh-recip-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:104px;padding:14px 6px;border:1px solid var(--gh-line-2);border-radius:var(--gh-r);font-size:14px;line-height:18px;font-weight:600;background:var(--gh-bg);text-decoration:none;transition:box-shadow var(--gh-t),border-color var(--gh-t)}
.gh-wrap .gh-recip-item{color:var(--gh-ink)}.gh-recip-item:hover{border-color:var(--gh-line);box-shadow:var(--gh-shadow)}
.gh-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gh-chip);color:var(--gh-link)}.gh-icon svg{width:26px;height:26px}
/* 7 ways to make it yours */
.gh-ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gh-gap)}
.gh-way{display:flex;flex-direction:column;height:100%;border:1px solid var(--gh-line-2);border-radius:var(--gh-r);padding:20px;background:var(--gh-bg);text-decoration:none;transition:box-shadow var(--gh-t),border-color var(--gh-t)}
.gh-wrap .gh-way{color:var(--gh-text)}.gh-way:hover{border-color:var(--gh-line);box-shadow:var(--gh-shadow)}.gh-way:hover .gh-way-cta{text-decoration:underline;text-underline-offset:3px}
.gh-way-ic{display:grid;place-items:center;width:44px;height:44px;background:var(--gh-accent-tint);color:var(--gh-accent);border-radius:10px;margin-bottom:14px}.gh-way-ic svg{width:28px;height:28px}
.gh-way-d{font-size:14px;line-height:21px;margin-top:6px;flex:1}.gh-way-cta{display:inline-flex;align-items:center;gap:4px;margin-top:12px;font-size:14px;font-weight:700;color:var(--gh-link)}
/* 8 directory: same card for every group (card = cluster of categories, or one category with its sub-categories) */
.gh-dir{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gh-gap);align-items:start}
.gh-dir-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--gh-line-2);border-radius:var(--gh-r);background:var(--gh-bg);padding:18px 18px 8px}
.gh-dir-head{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.gh-dir-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--gh-chip);color:var(--gh-link);flex:none}.gh-dir-ic svg{width:22px;height:22px}
.gh-dir-head h3 a{display:inline-flex;align-items:center;min-height:28px;text-decoration:none}.gh-wrap .gh-dir-head h3 a{color:var(--gh-ink)}.gh-wrap .gh-dir-head h3 a:hover{color:var(--gh-link);text-decoration:underline;text-underline-offset:3px}
.gh-dir-count{display:block;font-size:12px;line-height:16px;color:var(--gh-muted);font-weight:400}
.gh-dir-acc{display:none}.gh-dir-body{display:flex;flex-direction:column}
.gh-dir-list li+li{border-top:1px solid var(--gh-line-2)}
.gh-dir-list a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;font-size:14px;line-height:20px;font-weight:600;text-decoration:none}
.gh-wrap .gh-dir-list a{color:var(--gh-ink)}.gh-dir-list a::after{background:var(--gh-muted)}.gh-wrap .gh-dir-list a:hover{color:var(--gh-link)}.gh-dir-list a:hover::after{background:var(--gh-link)}
.js .gh-dir-card:not(.is-more) .gh-dir-list .is-extra{display:none}
.gh-dir-more{display:inline-flex;align-items:center;gap:4px;margin-top:4px;min-height:40px;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--gh-link);align-self:flex-start;cursor:pointer}
.gh-dir-more::after{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--gh-down) center/16px no-repeat;mask:var(--gh-down) center/16px no-repeat;transition:transform .2s}.gh-dir-more[aria-expanded=true]::after{transform:rotate(180deg)}
.gh-dir-styles{padding:6px 0 10px}.gh-dir-styles p{font-size:12px;line-height:16px;font-weight:700;color:var(--gh-muted);margin:10px 0 6px;text-transform:uppercase;letter-spacing:.04em}
.gh-dir-styles ul{display:flex;flex-wrap:wrap;gap:6px}
.js .gh-dir-card:not(.is-more) .gh-dir-styles{display:none}
/* 9 about: always visible */
.gh-about-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px;align-items:start}
.gh-about-text{max-width:68ch}.gh-about-text h2{margin-bottom:12px}
.gh-about-lead{font-size:17px;line-height:28px;color:var(--gh-ink)}
.gh-about-text h3{margin:22px 0 6px}.gh-about-text p+p{margin-top:12px}.gh-about-text p{font-size:15px;line-height:26px}
.gh-about-text a{text-decoration:underline;text-underline-offset:3px}
.gh-about-aside{background:var(--gh-surface);border-radius:var(--gh-r);padding:24px}
.gh-about-aside h3{margin-bottom:12px}.gh-about-aside li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:14px;line-height:21px;padding:9px 0}
.gh-about-aside li+li{border-top:1px solid var(--gh-line-2)}.gh-about-aside li::before{content:"";width:20px;height:20px;margin-top:1px;background:var(--gh-accent);-webkit-mask:var(--gh-check) center/20px no-repeat;mask:var(--gh-check) center/20px no-repeat}
.gh-about-aside strong{color:var(--gh-ink);font-weight:600}
/* 10 other groups */
.gh-groups{display:flex;flex-wrap:wrap;gap:10px 12px}
/* tablet */
@media (max-width:1279px){.gh-wrap{--gh-section:44px}
.gh-hero{padding:24px 28px}.gh-hero-vis{width:152px;height:152px}.gh-hero h1{font-size:30px;line-height:36px}
.gh-tiles{gap:12px}.gh-bs-track{grid-auto-columns:calc((100% - 3 * 16px) / 4);gap:16px}
.gh-recip{gap:10px}.gh-recip-item{min-height:96px;font-size:13px}
.gh-ways{grid-template-columns:repeat(2,minmax(0,1fr))}.gh-dir{grid-template-columns:repeat(3,minmax(0,1fr))}
.gh-about-grid{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:32px}}
@media (max-width:1023px){.gh-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}.gh-bs-track{grid-auto-columns:calc((100% - 2 * 16px) / 3.15)}.gh-recip{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* mobile */
@media (max-width:767px){.gh-wrap{--gh-section:32px;--gh-gap:12px}
.gh-hero{grid-template-columns:1fr;padding:18px 18px 16px;gap:0}.gh-hero h1{font-size:28px;line-height:34px}.gh-hero-text p{font-size:14px;line-height:22px;margin-top:6px}.gh-hero-vis,.gh-hero-ic{display:none}
.gh-facts{margin-top:10px;font-size:12px}.gh-jump,.gh-sm-hide{display:none!important}.gh-jump+.gh-sec.is-first,.gh-sec.is-first{margin-top:24px}
.gh-head h2,.gh-about h2{font-size:20px;line-height:26px}.gh-head{margin-bottom:12px;align-items:center}.gh-more{font-size:13px;min-height:40px}.gh-sub{font-size:13px}
.gh-tiles{gap:14px 10px}.gh-tile{gap:6px;font-size:13px;line-height:18px}.gh-tile-name{min-height:36px}.gh-tile-img{border-radius:10px}.gh-tile-img.is-icon svg{width:34px;height:34px}
.gh-occ{display:block;margin-top:22px;padding:12px 0}.gh-occ h2{font-size:15px;margin-bottom:8px}
.gh-rail-wrap{margin:0 -16px}.gh-rail{gap:8px;padding:3px 16px;scroll-padding:0 16px;-webkit-mask-image:linear-gradient(90deg,black calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 28px),transparent)}
.gh-chip{min-height:40px;font-size:13px}.gh-rail-btn{display:none}
.gh-bs .explore-best-seller-list{margin:0 -16px;border-radius:0;padding:12px 16px}.gh-bs-track{grid-auto-columns:44%;gap:12px;scroll-padding:0 16px}.gh-bs-nav{display:none}
.gh-recip{gap:8px}.gh-recip-item{min-height:86px;padding:10px 4px;gap:8px;font-size:12.5px;line-height:16px}.gh-icon{width:38px;height:38px}.gh-icon svg{width:22px;height:22px}
.gh-ways{gap:10px}.gh-way{padding:14px}.gh-way-ic{width:40px;height:40px;margin-bottom:10px}.gh-way-ic svg{width:24px;height:24px}.gh-way h3{font-size:14px;line-height:19px}.gh-way-d{font-size:13px;line-height:18px}.gh-way-cta{display:none}
.gh-dir{grid-template-columns:1fr;gap:0;border-top:1px solid var(--gh-line-2)}
.gh-dir-card{border:0;border-bottom:1px solid var(--gh-line-2);border-radius:0;padding:0}
.gh-dir-head{min-height:60px;margin:0;padding-right:48px}
.gh-dir-acc{display:grid;place-items:center;position:absolute;right:-4px;top:8px;width:44px;height:44px;border:0;background:transparent;color:var(--gh-muted);cursor:pointer}
.gh-dir-acc svg{width:20px;height:20px;transition:transform .2s}.gh-dir-acc[aria-expanded=true] svg{transform:rotate(180deg)}
.gh-dir-card:not(.has-link) .gh-dir-acc::before{content:"";position:absolute;top:-8px;bottom:-8px;right:0;width:100vw}
.js .gh-dir-card:not(.is-open) .gh-dir-body{display:none}
.gh-dir-body{padding:0 0 12px 46px}.gh-dir-list a{min-height:44px}
.gh-about-grid{grid-template-columns:1fr;gap:20px}.gh-about-lead{font-size:16px;line-height:26px}.gh-about-text p{font-size:14.5px;line-height:24px}.gh-about-aside{padding:18px}
.gh-groups{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px;gap:8px}.gh-groups li{flex:none}}
@media (hover:none){.gh-bs-nav{display:none}}
@media (prefers-reduced-motion:reduce){.gh-wrap *{transition:none!important;scroll-behavior:auto!important}.gh-tile:hover img{transform:none}}