/* * Wishlist pages — WooCommerce Wishlists 2.3.23, restyled in the redesign's system. * * Mitz, 2026-09-12: "There's no figma design on that page but update it and make * the styling like colors, font etc is based on figma designs provided." * * So nothing here is measured off a frame; every value is borrowed from a frame * that exists. Tokens are the PDP/checkout palette (Color 1–8), type is the * three faces of RULE 6, the button is the 2026-08-26 spec (tan fill, Color 7 * label, Inter Semi Bold), fields are the checkout's (48 tall, 1px Color 6 line * on Color 7), dividers are Color 6, panels Color 8 — the order summary's. * * Markup, read off the page (plugin templates, untouched): * * main#main.site-main * article.page * header.entry-header > h1.entry-title "Manage List" / "Wishlists" * div.entry-content * div#wl-wrapper.woocommerce[.product] * div.woocommerce-message … notices, one or two * div.wl-intro > h2.entry-title, p > a.wlconfirm * div.wl-tab-wrap.woocommerce-tabs * ul.wl-tabs > li(.active) > a * div.wl-panel#tab-wl-items > form.wl-form * div.wl-row > table.wl-actions-table (select.wl-sel + button.wl-but) * table.wl-table.shop_table (thead th, tbody tr.cart_table_item) * div.wl-panel#tab-wl-settings > div.wl-form > form (p.form-row …) * — My Lists: div.wl-row > a.wl-create-new, form > table.wl-table.wl-manage * * ⚠ Scoped with `:has(#wl-wrapper)` on the page wrappers rather than a body * class: this theme's never calls body_class(), so there is no page * class to hang on (the same finding as register 496). The sheet only loads * on the plugin's pages anyway (inc/wishlist-redesign.php), so the scope is * belt and braces against the generic page template's other uses. * * ⚠ `!important` only where the plugin's own sheet or the theme's `style.css` * is flagged — noted at each use. Everything else wins on order (this sheet * is enqueued at priority 100) or specificity. */ :root { --wl-c1: #a4866c; /* Color 1 — headings */ --wl-c3: #c9a98a; /* Color 3 — buttons, links, active tab */ --wl-c4: #f5f2ee; /* Color 4 — body ink */ --wl-c5: #d1d0cf; /* Color 5 — secondary ink, labels */ --wl-c6: #49423f; /* Color 6 — dividers, field lines, hover fill */ --wl-c7: #1f1f1f; /* Color 7 — page, field ground, button label */ --wl-c8: #322b27; /* Color 8 — panels */ --wl-white: #ffffff; --wl-font-heading: "NorthwestRegular", Georgia, serif; --wl-font-textured: "NorthwestTextured", "NorthwestRegular", Georgia, serif; --wl-font-body: "InterLocal", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --wl-gutter: 64px; --wl-content: 1384px; } /* ── Page shell ───────────────────────────────────────────────────────────── * The page is the redesign's dark ground with the 1384 grid in a 64 gutter — * the PDP's geometry (Display/Screen Width 1512 − 2 × 64). * ------------------------------------------------------------------------- */ main.site-main:has(#wl-wrapper) { box-sizing: border-box; padding: 48px var(--wl-gutter) 96px; background-color: var(--wl-c7); color: var(--wl-c4); font-family: var(--wl-font-body); } main.site-main:has(#wl-wrapper) article.page, main.site-main:has(#wl-wrapper) .entry-header, main.site-main:has(#wl-wrapper) .entry-content { width: 100%; max-width: var(--wl-content); margin: 0 auto; padding: 0; background: transparent; border: 0; } /* Page title: H3/Textured as the category hero uses it — 36/40, Color 1. */ main.site-main:has(#wl-wrapper) .entry-header { margin-bottom: 32px; } main.site-main:has(#wl-wrapper) h1.entry-title { margin: 0; color: var(--wl-c1); font-family: var(--wl-font-textured); font-size: 36px; font-weight: 400; line-height: 40px; letter-spacing: 0; text-transform: uppercase; } #wl-wrapper { display: flex; flex-direction: column; gap: 32px; color: var(--wl-c4); font-family: var(--wl-font-body); font-size: 16px; line-height: 24px; } #wl-wrapper p { margin: 0; color: var(--wl-c4); font-family: var(--wl-font-body); } /* ── Notices ──────────────────────────────────────────────────────────────── * WooCommerce's message boxes, in the order summary's panel colours: Color 8 * ground, Color 6 line, Body/Regular in Color 4, links in Color 3. The two * boxes the edit page prints ("temporary list", "added to your wishlist") sit * side by side and wrap on narrow widths. The plugin floats them; flex here. * ------------------------------------------------------------------------- */ #wl-wrapper .woocommerce-message, #wl-wrapper .woocommerce-info, #wl-wrapper .woocommerce-error { position: relative; box-sizing: border-box; /* * ⚠ NO `flex: 1 1 320px` HERE. #wl-wrapper is a COLUMN flex container, so a * flex-basis on a notice is a HEIGHT — the Create a List page's single * notice ("1 Items ready to move to a new list") rendered 300px tall (Mitz, * 2026-09-12: "adjust height/spacing"). The two-notice pair on Manage List * is laid out by the grid rule below and needs no basis of its own. */ flex: none; float: none !important; /* plugin: float:left on the pair */ width: auto !important; margin: 0 !important; padding: 20px 24px !important; border: 1px solid var(--wl-c6) !important; border-radius: 0; background-color: var(--wl-c8) !important; color: var(--wl-c4) !important; font-family: var(--wl-font-body); font-size: 16px; line-height: 24px; } /* WooCommerce's tick / icon glyph before the text. */ #wl-wrapper .woocommerce-message::before, #wl-wrapper .woocommerce-info::before, #wl-wrapper .woocommerce-error::before { content: none !important; display: none !important; } #wl-wrapper .woocommerce-message a:not(.button), #wl-wrapper .woocommerce-info a:not(.button), #wl-wrapper .woocommerce-error a:not(.button) { color: var(--wl-c3); text-decoration: underline; text-underline-offset: 2px; } /* Two notices in a row. */ #wl-wrapper > .woocommerce-message + .woocommerce-message { margin-top: 0 !important; } #wl-wrapper:has(> .woocommerce-message + .woocommerce-message) { /* the pair becomes one wrapping row; everything after stays stacked */ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } #wl-wrapper:has(> .woocommerce-message + .woocommerce-message) > :not(.woocommerce-message) { grid-column: 1 / -1; } /* The notice's "Continue Shopping →" is a secondary action: outline, Color 3, * on its own line above the sentence rather than floated into it. */ #wl-wrapper .woocommerce-message .button { display: flex; width: fit-content; float: none !important; margin: 0 0 12px !important; } /* ── List intro: name + delete ─────────────────────────────────────────────── */ #wl-wrapper .wl-intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 0 16px; border-bottom: 1px solid var(--wl-c6); } #wl-wrapper .wl-intro h2.entry-title { margin: 0; color: var(--wl-c4); font-family: var(--wl-font-heading); font-size: 24px; font-weight: 400; line-height: 28px; letter-spacing: 0; text-transform: uppercase; } #wl-wrapper .wl-intro .wl-intro-desc:empty { display: none; } #wl-wrapper .wl-intro p { margin: 0 0 0 auto; } /* Quiet, destructive: Links/Regular 14 in Color 5, underlined. */ #wl-wrapper .wl-intro a.wlconfirm, #wl-wrapper .row-actions a { color: var(--wl-c5); font-family: var(--wl-font-body); font-size: 14px; font-weight: 400; line-height: 26px; text-decoration: underline; text-underline-offset: 2px; } #wl-wrapper .wl-intro a.wlconfirm:hover, #wl-wrapper .row-actions a:hover { color: var(--wl-c3); } /* ── Tabs ─────────────────────────────────────────────────────────────────── * The category page's pill row is the nearest thing the design draws: text * links on a single rule, the current one in Color 3 with its own 2px line. * ------------------------------------------------------------------------- */ #wl-wrapper .wl-tab-wrap { float: none !important; width: 100% !important; margin: 0 !important; } #wl-wrapper ul.wl-tabs { display: flex; gap: 32px; margin: 0 0 24px !important; padding: 0 !important; list-style: none; border: 0 !important; border-bottom: 1px solid var(--wl-c6) !important; background: transparent !important; overflow: visible !important; } #wl-wrapper ul.wl-tabs::before, #wl-wrapper ul.wl-tabs::after { content: none !important; display: none !important; } #wl-wrapper ul.wl-tabs li { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #wl-wrapper ul.wl-tabs li::before, #wl-wrapper ul.wl-tabs li::after { content: none !important; display: none !important; } #wl-wrapper ul.wl-tabs li a { display: block; margin: 0 0 -1px; padding: 12px 0 !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; /* WooCommerce's tabs paint the active link white; the row is text on a rule. */ background: transparent !important; box-shadow: none !important; color: var(--wl-c5) !important; font-family: var(--wl-font-body); font-size: 16px; font-weight: 600; line-height: 24px; text-decoration: none; text-shadow: none !important; } #wl-wrapper ul.wl-tabs li a:hover, #wl-wrapper ul.wl-tabs li.active a { color: var(--wl-c3) !important; } #wl-wrapper ul.wl-tabs li.active a { border-bottom-color: var(--wl-c3) !important; } #wl-wrapper .wl-panel { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* ── Buttons ──────────────────────────────────────────────────────────────── * The 2026-08-26 spec: tan fill, Color 7 label, Inter Semi Bold 16, square. * 48 tall here rather than the panel's 54 — these are table controls, and 48 * is the field height they sit beside. Hover is the checkout's: Color 6 fill, * white label. * * ⚠ `!important` throughout: style.css styles `.button` and `input.button` * with flagged colours, and the plugin's `.wl-but` carries its own purple. * ------------------------------------------------------------------------- */ #wl-wrapper .button, #wl-wrapper button.button, #wl-wrapper input.button, #wl-wrapper .wl-but, #wl-wrapper .wl-add-all, #wl-wrapper .wishlist-add-to-cart-button, #wl-wrapper .wl-create-new { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; margin: 0; padding: 0 24px !important; border: 1px solid var(--wl-c3) !important; border-radius: 0 !important; background: var(--wl-c3) !important; color: var(--wl-c7) !important; font-family: var(--wl-font-body) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 24px !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; } #wl-wrapper .button:hover, #wl-wrapper button.button:hover, #wl-wrapper input.button:hover, #wl-wrapper .wl-but:hover, #wl-wrapper .wl-add-all:hover, #wl-wrapper .wishlist-add-to-cart-button:hover, #wl-wrapper .wl-create-new:hover, #wl-wrapper .button:focus-visible, #wl-wrapper input.button:focus-visible { border-color: var(--wl-c6) !important; background: var(--wl-c6) !important; color: var(--wl-white) !important; } /* Secondary: the notice's Continue Shopping and the small "Apply Action". */ #wl-wrapper .woocommerce-message .button, #wl-wrapper button.wl-but.small { background: transparent !important; color: var(--wl-c3) !important; } #wl-wrapper .woocommerce-message .button:hover, #wl-wrapper button.wl-but.small:hover { background: var(--wl-c3) !important; color: var(--wl-c7) !important; border-color: var(--wl-c3) !important; } /* ── Fields ───────────────────────────────────────────────────────────────── * The checkout's: 48 tall, 12px padding, Color 7 ground, 1px Color 6 line, * Links/Regular ink in Color 4, placeholder #969696. Focus: Color 3 line. * ------------------------------------------------------------------------- */ #wl-wrapper input[type="text"], #wl-wrapper input[type="email"], #wl-wrapper input.input-text, #wl-wrapper input.qty, #wl-wrapper select, #wl-wrapper textarea { box-sizing: border-box; min-height: 48px; margin: 0; padding: 0 12px; border: 1px solid var(--wl-c6) !important; border-radius: 0 !important; background-color: var(--wl-c7) !important; color: var(--wl-c4) !important; font-family: var(--wl-font-body); font-size: 14px; font-weight: 400; line-height: 26px; box-shadow: none !important; outline: none; } #wl-wrapper input[type="text"]:focus, #wl-wrapper input.input-text:focus, #wl-wrapper input.qty:focus, #wl-wrapper select:focus, #wl-wrapper textarea:focus { border-color: var(--wl-c3) !important; } #wl-wrapper ::placeholder { color: #969696; opacity: 1; } #wl-wrapper textarea { min-height: 120px; padding: 12px; resize: vertical; } /* Selects carry the checkout's chevron; assets/checkout/ is tracked. */ #wl-wrapper select { padding-right: 40px; appearance: none; -webkit-appearance: none; background-image: url("../checkout/dropdown-icon.png") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 18px 9px !important; cursor: pointer; } #wl-wrapper input[type="checkbox"], #wl-wrapper input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--wl-c3); cursor: pointer; } /* Quantity: the checkout's stepper box, 72 wide, centred figure. */ #wl-wrapper .quantity { margin: 0; } /* * ⚠ The Qty column rendered EMPTY: `div.quantity` computed `display: none` * inside the list table (measured; the input itself was inline-block, 100% * wide, of a hidden parent). Something site-wide hides `.quantity` outside the * product form — the theme's own stepper markup replaces it there — and this * table is not that form. Shown again here, flagged because whatever hides it * is. */ #wl-wrapper table.wl-table td.product-quantity .quantity { display: inline-block !important; } #wl-wrapper .quantity input.qty { width: 72px; text-align: center; } /* ── Actions row (select + Apply) ───────────────────────────────────────────── */ /* 32 between the actions row and the table's head, and again between the table * and the row below it (Mitz, 2026-09-12: "add space between"). */ #wl-wrapper .wl-row { /* * ⚠ `flow-root`, AND THE INNER TABLE UN-FLOATED. The plugin floats * `.wl-actions-table` left, so this row measured 0px tall — a float is not * contained by its parent — and any margin on it had nothing to hang from: * the list table began exactly where the floated select ended (570 → 618, * the select's own 48). Measured after the first 32px margin changed * nothing visible. With the float gone the row has its height and the 32 * below it is real. */ display: flow-root; float: none !important; width: 100% !important; margin: 0 0 32px !important; padding: 0 !important; } #wl-wrapper table.wl-table + .wl-row { margin-top: 32px !important; margin-bottom: 0 !important; } #wl-wrapper table.wl-actions-table, #wl-wrapper table.wl-actions-table td { width: auto; margin: 0; padding: 0 12px 0 0; border: 0 !important; background: transparent !important; vertical-align: middle; } #wl-wrapper table.wl-actions-table { float: none !important; /* plugin: float:left, margin 5px 0 — see .wl-row */ margin: 0 !important; border-collapse: collapse; } #wl-wrapper select.wl-sel { min-width: 220px; } /* ── The list table ───────────────────────────────────────────────────────── * Column heads are the order summary's labels (Links/Regular 14 in Color 5); * rows divide on Color 6; the product name is Northwest Textured 20 in * Color 1, the price Body/Bold 16 in Color 4 — the order summary's item row. * ------------------------------------------------------------------------- */ #wl-wrapper table.wl-table { width: 100% !important; margin: 0 !important; border: 0 !important; border-collapse: collapse !important; border-radius: 0 !important; background: transparent !important; font-family: var(--wl-font-body); } #wl-wrapper table.wl-table th, #wl-wrapper table.wl-table td { padding: 16px 12px !important; border: 0 !important; border-bottom: 1px solid var(--wl-c6) !important; background: transparent !important; color: var(--wl-c4); font-family: var(--wl-font-body); font-size: 16px; line-height: 24px; text-align: left; vertical-align: middle; } /* Mitz, 2026-09-12: "make the table heading uppercase and weight 700". */ #wl-wrapper table.wl-table th { padding: 0 12px 12px !important; color: var(--wl-c5); font-size: 14px; font-weight: 700; line-height: 26px; letter-spacing: 0.5px; text-transform: uppercase; } #wl-wrapper table.wl-table th:first-child, #wl-wrapper table.wl-table td:first-child { padding-left: 0 !important; } #wl-wrapper table.wl-table th:last-child, #wl-wrapper table.wl-table td:last-child { padding-right: 0 !important; text-align: right; } /* The footer row carries only "Add All to Cart"; no line under it. */ #wl-wrapper table.wl-table tbody tr:last-child td { border-bottom: 0 !important; } #wl-wrapper table.wl-table .check-column { width: 32px; } #wl-wrapper table.wl-table .product-remove { width: 32px; } /* The × is the order summary's Remove: Color 5, Color 3 on hover, no disc. */ #wl-wrapper table.wl-table a.remove { display: inline-flex; align-items: center; justify-content: center; width: 24px !important; height: 24px !important; margin: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--wl-c5) !important; font-family: var(--wl-font-body); font-size: 20px !important; font-weight: 400 !important; line-height: 1 !important; text-decoration: none; } #wl-wrapper table.wl-table a.remove:hover { background: transparent !important; color: var(--wl-c3) !important; } #wl-wrapper table.wl-table .product-thumbnail { width: 96px; } #wl-wrapper table.wl-table .product-thumbnail img { display: block; width: 80px !important; height: 80px !important; max-width: none; margin: 0; padding: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; object-fit: cover; } #wl-wrapper table.wl-table td.product-name a { color: var(--wl-c1); font-family: var(--wl-font-textured); font-size: 20px; font-weight: 400; line-height: normal; text-decoration: none; text-transform: none; } #wl-wrapper table.wl-table td.product-name a:hover { color: var(--wl-c3); } #wl-wrapper table.wl-table td.product-name strong a { font-family: var(--wl-font-heading); } #wl-wrapper table.wl-table p.stock { margin: 4px 0 0 !important; color: var(--wl-c5) !important; font-family: var(--wl-font-body); font-size: 14px; font-weight: 400; line-height: 26px; } #wl-wrapper table.wl-table td.product-price, #wl-wrapper table.wl-table td.product-price .amount { color: var(--wl-c4) !important; font-family: var(--wl-font-body); font-size: 16px; font-weight: 600; line-height: 24px; white-space: nowrap; } #wl-wrapper table.wl-table th.ctr, #wl-wrapper table.wl-table td.product-quantity { text-align: center; } #wl-wrapper table.wl-table td.product-quantity .quantity { display: inline-block; } #wl-wrapper table.wl-table td.product-purchase { text-align: right; white-space: nowrap; } /* My Lists: name column with its small actions, privacy select, date. */ #wl-wrapper .row-actions { display: flex; gap: 16px; margin-top: 4px; } #wl-wrapper .row-actions small { font-size: inherit; } #wl-wrapper .row-actions .edit, #wl-wrapper .row-actions .trash { color: var(--wl-c6); } /* * The row actions live INSIDE td.product-name, so the Northwest rule for the * list's name reached them too — "MANAGE THIS LIST | DELETE" rendered in the * display face. Restated at higher specificity: Links/Regular 14 in Color 5. */ #wl-wrapper table.wl-table td.product-name .row-actions a { color: var(--wl-c5); font-family: var(--wl-font-body); font-size: 14px; font-weight: 400; line-height: 26px; text-decoration: underline; text-underline-offset: 2px; text-transform: none; } #wl-wrapper table.wl-table td.product-name .row-actions a:hover { color: var(--wl-c3); } #wl-wrapper table.wl-table td.actions { text-align: right; } /* ── Settings form ────────────────────────────────────────────────────────── * The checkout's Account step: labels Links/Bold 14/26 in Color 4, 48px * fields, two-up name row, Color 6 rule between groups. * ------------------------------------------------------------------------- */ #wl-wrapper .wl-form form { display: flex; flex-wrap: wrap; gap: 16px 24px; max-width: 720px; } #wl-wrapper .wl-form form > * { flex: 1 1 100%; min-width: 0; } #wl-wrapper .wl-form form > .form-row-first, #wl-wrapper .wl-form form > .form-row-last { flex: 1 1 calc(50% - 12px); float: none !important; width: auto !important; } #wl-wrapper .wl-form form > .wl-clear { display: none; } #wl-wrapper .wl-form form > hr { height: 1px; margin: 8px 0; border: 0; background: var(--wl-c6); } #wl-wrapper .wl-form .form-row { margin: 0 !important; padding: 0 !important; } #wl-wrapper .wl-form label, #wl-wrapper .wl-form .form-row > strong { display: block; margin: 0 0 8px; color: var(--wl-c4); font-family: var(--wl-font-body); font-size: 14px; font-weight: 600; line-height: 26px; } #wl-wrapper .wl-form abbr.required { color: var(--wl-c3); text-decoration: none; border: 0; } #wl-wrapper .wl-form input.input-text, #wl-wrapper .wl-form textarea { width: 100%; } /* Sharing radios: the option rows, radio at 16 with a 12 gap, small copy in Color 5. */ #wl-wrapper table.wl-rad-table, #wl-wrapper table.wl-rad-table td { border: 0 !important; background: transparent !important; padding: 6px 12px 6px 0 !important; vertical-align: top; } #wl-wrapper table.wl-rad-table td:first-child { width: 28px; padding-top: 10px !important; } #wl-wrapper table.wl-rad-table label { margin: 0; font-weight: 600; } #wl-wrapper .wl-small { display: block; color: var(--wl-c5); font-size: 14px; font-weight: 400; line-height: 22px; } /* ── Narrow widths ────────────────────────────────────────────────────────── * The checkout's tiers: 24 gutter to 999, 20 to 600. The list table scrolls * inside its own box below 743 rather than breaking the page's width. * ------------------------------------------------------------------------- */ @media (max-width: 999px) { :root { --wl-gutter: 24px; } main.site-main:has(#wl-wrapper) { padding-top: 32px; padding-bottom: 64px; } main.site-main:has(#wl-wrapper) h1.entry-title { font-size: 30px; line-height: 32px; } } /* ── Tablet and mobile: 999 down ──────────────────────────────────────────── * Each list item becomes a card-like grid instead of a row — the order * summary's item on the checkout's mobile bar is the pattern: thumbnail left, * name beside it, price and quantity on the next line, the action full width * under them. The plugin's own stacking (block cells with `::before` labels * from `data-title`, a stray ":" on every unlabelled cell) is replaced rather * than patched: the cells are grid items with explicit areas, the head row is * gone (each cell reads as what it is), and the remove × sits at the top right. * * ⚠ ONE TIER FROM 999 DOWN, NOT A TABLE ON TABLET — Mitz, 2026-09-12, with a * 768 screenshot: "tablet view looks weird … It should be the same how * mobile view was setup." The first cut kept the table to 744 and held the * plugin's stacking off for 744–767 only; the plugin's query is * `max-width: 768px`, INCLUSIVE, so at exactly 768 its block cells and * labels came through untouched — the stray colons, the name flush right — * and the tablet tier was a third look nobody asked for. The cards apply * wherever the plugin would stack, and beyond it up to the desktop boundary. * * ┌────┬──────┬──────────────────────┬───┐ * │ ☐ │ │ NAME │ × │ * │ │ img │ stock │ │ * │ │ │ $159.00 [ 1 ] │ │ * │ │ │ [ Add to Cart ─────── ] │ * └────┴──────┴──────────────────────┴───┘ * ------------------------------------------------------------------------- */ @media (max-width: 999px) { #wl-wrapper .button, #wl-wrapper button.button, #wl-wrapper input.button, #wl-wrapper .wl-but, #wl-wrapper .wl-add-all, #wl-wrapper .wishlist-add-to-cart-button, #wl-wrapper .wl-create-new { padding: 0 16px !important; } /* Actions row: select and button share the line, and stack under 400. */ #wl-wrapper table.wl-actions-table, #wl-wrapper table.wl-actions-table tbody, #wl-wrapper table.wl-actions-table tr { display: flex !important; flex-wrap: wrap; gap: 12px; width: 100%; } #wl-wrapper table.wl-actions-table td { display: block !important; flex: 1 1 auto; padding: 0 !important; } #wl-wrapper table.wl-actions-table td:first-child { flex: 1 1 200px; } #wl-wrapper select.wl-sel { width: 100%; min-width: 0; } #wl-wrapper table.wl-actions-table button.wl-but { width: 100%; } /* The table's head goes; each card labels itself. */ #wl-wrapper table.wl-table { display: block; } #wl-wrapper table.wl-table thead { display: none !important; } #wl-wrapper table.wl-table tbody { display: block !important; } #wl-wrapper table.wl-table tr.cart_table_item { display: grid !important; grid-template-columns: 24px 80px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 12px 12px; padding: 16px 0; border-bottom: 1px solid var(--wl-c6); } #wl-wrapper table.wl-table tr.cart_table_item td { display: block !important; width: auto !important; min-width: 0; padding: 0 !important; border: 0 !important; /* !important: the plugin's stacked-cell rules right-align every cell to * sit beside their labels; the name and price read left here. */ text-align: left !important; } #wl-wrapper table.wl-table td::before, #wl-wrapper table.wl-table th::before { content: none !important; display: none !important; } #wl-wrapper table.wl-table tr.cart_table_item td.check-column { grid-area: 1 / 1 / 2 / 2; padding-top: 4px !important; } #wl-wrapper table.wl-table tr.cart_table_item td.product-thumbnail { grid-area: 1 / 2 / 3 / 3; } #wl-wrapper table.wl-table tr.cart_table_item td.product-thumbnail img { width: 80px !important; height: 80px !important; } #wl-wrapper table.wl-table tr.cart_table_item td.product-name { grid-area: 1 / 3 / 2 / 4; } #wl-wrapper table.wl-table tr.cart_table_item td.product-remove { grid-area: 1 / 4 / 2 / 5; justify-self: end; } #wl-wrapper table.wl-table tr.cart_table_item td.product-price { grid-area: 2 / 3 / 3 / 4; align-self: center; } #wl-wrapper table.wl-table tr.cart_table_item td.product-quantity { grid-area: 2 / 4 / 3 / 5; justify-self: end; text-align: right !important; } #wl-wrapper table.wl-table tr.cart_table_item td.product-purchase { grid-area: 3 / 3 / 4 / 5; white-space: normal; } #wl-wrapper table.wl-table tr.cart_table_item td.product-purchase .button { display: flex; width: 100%; } /* The footer row holds only "Add All to Cart": one full-width button. */ #wl-wrapper table.wl-table tbody tr:not(.cart_table_item) { display: block !important; padding: 16px 0 0; } #wl-wrapper table.wl-table tbody tr:not(.cart_table_item) td { display: none !important; } #wl-wrapper table.wl-table tbody tr:not(.cart_table_item) td.product-purchase, #wl-wrapper table.wl-table tbody tr:not(.cart_table_item) td.actions { display: block !important; width: auto !important; padding: 0 !important; border: 0 !important; } #wl-wrapper table.wl-table tbody tr:not(.cart_table_item) td.product-purchase .button, #wl-wrapper table.wl-table tbody tr:not(.cart_table_item) td.actions .button { display: flex; width: 100%; } /* My Lists: name and its actions, the date beside, the privacy select under. */ #wl-wrapper table.wl-table.wl-manage tr.cart_table_item { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; } #wl-wrapper table.wl-table.wl-manage tr.cart_table_item td.product-name { grid-area: 1 / 1 / 2 / 2; } #wl-wrapper table.wl-table.wl-manage tr.cart_table_item td.wl-date-added { grid-area: 1 / 2 / 2 / 3; color: var(--wl-c5); font-size: 14px; line-height: 26px; text-align: right; } #wl-wrapper table.wl-table.wl-manage tr.cart_table_item td.wl-privacy-col { grid-area: 2 / 1 / 3 / 3; } #wl-wrapper table.wl-table.wl-manage tr.cart_table_item td.wl-privacy-col select { width: 100%; } } /* * On the tablet band the card carries a 200px thumbnail (Mitz, 2026-09-12: first * "make the thumbnail column width wider so that thumbnail became larger", then * "the thumbnail should be 200px X 200px"). The image spans all three rows so * the price / quantity line and the button sit beside it. Phones keep 80. */ @media (min-width: 744px) and (max-width: 999px) { #wl-wrapper table.wl-table tr.cart_table_item { grid-template-columns: 24px 200px minmax(0, 1fr) auto; gap: 16px; } #wl-wrapper table.wl-table tr.cart_table_item td.product-thumbnail { grid-area: 1 / 2 / 4 / 3; } #wl-wrapper table.wl-table tr.cart_table_item td.product-thumbnail img { width: 200px !important; height: 200px !important; } } /* Below the tablet frame the two notices and the name pair stack. */ @media (max-width: 743px) { #wl-wrapper:has(> .woocommerce-message + .woocommerce-message) { grid-template-columns: minmax(0, 1fr); } #wl-wrapper .wl-form form > .form-row-first, #wl-wrapper .wl-form form > .form-row-last { flex-basis: 100%; } } @media (max-width: 600px) { :root { --wl-gutter: 20px; } main.site-main:has(#wl-wrapper) h1.entry-title { font-size: 24px; line-height: 28px; } #wl-wrapper { gap: 24px; } #wl-wrapper ul.wl-tabs { gap: 24px; } }