/* ============================================================
   PROBITY & ETHICS
   Every colour, font and size here comes from a custom property
   generated by PE_Theme::tokens() from the theme settings. Change
   a colour under Appearance → Theme settings and the whole site
   moves, bulk-buy pages included.

   Fallbacks are the bulk-buy palette, so the site still looks
   right if the tokens ever fail to print.
   ============================================================ */

:root{
  --pe-blue-900:#12296B; --pe-blue-800:#1B44A5; --pe-blue-600:#2563D9;
  --pe-blue:#1E5FD0; --pe-blue-dark:#164AA8; --pe-blue-soft:#EAF1FC; --pe-blue-line:#C7D8F2;
  --pe-ink:#0F1B33; --pe-ink-2:#54637C; --pe-ink-3:#8895A9;
  --pe-paper:#F5F8FC; --pe-surface:#FFFFFF; --pe-rule:#DDE5F1; --pe-rule-2:#EDF1F8;
  --pe-save:#0F7B5A; --pe-warn:#B4472B;
  --pe-on-dark:#B9CDEE;
  --pe-on-dark-soft:#C9D9F2;
  --pe-save-light:#8FD7B4;
  --pe-save-bg:#E6F4EC; --pe-save-line:#BFE3D0; --pe-save-ink:#0B5B43;
  --pe-warn-bg:#FDECE7; --pe-warn-line:#F3C9BC; --pe-warn-ink:#8A3320;
  --pe-font-display:Georgia,serif;
  --pe-font-body:system-ui,-apple-system,sans-serif;
  --pe-base:16px;
  --pe-h1:3.052rem; --pe-h2:2.441rem; --pe-h3:1.953rem;
  --pe-h4:1.563rem; --pe-h5:1.25rem; --pe-h6:1rem;
  --pe-logo-w:150px; --pe-logo-w-foot:120px;
  --pe-r:10px;
  --pe-shadow:0 1px 2px rgba(15,27,51,.05),0 8px 26px rgba(15,27,51,.07);
  --pe-wrap:1180px;

  /* The header runs wider than the page measure, because a bar of controls is
     not prose and does not want a readable line length. Change these two to
     narrow or widen it; the fallbacks in the rules keep working if they are
     ever removed. */
  --pe-header-wrap:1600px;
  --pe-header-pad:40px;
  --pe-header-h:76px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.pe-theme{
  margin:0;
  background:var(--pe-paper);
  color:var(--pe-ink);
  font-family:var(--pe-font-body);
  font-size:var(--pe-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.pe-theme img,.pe-theme svg{max-width:100%;height:auto}
/*
 * No colour here, deliberately. Headings inherit, which is the only way a
 * heading on a dark band comes out light: `.hero` and `.section.navy` set a
 * colour and expect their headings to take it, and an explicit colour on h1
 * beats inheritance at any specificity. Setting it here turned every heading
 * on every dark background dark blue. Body colour is the same token, so
 * inheriting costs nothing on light backgrounds.
 */
/*
 * :where() so this rule carries the specificity of a bare element, (0,0,1),
 * and ANY single class beats it.
 *
 * As `.pe-theme h2` it was (0,1,1) and outranked `.pe-cart__name` and
 * `.pe-basket__title` at (0,1,0) — so a heading given its own class still took
 * this clamp() and ran away with the size. That was fixed twice by raising the
 * specificity of the individual rule, which only postpones the next occurrence.
 * This fixes the whole class of it: a component that names its heading now wins
 * by default, which is the behaviour anyone would expect.
 */
:where(.pe-theme) h1,:where(.pe-theme) h2,:where(.pe-theme) h3,:where(.pe-theme) h4,:where(.pe-theme) h5,:where(.pe-theme) h6{
  margin:0 0 .5em;
  font-family:var(--pe-font-display);
  font-weight:500;
  line-height:1.18;
  letter-spacing:-.012em;
  color:inherit;
}
/* :where() again. As `.pe-theme h1` these were (0,1,1) and outranked every
   component that names its own heading — .pe-cart__name and .pe-basket__title
   at (0,1,0) — so a cart line title and a drawer title both took the page
   clamp. Fixing the font-family rule alone was not enough; the size lives in
   its own rule and had the same fault. */
:where(.pe-theme) h1{font-size:clamp(2rem,4.4vw,var(--pe-h1))}
:where(.pe-theme) h2{font-size:clamp(1.65rem,3.2vw,var(--pe-h2))}
:where(.pe-theme) h3{font-size:var(--pe-h3)}
:where(.pe-theme) h4{font-size:var(--pe-h4)}
:where(.pe-theme) h5{font-size:var(--pe-h5)}
:where(.pe-theme) h6{font-size:var(--pe-h6)}
/* :where(), for the same reason as the headings.
 *
 * As `.pe-theme ul` this was (0,1,1) and outranked `.pe-menu` at (0,1,0) — so
 * the header menu inherited a 17px bottom margin meant for prose, and inside a
 * centred flex row that pushed the whole menu UP relative to the account link
 * and basket beside it. That is the vertical misalignment.
 *
 * These are defaults for body copy. Anything that names itself with a class is
 * not body copy and should win without having to fight. */
:where(.pe-theme) p{margin:0 0 1.1em}
/*
 * :where() contributes nothing to specificity, so this lands at (0,0,1) — a
 * bare element selector. Any single class beats it.
 *
 * Written as `.pe-theme a` it was (0,1,1) and outranked `.pe-btn` at (0,1,0),
 * so every anchor styled as a button silently lost its colour to the link rule.
 * That is one bug with two faces: the header's bulk-buy button and the basket
 * dock, which became a link last round.
 */
:where(.pe-theme) a{color:var(--pe-blue);text-decoration-thickness:1px;text-underline-offset:2px}
:where(.pe-theme) a:hover{color:var(--pe-blue-dark)}
.pe-theme :focus-visible{outline:2px solid var(--pe-blue);outline-offset:3px;border-radius:4px}
:where(.pe-theme) ul,:where(.pe-theme) ol{margin:0 0 1.1em;padding-left:1.3em}
.pe-theme button{font:inherit}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.pe-skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;background:var(--pe-blue);color:#fff;border-radius:0 0 8px 0}
.pe-skip:focus{left:0}

.pe-wrap{max-width:var(--pe-wrap);margin:0 auto;padding:0 24px}
.pe-page{display:flex;flex-direction:column;min-height:100vh}
.pe-main{flex:1}

/* ---------- buttons ---------- */
.pe-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border:1px solid transparent;border-radius:8px;
  background:var(--pe-blue);color:#fff;
  font-size:15px;font-weight:700;line-height:1.2;
  text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.pe-btn:link,.pe-btn:visited{color:#fff}
.pe-btn:hover,.pe-btn:focus,.pe-btn:active{background:var(--pe-blue-dark);color:#fff}
.pe-btn--ghost:link,.pe-btn--ghost:visited{color:var(--pe-ink)}
.pe-btn--ghost:hover,.pe-btn--ghost:focus{color:var(--pe-ink)}
.pe-btn:disabled,.pe-btn[disabled]{background:#D5DCE8;color:#8B97A8;cursor:not-allowed}
.pe-btn--ghost{background:transparent;border-color:var(--pe-rule);color:var(--pe-ink)}
.pe-btn--ghost:hover{background:var(--pe-surface);border-color:var(--pe-blue-line);color:var(--pe-ink)}
.pe-btn--sm{padding:9px 16px;font-size:13.5px}
.pe-btn--lg{padding:16px 26px;font-size:16px}
.pe-btn--block{width:100%}

/* ---------- top bar ---------- */
.pe-topbar{background:var(--pe-blue-900);color:#D3E1F8;font-size:13px}
/* The topbar sits directly above the header, so it follows it out to the same
   width. Left at the page width it would be visibly narrower than the row
   beneath it, and the two edges are read as one line. */
.pe-topbar .pe-wrap{
  padding-top:9px;
  padding-bottom:9px;
  text-align:center;
  max-width:var(--pe-header-wrap, 1600px);
  padding-left:max(24px, var(--pe-header-pad, 40px));
  padding-right:max(24px, var(--pe-header-pad, 40px));
}
@media (max-width:1400px){
  .pe-topbar .pe-wrap{padding-left:24px;padding-right:24px}
}
.pe-topbar a{color:#fff}

/* ---------- header ---------- */
.pe-header{background:var(--pe-surface);border-bottom:1px solid var(--pe-rule)}
.pe-sticky-header .pe-header{position:sticky;top:0;z-index:90}
/* Vertical padding as well as a minimum height. Without it the row is exactly
   the header height and a logo the same size touches both edges — and any logo
   taller than the row is clipped rather than making the header taller. */
.pe-header__inner{
  display:flex;
  align-items:center;
  gap:20px;
  min-height:var(--pe-header-h);
  padding-top:10px;
  padding-bottom:10px;

  /* The header runs the full width; the page content does not.

     It carries .pe-wrap, which caps everything at 1180px so body text keeps a
     readable measure. That is right for prose and wrong for a bar of controls:
     the brand, the menu and the basket were being squeezed into the middle of
     the screen while the space either side sat empty, so adding a menu item
     squashed the row rather than using the room already there.

     Overriding max-width here rather than removing .pe-wrap from the markup
     keeps the class's horizontal padding, which is what stops the logo and the
     basket touching the screen edges. --pe-header-wrap is a variable so a
     narrower header is one value, not an edit to this rule. */
  max-width:var(--pe-header-wrap, 1600px);
  padding-left:max(24px, var(--pe-header-pad, 40px));
  padding-right:max(24px, var(--pe-header-pad, 40px));
}

/* Below the widest breakpoint there is no spare room to give back, so the
   header returns to the same gutters as the page and the two stay aligned. */
@media (max-width:1400px){
  .pe-header__inner{
    padding-left:24px;
    padding-right:24px;
  }
}
/* The brand keeps its own width and never squashes when the menu is long. */
.pe-header__brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}
.pe-brand{display:inline-flex;align-items:center;text-decoration:none}
/* Sized by HEIGHT, not width.
 *
 * It was `width:150px; height:auto; max-height:70px`, which sets the box to
 * 150px wide, lets the height follow the logo's own proportions — about 150px
 * for this near-square mark — and then clamps the box to 70px. The box ends up
 * 150x70 while the artwork wants 150x150, so it is squashed or cropped. That is
 * the logo being cut off at the top of the header.
 *
 * Driving the height and letting the width follow keeps the proportions, and
 * means the header controls the size rather than the artwork doing so. */
.pe-brand__logo{
  height:var(--pe-logo-h);
  width:auto;
  max-width:var(--pe-logo-w);
  object-fit:contain;
  display:block;
}
/* An SVG with no width/height attributes has no intrinsic size and would
   otherwise collapse to nothing inside an <img>. */
/* An SVG with no intrinsic size needs the height stating, or some browsers
   collapse it to nothing. */
.pe-brand__logo[src$=".svg"]{height:var(--pe-logo-h);min-height:1px}
.pe-brand__text{font-family:var(--pe-font-display);font-size:1.35rem;color:var(--pe-ink)}

/* The menu takes the middle and the actions sit right.
 *
 * `margin-left:auto` on the nav alone pushed the menu AND the actions to the
 * right as one block, leaving a wide empty gap after the logo and crowding
 * everything into the right half. Giving the nav the free space and the actions
 * their own auto margin spreads the row: brand left, menu centred in what is
 * left, actions right.
 *
 * Above 1020px only. Below that the nav becomes a fixed full-screen panel that
 * lays out as a column, and a centring flex row would fight it. */
@media (min-width:1021px){
  .pe-nav{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
  }
  .pe-header__actions{margin-left:auto;flex:0 0 auto}
}
.pe-menu{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.pe-menu li{position:relative}
.pe-menu a{
  display:block;padding:10px 13px;border-radius:6px;
  color:var(--pe-ink);font-size:15px;font-weight:600;text-decoration:none;
  transition:background .15s,color .15s;
}
.pe-menu a:hover{background:var(--pe-blue-soft);color:var(--pe-blue)}
.pe-menu a[aria-current="page"]{color:var(--pe-blue)}
.pe-menu .menu-item-has-children > a::after{
  content:"";display:inline-block;margin-left:7px;vertical-align:middle;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px);
}
.pe-menu .sub-menu{
  position:absolute;top:100%;left:0;z-index:80;
  min-width:270px;margin:0;padding:8px;list-style:none;
  background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);
  box-shadow:var(--pe-shadow);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s,transform .15s,visibility .15s;
}
.pe-menu li:hover > .sub-menu,
.pe-menu li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.pe-menu .sub-menu a{font-weight:500;font-size:14.5px;padding:9px 12px}

.pe-header__actions{display:flex;align-items:center;gap:8px}
.pe-nav__actions{display:none}
.pe-action{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 12px;border-radius:6px;
  color:var(--pe-ink);font-size:14.5px;font-weight:600;text-decoration:none;
  white-space:nowrap;
}
.pe-action:hover{background:var(--pe-blue-soft);color:var(--pe-blue)}
.pe-action__icon{width:19px;height:19px;flex:0 0 auto}
.pe-action--basket{gap:9px}
.pe-basket__total{font-variant-numeric:tabular-nums}
.pe-basket__count{
  position:absolute;top:-6px;right:-8px;
  min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:100px;background:var(--pe-blue);color:#fff;
  font-size:11px;font-weight:700;line-height:1;
}

.pe-burger{display:none;flex-direction:column;gap:5px;padding:10px;margin-left:auto;background:none;border:0;cursor:pointer}
.pe-burger__bar{display:block;width:22px;height:2px;background:var(--pe-ink);border-radius:2px;transition:transform .2s,opacity .2s}
.pe-burger[aria-expanded="true"] .pe-burger__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.pe-burger[aria-expanded="true"] .pe-burger__bar:nth-child(2){opacity:0}
.pe-burger[aria-expanded="true"] .pe-burger__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- page furniture ---------- */
/* Hidden by request: the page templates carry their own hero, so this second
   title band was a duplicate. Kept rather than deleted so the rules are here
   if it is ever wanted back. */
.pe-pagehead{display:none}
.pe-pagehead--visible{display:block;background:var(--pe-surface);border-bottom:1px solid var(--pe-rule);padding:44px 0}
.pe-pagehead__title{margin:0;font-size:clamp(1.9rem,4vw,var(--pe-h1))}
.pe-pagehead__meta{margin:0 0 8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--pe-ink-3)}
.pe-layout{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;padding:48px 0 72px}
.pe-content{flex:1 1 560px;min-width:0}
.pe-content--page{padding:44px 0 72px}
.pe-sidebar{flex:0 1 300px;min-width:0}
.pe-widget{background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);padding:20px;margin-bottom:20px}
.pe-widget__title{font-size:1.05rem;margin-bottom:.6em}

.pe-card-post{background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);overflow:hidden;margin-bottom:20px}
.pe-card-post__media img{display:block;width:100%}
.pe-card-post__body{padding:22px}
.pe-card-post__meta{margin:0 0 6px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--pe-ink-3)}
.pe-card-post__title{font-size:1.4rem;margin-bottom:.4em}
.pe-card-post__title a{color:inherit;text-decoration:none}
.pe-card-post__title a:hover{color:var(--pe-blue)}
.pe-card-post__excerpt{color:var(--pe-ink-2);margin-bottom:.8em}


/* ---------- footer ---------- */
.pe-footer{background:var(--pe-blue-900);color:#C2D5F4;margin-top:auto}
.pe-footer a{color:#E2EBFA;text-decoration:none}
.pe-footer a:hover{color:#fff;text-decoration:underline}
.pe-footer__logo{width:var(--pe-logo-w-foot);height:auto;max-height:80px}
.pe-footer__logo[src$=".svg"]{height:auto;min-height:1px}
.pe-footer__name{font-family:var(--pe-font-display);font-size:1.3rem;color:#fff}
.pe-footer__contact{margin:16px 0 0;padding:0;list-style:none;font-size:14.5px}
.pe-footer__contact li{margin-bottom:5px}
.pe-footer__heading{margin:0 0 14px;font-family:var(--pe-font-body);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8FAEE0}
.pe-footer__copy{margin:0}
.pe-footer__legal-menu{display:flex;flex-wrap:wrap;gap:20px;margin:0;padding:0;list-style:none}

/* ---------- shop ---------- */
.pe-shop{padding:44px 0 80px}
.pe-shop .woocommerce-message,
.pe-shop .woocommerce-error,
.pe-shop .woocommerce-info{
  margin:0 0 24px;padding:14px 18px;border-radius:var(--pe-r);
  background:var(--pe-blue-soft);border:1px solid var(--pe-blue-line);color:var(--pe-ink);
  list-style:none;
}
.pe-shop .woocommerce-error{background:#FDECE7;border-color:#F3C9BC;color:var(--pe-warn)}

.pe-cart__head{margin-bottom:28px}
.pe-cart__title{margin:0}
.pe-cart__count{margin:4px 0 0;color:var(--pe-ink-2);font-size:14.5px}
.pe-cart__layout{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.pe-cart__items{flex:1 1 520px;min-width:0}
.pe-cart__summary{flex:0 1 340px;width:340px;max-width:100%;min-width:0}

.pe-cart__list{margin:0;padding:0;list-style:none;background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);overflow:hidden}
/* Padding is 24px each side, not 20. The title starts 110px in — past the
   thumbnail and its gap — so an equal 20px on the right read as cramped
   against the card edge. The price also gets a column of its own width so the
   figures line up down the list instead of ragging. */
.pe-cart__item{display:flex;gap:18px;padding:20px 24px;border-bottom:1px solid var(--pe-rule-2)}
.pe-cart__item:last-child{border-bottom:0}
.pe-cart__media{flex:0 0 84px}
.pe-cart__media img{display:block;width:84px;height:84px;object-fit:cover;border-radius:8px}
.pe-cart__detail{flex:1;min-width:0}
/* An h2, so `.pe-theme h2` at (0,1,1) outranks a bare class at (0,1,0) and its
   clamp() ran away with the size. Matching the specificity fixes it at source
   rather than reaching for !important, which would only move the problem. */
.pe-cart__name{
  margin:0 0 4px;
  font-family:var(--pe-font-body);
  font-size:16px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:0;
}
.pe-cart__name a{color:inherit;text-decoration:none}
.pe-cart__name a:hover{color:var(--pe-blue)}
/* The chosen courses.

   The label used to float left, so "Choose your ten courses:" sat inline with
   the first course and the remaining nine wrapped around it — which is what
   made this look like a broken list rather than a list. Label above, one
   course per line, in a tinted panel so it reads as belonging to the item
   above it rather than as loose text on the card. */
.pe-cart__detail dl.variation{
  margin:10px 0 0;
  padding:12px 14px;
  border-radius:10px;
  background:var(--pe-paper);
  font-size:13px;
  color:var(--pe-ink-2);
}
.pe-cart__detail dl.variation dt{
  float:none;
  clear:none;
  margin:0 0 5px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--pe-ink-3);
}
.pe-cart__detail dl.variation dt + dd{margin-top:0}
.pe-cart__detail dl.variation dd{margin:0 0 10px}
.pe-cart__detail dl.variation dd:last-child{margin-bottom:0}
.pe-cart__detail dl.variation dd > p{margin:0}
.pe-cart__detail dl.variation ul,
.pe-cart__detail dl.variation ul.pecb-item-list{
  margin:0;
  padding:0;
  list-style:none;
  columns:2;
  column-gap:24px;
}
.pe-cart__detail dl.variation ul li{
  position:relative;
  padding:2px 0 2px 13px;
  line-height:1.5;
  break-inside:avoid;
}
.pe-cart__detail dl.variation ul li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.68em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--pe-blue-line);
}

@media (max-width:720px){
  /* Two columns of course names is unreadable on a phone. */
  .pe-cart__detail dl.variation ul,
  .pe-cart__detail dl.variation ul.pecb-item-list{columns:1}
}
.pe-cart__controls{display:flex;align-items:center;gap:14px;margin-top:12px}
.pe-cart__controls .quantity input{
  width:74px;padding:8px 10px;border:1px solid var(--pe-rule);border-radius:6px;
  background:var(--pe-surface);font-size:14.5px;color:var(--pe-ink);
}
.pe-cart__remove{font-size:13.5px;color:var(--pe-ink-3);text-decoration:underline;text-underline-offset:3px}
.pe-cart__remove:hover{color:var(--pe-warn)}
.pe-cart__price{flex:0 0 auto;min-width:88px;padding-left:16px;text-align:right;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}

.pe-cart__actions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin-top:20px}
.pe-cart__coupon{flex:1 1 300px}
.pe-cart__coupon-row{display:flex;gap:8px}
.pe-cart__update{margin-left:auto}

.pe-input{
  width:100%;padding:11px 13px;
  border:1px solid var(--pe-rule);border-radius:8px;background:var(--pe-surface);
  font-size:15px;line-height:1.4;color:var(--pe-ink);
}
.pe-input:focus{border-color:var(--pe-blue);outline:none;box-shadow:0 0 0 3px var(--pe-blue-soft)}
.pe-label{display:block;margin-bottom:6px;font-size:14px;font-weight:600}

.pe-cart__summary .cart_totals,
.pe-checkout__summary{
  background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);
  padding:22px;box-shadow:var(--pe-shadow);
}
.pe-cart__summary h2{font-size:1.15rem;margin-bottom:.7em}
.pe-cart__summary table{width:100%;border-collapse:collapse;font-size:14.5px}
.pe-cart__summary th{text-align:left;font-weight:500;color:var(--pe-ink-2);padding:7px 0}
.pe-cart__summary td{text-align:right;padding:7px 0;font-weight:600}
.pe-cart__summary .order-total th,.pe-cart__summary .order-total td{
  border-top:1px solid var(--pe-rule-2);padding-top:13px;font-size:16px
}
.pe-cart__summary .order-total td{font-family:var(--pe-font-display);font-size:1.5rem;font-weight:500}
.pe-cart__summary .checkout-button{width:100%;margin-top:16px;display:block;text-align:center}

.pe-assure-list{margin:20px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--pe-ink-2)}
.pe-assure-list li{display:flex;align-items:flex-start;gap:9px;margin-bottom:9px;line-height:1.45}
.pe-assure-list svg{flex:0 0 auto;width:15px;height:15px;margin-top:2px;color:var(--pe-save)}

.pe-cart-empty{max-width:520px;margin:0 auto;padding:56px 0 80px;text-align:center}
.pe-cart-empty__icon{color:var(--pe-blue-line)}
.pe-cart-empty__icon svg{width:64px;height:64px}
.pe-cart-empty__title{margin:18px 0 10px}
.pe-cart-empty__lede{color:var(--pe-ink-2);margin-bottom:1.4em}
.pe-cart-empty .pe-assure-list{display:inline-block;text-align:left;margin-top:32px}

/* ---------- checkout ---------- */
.pe-checkout__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:28px}
.pe-checkout__title{margin:0}
.pe-checkout__back{font-size:14.5px}
.pe-checkout__layout{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.pe-checkout__main{flex:1 1 520px;min-width:0}
.pe-checkout__aside{flex:0 1 380px;width:380px;max-width:100%;min-width:0}
.pe-checkout__panel{background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);padding:26px;margin-bottom:24px}
.pe-checkout__panel-title{font-size:1.2rem;margin-bottom:.9em}
.pe-checkout__form .form-row{margin:0 0 16px;display:flex;flex-direction:column}
.pe-checkout__form .form-row-first,.pe-checkout__form .form-row-last{width:100%}
.pe-checkout__form .required{color:var(--pe-warn);text-decoration:none}
.pe-checkout__form .woocommerce-input-wrapper{width:100%}
.pe-checkout__form select,.pe-checkout__form .select2-container .select2-selection--single{
  width:100%;min-height:44px;padding:9px 13px;
  border:1px solid var(--pe-rule);border-radius:8px;background:var(--pe-surface);font-size:15px;
}

/* Text inputs on the checkout.

   Only selects were styled, because those are the ones WooCommerce leaves
   visibly unstyled. The rest inherited whatever the browser does, which was
   tolerable while every field was a browser default and stops being so the
   moment one sits beside a styled control. */
.pe-checkout__form input[type="text"],
.pe-checkout__form input[type="email"],
.pe-checkout__form input[type="tel"],
.pe-checkout__form input[type="password"],
.pe-checkout__form textarea{
  width:100%;min-height:44px;padding:9px 13px;
  border:1px solid var(--pe-rule);border-radius:8px;
  background:var(--pe-surface);font-size:15px;font-family:inherit;color:var(--pe-ink);
}
.pe-checkout__form input:focus-visible,
.pe-checkout__form textarea:focus-visible,
.pe-checkout__form select:focus-visible{outline:2px solid var(--pe-blue);outline-offset:1px}

/* Creating an account.

   The checkbox and the password field beneath it are one decision, so they are
   drawn as one block rather than as two more rows in the address form. */
.pe-checkout__form .woocommerce-account-fields{
  margin:6px 0 18px;padding:16px 18px;
  background:var(--pe-paper);
  border:1px solid var(--pe-rule);border-radius:var(--pe-r);
}
.pe-checkout__form .woocommerce-account-fields .form-row{margin:0}
.pe-checkout__form .woocommerce-account-fields .create-account{margin-top:14px}
.pe-checkout__form .woocommerce-form__label-for-checkbox{
  display:flex;align-items:flex-start;gap:10px;margin:0;font-weight:600;cursor:pointer;
}
.pe-checkout__form .woocommerce-form__label-for-checkbox input{
  /* Not stretched to the full width by the input rule above. */
  width:auto;min-height:0;margin-top:3px;flex:0 0 auto;
}
.pe-checkout__form .woocommerce-account-fields .form-row label{
  display:block;margin:0 0 5px;font-size:14px;font-weight:600;
}

.pe-checkout__note{margin:16px 0 0;font-size:13.5px;color:var(--pe-ink-2)}
.pe-checkout__gate{padding:24px;background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r)}

.pe-review__items{margin:0 0 18px;padding:0;list-style:none}
.pe-review__item{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--pe-rule-2);font-size:14.5px}
.pe-review__name{min-width:0}
.pe-review__name dl.variation{margin:6px 0 0;font-size:13px;color:var(--pe-ink-2)}
.pe-review__name dl.variation dt{float:left;clear:left;margin:0 5px 0 0;font-weight:600}
.pe-review__name dl.variation dd{margin:0 0 3px}
.pe-review__name dl.variation ul{margin:0;padding-left:15px}
.pe-review__price{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums}
.pe-review__totals{margin:0 0 20px}
.pe-review__row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14.5px}
.pe-review__row dt{color:var(--pe-ink-2);margin:0}
.pe-review__row dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.pe-review__row--total{border-top:1px solid var(--pe-rule-2);margin-top:8px;padding-top:14px}
.pe-review__row--total dt{color:var(--pe-ink);font-weight:600;font-size:16px}
.pe-review__row--total dd{font-family:var(--pe-font-display);font-size:1.5rem;font-weight:500}
.pe-review__methods{margin:0 0 18px;padding:0;list-style:none}
.pe-review__methods li{padding:12px 0;border-bottom:1px solid var(--pe-rule-2)}
.pe-review__methods li:last-child{border-bottom:0}
.pe-review__methods label{font-weight:600;cursor:pointer}
.pe-review__methods .payment_box{margin:10px 0 0;padding:13px;border-radius:8px;background:var(--pe-paper);font-size:13.5px;color:var(--pe-ink-2)}
.pe-review__place{margin-top:6px}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .pe-burger{display:flex}
  .pe-header__actions{display:none}
  .pe-nav{
    position:fixed;inset:var(--pe-header-h) 0 0 0;z-index:85;
    margin:0;padding:24px;overflow-y:auto;
    background:var(--pe-surface);border-top:1px solid var(--pe-rule);
    transform:translateX(-100%);visibility:hidden;
    transition:transform .22s ease,visibility .22s;
  }
  .pe-nav.pe-nav--open{transform:none;visibility:visible}
  .pe-menu{flex-direction:column;align-items:stretch;gap:0}
  .pe-menu a{padding:13px 6px;border-bottom:1px solid var(--pe-rule-2);border-radius:0;font-size:16px}
  .pe-menu .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;margin:0 0 6px 12px;padding:0;border:0;box-shadow:none;background:none;
  }
  .pe-menu .sub-menu a{padding:11px 6px;font-size:15px;color:var(--pe-ink-2)}
  .pe-nav__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--pe-rule)}
  }
@media (max-width:700px){
    .pe-cart__item{flex-wrap:wrap}
  .pe-cart__price{width:100%;text-align:left}
  .pe-cart__update{margin-left:0;width:100%}
  .pe-checkout__head{flex-direction:column;align-items:flex-start}
}
@media (max-width:620px){
  .pe-wrap{padding:0 18px}
  .pe-pagehead{padding:32px 0}
  .pe-cart__media{flex:0 0 62px}
  .pe-cart__media img{width:62px;height:62px}
}
@media (prefers-reduced-motion:reduce){
  .pe-theme *{transition:none!important;animation:none!important}
}

/* ============================================================
   THE BASKET — docked bar that expands into a side drawer
   ============================================================ */
.pe-basket{position:fixed;inset:auto 0 0 auto;z-index:120;pointer-events:none}
.pe-basket > *{pointer-events:auto}

/* Docked */
.pe-basket__badge{
  position:absolute;top:-7px;right:-9px;
  min-width:19px;height:19px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--pe-blue);color:#fff;border-radius:100px;
  font-size:11px;font-weight:700;line-height:1;
}
.pe-basket[data-count="0"] .pe-basket__badge{display:none}

/* Expanded */
/* The slide is a CSS transition, not a script animation. Nothing that decides
   whether a control works should depend on an animation library having loaded. */
.pe-basket__panel{
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  position:fixed;top:0;right:0;bottom:0;z-index:123;
  width:min(420px,100vw);
  display:flex;flex-direction:column;
  background:var(--pe-surface);
  box-shadow:-8px 0 40px rgba(15,27,51,.24);
}
.pe-basket__panel[hidden]{display:none}
.pe-basket[data-open="true"] .pe-basket__panel{transform:none}
@media (prefers-reduced-motion:reduce){.pe-basket__panel{transition:none}}
.pe-basket__scrim{position:fixed;inset:0;z-index:122;background:rgba(15,27,51,.45);backdrop-filter:blur(2px);animation:pe-fade .24s ease}
.pe-basket__scrim[hidden]{display:none}
@keyframes pe-fade{from{opacity:0}to{opacity:1}}
html.pe-basket-open{overflow:hidden}

.pe-basket__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;
  background:var(--pe-blue-900);color:#fff;
}
/* Its own size, not the page-heading clamp. In a 420px drawer a heading that
   scales with the viewport is absurd. */
.pe-basket__title{
  margin:0;
  font-family:var(--pe-font-body);
  font-size:16px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.3;
  color:#fff;
}
.pe-basket__close{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;
  background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;cursor:pointer;
  transition:background .15s,transform .15s;
}
.pe-basket__close:hover{background:rgba(255,255,255,.24);transform:rotate(90deg)}
.pe-basket__close svg{width:18px;height:18px}

.pe-basket__body{position:relative;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0}
.pe-basket__loading{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.72)}
.pe-basket__loading[hidden]{display:none}
.pe-basket__spinner{width:28px;height:28px;border:3px solid var(--pe-blue-line);border-top-color:var(--pe-blue);border-radius:50%;animation:pe-spin .7s linear infinite}
@keyframes pe-spin{to{transform:rotate(360deg)}}

.pe-basket__items{margin:0;padding:0;list-style:none}
.pe-basket__item{display:flex;gap:14px;padding:16px 20px;border-bottom:1px solid var(--pe-rule-2)}
.pe-basket__thumb{flex:0 0 58px}
.pe-basket__thumb img{width:58px;height:58px;object-fit:cover;border-radius:8px;display:block;background:var(--pe-paper)}
.pe-basket__detail{flex:1;min-width:0}
.pe-basket__name{margin:0 0 4px;font-size:14.5px;font-weight:700;line-height:1.35}
.pe-basket__name a{color:inherit;text-decoration:none}
.pe-basket__name a:hover{color:var(--pe-blue)}
/* A bundle's selection is ten course names. Printed in full inside a 420px
   drawer it buries the price, the quantity and the remove link under a wall of
   text, and pushes the second item off the screen. Clamped to three lines here;
   the full list is on the basket page, which is where someone goes to check it. */
/* A bundle's selection: a small label with one course per line. Ten names run
   together as a sentence buried the price, the quantity and the remove link,
   and pushed the next item off the screen. */
.pe-basket__meta{margin:0 0 8px}
.pe-basket__group + .pe-basket__group{margin-top:8px}
.pe-basket__group-label{
  display:block;
  margin-bottom:4px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--pe-ink-3);
}
.pe-basket__lines{
  margin:0;
  padding:0;
  list-style:none;
  font-size:12.5px;
  line-height:1.5;
  color:var(--pe-ink-2);
}
.pe-basket__lines li{
  padding:1px 0 1px 12px;
  position:relative;
}
.pe-basket__lines li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--pe-blue-line);
}
.pe-basket__meta span{font-weight:600}
.pe-basket__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pe-basket__qty{display:inline-flex;align-items:center;border:1px solid var(--pe-rule);border-radius:6px;overflow:hidden}
.pe-basket__qty button{width:28px;height:28px;background:var(--pe-paper);border:0;cursor:pointer;font-size:15px;line-height:1;color:var(--pe-ink-2);transition:background .12s,color .12s}
.pe-basket__qty button:hover{background:var(--pe-blue-soft);color:var(--pe-blue)}
.pe-basket__qty span{min-width:30px;text-align:center;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pe-basket__qty-fixed{font-size:12.5px;color:var(--pe-ink-3)}
.pe-basket__remove{background:none;border:0;padding:0;color:var(--pe-ink-3);font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pe-basket__remove:hover{color:var(--pe-warn)}
/* A column of its own, so figures line up down the list and never sit hard
   against the panel edge. */
.pe-basket__price{
  flex:0 0 auto;
  min-width:74px;
  padding-left:12px;
  text-align:right;
  font-size:14.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.pe-basket__empty{padding:44px 24px;text-align:center;color:var(--pe-ink-2)}
.pe-basket__empty[hidden]{display:none}

.pe-basket__foot{padding:16px 20px 20px;border-top:1px solid var(--pe-rule);background:var(--pe-paper)}
.pe-basket__foot[hidden]{display:none}
.pe-basket__totals{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font-size:14.5px}
.pe-basket__totals strong{font-family:var(--pe-font-display);font-size:1.5rem;font-weight:500}
.pe-basket__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pe-basket__note{margin:12px 0 0;font-size:12px;color:var(--pe-ink-3);text-align:center;line-height:1.45}

/* Toasts */
.pe-toasts{position:fixed;left:50%;bottom:24px;z-index:130;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;pointer-events:none;width:min(420px,calc(100vw - 32px))}
.pe-toast{
  padding:13px 18px;border-radius:8px;
  background:var(--pe-ink);color:#fff;
  font-size:14px;line-height:1.4;
  box-shadow:0 8px 28px rgba(15,27,51,.26);
  opacity:0;transform:translateY(14px);
  transition:opacity .28s ease,transform .28s cubic-bezier(.34,1.3,.64,1);
}
.pe-toast.is-in{opacity:1;transform:translateY(0)}
.pe-toast--error{background:var(--pe-warn)}
.pe-toast--ok{background:var(--pe-save)}

/* A form waiting on the server */
form.is-loading{position:relative;pointer-events:none}
form.is-loading::after{
  content:"";position:absolute;inset:0;z-index:5;
  background:rgba(255,255,255,.55);border-radius:var(--pe-r);
}
form.is-loading .single_add_to_cart_button,
form.is-loading .pe-cta{position:relative;color:transparent !important}
form.is-loading .single_add_to_cart_button::after,
form.is-loading .pe-cta::after{
  content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:pe-spin .65s linear infinite;
}

/* Reveal-on-scroll: visible by default, so nothing is stranded invisible if
   the script never runs. */
[data-pe-reveal]{opacity:1}
.pe-in{opacity:1 !important}

@media (max-width:620px){
  .pe-basket__panel{width:100vw}
  .pe-basket__actions{grid-template-columns:1fr}
  .pe-toasts{bottom:88px}
}
@media (prefers-reduced-motion:reduce){
  .pe-basket__scrim{animation:none}
  .pe-toast{transition:none;opacity:1;transform:none}
}

/* ============================================================
   ACCOUNT
   ============================================================ */
.pe-account{padding:40px 0 80px}
.pe-account__head{margin-bottom:28px}
.pe-account__title{margin:0}
.pe-account__who{margin:4px 0 0;color:var(--pe-ink-2);font-size:14.5px}
.pe-account__layout{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start}
.pe-account__nav{flex:0 1 240px;width:240px;max-width:100%;min-width:0}
.pe-account__content{flex:1 1 520px;min-width:0}
.pe-account__nav-list{margin:0;padding:0;list-style:none;background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);overflow:hidden}
.pe-account__nav-item a{display:block;padding:12px 16px;border-bottom:1px solid var(--pe-rule-2);color:var(--pe-ink);text-decoration:none;font-size:14.5px;font-weight:600;transition:background .14s,color .14s,padding-left .14s}
.pe-account__nav-item:last-child a{border-bottom:0}
.pe-account__nav-item a:hover{background:var(--pe-blue-soft);color:var(--pe-blue);padding-left:20px}
.pe-account__nav-item.is-active a,
.pe-account__nav-item.woocommerce-MyAccount-navigation-link--is-active a{background:var(--pe-blue);color:#fff}
.pe-account__nav-item--customer-logout a{color:var(--pe-ink-2)}
.pe-account__section-title{margin:0 0 6px;font-size:1.45rem}
.pe-account__lede{margin:0 0 20px;color:var(--pe-ink-2)}
.pe-account__empty{padding:36px 24px;background:var(--pe-surface);border:1px dashed var(--pe-rule);border-radius:var(--pe-r);text-align:center;color:var(--pe-ink-2)}
.pe-account__empty p{margin-bottom:1em}

.pe-dash__welcome{margin:0 0 22px;font-size:16.5px;color:var(--pe-ink-2)}
.pe-dash__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px}
.pe-card{background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);padding:22px;box-shadow:var(--pe-shadow);transition:transform .18s,box-shadow .18s}
.pe-card:hover{transform:translateY(-2px);box-shadow:0 6px 26px rgba(15,27,51,.1)}
.pe-card__title{margin:0 0 12px;font-size:1.15rem}
.pe-card__count{margin:0 0 10px;font-family:var(--pe-font-display);font-size:1.7rem;color:var(--pe-blue)}
.pe-card__empty{margin:0;color:var(--pe-ink-2);font-size:14.5px}
.pe-card__list,.pe-card__dates,.pe-card__orders{margin:0 0 14px;padding:0;list-style:none;font-size:14.5px}
.pe-card__list li{padding:7px 0;border-bottom:1px solid var(--pe-rule-2)}
.pe-card__list li:last-child{border-bottom:0}
.pe-card__list a{color:inherit;text-decoration:none}
.pe-card__list a:hover{color:var(--pe-blue)}
.pe-card__more{margin:0 0 14px;font-size:13px;color:var(--pe-ink-3)}
.pe-card__dates li{padding:9px 0;border-bottom:1px solid var(--pe-rule-2)}
.pe-card__dates li:last-child{border-bottom:0}
.pe-card__dates strong{display:block;font-size:14.5px}
.pe-card__dates span{font-size:13px;color:var(--pe-ink-2)}
.pe-card__note{margin:0;font-size:12.5px;color:var(--pe-ink-3)}
.pe-card__orders li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--pe-rule-2)}
.pe-card__orders li:last-child{border-bottom:0}
.pe-card__orders a{color:inherit;text-decoration:none;flex:1;min-width:0}
.pe-card__order-no{font-weight:700}
.pe-card__order-date{display:block;font-size:12.5px;color:var(--pe-ink-3)}
.pe-card__order-total{font-weight:700;font-variant-numeric:tabular-nums}

.pe-badge{display:inline-block;padding:3px 10px;border-radius:100px;font-size:11.5px;font-weight:700;letter-spacing:.03em;background:var(--pe-blue-soft);color:var(--pe-blue)}
.pe-badge--completed{background:#E6F4EC;color:var(--pe-save)}
.pe-badge--processing{background:#FFF6E5;color:#996800}
.pe-badge--cancelled,.pe-badge--failed,.pe-badge--refunded{background:#FDECE7;color:var(--pe-warn)}

.pe-orders{margin:0;padding:0;list-style:none}
.pe-orders__item{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;padding:20px;margin-bottom:12px;background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);transition:border-color .16s,box-shadow .16s}
.pe-orders__item:hover{border-color:var(--pe-blue-line);box-shadow:var(--pe-shadow)}
.pe-orders__main{flex:1 1 300px;min-width:0}
.pe-orders__no{margin:0;font-size:16px;font-weight:700}
.pe-orders__no a{color:inherit;text-decoration:none}
.pe-orders__no a:hover{color:var(--pe-blue)}
.pe-orders__date{margin:2px 0 10px;font-size:13px;color:var(--pe-ink-3)}
.pe-orders__products{margin:0;padding:0;list-style:none;font-size:14px;color:var(--pe-ink-2)}
.pe-orders__products li{padding:2px 0}
.pe-orders__more{color:var(--pe-ink-3);font-style:italic}
.pe-orders__side{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:0 0 auto}
.pe-orders__total{margin:0;font-family:var(--pe-font-display);font-size:1.3rem}

.pe-addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}
.pe-addresses__card{padding:20px;background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r)}
.pe-addresses__title{margin:0 0 10px;font-size:1.05rem}
.pe-addresses__card address{margin:0 0 14px;font-style:normal;color:var(--pe-ink-2);font-size:14.5px;line-height:1.6}

.pe-form-panel{background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);padding:24px;max-width:660px}
.pe-form-panel__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:0 18px}
.pe-form-panel .form-row{margin:0 0 16px;display:block}
.pe-form-panel__fieldset{margin:8px 0 4px;padding:18px 0 0;border:0;border-top:1px solid var(--pe-rule-2)}
.pe-form-panel__fieldset legend{padding:0;font-size:1.05rem;font-family:var(--pe-font-display);font-weight:500}
.pe-form-panel__actions{margin:6px 0 0}
.pe-hint{display:block;margin-top:5px;font-size:12.5px;color:var(--pe-ink-3)}

.pe-table{width:100%;border-collapse:collapse;background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);overflow:hidden;font-size:14.5px}
.pe-table th{text-align:left;padding:12px 14px;background:var(--pe-paper);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--pe-ink-2)}
.pe-table td{padding:14px;border-top:1px solid var(--pe-rule-2)}

/* A cart line on its way out */
.pe-cart__item.is-removing{opacity:.4;pointer-events:none;transition:opacity .2s}

@media (max-width:820px){
  .pe-account__layout{flex-direction:column}
  .pe-account__nav{width:100%;flex:none}
  .pe-account__nav-list{display:flex;flex-wrap:wrap}
  .pe-account__nav-item{flex:1 1 auto}
  .pe-account__nav-item a{border-bottom:0;border-right:1px solid var(--pe-rule-2);text-align:center;padding:11px 14px}
  .pe-account__nav-item a:hover{padding-left:14px}
  .pe-orders__side{align-items:flex-start;flex-direction:row;flex-wrap:wrap;align-items:center}
  .pe-table thead{display:none}
  .pe-table td{display:block;border-top:0;padding:8px 14px}
  .pe-table tr{display:block;border-top:1px solid var(--pe-rule-2);padding:8px 0}
  .pe-table td::before{content:attr(data-title) ": ";font-weight:600;color:var(--pe-ink-2)}
}

/* ============================================================
   COURSE PAGES — simple and Face-to-Face
   ============================================================ */
.pe-product{padding:28px 0 80px}
.pe-product__crumbs{margin-bottom:22px;font-size:13px;color:var(--pe-ink-3)}
.pe-product__crumbs a{color:var(--pe-ink-2);text-decoration:none}
.pe-product__crumbs a:hover{color:var(--pe-blue)}
.pe-crumbs span{margin:0 7px;opacity:.5}

/* A 3:2 split rather than a fixed-width buy box: the media column was growing
   to fill whatever was left, so a small or placeholder image sat in a large
   empty frame beside a dense panel. */
.pe-product__top{display:flex;flex-wrap:wrap;gap:44px;align-items:flex-start;margin-bottom:56px}
.pe-product__media{flex:1 1 min(560px,100%);min-width:0;max-width:620px}
.pe-product__media img{
  border-radius:var(--pe-r);display:block;
  width:100%;height:auto;
  background:var(--pe-surface);
  border:1px solid var(--pe-rule);
}
/* A course with no image should not leave a tall empty box. */
.pe-product__media .woocommerce-product-gallery__image img{aspect-ratio:4/3;object-fit:cover}
.pe-product__media .woocommerce-product-gallery{margin:0}
.pe-product__media .flex-control-thumbs{display:flex;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.pe-product__media .flex-control-thumbs li{flex:0 0 72px}
.pe-product__media .flex-control-thumbs img{border:1px solid var(--pe-rule);border-radius:6px;cursor:pointer;opacity:.65;transition:opacity .15s,border-color .15s}
.pe-product__media .flex-control-thumbs img:hover,
.pe-product__media .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--pe-blue)}

.pe-product__buy{
  flex:1 1 380px;max-width:460px;min-width:0;
  background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);
  padding:26px;box-shadow:var(--pe-shadow);
}
.pe-product__cpd{
  display:inline-block;margin:0 0 14px;padding:5px 13px;
  background:var(--pe-blue-soft);color:var(--pe-blue);border-radius:100px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.pe-product__cpd span{font-size:13.5px}
.pe-product__title{margin:0 0 12px;font-size:clamp(1.6rem,3vw,2.1rem)}
.pe-product__lede{color:var(--pe-ink-2);font-size:15.5px;line-height:1.6}
.pe-product__lede p:last-child{margin-bottom:0}
.pe-product__price{margin:18px 0;padding:16px 0;border-top:1px solid var(--pe-rule-2);border-bottom:1px solid var(--pe-rule-2)}
.pe-product__price .woocommerce-Price-amount{font-family:var(--pe-font-display);font-size:2.1rem;font-weight:500;color:var(--pe-ink)}
.pe-product__price del{opacity:.5;font-size:.62em;margin-right:8px}
.pe-product__price ins{text-decoration:none}
.pe-product__note{margin:14px 0 0;font-size:12.5px;color:var(--pe-ink-3);text-align:center;line-height:1.45}

.pe-product__facts{margin:20px 0 0;padding:18px 0 0;list-style:none;border-top:1px solid var(--pe-rule-2);font-size:14px}
.pe-product__facts li{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;color:var(--pe-ink-2);line-height:1.45}
.pe-product__facts li:last-child{margin-bottom:0}
.pe-product__fact-icon{flex:0 0 auto;width:16px;height:16px;margin-top:2px;color:var(--pe-save)}
.pe-product__fact-icon svg{width:16px;height:16px;display:block}
.pe-product__facts strong{color:var(--pe-ink);font-weight:600}

/* WooCommerce's own add-to-cart, restyled in place */
.pe-product__buy form.cart{margin:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pe-product__buy form.cart .quantity input{
  width:82px;padding:12px 10px;
  border:1px solid var(--pe-rule);border-radius:8px;background:var(--pe-surface);
  font-size:15px;text-align:center;color:var(--pe-ink);
}
.pe-product__buy .single_add_to_cart_button{
  flex:1;min-width:180px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 24px;border:0;border-radius:8px;
  background:var(--pe-blue);color:#fff;
  font-size:15.5px;font-weight:700;cursor:pointer;
  transition:background .15s,transform .15s;
}
.pe-product__buy .single_add_to_cart_button:hover{background:var(--pe-blue-dark);transform:translateY(-1px)}
.pe-product__buy .single_add_to_cart_button:active{transform:translateY(0)}
.pe-product__buy .single_add_to_cart_button:disabled{background:#D5DCE8;color:#8B97A8;cursor:not-allowed;transform:none}
.pe-product__buy .stock.out-of-stock{margin:0;padding:11px 14px;border-radius:8px;background:#FDECE7;color:var(--pe-warn);font-size:14px;font-weight:600}
.pe-product__buy .stock.in-stock,
.pe-product__buy .stock.available-on-backorder{margin:0 0 12px;font-size:13.5px;color:var(--pe-ink-2)}

/* The plugin's Face-to-Face date picker, inside our buy box */
.pe-product__buy .pecb-f2f{margin:0}
.pe-product__buy .pecb-f2f__cpd{display:none} /* already shown above the title */
.pe-product__buy .pecb-f2f__buy{margin-top:16px}
.pe-product__buy .pecb-f2f__buy .single_add_to_cart_button{width:100%}

.pe-product__section-title{margin:0 0 16px;font-size:1.6rem}
.pe-product__about{max-width:78ch;margin-bottom:52px}
.pe-prose{color:var(--pe-ink-2);font-size:16px;line-height:1.7}
.pe-prose h2,.pe-prose h3,.pe-prose h4{color:var(--pe-ink);margin-top:1.5em}
.pe-prose ul,.pe-prose ol{padding-left:1.3em}
.pe-prose li{margin-bottom:.45em}
.pe-prose strong{color:var(--pe-ink);font-weight:700}
.pe-prose a{color:var(--pe-blue)}

.pe-product__promo{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  margin-bottom:52px;padding:30px 32px;border-radius:var(--pe-r);
  background:var(--pe-hero,linear-gradient(105deg,var(--pe-blue-900),var(--pe-blue-600)));
  color:#fff;
}
.pe-product__promo h2{margin:0 0 6px;color:#fff;font-size:1.5rem}
.pe-product__promo p{margin:0;color:#D3E1F8;max-width:56ch}
.pe-product__promo strong{color:#fff}
.pe-product__promo .pe-btn{background:#fff;color:var(--pe-blue-900);flex:0 0 auto}
.pe-product__promo .pe-btn:hover{background:var(--pe-blue-soft);color:var(--pe-blue-900)}

.pe-product__related .related > h2,
.pe-product__related .up-sells > h2{margin:0 0 20px;font-size:1.5rem}
.pe-product__related ul.products{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:18px;margin:0;padding:0;list-style:none;
}
.pe-product__related ul.products li.product{
  background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);
  padding:16px;text-align:left;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.pe-product__related ul.products li.product:hover{transform:translateY(-3px);box-shadow:var(--pe-shadow);border-color:var(--pe-blue-line)}
.pe-product__related ul.products li.product img{border-radius:8px;margin-bottom:12px;width:100%;height:auto;display:block}
.pe-product__related ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--pe-font-body);font-size:15px;font-weight:700;line-height:1.35;margin:0 0 8px;
}
.pe-product__related ul.products li.product a{text-decoration:none;color:inherit}
.pe-product__related ul.products li.product .price{display:block;margin-bottom:12px;font-weight:700;color:var(--pe-ink)}
.pe-product__related ul.products li.product .button{
  display:inline-block;padding:9px 16px;border-radius:6px;
  background:var(--pe-blue-soft);color:var(--pe-blue);
  font-size:13.5px;font-weight:700;transition:background .15s,color .15s;
}
.pe-product__related ul.products li.product .button:hover{background:var(--pe-blue);color:#fff}

@media (max-width:900px){
  .pe-product__top{gap:28px}
  .pe-product__buy{width:100%;flex:1 1 100%;order:-1}
  .pe-product__media{flex:1 1 100%}
}
@media (max-width:620px){
  .pe-product{padding-top:18px}
  .pe-product__buy{padding:20px}
  .pe-product__promo{padding:24px}
  .pe-product__buy form.cart{flex-direction:column;align-items:stretch}
  .pe-product__buy form.cart .quantity input{width:100%}
}

/* ============================================================
   WOOCOMMERCE REPLACEMENT STYLES

   WooCommerce's own three stylesheets are dequeued (see
   PE_Woo::dequeue_woocommerce_styles), because their button rules
   are written at a specificity a single theme class cannot beat.
   Everything they covered is covered here instead, in the theme's
   own palette. There is no purple anywhere in this file.
   ============================================================ */

/* ---- Buttons: every selector WooCommerce used to own ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.pe-theme .wp-element-button,
.pe-theme .wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;
  border:1px solid transparent;border-radius:8px;
  background:var(--pe-blue);color:#fff;
  font-family:var(--pe-font-body);font-size:15px;font-weight:700;line-height:1.2;
  text-decoration:none;text-shadow:none;cursor:pointer;
  transition:background .15s,color .15s,transform .15s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.pe-theme .wc-block-components-button:hover{
  background:var(--pe-blue-dark);color:#fff;transform:translateY(-1px);
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active{transform:translateY(0)}
.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled{
  background:#D5DCE8;color:#8B97A8;cursor:not-allowed;opacity:1;transform:none;
}
/* The quieter variant WooCommerce marks up without .alt */
.woocommerce .cart .button:not(.alt):not(.checkout-button),
.woocommerce a.button.wc-backward{
  background:transparent;border-color:var(--pe-rule);color:var(--pe-ink);
}
.woocommerce .cart .button:not(.alt):not(.checkout-button):hover,
.woocommerce a.button.wc-backward:hover{
  background:var(--pe-surface);border-color:var(--pe-blue-line);color:var(--pe-ink);
}

/* ---- Prices ---- */
.woocommerce .price,
.woocommerce .amount{color:var(--pe-ink);font-weight:700}
.woocommerce .price del,
.woocommerce del .amount{opacity:.5;font-weight:400}
.woocommerce .price ins,
.woocommerce ins{text-decoration:none;background:transparent}

/* ---- Notices ---- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info{
  margin:0 0 24px;padding:15px 18px;
  list-style:none;
  border:1px solid var(--pe-blue-line);border-radius:var(--pe-r);
  background:var(--pe-blue-soft);color:var(--pe-ink);
  font-size:14.5px;line-height:1.5;
}
.woocommerce-message{background:var(--pe-save-bg,#E6F4EC);border-color:var(--pe-save-line);color:var(--pe-save-ink)}
.woocommerce-error{background:var(--pe-warn-bg,#FDECE7);border-color:var(--pe-warn-line);color:var(--pe-warn-ink)}
.woocommerce-error li,.woocommerce-message li,.woocommerce-info li{list-style:none;margin:0}
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button{float:right;margin-left:14px;padding:8px 15px;font-size:13.5px}

/* ---- Forms ---- */
.woocommerce form .form-row{margin:0 0 16px;padding:0;display:block}
.woocommerce form .form-row label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--pe-ink)}
.woocommerce form .form-row .required{color:var(--pe-warn);border:0;text-decoration:none}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="number"],
.woocommerce-page textarea,
.woocommerce-page select{
  width:100%;padding:11px 13px;
  border:1px solid var(--pe-rule);border-radius:8px;background:var(--pe-surface);
  font-family:var(--pe-font-body);font-size:15px;line-height:1.4;color:var(--pe-ink);
  box-shadow:none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-page input:focus,
.woocommerce-page textarea:focus,
.woocommerce-page select:focus{
  border-color:var(--pe-blue);outline:none;box-shadow:0 0 0 3px var(--pe-blue-soft);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{border-color:var(--pe-warn)}
.woocommerce form .form-row.woocommerce-validated input.input-text{border-color:var(--pe-save)}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last{width:100%;float:none}
.woocommerce .select2-container--default .select2-selection--single{height:auto;min-height:44px}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.4;padding:0;color:var(--pe-ink)}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{top:50%;transform:translateY(-50%);right:10px}
.woocommerce .select2-dropdown{border-color:var(--pe-rule);border-radius:8px;overflow:hidden}
.woocommerce .select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--pe-blue)}

/* ---- Quantity ---- */
.woocommerce .quantity{display:inline-flex}
.woocommerce .quantity .qty{
  width:82px;padding:11px 8px;text-align:center;
  border:1px solid var(--pe-rule);border-radius:8px;background:var(--pe-surface);
  font-size:15px;color:var(--pe-ink);
}

/* ---- Stars, used by reviews ---- */
.woocommerce .star-rating{color:var(--pe-blue);font-size:1em;height:1.2em;line-height:1;overflow:hidden;position:relative;width:5.4em;font-family:star}
.woocommerce .star-rating::before{content:"sssss";opacity:.25;position:absolute;top:0;left:0}
.woocommerce .star-rating span{overflow:hidden;position:absolute;top:0;left:0;padding-top:1.5em}
.woocommerce .star-rating span::before{content:"SSSSS";position:absolute;top:0;left:0}

/* ---- Loops, where WooCommerce renders one ---- */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:18px;margin:0;padding:0;list-style:none}
.woocommerce ul.products li.product{margin:0;width:auto;float:none;text-align:left}
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale{
  background:var(--pe-save);color:#fff;border-radius:100px;
  padding:4px 12px;font-size:12px;font-weight:700;min-height:0;min-width:0;line-height:1.3;
}

/* ---- Tables WooCommerce still renders (order details, downloads) ---- */
.woocommerce table.shop_table{
  width:100%;border-collapse:collapse;
  border:1px solid var(--pe-rule);border-radius:var(--pe-r);
  background:var(--pe-surface);font-size:14.5px;
}
.woocommerce table.shop_table th{
  text-align:left;padding:12px 14px;background:var(--pe-paper);
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--pe-ink-2);font-weight:700;
}
.woocommerce table.shop_table td{padding:14px;border-top:1px solid var(--pe-rule-2)}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td{background:var(--pe-paper);font-weight:700}

/* ---- Order received ---- */
.woocommerce .woocommerce-order{padding:20px 0}
.woocommerce ul.woocommerce-order-overview{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:14px;
  margin:0 0 28px;padding:20px;list-style:none;
  background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);
}
.woocommerce ul.woocommerce-order-overview li{
  border:0;padding:0;margin:0;
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--pe-ink-2);
}
.woocommerce ul.woocommerce-order-overview li strong{
  display:block;margin-top:5px;
  font-family:var(--pe-font-display);font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--pe-ink);
}

/* ---- Password / login forms ---- */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password{
  max-width:460px;padding:26px;
  border:1px solid var(--pe-rule);border-radius:var(--pe-r);background:var(--pe-surface);
}

/* ---- Anything still asking for the old accent ---- */
.pe-theme .woocommerce-info::before,
.pe-theme .woocommerce-message::before,
.pe-theme .woocommerce-error::before{display:none}

/* Breadcrumbs */
.woocommerce .woocommerce-breadcrumb{margin:0;padding:0;font-size:13px;color:var(--pe-ink-3)}
.woocommerce .woocommerce-breadcrumb a{color:var(--pe-ink-2);text-decoration:none}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--pe-blue)}

/* Server-rendered drawer rows carry WooCommerce's own variation markup.

   The dock selectors that shared this rule are gone with the dock itself; they
   were removed by hand rather than by pattern because they sat in the same
   selector list as a live one, and a pattern would have taken that too. */
.pe-basket__detail dl.variation{margin:4px 0 6px;font-size:12.5px;color:var(--pe-ink-2)}
.pe-basket__detail dl.variation dt{float:left;clear:left;margin:0 4px 0 0;font-weight:600}
.pe-basket__detail dl.variation dd{margin:0 0 3px}
.pe-basket__detail dl.variation ul{margin:0;padding-left:15px}

/* A menu item styled as a button. Specificity kept above the generic link rule
   deliberately — see the note on :where() at the top of this file. */
.pe-menu a.pe-menu__btn,
.pe-menu a.pe-menu__btn:link,
.pe-menu a.pe-menu__btn:visited{
  margin-left:6px;padding:10px 18px;border-radius:8px;
  background:var(--pe-blue);color:#fff;
}
.pe-menu a.pe-menu__btn:hover,
.pe-menu a.pe-menu__btn:focus{background:var(--pe-blue-dark);color:#fff}
.pe-menu a.pe-menu__btn[aria-current="page"]{background:var(--pe-blue-dark);color:#fff}

/* ============================================================
   REGULATOR PAGES
   One template, nine pages. Sections alternate paper and
   surface so the page has rhythm without extra markup.
   ============================================================ */
.pe-eyebrow{
  margin:0 0 12px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#8FAEE0;
}
.pe-eyebrow--dark{color:var(--pe-blue)}

.pe-sec-head{max-width:70ch;margin:0 0 38px}
.pe-sec-head__title{margin:0 0 12px;font-size:clamp(1.7rem,3.4vw,2.4rem)}
.pe-sec-head__lede{margin:0;color:var(--pe-ink-2);font-size:16.5px;line-height:1.65}
.pe-sec-head--light .pe-sec-head__title{color:#fff}
.pe-sec-head--light .pe-sec-head__lede{color:#C2D5F4}

/* Hero */
.pe-reg-hero{background:var(--pe-hero,linear-gradient(105deg,var(--pe-blue-900),var(--pe-blue-600)));color:#fff;padding:70px 0 76px}
.pe-reg-hero__inner{max-width:900px}
.pe-reg-hero__title{margin:0 0 18px;color:#fff;font-size:clamp(2rem,5vw,3.1rem);line-height:1.12}
.pe-reg-hero__lede{margin:0 0 28px;color:#D3E1F8;font-size:clamp(1rem,2vw,1.2rem);line-height:1.6;max-width:62ch}
.pe-reg-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.pe-btn--onDark,.pe-btn--onDark:link,.pe-btn--onDark:visited{background:#fff;color:var(--pe-blue-900)}
.pe-btn--onDark:hover,.pe-btn--onDark:focus{background:var(--pe-blue-soft);color:var(--pe-blue-900)}
.pe-btn--ghostOnDark,.pe-btn--ghostOnDark:link,.pe-btn--ghostOnDark:visited{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.pe-btn--ghostOnDark:hover,.pe-btn--ghostOnDark:focus{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.pe-reg-hero__points{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none;font-size:14.5px;color:#D3E1F8}
.pe-reg-hero__points li{display:flex;align-items:center;gap:9px}
.pe-reg-hero__points svg{width:15px;height:15px;color:var(--pe-save-light)}

/* Panels */
.pe-reg-panels{padding:72px 0;background:var(--pe-paper)}
.pe-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px}
.pe-panel{
  background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);
  padding:26px;transition:transform .18s,box-shadow .18s,border-color .18s;
}
.pe-panel:hover{transform:translateY(-3px);box-shadow:var(--pe-shadow);border-color:var(--pe-blue-line)}
.pe-panel__head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.pe-panel__icon{flex:0 0 auto;color:var(--pe-blue)}
.pe-panel__icon svg{width:26px;height:26px}
.pe-panel__title{margin:0;font-size:1.15rem;line-height:1.3}
.pe-panel__lede{margin:0 0 16px;color:var(--pe-ink-2);font-size:14.5px;line-height:1.6}
.pe-panel__courses{margin:0;padding:0;list-style:none;border-top:1px solid var(--pe-rule-2);padding-top:14px}
.pe-panel__courses li{padding:6px 0;font-size:14.5px}
.pe-panel__courses a{color:var(--pe-ink);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.pe-panel__courses a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--pe-blue);flex:0 0 auto}
.pe-panel__courses a:hover{color:var(--pe-blue)}
.pe-panel__courses span{color:var(--pe-ink-2)}

/* Course grid */
.pe-reg-courses{padding:72px 0;background:var(--pe-surface)}
.pe-course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:16px;margin:0;padding:0;list-style:none}
.pe-course{display:flex}
.pe-course__link{
  display:flex;flex-direction:column;gap:9px;width:100%;
  padding:20px;border:1px solid var(--pe-rule);border-radius:var(--pe-r);
  background:var(--pe-surface);text-decoration:none;color:inherit;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.pe-course__link:hover{transform:translateY(-3px);box-shadow:var(--pe-shadow);border-color:var(--pe-blue-line);color:inherit}
.pe-course__cpd{
  align-self:flex-start;padding:3px 10px;border-radius:100px;
  background:var(--pe-blue-soft);color:var(--pe-blue);
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.pe-course__title{margin:0;font-family:var(--pe-font-body);font-size:15px;font-weight:700;line-height:1.4}
.pe-course__price{margin-top:auto;font-weight:700;color:var(--pe-ink)}

/* Split section */
.pe-reg-support{padding:72px 0;background:var(--pe-paper)}
.pe-split{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.pe-split__copy{flex:1 1 440px;min-width:0}
.pe-split__media{flex:1 1 340px;min-width:0}
.pe-split__media img{width:100%;height:auto;border-radius:var(--pe-r);display:block}
.pe-split--solo .pe-split__copy{flex:1 1 100%;max-width:74ch}
.pe-split .pe-sec-head__title{margin-bottom:16px}

/* Feature grid */
.pe-reg-why{padding:72px 0;background:var(--pe-surface)}
.pe-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:22px;margin:0;padding:0;list-style:none}
.pe-feature{padding:24px;background:var(--pe-paper);border-radius:var(--pe-r)}
.pe-feature__icon{display:inline-flex;color:var(--pe-blue);margin-bottom:12px}
.pe-feature__icon svg{width:28px;height:28px}
.pe-feature__title{margin:0 0 8px;font-size:1.1rem}
.pe-feature__body{margin:0;color:var(--pe-ink-2);font-size:14.5px;line-height:1.6}

/* Steps */
.pe-reg-how{padding:72px 0;background:var(--pe-paper)}
.pe-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:22px;margin:0;padding:0;list-style:none;counter-reset:pe-step}
.pe-step{position:relative;padding:26px 22px 22px;background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r)}
.pe-step__no{
  position:absolute;top:-15px;left:22px;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--pe-blue);color:#fff;
  font-family:var(--pe-font-display);font-size:1rem;font-weight:600;
}
.pe-step__title{margin:8px 0 8px;font-size:1.05rem}
.pe-step__body{margin:0;color:var(--pe-ink-2);font-size:14.5px;line-height:1.6}

/* Author */
.pe-reg-author{padding:72px 0;background:var(--pe-surface)}
.pe-author{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.pe-author__photo{flex:0 1 240px;min-width:0}
.pe-author__photo img{width:100%;height:auto;border-radius:var(--pe-r);display:block}
.pe-author__copy{flex:1 1 420px;min-width:0}
.pe-author__name{margin:0;font-family:var(--pe-font-display);font-size:1.3rem}
.pe-author__role{margin:2px 0 16px;color:var(--pe-ink-3);font-size:14px}

/* Insight, on the dark ground */
.pe-reg-insight{padding:72px 0;background:var(--pe-blue-900);color:#fff}
.pe-defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:20px;margin:0}
.pe-def{padding:22px;background:rgba(255,255,255,.07);border-radius:var(--pe-r)}
.pe-def dt{margin:0 0 8px;font-family:var(--pe-font-display);font-size:1.2rem;color:#fff}
.pe-def dd{margin:0;color:#C2D5F4;font-size:14.5px;line-height:1.6}

/* FAQs */
.pe-reg-faq{padding:72px 0;background:var(--pe-paper)}
.pe-faqs{max-width:78ch}
.pe-faq{background:var(--pe-surface);border:1px solid var(--pe-rule);border-radius:var(--pe-r);margin-bottom:10px;overflow:hidden}
.pe-faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 20px;cursor:pointer;list-style:none;
  font-size:16px;font-weight:700;color:var(--pe-ink);
}
.pe-faq__q::-webkit-details-marker{display:none}
.pe-faq__q:hover{color:var(--pe-blue)}
.pe-faq__mark{position:relative;flex:0 0 auto;width:14px;height:14px}
.pe-faq__mark::before,.pe-faq__mark::after{
  content:"";position:absolute;background:currentColor;transition:transform .2s;
}
.pe-faq__mark::before{top:6px;left:0;width:14px;height:2px}
.pe-faq__mark::after{top:0;left:6px;width:2px;height:14px}
.pe-faq[open] .pe-faq__mark::after{transform:scaleY(0)}
.pe-faq__a{padding:0 20px 20px;color:var(--pe-ink-2);font-size:15px;line-height:1.7}

/* Guidance links */
.pe-reg-guidance{padding:72px 0;background:var(--pe-surface)}
.pe-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:14px;margin:0;padding:0;list-style:none}
.pe-links a{
  display:flex;align-items:center;gap:12px;
  padding:18px 20px;border:1px solid var(--pe-rule);border-radius:var(--pe-r);
  background:var(--pe-surface);color:var(--pe-ink);text-decoration:none;
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.pe-links a:hover{border-color:var(--pe-blue-line);transform:translateY(-2px);box-shadow:var(--pe-shadow);color:var(--pe-ink)}
.pe-links__label{flex:1;font-weight:700;font-size:15px}
.pe-links__note{display:block;font-weight:400;font-size:13px;color:var(--pe-ink-3);margin-top:3px}
.pe-links__ext{flex:0 0 auto;color:var(--pe-blue)}
.pe-links__ext svg{width:15px;height:15px;display:block}

/* Other regulators */
.pe-reg-others{padding:72px 0;background:var(--pe-paper)}
.pe-regs{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.pe-regs a{
  display:inline-block;padding:11px 18px;border-radius:100px;
  background:var(--pe-surface);border:1px solid var(--pe-rule);
  color:var(--pe-ink);text-decoration:none;font-size:14.5px;font-weight:600;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.pe-regs a:hover{background:var(--pe-blue);border-color:var(--pe-blue);color:#fff;transform:translateY(-2px)}

/* Closing CTA */
.pe-reg-cta{padding:0 0 76px;background:var(--pe-paper)}
.pe-cta-band{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;
  padding:44px;border-radius:var(--pe-r);
  background:var(--pe-hero,linear-gradient(105deg,var(--pe-blue-900),var(--pe-blue-600)));
  color:#fff;
}
.pe-cta-band__title{margin:0 0 8px;color:#fff;font-size:clamp(1.5rem,3vw,2rem)}
.pe-cta-band__body{margin:0;color:#D3E1F8;max-width:56ch}
.pe-cta-band__actions{display:flex;flex-wrap:wrap;gap:12px}
.pe-reg__extra{padding:0 0 60px}

@media (max-width:620px){
  .pe-reg-hero{padding:48px 0 52px}
  .pe-reg-panels,.pe-reg-courses,.pe-reg-support,.pe-reg-why,
  .pe-reg-how,.pe-reg-author,.pe-reg-insight,.pe-reg-faq,
  .pe-reg-guidance,.pe-reg-others{padding:48px 0}
  .pe-cta-band{padding:28px}
  .pe-reg-hero__actions .pe-btn{flex:1 1 100%}
}

/* Add-to-basket controls on the regulator pages, mid-request. */
.pe-regulator .add.is-loading,
.pe-regulator .ci-add.is-loading{opacity:.6;cursor:progress}
.pe-regulator .add[data-in="1"]{background:var(--pe-save);border-color:var(--pe-save);color:#fff}
.pe-regulator .ci-add[data-in="1"] .ci-plus{color:var(--pe-save)}
/* Course titles are no longer links, so they must not look like one. */
.pe-regulator .card-title__text,
.pe-regulator .ci-name{color:inherit;text-decoration:none;cursor:default}

/* Basket control in the header. A real link to the basket page, upgraded to a
   drawer opener by script, so it works before and without JavaScript. */
.pe-theme .pe-action--basket{position:relative}
.pe-theme .pe-action__count{
  position:absolute;top:-6px;right:-10px;
  min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:100px;
  background:var(--pe-blue);color:#fff;
  font-size:11px;font-weight:700;line-height:1;
}
.pe-theme .pe-action__count[hidden]{display:none}
@media (max-width:600px){
  .pe-theme .pe-action--basket .pe-action__label{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
}

/* ---- Basket page: spacing and title scale ----
   The reassurance list sat flush against the totals box with nothing between
   them, which read as one broken panel rather than two things. */
.pe-theme .pe-cart__summary > * + *{margin-top:20px}
.pe-theme .pe-cart__summary .pe-assure-list{margin-top:24px}

/* Cart lines: compact enough that five courses fit on a screen.

   The horizontal padding must be repeated here. This rule is (0,2,0) and the
   base .pe-cart__item is (0,1,0), so writing `padding:18px 0` silently reset
   the sides to zero and put the prices hard against the card border — which is
   exactly the bug that was reported three times, caused by this line. */
.pe-theme .pe-cart__item{padding:18px 24px}
.pe-theme .pe-cart__media{width:64px;height:64px;flex:0 0 64px}
.pe-theme .pe-cart__media img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.pe-theme .pe-cart__price{font-size:15px;font-weight:700;white-space:nowrap}
.pe-theme .pe-cart__controls{font-size:13.5px;color:var(--pe-ink-3)}

@media (min-width:900px){
  .pe-cart__name{font-size:17px}
}

/* ============================================================
   SHOP ON A PHONE
   Basket, checkout, account and the slide-out, at widths where
   a two-column layout stops being readable.
   ============================================================ */

/* ---- Tables ----
   WooCommerce ships real tables for totals and orders. Their default padding
   is inconsistent between header and body cells, which is what made the
   basket totals look cramped on one side and loose on the other. */
.pe-theme .shop_table,
.pe-theme .woocommerce table.shop_table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--pe-rule);
  border-radius:var(--pe-r);
  overflow:hidden;
}
.pe-theme .shop_table th,
.pe-theme .shop_table td{
  padding:14px 16px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--pe-rule-2);
}
.pe-theme .shop_table tr:last-child th,
.pe-theme .shop_table tr:last-child td{border-bottom:0}
.pe-theme .shop_table th{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pe-ink-3);
  background:var(--pe-paper);
  white-space:nowrap;
}
.pe-theme .shop_table td{font-size:15px}
.pe-theme .shop_table td:last-child,
.pe-theme .shop_table th:last-child{text-align:right}
.pe-theme .shop_table .order-total td,
.pe-theme .shop_table .order-total th{
  font-size:17px;
  font-weight:700;
  color:var(--pe-ink);
  background:var(--pe-paper);
}

@media (max-width:640px){
  /* A four-column order table cannot fit. Each row becomes a block with its
     own label, which reads far better than a sideways scroll. */
  .pe-theme .shop_table th,
  .pe-theme .shop_table td{padding:12px 14px}
  .pe-theme .shop_table--responsive thead{display:none}
  .pe-theme .shop_table--responsive tr{display:block;border-bottom:1px solid var(--pe-rule-2)}
  .pe-theme .shop_table--responsive td{
    display:flex;justify-content:space-between;gap:16px;
    border-bottom:0;padding:8px 14px;
  }
  .pe-theme .shop_table--responsive td::before{
    content:attr(data-title);
    font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--pe-ink-3);
  }
}

/* ---- Basket page ---- */
@media (max-width:900px){
  .pe-theme .pe-cart__layout{display:block}
  .pe-theme .pe-cart__summary{margin-top:28px;position:static}
}
@media (max-width:600px){
  .pe-theme .pe-cart__item{
    display:grid;
    grid-template-columns:56px 1fr;
    grid-template-areas:"media detail" "media controls";
    gap:4px 14px;
    /* Sides repeated deliberately. A bare `padding:16px 0` here would reset
       the horizontal padding to zero exactly as the desktop rule did. */
    padding:16px 18px;
  }
  .pe-theme .pe-cart__media{grid-area:media;width:56px;height:56px;flex:none}
  .pe-theme .pe-cart__detail{grid-area:detail;min-width:0}
  .pe-theme .pe-cart__controls{grid-area:controls}
  .pe-cart__name{font-size:15px}
  /* The price belongs beside the title, not stranded in its own column. */
  .pe-theme .pe-cart__price{grid-area:detail;justify-self:end;align-self:start;font-size:15px}
  .pe-theme .pe-cart__actions{flex-direction:column;align-items:stretch;gap:10px}
  .pe-theme .pe-cart__actions .pe-btn{width:100%}
  .pe-theme .pe-cart__coupon-row{flex-direction:column;gap:10px}
  .pe-theme .pe-cart__coupon-row input{width:100%}
}

/* ---- Checkout ---- */
@media (max-width:900px){
  .pe-theme .pe-checkout__layout{display:block}
  /* The order summary belongs above the payment step on a phone: nobody should
     have to scroll past a form to find out what they are paying. */
  .pe-theme .pe-checkout__aside{margin-bottom:28px}
}
@media (max-width:600px){
  .pe-theme .form-row-first,
  .pe-theme .form-row-last{width:100%;float:none;margin-right:0}
  .pe-theme .pe-checkout__panel{padding:18px 16px}
  .pe-theme #payment .place-order .button{width:100%}
  .pe-theme .woocommerce-billing-fields .form-row{margin-bottom:14px}
}

/* ---- My account ---- */
@media (max-width:820px){
  .pe-theme .pe-account__layout{display:block}
  /* The tabs become a scrolling row rather than a column that pushes the
     content off the first screen. */
  .pe-theme .pe-account__nav-list{
    display:flex;gap:8px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 0 22px;padding:0 0 4px;
  }
  .pe-theme .pe-account__nav-list::-webkit-scrollbar{display:none}
  .pe-theme .pe-account__nav-list li{flex:0 0 auto;margin:0}
  .pe-theme .pe-account__nav-list a{white-space:nowrap;padding:9px 14px;border-radius:100px}
}
@media (max-width:600px){
  .pe-theme .pe-account__content{padding:18px 16px}
  .pe-theme .woocommerce-MyAccount-content table{font-size:14px}
}

/* ---- The slide-out ---- */
@media (max-width:520px){
  /* Full width, but not full height: leaving the top strip visible keeps the
     page behind it in view, so it reads as a drawer rather than a new page. */
  .pe-theme .pe-basket__panel{width:100vw;top:auto;height:92vh;border-radius:16px 16px 0 0}
  .pe-theme .pe-basket__panel{transform:translateY(100%)}
  .pe-theme .pe-basket[data-open="true"] .pe-basket__panel{transform:none}
  .pe-theme .pe-basket__item{gap:12px;padding:12px 16px}
  .pe-theme .pe-basket__thumb{width:48px;height:48px}
  .pe-theme .pe-basket__foot{padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .pe-theme .pe-basket__foot .pe-btn{width:100%}
}

/* ============================================================
   BASKET TOTALS
   Ours, not WooCommerce's. Its own template mixes th and td
   padding, which is what made this box look cramped down one
   side and loose down the other.
   ============================================================ */
.pe-theme .pe-totals{
  background:var(--pe-surface);
  border:1px solid var(--pe-rule);
  border-radius:var(--pe-r);
  padding:22px;
}
.pe-theme .pe-totals__title{
  margin:0 0 16px;
  font-family:var(--pe-font-body);
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
}
.pe-theme .pe-totals__list{margin:0}
.pe-theme .pe-totals__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:11px 0;
  border-bottom:1px solid var(--pe-rule-2);
}
.pe-theme .pe-totals__row dt{
  margin:0;
  font-size:13.5px;
  font-weight:600;
  color:var(--pe-ink-2);
}
.pe-theme .pe-totals__row dd{
  margin:0;
  font-size:15px;
  font-weight:700;
  text-align:right;
  white-space:nowrap;
}
.pe-theme .pe-totals__row--coupon dt{color:var(--pe-save)}
.pe-theme .pe-totals__row--total{
  border-bottom:0;
  padding:16px 0 4px;
  margin-top:4px;
  border-top:2px solid var(--pe-rule);
}
.pe-theme .pe-totals__row--total dt{
  font-size:15px;
  font-weight:700;
  color:var(--pe-ink);
}
.pe-theme .pe-totals__row--total dd{
  font-family:var(--pe-font-display);
  font-size:1.5rem;
  line-height:1.1;
}
.pe-theme .pe-totals__action{margin-top:18px}
.pe-theme .pe-totals__action .button,
.pe-theme .pe-totals__action .checkout-button{
  display:block;
  width:100%;
  text-align:center;
}
.pe-theme .pe-totals__note{
  margin:14px 0 0;
  font-size:13px;
  line-height:1.55;
  color:var(--pe-ink-3);
}
/* Shipping rows come from WooCommerce as table rows; keep them in step. */
.pe-theme .pe-totals__list tr{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:11px 0;
  border-bottom:1px solid var(--pe-rule-2);
}
.pe-theme .pe-totals__list th,
.pe-theme .pe-totals__list td{
  padding:0;
  border:0;
  background:none;
  text-align:right;
}
.pe-theme .pe-totals__list th{
  font-size:13.5px;
  font-weight:600;
  color:var(--pe-ink-2);
  text-align:left;
  text-transform:none;
  letter-spacing:0;
}

@media (max-width:600px){
  .pe-theme .pe-totals{padding:18px 16px}
  .pe-theme .pe-totals__row--total dd{font-size:1.3rem}
}

/* ============================================================
   FOOTER
   Centred by default: logo, links, copyright, disclaimer.
   "columns" groups the same links under headings.
   ============================================================ */
.pe-theme .pe-footer{
  background:var(--pe-blue-800);
  color:#fff;
  padding:56px 0 40px;
}
.pe-theme .pe-footer a{color:var(--pe-save-light,#8FD7B4);text-decoration:none}
.pe-theme .pe-footer a:hover,
.pe-theme .pe-footer a:focus-visible{color:#fff;text-decoration:underline}

.pe-theme .pe-footer__brand{text-align:center;margin-bottom:26px}
.pe-theme .pe-footer__logo{
  display:inline-block;width:auto;height:96px;
  max-width:100%;
}
.pe-theme .pe-footer__name{
  font-family:var(--pe-font-display);font-size:1.5rem;color:#fff;
}

/* Centred: one row that wraps, exactly as the design shows. */
.pe-theme .pe-footer--centred .pe-footer__links{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 26px;margin:0;padding:0;list-style:none;
  font-size:16px;
  max-width:52ch;margin-inline:auto;
}
.pe-theme .pe-footer--centred .pe-footer__group-title{display:none}

/* Columns: headings with their links beneath. */
.pe-theme .pe-footer--columns .pe-footer__nav{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  gap:32px;
  margin-bottom:30px;
  text-align:left;
}
.pe-theme .pe-footer--columns .pe-footer__group-title{
  margin:0 0 12px;
  font-family:var(--pe-font-body);
  font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--pe-on-dark);
}
.pe-theme .pe-footer--columns .pe-footer__links{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:9px;
  font-size:15px;
}

.pe-theme .pe-footer__contact{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  margin:20px 0 0;padding:0;list-style:none;
  font-size:14.5px;color:var(--pe-on-dark-soft);
}
.pe-theme .pe-footer--columns .pe-footer__contact{justify-content:flex-start}

.pe-theme .pe-footer__copyright{
  margin:26px 0 0;
  text-align:center;
  font-size:15px;
  color:#fff;
}
.pe-theme .pe-footer--columns .pe-footer__copyright{
  text-align:left;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.16);
}

/* Deliberately smaller and quieter: it is a legal notice, not a message.
   Constrained width because a full-bleed paragraph at this size is unreadable. */
.pe-theme .pe-footer__disclaimer{
  margin:28px auto 0;
  max-width:96ch;
  text-align:center;
  font-size:12px;
  line-height:1.7;
  color:var(--pe-on-dark);
}
.pe-theme .pe-footer--columns .pe-footer__disclaimer{text-align:left;margin-inline:0}

@media (max-width:600px){
  .pe-theme .pe-footer{padding:40px 0 32px}
  .pe-theme .pe-footer__logo{height:76px}
  .pe-theme .pe-footer--centred .pe-footer__links{gap:10px 18px;font-size:15px}
  .pe-theme .pe-footer__disclaimer{font-size:11.5px;text-align:left}
}

/* ============================================================
   NOT FOUND
   Somebody here is mid-task, following a stale link. The
   routes come first and the apology second.
   ============================================================ */
.pe-404{padding:72px 0 84px;background:var(--pe-paper)}
.pe-404__inner{max-width:760px}

.pe-404__code{
  margin:0 0 6px;
  font-family:var(--pe-font-display);
  font-size:clamp(3.6rem,11vw,6rem);
  line-height:.9;
  letter-spacing:-.03em;
  /* A watermark, not a headline: it should register without competing with
     the sentence that actually tells someone what happened. */
  color:var(--pe-blue-soft);
  user-select:none;
}
.pe-404__title{margin:0 0 12px;font-size:clamp(1.7rem,3.6vw,2.4rem)}
.pe-404__lede{margin:0 0 32px;max-width:56ch;font-size:16.5px;line-height:1.65;color:var(--pe-ink-2)}

.pe-404__links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:12px;
  margin:0 0 36px;
  padding:0;
  list-style:none;
}
.pe-404__link{
  display:flex;
  align-items:center;
  gap:14px;
  height:100%;
  padding:16px 18px;
  border:1px solid var(--pe-rule);
  border-radius:var(--pe-r);
  background:var(--pe-surface);
  color:var(--pe-ink);
  text-decoration:none;
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.pe-404__link:hover,
.pe-404__link:focus-visible{
  border-color:var(--pe-blue-line);
  transform:translateY(-2px);
  box-shadow:var(--pe-shadow);
  color:var(--pe-ink);
}
.pe-404__link-label{display:block;font-weight:700;font-size:15.5px}
.pe-404__link-note{display:block;margin-top:3px;font-size:13px;color:var(--pe-ink-3);line-height:1.45}
.pe-404__link > span:not(.pe-404__link-go){flex:1 1 auto;min-width:0}
.pe-404__link-go{flex:0 0 auto;color:var(--pe-blue)}
.pe-404__link-go svg{width:16px;height:16px;display:block}

.pe-404__search{
  padding:22px;
  border-radius:var(--pe-r);
  background:var(--pe-surface);
  border:1px solid var(--pe-rule);
}
.pe-404__search-label{margin:0 0 12px;font-weight:700;font-size:15px}
.pe-404__form{display:flex;flex-wrap:wrap;gap:10px}
.pe-404__form input[type="search"]{
  flex:1 1 240px;
  min-width:0;
  padding:11px 14px;
  border:1px solid var(--pe-rule);
  border-radius:var(--pe-r-sm,8px);
  font-size:15px;
}
.pe-404__form input[type="search"]:focus{
  outline:none;
  border-color:var(--pe-blue);
  box-shadow:0 0 0 3px var(--pe-blue-soft);
}
.pe-404__help{margin:26px 0 0;font-size:14px;color:var(--pe-ink-3);line-height:1.6}

@media (max-width:600px){
  .pe-404{padding:48px 0 56px}
  .pe-404__links{margin-bottom:28px}
  .pe-404__search{padding:18px 16px}
  .pe-404__form .pe-btn{width:100%}
}