/* NOTE (not CSS): #2 "Open its settings" → "You do not have permission to view this page" is a
   demo-profile PERMISSION gap (profile 5 lacks view/configure on the module + its admin tabs),
   not a CSS or autologin issue. Fix lives in the demo-setup rule, not here. */
/**
 * PrestaChamps Module Showroom - demo home landing (Direction B).
 * Styles views/templates/hook/demo-home.tpl: a white, Addons-product-page-style presentation of the one module
 * a demo store belongs to. Everything is scoped under .pchsr-landing so shop themes are not affected.
 * The accent colour is read from --pchsr-accent, which the template sets inline on .pchsr-landing (teal fallback).
 *
 * This stylesheet is loaded only on the home of a store that belongs to one PrestaChamps module
 * (see Pchshowroom::hookActionFrontControllerSetMedia), so the "hide the theme home" rules at the end
 * never affect ordinary stores or any other page.
 */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

.pchsr-landing {
  --pchsr-accent: #0ea5a5;
  background: #fff;
  color: #0f172a;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.5;
}
.pchsr-landing *, .pchsr-landing *::before, .pchsr-landing *::after { box-sizing: border-box; }
.pchsr-landing a { color: inherit; text-decoration: none; }
.pchsr-landing img { max-width: 100%; }
.pchsr-landing h1, .pchsr-landing h2, .pchsr-landing h3, .pchsr-landing p, .pchsr-landing dl { margin: 0; }

.pchsr-l-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
}

/* full-width hero banner: an accent-coloured band that states which module demo you are on */
.pchsr-l-herobar {
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(255, 255, 255, 0.14), transparent 60%),
    linear-gradient(135deg, var(--pchsr-accent, #0f766e) 0%, color-mix(in srgb, var(--pchsr-accent, #0f766e) 72%, #000) 100%);
  color: #fff;
}

/* top utility strip, sitting on the banner */
.pchsr-l-util {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}
.pchsr-l-util__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
}
.pchsr-l-util__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
}
.pchsr-l-util__logo { height: 20px; width: auto; }
.pchsr-l-util__here { opacity: 0.88; }

/* hero */
.pchsr-l-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  padding: 52px 40px 60px;
}
.pchsr-l-hero__text {
  flex: 1 1 460px;
  min-width: 0;
}
.pchsr-l-hero__media { flex: 1 1 400px; }
.pchsr-l-hero__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  object-fit: cover;
  background: #fff;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.pchsr-l-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.pchsr-l-title {
  margin: 0 0 14px;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: #fff;
}
.pchsr-l-lead {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  line-height: 1.6;
}
.pchsr-l-benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.95);
  font-size: 15px;
}
.pchsr-l-check {
  margin-right: 10px;
  color: #fff;
  font-weight: 700;
}

.pchsr-l-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pchsr-l-btn {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.pchsr-landing .pchsr-l-btn--primary {
  background: var(--pchsr-accent, #0ea5a5);
  color: #fff;
}
.pchsr-landing .pchsr-l-btn--ghost {
  border: 1px solid #cbd5e1;
  color: #334155;
}
.pchsr-landing .pchsr-l-btn--light {
  background: #fff;
  color: var(--pchsr-accent, #0f766e);
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.pchsr-landing .pchsr-l-btn--light:hover { background: #f1f5f9; }
.pchsr-landing .pchsr-l-btn--onaccent {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}
.pchsr-landing .pchsr-l-btn--onaccent:hover { background: rgba(255, 255, 255, 0.2); }

/* promo video band */
.pchsr-l-video { padding: 54px 40px; }
.pchsr-l-video .pchsr-l-h2 { text-align: center; }
.pchsr-l-video__frame {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}
.pchsr-l-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* feature band */
.pchsr-l-band {
  padding: 52px 0;
  border-top: 1px solid #eef2f6;
  border-bottom: 1px solid #eef2f6;
  background: #f8fafc;
}
.pchsr-l-h2 {
  margin: 0 0 30px;
  font-size: 26px;
}
.pchsr-l-band .pchsr-l-h2 { text-align: center; }
.pchsr-l-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pchsr-l-card {
  padding: 22px;
  border: 1px solid #e7ecf1;
  border-radius: 14px;
  background: #fff;
}
.pchsr-l-num {
  color: var(--pchsr-accent, #0ea5a5);
  font-size: 20px;
  font-weight: 700;
}
.pchsr-l-card__t {
  margin: 9px 0 7px;
  font-size: 16px;
}
.pchsr-l-card__p {
  margin: 0;
  color: #64748b;
  font-size: 13.5px;
  line-height: 1.55;
}

/* screenshots */
.pchsr-l-screens { padding: 52px 40px; }
.pchsr-l-shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pchsr-l-shot { margin: 0; }
.pchsr-l-shot img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid #e7ecf1;
  border-radius: 12px;
  object-fit: cover;
}
.pchsr-l-shot figcaption {
  margin-top: 9px;
  color: #64748b;
  font-size: 12.5px;
}

/* technical sheet */
.pchsr-l-tech { padding: 52px 40px; }
.pchsr-l-sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin: 0;
  border-top: 1px solid #e7ecf1;
}
.pchsr-l-sheet__row {
  display: flex;
  justify-content: space-between;
  padding: 13px 2px;
  border-bottom: 1px solid #eef2f6;
  font-size: 14px;
}
.pchsr-l-sheet__row dt { color: #64748b; }
.pchsr-l-sheet__row dd { margin: 0; }

/* closing call to action */
.pchsr-l-ctaband {
  background: var(--pchsr-accent, #0f766e);
  color: #fff;
}
.pchsr-l-ctaband__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 40px;
}
.pchsr-l-ctaband__t {
  font-size: 22px;
  font-weight: 600;
}
.pchsr-l-ctaband__s {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
}

/* placeholder shown while a real image is not supplied yet */
.pchsr-l-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 13px;
}

/* branded PrestaChamps footer */
.pchsr-l-footer {
  padding: 54px 24px 40px;
  background: #0f172a;
  color: #cbd5e1;
}
.pchsr-l-footer__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.pchsr-landing .pchsr-l-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}
.pchsr-l-footer__logo { width: auto; height: 58px; }
.pchsr-l-footer__name {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
}
.pchsr-l-footer__love {
  margin-top: 2px;
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: 30px;
  line-height: 1.1;
  color: #fff;
}
.pchsr-l-footer__tag {
  max-width: 580px;
  color: #94a3b8;
  font-size: 14px;
}
.pchsr-l-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 10px;
}
.pchsr-landing .pchsr-l-footer__links a { color: #cbd5e1; font-size: 13.5px; }
.pchsr-landing .pchsr-l-footer__links a:hover { color: #fff; }
.pchsr-l-footer__copy {
  margin-top: 10px;
  color: #64748b;
  font-size: 12px;
}

@media (max-width: 860px) {
  .pchsr-l-grid,
  .pchsr-l-shots {
    grid-template-columns: 1fr;
  }
  .pchsr-l-sheet {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Hide the theme's own home blocks on a demo store's home, so only the module
   landing shows. The demo home content (slider, featured products, banners...)
   is rendered through the same displayHome hook as this landing, as sibling
   blocks inside the theme's home container; we keep only .pchsr-landing.
   Scoped to body#index (the home) and only loaded on a demo store's home.
   -------------------------------------------------------------------------- */
body#index .ps-homeslider,
body#index .ps_imageslider,
body#index .featured-products,
body#index .ps-featuredproducts,
body#index section.ps-featuredproducts,
body#index .block-categories,
body#index .ps-banner,
body#index section.ps-banner,
body#index .ps-newproducts,
body#index .ps-specials,
body#index .ps-bestsales,
body#index .ps-brands,
body#index .ps-customtext,
body#index .ps-custom-text,
body#index .elementor {
  display: none !important;
}
/* Classic / Hummingbird: keep only our landing among the home container's children. */
body#index #content.page-home > *:not(.pchsr-landing),
body#index #content.page-content > *:not(.pchsr-landing),
body#index #content.page-content.page-home > *:not(.pchsr-landing),
body#index #main .page-home > *:not(.pchsr-landing),
body#index #main .page-content.page-home > *:not(.pchsr-landing) {
  display: none !important;
}
/* Let the landing's full-width bands span the home container. */
body#index #content.page-home,
body#index #content.page-content.page-home,
body#index #main .page-content.page-home {
  max-width: none;
  margin: 0;
  padding: 0;
}
/* The landing ships its own branded footer, so the theme's footer content is hidden on a demo
   home — but #footer must keep rendering: modules inject functional UI through displayFooter
   (e.g. GDPR Pro's cookie window + its "Control your Privacy" reopen link live as direct
   children of #footer). So hide only the theme's own footer children, never those module ones. */
body#index #footer {
  display: block !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  text-align: center !important;
}
body#index #footer > *:not(#gdpr-modal-container):not(#gdpr-consent):not(.show-gdpr-modal):not([id*="gdpr"]):not([class*="gdpr"]):not([class*="cookie"]) {
  display: none !important;
}
body#index .show-gdpr-modal { margin: 18px auto !important; }