/* =========================================================================
   PIXEL PRINT CO. — Modern shop / product / cart / checkout styles
   =========================================================================
   This file layers on top of style.css and contains every new visual
   rule introduced for the redesigned shop, product, cart and checkout
   pages. It does NOT redefine the design tokens — they are reused
   from the root :root variables in style.css.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. SHARED PRIMITIVES — buttons, breadcrumbs, step indicator
   ------------------------------------------------------------------------- */

/* Breadcrumb (used on shop, product, cart, checkout) */
.ppc-shop-breadcrumb{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.ppc-shop-breadcrumb a{ color: var(--ink-soft); transition: color .15s; }
.ppc-shop-breadcrumb a:hover{ color: var(--pixel-magenta); }
.ppc-shop-breadcrumb-sep{ color: var(--paper-line); }
.ppc-shop-breadcrumb-current{ color: var(--ink); font-weight:500; }

/* Step indicator (used on cart + checkout) */
.ppc-steps{
  display:flex; align-items:center; gap: 0;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  padding: 6px;
  list-style:none; margin:0;
  font-family: var(--font-mono); font-size:.74rem;
  box-shadow: var(--shadow-card);
}
.ppc-steps li{
  display:flex; align-items:center; gap:8px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ink-soft);
  position: relative;
  white-space: nowrap;
}
.ppc-steps li:not(:last-child)::after{
  content: ""; position:absolute; right: -8px; top:50%; transform: translateY(-50%);
  width: 16px; height: 1px; background: var(--paper-line);
}
.ppc-steps li.is-active{
  background: var(--ink);
  color: var(--paper);
}
.ppc-steps li.is-active::after{ display:none; }
.ppc-steps-num{
  display:inline-flex; align-items:center; justify-content:center;
  width: 20px; height: 20px; border-radius:50%;
  background: rgba(255,255,255,.18);
  font-size:.7rem; font-weight:600;
}
.ppc-steps li:not(.is-active) .ppc-steps-num{
  background: var(--paper-dim);
  color: var(--ink);
}
.ppc-steps a{ color:inherit; display:flex; align-items:center; gap:8px; }
.ppc-steps-label{ font-weight:500; }

/* Modern button system (sits alongside the existing .btn classes) */
.ppc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: .85em 1.5em;
  border-radius: 4px;
  font-family: var(--font-display); font-weight:600; font-size:.92rem;
  border: 1px solid transparent; background: var(--ink); color: var(--paper);
  cursor:pointer; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.ppc-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.ppc-btn--primary{ background: var(--ink); color: var(--paper); }
.ppc-btn--primary:hover{ background: #000; }
.ppc-btn--gradient{
  background: var(--brand-gradient);
  color: #fff;
  border: none;
  position: relative; overflow: hidden;
}
.ppc-btn--gradient::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--pixel-green), var(--pixel-blue));
  opacity: 0; transition: opacity .25s ease;
}
.ppc-btn--gradient > *{ position: relative; z-index: 1; }
.ppc-btn--gradient:hover::before{ opacity: 1; }
.ppc-btn--ghost{ background: transparent; color: var(--ink); border-color: var(--paper-line); }
.ppc-btn--ghost:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ppc-btn--ink{ background: var(--ink); color: var(--paper); }
.ppc-btn--ink:hover{ background: #000; }
.ppc-btn--sm{ padding: .65em 1.05em; font-size: .82rem; }
.ppc-btn--block{ width: 100%; }
.ppc-btn--xl{ padding: 1.05em 1.8em; font-size: 1rem; }

/* -------------------------------------------------------------------------
   2. SHOP / ARCHIVE PAGE
   ------------------------------------------------------------------------- */

.ppc-shop{ background: var(--paper); }

.ppc-shop-hero{
  position: relative;
  padding: 64px 0 52px;
  background: var(--paper);
  overflow: hidden;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-shop-hero-bg{ position:absolute; inset:0; pointer-events:none; }
.ppc-shop-hero-grid{
  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: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 50% at 50% 30%, black, transparent 75%);
  opacity: .6;
}
.ppc-shop-hero-glow{
  position:absolute; right: -120px; top: -100px;
  width: 460px; height: 460px;
  background: var(--brand-gradient);
  filter: blur(110px);
  opacity: .15; border-radius: 50%;
}
.ppc-shop-hero-inner{
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 40px;
  align-items: end;
}
.ppc-shop-title{
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  margin: 8px 0 12px;
  letter-spacing: -0.02em;
}
.ppc-shop-lede{
  max-width: 56ch; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55;
}
/* Live product search bar */
.ppc-shop-search{
  position: relative;
  margin-top: 24px;
  max-width: 560px;
}
.ppc-shop-search-form{
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  padding: 4px 4px 4px 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ppc-shop-search-form:focus-within{
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11,11,15,.06);
}
.ppc-shop-search-icon{ flex: 0 0 auto; color: var(--ink-soft); }
.ppc-shop-search-input{
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: .8em .6em;
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--ink);
  outline: none;
}
.ppc-shop-search-input::placeholder{ color: #8B887E; }
/* Hide native browser "clear" affordances — we render our own */
.ppc-shop-search-input::-webkit-search-cancel-button,
.ppc-shop-search-input::-webkit-search-decoration{ -webkit-appearance: none; appearance: none; }
.ppc-shop-search-clear{
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  margin-right: 2px;
  border: none; background: var(--paper-dim);
  color: var(--ink-soft);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ppc-shop-search-clear:hover{ background: var(--paper-line); color: var(--ink); }
.ppc-shop-search-submit{
  flex: 0 0 auto;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  color: var(--paper);
  background: var(--ink);
  border: none;
  border-radius: 999px;
  padding: .75em 1.35em;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.ppc-shop-search-submit:hover{ background: #000; }
.ppc-shop-search-submit:active{ transform: scale(.97); }

/* Loading state — thin animated bar under the pill */
.ppc-shop-search.is-loading .ppc-shop-search-form::after{
  content: '';
  position: absolute;
  left: 18px; right: 60px; bottom: -1px;
  height: 2px;
  background: var(--brand-gradient);
  background-size: 200% 100%;
  animation: ppcSearchLoading 1s linear infinite;
  border-radius: 2px;
}
@keyframes ppcSearchLoading{
  0%{ background-position: 0% 0; }
  100%{ background-position: -200% 0; }
}

/* Results dropdown */
.ppc-shop-search-results{
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 60;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: 6px;
  max-height: 420px;
  overflow-y: auto;
}
.ppc-search-group-label{
  padding: 8px 8px 4px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ppc-search-group-label:not(:first-child){
  margin-top: 4px;
  border-top: 1px solid var(--paper-line);
  padding-top: 10px;
}
.ppc-search-result{
  display: flex; align-items: center; gap: 12px;
  padding: 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
}
.ppc-search-result:hover,
.ppc-search-result.is-active{ background: var(--paper-dim); }
.ppc-search-result-thumb{
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
}
/* Page results use the branded circular page icon instead of a
   cropped photo — render it uncropped on a soft round backdrop. */
.ppc-search-result-thumb--icon{
  border-radius: 50%;
  object-fit: contain;
  padding: 4px;
  background: var(--paper-dim);
}
.ppc-search-result-body{ flex: 1 1 auto; min-width: 0; }
.ppc-search-result-title{
  font-family: var(--font-body); font-weight: 600; font-size: .88rem;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ppc-search-result-price{
  font-family: var(--font-mono); font-size: .78rem; color: var(--ink-soft);
  margin-top: 2px;
}
.ppc-search-result-price .ppc-oos{ color: var(--pixel-magenta); }
.ppc-search-result-price--page{ color: var(--ink-soft); }
.ppc-search-viewall{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 4px;
  padding: 10px 8px;
  border-top: 1px solid var(--paper-line);
  font-family: var(--font-display); font-weight: 600; font-size: .8rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.ppc-search-viewall:hover{ background: var(--paper-dim); }
.ppc-search-empty{
  padding: 22px 12px;
  text-align: center;
  color: var(--ink-soft);
  font-size: .85rem;
}

@media (max-width: 640px){
  .ppc-shop-search{ max-width: 100%; }
  .ppc-shop-search-submit{ padding: .75em 1.05em; font-size: .8rem; }
  .ppc-shop-search-input{ font-size: 16px; } /* prevents iOS zoom-on-focus */
}

.ppc-shop-catscroller{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top: 28px;
}
.ppc-shop-catscroller-item{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 14px;
  border: 1px solid var(--paper-line);
  background: var(--paper);
  border-radius: 999px;
  font-family: var(--font-display); font-weight:500; font-size:.88rem;
  color: var(--ink); text-decoration: none;
  transition: all .15s ease;
}
.ppc-shop-catscroller-item:hover{ border-color: var(--ink); transform: translateY(-1px); }
.ppc-shop-catscroller-item.is-active{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.ppc-shop-catscroller-count{
  font-family: var(--font-mono); font-size:.65rem;
  padding: 1px 7px; border-radius: 10px;
  background: var(--paper-dim); color: var(--ink-soft);
}
.ppc-shop-catscroller-item.is-active .ppc-shop-catscroller-count{ background: rgba(255,255,255,.18); color: #fff; }

.ppc-shop-hero-right{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-bottom: 4px;
}
.ppc-shop-hero-stat{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 2px;
}
.ppc-shop-hero-stat strong{ font-family: var(--font-display); font-size: 1.5rem; font-weight:700; }
.ppc-shop-hero-stat span{ font-family: var(--font-mono); font-size:.72rem; color: var(--ink-soft); }
.ppc-shop-hero-stat--alt{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ppc-shop-hero-stat--alt strong{ color: var(--paper); }
.ppc-shop-hero-stat--alt span{ color: #B8B6AE; }

/* Mobile toolbar (only visible on tablet/mobile) */
.ppc-shop-toolbar-mobile{
  display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  margin: 20px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-shop-toolbar-mobile select{
  font-family: var(--font-body); font-size: .85rem;
  padding: .55em .8em; border: 1px solid var(--paper-line); border-radius: var(--radius-sm);
  background: var(--paper);
}

.ppc-shop-layout{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 20px;
}

.ppc-shop-filters{
  position: sticky;
  top: 96px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 22px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.ppc-shop-filters::-webkit-scrollbar{ width: 6px; }
.ppc-shop-filters::-webkit-scrollbar-thumb{ background: var(--paper-line); border-radius: 4px; }
.ppc-shop-filters-close{ display:none; }
.ppc-filter-block{ padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--paper-line); }
.ppc-filter-block:last-child{ border-bottom: 0; margin-bottom: 0; }
.ppc-filter-title{
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 12px;
}
.ppc-filter-list{ list-style: none; padding: 0; margin: 0; }
.ppc-filter-list li{ margin-bottom: 6px; }
.ppc-filter-list a{
  display: flex; justify-content: space-between; align-items: center;
  font-size: .9rem; color: var(--ink); padding: 4px 0;
  transition: color .15s;
}
.ppc-filter-list a:hover{ color: var(--pixel-magenta); }
.ppc-filter-list a .count{
  font-family: var(--font-mono); font-size:.7rem; color: var(--ink-soft);
  background: var(--paper-dim);
  padding: 1px 7px; border-radius: 10px;
}
.ppc-filter-list li.is-active a{ color: var(--pixel-magenta); font-weight: 600; }
.ppc-filter-list li.is-active a .count{ background: var(--pixel-magenta); color: #fff; }

.ppc-filter-flag{
  display: flex !important; justify-content: flex-start !important; gap: 10px;
  align-items: center; font-size: .9rem;
}
.ppc-filter-flag-dot{
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper-line);
  flex: none;
}
.ppc-filter-flag-dot--sale{ background: var(--pixel-magenta); }
.ppc-filter-flag-dot--new{ background: var(--pixel-blue); }
.ppc-filter-flag-dot--hot{ background: var(--pixel-orange); }

/* Check-style filter list */
.ppc-filter-list--check .ppc-check{
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; padding: 4px 0;
  font-size: .9rem;
}
.ppc-check input{ display: none; }
.ppc-check-box{
  width: 16px; height: 16px; border-radius: 3px;
  border: 1.5px solid var(--paper-line);
  background: var(--paper);
  position: relative; flex: none;
  transition: all .15s ease;
}
.ppc-check input:checked + .ppc-check-box{ background: var(--ink); border-color: var(--ink); }
.ppc-check input:checked + .ppc-check-box::after{
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ppc-check-label{ flex: 1; }
.ppc-check-count{
  font-family: var(--font-mono); font-size:.7rem; color: var(--ink-soft);
  background: var(--paper-dim); padding: 1px 7px; border-radius: 10px;
}

/* Price filter */
.ppc-price-filter-row{ display: flex; align-items: end; gap: 8px; }
.ppc-price-filter-row label{ flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ppc-price-filter-row label span{ font-family: var(--font-mono); font-size:.7rem; color: var(--ink-soft); }
.ppc-price-filter-row input{
  width: 100%;
  padding: .55em .65em;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: .82rem;
  background: var(--paper);
}
.ppc-price-filter-dash{ color: var(--ink-soft); padding-bottom: .55em; }

/* Filter help block */
.ppc-filter-block--help{ border: 0; padding: 0; }
.ppc-filter-help{
  display: flex; gap: 14px;
  background: linear-gradient(140deg, var(--paper-dim), var(--paper));
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 16px;
}
.ppc-filter-help svg{ flex: none; color: var(--pixel-green); margin-top: 2px; }
.ppc-filter-help strong{ display: block; font-family: var(--font-display); font-size: .92rem; margin-bottom: 4px; }
.ppc-filter-help p{ font-size: .82rem; color: var(--ink-soft); margin: 0 0 10px; }

/* -------------------------------------------------------------------------
   3. SHOP TOOLBAR + CHIPS
   ------------------------------------------------------------------------- */

.ppc-shop-chips{
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0;
  margin-bottom: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-shop-chips-label{
  font-family: var(--font-mono); font-size:.7rem;
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing:.08em;
  margin-right: 4px;
}
.ppc-shop-chip{
  font-family: var(--font-display); font-size:.82rem; font-weight:500;
  padding: .5em .9em;
  border: 1px solid var(--paper-line); border-radius: 999px;
  color: var(--ink); text-decoration: none;
  transition: all .15s;
  background: var(--paper);
}
.ppc-shop-chip:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

.ppc-shop-toolbar{
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  padding: 8px 0 20px;
}
.ppc-shop-toolbar-count{ font-family: var(--font-mono); font-size:.78rem; color: var(--ink-soft); }
.ppc-shop-toolbar-sort select{
  font-family: var(--font-body); font-size: .85rem;
  padding: .55em 1.6em .55em .8em;
  border: 1px solid var(--paper-line); border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   4. PRODUCT CARDS (modern)
   ------------------------------------------------------------------------- */

ul.products, .products-grid, .ppc-products-grid, ul.products.columns-4, ul.products.columns-3, ul.products.columns-2, ul.products.columns-1{
  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; 
  width: 100% !important;
  box-sizing: border-box !important;
  clear: both !important;
}
/* WooCommerce core still ships a float-layout clearfix on ul.products
   (content:" "; display:table on ::before/::after) meant for its old
   float-based grid. Left alone, that pseudo-element becomes a real,
   invisible grid item that eats the very first cell — which is exactly
   why the first row was short one product. Kill it explicitly. */
ul.products::before, ul.products::after,
.products-grid::before, .products-grid::after,
.ppc-products-grid::before, .ppc-products-grid::after{
  content: none !important;
  display: none !important;
}
/* ============================================================
   PRODUCTS MOBILE — AGGRESSIVE 1x1 LAYOUT
   ============================================================
   Mobile breakpoint at 900px (covers most phones in landscape too)
   Uses flexbox for predictable sizing + !important on every property
   ============================================================ */

@media (max-width: 900px){
  /* Grid: 1 column on mobile/tablet */
  body ul.products,
  body ul.products.columns-4,
  body ul.products.columns-3,
  body ul.products.columns-2,
  body ul.products.columns-1,
  body .products-grid,
  body .ppc-products-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Product card: horizontal layout (image left, info right) */
  body .ppc-card.product,
  body li.ppc-card.product,
  body ul.products li.product{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    background: var(--paper, #fff) !important;
    border: 1px solid var(--paper-line, #ECE9DF) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  
  /* Image container: 45% width, 1x1 aspect ratio */
  body .ppc-card .ppc-card-media,
  body li.ppc-card .ppc-card-media,
  body ul.products li.product .ppc-card-media{
    flex: 0 0 45% !important;
    width: 45% !important;
    max-width: 45% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    background: #fff !important;
    overflow: hidden !important;
  }
  
  /* Image itself: fill the container, cover, square */
  body .ppc-card .ppc-card-media img,
  body li.ppc-card .ppc-card-media img,
  body ul.products li.product .ppc-card-media img,
  body .ppc-card-media-link img{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    aspect-ratio: 1 / 1 !important;
  }
  
  /* Card body: 55% width, vertical content */
  body .ppc-card .ppc-card-body,
  body li.ppc-card .ppc-card-body,
  body ul.products li.product .ppc-card-body{
    flex: 1 1 55% !important;
    width: 55% !important;
    max-width: 55% !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    justify-content: space-between !important;
  }
  
  /* Title: 2 lines max */
  body .ppc-card .ppc-card-title,
  body li.ppc-card .ppc-card-title{
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    min-height: auto !important;
    -webkit-line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  
  /* Category label */
  body .ppc-card .ppc-card-cat,
  body li.ppc-card .ppc-card-cat{
    font-size: 0.65rem !important;
    margin: 0 !important;
  }
  
  /* Price */
  body .ppc-card .ppc-card-price,
  body li.ppc-card .ppc-card-price{
    margin: 4px 0 0 !important;
    font-size: 0.95rem !important;
  }
  
  /* CTA button */
  body .ppc-card .ppc-card-cta,
  body li.ppc-card .ppc-card-cta,
  body ul.products li.product .ppc-card-cta{
    margin-top: auto !important;
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Rating/new badge */
  body .ppc-card .ppc-card-rating,
  body li.ppc-card .ppc-card-rating{
    margin: 0 !important;
    font-size: 0.62rem !important;
  }
  
  /* Type chip and action buttons (top of image) */
  body .ppc-card .ppc-card-typechip,
  body li.ppc-card .ppc-card-typechip{
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
  }
  body .ppc-card .ppc-card-actions,
  body li.ppc-card .ppc-card-actions{
    top: 6px !important;
    right: 6px !important;
  }
  body .ppc-card .ppc-card-action,
  body li.ppc-card .ppc-card-action{
    width: 28px !important;
    height: 28px !important;
  }
}

@media (max-width: 380px){
  /* Very small phones: tighter layout */
  body .ppc-card .ppc-card-body,
  body li.ppc-card .ppc-card-body{
    padding: 10px !important;
  }
  body .ppc-card .ppc-card-cta,
  body li.ppc-card .ppc-card-cta{
    padding: 6px 8px !important;
    font-size: 0.72rem !important;
  }
}

ul.products li.product{ margin: 0 !important; padding: 0 !important; float: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }

.ppc-card{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.ppc-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(11,11,15,.10);
  border-color: transparent;
}

.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;  /* show full image, no crop */
  transition: transform .4s ease;
}
.ppc-card-media-link{ display: block; height: 100%; }
.ppc-card-media img{ width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.ppc-card:hover .ppc-card-media img{ transform: scale(1.04); }

.ppc-card-badge{
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size:.65rem; letter-spacing:.04em; font-weight:500;
  padding: 4px 9px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  z-index: 2;
}
.ppc-card-badge--sale{ background: var(--pixel-magenta); }
.ppc-card-badge--pop{ background: var(--brand-gradient); }

.ppc-card-actions{
  position: absolute; top: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateX(6px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 2;
}
.ppc-card:hover .ppc-card-actions{ opacity: 1; transform: translateX(0); }
.ppc-card-action{
  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); text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: all .15s;
  cursor: pointer;
}
.ppc-card-action:hover{ background: var(--ink); color: #fff; border-color: var(--ink); }

/* Wishlist heart: filled red once saved, and always visible (not just
   on hover) on touch devices — a hover-only reveal is unusable on
   mobile since there's no hover state to trigger it. */
.ppc-wishlist-btn.is-active{
  background: var(--pixel-magenta);
  border-color: var(--pixel-magenta);
  color: #fff;
}
.ppc-wishlist-btn.is-active svg{ fill: currentColor; }
@media (hover: none){
  .ppc-card-actions{ opacity: 1; transform: translateX(0); }
}

.ppc-card-typechip{
  position: absolute; bottom: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  background: rgba(11,11,15,.78);
  color: var(--paper);
  border-radius: 999px;
  font-family: var(--font-mono); font-size:.65rem;
  backdrop-filter: blur(6px);
}

.ppc-card-body{
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
}
.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;
  min-height: 2.5em;  /* reserve space for 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ppc-card-title a{ color: var(--ink); transition: color .15s; }
.ppc-card-title a:hover{ color: var(--pixel-magenta); }

.ppc-card-rating{ display: flex; align-items: center; gap: 6px; }
.ppc-card-rating .stars{ position: relative; display: inline-block; letter-spacing: 2px; font-size: .82rem; color: #DDD8C8; }
.ppc-card-rating .stars::before{
  content: "★★★★★"; position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap;
  width: calc(var(--rating, 0) / 5 * 100%); color: #FFB300;
}
.ppc-card-rating-count{ font-family: var(--font-mono); font-size:.7rem; color: var(--ink-soft); }
.ppc-card-rating--new{
  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;
}

.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-price-value del{ color: var(--ink-soft); font-weight: 500; font-size: .9rem; margin-right: 6px; }
.ppc-card-price-value ins{ background: transparent; text-decoration: none; }

.ppc-card-cta{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto !important;        /* push to bottom of card */
  padding: 10px 14px;
  border: 1px solid var(--paper-line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display); font-size: .88rem; font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
}
.ppc-card-cta svg{ transition: transform .2s ease; }
.ppc-card-cta:hover{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.ppc-card-cta:hover svg{ transform: translateX(3px); }

/* -------------------------------------------------------------------------
   5. SINGLE PRODUCT PAGE
   ------------------------------------------------------------------------- */

.ppc-product{ background: var(--paper); }

.ppc-product-hero{
  padding: 18px 0 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--paper-line);
}
.ppc-product-hero-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.ppc-product-eyebrow{
  font-family: var(--font-mono); font-size:.7rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px;
}
.ppc-product-eyebrow a{ color: var(--ink-soft); }
.ppc-product-eyebrow a:hover{ color: var(--pixel-magenta); }
.ppc-product-title{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  margin: 0 0 4px;
  letter-spacing: -0.015em;
}
.ppc-product-meta{
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size:.7rem; color: var(--ink-soft);
  margin-top: 2px;
}
.ppc-product-rating{ display: flex; align-items: center; gap: 8px; }
.ppc-product-rating .stars{ position: relative; display: inline-block; letter-spacing: 1.5px; font-size: .9rem; color: #DDD8C8; }
.ppc-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;
}
.ppc-product-rating .muted{ color: var(--ink-soft); }
.ppc-product-sku .muted{ color: var(--ink-soft); margin-right: 4px; }
.ppc-product-sku strong{ color: var(--ink); }

.ppc-product-pills{ display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ppc-pill{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--paper-dim); color: var(--ink-soft);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  font-family: var(--font-mono); font-size:.66rem;
  letter-spacing: .02em;
  border: 1px solid var(--paper-line);
}
.ppc-pill-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pixel-green);
  box-shadow: 0 0 0 3px rgba(63,167,70,.18);
  animation: ppc-pulse 1.6s ease-in-out infinite;
}
@keyframes ppc-pulse{
  0%, 100%{ box-shadow: 0 0 0 3px rgba(63,167,70,.18); }
  50%{ box-shadow: 0 0 0 6px rgba(63,167,70,.08); }
}
.ppc-pil-alt{ background: var(--paper); }

.ppc-product-main{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 36px;
  padding: 24px 0 20px;
  align-items: start;
}

/* Gallery */
.ppc-gallery{ position: sticky; top: 90px; }
.ppc-gallery-main{
  position: relative;
  aspect-ratio: 1/1;
  background: var(--paper-dim);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--paper-line);
}
.ppc-gallery-main img{ width: 100%; height: 100%; object-fit: cover; }
.ppc-gallery-badge{
  position: absolute; top: 16px; left: 16px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size:.68rem; padding: 5px 10px;
  border-radius: 999px; letter-spacing: .04em;
}
.ppc-gallery-badge--sale{ background: var(--pixel-magenta); }
.ppc-gallery-zoom{
  position: absolute; bottom: 16px; right: 16px;
  width: 42px; height: 42px; 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);
  cursor: pointer;
  transition: all .15s;
}
.ppc-gallery-zoom:hover{ background: var(--ink); color: #fff; }
.ppc-gallery-thumbs{
  display: flex; gap: 10px; margin-top: 12px;
  overflow-x: auto; scrollbar-width: none;
}
.ppc-gallery-thumbs::-webkit-scrollbar{ display: none; }
.ppc-thumb{
  flex: none;
  width: 72px; height: 72px; border-radius: 6px;
  overflow: hidden; border: 2px solid var(--paper-line);
  background: var(--paper-dim);
  cursor: pointer; padding: 0;
  transition: border-color .15s;
}
.ppc-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.ppc-thumb.is-active{ border-color: var(--pixel-magenta); }

.ppc-gallery-trust{
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
}
.ppc-trust-item{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size:.72rem; color: var(--ink-soft);
}
.ppc-trust-item svg{ color: var(--pixel-green); }

/* =========================================================
   LIVE ARTWORK PREVIEW (pilot — see ppc_get_live_preview_config()
   in functions.php). Renders the customer's uploaded file on a
   realistic product-shaped mockup the instant they pick a file.
   ========================================================= */
.ppc-live-preview{
  margin-top: 18px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 10px;
}
.ppc-live-preview-head{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.ppc-live-preview-head strong{ font-family: var(--font-display); font-size: .95rem; }
.ppc-live-preview-head span{ font-family: var(--font-mono); font-size: .7rem; color: var(--ink-soft); display: block; margin-top: 2px; }
.ppc-lp-size-badge{
  flex: none;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
  color: var(--ink); background: var(--paper-dim);
  border: 1px solid var(--paper-line);
  padding: 4px 8px; border-radius: 999px;
  white-space: nowrap;
}

.ppc-live-preview-sides{ display: flex; gap: 6px; margin-bottom: 12px; }
.ppc-lp-side-btn{
  flex: 1; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--paper-line); background: var(--paper-dim);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; transition: all .15s;
}
.ppc-lp-side-btn.is-active{
  background: var(--ink); color: #fff; border-color: var(--ink);
}

/* The stage centers the card mockup on a soft "tabletop" surface so
   an image that's just a flat rectangle still reads as a photographed
   product rather than a raw file preview. */
.ppc-live-preview-stage{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 16px;
  border-radius: 8px;
  background: radial-gradient(ellipse at center, #f2f1ec 0%, #e7e4d8 100%);
}
.ppc-lp-card{
  position: relative;
  /* Was `width: min(100%,340px)` + `max-height:480px`. That clamped
     HEIGHT only while leaving width fixed at 340px — which distorts
     the actual ratio and, worse, makes any two ratios that both hit
     the cap render at the IDENTICAL 340×480 box (confirmed live: a
     product with 6 very different size options all rendered as the
     exact same rectangle). Deriving width FROM the ratio instead
     keeps every ratio visually distinct — narrower ratios simply get
     a narrower (not squashed) box at the same max height. */
  width: min(100%, 340px, calc(480px * var(--lp-ratio, 1.583)));
  aspect-ratio: var(--lp-ratio, 1.583);
  border-radius: var(--lp-radius, 4%);
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 14px 28px rgba(11,11,15,.18),
    0 2px 6px rgba(11,11,15,.12);
  display: flex; align-items: center; justify-content: center;
}
/* Door-hanger notch: border-radius still applies to the four outer
   corners; the actual notch (circle + diagonal cut) is a per-product
   inline mask (see single-product.php) — needed because the circle
   has to stay circular even on this card's narrow 3.5:8.2 ratio,
   which requires ratio-aware math a single shared static mask can't
   do for every future aspect ratio. */
.ppc-lp-card--doorhanger{
  border-radius: var(--lp-radius, 2%);
}
/* Feather flag: rounded/arched top edge, square bottom — a simple,
   honest approximation (not the exact feather-shaped taper/curve of
   the real product, same spirit as the door-hanger/die-cut notes
   elsewhere) that's enough to judge sizing and see the top curve. */
.ppc-lp-card--curved-top{
  border-radius: 50% 50% 0 0 / 12% 12% 0 0;
}
.ppc-lp-img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
.ppc-lp-img.is-visible{ display: block; }
.ppc-lp-placeholder{
  position: absolute; inset: 10%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft);
  border: 1px dashed var(--paper-line);
  border-radius: 6px;
  padding: 8px;
}
.ppc-lp-placeholder.is-hidden{ display: none; }

/* Zoom button floats over the bottom-right corner of the stage */
.ppc-lp-zoom-btn{
  position: absolute; right: 12px; bottom: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,11,15,.7); color: #fff; border: none;
  cursor: pointer; transition: background .15s, transform .15s;
  backdrop-filter: blur(2px);
}
.ppc-lp-zoom-btn:hover{ background: rgba(11,11,15,.88); transform: scale(1.06); }

.ppc-lp-size-caption{
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--font-mono); font-size: .66rem; color: var(--ink-soft);
}

.ppc-lp-note{
  margin: 12px 0 0;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: var(--font-mono); font-size: .72rem; line-height: 1.5;
  background: #FFF6E8;
  border: 1px solid #F0DDAE;
  color: #7A5C1E;
}
.ppc-lp-note.is-error{
  background: #FDEDEE; border-color: #F3C6CA; color: #A32A33;
}
.ppc-lp-disclaimer{
  margin: 10px 0 0;
  font-family: var(--font-mono); font-size: .64rem; color: var(--ink-soft);
  text-align: center;
}

/* =========================================================
   TEXT-ENGRAVING PREVIEW (mode:'text' — no file upload; the
   customer types text and picks a colour instead. See doc block
   above ppc_get_live_preview_config() in functions.php).
   ========================================================= */
.ppc-pen-stage{
  position: relative;
  width: 100%;
  aspect-ratio: var(--lp-ratio, 8.18);
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #f2f1ec 0%, #e7e4d8 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 14px 28px rgba(11,11,15,.1),
    0 2px 6px rgba(11,11,15,.06);
}
.ppc-pen-img{
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.ppc-pen-text{
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(9px, 2.1vw, 15px);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-shadow: 0 0 1px rgba(0,0,0,.2);
}
.ppc-pen-text.is-placeholder{ opacity: .4; }
.ppc-pen-text--modal{
  font-size: clamp(12px, 2.6vw, 22px);
}

/* =========================================================
   MULTI-ZONE UPLOAD PREVIEW (mode:'zones' — several fixed print
   areas on one item, e.g. polo shirts: left chest / left sleeve /
   back. Tabs switch which area's photo shows; each area has its
   own uploaded-file overlay zone. See doc block above
   ppc_get_live_preview_config() in functions.php).
   ========================================================= */
.ppc-zone-sides{ display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.ppc-zone-stage{
  position: relative;
  /* Capped the same way every other live-preview widget on the site
     is (.ppc-lp-card etc.) — was unbounded before, so on a wide
     gallery column the (fairly small, ~500px-wide source) photo got
     stretched 2-3x past its native resolution, which is exactly what
     made it look huge AND blurry at once. Capping the display size
     close to the image's real detail fixes both complaints together. */
  width: min(100%, 300px);
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #f2f1ec 0%, #e7e4d8 100%);
  box-shadow:
    0 14px 28px rgba(11,11,15,.1),
    0 2px 6px rgba(11,11,15,.06);
}
.ppc-zone-face{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  opacity: 1;
  transition: opacity .18s ease;
}
.ppc-zone-face[hidden]{ display: none; }
/* Smooth fade instead of an abrupt swap when switching area tabs —
   part of the "feel like a polished app, not a raw form" pass. */
.ppc-zone-face.is-entering{ opacity: 0; }
.ppc-zone-base-img{
  width: 100%; height: auto;
  display: block;
  border-radius: 4px;
}
.ppc-zone-overlay{
  position: absolute;
  border-radius: 3px;
  overflow: hidden;
  /* Was "cover" — that fills/crops the WHOLE box regardless of the
     logo's own proportions, which is exactly why an uploaded logo
     showed up looking oversized/cropped compared to where "YOUR
     DESIGN HERE" sat. "contain" scales the full logo down to fit
     neatly inside the box instead — nothing cropped, nothing
     stretched. This only changes how it's DISPLAYED here; the
     actual uploaded file on the server is completely untouched. */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: box-shadow .15s ease;
}
/* Before a file is uploaded: a light dashed outline showing exactly
   where the logo will land, same idea as the reference mockups this
   was built from (dashed boxes marking each print area). */
.ppc-zone-overlay:not(.has-image){
  border: 1.5px dashed rgba(11,11,15,.35);
  background-color: rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppc-zone-overlay:not(.has-image)::after{
  content: '+';
  font-family: var(--font-display, sans-serif);
  font-size: clamp(14px, 3vw, 20px);
  font-weight: 600;
  color: rgba(11,11,15,.35);
  line-height: 1;
}
.ppc-zone-overlay.has-image{
  box-shadow: 0 1px 3px rgba(11,11,15,.15);
}

/* -------- Buybox teaser (replaces production/shipping/proof lines
   for products that have the live preview) -------- */
.ppc-buybox-preview-teaser{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
  border-radius: 8px;
}
.ppc-buybox-preview-teaser-text{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ppc-buybox-preview-teaser-text strong{ font-family: var(--font-display); font-size: .78rem; }
.ppc-buybox-preview-teaser-text span{
  font-family: var(--font-mono); font-size: .62rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ppc-buybox-preview-btn{
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  border-radius: 7px;
  border: 1px solid var(--paper-line);
  background: #fff;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s;
}
.ppc-buybox-preview-btn:hover{ background: var(--paper-dim); }

/* =========================================================
   "ADDED TO CART" TOAST — site-wide, bottom-right on desktop,
   full-width bottom sheet on mobile (clear of the app-nav bar).
   ========================================================= */
.ppc-cart-toast{
  position: fixed;
  right: 20px;
  bottom: 90px; /* clears the back-to-top button (52px circle at bottom:20px) */
  z-index: 250;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(360px, calc(100vw - 40px));
  padding: 16px 18px 16px 16px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(11,11,15,.18);
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.ppc-cart-toast[hidden]{ display: none; }
.ppc-cart-toast.is-visible{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.ppc-cart-toast-icon{
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--pixel-green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ppc-cart-toast-body{ flex: 1; min-width: 0; }
.ppc-cart-toast-body strong{
  display: block;
  font-family: var(--font-display);
  font-size: .95rem;
  margin-bottom: 2px;
}
.ppc-cart-toast-body p{
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.ppc-cart-toast-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ppc-cart-toast-actions .ppc-btn{ width: 100%; justify-content: center; }
.ppc-cart-toast-close{
  position: absolute;
  top: 10px; right: 10px;
  width: 24px; height: 24px;
  border: none; background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background .15s;
}
.ppc-cart-toast-close:hover{ background: var(--paper-dim); }

@media (max-width: 640px){
  .ppc-cart-toast{
    left: 14px; right: 14px;
    /* clear both the app-nav bar (64px) AND the back-to-top button
       that floats just above it (44px + its own 14px gap) */
    bottom: calc(64px + 44px + 28px + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
}

/* -------- Preview zoom modal -------- */
.ppc-lp-modal{
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
}
.ppc-lp-modal[hidden]{ display: none; }
.ppc-lp-modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(11,11,15,.88);
}
.ppc-lp-modal-panel{
  position: relative;
  width: min(92vw, 560px);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: 14px;
  overflow: hidden;
}
.ppc-lp-modal-close{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,11,15,.7); color: #fff; border: none;
  cursor: pointer;
}
.ppc-lp-modal-stage{
  flex: 1 1 auto;
  min-height: 260px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #f2f1ec 0%, #e7e4d8 100%);
  cursor: grab;
}
.ppc-lp-modal-stage.is-panning{ cursor: grabbing; }
.ppc-lp-modal-zoom-wrap{
  position: relative;
  display: inline-block;
  transition: transform .15s ease;
  will-change: transform;
}
.ppc-lp-modal-img{
  display: block;
  max-width: 70vw;
  max-height: 60vh;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(11,11,15,.25);
  pointer-events: none;
  user-select: none;
}
.ppc-lp-modal-controls{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--paper-line);
  background: var(--paper);
}
.ppc-lp-zoom-ctrl{
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--paper-line); background: #fff;
  font-size: 18px; font-weight: 600; line-height: 1; color: var(--ink);
  cursor: pointer; transition: background .15s;
}
.ppc-lp-zoom-ctrl:hover{ background: var(--paper-dim); }
.ppc-lp-zoom-level{
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft);
  min-width: 42px; text-align: center;
}
.ppc-lp-modal-size{
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--paper-line);
  font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft);
}

/* Lightbox */
.ppc-lightbox{
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(11,11,15,.94);
  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: 6px; }
.ppc-lightbox-close{
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px; 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; cursor: pointer;
}
.ppc-lightbox-close:hover{ background: #fff; color: var(--ink); }

/* Buy box / configurator */
.ppc-buybox{
  position: sticky; top: 90px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  overflow: hidden;
}

.ppc-buybox-price{
  padding: 22px 24px 18px;
  background: linear-gradient(180deg, var(--paper-dim), var(--paper));
  border-bottom: 1px solid var(--paper-line);
}
.ppc-buybox-price-main{ display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ppc-price-from{
  font-family: var(--font-mono); font-size:.7rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .06em;
}
.ppc-price-value{
  font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink);
}
.ppc-price-per{ font-family: var(--font-mono); font-size:.7rem; color: var(--ink-soft); }
.ppc-buybox-price-was{
  margin-top: 6px; display: flex; gap: 8px; align-items: center;
  font-family: var(--font-mono); font-size:.74rem; color: var(--ink-soft);
}
.ppc-buybox-save{
  background: var(--pixel-magenta); color: #fff;
  padding: 2px 8px; border-radius: 999px; font-size: .68rem;
}

/* Buy-box tabs */
.ppc-buybox-tabs{
  display: flex;
  border-bottom: 1px solid var(--paper-line);
  background: var(--paper);
}
.ppc-bb-tab{
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 12px;
  background: transparent; border: 0;
  font-family: var(--font-display); font-size:.85rem; font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.ppc-bb-tab:hover{ color: var(--ink); }
.ppc-bb-tab.is-active{ color: var(--ink); border-color: var(--pixel-magenta); }
.ppc-bb-panel{ display: none; padding: 18px 22px 22px; }
.ppc-bb-panel.is-active{ display: block; }

/* Configurator groups */
.ppc-cfg-group{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--paper-line);
}
.ppc-cfg-group:last-of-type{ border-bottom: 0; }
.ppc-cfg-head{
  flex: 0 0 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-top: 6px; /* roughly centers the label against the option row */
  margin-bottom: 0;
}
.ppc-cfg-label{
  font-family: var(--font-mono); font-size:.66rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
  line-height: 1.3;
}
.ppc-cfg-value{
  font-family: var(--font-display); font-size:.78rem; font-weight: 600;
  color: var(--ink);
}
.ppc-cfg-value--qty{ color: var(--pixel-magenta); }

/* Option styles — compact pills, sized down and aligned into a tidy
   grid (instead of a ragged flex-wrap) so rows with mixed-length
   labels like "500" vs "1000 (+$25.00)" still line up cleanly. */
.ppc-cfg-options{ flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ppc-cfg-options--pill{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 6px;
}
.ppc-cfg-opt{
  cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  color: var(--ink);
  font-family: var(--font-display); font-size: .78rem; font-weight: 500;
  padding: 6px 10px;
  border-radius: 4px;
  transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  text-align: center;
  line-height: 1.3;
}
.ppc-cfg-options--pill .ppc-cfg-opt{ width: 100%; }
.ppc-cfg-opt:hover{ border-color: var(--ink); }
.ppc-cfg-opt.is-active{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* Swatch (paper / finish) */
.ppc-swatch .ppc-swatch-dot{
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.08);
  flex: none;
  position: relative;
  box-shadow: inset 0 0 0 2px var(--paper);
}
.ppc-swatch.is-active .ppc-swatch-dot::after{
  content: ""; position: absolute; inset: 50%; transform: translate(-50%,-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--paper);
}
.ppc-swatch-dot--fin{
  background-image: linear-gradient(135deg, rgba(255,255,255,.4), rgba(0,0,0,.1)) !important;
}
.ppc-swatch-label{ font-size: .82rem; }

/* Toggle (single/double) */
.ppc-cfg-options--toggle{ display: flex; gap: 0; border: 1px solid var(--paper-line); border-radius: 4px; overflow: hidden; }
.ppc-cfg-options--toggle .ppc-cfg-opt{
  flex: 1; justify-content: center; border: 0; border-radius: 0;
  background: var(--paper);
}
.ppc-cfg-options--toggle .ppc-cfg-opt:not(:last-child){ border-right: 1px solid var(--paper-line); }
.ppc-cfg-options--toggle .ppc-cfg-opt.is-active{ background: var(--ink); color: var(--paper); }

/* Icon options (corner cut) */
.ppc-cfg-options--icon .ppc-cfg-opt{ flex-direction: column; gap: 4px; padding: 12px 16px; }
.ppc-cfg-icon{ display: flex; align-items: center; justify-content: center; color: var(--ink-soft); }
.ppc-cfg-opt.is-active .ppc-cfg-icon{ color: var(--paper); }
.ppc-cfg-icon-label{ font-size: .75rem; font-family: var(--font-mono); }

/* Quantity stepper */
.ppc-cfg-group--qty{ padding-bottom: 16px; }
.ppc-qty{
  display: flex; align-items: center;
  border: 1px solid var(--paper-line); border-radius: 4px;
  background: var(--paper);
  overflow: hidden;
  width: fit-content;
}
.ppc-qty-btn{
  width: 42px; height: 44px;
  background: var(--paper); border: 0;
  font-size: 1.1rem; font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s;
}
.ppc-qty-btn:hover{ background: var(--paper-dim); }
.ppc-qty-input{
  width: 80px; text-align: center;
  border: 0; background: transparent;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--ink);
  -moz-appearance: textfield;
}
.ppc-qty-input::-webkit-outer-spin-button,
.ppc-qty-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.ppc-qty-chips{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.ppc-qty-chip{
  font-family: var(--font-mono); font-size: .72rem;
  padding: 5px 10px;
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
}
.ppc-qty-chip:hover{ color: var(--ink); border-color: var(--ink); }
.ppc-qty-chip.is-active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Live total */
.ppc-total-row{
  display: flex; align-items: end; justify-content: space-between;
  padding: 16px;
  background: linear-gradient(140deg, var(--paper-dim), var(--paper));
  border-radius: 6px;
  margin: 16px 0 12px;
  border: 1px solid var(--paper-line);
}
.ppc-total-row-label{
  font-family: var(--font-mono); font-size:.7rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .08em;
}
.ppc-total-row-sub{
  font-family: var(--font-display); font-size: .82rem; color: var(--ink-soft);
}
.ppc-total-row-amount{
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* Buybox meta */
.ppc-buybox-meta{
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 4px;
  border-top: 1px dashed var(--paper-line);
  margin-top: 6px;
}
.ppc-buybox-meta-item{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size:.74rem; color: var(--ink-soft);
}
.ppc-buybox-meta-item svg{ color: var(--pixel-blue); flex: none; }

/* Spec table (used in specs panel + tabbed details) */
.ppc-spec-table{
  width: 100%; border-collapse: collapse; margin: 0;
  font-family: var(--font-mono); font-size: .82rem;
}
.ppc-spec-table tr{ border-bottom: 1px solid var(--paper-line); }
.ppc-spec-table td{ padding: 10px 0; color: var(--ink-soft); }
.ppc-spec-table td:last-child{ text-align: right; color: var(--ink); }
.ppc-spec-table--wide td:last-child{ text-align: left; }

/* Add-to-cart form (the original WooCommerce button) gets restyled */
.ppc-buybox .single_add_to_cart_button{
  width: 100%;
  background: var(--brand-gradient) !important;
  color: #fff !important;
  border: 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 1.05em 1.6em !important;
  border-radius: 4px !important;
  text-transform: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px;
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
}
.ppc-buybox .single_add_to_cart_button:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
  background: var(--brand-gradient) !important;
}
.ppc-buybox .quantity{ display: none; } /* we have our own qty stepper */
.ppc-buybox .ppc-hidden-cfg{ display: none; }

/* Upload panel */
.ppc-upload{
  text-align: center;
  padding: 10px 0;
}
.ppc-upload-icon{
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--paper-dim);
  display: flex; align-items: center; justify-content: center;
  color: var(--pixel-blue);
}
.ppc-upload strong{ display: block; font-family: var(--font-display); margin-bottom: 4px; }
.ppc-upload small{ display: block; font-size: .82rem; color: var(--ink-soft); margin-bottom: 16px; }

.ppc-dropzone{
  border: 1.5px dashed #C9C3B4;
  border-radius: 8px;
  padding: 22px 18px;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: all .15s;
}
.ppc-dropzone.is-dragover{ border-color: var(--pixel-magenta); background: var(--paper-dim); }
.ppc-dropzone-or{ font-family: var(--font-mono); font-size: .7rem; color: var(--ink-soft); }

.ppc-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: 4px;
  border: 1px solid var(--paper-line);
}
.ppc-upload-status.is-visible{ display: flex; }
.ppc-upload-status-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pixel-green); flex: none;
}
.ppc-upload-status.is-uploading .ppc-upload-status-dot{ background: var(--pixel-orange); animation: ppc-pulse 1.4s infinite; }

.ppc-upload-tips{
  list-style: none; padding: 14px 0 0; margin: 14px 0 0;
  border-top: 1px solid var(--paper-line);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
  text-align: left;
}
.ppc-upload-tips li{
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft);
  padding-left: 14px; position: relative;
}
.ppc-upload-tips li::before{
  content: "✓"; position: absolute; left: 0;
  color: var(--pixel-green);
}
.ppc-upload-alt{
  font-size: .78rem; color: var(--ink-soft); font-style: italic;
  margin: 14px 0 0;
}

/* -------------------------------------------------------------------------
   6. TIER PRICING STRIP
   ------------------------------------------------------------------------- */

.ppc-tier-strip{
  margin: 32px 0 8px;
  padding: 26px 26px 20px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 10px;
}
.ppc-tier-strip-head{
  display: flex; justify-content: space-between; align-items: end;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.ppc-tier-strip-head h3{ margin: 4px 0 0; font-size: 1.1rem; }
.ppc-tier-strip-note{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft);
  padding: 6px 10px;
  background: var(--paper-dim); border-radius: 999px;
}
.ppc-tier-strip-note svg{ color: var(--pixel-orange); }

.ppc-tier-table{
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--paper-line); border-radius: 6px;
  overflow: hidden;
}
.ppc-tier-row{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  align-items: center;
  padding: 12px 18px;
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--paper-line);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--ink);
  transition: background .15s;
}
.ppc-tier-row:last-child{ border-bottom: 0; }
.ppc-tier-row:hover{ background: var(--paper-dim); }
.ppc-tier-row--head{
  background: var(--paper-dim);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
  cursor: default;
}
.ppc-tier-row--head:hover{ background: var(--paper-dim); }
.ppc-tier-q strong{ font-family: var(--font-display); font-size: 1rem; }
.ppc-tier-q small{ font-family: var(--font-mono); color: var(--ink-soft); font-size: .68rem; margin-left: 4px; }
.ppc-tier-p{ font-family: var(--font-display); font-weight: 600; }
.ppc-tier-save{
  font-family: var(--font-mono); font-size: .72rem;
  background: var(--paper-dim); color: var(--pixel-magenta);
  padding: 3px 8px; border-radius: 999px;
  display: inline-block;
}
.ppc-tier-cta{
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft);
  white-space: nowrap;
}
.ppc-tier-row:hover .ppc-tier-cta{ color: var(--ink); }

/* -------------------------------------------------------------------------
   7. PRODUCT TABS (long description / specs / faq / reviews)
   ------------------------------------------------------------------------- */

.ppc-prod-tabs{ margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--paper-line); }
.ppc-prod-tabnav{
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--paper-line);
  margin-bottom: 30px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ppc-prod-tabnav::-webkit-scrollbar{ display: none; }
.ppc-prod-tabnav-btn{
  background: transparent; border: 0;
  padding: 14px 18px;
  font-family: var(--font-display); font-weight: 500; font-size: .92rem;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.ppc-prod-tabnav-btn:hover{ color: var(--ink); }
.ppc-prod-tabnav-btn.is-active{ color: var(--ink); border-color: var(--pixel-magenta); font-weight: 600; }

.ppc-prod-tabpanel{ display: none; }
.ppc-prod-tabpanel.is-active{ display: block; }
.ppc-prod-grid{
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 40px;
  align-items: start;
}
.ppc-prod-content{
  max-width: none;
  overflow-x: hidden;
  /* Grid items default to min-width:auto, which means the grid track
     will expand to fit content's natural (unbroken) size — including
     a long unbroken URL — no matter what wrapping rules say below.
     This is what let a long pasted link defeat overflow-wrap entirely
     and push the column wider than the page, specifically on narrow
     screens where there's no room left to absorb it. Allowing this
     column to actually shrink is what lets the wrapping rules work
     at all. */
  min-width: 0;
  /* Long unbroken text (a pasted URL, a long SKU/code with no spaces)
     is the other common cause of the exact same "right edge cut off"
     symptom, completely unrelated to the video — text like that just
     doesn't wrap on its own and pushes the column wider than the
     page. overflow-wrap:anywhere is the more aggressive modern
     replacement for break-word — it forces a break wherever needed,
     including mid-word, rather than only at some "soft" break
     opportunities the older property recognised. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ppc-prod-content a{
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* A wide table is the other classic cause of the same symptom — table
   cells refuse to shrink below their content's natural width, so a
   table with enough columns is wider than the column itself. Letting
   it scroll horizontally (only the table, not the whole page) keeps
   it usable instead of pushing everything else off-screen. */
.ppc-prod-content table{
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Belt-and-braces: whatever ends up in the description, none of it
   is allowed to be wider than the column that holds it. */
.ppc-prod-content > *{ max-width: 100%; }
.ppc-prod-content pre,
.ppc-prod-content code{
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.ppc-prod-content p{ font-size: 1rem; line-height: 1.7; }
.ppc-prod-content h2{ margin-top: 1.4em; }
.ppc-prod-content img{ border-radius: 8px; margin: 1em 0; }
/* Embedded video: was previously forced to fill the whole column at
   16:9, which is what made it feel oversized on desktop too, not just
   mobile. This is the actual fix — small, compact preview by default
   (JS wraps it in .ppc-video-embed and adds a play button), full size
   only in the lightbox modal on click, same interaction pattern the
   gallery images already use (#ppc-lightbox).
   This first rule (targeting the RAW, not-yet-wrapped tags directly)
   is the pre-JS safety net — it's what stops the brief "shows big,
   then shrinks" flash: JS wrapping only happens after the page
   finishes loading, so without this, the video briefly renders at
   its native/default size for a moment first. Capping it here too
   means it's never large even in that split second before JS runs. */
.ppc-prod-content iframe,
.ppc-prod-content video{
  max-width: 280px;
  max-height: 158px;
}
.ppc-video-embed{
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  margin: 1.2em 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11,11,15,.14);
}
.ppc-video-embed iframe,
.ppc-video-embed video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none; /* the small preview isn't interactive — clicking anywhere opens the full-size lightbox instead */
}
/* If WordPress's own block-editor embed wrapper ended up nested
   inside ours (see initDescriptionVideoEmbeds() in shop.js), flatten
   its sizing so IT just fills our fixed-size box too, instead of the
   two padding-ratio tricks fighting each other. */
.ppc-video-embed .wp-block-embed,
.ppc-video-embed .wp-block-embed__wrapper{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}
.ppc-video-embed-play{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11,11,15,.15);
  transition: background .15s ease;
}
.ppc-video-embed:hover .ppc-video-embed-play{ background: rgba(11,11,15,.3); }
.ppc-video-embed-play svg{
  width: 46px; height: 46px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
/* Lightbox video stage — reuses #ppc-lightbox's backdrop/close button,
   just swaps in a video-sized stage instead of an <img>. */
.ppc-lightbox-video-stage{
  width: min(90vw, 960px);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}
.ppc-lightbox-video-stage iframe,
.ppc-lightbox-video-stage video{
  width: 100%; height: 100%; border: 0; display: block;
}
.ppc-prod-content blockquote{
  border-left: 3px solid var(--pixel-magenta);
  margin: 1.4em 0; padding: .2em 0 .2em 1.2em;
  color: var(--ink-soft); font-style: italic;
}

/* Cleaner, more scannable typography for the product Description
   field content — the copy itself lives in wp-admin (not this
   template), but a consistent visual rhythm here makes even a long,
   section-heavy description feel organised instead of like a wall
   of text. */
.ppc-prod-content h2, .ppc-prod-content h3{
  font-family: var(--font-display);
  font-size: 1.05rem;
  padding-top: .6em;
  margin-bottom: .5em;
}
.ppc-prod-content ul, .ppc-prod-content ol{
  padding-left: 1.3em;
  line-height: 1.8;
}
.ppc-prod-content li{ margin-bottom: .3em; }
.ppc-prod-content hr{
  border: none;
  border-top: 1px solid var(--paper-line);
  margin: 1.8em 0;
}
.ppc-prod-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: .88rem;
}
.ppc-prod-content table td, .ppc-prod-content table th{
  padding: 8px 10px;
  border-bottom: 1px solid var(--paper-line);
  text-align: left;
}

/* Collapsible "Show full details" — keeps the default view short and
   purchase-focused; the full (sometimes long / section-heavy)
   description is still there for anyone who wants to read every
   detail, just not forced on everyone by default. */
.ppc-prod-content-wrap{
  position: relative;
  /* IMPORTANT: never clip/hide content here with overflow+max-height —
     third-party plugin buttons (e.g. the online design-tool CTA) can
     render anywhere inside the product description, and a hard clip
     silently hid one of them once already. Kept simple on purpose. */
}

.ppc-prod-side{ position: sticky; top: 90px; }
.ppc-prod-side-card{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  padding: 22px;
  margin-bottom: 16px;
}
.ppc-prod-side-card--ink{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ppc-prod-side-card--ink strong{ color: var(--paper); }
.ppc-prod-side-card--ink p{ color: #B8B6AE; }
.ppc-prod-side-card-head{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  margin-bottom: 14px;
  color: var(--ink);
}
.ppc-prod-side-steps{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.ppc-prod-side-steps li{
  display: grid; grid-template-columns: 32px 1fr; gap: 12px;
}
.ppc-prod-side-num{
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
  color: var(--paper);
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-top: 2px;
}
.ppc-prod-side-steps strong{ display: block; font-family: var(--font-display); font-size: .9rem; margin-bottom: 2px; }
.ppc-prod-side-steps p{ font-size: .82rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }

.ppc-faq{ max-width: 820px; }
.ppc-faq-item{
  border-bottom: 1px solid var(--paper-line);
  padding: 4px 0;
}
.ppc-faq-item summary{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  color: var(--ink);
  gap: 12px;
}
.ppc-faq-item summary::-webkit-details-marker{ display: none; }
.ppc-faq-chev{ transition: transform .2s; flex: none; }
.ppc-faq-item[open] .ppc-faq-chev{ transform: rotate(180deg); }
.ppc-faq-body{ padding: 0 0 16px; color: var(--ink-soft); font-size: .94rem; line-height: 1.6; }

/* -------------------------------------------------------------------------
   8. CART PAGE
   ------------------------------------------------------------------------- */

.ppc-cart{ background: var(--paper); }

.ppc-cart-hero{
  padding: 32px 0 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--paper-line);
}
.ppc-cart-hero-inner{
  display: flex; align-items: end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.ppc-cart-title{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.02em;
  margin: 6px 0 8px;
}
.ppc-cart-sub{
  color: var(--ink-soft); font-size: .95rem; margin: 0;
}

.ppc-cart-body{ padding: 30px 0 60px; }
.ppc-cart-layout{
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 36px;
  align-items: start;
}

.ppc-cart-list{
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 22px;
}

.ppc-cart-row{
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 22px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
  align-items: start;
}
.ppc-cart-row:hover{ border-color: #D8D3C5; }

.ppc-cart-thumb{
  display: block;
  width: 140px; height: 140px;
  border-radius: 8px; overflow: hidden;
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
}
.ppc-cart-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ppc-cart-thumb img{ width: 100%; height: 100%; object-fit: cover; }

.ppc-cart-info{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ppc-cart-info-top{ display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; min-width: 0; }
.ppc-cart-info-top > div:first-child{ min-width: 0; flex: 1; }
.ppc-cart-name{
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  margin: 0 0 4px; line-height: 1.3;
  max-width: 100%;
  word-wrap: break-word;
}
.ppc-cart-name a{ color: var(--ink); text-decoration: none; }
.ppc-cart-name a:hover{ color: var(--pixel-magenta); }
.ppc-cart-name a{ color: var(--ink); }
.ppc-cart-name a:hover{ color: var(--pixel-magenta); }
.ppc-cart-meta{
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft);
}
.ppc-cart-meta dl, .ppc-cart-meta dt, .ppc-cart-meta dd{ display: inline; margin: 0; }
.ppc-cart-meta dt{ font-weight: 500; color: var(--ink); margin-right: 4px; }
.ppc-cart-meta dd{ margin-right: 10px; }
.ppc-cart-meta p{ margin: 0; }
.ppc-cart-meta-item{ display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; }
.ppc-cart-meta-item svg{ color: var(--pixel-blue); }

.ppc-cart-lineprice{
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
  align-self: start;
}

.ppc-cart-info-bottom{
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed var(--paper-line);
}

.ppc-cart-stepper .quantity{ display: flex; align-items: center; }
.ppc-cart-stepper .qty{
  display: flex; align-items: center;
  border: 1px solid var(--paper-line); border-radius: 4px;
  background: var(--paper);
  overflow: hidden;
}
.ppc-cart-stepper .qty .minus,
.ppc-cart-stepper .qty .plus{
  width: 32px; height: 32px;
  background: var(--paper); border: 0; cursor: pointer;
  font-size: 1rem; color: var(--ink);
}
.ppc-cart-stepper .qty .minus:hover,
.ppc-cart-stepper .qty .plus:hover{ background: var(--paper-dim); }
.ppc-cart-stepper .qty input.qty{
  width: 56px; height: 32px;
  border: 0; background: transparent;
  text-align: center;
  font-family: var(--font-display); font-weight: 600;
  -moz-appearance: textfield;
}
.ppc-cart-stepper .qty input.qty::-webkit-outer-spin-button,
.ppc-cart-stepper .qty input.qty::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

.ppc-cart-rowlinks{ display: flex; gap: 14px; }
.ppc-cart-link{
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .15s;
}
.ppc-cart-link:hover{ color: var(--ink); }
.ppc-cart-link--danger{ color: var(--ink-soft); }
.ppc-cart-link--danger:hover{ color: var(--pixel-magenta); }

.ppc-cart-utils{
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px;
  padding: 18px 20px;
  background: var(--paper-dim);
  border-radius: 8px;
  border: 1px dashed var(--paper-line);
}
.ppc-cart-coupon{ display: flex; align-items: center; gap: 8px; flex: 1; min-width: 280px; }
.ppc-cart-coupon-input{
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: var(--paper);
  border: 1px solid var(--paper-line); border-radius: 4px;
}
.ppc-cart-coupon-input svg{ color: var(--ink-soft); flex: none; }
.ppc-cart-coupon-input input{
  flex: 1; border: 0; background: transparent; padding: .7em 0;
  font-family: var(--font-body); font-size: .88rem;
  outline: none;
}
.ppc-cart-utils-right{ display: flex; gap: 8px; }

/* Order summary */
.ppc-cart-summary{ position: sticky; top: 96px; }
.ppc-cart-summary .cart_totals,
.ppc-cart-summary .woocommerce-shipping-methods,
.ppc-cart-summary .woocommerce-checkout-review-order-table{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 14px;
}
.ppc-cart-summary h2,
.ppc-cart-summary .cart_totals h2{ font-size: 1.15rem; margin: 0 0 16px; }
.ppc-cart-summary table.shop_table,
.ppc-cart-summary .cart_totals table{ width: 100%; border-collapse: collapse; }
.ppc-cart-summary table.shop_table th,
.ppc-cart-summary .cart_totals table th,
.ppc-cart-summary table.shop_table td,
.ppc-cart-summary .cart_totals table td{
  padding: 10px 0;
  border-bottom: 1px solid var(--paper-line);
  text-align: left;
  font-size: .9rem;
}
.ppc-cart-summary table.shop_table th,
.ppc-cart-summary .cart_totals table th{ color: var(--ink-soft); font-weight: 500; font-family: var(--font-mono); font-size:.78rem; }
.ppc-cart-summary table.shop_table td,
.ppc-cart-summary .cart_totals table td{ text-align: right; }
.ppc-cart-summary .order-total th,
.ppc-cart-summary .order-total td{
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--ink);
  border-bottom: 0;
  padding-top: 14px;
}
.ppc-cart-summary .wc-proceed-to-checkout{ margin-top: 16px; }

/* =========================================================
   SHIPPING METHOD LIST — WooCommerce ships this as a totally
   unstyled <ul id="shipping_method"><li><input><label> — this
   gives it the same visual language as the rest of the site
   (pill-style rows, our fonts/colors) instead of raw browser
   radio buttons in default serif/system font.
   ========================================================= */
#shipping_method{
  list-style: none;
  margin: 0;
  padding: 0;
}
#shipping_method li{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1.5px solid var(--paper-line);
  border-radius: 8px;
  background: var(--paper);
  transition: border-color .15s, background .15s;
}
#shipping_method li:last-child{ margin-bottom: 0; }
#shipping_method li:hover{ border-color: var(--ink-soft); }
/* Highlight the selected row */
#shipping_method li:has(input:checked){
  border-color: var(--pixel-magenta);
  background: rgba(227,28,121,.05);
}
#shipping_method li input[type="radio"]{
  accent-color: var(--pixel-magenta);
  width: 16px; height: 16px;
  flex: none;
  margin: 0;
}
#shipping_method li label{
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: .88rem;
  color: var(--ink);
  cursor: pointer;
}
#shipping_method .woocommerce-Price-amount{
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 600;
}
#shipping_method li:has(input:checked) .woocommerce-Price-amount{
  color: var(--pixel-magenta);
}

/* On CHECKOUT specifically, this raw list is redundant — the page
   already has a nicely-designed "Delivery" picker (Ship / Pickup
   cards) in the main form that drives the real selection via JS
   (see ppcDeliverySync in main.js). Showing this second, plainer
   radio list again in the sidebar was confusing duplicate UI, so we
   collapse it down to a clean read-only summary of whichever option
   is currently selected — the radios stay in the DOM (JS still needs
   them), just visually reduced to one plain line. */
.ppc-checkout-sidebar #shipping_method li{ display: none; }
.ppc-checkout-sidebar #shipping_method li:has(input:checked){
  display: flex;
  border: 0;
  background: transparent;
  padding: 4px 0;
  margin: 0;
}
.ppc-checkout-sidebar #shipping_method li:has(input:checked) input[type="radio"]{
  display: none;
}
.ppc-checkout-sidebar #shipping_method li:has(input:checked) label{
  padding: 0;
  cursor: default;
  font-weight: 600;
}

/* "Shipping to <address>. Change address" line under the list */
.woocommerce-shipping-destination{
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.shipping-calculator-button{
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  color: var(--pixel-magenta) !important;
  text-decoration: none;
}
.shipping-calculator-button:hover{ text-decoration: underline; }

.ppc-cart-summary .wc-proceed-to-checkout a.checkout-button{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: var(--brand-gradient) !important;
  color: #fff !important;
  font-family: var(--font-display) !important; font-weight: 600;
  font-size: 1rem;
  padding: 1em 1.4em;
  border-radius: 4px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.ppc-cart-summary .wc-proceed-to-checkout a.checkout-button:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
  background: var(--brand-gradient) !important;
}
.ppc-cart-summary .wc-proceed-to-checkout a.checkout-button::after{
  content: "→"; font-size: 1.1rem;
}

.ppc-cart-trust{
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  margin-top: 14px;
}
.ppc-cart-trust-item{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft);
}
.ppc-cart-trust-item svg{ color: var(--pixel-green); flex: none; }

.ppc-cart-pay{
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--paper-dim);
  border-radius: 8px;
  border: 1px solid var(--paper-line);
  font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft);
}
.ppc-cart-pay > span{ display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .08em; }
.ppc-cart-pay-row{ display: flex; gap: 6px; flex-wrap: wrap; }
.ppc-pay{
  background: var(--paper); border: 1px solid var(--paper-line);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: .7rem; font-weight: 500;
  color: var(--ink);
}

/* Empty cart */
.ppc-cart-empty{
  text-align: center;
  max-width: 520px;
  margin: 40px auto;
  padding: 40px 30px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 10px;
}
.ppc-cart-empty-icon{ color: var(--paper-line); margin-bottom: 16px; }
.ppc-cart-empty h2{ margin-bottom: 8px; }
.ppc-cart-empty p{ color: var(--ink-soft); margin-bottom: 22px; }
.ppc-cart-empty-pills{
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 22px;
}
.ppc-cart-empty-pill{
  font-family: var(--font-mono); font-size: .7rem;
  padding: 5px 10px; border-radius: 999px;
  background: var(--paper-dim); color: var(--ink-soft);
  border: 1px solid var(--paper-line);
}

/* -------------------------------------------------------------------------
   9. CHECKOUT PAGE
   ------------------------------------------------------------------------- */

.ppc-checkout{ background: var(--paper); }

.ppc-checkout-body{ padding: 30px 0 60px; }
.ppc-checkout-layout{
  display: grid;
  /* Was `1fr 380px` — on a wide screen the left column stretched
     un-capped (form fields ballooning to 700-800px+, awkward to
     read/scan) while the right column stayed a cramped fixed 380px
     (squeezing the order review AND the payment-gateway box, which
     is what made the card-brand icons and shipping summary feel so
     tight). Capping the left and letting the right take the rest
     balances both at once. */
  grid-template-columns: minmax(0, 620px) 1fr;
  gap: 36px;
  align-items: start;
}

.ppc-checkout-main{ display: flex; flex-direction: column; gap: 16px; }

/* The order-summary card ("Your order") had NO base card styling at
   all on desktop — no background, border, radius, or padding — only
   a mobile-only padding override existed. That's why it looked like
   loose content "planted" straight onto the page instead of a
   contained box like every other section here (.ppc-checkout-section
   below). Same visual treatment, so it matches. */
.ppc-checkout-sidebar-card{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  padding: 24px 26px;
}
.ppc-checkout-sidebar-card h3{
  font-size: 1.15rem;
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--paper-line);
}

.ppc-checkout-section{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  padding: 24px 26px;
}
.ppc-checkout-section-head{
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--paper-line);
  margin-bottom: 18px;
}
.ppc-checkout-section-num{
  flex: none;
  width: 36px; height: 36px;
  background: var(--paper-dim);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  color: var(--ink);
}
.ppc-checkout-section-head h3{
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  margin: 0 0 4px;
}
.ppc-checkout-section-head p{ color: var(--ink-soft); font-size: .85rem; margin: 0; }

.ppc-checkout-express{ padding-bottom: 18px; }
.ppc-checkout-express-buttons{ padding: 8px 0 16px; }
.ppc-checkout-divider{
  display: flex; align-items: center; gap: 14px;
  margin-top: 6px;
  color: var(--ink-soft);
  font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
}
.ppc-checkout-divider::before, .ppc-checkout-divider::after{
  content: ""; flex: 1; height: 1px; background: var(--paper-line);
}

/* Radio cards (delivery mode) */
.ppc-checkout-delivery{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 14px;
}
.ppc-radio{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px;
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  cursor: pointer;
  background: var(--paper);
  transition: all .15s;
}
.ppc-radio:hover{ border-color: var(--ink); }
.ppc-radio input{ display: none; }
.ppc-radio input:checked + .ppc-radio-box{
  background: var(--ink); border-color: var(--ink);
}
.ppc-radio input:checked + .ppc-radio-box::after{
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ppc-radio:has(input:checked){ border-color: var(--ink); background: var(--paper-dim); }
.ppc-radio-box{
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--paper-line);
  position: relative;
  margin-top: 2px;
}
.ppc-radio-body strong{ display: block; font-family: var(--font-display); font-size: .9rem; margin-bottom: 2px; }
.ppc-radio-body small{ display: block; font-size: .78rem; color: var(--ink-soft); line-height: 1.4; }

/* Paybar (final submit) */
.ppc-checkout-paybar{
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--paper-line);
}
.ppc-checkout-paybar #place_order{ width: 100%; }
.ppc-checkout-fineprint{
  display: block; text-align: center;
  margin-top: 12px;
  color: var(--ink-soft); font-size: .78rem;
}

/* "Continue with Google" — login/register forms (see
   ppc_render_google_login_button() in functions.php) */
.ppc-google-login{
  margin: 0 0 20px;
}
.ppc-google-login-btn{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid var(--paper-line);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .92rem;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ppc-google-login-btn:hover{
  border-color: var(--ink-soft);
  box-shadow: 0 2px 8px rgba(11,11,15,.08);
  color: var(--ink);
}
.ppc-google-login::after{
  content: '';
  display: block;
  height: 1px;
  background: var(--paper-line);
  margin: 20px 0;
  position: relative;
}

/* Form fields (re-style WooCommerce's defaults) */
.woocommerce form .form-row{
  margin-bottom: 14px !important;
  padding: 0 !important;
}
.woocommerce form .form-row label{
  font-family: var(--font-mono); font-size: .7rem !important;
  color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 4px !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{
  width: 100% !important;
  padding: .8em 1em !important;
  border: 1px solid var(--paper-line) !important;
  border-radius: 4px !important;
  background: var(--paper) !important;
  font-family: var(--font-body) !important;
  font-size: .9rem !important;
  color: var(--ink) !important;
  transition: border-color .15s, box-shadow .15s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus{
  outline: 0;
  border-color: var(--ink) !important;
  box-shadow: 0 0 0 3px rgba(11,11,15,.06);
}
.woocommerce form .form-row-wide{ width: 100% !important; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last{ width: 49% !important; }
.woocommerce form .form-row label .required{ color: var(--pixel-magenta); }
.woocommerce-checkout #payment{
  background: var(--paper) !important;
  border: 1px solid var(--paper-line) !important;
  border-radius: 8px !important;
}
.woocommerce-checkout #payment .payment_methods{
  padding: 0 !important;
  border: 0 !important;
}
.woocommerce-checkout #payment .payment_methods li{
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--paper-line) !important;
}
.woocommerce-checkout #payment .payment_methods li:last-child{ border-bottom: 0 !important; }
.woocommerce-checkout #payment .payment_box{ background: var(--paper-dim) !important; }

/* Card-brand icons (Visa/Mastercard/Amex/etc.) inside the payment
   method label were stacking one-per-line — the site has a global
   `img{ display:block }` reset (for predictable layout everywhere
   else), which was applying to these small inline logos too. They
   need to flow as a horizontal row like everywhere else this pattern
   appears online. */
.woocommerce-checkout #payment .payment_methods li label{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.woocommerce-checkout #payment .payment_methods li label img{
  display: inline-block !important;
  width: auto !important;
  height: 22px !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Checkout summary (sticky right column) */
.ppc-checkout-summary{ position: sticky; top: 96px; }
.ppc-checkout-summary-card{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  padding: 24px;
}
.ppc-checkout-summary-card > header{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.ppc-checkout-summary-card > header h3{ font-size: 1.1rem; margin: 0; }
.ppc-checkout-summary-edit{
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--paper-line); border-radius: 4px;
  transition: all .15s;
}
.ppc-checkout-summary-edit:hover{ color: var(--ink); border-color: var(--ink); }

.ppc-checkout-summary-items{
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--paper-line);
  max-height: 280px;
  overflow-y: auto;
}
.ppc-checkout-summary-row{
  display: grid; grid-template-columns: 56px 1fr auto; gap: 12px;
  align-items: center;
}
.ppc-checkout-summary-thumb{
  position: relative;
  width: 56px; height: 56px;
  border-radius: 4px; overflow: hidden;
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
}
.ppc-checkout-summary-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.ppc-checkout-summary-qty{
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: .68rem;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500;
}
.ppc-checkout-summary-name{ font-family: var(--font-display); font-weight: 500; font-size: .88rem; line-height: 1.3; }
.ppc-checkout-summary-meta{ font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft); margin-top: 2px; }
.ppc-checkout-summary-meta dl, .ppc-checkout-summary-meta dt, .ppc-checkout-summary-meta dd{ display: inline; margin: 0; }
.ppc-checkout-summary-meta dt{ font-weight: 500; color: var(--ink); margin-right: 4px; }
.ppc-checkout-summary-meta dd{ margin-right: 8px; }
.ppc-checkout-summary-meta p{ margin: 0; }
.ppc-checkout-summary-price{
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  white-space: nowrap;
}

.ppc-checkout-summary-totals{
  width: 100%; border-collapse: collapse;
  margin-bottom: 16px;
}
.ppc-checkout-summary-totals th,
.ppc-checkout-summary-totals td{
  padding: 8px 0;
  font-size: .88rem;
  border: 0;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-checkout-summary-totals th{ color: var(--ink-soft); font-weight: 500; text-align: left; font-family: var(--font-mono); font-size:.75rem; }
.ppc-checkout-summary-totals td{ text-align: right; }
.ppc-checkout-summary-totals .order-total th,
.ppc-checkout-summary-totals .order-total td{
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--ink);
  border-bottom: 0;
  padding-top: 12px;
}

.ppc-checkout-summary-eta{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--paper-dim);
  border-radius: 6px;
  margin-bottom: 14px;
}
.ppc-checkout-summary-eta svg{ color: var(--pixel-orange); flex: none; }
.ppc-checkout-summary-eta strong{ display: block; font-family: var(--font-display); font-size: .88rem; }
.ppc-checkout-summary-eta span{ display: block; font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------------------- */

@media (max-width: 1100px){
  .ppc-product-main{ grid-template-columns: 1fr; }
  .ppc-gallery, .ppc-buybox{ position: static; }
  .ppc-shop-hero-inner{ grid-template-columns: 1fr; }
  .ppc-shop-hero-right{ grid-template-columns: repeat(3, 1fr); flex-direction: row; }
  .ppc-shop-layout{ grid-template-columns: 1fr; }
  .ppc-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: 26px;
    transform: translateY(100%);
    transition: transform .3s ease;
    z-index: 90;
  }
  .ppc-shop-filters.is-open{ transform: translateY(0); }
  .ppc-shop-filters-close{
    display: block; position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--paper-dim); border: 0; font-size: 1.4rem; line-height: 1;
    cursor: pointer;
  }
  .ppc-shop-toolbar-mobile{ display: flex; }
  .ppc-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;
  }
  .ppc-shop-filters-overlay.is-open{ opacity: 1; visibility: visible; }
  .ppc-cart-layout, .ppc-checkout-layout{ grid-template-columns: 1fr; }
  .ppc-cart-summary, .ppc-checkout-summary{ position: static; }
  .ppc-prod-grid{ grid-template-columns: 1fr; }
  .ppc-prod-side{ position: static; }
  .ppc-checkout-delivery{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  ul.products{ grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; align-items: stretch !important; }
  .ppc-shop-hero{ padding: 36px 0 28px; }
  .ppc-shop-hero-right{ grid-template-columns: 1fr; }
  .ppc-shop-hero-stat{ flex-direction: row; align-items: baseline; gap: 10px; padding: 10px 14px; }
  .ppc-shop-hero-stat strong{ font-size: 1.2rem; }
  .ppc-tier-row{ grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px; }
  .ppc-tier-row .ppc-tier-cta{ grid-column: span 2; text-align: right; }
  .ppc-cart-row{ grid-template-columns: 90px 1fr; gap: 12px; padding: 14px; }
  .ppc-cart-thumb{ width: 90px; height: 90px; }
  .ppc-cart-info{ grid-column: 1 / -1; }
  .ppc-cart-lineprice{ text-align: left; font-size: 1.05rem; }
  .ppc-cart-info-bottom{ flex-direction: column; align-items: stretch; }
  .ppc-cart-rowlinks{ justify-content: space-between; }
  .ppc-cart-utils{ flex-direction: column; align-items: stretch; }
  .ppc-cart-coupon{ min-width: 0; }
  .ppc-checkout-section{ padding: 20px 18px; }
  .ppc-product-pills{ display: none; }
  .ppc-product-title{ font-size: 1.7rem; }
}

@media (max-width: 480px){
  ul.products{ grid-template-columns: 1fr !important; align-items: stretch !important; }
  .ppc-card-body{ padding: 14px; }
  .ppc-card-title{ font-size: .95rem; }
  .ppc-cart-row{ grid-template-columns: 70px 1fr; }
  .ppc-cart-thumb{ width: 70px; height: 70px; }
  .ppc-cart-lineprice{ font-size: .95rem; }
  .ppc-shop-title, .ppc-cart-title{ font-size: 2rem; }
}

/* -------------------------------------------------------------------------
   11. WAPF (Advanced Product Fields) INTEGRATION
   When the store uses StudioWombat's "Advanced Product Fields for WooCommerce"
   plugin to define product options, our theme renders its own visual swatches
   that drive the underlying wapf radio inputs. To prevent the user from
   seeing TWO sets of controls (the wapf radios + our swatches), we hide
   wapf's UI here while keeping the inputs functional (so JS can still
   check them, the price can still be recalculated, and the form can still
   submit the selected values).
   ------------------------------------------------------------------------- */

/* =================================================================
   wapf (Advanced Product Fields) NATIVE UI STYLING
   ----------------------------------------------------------------
   We SHOW wapf's native UI and style it to match our site. The
   plugin's logic still handles everything: validation, price
   calculation, required-field checks, form submission. We just
   make it look like the rest of the configurator.
   ================================================================= */

/* Reset wapf defaults so the styling is consistent with our theme */
.ppc-product .wapf-wrapper {
    display: block;
    font-family: inherit;
    color: var(--ink, #0B0B0F);
}
.ppc-product .wapf-wrapper *,
.ppc-product .wapf-wrapper *::before,
.ppc-product .wapf-wrapper *::after {
    box-sizing: border-box;
}

/* Field group = one row: label on the left, options on the right —
   NOT stacked. This governs the REAL visible configurator (wapf's
   native markup, styled directly) — a separate, earlier attempt at
   this used .ppc-cfg-group, which turned out not to be what actually
   renders on this site's product pages. This block is the one that
   matters. */
.ppc-product .wapf-wrapper .wapf-field-group,
.ppc-product .wapf-wrapper .wapf-field,
.ppc-product .wapf-wrapper .wapf-quantity,
.ppc-product .wapf-wrapper > div {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 14px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Field label (wapf renders the label text as a child of the field group) */
.ppc-product .wapf-wrapper .wapf-label,
.ppc-product .wapf-wrapper .wapf-field-label,
.ppc-product .wapf-wrapper label:first-child {
    flex: 0 0 96px;
    padding-top: 6px; /* roughly centers the label against the option row */
    font-family: var(--font-display, sans-serif);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-soft, #4a4a52);
    margin: 0;
}

/* The options container — a real grid on desktop so items always
   wrap into neat, equal rows within the available width (flex-wrap
   could let long labels refuse to shrink and overflow past the
   buybox's rounded corners, which are clipped by overflow:hidden —
   that's what was making the last option or two seem to "vanish").
   Grid guarantees every item fits inside the row it's given. */
.ppc-product .wapf-wrapper .wapf-options,
.ppc-product .wapf-wrapper .wapf-input-group,
.ppc-product .wapf-wrapper .wapf-swatch-list {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
}
@media (max-width: 900px) {
    /* Narrow screens: back to stacked (label above, options below,
       horizontal-scrolling) — there isn't room for side-by-side. */
    .ppc-product .wapf-wrapper .wapf-field-group,
    .ppc-product .wapf-wrapper .wapf-field,
    .ppc-product .wapf-wrapper .wapf-quantity,
    .ppc-product .wapf-wrapper > div {
        display: block;
    }
    .ppc-product .wapf-wrapper .wapf-label,
    .ppc-product .wapf-wrapper .wapf-field-label,
    .ppc-product .wapf-wrapper label:first-child {
        display: block;
        flex-basis: auto;
        padding-top: 0;
        margin: 0 0 10px;
    }
    .ppc-product .wapf-wrapper .wapf-options,
    .ppc-product .wapf-wrapper .wapf-input-group,
    .ppc-product .wapf-wrapper .wapf-swatch-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -18px;
        padding: 4px 18px 8px;
    }
    .ppc-product .wapf-wrapper .wapf-options::-webkit-scrollbar,
    .ppc-product .wapf-wrapper .wapf-input-group::-webkit-scrollbar,
    .ppc-product .wapf-wrapper .wapf-swatch-list::-webkit-scrollbar {
        display: none;
    }
    /* Restore fixed-width behaviour for the horizontal-scroll row —
       grid's minmax() sizing doesn't apply once the parent is back
       to flex on mobile, so pills need flex:0 0 auto again here or
       they'd get squeezed instead of scrolling. */
    .ppc-product .wapf-wrapper label:has(input[type="radio"]),
    .ppc-product .wapf-wrapper label:has(input[type="checkbox"]) {
        flex: 0 0 auto;
    }
}

/* Each option is wrapped in a <label> by wapf. We style the label
   as a card. */
.ppc-product .wapf-wrapper label:has(input[type="radio"]),
.ppc-product .wapf-wrapper label:has(input[type="checkbox"]) {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 8px;
    background: #fff;
    border: 1.5px solid var(--paper-line, #ECE9DF);
    border-radius: 10px;
    font-family: var(--font-display, sans-serif);
    font-size: 11px;
    font-weight: 500;
    color: var(--ink, #0B0B0F);
    text-align: center;
    line-height: 1.25;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .1s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
    scroll-snap-align: start;
}
.ppc-product .wapf-wrapper label:has(input[type="radio"]):hover,
.ppc-product .wapf-wrapper label:has(input[type="checkbox"]):hover {
    border-color: rgba(110,47,242,.4);
    box-shadow: 0 2px 8px rgba(11,11,15,.06);
}
.ppc-product .wapf-wrapper label:has(input[type="radio"]):active,
.ppc-product .wapf-wrapper label:has(input[type="checkbox"]):active {
    transform: scale(.97);
}

/* When the input is checked, style the label as the active card */
.ppc-product .wapf-wrapper label:has(input[type="radio"]:checked),
.ppc-product .wapf-wrapper label:has(input[type="checkbox"]:checked) {
    border-color: transparent;
    background: linear-gradient(135deg, rgba(46,111,242,.06), rgba(227,28,121,.06));
    box-shadow: 0 0 0 2px var(--ppc-magenta, #E31C79), 0 4px 14px rgba(227,28,121,.12);
    color: var(--ink, #0B0B0F);
}

/* The radio/checkbox itself: keep it accessible but visually clean */
.ppc-product .wapf-wrapper input[type="radio"],
.ppc-product .wapf-wrapper input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--paper-line, #ECE9DF);
    background: #fff;
    flex: 0 0 auto;
    cursor: pointer;
    position: relative;
    margin: 0;
}
.ppc-product .wapf-wrapper input[type="radio"] {
    border-radius: 50%;
}
.ppc-product .wapf-wrapper input[type="checkbox"] {
    border-radius: 5px;
}
.ppc-product .wapf-wrapper input[type="radio"]:checked {
    border-color: var(--ppc-magenta, #E31C79);
    background: var(--ppc-magenta, #E31C79);
    box-shadow: inset 0 0 0 3px #fff;
}
.ppc-product .wapf-wrapper input[type="checkbox"]:checked {
    border-color: var(--ppc-magenta, #E31C79);
    background: var(--ppc-magenta, #E31C79);
}
.ppc-product .wapf-wrapper input[type="checkbox"]:checked::after {
    content: '\2713';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* Hide the radios inside wapf swatch cards (they're decorative;
   the label handles the click) */
.ppc-product .wapf-wrapper .wapf-swatch label input[type="radio"],
.ppc-product .wapf-wrapper .wapf-swatch-list label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}

/* Price text inside wapf options (e.g., "+$5.00") */
.ppc-product .wapf-wrapper .wapf-option-price,
.ppc-product .wapf-wrapper .wapf-price,
.ppc-product .wapf-wrapper .wapf-extra-price,
.ppc-product .wapf-wrapper [class*="wapf"][class*="price"] {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    color: var(--ppc-magenta, #E31C79);
    background: rgba(227,28,121,.08);
    padding: 1px 5px;
    border-radius: 5px;
    margin-left: 0;
    white-space: nowrap;
}

/* Totals block — JS in main.js (wapfTotalsCleanup) hides Product/Options
   and keeps only Grand total. This CSS is the backup in case JS doesn't
   run (older browsers, ad blockers, etc). */
.ppc-product .wapf-wrapper .wapf-product-totals,
.ppc-product .wapf-wrapper [class*="wapf"][class*="total"] {
    background: linear-gradient(135deg, rgba(46,111,242,.04), rgba(227,28,121,.04));
    border: 1px solid var(--paper-line, #ECE9DF);
    border-radius: 14px;
    padding: 12px 16px;
    margin: 10px 0;
    font-family: var(--font-display, sans-serif);
}

/* Hide the Product total row (the div containing the .wapf-product-total span) */
/* This works without :has() — we just hide the span and any label "Product total" */
.ppc-product .wapf-wrapper .wapf-product-total,
.ppc-product .wapf-wrapper .wapf-options-total {
    display: none !important;
}
.ppc-product .wapf-wrapper .wapf-product-totals span:only-of-type,
.ppc-product .wapf-wrapper .wapf-product-totals .wapf-grand-total {
    display: inline-block !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--ink, #0B0B0F) !important;
    font-variant-numeric: tabular-nums;
}

/* Target the parent divs directly: wapf renders them as siblings
   inside .wapf--inner. We use direct class attributes to find them
   and hide their parent. */
.ppc-product .wapf-wrapper .wapf--inner div:has(> .wapf-product-total),
.ppc-product .wapf-wrapper .wapf--inner div:has(> .wapf-options-total) {
    display: none !important;
}

/* Section titles / info from wapf */
.ppc-product .wapf-wrapper .wapf-section-title {
    font-family: var(--font-display, sans-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink, #0B0B0F);
    margin: 24px 0 8px;
}
.ppc-product .wapf-wrapper .wapf-section-info {
    font-size: 13px;
    color: var(--ink-soft, #4a4a52);
    margin: 0 0 12px;
}

/* =================================================================
   § 12 — wapf integration styles
   ----------------------------------------------------------------
   The Advanced Product Fields (wapf) plugin still controls
   pricing and form submission. We hide its UI but keep its inputs
   in the DOM. The .ppc-tier-strip[data-cfg-source="wapf"] rows are
   our visual representation of wapf quantity options.
   ================================================================= */
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row {
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row:hover {
    background: var(--ppc-bg-2, #f5f6fa);
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row.is-active {
    background: linear-gradient(135deg, #2E6FF2 0%, #6E2FF2 50%, #E31C79 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(46, 111, 242, .25);
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row.is-active .ppc-tier-p,
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row.is-active .ppc-tier-cta,
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row.is-active .ppc-tier-save {
    color: #fff;
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row.is-active small {
    color: rgba(255,255,255,.85);
}
/* When wapf is in play, the .ppc-total-row is a live mirror of the
   wapf grand total. Show a small "Updated live" hint. */
.ppc-total-row[data-ppc-wapf-total="1"] {
    position: relative;
}
.ppc-total-row[data-ppc-wapf-total="1"]::after {
    content: 'updated live';
    position: absolute;
    top: 4px;
    right: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #3FA746;
    background: rgba(63, 167, 70, .1);
    padding: 2px 8px;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ppc-total-row[data-ppc-wapf-total="1"]::before {
    content: '';
    position: absolute;
    top: 11px;
    right: 96px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3FA746;
    box-shadow: 0 0 0 4px rgba(63, 167, 70, .25);
    animation: ppc-pulse 1.5s ease-in-out infinite;
}
@keyframes ppc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(1.2); }
}
/* When the total row is in wapf mode, drop the "—" placeholder and
   let the mirrored text show immediately. */
.ppc-total-row[data-ppc-wapf-total="1"] #ppc-total-amount {
    font-variant-numeric: tabular-nums;
}

/* =================================================================
   § 13 — Self-design (print.app) info UI
   ----------------------------------------------------------------
   The print.app plugin renders its own "Design it yourself"
   button on the product page. We add three small pieces of UI
   that surface the feature to the customer:
     1. .ppc-selfdesign      — full callout inside the Upload tab
     2. .ppc-selfdesign-hint — small inline badge under buybox meta
     3. A new step "00" in the "How we work" sidebar
   ================================================================= */
.ppc-selfdesign {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 18px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(46,111,242,.06) 0%, rgba(110,47,242,.06) 50%, rgba(227,28,121,.06) 100%);
    border: 1px dashed rgba(110,47,242,.35);
    border-radius: 12px;
    position: relative;
}
.ppc-selfdesign::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(46,111,242,.02), rgba(227,28,121,.02));
}
.ppc-selfdesign-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2E6FF2 0%, #6E2FF2 50%, #E31C79 100%);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px rgba(110,47,242,.22);
}
.ppc-selfdesign-body { position: relative; }
.ppc-selfdesign-body strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ppc-ink, #0B0B0F);
    margin-bottom: 4px;
}
.ppc-selfdesign-body p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(11,11,15,.72);
    margin: 0 0 6px;
}
.ppc-selfdesign-body small {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #6E2FF2;
    background: rgba(110,47,242,.08);
    padding: 3px 9px;
    border-radius: 99px;
}
@media (max-width: 640px) {
    .ppc-selfdesign { flex-direction: column; gap: 10px; }
}

.ppc-selfdesign-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #6E2FF2;
    background: rgba(110,47,242,.08);
    padding: 6px 12px;
    border-radius: 99px;
    border: 1px solid rgba(110,47,242,.18);
    align-self: flex-start;
}
.ppc-selfdesign-hint svg { flex: 0 0 auto; }
.ppc-selfdesign-hint small {
    font-weight: 500;
    color: rgba(11,11,15,.6);
    font-size: 11px;
}

/* Make the "00" step number stand out — it's the optional self-design entry point */
.ppc-prod-side-num {
    /* The existing .ppc-prod-side-num rules cover all steps. The "00"
       marker is a special affordance — slightly larger / bolder to
       suggest "you can start here" without breaking the visual rhythm. */
}

/* =================================================================
   § 14 — MOBILE APP-LIKE PRODUCT PAGE
   ----------------------------------------------------------------
   Restructures the product page on phones so it feels like a
   native app: vertical stack, scrollable swatches, swipeable
   gallery, snappy taps, stable layout, and a sticky bottom
   CTA that respects iPhone safe areas.
   ================================================================= */

/* ---- Gallery: full-bleed on mobile, swipeable ---- */
@media (max-width: 900px) {
    .ppc-product {
        /* Stable layout — prevent CLS while wapf loads. We use
         * contain: style (NOT layout) because contain: layout
         * creates a new containing block for position:fixed
         * descendants, which breaks the sticky mobile buybar. */
        contain: style;
    }
    .ppc-product-main {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .ppc-product-gallery {
        margin: 0 !important;
        padding: 0 !important;
        position: relative;
        background: #f5f4f0;
    }
    .ppc-gallery-main {
        aspect-ratio: 1 / 1;
        width: 100%;
        border-radius: 0;
        overflow: hidden;
        position: relative;
        background: #f5f4f0;
        /* Prevent layout shift on image load */
        contain: strict;
    }
    .ppc-gallery-main img,
    .ppc-gallery-main .ppc-gallery-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }
    .ppc-gallery-thumbs {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: #fff;
        border-top: 1px solid var(--paper-line, #ECE9DF);
    }
    .ppc-gallery-thumbs::-webkit-scrollbar { display: none; }
    .ppc-gallery-thumbs .ppc-gallery-thumb {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        aspect-ratio: 1 / 1;
        border-radius: 8px;
        scroll-snap-align: start;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid transparent;
        transition: border-color .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .ppc-gallery-thumbs .ppc-gallery-thumb.is-active { border-color: var(--ppc-magenta, #E31C79); }
    .ppc-gallery-thumbs .ppc-gallery-thumb img {
        width: 100%; height: 100%; object-fit: cover; display: block;
    }
}

/* ---- Product body ---- */
@media (max-width: 900px) {
    .ppc-product-body {
        padding: 24px 18px 110px !important;
        /* Bottom padding 110px = clear the sticky buybar (which
         * includes safe-area-inset-bottom on iPhone) */
    }
    .ppc-product-title,
    .ppc-bb h1,
    .ppc-product h1 {
        font-size: clamp(22px, 6vw, 28px) !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
    }
    .ppc-product-rating,
    .ppc-rating {
        font-size: 12px;
        margin-bottom: 14px;
    }
    .ppc-product-price,
    .ppc-price-display {
        margin-bottom: 18px;
    }
}

/* ---- Buybox / configurator panel ---- */
@media (max-width: 900px) {
    .ppc-bb,
    .ppc-buybox {
        padding: 20px 16px !important;
        background: #fff;
        border-radius: 16px;
        margin: 0 0 16px;
    }
    .ppc-bb-tabs {
        display: flex;
        gap: 4px;
        padding: 4px;
        background: rgba(11,11,15,.05);
        border-radius: 12px;
        margin-bottom: 18px;
    }
    .ppc-bb-tab {
        flex: 1;
        min-height: 40px;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 8px;
        border: 0;
        background: transparent;
        color: var(--ink-soft, #4a4a52);
        cursor: pointer;
        transition: background .15s ease, color .15s ease, box-shadow .15s ease;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    .ppc-bb-tab.is-active {
        background: #fff;
        color: var(--ink, #0B0B0F);
        box-shadow: 0 1px 3px rgba(11,11,15,.10);
    }
    .ppc-bb-tab svg { display: none; }
}

/* ---- Configurator groups: horizontally scrollable swatches ---- */
@media (max-width: 900px) {
    .ppc-cfg-group {
        display: block; /* stacked on mobile — no room for side-by-side */
        margin-bottom: 12px !important;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--paper-line, #ECE9DF);
    }
    .ppc-cfg-group:last-child { border-bottom: 0; }
    .ppc-cfg-head {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        width: 100%;
        padding-top: 0;
        margin-bottom: 8px;
    }
    .ppc-cfg-label {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--ink-soft, #4a4a52);
    }
    .ppc-cfg-value {
        font-size: 12px;
        color: var(--ink, #0B0B0F);
        font-weight: 500;
    }
    /* Swatches: horizontal scroll with snap, no wrap */
    .ppc-cfg-options {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 0 6px;
        margin: 0 -18px;
        padding-left: 18px;
        padding-right: 18px;
    }
    .ppc-cfg-options::-webkit-scrollbar { display: none; }
    .ppc-cfg-opt {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 8px 12px;
        font-size: 12px;
        scroll-snap-align: start;
    }
    /* Color swatches: round dots, no text label below */
    .ppc-cfg-options--swatch .ppc-cfg-opt {
        width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 50%;
        border: 2px solid transparent;
        box-shadow: 0 0 0 1px rgba(11,11,15,.08);
        background-clip: padding-box;
    }
    .ppc-cfg-options--swatch .ppc-cfg-opt .ppc-swatch-label {
        display: none;
    }
    .ppc-cfg-options--swatch .ppc-cfg-opt.is-active {
        border-color: var(--ink, #0B0B0F);
        transform: scale(1.05);
    }
    /* Toggle (sides): equal-width buttons */
    .ppc-cfg-options--toggle .ppc-cfg-opt {
        flex: 1 0 auto;
        min-width: 100px;
    }
    /* Icon (corner): equal-width */
    .ppc-cfg-options--icon .ppc-cfg-opt {
        flex: 1 0 auto;
        min-width: 96px;
        flex-direction: column;
        gap: 4px;
    }
    .ppc-cfg-options--pill .ppc-cfg-opt {
        min-width: 80px;
    }
}

/* ---- Quantity stepper: bigger on mobile ---- */
@media (max-width: 900px) {
    .ppc-qty {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }
    .ppc-qty-btn {
        width: 48px;
        height: 48px;
        min-height: 48px;
        border-radius: 12px;
        font-size: 20px;
        border: 1px solid var(--paper-line, #ECE9DF);
        background: #fff;
        color: var(--ink, #0B0B0F);
        display: grid;
        place-items: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background .12s ease, transform .1s ease;
    }
    .ppc-qty-btn:active {
        background: rgba(11,11,15,.06);
        transform: scale(.94);
    }
    .ppc-qty-input {
        flex: 1;
        height: 48px;
        min-height: 48px;
        font-size: 17px !important;
        text-align: center;
        border: 1px solid var(--paper-line, #ECE9DF);
        border-radius: 12px;
        background: #fff;
        -webkit-appearance: none;
        -moz-appearance: textfield;
    }
    .ppc-qty-input::-webkit-outer-spin-button,
    .ppc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .ppc-qty-chips {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -18px;
        padding: 0 18px 4px;
    }
    .ppc-qty-chips::-webkit-scrollbar { display: none; }
    .ppc-qty-chip {
        flex: 0 0 auto;
        min-width: 56px;
        min-height: 40px;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 10px;
        border: 1px solid var(--paper-line, #ECE9DF);
        background: #fff;
        color: var(--ink, #0B0B0F);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .ppc-qty-chip.is-active {
        background: linear-gradient(135deg, #2E6FF2 0%, #6E2FF2 50%, #E31C79 100%);
        color: #fff;
        border-color: transparent;
    }
}

/* ---- Total row: bigger, more prominent on mobile ---- */
@media (max-width: 900px) {
    .ppc-total-row {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        background: linear-gradient(135deg, rgba(46,111,242,.04), rgba(227,28,121,.04));
        border: 1px solid var(--paper-line, #ECE9DF);
        border-radius: 14px;
        margin-top: 12px;
    }
    .ppc-total-row-label {
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--ink-soft, #4a4a52);
    }
    .ppc-total-row-sub {
        font-size: 11px;
        color: var(--ink-soft, #4a4a52);
        font-family: var(--font-mono, monospace);
    }
    .ppc-total-row-amount {
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 700;
        color: var(--ink, #0B0B0F);
        font-variant-numeric: tabular-nums;
    }
}

/* ---- Buy box meta (production time etc.) ---- */
@media (max-width: 900px) {
    .ppc-buybox-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 14px 0 16px;
    }
    .ppc-buybox-meta-item {
        flex: 0 0 auto;
        font-size: 11px;
        padding: 6px 10px;
        background: rgba(11,11,15,.04);
        border-radius: 8px;
    }
}

/* ---- Tier strip: vertical cards on mobile ---- */
@media (max-width: 900px) {
    .ppc-tier-strip {
        margin: 16px 0;
        padding: 18px 16px;
        border-radius: 16px;
        background: #fff;
        border: 1px solid var(--paper-line, #ECE9DF);
    }
    .ppc-tier-strip-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 14px;
    }
    .ppc-tier-strip-head h3 {
        font-size: 17px;
        line-height: 1.25;
    }
    .ppc-tier-strip-note {
        font-size: 11px;
    }
    .ppc-tier-table {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
    }
    .ppc-tier-row--head {
        display: none !important;
    }
    .ppc-tier-row {
        display: grid !important;
        grid-template-columns: 1fr auto auto;
        gap: 8px 14px;
        align-items: center;
        padding: 12px 14px;
        background: #fff;
        border: 1px solid var(--paper-line, #ECE9DF);
        border-radius: 12px;
        min-height: 56px;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: border-color .15s ease, background .15s ease, transform .1s ease;
    }
    .ppc-tier-row:active { transform: scale(.98); }
    .ppc-tier-row.is-active {
        border-color: transparent;
        background: linear-gradient(135deg, rgba(46,111,242,.06), rgba(227,28,121,.06));
        box-shadow: 0 0 0 2px var(--ppc-magenta, #E31C79);
    }
    .ppc-tier-q {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        font-size: 16px;
        font-weight: 700;
        align-self: center;
    }
    .ppc-tier-p {
        grid-column: 2 / 4;
        grid-row: 1 / 2;
        font-size: 14px;
        font-weight: 600;
        text-align: right;
        color: var(--ink, #0B0B0F);
    }
    .ppc-tier-save {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        font-size: 11px;
        color: var(--ink-soft, #4a4a52);
        text-align: right;
    }
    .ppc-tier-cta {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        font-size: 11px;
        font-weight: 600;
        color: var(--ppc-magenta, #E31C79);
        text-align: right;
    }
    .ppc-tier-row.is-active .ppc-tier-cta { color: var(--ppc-magenta, #E31C79); }
}

/* ---- Long description / tabs: scrollable nav on mobile ---- */
@media (max-width: 900px) {
    .ppc-prod-tabs {
        margin: 0 -18px;
        padding: 0;
    }
    .ppc-prod-tabnav {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 4px 18px;
        border-bottom: 1px solid var(--paper-line, #ECE9DF);
        background: #fff;
        position: sticky;
        top: 60px;
        z-index: 10;
        -webkit-overflow-scrolling: touch;
    }
    .ppc-prod-tabnav::-webkit-scrollbar { display: none; }
    .ppc-prod-tabnav-btn {
        flex: 0 0 auto;
        padding: 14px 16px;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink-soft, #4a4a52);
        border: 0;
        background: transparent;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
    }
    .ppc-prod-tabnav-btn.is-active {
        color: var(--ink, #0B0B0F);
        border-bottom-color: var(--ppc-magenta, #E31C79);
    }
    .ppc-prod-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    .ppc-prod-side {
        order: 2;
    }
    .ppc-prod-content {
        order: 1;
    }
    .ppc-prod-side-card {
        padding: 16px;
    }
    .ppc-prod-side-num {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* ---- FAQ + Specs on mobile ---- */
@media (max-width: 640px) {
    .ppc-faq-item summary {
        padding: 14px 16px;
        font-size: 14px;
    }
    .ppc-spec-table {
        font-size: 13px;
    }
    .ppc-spec-table td { padding: 10px 12px; }
}

/* ---- Cart page mobile ---- */
@media (max-width: 900px) {
    .ppc-cart-layout {
        display: flex;
        flex-direction: column;
    }
    .ppc-cart-items {
        order: 1 !important;
        display: block !important;
        width: 100% !important;
    }
    .ppc-cart-summary {
        order: 2 !important;
        position: static !important;
        margin-top: 20px !important;
        display: block !important;
        width: 100% !important;
    }
    /* Compact cart totals table on mobile */
    .ppc-cart-summary table.shop_table th,
    .ppc-cart-summary table.shop_table td {
        padding: 8px 0 !important;
        font-size: 14px !important;
    }
    .ppc-cart-summary .order-total th,
    .ppc-cart-summary .order-total td {
        font-size: 16px !important;
    }
    .ppc-cart-list {
        padding: 0 !important;
    }
    .ppc-cart-item {
        grid-template-columns: 80px 1fr !important;
        grid-template-rows: auto auto;
        gap: 10px 14px;
        padding: 14px 0;
    }
    .ppc-cart-item-image {
        grid-row: 1 / 3;
    }
    .ppc-cart-item-meta {
        align-self: center;
    }
    .ppc-cart-item-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 8px;
        border-top: 1px solid var(--paper-line, #ECE9DF);
    }
    .ppc-cart-item-remove {
        min-height: 40px;
        min-width: 40px;
        padding: 0 12px;
    }
    .ppc-cart-item-qty {
        flex: 0 0 auto;
    }
    .ppc-cart-list { padding-bottom: 18px !important; }
}

/* ---- Checkout mobile ---- */
@media (max-width: 900px) {
    .ppc-checkout-grid {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }
    .ppc-checkout-sidebar {
        position: static !important;
        order: -1;
    }
    .ppc-checkout-sidebar-card {
        padding: 18px 16px;
    }
    .ppc-checkout-billing,
    .ppc-checkout-shipping {
        padding: 18px 16px;
    }
    .ppc-checkout-row-2 { grid-template-columns: 1fr !important; }
    .wc-checkout-payment { padding: 16px; }
    #place_order {
        width: 100%;
        min-height: 52px;
        font-size: 15px;
    }
}

/* ---- Shop archive mobile ---- */
@media (max-width: 900px) {
    .ppc-shop-hero {
        padding: 40px 18px 30px;
    }
    .ppc-shop-hero h1 {
        font-size: clamp(28px, 7vw, 36px);
    }
    ul.products,
    .ppc-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px;
    }
    .ppc-product-card {
        border-radius: 12px;
    }
    .ppc-product-card-image {
        aspect-ratio: 1 / 1;
    }
    .ppc-product-card-body { padding: 12px; }
    .ppc-product-card-title { font-size: 14px; line-height: 1.3; }
    .ppc-product-card-price { font-size: 14px; }
}
@media (max-width: 480px) {
    ul.products,
    .ppc-products-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Sticky buybar: force !important to defeat any ancestor
 * contain/transform that could create a new containing block. */
@media (max-width: 900px) {
    .ppc-mobile-buybar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 80 !important;
        transform: translateZ(0); /* own compositor layer */
        will-change: transform;
    }
    /* Promote body to a stable scroll context if needed. */
    body { -webkit-overflow-scrolling: touch; }
}

/* ---- Wapf tier rows: more app-like cards ---- */
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    align-items: center;
    text-align: left;
    width: 100%;
    background: #fff;
    border: 1.5px solid var(--paper-line, #ECE9DF);
    border-radius: 14px;
    padding: 14px 18px;
    min-height: 56px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .18s ease, background .18s ease, transform .12s ease, box-shadow .18s ease;
    color: var(--ink, #0B0B0F);
    font-family: var(--font-display, sans-serif);
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row:hover {
    border-color: rgba(110,47,242,.4);
    box-shadow: 0 4px 14px rgba(11,11,15,.06);
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row:active {
    transform: scale(.98);
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, rgba(46,111,242,.06), rgba(227,28,121,.06));
    box-shadow: 0 0 0 2px var(--ppc-magenta, #E31C79), 0 4px 18px rgba(227,28,121,.12);
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-q {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink, #0B0B0F);
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-q strong {
    font-weight: 700;
    font-size: 16px;
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-q-add {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 500;
    color: var(--ppc-magenta, #E31C79);
    background: rgba(227,28,121,.08);
    padding: 2px 7px;
    border-radius: 6px;
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row .ppc-tier-cta {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft, #4a4a52);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row.is-active .ppc-tier-cta {
    color: var(--ppc-magenta, #E31C79);
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row .ppc-tier-cta::before {
    content: '○';
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-radius: 50%;
    line-height: 1;
    font-size: 0;
}
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row.is-active .ppc-tier-cta::before {
    content: '●';
    background: currentColor;
    box-shadow: inset 0 0 0 3px #fff;
    font-size: 0;
}

/* Removed: fake per-unit column. We only show the wapf option
 * label + its wapf option price addition. The grand total is
 * always mirrored from .wapf-grand-total by WapfIntegration. */
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-save,
.ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-p {
    display: none !important;
}

@media (max-width: 900px) {
    .ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-table {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
    }
    .ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row--head {
        display: none !important;
    }
    .ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-row {
        padding: 14px 16px;
        border-radius: 14px;
    }
    .ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-q strong {
        font-size: 15px;
    }
    .ppc-tier-strip[data-cfg-source="wapf"] .ppc-tier-q-add {
        font-size: 11px;
    }
}

/* ---- Force 4 equal columns at all common screen widths ---- */
ul.products, ul.products.columns-4{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
}
ul.products::before, ul.products::after,
ul.products.columns-4::before, ul.products.columns-4::after{
  content: none !important;
  display: none !important;
}
@media (max-width: 1100px) and (min-width: 769px){
  ul.products, ul.products.columns-4{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============== THANK YOU PAGE ============== */
.ppc-thankyou{ background: var(--paper); }
.ppc-cart-hero--success{
  background: linear-gradient(135deg, rgba(63,167,70,.08), rgba(46,111,242,.08));
  border-bottom-color: rgba(63,167,70,.2);
}
.ppc-steps li.is-done{
  color: var(--pixel-green, #3FA746);
}
.ppc-steps li.is-done .ppc-steps-num{
  background: var(--pixel-green, #3FA746);
  color: #fff;
}
.ppc-thankyou-body{
  padding: 50px 0 80px;
  max-width: 880px;
  margin: 0 auto;
}
.ppc-thankyou-success{
  text-align: center;
  padding: 40px 24px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  margin-bottom: 30px;
}
.ppc-thankyou-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: rgba(63,167,70,.12);
  color: var(--pixel-green, #3FA746);
  margin-bottom: 18px;
}
.ppc-thankyou-icon--failed{
  background: rgba(227,28,121,.12);
  color: var(--pixel-magenta, #E31C79);
}
.ppc-thankyou-success h2{
  font-family: var(--font-display, sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--ink, #0B0B0F);
}
.ppc-thankyou-summary{
  list-style: none;
  margin: 24px auto 0;
  padding: 20px 24px;
  max-width: 520px;
  background: var(--paper-dim, #F5F4F0);
  border-radius: 10px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.ppc-thankyou-summary li{
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  color: var(--ink-soft, #4b4b56);
}
.ppc-thankyou-summary li span{ font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ppc-thankyou-summary li strong{
  font-family: var(--font-display, sans-serif);
  color: var(--ink, #0B0B0F);
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 2px;
}
.ppc-thankyou-details{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-bottom: 30px;
}
.ppc-thankyou-card{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  padding: 24px;
}
.ppc-thankyou-card h3{
  font-family: var(--font-display, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-thankyou-items{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display, sans-serif);
}
.ppc-thankyou-items th, .ppc-thankyou-items td{
  padding: 10px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-thankyou-items thead th{
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 500;
}
.ppc-thankyou-items tfoot th, .ppc-thankyou-items tfoot td{
  font-weight: 600;
}
.ppc-thankyou-items tfoot tr:last-child th, .ppc-thankyou-items tfoot tr:last-child td{
  font-size: 1.05rem;
  color: var(--ink);
  border-bottom: 0;
}
.ppc-thankyou-item-meta{
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.ppc-thankyou-item-meta li{ margin: 2px 0; }
.ppc-thankyou-addresses{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ppc-thankyou-addresses strong{
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.ppc-thankyou-addresses address{
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}
.ppc-thankyou-cta{
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.ppc-thankyou-failed{
  text-align: center;
  padding: 40px 24px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 14px;
}
.ppc-thankyou-failed h2{
  font-family: var(--font-display, sans-serif);
  font-size: 1.3rem;
  margin: 0 0 12px;
}
.ppc-thankyou-failed p{ color: var(--ink-soft); margin: 0 0 18px; }

@media (max-width: 700px){
  .ppc-thankyou-details{ grid-template-columns: 1fr; }
  .ppc-thankyou-summary{ grid-template-columns: 1fr; }
  .ppc-thankyou-addresses{ grid-template-columns: 1fr; }
}

/* ============== CHECKOUT FIELDS STYLING (WC defaults) ============== */
/* Style the default WC billing/shipping fields to match the brand */
.woocommerce-checkout .form-row{
  margin-bottom: 16px !important;
  padding: 0 !important;
}
.woocommerce-checkout .form-row label{
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-soft, #4b4b56) !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea{
  width: 100% !important;
  background: var(--paper, #fff) !important;
  border: 1px solid var(--paper-line, #ECE9DF) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-family: var(--font-display, sans-serif) !important;
  font-size: 0.95rem !important;
  color: var(--ink, #0B0B0F) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus{
  border-color: var(--pixel-magenta, #E31C79) !important;
  box-shadow: 0 0 0 3px rgba(227,28,121,.12) !important;
  outline: none !important;
}
.woocommerce-checkout .form-row .required{ color: var(--pixel-magenta, #E31C79) !important; }
.woocommerce-checkout #ship-to-different-address{
  font-size: 0.85rem !important;
  margin-top: 6px !important;
}
.woocommerce-checkout #ship-to-different-address label{
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--font-display, sans-serif) !important;
  font-size: 0.88rem !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}
.woocommerce-checkout #order_comments{
  min-height: 80px !important;
  resize: vertical !important;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-billing-fields{
  background: var(--paper) !important;
  border: 1px solid var(--paper-line) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-bottom: 18px !important;
}
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-billing-fields h3{
  font-family: var(--font-display, sans-serif) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--paper-line) !important;
}

/* Payment box (WC default) */
.wc-payment-methods{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.wc-payment-methods > li{
  background: var(--paper) !important;
  border: 1px solid var(--paper-line) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  margin-bottom: 10px !important;
  transition: border-color 0.15s ease !important;
}
.wc-payment-methods > li:has(input:checked){
  border-color: var(--pixel-magenta) !important;
  background: rgba(227,28,121,.04) !important;
}
.wc-payment-methods > li label{
  font-family: var(--font-display, sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
}
.wc-payment-methods .payment_box{
  background: var(--paper-dim) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  margin-top: 12px !important;
  font-size: 0.85rem !important;
  color: var(--ink-soft) !important;
}

/* Order review on checkout */
#order_review{
  background: transparent !important;
}
#order_review .shop_table{
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-display, sans-serif) !important;
}
#order_review .shop_table th,
#order_review .shop_table td{
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--paper-line) !important;
  text-align: left !important;
}
#order_review .shop_table thead th{
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-soft) !important;
  font-weight: 500 !important;
}
#order_review .shop_table .order-total th,
#order_review .shop_table .order-total td{
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}
#order_review .shop_table .product-name{
  font-family: var(--font-display, sans-serif) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
#order_review .shop_table .product-total{
  text-align: right !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
}
#order_review .shop_table .variation{
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 3px 10px !important;
  margin: 8px 0 0 !important;
  padding: 10px 12px !important;
  background: var(--paper-dim) !important;
  border-radius: 6px !important;
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.72rem !important;
}
#order_review .shop_table .variation dt{
  font-weight: 600 !important;
  color: var(--ink-soft) !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
  margin: 0 !important;
}
#order_review .shop_table .variation dd{
  margin: 0 !important;
  color: var(--ink) !important;
}
#order_review .shop_table .variation dd p{ margin: 0 !important; }

/* Place order button */
#place_order{
  width: 100% !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 16px 24px !important;
  font-family: var(--font-display, sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}
#place_order:hover{
  background: var(--pixel-magenta) !important;
  transform: translateY(-1px) !important;
}

/* Privacy/terms text */
.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper{
  font-size: 0.82rem !important;
  color: var(--ink-soft) !important;
  line-height: 1.5 !important;
  background: var(--paper-dim) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin: 12px 0 !important;
}
.woocommerce-terms-and-conditions-wrapper label{
  font-family: var(--font-display, sans-serif) !important;
  font-size: 0.88rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

/* ============== CHECKOUT HORIZONTAL SCROLL FIX ============== */
html, body{ overflow-x: hidden; }
.ppc-checkout,
.ppc-checkout *,
.ppc-thankyou,
.ppc-thankyou *{ max-width: 100%; }
.woocommerce-checkout form.checkout,
.woocommerce-checkout form.checkout *,
.ppc-checkout-layout,
.ppc-checkout-main,
.ppc-checkout-sidebar{ max-width: 100%; box-sizing: border-box; }
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout select,
.woocommerce-checkout textarea{ max-width: 100% !important; }
.ppc-radio{ max-width: 100%; box-sizing: border-box; }

/* ============== MY ACCOUNT ============== */
.woocommerce-account .woocommerce-MyAccount-navigation{
  width: 100% !important;
  float: none !important;
  margin: 0 0 24px !important;
  background: var(--paper) !important;
  border: 1px solid var(--paper-line) !important;
  border-radius: 12px !important;
  padding: 18px !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 4px !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation a{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  font-family: var(--font-display, sans-serif) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  background: transparent !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover{
  background: var(--paper-dim) !important;
  color: var(--pixel-magenta) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background: var(--pixel-magenta) !important;
  color: #fff !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation a::before{
  content: '';
  display: inline-block;
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
  opacity: 0.7;
}
.woocommerce-account .woocommerce-MyAccount-navigation li:nth-child(1) a::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8'%3E%3Cpath d='M3 12l9-9 9 9M5 10v10h14V10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8'%3E%3Cpath d='M3 12l9-9 9 9M5 10v10h14V10'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation li:nth-child(2) a::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8'%3E%3Cpath d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8'%3E%3Cpath d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation li:nth-child(3) a::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8'%3E%3Cpath d='M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8'%3E%3Cpath d='M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation li:nth-child(4) a::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8'%3E%3Cpath d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8'%3E%3Cpath d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
}
.woocommerce-account .woocommerce-MyAccount-navigation li:nth-child(5) a::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8'%3E%3Cpath d='M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8'%3E%3Cpath d='M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1'/%3E%3C/svg%3E");
}

.woocommerce-account .woocommerce-MyAccount-content{
  width: 100% !important;
  float: none !important;
  background: var(--paper) !important;
  border: 1px solid var(--paper-line) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  font-family: var(--font-display, sans-serif) !important;
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child{
  background: var(--paper-dim) !important;
  padding: 14px 18px !important;
  border-radius: 8px !important;
  font-size: 0.92rem !important;
  border: 0 !important;
  margin: 0 0 18px !important;
}
.woocommerce-account .woocommerce-MyAccount-content > p:first-child a{
  color: var(--pixel-magenta) !important;
  font-weight: 600 !important;
}
.woocommerce-account .woocommerce-MyAccount-orders{
  font-family: var(--font-display, sans-serif) !important;
  border: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-orders thead{
  background: var(--paper-dim) !important;
}
.woocommerce-account .woocommerce-MyAccount-orders th{
  font-family: var(--font-mono, monospace) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-soft) !important;
  font-weight: 500 !important;
  padding: 12px 14px !important;
  border: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-orders td{
  padding: 14px !important;
  border-bottom: 1px solid var(--paper-line) !important;
}
.woocommerce-account .woocommerce-MyAccount-orders a.button{
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-family: var(--font-display, sans-serif) !important;
}
.woocommerce-account .woocommerce-MyAccount-orders a.button:hover{
  background: var(--pixel-magenta) !important;
}
.woocommerce-account .woocommerce-EditAccountForm fieldset{
  background: var(--paper-dim) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 18px !important;
  margin-top: 18px !important;
}
.woocommerce-account .woocommerce-EditAccountForm legend{
  font-family: var(--font-display, sans-serif) !important;
  font-weight: 600 !important;
  padding: 0 8px !important;
  background: var(--paper) !important;
}
.woocommerce-account input.input-text,
.woocommerce-account textarea,
.woocommerce-account select{
  background: var(--paper) !important;
  border: 1px solid var(--paper-line) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-family: var(--font-display, sans-serif) !important;
  font-size: 0.95rem !important;
  color: var(--ink) !important;
  width: 100% !important;
}
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-account .woocommerce-Button{
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-family: var(--font-display, sans-serif) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}
.woocommerce-account button.button:hover,
.woocommerce-account .woocommerce-Button:hover{
  background: var(--pixel-magenta) !important;
}

.woocommerce-account .addresses .title{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.woocommerce-account .addresses .title h3{
  font-family: var(--font-display, sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.woocommerce-account .addresses .title .edit{
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
}
.woocommerce-account address{
  font-style: normal !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
  padding: 12px 14px !important;
  background: var(--paper-dim) !important;
  border-radius: 8px !important;
  margin: 8px 0 0 !important;
}


/* ============== TRACK MY ORDER PAGE ============== */
.ppc-track-order{ background: var(--paper); min-height: 70vh; }

/* Hero — same visual language as cart/checkout */
.ppc-track-hero{
  position: relative;
  padding: 56px 0 48px;
  background:
    radial-gradient(circle at 90% 0%, rgba(46,111,242,.08) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(227,28,121,.10) 0%, transparent 50%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-dim) 100%);
  border-bottom: 1px solid var(--paper-line);
  overflow: hidden;
}
.ppc-track-hero::after{
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 400px; height: 400px;
  background: var(--brand-gradient);
  opacity: 0.05;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.ppc-track-hero-inner{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.ppc-track-hero h1.ppc-cart-title{
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
  line-height: 1.05;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ppc-track-hero .ppc-cart-sub{
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 14px 0 0;
  max-width: 540px;
  line-height: 1.55;
}
.ppc-track-hero .eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pixel-magenta);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ppc-track-hero .eyebrow::before{
  content: '';
  width: 24px; height: 1px;
  background: var(--pixel-magenta);
}

.ppc-track-body{
  padding: 50px 0 80px;
}
.ppc-track-layout{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: start;
}

/* ---------- Lookup form ---------- */
.ppc-track-form-card{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 16px;
  padding: 40px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.ppc-track-form-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--brand-gradient);
}
.ppc-track-form-head{ text-align: center; margin-bottom: 28px; }
.ppc-track-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pixel-magenta) 0%, var(--pixel-violet) 100%);
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(227,28,121,.25);
}
.ppc-track-form-head h2{
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.ppc-track-form-head p{
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}
.ppc-track-form{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ppc-track-field label{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 8px;
  font-weight: 600;
}
.ppc-track-field input{
  width: 100%;
  background: var(--paper-dim);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  transition: all 0.2s ease;
  box-sizing: border-box;
  font-weight: 500;
}
.ppc-track-field input:hover{
  background: var(--paper);
  border-color: var(--paper-line);
}
.ppc-track-field input:focus{
  outline: none;
  background: var(--paper);
  border-color: var(--pixel-magenta);
  box-shadow: 0 0 0 4px rgba(227,28,121,.10);
}
.ppc-track-field small{
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
}
.ppc-track-error{
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(227,28,121,.08);
  border: 1px solid rgba(227,28,121,.3);
  color: var(--pixel-magenta);
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  margin-bottom: 20px;
  font-weight: 500;
}

/* ---------- Help sidebar ---------- */
.ppc-track-help{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 20px;
}
.ppc-track-help h3{
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-track-help ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ppc-track-help li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
}
.ppc-track-help li svg{
  color: var(--pixel-magenta);
  margin-top: 4px;
  flex-shrink: 0;
  background: rgba(227,28,121,.08);
  padding: 6px;
  width: 26px; height: 26px;
  border-radius: 6px;
  box-sizing: content-box;
}
.ppc-track-help li > div{ flex: 1; }
.ppc-track-help li strong{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 3px;
  font-weight: 600;
}
.ppc-track-help li a{
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}
.ppc-track-help li a:hover{ color: var(--pixel-magenta); }
.ppc-track-hours{
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--paper-line);
}
.ppc-track-hours strong{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 4px;
}
.ppc-track-hours p{ margin: 0; font-size: 0.88rem; color: var(--ink); line-height: 1.5; }

/* ---------- Tracked order result ---------- */
.ppc-track-order-card{
  grid-column: 1 / -1;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.ppc-track-order-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--brand-gradient);
}
.ppc-track-order-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-track-eyebrow{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}
.ppc-track-order-head h2{
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.ppc-track-order-head p{
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-family: var(--font-display);
}
.ppc-status-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  white-space: nowrap;
}
.ppc-status-badge::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px currentColor;
  opacity: 0.2;
}
.ppc-status-badge--pending,
.ppc-status-badge--on-hold{ background: rgba(245,158,11,.12); color: #b45309; }
.ppc-status-badge--processing{ background: rgba(46,111,242,.12); color: var(--pixel-blue); }
.ppc-status-badge--shipped,
.ppc-status-badge--completed{ background: rgba(63,167,70,.12); color: #2e7d32; }
.ppc-status-badge--cancelled,
.ppc-status-badge--refunded,
.ppc-status-badge--failed{ background: rgba(227,28,121,.12); color: var(--pixel-magenta); }

/* Timeline */
.ppc-track-timeline{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  position: relative;
  margin: 0 0 24px;
  padding: 8px 0;
}
.ppc-track-step{
  text-align: center;
  position: relative;
  padding: 0 6px;
}
.ppc-track-step:not(:last-child)::after{
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--paper-line);
  z-index: 0;
}
.ppc-track-step.is-done:not(:last-child)::after{
  background: var(--pixel-green);
}
.ppc-track-dot{
  position: relative;
  z-index: 1;
  width: 34px; height: 34px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--paper-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  transition: all 0.2s ease;
}
.ppc-track-step.is-done .ppc-track-dot{
  background: var(--pixel-green);
  border-color: var(--pixel-green);
  color: #fff;
  box-shadow: 0 4px 12px rgba(63,167,70,.25);
}
.ppc-track-step.is-active .ppc-track-dot{
  background: var(--pixel-magenta);
  border-color: var(--pixel-magenta);
  color: #fff;
  box-shadow: 0 4px 16px rgba(227,28,121,.35);
  animation: ppcPulseDot 1.6s ease-in-out infinite;
}
@keyframes ppcPulseDot{
  0%, 100%{ box-shadow: 0 4px 16px rgba(227,28,121,.35), 0 0 0 0 rgba(227,28,121,.4); }
  50%{ box-shadow: 0 4px 16px rgba(227,28,121,.35), 0 0 0 10px rgba(227,28,121,0); }
}
.ppc-track-step-text strong{
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 4px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ppc-track-step.is-done .ppc-track-step-text strong,
.ppc-track-step.is-active .ppc-track-step-text strong{
  color: var(--ink);
}
.ppc-track-step-text small{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  line-height: 1.3;
}

/* Shipment box */
.ppc-track-shipment{
  background: linear-gradient(135deg, var(--paper-dim) 0%, var(--paper) 100%);
  border: 1px solid var(--paper-line);
  border-left: 4px solid var(--pixel-magenta);
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ppc-track-shipment > strong{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 600;
  width: 100%;
  margin-bottom: 4px;
}
.ppc-track-shipment p{
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}
.ppc-track-provider{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pixel-magenta);
  font-weight: 700;
  background: rgba(227,28,121,.08);
  padding: 4px 10px;
  border-radius: 4px;
}
.ppc-track-shipment code{
  background: var(--paper);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--ink);
  border: 1px solid var(--paper-line);
  font-weight: 600;
}
.ppc-track-shipment-note{
  display: block;
  width: 100%;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 6px;
}

/* ---------- Grid (items + summary) ---------- */
.ppc-track-grid{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.ppc-track-card{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.ppc-track-card h3{
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--paper-line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ppc-track-card h3::before{
  content: '';
  width: 4px; height: 18px;
  background: var(--brand-gradient);
  border-radius: 2px;
}
.ppc-track-items{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ppc-track-items li{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  background: var(--paper-dim);
  border-radius: 10px;
  border: 1px solid var(--paper-line);
}
.ppc-track-thumb{
  flex-shrink: 0;
  width: 64px; height: 64px;
  background: var(--paper);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--paper-line);
}
.ppc-track-thumb img{
  width: 100%; height: 100%;
  object-fit: contain;
}
.ppc-track-item-body{
  flex: 1;
  min-width: 0;
}
.ppc-track-item-body strong{
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 4px;
  font-weight: 600;
}
.ppc-track-item-meta{
  list-style: none;
  margin: 6px 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ppc-track-item-meta li{ margin: 0; }
.ppc-track-item-body small{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
}

.ppc-track-totals{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  margin-bottom: 20px;
}
.ppc-track-totals th,
.ppc-track-totals td{
  padding: 10px 0;
  text-align: left;
  border-bottom: 1px solid var(--paper-line);
  font-size: 0.92rem;
}
.ppc-track-totals th{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-weight: 600;
}
.ppc-track-totals td{
  text-align: right;
  color: var(--ink);
  font-weight: 600;
}
.ppc-track-totals tr:last-child th,
.ppc-track-totals tr:last-child td{
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 0;
  padding-top: 14px;
}
.ppc-track-totals tr:last-child td{
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ppc-track-addresses{
  padding-top: 18px;
  border-top: 1px solid var(--paper-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ppc-track-addresses strong{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 8px;
  font-weight: 600;
}
.ppc-track-addresses address{
  font-style: normal;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  background: var(--paper-dim);
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--paper-line);
}

/* ---------- Customer notes ---------- */
.ppc-track-notes{
  grid-column: 1 / -1;
  margin-bottom: 24px;
}
.ppc-track-notes-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ppc-track-notes-list li{
  background: linear-gradient(90deg, rgba(227,28,121,.04) 0%, var(--paper) 100%);
  border-left: 4px solid var(--pixel-magenta);
  border-radius: 8px;
  padding: 16px 20px;
  position: relative;
}
.ppc-track-note-date{
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pixel-magenta);
  margin-bottom: 8px;
  font-weight: 600;
}
.ppc-track-notes-list p{
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
}
.ppc-track-notes-list p p{ margin: 0 0 6px; }

/* ---------- Action buttons ---------- */
.ppc-track-actions{
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 8px;
}

.ppc-btn--block{ width: 100%; display: inline-flex; }
.ppc-btn--sm{ padding: 8px 14px !important; font-size: 0.78rem !important; }
.ppc-btn--full{ width: 100%; justify-content: center; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .ppc-track-layout{ grid-template-columns: 1fr; }
  .ppc-track-grid{ grid-template-columns: 1fr; }
  .ppc-track-help{ position: static; }
}
@media (max-width: 700px){
  .ppc-track-hero{ padding: 36px 0 32px; }
  .ppc-track-form-card{ padding: 28px 22px; }
  .ppc-track-order-card{ padding: 24px 20px; }
  .ppc-track-card{ padding: 22px 18px; }
  .ppc-track-timeline{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ppc-track-step{
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 0;
  }
  .ppc-track-step:not(:last-child)::after{
    top: 38px;
    left: 16px;
    right: auto;
    width: 2px;
    height: calc(100% - 24px);
  }
  .ppc-track-dot{ margin: 0; }
  .ppc-track-step-text{ flex: 1; }
  .ppc-track-order-head h2{ font-size: 1.5rem; }
  .ppc-track-order-head{
    flex-direction: column;
    align-items: flex-start;
  }
  .ppc-track-addresses{ grid-template-columns: 1fr; }
  .ppc-track-form-head h2{ font-size: 1.35rem; }
  .ppc-track-icon{ width: 60px; height: 60px; }
}

/* ============== INVOICE STYLES (Thank you page) ============== */
.ppc-thankyou-body{
  padding: 50px 0 80px;
  max-width: 920px;
  margin: 0 auto;
}

/* Invoice container — looks like a real printed invoice */
.ppc-invoice{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 32px;
}

/* Invoice header */
.ppc-invoice-header{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 36px 40px 28px;
  background: linear-gradient(180deg, var(--paper-dim) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--paper-line);
}
.ppc-invoice-brand{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ppc-invoice-logo{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ppc-invoice-logo img{
  max-height: 40px;
  width: auto;
}
.ppc-invoice-store p{
  margin: 2px 0;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.ppc-invoice-meta{
  text-align: right;
}
.ppc-invoice-label{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pixel-magenta);
  display: inline-block;
  font-weight: 700;
  margin-bottom: 4px;
}
.ppc-invoice-meta h2{
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ppc-invoice-meta dl{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
  text-align: left;
  justify-content: end;
}
.ppc-invoice-meta dt{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  font-weight: 600;
  align-self: center;
}
.ppc-invoice-meta dd{
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--ink);
  font-weight: 500;
  text-align: right;
}

/* Success banner */
.ppc-invoice-banner{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 40px;
  background: linear-gradient(90deg, rgba(63,167,70,.10) 0%, rgba(63,167,70,.04) 100%);
  border-bottom: 1px solid rgba(63,167,70,.2);
}
.ppc-invoice-banner-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--pixel-green);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(63,167,70,.3);
}
.ppc-invoice-banner > div{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ppc-invoice-banner strong{
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #2e7d32;
  font-weight: 700;
}
.ppc-invoice-banner span{
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Addresses */
.ppc-invoice-addresses{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 32px 40px;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-invoice-address{
  padding-right: 24px;
}
.ppc-invoice-address:last-child{
  border-left: 1px solid var(--paper-line);
  padding-left: 24px;
  padding-right: 0;
}
.ppc-invoice-eyebrow{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 8px;
}
.ppc-invoice-address address{
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.ppc-invoice-address address strong{
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 4px;
}
.ppc-invoice-shipping-method{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  background: var(--paper-dim);
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink);
  font-weight: 500;
}
.ppc-invoice-shipping-method svg{ color: var(--pixel-magenta); }

/* Items table */
.ppc-invoice-section{
  padding: 32px 40px 8px;
}
.ppc-invoice-section-title{
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-invoice-items{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
}
.ppc-invoice-items thead th{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 2px solid var(--paper-line);
  background: var(--paper-dim);
}
.ppc-invoice-items thead th:first-child{ border-radius: 6px 0 0 6px; }
.ppc-invoice-items thead th:last-child{ border-radius: 0 6px 6px 0; }
.ppc-invoice-items tbody td{
  padding: 16px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-invoice-thumb{
  width: 60px;
}
.ppc-invoice-thumb img{
  width: 60px; height: 60px;
  object-fit: contain;
  background: var(--paper-dim);
  border-radius: 8px;
  border: 1px solid var(--paper-line);
}
.ppc-invoice-thumb-placeholder{
  width: 60px; height: 60px;
  background: var(--paper-dim);
  border-radius: 8px;
  border: 1px solid var(--paper-line);
}
.ppc-invoice-item-name{
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 4px;
}
.ppc-invoice-item-sku{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.ppc-invoice-item-meta{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ppc-invoice-item-meta li{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.ppc-invoice-item-meta-key{
  color: var(--ink-soft);
  margin-right: 4px;
}
.ppc-invoice-item-meta-val{
  color: var(--ink);
  font-weight: 500;
}
.ppc-invoice-right{ text-align: right !important; }
.ppc-invoice-qty{
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.ppc-invoice-line-total{
  font-weight: 700;
  color: var(--ink);
  font-size: 0.95rem;
}

/* Totals */
.ppc-invoice-totals-wrap{
  padding: 8px 40px 32px;
  display: flex;
  justify-content: flex-end;
}
.ppc-invoice-totals{
  width: 100%;
  max-width: 380px;
  border-collapse: collapse;
  font-family: var(--font-display);
}
.ppc-invoice-totals th,
.ppc-invoice-totals td{
  padding: 10px 0;
  text-align: left;
  font-size: 0.92rem;
  border: 0;
}
.ppc-invoice-totals th{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-weight: 600;
  text-align: left;
}
.ppc-invoice-totals td{
  text-align: right;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
}
.ppc-invoice-totals tr:not(:last-child) th,
.ppc-invoice-totals tr:not(:last-child) td{
  border-bottom: 1px solid var(--paper-line);
  padding: 10px 0;
}
.ppc-invoice-totals tr:last-child th,
.ppc-invoice-totals tr:last-child td{
  font-size: 1.15rem;
  font-weight: 700;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
  margin-top: 8px;
}
.ppc-invoice-totals tr:last-child td{
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Footer */
.ppc-invoice-footer{
  padding: 24px 40px 32px;
  background: var(--paper-dim);
  border-top: 1px solid var(--paper-line);
}
.ppc-invoice-customer-note{
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-left: 3px solid var(--pixel-magenta);
  border-radius: 6px;
}
.ppc-invoice-customer-note p{
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}
.ppc-invoice-thanks{
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.5;
  text-align: center;
  font-style: italic;
}

/* ============== TWO BIG ACTION BUTTONS ============== */
.ppc-thankyou-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.ppc-thankyou-action{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}
.ppc-thankyou-action--primary{
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 4px 16px rgba(11,11,15,.2);
}
.ppc-thankyou-action--primary:hover{
  background: var(--pixel-magenta);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(227,28,121,.35);
}
.ppc-thankyou-action--secondary{
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper-line);
}
.ppc-thankyou-action--secondary:hover{
  border-color: var(--pixel-magenta);
  background: rgba(227,28,121,.04);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(227,28,121,.1);
}
.ppc-thankyou-action-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}
.ppc-thankyou-action--secondary .ppc-thankyou-action-icon{
  background: var(--paper-dim);
  color: var(--pixel-magenta);
}
.ppc-thankyou-action-text{
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.ppc-thankyou-action-text strong{
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.ppc-thankyou-action-text small{
  font-family: var(--font-display);
  font-size: 0.8rem;
  opacity: 0.75;
  line-height: 1.3;
  font-weight: 400;
}
.ppc-thankyou-action-arrow{
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.2s ease;
}
.ppc-thankyou-action:hover .ppc-thankyou-action-arrow{
  transform: translateX(4px);
  opacity: 1;
}

/* Secondary links */
.ppc-thankyou-secondary{
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 8px;
}
.ppc-thankyou-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  padding: 6px 8px;
  transition: color 0.15s ease;
}
.ppc-thankyou-link:hover{
  color: var(--pixel-magenta);
}

/* Print styles */
@media print{
  .ppc-cart-hero,
  .ppc-thankyou-actions,
  .ppc-thankyou-secondary,
  .site-header,
  .site-footer,
  .ppc-shop-breadcrumb,
  .ppc-steps{ display: none !important; }
  .ppc-invoice{ box-shadow: none !important; border: 0 !important; }
  body{ background: white !important; }
}

/* Mobile */
@media (max-width: 700px){
  .ppc-invoice-header{
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 20px;
  }
  .ppc-invoice-meta{ text-align: left; }
  .ppc-invoice-meta dl{ justify-content: start; }
  .ppc-invoice-meta dd{ text-align: left; }
  .ppc-invoice-banner{ padding: 14px 20px; }
  .ppc-invoice-addresses{
    grid-template-columns: 1fr;
    padding: 24px 20px;
    gap: 24px;
  }
  .ppc-invoice-address:last-child{
    border-left: 0;
    border-top: 1px solid var(--paper-line);
    padding-left: 0;
    padding-top: 20px;
  }
  .ppc-invoice-section{ padding: 24px 20px 8px; }
  .ppc-invoice-totals-wrap{ padding: 8px 20px 24px; }
  .ppc-invoice-footer{ padding: 20px; }
  .ppc-thankyou-actions{ grid-template-columns: 1fr; }
  .ppc-invoice-items thead th.ppc-invoice-qty,
  .ppc-invoice-items tbody td.ppc-invoice-qty{ display: none; }
  .ppc-invoice-thumb{ width: 50px; }
  .ppc-invoice-thumb img,
  .ppc-invoice-thumb-placeholder{ width: 50px; height: 50px; }
}

/* ============== UPLOAD FILE LIST ============== */
.ppc-upload-list{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ppc-upload-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 0.88rem;
}
.ppc-upload-item-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--paper-dim);
  color: var(--pixel-magenta);
  border-radius: 6px;
  flex-shrink: 0;
}
.ppc-upload-item-body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ppc-upload-item-body strong{
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ppc-upload-item-body small{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ppc-upload-item-area{
  margin-top: 4px;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink);
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
  border-radius: 6px;
  padding: 3px 6px;
  cursor: pointer;
}
.ppc-upload-item-remove{
  background: transparent;
  border: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.ppc-upload-item-remove:hover{
  background: rgba(227,28,121,.1);
  color: var(--pixel-magenta);
}

/* ============== ARTWORK CTA BUTTON (above Add to Cart) ============== */
.ppc-artwork-cta{
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ppc-artwork-cta-btn{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--paper-dim) 0%, var(--paper) 100%);
  border: 2px solid var(--paper-line);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.ppc-artwork-cta-btn::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.ppc-artwork-cta-btn:hover{
  border-color: var(--pixel-magenta);
  background: linear-gradient(135deg, var(--paper) 0%, rgba(227,28,121,.04) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(227,28,121,.12);
}
.ppc-artwork-cta-btn:hover::before{
  transform: scaleX(1);
}
.ppc-artwork-cta-btn:active{
  transform: translateY(0);
}
.ppc-artwork-cta-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  background: var(--pixel-magenta);
  color: #fff;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(227,28,121,.25);
  transition: transform 0.2s ease;
}
.ppc-artwork-cta-btn:hover .ppc-artwork-cta-icon{
  transform: translateY(-2px);
}
.ppc-artwork-cta-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ppc-artwork-cta-text strong{
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.ppc-artwork-cta-text small{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.ppc-artwork-cta-arrow{
  color: var(--ink-soft);
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.ppc-artwork-cta-btn:hover .ppc-artwork-cta-arrow{
  color: var(--pixel-magenta);
  transform: translateX(3px);
}

/* "TEXT ONLY" badge — static info card, not a button, for products
   with mode:'text' (no file upload at all, e.g. engraved pens). */
.ppc-textonly-badge{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--paper-dim);
  border: 1.5px dashed var(--paper-line);
  border-radius: 12px;
}
.ppc-textonly-badge .ppc-artwork-cta-icon{
  background: var(--pixel-blue);
  box-shadow: 0 4px 12px rgba(46,111,242,.2);
}
.ppc-textonly-badge .ppc-artwork-cta-text strong{
  letter-spacing: .06em;
}
.ppc-textonly-badge .ppc-artwork-cta-text small{
  text-transform: none;
  line-height: 1.4;
}

.ppc-artwork-cta-help{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 4px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-style: italic;
}
.ppc-artwork-cta-help svg{
  flex-shrink: 0;
  color: var(--ink-soft);
  opacity: 0.7;
}

/* Dropzone highlight when triggered by the CTA */
.ppc-dropzone.is-highlight{
  animation: ppcDropzonePulse 1.8s ease-out;
  border-color: var(--pixel-magenta);
  box-shadow: 0 0 0 4px rgba(227,28,121,.15);
}
@keyframes ppcDropzonePulse{
  0%   { box-shadow: 0 0 0 0   rgba(227,28,121,.4);  }
  50%  { box-shadow: 0 0 0 12px rgba(227,28,121,0);   }
  100% { box-shadow: 0 0 0 0   rgba(227,28,121,0);    }
}

/* Mobile - bigger touch target */
@media (max-width: 900px){
  .ppc-artwork-cta-btn{
    padding: 14px 16px;
  }
  .ppc-artwork-cta-icon{
    width: 38px; height: 38px;
  }
  .ppc-artwork-cta-text strong{ font-size: 0.95rem; }
  .ppc-artwork-cta-text small{ font-size: 0.68rem; }
}

/* Currency code beside the price */



/* ============== ABOUT US PAGE — 3D ENHANCED ============== */
.ppc-about{ background: var(--paper); position: relative; overflow-x: hidden; }

/* Shared eyebrow */
.ppc-about-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pixel-magenta);
  font-weight: 600;
  margin-bottom: 16px;
}
.ppc-about-eyebrow::before{
  content: '';
  width: 24px; height: 1px;
  background: var(--pixel-magenta);
}
.ppc-about-h2{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 20px;
  color: var(--ink);
}

/* ============ HERO ============ */
.ppc-about-hero{
  position: relative;
  padding: 72px 0 80px;
  background:
    radial-gradient(circle at 80% 0%, rgba(46,111,242,.10) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(227,28,121,.12) 0%, transparent 55%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-dim) 100%);
  border-bottom: 1px solid var(--paper-line);
  overflow: hidden;
  perspective: 2000px;
}
.ppc-about-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11,11,15,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,11,15,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 100%);
  pointer-events: none;
}
.ppc-about-hero-inner{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.ppc-about-title{
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.5vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0 0 24px;
  color: var(--ink);
}
.ppc-about-title-accent{
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  transform: translateZ(0);
  position: relative;
}
.ppc-about-title-accent::after{
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%; height: 4px;
  background: var(--brand-gradient);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: ppcAccentReveal 1.2s 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes ppcAccentReveal{
  to{ transform: scaleX(1); }
}
.ppc-about-lead{
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 560px;
}
.ppc-about-hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============ 3D HERO STACK ============ */
.ppc-about-hero-3d{
  position: relative;
  height: 420px;
  perspective: 1800px;
  perspective-origin: 50% 50%;
}
.ppc-about-3d-scene{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: ppc3dSceneRotate 24s linear infinite;
}
@keyframes ppc3dSceneRotate{
  from{ transform: rotateY(0deg); }
  to  { transform: rotateY(360deg); }
}

.ppc-about-3d-shine{
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%, transparent 100%);
  border-radius: 16px;
  opacity: 0;
  animation: ppcShine 3s ease-in-out infinite;
}
.ppc-about-3d-card--2 .ppc-about-3d-shine{
  background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(227,28,121,.3) 50%, transparent 60%, transparent 100%);
}
.ppc-about-3d-card--3 .ppc-about-3d-shine{
  background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(46,111,242,.2) 50%, transparent 60%, transparent 100%);
}
@keyframes ppcShine{
  0%, 100%{ opacity: 0; transform: translateX(-100%); }
  50%{ opacity: 1; transform: translateX(100%); }
}

.ppc-about-3d-glow{
  position: absolute;
  bottom: -10%; left: 50%;
  transform: translateX(-50%);
  width: 320px; height: 80px;
  background: var(--brand-gradient);
  filter: blur(60px);
  opacity: 0.5;
  border-radius: 50%;
  animation: ppcGlow 6s ease-in-out infinite;
}
@keyframes ppcGlow{
  0%, 100%{ transform: translateX(-50%) scale(1); opacity: 0.5; }
  50%{ transform: translateX(-50%) scale(1.2); opacity: 0.7; }
}

/* ============ STATS ============ */
.ppc-about-stats{
  padding: 56px 0;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.ppc-about-stats::before{
  content: '';
  position: absolute;
  top: -50%; left: -10%;
  width: 60%; height: 200%;
  background: var(--brand-gradient);
  opacity: 0.15;
  filter: blur(80px);
}
.ppc-about-stats-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.ppc-about-stat{
  padding: 20px;
  border-right: 1px solid rgba(255,255,255,.1);
  animation: ppcFadeUp 0.6s ease-out both;
  animation-delay: var(--delay, 0s);
  transform: translateZ(0);
  transition: transform 0.3s ease;
}
.ppc-about-stat:hover{
  transform: translateY(-4px) translateZ(20px);
}
.ppc-about-stat:last-child{ border-right: 0; }
.ppc-about-stat-num{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--pixel-magenta), var(--pixel-orange));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
  text-shadow: 0 0 30px rgba(227,28,121,.3);
}
.ppc-about-stat-label{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,.6);
  font-weight: 500;
}
@keyframes ppcFadeUp{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ============ SECTIONS ============ */
.ppc-about-section{
  padding: 96px 0;
  position: relative;
}
.ppc-about-section + .ppc-about-section{ border-top: 1px solid var(--paper-line); }
.ppc-about-section-head{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  position: relative;
  z-index: 1;
}
.ppc-about-section-head .ppc-about-eyebrow{ justify-content: center; }
.ppc-about-section-head .ppc-about-eyebrow::after{
  content: '';
  width: 24px; height: 1px;
  background: var(--pixel-magenta);
}
.ppc-about-section-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  perspective: 1500px;
}
.ppc-about-section-text p{
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

/* ============ 3D STAGE (story visual) ============ */
.ppc-about-section-visual{
  perspective: 1500px;
  perspective-origin: 50% 50%;
}
.ppc-about-3d-stage{
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}
.ppc-about-3d-platform{
  position: relative;
  width: 240px; height: 240px;
  transform-style: preserve-3d;
  animation: ppc3dStageRotate 18s linear infinite;
}
@keyframes ppc3dStageRotate{
  from{ transform: rotateX(-20deg) rotateY(0deg); }
  to  { transform: rotateX(-20deg) rotateY(360deg); }
}
.ppc-about-3d-cube{
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.ppc-about-3d-face{
  position: absolute;
  width: 240px; height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 700;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 40px -10px rgba(11,11,15,.4);
  backface-visibility: visible;
}
.ppc-about-3d-face--front {
  background: linear-gradient(135deg, var(--paper), var(--paper-dim));
  color: var(--ink);
  transform: translateZ(120px);
  border: 1px solid var(--paper-line);
}
.ppc-about-3d-face--back {
  background: var(--ink);
  transform: rotateY(180deg) translateZ(120px);
}
.ppc-about-3d-face--right {
  background: linear-gradient(135deg, var(--pixel-magenta), var(--pixel-violet));
  transform: rotateY(90deg) translateZ(120px);
}
.ppc-about-3d-face--left {
  background: linear-gradient(135deg, var(--pixel-blue), var(--pixel-cyan, #2E6FF2));
  transform: rotateY(-90deg) translateZ(120px);
}
.ppc-about-3d-face--top {
  background: linear-gradient(135deg, var(--pixel-orange), var(--pixel-magenta));
  transform: rotateX(90deg) translateZ(120px);
}
.ppc-about-3d-face--bottom {
  background: linear-gradient(135deg, var(--pixel-green, #3FA746), var(--pixel-blue));
  transform: rotateX(-90deg) translateZ(120px);
  font-size: 3rem;
}

/* ============ VALUES (3D TILT) ============ */
.ppc-about-values-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  perspective: 1500px;
}
.ppc-about-value{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  padding: 28px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  animation: ppcFadeUp 0.6s ease-out both;
  animation-delay: var(--delay, 0s);
  transform-style: preserve-3d;
  position: relative;
}
.ppc-about-value::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(227,28,121,.05), rgba(46,111,242,.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.ppc-about-value:hover{
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
  box-shadow:
    0 30px 60px -20px rgba(11,11,15,.25),
    0 18px 36px -18px rgba(11,11,15,.15);
  border-color: var(--pixel-magenta);
}
.ppc-about-value:hover::before{ opacity: 1; }
.ppc-about-value-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: linear-gradient(135deg, rgba(227,28,121,.12), rgba(46,111,242,.12));
  color: var(--pixel-magenta);
  border-radius: 12px;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(227,28,121,.15);
}
.ppc-about-value:hover .ppc-about-value-icon{
  transform: rotateY(360deg) scale(1.1);
}
.ppc-about-value h3{
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--ink);
}
.ppc-about-value p{
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* ============ PROCESS (3D STEPS) ============ */
.ppc-about-process-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  perspective: 1500px;
}
.ppc-about-step{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  animation: ppcFadeUp 0.6s ease-out both;
  animation-delay: var(--delay, 0s);
  transform-style: preserve-3d;
}
.ppc-about-step:hover{
  transform: translateY(-6px) rotateX(3deg);
  box-shadow: 0 20px 40px -10px rgba(11,11,15,.2);
  border-color: var(--pixel-magenta);
}
.ppc-about-step-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 6px 14px -4px rgba(11,11,15,.4);
  transition: transform 0.3s ease;
}
.ppc-about-step:hover .ppc-about-step-num{
  transform: translateZ(20px) rotateZ(360deg);
  background: var(--pixel-magenta);
}
.ppc-about-step strong{
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.ppc-about-step span{
  font-family: var(--font-display);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ============ CTA ============ */
.ppc-about-cta{ padding: 0 0 96px; }
.ppc-about-cta-card{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 48px;
  background: linear-gradient(135deg, var(--ink) 0%, #1F1F26 100%);
  border-radius: 20px;
  color: var(--paper);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow: 0 30px 60px -20px rgba(11,11,15,.4);
}
.ppc-about-cta-card::before{
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 60%; height: 200%;
  background: var(--brand-gradient);
  opacity: 0.2;
  filter: blur(60px);
  pointer-events: none;
  animation: ppcCtaGlow 8s ease-in-out infinite;
}
@keyframes ppcCtaGlow{
  0%, 100%{ transform: translate(0, 0); }
  50%{ transform: translate(-30px, 30px); }
}
.ppc-about-cta-card .ppc-about-h2{ color: var(--paper); position: relative; z-index: 1; }
.ppc-about-cta-card p{
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  margin: 12px 0 0;
  max-width: 480px;
  position: relative;
  z-index: 1;
}
.ppc-about-cta-card .ppc-about-eyebrow{ color: var(--pixel-orange); position: relative; z-index: 1; }
.ppc-about-cta-card .ppc-about-eyebrow::before{ background: var(--pixel-orange); }
.ppc-about-cta-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.ppc-about-cta-actions .ppc-btn--ghost{
  color: var(--paper);
  border-color: rgba(255,255,255,.2);
}
.ppc-about-cta-actions .ppc-btn--ghost:hover{
  border-color: var(--paper);
  background: rgba(255,255,255,.06);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .ppc-about-hero-inner,
  .ppc-about-section-grid,
  .ppc-about-cta-card{ grid-template-columns: 1fr; gap: 32px; }
  .ppc-about-stats-grid{ grid-template-columns: repeat(2, 1fr); }
  .ppc-about-values-grid{ grid-template-columns: 1fr; }
  .ppc-about-process-list{ grid-template-columns: 1fr; }
  .ppc-about-hero-3d{ height: 320px; }
  .ppc-about-3d-stage{ height: 320px; }
  .ppc-about-3d-cube{ transform: scale(0.75); }
}
@media (max-width: 600px){
  .ppc-about-hero{ padding: 56px 0 60px; }
  .ppc-about-section{ padding: 64px 0; }
  .ppc-about-cta-card{ padding: 32px 24px; }
  .ppc-about-stats-grid{ grid-template-columns: 1fr; }
  .ppc-about-stat{ border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding: 14px; }
  .ppc-about-stat:last-child{ border-bottom: 0; }
}

/* ============ INTERACTIVE TILT (mouse follow) ============ */
.ppc-about-value,
.ppc-about-step{
  will-change: transform;
}

/* ============ 3D PRODUCT CARDS (real products) ============ */
.ppc-about-3d-product{
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 280px;
  margin: -140px 0 0 -100px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(11,11,15,.30),
    0 18px 36px -18px rgba(11,11,15,.18);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease;
  cursor: pointer;
  --accent: var(--pixel-magenta);
}
.ppc-about-3d-product::after{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  z-index: 1;
}
.ppc-about-3d-product-image{
  position: relative;
  width: 100%;
  height: 170px;
  background: var(--paper-dim);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppc-about-3d-product-image img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ppc-about-3d-product:hover .ppc-about-3d-product-image img{
  transform: scale(1.08);
}
.ppc-about-3d-product-meta{
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--paper);
  flex: 1;
}
.ppc-about-3d-product-title{
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ppc-about-3d-product-sub{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.ppc-about-3d-product-price{
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
}

/* ============ PARTNERSHIPS SECTION ============ */
.ppc-about-partners{ background: var(--paper-dim); }
.ppc-about-section-sub{
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.ppc-about-partners-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  perspective: 1500px;
}
.ppc-about-partner{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  animation: ppcFadeUp 0.6s ease-out both;
  animation-delay: var(--delay, 0s);
  transform-style: preserve-3d;
}
.ppc-about-partner:hover{
  transform: translateY(-4px) rotateX(2deg);
  box-shadow: 0 16px 32px -10px rgba(11,11,15,.18);
  border-color: var(--pixel-magenta);
}
.ppc-about-partner-flag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease;
}
.ppc-about-partner:hover .ppc-about-partner-flag{
  background: var(--brand-gradient);
  transform: rotateZ(360deg);
}
.ppc-about-partner-body{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ppc-about-partner-body strong{
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.ppc-about-partner-body span{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

@media (max-width: 900px){
  .ppc-about-partners-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .ppc-about-partners-grid{ grid-template-columns: 1fr; }
}

/* Update the 3D hero stack to handle the new card size */
.ppc-about-hero-3d{
  position: relative;
  height: 420px;
  perspective: 1800px;
  perspective-origin: 50% 50%;
}
.ppc-about-3d-scene{
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: ppc3dSceneRotate 24s linear infinite;
}
@keyframes ppc3dSceneRotate{
  from{ transform: rotateY(0deg); }
  to  { transform: rotateY(360deg); }
}


/* Scroll reveal */
.ppc-reveal{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ppc-reveal.is-revealed{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   CONTACT PAGE — was using .ppc-contact-* classes with no
   matching CSS anywhere in the theme, so it rendered as bare
   unstyled HTML. This is that missing stylesheet.
   ========================================================= */
.ppc-contact-hero{
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-contact-hero-inner{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
}
.ppc-contact-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;
  margin-bottom: 10px;
}
.ppc-contact-eyebrow::before{
  content: "";
  width: 7px; height: 7px;
  background: linear-gradient(100deg, #2E6FF2, #6E2FF2, #E31C79, #FF7A1A, #3FA746);
  border-radius: 1px;
  display: inline-block;
}
.ppc-contact-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .4em;
}
.ppc-contact-lead{
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}
.ppc-contact-hero-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-soft);
  padding: 10px 16px;
  border: 1px solid var(--paper-line);
  border-radius: 30px;
  background: var(--paper);
}
.ppc-contact-pulse{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pixel-green);
  flex: none;
  animation: ppc-pulse 1.8s ease-in-out infinite;
}
@keyframes ppc-pulse{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .5; transform: scale(.75); }
}

.ppc-contact-channels{
  padding: 40px 0;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-contact-channels-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ppc-contact-channel{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 20px;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  background: var(--paper);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  color: var(--ink);
}
a.ppc-contact-channel:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: transparent;
}
.ppc-contact-channel-icon{
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(100deg, #2E6FF2, #6E2FF2, #E31C79, #FF7A1A, #3FA746);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.ppc-contact-channel strong{
  font-family: var(--font-display);
  font-size: .95rem;
}
.ppc-contact-channel span{
  font-size: .92rem;
  color: var(--ink-soft);
  word-break: break-word;
}
.ppc-contact-channel small{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: #9a988f;
  margin-top: 2px;
}

.ppc-contact-main{ padding: 60px 0 80px; }
.ppc-contact-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 44px;
  align-items: start;
}

.ppc-contact-form-card{
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 32px;
  background: var(--paper);
}
.ppc-contact-form-head h2{
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 .3em;
}
.ppc-contact-form-head p{
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.ppc-contact-form-banner{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  margin-bottom: 20px;
}
.ppc-contact-form-banner.is-success{
  background: rgba(63,167,70,.1);
  color: #2c7a34;
  border: 1px solid rgba(63,167,70,.3);
}
.ppc-contact-form-banner.is-error{
  background: rgba(227,28,121,.08);
  color: #b3155f;
  border: 1px solid rgba(227,28,121,.3);
}
.ppc-contact-form-banner svg{ flex: none; }

/* Anti-spam honeypot: pulled off-screen (not display:none/visibility:hidden,
   which some bots know to skip) — invisible and unreachable by tab for
   real visitors, but still "visible" to scripts that fill every field. */
.ppc-hp-field{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ppc-contact-form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ppc-contact-form-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.ppc-contact-form-field label{
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .03em;
  color: var(--ink-soft);
}
.ppc-req{ color: var(--pixel-magenta); }
.ppc-contact-form-field input,
.ppc-contact-form-field textarea{
  padding: .8em .9em;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
  resize: vertical;
}
.ppc-contact-form-field input:focus,
.ppc-contact-form-field textarea:focus{
  outline: 2px solid var(--pixel-blue);
  outline-offset: 1px;
  border-color: transparent;
}
.ppc-btn--block{ width: 100%; margin-top: 6px; }

.ppc-contact-aside{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ppc-contact-card{
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 24px;
  background: var(--paper);
}
.ppc-contact-card h3{
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 16px;
}
.ppc-contact-hours{ list-style: none; margin: 0; padding: 0; }
.ppc-contact-hours li{
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--paper-line);
  font-size: .9rem;
}
.ppc-contact-hours li:last-child{ border-bottom: none; }
.ppc-contact-hours li span:first-child{ color: var(--ink-soft); }
.ppc-contact-hours li.is-closed span:last-child{ color: var(--pixel-magenta); }

.ppc-contact-address{
  font-size: .9rem;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.ppc-contact-map{ position: relative; }
.ppc-contact-map iframe{
  width: 100%;
  height: 220px;
  border-radius: var(--radius-sm);
  display: block;
}
.ppc-contact-map-link{
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--pixel-blue);
}

.ppc-contact-faq{ list-style: none; margin: 0; padding: 0; }
.ppc-contact-faq li{ padding: 12px 0; border-bottom: 1px solid var(--paper-line); }
.ppc-contact-faq li:last-child{ border-bottom: none; padding-bottom: 0; }
.ppc-contact-faq strong{
  display: block;
  font-family: var(--font-display);
  font-size: .88rem;
  margin-bottom: 4px;
}
.ppc-contact-faq span{
  display: block;
  font-size: .86rem;
  color: var(--ink-soft);
}

@media (max-width: 1024px){
  .ppc-contact-channels-grid{ grid-template-columns: repeat(2, 1fr); }
  .ppc-contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .ppc-contact-hero-inner{ align-items: flex-start; }
  .ppc-contact-channels-grid{ grid-template-columns: 1fr; }
  .ppc-contact-form-row{ grid-template-columns: 1fr; }
  .ppc-contact-form-card{ padding: 22px; }
}

/* =========================================================
   BLOG LANDING PAGE (home.php)
   ========================================================= */
.ppc-blog-hero{
  padding: 48px 0 44px;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-blog-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: .3em 0 .35em;
}
.ppc-blog-lead{
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0;
}

.ppc-blog-featured{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: center;
  margin-bottom: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--paper-line);
}
.ppc-blog-featured-media{
  display: block;
  aspect-ratio: 16/11;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-dim);
}
.ppc-blog-featured-media img{ width: 100%; height: 100%; object-fit: cover; }
.ppc-blog-featured-fallback{
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #2E6FF2, #6E2FF2, #E31C79, #FF7A1A, #3FA746);
}
.ppc-blog-featured-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(100deg, #2E6FF2, #6E2FF2, #E31C79, #FF7A1A, #3FA746);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}
.ppc-blog-featured-body h2{
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.2;
  margin: 0 0 .3em;
}
.ppc-blog-featured-body h2 a{ color: var(--ink); }
.ppc-blog-featured-body h2 a:hover{ color: var(--pixel-magenta); }

.ppc-blog-meta{
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 14px;
}
.ppc-blog-excerpt{
  color: var(--ink-soft);
  font-size: .95rem;
  margin-bottom: 18px;
}
.ppc-blog-excerpt p{ margin: 0; }

.ppc-blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.ppc-blog-card{
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ppc-blog-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.ppc-blog-card-media{
  display: block;
  aspect-ratio: 16/10;
  background: var(--paper-dim);
}
.ppc-blog-card-media img{ width: 100%; height: 100%; object-fit: cover; }
.ppc-blog-card-fallback{
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #2E6FF2, #E31C79);
}
.ppc-blog-card-body{ padding: 20px; }
.ppc-blog-card-body h3{
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.3;
  margin: 0 0 8px;
}
.ppc-blog-card-body h3 a{ color: var(--ink); }
.ppc-blog-card-body h3 a:hover{ color: var(--pixel-magenta); }
.ppc-blog-card-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--pixel-blue);
}

.ppc-blog-pagination{
  margin-top: 48px;
  display: flex;
  justify-content: center;
}
.ppc-blog-pagination .nav-links{
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: .85rem;
}
.ppc-blog-pagination a,
.ppc-blog-pagination span{
  padding: 8px 16px;
  border: 1px solid var(--paper-line);
  border-radius: 20px;
  color: var(--ink);
}
.ppc-blog-pagination .current{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.ppc-blog-empty{
  text-align: center;
  padding: 60px 20px;
}
.ppc-blog-empty p{
  color: var(--ink-soft);
  margin-bottom: 22px;
  font-size: 1.02rem;
}

.ppc-blog-cta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 36px 40px;
  border-radius: var(--radius-md);
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
}
.ppc-blog-cta h2{
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 0 .25em;
}
.ppc-blog-cta p{
  color: var(--ink-soft);
  margin: 0;
  max-width: 48ch;
}

@media (max-width: 1024px){
  .ppc-blog-featured{ grid-template-columns: 1fr; }
  .ppc-blog-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .ppc-blog-grid{ grid-template-columns: 1fr; }
  .ppc-blog-cta{ flex-direction: column; align-items: flex-start; padding: 26px; }
}

/* -------------------------------------------------------------------------
   Shipments and tracking (inc/shipment-tracking.php)
   ------------------------------------------------------------------------- */
.ppc-ship-section{ margin: 0 0 28px; }
.ppc-ship-section h2{ font-size: 1.15rem; margin: 0 0 12px; }
.ppc-ship-card{ display:flex; align-items:center; gap:14px; padding:14px 16px; margin:0 0 10px; border:1px solid var(--paper-line); border-radius:14px; background: var(--paper); }
.ppc-ship-card-ic{ flex:0 0 44px; height:44px; border-radius:12px; display:grid; place-items:center; background: rgba(46,111,242,.10); color: var(--pixel-blue); }
.ppc-ship-card-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ppc-ship-card-txt small{ color: var(--ink-soft); font-size:.8rem; }
.ppc-ship-card-txt strong{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:1rem; letter-spacing:.4px; overflow-wrap:anywhere; color: var(--ink); }
.ppc-ship-card-txt span{ color: var(--ink-soft); font-size:.85rem; }
.ppc-ship-card .ppc-btn{ flex:0 0 auto; white-space:nowrap; }
@media (max-width: 560px){
  .ppc-ship-card{ flex-wrap:wrap; }
  .ppc-ship-card .ppc-btn{ flex:1 1 100%; justify-content:center; }
}
.ppc-track-shipments{ margin-top:20px; }
.ppc-track-shipments > strong{ display:block; margin:0 0 10px; }
.ppc-ship-link{ display:block; white-space:nowrap; font-weight:600; color: var(--pixel-blue); }
.ppc-ship-none{ color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   Worldwide shipping strip (inc/intl-shipping.php): same family as .cta-band
   ------------------------------------------------------------------------- */
.ppc-intl{ margin: 22px 0 6px; position:relative; z-index:5; }
/* the language menu opens over the sections below (under the sticky header, z 60) */
.ppc-intl.lang-open, .ppc-intl:has(.ppc-lang.is-open){ z-index:55; }
.site-main .ppc-intl .container, .container .ppc-intl .container{ padding:0; max-width:none; }
.ppc-intl-band{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:20px;
  min-height:64px; padding:10px 14px 10px 16px;
  background: var(--ink); color: var(--paper); border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(11,11,15,.12);
}
.ppc-intl-band.crop{ overflow:visible; }
.ppc-intl-band.crop > .ppc-intl-glow, .ppc-intl-band.crop > .ppc-intl-cut{ border-radius: inherit; }
/* drifting brand-gradient light, like the CTA band's corner glow */
.ppc-intl-glow{ position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; border-radius:var(--radius-md); }
.ppc-intl-glow::before, .ppc-intl-glow::after{
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  background: var(--brand-gradient); filter: blur(56px); opacity:.42;
  top:-110px; left:-80px; animation: ppcIntlDrift 14s ease-in-out infinite alternate;
}
.ppc-intl-glow::after{ left:auto; right:-90px; top:-120px; opacity:.32; animation-duration:18s; animation-direction:alternate-reverse; }
@keyframes ppcIntlDrift{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(120px,20px,0) scale(1.15); } 100%{ transform:translate3d(240px,-10px,0) scale(.95); } }
/* dashed cut line along the bottom with a plane gliding over it */
.ppc-intl-cut{ position:absolute; left:14px; right:14px; bottom:6px; height:1px; pointer-events:none; z-index:0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 6px, transparent 6px 12px); }
.ppc-intl-plane{ position:absolute; top:-7px; left:0; color:#fff; opacity:0; transform:rotate(90deg);
  filter: drop-shadow(0 0 6px rgba(227,28,121,.9)); animation: ppcIntlFly 9s cubic-bezier(.45,0,.25,1) infinite; }
@keyframes ppcIntlFly{ 0%{ left:0; opacity:0; } 8%{ opacity:1; } 88%{ opacity:1; } 100%{ left:calc(100% - 14px); opacity:0; } }

.ppc-intl-head{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; min-width:0; }
.ppc-intl-globe{ flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.14), rgba(255,255,255,.02) 70%); }
.ppc-intl-meridians{ animation: ppcIntlSpin 6s linear infinite; }
@keyframes ppcIntlSpin{ to{ transform: translateX(-30px); } }
.ppc-intl-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ppc-intl-eyebrow{ display:inline-flex; align-items:center; gap:6px; font: 600 .66rem/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:#C8C6C0; }
.ppc-intl-dot{ width:6px; height:6px; border-radius:50%; background: var(--pixel-green); box-shadow:0 0 0 0 rgba(63,167,70,.7); animation: ppcIntlPulse 2s ease-out infinite; }
@keyframes ppcIntlPulse{ 0%{ box-shadow:0 0 0 0 rgba(63,167,70,.7); } 70%{ box-shadow:0 0 0 7px rgba(63,167,70,0); } 100%{ box-shadow:0 0 0 0 rgba(63,167,70,0); } }
.ppc-intl-title{ font: 600 1rem/1.25 var(--font-display); color:#fff; white-space:nowrap; letter-spacing:-.01em; }
.ppc-intl-title b{ background: var(--brand-gradient); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; animation: ppcIntlShine 6s linear infinite; }
@keyframes ppcIntlShine{ to{ background-position:-200% 0; } }
.ppc-intl-sub{ font-weight:400; color:#C8C6C0; font-size:.86rem; }

/* country ticker */
.ppc-intl-marquee{ position:relative; z-index:1; overflow:hidden; min-width:0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ppc-intl-track{ display:flex; width:max-content; animation: ppcIntlScroll var(--ppc-intl-dur,110s) linear infinite; will-change:transform; }
.ppc-intl-set{ display:flex; gap:8px; padding-right:8px; }
@keyframes ppcIntlScroll{ to{ transform: translate3d(-50%,0,0); } }
.ppc-intl-band:hover .ppc-intl-track, .ppc-intl.is-paused .ppc-intl-track,
.ppc-intl.is-paused .ppc-intl-glow::before, .ppc-intl.is-paused .ppc-intl-glow::after,
.ppc-intl.is-paused .ppc-intl-plane, .ppc-intl.is-paused .ppc-intl-meridians{ animation-play-state: paused; }
.ppc-intl-chip{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:5px 11px 5px 5px;
  border:1px solid rgba(255,255,255,.12); border-radius:999px; background: rgba(255,255,255,.04);
  font: 500 .8rem/1 var(--font-body); color:#E9E7E1; transition: background .2s, border-color .2s; }
.ppc-intl-chip i, .ppc-intl-panel li i{ font: 700 .62rem/1 var(--font-mono); font-style:normal; letter-spacing:.04em; color:#fff;
  padding:4px 5px; border-radius:999px; background: linear-gradient(135deg, var(--pixel-blue), var(--pixel-magenta)); }
.ppc-intl-chip:nth-child(3n+2) i{ background: linear-gradient(135deg, var(--pixel-magenta), var(--pixel-orange)); }
.ppc-intl-chip:nth-child(3n) i{ background: linear-gradient(135deg, var(--pixel-violet), var(--pixel-green)); }
.ppc-intl-band:hover .ppc-intl-chip{ border-color: rgba(255,255,255,.2); }

.ppc-intl-more{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font: 600 .78rem/1 var(--font-body); color:#fff; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  padding:9px 13px; border-radius:999px; white-space:nowrap; transition: background .2s, transform .2s; }
.ppc-intl-more:hover{ background: rgba(255,255,255,.16); }
.ppc-intl-more:focus-visible{ outline:2px solid var(--pixel-magenta); outline-offset:2px; }
.ppc-intl-more svg{ transition: transform .3s; }
.ppc-intl-more[aria-expanded="true"] svg{ transform: rotate(180deg); }

.ppc-intl-panel{ margin-top:10px; padding:18px; border:1px solid var(--paper-line); border-radius: var(--radius-md); background: var(--paper);
  opacity:0; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
.ppc-intl-panel.is-open{ opacity:1; transform:none; }
.ppc-intl-panel p{ margin:0 0 12px; color: var(--ink-soft); font-size:.9rem; }
.ppc-intl-panel ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap:8px 14px; }
.ppc-intl-panel li{ display:flex; align-items:center; gap:8px; font-size:.88rem; color: var(--ink); }

/* entrance when it scrolls into view */
.ppc-intl.has-js .ppc-intl-band{ opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.ppc-intl.has-js.is-in .ppc-intl-band{ opacity:1; transform:none; }

/* tablet / phone: headline row on top, ticker underneath, still thin */
@media (max-width: 860px){
  .ppc-intl-band{ grid-template-columns: minmax(0,1fr) auto; gap:8px 12px; padding:10px 12px 14px; }
  .ppc-intl-marquee{ grid-column: 1 / -1; grid-row: 2; }
  .ppc-intl-sub{ display:none; }
}
@media (max-width: 480px){
  .ppc-intl{ margin-top:16px; }
  .ppc-intl-globe{ width:32px; height:32px; } .ppc-intl-globe svg{ width:28px; height:28px; }
  .ppc-intl-title{ font-size:.9rem; white-space:normal; }
  .ppc-intl-eyebrow{ font-size:.58rem; letter-spacing:.08em; white-space:nowrap; }
  .ppc-intl-more{ padding:8px 10px; font-size:.72rem; }
  .ppc-intl-chip{ font-size:.74rem; }
}
@media (prefers-reduced-motion: reduce){
  .ppc-intl-track, .ppc-intl-glow::before, .ppc-intl-glow::after, .ppc-intl-plane, .ppc-intl-meridians, .ppc-intl-dot, .ppc-intl-title b{ animation:none !important; }
  .ppc-intl-plane{ display:none; }
  .ppc-intl-marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .ppc-intl-set + .ppc-intl-set{ display:none; }
  .ppc-intl.has-js .ppc-intl-band{ opacity:1; transform:none; transition:none; }
}
.ppc-intl-policy{ margin: 14px 0 22px; }
.ppc-intl-policy li i{ font: 700 .62rem/1 var(--font-mono); font-style:normal; letter-spacing:.04em; color:#fff; padding:4px 5px; border-radius:999px; background: linear-gradient(135deg, var(--pixel-blue), var(--pixel-magenta)); }

/* =========================================================================
   ABOUT PAGE v2 (page-about.php): badges, 5 numbers, how-we-work flow,
   services, free tools, trust row. Same tokens as the rest of the page.
   ========================================================================= */
.ppc-about-badges{ list-style:none; margin:-12px 0 28px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.ppc-about-badges li{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--paper-line); border-radius:999px; background: rgba(255,255,255,.7); backdrop-filter: blur(6px);
  font: 500 .82rem/1 var(--font-display); color: var(--ink); }
.ppc-about-badges svg{ color: var(--pixel-magenta); flex:0 0 auto; }
.ppc-about-badges li:nth-child(2) svg{ color: var(--pixel-green); }
.ppc-about-badges li:nth-child(3) svg{ color: var(--pixel-blue); }

.ppc-about-stats-grid--5{ grid-template-columns: repeat(5, 1fr); gap:0; }
.ppc-about-stats-grid--5 .ppc-about-stat-label{ max-width: 16ch; margin: 0 auto; line-height:1.45; }
.ppc-about-stats{ padding: 48px 0; }

/* how we work: 4 connected nodes with a light running down the line */
.ppc-about-flow{ list-style:none; margin:0; padding:8px 0; position:relative; display:flex; flex-direction:column; gap:18px; max-width:440px; margin-left:auto; }
.ppc-about-flow::before{ content:""; position:absolute; left:27px; top:34px; bottom:34px; width:2px; border-radius:2px;
  background: linear-gradient(180deg, #2E6FF2, #E31C79 40%, #6E2FF2 70%, #3FA746); opacity:.35; }
.ppc-about-flow::after{ content:""; position:absolute; left:24px; top:34px; width:8px; height:8px; border-radius:50%; background:#fff;
  box-shadow: 0 0 0 3px var(--pixel-magenta), 0 0 16px 4px rgba(227,28,121,.5); animation: ppcFlowRun 4.5s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes ppcFlowRun{ 0%{ top:34px; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ top: calc(100% - 42px); opacity:0; } }
.ppc-about-flow-node{ position:relative; display:flex; align-items:center; gap:16px; padding:16px 18px 16px 12px; background: var(--paper); border:1px solid var(--paper-line); border-radius:14px;
  box-shadow: var(--shadow-card); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.ppc-about-flow-node:hover{ transform: translateX(-6px); border-color: var(--c); box-shadow: 0 18px 36px -18px rgba(11,11,15,.3); }
.ppc-about-flow-ic{ position:relative; z-index:1; flex:0 0 32px; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:#fff; background: var(--c);
  box-shadow: 0 6px 14px -4px var(--c); }
.ppc-about-flow-node div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ppc-about-flow-node strong{ font: 700 1rem/1.2 var(--font-display); color: var(--ink); }
.ppc-about-flow-node small{ font: 400 .86rem/1.45 var(--font-display); color: var(--ink-soft); }
.ppc-about-flow-node--hub{ background: var(--ink); border-color: var(--ink); left:-18px; }
.ppc-about-flow-node--hub strong{ color:#fff; }
.ppc-about-flow-node--hub small{ color:#C8C6C0; }
.ppc-about-flow-node--hub .ppc-about-flow-ic{ background: var(--brand-gradient); }
.ppc-about-flow-node--hub .ppc-about-flow-ic img{ width:22px; height:22px; object-fit:contain; }
.ppc-about-flow-node--hub::after{ content:""; position:absolute; inset:-1px; border-radius:14px; padding:1px; background: var(--brand-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }

/* what we do */
.ppc-about-services{ background: var(--paper); }
.ppc-about-services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
.ppc-about-service{ display:flex; flex-direction:column; text-decoration:none; color:inherit; background: var(--paper); border:1px solid var(--paper-line); border-radius:16px; overflow:hidden;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .3s; }
.ppc-about-service:hover{ transform: translateY(-6px); border-color: var(--c); box-shadow: 0 30px 60px -24px rgba(11,11,15,.3); }
.ppc-about-service-media{ position:relative; aspect-ratio: 16/10; overflow:hidden; background: var(--ink); }
.ppc-about-service-media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s; }
.ppc-about-service:hover .ppc-about-service-media img{ transform: scale(1.06); }
.ppc-about-service-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 45%, rgba(11,11,15,.55)); }
.ppc-about-service-num{ position:absolute; z-index:1; left:14px; bottom:12px; font: 700 .72rem/1 var(--font-mono); letter-spacing:.1em; color:#fff; padding:6px 8px; border-radius:6px; background: var(--c); }
.ppc-about-service-body{ display:flex; flex-direction:column; gap:10px; padding:20px 22px 22px; flex:1; position:relative; }
.ppc-about-service-body::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; background: var(--c); transform: scaleX(0); transform-origin:left; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ppc-about-service:hover .ppc-about-service-body::before{ transform: scaleX(1); }
.ppc-about-service-body strong{ font: 700 1.2rem/1.2 var(--font-display); color: var(--ink); }
.ppc-about-service-text{ font: 400 .93rem/1.6 var(--font-display); color: var(--ink-soft); }
.ppc-about-service-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.ppc-about-service-chips i{ font: 500 .74rem/1 var(--font-body); font-style:normal; color: var(--ink); padding:6px 9px; border-radius:999px; background: var(--paper-dim); border:1px solid var(--paper-line); }
.ppc-about-service-cta{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px; font: 600 .88rem/1 var(--font-display); color: var(--c); }
.ppc-about-service-cta svg{ transition: transform .3s; }
.ppc-about-service:hover .ppc-about-service-cta svg{ transform: translateX(4px); }

/* free tools: dark panel */
.ppc-about-tools{ padding: 24px 0 96px; }
.ppc-about-section + .ppc-about-tools{ border-top:0; }
.ppc-about-tools-wrap{ position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns: .9fr 1.4fr; gap:48px; align-items:center;
  padding:48px; border-radius:20px; background: linear-gradient(135deg, var(--ink) 0%, #1F1F26 100%); color: var(--paper); box-shadow: 0 30px 60px -20px rgba(11,11,15,.4); }
.ppc-about-tools-wrap::before{ content:""; position:absolute; z-index:-1; left:-15%; bottom:-60%; width:60%; height:160%; background: var(--brand-gradient); opacity:.18; filter: blur(70px); animation: ppcCtaGlow 10s ease-in-out infinite; }
.ppc-about-tools-head .ppc-about-h2{ color:#fff; }
.ppc-about-tools-head .ppc-about-eyebrow{ color: var(--pixel-orange); }
.ppc-about-tools-head .ppc-about-eyebrow::before{ background: var(--pixel-orange); }
.ppc-about-tools-head p{ font: 400 1rem/1.65 var(--font-display); color: rgba(255,255,255,.72); margin:0 0 24px; }
.ppc-about-tools-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
.ppc-about-tool{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; text-decoration:none; color:#fff;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); transition: background .25s, border-color .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
.ppc-about-tool:hover{ background: rgba(255,255,255,.08); border-color: var(--c); transform: translateY(-3px); }
.ppc-about-tool-ic{ flex:0 0 38px; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:#fff; background: var(--c); box-shadow: 0 6px 16px -6px var(--c); }
.ppc-about-tool > span:last-child{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ppc-about-tool strong{ font: 600 .92rem/1.2 var(--font-display); }
.ppc-about-tool small{ font: 400 .78rem/1.35 var(--font-display); color: rgba(255,255,255,.6); }

/* trust row above the CTA */
.ppc-about-trust{ list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; }
.ppc-about-trust li{ display:flex; align-items:center; gap:12px; padding:16px 18px; border:1px solid var(--paper-line); border-radius:14px; background: var(--paper); transition: border-color .25s, transform .3s; }
.ppc-about-trust li > a{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; flex:1; }
.ppc-about-trust li:hover{ border-color: var(--pixel-magenta); transform: translateY(-3px); }
.ppc-about-trust svg{ flex:0 0 auto; color: var(--pixel-magenta); }
.ppc-about-trust span{ display:flex; flex-direction:column; gap:3px; }
.ppc-about-trust strong{ font: 600 .92rem/1.2 var(--font-display); color: var(--ink); }
.ppc-about-trust small{ font: 400 .8rem/1.3 var(--font-display); color: var(--ink-soft); }
.ppc-about .ppc-intl{ margin: 0 0 40px; }

.ppc-about .ppc-reveal{ transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .4s, background .25s; }
/* counting numbers */
.ppc-about-stat-num span[data-count]{ font-variant-numeric: tabular-nums; }

@media (max-width: 1100px){
  .ppc-about-stats-grid--5{ grid-template-columns: repeat(3, 1fr); row-gap:8px; }
  .ppc-about-stats-grid--5 .ppc-about-stat:nth-child(3){ border-right:0; }
  .ppc-about-tools-wrap{ grid-template-columns: 1fr; gap:28px; }
  .ppc-about-trust{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px){
  .ppc-about-services-grid{ grid-template-columns: repeat(2, 1fr); }
  .ppc-about-flow{ margin: 0 auto; }
  .ppc-about-flow-node--hub{ left:0; }
}
@media (max-width: 600px){
  .ppc-about-badges{ margin-top:-8px; }
  .ppc-about-stats-grid--5{ grid-template-columns: repeat(2, 1fr); }
  .ppc-about-stats-grid--5 .ppc-about-stat{ border-right:0; padding:14px 6px; }
  .ppc-about-stats-grid--5 .ppc-about-stat:last-child{ grid-column: 1 / -1; }
  .ppc-about-services-grid{ grid-template-columns: 1fr; }
  .ppc-about-tools-wrap{ padding:28px 20px; border-radius:16px; }
  .ppc-about-tools-grid{ grid-template-columns: 1fr; }
  .ppc-about-trust{ grid-template-columns: 1fr; }
  .ppc-about-section{ padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce){
  .ppc-about-flow::after{ animation:none; display:none; }
  .ppc-about-tools-wrap::before{ animation:none; }
}
.ppc-about-step .ppc-about-step-num{ color: var(--paper); font-family: var(--font-mono); font-size: .9rem; line-height:1; }

/* Product quick facts (inc/ai-search.php) */
.ppc-facts{ margin:0 0 24px; border:1px solid var(--paper-line); border-radius:14px; overflow:hidden; background: var(--paper); }
.ppc-facts h2{ margin:0; padding:12px 16px; font: 700 .95rem/1.3 var(--font-display); color:#fff; background: var(--ink); position:relative; }
.ppc-facts h2::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background: var(--brand-gradient); }
.ppc-facts dl{ margin:0; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.ppc-facts dl > div{ padding:11px 16px; border-bottom:1px solid var(--paper-line); display:flex; flex-direction:column; gap:3px; }
.ppc-facts dl > div:nth-child(odd){ border-right:1px solid var(--paper-line); }
.ppc-facts dt{ font: 600 .66rem/1.2 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color: var(--pixel-magenta); }
.ppc-facts dd{ margin:0; font: 500 .9rem/1.45 var(--font-display); color: var(--ink); }
@media (max-width: 600px){ .ppc-facts dl{ grid-template-columns: 1fr; } .ppc-facts dl > div:nth-child(odd){ border-right:0; } }

/* Language menu (inc/i18n/core.php) */
.ppc-lang{ position:relative; display:inline-flex; }
.ppc-lang-btn{ display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; letter-spacing:inherit; }
.ppc-lang-btn:hover, .ppc-lang.is-open .ppc-lang-btn{ color: var(--pixel-magenta); }
.ppc-lang-chev{ transition: transform .2s; }
.ppc-lang.is-open .ppc-lang-chev{ transform: rotate(180deg); }
.ppc-lang-menu{ position:absolute; z-index:1000; top:calc(100% + 10px); right:-8px; min-width:190px; margin:0; padding:6px; list-style:none; background: var(--paper); border:1px solid var(--paper-line); border-radius:12px;
  box-shadow: 0 18px 40px -12px rgba(11,11,15,.28); opacity:0; visibility:hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.ppc-lang.is-open .ppc-lang-menu{ opacity:1; visibility:visible; transform:none; }
.ppc-lang-menu a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color: var(--ink); text-decoration:none; font: 500 .86rem/1.2 var(--font-display); letter-spacing:0; }
.ppc-lang-menu a b{ font: 700 .66rem/1 var(--font-mono); letter-spacing:.06em; padding:4px 5px; border-radius:5px; background: var(--paper-dim); color: var(--ink-soft); min-width:26px; text-align:center; }
.ppc-lang-menu a:hover{ background: var(--paper-dim); color: var(--ink); }
.ppc-lang-menu a.is-current{ background: var(--ink); color:#fff; }
.ppc-lang-menu a.is-current b{ background: var(--brand-gradient); color:#fff; }
.ppc-lang--drawer{ display:block; margin:0 0 12px; }
.ppc-lang--drawer .ppc-lang-btn{ width:100%; justify-content:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--paper-line); border-radius:12px; font: 600 .95rem/1 var(--font-display); }
.ppc-lang--drawer .ppc-lang-chev{ margin-left:auto; }
.ppc-lang--drawer .ppc-lang-menu{ position:static; display:none; opacity:1; visibility:visible; transform:none; box-shadow:none; margin-top:6px; }
.ppc-lang--drawer.is-open .ppc-lang-menu{ display:block; }
[dir="rtl"] .ppc-lang-menu{ right:auto; left:-8px; }

/* Worldwide strip: second message "site in your language" + language button */
.ppc-intl-slides{ display:grid; min-width:0; }
.ppc-intl-slide{ grid-area:1 / 1; min-width:0; }
.ppc-intl.has-langs .ppc-intl-slide--ship{ animation: ppcIntlMsgA 12s ease-in-out infinite; }
.ppc-intl.has-langs .ppc-intl-slide--lang{ animation: ppcIntlMsgB 12s ease-in-out infinite; opacity:0; }
@keyframes ppcIntlMsgA{ 0%,42%{ opacity:1; transform:none; visibility:visible; } 48%,94%{ opacity:0; transform:translateY(-8px); visibility:hidden; } 100%{ opacity:1; transform:none; visibility:visible; } }
@keyframes ppcIntlMsgB{ 0%,44%{ opacity:0; transform:translateY(8px); visibility:hidden; } 50%,92%{ opacity:1; transform:none; visibility:visible; } 98%,100%{ opacity:0; transform:translateY(-8px); visibility:hidden; } }
.ppc-intl-band:hover .ppc-intl-slide, .ppc-intl.is-paused .ppc-intl-slide{ animation-play-state: paused; }
.ppc-intl-slide--lang{ text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:2px; cursor:pointer; }
.ppc-intl-slide--lang:hover .ppc-intl-title{ text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset:3px; }
.ppc-intl-dot--lang{ background: var(--pixel-blue); box-shadow:0 0 0 0 rgba(46,111,242,.7); animation-name: ppcIntlPulseB; }
@keyframes ppcIntlPulseB{ 0%{ box-shadow:0 0 0 0 rgba(46,111,242,.7); } 70%{ box-shadow:0 0 0 7px rgba(46,111,242,0); } 100%{ box-shadow:0 0 0 0 rgba(46,111,242,0); } }
.ppc-intl.has-hint .ppc-intl-slide--lang .ppc-intl-title{ background: var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ppc-intl-acts{ position:relative; z-index:3; display:flex; align-items:center; gap:8px; }
.ppc-lang--banner .ppc-lang-btn{ gap:6px; padding:9px 12px; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; font: 600 .78rem/1 var(--font-body); }
.ppc-lang--banner .ppc-lang-btn:hover, .ppc-lang--banner.is-open .ppc-lang-btn{ background: rgba(255,255,255,.16); color:#fff; }
.ppc-lang--banner .ppc-lang-menu{ top: calc(100% + 8px); right:0; }
.ppc-intl .ppc-lang--banner .ppc-lang-menu a{ color: var(--ink); }
.ppc-intl .ppc-lang--banner .ppc-lang-menu a.is-current{ color:#fff; }
@media (max-width: 480px){
  .ppc-intl-acts{ gap:6px; }
  .ppc-lang--banner .ppc-lang-btn{ padding:8px 9px; font-size:.72rem; }
  .ppc-lang--banner .ppc-lang-chev{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .ppc-intl.has-langs .ppc-intl-slide--ship, .ppc-intl.has-langs .ppc-intl-slide--lang{ animation:none; }
  .ppc-intl.has-langs .ppc-intl-slide--lang{ display:none; }
}

/* PDF tools hub: the full editor stands out */
.ppt-card--star{ position:relative; border-color: var(--pixel-magenta); box-shadow: 0 10px 30px -14px rgba(227,28,121,.45); }
.ppt-card--star::after{ content:"NEW"; position:absolute; top:12px; right:12px; padding:3px 7px; border-radius:999px; background: var(--brand-gradient); color:#fff; font: 700 .62rem/1 var(--font-mono); letter-spacing:.08em; }
.ppt-upsell{ text-align:center; margin: 14px auto 0; font-size:.95rem; } .ppt-upsell a{ font-weight:600; }