/*
Theme Name: Storefront Child
Theme URI: https://fdncstore.com
Description: Child theme for Storefront — For Dog & Country
Author: For Dog & Country
Author URI: https://fdncstore.com
Template: storefront
Version: 1.0.0
Text Domain: storefront-child
*/

/*
=== SPELLING: AMERICAN ENGLISH ONLY ===
(1) Do not write British spellings in this file.
(2) If this file already holds any, in prose or in a comment: change them to the American
    form outright. Do not comment one out, and do not leave a note saying one was changed -
    delete any such note you find.
(3) Before working from any code, .txt or .md file that does NOT carry this block: run a
    spelling check over it, fix what it finds, then copy this block to its top.
(4) When creating any code, .txt or .md file: put this block at its top.

THE LIMITS, each one learned by breaking something:
- Identifiers are not prose. Never change an id, key, class, filename, or a value that comes
  from another system. "burnt-orange" is a stored palette id AND the correct American name
  for that color - it is not a misspelling.
- check-docs.py holds the word list the check searches for. Those spellings stay.
- _archive is history and a restore point. Leave it.
- The six HANDS-OFF files are Damon's. Leave them.
- Three words are NOT British and must never be "corrected": burnt, spelt, dialogue.
=== END SPELLING ===
*/

/* hiding storefront's global breadcrumb wrapper */
.storefront-breadcrumb {
    display: none !important;
}

/* ============================================================
   CUSTOM FONTS
   ============================================================ */

@font-face {
	font-family: 'Beaver Punch';
    src: url('fonts/beaver-punch.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   DESKTOP HEADER / NAV
   (migrated from Customizer > Additional CSS, July 2026 — moved verbatim)
   ============================================================ */

/* Hide site title text */
.site-title {
    display: none;
}
/* Hide header search bar */
.site-header .widget_product_search {
    display: none;
}
/* Size logo */
.site-header .site-branding img,
.site-header .custom-logo-link img {
    max-width: 450px;
    width: auto;
    height: auto;
}
.fdnc-header-inner {
    display: flex;
    align-items: center;
    padding: 0 20px;
}
.fdnc-branding {
    flex-shrink: 0;
    margin-right: 65px;
    display: flex;
    align-items: center;
    gap:33px;
}
.fdnc-branding .custom-logo {
    max-width: 378px;
    height: auto;
    display: block;
}
.fdnc-primary-nav {
    flex: 0 0 auto;    /* was: flex: 1 */
    display: flex;
    align-items: center;
    padding-bottom: 0;
    margin-top: 12px;
}
.fdnc-primary-nav .fdnc-nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 53px;
}
.fdnc-primary-nav .fdnc-nav-menu li a {
    text-decoration: none;
    color: #262626;
    font-weight: 700;
    font-size: 24.4px;
    letter-spacing: 0.05em;
}
.fdnc-header-cart {
    margin-left: 110px;
}
/* Hide right sidebar */
#secondary {
    display: none;
}
.fdnc-cart-link,
.fdnc-cart-link:hover,
.fdnc-cart-link svg,
.fdnc-cart-link svg path {
    color: #262626 !important;
    fill: #262626 !important;
    stroke: none;
}
.fdnc-cart-count {
    font-size: 20px;
    color: #262626 !important;
}
/* Home nav icon size */
.fdnc-home-icon {
    height: 67px;
    width: auto;
    margin-bottom: 3px;
}
.fdnc-primary-nav .fdnc-nav-menu li a:hover {
    text-decoration: underline;
}
.fdnc-primary-nav .fdnc-nav-menu li.current-menu-item > a,
.fdnc-primary-nav .fdnc-nav-menu li.current-page-ancestor > a,
.fdnc-primary-nav .fdnc-nav-menu li.current_page_item > a,
.fdnc-primary-nav .fdnc-nav-menu li.woocommerce-active > a {
    text-decoration: underline;
}
/* Cart icon size */
.fdnc-cart-link svg {
    width: 49px;
    height: 49px;
}
/* Hide breadcrumb nav */
.woocommerce-breadcrumb {
    display: none;
}

/* ============================================================
   HOME PAGE - HERO
   ============================================================ */

#fdnc-hero {
    width: 100vw;
    max-width: 2000px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    overflow: hidden;
}

#fdnc-hero-video {
    display: block;
    border: none;
    width: 100%;
    height: 448px;
    object-fit: cover;
    object-position: center;
}

/* ── Hero overlays ── */
#fdnc-hero-overlays {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.fdnc-hero-overlay {
    position: absolute;
    width: 227px;
    height: 227px;
	opacity: 0;
	object-fit: contain;
}

.fdnc-overlay-top-left {
    top: 0;
    left: 0;
}

.fdnc-overlay-top-right {
    top: 0;
    right: 0;
}

.fdnc-overlay-bottom-right {
    bottom: 0;
    right: 0;
}

/* ============================================================
   HOME PAGE - SHOP SECTION
   ============================================================ */

#fdnc-shop-section {
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    margin-top: 50px;
    margin-bottom: 25px;
}

/* Product Card block */
.fdnc-product-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.fdnc-product-price {
    text-align: center;
    margin: 4px 0 0 0;
}

/* Product Card border */
.fdnc-product-card img {
    width: 240px;
    height: auto;
    display: block;
    border: 1px solid #CCCDFD;
}

#fdnc-content-dyo .fdnc-product-card img {
    border-color: #9A9CFC;
}

/* Product Name */
.fdnc-product-name {
    font-weight: 700;
    text-align: center;
    margin: 12px 0 4px 0;
}

/* Step 2 layout — label left, prompt text centered (mirrors Step 1) */
#fdnc-step2 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

#fdnc-step2-status {
    flex: 1;
    text-align: center;
    font-style: italic;
}

/* Product grid — full width, pushed below Step 2 header row */
#fdnc-product-grid,
#fdnc-rmc-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(241px, 241px));
    justify-content: center;
    column-gap: 20px;
    row-gap: 60px;
    width: 100%;
    margin-top: 20px;
}

#fdnc-product-grid {
    margin-top: -4px;
}

/* ── Step 2 collapsed state (6a-3) ──────────────────────────
   ★ THE [hidden] GUARDS ARE LOAD-BEARING. #fdnc-product-grid is display:grid
   above, and author CSS beats the user-agent stylesheet regardless of
   specificity - so without this rule the hidden attribute is IGNORED and the
   grid stays on screen while also remaining in the accessibility tree. This
   codebase has been bitten by exactly this three times now (.fdnc-dyo-field,
   .fdnc-lightbox-actions, .fdnc-dyo-side-check). Do not remove.
   Styling here is deliberately minimal - the real visual pass is step 9a. */
#fdnc-product-grid[hidden],
#fdnc-step2-change[hidden] {
    display: none;
}

#fdnc-step2-status.fdnc-step2-selected {
    font-style: normal;
    font-weight: 700;
    /* A93b: flex so the catalog thumbnail sits beside the name and centers with
       it vertically. The element keeps flex:1 from the rule above - that is how
       it behaves as a CHILD of #fdnc-step2 - and this governs its own contents.
       The bare product name is an anonymous flex item; that is fine, and it is
       why justify-content still centers the pair the way text-align used to
       center the name alone. */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Space between the product name and its catalog image (Damon, Sept 15:
       12px, plus 10). */
    gap: 22px;
}

/* A93b: the selected product's catalog image, in the step 2 row.
   object-fit: contain and a white ground because catalog images are not all the
   same shape - a wide mug photo must letterbox inside the square rather than be
   cropped or stretched. flex: 0 0 auto keeps it from being squeezed by a long
   product name at narrow widths. */
.fdnc-step2-thumb {
    display: block;
    flex: 0 0 auto;
    /* ONE place to change the size. It drives the whole step 2 row's height,
       so a change here is a change to the ladder's proportions - try a value,
       look at the row, adjust. */
    width: var(--fdnc-step2-thumb-px, 84px);
    height: var(--fdnc-step2-thumb-px, 84px);
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #cccccc;
}

/* ── DYO selectable card: strip the button's UA + Storefront chrome (6a-3) ──
   .fdnc-product-card-select is a <button> because it performs an in-page action
   and navigates nowhere. But Storefront styles EVERY button with a background,
   border, padding, radius and text-shadow, and the user-agent adds its own on
   top. Two visible symptoms before this rule, both from that one cause:
     1. a gray rounded box behind the card, and
     2. a THUMBNAIL SHRUNK BELOW 240px - the button's padding and border eat into
        the fixed 241px grid column, and Storefront's img{max-width:100%} then
        scales the image down to fit what is left.
   Specificity here is (1 id, 1 class, 1 type), which out-ranks Storefront's
   element-level button rules without resorting to !important. */
#fdnc-product-grid button.fdnc-product-card-select {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: inherit;
    line-height: inherit;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

#fdnc-product-grid button.fdnc-product-card-select:hover,
#fdnc-product-grid button.fdnc-product-card-select:focus,
#fdnc-product-grid button.fdnc-product-card-select:active {
    background: none;
    box-shadow: none;
    color: inherit;
}

/* ★ Storefront's button:focus outline rules out-specify a plain outline:none
   (0,1,1 beats 0,1,0), so a mouse click leaves the theme's ring on converted
   elements. Suppress the POINTER ring only - the keyboard :focus-visible ring
   must survive. Accessibility do-not-regress list, item 1. */
/* The Ready-Made grid's cards are LINKS, not buttons, and never had this line
   (Damon, Sept 16, 2026). It removes the ring a mouse click leaves; the ring
   left behind by the browser's Back button is cleared in js/shop.js (pageshow),
   for mouse clicks only. */
#fdnc-rmc-product-grid a.fdnc-product-card:focus:not(:focus-visible),
#fdnc-product-grid button.fdnc-product-card-select:focus:not(:focus-visible) {
    outline: none;
}

/* Shop Banner */
#fdnc-shop-banner {
    width: 100vw;
    max-width: 2000px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}
#fdnc-shop-banner img {
    display: block;
    width: 100%;
    height: 224px;
    object-fit: cover;
    object-position: center;
}

/* Tab Bar */
#fdnc-shop-tabs {
    display: flex;
	margin-top: 20px;
}
.fdnc-shop-tab {
    /* Button reset — tabs are native <button> elements for keyboard/screen-reader access */
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: none;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    outline: none;
    /* Layout (unchanged) */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    cursor: pointer;
gap: 22px;
}
.fdnc-shop-tab:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: -4px;
    border-radius: 2px;
}
#fdnc-tab-dyo {
    background-color: #CCCCFF;
}
#fdnc-tab-rmc {
    background-color: #EBECFB;
}
.fdnc-tab-arrow {
    visibility: hidden;
    display: flex;
    align-items: center;
    width: 40px;
    flex-shrink: 0;
}
.fdnc-tab-arrow img {
    width: 40px;
    height: 40px;
    transform: rotate(-45deg);
}
.fdnc-tab-spacer {
    width: 40px;
    flex-shrink: 0;
}
.fdnc-tab-active .fdnc-tab-arrow {
    visibility: visible;
}
.fdnc-tab-label {
    font-family: 'Beaver Punch', sans-serif;
    font-size: 26px;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    color: #1a1a1a;
}

/* Content wrapper — single source of truth for background color */
#fdnc-shop-content {
    background-color: #CCCCFF;
}
#fdnc-shop-content.fdnc-active-rmc {
    background-color: #EBECFB;
}

/* Tab Content — each is a true 50/50 split */
.fdnc-tab-content {
    display: none;
}
.fdnc-tab-content.fdnc-content-active {
    display: flex;
}

/* ── Hide unreached steps ───────────────────────────────── */
#fdnc-step2,
#fdnc-rmc-step2 {
    display: none;
}

#fdnc-step2.fdnc-step-visible {
    display: flex;
}

/* Step 3 follows the same hide-until-reached pattern as Step 2 (6a-4b).
   block, not flex: the design-tool shell inside manages its own layout. */
#fdnc-step3 {
    display: none;
}

#fdnc-step3.fdnc-step-visible {
    display: block;
}

/* 9a-6 slice 3: the step-3 header row. The label keeps the left; the slot takes
   the rest of the row and holds whatever js/shop.js hoisted into it - the
   chooser note, or the editor's side-toggle row. Same gap and wrap behavior as
   #fdnc-step1's radio row, so the three steps read as one system.
   The row is EMPTY until a product is mounted, and empty flex children take no
   height, so nothing moves on the unreached screens. */
/* ★ A THREE-COLUMN GRID, AND THE EMPTY THIRD COLUMN IS THE WHOLE POINT
   (Damon, Sept 1: center the note on the blank space between the two chooser
   panels). Those panels are centered in the shell, so the gap between them sits
   on the shell's center line - and a middle grid track with an equal 1fr on
   either side lands exactly there, with no measurement of the panes and nothing
   to re-tune when a card size changes.

   FLEX COULD NOT DO THIS. The slot was flex:1, so it filled what the label left
   over and centered its text in THAT - always right of the true center by half
   the label's width. Nothing about the note was wrong; it was being centered in
   the wrong box.

   Column 1 holds the label and is 1fr, so it is free to be wider than the label
   needs. If the label ever outgrows its share the browser widens column 1 and
   the note shifts right rather than colliding - it degrades visibly instead of
   overlapping.

   max-width matches the shell's cap - see --fdnc-tool-width in design-tool.css.
   Without it this row is 20px wider than the tool (it lives outside the mount)
   and every centering below is 10px off. */
.fdnc-step3-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    max-width: var(--fdnc-tool-width, 1040px);
    /* ★ NO BOTTOM MARGIN HERE ANY MORE (Damon, Sept 1: tighten the editor by
       30px). The two screens want DIFFERENT space under this row - the chooser
       wanted a blank line, the editor wanted almost none - so the spacing moved
       off the shared row and onto #fdnc-dyo-chooser, which only the chooser
       screens have. The editor's remaining 10px is the nav buttons' own
       margin-top in design-tool.css. */
}

.fdnc-step3-header .fdnc-step-label {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

/* display:contents dissolves the slot itself so its children become grid items
   of the row - the slot is a JS drop target, not a layout box. Both children
   claim the SAME cell, which is safe because exactly one of them is ever
   visible: the other carries `hidden`, which is display:none. */
#fdnc-step3-header-slot {
    display: contents;
}

#fdnc-step3-header-slot > * {
    grid-column: 2;
    grid-row: 1;
}

#fdnc-rmc-step2.fdnc-step-visible {
    display: block;
}

/* ============================================================
   HOME PAGE - READY-MADE + DESIGN YOUR OWN, TWO STACKED BLOCKS
   ★★ REBUILT FROM A MOCKUP Oct 2, 2026 (Damon), and revised the same day to
   his "New Home layout: desktop v2". front-page.php carries the record: no
   tabs on Home, no demo video, Ready-Made FIRST and open on Shirts with
   products showing, "...OR..." beside its button, Design Your Own below.
   The phone rules are in css/mobile.css.

   ⚠ THE TAB RULES ABOVE (.fdnc-shop-tab, #fdnc-shop-tabs, .fdnc-tab-label,
   .fdnc-tab-content, #fdnc-shop-content) ARE THE SHOP PAGE'S NOW. Home no
   longer uses any of them. Do not prune them as leftovers.

   ★ EVERYTHING HERE IS ONE FIXED SIZE AT EVERY DESKTOP WIDTH (Damon: "force
   size constraints, so that these icons wouldn't grow huge when the browser
   is wide"; "same for product photos"). The first build let the photos run
   256-300px and drew the icons at 200px; he called it "too stark ... also
   huge". The colored blocks still run the section's full width - Damon:
   "let's keep the blocks as is for now... if we want to tighten the width a
   bit, we can fine-tune that."
   The numbers are the v2 slide's proportions on an 800px-wide stage: a first
   pass for Damon's eye, each one meant to be nudged.
   ============================================================ */

/* ── The two block headings: one size, the tab labels' font ── */
#fdnc-shop-section .fdnc-home-heading {
    font-family: 'Beaver Punch', sans-serif;
    font-weight: normal;
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: normal;
    text-align: center;
    text-transform: uppercase;
    color: #1a1a1a;
    margin: 0;
    clear: none;
}

/* ── The two pill buttons ──────────────────────────────────
   One treatment, two sizes: SEE ALL is the size Home's buttons always were,
   TRY IT OUT! a step larger, as on the slide. */
#fdnc-dyo-cta,
.fdnc-rmc-see-all-btn {
    width: fit-content;
    background-color: #2D508F;
    color: #E8F0F8;
    font-family: 'Beaver Punch', sans-serif;
    text-decoration: none;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    letter-spacing: 1px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.fdnc-rmc-see-all-btn {
    font-size: 25px;
    padding: 16px 44px 10px 44px;
}
#fdnc-dyo-cta {
    font-size: 32px;
    padding: 19px 50px 11px 50px;
    margin-top: 52px;
}
#fdnc-dyo-cta:hover,
.fdnc-rmc-see-all-btn:hover {
    background-color: #3D6A93;
    color: #ffffff;
}
#fdnc-dyo-cta:focus-visible,
.fdnc-rmc-see-all-btn:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 3px;
}

/* ── Ready-Made (first) ────────────────────────────────────── */
#fdnc-home-rmc {
    background-color: #EBECFB;
    padding: 40px 40px 34px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The radios reuse the Shop's .fdnc-category-option, a size up. Home's own
   labels are short (Shirts / Hats / Mugs / Towels), so all four share a line. */
#fdnc-home-rmc-radios {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin-top: 22px;
}
#fdnc-home-rmc-radios .fdnc-category-option {
    font-size: 20px;
    gap: 8px;
    color: #1a1a1a;
    white-space: nowrap;
}
#fdnc-home-rmc-radios .fdnc-category-option input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
}

/* The row: arrow, three products, arrow. The arrows center on the PHOTOS:
   each name hangs below its card (position: absolute), so it adds nothing to
   the height the arrows are centered against, and the row keeps room for a
   two-line name underneath (the margin-bottom). */
#fdnc-rmc-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    margin-top: 34px;
    margin-bottom: 84px;
}

#fdnc-home-rmc-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    flex: 0 0 auto;
    /* A sideways swipe on the photos turns the row (js/home.js). pan-y tells
       the browser to keep scrolling the page up and down from here and to
       leave the sideways move alone.
       ★ pinch-zoom IS NAMED TOO (Damon, Oct 2, 2026, phone QA: "pinch and zoom
       still works, but not on the product photos (including name) or the
       reviews"). touch-action lists what the browser MAY do; with pan-y alone
       a pinch that started on a photo or its name did nothing. This is the
       Shop carousels' value (A131 QA 7), where the same thing was found. */
    touch-action: pan-y pinch-zoom;
}

/* ★ A FIXED 200px, NOT A SHARE OF THE ROW (rules.md #106 and #159: a size
   that follows its container changes when the container does). */
.fdnc-home-card {
    position: relative;
    display: block;
    flex: 0 0 200px;
    width: 200px;
    text-decoration: none;
    color: #1a1a1a;
}
/* The card has a display value, so [hidden] needs its own rule or the
   attribute is ignored (rules.md #104). js/home.js hides cards with it. */
.fdnc-home-card[hidden] {
    display: none;
}
.fdnc-home-card img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #CCCDFD;
    background-color: #ffffff;
}
.fdnc-home-card-name {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: #1a1a1a;
    /* Two lines at most, so a long name can never reach the button below
       (the row reserves room for exactly two). */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.fdnc-home-card:hover .fdnc-home-card-name {
    text-decoration: underline;
}
.fdnc-home-card:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 3px;
}

.fdnc-rmc-arrow {
    background: none;
    border: none;
    font-size: 52px;
    font-weight: 400;
    cursor: pointer;
    color: #1a1a1a;
    flex-shrink: 0;
    padding: 0 6px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
/* Three products or fewer: everything is already showing, so no arrows - and
   with the arrows out of the row, one or two products sit centered (Damon,
   Oct 2, 2026). Keyed off data-count so it is right before the script runs;
   front-page.php writes the opening count and js/home.js keeps it current. */
#fdnc-rmc-carousel[data-count="1"] .fdnc-rmc-arrow,
#fdnc-rmc-carousel[data-count="2"] .fdnc-rmc-arrow,
#fdnc-rmc-carousel[data-count="3"] .fdnc-rmc-arrow {
    display: none;
}

/* The "1 of 8" count is the phone layout's; the live line is for screen readers. */
#fdnc-home-rmc-count {
    display: none;
    margin: 0;
}

/* SEE ALL OUR SHIRTS! with "...OR..." to its right (v2), centered as a pair. */
#fdnc-home-rmc-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
}
#fdnc-home-or {
    font-family: Carlito, Calibri, sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: #333333;
    white-space: nowrap;
}
/* ★ THE WORD IN BEAVER PUNCH, THE DOTS NOT (Damon, Oct 2, 2026): "let's have
   OR in Beaver Punch, but the ellipses before and after it in the current
   font, so they appear round, not square and blocky." Beaver Punch draws a
   period as a dash. So front-page.php wraps the word alone, and the dots keep
   the font above. The sizes are in em so the one rule serves the phone size
   too: a touch larger than the dots (36px beside 34px), and moved down so the
   letters sit on the dots' line - Beaver Punch rides high in its own box, the
   same reason the buttons carry more padding above than below. */
.fdnc-home-or-word {
    font-family: 'Beaver Punch', sans-serif;
    font-weight: normal;
    font-size: 1.06em;
    letter-spacing: 1px;
    margin: 0 0.09em;
    position: relative;
    top: 0.18em;
}

/* ── Design Your Own (second) ──────────────────────────────── */
#fdnc-home-dyo {
    background-color: #CCCCFF;
    padding: 38px 40px 42px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#fdnc-dyo-icons {
    display: flex;
    justify-content: center;
    gap: 36px;
    margin-top: 40px;
}

/* ★ A FIXED 140px (the same reasoning as the product photos above). */
.fdnc-dyo-icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 0 0 140px;
    width: 140px;
    /* Anchor reset - a real <a> for keyboard and screen-reader access */
    text-decoration: none;
    color: #1a1a1a;
}
.fdnc-dyo-icon-wrap:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 3px;
    border-radius: 4px;
}

.fdnc-dyo-icon {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.fdnc-dyo-icon-label {
    font-family: Carlito, Calibri, sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    color: #1a1a1a;
}

/* hide arrow outline - ADA-safe */
.fdnc-rmc-arrow:focus:not(:focus-visible) {
    outline: none;
}
/* Same fix for the converted button/anchor elements: Storefront/WooCommerce's
   generic button:focus / a:focus rules out-specify a base-rule outline:none,
   so click-focus showed the theme's ring. :focus:not(:focus-visible) suppresses
   it for pointer clicks only - keyboard :focus-visible rings are unaffected.
   (.fdnc-shop-tab is the Shop page's tab bar.) */
.fdnc-shop-tab:focus:not(:focus-visible),
.fdnc-dyo-icon-wrap:focus:not(:focus-visible),
.fdnc-home-card:focus:not(:focus-visible),
#fdnc-dyo-cta:focus:not(:focus-visible),
.fdnc-rmc-see-all-btn:focus:not(:focus-visible) {
    outline: none;
}
/* Same theme-override pattern for hover: Storefront's generic button:hover
   adds a background color that leaks onto our converted <button> elements. */
.fdnc-shop-tab:hover {
    background: none;
}
.fdnc-rmc-arrow:hover,
.fdnc-rmc-arrow:focus,
.fdnc-rmc-arrow:active {
    background: none;
    color: #1a1a1a;
    outline: none;
    box-shadow: none;
}
.fdnc-rmc-arrow:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ★★ SITE-WIDE: NO DOUBLE-TAP ZOOM ON ANY ARROW CAROUSEL (Damon, Oct 2, 2026)
   ═══════════════════════════════════════════════════════════════════════════
   THE BUG: "when tapping the scroll arrow quickly to advance through products
   rapidly, I often trigger the phone's zoom feature. This is annoying." Two
   quick taps in one spot are a phone's "zoom in here" gesture, and stepping
   fast through a carousel is exactly two quick taps in one spot.
   THE ASK: "Can it be disabled for the scroll arrows and their general
   vicinity?" and then "can we make that a mobile site-wide update wherever we
   have scroll arrows around a product image? And note it for future production
   so that we don't have to revisit it again?"

   "touch-action: manipulation" turns that one gesture off for an element and
   everything inside it. Scrolling the page and pinching to zoom both still
   work there. A mouse is not affected at all, which is why this is not
   wrapped in a screen-width test - a tablet held sideways is as wide as a
   laptop and has the same problem.

   WHAT IS LISTED, AND WHY BOTH KINDS:
     - the ARROW BUTTONS themselves, by class - so a carousel built later by
       js/fdnc-carousel.js (which gives every arrow .fdnc-carousel-arrow and
       every count .fdnc-carousel-dots) is covered with no change here;
     - each carousel's STRIP - the box holding the arrows, the picture and the
       gaps between them - and its count line, for the "general vicinity": a
       thumb in a hurry lands beside the arrow as often as on it.
   Home's Ready-Made row, the Shop's two product carousels, the design
   chooser's panes and the reviews strip are all here. (The reviews are not a
   product picture, but they are the same arrows and the same fast tapping.)

   ⚠⚠ A NEW CAROUSEL WITH ITS OWN MARKUP - one that does not go through
   js/fdnc-carousel.js - ADDS ITS ARROW CLASS AND ITS STRIP TO THIS LIST. That
   is the whole job, and it is rules.md's standing rule for arrow carousels.
   ⚠ Do not "tidy" a more specific touch-action off the pictures inside these
   strips (#fdnc-home-rmc-row's, the reviews track's and the Shop grids'
   "pan-y pinch-zoom"):
   those hand the sideways swipe to our own code, and they already rule out
   the double-tap zoom on the picture itself. */
.fdnc-rmc-arrow,
.fdnc-carousel-arrow,
.fdnc-reviews-arrow,
.fdnc-carousel-dots,
.fdnc-reviews-dots,
#fdnc-rmc-carousel,
#fdnc-home-rmc-count,
#fdnc-product-carousel,
#fdnc-rmc-product-carousel,
.fdnc-dyo-chooser-pane,
.fdnc-reviews-arrows-wrap {
    touch-action: manipulation;
}

/* ── Nonprofit Partners Section ── */
/* ★ REBUILT FROM THE MOCKUP (Damon, Sep 25, 2026): the partner logos are gone,
   so the section is two columns - the hearts art, then the two paragraphs.
   Top and bottom padding are the mockup's gaps to the sections above and below. */
#fdnc-partners-section {
    padding: 55px 40px 65px 40px;
    background: #ffffff;
}

#fdnc-partners-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "hearts text1"
        "hearts text2";
    align-items: end;
    /* No ROW gap (Damon, Sept 16, 2026): the two paragraphs are separated by the
       first paragraph's own 20px bottom margin only. */
    column-gap: 90px;
    row-gap: 0;
    /* 400px art + 90px gap + ~510px of text, centered (mockup, Sep 25, 2026). */
    max-width: 1000px;
    margin: 0 auto;
}

#fdnc-partners-left {
    grid-area: hearts;
    /* Vertically centered on the two paragraphs it sits beside (Damon, Sept 16,
       2026). The grid's align-items: end dropped it to the bottom once narrower
       windows made the text taller than the art. */
    align-self: center;
}

/* hearts-mobile.png is 957 x 594, so 400px wide is ~248px tall (mockup). */
.fdnc-hearts {
    width: 400px;
    height: auto;
    display: block;
}

#fdnc-partners-text-1 {
    grid-area: text1;
}

#fdnc-partners-text-2 {
    grid-area: text2;
    /* ★ TOP of its row, while text-1 sits at the BOTTOM of its row (the grid's
       align-items: end), so the two paragraphs always meet at the row line
       (Damon, Sep 24, 2026). When the art is taller than the text, the spare
       height is split between the two rows; with both paragraphs at the bottom
       of their rows it all landed BETWEEN them. Now the spare height goes above
       and below the pair. */
    align-self: start;
}

.fdnc-partners-text {
    font-size: 18px;
    line-height: 1.7;
}
.fdnc-partners-text p {
    margin-bottom: 20px;
}

/* ★ NO MARGIN UNDER THE LAST PARAGRAPH (Damon, Sept 16, 2026). The hearts art is
   centered on the two paragraphs' grid rows, and those rows include this
   paragraph's box - so a 20px bottom margin here would sit the art 10px below the
   middle of the visible text. */
#fdnc-partners-text-2 p {
    margin-bottom: 0;
}

/* Underlined, in the site's link color (Damon, Sep 25, 2026). */
#fdnc-partners-text-2 a {
    text-decoration: underline;
}

#fdnc-home-mobile-logo {
    display: none;
}

#meet-our-partners {
    scroll-margin-top: 160px;
}

/* ============================================================
   SHOP PAGE
   ============================================================ */

/* Override Home page's 50/50 flex split — Shop stacks full-width */
#fdnc-shop .fdnc-tab-content.fdnc-content-active {
    display: block;
}

#fdnc-step1,
#fdnc-rmc-step1 {
    padding: 30px 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    border-bottom: 8px solid #ffffff;
    box-sizing: border-box;
    position: relative;
}

.fdnc-step-label {
    font-family: Carlito, Calibri, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    text-shadow: 0.5px 0 0 #1a1a1a, -0.5px 0 0 #1a1a1a;
}

#fdnc-step1-radios,
#fdnc-rmc-step1-radios {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex: 1;
    flex-wrap: wrap;
}

.fdnc-category-option {
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.fdnc-category-option input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.fdnc-category-option input[type="radio"]:focus {
    outline: none;
}
.fdnc-category-option input[type="radio"]:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    border-radius: 50%;
}

#fdnc-step2,
#fdnc-rmc-step2,
#fdnc-step3 {
    padding: 30px 40px;
    border-bottom: 8px solid #ffffff;
    box-sizing: border-box;
}

/* Ready-Made step 2 only: 20px on the right, not 40px (Damon, Sept 16, 2026),
   so the filter row fits on the heading's line. The left stays 40px to line up
   with step 1. DYO's step 2 and step 3 are deliberately untouched. */
#fdnc-rmc-step2 {
    padding-right: 20px;
}

/* A93b: the COLLAPSED step 2 row sits tighter than the expanded one (Damon,
   Sept 15). 30px around an 84px thumbnail read as a band with a picture lost in
   it. The expanded row keeps 30px, because there it is spacing a label against
   the product grid - a different job with a different right answer.
   ★ KEYED ON THE THUMBNAIL, NOT ON .fdnc-step2-selected, and that is the point:
   a product with no catalog image has nothing tall in the row, so it keeps the
   roomier padding rather than collapsing to a thin strip. */
#fdnc-step2:has(.fdnc-step2-thumb) {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Shown only once Step 3 is reached (Damon, Aug 21; wired at 6a-5).
   The display:none here is now the DELIBERATE not-yet-reached state, matching
   #fdnc-step2 / #fdnc-step3 above - it used to be a workaround for the message
   appearing from the moment /shop loaded, which is why it read as "never
   implemented" despite rendering in the served HTML all along.
   js/shop.js adds .fdnc-step-visible on mount and removes it on unmount. */
.fdnc-shop-contact {
    padding: 20px 40px;
    font-size: 15px;
    font-style: italic;
    text-align: center;
    background-color: transparent;
    display: none;
}

.fdnc-shop-contact.fdnc-step-visible {
    display: block;
}

/* Sept 16, 2026 (QA item 4): the help line is about DESIGNING, so it never shows
   on the Ready-Made tab. It sits outside #fdnc-shop-content, and a design left
   mounted on DYO keeps its .fdnc-step-visible when the customer switches tabs -
   so this keys on the active-tab class instead. The sibling selector's id
   out-ranks .fdnc-shop-contact.fdnc-step-visible above. */
#fdnc-shop-content.fdnc-active-rmc ~ .fdnc-shop-contact {
    display: none;
}

/* Step 3 CTA band (7-1). Same hide-until-reached pattern as .fdnc-shop-contact
   above, and the same transparent background so it reads as page, not as the
   lavender #fdnc-shop-content wrapper it deliberately sits outside.
   js/shop.js toggles .fdnc-step-visible on BOTH mount state AND active tab. */
#fdnc-cta-band {
    /* 9a: was 24px top. The CTA's own top margin was removed at the same time -
       the two were stacking to ~50px and left the button floating away from the
       design box. */
    padding: 8px 40px 0;
    text-align: center;
    background-color: transparent;
    display: none;
}

#fdnc-cta-band.fdnc-step-visible {
    display: block;
}


/* ── Promo Bar ────────────────────────────────────────────── */

#page.site {
    overflow-x: unset;
}
.site-header {
    padding-top: 15px;
    padding-bottom: 0;
    position: sticky;
    top: -15px;
    z-index: 9999;
    background-color: #ffffff;
	border-bottom: 1px solid #C7DCEF ;
	margin-bottom: 0 !important;
}
.admin-bar .site-header {
    top: 32px;
}
.fdnc-promo-bar {
    background-color: #3D6A93;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0px;
    font-family: Carlito, Calibri, sans-serif;
    font-size: 15.5px;
	position: relative;
	margin-bottom: 6px;
}
.fdnc-promo-home {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.fdnc-promo-home:hover {
    text-decoration: underline;
}
/* Keyboard focus — default outline doesn't read against the dark blue bar */
.fdnc-promo-home:focus-visible,
.fdnc-promo-learn:focus-visible,
.fdnc-promo-social-link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
    border-radius: 2px;
}
.fdnc-promo-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 0px;
    box-sizing: border-box;
}
.fdnc-promo-left {
    margin-left: 10px;
}
.fdnc-promo-center {
    position: relative;
    width: 250px;
    text-align: center;
    height: 26px;
    margin-left: 110px;
	margin-right: 20px; 
}
.fdnc-promo-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 250px;
}
.fdnc-promo-message {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    pointer-events: none;
    white-space: nowrap;
}
.fdnc-promo-message.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.fdnc-promo-learn {
    color: #ffffff;
	font-size: 11.6px;
    text-decoration: underline;
    margin-left: 4px;
}
.fdnc-currency-placeholder {
    font-size: 14.5px;
    white-space: nowrap;
    cursor: default;
}
.fdnc-promo-social {
    display: flex;
    align-items: center;
    gap: 10px;
	margin-left: 25px;
}
.fdnc-promo-social-link svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
    display: block;
}
.fdnc-promo-divider {
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
}

/* ── Global content width ─────────────────────────────── */
#primary.content-area {
    width: 100%;
    float: none;
}

/* ── Footer ───────────────────────────────────────────── */

	/* Reset Storefront's default footer wrapper (kept visible so our hooked content renders inside it) */
    .site-footer {
        background: none;
        padding: 0;
        margin: 0;
        border: none;
    }

    .fdnc-footer {
        background-color: #ffffff;
        padding: 30px 40px 20px 40px;
        font-family: Carlito, Calibri, sans-serif;
        width: 100%;
        box-sizing: border-box;
    }
    .fdnc-footer-inner {
        max-width: 1024px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Row 1: Badge centered */
    .fdnc-footer-row1 {
        text-align: center;
        margin-bottom: 24px;
    }
    .fdnc-footer-badge-img {
        width: 180px;
        height: 180px;
        display: inline-block;
    }

    /* Row 2: Email signup */
    .fdnc-footer-email-row {
        display: flex;
        align-items: center;
		justify-content: center;
        gap: 16px;
        padding: 8px 0;
        margin-bottom: 8px;
    }
    .fdnc-footer-email-icon-link {
        flex-shrink: 0;
        display: block;
    }
    .fdnc-footer-email-icon {
        width: 59px;
        height: 59px;
        display: block;
    }
	.fdnc-footer-email-text {
        margin: 0;
        font-size: 20px;
        line-height: 1.4;
        color: #000000;
    }
	
	/* Reserved for future Ambassador signup link — wrap "Be an FD&C Ambassador" in
       <a href="..." class="fdnc-footer-ambassador-link"> in functions.php, then uncomment.
    .fdnc-footer-ambassador-link,
    .fdnc-footer-ambassador-link:visited {
        color: #2D508F !important;
        font-weight: 700;
        text-decoration: underline;
    }
    .fdnc-footer-ambassador-link:hover {
        color: #3D6A93 !important;
    }
    */
	
	.fdnc-footer-signup-link,
    .fdnc-footer-signup-link:visited {
        color: #2D508F !important;
        font-weight: 700;
        text-decoration: underline;
    }
	
    .fdnc-footer-signup-link:hover {
        color: #3D6A93 !important;
    }

    /* Row 3: Ambassador */
	.fdnc-footer-ambassador-row {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		padding: 8px 0;
		margin-bottom: 0px;
	}
    .fdnc-footer-dog {
        width: 95px;
        height: auto;
        flex-shrink: 0;
    }
	.fdnc-footer-ambassador-text {
        margin: 0;
        font-size: 20px;
        line-height: 1.4;
        color: #000000;
    }
    .fdnc-footer-coming-soon {
        font-family: 'Caveat', cursive;
        font-weight: 700;
        font-size: 19px;
        color: #8B6914;
        text-align: center;
        line-height: 1.2;
        flex-shrink: 0;
        transform: rotate(-20deg);
        display: inline-block;
        margin-left: 12px;
    }

    /* Row 4: Nav links */
    .fdnc-footer-row2 {
        text-align: center;
        margin-bottom: 20px;
        padding: 16px 0;
    }
    .fdnc-footer-nav-primary {
        margin: 0 0 4px 0;
        font-size: 16px;
    }
    .fdnc-footer-nav-bold {
        font-weight: 700;
        text-decoration: underline;
        color: #000000;
    }
    .fdnc-footer-nav-secondary {
        margin: 4px 0;
        font-size: 15px;
    }
    .fdnc-footer-nav-secondary a {
        color: #000000;
        text-decoration: underline;
    }

    /* Row 5: Copyright */
    .fdnc-footer-row3 {
        text-align: center;
        margin-bottom: 40px;
    }
    .fdnc-footer-copyright {
        font-size: 13px;
        line-height: 1.6;
        color: #333333;
    }
    .fdnc-footer-copyright p {
        margin: 0;
    }

    /* Row 6: Logo + paw prints (3-column) */
    .fdnc-footer-row4 {
        display: flex;
        align-items: flex-start;
        padding: 10px 0 20px 0;
    }
    .fdnc-footer-row4-spacer {
        flex: 1;
    }
    .fdnc-footer-row4-logo {
        flex: 0 0 auto;
        text-align: center;           /* centers the tagline under the logo */
    }
    /* The brand line under the logo (Damon, Sep 24, 2026): Patrick Hand, 17px,
       dark gray, 10px below the logo. The font is enqueued in functions.php.
       ★ Oct 4, 2026 (Damon, with the new words "For dogs. For good. Forever."):
       "increase the font by 15%" - 17px x 1.15 = 19.55, set as 19.5px. The 10px
       above it is in px and did not move. */
    .fdnc-footer-tagline {
        margin: 10px 0 0;
        font-family: 'Patrick Hand', cursive;
        font-size: 19.5px;
        line-height: 1.4;
        color: #333333;
    }
    .fdnc-footer-logo {
        height: 50px;
        width: auto;
        display: block;
    }
    .fdnc-footer-row4-paws {
        flex: 1;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 8px;
    }
    .fdnc-footer-paw {
        filter: invert(45%) sepia(60%) saturate(600%) hue-rotate(0deg) brightness(90%);
    }
    .fdnc-footer-paw-small {
        width: 32px;
        height: 32px;
        transform: rotate(35deg);
    }
    .fdnc-footer-paw-large {
        width: 44px;
        height: 44px;
        transform: rotate(35deg);
    }

/* ── Reviews Strip ──────────────────────────────────────── */
.fdnc-reviews-strip {
    --fdnc-card-width: 300px;
    --fdnc-card-gap: 130px;
    --fdnc-peek-pct: 0.4;
    padding: 30px 0 25px 0;
    margin-bottom: 30px;
    background-color: #fff7ab;
    position: relative;
    overflow: hidden;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.fdnc-reviews-arrows-wrap {
    max-width: 950px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fdnc-reviews-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 48px;
    line-height: 1;
    color: #426B91;
    padding: 0 8px;
    z-index: 5;
}
.fdnc-reviews-arrow-prev {
    left: 0;
}
.fdnc-reviews-arrow-next {
    right: 0;
}
.fdnc-reviews-arrow:hover,
.fdnc-reviews-arrow:focus,
.fdnc-reviews-arrow:active {
    background: none;
    outline: none;
    box-shadow: none;
}
.fdnc-reviews-arrow:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    border-radius: 4px;
}
.fdnc-reviews-cards-wrap {
    width: 800px;
    overflow: hidden;
    position: relative;
}
.fdnc-reviews-track {
    display: flex;
    align-items: stretch;
    gap: var(--fdnc-card-gap);
    will-change: transform;
    /* pan-y: the page still scrolls up and down from here, and the sideways
       drag is js/reviews.js's. ★ pinch-zoom was added Oct 2, 2026 (Damon,
       phone QA: pinch did not work "on the product photos ... or the
       reviews") - with pan-y alone a pinch that started on a review did
       nothing. js/reviews.js drops its drag when a second finger lands, so a
       pinch cannot flip the review. */
    touch-action: pan-y pinch-zoom;
}
.fdnc-review-card {
    flex: 0 0 var(--fdnc-card-width);
    width: var(--fdnc-card-width);
    border-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
    user-select: none;
}
.fdnc-review-card-top {
    background-color: #426B91;
    height: 33px;
}
.fdnc-review-card-body {
    background-color: #BDD7EE;
    padding: 20px;
    height: 190px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.fdnc-review-text {
    font-family: Carlito, Calibri, sans-serif;
    font-size: 20px;
    line-height: 1.5;
    color: #262626;
    margin: 0;
}
.fdnc-review-card-bottom {
    background-color: #426B91;
    padding: 7px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.fdnc-review-location {
    font-family: Carlito, Calibri, sans-serif;
    font-size: 15px;
    color: #ffffff;
}
.fdnc-review-name {
    font-family: Carlito, Calibri, sans-serif;
    font-size: 15px;
    font-style: italic;
    color: #ffffff;
}
.fdnc-reviews-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}
.fdnc-reviews-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 2px solid #2D508F;
    cursor: pointer;
    padding: 0;
}
.fdnc-reviews-dot.active {
    background-color: #2D508F;
}
.fdnc-reviews-dot:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 3px;
}
.fdnc-reviews-dot:focus:not(:focus-visible) {
    outline: none;
}

/* Hide mobile elements above breakpoint */
@media (min-width: 1024px) {
    .fdnc-mobile-nav,
    .fdnc-mobile-menu-expanded,
    .fdnc-mobile-promo-bar {
        display: none !important;
    }
	/* Hide FAB on desktop */
	.fdnc-fab {
        display: none !important;
    }
	
	/* ── Global content width (desktop only) ────────────────── */
    #content.site-content .col-full {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
		padding-top: 0;
        box-sizing: border-box;
    }
    .fdnc-header-inner.col-full {
        width: 100%;
        max-width: 1024px;
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: border-box;
    }
	
	/* Hide <br> on desktop */
	.fdnc-mobile-br {
    display: none;
}
}
/* -------------------------------------------------------------------------
   6b-3: RMC design filter row.
   ★ STYLED Sept 16, 2026 FROM DAMON'S SHOP/RMC MOCKUP (the step 2 filter row
   image). Pixel sizes are the mockup's, scaled by the step label: its cap
   height measures 20px in the mockup against ~15px for our 24px Carlito label,
   so x0.75 throughout.
   ★ RE-MEASURED Sept 16, 2026 FROM THE TWO-PART FILTER MOCKUP, which draws
   smaller boxes (28px there, 38px in the first) so that seven boxes, reset and
   the divider fit on the label's line: box 22px, label text 14px, box-to-text
   9px, item spacing 20px, divider 33px. At the first mockup's sizes the row is
   ~90px too wide for the shop column and wraps under the label.
   - SAME LINE as "2. Choose a Product:" - inline-flex, not a block under it.
   - NO BACKGROUND. Storefront gives every <fieldset> a tinted background and
     padding; that tint is the lighter band the old row sat in.
   - Large empty squares with a navy border (#172C51, sampled from the mockup),
     bold labels, and a vertical divider between the pool side (All / Our Faves /
     Best-Sellers) and the design side.
   - Sept 16, 2026, the two-part filter: "reset" first, no visible legend.
   DESKTOP ONLY for now (Damon, Sept 15). The mobile pass owns narrow widths.
   ------------------------------------------------------------------------- */

.fdnc-rmc-filter {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	vertical-align: middle;
	/* 18px between the row's PARTS - reset, the pool side, the divider and the
	   design side: the mockup's 20px tightened 10% (Damon, Sept 16, 2026) so the
	   row fits on the step 2 heading's line. The gap between OPTIONS inside a
	   side is the group rule below, and is tighter still. */
	gap: 18px;
	border: 0;
	/* 16px between the step 2 heading and "reset" (Damon, Sept 16, 2026; it was
	   20px, then 0). ⚠ THIS MARGIN IS THE ONLY SPACE THERE: the template emits the
	   heading and this row with no word space between them (a PHP closing tag
	   swallows the line break), so at 0 "reset" touches the colon. */
	margin: 0 0 0 16px;
	padding: 0;
	background: none;
	font-family: Carlito, Calibri, sans-serif;
	font-size: 14px;
	color: #1a1a1a;
}

.fdnc-rmc-filter-legend {
	/* ★ VISUALLY HIDDEN since the two-part filter (Sept 16, 2026): the mockup
	   dropped the visible "Filter by design:" label, but the fieldset still needs
	   a name for screen readers. Own rule rather than Storefront's
	   .screen-reader-text, so the row does not depend on the parent theme. */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	/* QA item 1 (Sept 16, 2026): Storefront paints a white box behind every
	   <legend>. Harmless while hidden, kept so un-hiding it never brings it back. */
	background: none;
}

/* The two sides of the two-part filter (pool | designs). Each is its own
   inline-flex run with the row's spacing, so the row's gap separates reset, the
   pool side, the divider and the design side. */
.fdnc-rmc-filter-group {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	/* Between one option's label and the next option's box: 18px less 20%
	   (Damon, Sept 16, 2026). The radio side is 3px tighter again - see below. */
	gap: 14.4px;
}

/* The design side's radios: 3px less between each label and the next radio
   (Damon, Sept 16, 2026), so 11.4px. */
.fdnc-rmc-filter-group[data-fdnc-group="designs"] {
	gap: 11.4px;
}

/* QA item 3 (Sept 16, 2026): "reset", a <button> drawn as a bold underlined
   link per the mockup. Every property Storefront sets on button, :hover and
   :focus is reset here; the selector names the element so it out-ranks
   Storefront's button rules without !important. */
.fdnc-rmc-filter button.fdnc-rmc-filter-reset,
.fdnc-rmc-filter button.fdnc-rmc-filter-reset:hover,
.fdnc-rmc-filter button.fdnc-rmc-filter-reset:focus,
.fdnc-rmc-filter button.fdnc-rmc-filter-reset:active {
	-webkit-appearance: none;
	appearance: none;
	/* The margin after reset tunes the room before the first box. It is
	   IN THIS RULE, on every state, on purpose: it used to be a separate rule for
	   the plain state only, and :hover (higher specificity) reset it to 0, so the
	   boxes jumped 7px left on hover (QA, Sept 16, 2026). */
	/* ★ NEGATIVE ON PURPOSE (Damon, Sept 16, 2026): reset-to-All was 25px (the
	   row's 18px gap + 7px here), cut 20% and then 20% again = 16px, so this
	   takes 2px back out of the row's gap. */
	margin: 0 -2px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	color: #1a1a1a;
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}


/* Disabled while the row is at the category's default (Sept 16, 2026). Same
   treatment as the design tool's CLEAR button when it has nothing to clear -
   natively disabled, faded to 0.225, plain cursor - so the site has one look
   for "this control has nothing to do right now". Listed with :hover so hovering
   a disabled reset does not bring it back to full strength.
   ★ THE !important IS LOAD-BEARING (Oct 2, 2026). Storefront's own stylesheet
   says "button:disabled { opacity: .5 !important }", and !important beats any
   plain rule however specific. So from Sept 16 until this was found, the 0.225
   here never applied and the button showed at HALF strength - Damon, desktop
   QA: "let's fade 'view all' more as well. It still looks like it's
   clickable." Two !important rules are settled by which is more specific,
   and this one is. ⚠ Take the !important off and the button goes back to 50%
   with no error anywhere.
   Phones do not use this fade: on the navy band css/mobile-shop.css states a
   color outright instead (its rule carries the step's id, so it wins). */
.fdnc-rmc-filter button.fdnc-rmc-filter-reset:disabled,
.fdnc-rmc-filter button.fdnc-rmc-filter-reset:disabled:hover {
	opacity: 0.225 !important;
	cursor: default;
}

.fdnc-rmc-filter button.fdnc-rmc-filter-reset:focus:not(:focus-visible) {
	outline: none;
}

.fdnc-rmc-filter button.fdnc-rmc-filter-reset:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

.fdnc-rmc-filter-option {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	cursor: pointer;
}

/* The square. appearance:none so it can be drawn at the mockup's size in every
   browser; the tick is a background SVG rather than a ::before, because
   pseudo-elements on <input> are not reliable across engines.
   The selector names the input element so it out-ranks Storefront's
   input[type="checkbox"] rules without !important. */
.fdnc-rmc-filter input.fdnc-rmc-filter-input {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid #172C51;
	border-radius: 2px;
	background: #ffffff center / 16px 16px no-repeat;
	cursor: pointer;
}

.fdnc-rmc-filter input.fdnc-rmc-filter-input:checked {
	background-color: #172C51;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.fdnc-rmc-filter input.fdnc-rmc-filter-input:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

/* ★ THE DESIGN SIDE'S RADIO BUTTONS (Damon, Sept 16, 2026 - his mockup of the
   row). Same 22px, same 2px #172C51 ring as the checkboxes, but round, and
   selected shows a navy DOT on white rather than a filled square with a tick.
   These come after the checkbox rules and carry [type="radio"], so they win
   at every state, including :checked. */
.fdnc-rmc-filter input.fdnc-rmc-filter-input[type="radio"] {
	border-radius: 50%;
}

.fdnc-rmc-filter input.fdnc-rmc-filter-input[type="radio"]:checked {
	background-color: #ffffff;
	background-image: radial-gradient(circle, #172C51 0 5px, transparent 5.5px);
	background-size: auto;
}

.fdnc-rmc-filter-divider {
	display: block;
	width: 2px;
	height: 33px;
	/* 3px less space on each side of the divider (Damon, Sept 16, 2026): the
	   row's 18px gap less 3px = 15px either side. */
	margin: 0 -3px;
	background: #1a1a1a;
}

/* ★ THE FILTER ROW IS CENTERED IN THE SPACE BESIDE THE HEADING (Damon, Sept 16,
   2026 - a trial; he may roll it back). Ready-Made step 2 becomes a wrapping flex
   row: heading | spacer | filter row | spacer | product grid (on its own line).
   The two spacers are pseudo-elements that share the spare room equally, so the
   filter row sits centered between the heading and the box's right edge.
   ★ WHY SPACERS AND NOT justify-content ON THE ROW: the row needs 16px after the
   heading at minimum. As a margin, that 16px also shifts the centered row 8px
   right on every wide window. As the LEFT spacer's min-width it only applies when
   space is tight - above that, both spacers are equal. The spacers start at zero
   width, so at 1024px the row fits on the heading's line exactly as before.
   TO ROLL BACK: delete this block, everything down to the [hidden] guard. */
#fdnc-rmc-step2.fdnc-step-visible {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#fdnc-rmc-step2::before,
#fdnc-rmc-step2::after {
	content: "";
	flex: 1 1 0;
	min-width: 0;
}

#fdnc-rmc-step2 > .fdnc-step-label { order: 1; flex: 0 0 auto; }
#fdnc-rmc-step2::before            { order: 2; min-width: 16px; }
#fdnc-rmc-step2 > .fdnc-rmc-filter  { order: 3; flex: 0 0 auto; margin-left: 0; }
#fdnc-rmc-step2::after             { order: 4; }
/* A131 (Sep 30, 2026): the grid now sits inside its phone carousel wrapper, so
   the wrapper takes the grid's place in this row. */
#fdnc-rmc-step2 > #fdnc-rmc-product-carousel { order: 5; flex: 0 0 100%; }

/* ★ THE [hidden] GUARD, NOT OPTIONAL. Author CSS beats the user-agent
   stylesheet regardless of specificity, so any element given display:flex or
   display:grid IGNORES the hidden attribute unless we say otherwise - and it
   also stays in the accessibility tree, which is worse than the visual bug.
   This codebase has been bitten by exactly this three times
   (.fdnc-dyo-field, .fdnc-lightbox-actions, #fdnc-product-grid). All four
   selectors below are load-bearing: the row, each group and each option are
   display:inline-flex and the divider is display:block, so EACH needs its own
   guard. */
.fdnc-rmc-filter[hidden],
.fdnc-rmc-filter-group[hidden],
.fdnc-rmc-filter-option[hidden],
.fdnc-rmc-filter-divider[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
   8-3  DESIGN THUMBNAIL ON CART LINE ITEMS

   Lives here rather than in design-tool.css because that stylesheet is only
   enqueued on the Shop and product pages - the cart is neither.

   The image replaces Storefront's product thumbnail via the
   woocommerce_cart_item_thumbnail filter.
   ★ IT DELIBERATELY OVERRIDES THE THEME'S ~59px SLOT. A generic product photo
   reads fine that small; a design the customer is checking before paying does
   not. 150px is Damon's call (Aug 25) and the composite is generated at 300px
   (config 'cartThumb'.px) so this stays a 2x source. CHANGE BOTH TOGETHER.
   ★★ SPECIFICITY: a bare .fdnc-cart-thumb LOSES. Storefront ships
   `.woocommerce-cart table.cart img { width: 58px }` (0,2,2), which beats a
   single class (0,1,0) - so the rule applied cleanly and did nothing, with
   DevTools reporting 'Rendered size 59x59, Intrinsic size 200x200'. Same family
   as the .site-footer link trap in KEY LEARNINGS. Out-specified below AND given
   !important, because this class exists on no markup but ours and the display
   points (cart, checkout summary, order received, My Account) each carry their
   own theme rules we would otherwise have to enumerate.
   ★ APPLIES TO EVERY CART THUMBNAIL, ours and WooCommerce's own (Damon,
   Aug 26). A DYO design at 150px beside an RMC product photo at 59px reads as
   a bug rather than a distinction. RMC images come from the woocommerce_thumbnail
   size (300px), so they have the resolution to carry 150px without blurring.
--------------------------------------------------------------------------- */
img.fdnc-cart-thumb,
.woocommerce table.cart img.fdnc-cart-thumb,
.woocommerce-cart table.cart img.fdnc-cart-thumb,
.woocommerce table.shop_table img.fdnc-cart-thumb,
.woocommerce-cart table.cart td.product-thumbnail img,
.woocommerce table.cart td.product-thumbnail img {
    width: 150px !important;
    max-width: none !important;
    height: auto !important;
    display: block;
}

/* 8-3b: side toggle under the cart thumbnail.

   ★★ THE [hidden] GUARD IS NOT OPTIONAL. .fdnc-cart-thumb is display:block, and
   AUTHOR CSS BEATS THE USER-AGENT STYLESHEET REGARDLESS OF SPECIFICITY - so a
   block-level element ignores the hidden attribute entirely unless told not to.
   Without this rule every side renders at once and the toggle appears to do
   nothing. That trap has now bitten this project four times; see KEY LEARNINGS.
*/
img.fdnc-cart-thumb[hidden] {
    display: none !important;
}

.fdnc-cart-thumb-wrap {
    display: inline-block;
}

.fdnc-cart-thumb-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 6px;
}

.fdnc-cart-thumb-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid #262626;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.fdnc-cart-thumb-dot.is-active {
    background: #262626;
}

/* Pointer-click ring only - keyboard :focus-visible rings must survive. Same
   pattern the design tool uses on every converted control (DO-NOT-REGRESS 1). */
.fdnc-cart-thumb-dot:focus:not(:focus-visible) {
    outline: none;
}

/* 8-3c: cart line summary + the admin-only debug disclosure.
   The <details> is dev instrumentation and never renders for a customer -
   fdnc_dev_cart_debug_block() gates it on manage_options. Styled to sit quietly
   beside the product name rather than compete with it. */
.fdnc-cart-item-name {
    font-weight: 700;
}

.fdnc-cart-debug {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.8em;
    font-weight: 400;
    vertical-align: middle;
}

.fdnc-cart-debug > summary {
    cursor: pointer;
    color: #666;
    text-decoration: underline;
}

.fdnc-cart-debug > code {
    display: block;
    margin-top: 6px;
    padding: 6px;
    background: #f6f7f7;
    font-size: 0.9em;
    word-break: break-all;
    white-space: pre-wrap;
}

/* ---------------------------------------------------------------------------
   8-3c  CART LINE ITEM DATA LAYOUT

   WooCommerce renders item data as <dl class="variation"> with a <dt> per label
   and a <dd> per value, and it wraps each value in a <p> via wpautop. Left alone
   that stacks every label above its value, two lines per row. This puts each row
   on ONE line with a bold label, per Damon's layout mock (Aug 26).

   ★ THE COLON IS WooCommerce's, not ours - wc_get_formatted_cart_item_data()
   appends it to every <dt>. Do not add one to the label strings or you get two.
--------------------------------------------------------------------------- */
.woocommerce-cart td.product-name dl.variation,
.woocommerce td.product-name dl.variation {
    margin: 8px 0 0;
}

.woocommerce-cart td.product-name dl.variation dt,
.woocommerce td.product-name dl.variation dt {
    display: inline;
    float: none;
    clear: none;
    margin: 0 4px 0 0;
    padding: 0;
    font-weight: 700;
}

.woocommerce-cart td.product-name dl.variation dd,
.woocommerce td.product-name dl.variation dd {
    display: inline;
    margin: 0;
    padding: 0;
}

/* wpautop wraps every value in a <p>; inline it or each value starts a new line. */
.woocommerce-cart td.product-name dl.variation dd p,
.woocommerce td.product-name dl.variation dd p {
    display: inline;
    margin: 0;
}

/* One row per line: a block pseudo-element after each value forces the break
   without needing a wrapper element we do not control. */
.woocommerce-cart td.product-name dl.variation dd::after,
.woocommerce td.product-name dl.variation dd::after {
    content: "";
    display: block;
}

/* Rule between the DESIGN rows and the MONEY rows.

   ★★ COUPLED TO THE LABEL TEXT. WooCommerce builds these classes with
   sanitize_html_class( $label ), which strips the space: 'Base price' becomes
   'variation-Baseprice'. RENAMING THAT ROW SILENTLY REMOVES THIS RULE - change
   the label and this selector together, or the separator just disappears with
   nothing failing. */
.woocommerce-cart td.product-name dl.variation dt.variation-Baseprice::before,
.woocommerce td.product-name dl.variation dt.variation-Baseprice::before {
    content: "";
    display: block;
    border-top: 1px solid #ddd;
    margin: 12px 0 10px;
}

/* =====================================================================
   ★★ FDNC-FOCUS-RING-RULE - THE STICKY FOCUS BOX ON RADIOS AND CHECKBOXES,
   FIXED ONCE FOR THE WHOLE SITE. (Damon, Sept 5, 2026: "We've had to do this
   on every radio button since we started the project. Is there a way to
   capture this so you do it automatically?")

   THE CAUSE, so nobody re-derives it: Storefront ships
   `a:focus, input:focus, textarea:focus, button:focus { outline: 2px solid #7f54b3 }`.
   A radio KEEPS FOCUS after it is clicked, so that purple box stays on screen
   until the customer clicks somewhere else - which reads as a stuck control
   rather than as feedback. It had been patched per-element at least twice
   (.fdnc-category-option and .fdnc-dyo-side-toggle) and was about to be patched
   a third time on the nonprofit page.

   :focus:not(:focus-visible) removes it for POINTER focus ONLY. A keyboard
   user's ring survives untouched, and that half must survive - it is how
   someone tabbing through the form knows where they are.

   SPECIFICITY, because it is the thing that makes this work: this selector is
   (0,3,1) against Storefront's (0,1,1), so it wins without !important.

   ⚠ THIS IS ASSERTED BY check-docs.py (check 13). If the marker string
   FDNC-FOCUS-RING-RULE or the selectors below are removed, the session-start
   assertions fail loudly rather than the ring quietly coming back.

   ★ NOT EXTENDED TO BUTTONS AND LINKS HERE, DELIBERATELY. Those already carry
   per-element overrides on signed-off screens, and folding them into one rule
   is a refactor with a visual-regression surface. Parked in backlog.txt.
   ===================================================================== */

input[type="radio"]:focus:not(:focus-visible),
input[type="checkbox"]:focus:not(:focus-visible) {
    outline: none;
}

/* =====================================================================
   ★★ FDNC-CLICK-RING-OPT-IN - THE SAME FIX FOR LINKS AND BUTTONS, BUT OPT-IN.
   (Damon, Sept 16, 2026, after a partner link on Our Story kept Storefront's
   purple box when he came back from the tab it opened: "This is something we
   have to do every time a new button or link is added.")

   WHY OPT-IN RATHER THAN SITE-WIDE: a site-wide selector would reach every
   existing link and button at once, on screens already fixed per element and
   signed off. Damon chose to apply it going forward only. So a page switches it
   on by carrying the class fdnc-no-click-ring on its <main>, and existing pages
   are untouched.

   What it does: removes the ring a MOUSE click leaves behind. The keyboard ring
   stays (:focus-visible), and it must.

   ⚠ ASSERTED BY check-docs.py (check 16): every page template (page-*.php) must
   carry the class, apart from the list of pages that predate this rule. A new
   page that forgets it fails the session-start check.
   ===================================================================== */

.fdnc-no-click-ring a:focus:not(:focus-visible),
.fdnc-no-click-ring button:focus:not(:focus-visible) {
    outline: none;
}

/* =====================================================================
   ★ TIGHTEN THE RUN-OUT ABOVE THE FOOTER THROUGH THE PURCHASE FLOW.
   (Damon, Sept 5, 2026, on the cart and the nonprofit page.)

   THE SPACE IS NOT THE FOOTER'S AND THAT IS THE WHOLE POINT: Storefront puts
   margin-bottom: 2.617924em on BOTH .site-main AND .content-area - about 42px
   each, roughly 84px stacked - and the nonprofit page added 3em of its own
   padding on top. With the GET CONNECTED block filling that area nobody noticed;
   with it removed the page simply stops and then keeps going for another
   130-odd pixels.

   MEASURED, NOT NUDGED. Before: about 132px on the nonprofit page and about
   114px on the cart, footer padding excluded. After: 16px + 16px on the
   nonprofit page and 16px on the cart, plus the footer's own 24px top.

   ★ SCOPED TO THE BODY CLASS SO NOTHING ELSE MOVES. Every other page keeps
   Storefront's spacing.
   ★★ AND THE CLASS IS NOT THE SAME QUESTION AS THE PROMO BLOCK, though it was
   until Sept 5, 2026. ORDER-RECEIVED KEEPS THE BLOCK AND STILL WANTS THE TIGHTER
   SPACING, which is why fdnc_tight_footer_spacing() exists separately from
   fdnc_show_footer_promo(). Do not re-merge them.
   ===================================================================== */

body.fdnc-tight-footer .site-main,
body.fdnc-tight-footer .content-area {
    margin-bottom: 1em;
}

/* ★★ AND ON THE CART THE TWO RULES ABOVE DID NOTHING, BECAUSE A BIGGER MARGIN
   COLLAPSED OUT FROM UNDERNEATH THEM. This one is what actually closes it.

   Storefront sets `.hentry { margin: 0 0 4.235801032em }` - 67.77px - on the
   ARTICLE inside the page. That article has no padding or border between it and
   .site-main, .content-area or .col-full, so its bottom margin COLLAPSES
   THROUGH all three and becomes the outer margin. Collapsed margins take the
   LARGEST of the set, so 67.77px beat the 16px set above and the pair read as
   inert.

   ★ WHY IT TOOK FOUR MEASUREMENTS TO FIND, and the part worth keeping:
   getBoundingClientRect() DOES NOT INCLUDE MARGINS, and getComputedStyle
   reports the SPECIFIED margin, not the collapsed one. So every probe showed
   .col-full about 52px taller than its children with nothing in between -
   space that appeared to belong to no element at all. It belonged to a margin,
   and margins are invisible to both instruments.
   ★ THE ARITHMETIC IS THE PROOF: article 875.16 + 67.77 = 942.93, against a
   measured .col-full of 942.92.

   The nonprofit page never had this, which is why it closed on the first try:
   page-nonprofit.php renders its own markup and never produces a .hentry. */
body.fdnc-tight-footer .hentry {
    margin-bottom: 1em;
}

body.fdnc-tight-footer .fdnc-np {
    padding-bottom: 1em;
}

body.fdnc-tight-footer .fdnc-footer {
    padding-top: 24px;
}

/* ============================================================
   A123 (Sep 26, 2026) - PHONE SHOP PIECES, OFF AT DESKTOP WIDTH
   ============================================================
   The step 2 expand toggle and the carousel arrows/dots exist in the markup at
   every width; css/mobile-shop.css turns them on below 1024px. The carousel
   wrapper is a plain full-width box here so the desktop grid lays out exactly as
   it did before the wrapper existed (the grid was itself the full-width item). */
#fdnc-step2-toggle {
    display: none;
}

#fdnc-product-carousel,
#fdnc-rmc-product-carousel {
    width: 100%;
}

/* A131 (Sep 30, 2026): Ready-Made's "open list view" and the list view itself
   are phone-only (css/mobile-shop.css). js/shop.js un-hides the link whenever
   there are products, so desktop needs its own "never". */
#fdnc-rmc-listview-open,
#fdnc-rmc-listview {
    display: none;
}

#fdnc-step2 .fdnc-step2-price {
    display: none;
}

.fdnc-carousel-arrow,
.fdnc-carousel-dots {
    display: none;
}

/* A123 QA 37 (Sep 26, 2026), desktop AND phones: every other cart item sits on
   a clearly darker gray. Storefront's own striping (#fbfbfb against #fdfdfd) was
   close to invisible - Damon could barely tell the cap's row from the tee's. */
.woocommerce-cart table.shop_table tbody tr.cart_item:nth-child(2n) td {
    background-color: #ececec;
}

/* ============================================================
   STOREFRONT'S ARROWS, WRITTEN AS PLAIN-TEXT CODES (Oct 29, 2026)
   The "Proceed to checkout" arrow showed as three junk characters ("Proceed to checkout" + junk)
   on stage twice (Oct 20, Oct 29 - issues.txt). Storefront's icons.css stores each icon as the
   character itself and declares no encoding, so a browser that reads that file with the wrong
   one turns the arrow into junk. The same arrows here as escape codes (plain ASCII), which read
   the same in any encoding. "html body" outranks Storefront's own rule wherever the files load.
   The server's half of the fix - labeling stylesheets as UTF-8 - is separate (backlog).
   ============================================================ */
html body .wc-forward::after,
html body .woocommerce-Button--next::after,
html body .site-main nav.navigation .nav-next a::after {
    content: "\f30b";
}
html body .woocommerce-Button--previous::before,
html body .site-main nav.navigation .nav-previous a::before {
    content: "\f30a";
}

/* The saved-cart message's "current colors" link (inc/saved-cart.php, A200; Damon's QA pass, Oct 29,
   2026): underlined, like the coupon box's link - Storefront's notices color their links white
   but do not underline them. */
.woocommerce-info a.fdnc-sc-link,
.woocommerce-message a.fdnc-sc-link {
    text-decoration: underline;
}