/* * KidsCool Shop Columns (5 & 6) — button icons * * The theme styles ".product-change-layout li span" (size, radius, opacity, * hover/active). We only supply the :before icon for the new data-column 5 * and 6 buttons, drawn as SVG and applied via CSS mask so they inherit the * theme primary colour (--wdtPrimaryColor) and the 0.4 / 1 opacity states. * * Icons match the theme's grid-cell family (2x2, 3x3, 4x3 …): 5 = 5x3 cells, * 6 = 6x3 cells. */ .woocommerce .product-loop-sorting .product-layout-controller .product-change-layout li span[data-column="5"]:before, .woocommerce .product-loop-sorting .product-layout-controller .product-change-layout li span[data-column="6"]:before { content: ""; display: inline-block; width: 100%; height: 20px; margin: auto; vertical-align: middle; background-color: var(--wdtPrimaryColor); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 21px 21px; mask-size: 21px 21px; } /* 5 columns — 5x3 rounded-cell grid */ .woocommerce .product-loop-sorting .product-layout-controller .product-change-layout li span[data-column="5"]:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27black%27%3E%3Crect%20x%3D%272.00%27%20y%3D%272.00%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%276.15%27%20y%3D%272.00%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2710.30%27%20y%3D%272.00%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2714.45%27%20y%3D%272.00%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2718.60%27%20y%3D%272.00%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%272.00%27%20y%3D%279.09%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%276.15%27%20y%3D%279.09%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2710.30%27%20y%3D%279.09%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2714.45%27%20y%3D%279.09%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2718.60%27%20y%3D%279.09%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%272.00%27%20y%3D%2716.19%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%276.15%27%20y%3D%2716.19%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2710.30%27%20y%3D%2716.19%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2714.45%27%20y%3D%2716.19%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2718.60%27%20y%3D%2716.19%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27black%27%3E%3Crect%20x%3D%272.00%27%20y%3D%272.00%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%276.15%27%20y%3D%272.00%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2710.30%27%20y%3D%272.00%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2714.45%27%20y%3D%272.00%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2718.60%27%20y%3D%272.00%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%272.00%27%20y%3D%279.09%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%276.15%27%20y%3D%279.09%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2710.30%27%20y%3D%279.09%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2714.45%27%20y%3D%279.09%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2718.60%27%20y%3D%279.09%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%272.00%27%20y%3D%2716.19%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%276.15%27%20y%3D%2716.19%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2710.30%27%20y%3D%2716.19%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2714.45%27%20y%3D%2716.19%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3Crect%20x%3D%2718.60%27%20y%3D%2716.19%27%20width%3D%273.40%27%20height%3D%275.81%27%20rx%3D%270.95%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } /* 6 columns — 6x3 rounded-cell grid */ .woocommerce .product-loop-sorting .product-layout-controller .product-change-layout li span[data-column="6"]:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27black%27%3E%3Crect%20x%3D%272.00%27%20y%3D%272.00%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%275.44%27%20y%3D%272.00%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%278.87%27%20y%3D%272.00%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2712.31%27%20y%3D%272.00%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2715.75%27%20y%3D%272.00%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2719.18%27%20y%3D%272.00%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%272.00%27%20y%3D%279.09%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%275.44%27%20y%3D%279.09%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%278.87%27%20y%3D%279.09%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2712.31%27%20y%3D%279.09%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2715.75%27%20y%3D%279.09%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2719.18%27%20y%3D%279.09%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%272.00%27%20y%3D%2716.19%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%275.44%27%20y%3D%2716.19%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%278.87%27%20y%3D%2716.19%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2712.31%27%20y%3D%2716.19%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2715.75%27%20y%3D%2716.19%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2719.18%27%20y%3D%2716.19%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27black%27%3E%3Crect%20x%3D%272.00%27%20y%3D%272.00%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%275.44%27%20y%3D%272.00%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%278.87%27%20y%3D%272.00%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2712.31%27%20y%3D%272.00%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2715.75%27%20y%3D%272.00%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2719.18%27%20y%3D%272.00%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%272.00%27%20y%3D%279.09%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%275.44%27%20y%3D%279.09%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%278.87%27%20y%3D%279.09%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2712.31%27%20y%3D%279.09%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2715.75%27%20y%3D%279.09%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2719.18%27%20y%3D%279.09%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%272.00%27%20y%3D%2716.19%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%275.44%27%20y%3D%2716.19%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%278.87%27%20y%3D%2716.19%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2712.31%27%20y%3D%2716.19%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2715.75%27%20y%3D%2716.19%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3Crect%20x%3D%2719.18%27%20y%3D%2716.19%27%20width%3D%272.82%27%20height%3D%275.81%27%20rx%3D%270.79%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } /* The injected spans carry a number fallback; keep it hidden (theme already sets font-size:0 on these spans, this is belt-and-braces). */ .woocommerce .product-loop-sorting .product-layout-controller .product-change-layout li span.kc-col-icon { font-size: 0; } /* Safety net for cached markup. Up to 2.0.0 these spans carried role="button", and the theme's base.css gives *[role="button"] a --wdtPrimaryColor background — which drew a solid pink block behind every density icon. The attribute is gone as of 2.0.1, but a page cached before the update can still be serving it, so neutralise it. */ .product-change-layout li span[role="button"] { background-color: transparent !important; } /* * Fix periodic large gaps in the product grid. * * The theme lays the grid out with floats (.wdt-col { float:left }) and no * isotope on the shop, so a taller card makes the next one "catch" on its * bottom edge, leaving big vertical gaps. We switch ul.products to flex-wrap: * each row is independent (no catching) while the percentage widths from the * wdt-col-* classes are preserved, so the live column switcher still works. * align-items:stretch also gives equal-height cards per row. !important is used * on the layout-critical props because the theme injects its float rules as an * inline style, so load order can't be relied on. */ .woocommerce ul.products:not(.swiper-wrapper) { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } /* Let the .wdt-col be the flex item (keeps its % width) instead of the li. */ .woocommerce ul.products:not(.swiper-wrapper) > li.product { display: contents !important; } /* Without isotope the sizer would become a phantom flex item — hide it. */ .woocommerce ul.products:not(.swiper-wrapper) > li.product.isotope-grid-sizer { display: none !important; } .woocommerce ul.products:not(.swiper-wrapper) > li.product > .wdt-col { float: none !important; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; } /* Card stretches to row height (equal-height cards); 35px row spacing kept. */ .woocommerce ul.products:not(.swiper-wrapper) > li.product > .wdt-col > .product-wrapper { float: none !important; width: 100%; } /* ------------------------------------------------------------------------- * Product-card look + inter-column gaps (studiopets shop cards) * * Design intent: every product tile is a soft-shadowed, rounded, faint-pink- * bordered card, with clear gaps between columns/rows and a subtle "settle" * (2px -> 0) on hover. * * IMPLEMENTATION NOTE * The card look is drawn on the INNER card wrapper (.product-wrapper on the * shop, .ap-card on category/tag), NOT on the outer .wdt-col. The .wdt-col * keeps its exact theme percentage width and instead carries a horizontal * padding "gutter" that opens the gaps between columns. * * Why not put the border/shadow directly on .wdt-col (as originally drafted)? * Because each .wdt-col fills its exact % tile, so bordered .wdt-cols would * touch edge-to-edge. Opening gaps that way would mean shrinking each column * width per column-count AND per breakpoint (the theme sets those widths in * its own wdt-col-* / qxlg / hxlg media queries), which is fragile and fights * the live 1-6 density switcher. The gutter-on-.wdt-col + card-on-inner * approach needs zero width math and works at every column count, every * breakpoint, and with the live switcher — the same way the theme's native * gutter already worked. * * --kc-col-gutter is the half-gap (space on each side of a card): the visible * gap between two adjacent cards is 2 x this value. * ---------------------------------------------------------------------- */ :root { --kc-col-gutter: 10px; /* ---- Card look (studiopets shop cards) — change colours here ---- */ --kc-card-bg: #ffffff; /* card background */ --kc-card-radius: 24px; /* card corner radius */ --kc-inset-ring: transparent; /* crisp inner ring (2px) — set a colour to show it */ --kc-inset-glow: #EF3F8F1F; /* inset pink glow (top edge) */ } /* The column wrapper is now the GUTTER, not the card. Its horizontal padding * creates the gaps; box-sizing:border-box keeps the % tile width intact so * the grid still tiles perfectly at any column count. */ .woocommerce ul.products:not(.swiper-wrapper) > li.product > .wdt-col { box-sizing: border-box !important; padding: var(--kc-col-gutter) !important; margin: 0 !important; transition: padding 0.2s ease; } /* Hover keeps the same gutter — the card lift is handled on the inner card * itself (translateY) so the card width never changes and the full-width * add-to-cart button doesn't grow on hover. */ .woocommerce ul.products:not(.swiper-wrapper) > li.product > .wdt-col:hover { padding: var(--kc-col-gutter) !important; } /* The visible card = the inner wrapper. * shop archive -> .product-wrapper (theme's native card) * category/tag -> .ap-card (plugin's unified card) */ .woocommerce ul.products li.product > .wdt-col > .product-wrapper, .woocommerce ul.products li.product > .wdt-col > .ap-card { border-radius: var(--kc-card-radius) !important; border: none !important; background: var(--kc-card-bg) !important; box-shadow: inset 0 0 0 2px var(--kc-inset-ring), inset 0 10px 22px 0 var(--kc-inset-glow) !important; transition: box-shadow 0.2s ease, transform 0.28s ease; } /* Hover lift on the card itself (no width change, so the button stays put). */ .woocommerce ul.products li.product > .wdt-col > .product-wrapper:hover, .woocommerce ul.products li.product > .wdt-col > .ap-card:hover { transform: translateY(-4px); }