/* ==========================================================================
   TCDC WooCommerce Design, 1.0.0
   Screen Test Silence applied to single product, cart and checkout.

   Every rule is scoped under body.tcdc-woo, which the plugin only adds on
   is_product(), is_cart() and is_checkout(). Nothing here can reach any
   other page on the site.

   Tokens come from the design system stylesheet. Nothing is restated.

   READ BEFORE EDITING THE CHECKOUT SECTION
   Checkout is the page that takes money. Nothing in section 7 hides a form
   field, changes a control into something else, or touches the Stripe
   element's own box. Keep it that way.
   ========================================================================== */


/* 1. Page canvas ---------------------------------------------------------- */

body.tcdc-woo .entry-content,
body.tcdc-woo .inside-article {
  background: var(--surface);
}

body.tcdc-woo .entry-content {
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: 1.7;
}

/* The theme centres WooCommerce text globally through this class. On a two
   column layout that centring fights every alignment below. */
body.tcdc-woo .woocommerce-text-align-center {
  text-align: left;
}


/* 2. Single product, layout -----------------------------------------------

   TWO COLUMN VIA FLOAT, NOT GRID. THIS IS DELIBERATE.

   The purchase form floats right at 420px and the title, price and
   description flow beside it on the left. That was verified working against
   the real live DOM: form at x=520 width 420, description ending before it,
   no overflow of the container.

   Grid was built first and abandoned. Every property of the grid rule
   applied (grid-template-columns, grid-template-areas, column-gap, max-width,
   padding all took) EXCEPT `display`, which stayed `inline-block` even
   against an inline style and `!important`, with no rule anywhere on the page
   setting it. The same thing happened to `table.variations td`.

   The most likely cause is the test environment, not the site: the only browser
   available reported `document.visibilityState: hidden` and had
   requestAnimationFrame paused, and a throttled background tab does not
   rebuild the box tree for display changes while still applying paint level
   properties. IT WAS NOT PROVEN EITHER WAY.

   Float does not depend on the parent's display value at all, so it works
   whichever explanation is right. That is why it is here.

   THE 800px `.summary` IS SOLVED, 2026-08-09, measured on staging.

   The child theme's style.css carries three declarations that combine:

     .woocommerce-page #content div.product div.summary,
     .woocommerce-page div.product div.summary {
       display: inline-block !important;
       width: auto;
     }
     .woocommerce div.product .summary .product_title { width: 800px }

   The first selector contains an ID. **An ID outranks any number of classes**,
   so the class-only rule below lost silently, even with !important, and even
   though the declarations were parsed and present in the sheet.

   With `display: inline-block` and `width: auto`, the box is shrink to fit,
   and shrink to fit sizes to its widest child, which is the title pinned at
   800px. That is the entire 800px, and it is why a 420px panel plus a 64px
   gap left a 316px measure on the left.

   The fix is the override block immediately after this rule, which carries
   #content and therefore outranks the theme.

   MEASURED ON STAGING AT 1440px AFTER A FULL RELOAD:
   `.summary` 1112, panel at x=856 width 420, left column 628, no horizontal
   overflow. It was 316 before.
   -------------------------------------------------------------------- */

body.tcdc-woo.single-product .summary.entry-summary {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 3.5rem 0 4.5rem;
  overflow: hidden;               /* contains the float, no clearfix element */
}

/* 2026-08-09, later same day: GRID REPLACES FLOAT. Task 82.

   The float version above was measured correct on x (panel at 856, width
   420, no overflow) but never measured on y. A right float cannot rise above
   its own preceding siblings, so the panel actually sits about 900px down
   the page, under the title, price and description, with a 484px empty
   gutter running the whole way up beside them. That is the defect David is
   looking at.

   Grid was the original plan and was abandoned on the theory that `display`
   would not take in the test tab. That theory was wrong: the theme's
   `#content div.product div.summary` rule was winning on ID specificity, the
   same bug fixed for the float layout two sections up. The fix is the same
   trick, applied here instead: carry `#content` so this rule outranks the
   theme, then use grid-template-areas so the panel is a true sibling column,
   not a float.

   VERIFIED ON STAGING 2026-08-09: display, columns and areas all took, but
   this produced a new defect David caught (the "random $210" report): a
   roughly 170-190px gap opened above and below the price, even though
   .product_title and .price both had correct, small margins. Root cause was
   CSS Grid track sizing, not margins.

   `form.cart` (grid-area: panel) was one grid item spanning all three of
   the title/price/desc row tracks. Its own content (about 1395px tall) is
   far taller than title+price+desc combined (about 876px). Per the grid
   sizing spec, a spanning item that needs more room than the tracks it
   spans naturally provide forces those auto tracks to grow, and the extra
   space gets distributed across them. That inflated the title row from 54px
   to 227px and the price row from 87px to 274px: the gap was a spanning-item
   sizing artifact, not a margin bug. Confirmed by reading
   getComputedStyle(.summary).gridTemplateRows directly on the live page.

   FIX: stop making the left column three separate row-spanned grid items.
   Wrap title + price + desc in one plain-flow container (.tcdc-left-col,
   built at runtime by the JS file below, since the WooCommerce template is
   not touched) so the grid becomes ONE row, two columns: the wrapper and
   the panel, each sized only by its own content, with nothing to span and
   nothing to inflate. Inside the wrapper, title/price/desc stack by normal
   block flow and keep their own real margins. */

body.tcdc-woo.single-product #content div.product div.summary.entry-summary,
body.tcdc-woo.single-product div.product div.summary.entry-summary {
  display: grid !important;
  grid-template-columns: 1fr 420px;
  grid-template-areas: "left panel";
  column-gap: 4rem;
  row-gap: 0;
  align-items: start;
}

body.tcdc-woo.single-product .summary > .tcdc-left-col {
  grid-area: left;
  min-width: 0;
}

/* The theme pins .product_title to a fixed 800px width, not max-width, so a
   column narrower than 800px (any viewport under about 1160px once the
   420px panel and 4rem gap are subtracted) would otherwise leave the title
   sitting at 800px regardless of its column. width:auto undoes that, the
   way the float version's "keep left column off float" rule used to. These
   three now live inside .tcdc-left-col, not directly in the grid, so they
   are plain block children, not grid items, and grid-area no longer applies
   to them. */
body.tcdc-woo.single-product .summary .tcdc-left-col > .product_title { max-width: none; width: auto; }
body.tcdc-woo.single-product .summary .tcdc-left-col > .price          { max-width: none; }
body.tcdc-woo.single-product .summary .tcdc-left-col > .woocommerce-product-details__short-description {
  max-width: none;
}
body.tcdc-woo.single-product .summary > form.cart {
  grid-area: panel;
  float: none;
  width: 100%;
  margin: 0;
  align-self: start;
}

/* THE SITE ALREADY HAD A CUSTOM ADD TO CART, AND THIS BUILD DID NOT KNOW.

   The real Add to Cart on this site is NOT WooCommerce's own button. An
   existing customisation, injected as an inline <style> and not in any file
   under 04-build/, hides the native button with

     .single-product .summary.entry-summary .tcdc-original-hidden
       { position:absolute !important; width:1px !important; height:1px !important }

   and renders a proxy in its place inside `.tcdc-totals-outside` >
   `.tcdc-cart-slot` > `.tcdc-btn-proxy`. The 1x1 native button is therefore
   CORRECT and expected, not a defect. Do not "fix" it.

   What was wrong: that proxy block measured 720px inside a 362px parent once
   the purchase panel became a 420px float, so it ran outside the card and was
   only invisible because `.summary` clips with overflow:hidden. Constraining
   the three elements to the panel puts it back inside.
   MEASURED ON STAGING: all three at 362px, inside the 420px panel, no
   horizontal overflow at 1440px.

   NOT YET CHECKED: how this block behaves under 900px, and whether the same
   markup exists on the simple products as well as the variable ones. */
body.tcdc-woo.single-product .summary .tcdc-totals-outside,
body.tcdc-woo.single-product .summary .tcdc-cart-slot,
body.tcdc-woo.single-product .summary .tcdc-btn-proxy {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* SUPERSEDED 2026-08-09, later same day. This used to set `display: block`
   plus a right float on form.cart plus a calc(100% - 484px) cap on the left
   column. All three are now handled by the grid block above instead, which
   sets `display: grid` on this same selector and assigns each child a
   grid-area. Left in git history / the log, not restated here, so there is
   only one place controlling this layout at a time. */

/* THE PRODUCT GALLERY IS HIDDEN ON PURPOSE.
   All eleven products share one 200x199 image, so showing it large would put
   the same blurry graphic on every product page.
   TO BRING IT BACK once real per product artwork exists: delete this rule.
   The gallery sits immediately before `.summary`, so it drops in above the
   title with no further layout work. */
body.tcdc-woo.single-product .woocommerce-product-gallery {
  display: none;
}

/* Title */
body.tcdc-woo.single-product .product_title {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 0.9rem;
  text-transform: none;
}

/* Price, as a standalone statement rather than a line of body text. Lives
   inside .tcdc-left-col now (see the grid block above), not a direct child
   of .summary. */
body.tcdc-woo.single-product .summary .tcdc-left-col > .price {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--step-2);
  color: var(--mint-ink);
  margin: 0 0 1.8rem;
  padding: 0 0 1.8rem;
  border-bottom: 1px solid var(--line);
}

body.tcdc-woo.single-product .summary .tcdc-left-col > .price del { opacity: .45; font-weight: 400; }
body.tcdc-woo.single-product .summary .tcdc-left-col > .price ins { text-decoration: none; }

/* THE REAL SOURCE OF THE "RANDOM $210" LOOK, FOUND 2026-08-09 while chasing
   the grid gap: an unrelated, unscoped inline <style> block elsewhere on
   the site (not in any file under 04-build/) sets
   `.woocommerce-Price-amount { font-size: 18px !important; color:
   rgb(29,31,67) !important; font-weight: 500; }` globally. That is why the
   actual visible "$210.00" text stayed small, dark navy and medium-weight
   no matter what font-size/color/weight this file put on .price itself:
   .price is the wrapper <p>, but the digits live inside a nested
   `<span class="woocommerce-Price-amount">` with its own competing
   !important rule. Forcing that span (and the <bdi> WooCommerce wraps it
   in) to inherit from .price is what actually makes the price read as a
   deliberate, bold, mint-colored statement instead of a stray number. */
body.tcdc-woo.single-product .summary .tcdc-left-col > .price .woocommerce-Price-amount,
body.tcdc-woo.single-product .summary .tcdc-left-col > .price bdi {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  margin-right: 0 !important;
}

/* Short description, the left column's real content */
body.tcdc-woo .woocommerce-product-details__short-description {
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: 1.75;
  max-width: 58ch;
}

body.tcdc-woo .woocommerce-product-details__short-description h2,
body.tcdc-woo .woocommerce-product-details__short-description h3,
body.tcdc-woo .woocommerce-product-details__short-description h4 {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 .9rem;
}

/* The short description uses bullet lines typed as "• text" in the product
   editor, not real <ul> markup, so this styles the paragraphs it produces. */
body.tcdc-woo .woocommerce-product-details__short-description p { margin: 0 0 .55rem; }

body.tcdc-woo .woocommerce-product-details__short-description ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.tcdc-woo .woocommerce-product-details__short-description li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .55rem;
}

body.tcdc-woo .woocommerce-product-details__short-description li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: .7rem;
  height: 1px;
  background: var(--mint-deep);
}

/* 2026-08-09: David flagged the "How It Works" numbers as sitting out of
   line with "What's Included" above it. Real cause: this stylesheet resets
   <ul> to list-style:none and draws its own dash via li::before, but never
   touched <ol>, which kept the theme's own list-style-position:inside plus
   a 20px padding-left. That pushed the numbered list about 20px further
   right than the bulleted one, and rendered a redundant dash AND a number
   on each line ("— 1. Select your genre..."). Reset scoped to <ol> only,
   inside .tcdc-left specifically so nothing else in the short description
   (there is no other <ol> on this page) is touched: drop the dash, drop
   the extra padding, and let the numbers sit flush at the same left edge
   the dashes use. */
body.tcdc-woo .woocommerce-product-details__short-description .tcdc-left ol {
  padding-left: 0;
  margin-left: 0;
  list-style-position: inside;
}
body.tcdc-woo .woocommerce-product-details__short-description .tcdc-left ol li {
  padding-left: 0;
}
body.tcdc-woo .woocommerce-product-details__short-description .tcdc-left ol li::before {
  display: none;
}


/* 3. The purchase panel --------------------------------------------------- */

body.tcdc-woo.single-product form.cart {
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 3px;
  box-shadow: var(--card-shadow);
  padding: 1.9rem 1.75rem 2rem;
  margin: 0;
  position: sticky;
  top: 2rem;
}

/* THE ROOT CAUSE OF EVERY "STICKING OUT" TABLE ON THIS PAGE, FOUND 2026-08-09
   LATER SESSION: the design system's comparison-table component sets a bare
   `table { min-width: 720px }`, meant for the Reel Packages pricing table,
   with no scoping. It reaches every table on the site, including
   WooCommerce's own `table.variations` (the genre select) and the totals
   table rendered inside the purchase panel. `width: 100%` cannot shrink a
   table below its `min-width`, so both ran 720px wide inside a 420px panel
   no matter what was set here. `min-width: 0` on every table inside the
   panel is the actual fix; table-layout:fixed alone (tried earlier) was
   not, because min-width still won. */
body.tcdc-woo.single-product .summary form.cart table {
  min-width: 0 !important;
}

/* The variations table is markup WooCommerce controls. Flatten it rather
   than restructure it. */
body.tcdc-woo.single-product table.variations {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 1.1rem;
  border: 0;
  background: none;
}

body.tcdc-woo.single-product table.variations tbody,
body.tcdc-woo.single-product table.variations tr,
body.tcdc-woo.single-product table.variations th,
body.tcdc-woo.single-product table.variations td {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
}

body.tcdc-woo.single-product table.variations th.label label {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .5rem;
}

/* Selects and text inputs share one field treatment across all three
   surfaces, so the checkout does not look like a different site. */
body.tcdc-woo select,
body.tcdc-woo input[type="text"],
body.tcdc-woo input[type="email"],
body.tcdc-woo input[type="tel"],
body.tcdc-woo input[type="password"],
body.tcdc-woo input[type="number"],
body.tcdc-woo textarea {
  width: 100%;
  padding: .82rem .95rem;
  border: 1px solid var(--card-line);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--step-0);
  line-height: 1.4;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

body.tcdc-woo select:focus,
body.tcdc-woo input:focus,
body.tcdc-woo textarea:focus {
  outline: none;
  border-color: var(--mint-deep);
  box-shadow: 0 0 0 3px var(--mint-veil);
}

body.tcdc-woo select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(1.25em), calc(100% - 13px) calc(1.25em);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

body.tcdc-woo .reset_variations {
  display: inline-block;
  margin-top: .5rem;
  font-size: var(--step--1);
  color: var(--slate-dim);
}

/* 2026-08-09: David flagged Stripe's "Link" express checkout button
   showing up on the product page once a genre is picked (Stripe's
   Express Checkout Element, injected into
   #wc-stripe-express-checkout-element inside .summary once the add-to-
   cart form becomes valid). He wants checkout to only happen from the
   cart page, so this hides that element on the product page only.
   Scoped to body.single-product specifically, NOT to body.tcdc-woo
   alone, since tcdc-woo is also added on cart and checkout, and this
   must never touch either of those (see the note at the top of this
   file about the Stripe element on checkout). Cart and checkout keep
   whatever payment options they already have; this is product-page-only
   and purely visual, nothing about the gateway itself is changed. */
body.tcdc-woo.single-product #wc-stripe-express-checkout-element {
  display: none !important;
}

/* 2026-08-09, FIX 4. David sent the actual Inspect Element markup for the
   button that survived fixes 1-3. It is Stripe's own "Link" express
   payment button, rendered with Stripe's own class names
   (.p-ExpressCheckoutButtonGroup > .p-ExpressCheckoutItem > .LinkButton),
   not a WooCommerce element and not necessarily a child of
   #wc-stripe-express-checkout-element on every page state. Critically, the
   word "Link" in the button is NOT text: it is an inline SVG logo. The JS
   catch-all from FIX 3 required the button's own text to match /link/i,
   which never happens, because that word never exists as a real text node
   anywhere in the button. That is the actual root cause of fix 3 failing,
   not an iframe or a wrong container guess. These selectors target Stripe's
   own stable class/attribute names instead of text content. */
body.tcdc-woo.single-product .p-ExpressCheckoutButtonGroup,
body.tcdc-woo.single-product .p-ExpressCheckoutItem,
body.tcdc-woo.single-product .LinkButton,
body.tcdc-woo.single-product button[name="pay_with_link_arrow"],
body.tcdc-woo.single-product button[aria-label="Pay securely with Link"] {
  display: none !important;
}


/* 4. YITH add-on blocks --------------------------------------------------- */
/* 1.1.0, 2026-08-09. Verified against the real DOM on staging
   /product/the-standard-reel/ this session, with Chrome connected. Task 78's
   old note that these fields are "text" type turned out to be wrong; the
   real markup is:

     .yith-wapo-addon.yith-wapo-addon-type-select   Pull Your Footage,
                                                     Delivery Speed,
                                                     Additional Clips
                                                     -> a native <select>
     .yith-wapo-addon.yith-wapo-addon-type-text     "Footage Details"
                                                     -> three free text
                                                     boxes, Clip 1/2/3
                                                     Details. Correctly a
                                                     text field, nothing to
                                                     change here.
     .yith-wapo-addon.yith-wapo-addon-type-checkbox 9:16 Instagram Format
                                                     -> one real checkbox,
                                                     already paired with an
                                                     existing custom visual
                                                     (.tcdc-ratio-diagram,
                                                     16:9 vs 9:16 icons) that
                                                     is NOT part of this
                                                     stylesheet. Leave that
                                                     markup alone.

   RETRACTION of the 1.1.0 draft written earlier this session: it assumed
   radio inputs and a number input existed and styled for those. Neither
   exists. That draft never shipped past this file.

   FINDING WORTH FLAGGING TO DAVID, NOT A STYLING MATTER: the "Pull Your
   Footage" select still prices at $20 / clip ("1 clip +$20.00", "2 clips
   +$40.00", "3 clips +$60.00"), and the tooltip text next to it says "$20
   per clip" outright. The Aug 4 decision recorded in this log was $25 per
   clip everywhere, no bundling discount. This is task 58, still open, and
   it lives on the live product pages, not in a separate "Speed Reel"
   product as an earlier session guessed. Not fixed in this pass: it is a
   YITH price field plus tooltip copy, not CSS, and changing a live price on
   a page with 598 processed orders needs David's own go-ahead. */

/* 2026-08-09: David flagged a double line under "Pull Your Footage" and
   too much empty space under "Delivery Speed" and "Additional Clips".
   Root cause: YITH's own plugin CSS puts a separator on every addon
   EXCEPT the first in a block, via border-top + margin-top: 20px +
   padding-top: 18px, in a different color (rgba(29,31,67,.15)) than our
   own border-bottom separator below. The two never lined up, so instead
   of one clean divider between fields, each boundary carried both a
   bottom border AND the next field's top border, plus both sets of
   spacing stacked (roughly 80px combined). Killing YITH's top-side
   trio here leaves a single border, from us, at a normal gap. */
body.tcdc-woo .yith-wapo-addon {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.tcdc-woo .yith-wapo-block,
body.tcdc-woo .yith-wapo-addon {
  margin: 0 0 1.25rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--line-soft);
}

body.tcdc-woo .yith-wapo-block:last-of-type,
body.tcdc-woo .yith-wapo-addon:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

body.tcdc-woo .wapo-addon-title {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 .85rem;
}

/* 2026-08-09: David asked for the "Looking For More?" upgrade cards
   (The Starter Kit, The Scene Stealer) to say how many genres and reels
   each one includes, right after the name and upgrade price. Added as a
   parenthetical line in the product's own short description HTML; this
   just keeps it visually distinct (smaller, muted) from the card's own
   tagline below it, matching the muted treatment already used for addon
   descriptions elsewhere on this page. */
body.tcdc-woo .tcdc-upgrade-meta {
  font-size: var(--step--1);
  color: var(--slate-dim);
  margin: -.35rem 0 .5rem;
}

/* 2026-08-09: David flagged the "Looking For More?" column sitting lower
   than "What's Included" on the left. FIRST ATTEMPT, since retracted:
   tightened the padding and margins inside each card to shrink them.
   David's verdict: "that doesn't look better... needs to look less
   squished." He was right to reject it: shrinking padding closes the gap
   by making the cards cramped, which is not the same thing as the two
   columns actually being the same height. Replaced with the fix below,
   which does not touch card padding at all.

   REAL FIX: make the two columns genuinely equal height, then let the
   two cards spread out to fill that height, instead of squeezing them.
   `.tcdc-columns` (Customizer CSS, not this file) sets `align-items:
   start` on its two-column grid, which is why `.tcdc-upgrades` was only
   ever as tall as its own content, never stretched to match `.tcdc-left`.
   Overriding that to `stretch` makes both grid items (the columns
   themselves) the same height automatically, matching whichever side has
   more content. From there, `.tcdc-upgrades` becomes a column flexbox
   with the heading pinned at its natural height and a new
   `.tcdc-upgrade-cards-wrap` (built at runtime by
   tcdc-woocommerce-design.js, the same pattern as `.tcdc-left-col`)
   taking up the rest via `flex: 1 1 auto`. That wrap uses
   `justify-content: space-between` on its two cards, so any extra height
   becomes breathing room between the two cards, not inside either one,
   and the second card's bottom edge lands exactly on the left column's
   bottom edge. Needs !important on the grid override only: the
   Customizer's own CSS prints very late in <head> and otherwise wins the
   cascade against this file, confirmed in the 2026-08-01 session log. */
body.tcdc-woo.single-product .tcdc-columns {
  align-items: stretch !important;
}

/* 2026-08-10: David asked for "Looking For More?" removed entirely from
   The Actor's Toolbox (product 852): it is the top-tier package, so its
   own upsell cards were just the two service add-ons (Coached Self-Tape
   over Zoom, New Footage Addition), not another reel to upgrade to, and
   he did not want that section there at all. The upgrade markup itself
   was removed from the product's own excerpt content (not CSS), leaving
   `.tcdc-columns > .tcdc-left` as an only child. Without this rule,
   `.tcdc-left` would still only fill the first of the two `1fr` grid
   tracks, leaving the second half of the row blank. `grid-column: 1 /
   -1` makes it span both tracks (and the gap between them) whenever it
   is the only column present, on any product, not just this one. */
body.tcdc-woo.single-product .tcdc-columns .tcdc-left:only-child {
  grid-column: 1 / -1;
}

body.tcdc-woo.single-product .tcdc-upgrades {
  display: flex;
  flex-direction: column;
}

/* 2026-08-09: David asked for the top border of "The Starter Kit" card
   to sit level with the mint underline below "What's Included" on the
   left, instead of floating below it with a visible gap. Measured on
   staging: "What's Included" and "Looking For More?" start at the exact
   same top and their h3s are the same height, so their TEXT bottoms
   already line up (110.8px vs 112.8px, a 2px difference that is just
   "What's Included"'s own 2px mint border-bottom being drawn past its
   text). The Customizer's own CSS already intended this: it sets
   `.tcdc-upgrades h3 { margin-bottom: 2px }`, specifically so the card
   below it would sit close. What was actually winning the cascade was
   this file's own, broader
   `.woocommerce-product-details__short-description h3` rule (section 2
   above), 0.9rem/14.4px, which applies to every h3 inside the short
   description, including this one, since `.tcdc-upgrades` lives inside
   it too. Restoring the Customizer's own 2px here, scoped tightly so
   "What's Included" itself is untouched, brings the card's top border up
   to match the mint line exactly. */
body.tcdc-woo.single-product .tcdc-upgrades h3 {
  margin-bottom: 2px !important;
}

body.tcdc-woo.single-product .tcdc-upgrade-cards-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 auto;
}

body.tcdc-woo.single-product .tcdc-upgrade-cards-wrap .tcdc-upgrade-card {
  margin-bottom: 0 !important;
}

/* 2026-08-09: David next asked for the mint line under "How It Works"
   to line up with the top of "The Scene Stealer", the same trick as the
   "What's Included" / "The Starter Kit" pair above, but this one cannot
   be a fixed CSS number: "How It Works"'s position depends on how long
   the "What's Included" bullet list is, and the second card's own top
   depends on how long the first card's meta line and tagline run. Both
   vary product to product. `justify-content: space-between` above used
   to distribute the wrap's leftover height as one automatic gap between
   the two cards, which kept the column's overall bottom edge matching
   the left column's bottom edge, but had no way to hit a specific
   landmark like "How It Works"'s own bottom border partway down.
   Switched to `flex-start` so the gap is no longer automatic; instead
   `alignSecondUpgradeCard()` in tcdc-woocommerce-design.js measures
   "How It Works" and the first card at runtime and sets an exact
   `margin-bottom` on the first card so the second card's top border
   lands exactly on "How It Works"'s mint line, on every product,
   regardless of content length. Trade-off, and David has not asked for
   this to be revisited: the column's overall bottom edge no longer
   force-matches the left column's bottom edge the way it did before,
   since the gap is now sized to hit the heading, not to consume all
   remaining height. */
body.tcdc-woo.single-product .tcdc-upgrade-cards-wrap .tcdc-upgrade-card:first-child {
  margin-bottom: 0; /* set precisely by JS; this is just the pre-JS fallback */
}

body.tcdc-woo .wapo-addon-description {
  font-size: var(--step--1);
  color: var(--slate-dim);
  margin: -.5rem 0 .85rem;
}

/* The (i) tooltip icon next to a title or option, used on Pull Your
   Footage and the 9:16 add-on. Native title-attribute-style tooltip, so
   only the trigger needs styling. */
body.tcdc-woo .tcdc-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: .4rem;
  border-radius: 50%;
  border: 1px solid var(--slate);
  color: var(--slate-dim);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
}

/* WooCommerce prints the surcharge as "(+ $60.00 )" with stray spaces
   around the amount. Tighten it and make it read as a price. */
body.tcdc-woo .option-price,
body.tcdc-woo .yith-wapo-option .price {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  color: var(--mint-ink);
  white-space: nowrap;
}

body.tcdc-woo .option-price .brackets { display: none; }
body.tcdc-woo .option-price .sign { margin-right: 1px; }

/* --- Select-type add-ons: the real fix, 2026-08-09 later session --------
   Two bugs, not one, were making these look broken, and neither was a
   pill-button question:

   1. A global `table { min-width: 720px }` in the design system (meant only
      for the Reel Packages comparison table, see section 3 above) forced
      every table inside the panel, including the genre variations select's
      table, to 720px regardless of any width rule here. Fixed there with
      `min-width: 0 !important` on any table inside `.summary form.cart`.

   2. YITH inline-styles every select-type add-on's <select> AND its
      wrapping `.options.per-row-1` div to `width: 75% !important`. Inline
      `!important` beats any stylesheet `!important`, so no rule in this
      file could reach it. Fixed at runtime instead, by
      `tcdc-woocommerce-design.js`, which overwrites the inline style via
      `el.style.setProperty('width','100%','important')`.

   The pill-button treatment ("Option A" from the mockups) was attempted as
   a `.tcdc-pillselect` JS enhancement below. It was NEVER successfully
   deployed (the Custom Code editor kept saving it empty or mistyped, see
   the log) and `tcdc-woocommerce-design.js` no longer builds it. The rules
   below are therefore currently inert: nothing on the live page carries
   the `.tcdc-pillselect` or `.tcdc-pillselect-source` classes. Left in
   place in case a future session finishes that enhancement properly;
   delete this block first if it is abandoned instead. */
body.tcdc-woo .tcdc-pillselect {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0 0 .3rem;
}

body.tcdc-woo .tcdc-pillselect button {
  border: 1.5px solid var(--card-line);
  border-radius: 20px;
  padding: .6rem 1.05rem;
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}

body.tcdc-woo .tcdc-pillselect button b {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  color: inherit;
  margin-left: .35rem;
}

body.tcdc-woo .tcdc-pillselect button.sel {
  border-color: var(--mint-ink);
  background: var(--mint-veil);
  color: var(--mint-ink);
}

body.tcdc-woo .tcdc-pillselect button:focus-visible {
  outline: 2px solid var(--mint-deep);
  outline-offset: 2px;
}

/* The select itself, once JS has built its pill row. Kept in the tab order
   for screen readers and for any script (including YITH's own) that reads
   its value directly, just off screen rather than display:none. */
body.tcdc-woo .yith-wapo-addon-type-select select.tcdc-pillselect-source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* No-JS fallback: if the enhancement script does not run, the select shows
   normally with the field styling from section 3, not raw browser default. */

/* Delivery Speed's longest option ("Standard - 7-10 Business Days") still
   clipped mid-word against the arrow at the design system's default select
   font size (18px) and 2.5rem arrow padding, even after the width fixes
   above gave the select its full 100%. Scoped to the add-on selects only,
   so the genre/variation select, cart and checkout are untouched. */
body.tcdc-woo .yith-wapo-addon-type-select select {
  font-size: 0.82rem !important;
  padding-left: 0.7rem !important;
  padding-right: 1.9rem !important;
  background-position: calc(100% - 12px) calc(1.15em), calc(100% - 7px) calc(1.15em) !important;
}

/* --- The 9:16 Instagram Format checkbox as a switch ----------------------
   Real markup: one <input type=checkbox> per label.yith-wapo-addon-label,
   inside .yith-wapo-addon-type-checkbox. The site's existing
   .tcdc-ratio-diagram visual sits above this and is untouched. */
body.tcdc-woo .yith-wapo-addon-type-checkbox .yith-wapo-addon-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

body.tcdc-woo .yith-wapo-addon-type-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 12px;
  background: var(--card-line);
  position: relative;
  flex: none;
  margin: 0 0 0 auto;
  order: 2;
  cursor: pointer;
  transition: background-color .3s var(--ease);
}

body.tcdc-woo .yith-wapo-addon-type-checkbox input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  transition: left .3s var(--ease);
}

body.tcdc-woo .yith-wapo-addon-type-checkbox input[type="checkbox"]:checked {
  background: var(--mint-deep);
}

body.tcdc-woo .yith-wapo-addon-type-checkbox input[type="checkbox"]:checked::after {
  left: 18px;
}

/* --- Footage Details, the three free-text boxes. Correctly a text field,
   just needs the same field treatment as everything else, which section 3
   already gives input[type=text]. Only the option label needs sizing. */
body.tcdc-woo .yith-wapo-addon-type-text .yith-wapo-option {
  margin: 0 0 .7rem;
}

body.tcdc-woo .yith-wapo-addon-type-text .yith-wapo-option:last-child { margin-bottom: 0; }

body.tcdc-woo .yith-wapo-addon-type-text .yith-wapo-option .label,
body.tcdc-woo .yith-wapo-addon-type-text .yith-wapo-option label {
  display: block;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--slate-dim);
  margin: 0 0 .3rem;
}

/* Found on staging this session: a pre-existing totals table (table.all,
   inside .tcdc-original-hidden per the button-proxy system noted in
   section 2) is not width-constrained and ran 349px past the 420px panel
   at 1440px once the panel became a real grid column instead of empty
   space below the fold. Constrain any table inside the panel to its
   width, whichever table it turns out to be. */
body.tcdc-woo.single-product .summary form.cart table {
  width: 100% !important;
  table-layout: fixed !important;
}
body.tcdc-woo.single-product .summary form.cart table td,
body.tcdc-woo.single-product .summary form.cart table th {
  word-break: break-word;
}

/* The running total YITH prints under the add-ons */
body.tcdc-woo .yith-wapo-total,
body.tcdc-woo table.yith-wapo-total {
  width: 100%;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-family: 'Archivo', sans-serif;
  color: var(--ink);
}

body.tcdc-woo .yith-wapo-total td { padding: .2rem 0; border: 0; }


/* 5. Add to Cart ---------------------------------------------------------- */
/* The original problem: this button was floating up out of flow and
   overlapping the "Delivery Speed" heading. Clearing the float and giving
   it full width inside the panel is the whole fix. */

body.tcdc-woo .single_variation_wrap { display: block; }

body.tcdc-woo button.single_add_to_cart_button,
body.tcdc-woo .single_add_to_cart_button.button {
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 1.3rem 0 0;
  padding: 1.05rem 1.5rem;
  border: 1px solid var(--mint);
  border-radius: 2px;
  background: var(--mint);
  color: var(--navy-deep);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background-color .3s var(--ease), color .3s var(--ease);
}

body.tcdc-woo button.single_add_to_cart_button:hover:not(.disabled) {
  transform: translateY(-2px);
  background: var(--navy-deep);
  color: var(--mint);
  box-shadow: 0 12px 34px -14px rgba(21, 25, 65, .38);
}

body.tcdc-woo button.single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--mint-deep);
  outline-offset: 3px;
}

/* Disabled until a variation is chosen. Keep it legible: a greyed button
   nobody can read looks broken rather than pending. */
body.tcdc-woo button.single_add_to_cart_button.disabled,
body.tcdc-woo button.single_add_to_cart_button:disabled {
  background: var(--bone);
  border-color: var(--card-line);
  color: var(--slate-dim);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

body.tcdc-woo .woocommerce-variation-price {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--ink);
  margin: .4rem 0 0;
}

body.tcdc-woo .woocommerce-variation-availability { font-size: var(--step--1); color: var(--slate-dim); }


/* 6. Cart ----------------------------------------------------------------- */

body.tcdc-woo.woocommerce-cart .entry-content > .woocommerce {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 3rem 0 4rem;
}

body.tcdc-woo .shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--card-line);
  border-radius: 3px;
  background: var(--card-bg);
  overflow: hidden;
}

body.tcdc-woo .shop_table th {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: left;
  padding: 1.05rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-tint);
}

body.tcdc-woo .shop_table td {
  padding: 1.2rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  vertical-align: top;
}

body.tcdc-woo .shop_table tr:last-child td { border-bottom: 0; }

body.tcdc-woo .shop_table .product-name a {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

body.tcdc-woo .shop_table .product-name a:hover { color: var(--mint-ink); }

body.tcdc-woo .shop_table .variation,
body.tcdc-woo .shop_table dl.variation {
  font-size: var(--step--1);
  color: var(--slate-dim);
  margin: .4rem 0 0;
}

body.tcdc-woo .shop_table dl.variation dt { font-weight: 600; display: inline; }
body.tcdc-woo .shop_table dl.variation dd { display: inline; margin: 0 0 0 .3rem; }
body.tcdc-woo .shop_table dl.variation dd p { display: inline; margin: 0; }

body.tcdc-woo .shop_table .product-price,
body.tcdc-woo .shop_table .product-subtotal {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* Remove item. Small, quiet, and obviously destructive on hover. */
body.tcdc-woo a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--card-line);
  color: var(--slate-dim) !important;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

body.tcdc-woo a.remove:hover {
  background: #B4432F;
  border-color: #B4432F;
  color: #fff !important;
}

body.tcdc-woo .cart_totals h2 {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--ink);
  margin: 0 0 1rem;
}

body.tcdc-woo .cart_totals .order-total .amount {
  font-size: var(--step-1);
  color: var(--mint-ink);
}

body.tcdc-woo .coupon input[type="text"] { max-width: 260px; }


/* 7. Checkout ------------------------------------------------------------- */
/* Nothing here hides a field, restyles a control into a different control,
   or sizes the Stripe element's own container. Typography, spacing and
   surface only. */

body.tcdc-woo.woocommerce-checkout .entry-content > .woocommerce {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 3rem 0 4rem;
}

body.tcdc-woo .woocommerce-billing-fields h3,
body.tcdc-woo .woocommerce-additional-fields h3,
body.tcdc-woo #order_review_heading {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 1.2rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}

body.tcdc-woo .form-row { margin: 0 0 1.05rem; }

body.tcdc-woo .form-row label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .35rem;
}

body.tcdc-woo .form-row .required {
  color: #B4432F;
  text-decoration: none;
  border: 0;
}

body.tcdc-woo .form-row .optional { color: var(--slate-dim); font-weight: 400; }

/* Select2 is what WooCommerce uses for country and state. Match the plain
   field treatment so the row does not look like two different inputs. */
body.tcdc-woo .select2-container--default .select2-selection--single {
  height: auto;
  padding: .55rem .35rem;
  border: 1px solid var(--card-line);
  border-radius: 2px;
  background: var(--surface);
}

body.tcdc-woo .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink);
  line-height: 1.5;
}

body.tcdc-woo #order_review {
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 3px;
  box-shadow: var(--card-shadow);
  padding: 1.75rem;
}

body.tcdc-woo .woocommerce-checkout-review-order-table { border: 0; box-shadow: none; }
body.tcdc-woo .woocommerce-checkout-review-order-table th { background: none; padding-left: 0; padding-right: 0; }
body.tcdc-woo .woocommerce-checkout-review-order-table td { padding-left: 0; padding-right: 0; }

body.tcdc-woo .woocommerce-checkout-review-order-table .order-total th,
body.tcdc-woo .woocommerce-checkout-review-order-table .order-total td {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  font-size: var(--step-1);
  color: var(--ink);
}

body.tcdc-woo .woocommerce-checkout-review-order-table .order-total .amount { color: var(--mint-ink); }

/* The payment box. Padding and border only. The Stripe Payment Element
   lives in an iframe inside .payment_box and its height is controlled by
   Stripe's own JS, so nothing here sets a height, overflow or transform on
   it. Doing so is how you get a clipped or invisible card field. */
body.tcdc-woo #payment {
  background: var(--surface-tint);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.3rem;
  margin-top: 1.4rem;
}

body.tcdc-woo #payment ul.payment_methods {
  border-bottom: 1px solid var(--line);
  padding: 0 0 1rem;
  margin: 0 0 1rem;
  list-style: none;
}

body.tcdc-woo #payment li.wc_payment_method > label {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}

body.tcdc-woo #payment div.payment_box {
  background: transparent;
  padding: .4rem 0 0;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

body.tcdc-woo #payment div.payment_box::before { display: none; }

body.tcdc-woo .woocommerce-terms-and-conditions-wrapper {
  margin: 1rem 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

body.tcdc-woo .woocommerce-privacy-policy-text { font-size: var(--step--1); color: var(--slate-dim); }


/* 8. Buttons shared across cart and checkout ------------------------------ */

body.tcdc-woo .woocommerce a.button,
body.tcdc-woo .woocommerce button.button,
body.tcdc-woo .woocommerce input.button,
body.tcdc-woo #place_order,
body.tcdc-woo .checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.02rem 2rem;
  border: 1px solid var(--mint);
  border-radius: 2px;
  background: var(--mint);
  color: var(--navy-deep);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background-color .3s var(--ease), color .3s var(--ease);
}

body.tcdc-woo .woocommerce a.button:hover,
body.tcdc-woo .woocommerce button.button:hover,
body.tcdc-woo #place_order:hover,
body.tcdc-woo .checkout-button:hover {
  transform: translateY(-2px);
  background: var(--navy-deep);
  color: var(--mint);
  box-shadow: 0 12px 34px -14px rgba(21, 25, 65, .38);
}

body.tcdc-woo #place_order,
body.tcdc-woo .checkout-button {
  width: 100%;
  margin-top: 1.1rem;
}

/* Secondary buttons: update cart, apply coupon. Quieter than the primary. */
body.tcdc-woo button[name="update_cart"],
body.tcdc-woo .coupon button {
  background: transparent;
  color: var(--ink);
  border-color: rgba(21, 25, 65, .28);
}

body.tcdc-woo button[name="update_cart"]:hover,
body.tcdc-woo .coupon button:hover {
  background: var(--mint);
  color: var(--navy-deep);
  border-color: var(--mint);
}

body.tcdc-woo button[name="update_cart"]:disabled { opacity: .4; cursor: not-allowed; }


/* 9. Notices -------------------------------------------------------------- */

body.tcdc-woo .woocommerce-message,
body.tcdc-woo .woocommerce-info,
body.tcdc-woo .woocommerce-error {
  border-top: 0;
  border-left: 3px solid var(--mint-deep);
  border-radius: 2px;
  background: var(--surface-tint);
  color: var(--ink);
  padding: 1rem 1.2rem;
  font-size: var(--step--1);
}

body.tcdc-woo .woocommerce-message::before,
body.tcdc-woo .woocommerce-info::before,
body.tcdc-woo .woocommerce-error::before { display: none; }

body.tcdc-woo .woocommerce-error {
  border-left-color: #B4432F;
  background: rgba(180, 67, 47, .06);
}


/* 10. Responsive ---------------------------------------------------------- */
/* Below 900px the purchase panel stops being sticky and drops under the
   description. Checked against a 360px viewport for overflow. */

@media (max-width: 900px) {
  body.tcdc-woo.single-product .summary.entry-summary {
    padding: 2.25rem 0 3rem;
  }

  /* Grid collapses to one column: the left wrapper (title, price,
     description, already in source order inside it), then the panel.
     grid-template-areas is redeclared as a two-item stack rather than
     relying on auto-flow, so a future edit to the desktop areas above
     cannot silently break the phone layout. */
  body.tcdc-woo.single-product #content div.product div.summary.entry-summary,
  body.tcdc-woo.single-product div.product div.summary.entry-summary {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "panel";
    row-gap: 1.5rem;
  }

  body.tcdc-woo.single-product .summary > form.cart {
    width: auto;
    position: static;
    margin: 0;
  }

  body.tcdc-woo .shop_table th { display: none; }

  body.tcdc-woo .shop_table td {
    display: block;
    width: 100%;
    padding: .55rem 1rem;
    border-bottom: 0;
  }

  body.tcdc-woo .shop_table tr {
    display: block;
    border-bottom: 1px solid var(--line);
    padding: .8rem 0;
  }

  body.tcdc-woo #order_review { padding: 1.2rem; }
}

@media (max-width: 480px) {
  body.tcdc-woo.single-product form.cart { padding: 1.35rem 1.15rem 1.5rem; }
  body.tcdc-woo .coupon input[type="text"] { max-width: 100%; }
}


/* 11. Motion preference --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.tcdc-woo * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  body.tcdc-woo .woocommerce a.button:hover,
  body.tcdc-woo .woocommerce button.button:hover,
  body.tcdc-woo button.single_add_to_cart_button:hover:not(.disabled),
  body.tcdc-woo #place_order:hover { transform: none; }
}


/* ==========================================================================
   12. My Account, added 1.3.0, 2026-08-12

   The page (ID 2512) is Beaver Builder, not a Phase 4 shortcode page, so
   its structure cannot be changed here, only its skin. Three stacked rows
   inside .fl-builder-content-2512:

     row 1  h2 "MY ACCOUNT INFORMATION"
     row 2  the welcome paragraph ("Here is where you can: ...")
     row 3  the existing Beaver Builder tabs (Account Home / Upload My
            Clips / Schedule My Phone Consultation), tab 1 of which holds
            the real [woocommerce_my_account] output this section targets

   Rows 1 and 2 become one navy band, matching .subhero (the dark bookend
   every Phase 4 page opens with, defined in tcdc-design-system.css). Row 3
   stays on white and holds the actual account UI.

   The tab nav in row 3 already carried close-to-brand navy/mint colors
   from Beaver Builder's own per-module color pickers (a previous session's
   manual styling, confirmed in wp-content/uploads/bb-plugin/cache/2512-
   layout.css). Left in place, only tightened: uppercase Archivo type to
   match every other button on the site, and a real hover state, which the
   module never had.

   Everything below the tabs, that is the whole WooCommerce account UI
   itself, is standard [woocommerce_my_account] markup and gets its own
   rules here. The account details form's inputs and the "Save changes" /
   "View" buttons need NO new rules: sections 6 and 8 above already style
   every input[type], select, and .button on any page carrying tcdc-woo,
   and is_account_page() now puts that class here.
   ========================================================================== */

/* --- Hero band, rows 1 and 2 --------------------------------------------- */

body.tcdc-woo.woocommerce-account .fl-builder-content-2512 > .fl-row:nth-of-type(1),
body.tcdc-woo.woocommerce-account .fl-builder-content-2512 > .fl-row:nth-of-type(2) {
  background: var(--navy-chrome) !important;
}

body.tcdc-woo.woocommerce-account .fl-builder-content-2512 > .fl-row:nth-of-type(1) .fl-row-content-wrap {
  padding-top: clamp(4.5rem, 9vw, 7rem) !important;
  padding-bottom: .5rem !important;
}

body.tcdc-woo.woocommerce-account .fl-builder-content-2512 > .fl-row:nth-of-type(2) .fl-row-content-wrap {
  padding-top: .5rem !important;
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem) !important;
}

body.tcdc-woo.woocommerce-account .fl-builder-content-2512 > .fl-row:nth-of-type(1) h2.uabb-heading {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  color: var(--bone) !important;
  text-align: center;
}

body.tcdc-woo.woocommerce-account .fl-builder-content-2512 > .fl-row:nth-of-type(1) .uabb-heading-text {
  color: var(--bone) !important;
}

/* The welcome paragraph carries inline color:#1d1f43 spans from the old
   white-background design (see 04-build/SESSION-LOG.md, task 26). Those
   need !important to lose to the new navy background, plain specificity
   cannot beat an inline style. */
body.tcdc-woo.woocommerce-account .fl-builder-content-2512 > .fl-row:nth-of-type(2) p,
body.tcdc-woo.woocommerce-account .fl-builder-content-2512 > .fl-row:nth-of-type(2) p span,
body.tcdc-woo.woocommerce-account .fl-builder-content-2512 > .fl-row:nth-of-type(2) p strong {
  color: var(--bone) !important;
  text-align: center;
}

/* --- Tab nav, row 3, "Account Home / Upload My Clips / Schedule..." ----- */

body.tcdc-woo.woocommerce-account .fl-module-advanced-tabs .uabb-tabs-nav {
  gap: 3px;
}

body.tcdc-woo.woocommerce-account .fl-module-advanced-tabs .uabb-tabs-nav .uabb-tab-title {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--step--1) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* Icon glyph must keep its own icon font (Font Awesome / UABB), never
   Archivo, or the glyph renders blank. Only non-font properties here. */
body.tcdc-woo.woocommerce-account .fl-module-advanced-tabs .uabb-tabs-nav .uabb-tabs-icon i {
  font-style: normal !important;
}

body.tcdc-woo.woocommerce-account .fl-module-advanced-tabs .uabb-tabs-nav li a.uabb-tab-link {
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

body.tcdc-woo.woocommerce-account .fl-module-advanced-tabs .uabb-tabs-nav li:not(.uabb-tab-current) a.uabb-tab-link:hover {
  opacity: .8;
}

/* --- WooCommerce account nav sidebar (Dashboard / Orders / Account details) */

body.tcdc-woo.woocommerce-account nav.woocommerce-MyAccount-navigation {
  border-top: 1px solid var(--card-line);
  padding-top: 1.25rem;
  margin-bottom: 1.5rem;
}

body.tcdc-woo.woocommerce-account nav.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.tcdc-woo.woocommerce-account nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: .85rem 1rem;
  border-radius: 2px;
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px solid var(--card-line);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}

body.tcdc-woo.woocommerce-account nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link:last-child a {
  border-bottom: none;
}

body.tcdc-woo.woocommerce-account nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link a:hover {
  background: var(--surface-tint);
}

body.tcdc-woo.woocommerce-account nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--dashboard a::before,
body.tcdc-woo.woocommerce-account nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--orders a::before,
body.tcdc-woo.woocommerce-account nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--downloads a::before,
body.tcdc-woo.woocommerce-account nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-address a::before,
body.tcdc-woo.woocommerce-account nav.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-account a::before {
  content: '';
}

body.tcdc-woo.woocommerce-account nav.woocommerce-MyAccount-navigation .is-active a {
  background: var(--mint);
  color: var(--navy-deep);
  border-bottom-color: var(--mint);
}

/* --- Dashboard intro text ------------------------------------------------- */

body.tcdc-woo.woocommerce-account .woocommerce-MyAccount-content p {
  color: var(--ink-soft);
  line-height: 1.7;
}

body.tcdc-woo.woocommerce-account .woocommerce-MyAccount-content p a {
  color: var(--mint-ink);
  text-decoration: underline;
}

body.tcdc-woo.woocommerce-account .woocommerce-MyAccount-content p a:hover {
  color: var(--navy-deep);
}

/* --- Orders table ---------------------------------------------------------

   The mint header (thead th) is already inherited from a global, unscoped
   rule in tcdc-design-system.css meant for the Reel Packages comparison
   table. Left as is on purpose, it already looks right here. This section
   only adds the row-level status color the plain table never had, and
   spacing so the table reads as a card rather than loose HTML. */

body.tcdc-woo.woocommerce-account table.woocommerce-orders-table {
  border: 1px solid var(--card-line);
  border-radius: 2px;
  overflow: hidden;
}

body.tcdc-woo.woocommerce-account table.woocommerce-orders-table td.woocommerce-orders-table__cell {
  padding: 1rem .9rem;
  border-bottom: 1px solid var(--card-line);
}

body.tcdc-woo.woocommerce-account table.woocommerce-orders-table tr:last-child td.woocommerce-orders-table__cell {
  border-bottom: none;
}

body.tcdc-woo.woocommerce-account tr.woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status,
body.tcdc-woo.woocommerce-account tr.woocommerce-orders-table__row--status-processing td.woocommerce-orders-table__cell-order-status {
  color: var(--mint-ink);
  font-weight: 600;
}

body.tcdc-woo.woocommerce-account tr.woocommerce-orders-table__row--status-cancelled td.woocommerce-orders-table__cell-order-status,
body.tcdc-woo.woocommerce-account tr.woocommerce-orders-table__row--status-refunded td.woocommerce-orders-table__cell-order-status,
body.tcdc-woo.woocommerce-account tr.woocommerce-orders-table__row--status-failed td.woocommerce-orders-table__cell-order-status {
  color: var(--slate-dim);
}

body.tcdc-woo.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
  padding: .55rem 1.1rem;
  font-size: .68rem;
}

/* --- Account details form -------------------------------------------------

   Inputs, the "Save changes" button and field spacing already come free
   from sections 6 and 8 above (input[type], select, .woocommerce button.
   button). This just adds label type so labels do not sit in the browser
   default font next to a styled field, and a little breathing room
   between fields, which the plain woocommerce-EditAccountForm layout
   never had. */

body.tcdc-woo.woocommerce-account .woocommerce-EditAccountForm label,
body.tcdc-woo.woocommerce-account .woocommerce-address-fields label {
  display: block;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink);
  margin-bottom: .4rem;
}

body.tcdc-woo.woocommerce-account .woocommerce-EditAccountForm p.form-row,
body.tcdc-woo.woocommerce-account .woocommerce-address-fields p.form-row {
  margin-bottom: 1.4rem;
}

body.tcdc-woo.woocommerce-account .woocommerce-EditAccountForm fieldset {
  border: none;
  padding: 0;
  margin: 2rem 0 0;
}

body.tcdc-woo.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--ink);
  margin-bottom: 1rem;
}

/* --- Notices (address saved, wrong password, etc.) ------------------------ */

body.tcdc-woo.woocommerce-account .woocommerce-message,
body.tcdc-woo.woocommerce-account .woocommerce-error,
body.tcdc-woo.woocommerce-account .woocommerce-info {
  border-top-color: var(--mint-deep);
  background: var(--surface-tint);
  color: var(--ink);
  font-size: var(--step--1);
  padding: 1rem 1.2rem;
  list-style: none;
}

body.tcdc-woo.woocommerce-account .woocommerce-error {
  border-top-color: #C4522F;
}

/* --- The "clients only" gate a logged-out visitor sees on this same URL,
   with a link to /login/. Left in white-on-white readable form, and given
   the same padding/measure as the rest of the page rather than sitting
   flush against the header. */

body.tcdc-woo.woocommerce-account .members-access-error {
  max-width: 640px;
  margin: 0 auto;
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
}

body.tcdc-woo.woocommerce-account .members-access-error a {
  color: var(--mint-ink) !important;
  text-decoration: underline;
}


/* ======================================================================
   ORDER-PAY (pay for an existing order), 2026-08-16
   ----------------------------------------------------------------------
   Reached from the footage upload tool when a client goes over their clip
   allowance, and from any "pay now" invoice link. Two faults, both measured
   live rather than guessed.

   1. THE SAME 720px TABLE BUG AS THE PRODUCT PAGE.
      The design system's bare table { min-width: 720px } (see the note in
      section 3 above) reaches this table too. Measured: #order_review is
      478px wide, .shop_table rendered 720px and ran from x=832 to x=1552
      against a page edge at x=1281, so the SUBTOTAL and TOTAL figures were
      simply off the side of the page. width: 100% cannot pull a table
      below its own min-width, which is why this needs min-width, not width.

      The 2026-08-09 fix only scoped .summary form.cart table, so the
      product page was cured and this page was never touched.

   2. "PAY FOR ORDER" WAS NEAR-BLACK ON NAVY.
      Measured colour rgb(10,14,38) on background rgb(29,31,67). Effectively
      unreadable. Same family of problem as the upload form's submit button.
   ====================================================================== */

body.tcdc-woo.woocommerce-order-pay .shop_table,
body.tcdc-woo.woocommerce-order-pay #order_review table,
body.tcdc-woo.woocommerce-checkout #order_review table,
body.tcdc-woo.woocommerce-checkout .woocommerce-checkout-review-order-table {
  min-width: 0 !important;
  width: 100%;
  table-layout: auto;
}

body.tcdc-woo.woocommerce-order-pay .shop_table td,
body.tcdc-woo.woocommerce-order-pay .shop_table th,
body.tcdc-woo.woocommerce-checkout #order_review table td,
body.tcdc-woo.woocommerce-checkout #order_review table th {
  overflow-wrap: anywhere;
  word-break: normal;
}

body.tcdc-woo.woocommerce-order-pay .shop_table td:last-child,
body.tcdc-woo.woocommerce-order-pay .shop_table th:last-child {
  text-align: right;
  white-space: nowrap;
}

body.tcdc-woo.woocommerce-order-pay #place_order,
body.tcdc-woo.woocommerce-checkout #place_order,
body.tcdc-woo.woocommerce-order-pay button[name="woocommerce_pay"] {
  color: #fff !important;
}

body.tcdc-woo.woocommerce-order-pay #place_order:hover,
body.tcdc-woo.woocommerce-checkout #place_order:hover {
  color: #fff !important;
}