/* * TWC Vendor Storefront — /store// * --------------------------------------------------------------------------- * EVERY selector is prefixed `body.twc-storefront`. That class is added only by this * plugin's Dokan store templates (see includes/chrome.php), so if the plugin is * deactivated, the theme stops being a block theme, or a theme override takes over, not a * single rule below can match. Nothing here can leak onto /shop/, the homepage, a product * page or the vendor dashboard. * * COLOURS are the theme.json presets, written as literals rather than var(--wp--preset--*) * so the sheet is self-contained and readable in isolation: * primary #00A651 primary-dark #007A3D accent #7AC143 * cta #F58220 ink #1A1A2E muted #5F6A72 * border #E2E4E8 surface #F5F6F7 background #FFFFFF * tint (hover) #f3fbf5 badge tint #eaf7ee * Card radius 12px and control radius 8px match the theme's --twc-radius / card styles. * * `!important` appears only where Dokan Lite's own stylesheet uses `!important` or where * an inherited width must be beaten (Dokan sets `width: 94% !important` on the columns * below 768px and `height: 100% !important` on the banner image). This is a plugin * stylesheet, not the global-styles field, so `!important` is not stripped here. * * Layout ladder, matching the theme's /shop/ archive: * >=1120px sidebar 268px + 4 product columns * >= 881px sidebar 268px + 3 product columns * >= 768px stacked, 3 product columns * >= 560px stacked, 2 product columns * < 560px stacked, 2 product columns (tighter gap) */ /* ========================================================================= * 1. Page shell — the container that was missing entirely * * ROOT CAUSE of the edge-to-edge overflow and the clipped 4th column: nothing * constrained the page. Dokan's flex row is `sidebar flex:0 1 26%` + `margin-right:4%` * + `content flex:0 1 100%` = 130% of the available width, and neither column had * `min-width:0`, so the content column could not shrink below its min-content size and * pushed past the viewport. Fixed here with an explicit container, fixed sidebar width, * `flex:1 1 auto` + `min-width:0` on the content column, and a real CSS grid (with * `minmax(0,1fr)` tracks) for the products instead of WooCommerce's percentage floats. * ====================================================================== */ body.twc-storefront .twc-store-shell { box-sizing: border-box; width: 100%; max-width: 1280px; margin-inline: auto; padding: 22px 16px 60px; /* The theme's global styles give the fluid `medium` size, which clamps to ~20px on desktop. Dokan's markup was never designed for that. Reset to a sane base. */ font-size: 15px; line-height: 1.6; color: #1A1A2E; } @media (min-width: 768px) { body.twc-storefront .twc-store-shell { padding: 28px 24px 72px; } } /* WooCommerce's woocommerce_before_main_content wrapper. Neutralise any float/width the theme or WooCommerce puts on it; the shell above is the only container that matters. */ body.twc-storefront .twc-store-shell #primary.content-area, body.twc-storefront .twc-store-shell #main.site-main { box-sizing: border-box; float: none; width: auto; max-width: none; min-width: 0; margin: 0; padding: 0; } body.twc-storefront .twc-store-shell > * { min-width: 0; } /* Breadcrumb */ body.twc-storefront .woocommerce-breadcrumb { margin: 0 0 18px; padding: 0; font-size: 13px; line-height: 1.5; color: #5F6A72; } body.twc-storefront .woocommerce-breadcrumb a { color: #5F6A72; text-decoration: none; } body.twc-storefront .woocommerce-breadcrumb a:hover, body.twc-storefront .woocommerce-breadcrumb a:focus-visible { color: #00A651; text-decoration: underline; } /* ========================================================================= * 2. Two-column layout * ====================================================================== */ body.twc-storefront .dokan-store-wrap { margin: 0; gap: 24px; } @media (min-width: 881px) { body.twc-storefront .dokan-store-wrap.layout-left, body.twc-storefront .dokan-store-wrap.layout-right { display: flex; flex-direction: row; align-items: flex-start; } body.twc-storefront .dokan-store-wrap.layout-left > .dokan-store-sidebar, body.twc-storefront .dokan-store-wrap.layout-right > .dokan-store-sidebar { box-sizing: border-box; flex: 0 0 268px; width: 268px !important; max-width: 268px; min-width: 0; margin: 0 !important; } body.twc-storefront .dokan-store-wrap.layout-left > .dokan-single-store, body.twc-storefront .dokan-store-wrap.layout-right > .dokan-single-store { box-sizing: border-box; flex: 1 1 auto; width: auto !important; max-width: none; min-width: 0; margin: 0 !important; } body.twc-storefront .dokan-store-wrap.layout-left > .dokan-store-sidebar { order: 1; } body.twc-storefront .dokan-store-wrap.layout-left > .dokan-single-store { order: 2; } body.twc-storefront .dokan-store-wrap.layout-right > .dokan-store-sidebar { order: 2; } body.twc-storefront .dokan-store-wrap.layout-right > .dokan-single-store { order: 1; } } /* Stacked. Dokan's own base rules already put the product column first for layout-left (flex-direction: column-reverse), which is what we want, so direction is left alone and only the widths are corrected — Dokan hard-codes `width: 94% !important` below 768px. */ @media (max-width: 880px) { body.twc-storefront .dokan-store-wrap > .dokan-store-sidebar, body.twc-storefront .dokan-store-wrap > .dokan-single-store { box-sizing: border-box; width: 100% !important; max-width: 100%; min-width: 0; margin: 0 !important; } } /* ========================================================================= * 3. Store hero * * ROOT CAUSE of the "letterboxed banner". The banner artwork is NOT letterboxed and there * is no stray CSS border: storm-cover-photo.webp is a 1200x300 image whose right-hand side * is intentionally dark and whose orange rules are part of the artwork. What actually * happens is that Dokan absolutely positions `.profile-info-summery` over the banner at a * fixed 320px width and, at >=1200px only, paints it `rgba(0,0,0,.65)`. That black scrim * lands exactly on top of the "STORM / TACTICAL OUTDOOR GEAR" wordmark, so the artwork * reads as "squashed into the left third with dead black to the right". * * Fix: stop overlaying. Show the banner at a fixed height with object-fit:cover, and make * the identity block a real white card underneath it at every width, with the avatar * pulled up to overlap the banner. That is also what the target design asks for. * ====================================================================== */ body.twc-storefront .dokan-single-store .profile-frame { background: #FFFFFF; background-color: #FFFFFF; border: 1px solid #E2E4E8; border-radius: 12px; overflow: hidden; padding: 0; margin: 0 0 18px; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box { position: relative; width: 100%; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box:hover { color: inherit; } /* --- 3a. Banner ------------------------------------------------------- */ body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-img, body.twc-storefront .dokan-single-store .profile-frame .profile-info-box.profile-layout-default .profile-info-img { display: block; position: static; width: 100%; max-width: none; height: 190px !important; margin: 0; padding: 0; border: 0; border-radius: 0; object-fit: cover; object-position: center; background-color: #1A1A2E; } @media (min-width: 768px) { body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-img, body.twc-storefront .dokan-single-store .profile-frame .profile-info-box.profile-layout-default .profile-info-img { height: 230px !important; } } /* Vendors with no banner: Dokan swaps the for a div carrying its own placeholder. */ body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-img.dummy-image, body.twc-storefront .dokan-single-store .profile-frame .profile-info-box.profile-layout-default .profile-info-img.dummy-image { position: static; background-size: cover; background-position: center; } /* --- 3b. Identity card (was the absolutely-positioned black scrim) ---- */ body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper { box-sizing: border-box; position: static; top: auto; left: auto; width: 100%; height: auto; background: transparent; background-color: transparent; border: 0; padding: 0; color: #1A1A2E; } /* box-sizing matters here: Dokan's element is content-box, so `width:100%` plus the horizontal padding made the identity block 48px wider than the card it sits in. */ body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery { box-sizing: border-box; display: block; width: 100%; height: auto; min-height: 0; padding: 0 20px 20px; margin: 0; background: transparent; background-color: transparent; color: #1A1A2E; } @media (min-width: 768px) { body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery { padding: 0 24px 22px; } } /* --- 3c. Avatar + store name ----------------------------------------- */ body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info-head { position: relative; top: 0; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 18px; width: auto; margin: -42px 0 0; text-align: left; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info-head .profile-img { flex: 0 0 auto; margin: 0; text-align: left; line-height: 0; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info-head .profile-img img, body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info-head .profile-img.profile-img-circle img, body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info-head .profile-img.profile-img-square img { display: block; width: 86px !important; height: 86px !important; margin: 0 !important; padding: 0; border: 4px solid #FFFFFF; background: #FFFFFF; object-fit: cover; box-shadow: 0 4px 14px rgba(26, 26, 46, 0.18); } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info-head .profile-img.profile-img-circle img { border-radius: 50%; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info-head .profile-img.profile-img-square img { border-radius: 10px; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info-head .store-name, body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .store-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px; margin: 0 0 4px; padding: 0; font-size: 24px; line-height: 1.2; font-weight: 700; color: #1A1A2E; } @media (min-width: 768px) { body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info-head .store-name, body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .store-name { font-size: 28px; } } /* --- 3d. Verified badge (this plugin's markup) ------------------------ */ body.twc-storefront .twc-vsf-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 5px; background: #eaf7ee; color: #007A3D; font-size: 12px; font-weight: 700; line-height: 1.25; letter-spacing: 0.01em; white-space: nowrap; } body.twc-storefront .twc-vsf-badge .twc-vsf-ico { width: 13px; height: 13px; flex: 0 0 auto; margin: 0; } /* --- 3e. Trust / stat row -------------------------------------------- */ body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info { padding: 0; margin: 14px 0 0; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .dokan-store-info { position: static; top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; width: auto; overflow: visible; margin: 0; padding: 0; list-style: none; cursor: default; font-size: 13px; line-height: 1.45; color: #5F6A72; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .dokan-store-info > li { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; border: 0; text-align: left; list-style: none; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .dokan-store-info > li i { display: inline-block; flex: 0 0 auto; font-size: 13px; color: #00A651; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .dokan-store-info > li .twc-vsf-ico { width: 15px; height: 15px; flex: 0 0 auto; color: #00A651; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .dokan-store-info > li.dokan-store-rating i { color: #F58220; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .dokan-store-info > li a { color: #5F6A72; text-decoration: none; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .dokan-store-info > li a:hover, body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .dokan-store-info > li a:focus-visible { color: #00A651; text-decoration: underline; } /* Dokan's rating markup, when the vendor actually has reviews. */ body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .dokan-store-info > li.dokan-store-rating .seller-rating { display: inline-flex; align-items: center; } /* --- 3f. Social links ------------------------------------------------- */ body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .store-social-wrapper { position: static; top: auto; right: auto; bottom: auto; margin: 12px 0 0; text-align: left; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .store-social-wrapper .store-social { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .store-social-wrapper .store-social li { margin: 0; line-height: 1; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .store-social-wrapper .store-social li a i { font-size: 17px; color: #5F6A72; text-shadow: none; } body.twc-storefront .dokan-single-store .profile-frame .profile-info-box .profile-info-summery-wrapper .profile-info-summery .profile-info .store-social-wrapper .store-social li a:hover i { color: #00A651; } /* ========================================================================= * 4. Tab bar * * Two problems in the stock markup: `ul.dokan-modules-button` is a full-width bordered * strip that Dokan Lite never puts anything into (it only fires on the * `dokan_after_store_tabs` action, which is a Dokan Pro extension point) — that is the * empty box; and `ul.dokan-list-inline` renders as a boxed, centred, full-bleed row with * no active state — that is the pointless "Products" strip. * * The modules strip keeps its box model but loses its border and padding, so it collapses * to nothing when empty yet still displays correctly if a Pro module ever fills it. * ====================================================================== */ body.twc-storefront .dokan-single-store .dokan-store-tabs { text-align: left; margin: 0 0 20px; } body.twc-storefront .dokan-single-store .dokan-store-tabs ul.dokan-modules-button { border: 0; padding: 0; margin: 0; gap: 8px; justify-content: flex-start; flex-direction: row; } body.twc-storefront .dokan-single-store .dokan-store-tabs ul.dokan-list-inline { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 4px; margin: 0; padding: 0; background: transparent; border: 0; border-bottom: 1px solid #E2E4E8; font-size: 14px; list-style: none; } body.twc-storefront .dokan-single-store .dokan-store-tabs ul.dokan-list-inline li { display: block; flex: 0 0 auto; margin: 0; border: 0; list-style: none; } body.twc-storefront .dokan-single-store .dokan-store-tabs ul.dokan-list-inline li a { display: inline-block; width: auto; margin: 0 0 -1px; padding: 13px 16px; background: transparent; border: 0; border-bottom: 3px solid transparent; color: #5F6A72; font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none; } body.twc-storefront .dokan-single-store .dokan-store-tabs ul.dokan-list-inline li a:hover, body.twc-storefront .dokan-single-store .dokan-store-tabs ul.dokan-list-inline li a:focus-visible { background: transparent; color: #1A1A2E; } /* * Active tab. Matched on href rather than position: on the products view the active tab is * the one whose URL is neither the T&C page nor the in-page contact anchor; on the T&C view * it is the /toc one. Works whatever order Dokan (or a Pro module) puts the tabs in. */ body.twc-storefront.twc-storefront--products .dokan-single-store .dokan-store-tabs ul.dokan-list-inline li a:not([href*="/toc"]):not([href*="#"]), body.twc-storefront.twc-storefront--toc .dokan-single-store .dokan-store-tabs ul.dokan-list-inline li a[href*="/toc"] { color: #00A651; font-weight: 700; border-bottom-color: #00A651; } /* ========================================================================= * 5. Digital business card (twc-vendor-business-card plugin) * * Not restyled — that section belongs to another plugin. Only spacing is normalised so it * sits in the same rhythm as the rest of the column. * ====================================================================== */ body.twc-storefront .dokan-single-store .twc-vcard { margin: 0 0 20px; } /* ========================================================================= * 6. Sidebar * ====================================================================== */ body.twc-storefront .dokan-store-sidebar .dokan-widget-area { display: flex; flex-direction: column; gap: 16px; min-width: 0; } body.twc-storefront .dokan-store-sidebar .widget.dokan-store-widget { box-sizing: border-box; width: 100%; min-width: 0; margin: 0; padding: 20px; background: #FFFFFF; border: 1px solid #E2E4E8; border-radius: 12px; overflow-wrap: break-word; } /* Was rendering at the global h3 scale (~32px) because nothing styled .widget-title. */ body.twc-storefront .dokan-store-sidebar .widget.dokan-store-widget h3.widget-title { margin: 0 0 14px; padding: 0 0 10px; background: none; border: 0; border-bottom: 2px solid #00A651; color: #1A1A2E; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; } /* --- 6a. Category tree ----------------------------------------------- */ /* Dokan forces `max-height:800px; overflow-y:scroll` on every list in this widget, which puts a permanent scrollbar next to a five-item menu. `display` is deliberately NOT touched: Dokan's cat-drop-stack script toggles the child lists. */ body.twc-storefront .dokan-store-sidebar .store-cat-stack-dokan ul, body.twc-storefront .dokan-store-sidebar .store-cat-stack-dokan.cat-drop-stack ul { max-height: none; overflow: visible; margin: 0; padding: 0; list-style: none; } body.twc-storefront .dokan-store-sidebar .store-cat-stack-dokan li { margin: 0; padding: 0; border: 0; list-style: none; } body.twc-storefront .dokan-store-sidebar .store-cat-stack-dokan li + li { margin-top: 2px; } body.twc-storefront .dokan-store-sidebar .store-cat-stack-dokan li a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 7px; color: #1A1A2E; font-size: 13px; line-height: 1.35; text-decoration: none; } body.twc-storefront .dokan-store-sidebar .store-cat-stack-dokan li a:hover, body.twc-storefront .dokan-store-sidebar .store-cat-stack-dokan li a:focus-visible { background: #f3fbf5; color: #007A3D; } body.twc-storefront .dokan-store-sidebar .store-cat-stack-dokan .caret-icon { flex: 0 0 auto; color: #5F6A72; font-size: 11px; line-height: 1; } body.twc-storefront .dokan-store-sidebar .store-cat-stack-dokan ul.children { margin: 2px 0 4px 10px; padding-left: 10px; border-left: 1px solid #E2E4E8; } body.twc-storefront .dokan-store-sidebar .store-cat-stack-dokan ul.children li a { color: #5F6A72; font-size: 12.5px; padding: 7px 10px; } /* --- 6b. Contact-vendor form ----------------------------------------- */ body.twc-storefront .dokan-store-widget form.seller-form ul { margin: 0; padding: 0; list-style: none; } body.twc-storefront .dokan-store-widget form.seller-form ul li { margin: 0 0 12px; padding: 0; border: 0; list-style: none; } body.twc-storefront .dokan-store-widget .dokan-form-control, body.twc-storefront .dokan-store-widget input[type="text"], body.twc-storefront .dokan-store-widget input[type="email"], body.twc-storefront .dokan-store-widget textarea { box-sizing: border-box; display: block; width: 100%; min-height: 0; margin: 0; padding: 11px 13px; background: #FFFFFF; background-color: #FFFFFF; border: 1px solid #E2E4E8; border-radius: 8px; box-shadow: none; color: #1A1A2E; font-family: inherit; font-size: 14px; line-height: 1.45; } body.twc-storefront .dokan-store-widget textarea, body.twc-storefront .dokan-store-widget textarea.dokan-form-control { height: auto; min-height: 118px; resize: vertical; } body.twc-storefront .dokan-store-widget .dokan-form-control::placeholder { color: #8A939B; opacity: 1; } body.twc-storefront .dokan-store-widget .dokan-form-control:focus { border-color: #00A651; outline: 2px solid rgba(0, 166, 81, 0.2); outline-offset: 0; } body.twc-storefront .dokan-store-widget form.seller-form ul li label.error { display: block; margin: 4px 0 0; color: #C0392B; font-size: 12px; } body.twc-storefront .dokan-store-widget .dokan-privacy-policy-text { margin: 0; font-size: 12px; line-height: 1.5; color: #5F6A72; } body.twc-storefront .dokan-store-widget .ajax-response { margin: 0; font-size: 13px; } /* Dokan's store-location map widget, when the vendor has coordinates set. */ body.twc-storefront .dokan-store-widget #dokan-store-location { border-radius: 8px; overflow: hidden; } /* ========================================================================= * 7. Buttons — Dokan purple (#7047EB) becomes brand green * * `.dokan-btn-theme` is Dokan's brand class and it is hard-coded to #7047EB. It is on the * contact form's "Send Message" submit and on the store product "Search" submit — the two * purple buttons on the page. * ====================================================================== */ body.twc-storefront input[type="submit"].dokan-btn-theme, body.twc-storefront button.dokan-btn-theme, body.twc-storefront a.dokan-btn-theme, body.twc-storefront .dokan-btn-theme { background: #00A651; background-color: #00A651; border: 1px solid #00A651; border-radius: 8px; box-shadow: none; color: #FFFFFF; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; padding: 12px 20px; text-decoration: none; text-shadow: none; transition: background-color 0.15s ease, border-color 0.15s ease; } body.twc-storefront input[type="submit"].dokan-btn-theme:hover, body.twc-storefront input[type="submit"].dokan-btn-theme:focus, body.twc-storefront input[type="submit"].dokan-btn-theme:active, body.twc-storefront button.dokan-btn-theme:hover, body.twc-storefront button.dokan-btn-theme:focus, body.twc-storefront button.dokan-btn-theme:active, body.twc-storefront a.dokan-btn-theme:hover, body.twc-storefront a.dokan-btn-theme:focus, body.twc-storefront a.dokan-btn-theme:active, body.twc-storefront .dokan-btn-theme:hover, body.twc-storefront .dokan-btn-theme:focus, body.twc-storefront .dokan-btn-theme:active, body.twc-storefront .dokan-btn-theme.active { background: #007A3D; background-color: #007A3D; border-color: #007A3D; color: #FFFFFF; } body.twc-storefront .dokan-btn-theme:focus-visible { outline: 2px solid #1A1A2E; outline-offset: 2px; } /* "Send Message" ships with .dokan-right (float:right) and looked like an afterthought. */ body.twc-storefront .dokan-store-contact input[type="submit"].dokan-btn-theme { float: none; width: 100%; margin: 4px 0 0; } /* ========================================================================= * 8. Search / sort toolbar * ====================================================================== */ body.twc-storefront .dokan-store-products-filter-area { box-sizing: border-box; margin: 0 0 20px; padding: 12px 14px; background: #FFFFFF; border: 1px solid #E2E4E8; border-radius: 12px; } body.twc-storefront .dokan-store-products-filter-area .dokan-store-products-ordeby { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; margin: 0; } body.twc-storefront .dokan-store-products-filter-area .dokan-store-products-ordeby input.product-name-search, body.twc-storefront .dokan-store-products-filter-area .product-name-search { box-sizing: border-box; flex: 1 1 200px; float: none; width: auto; min-width: 0; height: 42px; margin: 0; padding: 0 13px; background: #FFFFFF; background-color: #FFFFFF; border: 1px solid #E2E4E8; border-radius: 8px; color: #1A1A2E; font-family: inherit; font-size: 14px; } body.twc-storefront .dokan-store-products-filter-area .product-name-search:focus { border-color: #00A651; outline: 2px solid rgba(0, 166, 81, 0.2); outline-offset: 0; } body.twc-storefront .dokan-store-products-filter-area .dokan-store-products-ordeby input.search-store-products, body.twc-storefront .dokan-store-products-filter-area input.search-store-products { box-sizing: border-box; flex: 0 0 auto; float: none; width: auto; height: 42px; margin: 0; padding: 0 22px; background: #00A651; background-color: #00A651; border: 1px solid #00A651; border-radius: 8px; color: #FFFFFF; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; } body.twc-storefront .dokan-store-products-filter-area input.search-store-products:hover, body.twc-storefront .dokan-store-products-filter-area input.search-store-products:focus { background: #007A3D; background-color: #007A3D; border-color: #007A3D; } body.twc-storefront .dokan-store-products-filter-area select.orderby-search, body.twc-storefront .dokan-store-products-filter-area .orderby-search { box-sizing: border-box; flex: 0 0 auto; float: none; height: 42px; max-width: 100%; margin-left: auto; padding: 0 12px; background: #FFFFFF; background-color: #FFFFFF; border: 1px solid #E2E4E8; border-radius: 8px; color: #1A1A2E; font-family: inherit; font-size: 14px; } body.twc-storefront .dokan-store-products-filter-area #dokan-store-products-search-result { top: 54px; left: 0; max-width: 420px; background: #FFFFFF; border: 1px solid #E2E4E8; border-radius: 8px; box-shadow: 0 10px 28px rgba(26, 26, 46, 0.14); } @media (max-width: 600px) { body.twc-storefront .dokan-store-products-filter-area select.orderby-search, body.twc-storefront .dokan-store-products-filter-area .orderby-search { flex: 1 1 100%; margin-left: 0; } } /* ========================================================================= * 9. Product grid * * The storefront uses the CLASSIC WooCommerce loop, whose cards are percentage floats * (`width:22.05%; float:left; margin-right:3.8%`). Replaced with a real grid whose tracks * are `minmax(0,1fr)`, which is what makes the clipped 4th column structurally impossible. * ====================================================================== */ body.twc-storefront .seller-items { margin: 0; } body.twc-storefront .seller-items ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } /* WooCommerce clears its float layout with pseudo-elements; they become phantom grid items and leave a hole in the first row. */ body.twc-storefront .seller-items ul.products::before, body.twc-storefront .seller-items ul.products::after { content: none; display: none; } @media (min-width: 560px) { body.twc-storefront .seller-items ul.products { gap: 16px; } } @media (min-width: 768px) { body.twc-storefront .seller-items ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } } @media (min-width: 1120px) { body.twc-storefront .seller-items ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } } /* --- 9a. Card shell — same treatment as /shop/ ------------------------ */ body.twc-storefront .seller-items ul.products li.product { box-sizing: border-box; position: relative; display: flex; flex-direction: column; float: none !important; clear: none !important; width: auto !important; max-width: none; min-width: 0; margin: 0 !important; padding: 0 0 16px; background: #FFFFFF; border: 1px solid #E2E4E8; border-radius: 12px; overflow: hidden; list-style: none; transition: box-shadow 0.2s ease, transform 0.2s ease; } body.twc-storefront .seller-items ul.products li.product::before, body.twc-storefront .seller-items ul.products li.product::after { content: none; display: none; } body.twc-storefront .seller-items ul.products li.product:hover { box-shadow: 0 6px 18px rgba(26, 26, 46, 0.10); transform: translateY(-3px); } /* --- 9b. Card content, bottom-anchored ------------------------------- * Image, title and price all live INSIDE the single loop , so the anchor is the flex * column that grows and the price carries `margin-top:auto`. Combined with a 2-line title * clamp that reserves its own height, every price and every button in a row lands on the * same baseline no matter how long the product name is. * ------------------------------------------------------------------- */ body.twc-storefront .seller-items ul.products li.product > a.woocommerce-loop-product__link { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; } body.twc-storefront .seller-items ul.products li.product > a.woocommerce-loop-product__link > img, body.twc-storefront .seller-items ul.products li.product > a.woocommerce-loop-product__link img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0 0 12px; padding: 0; background: #FFFFFF; border-radius: 0; object-fit: cover; object-position: center; } body.twc-storefront .seller-items ul.products li.product h2.woocommerce-loop-product__title, body.twc-storefront .seller-items ul.products li.product .woocommerce-loop-product__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; margin: 0 14px 6px; padding: 0; color: #1A1A2E; font-size: 15px; font-weight: 600; line-height: 1.35; } body.twc-storefront .seller-items ul.products li.product .price { display: block; margin: auto 14px 0; padding: 10px 0 0; color: #00A651; font-size: 16px; font-weight: 700; line-height: 1.2; } body.twc-storefront .seller-items ul.products li.product .price del { margin-right: 6px; color: #5F6A72; font-size: 13px; font-weight: 500; opacity: 1; } body.twc-storefront .seller-items ul.products li.product .price ins { background: none; text-decoration: none; font-weight: 700; } /* Sale flash — WooCommerce already prints it; it was just unstyled. */ body.twc-storefront .seller-items ul.products li.product .onsale { position: absolute; top: 10px; left: 10px; /* WooCommerce's default sets `right: 0`; leaving both set would stretch the badge across the whole card, because its width is auto. */ right: auto; bottom: auto; z-index: 2; min-width: 0; min-height: 0; margin: 0; padding: 4px 9px; background: #F58220; border-radius: 5px; color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; } /* --- 9c. Action row (this plugin's wrapper) --------------------------- */ body.twc-storefront .seller-items ul.products li.product .twc-vsf-actions { display: flex; align-items: stretch; gap: 8px; margin: 12px 14px 0; } body.twc-storefront .seller-items ul.products li.product .twc-vsf-actions > a.button, body.twc-storefront .seller-items ul.products li.product .twc-vsf-actions > a.added_to_cart { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-width: 0; height: 40px; margin: 0; padding: 0 12px; background: #00A651; border: 0; border-radius: 8px; color: #FFFFFF; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.twc-storefront .seller-items ul.products li.product .twc-vsf-actions > a.button:hover, body.twc-storefront .seller-items ul.products li.product .twc-vsf-actions > a.button:focus-visible { background: #007A3D; color: #FFFFFF; } body.twc-storefront .seller-items ul.products li.product .twc-vsf-actions > a.added_to_cart { flex: 0 0 auto; background: #FFFFFF; border: 1px solid #E2E4E8; color: #007A3D; } body.twc-storefront .seller-items ul.products li.product .twc-vsf-actions > a.button.loading::after { margin-left: 8px; } /* --- 9d. Wishlist + compare overlay (parity with /shop/) ------------- * Same 36px white circle treatment the twc-wishlist-on-cards plugin uses on /shop/, so a * customer moving between the two grids sees one control, not two designs. Restated here * rather than reused so this plugin does not depend on that one being installed. * ------------------------------------------------------------------- */ body.twc-storefront .seller-items ul.products li.product .twc-vsf-quickactions { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; flex-direction: column; gap: 8px; line-height: 0; } body.twc-storefront .twc-vsf-quickactions .yith-wcwl-add-to-wishlist, body.twc-storefront .twc-vsf-quickactions .yith-wcwl-add-button, body.twc-storefront .twc-vsf-quickactions .yith-wcwl-wishlistaddedbrowse, body.twc-storefront .twc-vsf-quickactions .yith-wcwl-wishlistexistsbrowse, body.twc-storefront .twc-vsf-quickactions .yith-wccp-compare, body.twc-storefront .twc-vsf-quickactions .compare-button { margin: 0; padding: 0; line-height: 0; } body.twc-storefront .twc-vsf-quickactions .yith-wcwl-feedback, body.twc-storefront .twc-vsf-quickactions .yith-wcwl-items-count { display: none; } body.twc-storefront .twc-vsf-quickactions a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin: 0; background: #FFFFFF; border: 0; border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); color: #222222; text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; } body.twc-storefront .twc-vsf-quickactions a:hover, body.twc-storefront .twc-vsf-quickactions a:focus-visible { color: #00A651; transform: scale(1.08); } body.twc-storefront .twc-vsf-quickactions a:focus-visible { outline: 2px solid #00A651; outline-offset: 2px; } body.twc-storefront .twc-vsf-quickactions svg { width: 20px; height: 20px; } /* Already saved -> filled brand-green heart, matching /shop/. */ body.twc-storefront .twc-vsf-quickactions .yith-wcwl-wishlistaddedbrowse a, body.twc-storefront .twc-vsf-quickactions .yith-wcwl-wishlistexistsbrowse a { color: #00A651; } /* Keep every label for screen readers, hide it visually inside the 36px control. */ body.twc-storefront .twc-vsf-quickactions a span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* * Compare. YITH renders a text link/button ("Compare"), so the text is zeroed out and a * masked glyph — the same compare icon the site header uses — is drawn from currentColor, * which keeps the hover state working. The accessible name survives because YITH's anchor * keeps its title/aria attributes and the text node is still in the DOM. */ body.twc-storefront .twc-vsf-compare a { font-size: 0; line-height: 0; white-space: nowrap; } body.twc-storefront .twc-vsf-compare a::before { content: ""; display: block; width: 19px; height: 19px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h11M4 7l3-3M4 7l3 3M20 17H9M20 17l-3-3M20 17l-3 3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h11M4 7l3-3M4 7l3 3M20 17H9M20 17l-3-3M20 17l-3 3'/%3E%3C/svg%3E") center / contain no-repeat; } /* YITH sometimes ships its own icon inside the anchor; the mask above is the single source of truth, so suppress a duplicate. */ body.twc-storefront .twc-vsf-compare a > i, body.twc-storefront .twc-vsf-compare a > svg, body.twc-storefront .twc-vsf-compare a > img { display: none; } @media (max-width: 480px) { body.twc-storefront .seller-items ul.products li.product .twc-vsf-quickactions { top: 8px; right: 8px; gap: 6px; } body.twc-storefront .twc-vsf-quickactions a { width: 32px; height: 32px; } body.twc-storefront .twc-vsf-quickactions svg { width: 18px; height: 18px; } body.twc-storefront .twc-vsf-compare a::before { width: 17px; height: 17px; } } @media (prefers-reduced-motion: reduce) { body.twc-storefront .seller-items ul.products li.product, body.twc-storefront .twc-vsf-quickactions a { transition: none; } body.twc-storefront .seller-items ul.products li.product:hover, body.twc-storefront .twc-vsf-quickactions a:hover, body.twc-storefront .twc-vsf-quickactions a:focus-visible { transform: none; } } /* ========================================================================= * 10. Pagination * ====================================================================== */ body.twc-storefront #nav-below, body.twc-storefront .paging-navigation { margin: 28px 0 0; padding: 0; border: 0; } /* Dokan Lite always emits this list and never fills it. Collapse it without hiding it, so it still renders if something ever does. */ body.twc-storefront #nav-below ul.pager { margin: 0; padding: 0; list-style: none; } body.twc-storefront .dokan-pagination-container { margin: 0; text-align: center; } body.twc-storefront .dokan-pagination-container ul.dokan-pagination { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; } body.twc-storefront .dokan-pagination-container ul.dokan-pagination li { display: inline-flex; margin: 0; padding: 0; list-style: none; } body.twc-storefront .dokan-pagination-container ul.dokan-pagination li a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; margin: 0; padding: 0 12px; background: #FFFFFF; border: 1px solid #E2E4E8; border-radius: 8px; color: #1A1A2E; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; } body.twc-storefront .dokan-pagination-container ul.dokan-pagination li a:hover, body.twc-storefront .dokan-pagination-container ul.dokan-pagination li a:focus-visible { background: #f3fbf5; border-color: #00A651; color: #007A3D; } body.twc-storefront .dokan-pagination-container ul.dokan-pagination li.active a, body.twc-storefront .dokan-pagination-container ul.dokan-pagination li.active a:hover { background: #00A651; border-color: #00A651; color: #FFFFFF; font-weight: 700; } body.twc-storefront .dokan-pagination-container ul.dokan-pagination li.disabled a, body.twc-storefront .dokan-pagination-container ul.dokan-pagination li.disabled a:hover { background: #F5F6F7; border-color: #E2E4E8; color: #A7AEB5; cursor: default; pointer-events: none; } /* ========================================================================= * 11. Misc Dokan surfaces that appear on this page * ====================================================================== */ /* "No products were found of this vendor!" and Dokan's ajax notices. */ body.twc-storefront .dokan-info, body.twc-storefront .dokan-alert, body.twc-storefront .dokan-message, body.twc-storefront .dokan-error { box-sizing: border-box; margin: 0; padding: 16px 18px; background: #F5F6F7; border: 1px solid #E2E4E8; border-left: 4px solid #00A651; border-radius: 8px; color: #1A1A2E; font-size: 14px; line-height: 1.5; } body.twc-storefront .dokan-error { border-left-color: #C0392B; } /* Terms & Conditions tab */ body.twc-storefront #store-toc-wrapper { box-sizing: border-box; padding: 24px; background: #FFFFFF; border: 1px solid #E2E4E8; border-radius: 12px; } body.twc-storefront #store-toc-wrapper h2.headline { margin: 0 0 14px; color: #1A1A2E; font-size: 20px; font-weight: 700; line-height: 1.3; } body.twc-storefront #store-toc-wrapper p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; } /* WooCommerce store notices, if any fire on this page. */ body.twc-storefront .woocommerce-message, body.twc-storefront .woocommerce-info, body.twc-storefront .woocommerce-error { border-top-color: #00A651; border-radius: 8px; font-size: 14px; } body.twc-storefront .woocommerce-message::before, body.twc-storefront .woocommerce-info::before { color: #00A651; }