/* Photo Prints hub — world-class editorial layer.
   Loaded after photo-prints-premium.css. Presentation only: no layout logic, no JS hooks.
   Direction: MagicPath "Photo Prints Luxury" — warm paper, ink, restrained gold, serif headings. */

html.pp-photo-premium-active {
  --wc-ink: #252820;
  --wc-ink-soft: #45483d;
  --wc-muted: #65685f;
  --wc-paper: #f8f6f1;
  --wc-white: #fffefa;
  --wc-line: #dedbd2;
  --wc-gold: #b69559;
  --wc-gold-deep: #9d7e48;
  --wc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --wc-sans: "DM Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pp-ink: var(--wc-ink);
  --pp-paper: var(--wc-paper);
  --pp-muted: var(--wc-muted);
  --pp-gold: var(--wc-gold);
  --pp-line: var(--wc-line);
  --pp-dark: var(--wc-ink);
  --pp-dark-2: #2f3228;
}

/* Typography ------------------------------------------------------------ */
html.pp-photo-premium-active .pp-photo-premium,
html.pp-photo-premium-active .pp-pp-why,
html.pp-photo-premium-active .pp-pp-print,
html.pp-photo-premium-active .pp-pp-colour,
html.pp-photo-premium-active .pp-pp-diff,
html.pp-photo-premium-active .pp-pp-finishes,
html.pp-photo-premium-active .pp-pp-frames,
html.pp-photo-premium-active .pp-pp-journey,
html.pp-photo-premium-active .pp-pp-ba,
html.pp-photo-premium-active .pp-pp-room,
html.pp-photo-premium-active .pp-pp-pack {
  font-family: var(--wc-sans);
  color: var(--wc-ink);
}
html.pp-photo-premium-active .pp-photo-premium h1,
html.pp-photo-premium-active .pp-photo-premium h2,
html.pp-photo-premium-active .pp-photo-premium h3,
html.pp-photo-premium-active #pp-photo-pricing h2,
html.pp-photo-premium-active [class^="pp-pp-"] h2,
html.pp-photo-premium-active [class*=" pp-pp-"] h2,
html.pp-photo-premium-active [class^="pp-pp-"] h3,
html.pp-photo-premium-active [class*=" pp-pp-"] h3 {
  font-family: var(--wc-serif) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em;
  color: var(--wc-ink);
}
html.pp-photo-premium-active [class^="pp-pp-"] h2 em,
html.pp-photo-premium-active [class*=" pp-pp-"] h2 em {
  color: var(--wc-gold-deep);
  font-style: italic;
}

/* Text that sits on the hero photo stays light. */
html.pp-photo-premium-active .pp-photo-hero-overlay h1,
html.pp-photo-premium-active .pp-photo-hero-overlay h2,
html.pp-photo-premium-active .pp-photo-hero-overlay h3,
html.pp-photo-premium-active .pp-photo-hero-overlay p { color: var(--wc-white); }

/* Hero: gallery + configurator panel ------------------------------------- */
html.pp-photo-premium-active .single-product-hero--photo-prints.home-self-code,
html.pp-photo-premium-active .pp-photo-premium {
  background: var(--wc-paper);
}
html.pp-photo-premium-active .pp-photo-hub-split__gallery {
  border-radius: 2px;
  background: var(--wc-ink);
}
html.pp-photo-premium-active .pp-photo-hub-split__config .premium-configurator-wrapper {
  background: var(--wc-white);
  border: 1px solid var(--wc-line);
  border-radius: 2px;
  box-shadow: 0 24px 60px -32px rgba(37, 40, 32, 0.28);
}
html.pp-photo-premium-active .pp-photo-hub-split__config .premium-header-banner {
  background: var(--wc-white);
  border-bottom: 1px solid var(--wc-line);
}
html.pp-photo-premium-active .pp-photo-hub-split__config .premium-configurator-title {
  color: var(--wc-ink);
  font-family: var(--wc-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
}
html.pp-photo-premium-active .pp-photo-hub-split__config .pp-photo-upload-cta,
html.pp-photo-premium-active .pp-photo-hub-split__config button.order {
  background: var(--wc-ink);
  background-image: none;
  color: var(--wc-white);
  border: 1px solid var(--wc-ink);
  border-radius: 2px;
  letter-spacing: 0.04em;
  box-shadow: none;
  transition: background 0.18s ease, transform 0.18s ease;
}
html.pp-photo-premium-active .pp-photo-hub-split__config .pp-photo-upload-cta:hover,
html.pp-photo-premium-active .pp-photo-hub-split__config button.order:hover {
  background: var(--wc-ink-soft);
  transform: translateY(-1px);
}

/* Pricing tables: ink + paper instead of black + gold gradient ------------ */
html.pp-photo-premium-active #pp-photo-pricing {
  background: var(--wc-paper);
  padding: clamp(40px, 6vw, 88px) 0;
  border-block: 1px solid var(--wc-line);
}
html.pp-photo-premium-active #pp-photo-pricing .pricing-header h2 {
  color: var(--wc-ink);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  text-align: center;
}
html.pp-photo-premium-active #pp-photo-pricing .pricing-card {
  background: var(--wc-white);
  border: 1px solid var(--wc-line);
  border-radius: 2px;
  box-shadow: 0 18px 44px -30px rgba(37, 40, 32, 0.3);
  overflow: hidden;
}
/* Base theme sets the toggle's colours at higher specificity / on state classes, so force them. */
html.pp-photo-premium-active #pp-photo-pricing .pricing-toggle-btn,
html.pp-photo-premium-active #pp-photo-pricing .pricing-toggle-btn:not(.collapsed),
html.pp-photo-premium-active #pp-photo-pricing .pricing-toggle-btn:hover {
  background: var(--wc-white) !important;
  color: var(--wc-ink) !important;
  font-family: var(--wc-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--wc-line);
}
html.pp-photo-premium-active #pp-photo-pricing .pricing-body,
html.pp-photo-premium-active #pp-photo-pricing .table-container {
  background: var(--wc-white);
  color: var(--wc-ink);
}
html.pp-photo-premium-active #pp-photo-pricing table,
html.pp-photo-premium-active #pp-photo-pricing th,
html.pp-photo-premium-active #pp-photo-pricing td {
  background: transparent;
  color: var(--wc-ink);
  border-color: var(--wc-line);
}
html.pp-photo-premium-active #pp-photo-pricing th {
  color: var(--wc-gold-deep);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html.pp-photo-premium-active #pp-photo-pricing .btn-premium-gold {
  background: var(--wc-ink);
  background-image: none;
  color: var(--wc-white);
  border-radius: 2px;
  letter-spacing: 0.06em;
}
html.pp-photo-premium-active #pp-photo-pricing .btn-premium-gold:hover {
  background: var(--wc-ink-soft);
}

/* Dark bands -> one ink tone, no glow ------------------------------------ */
html.pp-photo-premium-active .pp-pp-journey,
html.pp-photo-premium-active .pp-pp-ready,
html.pp-photo-premium-active .pp-pp-trust {
  background: var(--wc-ink) !important;
  background-image: none !important;
}
html.pp-photo-premium-active .pp-pp-ready {
  padding-block: clamp(56px, 8vw, 112px);
}

/* ==========================================================================
   All sections — one system: paper / white alternating, one ink tone for dark
   bands, deep gold on light, soft gold on dark, square-ish 2px corners.
   ========================================================================== */
html.pp-photo-premium-active {
  --wc-gold-soft: #d9c08a;
  --wc-ink-2: #2f3228;
  --wc-on-ink-line: rgba(255, 254, 250, 0.14);
  --wc-section-pad: clamp(56px, 8vw, 112px);
}

/* Rhythm: alternate paper / white */
html.pp-photo-premium-active .pp-pp-why,
html.pp-photo-premium-active .pp-pp-diff,
html.pp-photo-premium-active .pp-pp-ba,
html.pp-photo-premium-active .pp-pp-pack,
html.pp-photo-premium-active .pp-pp-homes { background: var(--wc-paper); }
html.pp-photo-premium-active .pp-pp-print,
html.pp-photo-premium-active .pp-pp-finishes,
html.pp-photo-premium-active .pp-pp-frames,
html.pp-photo-premium-active .pp-pp-room { background: var(--wc-white); }
html.pp-photo-premium-active .pp-pp-why,
html.pp-photo-premium-active .pp-pp-print,
html.pp-photo-premium-active .pp-pp-colour,
html.pp-photo-premium-active .pp-pp-diff,
html.pp-photo-premium-active .pp-pp-finishes,
html.pp-photo-premium-active .pp-pp-frames,
html.pp-photo-premium-active .pp-pp-journey,
html.pp-photo-premium-active .pp-pp-ba,
html.pp-photo-premium-active .pp-pp-room,
html.pp-photo-premium-active .pp-pp-pack { padding-block: var(--wc-section-pad); }

/* Dark bands share one ink */
html.pp-photo-premium-active .pp-pp-colour,
html.pp-photo-premium-active .pp-pp-complete-head,
html.pp-photo-premium-active .pp-pp-academy-head,
html.pp-photo-premium-active .pp-photo-cross-sell,
html.pp-photo-premium-active .pp-pp-close,
html.pp-photo-premium-active .pp-ai-guide__hero,
html.pp-photo-premium-active .pp-ai-guide__cta-band {
  background: var(--wc-ink) !important;
  background-image: none !important;
  color: var(--wc-white);
}
html.pp-photo-premium-active .pp-pp-colour h2,
html.pp-photo-premium-active .pp-pp-complete-head h2,
html.pp-photo-premium-active .pp-pp-academy-head h2,
html.pp-photo-premium-active .pp-pp-journey h2,
html.pp-photo-premium-active .pp-pp-close h2,
html.pp-photo-premium-active .pp-pp-ready h2,
html.pp-photo-premium-active .pp-ai-guide__hero h1,
html.pp-photo-premium-active .pp-ai-guide__hero h2 { color: var(--wc-white); }
html.pp-photo-premium-active .pp-pp-colour h2 em,
html.pp-photo-premium-active .pp-pp-complete-head h2 em,
html.pp-photo-premium-active .pp-pp-academy-head h2 em,
html.pp-photo-premium-active .pp-pp-journey h2 em,
html.pp-photo-premium-active .pp-pp-close h2 em { color: var(--wc-gold-soft); }

/* Section headings: one scale */
html.pp-photo-premium-active [class*="pp-pp-"] h2 {
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.06;
  text-wrap: balance;
}
html.pp-photo-premium-active .pp-pp-ready__headline {
  font-family: var(--wc-serif);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

/* Eyebrows */
html.pp-photo-premium-active .pp-pp__eyebrow,
html.pp-photo-premium-active .pp-pp-ready__eyebrow,
html.pp-photo-premium-active .pp-pp-trust__label,
html.pp-photo-premium-active .pp-ai-guide__eyebrow,
html.pp-photo-premium-active .pp-photo-samples__eyebrow {
  font-family: var(--wc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--wc-gold-deep);
}
html.pp-photo-premium-active .pp-pp-colour .pp-pp__eyebrow,
html.pp-photo-premium-active .pp-pp-journey .pp-pp__eyebrow,
html.pp-photo-premium-active .pp-pp-complete-head .pp-pp__eyebrow,
html.pp-photo-premium-active .pp-pp-academy-head .pp-pp__eyebrow,
html.pp-photo-premium-active .pp-pp-ready__eyebrow,
html.pp-photo-premium-active .pp-pp-trust__label,
html.pp-photo-premium-active .pp-ai-guide__hero .pp-ai-guide__eyebrow { color: var(--wc-gold-soft); }

/* Body copy */
html.pp-photo-premium-active .pp-pp-print__sub,
html.pp-photo-premium-active .pp-pp-diff__sub,
html.pp-photo-premium-active .pp-pp-why p,
html.pp-photo-premium-active .pp-pp-pack p {
  font-family: var(--wc-sans);
  line-height: 1.7;
  color: var(--wc-muted);
}
html.pp-photo-premium-active .pp-pp-colour p,
html.pp-photo-premium-active .pp-pp-complete-head p,
html.pp-photo-premium-active .pp-pp-academy-head p,
html.pp-photo-premium-active .pp-pp-journey p,
html.pp-photo-premium-active .pp-pp-ready p,
html.pp-photo-premium-active .pp-pp-close__sub { color: rgba(255, 254, 250, 0.74); }

/* Cards, tables, media: square-ish, hairline borders, no heavy shadow */
html.pp-photo-premium-active .pp-pp-colour__card,
html.pp-photo-premium-active .pp-photo-cross-card {
  background: var(--wc-ink-2);
  border: 1px solid var(--wc-on-ink-line);
  border-radius: 2px;
  box-shadow: none;
}
html.pp-photo-premium-active .pp-pp-diff__table,
html.pp-photo-premium-active .pp-photo-hub__card,
html.pp-photo-premium-active .pp-photo-hub__sub-hub,
html.pp-photo-premium-active .pp-photo-tools-card,
html.pp-photo-premium-active .pp-photo-knowledge-card,
html.pp-photo-premium-active .pp-ai-guide__price-card,
html.pp-photo-premium-active .pp-ai-guide__feature,
html.pp-photo-premium-active .pp-ai-guide__usecase,
html.pp-photo-premium-active .pp-ai-guide__faq-item,
html.pp-photo-premium-active .pp-zero-click-answer {
  background: var(--wc-white);
  border: 1px solid var(--wc-line);
  border-radius: 2px;
  box-shadow: none;
  color: var(--wc-ink);
}
html.pp-photo-premium-active .pp-photo-hub__card:hover,
html.pp-photo-premium-active .pp-photo-tools-card:hover,
html.pp-photo-premium-active .pp-photo-knowledge-card:hover { border-color: var(--wc-gold); }
html.pp-photo-premium-active .pp-ai-guide__price-card--featured {
  border-color: var(--wc-gold);
  box-shadow: inset 0 0 0 1px var(--wc-gold);
}
html.pp-photo-premium-active .pp-photo-ugc-item,
html.pp-photo-premium-active .pp-photo-hub__card-media { border-radius: 2px; }

/* Before/after slider: warm letterbox instead of black bars */
html.pp-photo-premium-active .pp-pp-ba__slider,
html.pp-photo-premium-active .pp-pp-ba__slider img {
  background: #ebe7dc;
  border-radius: 2px;
}

/* Hub tabs */
html.pp-photo-premium-active .pp-photo-hub__tab {
  background: transparent;
  color: var(--wc-ink);
  border: 1px solid var(--wc-line);
  border-radius: 2px;
}
html.pp-photo-premium-active .pp-photo-hub__tab[aria-selected="true"],
html.pp-photo-premium-active .pp-photo-hub__tab.is-active {
  background: var(--wc-ink);
  color: var(--wc-white);
  border-color: var(--wc-ink);
}

/* Buttons: ink fill / outline; one radius, no glow */
html.pp-photo-premium-active .pp-pp__btn,
html.pp-photo-premium-active .pp-pp-frames__cta,
html.pp-photo-premium-active .pp-photo-samples__btn,
html.pp-photo-premium-active .pp-photo-samples__cta,
html.pp-photo-premium-active .pp-ai-guide__cta {
  border-radius: 2px;
  font-family: var(--wc-sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: none;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
html.pp-photo-premium-active .pp-pp__btn:not(.pp-pp__btn--outline),
html.pp-photo-premium-active .pp-pp-frames__cta,
html.pp-photo-premium-active .pp-photo-samples__btn {
  background: var(--wc-ink);
  background-image: none;
  color: var(--wc-white);
  border: 1px solid var(--wc-ink);
}
html.pp-photo-premium-active .pp-pp__btn--outline {
  background: transparent;
  color: var(--wc-ink);
  border: 1px solid var(--wc-ink);
}
html.pp-photo-premium-active .pp-pp__btn:hover,
html.pp-photo-premium-active .pp-pp-frames__cta:hover,
html.pp-photo-premium-active .pp-photo-samples__btn:hover { transform: translateY(-1px); }
html.pp-photo-premium-active .pp-pp-ready__cta,
html.pp-photo-premium-active .pp-photo-cross-cta,
html.pp-photo-premium-active .pp-ai-guide__cta-band .pp-ai-guide__cta {
  background: var(--wc-white);
  background-image: none;
  color: var(--wc-ink);
  border-radius: 2px;
  box-shadow: none;
}
html.pp-photo-premium-active .pp-pp-ready__cta-shine { display: none; }

/* Knowledge / guide long-form: readable measure, serif headings */
html.pp-photo-premium-active .pp-ai-guide,
html.pp-photo-premium-active .pp-photo-knowledge,
html.pp-photo-premium-active .pp-photo-tools,
html.pp-photo-premium-active .pp-photo-hub { font-family: var(--wc-sans); color: var(--wc-ink); }
html.pp-photo-premium-active .pp-ai-guide p,
html.pp-photo-premium-active .pp-photo-knowledge p { max-width: 72ch; line-height: 1.7; }
html.pp-photo-premium-active .pp-photo-hub h2,
html.pp-photo-premium-active .pp-photo-tools h2,
html.pp-photo-premium-active .pp-photo-knowledge h2,
html.pp-photo-premium-active .pp-ai-guide h2,
html.pp-photo-premium-active .pp-ai-guide h3 {
  font-family: var(--wc-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
}
html.pp-photo-premium-active .pp-ai-guide__hero h2,
html.pp-photo-premium-active .pp-ai-guide__hero p { color: var(--wc-white); }

/* Motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
  html.pp-photo-premium-active .pp-pp__btn,
  html.pp-photo-premium-active .pp-pp-frames__cta,
  html.pp-photo-premium-active .pp-photo-samples__btn,
  html.pp-photo-premium-active .pp-photo-hub__card,
  html.pp-photo-premium-active .pp-photo-upload-cta { transition: none; transform: none; }
}

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 767px) {
  html.pp-photo-premium-active { --wc-section-pad: 48px; }
  html.pp-photo-premium-active [class*="pp-pp-"] h2 { font-size: clamp(28px, 8vw, 36px); }
  html.pp-photo-premium-active #pp-photo-pricing { padding: 40px 0; }
  html.pp-photo-premium-active .pp-pp__btn,
  html.pp-photo-premium-active .pp-pp-frames__cta,
  html.pp-photo-premium-active .pp-pp-ready__cta { min-height: 48px; }
}

/* Focus visibility ------------------------------------------------------- */
html.pp-photo-premium-active .pp-photo-premium a:focus-visible,
html.pp-photo-premium-active .pp-photo-premium button:focus-visible,
html.pp-photo-premium-active #pp-photo-pricing a:focus-visible,
html.pp-photo-premium-active #pp-photo-pricing button:focus-visible {
  outline: 3px solid var(--wc-gold);
  outline-offset: 3px;
}