/* PCP Page Designer - front office styles.
   Kept self-contained and prefixed with `pcp-` so the module renders
   independently of the active PrestaShop theme. */

/* Prevent horizontal scrollbar caused by the 100vw full-width breakout */
.pcp-home--full{overflow-x:clip}

.pcp-home{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#0f172a;--pcp-content-width:1440px}
.pcp-home__wrap{max-width:100%;margin:0 auto;padding:0 22px;box-sizing:border-box}
/* Standard PCP content grid: all block content aligns to a shared
   1440px max-width column in both contained and full layouts.
   Backgrounds and hero images can still bleed full width. */
.pcp-home--contained .pcp-home__wrap{max-width:var(--pcp-content-width,1440px)}

/* Full-width breakout: break out of the theme's .container wrapper
   so the page goes truly edge-to-edge of the viewport. */
.pcp-home--full{width:100vw;position:relative;left:50%;margin-left:-50vw;max-width:100vw}
.pcp-home--full .pcp-home__wrap{max-width:100%;padding:0}
/* In full-width mode, non-bleed sections are constrained to a centered column */
.pcp-home--full .pcp-section:not(.pcp-bleed){max-width:var(--pcp-content-width,1440px);margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px;box-sizing:border-box}
.pcp-home--full .pcp-custom:not(.pcp-bleed){max-width:var(--pcp-content-width,1440px);margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px;box-sizing:border-box}
/* Bleed sections go edge-to-edge with their own inner content container */
.pcp-home--contained .pcp-bleed .pcp-hero__inner,
.pcp-home--contained .pcp-bleed .pcp-trust--grid,
.pcp-home--contained .pcp-bleed .pcp-newsletter__inner,
.pcp-home--full .pcp-bleed .pcp-hero__inner,
.pcp-home--full .pcp-bleed .pcp-trust--grid,
.pcp-home--full .pcp-bleed .pcp-newsletter__inner{max-width:var(--pcp-content-width,1440px);margin:0 auto;padding-left:22px;padding-right:22px;box-sizing:border-box}

.pcp-section{padding:28px 0}
.pcp-section__title{font-size:20px;font-weight:700;margin:0 0 4px;letter-spacing:-.3px}
.pcp-section__subtitle{font-size:13px;color:#64748b;margin:0 0 16px}

.pcp-btn{display:inline-block;font-size:13px;font-weight:700;padding:10px 18px;border-radius:8px;text-decoration:none;border:0;cursor:pointer;transition:transform .12s,background .12s}
.pcp-btn:hover{transform:translateY(-1px)}
.pcp-btn--primary{background:#fff;color:#0f172a}
.pcp-btn--ghost{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.pcp-btn--dark{background:#0f172a;color:#fff}
.pcp-btn--accent{background:#22c55e;color:#052e16}

/* hero */
.pcp-hero{position:relative;overflow:hidden;min-height:340px;padding:48px;display:flex;align-items:center;color:#fff;border-radius:14px;margin:18px 0}
.pcp-home--full .pcp-hero{border-radius:0;margin:0;min-height:420px;padding:64px 22px}
.pcp-home--full .pcp-hero--bleed{padding:48px;box-sizing:border-box}
.pcp-home--full .pcp-hero__inner{max-width:var(--pcp-content-width,1440px);width:100%;margin:0 auto;position:relative;z-index:2}
.pcp-hero__inner{max-width:100%;width:100%;position:relative;z-index:2}
.pcp-hero__title{font-size:var(--pcp-h-size,34px);line-height:var(--pcp-h-lh,1.15);letter-spacing:-.5px;margin:0 0 12px;font-weight:var(--pcp-h-weight,inherit);color:var(--pcp-h-color,inherit)}
.pcp-hero__subtext{font-size:var(--pcp-s-size,15px);opacity:.92;margin:0 0 22px;font-weight:var(--pcp-s-weight,inherit);color:var(--pcp-s-color,inherit);line-height:var(--pcp-s-lh,inherit)}
/* Hero content positioning: vertical (on the flex hero), horizontal block
   position (flex column inner) and text alignment - all independent. */
.pcp-hero--pv-top{align-items:flex-start}
.pcp-hero--pv-bottom{align-items:flex-end}
.pcp-hero--ph-left .pcp-hero__inner,
.pcp-hero--ph-center .pcp-hero__inner,
.pcp-hero--ph-right .pcp-hero__inner{display:flex;flex-direction:column}
.pcp-hero--ph-left .pcp-hero__inner{align-items:flex-start}
.pcp-hero--ph-center .pcp-hero__inner{align-items:center}
.pcp-hero--ph-right .pcp-hero__inner{align-items:flex-end}
.pcp-hero--ta-left .pcp-hero__inner{text-align:left}
.pcp-hero--ta-center .pcp-hero__inner{text-align:center}
.pcp-hero--ta-right .pcp-hero__inner{text-align:right}
.pcp-hero__cta{display:inline-flex;gap:10px;flex-wrap:wrap}

/* Hero overlay trust bar — positioned at the bottom of the hero, overlaying
   the hero image. The hero background stays full viewport width while the
   trust content stays contained within the 1440px content area.
   Responsive: 4 cols desktop, 2×2 tablet/mobile.
   !important on position to override the hero's display:flex flex-item behavior. */
.pcp-hero{position:relative}
.pcp-hero__overlay-trust{position:absolute !important;left:0;right:0;bottom:0;z-index:3;padding:0 22px 22px;box-sizing:border-box;flex:none !important;order:99}
.pcp-hero__overlay-trust .pcp-trust--grid{max-width:var(--pcp-content-width,1440px);margin:0 auto !important;border-radius:12px;background:var(--pcp-trust-bg,rgba(15,23,42,.55)) !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:14px;border:1px solid var(--pcp-trust-border,rgba(255,255,255,.15))}
.pcp-hero__overlay-trust .pcp-trust__item{background:rgba(255,255,255,.1) !important;border:1px solid var(--pcp-trust-border,rgba(255,255,255,.18)) !important;color:var(--pcp-trust-text,#fff) !important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pcp-hero__overlay-trust .pcp-trust__text{color:var(--pcp-trust-text,#fff) !important}
.pcp-hero__overlay-trust .pcp-trust__text a{color:var(--pcp-trust-text,#fff);text-decoration:underline}
.pcp-hero__overlay-trust .pcp-trust__icon{color:var(--pcp-trust-icon,rgba(255,255,255,.9))}
/* Override custom colors when in overlay mode so text stays readable on images */
.pcp-hero__overlay-trust .pcp-trust--clean{background:var(--pcp-trust-bg,rgba(15,23,42,.45)) !important;border:1px solid var(--pcp-trust-border,rgba(255,255,255,.12)) !important}
.pcp-hero__overlay-trust .pcp-trust--clean .pcp-trust__item{border-right-color:var(--pcp-trust-border,rgba(255,255,255,.15)) !important}
.pcp-hero__overlay-trust .pcp-trust--clean .pcp-trust__item:last-child{border-right:none}
/* Item-level inline border color override */
.pcp-hero__overlay-trust .pcp-trust__item[style]{border-color:var(--pcp-trust-border,rgba(255,255,255,.18)) !important}

/* trust */
.pcp-trust--grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:#f8fafc;padding:18px;border-radius:12px;margin:18px 0}
.pcp-home--contained .pcp-trust--grid,.pcp-home--full .pcp-trust--grid{border-radius:0;margin:0;padding:22px 22px;max-width:var(--pcp-content-width,1440px);margin-left:auto;margin-right:auto}
.pcp-trust__item{display:flex;align-items:center;gap:8px;font-size:13px;color:#475569;font-weight:600;background:#fff;border:1px solid #e6e9f0;border-radius:10px;padding:12px}
.pcp-trust__item--top{flex-direction:column;align-items:center;text-align:center;gap:10px}
.pcp-trust__item--left{flex-direction:row;align-items:center}
.pcp-trust__item--right{flex-direction:row-reverse;align-items:center;text-align:right}
.pcp-trust__item--txt-sm .pcp-trust__text{font-size:11px}
.pcp-trust__item--txt-md .pcp-trust__text{font-size:13px}
.pcp-trust__item--txt-lg .pcp-trust__text{font-size:16px}
.pcp-trust__icon{color:#16a34a;flex:none;display:flex;align-items:center;justify-content:center}
.pcp-trust__text{line-height:1.4}
.pcp-trust__text a{color:inherit;text-decoration:underline}
.pcp-trust__text b,.pcp-trust__text strong{font-weight:700}
.pcp-trust__text i,.pcp-trust__text em{font-style:italic}
/* Style: Clean — continuous bar with dividers, no cards */
.pcp-trust--clean{gap:0;background:#f8fafc;border:1px solid #e6e9f0}
.pcp-trust--clean .pcp-trust__item{background:none;border:none;border-radius:0;border-right:1px solid #e6e9f0}
.pcp-trust--clean .pcp-trust__item:last-child{border-right:none}
.pcp-home--contained .pcp-trust--clean,.pcp-home--full .pcp-trust--clean{border-left:none;border-right:none}
/* Style: Cards — default, each item is a separate card */
.pcp-trust--cards .pcp-trust__item{background:#fff;border:1px solid #e6e9f0;border-radius:10px}
/* Alignment */
.pcp-trust--align-left .pcp-trust__item--top{align-items:flex-start;text-align:left}
.pcp-trust--align-left .pcp-trust__item--left{justify-content:flex-start}
.pcp-trust--align-left .pcp-trust__item--right{justify-content:flex-start}

/* carousel — desktop grid (default) or horizontal scroll (optional) */
.pcp-carousel__track{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* Optional desktop carousel mode — horizontal scroll with snap */
.pcp-carousel--scroll .pcp-carousel__track{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.pcp-carousel--scroll .pcp-carousel__track::-webkit-scrollbar{display:none}
.pcp-carousel--scroll .pcp-product{flex:none;width:240px;scroll-snap-align:start}
.pcp-product{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.pcp-product__link{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.pcp-product__image{aspect-ratio:1;background:linear-gradient(135deg,#f1f5f9,#e6ebf3);border-radius:10px;overflow:hidden}
.pcp-product__image img{width:100%;height:100%;object-fit:cover;display:block}
.pcp-product__image--placeholder{background:linear-gradient(135deg,#f1f5f9,#e6ebf3)}
.pcp-product__name{font-size:13px;font-weight:600;line-height:1.3;color:#1e293b;display:block}
.pcp-product__price{font-size:14px;font-weight:700;color:#0f172a;display:block}
.pcp-product--placeholder .pcp-product__name{height:14px;background:#eef1f6;border-radius:3px}
.pcp-product--placeholder .pcp-product__price{height:14px;width:60%;background:#eef1f6;border-radius:3px}

/* category */
/* Category showcase carousel */
.pcp-category__carousel{position:relative;display:flex;align-items:center;gap:0}
.pcp-category__viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1}
.pcp-category__viewport::-webkit-scrollbar{display:none}
.pcp-category__track{display:flex;gap:16px;padding:4px 0}
.pcp-category__card{position:relative;flex:none;aspect-ratio:4/3;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;padding:14px;color:#fff;text-decoration:none;background:linear-gradient(160deg,#64748b99,#64748b);transition:transform .15s,box-shadow .15s;scroll-snap-align:start}
.pcp-category__card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(15,23,42,.18)}
.pcp-category__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pcp-category__img--placeholder{background:linear-gradient(160deg,#475569,#334155)}
.pcp-category__overlay{position:absolute;inset:0;z-index:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 40%,transparent 70%)}
.pcp-category__info{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.pcp-category__name{font-size:14px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.pcp-category__count{font-size:11px;opacity:.85;margin-top:2px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.pcp-category__card--placeholder{background:linear-gradient(160deg,#e2e8f0,#cbd5e1);color:#64748b}
.pcp-category__card--placeholder .pcp-category__name{text-shadow:none}
.pcp-category__arrow{flex:none;width:40px;height:40px;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:#475569;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:opacity .2s,background .15s;position:absolute;z-index:2;top:50%;transform:translateY(-50%)}
.pcp-category__arrow:hover{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.pcp-category__arrow--prev{left:-8px}
.pcp-category__arrow--next{right:-8px}
/* Responsive: desktop 5, tablet 3, mobile 1.4 */
.pcp-category__card{width:calc((100% - 64px) / 5)}
@media (max-width:1024px){
  .pcp-category__card{width:calc((100% - 32px) / 3)}
}
@media (max-width:640px){
  .pcp-category__card{width:calc((100% - 16px) * 0.7)}
  .pcp-category__arrow{display:none}
}

/* Banner Block (triple) */
.pcp-triple__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcp-triple--2col .pcp-triple__grid{grid-template-columns:repeat(2,1fr)}
.pcp-triple--full .pcp-triple__grid{grid-template-columns:1fr}
.pcp-triple__card{position:relative;aspect-ratio:4/3;border-radius:12px;padding:20px;display:flex;flex-direction:column;color:#fff;text-decoration:none;overflow:hidden}
.pcp-triple--full .pcp-triple__card{aspect-ratio:auto;min-height:500px}
/* Compact height for 2col and full */
.pcp-triple--compact .pcp-triple__card{aspect-ratio:16/9}
.pcp-triple--full.pcp-triple--compact .pcp-triple__card{min-height:280px}
/* Text overlay layers */
.pcp-triple__overlay{position:absolute;inset:0;z-index:0;pointer-events:none}
.pcp-triple__overlay--dark{background:rgba(0,0,0,.35)}
.pcp-triple__overlay--light{background:rgba(255,255,255,.5)}
/* Text positioning (3x3 grid) */
.pcp-triple__text{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;height:100%;width:100%}
.pcp-triple__text--tl{align-items:flex-start;justify-content:flex-start;text-align:left}
.pcp-triple__text--tc{align-items:flex-start;justify-content:center;text-align:left}
.pcp-triple__text--tr{align-items:flex-start;justify-content:flex-end;text-align:left}
.pcp-triple__text--ml{align-items:center;justify-content:flex-start;text-align:left}
.pcp-triple__text--mc{align-items:center;justify-content:center;text-align:center}
.pcp-triple__text--mr{align-items:center;justify-content:flex-end;text-align:right}
.pcp-triple__text--bl{align-items:flex-end;justify-content:flex-start;text-align:left}
.pcp-triple__text--bc{align-items:flex-end;justify-content:center;text-align:center}
.pcp-triple__text--br{align-items:flex-end;justify-content:flex-end;text-align:right}
.pcp-triple__card--slate{background:linear-gradient(140deg,#475569cc,#0f172a)}
.pcp-triple__card--autumn{background:linear-gradient(140deg,#f59e0bcc,#b45309)}
.pcp-triple__card--midnight{background:linear-gradient(140deg,#1f2937cc,#000000)}
.pcp-triple__card--festive{background:linear-gradient(140deg,#dc2626cc,#7f1d1d)}
.pcp-triple__card--frost{background:linear-gradient(140deg,#38bdf8cc,#1d4ed8)}
.pcp-triple__card--forest{background:linear-gradient(140deg,#22c55ecc,#14532d)}
.pcp-triple__card--rose{background:linear-gradient(140deg,#fb7185cc,#9d174d)}
.pcp-triple__title{font-size:16px;font-weight:700}
.pcp-triple__subtitle{font-size:13px;opacity:.85;margin-top:4px}

/* editorial */
.pcp-editorial__inner{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;background:#f8fafc;border-radius:14px;padding:24px}
.pcp-editorial__title{font-size:22px;font-weight:700;margin:0 0 10px}
.pcp-editorial__body{font-size:14px;color:#475569;margin:0 0 16px;line-height:1.55}
.pcp-editorial__image{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#e2e8f0,#f1f5f9)}
.pcp-editorial__image img{width:100%;height:100%;object-fit:cover}

/* newsletter */
.pcp-newsletter{margin:18px 0}
.pcp-home--full .pcp-newsletter{margin:0}
.pcp-newsletter__inner{background:#0f172a;color:#fff;border-radius:14px;padding:28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pcp-home--full .pcp-newsletter__inner{border-radius:0;padding:32px 22px;max-width:var(--pcp-content-width,1440px);margin:0 auto}
.pcp-newsletter__text{flex:1;min-width:240px}
.pcp-newsletter__title{font-size:18px;font-weight:700;margin:0 0 4px}
.pcp-newsletter__subtitle{font-size:13px;opacity:.7;margin:0}
.pcp-newsletter__form{display:flex;gap:8px}
.pcp-newsletter__form input{border:0;border-radius:8px;padding:10px 14px;font-size:14px;min-width:220px}
.pcp-newsletter__form input:focus{outline:none;box-shadow:0 0 0 3px rgba(34,197,94,.3)}

@media (max-width:768px){
  /* Mobile Hero: allow the portrait mobile image to breathe.
     The hero becomes taller so headline, supporting text, CTA(s) and
     image composition have proper vertical space. Typography stays at
     the configured mobile sizes (34px headline, 16px supporting text). */
  .pcp-hero{min-height:680px;padding:36px 22px}
  .pcp-home--full .pcp-hero{min-height:680px;padding:36px 22px}
  .pcp-hero__inner{max-width:100%}
  .pcp-hero__title{font-size:var(--pcp-h-size-m,34px)}
  .pcp-hero__subtext{font-size:var(--pcp-s-size-m,var(--pcp-s-size,16px))}
  .pcp-trust--grid{grid-template-columns:1fr 1fr}
  .pcp-hero__overlay-trust{padding:0 12px 12px}
  .pcp-hero__overlay-trust .pcp-trust--grid{gap:8px;padding:10px}
  /* Mobile: product carousel becomes a horizontal swipe carousel.
     One row, ~85vw cards so the next card peeks in, snap to start.
     This is the default PCP mobile behaviour — no merchant setting needed. */
  .pcp-carousel__track{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .pcp-carousel__track::-webkit-scrollbar{display:none}
  .pcp-carousel__track .pcp-product{flex:none;width:85vw;max-width:320px;scroll-snap-align:start}
  .pcp-carousel__track .pcp-product__name{font-size:12.5px}
  .pcp-carousel__track .pcp-product__price{font-size:13px}
  .pcp-triple__grid{grid-template-columns:1fr}
  .pcp-triple--full .pcp-triple__card{min-height:280px}
  .pcp-triple--full.pcp-triple--compact .pcp-triple__card{min-height:200px}
  .pcp-editorial__inner{grid-template-columns:1fr}
  .pcp-newsletter__inner{flex-direction:column;align-items:stretch}
  .pcp-newsletter__form{flex-direction:column}
  .pcp-newsletter__form input{min-width:0;width:100%}
}

/* ---------- custom component (generic text block) ---------- */
.pcp-custom{padding:28px 0;text-align:left;box-sizing:border-box;overflow:hidden}
.pcp-custom__title{font-size:22px;font-weight:700;margin:0 0 8px;color:#0f172a}
.pcp-custom__subtitle{font-size:15px;color:#64748b;margin:0 0 16px}
.pcp-custom__body{font-size:15px;line-height:1.6;color:#334155;max-width:720px;margin:0 auto}
.pcp-custom__body p{margin:0 0 12px}
.pcp-custom__body p:last-child{margin-bottom:0}
.pcp-custom__body h2{font-size:22px;font-weight:700;margin:20px 0 8px;color:#0f172a}
.pcp-custom__body h3{font-size:18px;font-weight:700;margin:16px 0 6px;color:#0f172a}
.pcp-custom__body ul,.pcp-custom__body ol{margin:0 0 12px;padding-left:24px}
.pcp-custom__body a{color:#2563eb;text-decoration:underline}
.pcp-custom__body img{max-width:100%;height:auto;border-radius:8px;margin:8px 0}
.pcp-custom__body blockquote{border-left:4px solid #cbd5e1;padding-left:16px;margin:12px 0;color:#64748b;font-style:italic}
.pcp-custom__body hr{border:0;border-top:1px solid #e2e8f0;margin:16px 0}
.pcp-custom__cta{margin-top:18px}
.pcp-custom__cta-text{display:inline-block;padding:10px 24px;background:#0f172a;color:#fff;border-radius:9px;font-size:14px;font-weight:600}
@media (max-width:768px){
  .pcp-custom{padding:18px 0}
  .pcp-custom__title{font-size:18px}
  .pcp-custom__subtitle{font-size:13px}
  .pcp-custom__body{font-size:14px}
}
