/*
* Toy Kingdom Playful 3D Stylesheet
* Custom CSS for bubbly, 3D, and child-friendly aesthetics using specific theme colors:
* #fcc101 (Yellow), #48b916 (Green), #0076d6 (Blue), #06295d (Navy/Border), #f82f18 (Red), #ffffff (White)
*/
/* ==========================================================================
Toy Kingdom Design Tokens (refined)
========================================================================== */
:root {
/* Brand colors */
--tk-navy: #06295d;
--tk-green: #48b916;
--tk-blue: #0076d6;
--tk-yellow: #fcc101;
--tk-red: #f82f18;
--tk-cream: #FFFCE6;
/* Pastel section backgrounds */
--tk-bg-green: #E8F8EC;
--tk-bg-blue: #E8F2FF;
--tk-bg-yellow: #FFFCE6;
--tk-bg-red: #FFEAEA;
/* 3D shadow depth (refined: lighter, more premium) */
--tk-shadow-3d-card: 0 5px 0 var(--tk-navy);
--tk-shadow-3d-card-hover: 0 3px 0 var(--tk-navy);
--tk-shadow-3d-btn: 0 3px 0 var(--tk-navy);
--tk-shadow-3d-btn-hover: 0 1px 0 var(--tk-navy);
/* Borders & radii */
--tk-border: 3px solid var(--tk-navy);
--tk-border-soft: 2px solid var(--tk-navy);
--tk-radius-sm: 12px;
--tk-radius-md: 20px;
--tk-radius-lg: 28px;
--tk-radius-pill: 999px;
/* Header height (sticky offset) */
--tk-header-h: 92px;
}
/* Mobile header is shorter — reduce anchor scroll offset so jumps don't over-clear */
@media (max-width: 768px) {
:root {
--tk-header-h: 54px;
}
}
/* Anchor offset so sticky header never covers anchored content */
html {
scroll-padding-top: calc(var(--tk-header-h) + 12px);
}
/* General Styles */
body {
background-color: #ffffff; /* Clean white background */
font-family: 'Quicksand', sans-serif;
color: #06295d; /* Deep Navy Text */
overflow-x: clip !important; /* Prevent horizontal scroll without creating a scroll container (keeps position: sticky working) */
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
color: #06295d;
letter-spacing: -0.02em;
}
/* 3D Bubbly Cards (Neo-brutalist / Cartoon 3D) */
.toy-bubbly-card {
border: 3px solid #06295d !important;
border-radius: var(--tk-radius-lg) !important;
background-color: #ffffff;
box-shadow: var(--tk-shadow-3d-card) !important;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
position: relative;
overflow: hidden;
padding: 24px;
}
.toy-bubbly-card:hover {
transform: translateY(4px) !important;
box-shadow: var(--tk-shadow-3d-card-hover) !important;
}
/* Bouncy Hover Effects */
.toy-bounce {
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.toy-bounce:hover {
transform: translateY(-6px) scale(1.03);
}
/* 3D Tactile Buttons */
.wp-block-button__link {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
border-radius: var(--tk-radius-pill) !important;
border: 3px solid #06295d !important;
box-shadow: var(--tk-shadow-3d-btn) !important;
background-color: #0076d6 !important; /* Playful Blue */
color: #ffffff !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
padding: 12px 28px !important;
transition: all 0.15s ease !important;
}
.wp-block-button__link:hover {
transform: translateY(3px) !important;
box-shadow: var(--tk-shadow-3d-btn-hover) !important;
background-color: #fcc101 !important; /* Playful Yellow */
color: #06295d !important;
}
/* Image bubble style */
.toy-image-bubble {
border-radius: var(--tk-radius-lg) !important;
border: 3px solid #06295d !important;
box-shadow: var(--tk-shadow-3d-card) !important;
transition: all 0.2s ease !important;
overflow: hidden !important;
}
.toy-image-bubble:hover {
transform: translateY(4px) !important;
box-shadow: var(--tk-shadow-3d-card-hover) !important;
}
/* Playzone square image styles */
.toy-playzone-image {
width: clamp(220px, 30vw, 380px) !important;
height: clamp(220px, 30vw, 380px) !important;
border-radius: var(--tk-radius-lg) !important;
border: 3px solid #06295d !important;
box-shadow: var(--tk-shadow-3d-card) !important;
transition: all 0.3s ease !important;
overflow: hidden !important;
display: block !important;
}
.toy-playzone-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.toy-playzone-image:hover {
transform: translateY(4px) !important;
box-shadow: var(--tk-shadow-3d-card-hover) !important;
}
/* Outer Template Header Positioning */
header.wp-block-template-part {
position: sticky !important;
top: 0 !important;
z-index: 999 !important;
width: 100% !important;
}
.toy-header {
border-bottom: 3px solid #06295d !important;
background-color: #ffffff !important;
border-radius: 0 0 32px 32px;
box-shadow: 0 8px 0 rgba(6, 41, 93, 0.05) !important;
margin-bottom: 0px !important;
padding: 12px 40px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.toy-header-container {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
max-width: 1360px !important;
margin: 0 auto !important;
flex-wrap: nowrap !important;
box-sizing: border-box !important;
}
.toy-logo {
flex-shrink: 0 !important;
}
.toy-logo img,
.toy-logo a img {
max-height: 70px !important;
width: auto !important;
height: auto !important;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
display: block !important;
}
.toy-logo:hover img,
.toy-logo:hover a img {
transform: scale(1.08) rotate(-3deg) !important;
}
.toy-nav {
display: flex !important;
flex-direction: row !important;
gap: 15px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.toy-nav a {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #06295d !important;
text-decoration: none !important;
font-size: 1.05rem !important;
padding: 10px 18px !important;
border-radius: 50px !important;
transition: all 0.2s ease !important;
border: 3px solid transparent !important;
}
.toy-nav a:hover {
background-color: #fcc101 !important; /* Playful Yellow */
border-color: #06295d !important;
transform: translateY(-3px) rotate(1deg);
}
.toy-header-actions {
flex-shrink: 0 !important;
gap: 12px !important;
}
/* GTranslate block: plugin-powered language switcher, styled to match the toy UI. */
.toy-header-actions .gtranslate_wrapper,
.toy-header-actions .gt_switcher,
.toy-header-actions .gt_float_switcher,
.toy-header-actions select.gt_selector {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
}
.toy-header-actions select.gt_selector,
.toy-header-actions .gt_switcher_wrapper,
.toy-header-actions .gt_switcher,
.toy-header-actions .gt_float_switcher {
border: 3px solid #06295d !important;
border-radius: var(--tk-radius-pill) !important;
background: #ffffff !important;
color: #06295d !important;
min-height: 48px !important;
box-shadow: var(--tk-shadow-3d-btn) !important;
overflow: hidden !important;
}
.toy-header-actions .gt_float_switcher .gt-selected,
.toy-header-actions .gt_float_switcher .gt_options a,
.toy-header-actions .gt_switcher .gt_selected,
.toy-header-actions select.gt_selector {
padding: 6px 12px !important;
color: #06295d !important;
background: #ffffff !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
}
/* WooCommerce Mini Cart block replaces the old hardcoded cart button. */
.toy-header-mini-cart,
.toy-header-actions .wc-block-mini-cart {
flex-shrink: 0 !important;
}
.toy-header-actions .wc-block-mini-cart__button {
border: 3px solid #06295d !important;
border-radius: var(--tk-radius-pill) !important;
background-color: #48b916 !important;
color: #ffffff !important;
box-shadow: var(--tk-shadow-3d-btn) !important;
min-width: 48px !important;
min-height: 48px !important;
padding: 8px 14px !important;
transition: all 0.15s ease !important;
}
.toy-header-actions .wc-block-mini-cart__button:hover {
transform: translateY(3px) !important;
box-shadow: var(--tk-shadow-3d-btn-hover) !important;
background-color: #fcc101 !important;
color: #06295d !important;
}
.toy-header-actions .wc-block-mini-cart__badge {
background: #f82f18 !important;
color: #ffffff !important;
border: 2px solid #06295d !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
}
/* Ensure Full-Width Gutenberg blocks stretch edge-to-edge of the viewport */
.alignfull,
.toy-bg-yellow,
.toy-bg-green,
.toy-bg-red,
.toy-footer {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
position: relative !important;
box-sizing: border-box !important;
}
.toy-header.alignfull {
padding-left: 40px !important;
padding-right: 40px !important;
}
@media (max-width: 768px) {
.toy-header.alignfull {
padding-left: 10px !important;
padding-right: 10px !important;
}
}
/* Centered content inner wrappers inside full-width blocks */
.toy-content-container,
.alignfull > .wp-block-columns {
max-width: 1360px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
/* General Layout Containers Width Fix */
.woocommerce ul.products,
.wp-block-post-template.toy-shop-grid,
.toy-footer-grid {
max-width: 1360px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
main.wp-block-group {
max-width: none !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Shop and Query Grid - 4 Columns */
.woocommerce ul.products,
.wp-block-post-template.toy-shop-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 35px !important;
padding: 20px !important;
}
.woocommerce ul.products li.product,
.wp-block-post-template .wp-block-post {
border: 3px solid #06295d !important;
border-radius: var(--tk-radius-lg) !important;
padding: 20px !important;
box-shadow: var(--tk-shadow-3d-card) !important;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
width: 100% !important;
float: none !important;
margin: 0 !important;
}
.woocommerce ul.products li.product:hover,
.wp-block-post-template .wp-block-post:hover {
transform: translateY(4px) !important;
box-shadow: var(--tk-shadow-3d-card-hover) !important;
}
/* Loop Images - Uniform 4:3 Crop */
.woocommerce ul.products li.product img,
.wp-block-post-template .wp-block-post img {
border-radius: 20px !important;
border: 3px solid #06295d !important;
width: 100% !important;
height: 200px !important;
object-fit: cover !important;
box-shadow: 0 4px 0 #06295d !important;
display: block !important;
background-color: #ffffff !important;
}
/* Typography Inside Loop Cards */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wp-block-post-template .wp-block-post .wp-block-post-title a,
.wp-block-post-template .wp-block-post .wp-block-post-title {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
font-size: 1.3rem !important;
margin-top: 15px !important;
margin-bottom: 5px !important;
line-height: 1.3 !important;
text-decoration: none !important;
}
.woocommerce ul.products li.product .price,
.wp-block-woocommerce-product-price {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
font-size: 1.25rem !important;
margin-bottom: 15px !important;
margin-top: 5px !important;
}
/* WooCommerce Loop Button 3D Styling */
.woocommerce ul.products li.product .button,
.wp-block-post-template .wp-block-post .wp-block-woocommerce-product-button a {
border: 3px solid #06295d !important;
border-radius: 50px !important;
box-shadow: 0 5px 0 #06295d !important;
padding: 10px 20px !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
text-align: center !important;
transition: all 0.15s ease !important;
margin-top: auto !important; /* Align to card bottom */
}
.woocommerce ul.products li.product .button:hover,
.wp-block-post-template .wp-block-post .wp-block-woocommerce-product-button a:hover {
transform: translateY(3px) !important;
box-shadow: 0 2px 0 #06295d !important;
}
/* Rotating LEGO-Block Colorful Backgrounds for Catalog Cards */
.woocommerce ul.products li.product:nth-child(4n+1),
.wp-block-post-template .wp-block-post:nth-child(4n+1) {
background-color: #48b916 !important; /* Green */
color: #ffffff !important;
}
.woocommerce ul.products li.product:nth-child(4n+1) .woocommerce-loop-product__title,
.wp-block-post-template .wp-block-post:nth-child(4n+1) .wp-block-post-title,
.wp-block-post-template .wp-block-post:nth-child(4n+1) .wp-block-post-title a,
.woocommerce ul.products li.product:nth-child(4n+1) .price,
.woocommerce ul.products li.product:nth-child(4n+1) .price span,
.wp-block-post-template .wp-block-post:nth-child(4n+1) .price span {
color: #ffffff !important;
}
.woocommerce ul.products li.product:nth-child(4n+1) .button,
.wp-block-post-template .wp-block-post:nth-child(4n+1) .wp-block-woocommerce-product-button a {
background-color: #ffffff !important;
color: #06295d !important;
}
.woocommerce ul.products li.product:nth-child(4n+2),
.wp-block-post-template .wp-block-post:nth-child(4n+2) {
background-color: #0076d6 !important; /* Blue */
color: #ffffff !important;
}
.woocommerce ul.products li.product:nth-child(4n+2) .woocommerce-loop-product__title,
.wp-block-post-template .wp-block-post:nth-child(4n+2) .wp-block-post-title,
.wp-block-post-template .wp-block-post:nth-child(4n+2) .wp-block-post-title a,
.woocommerce ul.products li.product:nth-child(4n+2) .price,
.woocommerce ul.products li.product:nth-child(4n+2) .price span,
.wp-block-post-template .wp-block-post:nth-child(4n+2) .price span {
color: #ffffff !important;
}
.woocommerce ul.products li.product:nth-child(4n+2) .button,
.wp-block-post-template .wp-block-post:nth-child(4n+2) .wp-block-woocommerce-product-button a {
background-color: #ffffff !important;
color: #06295d !important;
}
.woocommerce ul.products li.product:nth-child(4n+3),
.wp-block-post-template .wp-block-post:nth-child(4n+3) {
background-color: #fcc101 !important; /* Yellow */
color: #06295d !important;
}
.woocommerce ul.products li.product:nth-child(4n+3) .woocommerce-loop-product__title,
.wp-block-post-template .wp-block-post:nth-child(4n+3) .wp-block-post-title,
.wp-block-post-template .wp-block-post:nth-child(4n+3) .wp-block-post-title a,
.woocommerce ul.products li.product:nth-child(4n+3) .price,
.woocommerce ul.products li.product:nth-child(4n+3) .price span,
.wp-block-post-template .wp-block-post:nth-child(4n+3) .price span {
color: #06295d !important;
}
.woocommerce ul.products li.product:nth-child(4n+3) .button,
.wp-block-post-template .wp-block-post:nth-child(4n+3) .wp-block-woocommerce-product-button a {
background-color: #48b916 !important;
color: #ffffff !important;
}
.woocommerce ul.products li.product:nth-child(4n+4),
.wp-block-post-template .wp-block-post:nth-child(4n+4) {
background-color: #f82f18 !important; /* Red */
color: #ffffff !important;
}
.woocommerce ul.products li.product:nth-child(4n+4) .woocommerce-loop-product__title,
.wp-block-post-template .wp-block-post:nth-child(4n+4) .wp-block-post-title,
.wp-block-post-template .wp-block-post:nth-child(4n+4) .wp-block-post-title a,
.woocommerce ul.products li.product:nth-child(4n+4) .price,
.woocommerce ul.products li.product:nth-child(4n+4) .price span,
.wp-block-post-template .wp-block-post:nth-child(4n+4) .price span {
color: #ffffff !important;
}
.woocommerce ul.products li.product:nth-child(4n+4) .button,
.wp-block-post-template .wp-block-post:nth-child(4n+4) .wp-block-woocommerce-product-button a {
background-color: #ffffff !important;
color: #06295d !important;
}
/* Category Quick Bubbles */
.toy-category-bubble {
width: 120px;
height: 120px;
box-sizing: border-box !important;
border-radius: var(--tk-radius-pill) !important;
border: 3px solid #06295d !important;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Fredoka', sans-serif;
font-weight: 700;
text-align: center;
box-shadow: var(--tk-shadow-3d-btn) !important;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
text-decoration: none !important;
}
.toy-category-bubble:hover {
transform: scale(1.1) rotate(5deg) translateY(-4px) !important;
}
/* Pill Badges */
.toy-badge {
background-color: #fcc101; /* Playful Yellow */
color: #06295d;
font-family: 'Fredoka', sans-serif;
font-weight: 600;
padding: 8px 20px;
border-radius: var(--tk-radius-pill);
border: 3px solid #06295d;
display: inline-block;
font-size: 0.9rem;
box-shadow: 0 4px 0 #06295d;
}
/* Wavy Section Dividers */
.toy-wavy-divider {
height: 24px;
background-image: url('data:image/svg+xml;utf8,');
background-size: 1200px 24px;
background-repeat: repeat-x;
width: 100%;
}
/* Custom background presets. No !important: editor-selected block backgrounds must win on the frontend. */
.toy-bg-green:not(.has-background) { background-color: #E8F8EC; }
.toy-bg-blue:not(.has-background) { background-color: #E8F2FF; }
.toy-bg-yellow:not(.has-background) { background-color: #FFFCE6; }
.toy-bg-red:not(.has-background) { background-color: #FFEAEA; }
.toy-bg-cream:not(.has-background) { background-color: #ffffff; }
/* Single Product Page Custom 3D Styling classes */
.toy-single-product-image {
border: 3px solid #06295d !important;
border-radius: var(--tk-radius-lg) !important;
overflow: hidden !important;
box-shadow: var(--tk-shadow-3d-card) !important;
background: #ffffff !important;
padding: 0 !important;
}
.toy-single-product-image img {
border-radius: 0 !important;
border: none !important;
display: block !important;
width: 100% !important;
height: auto !important;
}
.toy-single-product-price {
display: inline-block !important;
margin-bottom: 25px !important;
}
.toy-single-product-price span {
font-family: 'Fredoka', sans-serif !important;
font-size: 2rem !important;
font-weight: 700 !important;
color: #0076d6 !important; /* Playful Blue */
}
.toy-single-add-to-cart {
border-top: 3px dashed #06295d !important;
border-bottom: 3px dashed #06295d !important;
padding: 25px 0 !important;
margin-bottom: 25px !important;
}
/* Circular Toy Bubble Frame in Hero Section */
.toy-hero-image-wrap {
border-radius: var(--tk-radius-pill) !important;
overflow: hidden !important;
border: var(--tk-border) !important;
box-shadow: var(--tk-shadow-3d-card) !important;
width: clamp(220px, 30vw, 380px) !important;
height: clamp(220px, 30vw, 380px) !important;
flex-shrink: 0 !important;
animation: float 6s ease-in-out infinite;
}
.toy-hero-image-wrap img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* Floating animation for the hero image */
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-6px) rotate(1deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
/* ==========================================================================
Tablet Breakpoint (769px - 1024px)
========================================================================== */
@media (max-width: 1024px) and (min-width: 769px) {
/* Gracefully scale down shapes on tablets instead of hiding */
.toy-shape {
opacity: 0.4 !important;
transform: scale(0.6) !important;
}
.toy-shape-star-yellow,
.toy-shape-star-red {
width: 28px !important;
height: 28px !important;
}
.toy-shape-circle-orange,
.toy-shape-circle-blue,
.toy-shape-circle-red {
width: 22px !important;
height: 22px !important;
}
.toy-shape-triangle-green,
.toy-shape-triangle-blue {
width: 24px !important;
height: 24px !important;
}
.toy-shape-pill-blue {
width: 36px !important;
height: 18px !important;
}
/* Footer: 2-column layout on tablet */
.toy-footer .wp-block-columns {
flex-wrap: wrap !important;
}
.toy-footer .wp-block-columns > .wp-block-column {
flex-basis: calc(50% - 20px) !important;
min-width: calc(50% - 20px) !important;
}
/* Promo section: stack columns */
.toy-bubbly-card.toy-bg-yellow .wp-block-columns {
flex-direction: column !important;
}
.toy-bubbly-card.toy-bg-yellow .wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
text-align: center !important;
}
.toy-bubbly-card.toy-bg-yellow .wp-block-buttons {
justify-content: center !important;
}
/* Contact page columns adjust */
.toy-content-container .wp-block-columns.alignwide {
gap: 1.5rem !important;
}
/* Single product columns */
body.single-product .wp-block-columns.alignwide {
gap: 30px !important;
}
}
/* ==========================================================================
Mobile Breakpoint (max-width: 768px)
========================================================================== */
@media (max-width: 768px) {
/* Hide shapes on mobile to prevent text overlapping */
.toy-shape {
display: none !important;
}
.toy-header {
padding: 8px 10px !important;
border-radius: 0 0 16px 16px !important;
}
.toy-header-container {
flex-wrap: nowrap !important;
justify-content: space-between !important;
gap: 6px !important;
}
.toy-logo img {
max-height: 38px !important;
}
.toy-header-actions {
gap: 6px !important;
}
.toy-header-actions select.gt_selector,
.toy-header-actions .gt_switcher_wrapper,
.toy-header-actions .gt_switcher,
.toy-header-actions .gt_float_switcher {
min-height: 34px !important;
font-size: 0.72rem !important;
box-shadow: 0 3px 0 #06295d !important;
max-width: 96px !important;
}
.toy-header-actions .gt_float_switcher .gt-selected,
.toy-header-actions .gt_float_switcher .gt_options a,
.toy-header-actions select.gt_selector {
padding: 3px 8px !important;
}
.toy-header-actions .wc-block-mini-cart__button {
min-width: 36px !important;
min-height: 34px !important;
padding: 5px 8px !important;
box-shadow: 0 3px 0 #06295d !important;
}
/* Hero typography responsive limits */
.toy-hero h1 {
font-size: 2.1rem !important;
line-height: 1.2 !important;
margin-bottom: 12px !important;
}
.toy-hero p {
font-size: 0.95rem !important;
line-height: 1.5 !important;
margin-bottom: 20px !important;
}
.wp-block-button__link {
font-size: 0.9rem !important;
padding: 10px 22px !important;
}
/* WooCommerce Products Grid Responsive Fallback */
.toy-shop-grid,
ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
/* Footer: single column stacking on mobile */
.toy-footer .wp-block-columns {
flex-direction: column !important;
}
.toy-footer .wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
min-width: 100% !important;
margin-bottom: 25px !important;
}
.toy-footer {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Promo coupon section: stack and center on mobile */
.toy-bubbly-card.toy-bg-yellow .wp-block-columns {
flex-direction: column !important;
gap: 20px !important;
}
.toy-bubbly-card.toy-bg-yellow .wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
text-align: center !important;
}
.toy-bubbly-card.toy-bg-yellow .wp-block-buttons {
justify-content: center !important;
}
/* Testimonial cards: stack on mobile */
.toy-bg-red .wp-block-columns {
flex-direction: column !important;
}
.toy-bg-red .wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
margin-bottom: 20px !important;
}
/* Contact page columns: stack */
.toy-content-container .wp-block-columns.alignwide {
flex-direction: column !important;
}
.toy-content-container .wp-block-columns.alignwide > .wp-block-column {
flex-basis: 100% !important;
}
/* Single product page: stack columns */
body.single-product .wp-block-columns.alignwide {
flex-direction: column !important;
}
body.single-product .wp-block-columns.alignwide > .wp-block-column {
flex-basis: 100% !important;
}
/* Playzone section: stack and center image */
.toy-bg-green .wp-block-columns {
flex-direction: column !important;
}
.toy-bg-green .wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
text-align: center !important;
}
}
@media (max-width: 480px) {
.toy-shop-grid,
ul.products {
grid-template-columns: 1fr !important;
}
}
/* Force absolute edge-to-edge layout by removing any WordPress root wrapper constraints */
.wp-site-blocks,
.wp-block-post-content,
.entry-content {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
width: 100% !important;
}
/* Fixed-Width Centered Inner Containers for full-width sections */
.toy-content-container {
max-width: 1360px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
display: block !important;
}
/* Floating Shapes Animations & Styles */
@keyframes float-shape {
0% { transform: translateY(0px) rotate(0deg); }
100% { transform: translateY(-15px) rotate(15deg); }
}
@keyframes float-shape-pill-blue {
0% { transform: translateY(0px) rotate(25deg); }
100% { transform: translateY(-15px) rotate(35deg); }
}
@keyframes float-shape-pill-orange {
0% { transform: translateY(0px) rotate(-35deg); }
100% { transform: translateY(-15px) rotate(-20deg); }
}
.toy-shape {
position: absolute;
z-index: 1;
pointer-events: none;
user-select: none;
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.toy-shape-circle-orange {
width: 35px;
height: 35px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #fcc101, #f82f18);
border: 3px solid #06295d;
box-shadow: 0 4px 0 #06295d;
animation: float-shape 6s ease-in-out infinite alternate;
}
.toy-shape-circle-blue {
width: 40px;
height: 40px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #00d2ff, #0076d6);
border: 3px solid #06295d;
box-shadow: 0 4px 0 #06295d;
animation: float-shape 8s ease-in-out infinite alternate-reverse;
}
.toy-shape-circle-red {
width: 30px;
height: 30px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ff8a8a, #f82f18);
border: 3px solid #06295d;
box-shadow: 0 4px 0 #06295d;
animation: float-shape 5s ease-in-out infinite alternate;
}
.toy-shape-triangle-green {
width: 35px;
height: 35px;
animation: float-shape 7s ease-in-out infinite alternate;
}
.toy-shape-triangle-blue {
width: 40px;
height: 40px;
animation: float-shape 9s ease-in-out infinite alternate-reverse;
}
.toy-shape-star-yellow {
width: 42px;
height: 42px;
animation: float-shape 6.5s ease-in-out infinite alternate;
}
.toy-shape-star-red {
width: 38px;
height: 38px;
animation: float-shape 8.5s ease-in-out infinite alternate-reverse;
}
.toy-shape-pill-blue {
width: 55px;
height: 28px;
border-radius: 20px;
background: linear-gradient(135deg, #a6c0fe, #0076d6);
border: 3px solid #06295d;
box-shadow: 0 4px 0 #06295d;
animation: float-shape-pill-blue 7.5s ease-in-out infinite alternate;
}
.toy-shape-pill-orange {
width: 45px;
height: 22px;
border-radius: 20px;
background: linear-gradient(135deg, #ffe066, #fcc101);
border: 3px solid #06295d;
box-shadow: 0 4px 0 #06295d;
animation: float-shape-pill-orange 9.5s ease-in-out infinite alternate-reverse;
}
/* Desktop Hero Spacing (sticky header sits in flow; no offset hack needed) */
.toy-hero,
main.alignfull > div.toy-hero {
margin-top: 0px !important;
padding-top: 0px !important;
max-width: none !important;
width: 100% !important;
}
.toy-hero .toy-content-container {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
/* Remove bottom margins before footer to prevent gaps */
.toy-bg-red {
margin-bottom: 0px !important;
}
footer.wp-block-template-part {
margin-top: 0px !important;
margin-bottom: 0px !important;
padding-top: 0px !important;
}
/* Cloud wavy divider pixel gap corrections and full-width wrappers */
.wp-block-html:has(.toy-wavy-cloud-divider),
div:has(> .toy-wavy-cloud-divider) {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
}
.toy-wavy-cloud-divider {
width: 100% !important;
max-width: 100% !important;
margin-top: -2px !important;
margin-bottom: -2px !important;
padding: 0 !important;
line-height: 0 !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
border: none !important;
outline: none !important;
}
.toy-wavy-cloud-divider svg {
width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Footer separator viewport breakout to span full-width */
.toy-footer hr.wp-block-separator {
width: 100vw !important;
max-width: 100vw !important;
position: relative !important;
left: 50% !important;
margin-left: -50vw !important;
border: none !important;
border-top: 2.5px solid #06295d !important;
box-sizing: border-box !important;
}
/* Categories Slider & Navigation Styles */
.toy-categories-slider {
-ms-overflow-style: none !important;
scrollbar-width: none !important;
padding: 15px 5px 25px 5px !important;
box-sizing: border-box !important;
}
.toy-categories-slider::-webkit-scrollbar {
display: none !important;
}
.toy-slider-item {
flex: 0 0 calc((100% - (var(--toy-visible-slides, 4) - 1) * 24px) / var(--toy-visible-slides, 4)) !important;
width: calc((100% - (var(--toy-visible-slides, 4) - 1) * 24px) / var(--toy-visible-slides, 4)) !important;
max-width: 160px !important;
min-width: 110px !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
box-sizing: border-box !important;
border-radius: 50% !important;
scroll-snap-align: start !important;
}
.toy-slider-arrow {
background-color: #0076d6 !important;
color: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: 50% !important;
width: 45px !important;
height: 45px !important;
cursor: pointer !important;
box-shadow: 0 4px 0 #06295d !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.6rem !important;
font-weight: bold !important;
transition: all 0.15s ease !important;
position: absolute !important;
z-index: 10 !important;
outline: none !important;
}
.toy-slider-arrow-left {
left: -20px !important;
}
.toy-slider-arrow-right {
right: -20px !important;
}
.toy-slider-arrow:hover {
transform: translateY(2px) !important;
box-shadow: 0 2px 0 #06295d !important;
background-color: #fcc101 !important;
color: #06295d !important;
}
.toy-slider-arrow:active {
transform: translateY(4px) !important;
box-shadow: none !important;
}
@media (max-width: 768px) {
.toy-slider-arrow {
width: 36px !important;
height: 36px !important;
font-size: 1.2rem !important;
box-shadow: 0 2px 0 #06295d !important;
}
.toy-slider-arrow-left {
left: -15px !important;
}
.toy-slider-arrow-right {
right: -15px !important;
}
.toy-categories-slider-wrapper {
max-width: 100% !important;
}
.toy-categories-slider {
padding: 15px 30px 25px 30px !important;
gap: 12px !important;
}
.toy-slider-item {
flex: 0 0 calc((100% - 2 * 12px) / 3) !important;
width: calc((100% - 2 * 12px) / 3) !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
min-width: 80px !important;
min-height: 80px !important;
}
.toy-category-bubble div > span:first-child {
font-size: 1.6rem !important;
margin-bottom: 0px !important;
}
.toy-category-bubble div > span:last-child {
font-size: 0.75rem !important;
line-height: 1.2 !important;
}
}
@media (max-width: 400px) {
.toy-slider-item {
flex: 0 0 calc((100% - 12px) / 2) !important;
width: calc((100% - 12px) / 2) !important;
}
}
.toy-categories-slider-wrapper {
max-width: 1054px !important;
width: 100% !important;
margin: 0 auto !important;
display: flex !important;
align-items: center !important;
}
@media (max-width: 1094px) {
.toy-categories-slider-wrapper {
max-width: calc(100% - 60px) !important;
}
}
/* Mobile-Only Bubbly Navigation Styles */
@media (max-width: 768px) {
/* Hide desktop horizontal menu */
.toy-nav {
display: none !important;
}
/* Bubbly Mobile Navigation Hamburger Toggle */
.wp-block-navigation-toggle,
.wp-block-navigation__responsive-container-open {
background-color: #0076d6 !important; /* Playful Blue */
color: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: 50% !important;
width: 38px !important;
height: 38px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 3px 0 #06295d !important;
cursor: pointer !important;
padding: 0 !important;
transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
box-sizing: border-box !important;
}
.wp-block-navigation-toggle:hover,
.wp-block-navigation__responsive-container-open:hover {
background-color: #fcc101 !important; /* Playful Yellow */
color: #06295d !important;
transform: scale(1.05) !important;
}
.wp-block-navigation-toggle:active,
.wp-block-navigation__responsive-container-open:active {
transform: translateY(2px) !important;
box-shadow: none !important;
}
.wp-block-navigation-toggle svg,
.wp-block-navigation-toggle-open svg,
.wp-block-navigation__responsive-container-open svg {
width: 18px !important;
height: 18px !important;
stroke: currentColor !important;
stroke-width: 3.5px !important; /* Thicker and bolder hamburger lines */
fill: none !important;
}
.wp-block-navigation-toggle svg rect,
.wp-block-navigation-toggle svg path,
.wp-block-navigation__responsive-container-open svg rect,
.wp-block-navigation__responsive-container-open svg path {
stroke: currentColor !important;
stroke-width: 3.5px !important;
}
/* Playful Mobile Navigation Menu Overlay */
.wp-block-navigation__responsive-container.is-menu-open {
background-color: #FFF2D1 !important; /* Theme soft yellow background */
padding: 100px 20px 60px 20px !important; /* 100px top padding to clear close button */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important; /* starts at the top instead of center */
box-sizing: border-box !important;
z-index: 999999 !important;
}
/* Red Circular Close Button (Only styled/visible when menu is open) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-toggle-close {
background-color: #f82f18 !important; /* Playful Red */
color: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: 50% !important;
width: 38px !important;
height: 38px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 3px 0 #06295d !important;
position: absolute !important;
top: 20px !important;
right: 20px !important;
cursor: pointer !important;
padding: 0 !important;
transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
z-index: 1000000 !important;
box-sizing: border-box !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-toggle-close:hover {
transform: scale(1.05) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:active,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-toggle-close:active {
transform: translateY(2px) !important;
box-shadow: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-toggle-close svg {
width: 16px !important;
height: 16px !important;
stroke: currentColor !important;
stroke-width: 3.5px !important;
fill: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg path,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-toggle-close svg path {
stroke: currentColor !important;
stroke-width: 3.5px !important;
}
/* Playful Menu Links as Alternate Colorful Cards */
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__responsive-container-content {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
width: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:visited {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
font-size: 1.35rem !important;
color: #06295d !important;
border: 3px solid #06295d !important;
border-radius: 20px !important;
padding: 12px 30px !important;
display: block !important;
box-shadow: 0 5px 0 #06295d !important;
transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
text-align: center !important;
min-width: 200px !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
transform: scale(1.05) translateY(-2px) !important;
box-shadow: 0 7px 0 #06295d !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:active {
transform: scale(0.98) translateY(3px) !important;
box-shadow: 0 2px 0 #06295d !important;
}
/* Alternate Background Colors for Bubbly Cards */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4n+1) a {
background-color: #FFEAEA !important; /* Pastel Red */
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4n+2) a {
background-color: #E8F8EC !important; /* Pastel Green */
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4n+3) a {
background-color: #FFFCE6 !important; /* Pastel Yellow */
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4n+4) a {
background-color: #E8F2FF !important; /* Pastel Blue */
}
}
/* ==========================================================================
Playful 3D Cartoon WooCommerce Cart Page Styling
========================================================================== */
/* Cart Page Background */
body.woocommerce-cart,
body.woocommerce-cart .wp-site-blocks,
body.woocommerce-cart main {
background-color: #ffffff !important;
}
/* Page Title styling */
body.woocommerce-cart h1.wp-block-post-title,
.wc-block-cart__title {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #06295d !important;
font-size: 2.5rem !important;
text-align: center !important;
margin-top: 20px !important;
margin-bottom: 40px !important;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05) !important;
}
/* Cart Page Content Centering & Fixed Width Constraint */
body.woocommerce-cart main {
max-width: 1360px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
/* Cart Block Container Layout Adjustments */
.wp-block-woocommerce-cart.wc-block-cart {
margin-bottom: 80px !important;
box-sizing: border-box !important;
}
/* Individual Cart Item Cards (Left Column) */
.wc-block-cart-item {
background: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: var(--tk-radius-lg) !important;
box-shadow: var(--tk-shadow-3d-btn) !important;
padding: 24px !important;
margin-bottom: 24px !important;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
box-sizing: border-box !important;
}
.wc-block-cart-item:hover {
transform: translateY(2px) !important;
box-shadow: var(--tk-shadow-3d-card-hover) !important;
}
/* Rounded Product Image Bubbles */
.wc-block-cart-item__image img,
.wc-block-cart-item__image a img {
border: 3px solid #06295d !important;
border-radius: 18px !important;
box-shadow: 0 4px 0 #06295d !important;
transition: all 0.2s ease !important;
}
.wc-block-cart-item__image:hover img {
transform: scale(1.05) rotate(-3deg) !important;
}
/* Playful Fonts for Product Details */
.wc-block-components-product-name,
.wc-block-cart-item__wrap .wc-block-components-product-name {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #06295d !important;
font-size: 1.2rem !important;
text-decoration: none !important;
}
.wc-block-components-product-name:hover {
color: #0076d6 !important;
}
/* Price & Subtotals */
.wc-block-cart-item__prices,
.wc-block-cart-item__price,
.wc-block-components-product-price {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #06295d !important;
}
/* Custom Playful Quantity Selector */
.wc-block-components-quantity-selector {
border: 3px solid #06295d !important;
border-radius: var(--tk-radius-pill) !important;
background: #ffffff !important;
overflow: hidden !important;
box-shadow: 0 3px 0 #06295d !important;
height: 38px !important;
align-items: center !important;
}
.wc-block-components-quantity-selector__button {
border: none !important;
background: #0076d6 !important; /* Brand Blue */
color: #ffffff !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
cursor: pointer !important;
width: 32px !important;
height: 100% !important;
transition: all 0.15s ease !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.wc-block-components-quantity-selector__button:hover {
background: #fcc101 !important; /* Brand Yellow */
color: #06295d !important;
}
.wc-block-components-quantity-selector__input {
border: none !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #06295d !important;
font-size: 1rem !important;
text-align: center !important;
background: transparent !important;
}
/* Remove item link */
.wc-block-cart-item__remove-link {
color: #f82f18 !important; /* Playful Red */
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
text-decoration: underline !important;
transition: all 0.15s ease !important;
}
.wc-block-cart-item__remove-link:hover {
color: #06295d !important;
transform: scale(1.05) !important;
}
/* Cart Totals Sidebar Card (Right Column) */
.wc-block-cart__totals {
background: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: var(--tk-radius-lg) !important;
box-shadow: var(--tk-shadow-3d-card) !important;
padding: 30px !important;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
box-sizing: border-box !important;
}
.wc-block-cart__totals:hover {
transform: translateY(2px) !important;
box-shadow: 0 6px 0 #06295d !important;
}
/* Totals Header & Text */
.wc-block-cart__totals-title,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #06295d !important;
}
.wc-block-cart__totals-title {
font-size: 1.6rem !important;
border-bottom: 3px dashed #06295d !important;
padding-bottom: 12px !important;
margin-bottom: 20px !important;
}
/* Playful Coupon Toggle Accordion */
.wc-block-components-totals-coupon {
border: 3px solid #06295d !important;
border-radius: 20px !important;
background: #ffffff !important;
margin-bottom: 20px !important;
overflow: hidden !important;
box-shadow: 0 4px 0 #06295d !important;
}
.wc-block-components-panel__button {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #06295d !important;
background: #E8F2FF !important; /* Soft Blue */
padding: 12px 18px !important;
border: none !important;
border-bottom: 3px solid #06295d !important;
width: 100% !important;
text-align: left !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
.wc-block-components-panel__button:hover {
background: #FFFCE6 !important; /* Soft Yellow */
}
/* Coupon Input & Form Styling */
.wc-block-components-totals-coupon__content {
padding: 16px !important;
background: #ffffff !important;
}
.wc-block-components-totals-coupon__input input {
border: 3px solid #06295d !important;
border-radius: 50px !important;
padding: 10px 18px !important;
font-family: 'Fredoka', sans-serif !important;
color: #06295d !important;
font-size: 0.95rem !important;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
width: 100% !important;
box-sizing: border-box !important;
}
.wc-block-components-totals-coupon__button {
border: 3px solid #06295d !important;
border-radius: 50px !important;
background-color: #48b916 !important; /* Playful Green */
color: #ffffff !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
box-shadow: 0 4px 0 #06295d !important;
cursor: pointer !important;
padding: 10px 20px !important;
transition: all 0.15s ease !important;
margin-top: 10px !important;
}
.wc-block-components-totals-coupon__button:hover {
background-color: #fcc101 !important; /* Yellow */
color: #06295d !important;
transform: translateY(2px) !important;
box-shadow: 0 2px 0 #06295d !important;
}
/* Primary Call to Action: Proceed to Checkout Button */
a.wc-block-cart__submit-button {
background-color: #0076d6 !important; /* Playful Blue */
color: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: 50px !important;
box-shadow: var(--tk-shadow-3d-btn) !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
font-size: 1.25rem !important;
padding: 16px 32px !important;
transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
cursor: pointer !important;
box-sizing: border-box !important;
width: 100% !important;
margin-top: 20px !important;
}
a.wc-block-cart__submit-button:hover {
background-color: #fcc101 !important; /* Playful Yellow */
color: #06295d !important;
transform: translateY(3px) !important;
box-shadow: var(--tk-shadow-3d-btn-hover) !important;
}
a.wc-block-cart__submit-button:active {
transform: translateY(5px) !important;
box-shadow: 0 1px 0 #06295d !important;
}
/* ==========================================================================
Playful 3D Cartoon WooCommerce Checkout Page Styling
========================================================================== */
/* Checkout Page Background */
body.woocommerce-checkout,
body.woocommerce-checkout .wp-site-blocks,
body.woocommerce-checkout main {
background-color: #ffffff !important;
}
/* Page Title styling */
body.woocommerce-checkout h1.wp-block-post-title,
.wc-block-checkout__title {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #06295d !important;
font-size: 2.5rem !important;
text-align: center !important;
margin-top: 20px !important;
margin-bottom: 40px !important;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05) !important;
}
/* Checkout Page Content Centering & Fixed Width Constraint */
body.woocommerce-checkout main {
max-width: 1360px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
/* Individual Checkout Step Panels (Left Column) */
.wc-block-checkout__step,
.wc-block-components-checkout-step,
.wc-block-checkout-step {
background: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: var(--tk-radius-lg) !important;
box-shadow: var(--tk-shadow-3d-btn) !important;
padding: 30px !important;
margin-bottom: 24px !important;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
box-sizing: border-box !important;
}
.wc-block-checkout__step:hover,
.wc-block-components-checkout-step:hover {
transform: translateY(2px) !important;
box-shadow: var(--tk-shadow-3d-card-hover) !important;
}
/* Step Panel Titles / Section Headings */
.wc-block-components-checkout-step__title,
.wc-block-checkout__step-title,
.wc-block-checkout__step-heading {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #06295d !important;
font-size: 1.4rem !important;
}
/* Step Edit/Change Buttons */
.wc-block-components-checkout-step__heading-button,
.wc-block-checkout__step-heading-button {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #0076d6 !important;
}
/* Checkout Form Input Fields & Selects */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-form .input,
.wc-block-components-form input[type="text"],
.wc-block-components-form input[type="email"],
.wc-block-components-form input[type="tel"] {
border: 3px solid #06295d !important;
border-radius: 50px !important;
padding: 12px 20px !important;
font-family: 'Fredoka', sans-serif !important;
color: #06295d !important;
background-color: #ffffff !important;
font-size: 0.95rem !important;
box-sizing: border-box !important;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
transition: border-color 0.15s ease !important;
height: auto !important;
}
.wc-block-components-text-input input:focus {
border-color: #0076d6 !important;
outline: none !important;
}
/* Custom Playful Dropdowns */
.wc-block-components-select select,
.wc-block-components-select__select {
border: 3px solid #06295d !important;
border-radius: 50px !important;
padding: 12px 40px 12px 20px !important; /* Right padding for custom arrow */
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #06295d !important;
background-color: #ffffff !important;
font-size: 0.95rem !important;
box-sizing: border-box !important;
box-shadow: 0 4px 0 #06295d !important;
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 15px center !important;
background-size: 16px !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
height: auto !important;
}
.wc-block-components-select select:hover,
.wc-block-components-select__select:hover {
transform: translateY(2px) !important;
box-shadow: 0 2px 0 #06295d !important;
}
.wc-block-components-select select:focus,
.wc-block-components-select__select:focus {
border-color: #0076d6 !important;
outline: none !important;
}
/* Custom Playful Checkboxes */
.wc-block-components-checkbox input[type="checkbox"],
.wc-block-components-checkbox__input {
appearance: none !important;
-webkit-appearance: none !important;
width: 22px !important;
height: 22px !important;
border: 3px solid #06295d !important;
border-radius: 6px !important;
background: #ffffff !important;
box-shadow: 0 3px 0 #06295d !important;
cursor: pointer !important;
display: inline-block !important;
position: relative !important;
vertical-align: middle !important;
margin-right: 8px !important;
transition: all 0.15s ease !important;
}
.wc-block-components-checkbox input[type="checkbox"]:checked,
.wc-block-components-checkbox__input:checked {
background-color: #48b916 !important; /* Playful Green */
box-shadow: 0 1px 0 #06295d !important;
transform: translateY(2px) !important;
}
.wc-block-components-checkbox input[type="checkbox"]:checked::after,
.wc-block-components-checkbox__input:checked::after {
content: "" !important;
position: absolute !important;
left: 5px !important;
top: 1px !important;
width: 5px !important;
height: 10px !important;
border: solid #ffffff !important;
border-width: 0 3px 3px 0 !important;
transform: rotate(45deg) !important;
}
/* Checkout Labels */
.wc-block-components-text-input label,
.wc-block-components-select label {
font-family: 'Fredoka', sans-serif !important;
color: #06295d !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
}
/* Checkboxes and Radio lists */
.wc-block-components-checkbox,
.wc-block-components-radio-control,
.wc-block-components-radio-control__label,
.wc-block-components-checkbox__label {
font-family: 'Fredoka', sans-serif !important;
color: #06295d !important;
font-weight: 700 !important;
}
/* Order Summary Sidebar (Right Column) */
.wc-block-checkout__sidebar,
.wc-block-checkout__totals {
background: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: var(--tk-radius-lg) !important;
box-shadow: var(--tk-shadow-3d-card) !important;
padding: 30px !important;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
box-sizing: border-box !important;
}
.wc-block-checkout__sidebar:hover,
.wc-block-checkout__totals:hover {
transform: translateY(2px) !important;
box-shadow: 0 6px 0 #06295d !important;
}
/* Sidebar Headings & Text items */
.wc-block-components-checkout-order-summary,
.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item,
.wc-block-components-product-summary-item {
font-family: 'Fredoka', sans-serif !important;
color: #06295d !important;
font-weight: 700 !important;
}
.wc-block-components-checkout-order-summary__title {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #06295d !important;
font-size: 1.6rem !important;
border-bottom: 3px dashed #06295d !important;
padding-bottom: 12px !important;
margin-bottom: 20px !important;
}
/* Payment Methods Block & Options */
.wc-block-checkout__payment-method,
.wc-block-components-express-payment,
.wc-block-components-checkout-step .wc-block-checkout__payment-method {
border: 3px solid #06295d !important;
border-radius: 20px !important;
background: #ffffff !important;
margin-bottom: 15px !important;
padding: 16px !important;
box-shadow: 0 4px 0 #06295d !important;
box-sizing: border-box !important;
}
.wc-block-checkout__payment-method--active {
background-color: #E8F2FF !important; /* Soft active payment background */
}
/* Place Order Submit Button */
button.wc-block-checkout__submit-button,
.wc-block-components-checkout-place-order-button {
background-color: #0076d6 !important; /* Playful Blue */
color: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: 50px !important;
box-shadow: var(--tk-shadow-3d-btn) !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
font-size: 1.25rem !important;
padding: 16px 32px !important;
transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
cursor: pointer !important;
box-sizing: border-box !important;
width: 100% !important;
margin-top: 20px !important;
}
button.wc-block-checkout__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
background-color: #fcc101 !important; /* Playful Yellow */
color: #06295d !important;
transform: translateY(3px) !important;
box-shadow: var(--tk-shadow-3d-btn-hover) !important;
}
button.wc-block-checkout__submit-button:active,
.wc-block-components-checkout-place-order-button:active {
transform: translateY(5px) !important;
box-shadow: 0 1px 0 #06295d !important;
}
/* -------------------------------------------------------------------------
Responsive: stack the Cart & Checkout 2-column (items/steps <-> totals)
layout on mobile.
NOTE on selector choice: the brief's `grid-template-columns: 1fr` rule was
based on the assumption that WC renders the split as a CSS grid. The actual
WC (9.x) markup does NOT use grid here — it uses FLEXBOX: the populated
cart's `.wp-block-woocommerce-filled-cart-block` and the checkout's
`.wc-block-components-sidebar-layout` are `display:flex; flex-wrap:wrap`
with the items column at `width:65%` and totals at `width:35%`. WC ships
its OWN `@container (max-width: 699px)` collapse for these, but that
container query keys off the `.wp-block-woocommerce-cart` inline-size
(which is ~728px on a 768px viewport after the theme's 20px gutters), so
it misses the narrow-tablet band. This viewport-based rule is a
belt-and-suspenders override that forces stacking at <=768px regardless.
------------------------------------------------------------------------- */
@media (max-width: 768px) {
/* Cart: stack filled-cart items + totals columns. */
.wp-block-woocommerce-filled-cart-block,
.wc-block-components-sidebar-layout {
flex-direction: column !important;
flex-wrap: nowrap !important;
}
.wp-block-woocommerce-cart-items-block,
.wp-block-woocommerce-cart-totals-block,
.wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Keep tap targets comfortable on small screens: bump quantity selector
(default 38px) above the 44px touch minimum. Coupon input, place-order
button, and payment radios are already >=44px via the rules above
(16px vertical padding + 1.25rem text + 3px borders). */
.wc-block-components-quantity-selector {
height: 44px !important;
}
.wc-block-components-quantity-selector__button {
min-width: 44px !important;
}
}
/* ==========================================================================
Playful 3D Cartoon WooCommerce Single Product Page Styling
========================================================================== */
/* Single Product Page Background */
body.single-product,
body.single-product .wp-site-blocks,
body.single-product main {
background-color: #ffffff !important;
}
/* Single Product Page Content Centering & Fixed Width Constraint */
body.single-product main {
max-width: 1360px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
/* Product Title */
body.single-product h1.wp-block-post-title {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #06295d !important;
font-size: 2.8rem !important;
line-height: 1.1 !important;
}
/* Product Image Gallery bubbly card layout */
.toy-single-product-image,
.woocommerce-product-gallery,
.woocommerce-product-gallery--with-images {
background: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: var(--tk-radius-lg) !important;
box-shadow: var(--tk-shadow-3d-card) !important;
padding: 0 !important;
overflow: hidden !important;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
box-sizing: border-box !important;
}
.toy-single-product-image img,
.woocommerce-product-gallery img,
.woocommerce-product-gallery--with-images img {
border-radius: 0 !important;
border: none !important;
display: block !important;
}
.toy-single-product-image:hover,
.woocommerce-product-gallery:hover {
transform: translateY(-2px) !important;
box-shadow: var(--tk-shadow-3d-card-hover) !important;
}
/* Product Rating stars */
.woocommerce-product-rating,
.woocommerce-product-rating .star-rating {
font-family: 'Fredoka', sans-serif !important;
color: #fcc101 !important; /* Star Yellow */
font-size: 1.1rem !important;
font-weight: 700 !important;
}
/* Product Price */
.toy-single-product-price,
.woocommerce-product-details__short-description + .price,
body.single-product .price,
body.single-product .price ins,
body.single-product .price amount {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #0076d6 !important; /* Playful Blue */
font-size: 2rem !important;
}
/* Quantity inputs */
.woocommerce-page .quantity,
.woocommerce .quantity {
border: 3px solid #06295d !important;
border-radius: 50px !important;
background: #ffffff !important;
box-shadow: 0 3px 0 #06295d !important;
display: inline-flex !important;
align-items: center !important;
overflow: hidden !important;
height: 48px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.woocommerce-page .quantity input.qty,
.woocommerce .quantity input.qty {
border: none !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: #06295d !important;
text-align: center !important;
font-size: 1.1rem !important;
background: transparent !important;
width: 60px !important;
height: 100% !important;
padding: 0 !important;
}
/* Single Add to Cart Button */
.woocommerce-page button.single_add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.toy-single-add-to-cart button {
background-color: #0076d6 !important; /* Playful Blue */
color: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: 50px !important;
box-shadow: var(--tk-shadow-3d-btn) !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
font-size: 1.25rem !important;
padding: 12px 30px !important;
transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 48px !important;
margin-left: 10px !important;
box-sizing: border-box !important;
}
.woocommerce-page button.single_add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover {
background-color: #fcc101 !important; /* Playful Yellow */
color: #06295d !important;
transform: translateY(3px) !important;
box-shadow: var(--tk-shadow-3d-btn-hover) !important;
}
.woocommerce-page button.single_add_to_cart_button:active,
.woocommerce button.single_add_to_cart_button:active {
transform: translateY(5px) !important;
box-shadow: 0 1px 0 #06295d !important;
}
/* Hide default WooCommerce Related Products section title to avoid duplicate headings */
.related.products > h2 {
display: none !important;
}
/* Related products ("You Might Also Like"): use flexbox so the 2-3 cards pack
from the left (flex-start) and align with the section heading. The shop
grid's auto-fill CSS grid left an empty first column, pushing cards toward
the center/right; flexbox left-packs reliably regardless of item count. */
.related.products ul.products {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
grid-template-columns: none !important;
gap: 35px !important;
}
.related.products ul.products li.product {
width: 280px !important;
max-width: 280px !important;
flex: 0 0 280px !important;
}
/* Prevent rogue breaks or paragraphs from breaking card alignment */
.woocommerce ul.products li.product br {
display: none !important;
}
.woocommerce ul.products li.product p {
margin: 0 !important;
padding: 0 !important;
display: contents !important;
}
/* Category Page, Archive Page, and Contact Page Spacing Adjustments */
body.page-id-88 .wp-site-blocks,
body.page-id-99 .wp-site-blocks,
body.woocommerce.archive .wp-site-blocks {
padding-top: 0 !important;
}
/* ==========================================================================
Toy Kingdom Product Search, Filters, and Pagination Styles
========================================================================== */
/* Two-column Layout on Desktop */
@media (min-width: 769px) {
.toy-shop-sidebar {
padding-right: 15px !important;
}
.toy-shop-content {
padding-left: 15px !important;
}
}
/* Responsive sidebar and grid spacing */
@media (max-width: 768px) {
.toy-shop-sidebar {
margin-bottom: 40px !important;
}
/* Stack the 25%/75% sidebar + grid columns vertically on mobile.
:has() is the scoping hook so only the shop/category columns collapse;
other .wp-block-columns blocks keep their own responsive rules. */
.toy-content-container .wp-block-columns:has(.toy-shop-sidebar) {
flex-direction: column !important;
}
.toy-content-container .wp-block-columns:has(.toy-shop-sidebar) > .wp-block-column {
flex-basis: 100% !important;
width: 100% !important;
}
}
/* Sidebar Widget Cards */
.toy-sidebar-widget {
background-color: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: var(--tk-radius-lg) !important;
padding: 22px !important;
box-shadow: var(--tk-shadow-3d-btn) !important;
margin-bottom: 25px !important;
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
position: relative !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.toy-sidebar-widget:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 0 #06295d !important;
}
/* Bubbly Widget Headings */
.toy-sidebar-widget h3.wp-block-heading,
.toy-shop-sidebar h3.wp-block-heading {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
font-size: 1.2rem !important;
color: #06295d !important;
margin-top: 0 !important;
margin-bottom: 15px !important;
padding-bottom: 8px !important;
border-bottom: 3px dashed #06295d !important;
display: block !important;
}
/* Bubbly Search Form Input */
.toy-sidebar-widget .wp-block-search__input,
.toy-sidebar-widget .wc-block-product-search__field {
border: 3px solid #06295d !important;
border-radius: 50px !important;
padding: 10px 18px !important;
font-family: 'Quicksand', sans-serif !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
color: #06295d !important;
width: 100% !important;
box-sizing: border-box !important;
background-color: #ffffff !important;
transition: border-color 0.2s ease !important;
}
.toy-sidebar-widget .wp-block-search__input:focus,
.toy-sidebar-widget .wc-block-product-search__field:focus {
outline: none !important;
border-color: #0076d6 !important;
}
/* Bubbly Search Form Buttons */
.toy-sidebar-widget .wp-block-search__button,
.toy-sidebar-widget .wc-block-product-search__button {
background-color: #0076d6 !important; /* Playful Blue */
color: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: 50px !important;
padding: 10px 22px !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
font-size: 0.95rem !important;
box-shadow: 0 4px 0 #06295d !important;
transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
cursor: pointer !important;
margin-top: 10px !important;
display: inline-block !important;
}
.toy-sidebar-widget .wp-block-search__button:hover,
.toy-sidebar-widget .wc-block-product-search__button:hover {
transform: translateY(2px) !important;
box-shadow: 0 2px 0 #06295d !important;
background-color: #fcc101 !important; /* Playful Yellow */
color: #06295d !important;
}
/* WooCommerce Filters Container Integration */
.wp-block-woocommerce-product-filters {
display: flex !important;
flex-direction: column !important;
gap: 0px !important;
}
/* Checkbox Lists Bubbly Styling (Categories, Stock) */
.wc-block-components-checkbox-list,
.wc-block-product-filter-status,
.wc-block-product-filter-taxonomy {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.wc-block-components-checkbox-list li,
.wc-block-product-filter-status li,
.wc-block-product-filter-taxonomy li {
margin-bottom: 8px !important;
font-family: 'Quicksand', sans-serif !important;
font-weight: 600 !important;
color: #06295d !important;
font-size: 0.95rem !important;
display: flex !important;
align-items: center !important;
transition: transform 0.15s ease !important;
}
.wc-block-components-checkbox-list li:hover {
transform: translateX(4px) !important;
}
/* Stylize Checkbox Inputs */
.wc-block-components-checkbox-list input[type="checkbox"] {
appearance: none !important;
-webkit-appearance: none !important;
background-color: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: 6px !important;
width: 20px !important;
height: 20px !important;
margin-right: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
position: relative !important;
transition: all 0.15s ease !important;
box-shadow: 0 2px 0 #06295d !important;
}
.wc-block-components-checkbox-list input[type="checkbox"]:checked {
background-color: #48b916 !important; /* Playful Green */
box-shadow: 0 1px 0 #06295d !important;
transform: translateY(1px) !important;
}
.wc-block-components-checkbox-list input[type="checkbox"]:checked::after {
content: "✔" !important;
font-size: 11px !important;
color: #ffffff !important;
font-weight: 900 !important;
display: block !important;
}
/* Category item counters */
.wc-block-components-checkbox-list-item__count,
.wc-block-components-checkbox-list li span:last-child {
background-color: #E8F2FF !important;
color: #06295d !important;
border: 2px solid #06295d !important;
border-radius: 50px !important;
padding: 2px 8px !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
margin-left: auto !important;
box-shadow: 0 2px 0 #06295d !important;
}
/* Price Slider Track */
.wc-block-components-price-slider__range-input-wrapper {
height: 10px !important;
background-color: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: 20px !important;
margin: 25px 0 15px 0 !important;
box-shadow: inset 0 2px 4px rgba(6, 41, 93, 0.1) !important;
}
.wc-block-components-price-slider__range-input-progress {
height: 100% !important;
background-color: #0076d6 !important; /* Playful Blue */
border-radius: 20px !important;
}
/* Price Slider Handles */
.wc-block-components-price-slider__range-input::-webkit-slider-thumb {
width: 22px !important;
height: 22px !important;
background-color: #fcc101 !important; /* Playful Yellow */
border: 3px solid #06295d !important;
border-radius: 50% !important;
box-shadow: 0 3px 0 #06295d !important;
cursor: pointer !important;
transition: transform 0.1s ease !important;
margin-top: -8px !important;
}
.wc-block-components-price-slider__range-input::-webkit-slider-thumb:hover {
transform: scale(1.15) !important;
background-color: #48b916 !important; /* Turn Green on hover */
}
.wc-block-components-price-slider__range-input::-webkit-slider-thumb:active {
transform: scale(0.95) !important;
box-shadow: 0 1px 0 #06295d !important;
}
.wc-block-components-price-slider__range-input::-moz-range-thumb {
width: 22px !important;
height: 22px !important;
background-color: #fcc101 !important;
border: 3px solid #06295d !important;
border-radius: 50% !important;
box-shadow: 0 3px 0 #06295d !important;
cursor: pointer !important;
transition: transform 0.1s ease !important;
}
.wc-block-components-price-slider__range-input::-moz-range-thumb:hover {
transform: scale(1.15) !important;
background-color: #48b916 !important;
}
/* Numeric Input Amounts for Price */
.wc-block-components-price-slider__controls {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
}
.wc-block-components-price-slider__amount {
border: 3px solid #06295d !important;
border-radius: 12px !important;
padding: 8px 12px !important;
font-family: 'Quicksand', sans-serif !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
color: #06295d !important;
background-color: #ffffff !important;
text-align: center !important;
max-width: 80px !important;
box-shadow: 0 3px 0 #06295d !important;
}
/* Active Filter Chips & Active List */
.wp-block-woocommerce-product-filter-active {
background-color: #FFFCE6 !important; /* Pastel Yellow widget */
border: 3px solid #06295d !important;
border-radius: 24px !important;
padding: 22px !important;
box-shadow: var(--tk-shadow-3d-btn) !important;
margin-bottom: 25px !important;
box-sizing: border-box !important;
}
.wc-block-components-active-filters-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding: 0 !important;
margin: 10px 0 0 0 !important;
list-style: none !important;
}
.wc-block-components-active-filters-list-item,
.wc-block-components-active-filters__list-item {
background-color: #ffffff !important;
color: #06295d !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
padding: 6px 14px !important;
border-radius: 50px !important;
border: 3px solid #06295d !important;
box-shadow: 0 3px 0 #06295d !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
margin: 0 !important;
}
.wc-block-components-active-filters-list-item__remove,
.wc-block-components-active-filters__list-item-remove {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
cursor: pointer !important;
font-size: 1rem !important;
color: #f82f18 !important; /* Red close button */
font-weight: 700 !important;
line-height: 1 !important;
}
.wc-block-components-active-filters-list-item__remove:hover,
.wc-block-components-active-filters__list-item-remove:hover {
transform: scale(1.2) !important;
}
/* Clear All Filters Button */
.wc-block-components-filter-reset-button,
.wc-block-components-active-filters__clear-all {
background-color: #f82f18 !important; /* Playful Red */
color: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: 50px !important;
padding: 8px 18px !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
font-size: 0.85rem !important;
box-shadow: 0 4px 0 #06295d !important;
transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
cursor: pointer !important;
margin-top: 15px !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
}
.wc-block-components-filter-reset-button:hover,
.wc-block-components-active-filters__clear-all:hover {
transform: translateY(2px) !important;
box-shadow: 0 2px 0 #06295d !important;
background-color: #ffffff !important;
color: #f82f18 !important;
}
/* Rating stars color */
.wc-block-components-product-rating__stars,
.star-rating {
color: #fcc101 !important; /* Golden stars */
}
/* Center-aligned, bubbly, 3D Pagination Numbers */
.wp-block-query-pagination,
.woocommerce-pagination,
.toy-pagination {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
margin-top: 50px !important;
margin-bottom: 50px !important;
clear: both !important;
}
.wp-block-query-pagination a,
.wp-block-query-pagination span.page-numbers,
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span.page-numbers,
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
color: #06295d !important;
background-color: #ffffff !important;
border: 3px solid #06295d !important;
border-radius: 50% !important;
width: 48px !important;
height: 48px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 0 #06295d !important;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
text-decoration: none !important;
box-sizing: border-box !important;
cursor: pointer !important;
}
/* Bouncy hover page numbers */
.wp-block-query-pagination a:hover,
.wp-block-query-pagination-numbers a:hover,
.woocommerce-pagination ul li a:hover {
transform: translateY(-3px) !important;
box-shadow: 0 7px 0 #06295d !important;
background-color: #fcc101 !important; /* Playful Yellow */
color: #06295d !important;
}
/* Active page highlight */
.wp-block-query-pagination span.current,
.wp-block-query-pagination-numbers span.current,
.woocommerce-pagination ul li span.current {
background-color: #48b916 !important; /* Playful Green */
color: #ffffff !important;
transform: scale(1.08) !important;
border-color: #06295d !important;
box-shadow: 0 4px 0 #06295d !important;
cursor: default !important;
}
/* Pill-shaped previous/next links */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.woocommerce-pagination ul li a.prev,
.woocommerce-pagination ul li a.next {
border-radius: 50px !important;
width: auto !important;
height: 48px !important;
padding: 0 20px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Product Categories List Styling (standalone block) */
.wc-block-product-categories-list,
.wc-block-product-categories ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.wc-block-product-categories-list .wc-block-product-categories-list {
margin-left: 15px !important;
margin-top: 8px !important;
}
.wc-block-product-categories-list-item {
margin-bottom: 12px !important;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
font-size: 1.05rem !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
width: 100% !important;
transition: transform 0.15s ease !important;
box-sizing: border-box !important;
}
.wc-block-product-categories-list-item:hover {
transform: translateX(6px) !important;
}
.wc-block-product-categories-list-item a {
color: #06295d !important;
text-decoration: none !important;
transition: color 0.15s ease !important;
flex-grow: 1 !important;
}
.wc-block-product-categories-list-item a:hover {
color: #0076d6 !important;
}
.wc-block-product-categories-list-item-count {
background-color: #E8F2FF !important;
color: #06295d !important;
border: 2px solid #06295d !important;
border-radius: 50px !important;
padding: 2px 10px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
margin-left: 8px !important;
box-shadow: 0 2px 0 #06295d !important;
display: inline-block !important;
line-height: 1 !important;
}
/* ==========================================================================
Contact Page Styles
========================================================================== */
.toy-contact-form {
display: flex;
flex-direction: column;
gap: 22px;
}
.toy-form-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.toy-form-row label {
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: 1.05rem;
color: #06295d;
}
.toy-form-row label .required {
color: #f82f18;
}
.toy-form-row input,
.toy-form-row textarea {
font-family: 'Quicksand', sans-serif;
font-size: 1rem;
font-weight: 500;
color: #06295d;
background-color: #ffffff;
border: 3px solid #06295d;
border-radius: 16px;
padding: 14px 18px;
box-shadow: 0 4px 0 #06295d;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
outline: none;
width: 100%;
box-sizing: border-box;
}
.toy-form-row input:focus,
.toy-form-row textarea:focus {
border-color: #0076d6;
box-shadow: 0 4px 0 #0076d6;
transform: translateY(-2px);
}
.toy-form-row input::placeholder,
.toy-form-row textarea::placeholder {
color: #a0aec0;
font-weight: 400;
}
.toy-form-row textarea {
resize: vertical;
min-height: 140px;
}
.toy-contact-submit {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 1.15rem;
color: #ffffff;
background-color: #48b916;
border: 3px solid #06295d;
border-radius: 50px;
padding: 16px 40px;
box-shadow: var(--tk-shadow-3d-btn);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
align-self: flex-start;
text-decoration: none;
display: inline-block;
}
.toy-contact-submit:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 9px 0 #06295d;
background-color: #fcc101;
color: #06295d;
}
.toy-contact-submit:active {
transform: translateY(2px);
box-shadow: 0 2px 0 #06295d;
}
/* Contact info cards spacing */
.toy-contact-info-card p,
.toy-contact-faq-card p {
margin-bottom: 0 !important;
line-height: 1.7;
}
/* Responsive contact layout */
@media (max-width: 768px) {
.toy-contact-form-card,
.toy-contact-info-card,
.toy-contact-faq-card {
box-shadow: var(--tk-shadow-3d-btn) !important;
}
.toy-contact-submit {
width: 100%;
text-align: center;
}
.toy-contact-social-card {
margin-top: 20px !important;
}
}
/* ==========================================================================
Form Submission Feedback Notices (contact + newsletter)
========================================================================== */
.tk-form-notice { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
background: #fff; border: var(--tk-border); border-radius: var(--tk-radius-md);
box-shadow: var(--tk-shadow-3d-card); padding: 14px 22px; z-index: 9999;
font-family: 'Fredoka', sans-serif; color: var(--tk-navy); max-width: calc(100vw - 32px); }
.tk-notice-success { background: var(--tk-bg-green); }
.tk-notice-error { background: var(--tk-bg-red); }
/* ==========================================================================
Footer Meta Responsive Stacking
========================================================================== */
@media (max-width: 768px) {
/* Footer bottom bar: stack copyright and address */
.toy-footer > .wp-block-group[class*="flex"] {
flex-direction: column !important;
text-align: center !important;
gap: 8px !important;
}
.toy-footer > .wp-block-group[class*="flex"] p {
text-align: center !important;
font-size: 0.8rem !important;
}
}
/* ==========================================================================
Smooth Responsive Transitions
========================================================================== */
/* Smooth transitions for elements that change size/layout across breakpoints */
.wp-block-columns,
.wp-block-column,
.toy-hero-image-wrap,
.toy-playzone-image,
.toy-bubbly-card,
.toy-sidebar-widget,
.toy-contact-form-card,
.toy-contact-info-card,
.toy-contact-social-card {
transition: all 0.3s ease !important;
}
/* ==========================================================================
Editor-Specific Shape Visibility
========================================================================== */
/* Show shapes in the block editor at reduced opacity for visual reference */
.editor-styles-wrapper .toy-shape {
display: block !important;
opacity: 0.3 !important;
pointer-events: none !important;
}
/* Ensure cloud dividers render correctly in the editor */
.editor-styles-wrapper .toy-wavy-cloud-divider {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ==========================================================================
Additional Responsive Polish
========================================================================== */
/* Ensure hero columns stack properly on mobile with centered content */
@media (max-width: 768px) {
.toy-hero .wp-block-columns {
flex-direction: column !important;
text-align: center !important;
}
.toy-hero .wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.toy-hero .wp-block-buttons {
justify-content: center !important;
}
/* Reduce heading sizes on very small screens */
h1 { font-size: 2rem !important; }
h2 { font-size: 1.75rem !important; }
h3 { font-size: 1.4rem !important; }
/* Tighter card padding on mobile */
.toy-bubbly-card {
padding: 18px !important;
}
/* Reduce card box-shadow depth on mobile for cleaner look */
.wp-block-post-template .wp-block-post {
box-shadow: 0 5px 0 #06295d !important;
}
}
/* Tablet: testimonial cards 2-column layout */
@media (max-width: 1024px) and (min-width: 769px) {
.toy-bg-red .wp-block-columns {
flex-wrap: wrap !important;
}
.toy-bg-red .wp-block-columns > .wp-block-column {
flex-basis: calc(50% - 15px) !important;
min-width: calc(50% - 15px) !important;
margin-bottom: 20px !important;
}
}
/* Fix footer separator on mobile - prevent viewport breakout issues */
@media (max-width: 768px) {
.toy-footer hr.wp-block-separator {
width: 100% !important;
max-width: 100% !important;
left: 0 !important;
margin-left: 0 !important;
}
}
/* ===== Accessibility & UX polish (Task 13) ===== */
/* Visible focus ring on all interactive elements */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 3px solid var(--tk-blue);
outline-offset: 2px;
border-radius: 4px;
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
Contact form block styling (Jetpack/WordPress form blocks)
========================================================================== */
.toy-contact-form-block {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
}
.toy-contact-form-block label,
.toy-contact-form-block .grunion-field-label {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
color: var(--tk-navy) !important;
margin-bottom: 6px !important;
}
.toy-contact-form-block input,
.toy-contact-form-block textarea,
.toy-contact-form-block select {
width: 100% !important;
border: 3px solid var(--tk-navy) !important;
border-radius: var(--tk-radius-md) !important;
background: #ffffff !important;
color: var(--tk-navy) !important;
font-family: 'Quicksand', sans-serif !important;
font-weight: 600 !important;
padding: 13px 16px !important;
box-shadow: 0 3px 0 var(--tk-navy) !important;
box-sizing: border-box !important;
}
.toy-contact-form-block textarea {
min-height: 150px !important;
resize: vertical !important;
}
.toy-contact-form-block input:focus,
.toy-contact-form-block textarea:focus,
.toy-contact-form-block select:focus {
outline: 3px solid var(--tk-yellow) !important;
outline-offset: 2px !important;
}
.toy-contact-form-block .wp-block-button {
margin-top: 6px !important;
}
/* ==========================================================================
Footer template-part helper classes (move inline styles so blocks validate)
========================================================================== */
.toy-footer-desc { font-family: 'Quicksand', sans-serif; font-size: 0.95rem; color: #06295d; line-height: 1.6; margin: 0; }
.toy-footer-heading { font-family: 'Fredoka', sans-serif; margin-bottom: 15px; color: #06295d; font-size: 1.2rem; }
.toy-footer-cat-link { margin-bottom: 10px; font-size: 0.95rem; }
.toy-footer-cat-link a,
.toy-footer-links a { color: #06295d !important; font-weight: 700 !important; text-decoration: none !important; font-family: 'Quicksand', sans-serif !important; }
.toy-footer-links { gap: 10px !important; align-items: flex-start !important; }
.toy-footer-links .wp-block-navigation-item { margin: 0 !important; }
.toy-footer-newsletter-card { padding: 20px !important; border: 3px solid var(--tk-navy) !important; box-shadow: var(--tk-shadow-3d-card) !important; text-align: center !important; }
.toy-footer-newsletter-card h4 { font-family: 'Fredoka', sans-serif; margin-bottom: 8px; font-size: 1.1rem; color: #06295d; margin-top: 0; text-align: center; }
.toy-footer-newsletter-card p { font-size: 0.85rem; margin-bottom: 12px; font-family: 'Quicksand', sans-serif; margin-top: 0; line-height: 1.4; text-align: center; }
.toy-footer-meta { font-size: 0.9rem; font-family: 'Quicksand', sans-serif; color: #06295d; font-weight: 600; }
.toy-footer-separator { margin-top: 30px; margin-bottom: 20px; border: none; border-top: 2px solid var(--tk-navy); }
/* Outer footer wrapper (border-top + vertical padding; horizontal padding is forced 0 by the .alignfull/.toy-footer !important rule above) */
.toy-footer { border-top: 3px solid var(--tk-navy); padding-top: 50px; padding-bottom: 30px; }
/* ==========================================================================
Dynamic Product Category Grid ([toy_category_grid] shortcode)
========================================================================== */
.toy-category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
width: 100%;
max-width: 1160px;
margin: 0 auto;
}
.toy-cat-card {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
text-decoration: none;
padding: 28px 26px 26px;
border: 3px solid var(--tk-navy);
border-radius: var(--tk-radius-lg);
box-shadow: var(--tk-shadow-3d-card);
transition: transform 0.2s cubic-bezier(0.175,0.885,0.32,1.275), box-shadow 0.2s cubic-bezier(0.175,0.885,0.32,1.275);
position: relative;
overflow: hidden;
min-height: 260px;
}
.toy-cat-card:hover {
transform: translateY(5px);
box-shadow: var(--tk-shadow-3d-card-hover);
}
.toy-cat-card__media {
width: 84px;
height: 84px;
border-radius: var(--tk-radius-pill);
border: 3px solid var(--tk-navy);
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 18px;
flex: 0 0 auto;
}
.toy-cat-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.toy-cat-card__initial {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 2.4rem;
line-height: 1;
color: var(--tk-navy);
}
.toy-cat-card__body { flex: 1 1 auto; }
.toy-cat-card__title {
font-family: 'Fredoka', sans-serif !important;
font-weight: 700;
font-size: 1.6rem;
margin: 0 0 8px;
line-height: 1.2;
}
.toy-cat-card__desc {
font-family: 'Quicksand', sans-serif;
font-size: 0.95rem;
line-height: 1.55;
margin: 0 0 16px;
opacity: 0.92;
}
.toy-cat-card__count {
display: inline-block;
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: 0.82rem;
padding: 4px 14px;
border-radius: var(--tk-radius-pill);
border: 2px solid var(--tk-navy);
background: #ffffff;
color: var(--tk-navy);
margin-bottom: 18px;
}
.toy-cat-card__cta {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
font-size: 0.95rem;
padding: 9px 22px;
border-radius: var(--tk-radius-pill);
border: 3px solid var(--tk-navy);
background: var(--tk-navy);
color: #ffffff;
box-shadow: var(--tk-shadow-3d-btn);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
margin-top: auto;
}
.toy-cat-card:hover .toy-cat-card__cta {
background: var(--tk-yellow);
color: var(--tk-navy);
transform: translateY(2px);
box-shadow: var(--tk-shadow-3d-btn-hover);
}
.toy-cat--green { background-color: var(--tk-green); }
.toy-cat--blue { background-color: var(--tk-blue); }
.toy-cat--yellow { background-color: var(--tk-yellow); }
.toy-cat--red { background-color: var(--tk-red); }
.toy-cat--green .toy-cat-card__title,
.toy-cat--green .toy-cat-card__desc,
.toy-cat--blue .toy-cat-card__title,
.toy-cat--blue .toy-cat-card__desc,
.toy-cat--red .toy-cat-card__title,
.toy-cat--red .toy-cat-card__desc {
color: #ffffff;
}
.toy-cat--yellow .toy-cat-card__title,
.toy-cat--yellow .toy-cat-card__desc {
color: var(--tk-navy);
}
@media (max-width: 600px) {
.toy-category-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.toy-cat-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
.toy-cat-card,
.toy-cat-card__cta {
transition: none;
}
}
/* =========================================================================
MY ACCOUNT — playful LEGO-block styling to match the rest of the site.
Targets WooCommerce .woocommerce-account markup on /my-account/.
========================================================================= */
/* Overall two-column layout: colorful nav sidebar + content card. */
.woocommerce-account .woocommerce {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 32px;
align-items: start;
}
/* Block themes wrap these children in is-layout-constrained rules that add
auto max-width and centering margins, which stops them filling their grid
cells. Force them into their columns at full cell width. */
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
grid-column: 1;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
grid-column: 2;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
box-sizing: border-box;
}
/* When there is no nav (logged-out login/register view) let content span full. */
.woocommerce-account.logged-out .woocommerce,
.woocommerce-account .woocommerce:has(> .woocommerce-form-login),
.woocommerce-account .woocommerce:has(> .woocommerce-form-register),
.woocommerce-account .woocommerce:has(> .u-columns) {
display: block;
}
/* -------- Navigation sidebar as a stack of chunky LEGO tabs -------- */
.woocommerce-MyAccount-navigation ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: 12px;
}
.woocommerce-MyAccount-navigation li {
margin: 0 !important;
padding: 0 !important;
}
.woocommerce-MyAccount-navigation li a {
display: block;
font-family: 'Fredoka', sans-serif;
font-weight: 600;
font-size: 1rem;
color: var(--tk-navy) !important;
text-decoration: none !important;
padding: 14px 20px;
background: #ffffff;
border: var(--tk-border);
border-radius: var(--tk-radius-md);
box-shadow: var(--tk-shadow-3d-btn);
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.woocommerce-MyAccount-navigation li a:hover {
transform: translateY(-2px);
box-shadow: var(--tk-shadow-3d-card);
background: var(--tk-bg-yellow);
}
/* Rotate LEGO colors across the tabs for a toybox feel. */
.woocommerce-MyAccount-navigation li:nth-child(4n+1) a { background: var(--tk-bg-green); }
.woocommerce-MyAccount-navigation li:nth-child(4n+2) a { background: var(--tk-bg-blue); }
.woocommerce-MyAccount-navigation li:nth-child(4n+3) a { background: var(--tk-bg-yellow); }
.woocommerce-MyAccount-navigation li:nth-child(4n+4) a { background: var(--tk-bg-red); }
/* Active tab: solid green with white text, like primary buttons. */
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
background: var(--tk-green) !important;
color: #ffffff !important;
box-shadow: var(--tk-shadow-3d-card);
}
/* -------- Content area card -------- */
.woocommerce-MyAccount-content {
background: #ffffff;
border: var(--tk-border);
border-radius: var(--tk-radius-lg);
box-shadow: var(--tk-shadow-3d-card);
padding: 32px;
}
.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content li {
font-family: 'Quicksand', sans-serif;
color: var(--tk-navy);
}
.woocommerce-MyAccount-content a:not(.button) {
color: var(--tk-blue);
font-weight: 600;
}
/* -------- Forms: login / register / lost password / account details ------- */
.woocommerce-account form.woocommerce-form,
.woocommerce-account form.woocommerce-EditAccountForm,
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
background: #ffffff;
border: var(--tk-border);
border-radius: var(--tk-radius-lg);
box-shadow: var(--tk-shadow-3d-card);
padding: 32px !important;
}
/* When login + register sit side by side, give them room. */
.woocommerce-account .u-columns.col2-set {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.woocommerce-account .u-columns h2,
.woocommerce-account form h2 {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
color: var(--tk-navy);
margin-top: 0;
}
/* Field labels. */
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .form-row label {
font-family: 'Fredoka', sans-serif;
font-weight: 600;
color: var(--tk-navy);
margin-bottom: 6px;
display: inline-block;
}
/* Text inputs. */
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="number"],
.woocommerce-account .woocommerce-Input {
width: 100%;
box-sizing: border-box;
padding: 12px 16px;
font-family: 'Quicksand', sans-serif;
font-size: 0.95rem;
color: var(--tk-navy);
background: #ffffff;
border: var(--tk-border-soft) !important;
border-radius: var(--tk-radius-md) !important;
box-shadow: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.woocommerce-account input:focus {
outline: none;
border-color: var(--tk-green) !important;
box-shadow: 0 0 0 4px var(--tk-bg-green);
}
/* Password field wrapper + show/hide eye. */
.woocommerce-account .woocommerce-password-hint {
font-family: 'Quicksand', sans-serif;
font-size: 0.8rem;
color: var(--tk-navy);
opacity: 0.75;
}
/* -------- Buttons: Log in / Register / Save / Submit -------- */
.woocommerce-account .woocommerce-Button,
.woocommerce-account form .button,
.woocommerce-account button.button[type="submit"] {
display: inline-block;
font-family: 'Fredoka', sans-serif !important;
font-weight: 700 !important;
font-size: 1rem !important;
color: #ffffff !important;
background: var(--tk-green) !important;
border: var(--tk-border) !important;
border-radius: var(--tk-radius-pill) !important;
box-shadow: var(--tk-shadow-3d-btn) !important;
padding: 12px 32px !important;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account form .button:hover,
.woocommerce-account button.button[type="submit"]:hover {
transform: translateY(2px);
box-shadow: var(--tk-shadow-3d-btn-hover) !important;
}
/* Remember me row: align checkbox + label neatly. */
.woocommerce-account .woocommerce-form-login__rememberme {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Quicksand', sans-serif;
font-weight: 600;
color: var(--tk-navy);
margin-left: 16px;
}
.woocommerce-account .woocommerce-form-login__submit {
margin-right: 8px;
}
/* Lost password link below the login button. */
.woocommerce-account .woocommerce-LostPassword {
margin-top: 16px;
}
.woocommerce-account .woocommerce-LostPassword a {
font-family: 'Fredoka', sans-serif;
font-weight: 600;
color: var(--tk-blue);
}
/* -------- Dashboard intro -------- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message,
.woocommerce-account .woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-account .woocommerce-info {
background: var(--tk-bg-green);
border: var(--tk-border-soft);
border-left: 8px solid var(--tk-green);
border-radius: var(--tk-radius-md);
font-family: 'Quicksand', sans-serif;
color: var(--tk-navy);
box-shadow: var(--tk-shadow-3d-btn);
}
/* -------- Orders table as a chunky card -------- */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account table.shop_table {
border: var(--tk-border) !important;
border-radius: var(--tk-radius-lg) !important;
border-collapse: separate !important;
border-spacing: 0 !important;
overflow: hidden;
box-shadow: var(--tk-shadow-3d-card);
background: #ffffff;
}
.woocommerce-account table.shop_table thead th {
background: var(--tk-navy) !important;
color: #ffffff !important;
font-family: 'Fredoka', sans-serif;
font-weight: 600;
padding: 16px 18px !important;
border: none !important;
}
.woocommerce-account table.shop_table tbody td {
font-family: 'Quicksand', sans-serif;
color: var(--tk-navy);
padding: 16px 18px !important;
border-top: 2px solid var(--tk-bg-blue) !important;
border-left: none !important;
border-right: none !important;
}
.woocommerce-account table.shop_table tbody tr:nth-child(even) td {
background: var(--tk-bg-yellow);
}
.woocommerce-account .woocommerce-orders-table__cell .button,
.woocommerce-account .woocommerce-orders-table .button {
padding: 8px 20px !important;
font-size: 0.85rem !important;
}
/* Order status pill. */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
font-family: 'Fredoka', sans-serif;
font-weight: 600;
}
/* -------- Addresses -------- */
.woocommerce-account .woocommerce-Addresses.addresses {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.woocommerce-account .woocommerce-Address {
background: #ffffff;
border: var(--tk-border);
border-radius: var(--tk-radius-lg);
box-shadow: var(--tk-shadow-3d-card);
padding: 24px;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
color: var(--tk-navy);
margin-top: 0;
}
.woocommerce-account .woocommerce-Address address {
font-family: 'Quicksand', sans-serif;
font-style: normal;
color: var(--tk-navy);
line-height: 1.7;
}
.woocommerce-account .woocommerce-Address .edit {
font-family: 'Fredoka', sans-serif;
font-weight: 600;
color: var(--tk-blue);
}
/* Account details: password-change fieldset. */
.woocommerce-account fieldset {
border: var(--tk-border-soft);
border-radius: var(--tk-radius-md);
padding: 20px 24px;
margin-top: 8px;
}
.woocommerce-account fieldset legend {
font-family: 'Fredoka', sans-serif;
font-weight: 700;
color: var(--tk-navy);
padding: 0 8px;
}
/* -------- Responsive: stack nav over content on tablet/mobile -------- */
@media (max-width: 900px) {
.woocommerce-account .woocommerce {
grid-template-columns: 1fr;
gap: 20px;
}
.woocommerce-MyAccount-navigation ul {
flex-direction: row;
flex-wrap: wrap;
}
.woocommerce-MyAccount-navigation li a {
padding: 10px 16px;
font-size: 0.9rem;
}
.woocommerce-account .u-columns.col2-set,
.woocommerce-account .woocommerce-Addresses.addresses {
grid-template-columns: 1fr;
}
.woocommerce-MyAccount-content,
.woocommerce-account form.woocommerce-form,
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
padding: 22px !important;
}
}
@media (max-width: 560px) {
.woocommerce-account table.shop_table thead {
display: none;
}
.woocommerce-account table.shop_table tbody td {
display: block;
text-align: right;
border-top: none !important;
}
.woocommerce-account table.shop_table tbody tr {
display: block;
border-bottom: 2px solid var(--tk-navy);
}
.woocommerce-account .woocommerce-form-login__rememberme {
margin-left: 0;
margin-top: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.woocommerce-MyAccount-navigation li a,
.woocommerce-account .woocommerce-Button,
.woocommerce-account form .button {
transition: none;
}
}