/*
Theme Name: Pixel Print Co.
Theme URI: https://pixelprintco.ca
Author: Pixel Print Co.
Description: A WooCommerce-ready storefront theme for Pixel Print Co., an online print shop for business cards, flyers, brochures, stickers and stationery. Built around an upload-and-print hero, paper-stock swatch cards and print-job docket styling.
Version: 14.11.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pixel-print-co
Tags: e-commerce, woocommerce, custom-colors, custom-logo, custom-menu, featured-images, translation-ready

Pixel Print Co. is a proprietary theme built for this store.
*/

/* =========================================================
   ENTRANCE SPLASH SCREEN — plays once per browser session (see the
   inline script in header.php). Two logo images sit stacked exactly
   on top of each other: a plain white silhouette underneath, and the
   full-colour logo on top with a clip-path that reveals it bottom-to-
   top as ppc-splash-active gets a class further down — the "hourglass
   filling with colour" effect.
   ========================================================= */
.ppc-splash{
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
}
/* Shows the instant html.ppc-splash-active is set — which happens
   synchronously in the inline script at the very top of <body>,
   before the browser has parsed (let alone painted) any of the
   actual page content below it. This is what makes it appear from
   the first frame instead of a beat after the page does: visibility
   no longer waits on .is-active, which used to only get added once
   the WHOLE page finished loading (DOMContentLoaded) — on anything
   less than an instant load, that gap was exactly the page-flashes-
   first-then-splash-appears behaviour this fixes. .is-active is now
   only what kicks off the colour-fill animation once the DOM's
   actually ready for it, not what controls whether the overlay is
   visible at all. */
html.ppc-splash-active .ppc-splash{
  opacity: 1;
  pointer-events: auto;
}
.ppc-splash.is-leaving{
  opacity: 0;
  transition: opacity .5s ease;
}
html.ppc-splash-active, html.ppc-splash-active body{
  overflow: hidden; /* no background scroll while it plays */
}
.ppc-splash-logo-wrap{
  position: relative;
  width: min(60vw, 320px);
}
.ppc-splash-logo{
  display: block;
  width: 100%;
  height: auto;
}
.ppc-splash-logo--white{
  /* Same logo-white.png file, but on this light background a WHITE
     silhouette would just disappear — invert() flips its white
     pixels to near-black (alpha/transparency is untouched by invert,
     so the shape itself is unaffected), giving a dark, visible "not
     filled in yet" outline instead, without needing a second image
     file for this one colour swap. */
  filter: invert(1);
  opacity: .13;
}
.ppc-splash-logo--color{
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0); /* fully hidden — the "sand" hasn't filled in yet */
}
.ppc-splash.is-active .ppc-splash-logo--color{
  animation: ppc-splash-fill 1.1s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes ppc-splash-fill{
  to{ clip-path: inset(0% 0 0 0); } /* fills from the bottom up, like sand settling in an hourglass */
}
@media (prefers-reduced-motion: reduce){
  .ppc-splash-logo--color{ animation: none !important; clip-path: inset(0% 0 0 0) !important; }
}

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  /* -- base surfaces (paper / ink) -- */
  --ink:            #0B0B0F;
  --ink-soft:       #2A2A33;
  --paper:          #FAFAF7;
  --paper-dim:      #F1EFE8;
  --paper-line:     #E4E0D6;
  --kraft:          #E8DCC8;

  /* -- brand gradient stops, pulled from the Pixel Print Co. mark -- */
  --pixel-blue:     #2E6FF2;
  --pixel-violet:   #6E2FF2;
  --pixel-magenta:  #E31C79;
  --pixel-orange:   #FF7A1A;
  --pixel-green:    #3FA746;

  --brand-gradient: linear-gradient(100deg, var(--pixel-blue) 0%, var(--pixel-violet) 28%, var(--pixel-magenta) 55%, var(--pixel-orange) 80%, var(--pixel-green) 100%);

  /* -- semantic -- */
  --accent:         var(--pixel-magenta);
  --success:        var(--pixel-green);
  --price:          var(--ink);

  /* -- type -- */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* -- scale -- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --container: 1240px;

  --shadow-card: 0 1px 2px rgba(11,11,15,.06), 0 8px 24px rgba(11,11,15,.05);
  --shadow-lift: 0 18px 40px rgba(11,11,15,.14);
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }

.screen-reader-text{
  position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important;
  white-space:nowrap !important; border:0 !important; padding:0 !important; margin:-1px !important;
}
/* The link is meant to become visible on focus (that's the whole point
   of a "skip to content" link — a keyboard user tabbing through the
   page needs to actually SEE it to use it) but this was hiding it with
   the exact same styles as the base, unfocused state, so it never
   worked as intended either way. Separately: the OLD `clip: rect(1px,
   1px,1px,1px)` technique above (now replaced with the modern
   equivalent, clip-path, kept alongside it for older-browser
   fallback) is known to render unreliably in combination with some
   scroll/transform effects in a few browsers — occasionally leaving
   the element visibly un-clipped, which is what was showing up above
   the logo while scrolling.
   :focus-visible ONLY (not plain :focus) is deliberate: the
   back-to-top button (see onClick() in main.js) programmatically
   calls .focus() on this exact link after scrolling, as its own
   separate, pre-existing accessibility behaviour — moving keyboard
   focus back to the top of the page to match where the view just
   jumped to. Two attempts at telling that apart from a genuine
   keyboard Tab using :focus-visible didn't hold up across browsers —
   desktop worked, but mobile's looser heuristics for what counts as
   "visible" focus after a touch interaction kept showing it anyway
   even with an explicit override class. Replacing the browser's
   guess with one this theme controls entirely removes that
   inconsistency instead of chasing it further: body.ppc-is-tabbing
   (toggled in main.js — on for a real Tab keypress, off on the next
   mouse or touch interaction) is now what decides "was this really a
   keyboard user", not :focus-visible, so it can't vary by platform. */
.screen-reader-text:focus{
  outline:none !important; /* the visible treatment below is the actual indicator; suppress the browser's separate default outline so it doesn't flash for the silent programmatic-focus case */
}
body.ppc-is-tabbing .screen-reader-text:focus{
  position:fixed !important;
  top:8px !important; left:8px !important;
  width:auto !important; height:auto !important;
  overflow:visible !important;
  clip:auto !important; clip-path:none !important;
  white-space:normal !important;
  padding:10px 18px !important; margin:0 !important;
  background: var(--ink) !important;
  color:#fff !important;
  font-family: var(--font-mono) !important;
  font-size:.82rem !important;
  border-radius: 6px !important;
  z-index: 99999 !important;
  outline:none !important;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--pixel-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1em; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  background: var(--brand-gradient);
  border-radius:1px;
  display:inline-block;
}

.gradient-text{
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   SIGNATURE ELEMENT: crop / registration marks
   Used at section corners as a structural device — echoes
   real print-production crop marks & registration targets.
   ========================================================= */
.crop{
  position:relative;
}
.crop::before, .crop::after{
  content:"";
  position:absolute;
  width:16px; height:16px;
  pointer-events:none;
  background:
    linear-gradient(var(--ink-soft), var(--ink-soft)) center/1px 100% no-repeat,
    linear-gradient(90deg, var(--ink-soft), var(--ink-soft)) center/100% 1px no-repeat;
  opacity:.35;
}
.crop::before{ top:-8px; left:-8px; }
.crop::after{ bottom:-8px; right:-8px; }

.reg-mark{
  display:inline-block;
  width:14px; height:14px;
  border-radius:50%;
  border:1px solid currentColor;
  position:relative;
  opacity:.5;
  flex:none;
}
.reg-mark::before, .reg-mark::after{
  content:"";
  position:absolute;
  background:currentColor;
}
.reg-mark::before{ top:50%; left:-4px; right:-4px; height:1px; transform:translateY(-50%); }
.reg-mark::after{ left:50%; top:-4px; bottom:-4px; width:1px; transform:translateX(-50%); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding: .85em 1.6em;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-primary{
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-gradient{
  background: var(--brand-gradient);
  color:#fff;
}
.btn-gradient:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-outline{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover{ background: var(--ink); color: var(--paper); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: rgba(250,250,247,.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--paper-line);
}
.header-utility{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--paper-line);
}
.header-utility .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:8px; padding-bottom:8px;
  gap: 16px;
  flex-wrap: wrap;
}
.header-utility a:hover{ color: var(--pixel-magenta); }
.header-utility-links{ display:flex; gap:18px; }

/* Smart Sign In / User link */
.header-signin,
.header-user-link,
.header-signout{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s ease;
}
.header-signin svg,
.header-user-link svg{
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.header-signin:hover,
.header-user-link:hover{
  color: var(--pixel-magenta);
}
.header-signin:hover svg,
.header-user-link:hover svg{
  opacity: 1;
}
.header-user-link{
  font-weight: 500;
}
.header-user-link::before{
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pixel-green);
  box-shadow: 0 0 0 2px rgba(63,167,70,.2);
  margin-right: -2px;
  animation: ppcUserPulse 2s ease-in-out infinite;
}
@keyframes ppcUserPulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.5; }
}
.header-signout{
  font-size: 0.85em;
  opacity: 0.7;
  padding-left: 8px;
  border-left: 1px solid currentColor;
  margin-left: 2px;
}
.header-signout:hover{
  opacity: 1;
}

.header-main .container{
  display:flex;
  align-items:center;
  gap: 28px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.site-branding{ display:flex; align-items:center; gap:10px; flex:none; }
.site-branding img{ height:40px; width:auto; }
.site-branding .logo-fallback{
  font-family: var(--font-display); font-weight:700; font-size:1.3rem;
}
.site-branding .logo-fallback .fx{ color: var(--ink); }

.primary-nav{ flex:1; }
.primary-nav > ul{ display:flex; align-items:center; gap: 26px; }
.primary-nav > ul > li{ position:relative; }
.primary-nav > ul > li > a{
  font-family: var(--font-display);
  font-weight:600;
  font-size: .95rem;
  padding: 10px 0;
  display:inline-block;
  position:relative;
}
.primary-nav > ul > li > a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:6px; height:2px;
  background: var(--brand-gradient);
  transition: right .18s ease;
}
.primary-nav > ul > li:hover > a::after,
.primary-nav > ul > li.current-menu-item > a::after{ right:0; }

.primary-nav ul ul{
  position:absolute; top:100%; left:0;
  background: var(--paper);
  border:1px solid var(--paper-line);
  box-shadow: var(--shadow-card);
  min-width: 220px;
  padding: 8px;
  border-radius: var(--radius-md);
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: all .15s ease;
  z-index: 40;
}
.primary-nav li:hover > ul{ opacity:1; visibility:visible; transform:translateY(0); }
.primary-nav ul ul li a{
  display:block; padding: 8px 10px; font-size:.92rem; border-radius: var(--radius-sm);
}
.primary-nav ul ul li a:hover{ background: var(--paper-dim); color: var(--pixel-magenta); }

.header-actions{ display:flex; align-items:center; gap:18px; flex:none; }
.header-icon-link{
  display:flex; align-items:center; gap:6px;
  font-family: var(--font-mono); font-size:.78rem;
}
.header-icon-link svg{ width:20px; height:20px; }

/* -------- Header live search (icon + dropdown panel) -------- */
.header-search{ position:relative; }
.header-search-toggle{
  background:none; border:none; padding:0; margin:0;
  font:inherit; color:inherit; cursor:pointer;
}
.header-search-panel{
  position:absolute; top:calc(100% + 14px); right:0;
  width:min(400px, 92vw);
  background: var(--paper);
  border:1px solid var(--paper-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding:14px;
  z-index: 70;
}
.header-search-panel .ppc-shop-search{ max-width:none; }
.header-search-panel .ppc-shop-search-results{ position:relative; top:auto; left:auto; right:auto; margin-top:10px; }
[dir="rtl"] .header-search-panel{ right:auto; left:0; }

.cart-count{
  background: var(--pixel-magenta); color:#fff;
  font-family: var(--font-mono); font-size:.65rem;
  border-radius:50%; width:16px; height:16px;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; top:-8px; left:-6px;
}
.menu-toggle{
  display:none;
  background:none; border:none;
  flex-direction:column; gap:5px;
  padding:6px;
}
.menu-toggle span{ width:22px; height:2px; background:var(--ink); display:block; }

@media (max-width: 900px){
  .primary-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .header-utility-links a:nth-child(n+3):not(.header-signin):not(.header-user-link):not(.header-signout){ display:none; }
}

/* =========================================================
   HERO — upload & print dropzone
   ========================================================= */
.hero{
  position:relative;
  padding: 64px 0 84px;
  overflow:hidden;
  border-bottom: 1px solid var(--paper-line);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 90% 60% at 30% 20%, black, transparent 75%);
  opacity:.55;
  pointer-events:none;
}
.hero .container{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items:center;
}
.hero-copy h1{ margin-bottom:.4em; }
.hero-copy .lede{ font-size:1.1rem; color: var(--ink-soft); max-width:46ch; }
.hero-cta-row{ display:flex; gap:14px; margin-top: 28px; flex-wrap:wrap; }
.hero-trust{
  margin-top: 34px;
  display:flex; gap: 26px; flex-wrap:wrap;
  font-family: var(--font-mono); font-size:.76rem; color: var(--ink-soft);
}
.hero-trust li{ display:flex; align-items:center; gap:9px; }
/* Was a plain "—" dash before each item — small coloured icon
   badges instead, one shape per benefit, so each point reads at a
   glance instead of blending into the row. */
.hero-trust-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  flex: none;
}

/* dropzone + docket */
.upload-card{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  overflow:hidden;
  position:relative;
}
.upload-card-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 18px;
  border-bottom: 1px dashed var(--paper-line);
  font-family: var(--font-mono); font-size:.72rem; color: var(--ink-soft);
}
.upload-card-head .dot-row{ display:flex; gap:6px; }
.upload-card-head .dot-row span{ width:8px; height:8px; border-radius:50%; background:var(--paper-line); }

.dropzone{
  margin: 20px;
  border: 1.5px dashed #C9C3B4;
  border-radius: var(--radius-md);
  padding: 34px 20px;
  text-align:center;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone.is-dragover{ border-color: var(--pixel-magenta); background: var(--paper-dim); }
.dropzone-icon{
  width:44px; height:44px; margin:0 auto 14px;
  border-radius:50%;
  background: var(--brand-gradient);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.dropzone strong{ font-family: var(--font-display); display:block; margin-bottom:4px; }
.dropzone small{ color: var(--ink-soft); font-size:.82rem; }
.dropzone input[type=file]{ display:none; }
.dropzone .browse-btn{ margin-top:16px; }

.quick-quote-form{
  margin: 20px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.quick-quote-form .btn{ grid-column: 1 / -1; }
.qq-field{ display:flex; flex-direction:column; gap:6px; font-family: var(--font-mono); font-size:.72rem; color: var(--ink-soft); }
.qq-field select{
  padding: .65em .7em;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--ink);
}

.docket{
  margin: 0 20px 20px;
  border-top: 1px dashed var(--paper-line);
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: .82rem;
}
.docket-row{
  display:flex; justify-content:space-between;
  padding: 5px 0;
  color: var(--ink-soft);
}
.docket-row strong{ color: var(--ink); font-weight:600; }
.docket-total{
  display:flex; justify-content:space-between;
  margin-top:10px; padding-top:10px;
  border-top:1px solid var(--paper-line);
  font-family: var(--font-display); font-size:1rem; font-weight:700;
}

/* =========================================================
   HERO SLIDESHOW — promotional image carousel
   Replaces the old "quick estimate" card on the homepage.
   Crossfade between slides, 5s autoplay, pause on hover,
   manual dots + arrows, full-bleed image with text overlay.
   ========================================================= */
.ppc-slideshow{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--paper-line);
  isolation: isolate;
}
.ppc-slideshow-track{
  position: absolute; inset: 0;
  overflow: hidden;
}
.ppc-slide{
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s cubic-bezier(.4,0,.2,1), visibility .8s;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.ppc-slide.is-active{
  opacity: 1; visibility: visible;
  z-index: 2;
}
.ppc-slide-bg{
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 6s ease-out;
}
.ppc-slide.is-active .ppc-slide-bg{ transform: scale(1); }
.ppc-slide-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,15,0) 0%, rgba(11,11,15,0) 40%, rgba(11,11,15,.85) 100%),
    linear-gradient(45deg, color-mix(in srgb, var(--g1) 20%, transparent) 0%, transparent 50%);
  z-index: 1;
}
.ppc-slide-badge{
  position: absolute; top: 18px; left: 18px;
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.06em;
  font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  background: var(--paper); color: var(--ink);
  z-index: 3;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.ppc-slide-content{
  position: relative; z-index: 2;
  padding: 28px 28px 36px;
  color: var(--paper);
}
.ppc-slide-eyebrow{
  display: inline-block;
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.12em;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  margin-bottom: 14px;
}
.ppc-slide-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin: 0 0 10px;
  max-width: 18ch;
}
.ppc-slide-desc{
  font-size: .92rem; line-height: 1.5;
  color: rgba(250,250,247,.85);
  margin: 0 0 18px;
  max-width: 32ch;
}
.ppc-slide-cta{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--paper); color: var(--ink);
  border-radius: 4px;
  font-family: var(--font-display); font-weight: 600; font-size:.9rem;
  text-decoration: none;
  transition: transform .15s, background .15s;
}
.ppc-slide-cta:hover{ transform: translateX(2px); background: var(--paper-dim); }
.ppc-slide-cta svg{ transition: transform .2s; }
.ppc-slide-cta:hover svg{ transform: translateX(3px); }

/* Stagger content fade-in for the active slide */
.ppc-slide.is-active .ppc-slide-eyebrow{ animation: ppcSlideIn .6s .1s both; }
.ppc-slide.is-active .ppc-slide-title{ animation: ppcSlideIn .6s .2s both; }
.ppc-slide.is-active .ppc-slide-desc{ animation: ppcSlideIn .6s .3s both; }
.ppc-slide.is-active .ppc-slide-cta{ animation: ppcSlideIn .6s .4s both; }
@keyframes ppcSlideIn{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Navigation arrows */
.ppc-slideshow-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  background: rgba(11,11,15,.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  transition: opacity .2s, background .2s, transform .2s;
}
.ppc-slideshow:hover .ppc-slideshow-arrow{ opacity: 1; }
.ppc-slideshow-prev{ left: 14px; }
.ppc-slideshow-next{ right: 14px; }
.ppc-slideshow-prev:hover{ transform: translateY(-50%) translateX(-2px); }
.ppc-slideshow-next:hover{ transform: translateY(-50%) translateX(2px); }
.ppc-slideshow-arrow:hover{ background: rgba(11,11,15,.7); }

/* Dots */
.ppc-slideshow-dots{
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 4;
  padding: 4px 8px;
  background: rgba(11,11,15,.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
}
.ppc-slideshow-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: 0; padding: 0;
  cursor: pointer;
  transition: all .25s ease;
}
.ppc-slideshow-dot:hover{ background: rgba(255,255,255,.7); }
.ppc-slideshow-dot.is-active{
  width: 24px; border-radius: 4px;
  background: var(--paper);
}

/* Progress bar (autoplay indicator) */
.ppc-slideshow-progress{
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,.12);
  z-index: 3;
}
.ppc-slideshow-progress-bar{
  height: 100%; width: 0;
  background: var(--paper);
  transition: width .1s linear;
}

/* Hide progress on mobile to keep things minimal */
@media (max-width: 768px){
  .ppc-slideshow{ aspect-ratio: 4 / 5; }
  .ppc-slideshow-arrow{ display: none; }
}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust-strip{
  background: var(--ink);
  color: var(--paper);
}
.trust-strip .container{
  display:flex; flex-wrap:wrap; gap: 10px 30px;
  justify-content:center;
  padding: 16px 24px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing:.03em;
}
.trust-strip li{ display:flex; align-items:center; gap:8px; opacity:.9; }
.trust-strip li::before{ content:""; width:6px; height:6px; background: var(--pixel-green); border-radius:50%; }

/* =========================================================
   SECTION SCAFFOLDING
   ========================================================= */
.section{ padding: 76px 0; }
.section-alt{ background: var(--paper-dim); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: 20px; margin-bottom: 40px; flex-wrap:wrap;
}
.section-head h2{ margin-bottom:.25em; }
.section-head .lede{ color: var(--ink-soft); max-width:52ch; }

/* =========================================================
   CATEGORY / STOCK SWATCH CARDS
   ========================================================= */
.category-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.category-card{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 22px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;
}
.category-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: transparent; }
.category-swatch{
  width:100%; height:96px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  position:relative;
  overflow:hidden;
}
.category-swatch::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 140% at 15% 15%, rgba(255,255,255,.22), transparent 55%);
  pointer-events:none;
}
.category-icon{
  display:block;
  width:38px; height:38px;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  opacity:.95;
  z-index:1;
  transition: transform .18s ease;
}
.category-card:hover .category-icon{ transform: translate(-50%,-50%) scale(1.08); }
.category-card h3{ margin-bottom:.2em; }
.category-meta{
  font-family: var(--font-mono); font-size:.72rem; color: var(--ink-soft);
  display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;
}
.category-meta span{ background: var(--paper-dim); padding:2px 7px; border-radius:20px; }
.category-price{ margin-top:14px; font-family:var(--font-display); font-weight:700; }
.category-price small{ font-family:var(--font-mono); font-weight:400; color:var(--ink-soft); }

/* =========================================================
   PRODUCTS GRID (WooCommerce + custom fallback)
   ========================================================= */
.products-grid, ul.products{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  list-style:none !important; margin:0 !important; padding:0 !important;
  align-items: stretch !important;
}
/* Strip WooCommerce core's legacy float-clearfix pseudo-elements —
   see the matching note in shop-modern.css. Without this, ::before
   becomes an invisible first grid item and pushes every real product
   in the first row one column to the right. */
.products-grid::before, .products-grid::after,
ul.products::before, ul.products::after{
  content: none !important;
  display: none !important;
}
.product-card, ul.products li.product{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  overflow:hidden;
  transition: box-shadow .18s ease, transform .18s ease;
  position:relative;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.product-card:hover, ul.products li.product:hover{ box-shadow: var(--shadow-card); transform: translateY(-3px); }
.product-thumb{
  aspect-ratio: 4/3;
  background: var(--paper-dim);
  position:relative;
  overflow:hidden;
}
.product-thumb img{ width:100%; height:100%; object-fit:cover; }

.product-quick-actions{
  position:absolute; top:10px; right:10px;
  display:flex; flex-direction:column; gap:8px;
  opacity:0; transform: translateX(6px);
  transition: opacity .15s ease, transform .15s ease;
}
.product-card:hover .product-quick-actions, ul.products li.product:hover .product-quick-actions{ opacity:1; transform:translateX(0); }
.pqa-btn{
  width:34px; height:34px; border-radius:50%;
  background: var(--paper); border:1px solid var(--paper-line);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink); box-shadow: var(--shadow-card);
}
.pqa-btn:hover{ background: var(--ink); color:#fff; }
.ppc-wishlist-btn.is-active{ color: var(--pixel-magenta); border-color: var(--pixel-magenta); }

.product-rating{ display:flex; align-items:center; gap:6px; margin: 4px 0 8px; }
.product-rating .stars{
  position:relative; display:inline-block; letter-spacing:2px; font-size:.82rem; color:#DDD8C8;
}
.product-rating .stars::before{
  content:"★★★★★"; position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap;
  width: calc(var(--rating, 0) / 5 * 100%); color:#FFB300;
}
.product-rating .rating-count{ font-family: var(--font-mono); font-size:.7rem; color: var(--ink-soft); }
.product-info .price .from-label{ font-family: var(--font-mono); font-size:.68rem; font-weight:400; color: var(--ink-soft); text-transform:uppercase; }

.product-badge{
  position:absolute; top:10px; left:10px;
  font-family: var(--font-mono); font-size:.65rem; letter-spacing:.04em;
  background: var(--ink); color:var(--paper);
  padding: 3px 8px; border-radius: 20px;
}
.product-badge.new{ background: var(--brand-gradient); }
.product-info{ padding: 16px; }
.product-info .cat-label{
  font-family: var(--font-mono); font-size:.68rem; color: var(--ink-soft);
  text-transform:uppercase; letter-spacing:.06em;
}
.product-info h3{ font-size: 1rem; margin: .3em 0; }
.product-info .price{
  font-family: var(--font-display); font-weight:700; color: var(--price);
}
.product-info .price small{ font-family:var(--font-mono); font-weight:400; color:var(--ink-soft); }
.product-info .btn{ margin-top:12px; width:100%; padding:.7em 1em; font-size:.85rem; }

.why-us-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.why-us-card{
  border: 1px solid var(--paper-line); border-radius: var(--radius-md);
  padding: 24px 18px; text-align:left;
}
.why-us-icon{
  width:44px; height:44px; border-radius:50%;
  background: var(--brand-gradient); color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 16px;
}
.why-us-card h3{ font-size:1rem; margin-bottom:.35em; }
.why-us-card p{ font-size:.86rem; color: var(--ink-soft); margin:0; }

/* =========================================================
   PROCESS (real sequence — numbering justified)
   ========================================================= */
.process-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 30px;
  counter-reset: step;
}
.process-step{ position:relative; padding-left: 54px; }
.process-step::before{
  counter-increment: step;
  content: "0" counter(step);
  position:absolute; left:0; top:-6px;
  font-family: var(--font-mono); font-size:1.6rem; font-weight:700;
  background: var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.process-step h3{ margin-bottom:.3em; }
.process-step p{ color: var(--ink-soft); font-size:.94rem; }

/* =========================================================
   STOCK / FINISH SWATCH STRIP
   ========================================================= */
.swatch-strip{ display:grid; grid-template-columns: repeat(5,1fr); gap:16px; }
.swatch-chip{
  border:1px solid var(--paper-line); border-radius: var(--radius-md);
  padding: 18px 14px; text-align:center; background: var(--paper);
}
.swatch-chip .swatch-dot{
  width:38px; height:38px; border-radius:50%; margin:0 auto 10px;
  border: 1px solid rgba(0,0,0,.08);
}
.swatch-chip strong{ display:block; font-family:var(--font-display); font-size:.88rem; }
.swatch-chip span{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink-soft); }

/* ---------------- Homepage interactive services showcase ----------------
   Replaced the brand-reel video (see front-page.php / initShowcase() in
   main.js). Panels are stacked in one CSS grid cell, so the stage always
   takes the height of its tallest panel with no JS measuring and no
   layout jump when the slide changes. Every entrance animation is keyed
   off .js-ready + .is-live, so without JavaScript the first panel simply
   shows up fully visible instead of stuck mid-animation. */
.ppc-showcase{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.ppc-showcase-tabs{
  display: flex; gap: 6px;
  padding: 10px;
  border-bottom: 1px solid var(--paper-line);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ppc-showcase-tabs::-webkit-scrollbar{ display: none; }
.ppc-showcase-tab{
  position: relative;
  flex: 1 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px 13px;
  border: none; border-radius: 999px;
  background: transparent;
  font-family: var(--font-display);
  font-size: .86rem;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: background .2s ease, color .2s ease;
}
.ppc-showcase-tab:hover{ color: var(--ink); background: var(--paper-dim); }
.ppc-showcase-tab.is-active{ color: var(--ink); background: var(--paper-dim); background: color-mix(in srgb, var(--c) 12%, transparent); }
.ppc-showcase-tab:focus-visible{ outline: 2px solid var(--c); outline-offset: 2px; }
.ppc-showcase-tab-num{ font-family: var(--font-mono); font-size: .72rem; color: var(--c); }
.ppc-showcase-tab-progress{
  position: absolute; left: 16px; right: 16px; bottom: 5px;
  height: 3px; border-radius: 3px;
  background: var(--c);
  transform: scaleX(0); transform-origin: left center;
}
.ppc-showcase.is-live .ppc-showcase-tab.is-active .ppc-showcase-tab-progress{
  animation: ppc-sc-progress var(--sc-dur, 5.5s) linear forwards;
}
.ppc-showcase.is-paused .ppc-showcase-tab-progress,
.ppc-showcase.is-offscreen .ppc-showcase-tab-progress{ animation-play-state: paused !important; }
@keyframes ppc-sc-progress{ to{ transform: scaleX(1); } }

.ppc-showcase-stage{
  position: relative;
  display: grid;
  padding: 30px;
}
.ppc-showcase-panel{
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 36px;
  align-items: center;
  opacity: 0; visibility: hidden;
}
.ppc-showcase-panel.is-active{ opacity: 1; visibility: visible; }

.ppc-showcase-pill{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
}
.ppc-showcase-pill b{ font-weight: 600; opacity: .75; }
.ppc-showcase-title{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.08;
  margin: 16px 0 16px;
}
.ppc-showcase-line{ display: block; }
.ppc-showcase-line.is-accent{ color: var(--c); }
.ppc-showcase-title .w{ display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.ppc-showcase-title .w > span{ display: inline-block; }
.ppc-showcase-chips{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ppc-showcase-chips li{
  padding: 6px 14px;
  border: 1.5px solid var(--c);
  border-radius: 999px;
  background: #fff;
  font-size: .82rem;
  color: var(--ink);
}
.ppc-showcase-cta{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--c);
  text-decoration: none;
}
.ppc-showcase-cta svg{ transition: transform .2s ease; }
.ppc-showcase-cta:hover svg{ transform: translateX(4px); }
.ppc-showcase-media{
  position: relative; display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-dim);
  box-shadow: 0 0 0 3px var(--c), 0 22px 44px rgba(20,20,40,.16);
}
.ppc-showcase-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ppc-showcase-pixels{ position: absolute; top: 14px; right: 14px; width: 70px; height: 70px; pointer-events: none; }
.ppc-showcase-pixels i{ position: absolute; display: block; background: var(--c); border-radius: 2px; }
.ppc-showcase-pixels i:nth-child(1){ width: 22px; height: 22px; right: 0; top: 0; }
.ppc-showcase-pixels i:nth-child(2){ width: 14px; height: 14px; right: 28px; top: 6px; background: var(--pixel-orange); }
.ppc-showcase-pixels i:nth-child(3){ width: 12px; height: 12px; right: 6px; top: 28px; background: #fff; }
.ppc-showcase-pixels i:nth-child(4){ width: 9px; height: 9px; right: 44px; top: 26px; }
.ppc-showcase-pixels i:nth-child(5){ width: 7px; height: 7px; right: 24px; top: 46px; background: var(--pixel-orange); }

/* -------- entrance choreography (JS only) -------- */
.ppc-showcase.js-ready .ppc-showcase-panel{ transition: opacity .3s ease, visibility 0s linear .3s; }
.ppc-showcase.js-ready .ppc-showcase-panel.is-active{ transition: opacity .3s ease; }
.ppc-showcase.js-ready .ppc-showcase-pill{ opacity: 0; transform: translateX(-24px); }
.ppc-showcase.js-ready .ppc-showcase-title .w > span{ transform: translateY(110%); }
.ppc-showcase.js-ready .ppc-showcase-chips li{ opacity: 0; transform: scale(.6); }
.ppc-showcase.js-ready .ppc-showcase-cta{ opacity: 0; transform: translateY(10px); }
.ppc-showcase.js-ready .ppc-showcase-media{ opacity: 0; transform: translateY(26px) scale(.95); }
.ppc-showcase.js-ready .ppc-showcase-pixels i{ transform: scale(0); }

.ppc-showcase.is-live .ppc-showcase-panel.is-active .ppc-showcase-pill{ opacity: 1; transform: none; transition: opacity .4s ease .1s, transform .5s cubic-bezier(.2,.8,.2,1) .1s; }
.ppc-showcase.is-live .ppc-showcase-panel.is-active .ppc-showcase-title .w > span{ transform: none; transition: transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 70ms + 180ms); }
.ppc-showcase.is-live .ppc-showcase-panel.is-active .ppc-showcase-chips li{ opacity: 1; transform: none; transition: opacity .3s ease calc(var(--i) * 90ms + 560ms), transform .45s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 90ms + 560ms); }
.ppc-showcase.is-live .ppc-showcase-panel.is-active .ppc-showcase-cta{ opacity: 1; transform: none; transition: opacity .4s ease .85s, transform .4s ease .85s; }
.ppc-showcase.is-live .ppc-showcase-panel.is-active .ppc-showcase-media{ opacity: 1; transform: none; transition: opacity .45s ease .15s, transform .75s cubic-bezier(.34,1.35,.64,1) .15s; }
.ppc-showcase.is-live .ppc-showcase-panel.is-active .ppc-showcase-media img{ animation: ppc-sc-kenburns 7s ease-out both; }
.ppc-showcase.is-live .ppc-showcase-panel.is-active .ppc-showcase-pixels i{ transform: none; transition: transform .4s cubic-bezier(.34,1.8,.64,1); }
.ppc-showcase.is-live .ppc-showcase-panel.is-active .ppc-showcase-pixels i:nth-child(1){ transition-delay: .7s; }
.ppc-showcase.is-live .ppc-showcase-panel.is-active .ppc-showcase-pixels i:nth-child(2){ transition-delay: .78s; }
.ppc-showcase.is-live .ppc-showcase-panel.is-active .ppc-showcase-pixels i:nth-child(3){ transition-delay: .86s; }
.ppc-showcase.is-live .ppc-showcase-panel.is-active .ppc-showcase-pixels i:nth-child(4){ transition-delay: .94s; }
.ppc-showcase.is-live .ppc-showcase-panel.is-active .ppc-showcase-pixels i:nth-child(5){ transition-delay: 1.02s; }
@keyframes ppc-sc-kenburns{ from{ transform: scale(1.1); } to{ transform: scale(1); } }

/* -------- pixel wipe between slides (cells built by JS) -------- */
.ppc-showcase-wipe{
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 1fr);
  pointer-events: none;
  z-index: 3;
}
.ppc-showcase-wipe span{ transform: scale(0); }
.ppc-showcase-wipe.is-wiping span{ animation: ppc-sc-wipe .9s ease-in-out both; animation-delay: var(--d); }
@keyframes ppc-sc-wipe{
  0%{ transform: scale(0); }
  35%, 65%{ transform: scale(1.04); }
  100%{ transform: scale(0); }
}

@media (max-width: 820px){
  .ppc-showcase-stage{ padding: 16px; }
  .ppc-showcase-panel{ grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .ppc-showcase-media{ order: -1; }
  .ppc-showcase-tab{ flex: 0 0 auto; padding: 10px 14px 12px; font-size: .82rem; }
  .ppc-showcase-title{ margin: 12px 0; }
  .ppc-showcase-wipe{ grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(9, 1fr); }
}
@media (prefers-reduced-motion: reduce){
  .ppc-showcase *, .ppc-showcase *::before, .ppc-showcase *::after{ animation: none !important; transition: none !important; }
  .ppc-showcase.js-ready .ppc-showcase-panel.is-active *{ opacity: 1 !important; transform: none !important; }
  .ppc-showcase-tab-progress{ display: none; }
}

/* =========================================================
   TESTIMONIALS / CLIENT MARQUEE
   ========================================================= */
.testimonial-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.testimonial-card{
  background:var(--paper); border:1px solid var(--paper-line); border-radius: var(--radius-md);
  padding: 26px;
}
.testimonial-card p{ font-size:1rem; }
.testimonial-card footer{ font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft); }

/* -------- Google Reviews (see ppc_get_google_reviews() in
   functions.php) — the aggregate rating link above the cards, and
   the per-card star rating + "Posted on Google" attribution below
   each quote. -------- */
.ppc-google-rating-summary{
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 22px;
  padding: 8px 14px;
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .84rem;
  color: var(--ink);
  text-decoration: none;
}
.ppc-google-rating-summary:hover{ border-color: var(--ink-soft); }
.ppc-google-rating-summary strong{ font-family: var(--font-display); font-size: .95rem; }
.ppc-google-rating-stars{ color: var(--pixel-orange, #FF7A1A); letter-spacing: 1px; }
.ppc-testimonial-stars{
  color: var(--pixel-orange, #FF7A1A);
  letter-spacing: 2px;
  font-size: .9rem;
  margin-bottom: 10px;
}
.testimonial-card footer{
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.ppc-testimonial-name{ font-weight: 600; color: var(--ink); text-transform: none; }
.ppc-testimonial-google{
  display: inline-flex; align-items: center; gap: 4px;
  opacity: .7;
}

.client-marquee{
  overflow:hidden; border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line);
  padding: 26px 0; margin-top: 60px;
}
/* The track must be as wide as ALL the names (width: max-content), not as
   wide as the screen: the loop slides it by -50% of its own width, and
   when that width was the screen's, a phone only ever slid a few names
   across before jumping back. Spacing is a right margin on every name
   (not flex gap) so both copies of the list are exactly equal and the
   loop joins seamlessly. */
.client-marquee .track{
  display:flex; width: max-content; align-items:center;
  font-family: var(--font-display); font-weight:700; font-size:1.1rem; color: var(--ink-soft);
  white-space:nowrap;
  animation: marquee 26s linear infinite;
}
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.client-marquee .track span{ margin-right: 60px; flex: none; }
@media (prefers-reduced-motion: reduce){ .client-marquee .track{ animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 12px; } }

/* On a narrow phone screen the visible window is much smaller, but the
   animation was moving at the exact same ABSOLUTE speed as on desktop
   (same 26s to cross the same full-width track) — so within any normal
   few-seconds glance, only a handful of names had scrolled past that
   narrow window, which is what read as "only shows a few names and
   repeats" even though the full list was always there. Playing the
   same distance in under half the time, plus tightening the gap so
   more names fit in view at once, is the actual fix — not a rebuild,
   just tuned for how much less horizontal room there is to work with. */
@media (max-width: 640px){
  .client-marquee .track{ font-size: 1rem; }
  .client-marquee .track span{ margin-right: 34px; }
}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-md);
  padding: 56px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-band::after{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  background: var(--brand-gradient); filter: blur(60px); opacity:.5; border-radius:50%;
}
.cta-band h2{ color:#fff; margin-bottom:.2em; position:relative; }
.cta-band p{ color: #C8C6C0; margin:0; position:relative; }
.cta-band .btn{ position:relative; }

/* =========================================================
   BLOG / CONTENT
   ========================================================= */
.post-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.post-card{ border:1px solid var(--paper-line); border-radius: var(--radius-md); overflow:hidden; background:var(--paper); }
.post-card .thumb{ aspect-ratio: 16/10; background:var(--paper-dim); overflow:hidden; }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card .body{ padding:18px; }
.post-card .meta{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft); text-transform:uppercase; }
.post-card h3{ font-size:1.05rem; margin:.4em 0; }
.post-card .excerpt{ color:var(--ink-soft); font-size:.92rem; }

.single-content{ max-width: 760px; margin:0 auto; }
.single-content img{ border-radius: var(--radius-md); }
.single-content h2{ margin-top:1.4em; }
.single-content blockquote{
  border-left:3px solid var(--pixel-magenta); margin:1.6em 0; padding: .2em 0 .2em 1.2em; color:var(--ink-soft); font-style:italic;
}

.page-header{ padding: 48px 0 20px; border-bottom:1px solid var(--paper-line); }
.page-header .eyebrow{ margin-bottom:10px; }


/* WC shortcode product cards — fix image and inner structure */
ul.products li.product a.woocommerce-loop-image-link,
ul.products li.product a img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  aspect-ratio: 4/3 !important;
}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2{
  font-family: var(--font-display);
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  padding: 12px 16px 4px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
ul.products li.product .price{
  padding: 0 16px 12px !important;
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
ul.products li.product .button{
  margin: 0 16px 16px !important;
  display: block !important;
  text-align: center !important;
  padding: 10px 14px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 6px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
}
ul.products li.product .button:hover{
  background: var(--pixel-magenta) !important;
}
/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: var(--ink);
  color: #C8C6C0;
  padding-top: 60px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 30px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand img{ height:34px; filter: brightness(0) invert(1); margin-bottom:14px; }
.footer-brand p{ font-size:.88rem; color:#9A9890; max-width:32ch; }
.footer-col h4{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; margin-bottom:14px;
}
.footer-col ul li{ margin-bottom:9px; }
.footer-col ul li a{ font-size:.88rem; color:#B8B6AE; transition:color .15s; }
.footer-col ul li a:hover{ color:#fff; }
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{
  width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
}
.footer-social a:hover{ background:#fff; color:var(--ink); }

/* ============== FOOTER: PAYMENT CARDS + SQUARE BADGE ============== */

.ppc-trusted-eyebrow{
  font-family: var(--font-mono); font-size: .7rem;
  color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: .14em; text-align: center;
  margin-bottom: 14px;
}

.footer-payment{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 24px;
  padding: 24px 0 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 12px;
}
.footer-payment-cards{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-payment-label{
  font-family: var(--font-mono); font-size: .68rem;
  color: #8B8981; text-transform: uppercase; letter-spacing: .08em;
}
.footer-card-row{ display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cc-card{
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; min-width: 38px;
  border-radius: 4px; overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .15s;
}
.cc-card:hover{ transform: translateY(-1px); }
.cc-card svg{ height: 100%; width: auto; display: block; }

.footer-square-link{ text-decoration: none; color: inherit; }
.footer-square-badge{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  transition: all .2s;
}
.footer-square-badge:hover{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
}
.footer-square-icon{ width: 28px; height: 28px; flex: none; }
.footer-square-text{ display: flex; flex-direction: column; line-height: 1.1; }
.footer-square-eyebrow{
  font-family: var(--font-mono); font-size: .58rem;
  color: #8B8981; text-transform: uppercase; letter-spacing: .08em;
}
.footer-square-name{
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: #fff; margin-top: 1px;
}

.footer-ssl{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .7rem; color: #8B8981;
}
.footer-ssl svg{ color: #3FA746; flex: none; }

.footer-trustpilot{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: .7rem; color: #8B8981;
  text-decoration: none;
  transition: color .15s ease;
}
.footer-trustpilot:hover{ color: var(--ink); }
.footer-trustpilot svg{ flex: none; }

@media (max-width: 768px){
  .footer-payment{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-card-row{ gap: 4px; }
  .cc-card{ height: 22px; min-width: 34px; }
  .footer-square-badge{ padding: 6px 12px 6px 6px; }
  .footer-square-icon{ width: 24px; height: 24px; }
  .footer-square-name{ font-size: .85rem; }
}

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding: 22px 0 30px;
  font-family: var(--font-mono); font-size:.72rem; color:#8B8981;
}
.footer-bottom .payment-icons{ display:flex; gap:8px; opacity:.7; }

/* =========================================================
   CART — two column layout, card-style line items
   ========================================================= */
.cart-layout{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 36px;
  align-items:start;
}
.cart-main{ min-width:0; }
.ppc-cart-items{ display:flex; flex-direction:column; gap:14px; }
.ppc-cart-item{
  display:grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 14px;
  background: var(--paper);
}
.ppc-cart-item-thumb{ border-radius: var(--radius-sm); overflow:hidden; background: var(--paper-dim); }
.ppc-cart-item-thumb img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; }
.ppc-cart-item-name{ font-family: var(--font-display); font-weight:600; margin-bottom:4px; }
.ppc-cart-item-meta{
  font-family: var(--font-mono); font-size:.74rem; color: var(--ink-soft);
  display:flex; flex-direction:column; gap:3px; margin-bottom:10px;
}
.ppc-cart-item-meta dl{ display:flex; gap:6px; margin:0; }
.ppc-cart-item-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ppc-cart-item-qty .quantity{ display:flex; }
.ppc-cart-item-qty input.qty{
  width: 64px; padding: .5em; border:1px solid var(--paper-line); border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight:600; text-align:center; background: var(--paper);
}
.ppc-cart-item-price{ font-family: var(--font-display); font-weight:700; margin-left:auto; }
.ppc-cart-remove{ font-family: var(--font-mono); font-size:.74rem; color: var(--pixel-magenta); }
.ppc-cart-edit{ font-family: var(--font-mono); font-size:.74rem; color: var(--ink-soft); }

.ppc-cart-actions{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--paper-line);
}
.ppc-cart-actions .coupon{ display:flex; gap:8px; flex:1; min-width:220px; }
.ppc-cart-actions .coupon input{
  flex:1; padding: .7em .9em; border:1px solid var(--paper-line); border-radius: var(--radius-sm); background: var(--paper);
}

.cart-collaterals{ position: sticky; top: 90px; }
.cart-collaterals .cart_totals{
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 22px;
}
.cart-collaterals .cart_totals h2{ font-size:1.1rem; margin-bottom:16px; }
.cart-collaterals table.shop_table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.cart-collaterals table.shop_table th, .cart-collaterals table.shop_table td{
  padding: 10px 0; border-bottom: 1px solid var(--paper-line); text-align:left;
}
.cart-collaterals table.shop_table tr:last-child th, .cart-collaterals table.shop_table tr:last-child td{ border-bottom:none; }
.cart-collaterals .order-total .amount{ font-family: var(--font-display); font-weight:700; font-size:1.15rem; }
.cart-collaterals .wc-proceed-to-checkout a.checkout-button{
  display:block; text-align:center; margin-top:16px;
  background: var(--ink); color:var(--paper); padding: .9em 1em; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight:600;
}
.cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover{ background: var(--pixel-magenta); }

.ppc-empty-cart{
  text-align:center; padding: 60px 20px; max-width: 420px; margin: 0 auto;
}
.ppc-empty-cart-icon{ color: var(--paper-line); margin-bottom: 18px; }
.ppc-empty-cart h2{ margin-bottom:.3em; }
.ppc-empty-cart p{ color: var(--ink-soft); margin-bottom: 24px; }

@media (max-width: 900px){
  .cart-layout{ grid-template-columns: 1fr; }
  .cart-collaterals{ position: static; }
  .ppc-cart-item{ grid-template-columns: 76px 1fr; }
}

/* =========================================================
   PROCESSING NOTICE (cart / checkout / product page)
   ========================================================= */
.ppc-processing-notice{
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
  border-left: 3px solid var(--pixel-orange);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: .88rem;
  margin: 0 0 24px;
}
.ppc-processing-notice strong{ font-family: var(--font-display); }

/* =========================================================
   CUSTOMER-FACING FILE REVIEW — shown under an order line item
   wherever WooCommerce renders its item-meta (checkout review, the
   thank-you page right after purchase, and My Account → Orders →
   View any time later). See ppc_show_customer_artwork_review() in
   functions.php.
   ========================================================= */
.ppc-order-artwork-review{
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
}
.ppc-oar-head{
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.ppc-oar-list{
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ppc-oar-list li{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ppc-oar-area{
  display: inline-block;
  background: var(--pixel-blue);
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
}
.ppc-oar-list a{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .85rem;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ppc-oar-list a:hover{ color: var(--pixel-magenta); }

/* =========================================================
   SIGNS & FABRICATION PAGE (page-signs.php), quote-only showcase,
   no pricing shown anywhere on purpose (every job is priced
   individually). See ppc_ajax_signs_quote_email() in functions.php
   for the email half of the quote flow; the WhatsApp half never
   touches the server (signs-page.js builds a plain wa.me link).
   ========================================================= */
.ppc-signs-hero{
  text-align: center;
  padding: 56px 24px;
}
.ppc-signs-hero h1{ margin: .3em 0 .4em; }
.ppc-signs-hero-sub{
  max-width: 640px; margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* -------- Animated gradient title --------
   The neon-glow version needed a dark backdrop to actually read
   (light bleeding off a tube only shows up against darkness), which
   is exactly what didn't fit the rest of this light-background site.
   This keeps the "something's alive here" movement without needing
   any dark background at all: the same colours already used across
   the site (category swatches, the logo's own lettering) animated as
   a continuously panning gradient FILL on the text itself, via
   background-clip:text, a colour-shifting title, not a glowing one,
   so it works on the page's normal light background. */
.ppc-signs-neon-title{
  background: linear-gradient(90deg,
    var(--pixel-blue) 0%, var(--pixel-magenta) 25%, var(--pixel-orange) 50%,
    var(--pixel-magenta) 75%, var(--pixel-blue) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--pixel-blue); /* fallback for browsers without background-clip:text support */
  animation: ppc-gradient-pan 6s linear infinite;
}
@keyframes ppc-gradient-pan{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 250% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .ppc-signs-neon-title{ animation: none; background-position: 0% 50%; }
}

/* -------- CNC-engrave text reveal --------
   The paragraph's real text stays in the DOM as normal, readable
   content (search engines and screen readers see it exactly as
   written), JS (initEngraveReveal() in signs-page.js) rebuilds it
   into per-letter spans and reveals them in sequence, each one
   getting a brief "just carved" highlight before settling into a
   permanent engraved look (a light emboss: a pale highlight below +
   a soft dark shadow above, the classic CSS "cut into the surface"
   technique) — meant to read as a router bit passing across the line
   and leaving the letters behind it. */
.ppc-signs-engrave{ color: var(--ink); }
.ppc-signs-engrave .ppc-engrave-letter{
  text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 -1px 1px rgba(11,11,15,.25);
  opacity: 0;
}
.ppc-signs-engrave .ppc-engrave-letter.is-cut{
  opacity: 1;
}
.ppc-signs-engrave .ppc-engrave-letter.is-cutting{
  opacity: 1;
  color: var(--pixel-orange);
  text-shadow: 0 0 8px rgba(255,122,26,.7);
}
@media (prefers-reduced-motion: reduce){
  .ppc-signs-engrave .ppc-engrave-letter{ opacity: 1; color: inherit; text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 -1px 1px rgba(11,11,15,.25); }
}

.ppc-signs-card{ display: flex; flex-direction: column; }
.ppc-signs-swatch{
  position: relative;
  background: var(--paper-dim); /* shows briefly while the first image loads */
  /* The base .category-swatch is only 96px tall, sized for the small
     icon+gradient placeholder it normally holds. That's far too short
     for a real photo, which would get cropped down to a thin sliver
     with object-fit:cover at that height — this override gives real
     photography room to actually read as a photo. */
  height: 210px !important;
}
.ppc-signs-swatch-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
}
.ppc-signs-swatch-img.is-active{ opacity: 1; }
.ppc-signs-card-desc{
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.55;
  margin: 0 0 4px;
}
.ppc-signs-quote-btn{
  /* Was a fixed margin-top, which is exactly why this one card's
     button landed mid-card instead of flush with the bottom like
     its siblings — "Wide Format & Graphics" has less text/fewer tags
     above it than the others, so a FIXED gap put its button higher
     up. margin-top:auto (inside the flex column set on
     .ppc-signs-card above) pushes the button to the bottom of
     whichever height the card actually is, so every button lines up
     on the same row regardless of how much text is above it. */
  margin-top: auto;
  padding-top: 16px;
  width: 100%;
  justify-content: center;
}

/* -------- Quote request modal -------- */
.ppc-signs-modal{
  display: none; position: fixed; inset: 0; z-index: 100000;
  align-items: center; justify-content: center;
  background: rgba(11,11,15,.6);
  padding: 20px;
}
.ppc-signs-modal.is-open{ display: flex; }
body.ppc-signs-modal-open{ overflow: hidden; }
.ppc-signs-modal-card{
  position: relative;
  width: min(100%, 480px);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: 0 30px 60px rgba(11,11,15,.3);
}
.ppc-signs-modal-card h2{ margin: 0 0 6px; }
.ppc-signs-modal-sub{
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.5;
  margin: 0 0 20px;
}
.ppc-signs-modal-close{
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  border: none; background: var(--paper-dim);
  border-radius: 50%;
  font-size: 1.3rem; line-height: 1;
  cursor: pointer; color: var(--ink-soft);
}
.ppc-signs-modal-close:hover{ background: var(--paper-line); color: var(--ink); }
.ppc-signs-field{ margin-bottom: 14px; }
.ppc-signs-field label{
  display: block;
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.ppc-signs-field input,
.ppc-signs-field select,
.ppc-signs-field textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body, inherit);
  font-size: .92rem;
  background: #fff;
}
.ppc-signs-field input:focus,
.ppc-signs-field select:focus,
.ppc-signs-field textarea:focus{
  outline: none;
  border-color: var(--pixel-blue);
}
.ppc-signs-field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ppc-signs-note{
  font-size: .85rem;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--paper-dim);
  color: var(--ink);
  margin-bottom: 14px;
}
.ppc-signs-note.is-error{ background: #FDECEC; color: #B3261E; }
.ppc-signs-modal-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ppc-btn--whatsapp{
  background: #25D366;
  color: #fff;
  border: none;
}
.ppc-btn--whatsapp:hover{ background: #1EBE5A; color: #fff; }
.ppc-btn--outline{
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--paper-line);
}
.ppc-btn--outline:hover{ border-color: var(--ink-soft); color: var(--ink); }

@media (max-width: 640px){
  .ppc-signs-field-row{ grid-template-columns: 1fr; }
  .ppc-signs-modal-card{ padding: 24px 20px; }
}

/* =========================================================
   PNG TO SVG CONVERTER (page-png-to-svg.php) — everything runs
   client-side in assets/js/vector-studio/ (geometry.js, quantize.js,
   tracer.js, vectorizer.js do the tracing; app.js wires the UI).
   ========================================================= */
.ppc-vs-privacy-note{
  display: inline-flex; align-items: center; gap: 6px;
  margin: 14px auto 0;
  padding: 8px 14px;
  background: var(--paper-dim);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-soft);
}
.ppc-vs-privacy-note svg{ color: var(--pixel-green); flex: none; }

.ppc-vs-app{ max-width: 1100px; margin: 0 auto; }

.ppc-vs-upload-zone{
  border: 2px dashed var(--paper-line);
  border-radius: var(--radius-md);
  padding: 60px 24px;
  text-align: center;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--ink-soft);
  transition: border-color .15s ease, background .15s ease;
}
.ppc-vs-upload-zone svg{ color: var(--pixel-blue); }
.ppc-vs-upload-zone strong{ color: var(--ink); font-size: 1.05rem; }
.ppc-vs-upload-zone.is-dragover{
  border-color: var(--pixel-blue);
  background: var(--paper-dim);
}

.ppc-vs-error{
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: #FDECEC;
  color: #B3261E;
  font-size: .9rem;
}

.ppc-vs-toolbar{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-mono); font-size: .82rem; color: var(--ink-soft);
  margin-bottom: 10px;
}
.ppc-vs-toolbar .ppc-btn{ padding: 8px 16px; font-size: .82rem; }

.ppc-vs-recommendation{
  font-size: .88rem;
  color: var(--ink-soft);
  background: var(--paper-dim);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 18px;
}

.ppc-vs-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items: start;
}

.ppc-vs-preview-pane{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ppc-vs-preview-box{
  position: relative;
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 260px;
  display: flex; align-items: center; justify-content: center;
}
.ppc-vs-preview-box canvas,
.ppc-vs-vector-preview{
  max-width: 100%;
  max-height: 420px;
}
.ppc-vs-vector-preview{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.ppc-vs-preview-label{
  position: absolute; top: 10px; left: 10px;
  background: rgba(11,11,15,.8);
  color: #fff;
  font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 1;
}

/* -------- Loading overlay -------- shown over the vector-preview
   pane specifically, since that's where the "did the site freeze"
   confusion was actually coming from: the previous status text was
   a few small words easy to miss entirely. This is the opposite,
   impossible to miss, and sits right where the customer is already
   looking (waiting for the result to appear). */
.ppc-vs-loading{
  position: absolute; inset: 0;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(250,250,247,.92);
  font-family: var(--font-mono); font-size: .85rem; color: var(--ink);
}
.ppc-vs-loading[hidden]{
  /* Without this, the overlay stayed visible forever, even after
     processing finished successfully: the [hidden] attribute and the
     .ppc-vs-loading class both carry the same CSS specificity, and
     the class rule above (an author style) wins that tie over the
     browser's own default hidden-attribute rule (a lower-priority
     built-in style) — so display:flex kept winning regardless of
     whether the hidden attribute was actually set on the element. */
  display: none;
}
.ppc-vs-spinner{
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 3px solid var(--paper-line);
  border-top-color: var(--pixel-blue);
  animation: ppc-vs-spin .8s linear infinite;
}
@keyframes ppc-vs-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .ppc-vs-spinner{ animation-duration: 2.4s; }
}

/* -------- Detected colour palette -------- */
.ppc-vs-palette-block{ margin-top: 16px; }
.ppc-signs-field-label-standalone{
  display: block;
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.ppc-vs-palette-row{
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 8px; /* the remove button on each chip overflows slightly above its own box, this keeps it from being clipped by the row's own edge */
}
.ppc-vs-swatch{
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 2px solid var(--paper-line);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform .1s ease, opacity .15s ease;
}
.ppc-vs-swatch:hover{ transform: scale(1.08); }
.ppc-vs-swatch:not(.is-active){
  opacity: .35;
}
.ppc-vs-swatch:not(.is-active)::after{
  /* a simple diagonal strike-through so "this colour is off" reads
     clearly even for someone who can't easily tell dimmed-vs-full
     opacity apart at a glance */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px));
  border-radius: 6px;
}

.ppc-vs-swatch-chip{
  position: relative;
  width: 36px; height: 36px;
}
.ppc-vs-swatch-chip .ppc-vs-swatch{
  width: 100%; height: 100%;
}
.ppc-vs-swatch-colorinput{
  /* Sits invisibly right on top of the swatch: clicking the swatch
     visually is what actually opens this input's native colour
     picker, no custom picker UI needed, every platform already knows
     how to show one for a plain <input type="color">. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none; padding: 0;
}
.ppc-vs-swatch-remove{
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: #fff;
  font-size: .72rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 1;
}
.ppc-vs-swatch-remove:hover{ background: var(--pixel-magenta); }
.ppc-vs-swatch-chip.is-removed .ppc-vs-swatch-remove{ background: var(--pixel-green); }

.ppc-vs-controls{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 22px;
}
.ppc-vs-controls .ppc-signs-field label{
  display: flex; align-items: center; gap: 8px;
  text-transform: none;
  font-family: var(--font-body, inherit);
  font-size: .88rem;
  color: var(--ink);
}
.ppc-vs-controls input[type="range"]{ width: 100%; accent-color: var(--pixel-blue); }
.ppc-vs-controls input[type="range"]:disabled{ opacity: .4; cursor: not-allowed; }
.ppc-vs-controls input[type="checkbox"]{ width: 16px; height: 16px; accent-color: var(--pixel-blue); }
.ppc-vs-field-hint{
  font-size: .78rem;
  color: var(--ink-soft);
  margin: 6px 0 0;
  line-height: 1.5;
}
.ppc-vs-color-count-warning{
  color: var(--pixel-orange);
  font-weight: 600;
}
.ppc-vs-standalone-label{
  display: block;
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.ppc-vs-preset-cards{
  display: flex; flex-direction: column; gap: 8px;
}
.ppc-vs-preset-card{
  display: flex; flex-direction: column; gap: 3px;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--paper-line);
  background: transparent;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ppc-vs-preset-card:hover{ border-color: var(--pixel-blue); }
.ppc-vs-preset-card.is-active{
  border-color: var(--pixel-blue);
  background: rgba(46,111,242,.06);
}
.ppc-vs-preset-card-title{
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
}
.ppc-vs-preset-badge{
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--pixel-blue);
  color: #fff;
  padding: 2px 7px;
  border-radius: 999px;
}
.ppc-vs-preset-card-desc{
  font-size: .8rem;
  color: var(--ink-soft);
}
.ppc-vs-vectorize-btn{ width: 100%; justify-content: center; margin: 6px 0 18px; }

/* -------- Advanced (collapsible) panel -------- */
.ppc-vs-advanced-toggle{
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  padding: 10px 0;
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
  margin: 16px 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.ppc-vs-advanced-toggle svg{ transition: transform .15s ease; }
.ppc-vs-advanced-toggle.is-open svg{ transform: rotate(180deg); }
.ppc-vs-advanced-panel{
  display: none;
  flex-direction: column;
  margin-bottom: 16px;
}
.ppc-vs-advanced-panel.is-open{ display: flex; }

/* -------- Palette heading + reset link -------- */
.ppc-vs-palette-heading{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ppc-vs-reset-palette{
  background: none; border: none; padding: 0;
  font-size: .78rem;
  color: var(--pixel-blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ppc-vs-reset-palette:hover{ color: var(--pixel-magenta); }

.ppc-vs-checklist{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: .82rem;
}
.ppc-vs-checklist li.ok{ color: var(--pixel-green); }
.ppc-vs-checklist li.warn{ color: var(--pixel-orange); }

.ppc-vs-export-row{
  display: flex; flex-direction: column; gap: 10px;
}

@media (max-width: 860px){
  .ppc-vs-grid{ grid-template-columns: 1fr; }
  .ppc-vs-preview-pane{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .ppc-vs-upload-zone{ padding: 40px 16px; }
}

/* =========================================================
   SHOP ARCHIVE — sidebar filters + results
   ========================================================= */
.shop-layout{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items:start;
}
.shop-filters{
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 20px;
  position: sticky;
  top: 90px;
}
.shop-filters h4{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink-soft); margin: 0 0 12px;
}
.shop-filters .filter-group{ margin-bottom: 26px; }
.shop-filters .filter-group:last-child{ margin-bottom:0; }
.shop-filters ul li{ margin-bottom: 8px; }
.shop-filters ul li a{
  font-size: .9rem; display:flex; justify-content:space-between; color: var(--ink-soft);
}
.shop-filters ul li a:hover, .shop-filters ul li.current a{ color: var(--pixel-magenta); }
.shop-filters ul li a .count{ font-family: var(--font-mono); font-size:.72rem; color:#B6B3A8; }
.shop-filters label.check{ display:flex; align-items:center; gap:8px; font-size:.88rem; }
.price-filter-row{ display:flex; align-items:center; gap:8px; }
.price-filter-row input{
  width: 0; flex:1; padding: .55em .6em; border:1px solid var(--paper-line); border-radius: var(--radius-sm);
  background: var(--paper); font-family: var(--font-mono); font-size:.82rem;
}
.price-filter-row span{ color: var(--ink-soft); }

.shop-toolbar{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 26px; flex-wrap:wrap; gap: 14px;
  padding-bottom: 18px; border-bottom: 1px solid var(--paper-line);
}
.shop-toolbar .result-count{ font-family: var(--font-mono); font-size:.8rem; color: var(--ink-soft); }
.shop-toolbar select.orderby{
  padding: .5em .8em; border:1px solid var(--paper-line); border-radius: var(--radius-sm); background: var(--paper);
  font-family: var(--font-body); font-size: .88rem;
}

.shop-mobile-bar{ display:none; }
.shop-filters-overlay{ display:none; }

/* =========================================================
   SINGLE PRODUCT — buy box + artwork upload
   ========================================================= */
.product-layout{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 50px;
  align-items:start;
}
.product-gallery-main{
  aspect-ratio: 1/1;
  background: var(--paper-dim);
  border-radius: var(--radius-md);
  overflow:hidden;
  border: 1px solid var(--paper-line);
  position: relative;
}
.product-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-zoom-btn{
  position:absolute; bottom:14px; right:14px;
  width:38px; height:38px; border-radius:50%;
  background: var(--paper); border:1px solid var(--paper-line);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-card);
}
.gallery-zoom-btn:hover{ background: var(--ink); color:#fff; }
.product-gallery-thumbs{ display:flex; gap:10px; margin-top:12px; }
.product-gallery-thumbs .thumb{
  width:70px; height:70px; border-radius: var(--radius-sm); overflow:hidden;
  border: 1px solid var(--paper-line); cursor:pointer;
}
.product-gallery-thumbs .thumb img{ width:100%; height:100%; object-fit:cover; }
.product-gallery-thumbs .thumb.is-active{ border-color: var(--pixel-magenta); border-width:2px; }

.ppc-lightbox{
  display:none; position:fixed; inset:0; z-index:200;
  background: rgba(11,11,15,.92);
  align-items:center; justify-content:center;
  padding: 40px;
}
.ppc-lightbox.is-open{ display:flex; }
.ppc-lightbox img{ max-width:100%; max-height:100%; border-radius: var(--radius-sm); }
.ppc-lightbox-close{
  position:absolute; top:20px; right:24px;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3);
  font-size:1.6rem; line-height:1;
}
.ppc-lightbox-close:hover{ background:#fff; color:var(--ink); }

.buy-box{ position:sticky; top: 90px; }
.ppc-mobile-buybar{ display:none; }
.buy-box .cat-label{ font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; color:var(--ink-soft); letter-spacing:.06em; }
.buy-box h1{ font-size: 1.9rem; margin: .2em 0 .3em; }
.buy-box .price{ font-family: var(--font-display); font-size:1.5rem; font-weight:700; margin-bottom: 18px; }
.buy-box .price small{ font-family: var(--font-mono); font-size:.85rem; color: var(--ink-soft); font-weight:400; }
.buy-box .short-desc{ color: var(--ink-soft); font-size: .95rem; margin-bottom: 22px; }

.spec-table{
  width:100%; border-collapse: collapse; margin-bottom: 22px;
  font-family: var(--font-mono); font-size: .82rem;
}
.spec-table tr{ border-bottom: 1px solid var(--paper-line); }
.spec-table td{ padding: 9px 0; color: var(--ink-soft); }
.spec-table td:last-child{ text-align:right; color: var(--ink); }

.product-upload{
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 22px;
  background: var(--paper-dim);
}
.product-upload h4{ font-family: var(--font-display); font-size: .92rem; margin: 0 0 4px; }
.product-upload .hint{ font-size: .8rem; color: var(--ink-soft); margin-bottom: 12px; }
.product-upload .dropzone{ margin: 0; padding: 22px 16px; background: var(--paper); }
.product-upload .upload-status{
  display:none; align-items:center; gap:10px;
  font-family: var(--font-mono); font-size: .8rem;
  margin-top: 10px; padding: 10px 12px;
  background: var(--paper); border-radius: var(--radius-sm); border:1px solid var(--paper-line);
}
.product-upload .upload-status.is-visible{ display:flex; }
.product-upload .upload-status .ok-dot{ width:8px; height:8px; border-radius:50%; background: var(--success); flex:none; }
.product-upload .upload-status.is-uploading .ok-dot{ background: var(--pixel-orange); }

.qty-stepper{ display:flex; align-items:center; border:1px solid var(--paper-line); border-radius: var(--radius-sm); width: fit-content; margin-bottom:18px; }
.qty-stepper button{ background:none; border:none; width:36px; height:38px; font-size:1.1rem; }
.qty-stepper input{ width: 54px; text-align:center; border:none; background:none; font-family: var(--font-display); font-weight:600; }

.trust-mini{ display:flex; gap:18px; flex-wrap:wrap; margin-top:20px; font-family: var(--font-mono); font-size:.74rem; color: var(--ink-soft); }
.trust-mini li{ display:flex; align-items:center; gap:6px; }

.product-tabs{ margin-top: 60px; }
.product-tabs .tab-nav{ display:flex; gap: 28px; border-bottom: 1px solid var(--paper-line); margin-bottom: 26px; }
.product-tabs .tab-nav button{
  background:none; border:none; padding: 10px 0;
  font-family: var(--font-display); font-weight:600; color: var(--ink-soft);
  border-bottom: 2px solid transparent; margin-bottom:-1px;
}
.product-tabs .tab-nav button.is-active{ color: var(--ink); border-color: var(--pixel-magenta); }
.product-tabs .tab-panel{ display:none; max-width: 760px; }
.product-tabs .tab-panel.is-active{ display:block; }

/* =========================================================
   WOOCOMMERCE OVERRIDES
   ========================================================= */
.woocommerce-breadcrumb{ font-family: var(--font-mono); font-size:.78rem; color:var(--ink-soft); margin-bottom:24px; }
.woocommerce-breadcrumb a:hover{ color: var(--pixel-magenta); }

.woocommerce div.product .woocommerce-tabs ul.tabs li a{ font-family: var(--font-display); font-weight:600; }
.woocommerce span.onsale{
  background: var(--brand-gradient) !important;
  font-family: var(--font-mono); font-weight:400 !important; font-size:.65rem !important;
  top: 10px; left:10px; right:auto;
  min-height:auto; min-width:auto; line-height:1; padding:6px 8px;
}
.woocommerce div.product p.price, .woocommerce div.product span.price{ color: var(--price); font-family: var(--font-display); }
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background: var(--ink); color:var(--paper); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight:600;
}
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover{
  background: var(--pixel-magenta);
}
.woocommerce ul.products li.product .price{ margin: 6px 0; }
.woocommerce nav.woocommerce-pagination ul{ border-color: var(--paper-line); }

.woocommerce-cart table.cart, .woocommerce-checkout table.cart{ border-color: var(--paper-line); font-family: var(--font-body); }
.woocommerce-cart .cart-collaterals .cart_totals{ background: var(--paper-dim); padding: 20px; border-radius: var(--radius-md); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .hero .container{ grid-template-columns:1fr; }
  .products-grid, ul.products{ grid-template-columns: repeat(2,1fr) !important; }
  .category-grid{ grid-template-columns: repeat(2,1fr); }
  .process-strip, .testimonial-grid, .post-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: repeat(3,1fr); }
  .swatch-strip{ grid-template-columns: repeat(3,1fr); }
  .shop-layout, .product-layout{ grid-template-columns: 1fr; }
  .shop-filters, .buy-box{ position:static; }
  .why-us-grid{ grid-template-columns: repeat(3,1fr); }

  .shop-mobile-bar{
    display:flex; align-items:center; gap:12px;
    margin-bottom: 20px;
  }
  .shop-mobile-bar #ppc-filters-toggle{ flex:none; padding:.6em 1em; font-size:.82rem; }
  .shop-cat-scroller{
    display:flex; gap:8px; overflow-x:auto; flex:1;
    scrollbar-width:none;
  }
  .shop-cat-scroller::-webkit-scrollbar{ display:none; }
  .shop-cat-scroller a{
    flex:none; font-family:var(--font-mono); font-size:.76rem;
    padding:.5em .9em; border:1px solid var(--paper-line); border-radius:20px; white-space:nowrap;
  }

  .shop-filters{
    position: fixed !important; left:0; right:0; bottom:0; top:auto;
    max-height: 80vh; overflow-y:auto;
    background: var(--paper);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow-lift);
    padding: 22px;
    transform: translateY(100%);
    transition: transform .25s ease;
    z-index: 90;
  }
  .shop-filters.is-open{ transform: translateY(0); }
  .shop-filters-overlay{
    display:block; position:fixed; inset:0; background:rgba(11,11,15,.4);
    opacity:0; visibility:hidden; transition: opacity .2s ease; z-index:80;
  }
  .shop-filters-overlay.is-open{ opacity:1; visibility:visible; }

  .product-tabs .tab-nav{ overflow-x:auto; }
  .buy-box{ padding-bottom: 74px; } /* room above the sticky mobile bar */
  .ppc-mobile-buybar{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    background: var(--paper); border-top:1px solid var(--paper-line);
    padding: 12px 16px; box-shadow: 0 -8px 24px rgba(11,11,15,.08);
  }
  .ppc-mobile-buybar .mb-price{ font-family:var(--font-display); font-weight:700; }
  .ppc-mobile-buybar .mb-price small{ display:block; font-family:var(--font-mono); font-weight:400; font-size:.65rem; color:var(--ink-soft); }
  .ppc-mobile-buybar .btn{ flex:1; }
}
@media (max-width: 640px){
  .section{ padding: 52px 0; }
  .products-grid, ul.products{ grid-template-columns: 1fr !important; }
  .category-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
  .cta-band{ padding: 32px; flex-direction:column; align-items:flex-start; }
  .swatch-strip{ grid-template-columns: repeat(2,1fr); }
  .header-utility-links a:nth-child(n+2):not(.header-signin):not(.header-user-link):not(.header-signout){ display:none; }
  .quick-quote-form{ grid-template-columns: 1fr; }
  .why-us-grid{ grid-template-columns: 1fr 1fr; }
  /* Compact Sign In on mobile */
  .header-utility{ padding: 6px 0; }
  .header-utility-links{ font-size: 12px; gap: 12px; }
  .header-signin,
  .header-user-link,
  .header-signout{
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(46,111,242,.08);
  }
  .header-utility-links a.header-signin,
  .header-utility-links a.header-user-link,
  .header-utility-links a.header-signout{
    display: inline-flex;
  }

  /* STICKY HEADER - bar always visible, follows the user as they scroll */
  .site-header{
    position: sticky;
    top: 0;
    z-index: 90;
    background: #fff;
    box-shadow: 0 1px 0 rgba(11,11,15,.06);
  }
}

/* =========================================================
   MOBILE APP-STYLE OVERHAUL
   =========================================================
   Native-feeling mobile experience: app-style drawer, smooth
   animations, safe-area insets, no layout shift, snappy
   tap feedback. Targets ≤ 900px.
   ========================================================= */

/* -------- Global mobile plumbing -------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Smooth out momentum scroll on iOS */
    -webkit-overflow-scrolling: touch;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Prevent iOS from zooming inputs on focus (font-size must be ≥16px) */
@supports (-webkit-touch-callout: none) {
    .ppc-qty-input,
    .ppc-mobile-buybar input,
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Lock body scroll when the drawer is open */
body.ppc-drawer-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    /* Compensate for the lost scrollbar so layout doesn't jump */
    padding-right: var(--ppc-sb, 0px);
    touch-action: none;
}

/* -------- Site header: tighter, more app-like on mobile -------- */
@media (max-width: 900px) {
    .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--paper);
        box-shadow: 0 1px 0 rgba(11,11,15,.06);
    }
    .header-utility { display: none; }
    .header-main .container {
        height: 60px;
        min-height: 60px;
        padding-top: 0;
        padding-bottom: 0;
        gap: 12px;
    }
    .site-branding img,
    .site-branding svg,
    .custom-logo {
        max-height: 28px;
        width: auto;
    }
    .header-actions {
        gap: 4px;
        margin-left: auto;
    }
    .header-icon-link {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        color: var(--ink);
        transition: background .15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .header-icon-link:active {
        background: rgba(11,11,15,.06);
    }
    .header-icon-link svg { width: 22px; height: 22px; }
    .header-icon-link--cart .cart-count {
        position: absolute;
        top: 6px;
        right: 6px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
        line-height: 16px;
    }
    .header-icon-link--cart {
        position: relative;
    }
    .header-search-panel {
        position: fixed;
        top: 60px;
        left: 12px;
        right: 12px;
        width: auto;
    }
}

/* -------- Hamburger: morphing bars -------- */
@media (max-width: 900px) {
    .menu-toggle {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 12px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background .15s ease;
    }
    .menu-toggle:active { background: rgba(11,11,15,.06); }
    .menu-toggle-bars {
        position: relative;
        display: block;
        width: 22px;
        height: 16px;
    }
    .menu-toggle-bars > span {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--ink);
        border-radius: 2px;
        transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .18s ease, top .28s cubic-bezier(.4,0,.2,1);
    }
    .menu-toggle-bars > span:nth-child(1) { top: 0; }
    .menu-toggle-bars > span:nth-child(2) { top: 7px; }
    .menu-toggle-bars > span:nth-child(3) { top: 14px; }
    /* Morph to X when drawer is open */
    .menu-toggle[aria-expanded="true"] .menu-toggle-bars > span:nth-child(1) {
        top: 7px;
        transform: rotate(45deg);
    }
    .menu-toggle[aria-expanded="true"] .menu-toggle-bars > span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .menu-toggle[aria-expanded="true"] .menu-toggle-bars > span:nth-child(3) {
        top: 7px;
        transform: rotate(-45deg);
    }
}

/* -------- App-style drawer (mobile menu) -------- */
.ppc-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    visibility: hidden;
}
.ppc-drawer[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
}
.ppc-drawer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11,11,15,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .25s ease;
}
.ppc-drawer[aria-hidden="false"] .ppc-drawer-overlay {
    opacity: 1;
}
.ppc-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 360px);
    background: var(--paper);
    box-shadow: -16px 0 40px rgba(11,11,15,.18);
    display: flex;
    flex-direction: column;
    transform: translate3d(100%, 0, 0);
    transition: transform .32s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    /* Respect iPhone safe area at the bottom */
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.ppc-drawer[aria-hidden="false"] .ppc-drawer-panel {
    transform: translate3d(0, 0, 0);
}
.ppc-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--paper-line);
    flex: 0 0 auto;
}
.ppc-drawer-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
}
.ppc-drawer-close {
    width: 40px;
    height: 40px;
    border: 0;
    background: rgba(11,11,15,.05);
    color: var(--ink);
    border-radius: 12px;
    display: grid;
    place-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, transform .15s ease;
}
.ppc-drawer-close:active { background: rgba(11,11,15,.12); transform: scale(.94); }

.ppc-drawer-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 12px 8px 24px;
}
.ppc-drawer-menu,
.ppc-drawer-nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ppc-drawer-menu li { position: relative; }
.ppc-drawer-menu > li > a,
.ppc-drawer-nav > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    min-height: 48px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-radius: 12px;
    transition: background .15s ease, color .15s ease;
    /* Animate entry with stagger */
    opacity: 0;
    transform: translateX(8px);
    animation: ppc-drawer-item-in .35s cubic-bezier(.22,.61,.36,1) forwards;
}
.ppc-drawer-menu > li:nth-child(1) > a  { animation-delay:  .06s; }
.ppc-drawer-menu > li:nth-child(2) > a  { animation-delay:  .10s; }
.ppc-drawer-menu > li:nth-child(3) > a  { animation-delay:  .14s; }
.ppc-drawer-menu > li:nth-child(4) > a  { animation-delay:  .18s; }
.ppc-drawer-menu > li:nth-child(5) > a  { animation-delay:  .22s; }
.ppc-drawer-menu > li:nth-child(6) > a  { animation-delay:  .26s; }
.ppc-drawer-menu > li:nth-child(7) > a  { animation-delay:  .30s; }
.ppc-drawer-menu > li:nth-child(8) > a  { animation-delay:  .34s; }
@keyframes ppc-drawer-item-in {
    to { opacity: 1; transform: translateX(0); }
}
.ppc-drawer-menu > li > a:active,
.ppc-drawer-nav > ul > li > a:active {
    background: rgba(110,47,242,.08);
}
.ppc-drawer-menu > li.current-menu-item > a,
.ppc-drawer-nav > ul > li.current-menu-item > a {
    color: var(--pixel-magenta);
    background: rgba(227,28,121,.06);
}
.ppc-drawer-menu > li > ul,
.ppc-drawer-nav > ul > li > ul {
    list-style: none;
    margin: 4px 0 6px 16px;
    padding: 0 0 0 12px;
    border-left: 1px solid var(--paper-line);
}
.ppc-drawer-menu > li > ul li a,
.ppc-drawer-nav > ul > li > ul li a {
    display: block;
    padding: 10px 12px;
    min-height: 40px;
    font-size: 14px;
    color: var(--ink-soft);
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s ease;
}
.ppc-drawer-menu > li > ul li a:active,
.ppc-drawer-nav > ul > li > ul li a:active {
    background: rgba(11,11,15,.05);
}

.ppc-drawer-foot {
    flex: 0 0 auto;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--paper-line);
    background: var(--paper-dim, #f5f4f0);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ppc-drawer-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    min-height: 52px;
    background: linear-gradient(135deg, #2E6FF2 0%, #6E2FF2 50%, #E31C79 100%);
    color: #fff;
    border-radius: 14px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(110,47,242,.28);
    transition: transform .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.ppc-drawer-cta:active { transform: scale(.98); box-shadow: 0 4px 12px rgba(110,47,242,.25); }
.ppc-drawer-cta svg { flex: 0 0 auto; }
.ppc-drawer-cta span:first-of-type { flex: 1; }
.ppc-drawer-cta-count {
    background: rgba(255,255,255,.22);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    min-width: 22px;
    text-align: center;
}
.ppc-drawer-cta--signin {
    background: linear-gradient(135deg, #0B0B0F 0%, #2E6FF2 100%);
    box-shadow: 0 8px 22px rgba(11,11,15,.28);
}
.ppc-drawer-cta--signin:active { box-shadow: 0 4px 12px rgba(11,11,15,.25); }
.ppc-drawer-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    min-height: 48px;
    background: rgba(46,111,242,.08);
    color: var(--ink);
    border: 1px solid rgba(46,111,242,.18);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.ppc-drawer-user svg { flex: 0 0 auto; color: #2E6FF2; }
.ppc-drawer-user:active { background: rgba(46,111,242,.14); }
.ppc-drawer-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    min-height: 48px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-radius: 12px;
    transition: background .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.ppc-drawer-link:active { background: rgba(11,11,15,.05); }
.ppc-drawer-link svg { flex: 0 0 auto; opacity: .7; }

/* Drawer is desktop-hidden — only mounted on mobile */
@media (min-width: 901px) {
    .ppc-drawer { display: none; }
}

/* -------- Mobile-buybar (sticky bottom CTA on product page) -------- */
@media (max-width: 900px) {
    .ppc-mobile-buybar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        background: var(--paper);
        border-top: 1px solid var(--paper-line);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 24px rgba(11,11,15,.08);
        display: flex;
        align-items: center;
        gap: 12px;
        /* Lift the entire UI when the keyboard appears on iOS */
        transform: translateZ(0);
    }
    .ppc-mobile-buybar-info { flex: 1 1 auto; min-width: 0; }
    .ppc-mobile-buybar-price {
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.1;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ppc-mobile-buybar-sub {
        font-family: var(--font-mono);
        font-size: 10px;
        font-weight: 500;
        color: var(--ink-soft);
        letter-spacing: .04em;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ppc-mobile-buybar .ppc-btn {
        flex: 0 0 auto;
        min-width: 130px;
        padding: 14px 18px;
        font-size: 14px;
        font-weight: 600;
        border-radius: 12px;
    }
}

/* -------- Slideshow: mobile portrait ratio -------- */
@media (max-width: 768px) {
    .ppc-slideshow {
        aspect-ratio: 4 / 5;
        border-radius: 0;
    }
    .ppc-slideshow-arrow { display: none; }
    .ppc-slideshow-content { padding: 24px 22px; }
    .ppc-slideshow-title { font-size: clamp(28px, 8vw, 38px); }
    .ppc-slideshow-text { font-size: 14px; }
    .ppc-slideshow-dots {
        bottom: 14px;
        gap: 6px;
    }
    .ppc-slideshow-dot { width: 6px; height: 6px; }
    .ppc-slideshow-dot.is-active { width: 22px; }
}

/* -------- Section padding rhythm on mobile -------- */
@media (max-width: 640px) {
    .section { padding: 52px 0; }
    .section-head { margin-bottom: 28px; }
    .section-head h2 { font-size: clamp(24px, 6vw, 32px); }
    .container { padding: 0 18px; }
    .products-grid, ul.products { grid-template-columns: 1fr !important; gap: 18px; }
    .category-grid { grid-template-columns: 1fr; gap: 14px; }
    .footer-grid { grid-template-columns: repeat(2,1fr); gap: 28px 20px; }
    .cta-band { padding: 32px 24px; flex-direction: column; align-items: flex-start; }
    .swatch-strip { grid-template-columns: repeat(2,1fr); }
    .quick-quote-form { grid-template-columns: 1fr; }
    .why-us-grid { grid-template-columns: 1fr 1fr; }
    .process-strip, .testimonial-grid, .post-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* -------- Touch feedback (subtle press state everywhere) -------- */
@media (max-width: 900px) {
    .ppc-btn:active,
    button.ppc-tier-row:active,
    button.ppc-cfg-opt:active,
    .ppc-qty-chip:active,
    a.ppc-product-card:active,
    a.ppc-cart-item:active {
        transform: scale(.97);
        transition: transform .1s ease;
    }
    .ppc-btn, .ppc-tier-row, .ppc-cfg-opt, .ppc-qty-chip, .ppc-product-card, .ppc-cart-item {
        -webkit-tap-highlight-color: transparent;
    }
}

/* -------- Footer: more readable on mobile -------- */
@media (max-width: 640px) {
    .site-footer {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
    .site-footer h4 {
        font-size: 12px;
        margin-bottom: 12px;
    }
    .site-footer ul li { margin-bottom: 8px; }
    .site-footer ul li a { font-size: 14px; }
}

/* ---- Products grid: 2 cols on tablet, 1 on mobile ---- */



/* ============== PPC CARD (product card on homepage) ============== */
/* Loaded on front page to style the WC [products] shortcode output */
.products-grid, ul.products{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  list-style:none !important; margin:0 !important; padding:0 !important;
  align-items: stretch !important;
}
.products-grid::before, .products-grid::after,
ul.products::before, ul.products::after{
  content: none !important;
  display: none !important;
}
.ppc-card.product{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: box-shadow .18s, transform .18s;
}
.ppc-card.product:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(11,11,15,.10);
}
.ppc-card-media{
  position: relative;
  aspect-ratio: 4/3;
  background: #ffffff;
  overflow: hidden;
}
.ppc-card-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.ppc-card-media-link{ display: block; height: 100%; }
.ppc-card-media img{ width: 100%; height: 100%; object-fit: cover; }
.ppc-card-body{
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ppc-card-cat{
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ppc-card-title{
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.ppc-card-title a{ color: var(--ink); text-decoration: none; }
.ppc-card-title a:hover{ color: var(--pixel-magenta); }
.ppc-card-rating--new{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .65rem;
  padding: 2px 8px;
  background: var(--pixel-blue);
  color: #fff;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .05em;
  width: fit-content;
}
.ppc-card-price{
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
}
.ppc-card-price-from{
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ppc-card-price-value{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}
.ppc-card-cta{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding: 10px 14px !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 6px !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all .15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ppc-card-cta:hover{
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
}
.ppc-card-cta svg{ transition: transform .2s; }
.ppc-card-cta:hover svg{ transform: translateX(3px); }




/* =========================================================
   BACK TO TOP BUTTON
   Floating gradient bubble, bottom-right, app-style.
   Hidden by default, fades + slides in after scroll.
   Includes a circular SVG progress ring that fills as
   the user scrolls down the page.
   ========================================================= */
.ppc-back-to-top{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background:
    linear-gradient(135deg, #2E6FF2 0%, #6E2FF2 50%, #E31C79 100%);
  box-shadow:
    0 10px 28px rgba(110,47,242,.35),
    0 2px 8px rgba(11,11,15,.12),
    inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .25s cubic-bezier(.34,1.56,.64,1),
    box-shadow .25s ease,
    opacity   .25s ease;
  opacity: 0;
  transform: translateY(20px) scale(.8);
  pointer-events: none;
  padding: 0;
  overflow: visible;
}
.ppc-back-to-top[hidden]{ display: none; }
.ppc-back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.ppc-back-to-top:hover{
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 16px 36px rgba(110,47,242,.45),
    0 4px 12px rgba(11,11,15,.18),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.ppc-back-to-top:active{
  transform: translateY(0) scale(.95);
  box-shadow:
    0 6px 16px rgba(110,47,242,.35),
    0 2px 6px rgba(11,11,15,.14);
}
.ppc-back-to-top > svg:not(.ppc-back-to-top-ring){
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
  transition: transform .25s ease;
}
.ppc-back-to-top:hover > svg:not(.ppc-back-to-top-ring){
  transform: translateY(-2px);
}

/* Circular progress ring */
.ppc-back-to-top-ring{
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  transform: rotate(-90deg);
  pointer-events: none;
}
.ppc-back-to-top-ring circle{
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.ppc-back-to-top-ring-bg{
  stroke: rgba(11,11,15,.08);
}
.ppc-back-to-top-ring-fg{
  stroke: var(--pixel-magenta, #E31C79);
  transition: stroke-dashoffset .12s linear;
  filter: drop-shadow(0 0 4px rgba(227,28,121,.5));
}

/* Mobile: shrunk slightly + lifted above the fixed app-nav bar (see
   footer.php inline #ppc-app-nav-inline for the nav bar itself) */
@media (max-width: 900px){
  .ppc-back-to-top{
    right: 14px;
    bottom: calc(64px + 14px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
  }
  .ppc-back-to-top > svg:not(.ppc-back-to-top-ring){
    width: 18px;
    height: 18px;
  }
}
/* Legacy: kept in case the old sticky product buy-bar is ever
   re-enabled — pushes the button up further so the two never overlap. */
body.has-mobile-buybar .ppc-back-to-top{
  bottom: calc(64px + 96px + env(safe-area-inset-bottom, 0px));
}

/* Checkout: the button was floating directly over the payment card
   fields (card number/expiry/CVV) in the sidebar, right where a
   customer needs to click to pay — a real blocker, not just visual
   clutter. Checkout is a short, focused, single-task page anyway, so
   simplest safe fix is to not show it there at all. */
body.woocommerce-checkout .ppc-back-to-top{
  display: none !important;
}

/* =========================================================
   MOBILE APP-STYLE BOTTOM NAV
   Shop / Wishlist / Cart / My account — fixed tab bar, mobile
   only. Canonical rules; footer.php also ships an inline
   duplicate (#ppc-app-nav-inline) so the bar still renders
   correctly even if this stylesheet is slow to load.
   ========================================================= */
.ppc-app-nav{ display: none; }
@media (max-width: 900px){
  .ppc-app-nav{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 96;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--paper-line);
    box-shadow: 0 -6px 20px rgba(11,11,15,.08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ppc-app-nav-item{
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 8px;
    color: var(--ink-soft);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
  }
  .ppc-app-nav-item svg{ width: 22px; height: 22px; }
  .ppc-app-nav-item.is-active{ color: var(--pixel-magenta); }
  .ppc-app-nav-icon-wrap{ position: relative; display: inline-flex; }
  .ppc-app-nav-badge{
    position: absolute;
    top: -6px; right: -9px;
    min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 50%;
    background: #16161a;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
  }
  /* "Signed in" state for the My account tab — filled icon (swapped
     in via PHP, see footer.php) + this small green dot, so it reads
     as "connected" at a glance instead of the plain outline everyone
     sees signed out. */
  .ppc-app-nav-item.is-signed-in{ color: var(--ink); }
  .ppc-app-nav-item.is-signed-in.is-active{ color: var(--pixel-magenta); }
  .ppc-app-nav-dot{
    position: absolute;
    top: -1px; right: -2px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pixel-green, #3FA746);
    border: 2px solid #fff;
  }
}

/* =========================================================
   SINGLE POST / BLOG INDEX LAYOUT — this used to be an inline
   style="display:grid;grid-template-columns:2.2fr 1fr" with zero
   mobile handling. Grid tracks default to min-width:auto, so any
   wide child (a full-size featured image, a fixed-width widget)
   forced the whole row wider than the screen — that's what was
   clipping content off the left edge on phones.
   ========================================================= */
.ppc-single-layout{
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 50px;
  min-width: 0;
}
.ppc-single-layout > *{
  min-width: 0; /* let grid children shrink below their content size */
}
.ppc-single-layout img{
  max-width: 100%;
  height: auto;
}
@media (max-width: 900px){
  .ppc-single-layout{
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* =========================================================
   PNG TO SVG CONVERTER: ratings, reviews, ads, SEO content
   (markup: page-png-to-svg.php + ppc_vs_render_reviews() in
   inc/vector-tool.php; behaviour: vs-community-v1.js)
   ========================================================= */
.ppc-vs-upload-zone.is-checking{ opacity: .6; pointer-events: none; }
.ppc-vs-hero-rating{ display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .88rem; color: var(--ink-soft); text-decoration: none; }
.ppc-vs-hero-rating:hover{ color: var(--ink); }

.ppc-vs-stars{ --size: 18px; position: relative; display: inline-block; font-size: var(--size); line-height: 1; letter-spacing: 1px; vertical-align: middle; }
.ppc-vs-stars::before{ content: "\2605\2605\2605\2605\2605"; color: #dcdcd6; }
.ppc-vs-stars-fill{ position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; }
.ppc-vs-stars-fill::before{ content: "\2605\2605\2605\2605\2605"; color: #F5A623; }

.ppc-vs-ad{ margin: 18px auto; max-width: 970px; text-align: center; }
.ppc-vs-ad-label{ display: block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }

.ppc-vs-reviews{ max-width: 1100px; margin: 0 auto; }
.ppc-vs-reviews-head h2{ margin: 6px 0 22px; }
.ppc-vs-reviews-grid{ display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
.ppc-vs-summary{ background: var(--paper); border: 1px solid var(--paper-line); border-radius: var(--radius-md); padding: 22px; position: sticky; top: 100px; }
.ppc-vs-summary-score{ font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1; margin-bottom: 6px; }
.ppc-vs-summary-count{ color: var(--ink-soft); font-size: .86rem; margin: 8px 0 14px; }
.ppc-vs-summary-empty{ color: var(--ink-soft); margin: 0 0 14px; }
.ppc-vs-dist{ list-style: none; margin: 0 0 18px; padding: 0; }
.ppc-vs-dist li{ display: grid; grid-template-columns: 30px 1fr 30px; gap: 8px; align-items: center; font-size: .8rem; color: var(--ink-soft); margin: 5px 0; }
.ppc-vs-dist-bar{ height: 8px; background: var(--paper-dim); border-radius: 4px; overflow: hidden; }
.ppc-vs-dist-bar i{ display: block; height: 100%; background: #F5A623; border-radius: 4px; }
.ppc-vs-rate{ border-top: 1px solid var(--paper-line); padding-top: 16px; }
.ppc-vs-rate-locked, .ppc-vs-rate-done{ font-size: .86rem; color: var(--ink-soft); margin: 0; }
.ppc-vs-star-input{ border: 0; padding: 0; margin: 0 0 10px; }
.ppc-vs-star-input legend{ font-weight: 600; font-size: .9rem; margin-bottom: 4px; padding: 0; }
.ppc-vs-star-row{ display: inline-flex; flex-direction: row-reverse; }
.ppc-vs-star-row input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.ppc-vs-star-row label{ font-size: 32px; line-height: 1; color: #dcdcd6; cursor: pointer; padding: 0 2px; transition: color .12s ease, transform .12s ease; }
.ppc-vs-star-row label:hover, .ppc-vs-star-row label:hover ~ label, .ppc-vs-star-row input:checked ~ label{ color: #F5A623; }
.ppc-vs-star-row label:hover{ transform: scale(1.12); }
.ppc-vs-star-row input:focus-visible + label{ outline: 2px solid var(--pixel-blue); outline-offset: 2px; border-radius: 4px; }
.ppc-vs-field{ display: block; margin-bottom: 10px; }
.ppc-vs-field span{ display: block; font-size: .8rem; color: var(--ink-soft); margin-bottom: 4px; }
.ppc-vs-field input, .ppc-vs-field textarea{ width: 100%; padding: 9px 11px; border: 1px solid var(--paper-line); border-radius: var(--radius-sm); font: inherit; font-size: .9rem; background: #fff; }
.ppc-vs-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ppc-vs-rate-form .ppc-btn{ width: 100%; justify-content: center; }
.ppc-vs-rate-msg{ font-size: .84rem; margin: 8px 0 0; color: var(--ink-soft); }
.ppc-vs-rate-msg.is-error{ color: #B3261E; }
.ppc-vs-rate-thanks{ font-weight: 600; color: var(--pixel-green); margin: 0; }
.ppc-vs-list{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ppc-vs-review{ background: var(--paper); border: 1px solid var(--paper-line); border-radius: var(--radius-md); padding: 16px 18px; }
.ppc-vs-review-top{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 6px; }
.ppc-vs-review-top time{ margin-left: auto; font-size: .76rem; color: var(--ink-soft); }
.ppc-vs-review p{ margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.ppc-vs-reply{ margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--pixel-blue); background: var(--paper-dim); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ppc-vs-reply strong{ font-size: .78rem; }
.ppc-vs-reply p{ font-size: .86rem; color: var(--ink-soft); }
.ppc-vs-more{ margin-top: 16px; }
.ppc-vs-nudge{ display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: #FFF6E5; border: 1px solid #F5D69A; font-size: .86rem; animation: ppc-vs-nudge-in .35s ease both; }
.ppc-vs-nudge a{ font-weight: 600; color: var(--ink); }
.ppc-vs-nudge button{ margin-left: auto; border: 0; background: none; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--ink-soft); }
@keyframes ppc-vs-nudge-in{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }

.ppc-vs-info{ max-width: 1100px; margin: 0 auto; }
.ppc-vs-info-head{ margin: 34px 0 16px; }
.ppc-vs-info-head h2{ margin: 6px 0 0; }
.ppc-vs-steps{ list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ppc-vs-steps li{ counter-increment: s; position: relative; background: var(--paper); border: 1px solid var(--paper-line); border-radius: var(--radius-md); padding: 20px 18px 18px 64px; }
.ppc-vs-steps li::before{ content: counter(s); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--pixel-blue); color: #fff; font-family: var(--font-display); font-weight: 700; }
.ppc-vs-steps p, .ppc-vs-features p{ margin: 6px 0 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.55; }
.ppc-vs-features{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ppc-vs-features li{ background: var(--paper); border: 1px solid var(--paper-line); border-radius: var(--radius-md); padding: 18px; }
.ppc-vs-faq details{ background: var(--paper); border: 1px solid var(--paper-line); border-radius: var(--radius-sm); margin-bottom: 10px; }
.ppc-vs-faq summary{ cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ppc-vs-faq summary::-webkit-details-marker{ display: none; }
.ppc-vs-faq summary::after{ content: "+"; color: var(--pixel-blue); font-size: 1.2rem; line-height: 1; }
.ppc-vs-faq details[open] summary::after{ content: "\2212"; }
.ppc-vs-faq details p{ margin: 0; padding: 0 16px 16px; color: var(--ink-soft); line-height: 1.6; }
.ppc-vs-cta{ margin-top: 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(46,111,242,.08), rgba(227,28,121,.08)); border: 1px solid var(--paper-line); }
.ppc-vs-cta h2{ margin: 0 0 6px; font-size: 1.35rem; }
.ppc-vs-cta p{ margin: 0; color: var(--ink-soft); }

@media (max-width: 900px){
  .ppc-vs-reviews-grid{ grid-template-columns: 1fr; }
  .ppc-vs-summary{ position: static; }
  .ppc-vs-steps, .ppc-vs-features{ grid-template-columns: 1fr; }
  .ppc-vs-cta{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px){ .ppc-vs-list{ grid-template-columns: 1fr; } }

/* Converter switched off (Vector Tool > Settings) */
.ppc-vs-offline{ display: flex; align-items: flex-start; gap: 16px; max-width: 720px; margin: 0 auto; padding: 26px 28px; border-radius: var(--radius-md); background: #FFF6E5; border: 1px solid #F5D69A; }
.ppc-vs-offline-icon{ flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #F5A623; color: #fff; font-size: 24px; }
.ppc-vs-offline strong{ display: block; font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 4px; }
.ppc-vs-offline p{ margin: 0; color: var(--ink-soft); line-height: 1.55; }
.ppc-vs-admin-off{ max-width: 1100px; margin: 0 auto 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: #FDECEC; color: #B3261E; font-size: .86rem; font-weight: 600; }

/* ---------------- Free PNG to SVG tool link ----------------
   Desktop: compact pill in the header actions. Full label only when
   there's room (>= 1280px), icon + FREE badge on smaller desktops so
   the main navigation never gets squeezed. Hidden on mobile, where the
   drawer has its own link. */
.header-tool-link{
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1.5px solid rgba(46,111,242,.30);
  background: linear-gradient(135deg, rgba(46,111,242,.08), rgba(63,167,70,.10));
  color: var(--ink);
  font-family: var(--font-display); font-size: .82rem; font-weight: 600;
  white-space: nowrap; text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.header-tool-link:hover, .header-tool-link:focus-visible{ border-color: var(--pixel-blue); background: linear-gradient(135deg, rgba(46,111,242,.14), rgba(63,167,70,.16)); }
.header-tool-link svg{ color: var(--pixel-blue); flex: none; }
.header-tool-badge{
  padding: 2px 7px; border-radius: 999px;
  background: var(--pixel-green); color: #fff;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase;
}
@media (max-width: 1439px){
  .header-tool-label{ display: none; }
  .header-tool-link{ width: 36px; padding: 0; justify-content: center; }
  .header-tool-badge{ position: absolute; top: -7px; right: -10px; padding: 1px 5px; font-size: .52rem; }
}
@media (max-width: 900px){ .header-tool-link{ display: none; } }

/* Mobile drawer: tool link sits in the scrolling menu, one compact row */
.ppc-drawer-tool{
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 0; padding: 10px 16px; min-height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(46,111,242,.08), rgba(63,167,70,.10));
  color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
}
.ppc-drawer-tool:active{ background: linear-gradient(135deg, rgba(46,111,242,.14), rgba(63,167,70,.16)); }
.ppc-drawer-tool-icon{
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--pixel-blue), var(--pixel-green)); color: #fff;
}
.ppc-drawer-tool-icon svg{ width: 16px; height: 16px; }
.ppc-drawer-tool-text{ flex: 1; min-width: 0; }
.ppc-drawer-tool-badge{
  flex: none; padding: 3px 8px; border-radius: 999px;
  background: var(--pixel-green); color: #fff;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
}

/* Mobile drawer footer: one account row + three compact tiles
   (was up to five full-width stacked buttons) */
.ppc-drawer-foot{ gap: 10px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
.ppc-drawer-account{ display: flex; align-items: center; gap: 8px; }
.ppc-drawer-account-link{
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px;
  border-radius: 12px;
  background: #fff; border: 1px solid var(--paper-line);
  color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.ppc-drawer-account-link span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppc-drawer-account-link svg{ flex: none; color: var(--pixel-blue); }
.ppc-drawer-account-link--signin{ background: var(--ink); border-color: var(--ink); color: #fff; }
.ppc-drawer-account-link--signin svg{ color: #fff; }
.ppc-drawer-signout{
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px; background: #fff; border: 1px solid var(--paper-line);
  color: var(--ink-soft);
}
.ppc-drawer-signout:active, .ppc-drawer-account-link:active{ background: var(--paper-dim); }
.ppc-drawer-tiles{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ppc-drawer-tile{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: 58px; border-radius: 12px;
  background: #fff; border: 1px solid var(--paper-line);
  color: var(--ink); font-size: 12px; font-weight: 600; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.ppc-drawer-tile:active{ background: var(--paper-dim); }
.ppc-drawer-tile-icon{ position: relative; display: grid; place-items: center; color: var(--ink-soft); }
.ppc-drawer-tile--cart .ppc-drawer-tile-icon{ color: var(--pixel-blue); }
.ppc-drawer-tile--wa .ppc-drawer-tile-icon{ color: #25D366; }
.ppc-drawer-tile-count{
  position: absolute; top: -6px; right: -10px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px;
  background: var(--pixel-magenta); color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}

/* =========================================================
   ONLINE DESIGNER (inc/designer.php + assets/js/designer/)
   ========================================================= */
.ppcd-launch{
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center;
  margin: 16px 0 6px; padding: 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(46,111,242,.07), rgba(227,28,121,.07));
  border: 1.5px solid rgba(110,47,242,.22);
}
.ppcd-launch-icon{ width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--pixel-blue), var(--pixel-magenta)); }
.ppcd-launch-body strong{ display: block; font-family: var(--font-display); font-size: 1rem; }
.ppcd-launch-body p{ margin: 3px 0 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }
.ppcd-launch-btn{ grid-column: 1 / -1; width: 100%; justify-content: center; margin-top: 8px; }

html.ppcd-lock, html.ppcd-lock body{ overflow: hidden; }
.ppcd-modal{
  position: fixed; inset: 0; z-index: 100000;
  display: none; grid-template-rows: auto 1fr auto;
  background: #F4F3EF; color: var(--ink);
  font-family: var(--font-body, inherit);
}
.ppcd-modal.is-open{ display: grid; }
.ppcd-modal button{ font-family: inherit; cursor: pointer; }
.ppcd-modal button:disabled{ opacity: .35; cursor: default; }

.ppcd-top{ display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--paper-line); min-height: 60px; }
.ppcd-title{ display: flex; flex-direction: column; min-width: 0; max-width: 32%; }
.ppcd-title strong{ font-family: var(--font-display); font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppcd-title span{ font-family: var(--font-mono); font-size: .7rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppcd-sides{ display: inline-flex; padding: 3px; border-radius: 999px; background: var(--paper-dim); }
.ppcd-sides button{ border: 0; background: none; padding: 6px 14px; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.ppcd-sides button.is-active{ background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ppcd-top-tools{ display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ppcd-icon{ width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--paper-line); background: #fff; border-radius: 10px; color: var(--ink); }
.ppcd-icon:hover:not(:disabled){ border-color: var(--pixel-blue); }
.ppcd-zoom{ display: inline-flex; border: 1px solid var(--paper-line); border-radius: 10px; overflow: hidden; }
.ppcd-zoom button{ border: 0; background: #fff; height: 36px; min-width: 34px; font-size: 1rem; }
.ppcd-zoom .ppcd-zoom-val{ font-family: var(--font-mono); font-size: .74rem; min-width: 54px; border-inline: 1px solid var(--paper-line); }
.ppcd-preview-tog{ display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-soft); padding: 0 6px; white-space: nowrap; }
.ppcd-top-end{ display: flex; align-items: center; gap: 8px; }
.ppcd-done{ white-space: nowrap; }

.ppcd-body{ display: grid; grid-template-columns: 78px 300px 1fr 290px; min-height: 0; }
.ppcd-rail{ display: flex; flex-direction: column; gap: 4px; padding: 10px 6px; background: #fff; border-right: 1px solid var(--paper-line); }
.ppcd-rail button{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 0; background: none; border-radius: 10px; font-size: .68rem; color: var(--ink-soft); }
.ppcd-rail button:hover{ background: var(--paper-dim); color: var(--ink); }
.ppcd-rail button.is-active{ background: rgba(46,111,242,.1); color: var(--pixel-blue); }
.ppcd-panel, .ppcd-props{ background: #fff; overflow-y: auto; padding: 16px; min-height: 0; }
.ppcd-panel{ border-right: 1px solid var(--paper-line); }
.ppcd-props{ border-left: 1px solid var(--paper-line); }
.ppcd-panel-head, .ppcd-props-head{ position: relative; margin-bottom: 12px; }
.ppcd-panel h3, .ppcd-props h3{ margin: 0; font-family: var(--font-display); font-size: 1rem; }
.ppcd-panel-head p{ margin: 4px 0 0; font-size: .78rem; color: var(--ink-soft); }
.ppcd-sheet-close{ display: none; position: absolute; top: -4px; right: -4px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--paper-dim); font-size: 1.2rem; line-height: 1; }
.ppcd-muted{ font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }

.ppcd-tpl-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ppcd-tpl{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--paper-line); border-radius: 10px; background: var(--paper); transition: border-color .15s ease, transform .15s ease; }
.ppcd-tpl:hover{ border-color: var(--pixel-blue); transform: translateY(-1px); }
.ppcd-tpl canvas{ max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.ppcd-tpl span{ font-size: .72rem; color: var(--ink-soft); }
.ppcd-tpl--blank{ justify-content: center; min-height: 96px; border-style: dashed; }
.ppcd-add-text{ display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: 12px 14px; border: 1px solid var(--paper-line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.ppcd-add-text:hover{ border-color: var(--pixel-blue); }
.ppcd-add-text--0{ font-size: 1.35rem; font-weight: 700; }
.ppcd-add-text--1{ font-size: 1.05rem; font-weight: 600; }
.ppcd-add-text--2{ font-size: .88rem; }
.ppcd-upload-btn, .ppcd-wide{ width: 100%; justify-content: center; margin-bottom: 10px; }
.ppcd-img-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ppcd-img{ aspect-ratio: 1; padding: 6px; border: 1px solid var(--paper-line); border-radius: 8px; background: repeating-conic-gradient(#f1f1f1 0 25%, #fff 0 50%) 50% / 14px 14px; }
.ppcd-img img{ width: 100%; height: 100%; object-fit: contain; }
.ppcd-shape-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ppcd-shape{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; border: 1px solid var(--paper-line); border-radius: 10px; background: var(--paper); color: var(--pixel-blue); font-size: .72rem; }
.ppcd-shape span{ color: var(--ink-soft); }
.ppcd-shape:hover{ border-color: var(--pixel-blue); }

.ppcd-stage{ position: relative; overflow: hidden; min-height: 0; }
.ppcd-stage canvas{ display: block; }
.ppcd-hint{ display: none; }

.ppcd-props-empty h3{ margin-bottom: 6px; }
.ppcd-props-empty p{ font-size: .82rem; color: var(--ink-soft); }
.ppcd-props-empty ul{ padding-left: 18px; font-size: .8rem; color: var(--ink-soft); line-height: 1.8; }
.ppcd-textarea{ width: 100%; min-height: 70px; padding: 9px 11px; border: 1px solid var(--paper-line); border-radius: 10px; font: inherit; font-size: .92rem; resize: vertical; margin-bottom: 10px; }
.ppcd-field{ display: block; margin-bottom: 12px; }
.ppcd-field > span{ display: block; font-size: .72rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.ppcd-select, .ppcd-input{ width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--paper-line); border-radius: 10px; background: #fff; font: inherit; font-size: .88rem; }
.ppcd-range{ width: 100%; accent-color: var(--pixel-blue); }
.ppcd-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ppcd-seg{ display: flex; gap: 4px; }
.ppcd-seg button{ flex: 1; height: 36px; display: grid; place-items: center; border: 1px solid var(--paper-line); background: #fff; border-radius: 8px; color: var(--ink-soft); }
.ppcd-seg button.is-active{ border-color: var(--pixel-blue); color: var(--pixel-blue); background: rgba(46,111,242,.08); }
.ppcd-swatches{ display: flex; flex-wrap: wrap; gap: 6px; }
.ppcd-sw{ width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); padding: 0; }
.ppcd-sw.is-active{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pixel-blue); }
.ppcd-picker{ width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); cursor: pointer; }
.ppcd-picker::-webkit-color-swatch-wrapper{ padding: 0; }
.ppcd-picker::-webkit-color-swatch{ border: 0; border-radius: 50%; opacity: 0; }
.ppcd-check{ display: flex; align-items: center; gap: 8px; font-size: .86rem; margin: 4px 0 10px; }
.ppcd-actions{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--paper-line); }
.ppcd-act{ display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border: 1px solid var(--paper-line); background: #fff; border-radius: 8px; font-size: .64rem; color: var(--ink-soft); }
.ppcd-act:hover{ border-color: var(--pixel-blue); color: var(--ink); }
.ppcd-act.is-danger:hover{ border-color: #B3261E; color: #B3261E; }
.ppcd-dpi{ padding: 10px 12px; border-radius: 10px; font-size: .82rem; line-height: 1.45; }
.ppcd-dpi.is-good{ background: #EAF6EC; color: #1E7A34; }
.ppcd-dpi.is-ok{ background: #FFF6E5; color: #8A5A00; }
.ppcd-dpi.is-bad{ background: #FDECEC; color: #B3261E; }

.ppcd-foot{ display: flex; align-items: center; gap: 16px; padding: 7px 14px; background: #fff; border-top: 1px solid var(--paper-line); font-size: .74rem; color: var(--ink-soft); min-height: 34px; }
.ppcd-legend{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ppcd-legend i{ display: inline-block; width: 16px; height: 0; margin-left: 10px; }
.ppcd-legend i.l-bleed{ height: 10px; background: rgba(255,255,255,.6); outline: 1px solid var(--paper-line); margin-left: 0; }
.ppcd-legend i.l-trim{ border-top: 2px dashed #E31C79; }
.ppcd-legend i.l-safe{ border-top: 2px dotted #2E6FF2; }
.ppcd-status{ margin-left: auto; text-align: right; }
.ppcd-status.is-warn{ color: #B3261E; font-weight: 600; }

.ppcd-modal.is-busy::after{ content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%232E6FF2' stroke-width='5' stroke-dasharray='90 40'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center no-repeat; z-index: 5; }
.ppcd-dialog{ position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(11,11,15,.4); padding: 16px; }
.ppcd-dialog-box{ width: min(520px, 100%); max-height: 80vh; overflow: auto; background: #fff; border-radius: var(--radius-md); padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.ppcd-dialog-box h3{ margin: 0 0 6px; font-family: var(--font-display); }
.ppcd-dialog-box p{ margin: 0 0 12px; color: var(--ink-soft); font-size: .9rem; }
.ppcd-issues{ list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ppcd-issues li{ padding: 10px 12px; border-radius: 10px; font-size: .86rem; line-height: 1.45; }
.ppcd-issues li.is-bad{ background: #FDECEC; color: #B3261E; }
.ppcd-issues li.is-warn{ background: #FFF6E5; color: #8A5A00; }
.ppcd-issues li.is-info{ background: var(--paper-dim); color: var(--ink-soft); }
.ppcd-dialog-actions{ display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.ppcd-toast{ position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100001; max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 12px; background: #0B0B0F; color: #fff; font-size: .9rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: opacity .4s ease, transform .4s ease; }
.ppcd-toast.is-out{ opacity: 0; transform: translate(-50%, 10px); }

/* ---- tablet and phone: canvas first, tools as bottom sheets ---- */
@media (max-width: 1180px){
  .ppcd-body{ grid-template-columns: 72px 260px 1fr 250px; }
  .ppcd-preview-tog{ display: none; }
}
@media (max-width: 900px){
  .ppcd-top{ gap: 8px; padding: 8px 10px; flex-wrap: wrap; min-height: 0; }
  .ppcd-title{ max-width: none; flex: 1; order: 1; }
  .ppcd-top-end{ order: 2; }
  .ppcd-top-tools{ order: 3; width: 100%; margin: 0; justify-content: space-between; }
  .ppcd-sides{ order: 4; width: 100%; justify-content: center; }
  .ppcd-sides[hidden]{ display: none; }
  .ppcd-preview-tog{ display: inline-flex; }
  .ppcd-done{ padding-left: 14px; padding-right: 14px; font-size: .86rem; }
  .ppcd-body{ position: relative; grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .ppcd-stage{ grid-row: 1; }
  .ppcd-rail{ grid-row: 2; flex-direction: row; justify-content: space-around; padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); border-right: 0; border-top: 1px solid var(--paper-line); }
  .ppcd-rail button{ flex: 1; padding: 8px 2px; }
  .ppcd-panel, .ppcd-props{
    position: absolute; left: 0; right: 0; bottom: 66px; z-index: 3;
    max-height: 52%; border: 0; border-top: 1px solid var(--paper-line);
    border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.12);
    display: none;
  }
  .ppcd-modal.show-panel:not(.has-sel) .ppcd-panel{ display: block; }
  .ppcd-modal.has-sel .ppcd-props{ display: block; }
  .ppcd-sheet-close{ display: block; }
  .ppcd-tpl-grid{ grid-template-columns: repeat(3, 1fr); }
  .ppcd-foot{ display: none; }
  .ppcd-hint{ display: block; position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; text-align: center; pointer-events: none; }
  .ppcd-hint:not(:empty){ width: fit-content; max-width: calc(100% - 20px); margin: 0 auto; padding: 8px 12px; border-radius: 10px; background: rgba(11,11,15,.86); color: #fff; font-size: .8rem; line-height: 1.4; }
  .ppcd-hint.is-warn:not(:empty){ background: #B3261E; }
  .ppcd-actions{ grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 520px){
  .ppcd-tpl-grid{ grid-template-columns: 1fr 1fr; }
  .ppcd-zoom .ppcd-zoom-val{ min-width: 46px; }
}

/* ---- designer v2: template categories, icons, font picker ---- */
.ppcd-chips{ display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; scrollbar-width: thin; }
.ppcd-chips button{ flex: none; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--paper-line); background: #fff; font-size: .74rem; color: var(--ink-soft); white-space: nowrap; }
.ppcd-chips button.is-active{ background: var(--ink); border-color: var(--ink); color: #fff; }
.ppcd-chips--small button{ padding: 4px 9px; font-size: .7rem; }
.ppcd-tpl-pick{ display: block; width: 100%; padding: 0; border: 0; background: none; }
.ppcd-tpl-pick canvas{ display: block; margin: 0 auto; }
.ppcd-tpl-dots{ display: flex; gap: 5px; justify-content: center; }
.ppcd-tpl-dots button{ width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); padding: 0; }
.ppcd-tpl-dots button.is-active{ box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--pixel-blue); }
.ppcd-search{ margin-bottom: 10px; }
.ppcd-icon-cat{ margin: 14px 0 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.ppcd-icon-grid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ppcd-icon-btn{ aspect-ratio: 1; padding: 6px; border: 1px solid var(--paper-line); border-radius: 10px; background: var(--paper); display: grid; place-items: center; }
.ppcd-icon-btn:hover{ border-color: var(--pixel-blue); background: #fff; }
.ppcd-icon-btn canvas{ width: 100%; height: auto; max-width: 40px; }
.ppcd-fontpick{ position: relative; }
.ppcd-fontpick-btn{ width: 100%; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border: 1px solid var(--paper-line); border-radius: 10px; background: #fff; text-align: left; }
.ppcd-fontpick-btn span{ font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppcd-fontpick-btn small{ font-size: .68rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .05em; }
.ppcd-fontpick-panel{ margin-top: 8px; padding: 10px; border: 1px solid var(--paper-line); border-radius: 12px; background: var(--paper); }
.ppcd-fontlist{ max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ppcd-fontrow{ text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font-size: 1.1rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppcd-fontrow:hover{ background: #fff; }
.ppcd-fontrow.is-active{ background: rgba(46,111,242,.1); color: var(--pixel-blue); }
.ppcd-seg button{ font-size: .78rem; }
@media (max-width: 900px){ .ppcd-icon-grid{ grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 520px){ .ppcd-icon-grid{ grid-template-columns: repeat(5, 1fr); } }

/* ---- designer v3: menu, dialogs, QR, saved designs ---- */
.ppcd-menu{ position: relative; }
.ppcd-menu-list{ position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 230px; padding: 6px; background: #fff; border: 1px solid var(--paper-line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.14); }
.ppcd-menu-list button{ display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: 8px; font-size: .86rem; color: var(--ink); }
.ppcd-menu-list button:hover{ background: var(--paper-dim); }
.ppcd-qr-add{ display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 6px; padding: 12px; border: 1.5px dashed rgba(46,111,242,.4); border-radius: 12px; background: rgba(46,111,242,.05); color: var(--pixel-blue); text-align: left; }
.ppcd-qr-add:hover{ border-style: solid; }
.ppcd-qr-add span{ display: flex; flex-direction: column; color: var(--ink); }
.ppcd-qr-add small{ color: var(--ink-soft); font-size: .74rem; }
.ppcd-dialog-box{ position: relative; }
.ppcd-dialog-x{ display: block; top: 14px; right: 14px; }
.ppcd-dialog-body .ppcd-field{ margin-bottom: 12px; }
.ppcd-dialog-link{ display: inline-block; margin-top: 12px; font-size: .84rem; color: var(--pixel-blue); }
.ppcd-saved-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.ppcd-saved{ display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--paper-line); border-radius: 10px; background: var(--paper); text-align: left; }
.ppcd-saved:hover{ border-color: var(--pixel-blue); }
.ppcd-saved img{ width: 100%; height: 90px; object-fit: contain; background: #fff; border-radius: 6px; }
.ppcd-saved-noimg{ display: block; height: 90px; border-radius: 6px; background: var(--paper-dim); }
.ppcd-saved strong{ font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppcd-saved small{ font-size: .7rem; color: var(--ink-soft); }
.ppcd-launch-mine{ grid-column: 1 / -1; justify-self: center; font-size: .82rem; color: var(--pixel-blue); }
@media (max-width: 900px){ .ppcd-top-end .ppcd-icon{ width: 34px; height: 34px; } }

/* My Account > My designs */
.ppcd-mine-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.ppcd-mine-card{ display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--paper-line); border-radius: var(--radius-md); background: #fff; }
.ppcd-mine-card img, .ppcd-mine-noimg{ width: 100%; height: 140px; object-fit: contain; border-radius: 8px; background: var(--paper); }
.ppcd-mine-card strong{ font-size: .92rem; }
.ppcd-mine-card small{ font-size: .76rem; color: var(--ink-soft); }
.ppcd-mine-actions{ display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.ppcd-mine-actions form{ margin: 0; }
.ppcd-mine-del{ background: none !important; color: #B3261E !important; border: 0 !important; padding: 0 6px !important; }

/* "Upload or design your artwork" button lands here: flash the designer card too */
.ppcd-launch{ transition: box-shadow .3s ease, border-color .3s ease; }
.ppcd-launch.is-highlight{ border-color: var(--pixel-magenta); box-shadow: 0 0 0 4px rgba(227,28,121,.15); }

/* second free-tool pill (Design Online) sits beside the SVG converter one */
.header-tool-link + .header-tool-link{ margin-left: 2px; }
.header-tool-link--design svg{ color: var(--pixel-magenta); }
.header-tool-link--design{ border-color: rgba(227,28,121,.3); background: linear-gradient(135deg, rgba(227,28,121,.07), rgba(110,47,242,.08)); }
.header-tool-link--design:hover, .header-tool-link--design:focus-visible{ border-color: var(--pixel-magenta); }
.ppc-drawer-tool + .ppc-drawer-tool{ margin-top: 6px; }
.ppc-drawer-tool--design{ background: linear-gradient(135deg, rgba(227,28,121,.07), rgba(110,47,242,.09)); }
.ppc-drawer-tool--design .ppc-drawer-tool-icon{ background: linear-gradient(135deg, var(--pixel-magenta), var(--pixel-purple, #6E2FF2)); }

/* =========================================================
   DESIGN ONLINE landing page (design-online.php)
   ========================================================= */
.ppc-do{ padding-top: 40px; padding-bottom: 60px; }
.ppc-do-hero{ max-width: 820px; margin: 0 auto 30px; text-align: center; }
.ppc-do-hero h1{ margin: 8px 0 12px; font-size: clamp(2rem, 4.5vw, 3.2rem); background: linear-gradient(90deg, var(--pixel-blue), var(--pixel-purple, #6E2FF2), var(--pixel-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ppc-do-hero p{ color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; margin: 0 auto 16px; }
.ppc-do-points{ list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; }
.ppc-do-points li{ padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--paper-line); font-size: .82rem; font-weight: 600; }
.ppc-do-steps{ list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 980px; margin: 0 auto 40px; padding: 0; }
.ppc-do-steps li{ counter-increment: s; position: relative; padding: 18px 18px 18px 62px; border-radius: var(--radius-md); background: var(--paper); border: 1px solid var(--paper-line); }
.ppc-do-steps li::before{ content: counter(s); position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pixel-magenta); color: #fff; font-weight: 700; }
.ppc-do-steps strong{ display: block; }
.ppc-do-steps span{ font-size: .88rem; color: var(--ink-soft); }
.ppc-do-products h2{ text-align: center; margin: 0 0 18px; }
.ppc-do-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ppc-do-card{ display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; background: #fff; border: 1px solid var(--paper-line); color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ppc-do-card:hover, .ppc-do-card:focus-visible{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,20,40,.1); border-color: var(--pixel-magenta); }
.ppc-do-card-img{ display: block; aspect-ratio: 1; background: var(--paper); }
.ppc-do-card-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ppc-do-card-body{ display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.ppc-do-card-body strong{ font-size: .95rem; line-height: 1.35; }
.ppc-do-card-cta{ font-size: .84rem; font-weight: 600; color: var(--pixel-magenta); }
.ppc-do-help{ margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(46,111,242,.08), rgba(227,28,121,.08)); border: 1px solid var(--paper-line); }
.ppc-do-help h2{ margin: 0 0 6px; font-size: 1.35rem; }
.ppc-do-help p{ margin: 0; color: var(--ink-soft); }
@media (max-width: 760px){ .ppc-do-steps{ grid-template-columns: 1fr; } .ppc-do-help{ flex-direction: column; align-items: flex-start; } }

/* Homepage hero: 4th benefit links to the free designer */
.hero-trust-link{ display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.hero-trust-link:hover, .hero-trust-link:focus-visible{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Homepage slideshow: smaller on desktop so the headline leads (mobile unchanged) */
@media (min-width: 1025px){
  .hero .container{ grid-template-columns: 1.25fr .75fr; }
  .hero-visual .ppc-slideshow{ max-width: 420px; margin-left: auto; }
}

/* ---- designer v4: proof, layers, align, brand colours ---- */
.ppcd-proof{ display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 6px 0 14px; padding: 16px; border-radius: 12px; background: #E9E7E1; }
.ppcd-proof-item{ margin: 0; text-align: center; }
.ppcd-proof-item canvas{ max-width: 100%; height: auto; box-shadow: 0 6px 18px rgba(20,20,40,.18); border-radius: 2px; }
.ppcd-proof-item figcaption{ margin-top: 6px; font-size: .78rem; color: var(--ink-soft); font-weight: 600; }
.ppcd-proof-ok{ align-items: flex-start; padding: 12px; border-radius: 10px; background: #FFF6E5; border: 1px solid #F5D69A; line-height: 1.45; }
.ppcd-proof-ok input{ margin-top: 3px; width: 18px; height: 18px; accent-color: var(--pixel-green); flex: none; }
.ppcd-dialog-box{ width: min(640px, 100%); }
.ppcd-layers{ display: flex; flex-direction: column; gap: 4px; }
.ppcd-layer{ display: flex; align-items: center; gap: 6px; }
.ppcd-layer-name{ flex: 1; min-width: 0; text-align: left; padding: 8px 10px; border: 1px solid var(--paper-line); border-radius: 8px; background: #fff; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppcd-layer-name:hover{ border-color: var(--pixel-blue); }
.ppcd-layer-lock{ width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--paper-line); border-radius: 8px; background: #fff; color: var(--ink-soft); }
.ppcd-layer-lock.is-on{ color: var(--pixel-magenta); border-color: var(--pixel-magenta); }
.ppcd-align button{ flex: 1; }
.ppcd-brand-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed var(--paper-line); }
.ppcd-brand-row small{ font-size: .68rem; color: var(--ink-soft); margin-right: 2px; }
.ppcd-brand-add{ margin-top: 6px; padding: 0; border: 0; background: none; font-size: .74rem; color: var(--pixel-blue); cursor: pointer; }
.ppcd-wide svg{ vertical-align: -2px; margin-right: 4px; }
.ppcd-font-group{ display: block; padding: 8px 10px 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.ppcd-brand-logo{ width: 120px; margin-bottom: 6px; }
.ppcd-seg button.is-danger{ color: #B3261E; }

/* =========================================================
   FREE PDF TOOLS (pdf-tools.php + assets/js/pdf-tools/)
   ========================================================= */
.ppt{ padding-top: 34px; padding-bottom: 60px; }
.ppt-hero{ max-width: 820px; margin: 0 auto 24px; text-align: center; }
.ppt-hero h1{ margin: 8px 0 10px; font-size: clamp(2rem, 4.4vw, 3rem); }
.ppt-hero p{ color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; margin: 0 auto; }
.ppt-hero--tool .ppt-card-icon{ margin: 0 auto 6px; width: 60px; height: 60px; border-radius: 16px; }
.ppt-crumbs{ font-size: .84rem; color: var(--ink-soft); margin-bottom: 8px; }
.ppt-crumbs a{ color: var(--pixel-blue); }
.ppt-chips{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px; }
.ppt-chips button{ padding: 8px 16px; border-radius: 999px; border: 1px solid var(--paper-line); background: #fff; font: inherit; font-size: .88rem; cursor: pointer; }
.ppt-chips button.is-active{ background: var(--ink); color: #fff; border-color: var(--ink); }
.ppt-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ppt-grid--small{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ppt-card{ display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--paper-line); color: var(--ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.ppt-card:hover, .ppt-card:focus-visible{ transform: translateY(-2px); border-color: var(--c, var(--pixel-blue)); box-shadow: 0 12px 26px rgba(20,20,40,.08); }
.ppt-card[hidden]{ display: none; }
.ppt-card-icon{ width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--c, var(--pixel-blue)); background: color-mix(in srgb, var(--c, #2E6FF2) 12%, #fff); }
.ppt-card strong{ font-family: var(--font-display); font-size: 1rem; }
.ppt-card > span:not(.ppt-card-icon){ font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }
.ppt-card--all{ justify-content: center; align-items: center; color: var(--pixel-blue); }
.ppt-admin-off{ max-width: 900px; margin: 0 auto 10px; padding: 10px 14px; border-radius: 10px; background: #FDECEC; color: #B3261E; font-weight: 600; font-size: .86rem; }

.ppt-app{ max-width: 1100px; margin: 0 auto; position: relative; }
.ppt-app.is-busy::after{ content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%232E6FF2' stroke-width='5' stroke-dasharray='90 40'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center 120px no-repeat; border-radius: var(--radius-md); z-index: 3; }
.ppt-drop{ display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 54px 20px; border: 2px dashed rgba(46,111,242,.35); border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(46,111,242,.04), rgba(227,28,121,.04)); color: var(--pixel-blue); text-align: center; transition: border-color .15s ease, background .15s ease; }
.ppt-drop.is-over{ border-color: var(--pixel-magenta); background: rgba(227,28,121,.06); }
.ppt-drop p{ margin: 0; color: var(--ink-soft); font-size: .9rem; }
.ppt-pick{ font-size: 1.05rem; padding: 14px 28px; }
.ppt-work{ display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.ppt-main{ min-width: 0; }
.ppt-side{ position: sticky; top: 100px; padding: 18px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--paper-line); }
.ppt-field{ display: block; margin-bottom: 12px; }
.ppt-field > span{ display: block; font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 5px; }
.ppt-field small{ display: block; margin-top: 4px; font-size: .76rem; color: var(--ink-soft); }
.ppt-input{ width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--paper-line); border-radius: 10px; background: #fff; font: inherit; font-size: .9rem; }
.ppt-input[type="color"]{ padding: 3px; height: 40px; }
.ppt-input[type="range"]{ padding: 0; accent-color: var(--pixel-blue); }
.ppt-grid2{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ppt-check{ display: flex; gap: 8px; align-items: center; font-size: .88rem; margin: 4px 0 12px; }
.ppt-help{ font-size: .86rem; color: var(--ink-soft); line-height: 1.55; margin: 0 0 12px; }
.ppt-go{ width: 100%; justify-content: center; margin-top: 6px; }
.ppt-wide, .ppt-add{ width: 100%; justify-content: center; margin: 4px 0 10px; }
.ppt-link{ border: 0; background: none; color: var(--pixel-blue); font: inherit; font-size: .84rem; cursor: pointer; padding: 0 0 8px; }
.ppt-status{ min-height: 22px; margin-top: 12px; text-align: center; font-size: .9rem; color: var(--ink-soft); }
.ppt-status.is-bad{ color: #B3261E; font-weight: 600; }
.ppt-fileinfo{ display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--paper-line); margin-bottom: 14px; }
.ppt-fileinfo span{ font-size: .84rem; color: var(--ink-soft); }
.ppt-preview{ display: inline-block; transition: transform .25s ease; }
.ppt-preview canvas{ max-width: 100%; box-shadow: 0 8px 22px rgba(20,20,40,.14); border-radius: 3px; }
.ppt-files{ list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ppt-file{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--paper-line); }
.ppt-file-thumb{ flex: none; width: 56px; height: 64px; display: grid; place-items: center; background: var(--paper); border-radius: 6px; overflow: hidden; font-size: .7rem; color: var(--ink-soft); }
.ppt-file-thumb canvas, .ppt-file-thumb img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.ppt-file-name{ flex: 1; min-width: 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppt-file-name small{ display: block; color: var(--ink-soft); font-size: .76rem; }
.ppt-file-ctl{ display: flex; gap: 4px; }
.ppt-file-ctl button, .ppt-page-ctl button{ width: 32px; height: 32px; border: 1px solid var(--paper-line); background: #fff; border-radius: 8px; cursor: pointer; font-size: .95rem; }
.ppt-file-ctl button:hover, .ppt-page-ctl button:hover{ border-color: var(--pixel-blue); }
.ppt-pages{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ppt-page{ position: relative; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--paper-line); cursor: grab; }
.ppt-page.is-drag{ opacity: .5; }
.ppt-page-img{ display: grid; place-items: center; min-height: 170px; transition: transform .2s ease; }
.ppt-page-img canvas{ max-width: 100%; max-height: 170px; box-shadow: 0 3px 10px rgba(20,20,40,.14); }
.ppt-page-no{ position: absolute; top: 8px; left: 8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--ink); color: #fff; font-size: .74rem; display: grid; place-items: center; }
.ppt-page-ctl{ display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
.ppt-viewer-bar{ display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; font-size: .88rem; }
.ppt-viewer-bar button{ padding: 6px 12px; border: 1px solid var(--paper-line); background: #fff; border-radius: 8px; cursor: pointer; font: inherit; font-size: .84rem; }
.ppt-viewer-bar button:disabled{ opacity: .4; cursor: default; }
.ppt-viewer-stage{ position: relative; display: flex; justify-content: center; }
.ppt-viewer-stage canvas{ box-shadow: 0 8px 22px rgba(20,20,40,.16); }
.ppt-viewer-layer{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.ppt-item{ position: absolute; cursor: move; touch-action: none; outline: 1.5px dashed rgba(46,111,242,.8); outline-offset: 2px; }
.ppt-item img{ width: 100%; height: 100%; display: block; pointer-events: none; }
.ppt-item--text{ white-space: nowrap; font-family: Helvetica, Arial, sans-serif; line-height: 1; padding: 2px; }
.ppt-item--redact{ background: #000; }
.ppt-item-x{ position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #B3261E; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
.ppt-item-resize{ position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 3px; background: #fff; border: 2px solid var(--pixel-blue); cursor: nwse-resize; touch-action: none; }
.ppt-sigpad{ width: 100%; height: auto; border: 1px solid var(--paper-line); border-radius: 10px; background: #fff; touch-action: none; margin-bottom: 4px; }
.ppt-done{ max-width: 620px; margin: 0 auto; padding: 30px; text-align: center; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--paper-line); }
.ppt-done h3{ margin: 10px 0 4px; }
.ppt-done p{ margin: 0; color: var(--ink-soft); font-size: .9rem; }
.ppt-done .ppt-note{ margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--paper); font-size: .84rem; }
.ppt-done-actions{ display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.ppt-private{ display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px auto 0; font-size: .84rem; color: var(--ink-soft); }
.ppt-related{ margin-top: 44px; }
.ppt-related h2{ font-size: 1.3rem; margin: 0 0 14px; }
.ppt-cta{ margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(46,111,242,.08), rgba(227,28,121,.08)); border: 1px solid var(--paper-line); }
.ppt-cta h2{ margin: 0 0 6px; font-size: 1.3rem; }
.ppt-cta p{ margin: 0; color: var(--ink-soft); }
@media (max-width: 860px){
  .ppt-work{ grid-template-columns: 1fr; }
  .ppt-side{ position: static; }
  .ppt-cta{ flex-direction: column; align-items: flex-start; }
}
/* anything the PDF tools hide must stay hidden, whatever its display rule */
.ppt [hidden]{ display: none !important; }

/* =========================================================
   FREE TOOLS menu (inc/free-tools.php)
   ========================================================= */
.ppc-tools-menu{ position: relative; }
.ppc-tools-btn{ cursor: pointer; font: inherit; }
.header-tool-link.ppc-tools-btn{ font-family: var(--font-display); font-size: .82rem; font-weight: 600; }
.ppc-tools-caret{ flex: none; transition: transform .2s ease; }
[data-ppc-tools].is-open .ppc-tools-caret{ transform: rotate(180deg); }
.ppc-tools-panel{ position: absolute; right: 0; top: calc(100% + 10px); z-index: 1000; width: 300px; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--paper-line); box-shadow: 0 18px 40px rgba(20,20,40,.16); animation: ppcToolsIn .16s ease; }
@keyframes ppcToolsIn{ from{ opacity: 0; transform: translateY(-4px); } to{ opacity: 1; transform: none; } }
.ppc-tools-panel[hidden], .ppc-drawer-tools-list[hidden]{ display: none; }
.ppc-tools-head{ margin: 4px 8px 6px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ppc-tools-item{ display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.ppc-tools-item:hover, .ppc-tools-item:focus-visible{ background: var(--paper); }
.ppc-tools-ico{ flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.ppc-tools-txt{ display: flex; flex-direction: column; min-width: 0; }
.ppc-tools-txt strong{ font-family: var(--font-display); font-size: .9rem; }
.ppc-tools-txt small{ font-size: .76rem; color: var(--ink-soft); }
/* the old two separate pills are gone: the single button always shows its label from tablet up */
@media (max-width: 1439px){ .ppc-tools-menu .header-tool-label{ display: inline; } .ppc-tools-menu .header-tool-link{ width: auto; padding: 0 12px 0 10px; } .ppc-tools-menu .header-tool-badge{ position: static; } }
@media (max-width: 1100px){ .ppc-tools-menu .header-tool-label{ display: none; } }
/* mobile drawer: one row that opens */
.ppc-drawer-tools{ margin-top: 8px; }
.ppc-drawer-tools .ppc-drawer-tool{ width: 100%; border: 0; text-align: left; }
.ppc-drawer-tools .ppc-tools-caret{ margin-left: 6px; color: var(--ink-soft); }
.ppc-drawer-tools-list{ padding: 4px 4px 2px 10px; }
.ppc-drawer-tools-list .ppc-tools-ico{ width: 30px; height: 30px; border-radius: 9px; }

/* ---- free tools batch 1 (tools.php + assets/js/tools/) ---- */
.ppc-tools-all{ display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--paper-line); font-size: .84rem; font-weight: 600; color: var(--pixel-blue); text-decoration: none; }
.ppc-tools-panel{ max-height: min(70vh, 560px); overflow-y: auto; }
.pft-h{ font-size: 1rem; margin: 0 0 10px; }
.pft-checks{ display: flex; flex-direction: column; gap: 2px; }
.pft-checks small{ color: var(--ink-soft); margin-left: 4px; }
.pft-prev{ display: block; max-width: 100%; margin-top: 14px; border-radius: 6px; box-shadow: 0 8px 22px rgba(20,20,40,.14); }
.pft-verdict{ display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 12px; margin-bottom: 12px; border-left: 6px solid; }
.pft-verdict strong{ font-family: var(--font-display); font-size: 1.15rem; }
.pft-verdict.is-good{ background: #EAF6EC; border-color: #3FA746; color: #1E6B2C; }
.pft-verdict.is-ok{ background: #FFF6E5; border-color: #F5A623; color: #8A5A00; }
.pft-verdict.is-bad{ background: #FDECEC; border-color: #B3261E; color: #B3261E; }
.pft-tips{ margin: 0 0 14px; padding-left: 18px; font-size: .88rem; line-height: 1.55; color: var(--ink); }
.pft-color{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; margin: 0 auto; }
.pft-color .ppt-side{ position: static; }
.pft-grid3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pft-grid4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pft-swatch{ height: 90px; border-radius: 12px; border: 1px solid var(--paper-line); margin: 6px 0 10px; }
.pft-cmyk-out{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pft-cmyk-out code{ font-size: 1.05rem; font-weight: 700; }
.pft-copy{ padding: 6px 12px; font-size: .8rem; }
.pft-warn{ color: #8A5A00; font-size: .86rem; margin: 10px 0 0; }
.pft-warn:empty{ display: none; }
.pft-note{ grid-column: 1 / -1; text-align: center; }
.pft-qr-main{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.pft-qr{ width: min(100%, 360px); height: auto; border-radius: 10px; box-shadow: 0 10px 26px rgba(20,20,40,.14); background: repeating-conic-gradient(#f1f1f1 0 25%, #fff 0 50%) 50% / 16px 16px; }
.pft-qr-info{ margin: 10px 0 0; }
.pft-dl{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }
.pft-dl select{ width: auto; }
.pft-print-cta{ font-size: .88rem; font-weight: 600; color: var(--pixel-magenta); margin-top: 6px; }
.pft-sig-prev{ padding: 22px; border-radius: 12px; background: #fff; border: 1px solid var(--paper-line); overflow-x: auto; }
.pft-how{ margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: var(--paper); font-size: .88rem; }
.pft-how summary{ cursor: pointer; font-weight: 600; }
.pft-how ol{ margin: 10px 0 0; padding-left: 18px; line-height: 1.6; }
@media (max-width: 760px){ .pft-color{ grid-template-columns: 1fr; } .pft-grid4{ grid-template-columns: repeat(2, 1fr); } }
/* ---- free tools batch 2 ---- */
.pft-mock-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pft-mock{ margin: 0; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--paper-line); }
.pft-mock canvas{ display: block; width: 100%; height: auto; }
.pft-mock figcaption{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: .86rem; font-weight: 600; }
.pft-bar-prev{ display: flex; justify-content: center; padding: 22px; border-radius: 12px; background: #fff; border: 1px solid var(--paper-line); min-height: 120px; }
.pft-bar-prev svg{ max-width: 100%; height: auto; }
.pft-inv-top{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.pft-inv-top .ppt-side{ position: static; }
.pft-inv-items{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.pft-inv-head, .pft-inv-row{ display: grid; grid-template-columns: 1fr 70px 100px 100px 32px; gap: 6px; align-items: center; }
.pft-inv-head{ font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding: 0 4px; }
.pft-inv-amt{ text-align: right; font-weight: 600; font-size: .9rem; }
.pft-inv-row button{ width: 32px; height: 32px; border: 1px solid var(--paper-line); border-radius: 8px; background: #fff; cursor: pointer; }
.pft-inv-tot{ margin: 10px 0 16px auto; max-width: 320px; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.pft-inv-tot div{ display: flex; justify-content: space-between; }
.pft-inv-total{ padding: 10px 12px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 1.02rem; }
@media (max-width: 760px){ .pft-inv-top{ grid-template-columns: 1fr; } .pft-inv-head{ display: none; } .pft-inv-row{ grid-template-columns: 1fr 60px 80px; } .pft-inv-amt{ grid-column: 2 / 3; } }
/* ---- sign builder ---- */
.psb-tabs{ justify-content: flex-start; margin-bottom: 10px; }
.psb-draw{ border-radius: 12px; overflow: hidden; border: 1px solid var(--paper-line); background: #EEEBE5; }
.psb-draw svg{ display: block; height: auto; }
.psb-out{ margin-top: 14px; }
.psb-table{ width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--paper-line); }
.psb-table th{ width: 34%; text-align: left; padding: 9px 12px; font-weight: 600; color: var(--ink-soft); vertical-align: top; background: var(--paper); }
.psb-table td{ padding: 9px 12px; }
.psb-table tr + tr th, .psb-table tr + tr td{ border-top: 1px solid var(--paper-line); }
.psb-warn{ margin: 12px 0 0; padding: 10px 12px 10px 28px; border-radius: 10px; background: #FFF6E5; color: #8A5A00; }
.psb-pro{ margin-top: 16px; padding: 14px; border-radius: 12px; border: 2px dashed rgba(110,47,242,.35); background: rgba(110,47,242,.04); }
.psb-pro h3{ margin: 0 0 10px; font-size: 1rem; }
.psb-pro h3 small{ font-size: .72rem; font-weight: 600; color: var(--pixel-purple, #6E2FF2); margin-left: 6px; text-transform: uppercase; letter-spacing: .05em; }
.psb-tabs button{ font-size: .82rem; }
.psb-real{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.psb-real-fig{ margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--paper-line); background: #fff; }
.psb-real-fig canvas{ display: block; width: 100%; height: auto; }
.psb-real-fig figcaption{ padding: 8px 12px; font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.psb-mock-canvas{ display: block; width: 100%; height: auto; border-radius: 12px; cursor: grab; touch-action: none; box-shadow: 0 8px 22px rgba(20,20,40,.14); }
.psb-mock-ctl{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; align-items: end; margin-top: 10px; }
@media (max-width: 760px){ .psb-real, .psb-mock-ctl{ grid-template-columns: 1fr; } }
.psb-logo{ padding: 10px 12px; margin: 4px 0 12px; border-radius: 12px; background: var(--paper); border: 1px dashed var(--paper-line); }
.psb-3d-stage{ border-radius: 12px; overflow: hidden; background: #DCD7CE; cursor: grab; touch-action: none; min-height: 200px; }
.psb-3d-stage canvas{ display: block; width: 100% !important; height: auto !important; }
.psb-3d-bar{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.psb-3d-bar .ppt-check{ margin: 0 8px 0 0; }
.psb-files{ margin-top: 16px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--paper-line); }
.psb-files h3{ margin: 0 0 6px; font-size: 1rem; }
.psb-files .pft-dl{ justify-content: flex-start; margin: 6px 0; }
.psb-quote{ margin-top: 16px; padding: 16px; border-radius: 12px; background: #fff; border: 2px solid var(--pixel-magenta); }
.psb-quote h3{ margin: 0 0 4px; }
.psb-hp{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.psb-quote-msg{ margin-top: 8px; font-weight: 600; }
.psb-projects{ margin-top: 10px; max-width: 420px; }
.psb-far-lab{ margin: 4px 0; font-size: .95rem; }
.psb-cmp{ margin-top: 14px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--paper-line); }
.psb-cmp-head{ display: flex; justify-content: space-between; align-items: center; }
.psb-cmp-head h3{ margin: 0; font-size: 1rem; }
.psb-cmp-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.psb-cmp-col h4{ margin: 0 0 6px; font-size: .86rem; }
.psb-cmp-col img{ width: 100%; height: auto; border-radius: 8px; margin-bottom: 8px; }
.psb-cmp-btn{ justify-content: flex-start; }
@media (max-width: 760px){ .psb-cmp-grid{ grid-template-columns: 1fr; } }
.psb-ar{ position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; background: rgba(11,11,15,.6); }
.psb-ar-box{ position: relative; width: min(760px, 100%); max-height: 92vh; overflow: auto; padding: 20px; border-radius: 16px; background: #fff; }
.psb-ar-box h3{ margin: 0 0 4px; }
.psb-ar-x{ position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--paper); font-size: 22px; cursor: pointer; }
.psb-ar-mv{ display: block; width: 100%; height: 55vh; min-height: 280px; border-radius: 12px; background: #EEEBE5; }
.psb-ar-go{ position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap; }
.psb-ar-qr{ margin-top: 12px; text-align: center; font-size: .9rem; }
.psb-ar-qr canvas{ width: 200px; height: 200px; image-rendering: pixelated; }
.psb-layers{ display: flex; flex-direction: column; gap: 2px; }
.psb-sw{ display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); vertical-align: -3px; }
.psb-layers small{ color: var(--ink-soft); }

/* ================= Sign Builder: app layout (v10) ================= */
.psb-root{ max-width: 1480px; margin: 0 auto; }
.psb-root .ppt-input{ min-height: 42px; }
.psb-app{ display: grid; grid-template-columns: 340px minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.psb-steps, .psb-stage, .psb-summary{ min-width: 0; }
/* steps */
.psb-steps{ position: sticky; top: 90px; display: flex; flex-direction: column; max-height: calc(100vh - 110px); padding: 14px; border-radius: 18px; background: #fff; border: 1px solid var(--paper-line); box-shadow: 0 10px 30px rgba(20,20,40,.06); }
.psb-stepnav{ display: flex; gap: 2px; margin-bottom: 10px; }
.psb-stepnav button{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 0; border-radius: 10px; background: none; font-size: .68rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.psb-stepnav button span{ display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--paper-line); background: var(--paper); font-size: .78rem; transition: background .2s, border-color .2s; }
.psb-stepnav button:hover{ background: var(--paper); }
.psb-stepnav button.is-active{ color: var(--ink); }
.psb-stepnav button.is-active span{ background: var(--pixel-magenta); border-color: var(--pixel-magenta); color: #fff; }
.psb-stepnav button.is-done span{ background: #EAF6EC; border-color: #3FA746; color: #1E6B2C; }
.psb-panes{ flex: 1; overflow-y: auto; padding: 2px 4px 2px 2px; }
.psb-pane-title{ margin: 2px 0 12px; font-size: 1.05rem; }
.psb-stepfoot{ display: flex; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--paper-line); }
.psb-stepfoot .ppc-btn{ flex: 1; justify-content: center; }
.psb-stepfoot .ppc-btn:disabled{ opacity: .4; }
.psb-types{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.psb-type{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 12px; border: 1.5px solid var(--paper-line); border-radius: 14px; background: #fff; text-align: center; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.psb-type:hover{ transform: translateY(-1px); border-color: #cfc9c0; }
.psb-type svg{ width: 64px; height: 40px; }
.psb-type strong{ font-size: .74rem; line-height: 1.25; }
.psb-type.is-active{ border-color: var(--pixel-magenta); box-shadow: 0 0 0 3px rgba(227,28,121,.14); }
/* preview */
.psb-stage{ position: sticky; top: 90px; }
.psb-tabs{ display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.psb-tabs::-webkit-scrollbar{ display: none; }
.psb-tabs button{ flex: 0 0 auto; white-space: nowrap; }
/* summary */
.psb-summary{ position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; }
.psb-card{ padding: 18px; border-radius: 18px; background: var(--ink); color: #fff; box-shadow: 0 14px 34px rgba(20,20,40,.18); }
.psb-kicker{ font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.psb-size{ margin: 6px 0 2px; font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1.1; }
.psb-size small{ opacity: .6; font-size: 1.2rem; }
.psb-sub{ font-size: .8rem; opacity: .7; }
.psb-facts{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.psb-fact{ padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.08); }
.psb-fact b{ display: block; font-size: .95rem; }
.psb-fact span{ font-size: .68rem; opacity: .7; }
.psb-price{ margin-bottom: 12px; font-size: 1.3rem; font-weight: 700; }
.psb-price small{ display: block; font-size: .7rem; font-weight: 500; opacity: .7; }
.psb-price--ask{ font-size: 1.05rem; }
.psb-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.psb-actions .ppc-btn{ justify-content: center; }
.psb-actions .psb-primary{ grid-column: 1 / -1; padding-top: 13px; padding-bottom: 13px; }
.psb-card .ppc-btn--outline{ border-color: rgba(255,255,255,.35); background: transparent; color: #fff; }
.psb-more{ margin-top: 12px; padding: 2px 14px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--paper-line); }
.psb-more > summary{ padding: 12px 0; font-weight: 600; cursor: pointer; }
.psb-more .psb-out{ margin-top: 0; }
.psb-more .psb-table th{ width: 42%; }
.psb-status{ position: fixed; left: 50%; bottom: 24px; z-index: 1001; max-width: min(560px, calc(100% - 32px)); transform: translateX(-50%); padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-size: .86rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.psb-status:empty{ display: none; }
.psb-sheet .psb-ar-box{ width: min(620px, 100%); }
.psb-sheet .psb-quote{ margin-top: 0; border: 0; padding: 4px 0 0; }
.psb-bar{ display: none; }
/* tablet: steps + preview side by side, summary underneath */
@media (max-width: 1200px){
	.psb-app{ grid-template-columns: 330px minmax(0, 1fr); }
	.psb-summary{ grid-column: 1 / -1; position: static; max-height: none; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
	.psb-more{ margin-top: 0; }
}
/* phone: an app with one screen at a time and a fixed tab bar */
@media (max-width: 760px){
	.psb-body .ppt-crumbs, .psb-body .ppt-hero--tool, .psb-body .ppt-private, .psb-body .ppt-related, .psb-body .ppt-cta{ display: none; }
	.psb-body{ padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
	.psb-body .container.ppt{ padding-left: 0; padding-right: 0; }
	.psb-root .ppt-input, .psb-root select, .psb-root textarea{ min-height: 46px; font-size: 16px; }   /* 16px stops iPhone zooming in */
	.psb-app{ display: block; }
	.psb-steps, .psb-stage, .psb-summary{ position: static; max-height: none; }
	.psb-app[data-m="design"] .psb-summary, .psb-app[data-m="preview"] .psb-steps, .psb-app[data-m="preview"] .psb-summary, .psb-app[data-m="details"] .psb-stage, .psb-app[data-m="details"] .psb-steps{ display: none; }
	/* design: a small live preview on top, the steps below */
	.psb-app[data-m="design"] .psb-stage{ position: sticky; top: 0; z-index: 20; padding: 8px 12px; background: var(--paper, #F7F5F1); box-shadow: 0 6px 16px rgba(20,20,40,.08); }
	.psb-app[data-m="design"] .psb-tabs, .psb-app[data-m="design"] .psb-mock-ctl, .psb-app[data-m="design"] .psb-3d-bar, .psb-app[data-m="design"] .psb-stage .ppt-help, .psb-app[data-m="design"] .psb-far > :not(canvas), .psb-app[data-m="design"] .psb-real-fig + .psb-real-fig{ display: none; }
	.psb-app[data-m="design"] .psb-draw svg, .psb-app[data-m="design"] .psb-stage canvas{ display: block; max-height: 26vh; width: auto !important; max-width: 100%; margin: 0 auto; }
	.psb-app[data-m="design"] .psb-real{ grid-template-columns: 1fr; }
	.psb-app[data-m="design"] .psb-real-fig figcaption{ display: none; }
	.psb-steps{ border-radius: 0; border: 0; box-shadow: none; padding: 10px 14px 0; }
	.psb-stepnav{ position: sticky; top: calc(26vh + 24px); z-index: 10; margin: 0 -14px 10px; padding: 8px 10px; background: #fff; border-bottom: 1px solid var(--paper-line); }
	.psb-panes{ overflow: visible; }
	.psb-types{ grid-template-columns: 1fr 1fr; }
	.psb-stepfoot{ position: sticky; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 10; margin: 12px -14px 0; padding: 10px 14px; background: #fff; box-shadow: 0 -6px 16px rgba(20,20,40,.06); }
	/* preview: full width */
	.psb-app[data-m="preview"] .psb-stage{ padding: 10px 12px; }
	.psb-mock-ctl{ grid-template-columns: 1fr; }
	/* details */
	.psb-summary{ display: block; padding: 12px; }
	.psb-card{ border-radius: 16px; }
	.psb-status{ bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
	/* the tab bar */
	.psb-bar{ display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding-bottom: env(safe-area-inset-bottom, 0px); background: #fff; border-top: 1px solid var(--paper-line); box-shadow: 0 -8px 24px rgba(20,20,40,.1); }
	.psb-bar-mini{ display: flex; justify-content: space-between; gap: 10px; padding: 7px 16px; font-size: .78rem; font-weight: 700; border-bottom: 1px solid var(--paper-line); }
	.psb-bar-mini span:last-child{ color: var(--pixel-magenta); }
	.psb-bar-tabs{ display: grid; grid-template-columns: 1fr 1fr 1fr 1.25fr; align-items: center; padding: 4px 6px; }
	.psb-bar-tabs button{ display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 6px 0; border: 0; border-radius: 12px; background: none; font-size: .68rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
	.psb-bar-tabs button svg{ width: 22px; height: 22px; }
	.psb-bar-tabs button.is-active{ color: var(--pixel-magenta); }
	.psb-bar-tabs .psb-bar-quote{ margin: 2px 2px; background: linear-gradient(135deg, var(--pixel-magenta), #6E2FF2); color: #fff; }
	.psb-sheet{ align-items: end; padding: 0; }
	.psb-sheet .psb-ar-box{ width: 100%; max-height: 90vh; border-radius: 18px 18px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}
/* v10 fixes: roomy preview on big screens; phone: preview first, fixed heights for the sticky parts */
.psb-draw{ display: flex; align-items: center; justify-content: center; min-height: 360px; }
.psb-draw svg{ max-height: 70vh; }
@media (max-width: 760px){
	.psb-app{ display: flex; flex-direction: column; }
	.psb-stage{ order: -1; }
	.psb-draw{ min-height: 0; }
	.psb-app[data-m="design"] .psb-stage{ height: calc(24vh + 16px); overflow: hidden; display: flex; align-items: center; justify-content: center; }
	.psb-app[data-m="design"] .psb-stage > *{ width: 100%; }
	.psb-app[data-m="design"] .psb-draw svg, .psb-app[data-m="design"] .psb-stage canvas{ max-height: 24vh; }
	.psb-stepnav{ top: calc(24vh + 16px); }
	.psb-app[data-m="preview"] .psb-draw{ min-height: 50vh; }
}
@media (max-width: 760px){
	.psb-app{ align-items: stretch; }   /* every part takes the full phone width */
	.psb-app[data-m="design"] .psb-draw svg{ width: 100% !important; height: 24vh; }
	.psb-stage, .psb-steps, .psb-summary{ width: 100%; max-width: 100vw; }
}
/* Sign Builder phase 2: account saving, reviews, My Account > My signs */
.psb-login{ text-align: center; }
.psb-login .ppc-btn{ display: flex; justify-content: center; margin: 14px 0 8px; }
.psb-stars{ color: #D9D4CC; letter-spacing: 1px; }
.psb-stars .on{ color: #F5A623; }
.psb-reviews > summary{ display: flex; align-items: center; gap: 6px; }
.psb-review{ padding: 10px 0; border-top: 1px solid var(--paper-line); font-size: .86rem; }
.psb-review small{ color: var(--ink-soft); }
.psb-review p{ margin: 4px 0 0; }
.psb-rate{ padding-top: 10px; border-top: 1px solid var(--paper-line); display: flex; flex-direction: column; gap: 8px; }
.psb-rate p{ margin: 0; }
.psb-rate-stars{ display: flex; gap: 4px; }
.psb-rate-stars button{ width: 42px; height: 42px; border: 1px solid var(--paper-line); border-radius: 10px; background: #fff; font-size: 22px; color: #D9D4CC; cursor: pointer; }
.psb-rate-stars button.on{ color: #F5A623; border-color: #F5A623; background: #FFF8EA; }
.psb-rate-done{ font-weight: 600; color: #1E6B2C; }
.ppc-mysigns{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ppc-mysign{ display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--paper-line); }
.ppc-mysign img, .ppc-mysign-ph{ width: 100%; height: 130px; object-fit: contain; border-radius: 10px; background: #E4DED4; }
.ppc-mysign span{ font-size: .8rem; color: var(--ink-soft); }
.ppc-mysign-act{ display: flex; gap: 8px; margin-top: 4px; }
.ppc-mysign-act form{ margin: 0; }
/* notifications fade away by themselves (see autoHide in the builder) */
.psb-status{ padding-right: 38px; cursor: pointer; transition: opacity .3s ease, transform .3s ease; animation: psbToastIn .25s ease; }
.psb-status::after{ content: "\00D7"; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 18px; line-height: 1; opacity: .7; }
.psb-status.is-hiding{ opacity: 0; transform: translate(-50%, 10px); }
@keyframes psbToastIn{ from{ opacity: 0; transform: translate(-50%, 10px); } to{ opacity: 1; transform: translate(-50%, 0); } }
.ppt-legal{ max-width: 900px; margin: 18px auto 0; font-size: .74rem; line-height: 1.5; text-align: center; color: var(--ink-soft); }
/* ===== Sign Builder on phones: no clashes with the site's own floating parts ===== */
@media (max-width: 760px){
	body.psb-body{ --psb-head: 60px; }                               /* the site header (sticky, 60 px) */
	body.psb-body .ppc-back-to-top{ display: none !important; }      /* the tool's tab bar replaces it here */
	body.ppc-drawer-open .psb-bar, body.ppc-drawer-open .psb-status{ display: none !important; }   /* the menu is on top */
	.psb-app[data-m="design"] .psb-stage{ top: var(--psb-head); }     /* the live preview stays under the header, not behind it */
	.psb-stepnav{ top: calc(var(--psb-head) + 24vh + 16px); }
}
@media (max-width: 760px) and (max-height: 700px){                   /* short phones (iPhone SE): smaller preview, more room to work */
	.psb-app[data-m="design"] .psb-stage{ height: calc(18vh + 16px); }
	.psb-app[data-m="design"] .psb-draw svg, .psb-app[data-m="design"] .psb-stage canvas{ max-height: 18vh; height: 18vh; }
	.psb-stepnav{ top: calc(var(--psb-head) + 18vh + 16px); }
}
@media (min-width: 601px) and (max-width: 760px){ body.admin-bar.psb-body{ --psb-head: 106px; } }   /* logged-in admin bar on wider phones */
@media (max-width: 760px){
	body.psb-body{ padding-bottom: calc(var(--psb-bar, 96px) + 8px); }
	.psb-stepfoot{ bottom: var(--psb-bar, 96px); }
	.psb-status{ bottom: calc(var(--psb-bar, 96px) + 12px); }
	.psb-bar-mini span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
	.psb-bar-mini span:first-child{ flex: 0 1 auto; } .psb-bar-mini span:last-child{ flex: 0 1 auto; text-align: right; }
}
@media (max-width: 760px){
	body.psb-body .site-footer{ display: none; }   /* app screen: the tab bar is the bottom of the page; the menu still links everywhere */
	.psb-app[data-m="design"] .psb-panes{ min-height: calc(100vh - var(--psb-head, 60px) - 24vh - var(--psb-bar, 96px) - 150px); }   /* short steps still fill the screen */
}
/* ===== Sign Builder: guide, reviews, FAQ (written into the page for search engines) ===== */
.psb-seo{ max-width: 1100px; margin: 34px auto 0; padding: 0 4px; }
.psb-seo h2{ margin: 34px 0 10px; font-size: 1.45rem; }
.psb-seo p{ line-height: 1.65; color: var(--ink); }
.psb-feat{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.psb-feat > div{ padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--paper-line); }
.psb-feat h3{ margin: 0 0 6px; font-size: 1rem; }
.psb-feat p{ margin: 0; font-size: .9rem; color: var(--ink-soft); }
.psb-how{ padding-left: 22px; line-height: 1.7; }
.psb-faq details{ padding: 12px 16px; margin-bottom: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--paper-line); }
.psb-faq summary{ font-weight: 600; cursor: pointer; }
.psb-faq details p{ margin: 8px 0 0; }
.psb-seo-cta{ margin-top: 22px; text-align: center; }
.psb-reviews-sec{ padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--paper-line); scroll-margin-top: 90px; }
.psb-reviews-sec h2{ margin-top: 0; }
.psb-rev-sum{ font-size: 1.05rem; }
.psb-rev-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 10px 0 16px; }
.psb-rev{ margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--paper); }
.psb-rev p{ margin: 6px 0; font-size: .92rem; }
.psb-rev footer{ font-size: .78rem; color: var(--ink-soft); }
.psb-rate-wrap .psb-rate{ border-top: 0; padding-top: 0; max-width: 520px; }
.psb-card-rate{ display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: .8rem; font-weight: 600; color: #fff; text-decoration: none; opacity: .92; }
.psb-card-rate:hover{ opacity: 1; text-decoration: underline; }
@media (max-width: 760px){
	body.psb-body:not([data-psb-m="details"]) .psb-seo{ display: none; }   /* phones: the guide and reviews are on the Details tab */
	.psb-seo{ padding: 0 14px; margin-top: 10px; }
	.psb-seo h2{ font-size: 1.2rem; }
}
/* vinyl colour swatches */
.psb-swatches{ display: flex; flex-wrap: wrap; gap: 8px; }
.psb-swatch{ width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); cursor: pointer; box-shadow: inset 0 0 0 2px #fff; }
.psb-swatch.is-on{ outline: 3px solid var(--pixel-magenta); outline-offset: 2px; }
/* ================= Design Studio ================= */
.psb-studio-btn{ width: 100%; justify-content: center; margin: 4px 0 12px; }
body.pds-open{ overflow: hidden; }
.pds{ position: fixed; inset: 0; z-index: 100002; display: flex; flex-direction: column; background: #EDEAE4; color: var(--ink); font-size: 14px; }
.pds-top{ display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--paper-line); flex-wrap: wrap; }
.pds-title{ font-size: 1.05rem; margin-right: 8px; }
.pds-board{ display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--ink-soft); }
.pds-board input{ width: 70px; padding: 6px 8px; border: 1px solid var(--paper-line); border-radius: 8px; }
.pds-ic{ width: 38px; height: 38px; border: 1px solid var(--paper-line); border-radius: 10px; background: #fff; font-size: 18px; cursor: pointer; }
.pds-sp{ flex: 1; }
.pds-body{ flex: 1; min-height: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr) 300px; }
.pds-tools{ display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; background: #fff; border-right: 1px solid var(--paper-line); overflow-y: auto; }
.pds-tools button{ display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 0; border-radius: 12px; background: none; font-size: .72rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.pds-tools button span{ font-size: 22px; line-height: 1; }
.pds-tools button:hover{ background: var(--paper); }
.pds-canvas{ position: relative; min-width: 0; padding: 16px; display: flex; flex-direction: column; }
.pds-svg{ flex: 1; width: 100%; min-height: 0; touch-action: none; user-select: none; background: #E4E0D8; border-radius: 14px; }
.pds-board-bg{ filter: drop-shadow(0 6px 18px rgba(20,20,40,.12)); }
.pds-el{ cursor: move; } .pds-el.is-locked{ cursor: default; }
.pds-h{ cursor: pointer; }
.pds-tip{ margin: 8px 0 0; font-size: .75rem; color: var(--ink-soft); text-align: center; }
.pds-panel{ padding: 14px; background: #fff; border-left: 1px solid var(--paper-line); overflow-y: auto; }
.pds-panel h4{ margin: 14px 0 8px; font-size: .9rem; }
.pds-props{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.pds-props > p, .pds-props > h4, .pds-props .pds-row, .pds-props .pds-swatches, .pds-wide{ grid-column: 1 / -1; }
.pds-f{ display: flex; flex-direction: column; gap: 4px; font-size: .72rem; font-weight: 600; color: var(--ink-soft); }
.pds-f input, .pds-f select, .pds-f textarea{ width: 100%; padding: 8px; border: 1px solid var(--paper-line); border-radius: 8px; font: inherit; font-size: .9rem; color: var(--ink); background: #fff; }
.pds-f input[type=color]{ height: 38px; padding: 2px; }
.pds-row{ display: flex; flex-wrap: wrap; gap: 6px; }
.pds-btn{ flex: 1; padding: 8px 10px; border: 1px solid var(--paper-line); border-radius: 9px; background: #fff; font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pds-btn:hover, .pds-btn.is-on{ border-color: var(--pixel-magenta); color: var(--pixel-magenta); }
.pds-del{ color: #B3261E; }
.pds-swatches{ display: flex; flex-wrap: wrap; gap: 6px; }
.pds-swatches button{ width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); cursor: pointer; box-shadow: inset 0 0 0 2px #fff; }
.pds-warn{ color: #B3261E; font-weight: 600; }
.pds-layer{ display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; cursor: pointer; font-size: .82rem; }
.pds-layer:hover{ background: var(--paper); } .pds-layer.is-on{ background: #EEF3FE; }
.pds-li{ width: 22px; text-align: center; font-weight: 700; } .pds-ln{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pds-sw2{ width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
.pds-layer button{ border: 0; background: none; cursor: pointer; font-size: 14px; padding: 2px 4px; }
@media (max-width: 860px){
	.pds-body{ grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; }
	.pds-canvas{ order: 1; padding: 8px; }
	.pds-tools{ order: 2; flex-direction: row; border-right: 0; border-top: 1px solid var(--paper-line); overflow-x: auto; padding: 6px; }
	.pds-tools button{ flex: 0 0 auto; min-width: 64px; }
	.pds-panel{ order: 3; max-height: 38vh; border-left: 0; border-top: 1px solid var(--paper-line); }
	.pds-board{ order: 5; width: 100%; } .pds-top .ppc-btn{ padding: 8px 12px; }
}
.pds-icons{ grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pds-icons button{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border: 1px solid var(--paper-line); border-radius: 10px; background: #fff; font-size: .66rem; cursor: pointer; }
.pds-icons button:hover{ border-color: var(--pixel-magenta); }
.pds-icons svg{ width: 26px; height: 26px; fill: var(--ink); }
.pds-tpls{ grid-column: 1 / -1; display: grid; gap: 8px; }
.pds-tpls button{ display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--paper-line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; }
.pds-tpls button:hover{ border-color: var(--pixel-magenta); }
.pds-tpls small{ color: var(--ink-soft); }
/* Design Studio: the board always fits the screen (tall boards included); zoom handles the detail */
.pds-canvas{ min-height: 0; overflow: hidden; }
.pds-svg{ flex: 1 1 0; height: 100%; min-height: 0; display: block; }
.pds-fit{ width: auto; padding: 0 10px; font-size: .8rem; font-weight: 700; }

/* ================= Android app (html.is-app is set only inside the app) ================= */
.ppc-app-only{ display: none !important; }
html.is-app .ppc-app-nav .ppc-app-only{ display: flex !important; }
html.is-app .ppc-web-only{ display: none !important; }
html.is-app .ppc-getapp{ display: none !important; }
html.is-app body{ overscroll-behavior-y: none; }   /* no pull-to-refresh bounce over the builders */
html.is-app .ppc-app-nav-item{ font-size: 10.5px; }
/* "Get the app" bar for Android visitors in the browser */
.ppc-getapp{ position: fixed; left: 10px; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); z-index: 97; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; background: #fff; border: 1px solid var(--paper-line); border-radius: 16px; box-shadow: 0 12px 32px rgba(11,11,15,.18); }
.ppc-getapp img{ border-radius: 10px; flex: 0 0 auto; }
.ppc-getapp span{ flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ppc-getapp strong{ font-size: .9rem; } .ppc-getapp small{ font-size: .75rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppc-getapp-go{ padding: 8px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: .85rem; text-decoration: none; }
.ppc-getapp-x{ border: 0; background: none; font-size: 22px; line-height: 1; color: var(--ink-soft); padding: 4px 6px; cursor: pointer; }
@media (min-width: 901px){ .ppc-getapp{ display: none; } }
/* The app's home screen (/app/) */
.ppc-apphome{ padding: 22px 0 120px; background: var(--paper, #FAF9F7); min-height: 70vh; }
.ppc-apphome-hi{ margin: 4px 0 18px; }
.ppc-apphome-eyebrow{ margin: 0; font-size: .85rem; font-weight: 600; color: var(--pixel-magenta); }
.ppc-apphome-hi h1{ margin: 2px 0 0; font-size: clamp(1.45rem, 5.5vw, 2rem); line-height: 1.15; }
.ppc-apphome-feat{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ppc-apphome-big{ position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; min-height: 168px; border-radius: 20px; color: #fff; text-decoration: none; overflow: hidden; box-shadow: 0 10px 26px rgba(11,11,15,.14); }
.ppc-apphome-big--0{ background: linear-gradient(140deg, #E31C79, #6E2FF2); }
.ppc-apphome-big--1{ background: linear-gradient(140deg, #2E6FF2, #6E2FF2); }
.ppc-apphome-big .ppc-apphome-ic{ background: rgba(255,255,255,.2); color: #fff; }
.ppc-apphome-big strong{ font-size: 1.05rem; line-height: 1.2; margin-top: auto; }
.ppc-apphome-big small{ font-size: .78rem; opacity: .9; line-height: 1.3; }
.ppc-apphome-go{ position: absolute; top: 14px; right: 16px; font-size: 1.2rem; opacity: .85; }
.ppc-apphome-ic{ display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: var(--c, var(--ink)); background: color-mix(in srgb, var(--c, #888) 13%, #fff); }
.ppc-apphome-sec{ margin-top: 28px; }
.ppc-apphome-head{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.ppc-apphome-head h2{ margin: 0; font-size: 1.15rem; }
.ppc-apphome-head a{ font-size: .85rem; font-weight: 600; color: var(--pixel-magenta); text-decoration: none; }
.ppc-apphome-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ppc-apphome-tile{ display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px; background: #fff; border: 1px solid var(--paper-line); border-radius: 16px; text-decoration: none; color: var(--ink); text-align: center; }
.ppc-apphome-tile strong{ font-size: .72rem; line-height: 1.2; font-weight: 600; }
.ppc-apphome-cats{ display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.ppc-apphome-cat{ scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); }
.ppc-apphome-catimg{ display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #EEEAE3; }
.ppc-apphome-catimg img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ppc-apphome-cat strong{ font-size: .85rem; }
.ppc-apphome-quick{ display: grid; gap: 8px; }
.ppc-apphome-quick a{ display: flex; justify-content: space-between; padding: 15px 16px; background: #fff; border: 1px solid var(--paper-line); border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.ppc-apphome-quick a::after{ content: "\203A"; color: var(--ink-soft); font-size: 1.2rem; line-height: 1; }
@media (min-width: 760px){ .ppc-apphome-grid{ grid-template-columns: repeat(8, 1fr); } .ppc-apphome-cats{ grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; } .ppc-apphome-feat{ max-width: 760px; } }
/* Design Studio top bar on phones: one compact row of controls, more room for the board */
@media (max-width: 600px){
	.pds-top{ gap: 6px; padding: 8px 10px; }
	.pds-title, .pds-sp{ display: none; }
	.pds-ic{ width: 34px; height: 34px; font-size: 16px; }
	.pds-fit{ padding: 0 8px; }
	.pds-top .ppc-btn{ padding: 7px 11px; font-size: .82rem; }
	.pds-top [data-done]{ margin-left: auto; }
	.pds-board{ order: 5; width: 100%; font-size: .8rem; }
	.pds-board input{ width: 62px; padding: 5px 6px; }
}
/* App notifications: the "turn on" card on the app home */
.ppc-push-card{ display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px; background: #fff; border: 1px solid var(--paper-line); border-radius: 18px; box-shadow: 0 6px 18px rgba(11,11,15,.06); }
.ppc-push-card[hidden]{ display: none; }
.ppc-push-bell{ display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 13px; color: #fff; background: linear-gradient(140deg, #FF7A1A, #E31C79); }
.ppc-push-card.is-on .ppc-push-bell{ background: linear-gradient(140deg, #1EA05A, #2E6FF2); }
.ppc-push-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ppc-push-txt strong{ font-size: .95rem; } .ppc-push-txt small{ font-size: .78rem; color: var(--ink-soft); }
.ppc-push-btn{ flex: 0 0 auto; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: .85rem; color: #fff; background: var(--ink); cursor: pointer; }
.ppc-push-card.is-on .ppc-push-btn{ background: #fff; color: var(--ink); border: 1px solid var(--paper-line); }
.ppc-push-btn[hidden]{ display: none; }

/* ===== Designer: photo editing ===== */
.ppcd-photo-acts{ display:grid; grid-template-columns: repeat(4, 1fr); gap:6px; margin: 0 0 12px; }
.ppcd-photo-act{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px 8px; border:1px solid var(--paper-line); border-radius:10px; background:#fff; color:var(--ink); font-size:.74rem; font-weight:600; cursor:pointer; }
.ppcd-photo-act:hover{ border-color: var(--pixel-blue); color: var(--pixel-blue); }
.ppcd-sec{ border-top:1px solid var(--paper-line); }
.ppcd-sec-h{ all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; justify-content:space-between; padding:12px 2px; cursor:pointer; font: 600 .86rem/1.2 var(--font-display); color:var(--ink); }
.ppcd-sec-h svg{ transition: transform .2s; color: var(--ink-soft); }
.ppcd-sec.is-open .ppcd-sec-h svg{ transform: rotate(180deg); }
.ppcd-sec-b{ padding: 0 0 12px; }
.ppcd-filters{ display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; margin-bottom:10px; }
.ppcd-filter{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:3px; cursor:pointer; text-align:center; font-size:.7rem; font-weight:600; color:var(--ink-soft); }
.ppcd-filter img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; border:2px solid transparent; background: var(--paper-dim, #eee); }
.ppcd-filter.is-active img{ border-color: var(--pixel-blue); }
.ppcd-filter.is-active{ color: var(--pixel-blue); }
.ppcd-adj{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:2px 8px; margin-bottom:8px; font-size:.78rem; color:var(--ink-soft); font-weight:600; }
.ppcd-adj .ppcd-range{ grid-column: 1 / -1; }
.ppcd-adj-v{ font: 600 .74rem/1 var(--font-mono, monospace); color: var(--ink); min-width:30px; text-align:right; }
.ppcd-masks{ display:grid; grid-template-columns: repeat(5, 1fr); gap:6px; margin-bottom:8px; }
.ppcd-mask{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; border:1px solid var(--paper-line); border-radius:8px; background:#fff; cursor:pointer; color: var(--ink-soft); font-size:.62rem; font-weight:600; }
.ppcd-mask.is-active{ border-color: var(--pixel-blue); color: var(--pixel-blue); background: rgba(46,111,242,.06); }
.ppcd-check{ display:flex; align-items:center; gap:6px; font-size:.84rem; font-weight:600; margin: 4px 0 8px; cursor:pointer; }
.ppcd-fx{ padding: 4px 0 6px 22px; }
.ppcd-dialog--wide .ppcd-dialog-box{ width: min(900px, 100%); max-height: 92vh; }
.ppcd-crop-ratios{ flex-wrap: wrap; margin-bottom: 12px; }
.ppcd-crop-ratios button{ flex: 0 0 auto; padding: 0 12px; height: 32px; }
.ppcd-crop{ position:relative; margin: 0 auto 14px; touch-action:none; user-select:none; }
.ppcd-crop canvas{ display:block; width:100%; height:100%; }
.ppcd-crop-box{ position:absolute; box-shadow: 0 0 0 9999px rgba(11,11,15,.55); outline: 2px solid #fff; cursor: move;
  background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 33.33% 33.33%; background-position: -1px -1px; }
.ppcd-crop-outer{ overflow:hidden; padding:12px; margin: 0 auto 14px; width: fit-content; max-width:100%; border-radius:10px; background:#1b1b20; }
.ppcd-crop-outer .ppcd-crop{ margin:0; }
.ppcd-crop-h{ position:absolute; width:16px; height:16px; background:#fff; border-radius:3px; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.ppcd-crop-h--nw{ left:-8px; top:-8px; cursor:nwse-resize; } .ppcd-crop-h--ne{ right:-8px; top:-8px; cursor:nesw-resize; } .ppcd-crop-h--sw{ left:-8px; bottom:-8px; cursor:nesw-resize; } .ppcd-crop-h--se{ right:-8px; bottom:-8px; cursor:nwse-resize; }
.ppcd-crop-h--n{ left:calc(50% - 8px); top:-8px; cursor:ns-resize; } .ppcd-crop-h--s{ left:calc(50% - 8px); bottom:-8px; cursor:ns-resize; } .ppcd-crop-h--e{ right:-8px; top:calc(50% - 8px); cursor:ew-resize; } .ppcd-crop-h--w{ left:-8px; top:calc(50% - 8px); cursor:ew-resize; }
.ppcd-bg-acts{ display:flex; flex-wrap:wrap; gap:8px; margin: 4px 0 8px; }
.ppcd-bg-acts .ppc-btn{ display:inline-flex; align-items:center; gap:6px; }
.ppcd-bg-tools{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 12px; align-items:end; }
.ppcd-bg-tools > .ppc-btn{ margin-bottom: 12px; }
.ppcd-bg-view{ position:relative; margin: 4px auto 14px; overflow:auto; border-radius:10px; background: repeating-conic-gradient(#d9d9de 0 25%, #fff 0 50%) 0 0 / 18px 18px; cursor: none; }
.ppcd-bg-canvas{ display:block; touch-action:none; }
.ppcd-bg-ring{ position:absolute; pointer-events:none; border:1.5px solid #fff; border-radius:50%; box-shadow: 0 0 0 1px rgba(0,0,0,.6); transform: translate(-50%, -50%); }
@media (max-width: 700px){ .ppcd-photo-acts{ grid-template-columns: repeat(4, 1fr); } .ppcd-masks{ grid-template-columns: repeat(5, 1fr); } }
.ppcd-bg-view.is-working canvas{ filter: saturate(.6) brightness(.9); }
.ppcd-bg-view{ display:grid; }
.ppcd-bg-view > *{ grid-area: 1 / 1; }
.ppcd-ai-prog{ position:relative; z-index:2; align-self:center; justify-self:stretch; display:grid; place-items:center; pointer-events:none; }
.ppcd-ai-prog-in{ width:min(320px, 86%); margin:auto; padding:16px 18px; border-radius:14px; background:rgba(11,11,15,.82); color:#fff; text-align:center; box-shadow:0 14px 40px rgba(0,0,0,.35); backdrop-filter: blur(6px); }
.ppcd-ai-prog-in strong{ display:block; font: 600 .95rem/1.3 var(--font-display); margin: 6px 0 10px; }
.ppcd-ai-prog-in small{ display:block; margin-top:8px; font-size:.75rem; color:#C8C6C0; min-height:1em; }
.ppcd-ai-bar{ position:relative; height:8px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden; }
.ppcd-ai-bar i{ position:absolute; left:0; top:0; bottom:0; width:3%; border-radius:inherit; background: linear-gradient(90deg,#FF7A1A,#E31C79,#6E2FF2,#2E6FF2); transition: width .25s ease; }
.ppcd-ai-bar.is-busy i{ width:38%; animation: ppcdAiSlide 1.15s ease-in-out infinite; }
@keyframes ppcdAiSlide{ 0%{ left:-40%; } 100%{ left:100%; } }
.ppcd-ai-spark{ display:inline-block; width:26px; height:26px; border-radius:50%; background: conic-gradient(#FF7A1A,#E31C79,#6E2FF2,#2E6FF2,#FF7A1A); -webkit-mask: radial-gradient(circle, transparent 7px, #000 8px); mask: radial-gradient(circle, transparent 7px, #000 8px); animation: ppcdAiSpin 1s linear infinite; }
@keyframes ppcdAiSpin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .ppcd-ai-bar.is-busy i, .ppcd-ai-spark{ animation-duration: 3s; } }
.ppcd-ai-prog[hidden]{ display:none; }
.ppcd-bg-acts .ppc-btn.is-busy{ opacity:.75; cursor:progress; }
/* ===== Designer phase 2: layers tab, pen ===== */
.ppcd-layers--full .ppcd-layer{ display:flex; align-items:center; gap:6px; margin-bottom:6px; border-radius:10px; position:relative; }
.ppcd-layers--full .ppcd-layer.in-group{ margin-left:14px; }
.ppcd-layers--full .ppcd-layer-name{ flex:1; min-width:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ppcd-layer-grip{ display:grid; place-items:center; width:18px; height:30px; color: var(--ink-soft); cursor:grab; touch-action:none; flex:0 0 auto; }
.ppcd-layer-ic{ display:grid; place-items:center; color: var(--ink-soft); flex:0 0 auto; }
.ppcd-layer-eye{ flex:0 0 auto; width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--paper-line); border-radius:8px; background:#fff; color: var(--ink-soft); cursor:pointer; }
.ppcd-layer-eye.is-on{ color: var(--pixel-magenta, #E31C79); border-color: currentColor; }
.ppcd-layer.is-sel .ppcd-layer-name{ border-color: var(--pixel-blue); color: var(--pixel-blue); background: rgba(46,111,242,.06); }
.ppcd-layer.is-hidden .ppcd-layer-name, .ppcd-layer.is-hidden .ppcd-layer-ic{ opacity:.45; text-decoration: line-through; }
.ppcd-layer.is-drag{ opacity:.5; }
.ppcd-layer.drop-above::before, .ppcd-layer.drop-below::after{ content:""; position:absolute; left:0; right:0; height:3px; border-radius:2px; background: var(--pixel-blue); }
.ppcd-layer.drop-above::before{ top:-4px; } .ppcd-layer.drop-below::after{ bottom:-4px; }
.ppcd-layer-group{ margin: 10px 0 4px; font: 700 .66rem/1 var(--font-mono, monospace); letter-spacing:.08em; text-transform:uppercase; color: var(--ink-soft); }
.ppcd-pen{ margin: 4px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--paper-line); }
.ppcd-pen .ppc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.ppcd-pen.is-on{ background: rgba(46,111,242,.05); border-radius: 12px; padding: 10px; border: 1px solid rgba(46,111,242,.25); }
.ppcd-modal.is-drawing .ppcd-stage canvas{ cursor: crosshair !important; }
/* ===== Designer phase 3 ===== */
.ppcd-rail{ overflow-y:auto; scrollbar-width:none; }
@media (max-width: 900px){ .ppcd-rail{ overflow-x:auto; justify-content:flex-start; } .ppcd-rail button{ flex: 0 0 auto; min-width: 56px; } .ppcd-rail button svg{ width:20px; height:20px; } }
.ppcd-sides.ppcd-pages{ display:flex; gap:4px; flex-wrap:nowrap; overflow-x:auto; max-width: 46vw; scrollbar-width:none; }
.ppcd-sides.ppcd-pages button{ min-width:34px; padding: 0 10px; }
.ppcd-page-add, .ppcd-page-menu{ font-weight:700; }
.ppcd-page-acts{ display:grid; gap:8px; }
.ppcd-page-acts .is-danger{ color:#b32d2e; }
.ppcd-resize-btn{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border:1px solid var(--paper-line); border-radius:10px; background:#fff; font-weight:600; font-size:.85rem; color: var(--ink); cursor:pointer; }
.ppcd-resize-btn:hover{ border-color: var(--pixel-blue); color: var(--pixel-blue); }
.ppcd-resize-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:8px; margin: 10px 0 14px; max-height: 46vh; overflow:auto; }
.ppcd-resize-opt{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:2px; padding:10px 12px; border:1px solid var(--paper-line); border-radius:10px; cursor:pointer; background:#fff; }
.ppcd-resize-opt:hover, .ppcd-resize-opt.is-active{ border-color: var(--pixel-blue); background: rgba(46,111,242,.05); }
.ppcd-resize-opt strong{ font-size:.86rem; } .ppcd-resize-opt span{ font-size:.75rem; color: var(--ink-soft); }
.ppcd-resize-custom{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ppcd-resize-custom .ppcd-input{ width: 90px; }
.ppcd-finish-acts{ justify-content:flex-start; }
.ppcd-photo-search{ display:flex; gap:6px; margin-bottom:10px; }
.ppcd-photo-search .ppcd-input{ flex:1; min-width:0; }
.ppcd-photo-grid{ columns: 2; column-gap: 6px; margin-bottom:10px; }
.ppcd-photo{ all:unset; box-sizing:border-box; display:block; width:100%; margin: 0 0 6px; border-radius:8px; overflow:hidden; cursor:pointer; background: var(--paper-dim, #eee); break-inside: avoid; position:relative; }
.ppcd-photo img{ display:block; width:100%; height:auto; min-height:60px; transition: transform .2s; }
.ppcd-photo:hover img{ transform: scale(1.04); }
.ppcd-photo.is-loading::after{ content:""; position:absolute; inset:0; background: rgba(255,255,255,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%232E6FF2' stroke-width='5' stroke-dasharray='90 40'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center no-repeat; }
.ppcd-photo-credit a{ color: inherit; text-decoration: underline; }
.ppcd-brand-colors{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.ppcd-brand-col{ position:relative; width:40px; height:40px; border-radius:10px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.ppcd-brand-col button{ position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; border:0; background:#0B0B0F; color:#fff; font-size:12px; line-height:18px; padding:0; cursor:pointer; opacity:0; transition: opacity .15s; }
.ppcd-brand-col:hover button, .ppcd-brand-col:focus-within button{ opacity:1; }
@media (hover: none){ .ppcd-brand-col button{ opacity:1; } }
.ppcd-brand-add-col{ display:grid; place-items:center; border:2px dashed var(--paper-line); box-shadow:none; color: var(--ink-soft); font-size:1.3rem; cursor:pointer; }
.ppcd-brand-add-col input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.ppcd-brand-sug{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.ppcd-brand-sug small{ color: var(--ink-soft); }
/* Design Online: blank sizes */
.ppc-do-free{ display:flex; align-items:center; gap:16px; max-width:980px; margin: 0 auto 40px; padding: 18px 20px; border-radius: var(--radius-md, 16px); background:#fff; border:1px solid var(--paper-line); }
.ppc-do-free-ic{ flex:none; width:52px; height:52px; display:grid; place-items:center; border-radius:14px; color:#fff; background: linear-gradient(135deg, var(--pixel-blue), var(--pixel-magenta)); }
.ppc-do-free-txt{ flex:1; min-width:0; }
.ppc-do-free h2{ margin:0 0 2px; font-size:1.15rem; }
.ppc-do-free p{ margin:0; color: var(--ink-soft); font-size:.92rem; }
.ppc-do-free .ppc-btn{ flex:none; }
@media (max-width: 640px){ .ppc-do-free{ flex-wrap:wrap; } .ppc-do-free .ppc-btn{ width:100%; justify-content:center; } }
.ppc-do-pick{ width: min(640px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 40px)); padding:0; border:0; border-radius:18px; box-shadow: 0 24px 70px rgba(11,11,15,.28); color: var(--ink); background:#fff; overflow:hidden; }
.ppc-do-pick[open]{ display:flex; flex-direction:column; }
.ppc-do-pick::backdrop{ background: rgba(11,11,15,.5); }
.ppc-do-pick-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 8px; }
.ppc-do-pick-head h2{ margin:0; font-size:1.2rem; }
.ppc-do-pick-x{ width:36px; height:36px; border:0; border-radius:50%; background: var(--paper, #F4F4F6); font-size:1.4rem; line-height:1; cursor:pointer; color: var(--ink); }
.ppc-do-pick-x:hover{ background: var(--paper-line); }
.ppc-do-tabs{ display:flex; gap:4px; margin:6px 20px 12px; padding:4px; border-radius:12px; background: var(--paper, #F4F4F6); }
.ppc-do-tabs button{ flex:1; white-space:nowrap; padding:0 6px; height:38px; border:0; border-radius:9px; background:transparent; font:inherit; font-weight:600; font-size:.9rem; color: var(--ink-soft); cursor:pointer; }
.ppc-do-tabs button[aria-selected="true"]{ background:#fff; color: var(--ink); box-shadow: 0 1px 4px rgba(11,11,15,.12); }
.ppc-do-sizes{ display:grid; grid-template-columns: repeat(2, 1fr); gap:6px; padding: 0 20px 20px; overflow-y:auto; }
.ppc-do-sizes[hidden], .ppc-do-custom[hidden]{ display:none; }
.ppc-do-size{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--paper-line); border-radius:12px; color: var(--ink); text-decoration:none; transition: border-color .15s, background .15s; }
.ppc-do-size:hover, .ppc-do-size:focus-visible{ border-color: var(--pixel-blue); background: #F5F8FF; }
.ppc-do-size-shape{ flex:none; width:30px; height:30px; display:grid; place-items:center; }
.ppc-do-size-shape i{ display:block; border-radius:2px; background: linear-gradient(135deg, var(--pixel-blue), var(--pixel-magenta)); opacity:.85; }
.ppc-do-size-t{ display:flex; flex-direction:column; min-width:0; }
.ppc-do-size strong{ font-size:.9rem; line-height:1.25; } .ppc-do-size-t span{ font-size:.78rem; color: var(--ink-soft); }
.ppc-do-custom{ padding: 4px 20px 22px; }
.ppc-do-custom-row{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.ppc-do-custom label{ display:flex; flex-direction:column; gap:4px; font-size:.82rem; font-weight:600; color: var(--ink-soft); }
.ppc-do-custom input, .ppc-do-custom select{ height:44px; padding:0 12px; border:1px solid var(--paper-line); border-radius:10px; background:#fff; font:inherit; color: var(--ink); width:110px; }
.ppc-do-custom select{ width:84px; }
.ppc-do-custom-x{ height:44px; display:flex; align-items:center; color: var(--ink-soft); }
.ppc-do-custom-note{ margin:10px 0 16px; font-size:.85rem; color: var(--ink-soft); }
.ppc-do-custom .ppc-btn{ width:100%; justify-content:center; }
.ppc-do-custom-row label{ flex:1 1 0; min-width:0; } .ppc-do-custom-row label:last-child{ flex:0 0 84px; }
.ppc-do-custom input, .ppc-do-custom-row select{ width:100%; }
@media (max-width: 520px){ .ppc-do-sizes{ grid-template-columns: 1fr; } .ppc-do-tabs button{ font-size:.82rem; } .ppc-do-pick-head, .ppc-do-sizes, .ppc-do-custom{ padding-left:16px; padding-right:16px; } .ppc-do-tabs{ margin-left:16px; margin-right:16px; } }
.ppc-do-freelaunch{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 24px 0; padding: 16px 18px; border-radius:14px; background:#fff; border:1px solid var(--paper-line); }
.ppc-do-freelaunch p{ margin:0; color: var(--ink-soft); }
.ppcd-resize-btn[hidden]{ display:none; }
.ppcd-preview-tog[hidden]{ display:none; }

/* ---- Online designer guide and landing pages (inc/designer-seo.php) ---- */
.ppc-ds{ max-width: 1080px; margin: 56px auto 8px; color: var(--ink); }
.ppc-ds h2{ font: 700 clamp(1.3rem, 2.6vw, 1.75rem)/1.2 var(--font-display, sans-serif); letter-spacing: -.02em; margin: 52px 0 18px; }
.ppc-ds h3{ font: 600 1.02rem/1.3 var(--font-display, sans-serif); margin: 0 0 6px; }
.ppc-ds p{ margin: 0; line-height: 1.6; color: var(--ink-soft); }
.ppc-ds-head{ text-align: center; max-width: 760px; margin: 0 auto; }
.ppc-ds-head h2{ margin-top: 0; font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.ppc-ds-pills{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ppc-ds-pills li{ padding: 6px 12px; border: 1px solid var(--paper-line); border-radius: 999px; background: #fff; font: 600 .82rem/1 var(--font-display, sans-serif); }
.ppc-ds-pills li::before{ content: "\2713"; margin-right: 6px; color: #1e7a34; }
.ppc-ds-feat{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ppc-ds-feat article{ padding: 18px; border: 1px solid var(--paper-line); border-radius: 14px; background: #fff; }
.ppc-ds-steps{ counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ppc-ds-steps li{ counter-increment: s; position: relative; padding: 52px 18px 18px; border-radius: 14px; background: var(--paper-dim, #F1EFE9); }
.ppc-ds-steps li::before{ content: counter(s); position: absolute; left: 18px; top: 16px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--pixel-magenta); color: #fff; font: 700 .9rem/1 var(--font-display, sans-serif); }
.ppc-ds-links{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ppc-ds-links a{ display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid var(--paper-line); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.ppc-ds-links a:hover{ border-color: var(--pixel-blue); transform: translateY(-2px); }
.ppc-ds-links strong{ font: 600 .98rem/1.25 var(--font-display, sans-serif); }
.ppc-ds-links span{ font-size: .84rem; line-height: 1.45; color: var(--ink-soft); }
.ppc-ds-split{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ppc-ds-split p + p{ margin-top: 14px; }
.ppc-ds-langs{ display: flex; flex-wrap: wrap; gap: 6px; }
.ppc-ds-langs span{ padding: 4px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--paper-line); font-size: .9rem; color: var(--ink); }
.ppc-ds-tablewrap{ overflow-x: auto; border: 1px solid var(--paper-line); border-radius: 14px; background: #fff; }
.ppc-ds-table{ width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 520px; }
.ppc-ds-table th, .ppc-ds-table td{ padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--paper-line); }
.ppc-ds-table tbody tr:last-child > *{ border-bottom: 0; }
.ppc-ds-table thead th{ font: 600 .86rem/1.2 var(--font-display, sans-serif); background: var(--paper-dim, #F1EFE9); }
.ppc-ds-table tbody th{ font-weight: 500; }
.ppc-ds-table td.is-us{ font-weight: 600; color: #1e7a34; }
.ppc-ds-faq{ display: grid; gap: 10px; }
.ppc-ds-faq details{ border: 1px solid var(--paper-line); border-radius: 12px; background: #fff; padding: 0 18px; }
.ppc-ds-faq summary{ list-style: none; cursor: pointer; padding: 16px 28px 16px 0; position: relative; }
.ppc-ds-faq summary::-webkit-details-marker{ display: none; }
.ppc-ds-faq summary::after{ content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 400 1.4rem/1 var(--font-display, sans-serif); color: var(--ink-soft); }
.ppc-ds-faq details[open] summary::after{ content: "\2212"; }
.ppc-ds-faq summary h3{ margin: 0; display: inline; }
.ppc-ds-faq details p{ padding: 0 0 16px; }
.ppc-ds-rev-sum{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:1rem; }
.ppc-ds-stars{ color:#d9d6ce; letter-spacing:1px; font-size:1.15rem; } .ppc-ds-stars .on{ color:#F5A623; }
.ppc-ds-rev-list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:12px; margin:16px 0; }
.ppc-ds-rev-item{ margin:0; padding:16px; border:1px solid var(--paper-line); border-radius:14px; background:#fff; }
.ppc-ds-rev-item p{ margin:8px 0; color: var(--ink); }
.ppc-ds-rev-item footer{ font-size:.82rem; color: var(--ink-soft); }
.ppc-ds-rev-form{ display:grid; gap:10px; max-width:560px; margin-top:16px; padding:18px; border:1px solid var(--paper-line); border-radius:14px; background:#fff; }
.ppc-ds-rev-form input[type=text], .ppc-ds-rev-form textarea{ width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid var(--paper-line); border-radius:10px; font:inherit; background:#fff; }
.ppc-ds-rev-form .ppc-btn{ justify-self:start; }
.ppc-ds-rev-form.is-sent input, .ppc-ds-rev-form.is-sent textarea, .ppc-ds-rev-form.is-sent fieldset, .ppc-ds-rev-form.is-sent button{ display:none; }
.ppc-ds-rev-fs{ border:0; margin:0; padding:0; }
.ppc-ds-rev-fs legend{ font-weight:600; margin-bottom:4px; padding:0; }
.ppc-ds-rev-stars{ display:inline-flex; flex-direction:row-reverse; gap:2px; }
.ppc-ds-rev-stars input{ position:absolute; opacity:0; pointer-events:none; }
.ppc-ds-rev-stars label{ font-size:2rem; line-height:1; color:#d9d6ce; cursor:pointer; }
.ppc-ds-rev-stars label:hover, .ppc-ds-rev-stars label:hover ~ label, .ppc-ds-rev-stars input:checked ~ label{ color:#F5A623; }
.ppc-ds-rev-stars input:focus-visible + label{ outline:2px solid var(--pixel-blue); border-radius:4px; }
.ppc-ds-rev-msg{ margin:0; font-weight:600; color:#1e7a34 !important; }
.ppc-ds-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; }
/* landing page */
.ppc-dl-crumbs{ font-size:.85rem; color: var(--ink-soft); margin: 4px 0 18px; }
.ppc-dl-crumbs a{ color: var(--ink-soft); }
.ppc-dl-launch{ display:flex; flex-direction:column; align-items:center; gap:8px; margin: 22px 0 6px; padding:0; border:0; background:none; }
.ppc-dl-launch .ppc-btn{ min-width: 240px; justify-content:center; font-size:1.05rem; padding-top:15px; padding-bottom:15px; }
.ppc-dl-size{ font-size:.85rem; color: var(--ink-soft); }
.ppc-dl-sizes{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; margin: 6px 0 18px !important; font-size:.88rem; }
.ppc-dl-sizes > span{ color: var(--ink-soft); }
.ppc-dl-sizes a{ padding:6px 11px; border:1px solid var(--paper-line); border-radius:999px; background:#fff; color: var(--ink); text-decoration:none; }
.ppc-dl-sizes a:hover{ border-color: var(--pixel-blue); }
.ppc-dl-sizes small{ color: var(--ink-soft); }
.ppc-dl-body{ margin-top: 36px; }
.ppc-dl-intro{ display:grid; grid-template-columns: 1.7fr 1fr; gap:28px; align-items:start; }
.ppc-dl-intro p + p{ margin-top:14px; }
.ppc-dl-intro p{ font-size:1.02rem; }
.ppc-dl-ideas{ padding:18px 20px; border-radius:14px; background:#fff; border:1px solid var(--paper-line); }
.ppc-dl-ideas h2{ margin:0 0 10px !important; font-size:1.05rem !important; }
.ppc-dl-ideas ul{ margin:0; padding-left:1.1em; display:grid; gap:6px; color: var(--ink-soft); }
.ppc-dl-back{ margin-top:18px !important; font-weight:600; }
@media (max-width: 760px){ .ppc-ds-split, .ppc-dl-intro{ grid-template-columns: 1fr; } .ppc-dl-launch .ppc-btn{ width:100%; } }
/* ---- phones: the designer always fits the screen width (no half-hidden editor) ---- */
@media (max-width: 900px){
  .ppcd-modal{ grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100vw; overflow: hidden; }
  .ppcd-top, .ppcd-body, .ppcd-stage{ min-width: 0; max-width: 100vw; }
  .ppcd-body{ grid-template-columns: minmax(0, 1fr); }
  .ppcd-title{ min-width: 0; }
  .ppcd-top-end{ flex: none; gap: 6px; }
  .ppcd-top-tools{ flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .ppcd-top-tools::-webkit-scrollbar{ display: none; }
  .ppcd-top-tools > *{ flex: none; }
  .ppcd-top-tools .ppcd-icon{ width: 36px; height: 36px; }
  .ppcd-preview-tog{ height: 36px; padding: 0 10px; border: 1px solid var(--paper-line); border-radius: 10px; background: #fff; font-size: .8rem; }
  .ppcd-sides.ppcd-pages{ max-width: none; justify-content: flex-start; }
}
@media (max-width: 520px){
  .ppcd-top{ padding: 8px; gap: 6px; }
  .ppcd-title strong{ font-size: .9rem; }
  .ppcd-top-end .ppcd-icon{ width: 34px; height: 34px; }
  .ppcd-done{ padding-left: 10px; padding-right: 10px; font-size: .8rem; }
}
/* ---- Vinyl Decal Builder: cut files sheet, saving sheet, cut layout ---- */
.psb-actions--v .psb-primary{ display: inline-flex; align-items: center; gap: 8px; }
.psb-actions .psb-wide{ grid-column: 1 / -1; font-size: .86rem; }
.ppc-btn.is-busy, .psb-fs-item.is-busy, .psb-save-opt:disabled{ opacity: .6; cursor: progress; }
.psb-files-sheet h3, .psb-save h3{ font-size: 1.15rem; }
.psb-fs-main{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 10px; }
.psb-fs-main .ppc-btn{ display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; text-align: left; height: auto; }
.psb-fs-main .ppc-btn small{ font-weight: 500; font-size: .76rem; opacity: .85; }
.psb-fs-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.psb-fs-item, .psb-save-opt{ display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--paper-line); border-radius: 12px; background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.psb-fs-item:hover, .psb-save-opt:hover{ border-color: var(--pixel-blue); background: #F5F8FF; }
.psb-fs-item b, .psb-save-opt b{ font-size: .88rem; }
.psb-fs-item small, .psb-save-opt small{ font-size: .74rem; color: var(--ink-soft); line-height: 1.35; }
.psb-fs-msg, .psb-save-msg{ min-height: 1.4em; margin-top: 10px; }
.psb-save .ppt-field{ margin: 12px 0; }
.psb-save-opts{ display: grid; gap: 8px; }
.psb-save-opt.is-main{ border-color: transparent; background: linear-gradient(135deg, rgba(46,111,242,.10), rgba(227,28,121,.10)); }
.psb-save-open{ margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--paper-line); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.psb-save-open h4{ width: 100%; margin: 0 0 2px; font-size: .92rem; }
.psb-save-open select{ flex: 1; min-width: 200px; }
.psb-mats{ padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--paper-line); }
.psb-mats-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 8px; }
.psb-mats-stats > div{ padding: 10px 12px; border-radius: 12px; background: var(--paper, #F4F4F6); }
.psb-mats-stats b{ display: block; font-size: 1.2rem; }
.psb-mats-stats span{ font-size: .76rem; color: var(--ink-soft); }
.psb-mats-grid{ display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; max-height: 640px; overflow: auto; }
.psb-mat{ margin: 0; display: flex; flex-direction: column; gap: 6px; }
.psb-mat canvas{ display: block; height: auto; max-width: 100%; border-radius: 6px; box-shadow: 0 2px 10px rgba(11,11,15,.12); }
.psb-mat figcaption{ font-size: .8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 240px; }
.psb-mat figcaption small{ width: 100%; color: var(--ink-soft); }
@media (max-width: 760px){
  .psb-fs-main{ grid-template-columns: 1fr; }
  .psb-fs-grid{ grid-template-columns: 1fr 1fr; }
  .psb-mats-grid{ justify-content: center; max-height: none; }
}
.psb-draw[hidden], .psb-mats[hidden]{ display: none; }
.psb-stage > [hidden]{ display: none !important; }   /* only the chosen view shows (some views set their own display) */