/* ==========================================================================
   DigiStore Homepage — plugin stylesheet
   Everything is scoped under .digihp (the plugin's wrapper class) so it
   never leaks into Astra's own header/footer/other-page styles.
   ========================================================================== */
.digihp{
  --dh-background: 240 30% 8%;
  --dh-foreground: 0 0% 98%;
  --dh-primary: 262 83% 58%;
  --dh-primary-glow: 280 90% 65%;
  --dh-primary-foreground: 0 0% 100%;
  --dh-secondary: 240 20% 15%;
  --dh-muted: 240 15% 25%;
  --dh-muted-foreground: 240 10% 65%;
  --dh-accent: 45 100% 60%;
  --dh-destructive: 0 84% 60%;
  --dh-border: 240 20% 20%;

  /* Border drawn around the sub-category products popup. Swap this one value
     to restyle it, e.g. red: 0 84% 60%  |  white: 0 0% 100% */
  --dh-popup-border: 0 0% 100%;
  --dh-popup-border-alpha: .8;

  --dh-card-bg: 240 25% 12%;
  --dh-card-border: 240 20% 20%;
  --dh-card-hover-border: 262 83% 58%;
  --dh-card-title: 0 0% 95%;

  --dh-gradient-primary: linear-gradient(135deg, hsl(var(--dh-primary)), hsl(var(--dh-primary-glow)));
  --dh-radius: 0.75rem;

  color: hsl(var(--dh-foreground));
}
.digihp *{ box-sizing:border-box; }
.digihp img{ max-width:100%; display:block; }
.digihp a{ text-decoration:none; color:inherit; }
.digihp .container{ max-width:1280px; margin:0 auto; padding:0 16px; }
.digihp [x-cloak]{ display:none !important; }

/* Light-mode variant: add class "digihp--light" to the widget/shortcode wrapper */
.digihp.digihp--light{
  --dh-background: 0 0% 100%;
  --dh-foreground: 240 15% 12%;
  --dh-secondary: 240 10% 96%;
  --dh-muted: 240 10% 90%;
  --dh-muted-foreground: 240 8% 40%;
  --dh-border: 240 15% 88%;
  --dh-card-bg: 0 0% 100%;
  --dh-card-border: 240 15% 88%;
}

/* ---------- Banner slider ----------
   A centred slide with its neighbours peeking in from both edges, rather than
   one full-width image at a time: the peek is what tells you the thing slides
   at all, without needing arrows.

   Swiper sizes the slides (see digihpInitSwipers in main.js); everything here
   is the look.

   Every slide is cropped to one shape — it has to be, or the slider would jump
   height as it moves. That shape is read off the first slide's own image and
   printed inline by digihp_render_banner_slider(), so artwork fits as drawn.
   The 16/9 below is only the fallback for when no image size is readable; set
   --dh-banner-ratio yourself to force a shape (e.g. 21/9 for a shallow strip). */
.digihp{ --dh-banner-ratio: 16/9; }
.digihp .banner-slider{ margin:16px 0; }
.digihp .digihp-banner-swiper{ overflow:hidden; padding-bottom:2px; }

.digihp .banner-slide{
  position:relative; aspect-ratio:var(--dh-banner-ratio); height:auto;
  border-radius:16px; overflow:hidden;
}
/* The peek/fade only applies once Swiper has actually started (main.js adds
   .digihp-swiper-ready). This is not cosmetic bookkeeping: .swiper-slide-active
   is a class *Swiper* adds, so if its script hasn't run — blocked CDN, a
   combine/defer plugin reordering things, a JS error further up the page — then
   no slide is ever the active one and every slide sits at opacity .55 forever.
   That reads as a washed-out, half-broken banner. Scoped this way, a slider that
   fails to start is just a plain, sharp, full-width first banner. */
.digihp .digihp-swiper-ready .banner-slide{
  transform:scale(.94); opacity:.55;
  transition:transform .45s ease, opacity .45s ease;
}
.digihp .digihp-swiper-ready .banner-slide.swiper-slide-active{ transform:scale(1); opacity:1; }
.digihp .digihp-banner-swiper--solo .banner-slide{ transform:none; opacity:1; }

.digihp .banner-slide__link{ display:block; width:100%; height:100%; }
.digihp .banner-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Dots sit inside the active slide, on a pill so they stay readable over both
   a bright and a dark banner.
   :empty is doing real work here. Swiper fills this div with bullets; until
   then — a single slide, where there's nothing to page through, or a slider
   that never started — it's an empty div, and padding + background alone still
   paint a ~16px dark blob onto the banner. An empty container should draw
   nothing. */
.digihp .digihp-banner-swiper .swiper-pagination:empty{ display:none; }
/*
 * width/gap here used to come from `display:flex` on this element, but
 * dynamicBullets (main.js) positions each bullet itself via inline transforms
 * assuming normal inline-block flow — flex would reflow them and break the
 * sliding-window animation. Spacing now comes from the bullets' own margin
 * (below) via Swiper's --swiper-pagination-bullet-horizontal-gap var instead.
 */
.digihp .digihp-banner-swiper .swiper-pagination{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  width:auto; --swiper-pagination-bullet-horizontal-gap:5px;
  padding:5px 8px; border-radius:999px; background:rgba(0,0,0,.4);
  backdrop-filter:blur(4px); line-height:0;
}
.digihp .digihp-banner-swiper .swiper-pagination-bullet{
  width:6px; height:6px; background:#fff; opacity:.45;
  transition:width .3s ease, opacity .3s ease, transform .2s ease, left .2s ease;
}
.digihp .digihp-banner-swiper .swiper-pagination-bullet-active{ width:18px; border-radius:999px; opacity:1; }

@media (prefers-reduced-motion:reduce){
  .digihp .digihp-swiper-ready .banner-slide{ transition:none; }
}

/* ---------- Category sections (stacked, all rendered up front) ---------- */
.digihp .digihp-sections-stack{ display:flex; flex-direction:column; }
/* Icon sits after the title now, so the gap goes on its left. The h2 is a flex
   row with its own gap, but margin-left is kept for the Elementor/Astra cases
   where a theme rule flattens the h2 back to inline. */
.digihp .cat-icon{ margin-left:4px; margin-right:0; }
.digihp .category-section{ padding:24px 0; }
.digihp .category-section__header h2{ font-size:18px; display:flex; align-items:center; gap:6px; margin:0; font-weight:700; }
.digihp .category-section__subtitle{ color:hsl(var(--dh-muted-foreground)); font-size:13px; margin:2px 0 0; }
.digihp .category-section__more{ text-align:center; margin-top:14px; }
.digihp .btn-view-more{ color:hsl(var(--dh-primary)); font-weight:600; }

/* "Load More" is the in-place pager (main.js: digihpLoadMore) — a pill button
   rather than the plain text link View More used to be, so it reads as a tap
   target that reveals more here instead of a link off to another page.
   --dh-loadmore is the accent (yellow/gold): override it once to re-theme the
   button without touching the rules below. */
.digihp .btn-load-more{
	--dh-loadmore:#FFC107;
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	padding:9px 26px; border:2px solid var(--dh-loadmore); border-radius:999px;
	background:transparent; color:var(--dh-loadmore); font-weight:700;
	text-decoration:none; line-height:1.2; cursor:pointer;
	transition:background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
/* Force the yellow over the theme link colour Astra sets on `.digihp a`. */
.digihp a.btn-load-more{ color:var(--dh-loadmore); }
.digihp .btn-load-more:hover,
.digihp .btn-load-more:focus-visible{
	background:var(--dh-loadmore); color:#1a1a1a;
	box-shadow:0 4px 14px rgba(255,193,7,.35); transform:translateY(-1px);
}
.digihp a.btn-load-more:hover,
.digihp a.btn-load-more:focus-visible{ color:#1a1a1a; }
/* No underline in any state (Astra adds one to in-content links). */
.digihp .btn-load-more,
.digihp .btn-load-more:hover,
.digihp .btn-load-more:focus,
.digihp .btn-load-more:focus-visible,
.digihp .btn-load-more:active{ text-decoration:none !important; }
/* "Live" effect: the ↓ bobs down and back, a soft continuous "there's more
   below" cue next to the label. */
.digihp .btn-load-more__arrow{
	display:inline-block; margin-left:2px;
	animation:digihp-loadmore-bob 1.2s ease-in-out infinite;
}
@keyframes digihp-loadmore-bob{
	0%,100%{ transform:translateY(0); }
	50%{ transform:translateY(4px); }
}
.digihp .btn-load-more:hover .btn-load-more__arrow{ animation-duration:.7s; }
@media (prefers-reduced-motion:reduce){
	.digihp .btn-load-more__arrow{ animation:none; }
}
/* While a fetch is in flight: dim it and swallow further taps (JS also guards
   with a busy flag, so this is purely the visual half). */
.digihp .btn-load-more--loading{ opacity:.65; pointer-events:none; }
.digihp .btn-load-more--loading .btn-load-more__arrow{ animation:none; }

/*
 * "View More" is only printed by PHP once a section has more products than
 * *some* breakpoint's 2-full-rows count (class-render.php: 6 / 10 / 12 for
 * mobile / tablet / desktop — matching the 3/5/6-column .product-grid below).
 * But which of those thresholds actually applies depends on how wide the
 * screen is right now, and that's a runtime fact CSS knows and PHP doesn't.
 * So the button carries a has-more--mobile/tablet/desktop class per
 * threshold it clears, and is hidden by default.
 *
 * Each "show" rule below is scoped to an exclusive width *range*
 * (max-width as well as min-width), not just a min-width floor. An earlier
 * version used open-ended min-width rules for this, which meant e.g.
 * `.has-more--mobile{ display:block }` — matching once total > 6 — carried
 * *three* class names (.digihp.category-section__more.has-more--mobile) and
 * so out-specificity'd the two-class `.category-section__more{ display:none }`
 * reset meant to hide it again at 1024px+. That let a section with, say, 9
 * items (only the mobile threshold cleared) show the button on desktop too
 * — exactly the "2nd row still has room but the button appeared anyway" bug.
 * Ranges below can't overlap, so at any given width exactly one show-rule
 * can possibly match, and specificity never has to referee two of them.
 */
.digihp .category-section__more{ display:none; }
@media (max-width:639px){
	.digihp .category-section__more.has-more--mobile{ display:block; }
}
@media (min-width:640px) and (max-width:1023px){
	.digihp .category-section__more.has-more--tablet{ display:block; }
}
@media (min-width:1024px){
	.digihp .category-section__more.has-more--desktop{ display:block; }
}

/* ---------- Product grid (vertical/grid cards) ---------- */
/* Columns read from per-section CSS vars so a custom category can set its own
   per-breakpoint count (digihp_render_section_cap_style); the fallbacks are the
   original 3 / 5 / 6, so any section that doesn't set them looks exactly as before. */
.digihp .product-grid{ display:grid; grid-template-columns:repeat(var(--dh-cm,3),1fr); gap:10px; margin:16px 0 0; }
/* Archive pages only (shop / product-category / product-tag). The homepage keeps
   the 16px top margin above — it needs the breathing room under its section
   heading, while the archive's own template already spaces the grid and then
   some. `.digihp-archive` is printed only by class-archive.php's loop_start, so
   the shortcodes/widgets are untouched; the doubled `.digihp` keeps this rule
   ahead of the base one on specificity without !important. */
.digihp.digihp-archive .product-grid{ margin:-10px; }
@media (min-width:640px){ .digihp .product-grid{ grid-template-columns:repeat(var(--dh-ct,5),1fr); } }
@media (min-width:1024px){ .digihp .product-grid{ grid-template-columns:repeat(var(--dh-cd,6),1fr); } }

/* The grids are real <ul>s now (the list item role belongs on an <li>, not on
   the <a> — see class-render.php), so the browser's own list styling is reset
   away and each <li> is made a see-through box the card fills completely.
   Visually identical to when the card itself was the grid item. */
.digihp .product-grid,
.digihp .child-popup__grid{ list-style:none; padding:0; }
.digihp .product-grid__item{ display:flex; min-width:0; margin:0; padding:0; }
.digihp .product-grid__item::marker{ content:none; }
.digihp .product-grid__item > *{ width:100%; }

.digihp .product-grid--compact > *:nth-child(n+7){ display:none; }
@media (min-width:640px){ .digihp .product-grid--compact > *:nth-child(n+11){ display:inline-flex !important; } .digihp .product-grid--compact > *:nth-child(n+11){ display:none; } }
@media (min-width:1024px){ .digihp .product-grid--compact > *{ display:flex !important; } }

.digihp .product-grid, .digihp .child-popup__grid{ align-items:stretch; }
.digihp .product-card--grid{
  display:flex; flex-direction:column; gap:6px; height:100%; background:hsl(var(--dh-card-bg)); border:1px solid hsl(var(--dh-card-border));
  border-radius:var(--dh-radius); padding:8px; transition:border-color .15s ease, transform .15s ease;
}
.digihp .product-card--grid:hover{ border-color:hsl(var(--dh-card-hover-border)); transform:translateY(-2px); }
/* On tap, browsers paint a default highlight that ignores border-radius — a
   square patch poking past the card's rounded corners. Kill it and give a clean,
   rounded focus ring instead (both card types). */
.digihp .product-card--grid,
.digihp .product-card--list{
  -webkit-tap-highlight-color:transparent;
  outline:none;
}
.digihp .product-card--grid:focus-visible,
.digihp .product-card--list:focus-visible{
  outline:2px solid hsl(var(--dh-primary)); outline-offset:2px;
}
.digihp .product-card--grid__image-wrap{ position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:hsl(var(--dh-muted) / .3); }
.digihp .product-card--grid__image-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .2s ease; }
.digihp .product-card--grid:hover .product-card--grid__image-wrap img{ transform:scale(1.05); }
.digihp .badge-layered{
  position:absolute; bottom:6px; right:6px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center;
}
.digihp .badge-flag{ position:absolute; top:6px; left:6px; font-size:16px; background:rgba(0,0,0,.4); border-radius:4px; padding:1px 4px; }
.digihp .badge-discount{ position:absolute; top:0; right:0; background:hsl(var(--dh-destructive)); color:#fff; font-size:9.5px; font-weight:700; line-height:1; padding:2px 6px; border-bottom-left-radius:9px; }
.digihp .badge-label{ position:absolute; top:0; right:0; background:hsl(var(--dh-secondary)); color:hsl(var(--dh-foreground)); font-size:9.5px; line-height:1; padding:2px 6px; border-bottom-left-radius:9px; }
@media (max-width:639px){
  .digihp .badge-discount,
  .digihp .badge-label{ font-size:9px; padding:2px 5px; }
}
/* ---------- Out of stock card ---------- */
/* Card becomes an inert <div> (see class-render.php) — no link, no click,
   no keyboard focus — and the whole tile is visually dimmed with a centered
   "Out of Stock" mark, matching the reference design. */
.digihp .product-card--grid--out-of-stock{ cursor:default; }
.digihp .product-card--grid--out-of-stock .product-card--grid__image-wrap img{
  filter:grayscale(.35) brightness(.55); transform:none !important;
}
.digihp .product-card--grid--out-of-stock:hover{ transform:none; border-color:hsl(var(--dh-card-border)); }
.digihp .product-card--grid--out-of-stock .product-card--grid__title,
.digihp .product-card--grid--out-of-stock .product-card--grid__rating{ opacity:.5; }
.digihp .out-of-stock-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; background:rgba(20,10,10,.45); text-align:center; padding:0 8px;
}
.digihp .out-of-stock-overlay__icon{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  background:rgba(220,38,38,.18); border:1px solid rgba(220,38,38,.55); color:#f87171;
  font-size:20px; line-height:1; font-weight:700;
}
.digihp .out-of-stock-overlay__label{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#f87171;
}
.digihp .product-card--grid__title{
  font-size:13px; font-weight:600; color:hsl(var(--dh-card-title));
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin:0; text-decoration:none !important;
  /* Always reserve two lines so a 1-line title and a 2-line title still put
     their rating row on the same baseline across the row. em-based, so it
     follows whatever font-size the Typography settings apply. */
  line-height:1.3; min-height:2.6em;
}
/* Rating row sits at the bottom of the card regardless of title height.
   gap is 2px, not 5px: the row is now one tight "4.9⭐(Reviews 999)" string
   (see digihp_render_rating_line), and it has to survive a 3-column phone
   layout without wrapping.

   flex-wrap:wrap is the safety valve for the narrowest cards. white-space:nowrap
   keeps each part unbreakable ("(Reviews 999)" never splits mid-string), and the
   flex line then breaks *between* parts instead of overflowing the card. Since
   "4.9" + the 1em star are only ~35px, they always fit line 1 together; the only
   item that can ever be pushed down is the count, giving:

       4.9⭐
       (Reviews 999)

   On a card wide enough for all three, nothing wraps and the row stays one line
   exactly as before — wrap only engages when it would otherwise overflow. */
.digihp .product-card--grid__rating{
  display:flex; align-items:center; flex-wrap:wrap; gap:2px; font-size:11px; line-height:1; white-space:nowrap;
  color:hsl(var(--dh-muted-foreground)); text-decoration:none !important; margin-top:auto;
}
/* The rating number reads as the card's own figure, so it takes the card's
   title colour and weight while the count beside it stays muted. */
.digihp .rating-value{ color:hsl(var(--dh-card-title)); font-weight:600; line-height:1; text-decoration:none !important; }
/* Stars are inline SVG (see digihp_render_rating_line): a 1em box, so the
   row is always one clean line with the count optically centred against it.
   No font fallback, no glyph-metric drift. */
.digihp .stars{ display:inline-flex; align-items:center; gap:1px; line-height:0; text-decoration:none !important; }
.digihp .stars .star{ width:1em; height:1em; display:block; flex:none; }
.digihp .stars .star--on{ fill:hsl(var(--dh-accent)); }
.digihp .stars .star--off{ fill:hsl(var(--dh-muted-foreground) / .4); }
.digihp .review-count{ text-decoration:none !important; line-height:1; margin-top:-1.5px; }
/* Belt-and-braces: some themes (e.g. Astra) add underline on hover/focus for
   any in-content link — kill it specifically for card title + review row. */
.digihp a.product-card--grid,
.digihp a.product-card--grid:hover,
.digihp a.product-card--grid:focus,
.digihp a.product-card--grid:active{ text-decoration:none !important; }

/* ---------- Featured "list" card (horizontal best-seller style) ---------- */
/* Used when a category's card style is set to "featured". Featured categories
   render as a manual left/right slider — the CSS scroll-snap grid below — with
   these same horizontal cards as the cells. */

/* The slider: a horizontal scroll container laid out as a CSS grid. Cards fill
   column-first (grid-auto-flow:column) down `--rows` rows, and each column is
   1/`--cols` of the viewport — so exactly `cols × rows` (= "Total shown") cards
   are in view and the rest scroll/snap in. cols/rows come from the section's
   per-breakpoint settings via the CSS variables set inline on .digihp-hslider. */
.digihp .digihp-hslider{ margin-top:16px; }
.digihp .digihp-hslider__track{
  --cols:var(--dh-cm,1); --rows:var(--dh-rm,3);
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(var(--rows), auto);
  grid-auto-columns:calc((100% - (var(--cols) - 1) * 10px) / var(--cols));
  gap:10px;
  /* Top/bottom padding: overflow-x:auto forces overflow-y to `auto` too, so
     without a little vertical room the top row (and a card's hover lift) gets
     clipped or triggers a stray vertical scrollbar. */
  padding:6px 1px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.digihp .digihp-hslider__track::-webkit-scrollbar{ display:none; }
@media (min-width:640px){
  .digihp .digihp-hslider__track{ --cols:var(--dh-ct,2); --rows:var(--dh-rt,3); }
}
@media (min-width:1024px){
  .digihp .digihp-hslider__track{ --cols:var(--dh-cd,3); --rows:var(--dh-rd,2); }
}
.digihp .digihp-hslider__cell{
  scroll-snap-align:start; min-width:0; display:flex; container-type:inline-size;
}
.digihp .digihp-hslider__cell > *{ width:100%; }
/* Keep each card inside its cell — no content spilling over neighbours/rows. */
.digihp .digihp-hslider .product-card--list{ overflow:hidden; }
/* Dots below, centred, active one stretches into the brand-coloured pill. */
.digihp .digihp-hslider__dots{
  display:flex; justify-content:center; align-items:center; gap:6px; margin-top:12px;
}
.digihp .digihp-hslider__dot{
  width:8px; height:8px; padding:0; border:0; cursor:pointer; border-radius:999px;
  background:hsl(var(--dh-muted-foreground)); opacity:.4;
  transition:width .3s ease, opacity .3s ease, background-color .3s ease;
}
.digihp .digihp-hslider__dot--active{ width:20px; background:hsl(var(--dh-primary)); opacity:1; }

/* The Load-More grid (no slider) keeps container-query scaling on its cells. */
.digihp .product-grid--featured .product-grid__item{ container-type:inline-size; }

.digihp .product-card--list{
  position:relative; display:flex; align-items:center; gap:14px; width:100%; height:100%;
  background:hsl(var(--dh-card-bg)); border:1px solid hsl(var(--dh-card-border));
  border-radius:var(--dh-radius); padding:12px 14px;
  text-decoration:none !important; transition:border-color .15s ease, transform .15s ease;
}
.digihp .product-card--list:hover{ border-color:hsl(var(--dh-card-hover-border)); transform:translateY(-2px); }
/* Thumbnail never shrinks below its set box; the body takes all the rest and is
   allowed to shrink (min-width:0) so text truncates instead of stretching the
   card — that keeps two neighbouring cards exactly equal width whether one has
   more text/badges than the other or not. */
.digihp .product-card--list__media{
  position:relative; flex:0 0 auto; width:64px; height:64px; border-radius:12px; overflow:hidden;
  background:hsl(var(--dh-muted) / .3);
}
.digihp .product-card--list__media img{ width:100%; height:100%; object-fit:cover; }
.digihp .product-card--list__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
/* Title: at most two lines, then an ellipsis. line-clamp gives the "…" in every
   modern browser; the max-height + overflow is the fallback for the rest. */
.digihp .product-card--list__title{
  font-size:15px; font-weight:600; color:hsl(var(--dh-card-title)); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; max-height:2.6em; word-break:break-word;
}
.digihp .product-card--list__badges{ display:flex; flex-wrap:wrap; gap:6px; }
.digihp .product-card--list__badge{
  font-size:10px; font-weight:700; line-height:1; padding:3px 8px; border-radius:6px;
  background:hsl(var(--dh-secondary)); color:hsl(var(--dh-foreground)); white-space:nowrap;
}
.digihp .product-card--list__badge--deal{
  background:rgba(234,179,8,.15); color:#eab308; border:1px solid rgba(234,179,8,.35);
}
.digihp .product-card--list__badge--off{ background:hsl(var(--dh-destructive)); color:#fff; }
.digihp .product-card--list__meta{
  font-size:12px; color:hsl(var(--dh-muted-foreground)); line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Rank pill (#1, #2 …), top-right — the brand colour, matching the reference. */
.digihp .product-card--list__rank{
  position:absolute; top:10px; right:10px; min-width:26px; height:22px; padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:hsl(var(--dh-primary)); color:#fff; font-size:11px; font-weight:700;
  border-radius:999px; line-height:1;
}
.digihp .product-card--list--out-of-stock{ cursor:default; }
.digihp .product-card--list--out-of-stock .product-card--list__media img{ filter:grayscale(.35) brightness(.55); }
.digihp .product-card--list--out-of-stock:hover{ transform:none; border-color:hsl(var(--dh-card-border)); }
.digihp .product-card--list--out-of-stock .product-card--list__media .out-of-stock-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(20,10,10,.45);
}
.digihp a.product-card--list,
.digihp a.product-card--list:hover,
.digihp a.product-card--list:focus,
.digihp a.product-card--list:active{ text-decoration:none !important; }

/* Narrow card (e.g. 2 per row on a phone): shrink everything down a notch so the
   horizontal layout still breathes. Keyed to the card's own width via @container,
   so it triggers exactly when the card is small, not merely when the screen is. */
@container (max-width:250px){
  .digihp .product-card--list{ gap:9px; padding:9px 10px; }
  .digihp .product-card--list__media{ width:46px; height:46px; border-radius:9px; }
  .digihp .product-card--list__title{ font-size:13px; }
  .digihp .product-card--list__badge{ font-size:10px; padding:3px 7px; }
  .digihp .product-card--list__meta{ font-size:11px; }
  .digihp .product-card--list__rank{ top:7px; right:7px; min-width:22px; height:19px; font-size:10px; }
}
/* Fallback for browsers without container queries: the same trim, keyed to the
   phone breakpoint. Harmless where container queries already handled it. */
@supports not (container-type:inline-size){
  @media (max-width:639px){
    .digihp .digihp-hslider .product-card--list{ gap:9px; padding:9px 10px; }
    .digihp .digihp-hslider .product-card--list__media{ width:46px; height:46px; border-radius:9px; }
    .digihp .digihp-hslider .product-card--list__title{ font-size:13px; }
  }
}

/* ---------- Child products popup ---------- */
/* Centered card on every device (mobile included) — the padding below is
   the deliberate blank margin so the popup never touches the screen edges,
   top/bottom/left/right, on any screen size. */
.digihp .modal-overlay{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px;
}
@media (min-width:768px){ .digihp .modal-overlay{ padding:40px 24px; } }
.digihp .modal-overlay__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.7); }
.digihp .modal-overlay__content{ position:relative; width:100%; max-width:768px; max-height:100%; }

.digihp .child-popup{
  display:flex; flex-direction:column;
  background:hsl(var(--dh-background)); border-radius:20px; padding:20px;
  /* The popup itself never scrolls or grows past its allotted space — only
     the product grid inside it scrolls (see .child-popup__grid--scroll). */
  max-height:100%; overflow:hidden;
  border:1px solid hsl(var(--dh-popup-border) / var(--dh-popup-border-alpha));
}
.digihp .child-popup__handle{ display:none; }
.digihp .child-popup__close{
  position:absolute; top:10px; right:10px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; line-height:1;
  background:hsl(var(--dh-muted) / .4); border-radius:50%;
  border:1.5px solid hsl(var(--dh-foreground) / .25);
  color:hsl(var(--dh-foreground)); font-size:18px; cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.digihp .child-popup__close:hover{ transform:rotate(90deg); border-color:hsl(var(--dh-foreground) / .5); background:hsl(var(--dh-muted) / .7); }
.digihp .child-popup__header{ display:flex; align-items:center; gap:12px; margin-bottom:28px; flex:none; }
.digihp .child-popup__thumb{ width:48px; height:48px; border-radius:10px; object-fit:cover; }
.digihp .child-popup__header h3{ margin:0; font-size:16px; }
.digihp .child-popup__header p{ color:hsl(var(--dh-muted-foreground)); font-size:13px; margin:2px 0 0; }
/* 2 per row on mobile, 3 on small tablets, 4 from larger tablets/desktop up.
   Only ~2 rows show at a time — JS caps the height right after render (see
   digihpSizeChildPopupGrid in main.js), and it re-measures on resize since
   the column count — and so the row height — changes per breakpoint. */
.digihp .child-popup__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0; }
@media (min-width:600px){ .digihp .child-popup__grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .digihp .child-popup__grid{ grid-template-columns:repeat(4,1fr); } }
.digihp .child-popup__grid--scroll{
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding-right:4px; margin-right:-4px;
  /* Cards lift with translateY(-2px) on hover; without this buffer the
     scroll container's own edge clips the top row's border/shadow on hover. */
  padding-top:6px; margin-top:-6px;
}

/* Footer logo: the_custom_logo() prints the full-size file, so cap it here or
   it renders at its natural width and dwarfs the popup. */
/* Separator so the store logo reads as a footer, not as another product. */
.digihp .child-popup__footer{
  text-align:center; margin-top:20px; padding-top:14px; opacity:1;
  border-top:1px solid hsl(var(--dh-border)); flex:none;
}
.digihp .child-popup__footer a,
.digihp .child-popup__footer .custom-logo-link{ display:inline-block; line-height:0; }
.digihp .child-popup__footer img{ max-height:28px; width:auto; max-width:160px; object-fit:contain; margin:0 auto; display:inline-block; }
.digihp .child-popup__empty{ text-align:center; color:hsl(var(--dh-muted-foreground)); padding:20px 0; }
.digihp .modal-loading, .digihp .modal-error{ text-align:center; padding:40px 20px; background:hsl(var(--dh-background)); border-radius:20px; }
body.digihp-modal-open{ overflow:hidden; }

/* Editor-only placeholder (Elementor preview when no data yet) */
.digihp-empty-notice{ padding:24px; text-align:center; border:1px dashed hsl(var(--dh-border)); border-radius:var(--dh-radius); color:hsl(var(--dh-muted-foreground)); }