/* =========================================================================
   Bridge: WordPress + plugin markup -> the Print N Award design language.

   site.css owns the design. This file only covers what site.css has no
   reason to know about: WordPress editor output, and the two shortcodes'
   structures that the class injection in functions.php cannot reach.

   Keep it small. The whole point of the rebuild was to stop the stylesheet
   growing by accretion.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Interior page shell
   ---------------------------------------------------------------------- */
.page-body {
  padding-block: clamp(26px, 4vw, 44px) clamp(72px, 10vw, 130px);
}

.page-head {
  max-width: 760px;
  margin-bottom: clamp(26px, 4vw, 42px);
}

.page-head .eyebrow {
  margin-bottom: 14px;
}

/* Class form of the h2 scale, so a heading keeps the display face even when
   the element underneath is not an h2. Same reason .h1 exists in site.css. */
.h2 {
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.022em;
  font-size: clamp(1.95rem, 4.1vw, 3.05rem);
  margin: 0;
}

/* -------------------------------------------------------------------------
   2. Editor content. Everything the block editor can emit, given a home in
      the design so an ordinary page never looks like a default WordPress one.
   ---------------------------------------------------------------------- */
.prose {
  max-width: 74ch;
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.72;
}

.prose > * + * { margin-top: 1.1em; }

.prose h2,
.prose h3,
.prose h4 {
  color: var(--text-primary);
  margin-top: 1.9em;
  margin-bottom: .55em;
}
.prose h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.prose h3 { font-size: 1.24rem; }
.prose h4 { font-size: 1.06rem; }

.prose strong { color: var(--text-primary); font-weight: 600; }

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.prose a:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}

.prose ul,
.prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.4em; }
.prose ul > li::before {
  content: "";
  position: absolute;
  left: .25em;
  top: .66em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
}

.prose blockquote {
  margin-inline: 0;
  padding: 18px 24px;
  border-left: 2px solid var(--accent);
  background: var(--panel);
  color: var(--text-primary);
  font-size: 1.06rem;
}

.prose img,
.prose figure img {
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}
.prose figcaption {
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: 2.4em;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.prose th,
.prose td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.prose th {
  color: var(--accent);
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.prose code {
  font-size: .9em;
  padding: 2px 6px;
  background: var(--panel-hi);
  border: 1px solid var(--line);
  border-radius: 3px;
}

/* WordPress alignment and caption classes. */
.prose .alignleft  { float: left;  margin: 0 1.4em 1.1em 0; }
.prose .alignright { float: right; margin: 0 0 1.1em 1.4em; }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose .wp-caption-text { margin-top: 9px; font-size: 12.5px; color: var(--text-dim); }

@media (max-width: 640px) {
  .prose .alignleft,
  .prose .alignright { float: none; margin: 0; }
}

/* -------------------------------------------------------------------------
   3. Plugin shortcode output.

      functions.php injects .card, .grid, .price and friends onto the plugin's
      own class names, so the catalogue inherits the real card design. What is
      left here is the structure those classes do not describe.
   ---------------------------------------------------------------------- */

/* The catalogue's outer container has no design role; it just must not
   introduce its own box. */
.pna-catalog { margin-block: clamp(26px, 4vw, 42px); }

/* The plugin prints Product JSON-LD inside each card. A script element is
   already display:none, but flex and grid parents can still count it as a
   child, which puts a phantom gap in the card. */
.pna-product-card > script { display: none; }

/* The product name is an h3 inside .card-body, which site.css already styles.
   Only the stock states need saying. */
.pna-stock.pna-in-stock     { color: var(--crystal); }
.pna-stock.pna-low-stock    { color: var(--accent); }
.pna-stock.pna-out-of-stock { color: var(--text-dim); }

/* Prices on the live catalogue are the piece only. Engraving is quoted per
   job because case quantities differ by item, so the card must say so. */
.pna-price::after {
  content: "+ engraving";
  display: block;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Buttons carry .btn .btn-primary/.btn-ghost from the injection, but the
   plugin renders them as <button>, which does not inherit the anchor reset. */
.pna-card-actions .btn { flex: 1; }
button.pna-btn-add-cart,
button.pna-btn-quote {
  font-family: var(--body);
  cursor: pointer;
}
button.pna-btn-add-cart[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* -------------------------------------------------------------------------
   4. Forms the plugin renders (quote form, cart). Generic on purpose: these
      shortcodes emit markup this theme does not control, so style by element
      inside the shortcode's own container rather than by guessed class names.
   ---------------------------------------------------------------------- */
.pna-quote-form input,
.pna-quote-form select,
.pna-quote-form textarea,
.pna-cart input,
.pna-cart select {
  width: 100%;
  padding: 13px 15px;
  background: var(--canvas);
  color: var(--text-primary);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-family: var(--body);
  font-size: 15px;
}

.pna-quote-form input:focus,
.pna-quote-form select:focus,
.pna-quote-form textarea:focus,
.pna-cart input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.pna-quote-form label,
.pna-cart label {
  display: block;
  margin-bottom: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent);
}

.pna-quote-form textarea { min-height: 128px; resize: vertical; }

/* -------------------------------------------------------------------------
   5. Accessibility. A visible focus ring everywhere, including on the
      plugin's controls, which shipped without one.
   ---------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
   6. The admin bar is fixed, so the sticky nav needs to clear it.
   ---------------------------------------------------------------------- */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}

/* -------------------------------------------------------------------------
   7. WordPress navigation menus.

      The static design hard-coded a flat four-item nav. The real menu has 22
      items across two levels, so these rules add the submenu behaviour the
      design never needed. They live here rather than in site.css because the
      static build has no WordPress menu to render.
   ---------------------------------------------------------------------- */

/* --- desktop dropdowns --- */
.nav-links li { position: relative; }

.nav-links .sub-menu {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 60;
  min-width: 214px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 26px 54px -26px rgba(0, 0, 0, .95);
  /* Hidden but still focusable-in-order; opacity+visibility so it animates. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}

/* A gap between trigger and panel would drop the hover, so bridge it. */
.nav-links > li.menu-item-has-children::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}

/* The submenu opens on hover, and on keyboard focus of the parent link.

   That second selector is not optional. The panel is visibility:hidden when
   closed, and nothing inside a visibility:hidden element can take focus, so
   :focus-within alone can never fire: a keyboard user would tab straight past
   all ten sub-items. Revealing it from the parent's own focus is what lets
   them in; :focus-within then keeps it open while they move through it. */
.nav-links li:hover > .sub-menu,
.nav-links > li > a:focus + .sub-menu,
.nav-links > li > a:focus-visible + .sub-menu,
.nav-links li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-links .sub-menu li { display: block; }

.nav-links .sub-menu a {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
}
.nav-links .sub-menu a::after { display: none; }
.nav-links .sub-menu a:hover,
.nav-links .sub-menu a:focus-visible {
  color: var(--accent);
  background: var(--panel-hi);
}

/* Eight top-level items is a lot for this header, so tighten the spacing and
   never let a label break across lines. Without nowrap, "Signs & Banners"
   and "Stickers & Decals" split in two and the caret is left stranded on its
   own line. */
.nav-links { gap: 18px; }
.nav-links > li > a { white-space: nowrap; }

/* A caret so a parent item looks like it opens something. After the label,
   not before it, which is the convention and stops it detaching visually. */
.nav-links > li.menu-item-has-children > a::before {
  content: none;
}
.nav-links > li.menu-item-has-children > a {
  padding-right: 11px;
}
.nav-links > li.menu-item-has-children > a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  background: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;
  transform: translateY(-70%) rotate(45deg);
  opacity: .5;
  transition: opacity .3s var(--ease);
}
/* The design's underline sweep also uses ::after on these links, so it has to
   be re-homed onto the <li> for parent items or the caret would replace it. */
.nav-links > li.menu-item-has-children { padding-bottom: 4px; }
.nav-links > li.menu-item-has-children::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav-links > li.menu-item-has-children:hover::before { transform: scaleX(1); }
.nav-links > li.menu-item-has-children:hover > a::after { opacity: 1; }

/* --- mobile sheet --- */
.sheet-menu,
.sheet-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The sheet styles anchors directly, so these inherit the existing look. */
.sheet-menu > li > a {
  text-decoration: none;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-primary);
}

.sheet-menu .sub-menu a {
  text-decoration: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 11px 0 11px 18px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(58, 34, 40, .55);
}
.sheet-menu .sub-menu a::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--accent);
  transform: rotate(45deg);
  margin-right: 11px;
  flex: none;
  opacity: .55;
}
.sheet-menu .sub-menu a:hover { color: var(--accent); }
.sheet-menu .sub-menu a:hover::before { opacity: 1; }

.sheet-menu .current-menu-item > a,
.sheet-menu .current_page_item > a { color: var(--accent); }

.sheet-cta {
  margin-top: 14px;
  text-decoration: none;
  padding: 13px 0;
  font-weight: 600;
  font-size: 16px;
  color: var(--accent);
}

/* WordPress marks the active item; match the design's aria-current styling. */
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links .current-menu-ancestor > a { color: var(--text-primary); }
.nav-links > .current-menu-item > a::after,
.nav-links > .current_page_item > a::after,
.nav-links > .current-menu-ancestor > a::after { transform: scaleX(1); }

/* The nav collapses to the burger below this width.

   Measured, not guessed: brand 75 + links 688 + phone 112 + cart 114 + four
   22px gaps = 1077px of content. The .wrap gutters leave viewport-48 up to a
   1240 cap, so 1180px is the first width where it all fits on one line. The
   design's original 1000px breakpoint was set when the nav had four items;
   with eight it overflowed and wrapped between 1000 and 1180. */
@media (max-width: 1180px) {
  .nav-links { display: none; }
}

/* =========================================================================
   8. Legacy page content, restyled.

      The service pages keep their existing content, marked up with a
      vocabulary of pna-* classes whose 25KB stylesheet was pasted into the
      page body and has now been stripped. Without this they render unstyled.
      Nothing in the database changes.
   ====================================================================== */

/* --- let wide blocks escape the reading column ------------------------- */
.prose {
  display: grid;
  grid-template-columns: 1fr min(74ch, 100%) 1fr;
  max-width: none;
}
.prose > * { grid-column: 2; }

.prose > .pna-hero,
.prose > .pna-video-hero,
.prose > .pna-trust-grid,
.prose > .pna-cards-grid,
.prose > .pna-catalog,
.prose > .pna-quote-box,
.prose > .pna-corporate-callout,
.prose > .pna-compare,
.prose > .pna-section-divider,
.prose > .pna-related,
.prose > .pna-cart,
.prose > p.pna-related-links { grid-column: 1 / -1; }

.prose > .pna-hero-graphic,
.prose > .pna-card-graphic,
.prose > .pna-line,
.prose > .pna-diamond { display: none; }

/* --- page intro --------------------------------------------------------- */
.pna-hero,
.pna-video-hero {
  margin-block: 0 clamp(30px, 4vw, 48px);
  padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3vw, 38px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 14px;
}
.pna-hero h2,
.pna-video-hero-title {
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.022em;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--text-primary);
  margin: 0 0 12px;
}
.pna-hero p,
.pna-video-hero-sub,
.pna-lead {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
  max-width: 68ch;
}
.pna-video-hero-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.pna-video-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* --- section headings --------------------------------------------------- */
.pna-section { margin-top: clamp(38px, 5vw, 62px); }
.pna-section > h2 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  color: var(--text-primary);
  margin: 0;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.pna-section-divider {
  height: 1px;
  border: 0;
  margin-block: clamp(34px, 5vw, 58px);
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* --- three-up trust cards ----------------------------------------------- */
.pna-trust-grid,
.pna-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 15px;
  margin-block: clamp(26px, 3.4vw, 40px);
}

.pna-trust-card,
.pna-card,
.pna-cat-card {
  position: relative;
  padding: 22px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  transition: border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}
.pna-trust-card:hover,
.pna-card:hover,
.pna-cat-card:hover {
  border-color: var(--line-strong);
  background: var(--panel-hi);
  transform: translateY(-3px);
}

.pna-trust-card strong,
.pna-trust-card h3,
.pna-card h3,
.pna-cat-card h3 {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.26;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.pna-trust-card p,
.pna-card p,
.pna-cat-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text-secondary);
}

.pna-trust-icon {
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
  margin-bottom: 15px;
}
.pna-trust-icon img,
.pna-trust-icon svg { display: none; }

/* --- callouts and pricing ----------------------------------------------- */
.pna-corporate-callout,
.pna-cta-inline {
  padding: 22px 26px;
  margin-block: clamp(26px, 3.4vw, 40px);
  background: linear-gradient(135deg, rgba(107, 26, 37, .38), var(--panel));
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  color: var(--text-primary);
}
.pna-corporate-callout p:last-child,
.pna-cta-inline p:last-child { margin-bottom: 0; }

.pna-price-from {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 15px;
  background: var(--panel-hi);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.pna-price-amount {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.24rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pna-price-note {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --- feature lists and comparison tables -------------------------------- */
.pna-feature-list { list-style: none; padding: 0; margin: 18px 0; }
.pna-feature-list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 11px;
  color: var(--text-secondary);
}
.pna-feature-list li::before {
  content: "";
  position: absolute;
  left: .25em;
  top: .62em;
  width: 5px;
  height: 5px;
  background: var(--accent);
  transform: rotate(45deg);
}

.pna-compare { width: 100%; border-collapse: collapse; margin-block: 26px; font-size: 14.5px; }
.pna-compare th,
.pna-compare td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.pna-compare th {
  color: var(--accent);
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}

/* --- the quote box ------------------------------------------------------ */
.pna-quote-box {
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--canvas-2);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  margin-block: clamp(30px, 4vw, 52px);
}
.pna-quote-box > h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  color: var(--text-primary);
  margin: 0 0 10px;
}

/* --- forms -------------------------------------------------------------- */
.pna-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.pna-form-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.pna-form-field label,
.pna-form label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent);
}
.pna-form input,
.pna-form select,
.pna-form textarea,
.pna-form-field input,
.pna-form-field select,
.pna-form-field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--canvas);
  color: var(--text-primary);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-family: var(--body);
  font-size: 15px;
}
.pna-form textarea { min-height: 128px; resize: vertical; }

.pna-radio-group { display: flex; flex-wrap: wrap; gap: 9px; }
.pna-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
}
.pna-radio:hover { border-color: var(--accent); color: var(--accent); }

.pna-btn-submit,
.pna-btn-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: #140A0C;
  font-family: var(--body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 8px 30px -12px rgba(211, 160, 58, .7);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.pna-btn-submit:hover,
.pna-btn-checkout:hover { background: var(--accent-hover); transform: translateY(-2px); }
.pna-form-submit { margin-top: 18px; }

/* --- cart --------------------------------------------------------------- */
.pna-cart {
  padding: clamp(22px, 3vw, 32px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-block: 30px;
}
.pna-empty-cart { color: var(--text-dim); margin: 0; }
.pna-cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
}
.pna-cart-checkout { margin-top: 16px; }

/* --- related links ------------------------------------------------------ */
.pna-related { margin-top: clamp(38px, 5vw, 58px); }
p.pna-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: clamp(26px, 3.4vw, 36px);
  border-top: 1px solid var(--line);
}
p.pna-related-links a {
  display: inline-block;
  padding: 9px 16px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
p.pna-related-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--panel-hi);
}

/* --- FAQ inside page content -------------------------------------------- */
.pna-faq { margin-block: 26px; }
.pna-faq details { border-bottom: 1px solid var(--line); }
.pna-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 17px 34px 17px 0;
  font-weight: 600;
  color: var(--text-primary);
  position: relative;
}
.pna-faq summary::-webkit-details-marker { display: none; }
.pna-faq summary:hover { color: var(--accent); }
.pna-faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .35s var(--ease);
}
.pna-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }

@media (max-width: 720px) {
  .pna-form-row { grid-template-columns: 1fr; }
}

/* --- cart line items ----------------------------------------------------
   The [pna_cart] shortcode renders a row per item with quantity controls.
   These had no styles once the pasted stylesheet was stripped, and the cart
   is the one place on the site where broken layout costs an order. */
.pna-cart-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.pna-cart-item:last-of-type { border-bottom: 0; }

.pna-cart-item-name {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-primary);
}
.pna-cart-item-name small,
.pna-cart-item-name .pna-sku {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.pna-cart-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  background: var(--canvas);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px;
}
.pna-qty-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.pna-qty-btn:hover { background: var(--panel-hi); color: var(--accent); }
.pna-qty-input {
  width: 38px;
  padding: 4px 0;
  text-align: center;
  background: none;
  border: 0;
  color: var(--text-primary);
  font-family: var(--body);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.pna-qty-input::-webkit-outer-spin-button,
.pna-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pna-cart-item-price {
  flex: none;
  min-width: 76px;
  text-align: right;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.pna-cart-item-remove {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.pna-cart-item-remove:hover { color: var(--accent); border-color: var(--line-strong); }

.pna-cart > h2,
.pna-cart > h3 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--text-primary);
  margin: 0 0 14px;
}

@media (max-width: 560px) {
  .pna-cart-item { flex-wrap: wrap; }
  .pna-cart-item-name { flex-basis: 100%; }
}

/* =========================================================================
   9. Fixes found on the live site.
   ====================================================================== */

/* --- product images inside page content ---------------------------------
   The generic ".prose img { height:auto }" rule in section 2 has the same
   specificity as site.css's ".card-img img", and this sheet loads later, so
   it won. On an absolutely positioned image that has not lazy-loaded yet,
   height:auto computes to 0, so every catalogue rendered inside .prose
   (plaques, acrylic awards) showed empty 437px boxes. Restate the card rule
   at higher specificity. */
.prose .card-img img,
.prose .pna-product-img img {
  position: absolute;
  inset: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  object-fit: contain;
  border-radius: 0;
  max-width: none;
}

/* Reserve the box before the image loads so the grid does not reflow. */
.pna-product-img,
.card-img { background: var(--canvas-2); }

/* --- video hero ---------------------------------------------------------
   The markup is <video>, an empty <p>, then .pna-video-hero-content. Left
   alone the video rendered at its intrinsic 1200x1220 inside a 692px column.
   Treat it as a background: the video covers a fixed-ratio frame and the
   copy sits over it behind a scrim. */
.pna-video-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 16px;
  min-height: clamp(320px, 42vw, 520px);
  display: flex;
  align-items: flex-end;
}

.pna-video-hero > video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pna-video-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20, 10, 12, .93) 0%, rgba(20, 10, 12, .62) 45%, rgba(20, 10, 12, .28) 100%);
}

.pna-video-hero > p:empty { display: none; }

.pna-video-hero-content {
  position: relative;
  width: 100%;
  padding: clamp(26px, 3.4vw, 44px);
}
.pna-video-hero-content > p:empty { display: none; }

.pna-video-hero-title {
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.024em;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  color: var(--text-primary);
  margin: 0 0 12px;
  max-width: 20ch;
}
.pna-video-hero-sub {
  font-size: clamp(.98rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
  max-width: 56ch;
}

.pna-video-hero-ctas a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  color: var(--text-primary);
  background: rgba(35, 19, 23, .72);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.pna-video-hero-ctas a:first-child {
  background: var(--accent);
  border-color: transparent;
  color: #140A0C;
  box-shadow: 0 8px 30px -12px rgba(211, 160, 58, .7);
}
.pna-video-hero-ctas a:hover { transform: translateY(-2px); }
.pna-video-hero-ctas a:first-child:hover { background: var(--accent-hover); }
.pna-video-hero-ctas a:not(:first-child):hover { border-color: var(--accent); color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .pna-video-hero > video { display: none; }
  .pna-video-hero { background: var(--panel); }
}

@media (max-width: 640px) {
  .pna-video-hero { min-height: 300px; }
  .pna-video-hero-ctas a { flex: 1 1 100%; }
}

/* --- clear acrylic plaques on a light plate -----------------------------
   The CPQ family ("9 x 11 Clear Acrylic Plaq", green/red marble and solid
   black) is photographed on a white backdrop the CDN cannot lift: the
   product itself is transparent, so background removal that takes the white
   takes the plaque with it. Measured: e_make_transparent drops the white
   from 52% to 5% but leaves only the marble plate, losing the acrylic body.

   A light background is how you photograph clear acrylic, so present it that
   way on purpose. The plate is white and the image multiplies onto it, so
   the photo's own white backdrop disappears into the plate instead of
   showing a hard rectangle on a dark card.

   Everything else is untouched: glass and acrylic awards read 40-69% opaque,
   which means a proper cut-out silhouette where the brightness IS the
   product, and they stay on the dark plate. */
.pna-product-card[data-sku^="CPQ"] .pna-product-img,
.pna-product-card[data-sku^="CPQ"] .card-img {
  background: #fff;
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(20, 10, 12, .12);
}
.pna-product-card[data-sku^="CPQ"] .pna-product-img img {
  mix-blend-mode: multiply;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}