/* GD Tools - Item Box (front). All colours and sizes come from inline --gdib-*
   vars set by the renderer. Inherits the theme font (Montserrat); sizes in px,
   line-heights unitless. Selectors are prefixed with .gdib to beat Flatsome's
   .dark / .col-inner heading, paragraph and list rules. */
.gdib{
  display:flex;flex-direction:column;width:100%;margin:0 0 20px;overflow:hidden;text-align:left;
  background:var(--gdib-bg);border:var(--gdib-bw) solid var(--gdib-bd);border-radius:var(--gdib-r);
  container-type:inline-size;transition:border-color .2s
}
.gdib:hover,.gdib:focus-within{border-color:var(--gdib-hbd)}
.gdib:last-child{margin-bottom:0}
.gdib *{box-sizing:border-box}

/* Header: image fills, text sits at the bottom and grows the header if it wraps */
.gdib-head{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:var(--gdib-h)}
.gdib-head::after{content:"";position:absolute;inset:0;background:var(--gdib-fade);pointer-events:none}
.gdib .gdib-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block;margin:0}
.gdib-head-txt{position:relative;z-index:1;padding:20px var(--gdib-pad) 18px}
.gdib-head--noimg{min-height:0}
.gdib-head--noimg::after{content:none}
.gdib-head--noimg .gdib-head-txt{padding-top:var(--gdib-pad);padding-bottom:4px}
.gdib .gdib-title{margin:0 0 4px;padding:0;width:auto;color:var(--gdib-tc);font-size:var(--gdib-ts);font-weight:800;line-height:1.2;text-transform:none;letter-spacing:0}
.gdib .gdib-sub{margin:0;color:var(--gdib-sc);font-size:var(--gdib-ss);font-weight:700;line-height:1.3}

/* Bullet list with coloured dots */
.gdib .gdib-list{list-style:none;margin:0;padding:24px var(--gdib-pad) 26px}
.gdib .gdib-list li{list-style:none;position:relative;margin:0 0 10px;padding:0 0 0 22px;color:var(--gdib-lc);font-size:var(--gdib-ls);line-height:1.4}
.gdib .gdib-list li:last-child{margin-bottom:0}
.gdib .gdib-list li::before{content:"";position:absolute;left:2px;top:calc(var(--gdib-ls) * .7 - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--gdib-dot)}

/* Footer: main text + helper on the left, button on the right */
.gdib-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;margin-top:auto;padding:20px var(--gdib-pad)}
.gdib-foot--line{border-top:1px solid var(--gdib-line)}
.gdib-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.gdib-price{color:var(--gdib-pc);font-size:var(--gdib-ps);font-weight:800;line-height:1.2}
.gdib-help{color:var(--gdib-hc);font-size:var(--gdib-hs);line-height:1.35}
.gdib .gdib-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:auto;padding:14px 24px;
  background:var(--gdib-bbg);color:var(--gdib-bc);border-radius:var(--gdib-br);
  font-size:var(--gdib-bs);font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.28);transition:filter .15s,transform .15s
}
.gdib .gdib-btn:hover,.gdib .gdib-btn:focus{color:var(--gdib-bc);filter:brightness(.92);text-decoration:none}
.gdib .gdib-btn:active{transform:translateY(1px)}
.gdib .gdib-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Narrow box: stack the footer, button full width */
@container (max-width:400px){
  .gdib-foot{flex-direction:column;align-items:stretch}
  .gdib .gdib-btn{margin-left:0;white-space:normal;text-align:center}
}

/* Slider: [gd_item_box id="a,b,c"]. --pv = boxes per view (1 / 2 / 3 by slider
   width, or the per_view attr on wide sliders); the next box peeks in by --peek.
   item-box.js adds .is-static when every box already fits (no peek, no arrows). */
.gdib-slider{position:relative;margin:0 0 20px;container-type:inline-size}
.gdib-slider:last-child{margin-bottom:0}
.gdib-track{
  --pv:1;--gap:20px;--peek:36px;
  display:flex;align-items:stretch;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;cursor:grab
}
.gdib-track::-webkit-scrollbar{display:none}
.gdib-track>.gdib{flex:0 0 calc((100% - (var(--pv) - 1) * var(--gap) - var(--peek)) / var(--pv));min-width:0;margin:0;scroll-snap-align:start}
@container (min-width:700px){.gdib-track{--pv:2}}
@container (min-width:1000px){.gdib-track{--pv:3}}
@container (min-width:700px){.gdib-slider--pv .gdib-track{--pv:var(--gdib-pv)}}
.gdib-slider.is-static .gdib-track{cursor:auto}
.gdib-slider.is-static .gdib-track>.gdib{flex:1 1 0}
.gdib-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.gdib-track:focus-visible{outline:2px solid #ff8600;outline-offset:4px}
.gdib-slider .gdib-arrow{
  position:absolute;top:var(--gdib-at,50%);z-index:2;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;min-width:0;min-height:0;
  margin:0;padding:0;border:0;border-radius:50%;background:#ff8600;color:#fff;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.35);cursor:pointer;transition:opacity .2s,background .2s
}
.gdib-slider .gdib-arrow[hidden]{display:none}
.gdib-slider .gdib-arrow svg{width:18px;height:18px;display:block}
.gdib-slider .gdib-arrow:hover{background:#e67800;color:#fff}
.gdib-slider .gdib-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gdib-slider .gdib-arrow.is-off{opacity:0;pointer-events:none}
.gdib-slider .gdib-prev{left:10px}
.gdib-slider .gdib-next{right:10px}

@media (prefers-reduced-motion:reduce){
  .gdib-track{scroll-behavior:auto}
  .gdib-slider .gdib-arrow{transition:none}
  .gdib,.gdib .gdib-btn{transition:none}
  .gdib .gdib-btn:active{transform:none}
}