/* iConnect redesign — homepage-specific styles */

/* ---------- HERO ---------- */
.ic-hero{padding:18px 0 6px;}
.ic-hero-track{position:relative;width:100%;margin:0 auto;border-radius:20px;overflow:hidden;}
.ic-hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;pointer-events:none;}
.ic-hero-slide:first-child{position:relative;}
.ic-hero-slide.is-active{opacity:1;pointer-events:auto;z-index:2;}

/* Whole-banner link, ported from the old shop's hero. It sits under the CTA button, which
   keeps its own z-index, so the button still wins the click where there is one and the rest
   of the banner is clickable where there is not. The radius matches the media so the hit
   area does not square off the corners. */
.ic-hero-link{position:absolute;inset:0;z-index:2;display:block;border-radius:15px;overflow:hidden;text-indent:-9999px;}
.ic-hero-cta{z-index:3;}

.ic-hero-media{display:block;width:100%;height:auto;border-radius:var(--ic-r-xl);}
.ic-hero-video-desktop{display:block;}
.ic-hero-video-mobile{display:none;}
.ic-hero-cta{
  position:absolute;left:36px;bottom:96px;z-index:4;
  display:inline-flex;flex-direction:row;align-items:center;gap:8px;
  font-family:var(--ic-head);font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:12px 26px;border-radius:var(--ic-pill);color:#fff;font-size:16px;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
}
.ic-hero-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(170,7,107,.45);
  filter:brightness(1.08);
  border-color:rgba(255,255,255,.6);
}
.ic-cta-pokemon{background:linear-gradient(90deg,#ea0327,#a30015);border:3px solid #32599e;}
.ic-cta-iconnect{background:var(--ic-magenta);}
.ic-cta-dark{background:#000;} .ic-cta-light{background:#fff;color:#111;}

.ic-hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(3px);
  display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:14px;
}
.ic-hero-arrow:hover{background:rgba(255,255,255,.6);color:#111;}
.ic-hero-arrow--prev{left:14px;} .ic-hero-arrow--next{right:14px;}

.ic-hero-chips{
  position:absolute;right:24px;bottom:20px;z-index:4;
  display:flex;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;
}
/* hero trust chips: ONE continuous frosted pill, airy, no dividers (bible crop) */
.ic-hero-chips{
  background:rgba(20,18,24,.35);backdrop-filter:blur(6px);border-radius:var(--ic-pill);
  border:1px solid rgba(255,255,255,.14);
  padding:10px 28px;gap:34px;
}
.ic-hero-chip{
  display:inline-flex;flex-direction:row;align-items:center;gap:9px;
  background:transparent;color:#fff;padding:0;
  font-family:var(--ic-body);font-weight:500;font-size:13px;
}
.ic-hero-chip i{color:#fff;font-size:13px;}
/* Tablet (768 to 1023px): the four chips wrapped 3 + 1 with a 34px row gap. Two by two instead,
   rows close together, each chip centred in its column. */
@media (min-width:768px) and (max-width:1023px){
  .ic-hero-chips{display:grid;grid-template-columns:auto auto;column-gap:30px;row-gap:6px;
    justify-content:center;justify-items:center;border-radius:18px;padding:10px 24px;}
}
/* dots live INSIDE the banner near its bottom edge (bible) */
/* dots: 28px tap targets (PageSpeed needs 24px), the visible dot is the 14px ::before */
.ic-hero-dots{position:absolute;left:0;right:0;bottom:7px;z-index:6;display:flex;flex-direction:row;justify-content:center;gap:2px;}
.ic-hero-dot{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:flex;flex-direction:row;align-items:center;justify-content:center;}
.ic-hero-dot::before{content:"";width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.12);}
.ic-hero-dot.active::before,.ic-hero-dot:hover::before{background:#fff;}

/* ---------- PROMO TILE GRID (bible: feature left; PSA over JBL mid; VEGER over JBL right) ---------- */
.ic-promos{
  display:grid;gap:16px;
  grid-template-columns:1.55fr 1fr 1fr;
  grid-template-areas:
    "feature psa veger"
    "feature jbl jbl2";
}
.ic-promo{border-radius:var(--ic-r-lg);position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:120px;color:#fff;}
.ic-promo--feature{grid-area:feature;background:var(--ic-grad);justify-content:flex-start;padding:22px;}
/* image tiles: artwork extracted from the bible */
.ic-promo--psa{grid-area:psa;}
.ic-promo--veger{grid-area:veger;}
.ic-promo--jbl{grid-area:jbl;}
.ic-promo--jbl2{grid-area:jbl2;}
.ic-promo--psa img,.ic-promo--veger img,.ic-promo--jbl img,.ic-promo--jbl2 img{
  width:100%;height:100%;object-fit:cover;display:block;
}

.ic-promo__eyebrow{font-family:var(--ic-body);font-weight:700;font-size:11px;letter-spacing:2px;opacity:.9;margin-bottom:8px;}
.ic-promo--feature h2{font-family:var(--ic-head);font-weight:800;font-size:34px;line-height:1;color:#fff;margin:0 0 14px;}
.ic-promo--feature h2 span{font-weight:400;color:#141317;}
.ic-promo--feature p{font-size:12.5px;line-height:1.55;opacity:.95;margin:0 0 16px;max-width:88%;}
.ic-promo__label{font-family:var(--ic-body);font-weight:700;font-size:12px;letter-spacing:1.5px;margin-bottom:10px;text-align:center;}
.ic-promo__btns{display:flex;flex-direction:row;gap:12px;flex-wrap:wrap;}
.ic-promo__btns .ic-btn{flex:1 1 0;justify-content:center;gap:10px;padding:13px 18px;min-width:150px;letter-spacing:1px;}
.ic-promo__btns .btn-arrow{width:26px;height:26px;}

/* ---------- TRUST STRIP (real skroutz/Google badges extracted from the bible) ---------- */
.ic-trust{padding:8px 0 20px;}
.ic-trust__inner{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:44px;}
.ic-trust__badge{display:flex;flex-direction:row;align-items:center;gap:12px;}
.ic-trust__logo{height:30px;width:auto;display:block;}
.ic-trust__logo--google{height:26px;}
.ic-trust__meta{display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
.ic-trust__stars{color:#ffb400;font-size:14px;letter-spacing:2px;line-height:1;}
.ic-trust__meta small{font-size:11px;color:var(--ic-muted);font-weight:600;}

/* ---------- BRANDS (bible: logos directly on the page background, no card chrome) ---------- */
.ic-brands{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;
  background:transparent;padding:6px 0;flex-wrap:wrap;}
.ic-brands__logos .ic-brand img{mix-blend-mode:multiply;}
.ic-brands__logos{display:flex;flex-direction:row;align-items:center;justify-content:space-around;gap:0;flex:1 1 auto;flex-wrap:wrap;}
.ic-brands__logos .ic-brand{
  padding:14px 30px;border-left:2px solid #b9b3cc;line-height:1;align-self:stretch;
  display:inline-flex;flex-direction:row;align-items:center;
}
.ic-brands__logos .ic-brand:first-child{border-left:0;}
.ic-brands__logos .ic-brand img{height:44px;width:auto;display:block;}

/* Trend Products feature tile — full artwork extracted from the bible */
.ic-trend-tile{
  position:relative;border-radius:var(--ic-r-lg);overflow:hidden;
  display:flex;min-height:100%;min-width:216px;
  /* The tile's shape is cut here, not painted into the image: rounded top left and bottom right,
     chamfered top right and bottom left, so the artwork can be swapped without any frame colour. */
  clip-path:polygon(0 0,calc(100% - 48px) 0,100% 48px,100% 100%,56px 100%,0 calc(100% - 56px));
}
.ic-trend-tile img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- CAROUSEL SECTIONS ----------
   Bible wraps EVERY product carousel (incl. ΘΗΚΕΣ) in a rounded plum-gradient
   panel with white heading and white See-All circle arrow. */
.ic-carousel-sec{padding-block:18px;}
.ic-carousel-sec > .ic-container{
  background:var(--ic-grad-section);
  border-radius:var(--ic-r-lg);
  padding:22px 24px 26px;
}
.ic-carousel-sec .ic-sec-title,.ic-carousel-sec .ic-seeall{color:#fff;}
.ic-carousel-sec .ic-seeall .arrow{background:#fff;color:var(--ic-magenta-dark);}

/* ---------- PROMO BANNERS (real baked-in designs from live) ---------- */
.ic-banners{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.ic-banner{border-radius:var(--ic-r-lg);overflow:hidden;display:block;box-shadow:var(--ic-shadow-card);line-height:0;}
.ic-banner img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.ic-banner:hover img{transform:scale(1.02);}

/* ---------- TAGLINE ---------- */
.ic-tagline{padding:56px 0;text-align:center;position:relative;overflow:hidden;}
.ic-tagline::before,.ic-tagline::after{
  content:"";position:absolute;width:110px;height:72px;
  background-image:radial-gradient(var(--ic-magenta) 2.5px,transparent 2.5px);background-size:14px 14px;opacity:.75;
}
.ic-tagline::before{top:14px;left:6%;}
.ic-tagline::after{bottom:14px;right:6%;}
.ic-tagline p{font-family:var(--ic-head);font-weight:700;font-size:34px;line-height:1.15;color:var(--ic-text);margin:0;}
.ic-tagline span{color:#E0007F;}

/* ---------- ABOUT (bible: real store photo left, chamfered; plum panel right, chamfered) ---------- */
.ic-about{display:grid;grid-template-columns:1.35fr 1fr;gap:0;align-items:stretch;position:relative;}
.ic-about > .ic-about__panel{margin-left:-40px;}
.ic-about__photo{
  width:100%;height:100%;min-height:320px;object-fit:cover;display:block;
  border-radius:var(--ic-r-lg);
  clip-path:polygon(56px 0,100% 0,100% calc(100% - 56px),calc(100% - 56px) 100%,0 100%,0 56px);
}
.ic-about__panel{
  background:var(--ic-grad-section);color:#fff;padding:40px;display:flex;flex-direction:column;justify-content:center;
  border-radius:var(--ic-r-lg);
  clip-path:polygon(48px 0,100% 0,100% calc(100% - 48px),calc(100% - 48px) 100%,0 100%,0 48px);
}
.ic-about__panel h2{color:#fff;font-weight:800;font-size:30px;letter-spacing:.5px;}
.ic-about__panel p{font-size:13.5px;line-height:1.7;opacity:.95;margin:0 0 12px;}
.ic-about__panel p:last-child{margin-bottom:0;}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .ic-promos{grid-template-columns:1fr 1fr;grid-template-areas:"feature feature" "psa veger" "jbl jbl2";}
  .ic-carousel-sec > .ic-container{padding:18px 16px 20px;}
  .ic-tagline p{font-size:26px;}
}
@media (max-width:767px){
  /* bible mobile hero is a LANDSCAPE banner — clean artwork, no CTA/arrow/dot chrome */
  .ic-hero-video-desktop{display:block;} .ic-hero-video-mobile{display:none;}
  .ic-hero-arrow{display:none;}
  .ic-hero-dots{display:none;}
  .ic-hero-cta{display:none;}
  .ic-promo__btns .btn-arrow{flex:0 0 auto;}
  /* dark translucent inset pill floating over the hero bottom (bible mobile) */
  .ic-hero-chips{
    /* the desktop rule pins this with right:24px/bottom:20px; left as-is on a relative
       box that offsets the pill 24px to the left of the centre the auto margins give it */
    position:relative;right:auto;bottom:auto;
    margin:-20px auto 0;width:calc(100% - 56px);z-index:5;
    display:grid;grid-template-columns:1fr;gap:0;justify-items:center;
    background:rgba(24,22,28,.62);backdrop-filter:blur(6px);border-radius:18px;padding:10px 14px;
  }
  .ic-hero-chip{font-size:11px;white-space:normal;line-height:1.25;}
  /* one chip per row, centred, with no gap between them: the pickup line names two
     stores and never fitted half a phone row anyway */
  .ic-hero-chip{border-left:0;padding:3px 6px;justify-content:center;text-align:center;}
  /* The fourth tile used to be a second copy of the JBL banner, so the bible hid it on
     phones rather than show the same artwork twice. It now carries the CGC dealer banner,
     which is its own content, so hiding it would simply lose a banner on mobile. */
  .ic-promos{grid-template-columns:1fr;grid-template-areas:"feature" "psa" "veger" "jbl" "jbl2";}
  .ic-banners{grid-template-columns:1fr;}
  /* ΓΙΑ ΕΜΑΣ (bible mobile): ONE gradient card — heading + text, then the photo inside it */
  .ic-about{
    grid-template-columns:1fr;gap:0;position:relative;margin-inline:4px;
    background:var(--ic-grad-section);border-radius:22px;overflow:visible;
    clip-path:none;
  }
  /* dot-grid ornaments framing the card (bible) */
  .ic-about::before,.ic-about::after{
    content:"";position:absolute;width:64px;height:64px;z-index:1;
    background-image:radial-gradient(var(--ic-magenta) 2px,transparent 2px);background-size:12px 12px;
  }
  .ic-about::before{top:-18px;right:8px;}
  .ic-about::after{bottom:24px;left:-14px;}
  .ic-about__panel,.ic-about__photo{position:relative;z-index:2;}
  .ic-about__panel{order:1;background:transparent;clip-path:none;padding:30px 28px 8px;}
  .ic-about__photo{
    order:2;min-height:220px;height:auto;margin:14px 16px 18px;width:auto;
    border-radius:16px;
    clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px);
  }
  /* brands (bible mobile): one row of 3 LARGE logos w/ tall dividers + white pill below */
  .ic-brands__logos .ic-brand--veger,.ic-brands__logos .ic-brand--jbl{display:none;}
  .ic-brands{flex-direction:column;align-items:center;gap:16px;}
  .ic-brands__logos{flex:0 1 auto;flex-wrap:nowrap;justify-content:center;width:100%;}
  .ic-brands__logos .ic-brand{padding:0 18px;align-self:stretch;align-items:center;}
  .ic-brands__logos .ic-brand img{height:52px;}
  /* hero proportions: bible mobile banner is taller (~1.59:1) */
  .ic-hero-video-desktop{aspect-ratio:1.59;object-fit:cover;width:100%;height:auto;}
  /* ΔΙΑΛΕΞΕ pills: large capsules with visible arrow circle */
  .ic-promo__btns .ic-btn{padding:15px 16px;font-size:14px;}
  /* ΔΙΑΛΕΞΕ ΚΑΤΗΓΟΡΙΑ on a phone: one pill per row (31/10/2026). Side by side they did not
     fit, and "TRADING CARD GAMES" broke over two lines inside half a screen. */
  .ic-promo__btns{flex-direction:column;flex-wrap:nowrap;align-items:stretch;}
  .ic-promo__btns .ic-btn{min-width:0;width:100%;flex:0 0 auto;padding:13px 16px;font-size:14px;}
  .ic-promo__btns .ic-btn{white-space:nowrap;text-align:center;line-height:1.15;letter-spacing:.4px;}
  .ic-tagline{padding:64px 0;}
  .ic-tagline p{font-size:20px;padding:0 30px;}
  .ic-tagline::before{top:6px;left:10px;width:76px;height:44px;}
  .ic-tagline::after{bottom:6px;right:10px;width:76px;height:44px;}
  .ic-brands{border-radius:var(--ic-r-lg);}
}

/* the closing line of ΓΙΑ ΕΜΑΣ carries the point of the whole section */
.ic-about__panel .ic-about__close{font-weight:700;}

@media (max-width:767px){
  /* The single row crushed both badges: the stars wrapped in beside the logo, "5/5 Stars"
     broke over two lines and the Google set ran off the right edge. One badge per half,
     stacked logo / stars / label, with the logos left at their own aspect ratio. */
  .ic-trust__inner{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;}
  .ic-trust__badge{flex-direction:column;align-items:center;gap:7px;min-width:0;text-align:center;}
  .ic-trust__logo{height:26px;width:auto;max-width:100%;object-fit:contain;}
  .ic-trust__logo--google{height:23px;}
  .ic-trust__meta{align-items:center;gap:3px;}
  /* both stay on their own single line, which is the whole point of stacking them */
  .ic-trust__stars,.ic-trust__meta small{white-space:nowrap;}
}