/* ==========================================================================
   Charlie Weitzenberg — design system stylesheet
   Drop into the Blocksy child theme as assets/css/cw-design-system.css,
   loaded AFTER cw-tokens.css (the tokens.css this system generates).
   Plain CSS, no build step. Prefix: .cw-  ·  WordPress block styles: .is-style-cw-*
   Rule of the system: every diagonal is 45°, every cut is equal on both edges.
   ========================================================================== */

/* ---------- 0. Base (safe to scope to body.cw if Blocksy fights it) ---------- */
.cw-root,
body.cw {
  --cw-unit: var(--grid-unit);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 28px;
}
@media (max-width: 781px) {
  .cw-root, body.cw { --cw-unit: var(--grid-unit-compact); }
}
.cw-root :where(h1, h2, h3, h4),
body.cw :where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
}
.cw-root :where(a), body.cw :where(a) { color: var(--indigo); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cw-root :where(a:hover), body.cw :where(a:hover) { text-decoration-thickness: 2px; }
.cw-root :where(a, button, input, select, textarea, summary):focus-visible,
body.cw :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Type helpers (mirror the token type styles; use on any block via Additional CSS class) */
.cw-display-xl { font: 300 72px/76px var(--font-display); letter-spacing: -0.025em; }
.cw-display-lg { font: 300 48px/52px var(--font-display); letter-spacing: -0.02em; }
.cw-heading    { font: 300 30px/36px var(--font-display); letter-spacing: -0.01em; }
.cw-subheading { font: 400 21px/28px var(--font-display); letter-spacing: 0; }
.cw-label      { font: 500 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.cw-lead       { font: 300 20px/32px var(--font-text); max-width: var(--measure); }
.cw-small      { font: 400 14px/22px var(--font-text); }
.cw-caption    { font: italic 400 14px/20px var(--font-text); color: var(--ink-muted); }
@media (max-width: 781px) {
  .cw-display-xl { font-size: 44px; line-height: 48px; }
  .cw-display-lg { font-size: 36px; line-height: 40px; }
}

/* ---------- 1. Fold grid (block style on core/group: "Fold grid") ---------- */
.cw-foldgrid,
.wp-block-group.is-style-cw-fold-grid,
.wp-block-cover.is-style-cw-fold-grid {
  position: relative;
  isolation: isolate;
}
.cw-foldgrid::before,
.wp-block-group.is-style-cw-fold-grid::before,
.wp-block-cover.is-style-cw-fold-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --u: var(--cw-unit, var(--grid-unit));
  --l: var(--fold-line);
  background-image:
    linear-gradient(to right, var(--l) var(--grid-line), transparent var(--grid-line)),
    linear-gradient(to bottom, var(--l) var(--grid-line), transparent var(--grid-line)),
    linear-gradient(45deg, transparent calc(50% - .5px), var(--l) calc(50% - .5px), var(--l) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(-45deg, transparent calc(50% - .5px), var(--l) calc(50% - .5px), var(--l) calc(50% + .5px), transparent calc(50% + .5px));
  background-size: var(--u) var(--u);
  background-position: center top;
  /* fade toward the edges so the grid never competes with the artwork */
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 40%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 85% at 50% 40%, #000 35%, transparent 100%);
}
/* full-bleed grid behind a block that stays in the content column:
   the grid layer reaches the viewport edges, the content does not move */
.cw-foldgrid--bleed::before { left: calc(50% - 50vw) !important; right: calc(50% - 50vw) !important; }  /* !important: wins over each grid variant's inset:0 */
/* keep that bleed from creating a horizontal scrollbar */
html:has(.cw-foldgrid--bleed) { overflow-x: clip; }

/* squares only (no diagonals) — for dense text sections */
.cw-foldgrid--squares::before,
.is-style-cw-fold-grid-squares::before {
  background-image:
    linear-gradient(to right, var(--fold-line) var(--grid-line), transparent var(--grid-line)),
    linear-gradient(to bottom, var(--fold-line) var(--grid-line), transparent var(--grid-line));
}
.wp-block-group.is-style-cw-fold-grid-squares { position: relative; isolation: isolate; }
.wp-block-group.is-style-cw-fold-grid-squares::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-size: var(--grid-unit) var(--grid-unit);
}
/* unmasked — the full sheet, edge to edge */
.cw-foldgrid--full::before { -webkit-mask-image: none; mask-image: none; }

/* equilateral triangles: lines at 0°, 60° and 120°, side = one grid unit.
   Drawn as a mask over a fold-line fill, so it follows the palette in both themes. */
.wp-block-group.is-style-cw-fold-grid-triangles { position: relative; isolation: isolate; }
.cw-foldgrid--triangles::before,
.wp-block-group.is-style-cw-fold-grid-triangles::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --u: var(--cw-unit, var(--grid-unit));
  --tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 83.1384' preserveAspectRatio='none'%3E%3Cpath d='M0 0H48M0 41.5692H48M0 83.1384H48M0 0L48 83.1384M48 0L0 83.1384' stroke='black' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --fade: radial-gradient(ellipse 75% 85% at 50% 40%, #000 35%, transparent 100%);
  background: var(--fold-line);
  -webkit-mask-image: var(--tri), var(--fade);
          mask-image: var(--tri), var(--fade);
  -webkit-mask-size: var(--u) calc(var(--u) * 1.7320508), 100% 100%;
          mask-size: var(--u) calc(var(--u) * 1.7320508), 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat;
          mask-repeat: repeat, no-repeat;
  -webkit-mask-position: center top, 0 0;
          mask-position: center top, 0 0;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.cw-foldgrid--triangles.cw-foldgrid--full::before,
.is-style-cw-fold-grid-triangles.cw-foldgrid--full::before {
  -webkit-mask-image: var(--tri); mask-image: var(--tri);
  -webkit-mask-size: var(--u) calc(var(--u) * 1.7320508); mask-size: var(--u) calc(var(--u) * 1.7320508);
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-position: center top; mask-position: center top;
}

/* ---------- 2. Buttons ----------
   One look for every button: .cw-btn, all core Buttons blocks, and Blocksy's header button.
   Default / "Fill" / "Folded"            → indigo, top-left + bottom-right corners folded
   "Outline" / "Folded outline" / ghost   → ink edge, same folds
   Everything is painted with background gradients: no ::before/::after (themes and the editor
   use those), no clip-path on the element (so the focus outline is never cut off).
   ":root" raises specificity above Blocksy's button rules and becomes .editor-styles-wrapper
   in the editor, so the same rules style both. */
@property --c { syntax: "<length>"; inherits: true; initial-value: 12px; }

:root :is(.cw-btn,
          .wp-block-button .wp-block-button__link,
          :where(.gform_wrapper.gravity-theme .gform_footer) .gform_button, /* :where keeps this rule's priority low, so outline variants still win */
          .ct-header .ct-button, .ct-header .ct-button-ghost /* Blocksy header button: verify */,
          :where(#offcanvas) .ct-button, :where(#offcanvas) .ct-button-ghost) {
  --c: var(--chamfer-sm);
  --btn-fill: var(--indigo);
  --btn-ink: var(--on-indigo);
  --btn-edge: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--btn-ink);
  font: 500 12px/16px var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background:
    /* outline: the two 45° corner edges */
    linear-gradient(135deg, transparent calc(50% - .7px), var(--btn-edge) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)) top left / var(--c) var(--c) no-repeat,
    linear-gradient(-45deg, transparent calc(50% - .7px), var(--btn-edge) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px)) bottom right / var(--c) var(--c) no-repeat,
    /* outline: the four straight edges, stopping at the folds */
    linear-gradient(var(--btn-edge), var(--btn-edge)) top right / calc(100% - var(--c)) 1px no-repeat,
    linear-gradient(var(--btn-edge), var(--btn-edge)) bottom left / calc(100% - var(--c)) 1px no-repeat,
    linear-gradient(var(--btn-edge), var(--btn-edge)) bottom left / 1px calc(100% - var(--c)) no-repeat,
    linear-gradient(var(--btn-edge), var(--btn-edge)) top right / 1px calc(100% - var(--c)) no-repeat,
    /* fill with both corners cut (two halves; 0.7071 turns the leg length into gradient distance) */
    linear-gradient(135deg, transparent calc(var(--c) * .7071), var(--btn-fill) 0) top left / 51% 100% no-repeat,
    linear-gradient(-45deg, transparent calc(var(--c) * .7071), var(--btn-fill) 0) bottom right / 51% 100% no-repeat;
  transition: --c .25s ease, color .2s ease;
}
:root :is(.cw-btn, .wp-block-button .wp-block-button__link, :where(.gform_wrapper.gravity-theme .gform_footer) .gform_button, .ct-header .ct-button, .ct-header .ct-button-ghost):is(:hover, :active) {
  --c: var(--chamfer-sm-open);   /* the corner unfolds */
  color: var(--btn-ink);
}
:root :is(.cw-btn, .wp-block-button .wp-block-button__link, :where(.gform_wrapper.gravity-theme .gform_footer) .gform_button, .ct-header .ct-button, .ct-header .ct-button-ghost):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Outline variants (core "Outline", our "Folded outline", Blocksy's ghost button) */
:root :is(.cw-btn--outline,
          .wp-block-button.is-style-outline .wp-block-button__link,
          .wp-block-button.is-style-cw-folded-outline .wp-block-button__link,
          .ct-header .ct-button-ghost) {
  --btn-fill: transparent;
  --btn-edge: var(--ink);
  --btn-ink: var(--ink);
}
:root :is(.cw-btn--outline,
          .wp-block-button.is-style-outline .wp-block-button__link,
          .wp-block-button.is-style-cw-folded-outline .wp-block-button__link,
          .ct-header .ct-button-ghost):hover {
  --btn-fill: var(--paper-deep);
  --btn-ink: var(--ink);
}

/* Small: .cw-btn--sm and Blocksy's "Small" size */
:root :is(.cw-btn--sm, .ct-header [data-size="small"]) { --c: var(--chamfer-xs); min-height: 36px; padding: 0 var(--space-3); }
:root :is(.cw-btn--sm, .ct-header [data-size="small"]):hover { --c: var(--chamfer-sm); }

:root :is(.cw-btn, .wp-block-button .wp-block-button__link):is([disabled], [aria-disabled="true"]) {
  --btn-fill: var(--crease); --btn-ink: var(--paper); cursor: not-allowed;
}

/* text link with a folded-triangle arrow */
.cw-link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: 500 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--indigo); text-decoration: none; padding: var(--space-2) 0;
}
.cw-link-arrow::after {
  content: ""; width: 8px; height: 8px; background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: transform .2s ease;
}
.cw-link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 3. Facet (triangular / cut content areas) ---------- */
/* .cw-facet in PHP templates (editors use the is-style-cw-facet-* block styles below). --cut defaults to two grid units. */
.cw-facet {
  --cut: var(--chamfer-lg);
  position: relative;
  background: var(--paper-raised);
  padding: var(--space-6);
}
.cw-facet--tl { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.cw-facet--tr { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.cw-facet--bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.cw-facet--br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.cw-facet--tl-br { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
/* keep text clear of the cut corner */
.cw-facet--tl, .cw-facet--tl-br { padding-top: calc(var(--space-6) + var(--cut) / 3); }
.cw-facet--br, .cw-facet--tl-br { padding-bottom: calc(var(--space-6) + var(--cut) / 3); }
.cw-facet--cut-1 { --cut: var(--grid-unit); }
.cw-facet--cut-3 { --cut: calc(var(--grid-unit) * 3); }
.cw-facet--deep  { background: var(--paper-deep); }
.cw-facet--soft  { background: var(--indigo-soft); }
.cw-facet--lamp  { background: var(--lamp); color: #1d1c1a; }


/* Facet as block styles on core/group (no custom block needed):
   register_block_style( 'core/group', [ 'name' => 'cw-facet-tr', 'label' => 'Facet: cut top right' ] ); etc. */
.wp-block-group:is(.is-style-cw-facet-tl, .is-style-cw-facet-tr, .is-style-cw-facet-bl, .is-style-cw-facet-br, .is-style-cw-facet-tl-br) {
  --cut: var(--chamfer-lg);
  background-color: var(--paper-raised);   /* a colour picked in the editor overrides this */
  padding: var(--space-6);
}
.wp-block-group.is-style-cw-facet-tl    { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); padding-top: calc(var(--space-6) + var(--cut) / 3); }
.wp-block-group.is-style-cw-facet-tr    { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.wp-block-group.is-style-cw-facet-bl    { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.wp-block-group.is-style-cw-facet-br    { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); padding-bottom: calc(var(--space-6) + var(--cut) / 3); }
.wp-block-group.is-style-cw-facet-tl-br { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); padding-block: calc(var(--space-6) + var(--cut) / 3); }

/* Half-square triangles — images or colour. Always on a square (aspect-ratio 1), so the edge is 45°. */
.cw-tri { aspect-ratio: 1; width: 100%; display: block; object-fit: cover; }
.cw-tri--tl { clip-path: polygon(0 0, 100% 0, 0 100%); }
.cw-tri--tr { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.cw-tri--bl { clip-path: polygon(0 0, 100% 100%, 0 100%); }
.cw-tri--br { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Diagonal wrap: a square image cut to a triangle, with body text flowing along its 45° edge */
.cw-diag-wrap { display: flow-root; max-width: calc(var(--measure) + 320px); }
.cw-diag-wrap__img {
  float: left;
  width: min(45%, 320px);
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0 var(--space-4) var(--space-3) 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  shape-outside: polygon(0 0, 100% 0, 0 100%);
  shape-margin: var(--space-4);
}
.cw-diag-wrap--right .cw-diag-wrap__img {
  float: right; margin: 0 0 var(--space-3) var(--space-4);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  shape-outside: polygon(0 0, 100% 0, 100% 100%);
}

/* ---------- 4. Diagonal split hero (cw/diagonal-split Meta Box block, or a block pattern) ---------- */
.cw-split {
  /* No width of its own: the block sits in the content column (like every other block),
     so it lines up with Blocksy's header and the sections around it at every screen size.
     Only the fold grid behind it bleeds to full width (.cw-foldgrid--bleed). */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-8) 0 var(--space-7);
}
.cw-split__text { grid-column: 1 / span 5; }
.cw-split__text > * + * { margin-top: var(--space-4); }
.cw-split__eyebrow { margin-bottom: calc(var(--space-2) - var(--space-4)); }
.cw-split__art { grid-column: 7 / span 6; position: relative; aspect-ratio: 1; }
.cw-split__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(var(--chamfer-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer-lg));
  background: var(--paper-deep);
}
/* the folded-back corner: a half-square triangle that exactly fills the cut */
.cw-split__corner {
  position: absolute; top: 0; left: 0;
  width: var(--chamfer-lg); height: var(--chamfer-lg);
  background: var(--indigo-soft);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.cw-split__corner--lamp { background: var(--lamp); }
/* a flat triangle facet stepping out from under the image */
.cw-split__facet {
  position: absolute; left: calc(var(--grid-unit) * -2); bottom: calc(var(--grid-unit) * -1);
  width: calc(var(--grid-unit) * 4); height: calc(var(--grid-unit) * 4);
  background: var(--paper-deep);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: -1;
}
.cw-split--reverse .cw-split__text { grid-column: 8 / span 5; grid-row: 1; }
.cw-split--reverse .cw-split__art  { grid-column: 1 / span 6; grid-row: 1; }
@media (max-width: 781px) {
  .cw-split { grid-template-columns: 1fr; padding: var(--space-7) 0 var(--space-6); }
  .cw-split__text, .cw-split__art,
  .cw-split--reverse .cw-split__text, .cw-split--reverse .cw-split__art { grid-column: 1; grid-row: auto; }
  .cw-split__facet { display: none; }
}

/* ---------- 5. Artwork card (template-parts/artwork-card.php: Artwork archive + cw/artwork-grid block) ---------- */
.cw-card { display: block; color: inherit; text-decoration: none; }
.cw-card__media { position: relative; aspect-ratio: 1; background: var(--paper-deep); }
.cw-card__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  clip-path: polygon(0 0, calc(100% - var(--chamfer-md)) 0, 100% var(--chamfer-md), 100% 100%, 0 100%);
  transition: clip-path .3s ease;
}
/* the dog-ear: the folded-down corner shows the paper's reverse */
.cw-card__media::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: var(--chamfer-md); height: var(--chamfer-md);
  background: var(--paper);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  transition: width .3s ease, height .3s ease;
}
.cw-card:hover .cw-card__img, .cw-card:focus-visible .cw-card__img {
  clip-path: polygon(0 0, calc(100% - var(--chamfer-md) * 1.5) 0, 100% calc(var(--chamfer-md) * 1.5), 100% 100%, 0 100%);
}
.cw-card:hover .cw-card__media::after, .cw-card:focus-visible .cw-card__media::after {
  width: calc(var(--chamfer-md) * 1.5); height: calc(var(--chamfer-md) * 1.5);
}
.cw-card__body { padding-top: var(--space-3); display: grid; gap: var(--space-1); }
.cw-card__title { font: 400 21px/28px var(--font-display); letter-spacing: 0; color: var(--ink); }
.cw-card__meta { font: 400 14px/22px var(--font-text); color: var(--ink-muted); }

/* status tag — always a word, never colour alone */
.cw-tag {
  display: inline-flex; align-items: center; gap: 6px; width: max-content;
  font: 500 11px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.cw-tag::before { content: ""; width: 7px; height: 7px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cw-tag--available { color: var(--indigo); }
.cw-tag--new { color: var(--vermilion); }
.cw-tag--sold::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; clip-path: none; transform: rotate(45deg); width: 6px; height: 6px; }

/* ---------- 6. Tessellation gallery (cw/tessellation-gallery Meta Box block) ---------- */
.cw-tess {
  --tile: calc(var(--grid-unit) * 5);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--tile), 100%), 1fr));
  grid-auto-flow: dense;
  gap: var(--grid-line);
  background: var(--fold-line);           /* 1px gaps read as creases between tiles */
  border: var(--grid-line) solid var(--fold-line);
}
.cw-tess__tile {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--paper-deep); color: inherit; text-decoration: none; display: block;
}
.cw-tess__tile--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.cw-tess__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: clip-path .45s ease; }
/* split tiles: image on one half-square, title on the other; hover/focus unfolds to the full square */
.cw-tess__tile--split-a .cw-tess__img { clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%); }
.cw-tess__tile--split-b .cw-tess__img { clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%); }
.cw-tess__tile--split-a:hover .cw-tess__img, .cw-tess__tile--split-a:focus-visible .cw-tess__img,
.cw-tess__tile--split-b:hover .cw-tess__img, .cw-tess__tile--split-b:focus-visible .cw-tess__img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.cw-tess__caption {
  position: absolute; right: var(--space-4); bottom: var(--space-4); max-width: 55%;
  text-align: right; display: grid; gap: 2px; transition: opacity .3s ease;
}
.cw-tess__tile--split-b .cw-tess__caption { right: auto; left: var(--space-4); text-align: left; }
.cw-tess__tile--split-a:hover .cw-tess__caption, .cw-tess__tile--split-b:hover .cw-tess__caption,
.cw-tess__tile--split-a:focus-visible .cw-tess__caption, .cw-tess__tile--split-b:focus-visible .cw-tess__caption { opacity: 0; }
.cw-tess__title { font: 400 18px/24px var(--font-display); color: var(--ink); }
.cw-tess__meta  { font: 400 13px/18px var(--font-text); color: var(--ink-muted); }
.cw-tess__tile--soft { background: var(--indigo-soft); }
.cw-tess__tile--lamp { background: var(--lamp); }
.cw-tess__tile--lamp .cw-tess__title, .cw-tess__tile--lamp .cw-tess__meta { color: #1d1c1a; }
.cw-tess__tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -4px; }

/* ---------- 7. Section heading (block pattern: eyebrow paragraph + heading + optional lead) ---------- */
.cw-sechead { display: grid; gap: var(--space-2); max-width: 40em; margin-bottom: var(--space-5); }
.cw-sechead--center { margin-inline: auto; text-align: center; justify-items: center; }
.cw-eyebrow {
  /* block-level flex (not inline-flex) so WordPress's constrained layout can give it
     the content width and auto margins, lining it up with the headings and text */
  display: flex; align-items: center; gap: var(--space-2);
  font: 500 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0;
}
/* a half-square triangle, the first fold */
.cw-eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--vermilion); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.cw-eyebrow--quiet::before { background: var(--crease); }
.cw-eyebrow.has-text-align-center, .cw-sechead--center .cw-eyebrow { justify-content: center; }
.cw-eyebrow.has-text-align-right { justify-content: flex-end; }
.cw-sechead__title { font: 300 48px/52px var(--font-display); letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.cw-sechead__lead { font: 300 20px/32px var(--font-text); color: var(--ink-muted); margin: var(--space-2) 0 0; max-width: var(--measure); }
@media (max-width: 781px) { .cw-sechead__title { font-size: 36px; line-height: 40px; } }

/* ---------- 8. Fold spec (artwork details list; Meta Box fields on the Artwork CPT) ---------- */
.cw-spec { margin: 0; display: grid; grid-template-columns: max-content 1fr; column-gap: var(--space-5); max-width: 32em; }
.cw-spec dt, .cw-spec dd { margin: 0; padding: var(--space-3) 0; border-top: var(--grid-line) solid var(--fold-line); }
.cw-spec dt { font: 500 12px/24px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.cw-spec dd { font: 400 17px/24px var(--font-text); color: var(--ink); }
.cw-spec dd.cw-spec__num { font: 300 19px/24px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.cw-spec > :nth-last-child(-n+2) { border-bottom: var(--grid-line) solid var(--fold-line); }

/* ---------- 9. Form fields (commission / contact forms; style any form plugin inside .cw-form) ---------- */
.cw-field { display: grid; gap: var(--space-2); }
.cw-field__label { font: 500 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.cw-field__hint  { font: 400 14px/22px var(--font-text); color: var(--ink-muted); }
.cw-input,
.cw-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
  --c: var(--chamfer-sm);
  --edge: var(--crease);
  --fill: var(--field-fill, var(--paper-raised));
  --ground: var(--field-ground, var(--paper)); /* surfaces set --field-ground / --field-fill */
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 12px var(--space-3);
  font: 400 17px/24px var(--font-text);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* four 1px edges + a 45° cut top-right corner, all painted as backgrounds,
     so nothing is clipped and the focus outline stays whole */
  background:
    linear-gradient(225deg, var(--ground) calc(50% - .5px), var(--edge) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)) top right / var(--c) var(--c) no-repeat,
    linear-gradient(var(--edge), var(--edge)) top left / calc(100% - var(--c)) 1px no-repeat,
    linear-gradient(var(--edge), var(--edge)) bottom right / 1px calc(100% - var(--c)) no-repeat,
    linear-gradient(var(--edge), var(--edge)) bottom left / 100% 1px no-repeat,
    linear-gradient(var(--edge), var(--edge)) top left / 1px 100% no-repeat,
    var(--fill);
}
select.cw-input, .cw-form select { appearance: none; padding-right: var(--space-6); }
.cw-input::placeholder, .cw-form ::placeholder { color: var(--ink-muted); opacity: 1; }
.cw-input:hover, .cw-form :is(input, select, textarea):hover { --edge: var(--ink); }
.cw-input:focus-visible, .cw-form :is(input, select, textarea):focus-visible { --edge: var(--ink); outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.cw-input[aria-invalid="true"] { --edge: var(--vermilion); }
.cw-field__error { font: 400 14px/22px var(--font-text); color: var(--vermilion); display: flex; gap: 6px; align-items: center; }
.cw-field__error::before { content: "!"; font: 500 12px/1 var(--font-display); }
textarea.cw-input { min-height: 144px; resize: vertical; }

/* ---------- 10. Crease divider (block styles on core/separator: "Crease", "Crease (short)") ----------
   Full content width by default; the short version is 4 grid units (192px).
   Width and max-width are !important because WordPress core and Blocksy both give
   separators their own width (100px in the editor), with selectors we can't outrank
   reliably in both the editor and the front end. */
:root :is(hr.cw-crease, hr.wp-block-separator.is-style-cw-crease, hr.wp-block-separator.is-style-cw-crease-short) {
  --crease-w: 100%;
  position: relative;
  box-sizing: border-box;
  width: var(--crease-w) !important;
  max-width: min(100%, var(--wp--style--global--content-size, 100%)) !important;  /* never wider than the content column */
  height: 16px;
  margin-block: var(--space-6);
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--crease);
  background: linear-gradient(var(--crease), var(--crease)) center / 100% var(--grid-line) no-repeat;
  opacity: 1;
}
/* short: "Crease (short)" style, or "Crease" plus the class cw-crease--short (or is-short) */
:root :is(hr.cw-crease.cw-crease--short,
          hr.wp-block-separator.is-style-cw-crease-short,
          hr.wp-block-separator.is-style-cw-crease.cw-crease--short,
          hr.wp-block-separator.is-style-cw-crease.is-short) {
  --crease-w: calc(var(--grid-unit) * 4);
}
/* the waterbomb diamond at the centre: a square folded on its diagonals */
:root :is(hr.cw-crease, hr.wp-block-separator.is-style-cw-crease, hr.wp-block-separator.is-style-cw-crease-short)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--crease-ground, var(--paper));   /* set --crease-ground on paper-deep sections */
  box-shadow: inset 0 0 0 1px var(--crease);
}
:root :is(hr.cw-crease, hr.wp-block-separator.is-style-cw-crease, hr.wp-block-separator.is-style-cw-crease-short)::before { content: none; }

/* ---------- 11. Header navigation (Blocksy header menu) ----------
   Blocksy markup: .ct-header nav[data-id="menu"] > ul > li > a.ct-menu-link
   The link fills the whole header row height with the label centred, so the
   triangle is placed from the vertical centre (not the bottom) of the link.
   Hover/focus: the triangle folds up into view. Current page: it stays. */
.ct-header [data-id="menu"] > ul > li > .ct-menu-link { position: relative; }
.ct-header [data-id="menu"] > ul > li > .ct-menu-link::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 14px);            /* just under the 12px label */
  width: 8px;
  height: 8px;
  background: var(--indigo);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translate(-50%, 4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.ct-header [data-id="menu"] > ul > li > .ct-menu-link:is(:hover, :focus-visible)::after,
.ct-header [data-id="menu"] > ul > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_parent) > .ct-menu-link::after,
.ct-header [data-id="menu"] > ul > li > .ct-menu-link[aria-current="page"]::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .ct-header [data-id="menu"] > ul > li > .ct-menu-link::after { transition: none; }
}
/* the same rule for hand-built navs */
.cw-nav a { position: relative; font: 500 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.cw-nav a::after { content: ""; position: absolute; left: 50%; top: calc(100% + 4px); width: 8px; height: 8px; background: var(--indigo); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translate(-50%, 4px); opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.cw-nav a:is(:hover, :focus-visible, [aria-current="page"])::after { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 12. Artwork purchase panel (single Artwork page; product linked via MB Relationships) ---------- */
.cw-buy { display: grid; gap: var(--space-3); padding: var(--space-5) 0; border-block: var(--grid-line) solid var(--fold-line); max-width: 32em; }
.cw-buy__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.cw-buy__price, .cw-price { font: 300 30px/36px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.cw-buy__price del, .cw-price del { color: var(--ink-muted); font-size: .6em; margin-right: var(--space-2); }
.cw-buy__price ins, .cw-price ins { text-decoration: none; }
.cw-buy__note { font: 400 14px/22px var(--font-text); color: var(--ink-muted); margin: 0; }
.cw-buy__actions { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }

/* ---------- 13. WooCommerce (shop, product, cart, checkout) ----------
   Scoped to body.cw (added by the child theme's body_class filter) so it outranks Blocksy's
   own rules without !important. Blocksy supplies its own WooCommerce styling; if WooCommerce's
   default stylesheet is also loading (check for woocommerce-general in the page source), turn it off
   with add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); or its higher-specificity
   rules will win.
   Blocksy-specific class names are marked "verify": check them in your Blocksy version. */

/* Buttons: same two-corner fold as .cw-btn, painted with gradients (no pseudo-elements,
   because WooCommerce uses ::after for its loading spinner). */
body.cw :is(a.button, button.button, input.button, #respond input#submit,
            a.button.add_to_cart_button, .single_add_to_cart_button, a.checkout-button, #place_order, .added_to_cart,
            .wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
            .wp-block-button__link.add_to_cart_button) {
  --fill: var(--indigo);
  --cut: calc(var(--chamfer-sm) * .7071);          /* gradient distance → 45° leg of chamfer-sm */
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-4);
  border: 0; border-radius: 0; box-shadow: none;
  background:
    linear-gradient(135deg, transparent var(--cut), var(--fill) 0) top left / 51% 100% no-repeat,
    linear-gradient(-45deg, transparent var(--cut), var(--fill) 0) bottom right / 51% 100% no-repeat;
  color: var(--on-indigo);
  font: 500 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
}
body.cw :is(a.button, button.button, a.button.add_to_cart_button, .single_add_to_cart_button, a.checkout-button, #place_order,
            .wc-block-components-button:not(.is-link), .wc-block-cart__submit-button):hover {
  --cut: calc(var(--chamfer-sm-open) * .7071);
  background:
    linear-gradient(135deg, transparent var(--cut), var(--fill) 0) top left / 51% 100% no-repeat,
    linear-gradient(-45deg, transparent var(--cut), var(--fill) 0) bottom right / 51% 100% no-repeat;
  color: var(--on-indigo);
}
/* secondary Woo buttons (update cart, apply coupon, view cart) → outline look */
body.cw :is(button[name="update_cart"], button[name="apply_coupon"], a.added_to_cart) {
  --fill: transparent;
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
body.cw :is(.button, .single_add_to_cart_button):is(:disabled, .disabled) { --fill: var(--crease); color: var(--paper); opacity: 1; }

/* Prices */
body.cw :is(.price, .wc-block-components-product-price, .wc-block-grid__product-price) {
  font: 300 19px/24px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
body.cw div.product .summary .price { font-size: 30px; line-height: 36px; color: var(--ink); }
body.cw .price del { color: var(--ink-muted); opacity: 1; font-size: .7em; }
body.cw .price ins { text-decoration: none; }

/* Sale / out-of-stock badges → status tags (word + shape, never colour alone) */
body.cw :is(span.onsale, .wc-block-components-product-sale-badge, .out-of-stock-badge /* verify: Blocksy */) {
  min-height: 0; min-width: 0; padding: var(--space-1) var(--space-2); line-height: 16px;
  border: 0; border-radius: 0;
  background: var(--paper-raised); color: var(--vermilion);
  font: 500 11px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - var(--chamfer-xs)) 0, 100% var(--chamfer-xs), 100% 100%, 0 100%);
}
body.cw :is(span, div).out-of-stock-badge { color: var(--ink-muted); }

/* Shop archive cards (Blocksy's product cards) */
body.cw ul.products li.product a { text-decoration: none; }
body.cw ul.products li.product :is(img, .wp-post-image) {
  aspect-ratio: 1; object-fit: cover; border-radius: 0;
  clip-path: polygon(0 0, calc(100% - var(--chamfer-md)) 0, 100% var(--chamfer-md), 100% 100%, 0 100%);
  transition: clip-path .3s ease;
}
body.cw ul.products li.product:hover :is(img, .wp-post-image) {
  clip-path: polygon(0 0, calc(100% - var(--chamfer-md) * 1.5) 0, 100% calc(var(--chamfer-md) * 1.5), 100% 100%, 0 100%);
}
body.cw ul.products li.product :is(.woocommerce-loop-product__title, h2, .ct-woo-card-title /* verify */) {
  font: 400 21px/28px var(--font-display); letter-spacing: 0; color: var(--ink);
}
body.cw ul.products li.product :is(.entry-meta, .product-categories, .ct-woo-card-extra /* verify */) {
  font: 500 11px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}

/* Single product */
body.cw div.product .product_title { font: 300 48px/52px var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
body.cw div.product .woocommerce-product-details__short-description { font: 300 20px/32px var(--font-text); color: var(--ink-muted); }
body.cw div.product :is(.woocommerce-product-gallery__image img, .flex-viewport img) {
  clip-path: polygon(var(--chamfer-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer-lg));
}
body.cw div.product .woocommerce-tabs ul.tabs { border-bottom: var(--grid-line) solid var(--fold-line); padding: 0; }
body.cw div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0 var(--space-5) 0 0; padding: 0; }
body.cw div.product .woocommerce-tabs ul.tabs li::before,
body.cw div.product .woocommerce-tabs ul.tabs li::after { display: none; }
body.cw div.product .woocommerce-tabs ul.tabs li a {
  position: relative; display: block; padding: var(--space-3) 0;
  font: 500 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}
body.cw div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); }
body.cw div.product .woocommerce-tabs ul.tabs li.active a::after {
  content: ""; position: absolute; left: 50%; bottom: -1px; width: 10px; height: 10px; transform: translateX(-50%);
  background: var(--indigo); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
body.cw .product_meta { font: 400 14px/22px var(--font-text); color: var(--ink-muted); }

/* Fields: classic cart/checkout/account forms get the full .cw-input treatment */
body.cw :is(form .form-row :is(input.input-text, textarea, select), .quantity input.qty, #coupon_code, .woocommerce-ordering select) {
  --c: var(--chamfer-sm); --edge: var(--crease); --fill: var(--field-fill, var(--paper-raised)); --ground: var(--field-ground, var(--paper));
  box-sizing: border-box; min-height: 48px; padding: 12px var(--space-3);
  font: 400 17px/24px var(--font-text); color: var(--ink);
  border: 0; border-radius: 0; box-shadow: none;
  background:
    linear-gradient(225deg, var(--ground) calc(50% - .5px), var(--edge) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)) top right / var(--c) var(--c) no-repeat,
    linear-gradient(var(--edge), var(--edge)) top left / calc(100% - var(--c)) 1px no-repeat,
    linear-gradient(var(--edge), var(--edge)) bottom right / 1px calc(100% - var(--c)) no-repeat,
    linear-gradient(var(--edge), var(--edge)) bottom left / 100% 1px no-repeat,
    linear-gradient(var(--edge), var(--edge)) top left / 1px 100% no-repeat,
    var(--fill);
}
body.cw .quantity input.qty { width: 5em; text-align: center; font-family: var(--font-display); }
body.cw form .form-row :is(input.input-text, textarea, select):hover { --edge: var(--ink); }
body.cw form .form-row :is(input.input-text, textarea, select):focus-visible { --edge: var(--ink); outline: 2px solid var(--focus-ring); outline-offset: 3px; }
body.cw form .form-row.woocommerce-invalid :is(input.input-text, select) { --edge: var(--vermilion); }
body.cw form .form-row label { font: 500 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
body.cw form .form-row .required { color: var(--vermilion); text-decoration: none; }
/* Block cart/checkout: floating labels need their own padding, so only square and recolour */
body.cw :is(.wc-block-components-text-input input, .wc-block-components-combobox .components-combobox-control input, .wc-block-components-select select, .wc-blocks-components-select__select) {
  border-radius: 0; border-color: var(--crease); background-color: var(--paper-raised); color: var(--ink);
}
body.cw .wc-block-components-text-input input:focus { border-color: var(--ink); box-shadow: none; outline: 2px solid var(--focus-ring); outline-offset: 3px; }
body.cw .select2-container .select2-selection { border-radius: 0; border-color: var(--crease); background: var(--paper-raised); min-height: 48px; }

/* Tables (cart, order review, account) */
body.cw table.shop_table { border: 0; border-radius: 0; border-top: var(--grid-line) solid var(--fold-line); }
body.cw table.shop_table :is(th, td) { border-color: var(--fold-line); padding: var(--space-3) var(--space-2); }
body.cw table.shop_table th { font: 500 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
body.cw table.shop_table td.product-name a { font: 400 19px/24px var(--font-display); color: var(--ink); text-decoration: none; }

/* Notices */
body.cw :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) {
  border: var(--grid-line) solid var(--crease); border-radius: 0;
  background: var(--paper-raised); color: var(--ink);
  font: 400 15px/24px var(--font-text);
}
body.cw .woocommerce-error, body.cw .wc-block-components-notice-banner.is-error { border-color: var(--vermilion); }
body.cw :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { color: var(--indigo); }
body.cw .woocommerce-error::before { color: var(--vermilion); }

/* Store pagination */
body.cw nav.woocommerce-pagination ul { border: 0; }
body.cw nav.woocommerce-pagination ul li { border: 0; }
body.cw nav.woocommerce-pagination ul li :is(a, span) { font: 400 17px/24px var(--font-display); color: var(--ink-muted); padding: var(--space-2) var(--space-3); background: none; }
body.cw nav.woocommerce-pagination ul li span.current { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }


/* ---------- 14. Theme glue (child-theme templates, blocks and patterns) ---------- */
/* Diagonal wrap built from a core/image block (figure > img) */
figure.cw-diag-wrap__img { margin-top: 0; }
figure.cw-diag-wrap__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Artwork grid block (meta-box/cw-artwork-grid) */
.cw-card-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
@media (max-width: 999px) { .cw-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .cw-card-grid { grid-template-columns: 1fr; } }
.cw-card__title { margin: 0; }
.cw-card__meta .cw-price { font: 400 14px/22px var(--font-display); color: var(--ink); letter-spacing: 0; }
/* Single Artwork: buy panel followed by the fold spec */
.cw-buy { margin-top: var(--space-6); }
.cw-buy + .cw-spec { margin-top: var(--space-5); }
/* WooCommerce product page: link back to the artwork */
.cw-product-artwork { margin-top: var(--space-5); display: grid; gap: var(--space-3); }

/* Artwork archive (archive-artwork.php, taxonomy-artwork_type.php) */
/* width comes from Blocksy's .ct-container wrapper (same as the header); only vertical padding here */
.cw-archive { padding: var(--space-7) 0 var(--space-8); }
@media (max-width: 781px) { .cw-archive { padding: var(--space-6) 0 var(--space-7); } }
.cw-archive .cw-sechead__lead > :first-child { margin-top: 0; }
.cw-archive .cw-sechead__lead > :last-child { margin-bottom: 0; }
/* type filter: label links with the folded triangle under the current one */
/* Filter bar: one line always. If the tabs don't fit (phones), the row scrolls sideways,
   the edge that has more fades out, and the current tab is scrolled into view (cw-filter.js).
   The current tab's triangle sits on the rule. */
.cw-filter {
  display: flex; flex-wrap: nowrap; gap: var(--space-5);
  margin: 0 0 var(--space-6); padding-bottom: var(--space-3);
  border-bottom: var(--grid-line) solid var(--fold-line);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  --fade-l: 0px; --fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
}
.cw-filter::-webkit-scrollbar { display: none; }
.cw-filter[data-more~="start"] { --fade-l: 40px; }
.cw-filter[data-more~="end"] { --fade-r: 40px; }
.cw-filter a { position: relative; flex: 0 0 auto; white-space: nowrap; padding: var(--space-2) 0; font: 500 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; }
.cw-filter a:hover { color: var(--ink); }
.cw-filter a[aria-current] { color: var(--ink); }
.cw-filter a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: calc(-1 * var(--space-3)); width: 10px; height: 8px; transform: translateX(-50%); background: var(--indigo); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@media (max-width: 689.98px) { .cw-filter { gap: var(--space-4); margin-bottom: var(--space-5); } }
/* pagination (the_posts_pagination) */
.cw-pagination { margin-top: var(--space-7); }
.cw-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.cw-pagination .page-numbers { min-width: 40px; padding: var(--space-2) var(--space-2); text-align: center; font: 400 17px/24px var(--font-display); color: var(--ink-muted); text-decoration: none; }
.cw-pagination .page-numbers:hover { color: var(--ink); }
.cw-pagination .page-numbers.current { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.cw-pagination :is(.prev, .next) { font: 500 12px/24px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--indigo); }

/* Single Artwork (single-artwork.php) */
/* width comes from Blocksy's .ct-container wrapper (same as the header) */
.cw-artwork { padding: var(--space-6) 0 var(--space-8); }
.cw-artwork__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.cw-artwork__media { grid-column: 1 / span 7; display: grid; gap: var(--space-3); }
.cw-artwork__info { grid-column: 8 / span 5; position: sticky; top: var(--space-6); }
/* main image: square, top-left corner folded back into a lamp-coloured half-square */
.cw-artwork__main { position: relative; margin: 0; aspect-ratio: 1; background: var(--paper-deep); }
.cw-artwork__main-img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(var(--chamfer-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer-lg));
}
.cw-artwork__corner {
  position: absolute; top: 0; left: 0; width: var(--chamfer-lg); height: var(--chamfer-lg);
  background: var(--lamp); clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* gallery tiles: square, five across, current tile marked with an indigo edge */
.cw-artwork__thumbs {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2);
}
@media (max-width: 781px) { .cw-artwork__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cw-artwork__thumbs li { margin: 0; }
.cw-artwork__thumb { position: relative; display: block; aspect-ratio: 1; background: var(--paper-deep); }
.cw-artwork__thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cw-artwork__thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s ease; pointer-events: none; }
.cw-artwork__thumb:hover::after { box-shadow: inset 0 0 0 2px var(--crease); }
.cw-artwork__thumb[aria-current]::after { box-shadow: inset 0 0 0 3px var(--indigo); }
.cw-artwork__thumb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* info column */
.cw-artwork__info .cw-eyebrow a { color: inherit; text-decoration: none; }
.cw-artwork__info .cw-eyebrow a:hover { color: var(--ink); }
.cw-artwork__title { font: 300 48px/52px var(--font-display); letter-spacing: -0.02em; color: var(--ink); margin: var(--space-2) 0 0; }
.cw-artwork__lead { font: 300 20px/32px var(--font-text); color: var(--ink-muted); margin: var(--space-3) 0 0; }
.cw-artwork__info .cw-buy { margin-top: var(--space-5); }
.cw-artwork__info .cw-spec { margin-top: var(--space-5); max-width: none; }
/* story and more work */
.cw-artwork__story { margin-top: var(--space-7); max-width: var(--measure); }
.cw-artwork__story > * { margin-left: 0 !important; }   /* align the story with the image column, not centred */
.cw-artwork__more { margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--grid-line) solid var(--fold-line); }
.cw-artwork__more .cw-link-arrow { margin-top: var(--space-4); }
@media (max-width: 999px) {
  .cw-artwork__media { grid-column: 1 / span 6; }
  .cw-artwork__info { grid-column: 7 / span 6; }
}
@media (max-width: 781px) {
  .cw-artwork { padding-top: var(--space-4); }
  .cw-artwork__top { grid-template-columns: 1fr; gap: var(--space-5); }
  .cw-artwork__media, .cw-artwork__info { grid-column: 1; position: static; }
  .cw-artwork__title { font-size: 36px; line-height: 40px; }
}

/* Empty cart (Cart block → "Empty cart" view, pattern tessellations/empty-cart) */
.cw-empty-cart { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-7) 0 var(--space-8); text-align: center; }
.cw-empty-cart .cw-sechead__title { margin: 0; }
.cw-empty-cart .cw-lead { margin: 0; color: var(--ink-muted); max-width: 28em; }
:root .cw-empty-cart hr.wp-block-separator { margin-block: var(--space-3); }
.cw-empty-cart .wp-block-buttons { margin: 0; }
/* if WooCommerce's default empty-cart heading is kept anywhere, drop its sad-face icon */
body.cw .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none; }

/* ---------- 15. Commissions page (pattern tessellations/commissions-page, inc/commissions.php) ---------- */
/* surfaces tell the fields inside them what to paint the cut corner with */
.cw-facet, .wp-block-group[class*="is-style-cw-facet"] { --field-ground: var(--paper-raised); --field-fill: var(--paper); }
.cw-facet--deep { --field-ground: var(--paper-deep); }
.cw-facet--soft { --field-ground: var(--indigo-soft); }

.cw-commissions { padding: var(--space-6) 0 var(--space-8); }
.cw-commissions__cols { gap: var(--space-7) !important; margin-top: var(--space-6); }
.cw-commissions__form { padding: var(--space-6); }
@media (max-width: 781px) { .cw-commissions__cols { gap: var(--space-6) !important; } .cw-commissions__form { padding: var(--space-5) var(--space-4); } }

/* how a commission works: numbered steps, light numerals, fold-line rules */
.cw-steps { list-style: none; counter-reset: cw-step; margin: var(--space-4) 0 0; padding: 0; display: grid; }
.cw-steps > li {
  counter-increment: cw-step; position: relative;
  padding: var(--space-4) 0 var(--space-4) calc(var(--grid-unit) + var(--space-3));
  border-top: var(--grid-line) solid var(--fold-line);
  font: 400 16px/26px var(--font-text); color: var(--ink-muted);
}
.cw-steps > li:last-child { border-bottom: var(--grid-line) solid var(--fold-line); }
.cw-steps > li::before {
  content: counter(cw-step, decimal-leading-zero);
  position: absolute; left: 0; top: var(--space-4);
  font: 300 30px/1 var(--font-display); color: var(--ink); letter-spacing: 0;
}
.cw-steps > li strong { display: block; margin-bottom: var(--space-1); font: 400 21px/28px var(--font-display); color: var(--ink); letter-spacing: 0; }

/* "Asking about" panel above the form */
.cw-inquiry {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); align-items: center;
  margin: 0 0 var(--space-5); padding: var(--space-3);
  background: var(--paper);
  clip-path: polygon(0 0, calc(100% - var(--chamfer-sm)) 0, 100% var(--chamfer-sm), 100% 100%, 0 100%);
}
.cw-inquiry__thumb { display: block; aspect-ratio: 1; background: var(--paper-deep); }
.cw-inquiry__img { display: block; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer-sm)); }
.cw-inquiry__body { display: grid; gap: 2px; }
.cw-inquiry__body > * { margin: 0; }
.cw-inquiry__title { font: 400 21px/28px var(--font-display); letter-spacing: 0; }
.cw-inquiry__title a { color: var(--ink); text-decoration: none; }
.cw-inquiry__title a:hover { color: var(--indigo); }
.cw-inquiry__meta { font: 400 14px/22px var(--font-text); color: var(--ink-muted); }
.cw-inquiry .cw-tag { margin-top: var(--space-1); }

/* ---------- 16. Gravity Forms (set the form style to "Gravity Forms 2.5 Theme") ---------- */
:root .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: var(--space-4); grid-column-gap: var(--space-4); }
:root .gform_wrapper.gravity-theme .gfield :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], select, textarea) {
  --c: var(--chamfer-sm); --edge: var(--crease);
  --fill: var(--field-fill, var(--paper-raised)); --ground: var(--field-ground, var(--paper));
  box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px var(--space-3);
  font: 400 17px/24px var(--font-text); color: var(--ink);
  border: 0; border-radius: 0; box-shadow: none;
  background:
    linear-gradient(225deg, var(--ground) calc(50% - .5px), var(--edge) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)) top right / var(--c) var(--c) no-repeat,
    linear-gradient(var(--edge), var(--edge)) top left / calc(100% - var(--c)) 1px no-repeat,
    linear-gradient(var(--edge), var(--edge)) bottom right / 1px calc(100% - var(--c)) no-repeat,
    linear-gradient(var(--edge), var(--edge)) bottom left / 100% 1px no-repeat,
    linear-gradient(var(--edge), var(--edge)) top left / 1px 100% no-repeat,
    var(--fill);
}
:root .gform_wrapper.gravity-theme .gfield .ginput_container textarea { min-height: 160px; resize: vertical; }
:root .gform_wrapper.gravity-theme .gfield :is(input, select, textarea):hover { --edge: var(--ink); }
:root .gform_wrapper.gravity-theme .gfield :is(input, select, textarea):focus-visible { --edge: var(--ink); outline: 2px solid var(--focus-ring); outline-offset: 3px; }
:root .gform_wrapper.gravity-theme .gfield_error :is(input, select, textarea),
:root .gform_wrapper.gravity-theme .gfield :is(input, select, textarea)[aria-invalid="true"] { --edge: var(--vermilion); }
:root .gform_wrapper.gravity-theme :is(.gfield_label, legend.gfield_label) {
  margin-bottom: var(--space-2); font: 500 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
:root .gform_wrapper.gravity-theme .gfield_required { margin-left: .5em; font: 400 13px/16px var(--font-text); letter-spacing: 0; text-transform: none; color: var(--ink-muted); }
:root .gform_wrapper.gravity-theme .gfield_description { padding-top: var(--space-2); font: 400 14px/22px var(--font-text); color: var(--ink-muted); }
:root .gform_wrapper.gravity-theme :is(.gfield_validation_message, .validation_message) {
  margin-top: var(--space-2); padding: 0; border: 0; background: none;
  font: 400 14px/22px var(--font-text); color: var(--vermilion);
}
:root .gform_wrapper.gravity-theme .gform_validation_errors {
  margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4);
  border: var(--grid-line) solid var(--vermilion); border-radius: 0; box-shadow: none; background: var(--paper);
}
:root .gform_wrapper.gravity-theme .gform_validation_errors > h2 { font: 400 15px/24px var(--font-text); color: var(--vermilion); }
:root .gform_wrapper.gravity-theme .gform_validation_errors > h2 .gform-icon { display: none; }
:root .gform_wrapper.gravity-theme .gchoice label { font: 400 17px/24px var(--font-text); color: var(--ink); }
:root .gform_wrapper.gravity-theme .gfield-choice-input { accent-color: var(--indigo); }
:root .gform_wrapper.gravity-theme .gform_footer { margin-top: var(--space-5); padding: 0; }
:root .gform_confirmation_message { font: 300 20px/32px var(--font-text); color: var(--ink); }

/* select menus: a solid down-triangle drawn in the background (every styled select) */
:root :is(select.cw-input, .cw-form select),
:root .gform_wrapper.gravity-theme .gfield select:not([multiple]) {   /* as specific as the Gravity Forms field rule, and later, so it wins */
  appearance: none; -webkit-appearance: none; padding-right: var(--space-6);
  background:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%) right 24px center / 5px 5px no-repeat,
    linear-gradient(135deg, var(--ink) 50%, transparent 50%) right 19px center / 5px 5px no-repeat,
    linear-gradient(225deg, var(--ground) calc(50% - .5px), var(--edge) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)) top right / var(--c) var(--c) no-repeat,
    linear-gradient(var(--edge), var(--edge)) top left / calc(100% - var(--c)) 1px no-repeat,
    linear-gradient(var(--edge), var(--edge)) bottom right / 1px calc(100% - var(--c)) no-repeat,
    linear-gradient(var(--edge), var(--edge)) bottom left / 100% 1px no-repeat,
    linear-gradient(var(--edge), var(--edge)) top left / 1px 100% no-repeat,
    var(--fill);
}

/* ---------- 17. Process page = posts index (home.php, category.php, pattern tessellations/process-intro) ---------- */
.cw-journal { padding-bottom: var(--space-8); }
.cw-journal__head { margin-top: var(--space-7); }
.cw-journal__head--top { margin-top: 0; padding-top: var(--space-7); }
@media (max-width: 781px) { .cw-journal__head { margin-top: var(--space-6); } .cw-journal__head--top { padding-top: var(--space-6); } }

/* intro on the full-width squares-only fold grid */
.cw-process-intro { padding: var(--space-8) 0 var(--space-7); }
@media (max-width: 781px) { .cw-process-intro { padding: var(--space-7) 0 var(--space-6); } }
.cw-process-intro .cw-process-intro__body { max-width: var(--measure); margin-left: 0 !important; margin-top: var(--space-5); }
.cw-process-intro .cw-process-intro__body p { margin: 0 0 var(--space-3); }
.cw-process-intro .cw-sechead { margin-left: 0 !important; }
/* optional three-image strip: grid, pattern, piece */
.cw-process-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.cw-process-strip > .wp-block-image { margin: 0; }
.cw-process-strip img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper-deep); }
.cw-process-strip > .wp-block-image:first-child img { clip-path: polygon(var(--chamfer-md) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer-md)); }
.cw-process-strip figcaption { margin-top: var(--space-2); text-align: left; font: 500 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 599px) { .cw-process-strip { grid-template-columns: 1fr; } }

/* studio note (post) cards: the artwork card plus category, date and excerpt */
.cw-post-card__cat { font: 500 11px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.cw-post-card__excerpt { margin: var(--space-1) 0 0; font: 400 15px/24px var(--font-text); color: var(--ink-muted); }
/* play mark for posts with a video: a folded paper square holding an indigo triangle */
.cw-post-card__play {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  width: 44px; height: 44px; background: var(--paper-raised);
  clip-path: polygon(var(--chamfer-xs) 0, 100% 0, 100% calc(100% - var(--chamfer-xs)), calc(100% - var(--chamfer-xs)) 100%, 0 100%, 0 var(--chamfer-xs));
}
.cw-post-card__play::after {
  content: ""; position: absolute; left: 17px; top: 14px; width: 13px; height: 16px;
  background: var(--indigo); clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ---------- 18. About page (pattern tessellations/about-page) ---------- */
.cw-about { padding: var(--space-7) 0 var(--space-8); }
.cw-about__cols { gap: var(--space-6) !important; margin-top: var(--space-5); align-items: flex-start; }
.cw-about__bio p { margin: 0 0 var(--space-3); }
.cw-about__bio p:first-child { font: 300 20px/32px var(--font-text); color: var(--ink); }
.cw-about > .wp-block-separator { margin-top: var(--space-7) !important; }

/* any image block with the class cw-photo-folded: keeps its own shape, top-left corner folded back in lamp */
.wp-block-image.cw-photo-folded { position: relative; margin: 0; }
.wp-block-image.cw-photo-folded img {
  display: block; width: 100%; height: auto;
  clip-path: polygon(var(--chamfer-lg) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chamfer-lg));
}
.wp-block-image.cw-photo-folded::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  width: var(--chamfer-lg); height: var(--chamfer-lg);
  background: var(--lamp); clip-path: polygon(0 0, 100% 0, 0 100%);
}
.wp-block-image.cw-photo-folded figcaption,
.cw-photo-folded .wp-element-caption { margin-top: var(--space-2); text-align: left; font: italic 400 14px/20px var(--font-text); color: var(--ink-muted); }
@media (max-width: 781px) { .wp-block-image.cw-photo-folded { --chamfer-lg: 64px; } }

/* facts list: label/value rows in the FoldSpec style, built from a core List block (class cw-facts) */
.cw-facts { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.cw-facts > li {
  display: grid; grid-template-columns: 7.5em minmax(0, 1fr); column-gap: var(--space-4);
  padding: var(--space-3) 0; border-top: var(--grid-line) solid var(--fold-line);
  font: 400 16px/24px var(--font-text); color: var(--ink);
}
.cw-facts > li:last-child { border-bottom: var(--grid-line) solid var(--fold-line); }
.cw-facts > li strong { font: 500 12px/24px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- 19. Mobile menu (Blocksy Offcanvas set to "Modal") ----------
   Blocksy markup (Modal): #offcanvas.ct-panel[data-behaviour="modal"] > .ct-panel-actions (close)
   + .ct-panel-content > .ct-panel-content-inner. (Side Panel adds a .ct-panel-inner wrapper; both are covered.)
   Contents:  > [data-id="mobile-menu"], [data-id="button"], [data-id="widget-area"].
   Customizer: Panel Background = palette 7 (paper). This adds everything else. */

/* the sheet: square fold grid painted as background layers (top layer fades it out toward the bottom) */
#offcanvas[data-behaviour="modal"], #offcanvas .ct-panel-inner {
  background-image:
    linear-gradient(to bottom, transparent 0%, var(--paper) 72%),
    linear-gradient(to right, var(--fold-line) var(--grid-line), transparent var(--grid-line)),
    linear-gradient(to bottom, var(--fold-line) var(--grid-line), transparent var(--grid-line)) !important;
  background-size: 100% 100%, var(--grid-unit-compact) var(--grid-unit-compact), var(--grid-unit-compact) var(--grid-unit-compact) !important;
  background-repeat: no-repeat, repeat, repeat !important;
  background-position: 0 0, -1px -1px, -1px -1px !important;
}
/* opening: the sheet unfolds on the diagonal from the top-right corner */
@keyframes cw-unfold {
  from { clip-path: polygon(100% 0, 100% 0, 100% 0); }
  to   { clip-path: polygon(-100% 0, 100% 0, 100% 200%); }
}
#offcanvas.active[data-behaviour="modal"], #offcanvas.active .ct-panel-inner { animation: cw-unfold .45s ease both; }

/* menu: numbered rows between fold-line hairlines, light Jost, a triangle at the end */
#offcanvas [data-id="mobile-menu"] { width: 100%; }
#offcanvas [data-id="mobile-menu"] > ul { counter-reset: cw-nav; margin: 0; padding: 0; }
#offcanvas [data-id="mobile-menu"] > ul > li { counter-increment: cw-nav; border-top: var(--grid-line) solid var(--fold-line); }
#offcanvas [data-id="mobile-menu"] > ul > li:last-child { border-bottom: var(--grid-line) solid var(--fold-line); }
#offcanvas [data-id="mobile-menu"] > ul > li > .ct-menu-link {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) 0;
  font: 300 36px/44px var(--font-display); letter-spacing: -.02em; text-transform: none;
  color: var(--ink); text-decoration: none;
}
#offcanvas [data-id="mobile-menu"] > ul > li > .ct-menu-link::before {
  content: counter(cw-nav, decimal-leading-zero);
  flex: 0 0 2.2em; font: 500 12px/16px var(--font-display); letter-spacing: .12em; color: var(--ink-muted);
}
#offcanvas [data-id="mobile-menu"] > ul > li > .ct-menu-link::after {
  content: ""; margin-left: auto; align-self: center;
  width: 9px; height: 9px; background: var(--crease); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#offcanvas [data-id="mobile-menu"] > ul > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_parent) > .ct-menu-link::after,
#offcanvas [data-id="mobile-menu"] > ul > li > .ct-menu-link[aria-current="page"]::after { background: var(--indigo); }
#offcanvas [data-id="mobile-menu"] > ul > li > .ct-menu-link:is(:hover, :focus-visible) { color: var(--indigo); }

/* Available work: the Blocksy Button element, full width, just under the menu */
#offcanvas [data-id="button"] { align-self: stretch; width: 100%; margin-top: var(--space-3); }
#offcanvas [data-id="button"] .ct-button { display: flex; justify-content: center; width: 100%; min-height: 52px; }

/* Widget Area: small label links (Instagram etc.) in one row */
#offcanvas [data-id^="widget-area"] { align-self: stretch; }
#offcanvas [data-id^="widget-area"] :is(p, ul) { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
#offcanvas [data-id^="widget-area"] :is(p, li, a) {
  font: 500 12px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted); text-decoration: none;
}
#offcanvas [data-id^="widget-area"] a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; }
#offcanvas [data-id^="widget-area"] a::after { content: ""; width: 6px; height: 6px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
#offcanvas [data-id^="widget-area"] a:is(:hover, :focus-visible) { color: var(--indigo); }

/* spacing between the three */
#offcanvas .ct-panel-content-inner { gap: var(--space-5); }

/* close: a plain ink X; no box. Keyboard focus turns it indigo. */
#offcanvas .ct-toggle-close {
  --theme-icon-color: var(--ink); --theme-icon-hover-color: var(--indigo); --icon-color: var(--ink);
  color: var(--ink); border: 0 !important; background: none !important; box-shadow: none !important;
}
#offcanvas .ct-toggle-close svg { fill: currentColor; }
#offcanvas .ct-toggle-close:is(:hover, :focus-visible) { --theme-icon-color: var(--indigo); color: var(--indigo); outline: none; }

@media (prefers-reduced-motion: reduce) { #offcanvas.active[data-behaviour="modal"], #offcanvas.active .ct-panel-inner { animation: none; } }

/* ---------- Motion: respect reduced-motion everywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  [class*="cw-"], [class*="cw-"]::before, [class*="cw-"]::after,
  [class*="is-style-cw-"] *, [class*="is-style-cw-"] *::before, [class*="is-style-cw-"] *::after,
  body.cw ul.products li.product img,
  .wp-block-button__link, .ct-header .ct-button, .ct-header .ct-button-ghost { transition: none !important; }
}