/*
Theme Name: Kiddino Child
Theme URI: https://wordpress.vecurosoft.com/kiddino/
Description: This is a child theme for Kiddino WordPress Theme
Author: Vecurosoft
Author URI: http://vecurosoft.com/
Template: kiddino
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, three-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, theme-options, editor-style, featured-images, microformats, post-formats, sticky-post, threaded-comments, translation-ready
Text Domain: kiddino-child
*/
/* [ Add your custom css below ]
- - - - - - - - - - - - - - - - - - - - */
/* -----------------------------------------------
Product page: Equal spacing between all summary elements
----------------------------------------------- */
/* Reset all existing margins on product summary children, then apply uniform 20px gap */
.product-about h1.product-title,
.product-about .product-rating,
.product-about .price,
.product-about .woocommerce-product-details__short-description,
.product-about .availability,
.product-about .product-quantity,
.product-about .actions,
.product-about .cart {
margin-top: 0;
margin-bottom: 20px;
}
/* Price: override theme's font/color but keep our margin */
.product-about .price {
margin: 0 0 20px 0;
}
/* Pincode checker (ShipRocket): add equal 20px gap after the widget.
The input wrapper has no class; #pincode_response is always present as the last element. */
.product-about div:has(#shiprocket_pincode_check),
#pincode_response {
margin-bottom: 20px;
}
/* "On Header" title: H1 placed above the gallery+summary columns */
.product-title-above-gallery {
margin-bottom: 20px;
}
/* Remove bottom margin from the last child to avoid extra space at the end */
.product-about > *:last-child {
margin-bottom: 0;
}
/* The short description div contains /
tags that have their own browser/theme
top margin — this stacks on top of the price's margin-bottom creating a double gap.
Zero out the first child's top margin and last child's bottom margin. */
.product-about .woocommerce-product-details__short-description > *:first-child {
margin-top: 0;
}
.product-about .woocommerce-product-details__short-description > *:last-child {
margin-bottom: 0;
}
/* Mobile: small top padding so summary doesn't feel cramped after stacking */
@media (max-width: 991px) {
.product-about {
padding-top: 8px;
}
}
/* -----------------------------------------------
Cart page: clean card layout on mobile.
Avoids flex label/value rows entirely — each cell is a simple block.
Layout per product: image → name → qty stepper → total → remove link.
----------------------------------------------- */
@media (max-width: 767px) {
/* 1. Kill theme's responsive_table and Bootstrap table-responsive transforms */
.woocommerce-cart-form table,
.woocommerce-cart-form table tbody,
.woocommerce-cart-form table tbody tr,
.woocommerce-cart-form table tbody td {
display: block !important;
width: 100% !important;
box-sizing: border-box;
}
/* 2. Kill any ::before the theme injects for data-title labels */
.woocommerce-cart-form table tbody tr.cart_item > td::before {
display: none !important;
content: none !important;
}
/* 3. Hide the header row */
.woocommerce-cart-form table thead {
display: none !important;
}
/* 4. Each product row: card */
.woocommerce-cart-form table tbody tr.cart_item {
border: 1px solid #e5e5e5 !important;
border-radius: 8px;
margin-bottom: 16px;
padding: 12px;
}
/* 5. All cells: centered, clean block, no extra borders from theme */
.woocommerce-cart-form table tbody tr.cart_item > td {
padding: 6px 0 !important;
border: none !important;
text-align: center;
}
/* 7. Hide redundant Price/Unit — Total covers it */
.woocommerce-cart-form table tbody tr.cart_item > td.product-price {
display: none !important;
}
/* 8. Quantity stepper: centered */
.woocommerce-cart-form table tbody tr.cart_item > td.product-quantity {
text-align: center;
}
/* 9. Total: prefix label via CSS so value never overlaps */
.woocommerce-cart-form table tbody tr.cart_item > td.product-subtotal::before {
content: "Total: ";
font-weight: 600;
display: inline !important;
}
/* 10. Remove link: centered with top separator */
.woocommerce-cart-form table tbody tr.cart_item > td.mini_cart_item {
text-align: center;
border-top: 1px solid #f0f0f0 !important;
padding-top: 8px !important;
}
/* 11. Actions row: full width, no card styling */
.woocommerce-cart-form table tbody tr > td.actions {
border-top: 1px solid #e5e5e5 !important;
padding: 16px 0 8px !important;
border-radius: 0;
}
/* 12. Coupon: stacked input + button */
.vs-cart-coupon {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin-bottom: 12px;
box-sizing: border-box;
}
.vs-cart-coupon input.form-control,
.vs-cart-coupon .vs-btn {
width: 100%;
box-sizing: border-box;
}
/* 13. Action buttons: full width, stacked */
.woocommerce-cart-form td.actions .button,
.woocommerce-cart-form td.actions .vs-btn,
.woocommerce-cart-form td.actions a.vs-btn {
display: block !important;
width: 100%;
text-align: center;
margin-top: 10px;
box-sizing: border-box;
}
}
/* -----------------------------------------------
Elementor Menu Cart (mini cart): hardcode colors
so LiteSpeed cache cannot overwrite Elementor settings.
----------------------------------------------- */
/* Product name link color */
.elementor-menu-cart__product-name a {
color: #444444 !important;
}
.elementor-menu-cart__product-name a:hover {
color: #244081 !important;
}
/* Price and quantity text */
.elementor-menu-cart__product-price {
color: #444444 !important;
}
/* Remove icon */
.elementor-menu-cart__product-remove a,
.elementor-menu-cart__product-remove a::before,
.elementor-menu-cart__product-remove .elementor_remove_from_cart_button,
.elementor-menu-cart__product-remove .remove_from_cart_button {
color: #444444 !important;
}
.elementor-menu-cart__product-remove a:hover,
.elementor-menu-cart__product-remove a:hover::before {
color: #244081 !important;
}