/* ==========================================================================
   Striped Elephant 2 — main stylesheet
   Replaces Mystile's style.css/layout.css and the old child custom.css.
   Load order: WooCommerce layout CSS → RoyalSlider → css/slider.css → this file.
   Sections: 1 Tokens · 2 Base · 3 Layout · 4 Header (+ mobile menu) · 5 Slider
             6 Hero · 7 Maker & perks · 8 Product grid · 9 Product page
             10 Pages (title, content card, FAQ/Manifesto/Contact, legal)
             10b Shop pages (cart, checkout, account, forms) · 10c 404
             11 Footer · 12 Utilities · 13 Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --pink: #ee4c9b;
  --pink-dark: #b8266c;   /* text-safe pink: 5.9:1 on white (AA) */
  --teal: #21bbd3;
  --navy: #1d2b4f;
  --black: #000;
  --white: #fff;
  --bg: #f3f3f3;
  --surface: #fff;
  --muted: #4a4a4a;
  --line: #e3e3e3;

  --font-display: Impact, Haettenschweiler, "Anton", "Arial Narrow Bold", sans-serif;
  --font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  --container: 1200px;
  --gutter: 24px;
  --radius: 6px;
  --card-radius: 0;   /* product grid cards: square to match the 3D walls */
  --rs-h: 800px;          /* homepage slider height (phones scale it, see Responsive) */
  --menu-speed: .5s;      /* mobile menu open/close */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-lift: 0 10px 24px rgba(0, 0, 0, .10);
  --card-speed: .2s;
  /* 3D layers (section 12b): unitless so the counter-scale can be computed */
  --depth-p: 2400;        /* perspective distance of the 3D page (px) */
  --depth-panel: 75;      /* raised panels, px */
  --depth-button: 24;     /* buttons, px (on top of any panel they sit on) */
  --depth-cloth: 75;      /* pink homepage hero */
  --depth-slab: 40;       /* header, footer, homepage white platform */
  --depth-nested: 24;     /* panels sitting on the platform (perks) */
  --card-ease: ease-out;
  --card-rest: 28;        /* product cards at rest, px */
  --card-lift: 75;        /* product cards on hover, px */
  --button-lift: 52;      /* raised buttons on hover / keyboard focus, px */
  --depth-text: 30;       /* hero headline above the pink panel, px */
  --depth-base: 75;       /* flat pictures (slider, sheep) sink this far behind the page plane, px */
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg) url(../textures/offwhite.png);
  color: var(--black);
  font: 17px/1.6 var(--font-body);
}
img { max-width: 100%; height: auto; }
a { color: var(--pink-dark); }
a:hover { color: var(--black); }
h1, h2, h3, h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .01em;
}
h1 { font-size: 52px; }
h2 { font-size: 36px; }
h3 { font-size: 24px; }
p { margin: 0 0 var(--space-3); }
table { border-collapse: collapse; }
input, select, textarea, button { font: inherit; }

.button,
button.button,
input.button,
.single_add_to_cart_button,
.btn {
  display: inline-block;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--radius);
  --block-bg: var(--black); background: var(--block-bg);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.button:hover,
.single_add_to_cart_button:hover,
.btn:hover { --block-bg: var(--navy); background: var(--block-bg); color: var(--white); transform: translateY(-1px); }
.button.disabled, .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }

/* 3. Layout ---------------------------------------------------------------- */
.col-full {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
#content { padding-block: var(--space-5) 0; }
.home #content { padding-top: 0; }
#main { min-width: 0; }
.fix::after, .col-full::after { content: ""; display: table; clear: both; }
.nav { margin: 0; padding: 0; list-style: none; }
#sidebar, .nav-toggle, #logo, .site-description, #top .search, #top form { display: none; }

/* 4. Header ---------------------------------------------------------------- */
#wrapper { background: none; }
#top { --block-bg: var(--black); background: var(--block-bg); }
#top .nav { display: flex; justify-content: flex-end; gap: var(--space-3); }
#top .nav li { list-style: none; }
#top .nav a { color: var(--white); font-size: 13px; text-decoration: none; }
#top .nav a:hover { color: var(--pink); }
#top .cart-parent .contents { margin-left: var(--space-2); padding-left: var(--space-2); border-left: 1px solid #444; }
#top > .col-full { padding-block: var(--space-2); }
#top #top-nav { display: none; }   /* empty WP menu container */

/* Header bar: black, white title + menu */
.site-header-bar { background: var(--black); }
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter);
  --block-bg: var(--black); background: var(--block-bg);
}
#header::after { content: none; }   /* .col-full's clearfix would be a flex item and push the menu off the right edge */
body #wrapper > #header { max-width: none; padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
#header .se-brand { flex: none; }
.site-title { margin: 0; font-family: var(--font-display); font-size: 40px; line-height: 1.05; text-transform: uppercase; white-space: nowrap; }
.site-title a { color: var(--white); text-decoration: none; }
.site-title a:hover { color: var(--pink); }
#navigation { flex: 1 1 auto; max-width: none; margin: 0; padding: 0; }
#main-nav { margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-1); }
#main-nav a {
  display: block;
  padding: var(--space-2) 12px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s;
}
#main-nav a:hover,
#main-nav .current-menu-item > a,
#main-nav .current_page_item > a { color: var(--pink); }
#main-nav .sub-menu { display: none; }
#main-nav > li:last-child > a { padding-right: 0; }   /* last item's text ends at the content edge */

/* Mobile menu toggle (shown <=768px only; see Responsive) */
.se-menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--white);
  border-radius: var(--radius);
  background: none;
  color: var(--white);
  font-family: var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.se-menu-toggle:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.se-menu-bars,
.se-menu-bars::before,
.se-menu-bars::after { display: block; width: 22px; height: 3px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.se-menu-bars { position: relative; }
.se-menu-bars::before, .se-menu-bars::after { content: ""; position: absolute; left: 0; }
.se-menu-bars::before { top: -7px; }
.se-menu-bars::after { top: 7px; }
.se-menu-open .se-menu-bars { background: transparent; }
.se-menu-open .se-menu-bars::before { transform: translateY(7px) rotate(45deg); }
.se-menu-open .se-menu-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* 5. Slider (positioning only — panel transition lives in css/slider.css) */
.royalSlider { display: block; top: 0; height: var(--rs-h); margin: 0; }   /* js/slider-fit.js drops the plugin's inline 800px so this applies */
.home .royalSlider .rsNav {
  position: absolute;
  inset: auto 0 32px;
  z-index: 20;
  background: transparent;
}
.home .royalSlider .rsBullet { padding: 8px; margin: 0 2px; }   /* 24px touch target */
.home .royalSlider .rsBullet span { background: #d4d4d4; box-shadow: none; }
.home .royalSlider .rsBullet.rsNavSelected span { background: #6b6b6b; }

/* 6. Hero (flat pink panel, raised in 3D) ---------------------------------- */
.se-hero {
  position: relative;
  z-index: 5;
  width: 100vw;
  margin: 0 0 var(--space-5) calc(50% - 50vw);   /* the gap below shows the panel's walls and shadow */
  padding: 104px 0 112px;
  color: var(--white);
  text-align: center;
}

/* Pink panel (homepage hero): flat brand pink; js/depth.js raises it. */
.se-cloth {
  --block-bg: var(--pink);
  background: var(--block-bg);
}
.se-hero-inner { position: relative; }
.se-kicker { margin: 0 0 var(--space-1); font-size: 18px; font-style: italic; }
.se-headline {
  max-width: 20ch;
  margin: 0 auto var(--space-3);
  color: var(--white);
  font-size: clamp(40px, 7vw, 84px);
  line-height: .95;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--black);
}
.se-value { max-width: 46ch; margin: 0 auto var(--space-4); font-size: 20px; }
.se-cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4); margin: 0; }
.se-hero .se-btn {
  padding: 14px 28px;
  border-radius: var(--radius);
  --block-bg: var(--black);
  background: var(--block-bg);
  color: var(--white);
  font-family: var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-lift);
}
.se-hero .se-btn:hover { --block-bg: var(--navy); background: var(--block-bg); }
.se-link { color: var(--white); font-weight: 600; text-underline-offset: 4px; }
.se-link:hover { color: var(--black); }

/* 7. Maker blurb & perks strip -------------------------------------------- */
.se-maker { display: flex; align-items: center; gap: 28px; width: fit-content; margin: var(--space-5) auto; }   /* picture + text as one tight block, centred */
.se-maker img {
  flex: none;
  width: 140px;
  padding: 10px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 3px var(--pink);
}
.se-maker h2 { margin-bottom: var(--space-1); font-size: 38px; }
.se-maker p { max-width: 62ch; margin: 0; color: var(--muted); }

.se-perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-block: var(--space-4) var(--space-5);
  padding: 20px 22px;
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  --block-bg: #f7f7f7; background: var(--block-bg);
}
.se-perks strong { display: block; font-family: var(--font-display); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.se-perks span { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.se-perks-more { grid-column: 1 / -1; font-size: 14px; font-weight: 600; }
.home .se-perks { max-width: calc(var(--container) - 2 * var(--gutter)); margin-inline: auto; }

/* 8. Product grid ---------------------------------------------------------- */
#main > .se-featured-title { font-size: 40px; }   /* "Featured Products" */
.page-title, .woocommerce-products-header__title { font-size: 56px; text-transform: uppercase; }
.woocommerce-result-count { color: var(--muted); font-size: 14px; }
.woocommerce-ordering select { padding: 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 28px;
  margin: 0 0 var(--space-5);
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
  display: flex;
  flex-direction: column;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  position: relative;
  border-radius: var(--card-radius);
  --block-bg: var(--surface); background: var(--block-bg);
  box-shadow: var(--shadow-card);
  text-align: center;
}
/* Product cards: square (they become 3D blocks in section 12b). Not clipped:
   overflow: hidden would flatten the 3D; the image is rounded instead. */
.woocommerce ul.products li.product a img { border-radius: var(--card-radius) var(--card-radius) 0 0; }
@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product { transition: box-shadow var(--card-speed) var(--card-ease); }
  .woocommerce ul.products li.product:hover { box-shadow: var(--shadow-lift); }   /* flat fallback (no 3D) */
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.woocommerce ul.products li.product a img { display: block; width: 100%; margin: 0; }
/* Homepage cards: white space above the shirt matches the space under the price
   (the photos have almost no white above the shirt). */
.woocommerce ul.products[class*="columns-"] li.product { padding-top: 18px; }
/* Text block: equal space above and below */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: auto 0 0;
  padding: var(--space-3) 12px var(--space-1);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.woocommerce ul.products li.product .price {
  display: block;
  margin: 0 0 auto;
  padding-bottom: var(--space-3);
  color: var(--pink-dark);
  font-weight: 600;
}
.woocommerce ul.products li.product .button { align-self: center; margin: 0 0 var(--space-3); padding: 10px 18px; font-size: 13px; }

.woocommerce nav.woocommerce-pagination ul { display: flex; justify-content: center; gap: var(--space-2); padding: 0; border: 0; list-style: none; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { display: block; min-width: 36px; padding: 6px 10px; border-radius: 18px; font-weight: 600; text-decoration: none; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--teal); color: var(--black); }

/* Mystile's own pagination markup (nav.woo-pagination) */
.woo-pagination { display: flex; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.woo-pagination .page-numbers { display: block; min-width: 36px; padding: 6px 10px; border-radius: 18px; font-weight: 600; text-align: center; text-decoration: none; }
.woo-pagination .page-numbers.current { background: var(--teal); color: var(--black); }

/* 9. Product page ---------------------------------------------------------- */
.single-product div.product { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: var(--space-5) var(--space-6); align-items: start; }
.single-product div.product > .se-about-shirt,
.single-product div.product > .related,
.single-product div.product > .up-sells { grid-column: 1 / -1; }
/* matches WooCommerce layout's #content selectors so it can override without !important */
.woocommerce #content div.product div.images,
.woocommerce #content div.product div.summary { float: none; width: auto; margin: 0; }

.woocommerce-product-gallery { position: relative; min-width: 0; overflow: hidden; }
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__wrapper { border-radius: var(--radius); background: var(--white); }
.woocommerce-product-gallery__image img { display: block; width: 100%; }
.woocommerce div.product div.images .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs li { float: none; width: 76px; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 76px;
  height: 76px;
  border: 2px solid transparent;
  border-radius: 4px;
  background: var(--white);
  object-fit: cover;
  opacity: .55;
  cursor: pointer;
  transition: opacity .15s;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover { border-color: var(--pink); opacity: 1; }
.woocommerce-product-gallery__trigger {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  font-size: 0;
  text-decoration: none;
}
.woocommerce-product-gallery__trigger::before { content: "\2315"; color: var(--black); font-size: 18px; }

.single-product .summary { text-align: center; }
.product_title { font-size: 52px; text-transform: uppercase; }
.single-product .summary .price { color: var(--pink-dark); font-size: 26px; font-weight: 600; }

/* Tabs (description poem, details, size chart) */
.woocommerce-tabs { margin-block: var(--space-4); }
.woocommerce-tabs ul.tabs { display: flex; justify-content: center; gap: var(--space-3); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .04em;
  text-decoration: none;
}
.woocommerce-tabs ul.tabs li.active a { border-color: var(--pink); color: var(--pink-dark); }
.woocommerce-Tabs-panel { font-size: 17px; line-height: 1.7; }   /* poems: body font, no background */
.yikes-custom-woo-tab-title, .woocommerce-Tabs-panel > h2 { display: none; }
.sizechart-wrap table { margin-inline: auto; border: 2px solid var(--black); font-size: 13px; }
.sizechart-wrap th, .sizechart-wrap td { padding: 10px 14px; text-align: center; }
.sizechart-wrap tr.table-head { background: #555; color: var(--white); }
.sizechart-wrap td.size { background: #ddd; font-weight: 700; }

/* Variations + add to cart */
.variations_form .variations { margin: 0 auto var(--space-3); }
.variations_form .variations th.label { padding-right: var(--space-2); color: var(--muted); font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.variations_form select { min-width: 160px; padding: 8px 12px; border: 1px solid #ccc; border-radius: var(--radius); background: var(--white); }
.woocommerce-variation-add-to-cart { display: flex; justify-content: center; gap: var(--space-2); }
.quantity .qty { width: 64px; padding: 10px; border: 1px solid #ccc; border-radius: var(--radius); }
.single-product .se-perks { grid-template-columns: 1fr; text-align: center; }
.related.products > h2 { font-size: 28px; }

/* Short description: reads as a product note, not a fifth line of the poem */
.single-product .woocommerce-product-details__short-description { margin: 0 auto var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.single-product .woocommerce-product-details__short-description p { margin: 0; }

/* 9b. Product page: "About the shirt" (blank/spec info, separate from the poem tab) */
.se-about-shirt {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-top: 4px solid var(--pink);
  border-radius: var(--radius);
  --block-bg: var(--surface); background: var(--block-bg);
  box-shadow: var(--shadow-card);
}
.se-about-shirt h2 { margin-bottom: var(--space-3); font-size: 30px; text-transform: uppercase; }
.se-about-shirt-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3) var(--space-5); align-items: start; }
.se-about-shirt-body p { margin: 0; }
.se-specs { margin: 0; padding: 0; list-style: none; }
.se-specs li { position: relative; padding: 6px 0 6px 22px; border-bottom: 1px solid var(--line); font-size: 15px; }
.se-specs li:last-child { border-bottom: 0; }
.se-specs li::before { content: ""; position: absolute; left: 0; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); }

/* 10. Pages: title (same as the Shirts page heading) ------------------------ */
.se-page-header .page-title { margin: 0 0 var(--space-4); }

/* 10. Pages: content card ------------------------------------------------- */
.se-page-main { max-width: 900px; margin: 0 auto var(--space-6); }
.se-page-card {
  padding: var(--space-5);
  border-radius: var(--radius);
  --block-bg: var(--white); background: var(--block-bg);
  box-shadow: var(--shadow-card);
}
.entry > :first-child, .entry > div > :first-child { margin-top: 0; }
.entry h1 { font-size: 40px; }
.entry h2 { font-size: 30px; }
.entry h3, .entry h2.se-sub { margin: var(--space-5) 0 var(--space-2); font-size: 26px; color: var(--black); }
.entry h3::before, .entry h2.se-sub::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; border-radius: 50%; background: var(--pink); vertical-align: 2px; }
.entry p { margin-bottom: var(--space-3); }
.entry ul, .entry ol { padding-left: 1.2em; }
.entry img { border-radius: var(--radius); }
.bigtext { color: var(--pink-dark); font-size: 1.15em; font-weight: 600; }

/* Old two-part pages (F.A.Q., Manifesto, Contact): the text panel left of
   centre, the picture panel right of it (classes added in functions.php). */
.se-page-main:has(> .se-page-split) { max-width: var(--container); }
.se-page-split .entry { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
.se-split-text, .se-split-art { --block-bg: var(--white); background: var(--block-bg); }
.se-split-text { order: 1; padding: var(--space-5); }
.se-split-art { order: 2; padding: var(--space-4); }
.se-split-art img { display: block; width: 100%; margin: 0; }
.se-split-art p { margin: 0; }
.se-page-manifesto .entry { font-size: 19px; line-height: 1.75; }
.contact-form label { display: block; margin-bottom: var(--space-1); font-weight: 600; }
.contact-form .forms p { margin-bottom: var(--space-3); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce-cart table.cart td.actions .coupon .input-text {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  background: var(--white);
}
.contact-form input:focus, .contact-form textarea:focus, .woocommerce form .input-text:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.contact-form input[type="submit"], .contact-form .submit { padding: 14px 28px; border: 0; border-radius: var(--radius); background: var(--black); color: var(--white); font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.contact-form input[type="submit"]:hover { background: var(--navy); }

.contact-form fieldset { margin: 0; padding: 0; border: 0; }
.contact-form textarea { height: 180px; resize: vertical; }
.contact-form p.inline { display: flex; align-items: center; gap: var(--space-2); }
.contact-form p.inline label { display: inline; margin: 0; font-weight: 400; }
.contact-form .screenReader { position: absolute; left: -9999px; }   /* spam honeypot: keep hidden */

/* Legal pages: comfortable reading measure */
.se-page-privacy-policy .entry, .se-page-terms-and-conditions .entry { font-size: 16px; color: #222; }

/* 10b. Shop pages ---------------------------------------------------------- */
.woocommerce-cart .se-page-main,
.woocommerce-checkout .se-page-main,
.woocommerce-account .se-page-main { max-width: var(--container); }
/* Cart, checkout and account have no page card: each WooCommerce block is its
   own raised white panel on the page (js/depth.js), one level, no nesting. */
.woocommerce-cart-form,
.cart-collaterals .cart_totals,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-account:not(.logged-in) .se-page-shop .entry > .woocommerce,
.se-page-shop .entry > .woocommerce:has(> .se-empty-cart),
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content { padding: var(--space-4); --block-bg: var(--white); background: var(--block-bg); }
.woocommerce-cart-form table.shop_table { margin: 0; }
.cart-collaterals { margin-top: var(--space-5); }
.cart-collaterals::before, .cart-collaterals::after { content: none; }
.woocommerce-cart .se-page-shop .entry > .woocommerce > .woocommerce-notices-wrapper:not(:empty) { margin-bottom: var(--space-4); }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  background: #f7f7f7;
  list-style: none;
}
.woocommerce-error { border-color: var(--pink); }
.woocommerce-message .button, .woocommerce-info .button { float: right; padding: 8px 16px; font-size: 13px; }

.woocommerce table.shop_table { width: 100%; margin-bottom: var(--space-4); border: 0; border-radius: var(--radius); background: var(--white); }
.woocommerce table.shop_table th { padding: 12px; border-bottom: 2px solid var(--black); font-family: var(--font-display); font-weight: 400; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.woocommerce table.shop_table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.woocommerce table.cart img { width: 72px; border-radius: 4px; }
.woocommerce table.cart .product-name a { color: var(--black); font-weight: 600; text-decoration: none; }
.woocommerce a.remove { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--pink-dark); font-size: 20px; text-decoration: none; }
.woocommerce a.remove:hover { background: var(--pink); color: var(--white); }
.woocommerce-cart table.cart td.actions { text-align: right; }
.woocommerce-cart table.cart td.actions .coupon { display: inline-flex; gap: var(--space-2); float: left; }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 180px; }
.cart-collaterals .cart_totals { float: none; width: min(420px, 100%); margin-left: auto; }
.cart_totals h2, .woocommerce-checkout form h2, .woocommerce-checkout h3, .woocommerce-account h2 { font-size: 28px; text-transform: uppercase; }
.wc-proceed-to-checkout .checkout-button, #place_order { display: block; width: 100%; --block-bg: var(--pink-dark); background: var(--block-bg); text-align: center; font-size: 18px; }
.wc-proceed-to-checkout .checkout-button:hover, #place_order:hover { --block-bg: var(--black); background: var(--block-bg); }

#shipping_method { margin: 0; padding: 0; list-style: none; }
#shipping_method li { margin-bottom: var(--space-1); }
.woocommerce-cart table.cart td.actions .coupon .input-text { min-width: 160px; }

/* Empty cart */
.se-empty-cart { text-align: center; }
.se-empty-cart img { width: 260px; margin: 0 auto var(--space-3); }
.se-empty-cart h2 { font-size: 36px; text-transform: uppercase; }
.woocommerce-cart .return-to-shop { margin: 0; text-align: center; }
.se-page-shop .entry > .woocommerce:has(> .se-empty-cart) { max-width: 720px; margin-inline: auto; padding: var(--space-5); }

/* Checkout */
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-5); align-items: start; }
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 2; }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { float: none; width: 100%; }
.woocommerce form .form-row { margin: 0 0 var(--space-3); padding: 0; }
.woocommerce form .form-row label { display: block; margin-bottom: var(--space-1); font-weight: 600; font-size: 14px; }
.woocommerce form .form-row .required { color: var(--pink-dark); text-decoration: none; }
.woocommerce-checkout #payment { margin-top: var(--space-4); padding: var(--space-4); border-radius: 0; background: #f7f7f7; }
.woocommerce-checkout #order_review_heading { margin: 0 0 var(--space-3); }
.woocommerce-checkout #order_review table.shop_table { margin-bottom: 0; }
.woocommerce-checkout #payment ul.payment_methods { margin: 0 0 var(--space-3); padding: 0; list-style: none; }

/* My Account. Logged out: the login (and register, if enabled) form in one
   centred panel. Logged in: navigation panel beside the content panel. */
.woocommerce-account:not(.logged-in) .se-page-shop .entry > .woocommerce { max-width: 520px; }
.woocommerce-account:not(.logged-in) .se-page-shop .entry > .woocommerce:has(#customer_login) { max-width: none; }
.woocommerce-account #customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.woocommerce-account #customer_login::before, .woocommerce-account #customer_login::after { content: none; }
.woocommerce-account #customer_login > div { float: none; width: auto; }
.woocommerce-account.logged-in .se-page-shop .entry > .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.woocommerce-account.logged-in .se-page-shop .entry > .woocommerce::before,
.woocommerce-account.logged-in .se-page-shop .entry > .woocommerce::after { content: none; }
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--line); }
.woocommerce-MyAccount-navigation a { display: block; padding: 10px 0; color: var(--black); font-family: var(--font-display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a { color: var(--pink-dark); }
.woocommerce-MyAccount-content > :last-child { margin-bottom: 0; }
.woocommerce form.login, .woocommerce form.register { margin: 0; padding: 0; border: 0; }
.woocommerce-form-login__rememberme { display: block; margin-bottom: var(--space-3); }
.woocommerce-LostPassword { margin-top: var(--space-3); font-size: 14px; }

/* 10c. 404 ----------------------------------------------------------------- */
.se-404 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; max-width: 1000px; margin: 0 auto var(--space-6); }
.se-404-art { width: 100%; }
.se-404 h2 { font-size: 48px; text-transform: uppercase; }
.se-404-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.se-text-link { font-weight: 600; }

/* Upside-down sheep illustration (closes the homepage, touches footer) */
.upsidedownSheep {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-height: 600px;
  margin-block: 0;
  overflow: hidden;
  background: linear-gradient(to right, #b1d4f3 50%, #3a675f 50%);
  text-align: center;
}
.upsidedownSheep img { display: block; margin: 0 auto; }
.upsidedownSheep .lr { display: none; }

/* 10c+. 404 without art: text block centered on its own */
.se-404-noart { justify-content: center; text-align: center; }
.se-404-noart .se-404-text { max-width: 640px; margin-inline: auto; }

/* 11. Footer --------------------------------------------------------------- */
.se-footer { margin: 0; padding-top: 48px; --block-bg: var(--black); background: var(--block-bg); color: #d9d2c6; }
.home .se-footer { margin-top: 0; }
body:not(.home) .se-footer { margin-top: var(--space-6); }
.se-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.se-footer-grid::before, .se-footer-grid::after { content: none; }
.se-footer h2 { font-size: 24px; margin-bottom: var(--space-2); color: var(--pink); text-transform: uppercase; }
.se-footer ul { margin: 0; padding: 0; list-style: none; }
.se-footer li { margin: 0 0 6px; font-size: 15px; }
.se-footer a { color: #f6f1e7; text-decoration: none; }
.se-footer a:hover { color: var(--pink); }
.se-foot-brand { display: flex; align-items: center; gap: 14px; }
.se-foot-brand p { margin: 0; }
.se-foot-brand img { padding: 6px; border-radius: 50%; background: var(--white); }
.se-foot-brand span { color: #a99f92; font-size: 14px; }
.se-footer #footer { margin-top: 32px; padding: 18px var(--gutter) 28px; border-top: 1px dashed #4a4541; color: #a99f92; font-size: 13px; }
.se-footer #footer p { margin: 0; }

/* 12. Utilities ------------------------------------------------------------ */
main { display: block; }
#main-content:focus { outline: none; }        /* target of the skip link, not an interactive control */
.se-skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--black);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.se-skip-link:focus { transform: none; outline: 3px solid var(--pink-dark); outline-offset: 2px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.se-footer :focus-visible, #header :focus-visible, #top :focus-visible { outline-color: var(--pink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .rsNavItem:focus-visible, .rsArrow:focus-visible { box-shadow: 0 0 0 5px var(--black); }

/* Reduced motion: only for visitors who ask for it (slider autoplay is paused in js/a11y.js). */
@media (prefers-reduced-motion: reduce) {
  :root { --menu-speed: 0s; }   /* mobile menu opens/closes instantly */
  *, *::before, *::after { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; scroll-behavior: auto; }
  .button:hover, .single_add_to_cart_button:hover, .btn:hover { transform: none; }
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 12b. 3D layers ----------------------------------------------------------
   Real 3D, one context: #wrapper is the scroller and has the perspective
   (origin = viewport centre); js/depth.js marks every ancestor between
   #wrapper and a raised block .se-3d-chain (preserve-3d), so the browser does
   the parallax, nesting and wall visibility itself. Each raised block is translateZ(--depth), its height
   above its parent face; its walls (span.se-walls) hinge at the face edges and
   reach exactly that far down, so they meet the parent surface. Faces are not
   counter-scaled (they grow D / (P - D), about 3% at 75px). Without JS or with
   reduced motion the site stays flat.
   v26, sharp text: the page plane (z = 0, drawn 1:1 with no resampling) holds
   the faces of the top-level blocks (js/depth.js marks them .se-top), so their
   text is never scaled. Instead of the face rising, the base sinks: the walls
   and the floor shadow still reach --depth back from the face, so the look and
   the parallax are the same, but the moving layer is the one behind. Blocks
   on top of a face (buttons, headline, perks, homepage cards) still rise above
   it, and so does a hovered card. Flat pictures between blocks (.se-sunk) sit
   --depth-base behind the plane, scaled up by exactly as much as distance
   shrinks them, so they keep their flat size and edges and fill the width. */
/* v25: #wrapper is the page's scroll container and carries the perspective,
   with its origin fixed at the middle of the viewport. Scrolling moves the
   content under a stationary vanishing point, so parallax is composited by the
   browser with no per-frame JavaScript (smooth in Firefox's async scrolling).
   --se-sb (scrollbar width, set by js/depth.js) keeps the origin centred on
   the content rather than on content + scrollbar. */
.se-3d,
.se-3d body { height: 100%; overflow: hidden; }
.se-3d #wrapper {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: calc(var(--depth-p) * 1px);
  perspective-origin: calc(50% - var(--se-sb, 0px) / 2) 50%;
}
.se-3d #wrapper:focus { outline: none; }   /* focused only so keyboard scrolling reaches it */
@media print {
  .se-3d, .se-3d body, .se-3d #wrapper { height: auto; overflow: visible; perspective: none; }
}
.se-3d .se-3d-chain { transform-style: preserve-3d; }
.se-3d .se-3d-unclip { overflow: visible; }   /* overflow: hidden would flatten the chain */
/* In a 3D scene every box in the chain is a plane at its own depth, also for
   hit-testing, so the transparent box of an ancestor of a sunk picture
   (<main> for the slider) sits in front of the picture and takes its clicks.
   Those ancestors let the pointer through; their children take it back. */
.se-3d .se-3d-pass > * { pointer-events: auto; }
.se-3d .se-3d-pass { pointer-events: none; }

/* --depth is registered so a hover lift animates this one number: the card's
   face, its walls and its floor shadow are all computed from the same value
   in the same frame, so the shadow stays exactly on the surface below. */
@property --depth { syntax: '<number>'; inherits: true; initial-value: 0; }
.se-3d .se-raised { --depth: var(--depth-panel); }
.se-3d .se-raised-sm { --depth: var(--depth-button); }
.se-3d .se-cloth { --depth: var(--depth-cloth); }
.se-3d #top, .se-3d #header, .se-3d .se-footer, .se-3d .se-platform { --depth: var(--depth-slab); }
.se-3d .se-platform .se-raised { --depth: var(--depth-nested); }
.se-3d .woocommerce ul.products li.product { --depth: var(--card-rest); }
.se-3d .se-raised-text { --depth: var(--depth-text); }
.se-3d .se-page-shop .se-raised { --depth: var(--depth-slab); }   /* cart / checkout / account panels */
/* --sink: how far the base sits below a block's resting face (see 12b intro);
   set again on every raised block so nested ones never inherit it. */
.se-3d .se-raised,
.se-3d .se-raised-sm,
.se-3d .se-raised-text,
.se-3d .woocommerce ul.products li.product { --sink: 0; }
.se-3d .se-top { --sink: var(--depth); }
.se-3d .woocommerce ul.products li.product.se-top { --sink: var(--card-rest); }
.se-3d .se-raised-sm.se-top { --sink: var(--depth-button); }   /* likewise a lifted button */   /* a hovered card still lifts off the plane */

.se-3d .se-raised,
.se-3d .se-raised-sm,
.se-3d .se-raised-text,
.se-3d .woocommerce ul.products li.product {
  position: relative;
  border-radius: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc((var(--depth) - var(--sink)) * 1px));
}
.se-3d .se-raised,
.se-3d .se-raised-sm,
.se-3d .woocommerce ul.products li.product { box-shadow: none; }   /* the shadow is cast on the surface below (.se-floor) */
.se-3d .se-raised-sm:hover { transform: translateZ(calc((var(--depth) - var(--sink)) * 1px)); }   /* not the flat 1px nudge */
/* Raised buttons slide further out like the cards: one animated --depth
   moves face, walls and floor shadow together. Keyboard focus lifts too. */
.se-3d .se-raised-sm { transition: --depth var(--card-speed) var(--card-ease), background .15s; }
.se-3d .se-raised-sm:focus-visible { --depth: var(--button-lift); }
@media (hover: hover) and (pointer: fine) {
  .se-3d .se-raised-sm:hover { --depth: var(--button-lift); }
  .se-3d .woocommerce ul.products li.product { transition: --depth var(--card-speed) var(--card-ease); }
  .se-3d .woocommerce ul.products li.product:hover { --depth: var(--card-lift); z-index: 2; box-shadow: none; }
}
.se-3d .se-platform { z-index: 1; display: flow-root; --block-bg: var(--bg); background: var(--block-bg); }
.se-3d .woocommerce-product-gallery { --block-bg: var(--white); overflow: visible; }   /* slides are clipped by .flex-viewport */
.se-3d .woocommerce-product-gallery__wrapper { border-radius: 0; }

/* Wall colours follow each block's --block-bg: sides a little darker, top and
   bottom darker still; near-black blocks (header, footer, buttons) get walls
   a step above black, so the walls read apart from the black face. */
.se-raised, .se-raised-sm, .se-raised-text, .woocommerce ul.products li.product {
  --wall-side: color-mix(in oklab, var(--block-bg, var(--white)), #3a3a3a 25%);
  --wall-end: color-mix(in oklab, var(--block-bg, var(--white)), #3a3a3a 40%);
  --ink-extrude: color-mix(in oklab, var(--block-bg, var(--pink)), black 40%);
}
@supports (color: oklch(from red l c h)) {
  .se-raised, .se-raised-sm, .se-raised-text, .woocommerce ul.products li.product {
    --wall-side: oklch(from var(--block-bg, var(--white)) clamp(.31, calc(l - .12), 1) c h);
    --wall-end: oklch(from var(--block-bg, var(--white)) clamp(.27, calc(l - .2), 1) c h);
    --ink-extrude: oklch(from var(--block-bg, var(--pink)) calc(l - .25) c h);
  }
}

.se-walls { display: none; }
.se-3d .se-walls {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}
.se-3d .se-perks > .se-walls { left: -4px; }   /* include the teal left border */
/* Walls hinge .5px inside the face edge, so their front seams tuck under the
   face (no 1px gaps or outlines). Each wall spans exactly from one
   neighbouring hinge line to the other, so at the corners the walls meet
   edge to edge; any longer and the end would poke out past the other wall
   and show as a dark line on the corner. */
.se-wall { position: absolute; background: var(--wall-side); }
.se-wall--t, .se-wall--b { left: .5px; right: .5px; height: calc(var(--depth) * 1px); background: var(--wall-end); }
.se-wall--l, .se-wall--r { top: .5px; bottom: .5px; width: calc(var(--depth) * 1px); }
.se-wall--t { top: .5px; transform-origin: top; transform: rotateX(-90deg); }
.se-wall--b { bottom: .5px; transform-origin: bottom; transform: rotateX(90deg); }
.se-wall--l { left: .5px; transform-origin: left; transform: rotateY(90deg); }
.se-wall--r { right: .5px; transform-origin: right; transform: rotateY(-90deg); }
/* Soft shadow cast on the surface below, longer for higher blocks (no fill).
   The floor matches the walls' base exactly (.5px inside the footprint, like
   the wall hinges) and lies exactly in the parent plane, so it is drawn in
   source order over that surface like any other content on it. (A 0.1px
   lift left it nearly coplanar with the surface, and Firefox's depth
   sorting flipped the two while a card animated.) A tight blurred contact
   shadow starts at that base, so no light seam shows between walls and shadow. */
.se-floor {
  position: absolute;
  inset: .5px;
  transform: translateZ(calc(var(--depth) * -1px));
  box-shadow:
    0 0 2px rgba(0, 0, 0, .14),
    0 calc(var(--depth) * .12px) calc(var(--depth) * .35px) rgba(0, 0, 0, .14);
}

/* Headline lettering: the face is raised --depth-text above the cloth; dark
   copies (span.se-extrude, made by js/depth.js) sit at even steps between
   face and cloth, so the browser draws a true extrusion. */
.se-3d .se-raised-text { text-shadow: none; }
.se-extrude {
  position: absolute;
  inset: 0;
  color: var(--ink-extrude);
  pointer-events: none;
  transform: translateZ(calc(var(--depth) * var(--k) * -1px));
}

/* Flat pictures behind the page plane (slider, homepage sheep): pushed
   --depth-base back and scaled by (P + base) / P, so they appear exactly at
   their flat size and position; the neighbouring blocks' walls, which reach
   back to the base, pass in front of them, so no seam can open. The sheep
   still tucks 2px under its neighbours against sub-pixel rounding. */
.se-3d .se-sunk {
  transform: translateZ(calc(var(--depth-base) * -1px)) scale(calc((var(--depth-p) + var(--depth-base)) / var(--depth-p)));
}
/* #wrapper (a scroller) cannot sort its children in 3D, so they paint in
   source order: lift the header above <main> so its bottom wall shows over
   the sunk slider. */
.se-3d #header { z-index: 2; }

/* Full-width raised blocks reach past both screen edges by as much as their
   side walls foreshorten towards the centre: a wall's back edge sits --depth
   behind the face, so it appears (half the screen) x depth / (P + depth)
   closer to the middle; reaching out 50vw x depth / P (a little more) plus
   2px keeps the walls' ends off screen at every width and scroll position.
   Padding gives the same amount back, so the content does not move. #wrapper
   clips sideways (overflow-x), so this never makes a horizontal scrollbar. */
.se-3d :is(#top, #header, .se-footer, .se-platform, .se-hero) { --bleed: calc(50vw * var(--depth) / var(--depth-p) + 2px); }
.se-3d :is(#top, .se-footer, .se-platform) { margin-inline: calc(-1 * var(--bleed)); padding-inline: var(--bleed); }
.se-3d body #wrapper > #header { margin-inline: calc(-1 * var(--bleed)); padding-inline: calc(max(var(--gutter), (100% - var(--container)) / 2 + var(--gutter)) + var(--bleed)); }
.se-3d .se-hero { width: calc(100vw + 2 * var(--bleed)); margin-left: calc(50% - 50vw - var(--bleed)); }
.se-3d .upsidedownSheep {
  --tuck: 2px;
  max-height: calc(600px + 2 * var(--tuck));
  margin-block: calc(-1 * var(--tuck));
}

/* 13. Responsive ----------------------------------------------------------- */
@media (max-width: 1000px) {
  .single-product div.product { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-product-gallery { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 768px) {
  body { font-size: 16px; }
  h1, .page-title, .product_title { font-size: 34px; }
  #header { flex-wrap: wrap; gap: 0 var(--space-3); padding-block: var(--space-3); }
  #header .se-brand { flex: 1 1 0; min-width: 0; }
  /* Always two lines ("Striped Elephant / Apparel"): the width cap is narrower than the full name but wider than the first two words. */
  .site-title { max-width: 8.5em; font-size: min(24px, 6.4vw); white-space: normal; }
  #navigation { flex-basis: 100%; }
  #main-nav { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 0; }   /* a half-open (short) column must not wrap or bottom-align: it reveals top-down */
  #main-nav > li:first-child { margin-top: var(--space-2); }   /* inside the clipped row, so a closed menu adds no height */
  #main-nav a { padding: 12px 0; border-top: 1px solid #222; font-size: 18px; }
  .se-js .se-menu-toggle { display: inline-flex; }
  /* Animated open/close: the row grows 0fr -> 1fr; visibility keeps closed links out of the tab order. */
  .se-js #navigation {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    opacity: 0;
    transition: grid-template-rows var(--menu-speed) ease, opacity var(--menu-speed) ease, visibility 0s linear var(--menu-speed);
  }
  .se-js #navigation > #main-nav { min-height: 0; overflow: hidden; }
  .se-js.se-menu-open #navigation {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    transition: grid-template-rows var(--menu-speed) ease, opacity var(--menu-speed) ease, visibility 0s;
  }

  /* Homepage slider on phones: shorter slider, artwork scaled so the design fits the width.
     Height = 800px scaled so a 600px-wide design area (all the shirt art fits in it) spans the screen less 20px. */
  .home { --rs-h: min(800px, calc((100vw - 20px) * 800 / 600)); }
  .royalSlider .lr .sliderBackground { background-size: auto 100%; }
  /* Each panel keeps the anchor slider.css gives it (some "Left" panels sit on the right); only the 900px offset is scaled. */
  .royalSlider .sliderLeft2 .sliderBackground.left,
  .royalSlider .sliderLeft3 .sliderBackground.left,
  .royalSlider .sliderRight4 .sliderBackground.right,
  .royalSlider .sliderLeft4p5 .sliderBackground.left,
  .royalSlider .sliderRight5 .sliderBackground.right { background-position: right calc(var(--rs-h) * -1.125) center; }   /* 1800px art: half = 900/800 of the height */
  .royalSlider .sliderRight2 .sliderBackground.right,
  .royalSlider .sliderRight3 .sliderBackground.right,
  .royalSlider .sliderLeft4 .sliderBackground.left,
  .royalSlider .sliderRight4p5 .sliderBackground.right,
  .royalSlider .sliderLeft5 .sliderBackground.left { background-position: calc(var(--rs-h) * -1.125) center; }
  .royalSlider .sliderLeft7 .sliderBackground.left { background-position: right calc(var(--rs-h) * -1.375) center; }   /* Rob: original -1100px / -700px, scaled */
  .royalSlider .sliderRight7 .sliderBackground.right { background-position: calc(var(--rs-h) * -.875) center; }
  /* Text/art overlays on slides 7-8 sit at fixed px from the top of an 800px slider; scale those offsets with it. */
  .royalSlider .rsSlide .leftFeature { top: calc(var(--rs-h) * 290 / 800); }
  .royalSlider .sliderRight2 .harvester { top: calc(var(--rs-h) * 190 / 800); }
  .royalSlider .sliderRight7 .rightFeature { top: calc(var(--rs-h) * 150 / 800); font-size: calc(var(--rs-h) * 15 / 800); }   /* Rob caption scaled so his name fits */

  /* Newspaper (old-timey), phones: use a taller theme image that keeps only the
     Striped Elephant picture+article, with aged-paper filler above/below so the
     art can cover the slider height (no letterboxing). Desktop still uses the
     original wide page in slider.css. Image spans both halves. */
  .royalSlider .sliderLeft6,
  .royalSlider .sliderRight6 {
    background-image: url(https://www.stripedelephantapparel.com/wp-content/uploads/background-old-timey-tall.jpg);
    background-size: 200% 100%;
    background-position: left center;
    background-repeat: no-repeat;
  }
  .royalSlider .sliderRight6 { background-position: right center; }

  /* Cloud Harvester, phones: poem across both halves (so lines don't wrap),
     lower and a bit larger to fill the grey; figure scaled up and lifted clear
     of the dots. Desktop layout in slider.css is unchanged. */
  .royalSlider .rsSlide .sliderLeft2 .leftFeature {
    left: 14px;
    right: auto;
    width: calc(200% - 28px);
    top: calc(var(--rs-h) * 100 / 800);   /* raised from v33 — room above the figure */
    text-align: left;
    z-index: 2;
  }
  .royalSlider .rsSlide .sliderLeft2 .leftFeature h3 {
    font-size: clamp(24px, 6.8vw, 30px);
    margin: 0 0 10px;
    line-height: 1.08;
  }
  .royalSlider .rsSlide .sliderLeft2 .leftFeature p {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.5;
  }
  .royalSlider .sliderRight2 .harvester,
  .royalSlider .rsSlide.rsActiveSlide .sliderRight2 .harvester {
    /* Mid size: smaller than v33d (too big), larger than v33c. Opaque guy
       (PNG y≈0.63–0.98) in poem–dots gap; left shift so ≥~55% cloud on-screen. */
    width: calc(var(--rs-h) * 700 / 800);
    height: calc(var(--rs-h) * 640 / 800);
    max-width: none;
    top: calc(var(--rs-h) * 21 / 800);
    bottom: auto;
    left: calc(var(--rs-h) * -230 / 800 + 20px); /* ~20px right nudge @390 */
    background-size: 100% 100%;
  }

  /* Slide 1 (striped elephant) keeps its full-size, side-cropped look: its two 400px halves stay 800px tall, centred, with the blank top/bottom clipped. */
  .royalSlider .rsSlide .ud { height: 400px; }
  .royalSlider .rsSlide .sliderUp1 { top: calc(var(--rs-h) / 2 - 400px); }
  .royalSlider .rsSlide .sliderDown1 { bottom: calc(var(--rs-h) / 2 - 400px); }
  .se-about-shirt { padding: var(--space-3); }
  .se-about-shirt-body { grid-template-columns: minmax(0, 1fr); }
  .se-page-card { padding: var(--space-4) var(--space-3); }
  .se-page-split .entry { gap: var(--space-5); }
  .se-split-text { padding: var(--space-4) var(--space-3); }
  .se-split-art { padding: var(--space-3); }
  .woocommerce-cart-form, .cart-collaterals .cart_totals, .woocommerce-checkout #customer_details, .woocommerce-checkout #order_review,
  .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { padding: var(--space-3); }
  .se-page-split .entry,
  .woocommerce-checkout form.checkout,
  .woocommerce-account #customer_login,
  .woocommerce-account.logged-in .se-page-shop .entry > .woocommerce,
  .se-404 { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; }
  .se-404 h2 { font-size: 34px; }
  .woocommerce-cart table.cart td.actions .coupon { float: none; display: flex; margin-bottom: var(--space-2); }
  .woocommerce-cart table.cart td.actions .coupon .input-text { width: auto; flex: 1; }
  #main > h1 { font-size: 28px; }
  .se-hero { padding: 64px 0 72px; }
  .se-kicker { font-size: 16px; }
  .se-headline { font-size: 40px; }
  .se-value { font-size: 17px; }
  .se-maker { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .se-maker h2 { font-size: 26px; }
  .se-perks { grid-template-columns: 1fr; }
  .home .se-perks { margin-inline: var(--space-3); }
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px; }
  .woocommerce div.product div.images .flex-control-thumbs li,
  .woocommerce div.product div.images .flex-control-thumbs li img { width: 64px; height: 64px; }
  .se-footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .se-foot-brand, .se-footer nav:last-child { grid-column: 1 / -1; }
}