/*
Theme Name: Bechacam
Theme URI: https://bechacam.com
Author: Mokosa Andrew
Author URI: https://bechacam.com
Description: A WooCommerce theme for Cameroonian educational publishers. Built around how school books are actually bought — by class, by subject, by language stream — with a shop-by-class front page, bulk ordering for schools, class bundles, and 3D book presentation. Ships with the full Bechacam catalogue and a one-click importer.
Version: 2.7.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bechacam
Tags: e-commerce, education, two-columns, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   BECHACAM  v2
   1.  Tokens
   2.  Reset + base
   3.  Typography
   4.  Layout
   5.  Header / nav
   6.  Buttons + forms
   7.  Hero
   8.  Book covers — the 3D treatment
   9.  Shop by class
   10. Subject tiles
   11. Trust strip + sections
   12. WooCommerce — archive
   13. WooCommerce — filters
   14. WooCommerce — single product
   15. WooCommerce — cart, checkout, account
   16. Bundles
   17. For schools
   18. Blog + pages
   19. Footer
   20. Utilities + motion
   21. Responsive
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   Every colour resolves through these. The Customizer overwrites the
   accent at runtime, so one value re-skins the site.
   ========================================================================== */

:root{
  /* surfaces — warm paper, because the covers supply all the colour */
  --bx-bg:        #F7F4ED;
  --bx-bg-2:      #FFFFFF;
  --bx-bg-3:      #EFEAE0;
  --bx-bg-ink:    #14202E;

  /* ink */
  --bx-fg:        #16222F;
  --bx-fg-dim:    #5A6775;
  --bx-fg-faint:  #8B96A2;
  --bx-fg-ghost:  rgba(22,34,47,.10);

  /* accents — drawn from the Bechacam wordmark */
  --bx-blue:      #1B6FB8;
  --bx-blue-ink:  #FFFFFF;
  --bx-orange:    #F07E26;
  --bx-green:     #2E7D4F;

  /* lines */
  --bx-line:      rgba(22,34,47,.13);
  --bx-line-soft: rgba(22,34,47,.07);

  /* type */
  --bx-display:   "Fraunces", "Iowan Old Style", Georgia, serif;
  --bx-body:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* rhythm */
  --bx-gut:       clamp(18px, 4vw, 42px);
  --bx-max:       1200px;
  --bx-max-wide:  1460px;
  --bx-sec:       clamp(52px, 8vw, 104px);

  /* motion */
  --bx-ease:      cubic-bezier(.2,.8,.3,1);
  --bx-ease-out:  cubic-bezier(.16,1,.3,1);

  /* depth */
  --bx-lift:      0 10px 30px rgba(22,34,47,.09);
  --bx-lift-lg:   0 22px 54px rgba(22,34,47,.14);
  --bx-glow:      0 8px 22px rgba(27,111,184,.26);

  --bx-radius:    14px;
  --bx-radius-sm: 9px;
}


/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  /* Stops a phone rendering the page zoomed out. Something a fraction
     wider than the screen — the off-canvas drawer, a wide table, a
     decorative glow — makes the browser shrink everything to fit.
     "clip" rather than "hidden" because hidden on <html> silently
     breaks position:sticky, which the header depends on. */
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
@supports not (overflow-x: clip){
  html{overflow-x:hidden}
}

body{
  margin:0;
  background:var(--bx-bg);
  color:var(--bx-fg);
  font-family:var(--bx-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  max-width:100%;
}

img,svg,video{max-width:100%;height:auto;display:block}

a{color:var(--bx-blue);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--bx-orange)}

:focus-visible{outline:2px solid var(--bx-blue);outline-offset:3px;border-radius:2px}

::selection{background:var(--bx-blue);color:#fff}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1,h2,h3,h4,h5,h6{
  font-family:var(--bx-display);
  font-weight:700;
  line-height:1.07;
  letter-spacing:-.026em;
  margin:0 0 .5em;
  color:var(--bx-fg);
  text-wrap:balance;
}

h1{font-size:clamp(36px,5.8vw,68px);font-weight:900;line-height:1}
h2{font-size:clamp(27px,4.2vw,46px)}
h3{font-size:clamp(20px,2.4vw,27px)}
h4{font-size:clamp(17px,1.9vw,21px)}
h5,h6{font-size:16.5px}

p{margin:0 0 1.15em;text-wrap:pretty}
p:last-child{margin-bottom:0}

.bx-kicker{
  font-family:var(--bx-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--bx-blue);
  margin:0 0 13px;
}

.bx-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--bx-orange);margin-bottom:18px;
}
.bx-eyebrow::before{content:"";width:26px;height:2px;background:var(--bx-orange)}

.bx-lede{
  color:var(--bx-fg-dim);
  font-size:clamp(15.5px,1.8vw,19px);
  line-height:1.68;
  max-width:58ch;
}

blockquote{
  margin:2em 0;padding-left:24px;
  border-left:3px solid var(--bx-blue);
  font-family:var(--bx-display);
  font-size:clamp(19px,2.3vw,25px);line-height:1.36;
}

hr{border:0;border-top:1px solid var(--bx-line);margin:2.5em 0}

table{width:100%;border-collapse:collapse;margin-bottom:1.5em}
th,td{padding:12px 14px;border-bottom:1px solid var(--bx-line);text-align:left}
th{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--bx-fg-faint);font-weight:600}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.bx-wrap{width:100%;max-width:var(--bx-max);margin-inline:auto;padding-inline:var(--bx-gut)}
.bx-wrap--wide{max-width:var(--bx-max-wide)}
.bx-wrap--narrow{max-width:760px}

.bx-section{padding-block:var(--bx-sec)}
.bx-section--line{border-top:1px solid var(--bx-line)}
.bx-section--tint{background:var(--bx-bg-3)}
.bx-section--ink{background:var(--bx-bg-ink);color:#F2EFE9}
.bx-section--ink h2,.bx-section--ink h3{color:#F2EFE9}
.bx-section--ink .bx-lede{color:rgba(242,239,233,.7)}
.bx-section--ink .bx-kicker{color:var(--bx-orange)}

.bx-section__head{margin-bottom:clamp(26px,4vw,52px)}
.bx-section__head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

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


/* ==========================================================================
   5. HEADER / NAV
   ========================================================================== */

.bx-topbar{
  background:var(--bx-bg-ink);
  color:rgba(242,239,233,.8);
  font-size:12.5px;
}
.bx-topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;min-height:38px;flex-wrap:wrap;
}
.bx-topbar a{color:rgba(242,239,233,.86)}
.bx-topbar a:hover{color:var(--bx-orange)}
.bx-topbar__marks{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

.bx-header{
  position:sticky;top:0;z-index:80;
  background:rgba(247,244,237,.93);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--bx-line);
}
.bx-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px}

.bx-brand{
  font-family:var(--bx-display);
  font-weight:900;font-size:23px;letter-spacing:-.025em;line-height:1;white-space:nowrap;
}
.bx-brand a{color:var(--bx-fg)}
.bx-brand a:hover{color:var(--bx-fg)}
.bx-brand .bx-brand__a{color:var(--bx-blue)}
.bx-brand .bx-brand__b{color:var(--bx-orange)}
.bx-brand img{max-height:42px;width:auto}

.bx-header__actions{display:flex;align-items:center;gap:12px}
.bx-nav{display:flex;align-items:center;gap:clamp(13px,2vw,26px)}
.bx-nav ul{display:flex;align-items:center;gap:clamp(13px,2vw,26px);list-style:none;margin:0;padding:0}
.bx-nav a{font-size:14.5px;color:var(--bx-fg-dim);position:relative;padding-block:7px;font-weight:500}
.bx-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;
  background:var(--bx-orange);transition:right .3s var(--bx-ease);
}
.bx-nav a:hover{color:var(--bx-fg)}
.bx-nav a:hover::after{right:0}
.bx-nav .current-menu-item > a,.bx-nav .current_page_item > a{color:var(--bx-fg)}

.bx-nav li{position:relative}
.bx-nav .sub-menu{
  position:absolute;top:100%;left:0;min-width:214px;
  flex-direction:column;align-items:stretch;gap:0;
  background:var(--bx-bg-2);border:1px solid var(--bx-line);border-radius:10px;padding:8px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.24s var(--bx-ease);
  box-shadow:var(--bx-lift);
}
.bx-nav li:hover > .sub-menu{opacity:1;visibility:visible;transform:none}
.bx-nav .sub-menu a{display:block;padding:9px 12px;border-radius:6px}
.bx-nav .sub-menu a:hover{background:var(--bx-bg-3)}
.bx-nav .sub-menu a::after{display:none}

.bx-cart{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bx-blue);color:#fff;
  border-radius:100px;padding:10px 17px;font-size:13.5px;font-weight:600;
  white-space:nowrap;transition:.22s ease;
}
.bx-cart:hover{background:var(--bx-fg);color:#fff}
.bx-cart__count{
  background:rgba(255,255,255,.26);color:#fff;font-size:11.5px;font-weight:700;
  min-width:19px;height:19px;padding-inline:5px;border-radius:100px;
  display:grid;place-items:center;line-height:1;
}

.bx-burger{
  display:none;width:44px;height:44px;background:none;
  border:1px solid var(--bx-line);border-radius:9px;cursor:pointer;padding:0;position:relative;
}
.bx-burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--bx-fg);transition:.3s var(--bx-ease)}
.bx-burger span:nth-child(1){top:15px}
.bx-burger span:nth-child(2){top:21px}
.bx-burger span:nth-child(3){top:27px}
.bx-burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.bx-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.bx-burger[aria-expanded="true"] span:nth-child(3){top:21px;transform:rotate(-45deg)}

.bx-icon-btn{
  display:inline-grid;place-items:center;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--bx-line);color:var(--bx-fg-dim);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.bx-icon-btn:hover{border-color:var(--bx-blue);color:var(--bx-blue);background:var(--bx-bg-2)}
.bx-icon-btn svg{width:20px;height:20px}

/* ---- drawer: the menu on phones and tablets ---- */
.bx-scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(16,24,34,.52);
  backdrop-filter:blur(2px);
  opacity:0;transition:opacity .3s ease;
}
.bx-scrim.is-open{opacity:1}

.bx-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:95;
  width:min(360px,86vw);
  background:var(--bx-bg-2);
  border-left:1px solid var(--bx-line);
  box-shadow:-18px 0 44px rgba(16,24,34,.16);
  transform:translateX(102%);
  transition:transform .34s var(--bx-ease), visibility 0s linear .34s;
  will-change:transform;
  display:flex;flex-direction:column;
  overscroll-behavior:contain;
  visibility:hidden;
}
.bx-drawer.is-open{transform:none;visibility:visible}

.bx-drawer__top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--bx-line);flex:none;
}
.bx-drawer__top .bx-brand{font-size:20px}
.bx-drawer__x{
  width:40px;height:40px;display:grid;place-items:center;
  background:none;border:1px solid var(--bx-line);border-radius:50%;
  color:var(--bx-fg-dim);cursor:pointer;flex:none;
}
.bx-drawer__x:hover{border-color:var(--bx-fg-faint);color:var(--bx-fg)}
.bx-drawer__x svg{width:17px;height:17px}

.bx-drawer__body{flex:1 1 auto;overflow-y:auto;padding:18px 20px 24px;-webkit-overflow-scrolling:touch}

.bx-drawer__acct{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;border-radius:var(--bx-radius-sm);
  background:var(--bx-bg-3);margin-bottom:20px;
}
.bx-drawer__acct:hover{background:rgba(27,111,184,.09)}
.bx-drawer__acct svg{width:23px;height:23px;color:var(--bx-blue);flex:none}
.bx-drawer__acct b{display:block;font-size:15px;color:var(--bx-fg);line-height:1.3}
.bx-drawer__acct em{display:block;font-style:normal;font-size:12.5px;color:var(--bx-fg-dim);margin-top:2px}

.bx-drawer__nav ul{list-style:none;margin:0 0 20px;padding:0}
.bx-drawer__nav li{border-bottom:1px solid var(--bx-line-soft)}
.bx-drawer__nav a{display:block;padding:13px 2px;font-size:16px;font-weight:500;color:var(--bx-fg)}
.bx-drawer__nav a:hover{color:var(--bx-blue)}
.bx-drawer__nav .sub-menu{margin:0 0 6px;padding-left:14px}
.bx-drawer__nav .sub-menu a{font-size:14.5px;font-weight:400;color:var(--bx-fg-dim);padding:9px 2px}

.bx-drawer__sec{margin-bottom:22px}
.bx-drawer__sec h4{
  font-family:var(--bx-body);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bx-fg-faint);
  margin-bottom:11px;
}
.bx-drawer__chips{display:flex;flex-wrap:wrap;gap:8px}
.bx-drawer__chips a{
  font-size:13.5px;font-weight:600;
  color:var(--bx-cls,var(--bx-blue));
  border:1px solid currentColor;border-radius:100px;
  padding:8px 14px;line-height:1;
}
.bx-drawer__chips a:hover{background:var(--bx-cls,var(--bx-blue));color:#fff}

.bx-drawer__links{list-style:none;margin:0;padding:0}
.bx-drawer__links li{border-bottom:1px solid var(--bx-line-soft)}
.bx-drawer__links a{display:block;padding:11px 2px;font-size:15px;color:var(--bx-fg-dim)}
.bx-drawer__links a:hover{color:var(--bx-blue)}

.bx-drawer__foot{flex:none;border-top:1px solid var(--bx-line);padding:16px 20px}
.bx-drawer__foot a{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:15px;font-weight:600;color:var(--bx-blue);
}
.bx-drawer__foot svg{width:18px;height:18px}

body.bx-locked{overflow:hidden}


/* ==========================================================================
   6. BUTTONS + FORMS
   ========================================================================== */

.bx-btn,.wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--bx-body);font-size:15px;font-weight:600;line-height:1;
  padding:15px 28px;border:0;border-radius:100px;cursor:pointer;
  background:var(--bx-blue);color:var(--bx-blue-ink);
  box-shadow:var(--bx-glow);
  transition:transform .2s var(--bx-ease),box-shadow .2s ease,background .2s ease;
  text-align:center;
}
.bx-btn:hover,.wp-block-button__link:hover{
  color:#fff;transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(27,111,184,.36);
}
.bx-btn:active{transform:translateY(0)}

.bx-btn--ghost{background:none;border:1.5px solid var(--bx-line);color:var(--bx-fg);box-shadow:none}
.bx-btn--ghost:hover{background:var(--bx-bg-2);border-color:var(--bx-fg-faint);color:var(--bx-fg);box-shadow:none}

.bx-btn--orange{background:var(--bx-orange);box-shadow:0 8px 22px rgba(240,126,38,.3)}
.bx-btn--orange:hover{box-shadow:0 14px 32px rgba(240,126,38,.4)}

.bx-btn--block{width:100%}
.bx-btn--sm{padding:11px 20px;font-size:13.5px}
.bx-btn--lg{padding:18px 36px;font-size:16.5px}

input[type=text],input[type=email],input[type=url],input[type=password],
input[type=search],input[type=number],input[type=tel],input[type=date],
textarea,select{
  width:100%;background:var(--bx-bg-2);
  border:1px solid var(--bx-line);border-radius:var(--bx-radius-sm);
  padding:13px 15px;color:var(--bx-fg);
  font-family:var(--bx-body);font-size:15px;line-height:1.4;
  transition:border-color .2s ease,box-shadow .2s ease;
}
input:focus,textarea:focus,select:focus{
  outline:0;border-color:var(--bx-blue);box-shadow:0 0 0 3px rgba(27,111,184,.14);
}
::placeholder{color:var(--bx-fg-faint)}
label{display:block;font-size:13.5px;color:var(--bx-fg-dim);margin-bottom:7px;font-weight:500}

select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--bx-fg-dim) 50%),
                   linear-gradient(135deg,var(--bx-fg-dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:42px;
}


/* ==========================================================================
   7. HERO
   ========================================================================== */

.bx-hero{position:relative;padding-block:clamp(38px,6vw,76px) clamp(34px,5vw,64px);overflow:hidden}
.bx-hero::before{
  content:"";position:absolute;top:-34%;right:-16%;
  width:60vw;height:60vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle,rgba(27,111,184,.12),transparent 66%);pointer-events:none;
}
.bx-hero::after{
  content:"";position:absolute;bottom:-22%;left:-16%;
  width:44vw;height:44vw;max-width:540px;max-height:540px;
  background:radial-gradient(circle,rgba(240,126,38,.10),transparent 68%);pointer-events:none;
}
.bx-hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(280px,.94fr);
  grid-template-areas:
    "intro cover"
    "act   cover";
  align-content:center;
  column-gap:clamp(28px,4.5vw,70px);
  row-gap:0;
  align-items:center;
}
/* The book spans both rows and is taller than the text, so the spare
   height is shared between them. Centred in their own tracks, the two
   halves drifted apart and left a hole under the standfirst. Pushing
   the intro down and the buttons up closes it, and the pair still sits
   centred against the book. */
.bx-hero__intro{grid-area:intro;align-self:end}
.bx-hero__act{grid-area:act;align-self:start}
.bx-cover{grid-area:cover}
.bx-hero__title{margin-bottom:0}
.bx-hero__title em{font-style:normal;color:var(--bx-blue);display:block}
.bx-hero__tag{margin-top:20px;font-size:clamp(16px,1.95vw,19.5px);line-height:1.62;color:var(--bx-fg-dim);max-width:46ch}
.bx-hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}

.bx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.bx-chip{
  font-size:12.5px;color:var(--bx-fg-dim);background:var(--bx-bg-2);
  border:1px solid var(--bx-line);border-radius:100px;padding:7px 14px;line-height:1.3;
}
.bx-chip--mark{color:var(--bx-green);border-color:rgba(46,125,79,.3);background:rgba(46,125,79,.06);font-weight:600}

.bx-price{font-family:var(--bx-display);font-weight:700;font-size:27px;line-height:1;color:var(--bx-fg)}
.bx-price del{color:var(--bx-fg-faint);font-size:.62em;font-weight:400;margin-right:10px}

.bx-pays{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:22px}
.bx-pays__label{font-size:11.5px;color:var(--bx-fg-faint);margin-right:2px}
.bx-pay{font-size:11px;font-weight:700;letter-spacing:.03em;padding:6px 11px;border-radius:5px;line-height:1.3}
.bx-pay--mtn{background:#FFCC00;color:#0d0d0d}
.bx-pay--om{background:#FF7900;color:#fff}
.bx-pay--card{background:var(--bx-bg-3);color:var(--bx-fg-dim)}


/* ==========================================================================
   8. BOOK COVERS — the 3D treatment
   The product images are already rendered as 3D books, so the CSS only
   adds motion: a slight lift and counter-rotation on hover. Doubling the
   perspective here would fight the render.
   ========================================================================== */

.bx-cover{
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  width:100%;min-width:0;
}
.bx-cover__inner{
  width:min(400px,86vw);position:relative;
  transition:transform .7s var(--bx-ease-out);
  transform:rotateY(-3deg) translateY(0);
}
.bx-cover:hover .bx-cover__inner{transform:rotateY(0deg) translateY(-10px) scale(1.02)}
.bx-cover__inner img{width:100%;filter:drop-shadow(0 18px 34px rgba(22,34,47,.2))}

/* generated fallback cover, when a product has no image at all */
.bx-cover__gen{
  width:min(340px,80vw);aspect-ratio:2/3;border-radius:3px 8px 8px 3px;
  position:relative;overflow:hidden;
  box-shadow:-3px 0 0 rgba(0,0,0,.34) inset,18px 24px 48px rgba(22,34,47,.28);
  padding:26px 24px;display:flex;flex-direction:column;justify-content:space-between;
}
.bx-cover__gen .bx-cover__pub{font-family:var(--bx-display);font-weight:700;font-size:13px;letter-spacing:.05em;color:#fff;position:relative;z-index:2}
.bx-cover__gen .bx-cover__ttl{font-family:var(--bx-display);font-weight:900;font-size:clamp(28px,4vw,42px);line-height:.92;letter-spacing:-.03em;color:#fff;position:relative;z-index:2}
.bx-cover__rings{position:absolute;inset:0;opacity:.45;z-index:1}

/* ---- rotating hero shelf ----
   One book is visible at a time. The outgoing book turns away on its
   spine and the next turns in, which reads as a book being set down and
   another picked up rather than a slideshow crossfade.

   The first book stays in the document flow and sets the height; the
   rest are stacked on top of it. Guessing an aspect ratio for the box
   never worked, because each render carries its own shadow and padding,
   so the book sat off-centre inside a frame that was the wrong shape. */
.bx-shelf{
  position:relative;
  width:min(360px, 78vw);
  max-width:100%;
  margin-inline:auto;
  perspective:1700px;
}
.bx-shelf__b{
  position:absolute;
  inset:0;
  display:block;
  opacity:0;
  transform:rotateY(22deg) translateZ(-55px) scale(.95);
  transition:opacity .58s var(--bx-ease-out),
             transform .76s var(--bx-ease-out);
  pointer-events:none;
}
/* the first one holds the space open */
.bx-shelf__b:first-child{position:relative}

.bx-shelf__b img{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 16px 30px rgba(22,34,47,.18));
}
.bx-shelf__b.is-live{
  opacity:1;
  transform:none;
  pointer-events:auto;
  z-index:2;
}
/* the one leaving turns the other way, so they pass rather than fade */
.bx-shelf__b.is-out{
  opacity:0;
  transform:rotateY(-22deg) translateZ(-55px) scale(.95);
  z-index:1;
}
.bx-shelf__b.is-live:hover{transform:translateY(-8px) scale(1.02)}

/* Caption: a grid stack, so its height is the tallest title and a
   two-line title cannot spill over whatever follows. */
.bx-shelf__cap{
  display:grid;
  margin-top:18px;
  text-align:center;
}
.bx-shelf__t{
  grid-area:1 / 1;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .42s ease, transform .42s var(--bx-ease-out);
  pointer-events:none;
}
.bx-shelf__t.is-live{opacity:1;transform:none}
.bx-shelf__t b{
  display:block;font-family:var(--bx-display);font-weight:700;
  font-size:16px;line-height:1.3;color:var(--bx-fg);
  max-width:30ch;margin-inline:auto;
}
.bx-shelf__t em{
  display:block;font-style:normal;margin-top:6px;
  font-size:15px;font-weight:700;color:var(--bx-blue);
}
/* WooCommerce wraps prices in its own spans; style those, not just em */
.bx-shelf__t .woocommerce-Price-amount{font-weight:700;color:var(--bx-blue)}
.bx-shelf__t .woocommerce-Price-currencySymbol{font-weight:600;font-size:.84em;margin-left:3px}
.bx-shelf__t del{color:var(--bx-fg-faint);font-weight:400;margin-right:6px}
.bx-shelf__t del .woocommerce-Price-amount{color:var(--bx-fg-faint);font-weight:400}
.bx-shelf__t ins{background:none;text-decoration:none}
.bx-shelf__t ins .woocommerce-Price-amount{color:var(--bx-orange)}

@media (prefers-reduced-motion:reduce){
  .bx-shelf__b{transition:none}
  .bx-shelf__b:not(.is-live):not(:first-child){display:none}
  .bx-shelf__t{transition:none}
}

/* ==========================================================================
   9. SHOP BY CLASS
   The single most-used block on the site. A parent arrives holding a
   booklist for one class; this gets them there in one tap.
   ========================================================================== */

.bx-classes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(10px,1.6vw,18px);
}
.bx-class{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:150px;padding:20px;border-radius:var(--bx-radius);
  background:var(--bx-bg-2);border:1px solid var(--bx-line);
  overflow:hidden;transition:transform .3s var(--bx-ease),box-shadow .3s ease,border-color .3s ease;
}
.bx-class::after{
  content:"";position:absolute;right:-28px;bottom:-28px;
  width:96px;height:96px;border-radius:50%;
  background:var(--bx-cls,var(--bx-blue));opacity:.1;transition:transform .4s var(--bx-ease);
}
.bx-class:hover{transform:translateY(-5px);box-shadow:var(--bx-lift);border-color:var(--bx-cls,var(--bx-blue))}
.bx-class:hover::after{transform:scale(1.5)}
.bx-class__n{
  font-family:var(--bx-display);font-weight:900;
  font-size:clamp(26px,3.4vw,38px);line-height:1;letter-spacing:-.03em;
  color:var(--bx-cls,var(--bx-blue));position:relative;z-index:2;
}
.bx-class__lab{font-size:12.5px;color:var(--bx-fg-faint);margin-top:3px;position:relative;z-index:2}
.bx-class__c{
  font-size:12.5px;color:var(--bx-fg-dim);font-weight:600;
  position:relative;z-index:2;margin-top:14px;
}


/* ==========================================================================
   10. SUBJECT TILES
   ========================================================================== */

.bx-subjects{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:clamp(12px,1.8vw,20px)}
.bx-subject{
  display:flex;flex-direction:column;gap:7px;
  padding:22px 20px;border-radius:var(--bx-radius);
  background:var(--bx-bg-2);border:1px solid var(--bx-line);
  transition:transform .3s var(--bx-ease),box-shadow .3s ease;
}
.bx-subject:hover{transform:translateY(-4px);box-shadow:var(--bx-lift)}
.bx-subject__i{width:34px;height:34px;margin-bottom:5px}
.bx-subject__n{font-weight:600;font-size:15.5px;color:var(--bx-fg);line-height:1.25}
.bx-subject__c{font-size:12.5px;color:var(--bx-fg-faint)}


/* ==========================================================================
   11. TRUST STRIP + SECTIONS
   ========================================================================== */

.bx-trust{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(16px,2.4vw,34px);
}
.bx-trust__i{display:flex;gap:13px;align-items:flex-start}
.bx-trust__i svg{flex:none;width:24px;height:24px;color:var(--bx-blue);margin-top:2px}
.bx-trust__i b{display:block;font-size:15px;font-weight:600;margin-bottom:3px}
.bx-trust__i span{font-size:13.5px;color:var(--bx-fg-dim);line-height:1.5}

.bx-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(18px,2.6vw,42px)}
.bx-step{border-top:3px solid var(--bx-blue);padding-top:17px}
.bx-step:nth-child(2){border-color:var(--bx-orange)}
.bx-step:nth-child(3){border-color:var(--bx-green)}
.bx-step:nth-child(4){border-color:var(--bx-fg)}
.bx-step__no{font-family:var(--bx-display);font-weight:900;font-size:29px;line-height:1;color:var(--bx-fg-faint)}
.bx-step h3{font-family:var(--bx-body);font-size:16.5px;font-weight:600;letter-spacing:0;margin:10px 0 7px}
.bx-step p{color:var(--bx-fg-dim);font-size:14.5px;line-height:1.6;margin:0}

.bx-authors{display:flex;flex-wrap:wrap;gap:9px}
.bx-author{
  font-size:13.5px;color:var(--bx-fg-dim);background:var(--bx-bg-2);
  border:1px solid var(--bx-line);border-radius:100px;padding:8px 15px;
}


/* ==========================================================================
   12. WOOCOMMERCE — ARCHIVE / SHOP
   ========================================================================== */

.bx-woo{padding-block:clamp(22px,3vw,44px) clamp(40px,6vw,80px)}

.woocommerce .woocommerce-result-count{color:var(--bx-fg-faint);font-size:13.5px;margin-bottom:0}
.woocommerce .woocommerce-ordering{margin-bottom:0}

.woocommerce ul.products{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
  gap:clamp(20px,2.8vw,36px);
  margin:0;padding:0;list-style:none;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}

.woocommerce ul.products li.product{
  width:auto !important;margin:0 !important;float:none !important;
  padding:0;background:none;text-align:left;position:relative;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{display:block}

.woocommerce ul.products li.product img{
  width:100%;margin:0 0 14px;background:none;
  transition:transform .5s var(--bx-ease-out),filter .5s ease;
  filter:drop-shadow(0 10px 20px rgba(22,34,47,.16));
}
.woocommerce ul.products li.product:hover img{
  transform:translateY(-8px) scale(1.03);
  filter:drop-shadow(0 20px 34px rgba(22,34,47,.24));
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--bx-body) !important;
  font-size:15px !important;font-weight:600;letter-spacing:0;line-height:1.32;
  padding:0 !important;margin:0 0 4px !important;color:var(--bx-fg);
}
.woocommerce ul.products li.product .price{
  color:var(--bx-fg);font-family:var(--bx-body);
  font-size:14.5px;font-weight:700;display:block;
}
.woocommerce ul.products li.product .price del{color:var(--bx-fg-faint);font-weight:400;margin-right:6px}
.woocommerce ul.products li.product .price ins{background:none;color:var(--bx-orange);text-decoration:none}

.bx-loop-meta{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px;
  font-size:11.5px;color:var(--bx-fg-faint);
}
.bx-loop-meta span{background:var(--bx-bg-3);padding:3px 8px;border-radius:4px;line-height:1.4}

.woocommerce ul.products li.product .button{
  margin-top:11px;opacity:0;transform:translateY(6px);
  transition:opacity .3s ease,transform .3s var(--bx-ease);
  font-size:13px;padding:10px 18px;
}
.woocommerce ul.products li.product:hover .button,
.woocommerce ul.products li.product:focus-within .button{opacity:1;transform:none}

.woocommerce span.onsale{
  background:var(--bx-orange);color:#fff;
  font-family:var(--bx-body);font-size:11px;font-weight:700;letter-spacing:.03em;
  min-height:auto;min-width:auto;line-height:1;padding:7px 12px;border-radius:100px;
  top:6px;left:auto;right:6px;margin:0;z-index:5;
}

.bx-ncatdm{
  position:absolute;top:8px;left:8px;z-index:5;
  background:var(--bx-green);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 9px;border-radius:4px;line-height:1.3;
}

.woocommerce nav.woocommerce-pagination ul{border:0;margin-top:46px}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0 3px}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  background:var(--bx-bg-2);border:1px solid var(--bx-line);border-radius:9px;
  color:var(--bx-fg-dim);padding:11px 16px;min-width:44px;transition:.2s ease;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:var(--bx-blue);border-color:var(--bx-blue);color:#fff;
}


/* ==========================================================================
   13. FILTERS
   ========================================================================== */

.bx-filters{
  background:var(--bx-bg-2);border:1px solid var(--bx-line);
  border-radius:var(--bx-radius);padding:20px 22px;margin-bottom:30px;
}
.bx-filters__row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.bx-filters__f{flex:1 1 170px;min-width:0}
.bx-filters__f label{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--bx-fg-faint);font-weight:600}
.bx-filters__f select{padding:11px 14px;font-size:14.5px}
.bx-filters__go{flex:0 0 auto;display:flex;gap:9px}

.bx-active-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.bx-active-filters a{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--bx-blue);color:#fff;font-size:12.5px;font-weight:600;
  padding:7px 13px;border-radius:100px;
}
.bx-active-filters a::after{content:"×";font-size:15px;line-height:1}
.bx-active-filters a:hover{background:var(--bx-fg);color:#fff}

.bx-shoplayout{display:grid;grid-template-columns:1fr;gap:0}


/* ==========================================================================
   14. WOOCOMMERCE — SINGLE PRODUCT
   ========================================================================== */

.woocommerce div.product{padding-top:clamp(16px,2.6vw,36px)}

.woocommerce div.product div.images{perspective:1600px}
.woocommerce div.product div.images img{
  transition:transform .8s var(--bx-ease-out);
  filter:drop-shadow(0 22px 44px rgba(22,34,47,.22));
  transform:rotateY(-3deg);
}
.woocommerce div.product div.images:hover img{transform:rotateY(0) translateY(-8px)}
.woocommerce div.product div.images .flex-control-thumbs{margin-top:24px;perspective:none}
.woocommerce div.product div.images .flex-control-thumbs img{
  transform:none;filter:none;border-radius:5px;opacity:.5;transition:opacity .2s ease;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs .flex-active{opacity:1}

.woocommerce div.product .product_title{font-size:clamp(28px,4.2vw,48px);font-weight:900;line-height:1.02;margin-bottom:8px}

.bx-prod-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.bx-prod-meta span{
  font-size:12.5px;color:var(--bx-fg-dim);background:var(--bx-bg-3);
  padding:6px 12px;border-radius:100px;
}
.bx-prod-meta .bx-prod-meta__mark{background:rgba(46,125,79,.1);color:var(--bx-green);font-weight:600}

.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--bx-display);font-weight:700;font-size:30px;
  color:var(--bx-fg);margin:16px 0;line-height:1;
}
.woocommerce div.product p.price del{color:var(--bx-fg-faint);font-size:.58em;font-weight:400;margin-right:10px}
.woocommerce div.product p.price ins{background:none;color:var(--bx-fg);text-decoration:none}

.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--bx-fg-dim);font-size:16.5px;line-height:1.7;max-width:52ch;
}

.woocommerce div.product form.cart{margin-top:24px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.woocommerce div.product form.cart .quantity{display:inline-block}
.woocommerce div.product form.cart .quantity input{
  width:84px;padding:15px 10px;text-align:center;font-weight:600;font-size:16px;
  border-radius:100px;
}
.woocommerce div.product form.cart .button{padding:16px 32px;font-size:16px}

.bx-stock-note{
  margin-top:14px;font-size:13.5px;color:var(--bx-fg-dim);
  display:flex;align-items:center;gap:8px;
}
.bx-stock-note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bx-green)}

.bx-schools-cta{
  margin-top:26px;padding:18px 20px;border-radius:var(--bx-radius);
  background:var(--bx-bg-3);border:1px solid var(--bx-line);
  font-size:14.5px;color:var(--bx-fg-dim);line-height:1.6;
}
.bx-schools-cta b{color:var(--bx-fg);display:block;margin-bottom:4px;font-size:15px}

.woocommerce div.product .product_meta{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--bx-line);
  font-size:13.5px;color:var(--bx-fg-faint);
}
.woocommerce div.product .product_meta > span{display:block;margin-bottom:7px}

.woocommerce div.product .woocommerce-tabs{margin-top:clamp(36px,5vw,72px)}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  padding:0;margin:0 0 30px;display:flex;flex-wrap:wrap;gap:6px;
  border-bottom:1px solid var(--bx-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:0;border-radius:0;margin:0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:13px 20px;font-family:var(--bx-body);
  font-size:14px;font-weight:600;color:var(--bx-fg-faint);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{
  color:var(--bx-fg);border-bottom-color:var(--bx-blue);
}
.woocommerce-Tabs-panel{max-width:70ch;color:var(--bx-fg-dim);font-size:16.5px;line-height:1.75}
.woocommerce-Tabs-panel h2{font-size:clamp(22px,2.8vw,30px);margin-bottom:18px}

.woocommerce .related,.woocommerce .upsells{
  margin-top:clamp(44px,6vw,84px);padding-top:clamp(36px,5vw,64px);
  border-top:1px solid var(--bx-line);
}
.woocommerce .related > h2,.woocommerce .upsells > h2,.woocommerce .cross-sells > h2{
  font-size:clamp(22px,3vw,32px);margin-bottom:26px;
}

.woocommerce .star-rating span::before{color:var(--bx-orange)}
.woocommerce .star-rating::before{color:var(--bx-fg-ghost)}
.woocommerce #reviews #comments ol.commentlist li .comment-text{
  border:1px solid var(--bx-line);border-radius:var(--bx-radius);
  background:var(--bx-bg-2);padding:22px;
}

/* ---- breadcrumbs ---- */
.bx-crumbs{padding-top:18px;font-size:13px;color:var(--bx-fg-faint)}
.bx-crumbs .bx-wrap{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.bx-crumbs a,.bx-crumbs span{color:var(--bx-fg-faint)}
.bx-crumbs a:hover{color:var(--bx-blue)}
.bx-crumbs a::after{content:"/";margin-left:7px;color:var(--bx-fg-ghost)}
.bx-crumbs span{color:var(--bx-fg-dim)}

/* ---- order on WhatsApp ---- */
.bx-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:#25D366;color:#fff;
  font-family:var(--bx-body);font-size:14.5px;font-weight:600;line-height:1;
  padding:13px 22px;border-radius:100px;
  box-shadow:0 6px 18px rgba(37,211,102,.3);
  transition:transform .2s var(--bx-ease),box-shadow .2s ease;
}
.bx-wa:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(37,211,102,.4)}
.bx-wa svg{width:19px;height:19px;flex:none}
.woocommerce div.product form.cart .bx-wa{margin-left:0}

/* ---- stock wording ---- */
.bx-stock{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--bx-green);margin:0 0 6px;
}
.bx-stock::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.bx-stock--low{color:var(--bx-orange)}
.bx-stock--out{color:var(--bx-fg-faint)}

/* ---- related by level ---- */
.bx-level-related h2{margin-bottom:26px}


/* ==========================================================================
   15. WOOCOMMERCE — CART, CHECKOUT, ACCOUNT
   Restrained on purpose. Gateway plugins inject their own markup into
   checkout and heavy styling is what breaks Mobile Money flows.
   ========================================================================== */

.woocommerce table.shop_table{
  background:var(--bx-bg-2);border:1px solid var(--bx-line);
  border-radius:var(--bx-radius);border-collapse:separate;border-spacing:0;overflow:hidden;
}
.woocommerce table.shop_table th{
  background:transparent;color:var(--bx-fg-faint);
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:16px;
}
.woocommerce table.shop_table td{border-top:1px solid var(--bx-line);padding:16px;color:var(--bx-fg)}
.woocommerce table.shop_table tfoot td,.woocommerce table.shop_table tfoot th{font-weight:700}

.woocommerce-cart table.cart img{width:62px;filter:drop-shadow(0 6px 12px rgba(22,34,47,.16))}
.woocommerce a.remove{color:var(--bx-fg-faint) !important;font-weight:400;line-height:1}
.woocommerce a.remove:hover{background:var(--bx-orange);color:#fff !important}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #payment,
.woocommerce .woocommerce-order,
.woocommerce-MyAccount-content{
  background:var(--bx-bg-2);border:1px solid var(--bx-line);border-radius:var(--bx-radius);
}
.woocommerce .cart-collaterals .cart_totals{padding:24px}
.woocommerce-MyAccount-content{padding:28px}
.woocommerce-checkout #payment{padding:6px 4px}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--bx-line);padding:18px}
.woocommerce-checkout #payment ul.payment_methods li{margin-bottom:10px}
.woocommerce-checkout #payment ul.payment_methods label{display:inline;font-size:15px;color:var(--bx-fg)}
.woocommerce-checkout #payment div.payment_box{background:var(--bx-bg-3);color:var(--bx-fg-dim);font-size:13.5px;border-radius:9px}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--bx-bg-3)}
.woocommerce-checkout #payment div.form-row{padding:18px}
.woocommerce-checkout h3{font-size:23px;margin-bottom:18px}

.woocommerce form .form-row label{color:var(--bx-fg-dim)}
.woocommerce form .form-row .required{color:var(--bx-orange);border:0}
.woocommerce form.checkout_coupon,.woocommerce form.login,.woocommerce form.register{
  border:1px solid var(--bx-line);border-radius:var(--bx-radius);background:var(--bx-bg-2);padding:24px;
}

.select2-container--default .select2-selection--single{
  background:var(--bx-bg-2);border:1px solid var(--bx-line);
  border-radius:var(--bx-radius-sm);height:auto;padding:9px 6px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--bx-fg)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--bx-blue)}

.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--bx-bg-2);border-top:3px solid var(--bx-blue);
  border-radius:var(--bx-radius);color:var(--bx-fg);padding:18px 22px 18px 52px;
}
.woocommerce-message::before,.woocommerce-info::before{color:var(--bx-blue);top:19px;left:20px}
.woocommerce-error{border-top-color:var(--bx-orange)}
.woocommerce-error::before{color:var(--bx-orange);top:19px;left:20px}

.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--bx-line)}
.woocommerce-MyAccount-navigation li a{display:block;padding:13px 4px;color:var(--bx-fg-dim);font-size:14.5px}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--bx-blue);font-weight:600}


/* ==========================================================================
   16. BUNDLES
   ========================================================================== */

.bx-bundle{
  background:linear-gradient(135deg,var(--bx-bg-ink),#1D2E42);
  color:#F2EFE9;border-radius:var(--bx-radius);
  padding:clamp(24px,3.4vw,42px);position:relative;overflow:hidden;
}
.bx-bundle::after{
  content:"";position:absolute;right:-70px;top:-70px;width:260px;height:260px;
  border-radius:50%;background:var(--bx-orange);opacity:.14;
}
.bx-bundle h3{color:#fff;font-size:clamp(22px,2.8vw,30px);margin-bottom:9px;position:relative;z-index:2}
.bx-bundle p{color:rgba(242,239,233,.72);font-size:15px;max-width:48ch;position:relative;z-index:2}
.bx-bundle__save{
  display:inline-block;background:var(--bx-orange);color:#fff;
  font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:100px;
  margin-bottom:14px;position:relative;z-index:2;
}
.bx-bundle__cta{margin-top:22px;position:relative;z-index:2}


/* ==========================================================================
   17. FOR SCHOOLS
   ========================================================================== */

.bx-schools__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.bx-schools__form{
  background:var(--bx-bg-2);border:1px solid var(--bx-line);
  border-radius:var(--bx-radius);padding:clamp(22px,3vw,34px);
}
.bx-schools__form .bx-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.bx-schools__form .bx-row--1{grid-template-columns:1fr}
.bx-schools__list{list-style:none;margin:0;padding:0}
.bx-schools__list li{
  padding:15px 0;border-bottom:1px solid var(--bx-line);
  display:flex;gap:13px;align-items:flex-start;font-size:15px;line-height:1.55;
}
.bx-schools__list li::before{
  content:"";flex:none;width:21px;height:21px;border-radius:50%;margin-top:2px;
  background:var(--bx-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---- school pricing tiers ---- */
.bx-tiers{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--bx-bg-2);border:1px solid var(--bx-line);
  border-radius:var(--bx-radius);overflow:hidden;margin:0;
}
.bx-tiers th{
  background:var(--bx-bg-3);color:var(--bx-fg-faint);
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  padding:12px 14px;border-bottom:1px solid var(--bx-line);
}
.bx-tiers td{padding:13px 14px;border-bottom:1px solid var(--bx-line-soft);font-size:14.5px}
.bx-tiers tr:last-child td{border-bottom:0}
.bx-tiers tr:last-child{background:rgba(27,111,184,.05)}
.bx-tiers td:last-child,.bx-tiers th:last-child{text-align:right;white-space:nowrap}


/* ==========================================================================
   18. BLOG + PAGES
   ========================================================================== */

.bx-page-head{padding-block:clamp(34px,5vw,74px) clamp(20px,2.6vw,34px)}
.bx-page-head h1{margin-bottom:10px}

.bx-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(22px,3vw,42px)}
.bx-post{border-top:1px solid var(--bx-line);padding-top:20px}
.bx-post__thumb{border-radius:var(--bx-radius-sm);overflow:hidden;margin-bottom:15px;aspect-ratio:16/10}
.bx-post__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--bx-ease-out)}
.bx-post:hover .bx-post__thumb img{transform:scale(1.04)}
.bx-post__meta{font-size:12px;color:var(--bx-fg-faint);letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.bx-post h2{font-size:21px;margin-bottom:8px}
.bx-post p{color:var(--bx-fg-dim);font-size:14.5px;margin:0}

.bx-entry{max-width:70ch;font-size:17.5px;line-height:1.78;color:var(--bx-fg-dim)}
.bx-entry h2,.bx-entry h3,.bx-entry h4{color:var(--bx-fg);margin-top:1.8em}
.bx-entry a{text-decoration:underline;text-underline-offset:3px}
.bx-entry ul,.bx-entry ol{padding-left:1.3em;margin-bottom:1.3em}
.bx-entry li{margin-bottom:.5em}
.bx-entry img{border-radius:var(--bx-radius-sm);margin-block:1.6em}

.bx-404{text-align:center;padding-block:clamp(60px,11vw,140px)}
.bx-404 h1{font-size:clamp(66px,15vw,170px);color:var(--bx-blue);margin-bottom:8px}

/* ---- contact ---- */
.bx-contact__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(26px,4vw,60px);align-items:start;
}
.bx-contact__card{
  background:var(--bx-bg-2);border:1px solid var(--bx-line);
  border-radius:var(--bx-radius);padding:clamp(20px,2.6vw,30px);
}
.bx-contact__row{display:flex;gap:15px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--bx-line-soft)}
.bx-contact__row:first-child{padding-top:0}
.bx-contact__row:last-child{border-bottom:0;padding-bottom:0}
.bx-contact__row svg{flex:none;width:22px;height:22px;color:var(--bx-blue);margin-top:3px}
.bx-contact__row b{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--bx-fg-faint);margin-bottom:4px}
.bx-contact__row a,.bx-contact__row span{font-size:16px;color:var(--bx-fg);line-height:1.5}
.bx-contact__row a:hover{color:var(--bx-blue)}

.bx-contact__quick{display:grid;gap:10px;margin-top:18px}
.bx-contact__quick a{
  display:block;padding:15px 18px;border-radius:var(--bx-radius-sm);
  background:var(--bx-bg-2);border:1px solid var(--bx-line);
  transition:transform .25s var(--bx-ease),box-shadow .25s ease,border-color .25s ease;
}
.bx-contact__quick a:hover{transform:translateY(-3px);box-shadow:var(--bx-lift);border-color:var(--bx-blue)}
.bx-contact__quick b{display:block;font-size:15px;color:var(--bx-fg);margin-bottom:2px}
.bx-contact__quick span{font-size:13.5px;color:var(--bx-fg-dim)}

/* ---- about ---- */
.bx-figures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(12px,2vw,20px);
}
.bx-figure{
  background:var(--bx-bg-2);border:1px solid var(--bx-line);
  border-radius:var(--bx-radius);padding:22px 20px;
}
.bx-figure__n{
  display:block;font-family:var(--bx-display);font-weight:900;
  font-size:clamp(32px,4.4vw,48px);line-height:1;letter-spacing:-.03em;color:var(--bx-blue);
}
.bx-figure__l{display:block;font-size:13px;color:var(--bx-fg-dim);margin-top:7px;line-height:1.4}

.bx-about__story{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4.5vw,66px);align-items:start}
.bx-about__aside{position:sticky;top:110px}
.bx-about__mark{
  background:rgba(46,125,79,.07);border:1px solid rgba(46,125,79,.26);
  border-radius:var(--bx-radius);padding:22px;
}
.bx-about__mark svg{width:30px;height:30px;color:var(--bx-green);margin-bottom:11px}
.bx-about__mark b{display:block;font-size:16px;color:var(--bx-green);margin-bottom:6px}
.bx-about__mark span{font-size:13.5px;color:var(--bx-fg-dim);line-height:1.6}

@media (max-width:900px){
  .bx-contact__grid,.bx-about__story{grid-template-columns:1fr}
  .bx-about__aside{position:static}
}
@media (max-width:560px){
  .bx-figures{grid-template-columns:repeat(2,1fr)}
}

/* ---- FAQ ---- */
.bx-faq{max-width:860px}
.bx-faq__group{margin-bottom:clamp(28px,4vw,46px)}
.bx-faq__h{
  font-size:clamp(19px,2.2vw,24px);margin-bottom:14px;
  padding-bottom:10px;border-bottom:2px solid var(--bx-blue);
}
.bx-faq__item{
  background:var(--bx-bg-2);border:1px solid var(--bx-line);
  border-radius:var(--bx-radius-sm);margin-bottom:9px;overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.bx-faq__item[open]{border-color:var(--bx-blue);box-shadow:var(--bx-lift)}
.bx-faq__item summary{
  list-style:none;cursor:pointer;padding:16px 50px 16px 18px;
  font-size:16px;font-weight:600;color:var(--bx-fg);position:relative;
}
.bx-faq__item summary::-webkit-details-marker{display:none}
.bx-faq__item summary::after{
  content:"";position:absolute;right:20px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--bx-fg-faint);border-bottom:2px solid var(--bx-fg-faint);
  transform:rotate(45deg);transition:transform .25s var(--bx-ease),border-color .25s ease;
}
.bx-faq__item[open] summary::after{transform:rotate(-135deg);margin-top:-2px;border-color:var(--bx-blue)}
.bx-faq__item summary:hover{color:var(--bx-blue)}
.bx-faq__a{padding:0 18px 18px;color:var(--bx-fg-dim);font-size:15.5px;line-height:1.68;max-width:66ch}
.bx-faq__a p{margin-bottom:.8em}
.bx-faq__a strong{color:var(--bx-fg)}

.bx-faq__cta{
  display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
  margin-top:clamp(28px,4vw,48px);padding:clamp(22px,3vw,32px);
  background:var(--bx-bg-3);border-radius:var(--bx-radius);max-width:860px;
}
.bx-faq__cta h3{margin-bottom:5px;font-size:21px}
.bx-faq__cta p{color:var(--bx-fg-dim);font-size:14.5px;margin:0;max-width:46ch}

/* tables inside written pages */
.bx-entry table{
  background:var(--bx-bg-2);border:1px solid var(--bx-line);
  border-radius:var(--bx-radius);border-collapse:separate;border-spacing:0;overflow:hidden;
}
.bx-entry th{background:var(--bx-bg-3);color:var(--bx-fg-faint)}
.bx-entry td,.bx-entry th{border-bottom:1px solid var(--bx-line-soft)}
.bx-entry tr:last-child td{border-bottom:0}


/* ==========================================================================
   19. FOOTER
   ========================================================================== */

.bx-footer{
  background:var(--bx-bg-ink);color:rgba(242,239,233,.72);
  padding-block:clamp(44px,6vw,76px) 36px;margin-top:clamp(50px,7vw,100px);
}
.bx-footer a{color:rgba(242,239,233,.72)}
.bx-footer a:hover{color:var(--bx-orange)}
.bx-footer__grid{display:flex;justify-content:space-between;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.bx-footer__about{max-width:320px}
.bx-footer__about .bx-brand{font-size:26px;margin-bottom:13px}
.bx-footer__about .bx-brand a{color:#fff}
.bx-footer__about p{color:rgba(242,239,233,.52);font-size:13.5px;line-height:1.7;margin:0}
.bx-footer__col h4{
  font-family:var(--bx-body);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(242,239,233,.44);margin-bottom:13px;
}
.bx-footer__col ul{list-style:none;margin:0;padding:0}
.bx-footer__col a{display:block;font-size:14px;padding:4px 0}
.bx-footer__legal{
  margin-top:clamp(32px,4.6vw,52px);padding-top:22px;
  border-top:1px solid rgba(242,239,233,.13);
  color:rgba(242,239,233,.42);font-size:12.5px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}


/* ==========================================================================
   20. UTILITIES + MOTION
   ========================================================================== */

.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;
  word-wrap:normal !important;
}

.bx-rv{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s var(--bx-ease-out)}
.bx-rv.bx-in{opacity:1;transform:none}

.alignwide{max-width:var(--bx-max-wide)}
.alignfull{max-width:none;width:100%}
.aligncenter{margin-inline:auto;display:block}

.bx-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,84px);z-index:200;
  background:var(--bx-fg);color:#fff;border-radius:100px;padding:13px 24px;font-size:14px;
  box-shadow:var(--bx-lift-lg);opacity:0;transition:.36s var(--bx-ease);
  pointer-events:none;max-width:calc(100vw - 32px);
}
.bx-toast.bx-toast--show{transform:translate(-50%,0);opacity:1}
.bx-toast b{color:var(--bx-orange)}

/* ---------------------------------------------------------------------
   iOS zooms the whole page in whenever a field with a font smaller than
   16px gets focus, and does not zoom back out afterwards. The visitor is
   then stranded at 1.3x with the layout cut off. Every input is forced
   to 16px at touch sizes — the one number that must not be tuned for
   looks.
   ------------------------------------------------------------------ */
@media (max-width:1024px){
  input[type=text],input[type=email],input[type=url],input[type=password],
  input[type=search],input[type=number],input[type=tel],input[type=date],
  textarea,select,
  .bx-filters__f select,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .woocommerce div.product form.cart .quantity input{
    font-size:16px;
  }
}

/* Nothing may be wider than the screen. A single overflowing element is
   what makes a phone render the whole page zoomed out. */
img,svg,video,iframe,table,pre{max-width:100%}
.bx-entry table,.bx-tiers{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.woocommerce table.shop_table{display:block;overflow-x:auto}


/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */

@media (max-width:1024px){
  /* Everything below an iPad Pro gets the drawer. The inline menu does
     not survive a tablet width once the cart and account buttons sit
     beside it. */
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary{width:100% !important;float:none !important;margin-bottom:32px}
  .bx-schools__grid{grid-template-columns:1fr}
  .bx-nav{display:none}
  .bx-burger{display:block}

  .bx-filters__row{flex-direction:column;align-items:stretch}
  .bx-filters__go{width:100%}
  .bx-filters__go .bx-btn{flex:1}
}

@media (max-width:1024px) and (min-width:821px){
  /* iPad portrait keeps the hero side by side; only the menu moves into
     the drawer. Stacking here left a column of empty paper down one
     side. */
  .bx-shelf{width:min(290px,34vw)}

  /* The intro column is about 380px here, and two large buttons do not
     fit across it — they were wrapping to a second row at 45% width,
     which reads as a mistake rather than a choice. Two equal halves. */
  .bx-hero__cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .bx-hero__cta .bx-btn--lg{padding:16px 14px;font-size:15px;text-align:center}
}

@media (max-width:820px){
  /* Below a tablet, one column reading message -> book -> buttons. */
  .bx-hero__grid{
    grid-template-columns:1fr;
    grid-template-areas:"intro" "cover" "act";
    row-gap:clamp(16px,3vw,26px);
  }
  .bx-shelf{width:min(230px,50vw)}
}

@media (max-width:860px){
  .bx-icon-btn--account{display:none}
}

@media (max-width:640px){
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:18px}
  .bx-classes{grid-template-columns:repeat(2,1fr)}
  .bx-subjects{grid-template-columns:repeat(2,1fr)}
  .bx-footer__grid{flex-direction:column;gap:28px}
  .bx-schools__form .bx-row{grid-template-columns:1fr}
  /* no hover on touch — the loop button must always be reachable */
  .woocommerce ul.products li.product .button{opacity:1;transform:none}
}

@media (max-width:560px){
  .bx-hero::before,.bx-hero::after{display:none}
  .bx-hero{padding-block:22px 28px}

  /* A phone screen gives roughly 650px of usable height. The headline,
     the standfirst and the first button all have to fit inside it, so
     the book gets what is left over — not the other way round. At full
     size it filled the screen on its own and pushed the headline below
     the fold, so a visitor arrived to a cover and no sentence telling
     them what any of this was. */
  .bx-hero__grid{row-gap:14px}
  .bx-shelf{width:min(176px,44vw)}
  .bx-shelf__cap{margin-top:10px}
  .bx-shelf__t b{font-size:14px;max-width:26ch}
  .bx-shelf__t em{font-size:14px;margin-top:3px}

  /* The eyebrow was taking two lines and the orange rule only sat beside
     the first, which read as a stray dash. Tighter, and the rule goes. */
  .bx-eyebrow{font-size:11px;letter-spacing:.08em;margin-bottom:12px}
  .bx-eyebrow::before{display:none}

  .bx-hero__title{font-size:clamp(32px,10vw,42px)}
  .bx-hero__tag{margin-top:12px;font-size:15.5px;line-height:1.52}

  /* Only the approval mark earns its row here. The other two chips say
     what the sentence above them has already said, and each extra row
     pushed the first button off the bottom of the screen. */
  .bx-chips{margin-top:0;gap:6px}
  .bx-chip{display:none}
  .bx-chip--mark{display:inline-flex;font-size:11.5px;padding:6px 11px}
  .bx-hero__cta{margin-top:14px;gap:9px}
  .bx-hero__cta .bx-btn{flex:1 1 100%;padding:15px 20px}
  .bx-pays{margin-top:16px}

  /* the long strapline is not worth two lines on a phone */
  .bx-topbar__inner > span:first-child{display:none}
  .bx-topbar__inner{justify-content:center;text-align:center}

  .bx-brand{font-size:20px}
  .bx-cart{padding:9px 13px;font-size:12.5px}
  .bx-header__inner{min-height:60px;gap:12px}

  .bx-crumbs{font-size:12px}
  h1,h2,h3,.woocommerce-loop-product__title,.bx-shelf__t b{overflow-wrap:anywhere}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .bx-rv{opacity:1;transform:none}
}

@media print{
  .bx-header,.bx-topbar,.bx-footer,.bx-btn{display:none}
  body{background:#fff;color:#000}
}