/* ==========================================================================
   MAIN THEME CSS - Colombe Blank
   ========================================================================== */

/* Fonts */
@font-face{
  font-family:'CBPrimary';
  src:url('../fonts/CBPrimary.woff2') format('woff2'),
      url('../fonts/CBPrimary.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'CBPrimary';
  src:url('../fonts/CBPrimary.woff2') format('woff2'),
      url('../fonts/CBPrimary.ttf') format('truetype');
  font-weight:500;font-style:normal;font-display:swap;
}

/* Root Variables */
:root{
  --cb-base-font:19px;
  --cb-line-height:1.52;
  --cb-letter-body:.01em;
  --cb-border:#d9d9d9;
  --cb-border-soft:#ececec;
  --cb-menu-width:220px;
  --cb-transition:.35s cubic-bezier(.4,0,.2,1);
  --cb-focus-outline:#000;
  --cb-z-header:20000;
  --cb-z-offcanvas:14500;
  --cb-z-overlay:19500;
  --cb-z-loader:21000;
  --cb-z-stargate:23000;
  /* Base typography colours: use softer greys for improved legibility */
  --cb-color-body:#555;
  --cb-color-heading-alt:#777;
  --cb-color-bg:#fff;
  /* Use soft pastel default colours; these will be overridden dynamically via PHP */
  /* Classic pink & green palette derived from the boolymon_normalized
     theme.  These provide stronger contrast and a playful aesthetic. */
  --cb-hamburger-pink:#ff4fa3;
  --cb-hamburger-pink-hover:#ff63ac;
  --cb-menu-green:#cafe44;
  --cb-menu-green-hover:#d9ff66;
  --cb-back-blue:#0049c7;
  --cb-back-blue-hover:#1d60d6;

  /* Dynamic off-canvas variables (set in PHP via boolymon_output_pastel_colors) */
  --cb-left-bg-color: var(--cb-hamburger-pink);
  --cb-right-bg-color: var(--cb-menu-green);
  /* Frozen pill base colours captured on load (so headers can stay consistent even when hover swaps colours) */
  --cb-left-pill-base: var(--cb-hamburger-pink);
  --cb-right-pill-base: var(--cb-menu-green);
  /* Default link colours for off-canvas panels.  We soften these for the initial page load; they will be overridden by PHP. */
  --cb-left-link-color: #fafafa;
  --cb-right-link-color: #333333;
  --cb-left-hover-bg: #fafafa;
  --cb-left-hover-text: var(--cb-hamburger-pink);
  --cb-right-hover-bg: #333333;
  --cb-right-hover-text: var(--cb-menu-green);

  /* Consistent small typography across panels/forms */
  --cb-font-small: .58rem;
  /* Default RGB values for tinted off-canvas backgrounds.  These will be
     overridden by PHP on each request. */
  --cb-left-bg-rgb: 244, 194, 194;
  --cb-right-bg-rgb: 212, 229, 214;
  /* The heading colour will be injected dynamically via PHP (see functions.php).
     Provide a neutral default here to avoid a flash of bright colour before the
     dynamic style is applied. */
  --cb-color-heading:#f6cece;
}

/* Reset / Base */
html{box-sizing:border-box;font-size:var(--cb-base-font);}
*,*::before,*::after{box-sizing:inherit;}
body{
  margin:0;
  font-family:'Courier New',Courier,monospace;
  font-size:1rem;
  line-height:var(--cb-line-height);
  letter-spacing:var(--cb-letter-body);
  background:var(--cb-color-bg);
  color:var(--cb-color-body);
}
img{display:block;max-width:100%;height:auto;}
a{text-decoration:none;color:inherit;}
a:focus-visible,button:focus-visible{outline:2px solid var(--cb-focus-outline);outline-offset:2px;}
.cb-visually-hidden{
  position:absolute!important;
  width:1px;height:1.5px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
#cb-site-wrapper{position:relative;z-index:10;}

/* ========================================
   LOADER - SIMPLIFIED DOT SYSTEM
   ======================================== */
#cb-loader{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:#fff;
  z-index:var(--cb-z-loader);
}
#cb-loader.active{
  display:flex !important;
}
#cb-loader-dots{
  display:flex;
  gap:7px;
  align-items:center;
  font-size:0;
}
.cb-dot{
  width:5px;
  height:5px;
  background:#4a4a4a;
  border-radius:50%;
  display:inline-block;
  transition:opacity 0.2s ease;
}

/* Offcanvas Overlay
   The overlay appears behind the off-canvas panels to dim the page and
   capture clicks outside the menu.  We set pointer-events to none so
   that interactive elements inside the panels can still receive
   pointer events even if the overlay covers them.  The z-index is
   intentionally lower than the panels and links; therefore the menu
   items sit above the overlay when open. */
#cb-offcanvas-overlay{
  position:fixed;
  inset:0;
  background:transparent;
  z-index:14400;
  display:none;
  /* Disable pointer events on the overlay so it never blocks interactions.
     A global click handler in menu.js will close the menu when the user
     clicks outside the panels. */
  pointer-events:none;
}
#cb-offcanvas-overlay.visible{display:block;}

/* Offcanvas Panels */
.cb-offcanvas{
  position:fixed;
  top:50px;
  bottom:0;
  width:var(--cb-menu-width);
  background:rgba(255,255,255,.95);
  overflow-x:hidden;
  overflow-y:auto;
  border-right:1px solid var(--cb-border-soft);
  transform:translateX(-100%);
  transition:transform var(--cb-transition), background-color var(--cb-transition);
  z-index:var(--cb-z-offcanvas);
  padding:28px 20px 60px 20px;
  font-size:.56rem;
  line-height:1.50;
  backdrop-filter:saturate(150%) blur(8px);
  /* Ensure content doesn't overflow horizontally on mobile */
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.cb-offcanvas.right{
  left:auto;
  right:0;
  border-right:0;
  border-left:1px solid var(--cb-border-soft);
  transform:translateX(100%);
  z-index:calc(var(--cb-z-offcanvas) + 10);
}
.cb-offcanvas.open{transform:translateX(0);}

/* Keep backgrounds during open state */
/* Use semi-transparent tinted backgrounds for open panels */
#cb-offcanvas-left.open{
  /* Extra-transparent tint: barely visible so the underlying page shows through.  Left panel is slightly more opaque than right. */
  /* Slightly less transparent tint so the opposite colour beneath the
     tokens is more visible */
  background: rgba(var(--cb-left-bg-rgb), 0.80);
}
#cb-offcanvas-right.open{
  /* Extra-transparent tint for the right panel: it is more see-through than the left */
  /* Slightly less transparent tint for the right panel */
  background: rgba(var(--cb-right-bg-rgb), 0.80);
}

/* CRITICAL: Keep backgrounds during closing animation */
body.cb-offcanvas-closing #cb-offcanvas-left{
  /* Maintain tinted backgrounds during closing animation */
  background: rgba(var(--cb-left-bg-rgb), 0.80) !important;
}
body.cb-offcanvas-closing #cb-offcanvas-right{
  /* Maintain tinted backgrounds during closing animation */
  background: rgba(var(--cb-right-bg-rgb), 0.80) !important;
}

/* Token Layer - DO NOT TOUCH */
.cb-offcanvas .cb-menu-dyn-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
  /* Make tokens slightly more transparent than before.  Tokens should remain
     visible but not distract from the very transparent panel backgrounds. */
  opacity:0.70;
}
.cb-offcanvas h5,.cb-offcanvas ul,.cb-offcanvas a,.cb-offcanvas p{
  position:relative;
  /* Make sure headings and menu items always sit above the token layer */
  z-index:10;
}

/* Headings -- v78: restored to readable size */
.cb-offcanvas h5{
  margin:0 0 14px 0;
  padding:0 2px;
  font-size:.82rem;
  letter-spacing:.18em;
  font-weight:700;
  text-transform:uppercase;
  opacity:1;
  text-shadow:0 1px 2px rgba(0,0,0,.15);
}

/* Headings adopt the opposite panel colour dynamically */
/* Override the heading colours so that each menu heading uses the
   opposite colour to its links.  This matches the colour of the
   cursor bar and underline and improves readability. */
#cb-offcanvas-right h5{
  /* Align right header text with right-panel links */
  margin-left:-20px;
  padding-left:12px;
  text-align:left;
  /* Right menu headers should match the opposite pill colour (left pill) */
  color:var(--cb-left-pill-base) !important;
}

#cb-offcanvas-left h5{
  /* Align left header text with left-panel links */
  margin-right:-20px;
  padding-right:12px;
  text-align:right;
  /* Left menu headers should match the opposite pill colour (right pill) */
  color:var(--cb-right-pill-base) !important;
}

/* Lists - TIGHTER SPACING */
.cb-offcanvas ul{
  list-style:none;
  margin:0 0 20px 0;
  padding:0;
}

.cb-offcanvas li{
  /* Allow animations to control opacity.  Default opacity will be 0 until
     animations run. */
  margin-bottom:4px;
  padding:0 2px;
}

.cb-offcanvas li+li{margin-top:0;}

/* =============================================
   SIMPLEST POSSIBLE METHOD: BORDER-BOTTOM
   ============================================= */

/* Base styling for off-canvas links.  Use relative positioning so
   pseudo-elements (underline and cursor bar) can be positioned
   absolutely within the anchor.  Padding will be adjusted per
   panel. */
.cb-offcanvas a{
  display:inline-block;
  position:relative;
  font-size:.76rem;
  padding:5px 0px 3px 0px;
  border-bottom:none;
  transition:border-bottom-color 0.2s ease;
}


/* Off-canvas link colours depend on variables updated by PHP */
#cb-offcanvas-left a{
  color:var(--cb-right-pill-base) !important;
  border-bottom-color:transparent;
  /* Mirror the right panel spacing: pull text in from the right so
     the cursor bar does not touch the letters. */
  margin-right:-20px;
  padding-right:12px;
}
#cb-offcanvas-right a{
  color:var(--cb-right-pill-base) !important;
  transition:background .25s,color .25s,box-shadow .25s,border-bottom-color .25s;
}

/*
 * Raise the z-index of off-canvas links and explicitly enable pointer events.
 * In certain scenarios tokens or overlays may sit above the anchor tags,
 * preventing clicks from registering.  A higher z-index and explicit
 * pointer-events ensure the links remain clickable and on a higher layer.
 */
#cb-offcanvas-left a,
#cb-offcanvas-right a{
  z-index:100;
  pointer-events:auto;
}

/*
 * Ensure off-canvas links and the main MENU button display a pointer cursor on hover.
 * Without an explicit cursor property the default may be inherited, which can
 * confuse users who expect these items to be clickable.  Assigning
 * cursor:pointer makes it obvious that the text is an interactive link.
 */
/*
 * Ensure off-canvas links and the main MENU button display a pointer cursor on hover.
 * Elevate their stacking context and explicitly enable pointer events.  The
 * `!important` flags guarantee these rules override any other declarations.
 */
#cb-offcanvas-left a,
#cb-offcanvas-right a,
.cb-menu-text{
  cursor:pointer !important;
  /* Place the off-canvas links and MENU button above the overlay.  The
     overlay uses z-index 14400; assigning 19600 ensures they remain
     interactive. */
  z-index:19600 !important;
  pointer-events:auto !important;
}

/*
 * Underline and coloured border on hover.  Left panel links adopt the
 * pink accent; right panel links adopt the green accent.  We also
 * ensure the right panel links have a small left margin so the cursor
 * doesn't sit directly on the first letter.
 */
/* Remove default left margin; our cursor bar supplies spacing */
#cb-offcanvas-right a{
  margin-left:0;
}

/* When hovering over links in the left and right panels, apply an
   underline using the opposite colour.  Remove the built-in
   text-decoration to avoid double underlines. */
#cb-offcanvas-left a:hover,
#cb-offcanvas-right a:hover{
  border-bottom:none;
  text-decoration:none;
}

/* Add a vertical "cursor" bar that fades in on hover.  For the
   right off-canvas menu (MENU), the bar is on the left.  For the
   left off-canvas menu (hamburger), the bar is on the right.  The
   bar uses the accent colour from the opposite panel to ensure
   contrast. */
#cb-offcanvas-right a{
  /* Pull the anchor flush with the panel's left edge.  The off-canvas
     panels have a 20px left padding; applying a negative margin
     counteracts this so the cursor bar sits directly at the edge of
     the menu.  The text is indented with 12px of padding so there's
     a gap between the bar and the text. */
  margin-left:-20px;
  padding-left:12px;
}
#cb-offcanvas-right a::before{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  top:auto;
  width:2px;
  height:70%;
  background:currentColor;
  opacity:0;
  transition:opacity .25s ease;
}
#cb-offcanvas-left a{
  color:var(--cb-hamburger-pink) !important;
  border-bottom-color:transparent;
  /* Mirror the right panel spacing: pull text in from the right so
     the cursor bar does not touch the letters. */
  margin-right:-20px;
  padding-right:12px;
}
#cb-offcanvas-left a::after{
  content:'';
  position:absolute;
  right:0;
  bottom:0;
  top:auto;
  width:2px;
  height:70%;
  background:currentColor;
  opacity:0;
  transition:opacity .25s ease;
}
#cb-offcanvas-right a:hover::before,
#cb-offcanvas-left a:hover::after{
  opacity:1;
}

/*
 * Underline animations.  The underline should only span the width of
 * the link text, not extend under the cursor bar.  We use the
 * opposite colour (matching the cursor bar) for the underline.  For
 * the right panel, the underline begins just after the cursor bar; for
 * the left panel it ends just before the bar.  On hover the line
 * expands from zero width to full width with a smooth transition.
 */
#cb-offcanvas-right a::after{
  content:'';
  position:absolute;
  bottom:0;
  left:12px;
  right:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
  pointer-events:none;
}
#cb-offcanvas-right a:hover::after{
  transform:scaleX(1);
}
#cb-offcanvas-left a::before{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:12px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s ease;
  pointer-events:none;
}
#cb-offcanvas-left a:hover::before{
  transform:scaleX(1);
}

/* Paragraph inherits right link colour */
#cb-offcanvas-right p{
  color:var(--cb-right-link-color);
  font-size:.48rem;
  line-height:1.45;
  word-wrap:break-word;
  overflow-wrap:break-word;
  padding:0 6px;
  margin:0 0 20px 0;
}

/*
 * Removed the previous hover styling that inverted colours and added a
 * drop shadow.  These were making the entire link background change on
 * hover, which reduced contrast on light backgrounds.  The new
 * border-bottom animation defined below provides a subtler cue.
 */

/*
 * Generic navigation link styling used for the off-canvas menus.  We set
 * a pointer cursor and underline on hover explicitly here because other
 * selectors may override anchor defaults.  These rules apply to any
 * element with the class .cb-nav-link.
 */
.cb-nav-link{
  cursor:pointer !important;
}
.cb-nav-link:hover{
  text-decoration:underline !important;
}

/*
 * Navigation item styling borrowed from the Twenty Twenty-Three theme.
 * Display each link as a block with padding and underline on hover.
 * These rules apply to the class .wp-block-navigation-item__content used in
 * the rebuilt off-canvas menus.
 */
.wp-block-navigation-item__content{
  display:block;
  padding:6px 0;
  cursor:pointer !important;
  text-decoration:none;
  /* Inherit colour from the surrounding panel */
  color:inherit;
  position:relative;
  /* Place off-canvas navigation links above the overlay.  The overlay
     uses z-index 14400; assigning a value of 19600 ensures that
     links remain clickable when the overlay is visible. */
  z-index:19600;
}
.wp-block-navigation-item__content:hover{
  text-decoration:underline;
}

/* Removed the old pseudo-element highlight bar rules.  We now rely on
   a simple border-bottom animation defined earlier. */

/* Body states */
body.cb-offcanvas-open,body.cb-overlay-open{overflow:hidden;}

/* Header */
/*
 * Site header uses a three-column CSS grid to ensure the brand is
 * always centred between the left cluster and the right menu
 * trigger.  Previously we used flexbox with space-between, which
 * allowed the left controls to overlap the centred logo on small
 * screens.  Using grid guarantees the logo occupies the middle
 * column regardless of the width of the left or right clusters.
 */
.cb-site-header{
  position:fixed;
  top:0;left:0;right:0;
  height:50px;
  background:#fff;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  border-bottom:1px solid var(--cb-border-soft);
  padding:0 16px;
  z-index:var(--cb-z-header);
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--cb-color-body);
}
/* Site brand sits in the middle column and remains centred on all
   screen sizes.  Remove absolute positioning and use grid
   alignment. */
.cb-site-brand{
  grid-column:2;
  justify-self:center;
  font-family:'CBPrimary','Times New Roman',serif;
  font-size:.88rem;
  letter-spacing:.30em;
  font-weight:500;
  line-height:1;
  color:var(--cb-color-heading);
  /* Subtle shadow to improve contrast against varying backgrounds */
  text-shadow:0 1px 2px rgba(0,0,0,.1);
  pointer-events:auto;
  white-space:nowrap;
}
.cb-brand-link{
  color:inherit;
  text-decoration:none;
}

/* Face Logo Styling */
.cb-face-logo-static {
  display: block !important;
  height: 40px;
  width: auto;
  transition: filter 0.5s ease;
}

.cb-face-logo-animated {
  display: block !important;
  margin: 0 auto;
  transition: transform 0.3s ease;
  max-width: 200px;
  width: 100%;
  height: auto;
}

.cb-face-logo-animated:hover {
  transform: scale(1.05);
}

.cb-eye-pupils {
  transition: transform 0.1s ease-out;
}

.cb-face-outline {
  transition: stroke 0.5s ease;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.cb-pupil {
  transition: fill 0.5s ease;
}

/* Ensure brand container can hold the face logo */
.cb-site-brand {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: -2px; /* Move logo up slightly */
}

.cb-site-brand .cb-brand-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Star gate face logo */
#cb-star-gate .cb-star-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#cb-star-gate .cb-face-logo-animated {
  cursor: pointer;
}
.cb-left-cluster{
  grid-column:1;
  display:flex;
  align-items:center;
  gap:16px;
  height:70%;
  justify-self:start;
}

/* Back Pill */
/*
 * Back button styling.  The colours derive from the randomly
 * selected palette (see boolymon_output_pastel_colors in functions.php).
 * We use the left panel base colour for the background and the opposite
 * panel colour for the text.  On hover the background lightens using
 * the left panel's hover background value.
 */
.cb-back-link{
  background:var(--cb-left-bg-color);
  color:#fff;
  border:0;
  /* Slightly smaller */
  padding:.40rem .72rem .36rem;
  font-family:'Courier New', Courier, monospace;
  font-size:.54rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  line-height:1;
  display:none;
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.15);
  cursor:pointer;
  /* Match smooth colour transition behaviour of MENU pill */
  transition:background .5s,color .5s,transform .2s,box-shadow .5s;
}
.cb-back-link:hover{
  /* On hover only the background colour changes; text remains white */
  background:var(--cb-left-hover-bg);
  color:#fff;
}
.cb-back-link:active{transform:translateY(1px);}

/* Show the back button on all pages except the front page.  The back
   button is hidden by default; we reveal it for interior pages via
   this body selector. */
body:not(.home) .cb-back-link{
  display:inline-block;
}

/* Hamburger - PINK STAYS, WHITE LINES TURN BLACK ON HOVER */
.cb-hamburger{
  margin-left:2px;
  background:var(--cb-hamburger-pink);
  border:0;
  width:32px;
  /* Increase height and adjust padding so all three lines are fully visible */
  /* Reduce height and add explicit gap between lines to bring them closer
     together.  A smaller height combined with a gap yields a more
     compact hamburger icon. */
  height:24px;
  padding:4px 6px;
  display:flex;
  flex-direction:column;
  gap:3px;
  justify-content:center;
  cursor:pointer;
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.18);
  transition:background .5s, box-shadow .5s, transform .2s;
}
.cb-hamburger span{
  /* Standard three-line hamburger: simple, even bars */
  height:2px;
  width:100%;
  background:#fff;
  border-radius:999px;
  transition:background .25s ease;
}
.cb-hamburger:hover span{
  /* Invert the line colour on hover using the high-contrast colour
     computed for the inverted hamburger background.  This ensures
     the lines remain visible against the new colour. */
  background:var(--cb-hamburger-text-hover);
}
.cb-hamburger:active{transform:translateY(1px);}

/* On hover the hamburger background becomes slightly lighter for a subtle cue */
.cb-hamburger:hover{
  background:var(--cb-hamburger-pink-hover);
}

/* Keep hamburger pink while closing */
body.cb-offcanvas-closing .cb-hamburger{
  margin-left:2px;
  background:var(--cb-hamburger-pink) !important;
}
body.cb-offcanvas-closing .cb-hamburger span{
  background:#fff !important;
}

/* MENU Button - SMALLER, COURIER FONT, DARK GREY, TEXT SHIFTED RIGHT */
.cb-menu-text{
  background:var(--cb-menu-green);
  /* Use the dynamically computed text colour for the MENU pill.  This
     ensures sufficient contrast with the background regardless of
     palette choice. */
  color:var(--cb-menu-text-color);
  border:0;
  padding:.50rem .95rem .48rem .85rem;
  font-family:'Courier New',Courier,monospace;
  font-size:.54rem;
  letter-spacing:.24em;
  font-weight:600;
  cursor:pointer;
  line-height:1;
  text-transform:uppercase;
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 5px rgba(0,0,0,.22);
  transition:background .5s,color .5s,transform .2s,box-shadow .5s;
  text-align:left;
  /* Place the MENU button in the rightmost grid column */
  grid-column:3;
  justify-self:end;
}
.cb-menu-text:hover{
  /* Invert the menu pill colours on hover: use the panel's text colour
     for the background and the panel's background colour for the text */
  /* Use the inverted MENU button background colour (derived from the
     opposite palette colour) and the corresponding high-contrast
     text colour. */
  background:var(--cb-menu-green-hover);
  color:var(--cb-menu-text-hover);
  box-shadow:0 0 0 1px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.28);
}
.cb-menu-text:active{transform:translateY(1px);}

/* Keep MENU button green while closing */
body.cb-offcanvas-closing .cb-menu-text{
  background:var(--cb-menu-green) !important;
  color:#555 !important;
}

/* Subpage State */
body.cb-subpage .cb-back-link{display:inline-block;}
body.cb-subpage .cb-hamburger,
body.cb-subpage .cb-menu-text{
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
body.cb-subpage .cb-site-brand{
  left:140px;
  transform:translate(-50%, 0);
}

/* Layout */
#cb-main{padding-top:50px;}

/* Page Content */
.cb-page{
  padding:4.6rem 2rem 6rem;
  max-width:1280px;
  margin:0 auto;
}
.cb-page-header{
  text-align:center;
  margin:0 0 2.8rem;
}
.cb-page-title{
  margin:0;
  font-size:1.10rem;
  letter-spacing:.26em;
  font-weight:600;
  text-transform:uppercase;
  color:var(--cb-color-heading);
}
.cb-page-subtitle{
  margin:1rem auto 0;
  max-width:760px;
  font-size:.60rem;
  line-height:1.5;
  letter-spacing:.04em;
  font-weight:400;
  color:var(--cb-color-heading-alt);
}
.center{text-align:center;}

/* Star Gate */
#cb-star-gate{
  position:fixed;
  inset:0;
  z-index:var(--cb-z-stargate);
  background:radial-gradient(circle at 50% 45%,#ffffff 0%,#ffffff 38%,#f7f7f7 60%,#f1f1f1 78%,#ececec 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:9vh;
  color:#111;
  font-family:'CBPrimary','Times New Roman',serif;
}
#cb-star-gate.cb-star-fade{
  animation:cbStarExit .42s ease forwards;
}
@keyframes cbStarExit{
  0%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(.96);}
}
.cb-gate-header{
  margin-bottom:12vh;
  text-align:center;
}
.cb-gate-brand{
  margin:0;
  font-size:1.20rem;
  letter-spacing:.32em;
  font-weight:500;
}
.cb-star-stage{
  position:relative;
  width:320px;
  height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cb-star-wrapper{
  position:relative;
  width:180px;
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.cb-star-line{
  --rot:0deg;
  position:absolute;
  left:50%;top:50%;
  width:1.5px;
  height:90px;
  margin-left:-0.75px;
  margin-top:-45px;
  transform-origin:50% 50%;
  transform:rotate(var(--rot));
  background:#bbb;
  opacity:.76;
  border-radius:1px;
}

body.cb-not-entered{overflow:hidden;}

/* Generic Sections / Buttons */
.cb-section{margin:0 0 4rem;}
.cb-section-title{
  font-size:.86rem;
  letter-spacing:.20em;
  font-weight:600;
  text-transform:uppercase;
  margin:0 0 2rem;
  text-align:center;
  color:var(--cb-color-heading);
}
.cb-info-card{
  border:1px solid var(--cb-border-soft);
  padding:2rem;
  background:#fff;
}
.cb-card-grid{display:grid;gap:2rem;}
.cb-card-grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.cb-btn-solid,.cb-btn-outline{
  display:inline-block;
  padding:.70rem 1.4rem;
  font-size:.56rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  text-decoration:none;
  border-radius:18px;
  transition:all .3s ease;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.12);
}
.cb-btn-solid{background:var(--cb-color-heading);color:#fff;border-color:rgba(0,0,0,.12);}
.cb-btn-solid:hover{background:var(--cb-color-heading-alt);}
.cb-btn-outline{
  background:transparent;
  color:#000;
  border:1px solid var(--cb-border);

}
.cb-btn-outline:hover{
  background:var(--cb-color-heading);
  color:#fff;

  border-color:var(--cb-color-heading);
}
.cb-btn-row{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:2rem;
}
.cb-lead{
  font-size:.68rem;
  line-height:1.4;
  margin:0 0 1.5rem;
}
.cb-meta{
  list-style:none;
  padding:0;
  margin:0;
  font-size:.54rem;
  line-height:1.5;
}
.cb-meta li{margin-bottom:.5rem;}
.cb-meta a{color:inherit;text-decoration:underline;}
.cb-meta a:hover{text-decoration:none;}
.cb-tight{margin-top:0;}

/* FAQ */
.cb-faq-list{max-width:900px;margin:0 auto;}
.cb-faq-group{
  border:1px solid var(--cb-border-soft);
  margin-bottom:1rem;
  cursor:pointer;
}
.cb-faq-question{
  padding:1.2rem 1.5rem;
  font-size:.62rem;
  letter-spacing:.08em;
  font-weight:600;
  background:#f9f9f9;
  position:relative;
}
.cb-faq-question:after{
  content:'+';
  position:absolute;
  right:1.5rem;
  top:50%;
  transform:translateY(-50%);
  font-size:.8rem;
  transition:transform .3s;
}
.cb-faq-group.open .cb-faq-question:after{
  transform:translateY(-50%) rotate(45deg);
}
.cb-faq-answer{
  padding:0 1.5rem;
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease,padding .3s ease;
}
.cb-faq-group.open .cb-faq-answer{
  max-height:200px;
  padding:1.2rem 1.5rem;
}

/* Contact */
.cb-contact-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:4rem;
  max-width:1100px;
  margin:0 auto;
}
.cb-contact-form-wrap{min-width:0;}
.cb-contact-subtitle{
  font-size:.72rem;
  letter-spacing:.14em;
  font-weight:600;
  text-transform:uppercase;
  margin:0 0 1.8rem;
  color:var(--cb-color-heading);
}
.cb-form-row{margin-bottom:1.5rem;}
.cb-label{
  display:block;
  font-size:var(--cb-font-small);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:.5rem;
  color:var(--cb-color-heading);
}
.cb-contact-form input[type=text],
.cb-contact-form input[type=email],
.cb-contact-form textarea{
  width:100%;
  padding:.8rem;
  border:1px solid var(--cb-border);
  font-family:inherit;
  font-size:var(--cb-font-small);
  background:#fff;
}
.cb-contact-form textarea{
  min-height:120px;
  resize:vertical;
}
.cb-submit-btn{
  background:#fff;
  color:var(--cb-right-pill-base);
  border:1px solid var(--cb-right-pill-base);
  border-radius:18px;
  padding:.80rem 1.85rem;
  font:600 var(--cb-font-small)/1.2 'Courier New',Courier,monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s;
}
.cb-submit-btn:hover,
.cb-submit-btn:focus-visible{
  background:var(--cb-right-pill-base);
  color:#fff;
  border-color:var(--cb-right-pill-base);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  outline:none;
}
.cb-form-success{
  background:#d4edda;
  color:#155724;
  padding:1rem;
  margin-bottom:1.5rem;
  border:1px solid #c3e6cb;
  border-radius:4px;
  font-size:.58rem;
}
.cb-form-error{
  background:#f8d7da;
  color:#721c24;
  padding:1rem;
  margin-bottom:1.5rem;
  border:1px solid #f5c6cb;
  border-radius:4px;
  font-size:.58rem;
}
.cb-info-title{
  font-size:.58rem;
  letter-spacing:.10em;
  font-weight:600;
  text-transform:uppercase;
  margin:0 0 .8rem;
  color:var(--cb-color-heading);
}
.cb-info-block{margin-bottom:2rem;}
.cb-muted{
  font-size:var(--cb-font-small);
  line-height:1.5;
  color:var(--cb-color-heading-alt);
  margin:0;
}
.cb-mini-links{
  list-style:none;
  padding:0;
  margin:0;
}
.cb-mini-links li{margin-bottom:.4rem;}
.cb-mini-links a{
  font-size:var(--cb-font-small);
  color:inherit;
  text-decoration:underline;
}
.cb-mini-links a:hover{text-decoration:none;}

/* Size Guide */
.sg-gender-toggle{
  display:flex;
  justify-content:center;
  margin:2rem auto 2.6rem;
  border: 2px solid rgba(0,0,0,0.22);
  width:max-content;
  font-size:0;
}
.sg-tab{
  background:#fff;
  border:0;
  cursor:pointer;
  font:.56rem/1.2 'Courier New',Courier,monospace;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:.85rem 2.1rem;
  color:var(--cb-color-body);
  transition:background .25s,color .25s;
  border-right:1px solid var(--cb-color-body);
}
.sg-tab:last-child{border-right:0;}
.sg-tab.active{background:var(--cb-color-body);color:#fff;}
.sg-tab:not(.active):hover{background:transparent !important;color:rgba(0,0,0,0.55) !important;}
.sg-group{display:none;}
.sg-group.active{display:block;}
.sg-table-wrap{overflow:auto;margin:0 0 3.4rem;}
.sg-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:740px;
  font:400 .58rem/1.45 'Courier New',Courier,monospace;
  letter-spacing:.03em;
  background:#fff;
}
.sg-table th,.sg-table td{
  border:1px solid #d8d8d8;
  padding:.74rem .70rem;
  text-align:left;
  vertical-align:middle;
  background:#fff;
  font-weight:400;
}
.sg-table thead th{
  font:600 .54rem/1.1 'Courier New',Courier,monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:#fafafa;
}
.sg-table tbody th{
  font:600 .54rem/1.1 'Courier New',Courier,monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
  width:76px;
}
.sg-table tbody tr:nth-child(even) td,
.sg-table tbody tr:nth-child(even) th{background:#fcfcfc;}
.sg-table tbody tr:hover td,
.sg-table tbody tr:hover th{background:#f2f2f2;}

/* Product Overlay */
.cb-fsp{
  position:fixed;
  inset:0;
  z-index:var(--cb-z-overlay);
  background:#000;
  display:none;
  flex-direction:column;
}
.cb-fsp.open{display:flex;}
.cb-fsp-stage{flex:1;overflow:hidden;position:relative;}
.cb-fsp-track{
  display:flex;
  height:70%;
  transition:transform .3s ease;
}
.cb-fsp-frame{
  flex:none;
  width:100%;
  height:70%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cb-fsp-frame img{
  max-width:90%;
  max-height:90%;
  object-fit:contain;
}
.cb-fsp-close{
  position:absolute;
  top:20px;
  right:20px;
  background:rgba(255,255,255,.9);
  border:0;
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
  z-index:10;
}
.cb-fsp-counter{
  position:absolute;
  top:20px;
  left:20px;
  background:rgba(255,255,255,.9);
  padding:.5rem 1rem;
  border-radius:20px;
  font-size:.5rem;
  letter-spacing:.1em;
  z-index:10;
}
.cb-fsp-info{
  background:#fff;
  padding:2rem;
  max-height:40vh;
  overflow-y:auto;
}
.cb-fsp-title{
  font-size:.9rem;
  letter-spacing:.2em;
  margin:0 0 1rem;
  text-transform:uppercase;
}
.cb-fsp-price{
  font-size:.7rem;
  margin-bottom:1rem;
  font-weight:600;
}
.cb-fsp-desc{
  font-size:.55rem;
  line-height:1.4;
  margin-bottom:1.5rem;
}
.cb-size-selector{
  display:flex;
  gap:.5rem;
  margin:1rem 0;
}
.cb-size{
  border:1px solid #000;
  background:transparent;
  padding:.5rem .8rem;
  font-size:.5rem;
  letter-spacing:.1em;
  cursor:pointer;
  transition:all .3s;
}
.cb-size.active,.cb-size:hover{
  background:#000;
  color:#fff;
}
.cb-fsp-actions{
  display:flex;
  gap:1rem;
  margin-top:1.5rem;
}
.cb-fsp-chevron{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:15px solid rgba(255,255,255,.7);
  animation:bounce 2s infinite;
}
.cb-fsp-chevron.hide{display:none;}
@keyframes bounce{
  0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0);}
  40%{transform:translateX(-50%) translateY(-10px);}
  60%{transform:translateX(-50%) translateY(-5px);}
}

.cb-chrome{transition:background .3s,color .3s;}
.cb-chrome-light{background:rgba(255,255,255,.9);color:#000;}
.cb-chrome-dark{background:rgba(0,0,0,.8);color:#fff;}

/* Ambient cells */
#cb-ambient-background .cb-cell{
  pointer-events:none;
  mix-blend-mode:normal;
}

/* Brand drift tokens - DO NOT TOUCH THIS SECTION */
.cb-offcanvas .cb-menu-dyn-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.brand-drift-v4{
  position:absolute;
  inset:0;
  width:100%;
  height:70%;
  pointer-events:none;
  z-index:0;
}
.brand-drift-token-v4{
  position:absolute;
  white-space:nowrap;
  pointer-events:none;
  z-index:0;
  opacity:0;
  mix-blend-mode:normal;
  transition:opacity .6s ease-out, transform .6s ease-out;
}
.brand-drift-token-v4.cb-token-visible{
  /* Increase token opacity slightly so they are more visible without
     overpowering the background. */
  opacity:0.26 !important;
}

/* Responsive */
@media(max-width:980px){
  .cb-page{padding:4.4rem 1.5rem 5.6rem;}
  .cb-site-brand{font-size:.84rem;}
  .cb-contact-grid{grid-template-columns:1fr;gap:3rem;}
  .cb-card-grid-2{grid-template-columns:1fr;}
}
@media(max-width:600px){
  :root{--cb-menu-width:min(280px, 70%);}  /* Narrower menu aligned to logo width on mobile */
  .cb-page{padding:4.4rem 1.3rem 5.4rem;}
  .cb-page-title{font-size:1.00rem;}
  /* In mobile view enlarge the hamburger height so the third line is not clipped */
  .cb-hamburger{
  margin-left:2px;width:30px;height:26px;}
  .cb-site-header{height:44px;padding:0 12px;}
  #cb-main{padding-top:44px;}
  .cb-offcanvas{top:44px;padding:20px 14px 50px 14px;}
  
  /* Prevent brand text overlap with back button on mobile */
  .cb-site-brand{
    font-size:.62rem;
    letter-spacing:.20em;
    max-width:calc(100vw - 180px);
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  /* Adjust left cluster spacing on mobile */
  .cb-left-cluster{
    gap:10px;
  }
  
  /* Make back button smaller on mobile */
  .cb-back-link{
    padding:.35rem .60rem .32rem;
    font-size:.48rem;
    letter-spacing:.14em;
  }
  
  /* Make menu button smaller on mobile */
  .cb-menu-text{
    padding:.42rem .75rem .40rem .65rem;
    font-size:.48rem;
    letter-spacing:.18em;
  }
  
  /* Ensure hamburger is appropriately sized */
  .cb-hamburger{
    width:28px;
    height:24px;
    padding:4px 5px;
  }
  
  /* Mobile menu adjustments - prevent text overflow */
  .cb-offcanvas h5{
    font-size:.74rem;
    word-wrap:break-word;
    overflow-wrap:break-word;
    hyphens:auto;
  }
  
  .cb-offcanvas a{
    font-size:.68rem;
    word-wrap:break-word;
    overflow-wrap:break-word;
    hyphens:auto;
    max-width:100%;
  }
  
  .cb-offcanvas p{
    font-size:.62rem;
    word-wrap:break-word;
    overflow-wrap:break-word;
  }
  
  body.cb-subpage .cb-site-brand{left:115px;}
  .cb-btn-row{flex-direction:column;align-items:center;}
  .sg-tab{padding:.75rem 1.4rem;font-size:.50rem;}
  .sg-table{min-width:540px;}
}

/* Extra small screens - further optimize spacing */
@media(max-width:400px){
  .cb-site-header{padding:0 8px;}
  
  .cb-site-brand{
    font-size:.55rem;
    letter-spacing:.16em;
    max-width:calc(100vw - 160px);
  }
  
  .cb-left-cluster{
    gap:8px;
  }
  
  .cb-back-link{
    padding:.32rem .50rem .30rem;
    font-size:.44rem;
    letter-spacing:.12em;
  }
  
  .cb-menu-text{
    padding:.38rem .65rem .36rem .55rem;
    font-size:.44rem;
    letter-spacing:.16em;
  }
  
  .cb-hamburger{
    width:26px;
    height:22px;
    padding:3px 4px;
    gap:2px;
  }
  
  .cb-hamburger span{
    height:1.5px;
  }
  
  :root{--cb-menu-width:45%;}  /* 45% width on very small screens */
}

/* Reduced Motion */
@media (prefers-reduced-motion:reduce){
  .cb-offcanvas h5,
  .cb-offcanvas li{
    transition:none;
    opacity:1;
    transform:none;
  }
  #cb-star-gate{transition:none;}
  .cb-fsp-chevron{animation:none;}
  .brand-drift-token-v4{transition:none;}
}

/* Patch: right-align text in left offcanvas */
#cb-offcanvas-left a{
  color:var(--cb-hamburger-pink) !important;
  border-bottom-color:transparent;
  /* Mirror the right panel spacing: pull text in from the right so
     the cursor bar does not touch the letters. */
  margin-right:-20px;
  padding-right:12px;
}
#cb-offcanvas-left a::after{
  right:0;
  left:auto;
}

#cb-offcanvas-left ul{ text-align:right; }

/* Darken headers and cursor elements slightly so they read darker than the panel backgrounds,
   regardless of the underlying palette colours. */
#cb-offcanvas-right h5,
#cb-offcanvas-left h5,
#cb-offcanvas-right a::before,
#cb-offcanvas-left a::after,
#cb-offcanvas-right a::after,
#cb-offcanvas-left a::before{
  filter:brightness(0.85);
}


/* Hide pills until the palette has been applied for this tab, to avoid any
   brief flash of a different colour during reloads.  We only control
   their visibility here; colour transitions and tab-palette switching
   remain unchanged. */
.cb-hamburger,
.cb-menu-text,
.cb-back-link{
  opacity:0;
  visibility:hidden;
  /* Keep palette-fade-in, but ALSO preserve smooth hover transitions */
  transition: opacity .25s ease,
              background-color .5s ease,
              color .5s ease,
              border-color .5s ease,
              box-shadow .5s ease,
              transform .5s ease;
}

html.cb-palette-ready .cb-hamburger,
html.cb-palette-ready .cb-menu-text,
html.cb-palette-ready .cb-back-link{
  opacity:1;
  visibility:visible;
}

html.cb-palette-ready .cb-hamburger,
html.cb-palette-ready .cb-menu-text,
html.cb-palette-ready .cb-back-link{
  opacity:1;
}
so they remain readable against
   dark backgrounds without feeling overly fluorescent. */
/* On interior pages, hide the main MENU and hamburger pills so focus stays
   on the page content. The back button remains available.
   Use .front-page instead of .home because WordPress can add .home to
   non-front-page views (e.g., blog index / some customizer previews). */
body:not(.front-page) .cb-hamburger,
body:not(.front-page) .cb-menu-text{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Off-canvas readability tuning (NO outlines/shadows):
   When the background is dark and the link colour is very bright/saturated,
   JS can set derived variables to slightly darken the panel background and
   de-fluoresce the link colour. */
#cb-offcanvas-left{ background: var(--cb-left-bg-color-display, var(--cb-left-bg-color)); }
#cb-offcanvas-right{ background: var(--cb-right-bg-color-display, var(--cb-right-bg-color)); }
#cb-offcanvas-left a,
#cb-offcanvas-left h5{ color: var(--cb-left-link-color-display, var(--cb-left-link-color)); }
#cb-offcanvas-right a,
#cb-offcanvas-right h5{ color: var(--cb-right-link-color-display, var(--cb-right-link-color)); }



/* Override off-canvas panel backgrounds to ensure a white backdrop.
   This prevents the dynamic panel colours from bleeding into the menu and
   keeps focus on the link colours instead. */
#cb-offcanvas-left,
#cb-offcanvas-right,
#cb-offcanvas-left.open,
#cb-offcanvas-right.open,
body.cb-offcanvas-closing #cb-offcanvas-left,
body.cb-offcanvas-closing #cb-offcanvas-right {
  background: #ffffff !important;
}

/* Hide hamburger + MENU pills on inner pages (v18) */
body.cb-hide-nav-pills .cb-hamburger-wrap,
body.cb-hide-nav-pills .cb-menu-pill-wrap,
body.cb-hide-nav-pills .cb-hamburger,
body.cb-hide-nav-pills .cb-menu-text{
  opacity:0 !important;
  pointer-events:none !important;
}

/* Bright link readability on white (v22) */
html.cb-bright-links #cb-offcanvas-left a,
html.cb-bright-links #cb-offcanvas-right a,
html.cb-bright-links .cb-site-header a,
html.cb-bright-links .cb-menu-link{
  text-shadow: 0 1px 0 rgba(0,0,0,0.28), 0 0 10px rgba(0,0,0,0.12);
  -webkit-text-stroke: 0.35px rgba(0,0,0,0.28);
}

/* v23: ensure static HTML body doesn't fight theme spacing */
.cb-static-page .cb-static-html{max-width:100%;}


/* === Page UI button normalization (white default, theme hover) === */
#cb-main a.cb-btn,
#cb-main a.button,
#cb-main .wp-block-button__link,
#cb-main button:not(.menu-button):not(.cb-hamburger):not(.cb-back-link),
#cb-main input[type="submit"],
#cb-main input[type="button"],
#cb-main input[type="reset"]{
  background:#fff;
  color:var(--cb-right-pill-base);
  border:1px solid var(--cb-right-pill-base);
  border-radius:18px;
  padding:.80rem 1.85rem;
  font-family:'Courier New',Courier,monospace;
  font-size:var(--cb-font-small);
  font:600 var(--cb-font-small)/1.2 'Courier New',Courier,monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s;
}
#cb-main a.cb-btn:hover,
#cb-main a.button:hover,
#cb-main .wp-block-button__link:hover,
#cb-main button:not(.menu-button):not(.cb-hamburger):not(.cb-back-link):not(.sg-tab):hover,
#cb-main input[type="submit"]:hover,
#cb-main input[type="button"]:hover,
#cb-main input[type="reset"]:hover,
#cb-main a.cb-btn:focus-visible,
#cb-main a.button:focus-visible,
#cb-main .wp-block-button__link:focus-visible,
#cb-main button:not(.menu-button):not(.cb-hamburger):not(.cb-back-link):not(.sg-tab):focus-visible,
#cb-main input[type="submit"]:focus-visible,
#cb-main input[type="button"]:focus-visible,
#cb-main input[type="reset"]:focus-visible{
  background:var(--cb-right-pill-base);
  color:#fff;
  border-color:var(--cb-right-pill-base);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  outline:none;
}

/* === Typography consistency inside pages === */
#cb-main{
  font-size:1rem;
  line-height:var(--cb-line-height);
}
#cb-main p,
#cb-main li,
#cb-main label,
#cb-main input,
#cb-main textarea,
#cb-main select{
  font-size:1rem;
}
#cb-main small,
#cb-main .cb-small,
#cb-main .cb-muted,
#cb-main .helper-text,
#cb-main .form-note,
#cb-main .info-text{
  font-size:var(--cb-font-small);
  letter-spacing:.10em;
}
#cb-main h1,
#cb-main h2,
#cb-main h3,
#cb-main h4,
#cb-main h5{
  line-height:1.15;
}


/* === Contact / forms: v28 tighten label & field rhythm === */
.cb-contact-form .cb-label{
  display:block;
  font:600 var(--cb-font-small)/1.2 'Courier New',Courier,monospace;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 .55rem;
}
.cb-contact-form .cb-form-row{margin:0 0 1.55rem;}
.cb-contact-form input[type="text"],
.cb-contact-form input[type="email"],
.cb-contact-form textarea{
  width:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,0.22);
  border-radius:18px;
  padding:.85rem 1.0rem;
  font:400 1rem/1.35 'Courier New',Courier,monospace;
  letter-spacing:.04em;
}
.cb-contact-form textarea{min-height:170px; resize:vertical;}
.cb-contact-form input:focus-visible,
.cb-contact-form textarea:focus-visible{
  outline:2px solid var(--cb-right-pill-base);
  outline-offset:2px;
  border-color:var(--cb-right-pill-base);
}





/* =========================================================
   Page-only typography + square button system (requested)
   Scope: ONLY inside .cb-page (does not affect menus/pills)
   ========================================================= */
.cb-page .cb-page-title{font-size:.92rem;}
.cb-page .cb-page-subtitle{font-size:.56rem;}

.cb-page h2{font-size:.70rem;letter-spacing:.14em;}
.cb-page h3{font-size:.62rem;letter-spacing:.12em;}
.cb-page p, .cb-page li, .cb-page label, .cb-page input, .cb-page textarea{
  font-size:.56rem;
  line-height:1.55;
}

/* Square, thin-border buttons used across all page templates */
.cb-page .cb-btn-solid,
.cb-page .cb-btn-outline,
.cb-page .cb-submit-btn,
.cb-page .wp-block-button__link,
.cb-page a.cb-btn-solid,
.cb-page a.cb-btn-outline{
  border-radius:2px !important;
  border-width:1px;
}

/* Make solid/outline buttons match the submit button scale */
.cb-page .cb-btn-solid,
.cb-page .cb-btn-outline{
  padding:.80rem 1.85rem;
}

/* Ensure the contact submit button is NOT pill/rounded */
.cb-page.cb-contact-page .cb-submit-btn{border-radius:2px !important;}



/* === BOOLYMON V33 FIXES (pages + size guide + forms) === */

/* Size Guide: keep selected state visible; disable hover styling changes */
.cb-size-guide .sg-tab{
  background: rgba(0,0,0,0.06);
}
.cb-size-guide .sg-tab.active{
  background: var(--cb-color-body);
  color: #fff;
}
.cb-size-guide .sg-tab:hover,
.cb-size-guide .sg-tab:not(.active):hover{
  background: inherit !important;
  color: inherit !important;
}

/* Pages: make typography smaller and consistent (do NOT touch menus/pills) */
.cb-page.cb-static-page,
.cb-page.cb-static-page p,
.cb-page.cb-static-page li,
.cb-page.cb-static-page a,
.cb-page.cb-static-page span{
  font-size: .78rem;
  line-height: 1.55;
}
.cb-page.cb-static-page h1,
.cb-page.cb-static-page .cb-page-title{
  font-size: .95rem;
  line-height: 1.2;
}
.cb-page.cb-static-page h2,
.cb-page.cb-static-page h3{
  font-size: .82rem;
  line-height: 1.25;
}

/* FAQ: smaller question/answer sizing */
.cb-page .cb-faq-question{font-size:.54rem;}
.cb-page .cb-faq-answer,
.cb-page .cb-faq-answer p{font-size:.78rem; line-height:1.55;}

/* Contact: labels match right-side sizing; inputs square */
.cb-page .cb-contact-subtitle{font-size:.56rem; letter-spacing:.14em;}
.cb-page form label,
.cb-page .cb-label{
  font-size: var(--cb-font-small);
  letter-spacing:.14em;
}
.cb-page input[type="text"],
.cb-page input[type="email"],
.cb-page input[type="tel"],
.cb-page input[type="search"],
.cb-page input[type="url"],
.cb-page input[type="password"],
.cb-page textarea,
.cb-page select{
  border-radius: 0 !important;
}

/* Page buttons: both default grey; hover becomes theme color */
.cb-page a.cb-btn,
.cb-page a.button,
.cb-page .wp-block-button__link,
.cb-page button:not(.menu-button):not(.cb-hamburger):not(.cb-back-link):not(.sg-tab),
.cb-page input[type="submit"],
.cb-page input[type="button"],
.cb-page input[type="reset"],
.cb-page .cb-btn-solid,
.cb-page .cb-btn-outline{
  border-radius: 0 !important;
  background: rgba(0,0,0,0.10) !important;
  color: var(--cb-color-body) !important;
  border-color: rgba(0,0,0,0.18) !important;
}
.cb-page a.cb-btn:hover,
.cb-page a.button:hover,
.cb-page .wp-block-button__link:hover,
.cb-page button:not(.menu-button):not(.cb-hamburger):not(.cb-back-link):not(.sg-tab):hover,
.cb-page input[type="submit"]:hover,
.cb-page input[type="button"]:hover,
.cb-page input[type="reset"]:hover,
.cb-page .cb-btn-solid:hover,
.cb-page .cb-btn-outline:hover{
  background: var(--cb-color-heading) !important;
  color: #fff !important;
  border-color: var(--cb-color-heading) !important;
}

/* === v34 page typography tighten (pages only; menus unaffected) === */
.cb-page{
  font-size: .88rem;
  line-height: 1.45;
}
.cb-page p,
.cb-page li,
.cb-page .cb-page-subtitle{
  font-size: .88rem;
}
.cb-page .cb-page-title{font-size:1.02rem;}
/* Support/FAQ accordions */
.cb-page .cb-accordion-question{font-size:.78rem;}
.cb-page .cb-accordion-answer,
.cb-page .cb-accordion-answer p{font-size:.86rem;}

/* === v34 Contact: smaller labels, square fields, square submit === */
.cb-contact-page .cb-contact-subtitle{font-size:.58rem !important;}
.cb-contact-page .cb-label{font-size:.52rem !important; line-height:1.2 !important;}
.cb-contact-page .cb-contact-form input[type="text"],
.cb-contact-page .cb-contact-form input[type="email"],
.cb-contact-page .cb-contact-form textarea{
  border-radius:2px !important;
  font-size:.88rem !important;
  padding:.72rem .9rem !important;
}
.cb-contact-page .cb-submit-btn{
  border-radius:2px !important;
  padding:.70rem 1.35rem !important;
  font-size:.60rem !important;
}


/* ------------------------------------------------------------
   Page typography + card backgrounds (Shipping / Returns / FAQ / About)
   - Use Courier New for body copy (headers keep existing type)
   - Slightly larger than contact body, but still compact
   - Ensure copy sits on soft grey panels for readability
------------------------------------------------------------ */

.cb-shipping-page .cb-info-card,
.cb-returns-page .cb-info-card,
.cb-about-page .cb-info-card,
.cb-faq-page .cb-faq-group{
  background: rgba(235,235,235,.70);
  border:1px solid var(--cb-border-soft);
}

.cb-shipping-page .cb-info-card *,
.cb-returns-page .cb-info-card *,
.cb-about-page .cb-info-card *,
.cb-faq-page .cb-faq-group *{
  font-family: "Courier New", Courier, monospace;
}

/* Keep headers/title styling untouched */
.cb-shipping-page h1, .cb-shipping-page h2, .cb-shipping-page h3,
.cb-returns-page h1, .cb-returns-page h2, .cb-returns-page h3,
.cb-about-page h1, .cb-about-page h2, .cb-about-page h3,
.cb-faq-page h1, .cb-faq-page h2, .cb-faq-page h3{
  font-family: inherit;
}

/* Body copy sizing (slightly larger than contact, but not huge) */
.cb-shipping-page p, .cb-shipping-page li,
.cb-returns-page p, .cb-returns-page li,
.cb-about-page p, .cb-about-page li{
  font-size: .72rem;
  line-height: 1.6;
  letter-spacing: .01em;
}

.cb-shipping-page .cb-meta,
.cb-returns-page .cb-meta,
.cb-about-page .cb-meta{
  font-size: .66rem;
}

/* FAQ: make question + answer smaller and consistent */
.cb-faq-page .cb-faq-question{
  font-size: .62rem;
  letter-spacing: .06em;
}
.cb-faq-page .cb-faq-answer,
.cb-faq-page .cb-faq-answer p{
  font-size: .72rem;
  line-height: 1.6;
  letter-spacing: .01em;
}

/* Make sure cards have comfortable padding even with smaller text */
.cb-shipping-page .cb-info-card,
.cb-returns-page .cb-info-card,
.cb-about-page .cb-info-card{
  padding: 1.6rem 1.6rem;
}

/* Ensure links inside cards match body type */
.cb-shipping-page .cb-info-card a,
.cb-returns-page .cb-info-card a,
.cb-about-page .cb-info-card a,
.cb-faq-page .cb-faq-group a{
  font-family: "Courier New", Courier, monospace;
}



/* Lead + subtitles on these pages should also sit on soft grey for readability */
.cb-shipping-page .cb-page-subtitle,
.cb-returns-page .cb-page-subtitle,
.cb-about-page .cb-page-subtitle,
.cb-faq-page .cb-page-subtitle,
.cb-shipping-page .cb-lead,
.cb-returns-page .cb-lead,
.cb-about-page .cb-lead{
  display:inline-block;
  background: rgba(235,235,235,.55);
  border:1px solid var(--cb-border-soft);
  padding:.75rem 1rem;
}

.cb-shipping-page .cb-page-subtitle,
.cb-returns-page .cb-page-subtitle,
.cb-about-page .cb-page-subtitle,
.cb-faq-page .cb-page-subtitle{
  font-family:"Courier New", Courier, monospace;
  font-size:.72rem;
  line-height:1.6;
}


/* Start Return / compact form layout */
.cb-form-compact .cb-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.cb-form-compact .cb-field{display:flex;flex-direction:column;gap:8px;}
.cb-form-compact .cb-field-full{grid-column:1/-1;}
@media (max-width: 900px){.cb-form-compact .cb-form-grid{grid-template-columns:1fr;}}

/* ========================================
   WOOCOMMERCE FORMS STYLING
   Consistent Courier New aesthetic for all forms
   ======================================== */

/* Sign-in and Account Forms - Global Styling */
.woocommerce,
.woocommerce-page,
.cb-signin-page .woocommerce,
.cb-account-page .woocommerce {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 9pt !important;
  color: #6a6a6a !important;
}

/* Form Headers */
.woocommerce h2,
.woocommerce h3,
.woocommerce-account h2,
.woocommerce-account h3 {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 11pt !important;
  color: #6a6a6a !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem !important;
}

/* Form Fields - Consistent Sizing */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 9pt !important;
  color: #6a6a6a !important;
  padding: 0.65rem 0.85rem !important;
  border: 1px solid var(--cb-border) !important;
  background: #fff !important;
  border-radius: 0 !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

/* Labels */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 8pt !important;
  color: #6a6a6a !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.4rem !important;
  display: block !important;
}

/* Buttons */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page button.button,
.woocommerce-page a.button,
.woocommerce-page input.button {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 9pt !important;
  padding: 0.75rem 1.5rem !important;
  background: #333 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s ease;
  font-weight: 600 !important;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page input.button:hover {
  background: #555 !important;
}

/* Password Visibility Toggle - Fix Alignment */
.woocommerce .show-password-input,
.woocommerce-page .show-password-input {
  position: relative !important;
}

.woocommerce .show-password-input .show-password-button,
.woocommerce-page .show-password-input .show-password-button {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 0.15rem 0.3rem !important;
  font-size: 6.5pt !important;
  background: #f5f5f5 !important;
  border: 1px solid #d0d0d0 !important;
  color: #6a6a6a !important;
  cursor: pointer !important;
  height: auto !important;
  max-height: 24px !important;
  line-height: 1.1 !important;
  border-radius: 2px !important;
  white-space: nowrap !important;
  z-index: 10 !important;
  font-weight: 500 !important;
}

/* Account Dashboard Navigation */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 2rem 0 !important;
  border: 1px solid var(--cb-border) !important;
  background: #fafafa !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid var(--cb-border) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
  border-bottom: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 9pt !important;
  color: #6a6a6a !important;
  text-decoration: none !important;
  padding: 0.85rem 1.2rem !important;
  display: block !important;
  transition: background 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: #fff !important;
  color: #333 !important;
  font-weight: 700 !important;
}

/* Account Dashboard Content */
.woocommerce-account .woocommerce-MyAccount-content {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 9pt !important;
  color: #6a6a6a !important;
}

.woocommerce-account .woocommerce-MyAccount-content p {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 9pt !important;
  line-height: 1.6 !important;
}

/* Tables (Orders, etc) */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 8pt !important;
  border: 1px solid var(--cb-border) !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td {
  font-family: 'Courier New', Courier, monospace !important;
  padding: 0.75rem 0.85rem !important;
  border: 1px solid var(--cb-border) !important;
  text-align: left !important;
}

.woocommerce table.shop_table th {
  background: #f5f5f5 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6a6a6a !important;
}

/* Cart Table Styling */
.woocommerce-cart table.cart,
.woocommerce-page table.cart {
  font-family: 'Courier New', Courier, monospace !important;
}

.woocommerce-cart table.cart .product-thumbnail img {
  max-width: 80px !important;
  height: auto !important;
  border: 1px solid var(--cb-border) !important;
}

/* Cart Totals */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  font-family: 'Courier New', Courier, monospace !important;
  background: #fafafa !important;
  border: 1px solid var(--cb-border) !important;
  padding: 1.5rem !important;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  /* Smaller form fields on mobile */
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .woocommerce-page form .form-row input.input-text,
  .woocommerce-page form .form-row textarea,
  .woocommerce-page form .form-row select {
    font-size: 8pt !important;
    padding: 0.55rem 0.7rem !important;
  }
  
  /* Smaller labels on mobile */
  .woocommerce form .form-row label,
  .woocommerce-page form .form-row label {
    font-size: 7pt !important;
  }
  
  /* Smaller buttons on mobile */
  .woocommerce button.button,
  .woocommerce a.button,
  .woocommerce input.button,
  .woocommerce-page button.button,
  .woocommerce-page a.button,
  .woocommerce-page input.button {
    font-size: 8pt !important;
    padding: 0.65rem 1.2rem !important;
  }
  
  /* Better password toggle button on mobile - PERFECT FIT */
  .woocommerce .show-password-input .show-password-button,
  .woocommerce-page .show-password-input .show-password-button {
    font-size: 5.5pt !important;
    padding: 0.12rem 0.25rem !important;
    right: 2px !important;
    max-height: 20px !important;
    line-height: 1 !important;
  }
  
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row input[type="password"] {
    padding-right: 40px !important; /* Make room for button */
  }
  
  /* Smaller headers on mobile */
  .woocommerce h2,
  .woocommerce h3,
  .woocommerce-account h2,
  .woocommerce-account h3 {
    font-size: 10pt !important;
  }
  
  /* Stack navigation on mobile */
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    font-size: 8pt !important;
    padding: 0.7rem 1rem !important;
  }
  
  /* Smaller table text on mobile */
  .woocommerce table.shop_table,
  .woocommerce-page table.shop_table {
    font-size: 7pt !important;
  }
  
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td,
  .woocommerce-page table.shop_table th,
  .woocommerce-page table.shop_table td {
    padding: 0.5rem 0.6rem !important;
  }
}

/* Make sure forms show on both mobile and desktop */
.woocommerce-form-login,
.woocommerce-form-register {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Two column layout for login/register on desktop */
@media (min-width: 601px) {
  .cb-signin-page .woocommerce {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important;
    max-width: 900px !important;
    margin: 0 auto !important;
  }
}

/* Single column on mobile */
@media (max-width: 600px) {
  .cb-signin-page .woocommerce {
    display: block !important;
  }
  
  .woocommerce-form-login,
  .woocommerce-form-register {
    margin-bottom: 2rem !important;
  }
}

/* Support Ticket Form Styling */
.cb-support-form {
  max-width: 700px;
  margin: 0 auto;
}

.cb-support-form .cb-form-row {
  margin-bottom: 1.5rem;
}

.cb-support-form .cb-label {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--cb-font-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--cb-color-heading);
}

.cb-support-form input[type=text],
.cb-support-form input[type=email],
.cb-support-form select,
.cb-support-form textarea {
  width: 100%;
  padding: .8rem;
  border: 1px solid var(--cb-border);
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--cb-font-small);
  background: #fff;
  color: var(--cb-color-body);
  box-sizing: border-box;
}

.cb-support-form select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23555' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.5rem;
}

.cb-support-form textarea {
  min-height: 140px;
  resize: vertical;
}

.cb-support-form button[type=submit] {
  width: 100%;
}

@media (max-width: 600px) {
  .cb-support-form input[type=text],
  .cb-support-form input[type=email],
  .cb-support-form select,
  .cb-support-form textarea {
    font-size: 8pt;
    padding: 0.65rem;
  }
  
  .cb-support-form .cb-label {
    font-size: 7pt;
  }
}

/* ========================================
   GLOBAL FONT ENFORCEMENT
   Ensure Courier New everywhere
   ======================================== */

/* Force Courier New on all elements */
* {
  font-family: 'Courier New', Courier, monospace !important;
}

/* Ensure all page content uses Courier New */
body,
html,
.cb-page,
.cb-section,
.cb-info-card,
.cb-card,
h1, h2, h3, h4, h5, h6,
p, span, div, a, li, td, th,
input, textarea, select, button,
label {
  font-family: 'Courier New', Courier, monospace !important;
}

/* WooCommerce specific elements */
.woocommerce,
.woocommerce-page,
.woocommerce *,
.woocommerce-page * {
  font-family: 'Courier New', Courier, monospace !important;
}

/* Ensure all text inputs use Courier New */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  font-family: 'Courier New', Courier, monospace !important;
}

/* Ensure all buttons use Courier New */
button,
.button,
.btn,
input[type="submit"],
input[type="button"] {
  font-family: 'Courier New', Courier, monospace !important;
}

/* ========================================
   STRICT FONT SIZE CONTROL
   Prevent any random large text
   ======================================== */

/* =====================================================
   v77 -- UNIVERSAL TYPOGRAPHY FIX
   Hierarchy: page-title > section-title > info-title > body > subtitle/small
   html base = 16px (browser default, no override)
   All sizes in rem relative to 16px base.
   DOES NOT touch menus, pills, off-canvas panels.
   ===================================================== */

/* Reset the html/body font-size to browser default so rem values are predictable */
html { font-size: 16px !important; }

/* --- Page headings (inside .cb-page only) --- */
.cb-page .cb-page-title,
.cb-page h1 {
  font-size: 0.88rem !important;   /* ~14px -- largest on page */
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  line-height: 1.2 !important;
}
.cb-page .cb-section-title,
.cb-page h2 {
  font-size: 0.72rem !important;   /* ~11.5px */
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  line-height: 1.25 !important;
}
.cb-page .cb-info-title,
.cb-page .cb-contact-subtitle,
.cb-page h3 {
  font-size: 0.66rem !important;   /* ~10.5px */
  font-weight: 600 !important;
  letter-spacing: .12em !important;
}
.cb-page h4, .cb-page h5, .cb-page h6 {
  font-size: 0.62rem !important;
  font-weight: 600 !important;
}

/* --- Page subtitle (smaller than headings) --- */
.cb-page .cb-page-subtitle {
  font-size: 0.60rem !important;   /* ~9.6px -- SMALLER than h1 */
  font-weight: 400 !important;
  letter-spacing: .06em !important;
}

/* --- Body/paragraph text (smaller than ALL headings) --- */
.cb-page p,
.cb-page li,
.cb-page .cb-muted,
.cb-page td,
.cb-page th,
.cb-page span:not(.cb-page-title):not(.cb-section-title) {
  font-size: 0.58rem !important;   /* ~9.3px */
  line-height: 1.55 !important;
}

/* --- Labels (same as body or slightly smaller) --- */
.cb-page label,
.cb-page .cb-label {
  font-size: 0.58rem !important;
  letter-spacing: .12em !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

/* --- Form inputs & textareas -- SMALLER than labels/body --- */
.cb-page input[type="text"],
.cb-page input[type="email"],
.cb-page input[type="tel"],
.cb-page input[type="password"],
.cb-page input[type="search"],
.cb-page input[type="number"],
.cb-page input[type="url"],
.cb-page textarea,
.cb-page select {
  font-size: 0.56rem !important;   /* ~9px -- smallest readable */
  padding: 0.45rem 0.65rem !important;
}

/* --- Buttons -- match heading weight, not body --- */
.cb-page button,
.cb-page .cb-submit-btn,
.cb-page .cb-btn-solid,
.cb-page .cb-btn-outline,
.cb-page a.button,
.cb-page input[type="submit"] {
  font-size: 0.60rem !important;
  letter-spacing: .14em !important;
}

/* --- WooCommerce inside cb-page -- match the same scale --- */
.cb-page .woocommerce p,
.cb-page .woocommerce td,
.cb-page .woocommerce th,
.cb-page .woocommerce li,
.cb-page .woocommerce label,
.cb-page .woocommerce-account p,
.cb-page .woocommerce-account td,
.cb-page .woocommerce-account label {
  font-size: 0.58rem !important;
}
.cb-page .woocommerce h2,
.cb-page .woocommerce h3,
.cb-page .woocommerce-account h2,
.cb-page .woocommerce-account h3 {
  font-size: 0.72rem !important;
}
.cb-page .woocommerce button.button,
.cb-page .woocommerce a.button,
.cb-page .woocommerce input.button,
.cb-page .woocommerce-page button.button,
.cb-page .woocommerce-page a.button {
  font-size: 0.60rem !important;
}
.cb-page .woocommerce input[type="text"],
.cb-page .woocommerce input[type="email"],
.cb-page .woocommerce input[type="password"],
.cb-page .woocommerce textarea,
.cb-page .woocommerce select,
.cb-page .woocommerce-page input[type="text"],
.cb-page .woocommerce-page input[type="email"],
.cb-page .woocommerce-page input[type="password"],
.cb-page .woocommerce-page textarea {
  font-size: 0.56rem !important;
  padding: 0.45rem 0.65rem !important;
}

/* --- Navigation / menus / pills -- DO NOT TOUCH (no .cb-page scope) --- */

/* --- Mobile --- */
@media (max-width: 600px) {
  html { font-size: 15px !important; }
  .cb-page .cb-page-title, .cb-page h1  { font-size: 0.84rem !important; }
  .cb-page .cb-section-title, .cb-page h2 { font-size: 0.70rem !important; }
  .cb-page input, .cb-page textarea, .cb-page select { font-size: 0.56rem !important; }
}

/* =====================================================
   v77 -- PASSWORD EYE TOGGLE -- FLEX CONTAINMENT
   Makes button a flex sibling of the input so it
   physically cannot escape the input row.
   ===================================================== */
.woocommerce .show-password-input,
.woocommerce-page .show-password-input {
  display: flex !important;
  align-items: stretch !important;
  border: 1px solid #ccc !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  background: transparent !important;
}
.woocommerce .show-password-input > input,
.woocommerce-page .show-password-input > input {
  flex: 1 1 auto !important;
  border: none !important;
  outline: none !important;
  padding: 0.55rem 0.75rem !important;
  background: transparent !important;
  min-width: 0 !important;
  font-size: 0.56rem !important;
  box-shadow: none !important;
  position: static !important;
  transform: none !important;
}
.woocommerce .show-password-input .show-password-button,
.woocommerce-page .show-password-input .show-password-button {
  /* static = stays in flow, never escapes */
  position: static !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  top: auto !important; right: auto !important;
  bottom: auto !important; left: auto !important;
  transform: none !important;
  background: #f0f0f0 !important;
  border: none !important;
  border-left: 1px solid #ccc !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  color: #666 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

/* =====================================================
   v77 -- CONTACT FORM SUCCESS -- green text under button
   ===================================================== */
.cb-form-success {
  background: #d4edda !important;
  color: #155724 !important;
  padding: 0.6rem 0.9rem !important;
  margin-top: 0.8rem !important;
  margin-bottom: 0 !important;
  border: 1px solid #c3e6cb !important;
  border-radius: 2px !important;
  font-size: 0.58rem !important;
  font-family: 'Courier New', Courier, monospace !important;
}
.cb-form-error {
  background: #f8d7da !important;
  color: #721c24 !important;
  padding: 0.6rem 0.9rem !important;
  margin-top: 0.8rem !important;
  margin-bottom: 0 !important;
  border: 1px solid #f5c6cb !important;
  border-radius: 2px !important;
  font-size: 0.58rem !important;
  font-family: 'Courier New', Courier, monospace !important;
}

/* =====================================================
   v77 -- STAR GATE brand text -- larger, bolder
   ===================================================== */
#cb-star-gate .cb-gate-brand {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: .3em !important;
  color: var(--cb-hamburger-pink, #ff4fa3) !important;
}
@media (max-width: 600px) {
  #cb-star-gate .cb-gate-brand { font-size: 1.1rem !important; }
}

/* ==========================================================
   v78 -- CART UI
   ========================================================== */
.cb-cart-page { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem 4rem; }

/* Empty state */
.cb-cart-empty {
  text-align: center; padding: 4rem 1rem;
}
.cb-cart-empty-icon { font-size: 3rem; color: #ccc; margin-bottom: 1rem; }
.cb-cart-empty-msg  { font-size: 0.72rem; letter-spacing: .08em; margin-bottom: 1.5rem; }
.cb-cart-cta {
  display: inline-block;
  padding: .65rem 2.2rem;
  background: #2a2a2a; color: #fff;
  font-size: 0.60rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.cb-cart-cta:hover { background: #444; }

/* Layout */
.cb-cart-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
}

/* Header row */
.cb-cart-header-row {
  display: grid;
  grid-template-columns: 2fr 0.7fr 0.9fr 0.8fr 30px;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 2px solid #2a2a2a;
  font-size: 0.52rem;
  letter-spacing: .16em;
  font-weight: 700;
  text-transform: uppercase;
  color: #2a2a2a;
}

/* Item row */
.cb-cart-item-row {
  display: grid;
  grid-template-columns: 2fr 0.7fr 0.9fr 0.8fr 30px;
  gap: .5rem;
  padding: 1rem 0;
  border-bottom: 1px solid #e5e5e5;
  align-items: center;
}

/* Product cell */
.cb-cart-item-product {
  display: flex; gap: .8rem; align-items: flex-start;
}
.cb-cart-thumb-link { flex-shrink: 0; }
.cb-cart-thumb-img  { width: 66px; height: 88px; object-fit: cover; border: 1px solid #e5e5e5; display: block; }
.cb-cart-item-info  { display: flex; flex-direction: column; gap: .2rem; }
.cb-cart-item-name  { font-size: 0.58rem; color: #2a2a2a; text-decoration: none; font-weight: 600; letter-spacing: .04em; }
.cb-cart-item-name:hover { text-decoration: underline; }
.cb-cart-item-variation { font-size: 0.52rem; color: #888; }

/* Price / subtotal cells */
.cb-cart-col-price,
.cb-cart-col-sub { font-size: 0.58rem; color: #2a2a2a; }
.cb-cart-col-price .woocommerce-Price-amount,
.cb-cart-col-sub  .woocommerce-Price-amount { font-size: 0.58rem; }

/* Qty stepper */
.cb-qty-wrap {
  display: flex; align-items: stretch;
  border: 1px solid #9a9a9a; width: fit-content;
}
.cb-qty-btn {
  width: 28px; background: #f5f5f5; border: none;
  font-size: 0.80rem; cursor: pointer; color: #2a2a2a;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cb-qty-btn:hover { background: #e0e0e0; }
.cb-qty-input {
  width: 36px; text-align: center;
  border: none; border-left: 1px solid #9a9a9a; border-right: 1px solid #9a9a9a;
  font-size: 0.58rem; font-family: 'Courier New', Courier, monospace;
  -moz-appearance: textfield; background: transparent; padding: 0;
}
.cb-qty-input::-webkit-outer-spin-button,
.cb-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Remove button */
.cb-cart-remove {
  background: none; border: none; cursor: pointer;
  font-size: 0.65rem; color: #aaa; padding: 0; line-height: 1;
}
.cb-cart-remove:hover { color: #c00; }

/* Coupon row */
.cb-cart-coupon-row {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.2rem 0 0; margin-top: .4rem;
}
.cb-coupon-input {
  flex: 0 0 180px;
  font-size: 0.56rem; font-family: 'Courier New', Courier, monospace;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid #9a9a9a; padding: .45rem .7rem;
  background: transparent;
}
.cb-coupon-btn {
  padding: .45rem 1rem;
  background: transparent; border: 1px solid #9a9a9a;
  font-size: 0.56rem; letter-spacing: .10em; cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  text-transform: uppercase;
}
.cb-coupon-btn:hover { background: #f5f5f5; }
.cb-coupon-msg { font-size: 0.52rem; color: #c00; }

/* Order summary panel */
.cb-cart-summary {
  position: sticky; top: 5rem;
  border: 1px solid #e5e5e5;
  padding: 1.5rem;
  background: #fafafa;
}
.cb-cart-summary-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 1.2rem;
  padding-bottom: .8rem; border-bottom: 1px solid #e5e5e5;
}
.cb-cart-summary-lines { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.5rem; }
.cb-summary-line {
  display: flex; justify-content: space-between;
  font-size: 0.56rem; color: #6a6a6a;
}
.cb-summary-line .woocommerce-Price-amount { font-size: 0.56rem; }
.cb-summary-coupon { color: #4a7c59; }
.cb-summary-coupon .cb-remove-coupon {
  background: none; border: none; font-size: 0.52rem;
  color: #aaa; cursor: pointer; margin-left: 4px; padding: 0;
}
.cb-summary-coupon .cb-remove-coupon:hover { color: #c00; }
.cb-summary-total {
  font-size: 0.66rem !important; font-weight: 700;
  color: #2a2a2a !important;
  padding-top: .7rem; border-top: 1px solid #e5e5e5; margin-top: .3rem;
}
.cb-summary-total .woocommerce-Price-amount { font-size: 0.66rem; font-weight: 700; }

/* CTA buttons in summary */
.cb-checkout-btn {
  display: block; width: 100%; box-sizing: border-box;
  padding: .85rem; text-align: center;
  background: #2a2a2a; color: #fff; text-decoration: none;
  font-size: 0.60rem; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: .6rem;
}
.cb-checkout-btn:hover { background: #444; color: #fff; }
.cb-continue-btn {
  display: block; text-align: center; text-decoration: none;
  font-size: 0.54rem; letter-spacing: .08em; color: #6a6a6a;
  padding: .4rem;
}
.cb-continue-btn:hover { color: #2a2a2a; }
.cb-cart-login-note {
  margin-top: 1rem; text-align: center;
  font-size: 0.52rem; color: #aaa;
  padding-top: .8rem; border-top: 1px solid #e5e5e5;
}
.cb-cart-login-note a { color: #6a6a6a; }

/* Mobile cart */
@media (max-width: 900px) {
  .cb-cart-layout { grid-template-columns: 1fr; gap: 2rem; }
  .cb-cart-summary { position: static; }
}
@media (max-width: 640px) {
  .cb-cart-header-row { display: none; }
  .cb-cart-item-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: .5rem;
  }
  .cb-cart-col-product { grid-column: 1 / -1; }
  .cb-cart-col-price::before { content: attr(data-label) ': '; font-weight: 700; }
  .cb-cart-col-qty::before  { content: attr(data-label) ': '; font-weight: 700; }
  .cb-cart-col-sub::before  { content: attr(data-label) ': '; font-weight: 700; }
  .cb-cart-col-rm { grid-column: 2; text-align: right; }
}

/* ==========================================================
   v78 -- SIGN IN PAGE
   ========================================================== */
.cb-signin-page { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem 4rem; }
.cb-signin-grid {
  display: grid; grid-template-columns: 1fr 300px; gap: 3rem; align-items: start;
}
.cb-social-login-wrap { margin-bottom: 1rem; }
.cb-social-notice-text {
  font-size: 0.54rem; color: #888; line-height: 1.55;
  background: #f9f9f9; border: 1px solid #e5e5e5;
  padding: .7rem .9rem;
}
.cb-social-notice-text a { color: #6a6a6a; }
.cb-signin-divider {
  display: flex; align-items: center; gap: .7rem;
  margin: 1rem 0; font-size: 0.52rem; color: #aaa; letter-spacing: .10em;
}
.cb-signin-divider::before,
.cb-signin-divider::after { content: ''; flex: 1; height: 1px; background: #e5e5e5; }
.cb-benefits-list {
  list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .5rem;
}
.cb-benefits-list li {
  font-size: 0.56rem; padding-left: 1rem; position: relative;
}
.cb-benefits-list li::before { content: '--'; position: absolute; left: 0; color: #aaa; }
.cb-signin-help { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e5e5e5; }
.cb-signin-help p { font-size: 0.54rem; margin: .3rem 0; }
.cb-signin-help a { color: #6a6a6a; }
@media (max-width: 700px) {
  .cb-signin-grid { grid-template-columns: 1fr; }
}
/* Override WC form sizing inside signin */
.cb-wc-auth-wrap .woocommerce input[type="text"],
.cb-wc-auth-wrap .woocommerce input[type="email"],
.cb-wc-auth-wrap .woocommerce input[type="password"] {
  font-size: 0.56rem !important; padding: .5rem .75rem !important;
}
.cb-wc-auth-wrap .woocommerce label { font-size: 0.56rem !important; }
.cb-wc-auth-wrap .woocommerce button.button { font-size: 0.60rem !important; }