/* ════════════════════════════════════════════════════════════════════════ TOMODATCHI SHOP — WooCommerce styles ════════════════════════════════════════════════════════════════════════ */ /* ─── PRODUCT GRID ─── */ ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; list-style: none !important; margin: 0 0 40px !important; padding: 0 !important; } @media (max-width: 1100px) { ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width: 760px) { ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } } @media (max-width: 460px) { ul.products { grid-template-columns: 1fr; } } ul.products li.product { position: relative; z-index: 0; list-style: none; margin: 0 !important; width: 100%; min-width: 0; } ul.products li.product:hover { z-index: 10; } .tomo-product-card-link { display: block; width: 100%; height: 100%; text-decoration: none; } /* Out of stock: greyed out */ ul.products li.product.outofstock .tomo-product-card, ul.products li.product.outofstock .tomo-product-card-link { opacity: 0.75; pointer-events: none; } /* Keep the card itself clickable so user can visit the page */ ul.products li.product.outofstock .tomo-product-card-link { pointer-events: all; } ul.products li.product.outofstock .tomo-add-btn { pointer-events: none; } .tomo-product-card { width: 100%; background: #fff; border: var(--card-border-outer) solid var(--logo-blue); border-radius: var(--radius); cursor: pointer; /* overflow: visible — the card itself no longer clips its children, which lets product images "burst" slightly past the card boundary (see .tomo-product-art img below). The decorative stripe background (.tomo-product-art-bg) is now clipped via its own explicit border-radius instead of relying on the card to clip it, and .tomo-product-body retains overflow:hidden for its own text content so nothing bleeds laterally into adjacent cards. */ overflow: visible; box-shadow: 4px 5px 8px rgba(160,184,210,0.55); transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; } /* Hover-driven scale/shadow effects are scoped to (hover: hover) — real mouse devices only. Touch devices (iPhone Safari etc) fake a :hover state on tap for any element inside a link, which made tapping the + button (nested inside the card's wrapper) trigger the WHOLE card to visibly scale up before the tap even registered — that's the "card scales big and messy on tap" bug. Scoping hover behind this media query removes it entirely on touch while keeping the nice hover animation for desktop/mouse users. */ @media (hover: hover) and (pointer: fine) { .tomo-product-card:hover { transform: scale(1.03); box-shadow: 6px 8px 14px rgba(160,184,210,0.65); } } /* Art area — all cards use the pale grey-blue palette, with stripes on the grid view */ .tomo-product-art { width: 100%; height: var(--card-art-height); display: flex; align-items: center; justify-content: center; padding: 18px; position: relative; /* overflow:hidden clips image/stripes to top+sides, keeping the card's rounded top border intact. On hover (desktop only, below) we switch to overflow:visible so the image bursts downward. DO NOT restore clip-path here: it creates a stacking context that traps the image inside it (hover z-index on li.product can't pull the image above neighbours), and inset(0…) clips the top border corners flush, breaking the rounded outline. */ overflow: hidden; border-radius: calc(var(--radius) - var(--card-border-outer)) calc(var(--radius) - var(--card-border-outer)) 0 0; } @media (hover: hover) and (pointer: fine) { .tomo-product-card:hover .tomo-product-art { overflow: visible; } } .tomo-product-art-bg { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; z-index: 0; border-radius: calc(var(--radius) - var(--card-border-outer)) calc(var(--radius) - var(--card-border-outer)) 0 0; pointer-events: none; background-color: var(--card-bg); background-image: repeating-linear-gradient( 45deg, transparent, transparent 14px, rgba(141,193,240,0.45) 14px, rgba(141,193,240,0.45) 20px ); background-size: 28px 28px; } /* On hover, animate stripes — desktop/mouse only, see note above */ @media (hover: hover) and (pointer: fine) { .tomo-product-card:hover .tomo-product-art-bg { animation: bgDriftStripes 3s linear infinite; } } .tomo-product-art img { display: block; width: auto; max-width: 100%; height: auto; max-height: var(--card-img-maxheight); object-fit: contain; transform: scale(1.15); position: relative; z-index: 2; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), filter 0.4s ease-out; /* White outline ring at rest so the bursting image has a clear edge against the striped card background + a soft blue dropshadow below for depth (light mode). Dark mode version below. */ filter: drop-shadow( 0px 2px 0px white) drop-shadow( 0px -2px 0px white) drop-shadow( 2px 0px 0px white) drop-shadow(-2px 0px 0px white) drop-shadow( 1.4px 1.4px 0px white) drop-shadow(-1.4px 1.4px 0px white) drop-shadow( 1.4px -1.4px 0px white) drop-shadow(-1.4px -1.4px 0px white) drop-shadow(0px 8px 12px rgba(46,55,251,0.22)); } [data-theme="dark"] .tomo-product-art img { filter: drop-shadow( 0px 2px 0px white) drop-shadow( 0px -2px 0px white) drop-shadow( 2px 0px 0px white) drop-shadow(-2px 0px 0px white) drop-shadow( 1.4px 1.4px 0px white) drop-shadow(-1.4px 1.4px 0px white) drop-shadow( 1.4px -1.4px 0px white) drop-shadow(-1.4px -1.4px 0px white) drop-shadow(0px 8px 12px rgba(0,0,0,0.55)); } .tomo-product-art img[src*="woocommerce-placeholder"] { max-height: 96px; opacity: 0.55; transform: none; filter: none; } /* Image zoom-on-hover — desktop/mouse only, see note above */ @media (hover: hover) and (pointer: fine) { .tomo-product-card:hover .tomo-product-art img { /* 1.313 = reduced burst scale (1.15) × hover-extra scale (1.14) */ transform: scale(1.313); animation: popOutline 0.25s ease-out forwards; } /* Dark mode: same animation, just the dark-coloured offset shadow variant (see @keyframes popOutlineDark in style.css) — applies everywhere this hover effect is used: shop grid, related products, search results. */ [data-theme="dark"] .tomo-product-card:hover .tomo-product-art img { animation: popOutlineDark 0.25s ease-out forwards; } } /* Badges */ .tomo-badge { position: absolute; top: 10px; left: 10px; z-index: 5; font-family: 'Fredoka', sans-serif; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 11px; border-radius: 100px; color: #fff; background: #ff4f8b; box-shadow: 0 2px 8px rgba(0,0,0,0.18); } .tomo-badge-sale { background: #ff4f8b; } .tomo-badge-soldout { background: var(--muted); } .tomo-product-body { padding: 12px 14px 14px; border-top: var(--card-border) solid var(--border); display: flex; flex-direction: column; gap: 6px; flex: 1; /* Clips text content so product names/prices can't spill sideways out of the card now that the card itself is overflow:visible. */ overflow: hidden; border-radius: 0 0 calc(var(--radius) - var(--card-border-outer)) calc(var(--radius) - var(--card-border-outer)); } .tomo-product-cat { font-family: 'Fredoka', sans-serif; font-size: 0.64rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; } .tomo-product-name { font-family: 'Fredoka', sans-serif; font-size: 1.02rem; font-weight: 600; color: var(--logo-blue); line-height: 1.25; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.25em * 2); word-break: break-word; } .tomo-product-rating { display: flex; align-items: center; gap: 4px; } /* Unicode star rating (see tomo_render_star_rating() in template-functions.php) — plain text colour matching .tomo-product-cat's grey (var(--muted)) in both light and dark mode, not the ink/logo-blue used elsewhere on the card. Letter spacing tightens the gap WC's default star webfont didn't have, since these are plain glyphs rather than a purpose-built icon font. */ .tomo-product-rating .tomo-star-rating { font-size: 0.8rem; line-height: 1; letter-spacing: 1px; color: var(--muted); } .tomo-product-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; } .tomo-product-price { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); } .tomo-product-price del { color: var(--muted); font-weight: 400; font-size: 0.85rem; opacity: 0.8; margin-right: 4px; } .tomo-product-price ins { text-decoration: none; } /* Add/options button — "..." for variable products, "+" for simple */ .tomo-add-btn { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--ink); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; transition: background 0.15s, transform 0.18s; box-shadow: 0 3px 10px rgba(46,55,251,0.25); text-decoration: none; font-family: 'Fredoka', sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1; } /* Hover scale — desktop/mouse only. On touch, tapping this button was briefly triggering the hover-scale on top of the .loading spin, reading as a "throb" before the spinner takes over. */ @media (hover: hover) and (pointer: fine) { .tomo-add-btn:hover { background: #1c24d9; transform: scale(1.1); } } .tomo-add-btn svg { width: 18px; height: 18px; } .tomo-add-btn.loading { animation: tomoSpin 0.6s linear infinite; } .tomo-add-btn.added { background: #2bbf6a; } /* "..." button variant for variable products */ .tomo-add-btn.tomo-options-btn { letter-spacing: 0.05em; font-size: 1rem; } @media (hover: hover) and (pointer: fine) { .tomo-add-btn.tomo-options-btn:hover { transform: scale(1.1) rotate(0deg); } } @keyframes tomoSpin { to { transform: rotate(360deg); } } /* Neutralise WooCommerce default loop markup */ ul.products li.product > .woocommerce-loop-product__title, ul.products li.product > .price, ul.products li.product > .star-rating, ul.products li.product > a.button { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* ─── SORT / RESULT COUNT BAR ─── Breadcrumb is rendered manually as the first child here (see functions.php unhook + woocommerce.php) so it sits on the same row as the result count and sort dropdown, left-aligned with both. Its color/font are left at WooCommerce's own defaults — only position and spacing are touched, not appearance. */ .tomo-shop-toolbar { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; font-family: 'Fredoka', sans-serif; font-size: 0.84rem; color: var(--muted); /* Align with the card grid left edge — no extra indent */ padding: 0; } .tomo-shop-toolbar .woocommerce-breadcrumb { margin: 0; padding: 0; flex: 0 0 auto; position: relative; padding-right: 12px; } .tomo-shop-toolbar .woocommerce-breadcrumb::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--border); } .tomo-shop-toolbar .woocommerce-result-count { margin: 0; padding: 0; /* Keep it on the same line, left side */ flex: 0 0 auto; } .tomo-shop-toolbar .woocommerce-ordering { margin: 0 !important; /* Push sort to the right within the same row */ margin-left: auto !important; flex: 0 0 auto; } .tomo-shop-toolbar select { font-family: 'Fredoka', sans-serif; font-size: 0.84rem; font-weight: 500; border: 2px solid var(--border); border-radius: 100px; padding: 7px 16px; background: #fff; color: var(--ink); cursor: pointer; } /* ─── PAGINATION ─── */ .tomo-pagination, nav.woocommerce-pagination { display: flex; justify-content: center; gap: 8px; margin: 30px 0 10px; } nav.woocommerce-pagination ul { display: flex; gap: 8px; } nav.woocommerce-pagination ul li { display: block; } nav.woocommerce-pagination ul li a, nav.woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.85rem; border: 2px solid var(--border); border-radius: 100px; color: var(--muted); text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } nav.woocommerce-pagination ul li a:hover { background: var(--border-soft); color: var(--ink); } nav.woocommerce-pagination ul li span.current { background: var(--ink); color: #fff; border-color: var(--ink); } /* ─── SIDEBAR / WIDGETS ─── */ .tomo-sidebar { display: flex; flex-direction: column; gap: 22px; } .tomo-widget { background: #fff; border: var(--card-border) solid var(--border); border-radius: var(--radius); padding: 18px 18px 20px; } .tomo-widget .section-label { font-family: 'Fredoka', sans-serif; font-size: 0.7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 14px; } .tomo-widget ul.product-categories, .tomo-widget ul { list-style: none; margin: 0; padding: 0; } .tomo-widget ul.product-categories li a, .widget_product_categories li a { display: flex; align-items: center; justify-content: space-between; font-family: 'Fredoka', sans-serif; font-size: 0.88rem; font-weight: 500; color: var(--muted); text-decoration: none; padding: 8px 10px; border-radius: 12px; transition: background 0.15s, color 0.15s; } .tomo-widget ul.product-categories li a:hover, .widget_product_categories li a:hover { background: var(--border-soft); color: var(--ink); } .tomo-widget ul.product-categories li.current-cat > a { background: var(--ink); color: #fff; } /* Price filter */ .tomo-widget .price_slider_wrapper .ui-slider { background: var(--border-soft); height: 6px; border-radius: 10px; border: none; } .tomo-widget .price_slider_wrapper .ui-slider .ui-slider-range { background: var(--ink); border-radius: 10px; } .tomo-widget .price_slider_wrapper .ui-slider-handle { background: #fff; border: 3px solid var(--ink); border-radius: 50%; width: 16px; height: 16px; top: -5px; cursor: grab; } .tomo-widget .price_slider_amount .button { font-family: 'Fredoka', sans-serif; } /* ═══════════════════════════════════════════════════════════════ BROWSER-WINDOW CATEGORY CAROUSEL ═══════════════════════════════════════════════════════════════ */ .tomo-browser-panel { background: #fff; border: var(--card-border-outer) solid var(--logo-blue); border-radius: 20px; overflow: hidden; /* Shadow removed — .tomo-widget (the other sidebar widgets) has no box-shadow at all, and this panel is meant to read as one of them now (border already matched to .tomo-widget further down this file), so the shadow was the one remaining thing making it look like a separate, "special" element. */ /* Completes the fix chain (grid column -> this panel -> chrome row -> urlbar): pin this to the full width of its grid track and never let content push it wider. */ width: 100%; max-width: 100%; box-sizing: border-box; } .tomo-browser-chrome { background: linear-gradient(180deg, #eef3fa 0%, #dde8f5 100%); border-bottom: var(--card-border) solid var(--border); padding: 10px 12px; display: flex; align-items: center; gap: 10px; /* Belt-and-braces alongside the urlbar's own min-width:0 fix below — this row itself shouldn't be forced wider by its children either. */ min-width: 0; } .tomo-browser-dots { display: flex; gap: 6px; flex-shrink: 0; } .tomo-browser-dots span { width: 11px; height: 11px; border-radius: 50%; display: block; } /* Light mode: vivid versions, not the soft pastel 5-colour-system swatches (var(--c-pink) etc. read as too soft/muted for a 3-dot accent like this). Pink/red is the theme's existing vivid pink (.tomo-badge-sale's #ff4f8b), green matches the "added to cart" confirmation colour (.tomo-add-btn.added's #2bbf6a) so the two "this looks deliberate/branded" greens in the theme agree with each other, and amber is an interpolated colour between those two — not a literal RGB blend (pink+green averaged in plain RGB lands on a muddy brown, #95877a, since pink and green sit on opposite sides of the colour wheel) but a perceptual one: same hue family as amber/gold (38°) with the average saturation/lightness of the pink and green endpoints, so it reads as equally vivid rather than washed out. Dark mode keeps the original soft pastel set below — only light mode changes here. */ .tomo-browser-dots span:nth-child(1) { background: #ff4f8b; } .tomo-browser-dots span:nth-child(2) { background: #eaa732; } .tomo-browser-dots span:nth-child(3) { background: #2bbf6a; } [data-theme="dark"] .tomo-browser-dots span:nth-child(1) { background: var(--c-pink); } [data-theme="dark"] .tomo-browser-dots span:nth-child(2) { background: var(--c-amber); } [data-theme="dark"] .tomo-browser-dots span:nth-child(3) { background: var(--c-green); } .tomo-browser-urlbar { flex: 1; /* THE FIX: flex items default to min-width:auto, which means they refuse to shrink below their own content's natural width — even with overflow:hidden + text-overflow:ellipsis set below, those only activate once the box is already allowed to shrink past content size. Without this line, every time the carousel auto- advanced to a category with a longer name, this box (and the whole page, since nothing above it had a hard width cap either) grew to fit the new text, then snapped back — that's the "moving/glitching every few seconds" symptom. min-width:0 overrides the default and lets ellipsis truncation actually work. */ min-width: 0; background: #fff; border: 1.5px solid var(--border); border-radius: 100px; padding: 5px 14px; font-family: 'Fredoka', sans-serif; font-size: 0.7rem; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* No gap: the domain text and the category slug span are meant to read as one continuous plain URL ("tomodatchi.net/stickerbags"), not as two separate pieces with visible space between them. */ display: flex; align-items: center; } .tomo-browser-urlbar .tomo-url-cat { /* Plain — matches the "tomodatchi.net/" part exactly: same weight, same colour (inherited var(--muted) from .tomo-browser-urlbar), no bold, no blue. Reads as one continuous plain-text URL instead of the category portion looking like a clickable/highlighted link. */ transition: opacity 0.25s ease; /* Same min-width:0 fix as the parent — this span sits in a nested flex row (icon + text), so it needs its own shrink/truncate permission too. */ min-width: 0; overflow: hidden; text-overflow: ellipsis; } .tomo-browser-viewport { position: relative; width: 100%; aspect-ratio: 4 / 3; /* Flat colour — was the same dotted pattern as the product cards; removed so this widget reads as its own simple background rather than echoing the card pattern. Dark mode override below. */ background-color: #eaf4fd; overflow: hidden; } .tomo-browser-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: scale(0.92) translateY(8px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1); pointer-events: none; text-decoration: none; padding: 16px; } .tomo-browser-slide.active { opacity: 1; transform: scale(1) translateY(0); pointer-events: all; } /* On hover: wiggle back and forth (equal rotation both directions), like the product is being shown off, rather than just rotating once and stopping. Scale-up still applies for the whole hover duration; the rotation is the part that now animates continuously. On mouse-off, the transition below (not the animation) smoothly returns the image to its resting scale/rotation. Sized larger than before (was 62%/64%, sharing the slide with the label pill below it) — now that the label text is gone (info already lives in the topbar above), the image is the only content in the slide, so it can use the room that freed up. */ .tomo-browser-slide img { max-width: 82%; max-height: 86%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(46,55,251,0.18)); transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); } [data-theme="dark"] .tomo-browser-slide img { /* Same shadow, dark mode's own --ink (#9cd8f7) instead of light mode's #2e37fb — this glow was carrying the light-mode blue over unchanged before, part of the wider dark-mode glow audit. */ filter: drop-shadow(0 6px 14px rgba(156,216,247,0.18)); } .tomo-browser-slide:hover img { transform: scale(1.08); animation: tomoSlideWiggle 1.1s ease-in-out infinite; } @keyframes tomoSlideWiggle { 0% { transform: scale(1.08) rotate(0deg); } 25% { transform: scale(1.08) rotate(-4deg); } 75% { transform: scale(1.08) rotate(4deg); } 100% { transform: scale(1.08) rotate(0deg); } } .tomo-browser-navbtn { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.9); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 6; color: var(--ink); transition: background 0.15s, transform 0.15s; } .tomo-browser-navbtn:hover { background: #fff; transform: translateY(-50%) scale(1.08); } .tomo-browser-navbtn.prev { left: 10px; } .tomo-browser-navbtn.next { right: 10px; } .tomo-browser-tabs { display: flex; justify-content: center; gap: 6px; padding: 10px 10px 12px; border-top: var(--card-border) solid var(--border); flex-wrap: wrap; } .tomo-browser-tab { width: 9px; height: 9px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; } .tomo-browser-tab.active { background: var(--ink); transform: scale(1.3); } /* ─── SINGLE PRODUCT ─── */ /* Bumped top padding on the wrap to give breathing room */ .tomo-single-product-wrap { padding-top: 32px !important; } .tomo-single-product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } @media (max-width: 900px) { .tomo-single-product { grid-template-columns: 1fr; gap: 28px; } } /* Gallery: carousel with prev/next arrows */ .tomo-product-gallery-main { width: 100%; aspect-ratio: 1; border-radius: var(--radius); border: var(--card-border-outer) solid var(--logo-blue); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; /* Diagonal stripes — matches .tomo-product-art-bg's pattern on the grid cards (was dots; switched sitewide to keep the product page consistent with the grid). */ background-color: #eaf4fd; background-image: repeating-linear-gradient( 45deg, transparent, transparent 14px, rgba(141,193,240,0.45) 14px, rgba(141,193,240,0.45) 20px ); background-size: 28px 28px; } /* Remove zoom cursor — no zoom functionality */ .tomo-product-gallery-main img { max-width: 78%; max-height: 78%; object-fit: contain; cursor: default; transition: opacity 0.15s ease; } /* Carousel navigation arrows */ .tomo-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: var(--ink); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 6; color: #fff; transition: background 0.15s, transform 0.15s; box-shadow: 0 3px 10px rgba(46,55,251,0.3); } .tomo-gallery-arrow:hover { background: #1c24d9; } .tomo-gallery-arrow.prev { left: 12px; transform: translateY(-50%); } .tomo-gallery-arrow.prev:hover { transform: translateY(-50%) scale(1.08); } .tomo-gallery-arrow.next { right: 12px; transform: translateY(-50%); } .tomo-gallery-arrow.next:hover { transform: translateY(-50%) scale(1.08); } /* Hide arrows if only one image */ .tomo-gallery-arrow.hidden { display: none; } .tomo-product-thumbs { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .tomo-product-thumb { width: 66px; height: 66px; border-radius: 14px; border: var(--card-border) solid var(--border); overflow: hidden; cursor: pointer; background: #fff; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, transform 0.15s; } .tomo-product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .tomo-product-thumb:hover { transform: scale(1.06); } .tomo-product-thumb.active { border-color: var(--ink); } /* ─── PRODUCT INFO PANEL — rearranged layout ─── */ .tomo-product-info { padding-top: 4px; } .tomo-product-info .tomo-product-cat { font-size: 0.7rem; margin-bottom: 8px; } .tomo-product-info h1.product_title { font-family: 'Fredoka', sans-serif; font-size: 1.9rem; font-weight: 700; color: var(--logo-blue); margin: 0 0 8px; line-height: 1.2; } .tomo-product-info .price { font-family: 'Fredoka', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: 12px; display: block; } .tomo-product-info .price del { color: var(--muted); font-weight: 400; font-size: 1.1rem; margin-right: 8px; opacity: 0.7; } .tomo-product-info .price ins { text-decoration: none; } .tomo-product-info .woocommerce-product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } /* Unicode star rating on the single product page — same grey as the category label (var(--muted)), not the old WC default's gold/blue. See tomo_render_single_star_rating() in template-functions.php. */ .tomo-product-info .tomo-star-rating { font-size: 0.95rem; line-height: 1; letter-spacing: 1px; color: var(--muted); } .tomo-product-info .woocommerce-review-link { font-family: 'Fredoka', sans-serif; font-size: 0.78rem; color: var(--muted); text-decoration: none; } .tomo-product-info .woocommerce-review-link:hover { text-decoration: underline; } /* Tabs: description + reviews moved into the right column */ .tomo-product-tabs { margin-top: 20px; } .tomo-product-tabs ul.tabs { display: flex; gap: 8px; margin: 0 0 0; padding: 0; list-style: none; border-bottom: var(--card-border) solid var(--border); margin-bottom: -2px; } .tomo-product-tabs ul.tabs li { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.88rem; padding: 8px 18px; border: var(--card-border) solid var(--border); border-bottom: none; border-radius: 14px 14px 0 0; cursor: pointer; color: var(--muted); background: var(--border-soft); list-style: none; } .tomo-product-tabs ul.tabs li.active { background: #fff; color: var(--ink); } .tomo-product-tabs .panel { border: var(--card-border) solid var(--border); border-radius: 0 14px 14px 14px; padding: 18px; background: #fff; font-size: 0.92rem; line-height: 1.7; color: #555; } /* Old description div (now replaced by tabs — hide it) */ .tomo-product-desc { display: none; } /* The default woocommerce-tabs below the product (now redundant — hidden) */ .woocommerce-tabs { display: none; } .tomo-variations table.variations { width: 100%; margin-bottom: 18px; border-collapse: collapse; } .tomo-variations table.variations tr { display: flex; flex-direction: column; margin-bottom: 14px; } .tomo-variations table.variations label { font-family: 'Fredoka', sans-serif; font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .tomo-variations select { font-family: 'Fredoka', sans-serif; font-size: 0.9rem; border: 2px solid var(--border); border-radius: 14px; padding: 10px 14px; background: #fff; color: var(--ink); width: 100%; } .tomo-quantity-row { display: flex; align-items: center; gap: 14px; margin: 20px 0; } .quantity { display: flex; align-items: center; border: 2px solid var(--border); border-radius: 100px; overflow: hidden; } .quantity .qty-btn { width: 36px; height: 36px; border: none; background: #fff; cursor: pointer; font-family: 'Fredoka', sans-serif; font-size: 1.1rem; color: var(--ink); display: flex; align-items: center; justify-content: center; } .quantity .qty-btn:hover { background: var(--border-soft); } .quantity input.qty { width: 44px; text-align: center; border: none; border-left: 2px solid var(--border); border-right: 2px solid var(--border); font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--ink); height: 36px; -moz-appearance: textfield; } .quantity input.qty::-webkit-outer-spin-button, .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .tomo-meta-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; } .tomo-meta-item { font-family: 'Fredoka', sans-serif; font-size: 0.78rem; color: var(--muted); } .tomo-meta-item strong { color: var(--ink); font-weight: 600; } /* Tags stay in the markup (functional — readable by scripts, SEO tooling, etc.) but are not shown to visitors on the product page. */ .tomo-meta-tags { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .tomo-add-to-cart-wrap { margin: 16px 0; } form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } form.cart .quantity { margin: 0; } form.cart .quantity label { display: none; } form.cart button.single_add_to_cart_button { font-family: 'Fredoka', sans-serif; font-size: 0.95rem; font-weight: 600; background: var(--ink); color: #fff; border: 2.5px solid var(--ink); border-radius: 100px; padding: 12px 30px; cursor: pointer; transition: background 0.15s, transform 0.15s, box-shadow 0.18s; box-shadow: 0 4px 14px rgba(46,55,251,0.18); } form.cart button.single_add_to_cart_button:hover { background: #1c24d9; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(46,55,251,0.26); } form.cart button.single_add_to_cart_button.disabled, form.cart button.single_add_to_cart_button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Variations attribute label (e.g. "Colour", "Angel") — always left-aligned above dropdown. WC's default stylesheet uses display:table/table-row/table-cell which we must fully override. */ form.cart table.variations, .variations { display: block !important; width: 100% !important; margin-bottom: 4px !important; } form.cart table.variations tbody, .variations tbody { display: block !important; width: 100% !important; } form.cart table.variations tr, form.cart table.variations tbody tr, .variations tr, .variations tbody tr { display: flex !important; flex-direction: column !important; margin-bottom: 14px !important; width: 100% !important; } form.cart table.variations td, form.cart table.variations td.label, form.cart table.variations td.value, .variations td, .variations td.label, .variations td.value { display: block !important; width: 100% !important; padding: 0 !important; vertical-align: top !important; text-align: left !important; } form.cart table.variations td.label, .variations td.label { font-family: 'Fredoka', sans-serif !important; font-size: 0.78rem !important; font-weight: 600 !important; color: var(--muted) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding-bottom: 6px !important; } form.cart table.variations td.label label, .variations td.label label { display: block !important; text-align: left !important; float: none !important; width: auto !important; } form.cart table.variations td.value, .variations td.value { width: 100% !important; } form.cart table.variations select, .variations select { font-family: 'Fredoka', sans-serif; font-size: 0.9rem; border: 2px solid var(--border); border-radius: 14px; padding: 9px 14px; background: #fff; color: var(--ink); width: 100%; max-width: 280px; } .woocommerce-variation-add-to-cart { width: 100%; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .woocommerce-variation-price { width: 100%; font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--ink); } p.stock { font-family: 'Fredoka', sans-serif; font-size: 0.82rem; color: var(--muted); margin: 0; } p.stock.in-stock { color: #1c8a48; } p.stock.out-of-stock { color: #d6336c; } /* Related products heading */ .related.products > h2 { font-family: 'Fredoka', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--ink); text-align: center; margin: 60px 0 26px; } /* ─── CART PAGE ─── */ .tomo-basket-layout { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: start; } @media (max-width: 900px) { .tomo-basket-layout { grid-template-columns: 1fr; } } /* Basket page title — left-aligned to match the panel below it, unlike every other page's centred .tomo-page-head (Search Results, 404, generic pages etc., which stay centred — this override is scoped to just the basket page via the extra class set in cart.php). Lines up naturally with the panel's left edge since both sit inside the same .tomo-shop-wrap padding with no extra offset on either side. */ .tomo-page-head-basket { text-align: left; padding-left: 0; padding-right: 0; } /* table.shop_table is shared with the CHECKOUT review table and the basket TOTALS box (cart_totals also uses this class) — every rule below is scoped with the extra .cart class, which only the basket ITEMS table carries, so none of this touches those other tables. */ table.shop_table.cart { width: 100%; border-collapse: collapse; background: #fff; } /* Row layout: the underlying element is still a real / (kept that way so WooCommerce's own hooks — woocommerce_before_cart_contents etc. — and any plugin that injects its own still have a real table to inject into) but FORCED to lay out as flex instead of using native table layout. This is the actual fix for the warping/ stretching bug: native column widths auto-size based on each row's content, so a row with a 2-digit quantity could end up a different width/shape than a row with a 1-digit quantity, and the image cell would grow or shrink to match — exactly the "sides get hidden or stretched" symptom. Flex with explicit fixed widths below means every row always lays out identically regardless of what's in it. display:table-row/-cell are kept as the FALLBACK value (before the flex override) purely so nothing breaks if this ever renders somewhere flex isn't supported — practically a non-issue today, but costs nothing to leave in. */ table.shop_table.cart tbody tr.cart_item { display: table-row; display: flex; align-items: center; gap: 18px; padding: 18px 6px; border-bottom: 2px solid var(--border-soft); /* Locks each row to a single, predictable height regardless of content (long product names, backorder notices, etc.) wrapping differently — another source of the old warping, since table rows grow to fit whatever's tallest and every row matches the row's own content shape, not a fixed shape. */ min-height: 130px; } table.shop_table.cart tbody tr.cart_item > td { display: block; padding: 0; border-bottom: none; /* the row itself carries the divider line now, not each cell */ vertical-align: middle; } /* Fixed-width columns — this, combined with the row being flex, is what guarantees every row is IDENTICALLY shaped no matter what quantity number or product name length is inside it. */ table.shop_table.cart .product-thumbnail { flex: 0 0 140px; } table.shop_table.cart .product-name { flex: 1 1 auto; min-width: 0; } table.shop_table.cart .product-price { flex: 0 0 80px; text-align: right; } table.shop_table.cart .product-quantity { flex: 0 0 132px; } table.shop_table.cart .product-subtotal { display: none; } /* removed — redundant with totals panel, clutters phone layout */ table.shop_table.cart .product-remove { flex: 0 0 28px; } @media (max-width: 640px) { table.shop_table.cart tbody tr.cart_item { flex-wrap: wrap; min-height: 0; } table.shop_table.cart .product-thumbnail { flex-basis: 100px; } table.shop_table.cart .product-price { display: none; } /* subtotal already shows the total, price-per-unit is redundant at this width */ } /* Thumbnail — substantially bigger than before (was 66px) since visuals matter for these products. Image itself is set to "burst" slightly outside its own box (object-fit:contain naturally leaves empty padding around non-square transparent PNGs, so scaling the IMAGE up past its box on purpose — rather than just enlarging the box — is what gets the artwork to actually fill the space and slightly overlap the box edge): the .tomo-product-thumb-frame box stays a fixed, contained size (so the row layout above stays exactly as locked-down as intended), but the inside it scales past 100% and is allowed to overflow that box via overflow:visible, landing the comic-book "popping out of its panel" look. The white outline (same drop-shadow ring technique used on the logo/product card images elsewhere in this theme — see popOutline in style.css) is reapplied here too, since without it the artwork has no visual "edge" once it's no longer constrained by the box border. */ .cart_item .product-thumbnail { width: 108px; height: 108px; border-radius: 18px; /* Inset box-shadow instead of border: rendered after child content, so the scaled image (transform:scale(1.28)) can't paint over the bottom edge. border: … with overflow:visible lets overflow cover it. */ box-shadow: inset 0 0 0 var(--card-border) var(--border); background: var(--border-soft); overflow: visible; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; } /* Dark mode: diagonal-stripe coloured backing, cycling through the same 5 colours used on the product cards, via :nth-child. The base background is the card's dark mid-grey (#4a4a58) with the colour's own shade as the stripe overlay — matches the .tomo-product-art-bg pattern exactly. */ [data-theme="dark"] tr.cart_item:nth-child(5n+1) .product-thumbnail { background: #4a4a58; background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(220,134,185,0.45) 14px, rgba(220,134,185,0.45) 20px); box-shadow: inset 0 0 0 var(--card-border) var(--c-pink); } [data-theme="dark"] tr.cart_item:nth-child(5n+2) .product-thumbnail { background: #4a4a58; background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(237,190,159,0.45) 14px, rgba(237,190,159,0.45) 20px); box-shadow: inset 0 0 0 var(--card-border) var(--c-amber); } [data-theme="dark"] tr.cart_item:nth-child(5n+3) .product-thumbnail { background: #4a4a58; background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(145,207,189,0.45) 14px, rgba(145,207,189,0.45) 20px); box-shadow: inset 0 0 0 var(--card-border) var(--c-green); } [data-theme="dark"] tr.cart_item:nth-child(5n+4) .product-thumbnail { background: #4a4a58; background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(141,193,240,0.45) 14px, rgba(141,193,240,0.45) 20px); box-shadow: inset 0 0 0 var(--card-border) var(--c-blue); } [data-theme="dark"] tr.cart_item:nth-child(5n+5) .product-thumbnail { background: #4a4a58; background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(159,136,245,0.45) 14px, rgba(159,136,245,0.45) 20px); box-shadow: inset 0 0 0 var(--card-border) var(--c-purple); } .cart_item .product-thumbnail img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.28); /* White outline ring — same in both light and dark mode on the basket page. The thumbnail box has a coloured/patterned backing in dark mode, so white reads equally well against that as against the light-mode grey-blue. Soft blue dropshadow below the image for depth; dark mode uses near-black instead. Both are below-only (single shadow with positive Y offset + blur, no solid outline offsets) to keep the "floating above the box" read clear. */ filter: drop-shadow( 0px 2px 0px white) drop-shadow( 0px -2px 0px white) drop-shadow( 2px 0px 0px white) drop-shadow(-2px 0px 0px white) drop-shadow( 1.4px 1.4px 0px white) drop-shadow(-1.4px 1.4px 0px white) drop-shadow( 1.4px -1.4px 0px white) drop-shadow(-1.4px -1.4px 0px white) drop-shadow(0px 6px 10px rgba(46,55,251,0.22)); } [data-theme="dark"] .cart_item .product-thumbnail img { /* White outline preserved in dark mode too — it still reads well against the dark striped backing. Shadow switches to near-black. */ filter: drop-shadow( 0px 2px 0px white) drop-shadow( 0px -2px 0px white) drop-shadow( 2px 0px 0px white) drop-shadow(-2px 0px 0px white) drop-shadow( 1.4px 1.4px 0px white) drop-shadow(-1.4px 1.4px 0px white) drop-shadow( 1.4px -1.4px 0px white) drop-shadow(-1.4px -1.4px 0px white) drop-shadow(0px 6px 10px rgba(0,0,0,0.55)); } .cart_item .product-name a { font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--ink); text-decoration: none; } .cart_item .product-price, .cart_item .product-subtotal { font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--ink); } .cart_item .product-remove a { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--border-soft); color: var(--muted); text-decoration: none; font-weight: 700; transition: background 0.15s, color 0.15s; } .cart_item .product-remove a:hover { background: #ff4f8b; color: #fff; } /* Quantity stepper — fixed width regardless of digit count (1 vs 2+ digit quantities), which is the other half of the "stretches when items are added/removed" bug: the input itself was sizing to its OWN content rather than to a fixed box, so going from qty 9 to qty 10 (or back down) visibly resized the whole stepper, throwing off anything next to it. */ table.shop_table.cart .quantity { display: flex; } table.shop_table.cart .qty-btn, table.shop_table.cart input.qty { flex-shrink: 0; } table.shop_table.cart input.qty { width: 48px; text-align: center; } .cart-collaterals, .tomo-basket-totals { background: #fff; border: var(--card-border-outer) solid var(--logo-blue); border-radius: var(--radius); padding: 22px 22px 26px; } /* Hide "Cart totals" heading */ .cart_totals h2 { display: none; } /* Totals table: each row is a flex row so label sits left, amount right */ .cart_totals table.shop_table { width: 100%; border-collapse: collapse; } .cart_totals table.shop_table tbody tr { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--border-soft); } .cart_totals table.shop_table tbody td, .cart_totals table.shop_table tbody th { padding: 11px 0; font-family: 'Fredoka', sans-serif; border: none; } .cart_totals table.shop_table tbody th { font-weight: 600; color: var(--muted); font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; } .cart_totals table.shop_table tbody td { text-align: right; flex: 1; } /* Rename "Subtotal" → "Products" and "Shipping" → "Postage" via CSS (WC outputs these as visible text in
; hiding + using ::after is the safest non-PHP approach that doesn't require overriding the cart-totals.php template). */ .cart_totals .cart-subtotal > th { visibility: hidden; position: relative; } .cart_totals .cart-subtotal > th::after { content: 'Products'; visibility: visible; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .cart_totals .shipping-row > th, .cart_totals .woocommerce-shipping-totals > th { visibility: hidden; position: relative; } .cart_totals .shipping-row > th::after, .cart_totals .woocommerce-shipping-totals > th::after { content: 'Postage'; visibility: visible; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } /* Hide "Shipping options will be updated during checkout." paragraph */ .cart_totals .shipping-row p, .cart_totals .woocommerce-shipping-totals p { display: none; } .cart_totals .order-total .amount { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--ink); } .coupon { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .coupon input#coupon_code { flex: 1; min-width: 140px; font-family: 'Nunito', sans-serif; font-size: 0.88rem; border: 2px solid var(--border); border-radius: 100px; padding: 9px 16px; } /* Checkout button area */ .wc-proceed-to-checkout { text-align: center; margin-top: 8px; } .wc-proceed-to-checkout a.checkout-button { display: inline-flex; width: auto; min-width: 220px; justify-content: center; } /* Breathing room below checkout button and between payment buttons */ .wc-proceed-to-checkout, #wc-stripe-payment-request-wrapper, .woocommerce-PaymentRequestButton-wrapper, .express-checkout { margin-bottom: 14px; } /* Extra gap specifically below the main checkout button before alt-pay buttons */ .wc-proceed-to-checkout { margin-bottom: 32px; } /* Shipping calculator: hidden since shipping is flat-rate and the calculator adds noise with no useful function in that setup. Done via CSS (not remove_action) so it can be easily un-hidden later if shipping options change without touching PHP. */ .woocommerce-shipping-calculator, .shipping-calculator-button, table.shop_table .shipping td form { display: none !important; } /* Dark mode: basket table background colour */ [data-theme="dark"] table.shop_table.cart { background: transparent; } [data-theme="dark"] .cart_item .product-thumbnail { background: #4a4a58; box-shadow: inset 0 0 0 var(--card-border) #33333f; } /* ─── CHECKOUT PAGE ─── */ .tomo-checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 36px; align-items: start; } @media (max-width: 900px) { .tomo-checkout-layout { grid-template-columns: 1fr; } } .woocommerce-billing-fields h3, .woocommerce-additional-fields h3, #order_review_heading { font-family: 'Fredoka', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 16px; } .form-row { margin-bottom: 14px; } .form-row label { display: block; font-family: 'Fredoka', sans-serif; font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .form-row input.input-text, .form-row select, .form-row textarea { width: 100%; font-family: 'Nunito', sans-serif; font-size: 0.92rem; border: 2px solid var(--border); border-radius: 14px; padding: 11px 14px; background: #fff; color: var(--ink); } .form-row input.input-text:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--ink); } .form-row-first, .form-row-last { width: 48%; } .form-row-first { float: left; } .form-row-last { float: right; } .form-row-wide { clear: both; } #order_review, .woocommerce-checkout-review-order { background: #fff; border: var(--card-border-outer) solid var(--logo-blue); border-radius: var(--radius); padding: 22px; } table.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; } table.woocommerce-checkout-review-order-table th, table.woocommerce-checkout-review-order-table td { padding: 10px 4px; border-bottom: 2px solid var(--border-soft); } .woocommerce-checkout-payment { background: var(--border-soft); border-radius: 16px; padding: 16px; margin-top: 16px; } .payment_methods { list-style: none; padding: 0; margin: 0; } .payment_methods li { padding: 10px 0; border-bottom: 1px solid var(--border); font-family: 'Fredoka', sans-serif; font-size: 0.88rem; } .payment_methods li:last-child { border-bottom: none; } /* ─── MINI-CART DRAWER ─── */ .tomo-minicart-overlay { position: fixed; inset: 0; background: rgba(20,24,40,0.45); z-index: 9990; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .tomo-minicart-overlay.open { opacity: 1; pointer-events: all; } .tomo-minicart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(380px, 92vw); background: #fff; z-index: 9991; box-shadow: -10px 0 40px rgba(0,0,0,0.18); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); display: flex; flex-direction: column; } .tomo-minicart-drawer.open { transform: translateX(0); } .tomo-minicart-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: var(--card-border) solid var(--border); } .tomo-minicart-head h3 { font-family: 'Fredoka', sans-serif; font-size: 1.1rem; color: var(--ink); margin: 0; } .tomo-minicart-close { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border); background: #fff; cursor: pointer; } .tomo-minicart-items { flex: 1; overflow-y: auto; padding: 14px 20px; } .tomo-minicart-foot { padding: 16px 20px 22px; border-top: var(--card-border) solid var(--border); } /* ─── EMPTY STATES ─── */ .tomo-empty-state { text-align: center; padding: 40px 20px 36px; margin-top: 8px; } .tomo-empty-state img { width: 140px; margin-bottom: 18px; opacity: 0.85; } .tomo-empty-state p { font-family: 'Fredoka', sans-serif; color: var(--muted); margin-bottom: 18px; } /* WooCommerce notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error { font-family: 'Fredoka', sans-serif; font-size: 0.85rem; font-weight: 500; list-style: none; padding: 14px 18px; border-radius: 16px; margin: 0 0 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; justify-content: space-between; } /* On the cart/basket page the remove notice is repositioned by JS (see initCartRemoveNotice) — reset margin so it doesn't add a gap above the page content before JS kicks in. */ .woocommerce-cart .woocommerce-message { margin: 0; } .woocommerce-message { background: #e6fbed; color: #1c8a48; border: 2px solid #b9f0cc; } .woocommerce-info { background: var(--border-soft); color: var(--ink); border: 2px solid var(--border); } .woocommerce-error { background: #ffe9ee; color: #d6336c; border: 2px solid #ffc2d4; } .woocommerce-message a.button, .woocommerce-info a.button { font-family: 'Fredoka', sans-serif; font-weight: 600; background: var(--ink); color: #fff; padding: 7px 16px; border-radius: 100px; text-decoration: none; } /* ═══════════════════════════════════════════════════════════════ GLOBAL DARK-GREY OVERRIDES Any WooCommerce default button that slips through as grey/dark gets normalised to the deep blue house style here. ═══════════════════════════════════════════════════════════════ */ /* WooCommerce generic .button class used on Cart, Checkout, etc. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, a.button.wc-forward, .wc-proceed-to-checkout a.checkout-button { font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important; background: var(--ink) !important; color: #fff !important; border: 2.5px solid var(--ink) !important; border-radius: 100px !important; padding: 11px 26px !important; cursor: pointer !important; text-decoration: none !important; transition: background 0.15s, transform 0.15s, box-shadow 0.18s !important; box-shadow: 0 4px 14px rgba(46,55,251,0.18) !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, a.button.wc-forward:hover, .wc-proceed-to-checkout a.checkout-button:hover { background: #1c24d9 !important; color: #fff !important; transform: scale(1.05) !important; box-shadow: 0 8px 22px rgba(46,55,251,0.26) !important; } /* Gap between the checkout button and the first payment button below (PayPal/Apple Pay/Google Pay etc. — injected by gateway plugins). The plugins inject their buttons without any surrounding margin, so this targets the known wrapper class names; margin-top on the payment request wrappers themselves pushes them away from whatever is immediately above. */ .wc-proceed-to-checkout { margin-bottom: 14px; } /* "Update Cart" / "Apply Coupon" secondary-style buttons */ .woocommerce button.button.alt, .woocommerce a.button.alt, .woocommerce input.button.alt { background: var(--ink) !important; border-color: var(--ink) !important; } /* Cart item quantities update — same pill style */ .woocommerce table.cart td.actions .button { border-radius: 100px !important; } /* Search widget / form on shop pages — round, deep blue */ .widget_product_search input[type="search"], .woocommerce-product-search input[type="search"], .wp-block-search__input { font-family: 'Nunito', sans-serif; border: 2px solid var(--border) !important; border-radius: 100px !important; padding: 9px 18px !important; background: #fff; color: var(--ink); outline: none; } .widget_product_search button, .woocommerce-product-search button[type="submit"], .wp-block-search__button { font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important; background: var(--ink) !important; color: #fff !important; border: 2px solid var(--ink) !important; border-radius: 100px !important; padding: 9px 20px !important; cursor: pointer !important; } /* WC's "Please choose product options" notice — prevent it from appearing when we intercept the click ourselves. If it does appear, style it. */ .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button { display: none; } /* "Add to cart" on single product page — ensure not grey */ form.cart button.single_add_to_cart_button, .single-product form.cart button { background: var(--ink) !important; color: #fff !important; border-color: var(--ink) !important; border-radius: 100px !important; } /* ─── DARK MODE: hardcoded-colour overrides ─── Same rationale as the block at the end of style.css — these selectors paint a literal #fff instead of var(--bg)/var(--card-bg), so they need an explicit dark-mode override rather than repainting automatically from the variable redefinition in style.css. */ [data-theme="dark"] .tomo-product-card, [data-theme="dark"] .tomo-widget, [data-theme="dark"] .tomo-browser-panel, [data-theme="dark"] .tomo-product-thumb, [data-theme="dark"] .tomo-product-tabs .panel, [data-theme="dark"] table.shop_table, [data-theme="dark"] .cart-collaterals, [data-theme="dark"] .tomo-basket-totals, [data-theme="dark"] #order_review, [data-theme="dark"] .woocommerce-checkout-review-order, [data-theme="dark"] .tomo-minicart-drawer { background: #2a2a38; } [data-theme="dark"] .tomo-shop-toolbar select, [data-theme="dark"] .tomo-widget .price_slider_wrapper .ui-slider-handle, [data-theme="dark"] .tomo-browser-navbtn:hover, [data-theme="dark"] .tomo-product-tabs ul.tabs li.active, [data-theme="dark"] .tomo-variations select, [data-theme="dark"] form.cart table.variations select, [data-theme="dark"] .variations select, [data-theme="dark"] .form-row input.input-text, [data-theme="dark"] .form-row select, [data-theme="dark"] .form-row textarea, [data-theme="dark"] .quantity .qty-btn, [data-theme="dark"] .quantity input.qty, [data-theme="dark"] .tomo-minicart-close, [data-theme="dark"] .widget_product_search input[type="search"], [data-theme="dark"] .woocommerce-product-search input[type="search"], [data-theme="dark"] .wp-block-search__input { background: #2a2a38; } /* ─── DARK MODE: hover-darken + glow-shadow colour audit ─── Same issue as the equivalent section at the end of style.css: several buttons here darken to a hardcoded #1c24d9 on hover (light mode's --ink one step darker) and/or carry a light-mode-blue box-shadow glow (rgba(46,55,251,…)) with no dark-mode equivalent, so both stayed visibly light-mode-blue after switching themes. #8dc1f0 (hover) is the existing --c-blue-shade swatch already used elsewhere in this theme's dark palette; the glow shadows reuse the same rgba opacity as their light-mode counterparts, just with dark mode's --ink (#9cd8f7) instead. */ [data-theme="dark"] .tomo-add-btn { box-shadow: 0 3px 10px rgba(156,216,247,0.2); } @media (hover: hover) and (pointer: fine) { [data-theme="dark"] .tomo-add-btn:hover { background: #8dc1f0; } } [data-theme="dark"] .tomo-gallery-arrow { box-shadow: 0 3px 10px rgba(156,216,247,0.22); } [data-theme="dark"] .tomo-gallery-arrow:hover { background: #8dc1f0; } [data-theme="dark"] form.cart button.single_add_to_cart_button { box-shadow: 0 4px 14px rgba(156,216,247,0.15); } [data-theme="dark"] form.cart button.single_add_to_cart_button:hover { background: #8dc1f0; color: #23232e; box-shadow: 0 8px 22px rgba(156,216,247,0.22); } [data-theme="dark"] .woocommerce a.button, [data-theme="dark"] .woocommerce button.button, [data-theme="dark"] .woocommerce input.button, [data-theme="dark"] .woocommerce #respond input#submit, [data-theme="dark"] a.button.wc-forward, [data-theme="dark"] .wc-proceed-to-checkout a.checkout-button { box-shadow: 0 4px 14px rgba(156,216,247,0.15) !important; } [data-theme="dark"] .woocommerce a.button:hover, [data-theme="dark"] .woocommerce button.button:hover, [data-theme="dark"] .woocommerce input.button:hover, [data-theme="dark"] .woocommerce #respond input#submit:hover, [data-theme="dark"] a.button.wc-forward:hover, [data-theme="dark"] .wc-proceed-to-checkout a.checkout-button:hover { background: #8dc1f0 !important; color: #23232e !important; transform: scale(1.05) !important; box-shadow: 0 8px 22px rgba(156,216,247,0.22) !important; } /* ─── DARK MODE: 5-colour product card system ─── Dark mode only — light mode is completely untouched (cards stay the single blue/white/grey-blue look they've always had). Each card carries a data-card-color attribute (red/amber/green/blue/ purple), set by tomo_get_next_product_card_color() in functions.php, cycling in the order cards are rendered (red, amber, green, blue, purple, repeating, across the grid). Three roles per colour, deliberately NOT "light colour = background" (that was the first pass — superseded by this one): 1. BACKGROUND (.tomo-product-art-bg, .tomo-product-card): one single neutral mid-grey, the SAME for every card regardless of colour — only the outline/text/button/stripes vary by colour. 2. OUTLINE + TEXT + BUTTON (.tomo-product-card border, .tomo-product-name, .tomo-product-price, .tomo-add-btn): the card's LIGHT colour (var(--c-amber) etc.) — this is the role var(--logo-blue) already played site-wide; now it's per-card. 3. STRIPES (the diagonal repeating-linear-gradient inside .tomo-product-art-bg): the card's DARK "-shade" colour (var(--c-amber-shade) etc.) — these -shade variables already existed in the palette (see :root in style.css) and were the designated darker tone for each colour even before dark mode existed; reused here rather than inventing new values. NOTE: "red" maps to the theme's --c-pink / --c-pink-shade swatches — the existing 5-colour palette doesn't have a separate true-red, and pink filled this same "5th colour" slot in the original version of this system. */ /* 1. Shared mid-grey background — same for every card, any colour. */ [data-theme="dark"] .tomo-product-art-bg { background-color: #4a4a58; } [data-theme="dark"] .tomo-product-card { background: #4a4a58; } /* 2. Outline + text + button: card's own LIGHT colour. */ [data-theme="dark"] .tomo-product-card[data-card-color="red"] { border-color: var(--c-pink); } [data-theme="dark"] .tomo-product-card[data-card-color="amber"] { border-color: var(--c-amber); } [data-theme="dark"] .tomo-product-card[data-card-color="green"] { border-color: var(--c-green); } [data-theme="dark"] .tomo-product-card[data-card-color="blue"] { border-color: var(--c-blue); } [data-theme="dark"] .tomo-product-card[data-card-color="purple"] { border-color: var(--c-purple); } [data-theme="dark"] .tomo-product-card[data-card-color="red"] .tomo-product-name, [data-theme="dark"] .tomo-product-card[data-card-color="red"] .tomo-product-price { color: var(--c-pink); } [data-theme="dark"] .tomo-product-card[data-card-color="amber"] .tomo-product-name, [data-theme="dark"] .tomo-product-card[data-card-color="amber"] .tomo-product-price { color: var(--c-amber); } [data-theme="dark"] .tomo-product-card[data-card-color="green"] .tomo-product-name, [data-theme="dark"] .tomo-product-card[data-card-color="green"] .tomo-product-price { color: var(--c-green); } [data-theme="dark"] .tomo-product-card[data-card-color="blue"] .tomo-product-name, [data-theme="dark"] .tomo-product-card[data-card-color="blue"] .tomo-product-price { color: var(--c-blue); } [data-theme="dark"] .tomo-product-card[data-card-color="purple"] .tomo-product-name, [data-theme="dark"] .tomo-product-card[data-card-color="purple"] .tomo-product-price { color: var(--c-purple); } /* :not(.added) on each of these — the "just added to cart" green flash (.tomo-add-btn.added below) is a temporary confirmation state that should always win regardless of which card colour it's on. Without :not(.added) here, these rules' higher specificity (attribute selector + 2 classes) silently beat the plain .tomo-add-btn.added rule in dark mode only — light mode was never affected since it has no equivalent per-card-colour override — so clicking add-to-cart in dark mode never visibly confirmed; the button just stayed its resting card colour the whole time. */ [data-theme="dark"] .tomo-product-card[data-card-color="red"] .tomo-add-btn:not(.added) { background: var(--c-pink); } [data-theme="dark"] .tomo-product-card[data-card-color="amber"] .tomo-add-btn:not(.added) { background: var(--c-amber); } [data-theme="dark"] .tomo-product-card[data-card-color="green"] .tomo-add-btn:not(.added) { background: var(--c-green); } [data-theme="dark"] .tomo-product-card[data-card-color="blue"] .tomo-add-btn:not(.added) { background: var(--c-blue); } [data-theme="dark"] .tomo-product-card[data-card-color="purple"] .tomo-add-btn:not(.added) { background: var(--c-purple); } /* Dark mode confirmation colour: the darkest grey in the palette (#1a1a22 — same colour as the Country Sales Map's dark-mode ocean background, see [data-theme="dark"] .tomo-sales-map in sales-map.css) instead of light mode's green, for contrast against the page rather than trying to make green pop on a dark surface. */ [data-theme="dark"] .tomo-add-btn.added { background: #1a1a22; } /* 3. Diagonal stripes: midpoint between the card's DARK "-shade" colour and the shared grey backing (#4a4a58) — the full -shade colour alone read as too bright/saturated against the grey, so each stripe colour here is that shade blended 50/50 toward the backing grey. Computed once as literal hex (CSS can't blend colours like this at runtime without color-mix(), which isn't used elsewhere in this codebase — kept consistent with that). If the backing grey (#4a4a58) or any -shade variable in style.css ever changes, these five values need recalculating to match. */ [data-theme="dark"] .tomo-product-art-bg[data-card-color="red"] { background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, #936888 14px, #936888 20px); } [data-theme="dark"] .tomo-product-art-bg[data-card-color="amber"] { background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, #9b847b 14px, #9b847b 20px); } [data-theme="dark"] .tomo-product-art-bg[data-card-color="green"] { background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, #6d8c8a 14px, #6d8c8a 20px); } [data-theme="dark"] .tomo-product-art-bg[data-card-color="blue"] { background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, #6b85a4 14px, #6b85a4 20px); } [data-theme="dark"] .tomo-product-art-bg[data-card-color="purple"] { background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, #7469a6 14px, #7469a6 20px); } /* Card drop-shadow: light mode uses a fixed soft pale-blue (rgba(160,184,210,...)) for every card, resting and hover alike. In dark mode this becomes a "neon sign" effect instead — each card's own vivid colour (var(--c-pink)/--c-amber/--c-green/--c-blue/ --c-purple, the same vivid 5-colour set the card's border/text/ button already use) glowing outward from the card, brighter and wider on hover than at rest, like a lit sign rather than a flat ambient shadow. Applies everywhere .tomo-product-card is used: shop grid, related products, search results, all the same. (Note: this is the WHOLE CARD's shadow — separate from the small offset shadow on the card's product IMAGE specifically, which uses popOutlineDark instead, see @keyframes popOutlineDark in style.css and the .tomo-product-art img dark-mode override above.) */ [data-theme="dark"] .tomo-product-card[data-card-color="red"] { box-shadow: 4px 5px 14px rgba(255,161,188,0.5); } [data-theme="dark"] .tomo-product-card[data-card-color="amber"] { box-shadow: 4px 5px 14px rgba(255,211,158,0.5); } [data-theme="dark"] .tomo-product-card[data-card-color="green"] { box-shadow: 4px 5px 14px rgba(175,252,189,0.5); } [data-theme="dark"] .tomo-product-card[data-card-color="blue"] { box-shadow: 4px 5px 14px rgba(156,216,247,0.5); } [data-theme="dark"] .tomo-product-card[data-card-color="purple"] { box-shadow: 4px 5px 14px rgba(195,166,255,0.5); } @media (hover: hover) and (pointer: fine) { [data-theme="dark"] .tomo-product-card[data-card-color="red"]:hover { box-shadow: 6px 10px 26px rgba(255,161,188,0.85); } [data-theme="dark"] .tomo-product-card[data-card-color="amber"]:hover { box-shadow: 6px 10px 26px rgba(255,211,158,0.85); } [data-theme="dark"] .tomo-product-card[data-card-color="green"]:hover { box-shadow: 6px 10px 26px rgba(175,252,189,0.85); } [data-theme="dark"] .tomo-product-card[data-card-color="blue"]:hover { box-shadow: 6px 10px 26px rgba(156,216,247,0.85); } [data-theme="dark"] .tomo-product-card[data-card-color="purple"]:hover { box-shadow: 6px 10px 26px rgba(195,166,255,0.85); } } /* ─── DARK MODE: product description contrast fix ─── .tomo-product-tabs .panel previously hardcoded color: #555 — fine against its old white background, too low-contrast against the new dark panel background (#2a2a38). White in dark mode only; light mode is untouched. */ [data-theme="dark"] .tomo-product-tabs .panel { color: #fff; } /* ─── BOTH MODES: browser-style category widget border match ─── .tomo-browser-panel previously used the same thick blue border as product cards (var(--card-border-outer) solid var(--logo-blue)) — now matched to the thinner, neutral border the OTHER sidebar widgets (.tomo-widget) use instead, so it reads as "a sidebar widget" rather than "a product card". Applies in both light and dark mode (this isn't a colour-scheme change, it's a structural consistency fix). */ .tomo-browser-panel { border: var(--card-border) solid var(--border); } /* Dark mode flat colour for the browser widget's image viewport — matches the dark card-bg family used elsewhere rather than the light-mode pale blue. */ [data-theme="dark"] .tomo-browser-viewport { background-color: #2a2a38; } /* Dark mode: the chrome topbar and nav arrow buttons were still rendering their light-mode colours (a pale blue-grey gradient and near-white circles respectively) — only their :hover states had a dark-mode override before, so the resting/default state stayed light regardless of theme. */ [data-theme="dark"] .tomo-browser-chrome { background: linear-gradient(180deg, #2a2a38 0%, #23232e 100%); } [data-theme="dark"] .tomo-browser-navbtn { background: rgba(42,42,56,0.9); } /* ─── BOTH MODES: hide redundant "Search" label/button text ─── WooCommerce's built-in Product Search widget (core WooCommerce markup, not something this theme generates) always renders a visible