/* iConnect redesign — product page (PDP) */
#product-info{max-width:var(--ic-container);margin-inline:auto;padding:20px;}

/* breadcrumb */
#product-info .breadcrumb{list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;padding:0;margin:6px 0 18px;font-size:12.5px;color:var(--ic-muted);}
#product-info .breadcrumb-item a{color:var(--ic-muted);}
#product-info .breadcrumb-item + .breadcrumb-item::before{content:"›";margin-right:6px;color:var(--ic-muted);}
#product-info .breadcrumb-item:first-child a{color:var(--ic-muted);}
#product-info .breadcrumb-item:last-child a{color:#8B24A0;font-weight:600;}

/* two-column layout */
.ic-pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;}

/* ---- gallery ---- */
/* drop-shadow on the wrapper follows the clipped chamfer (box-shadow would be clipped away) */
.ic-pdp__gallery{position:sticky;top:96px;filter:drop-shadow(0 10px 22px rgba(27,27,27,.10));}
.ic-pdp__main{
  position:relative;background:#fff;
  padding:34px;display:flex;flex-direction:row;align-items:center;justify-content:center;
  border-radius:24px;
  min-height:420px;
}
.ic-pdp__main img{max-width:100%;max-height:520px;width:auto;object-fit:contain;}
.ic-pdp__soldout{
  position:absolute;left:0;right:0;bottom:0;background:var(--ic-sold);color:#fff;
  font-family:var(--ic-head);font-weight:800;letter-spacing:2px;text-transform:uppercase;
  text-align:center;padding:14px;font-size:22px;
}
.ic-pdp__thumbs{display:flex;flex-direction:row;gap:12px;margin-top:16px;flex-wrap:wrap;}
.ic-pdp__thumbs a{
  width:78px;height:78px;border-radius:var(--ic-r);background:#fff;box-shadow:var(--ic-shadow-card);
  display:flex;flex-direction:row;align-items:center;justify-content:center;padding:8px;overflow:hidden;
}
.ic-pdp__thumbs img{max-width:100%;max-height:100%;object-fit:contain;}

/* mobile peeking-card swipe gallery (bible) */
.ic-pdp__swipe{display:none;}
@media (max-width:767px){
  .ic-pdp__price{text-align:center;}

  .ic-pdp__swipe{
    display:flex;position:relative;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;cursor:grab;
    scrollbar-width:none;-ms-overflow-style:none;padding:2px 0 8px;
  }
  .ic-pdp__swipe::-webkit-scrollbar{display:none;}
  .ic-pdp__swipe > a{
    flex:0 0 86%;scroll-snap-align:start;background:#fff;border-radius:20px;
    box-shadow:var(--ic-shadow-card);padding:20px;
    display:flex;align-items:center;justify-content:center;aspect-ratio:.96;
  }
  .ic-pdp__swipe img{max-width:100%;max-height:100%;object-fit:contain;}
  .ic-pdp__main,.ic-pdp__thumbs{display:none;}
}

/* ---- info column ---- */
.ic-pdp__viewers{display:flex;flex-direction:row;align-items:center;gap:8px;color:var(--ic-muted);font-size:13px;margin-bottom:10px;}
.ic-pdp__viewers i{color:var(--ic-muted);}
.ic-pdp__title{font-family:var(--ic-head);font-weight:600;font-size:34px;line-height:1.25;margin:0 0 18px;}

/* finance + best-price badge artwork (extracted from the bible) — one compact row */
.ic-pdp__badges{display:flex;flex-direction:row;gap:12px;flex-wrap:wrap;margin-bottom:20px;align-items:stretch;}
.ic-pdp__badge{display:flex;flex-direction:row;align-items:center;gap:9px;border:1px solid var(--ic-line);border-radius:var(--ic-r-sm);padding:9px 12px;background:#fff;}
.ic-pdp__badge-logo{height:24px;width:auto;flex:0 0 auto;display:block;}
.ic-pdp__inst{font-size:10px;line-height:1.2;font-weight:600;padding:5px 9px;border-radius:6px;color:#fff;text-align:center;white-space:nowrap;}
.ic-pdp__inst--orange{background:#f6841f;}
.ic-pdp__inst--dark{background:#2a2a33;}
.ic-pdp__inst b{font-weight:800;font-size:11px;}
.ic-pdp__bp-check{color:#2ea44f;font-size:22px;flex:0 0 auto;}
.ic-pdp__bp-txt{font-size:11.5px;line-height:1.25;color:var(--ic-text);}
.ic-pdp__bp-txt b{font-weight:700;}
.ic-pdp__bp-logo{height:30px;}

.ic-pdp__price{font-family:var(--ic-head);font-weight:800;font-size:40px;margin:6px 0 20px;}
.ic-pdp__price .old{color:var(--ic-old);text-decoration:line-through;font-size:24px;font-weight:700;margin-right:12px;}

/* buy row */
.ic-pdp__buy{display:flex;flex-direction:row;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
.ic-pdp__buy .ic-btn{flex:1 1 auto;min-width:200px;font-size:17px;padding:16px 26px;}
/* product-page stepper: equal filled gradient circles flanking a wide pill (bible) */
.ic-pdp__buy .ic-qty{padding:6px 8px;gap:6px;}
.ic-pdp__buy .ic-qty button{width:42px;height:42px;}
.ic-pdp__buy .ic-qty input{width:52px;height:42px;font-size:17px;}
.ic-pdp__buy .ic-qty .ic-minus,.ic-pdp__buy .ic-qty .ic-plus{background:var(--ic-grad-btn);}
.ic-pdp__buy .ic-btn--grad{background:var(--ic-grad);}
/* exhausted: the whole buy row collapses to one full-width disabled grey pill
   (base .ic-btn--soldout colors live in product-card.css, loaded globally) */
.ic-pdp__buy .ic-btn--soldout{flex:1 1 100%;min-height:52px;}

/* meta — bible desktop: (avail + mfr) centered line, code centered beneath;
   bible mobile: (mfr + code) line, avail beneath */
.ic-pdp__meta{
  /* one row on desktop: the code used to be forced onto a second line by flex-basis:100% */
  display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;
  gap:6px 22px;font-size:14px;margin-bottom:22px;text-align:center;
}
.ic-pdp__meta > span{white-space:nowrap;}
.ic-pdp__meta b{font-weight:700;}
.ic-pdp__meta .val-avail{color:var(--ic-avail);font-weight:700;}
.ic-pdp__meta .val-pre{color:#A05A00;font-weight:700;}
.ic-pdp__meta .val-out{color:var(--ic-muted);font-weight:700;}
.ic-pdp__meta .val-mfr{color:#E6A817;font-weight:700;} /* bible: gold accent */

/* Delivery method cards. Measured off the Figma export: 164x163 cards (near square) in
   a 48px-gutter row, 1px borders, a 35px chamfer at the top right, and states expressed
   as real colours rather than an opacity wash. */
.ic-pdp__methods{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-bottom:18px;}
.ic-method{
  --cut:var(--ic-line);
  --fill:transparent;
  --chamfer:34px;
  border:1px solid var(--cut);border-radius:14px;padding:16px;position:relative;
  display:flex;flex-direction:column;gap:10px;min-height:163px;
  font:inherit;text-align:left;cursor:pointer;color:var(--ic-muted);
  transition:border-color .16s ease,color .16s ease;
  clip-path:polygon(0 0, calc(100% - 33px) 0, 100% 33px, 100% 100%, 0 100%);
  /* The diagonal edge is a background band, not a rotated pseudo-element: a background is
     clipped by the same clip-path, so it can never overshoot the corners. It must be
     anchored to the BORDER box, and background-origin has to come AFTER the shorthand,
     which resets it to padding-box and leaves the band ~3px inside the real cut. */
  background:
    linear-gradient(45deg,
      transparent calc(50% - .5px), var(--cut) calc(50% - .5px),
      var(--cut) calc(50% + .5px), transparent calc(50% + .5px)
    ) top right / var(--chamfer) var(--chamfer) no-repeat,
    var(--fill);
  background-origin:border-box;
}
.ic-method__icon{font-size:32px;color:inherit;}
.ic-method__title{font-weight:700;font-size:15px;line-height:1.25;color:inherit;}
.ic-method__state{font-size:14px;font-weight:700;margin-top:auto;color:inherit;}

/* selected */
.ic-method.is-active{
  --cut:var(--ic-magenta);
  --fill:linear-gradient(135deg,#FEFCFF 0%,#F2E5FF 100%);
  color:#64045F;
}
.ic-method.is-active .ic-method__title{color:#000;}
/* available but not selected: readable, clearly clickable */
.ic-method:hover:not(:disabled):not(.is-active){--cut:var(--ic-magenta-soft,#EBD7E4);color:var(--ic-text);}
/* unavailable: greyed for real, and unreachable by mouse or keyboard */
.ic-method:disabled{--cut:#DFDFDF;color:#CBCBCB;cursor:default;}
.ic-method:focus-visible{outline:2px solid var(--ic-magenta);outline-offset:2px;}

/* xp courier promise box */
.ic-pdp__xp{
  background:#effaf1;border:1px solid #bfe6c8;border-radius:var(--ic-r);padding:14px 16px;font-size:13px;line-height:1.6;
}
.ic-pdp__xp b{font-weight:700;}
/* the real XP wordmarks, on a white pill because the panel is pale green. The old
   asset was the 67x67 square tier badge, which at 22px was an illegible blank chip. */
.ic-pdp__xp .xp-logo{height:16px;width:auto;vertical-align:-3px;margin:0 3px;
  background:#fff;border-radius:4px;padding:3px 7px;box-sizing:content-box;}

/* ---- Περισσότερες επιλογές: color-variant swatch rail (live OCMOD 67 port) ----
   selectors carry .ic-colors so they out-specify the generic
   .ic-rail__track > *{width:230px} card sizing in product-card.css */
.ic-colors{margin:22px 0 0;}
.ic-colors__title{
  font-family:var(--ic-head);font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  font-size:18px;margin:0 0 12px;
}
.ic-colors .ic-rail__track{gap:10px;padding:4px 2px 10px;}
.ic-colors .ic-rail__track > .ic-colors__item{
  flex:0 0 auto;width:84px;height:84px;
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  background:#fff;border:2px solid transparent;border-radius:var(--ic-r);
  box-shadow:var(--ic-shadow-card);padding:6px;overflow:hidden;
}
.ic-colors__item img{max-width:100%;max-height:100%;object-fit:contain;}
.ic-colors .ic-rail__track > .ic-colors__item.is-current{border-color:var(--ic-magenta);cursor:default;}
/* soldout siblings stay linked, just greyed (live shows them full-strength — greying is our tell) */
.ic-colors .ic-rail__track > .ic-colors__item.is-soldout{opacity:.5;}
@media (max-width:767px){
  .ic-colors .ic-rail__track > .ic-colors__item{width:72px;height:72px;}
}

/* ---- accordions (inside the info column, under the buy box — bible) ---- */
.ic-acc{margin:26px 0 0;}
.ic-acc__item{background:#fff;border-radius:var(--ic-r-lg);box-shadow:var(--ic-shadow-card);margin-bottom:16px;overflow:hidden;}
.ic-acc__head{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;cursor:pointer;
  padding:18px 22px;font-family:var(--ic-head);font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:18px;
}
.ic-acc__head .sign{color:var(--ic-magenta);font-size:22px;font-weight:400;}
.ic-acc__body{padding:0 22px 20px;font-size:14px;line-height:1.55;color:#1B1B1B;}
/* DB content carries inline centering + blue/periwinkle colors — bible is left-aligned dark ink */
.ic-acc__body p,.ic-acc__body div{text-align:left!important;}
.ic-acc__body,.ic-acc__body p,.ic-acc__body div,.ic-acc__body span,.ic-acc__body li{
  color:#1B1B1B!important;font-family:var(--ic-body)!important;
}
.ic-acc__body a{color:var(--ic-magenta)!important;}
.ic-acc__body[hidden]{display:none;}
/* JS open/close animation: inline max-height/opacity/padding-bottom transition while .is-anim is on
   (padding-bottom must animate too — max-height alone leaves the 20px bottom padding visible) */
.ic-acc__body.is-anim{overflow:hidden;transition:max-height .28s ease,opacity .28s ease,padding-bottom .28s ease;}
.ic-acc__body table{width:100%;border-collapse:collapse;}
.ic-acc__body td{padding:8px 10px;border-bottom:1px solid var(--ic-line-soft);}

/* ---- related "Συνδυάστε το με" ---- */
.ic-related{background:var(--ic-grad-section);border-radius:var(--ic-r-lg);padding:26px 24px;margin-top:36px;}
@media (min-width:992px){
  .ic-related .ic-rail__track > *{width:calc((100% - 72px) / 5);}
}
.ic-related .ic-sec-title{color:#fff;margin-bottom:16px;}


/* bible: the chamfer is a DESKTOP-only treatment; mobile gallery is a plain rounded card */
@media (min-width:992px){
  .ic-pdp__main{clip-path:polygon(0 0,calc(100% - 64px) 0,100% 64px,100% 100%,0 100%);}
}
@media (max-width:991px){
  .ic-pdp{grid-template-columns:minmax(0,1fr);gap:24px;}
  .ic-pdp__info,.ic-pdp__gallery{min-width:0;}
  .ic-pdp__gallery{filter:none;}
  .ic-pdp__main{box-shadow:var(--ic-shadow-card);}
  .ic-pdp__gallery{position:static;}
  .ic-pdp__title{font-size:28px;}
  .ic-pdp__price{font-size:32px;}
}
/* mobile: keep the 3 delivery tiles as a compact row (bible) */
@media (max-width:767px){
  /* stepper + ΑΓΟΡΑΣΕ ΤΟ share one row (bible) — chunky ~60px controls
     (bible button 65px / pill 61px; circles + label already at bible scale, leave them) */
  .ic-pdp__buy{flex-wrap:nowrap;gap:10px;}
  .ic-pdp__buy .ic-btn{min-width:0;flex:1 1 auto;padding:15px 14px;font-size:15px;min-height:62px;}
  .ic-pdp__buy .ic-qty{padding:9px 10px;}
  .ic-pdp__badge-img{height:52px;}
  /* meta order flips on mobile (bible): mfr + code line, then avail */
  .ic-pdp__meta{flex-wrap:wrap;}
  .ic-pdp__meta .m-mfr{order:1;}
  .ic-pdp__meta .m-code{order:2;flex-basis:auto;}
  .ic-pdp__meta .m-avail{order:3;flex-basis:100%;}
  .ic-pdp__methods{grid-template-columns:repeat(3,1fr);gap:8px;}
  .ic-method{padding:10px 8px;min-height:104px;gap:6px;
    clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);}
  .ic-method{--chamfer:20px;}
  .ic-method__icon{font-size:16px;}
  .ic-method__title{font-size:10.5px;line-height:1.2;}
  .ic-method__state{font-size:10.5px;}
}

/* ---- Skroutz reviews (subtle; widget content injected by Skroutz Analytics) ---- */
.ic-skroutz-reviews{margin-top:26px;}
#cstm_skroutz_disclaimer{font-size:12px;color:var(--ic-muted);line-height:1.5;margin-bottom:10px;}
#cstm_skroutz_disclaimer a{color:var(--ic-magenta);}

/* ---------- mobile sticky buy bar ---------- */
.ic-pdp__sticky{display:none;}
@media (max-width:767px){
  .ic-pdp__sticky{
    position:fixed;left:0;right:0;bottom:0;z-index:400;
    display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid var(--ic-line);
    box-shadow:0 -8px 24px -10px rgba(20,10,30,.35);
  }
  .ic-pdp__sticky[hidden]{display:none;}
  .ic-pdp__sticky-price{
    font-family:var(--ic-head);font-weight:800;font-size:19px;color:var(--ic-magenta);
    white-space:nowrap;
  }
  .ic-pdp__sticky-price .old{
    display:block;font-size:12px;font-weight:600;color:var(--ic-muted);text-decoration:line-through;
  }
  .ic-pdp__sticky .ic-btn{flex:1 1 auto;max-width:60%;padding:12px 10px;font-size:13.5px;}
}

/* ---------- status 14: sold in the shops only ----------
   The box carries Bootstrap's .alert .alert-info as well, to match live's markup, so
   every rule here is written as .alert.ic-instore-note. That is one class more specific
   than .alert-info and cannot lose to it whatever order the sheets end up loading in. */
.alert.ic-instore-note{
  /* A pale wash of the brand magenta, mixed from the token rather than pasted as a hex,
     so it follows --ic-magenta if the brand colour ever moves. The flat hexes on the
     first line are the same mix, for browsers without color-mix. */
  background:#FAF0F6;border:1px solid #F0D2E4;
  background:color-mix(in srgb, var(--ic-magenta) 6%, #fff);
  border-color:color-mix(in srgb, var(--ic-magenta) 18%, #fff);
  border-radius:var(--ic-r-lg);
  padding:16px 18px;margin:0 0 18px;color:var(--ic-text);text-align:center;
}
.alert.ic-instore-note .ic-instore-head{
  font-family:var(--ic-head);font-weight:800;font-size:16px;line-height:1.35;
  color:var(--ic-magenta-dark);text-align:center;
}
.alert.ic-instore-note .ic-instore-shops{
  list-style:none;margin:12px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.alert.ic-instore-note .ic-instore-shops li{
  /* only the top line is centred: the rows put the logo left and the pill with its caret
     right. The li is a column so the address panel can open underneath the row. */
  display:flex;flex-direction:column;align-items:stretch;text-align:left;cursor:pointer;
  background:#fff;border:1px solid #F7E6F0;border-radius:10px;padding:9px 12px;
  border-color:color-mix(in srgb, var(--ic-magenta) 10%, #fff);
}
.alert.ic-instore-note .ic-instore-row{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;
  min-height:38px;
}
/* the address panel. A class rule carrying display beats a bare [hidden], so this needs
   its own [hidden] rule at the same weight or the panel never closes. */
.alert.ic-instore-note .ic-instore-where{
  display:flex;flex-direction:column;gap:3px;
  margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.22);
  font-size:13px;line-height:1.45;text-align:left;
}
.alert.ic-instore-note .ic-instore-where[hidden]{display:none;}
/* the address is the link, there is nothing else in the panel */
.alert.ic-instore-note .ic-instore-where .w-addr{font-weight:700;text-decoration:underline;}
.alert.ic-instore-note li.ic .ic-instore-where .w-addr{color:#fff;}
.alert.ic-instore-note li.cc .ic-instore-where{border-top-color:rgba(0,0,0,.18);}
.alert.ic-instore-note li.cc .ic-instore-where .w-addr{color:#111;}
/* each row is the shop's own brand: iConnect black with its white wordmark, Collector
   Center on its yellow with the black mark. The pill keeps the meaning, so on the yellow
   row the unavailable state turns white with grey text rather than staying dark on dark. */
.alert.ic-instore-note .ic-instore-shops li.ic{background:#111111;border-color:#111111;}
.alert.ic-instore-note .ic-instore-shops li.cc{background:#FFCB05;border-color:#FFCB05;}
/* one height for both marks, and a floor on the row, so neither artwork's proportions
   can make one row taller than the other */

.alert.ic-instore-note .ic-instore-logo{display:block;width:auto;height:28px;flex:0 0 auto;}
.alert.ic-instore-note .ic-instore-shops li.cc .ic-instore-state.no{background:#fff;color:var(--ic-muted);}
.alert.ic-instore-note .ic-instore-shop{font-weight:700;font-size:14px;color:var(--ic-text);}
.alert.ic-instore-note .ic-instore-state{
  flex:0 0 auto;border-radius:var(--ic-pill);padding:4px 12px;color:#fff;
  font-family:var(--ic-head);font-weight:700;font-size:11.5px;letter-spacing:.6px;
  text-transform:uppercase;white-space:nowrap;
}
.alert.ic-instore-note .ic-instore-state.yes{background:#18A957;}
.alert.ic-instore-note .ic-instore-state.no{background:var(--ic-muted);}
@media (max-width:767px){
  .alert.ic-instore-note{padding:14px;}
  .alert.ic-instore-note .ic-instore-head{font-size:15px;}
}