/*
Theme Name: Borocco
Theme URI: https://www.cretathemes.com/products/free-electro-store-wordpress-theme
Author: Creta Themes
Author URI: https://cretathemes.com/
Description: The Borocco theme is a cutting-edge, feature-rich template specifically designed for electronics retailers and digital marketplaces. Ideal for businesses selling consumer electronics and smart gadgets, this theme is perfect for establishing an online tech store or a vibrant electronics marketplace. Whether you run a smartphone shop, laptop outlet, gaming console retailer, or smart device seller, this theme provides a robust platform to showcase diverse products such as cameras, wearable technology, audio equipment, and other smart electronics. It seamlessly integrates with WooCommerce, supporting online store setups, dropshipping models, and multi-vendor systems, ensuring secure checkout and optimized e-commerce functionality. Its clean, retina-ready layout and responsive design promise a seamless shopping experience across devices, catering to both budget-friendly and premium electronics retailers. Visually appealing and highly customizable, the theme features interactive product galleries, dynamic sliders, and detailed product pages highlighting top brands like Apple, Samsung, Sony, and Microsoft. With strong SEO support, advanced customization options, and built-in social media integration, the Borocco theme enhances customer engagement and aims to increase sales for tech-savvy consumers. Perfect for various electronics retail formats—including gadget shops, mobile phone stores, and digital product outlets—it also supports smart filtering tools to improve product browsing and discovery.
Requires at least: 5.9
Tested up to: 7.0
Requires PHP: 5.6
Version: 1.2.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: borocco-electronics
Tags: blog, e-commerce, photography, one-column, two-columns, custom-colors, custom-menu, custom-header, full-width-template, custom-logo, footer-widgets, sticky-post, threaded-comments, right-sidebar, left-sidebar, grid-layout, custom-background, rtl-language-support, featured-images, wide-blocks, editor-style, full-site-editing, block-patterns, block-styles, style-variations, template-editing, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Borocco is based on Catch Bells WordPress Theme, 2012-2025
Catch Bells is distributed under the terms of the GNU GPL.
*/

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25ch;
}

a {
  text-decoration: underline;
}

.wp-block-button__link {
  text-decoration: none;
}

.wp-block-navigation:where(:not([class*="has-text-decoration"])) a {
  text-decoration: none;
}

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
  background-color: var(--wp--preset--color--foreground);
  border-radius: 0;
  border: none;
  color: var(--wp--preset--color--background);
  font-size: var(--wp--preset--font-size--medium);
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
}

.wp-site-blocks,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.slider .wp-block-cover,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align="full"]>.wp-block-group,
.is-root-container .wp-block[data-align="full"]>.wp-block-cover {
  padding-left: var(--wp--custom--spacing--outer);
  padding-right: var(--wp--custom--spacing--outer);
}

.wp-site-blocks .alignfull,
.wp-site-blocks>.wp-block-group.has-background,
.wp-site-blocks>.wp-block-cover,
.wp-site-blocks>.wp-block-template-part>.wp-block-group.has-background,
.wp-site-blocks>.wp-block-template-part>.wp-block-cover,
body>.is-root-container>.wp-block-group.has-background,
body>.is-root-container>.wp-block-cover,
body>.is-root-container>.wp-block-template-part>.wp-block-group.has-background,
body>.is-root-container>.wp-block-template-part>.wp-block-cover,
.is-root-container .wp-block[data-align="full"] {
  margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
  width: unset;
}

/* Blocks inside columns don't have negative margins. */
.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
.is-root-container .wp-block[data-align="full"]>*:not(.wp-block-group) .wp-block[data-align="full"] {
  margin-left: auto !important;
  margin-right: auto !important;
  width: inherit;
}

.wp-block-navigation__responsive-container.is-menu-open {
  padding-top: var(--wp--custom--spacing--outer);
  padding-bottom: var(--wp--custom--spacing--large);
  padding-right: var(--wp--custom--spacing--outer);
  padding-left: var(--wp--custom--spacing--outer);
}

figure.wp-block-image {
  margin-top: 0;
}

.wp-block-post-meta>*,
.wp-block-post-meta .wp-block-post-author__name {
  text-transform: none;
  font-size: var(--wp--preset--font-size--small);
}

[class*="wp-container-"] .wp-block-columns {
  gap: var(--wp--custom--spacing--column-gap);
}

[class*="wp-container-"] .wp-block-columns+.wp-block-columns {
  margin-top: var(--wp--custom--spacing--column-gap);
}

.feature-content-section .wp-block-post-template.is-flex-container,
.wp-block-query-loop.is-flex-container {
  gap: var(--wp--custom--spacing--column-gap);
}

pre {
  white-space: pre-wrap;
  padding: 25px;
  box-sizing: border-box;
}

/* (Custom) - Added this code to make group and cover full width in editor which has alignfull class(after 6.0) body>. */
is-root-container:not(.wp-site-blocks),
body>.is-root-container:not(.wp-site-blocks) .wp-block-group.alignfull,
body>.is-root-container:not(.wp-site-blocks) .wp-block-cover.alignfull {
  padding-left: 0;
  padding-right: 0;
}

/*-------------------------------------------------------- */
/* --- WP Block Button Style
-------------------------------------------------------- */
.wp-block-button.is-style-fill .wp-block-button__link:after {
  content: none;
}

.wp-block-button.is-style-borocco-electronics-button .wp-block-button__link {
  padding: 0 0 5px;
  background: transparent;
  text-transform: capitalize;
  position: relative;
}

.wp-block-button.is-style-borocco-electronics-button .wp-block-button__link::before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  content: '';
  transition: all .4s;
}

.wp-block-button.is-style-borocco-electronics-button .wp-block-button__link:hover,
.wp-block-button.is-style-borocco-electronics-button .wp-block-button__link:focus {
  text-decoration: none;
}

.wp-block-button.is-style-borocco-electronics-button .wp-block-button__link:hover::before {
  width: 0px;
}

.is-content-justification-center .wp-block-button.is-style-borocco-electronics-button .wp-block-button__link::before {
  left: 50%;
  --webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

[class*="wp-container-"] .wp-block-buttons {
  margin-top: 0;
}

.is-style-borocco-electronics-button .wp-block-button__link {
  background-color: transparent;
  padding: 0;
}

.is-style-borocco-electronics-button .wp-block-button__link:after {
  content: none;
}

.is-style-borocco-electronics-button .wp-block-button__link:hover,
.is-style-borocco-electronics-button .wp-block-button__link:focus {
  background: transparent;
  color: var(--wp--preset--color--primary);
  transform: none;
}

/* --- WP Block Post Comments Style
-------------------------------------------------------- */
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .commentlist>li>.children>li article,
.comment article,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .commentlist>li>.children>li article,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .commentlist>li>article {
  border-bottom: 1px solid var(--wp--preset--color--border-color);
  padding-bottom: var(--wp--custom--spacing--normal);
  padding-top: var(--wp--custom--spacing--normal);
}

.wp-block-post-comments.is-style-borocco-electronics-post-comments .commentlist>li>article {
  padding-top: 0;
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .commentlist .comment-body>*:last-child,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-respond>*:last-child,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-respond .comment-form>*:last-child,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-respond .comment-form>P:last-of-type,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .commentlist .comment-body>*:last-child,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-respond>*:last-child,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-respond .comment-form>*:last-child,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-respond .comment-form>P:last-of-type {
  margin-bottom: 0;
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-author,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .fn,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-author,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .fn {
  color: var(--wp--preset--color--foreground);
  font-size: var(--wp--preset--font-size--normal);
  font-weight: var(--wp--custom--typography--font-weight--bold);
  line-height: var(--wp--custom--typography--line-height--paragraph);
  margin-bottom: 7px;
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-content,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-content {
  margin-top: 20px;
}

.wp-block-buttons {
  margin-top: clamp(24px, 3vw, 35px);
}

.wp-block-group.wp-block-post-meta {
  gap: 15px;
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-metadata,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-metadata {
  color: var(--wp--preset--color--body-text);
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.62;
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-metadata a,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-metadata a {
  text-decoration: none;
}

.wp-block-post-comments .comment-author .avatar {
  border-radius: 50%;
  height: 65px;
  margin-right: 21px;
  width: 65px;
}


.wp-block-post-author__avatar img {
  border-radius: 50%;
}

.wp-block-post-author__avatar {
  margin-right: clamp(21px, 3vw, 35px);
}

.entry-meta svg {
  display: none;
}

.comment-metadata,
.comment-metadata .edit-link {
  font-size: var(--wp--preset--font-size--tiny);
  margin-top: 8px;
}

.comment-respond {
  padding: clamp(45px, 7vw, 75px);
  border: 1px solid;
  border-color: var(--wp--preset--color--border-color);
  margin-top: 30px;
}

.wp-block-comment-template li {
  padding: 10px 10px;
  border: 1px solid;
  border-color: var(--wp--preset--color--border-color);
  margin-bottom: 10px;
}

.comment-respond .comment-form input[type="date"],
.comment-respond .comment-form input[type="time"],
.comment-respond .comment-form input[type="datetime-local"],
.comment-respond .comment-form input[type="week"],
.comment-respond .comment-form input[type="month"],
.comment-respond .comment-form input[type="text"],
.comment-respond .comment-form input[type="email"],
.comment-respond .comment-form input[type="url"],
.comment-respond .comment-form input[type="password"],
.comment-respond .comment-form input[type="search"],
.comment-respond .comment-form input[type="tel"],
.comment-respond .comment-form input[type="number"] {
  border: none;
}

.wp-block-post-comments h3 {
  font-size: clamp(18px, 3vw, 28px);
}

.comment-reply-title {
  color: var(--wp--preset--color--heading);
  font-size: 30px;
}

.comment-reply-title,
.logged-in-as,
.comment-notes {
  text-align: center;
}

.post-navigation-link__title {
  font-weight: var(--wp--custom--typography--font-weight--normal);
}

.post-navigation-link__title:hover {
  text-decoration: underline;
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-metadata>*:not(:last-child),
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-metadata>*:not(:last-child) {
  padding-right: 10px;
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .reply,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .reply {
  font-size: var(--wp--preset--font-size--small);
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .reply a,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .reply a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: var(--wp--custom--typography--font-weight--bold);
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-respond .comment-form,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-respond .comment-form {
  font-size: var(--wp--preset--font-size--upper-heading);
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-respond .comment-form a,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-respond .comment-form .logged-in-as,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-respond .comment-form .comment-notes,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-respond .comment-form .comment-form-cookies-consent,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-respond .comment-form a,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-respond .comment-form .logged-in-as,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-respond .comment-form .comment-notes,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-respond .comment-form .comment-form-cookies-consent {
  font-size: var(--wp--preset--font-size--extra-small);
  text-decoration: none;
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments textarea,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments.is-style-borocco-electronics-post-comments textarea,
.wp-block-post-comments.is-style-borocco-electronics-post-comments input:not([type="submit"]):not([type="checkbox"]) {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid;
  border-radius: 0;
  outline: none;
  padding-left: 0;
  padding-right: 0;
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-respond .comment-form>* {
  margin-bottom: 28px;
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments textarea:focus,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments input:not([type="submit"]):not([type="checkbox"]):focus,
.wp-block-post-comments.is-style-borocco-electronics-post-comments textarea:focus,
.wp-block-post-comments.is-style-borocco-electronics-post-comments input:not([type="submit"]):not([type="checkbox"]):focus,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments textarea:focus-visible,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments input:not([type="submit"]):not([type="checkbox"]):focus-visible,
.wp-block-post-comments.is-style-borocco-electronics-post-comments textarea:focus-visible,
.wp-block-post-comments.is-style-borocco-electronics-post-comments input:not([type="submit"]):not([type="checkbox"]):focus-visible,
input:not([type="submit"]):not([type="checkbox"]):focus-visible,
input:not([type="submit"]):not([type="checkbox"]):focus,
textarea:focus,
textarea:focus-visible,
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):focus,
.wpcf7 textarea:focus,
.wpcf7 textarea:focus-visible,
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):focus-visible {
  border-color: var(--wp--preset--color--border-color);
  outline: none;
}

/* --- WP Block Latest Comments Style
-------------------------------------------------------- */
.wp-block-latest-comments.is-style-borocco-electronics-pro-latest-comments,
.wp-block-latest-comments.is-style-borocco-electronics-latest-comments {
  margin-top: 0;
  padding: 0;
}

.wp-block-latest-comments.is-style-borocco-electronics-pro-latest-comments a,
.wp-block-latest-comments.is-style-borocco-electronics-latest-comments a {
  text-decoration: none;
}

.wp-block-latest-comments.is-style-borocco-electronics-pro-latest-comments .wp-block-latest-comments__comment,
.wp-block-latest-comments.is-style-borocco-electronics-latest-comments .wp-block-latest-comments__comment {
  border-bottom: 1px solid var(--wp--preset--color--border-color);
  padding-bottom: var(--wp--custom--spacing--normal);
  padding-top: var(--wp--custom--spacing--normal);
  margin-bottom: 0;
}

.wp-block-latest-comments.is-style-borocco-electronics-pro-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt>*:last-child,
.wp-block-latest-comments.is-style-borocco-electronics-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt>*:last-child {
  margin-bottom: 0;
}

.wp-block-latest-comments.is-style-borocco-electronics-pro-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
.wp-block-latest-comments.is-style-borocco-electronics-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt {
  margin-top: 20px;
}

.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
  margin-left: 4.25em;
}

.wp-block-latest-comments .avatar,
.wp-block-latest-comments__comment-avatar {
  width: 65px;
  height: 65px;
}

.wp-block-latest-comments.is-style-borocco-electronics-pro-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-date,
.wp-block-latest-comments.is-style-borocco-electronics-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-date {
  margin-top: 7px;
  font-size: var(--wp--preset--font-size--tiny);
}

.wp-block-latest-comments.is-style-borocco-electronics-pro-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-author,
.wp-block-latest-comments.is-style-borocco-electronics-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-author {
  color: var(--wp--preset--color--heading);
  font-weight: var(--wp--custom--typography--font-weight--bold);
  line-height: var(--wp--custom--typography--line-height--paragraph);
}

.wp-block-post-author__content .wp-block-post-author__name {
  font-weight: var(--wp--custom--typography--font-weight--normal);
}

/* --- WP Block Quote Style
-------------------------------------------------------- */
.wp-block-quote.is-style-borocco-electronics-pro-block-quote p,
.wp-block-quote.is-style-borocco-electronics-block-quote p {
  color: var(--wp--preset--color--foreground);
  font-size: var(--wp--preset--font-size--content-heading);
  font-weight: var(--wp--custom--typography--font-weight--semi-bold);
  line-height: var(--wp--custom--typography--line-height--paragraph);
  font-style: italic;
  margin-top: 0;
}

.wp-block-quote.is-style-default,
.wp-block-quote.is-large:not(.is-style-plain),
.wp-block-quote.is-style-large:not(.is-style-plain),
.wp-block-quote:not(.is-style-plain) {
  border: 0;
  position: relative;
  padding: 90px 0 0 0;
}

figure.wp-block-pullquote.alignleft:not(.has-text-align-center) blockquote,
figure.wp-block-pullquote.has-text-align-left blockquote {
  margin: 0;
  text-align: left;
}

figure.wp-block-pullquote.alignright:not(.has-text-align-center) blockquote,
figure.wp-block-pullquote.has-text-align-right blockquote {
  margin: 0;
  text-align: right;
}

figure.wp-block-pullquote.aligncenter blockquote,
figure.wp-block-pullquote.has-text-align-center blockquote {
  text-align: center;
}

figure.wp-block-pullquote.has-text-align-right {
  border: 0;
  border-right: 4px solid;
}

figure.wp-block-pullquote.has-text-align-right p {
  margin-bottom: 0;
  margin-top: 0;
}

figure.wp-block-pullquote.has-text-align-left {
  border: 0;
  border-left: 4px solid;
  margin: 0;
}

figure.wp-block-pullquote.has-text-align-left blockquote,
figure.wp-block-pullquote.has-text-align-left p {
  margin-bottom: 0;
  margin-top: 0;
}

.wp-block-quote.is-style-default.has-text-align-right:before {
  right: 0;
  left: auto;
  transform: none;
}

.wp-block-quote.is-style-default.has-text-align-left:before {
  left: 0;
  transform: none;
}

.wp-block-quote.is-style-default:before,
.wp-block-quote:not(.is-style-plain):before {
  color: var(--wp--preset--color--border-color);
  content: "\201C";
  display: block;
  float: left;
  font-size: 116px;
  font-size: 9.25rem;
  font-style: normal;
  font-weight: var(--wp--custom--typography--font-weight--bold);
  height: 0;
  line-height: var(--wp--custom--typography--line-height--normal);
  position: absolute;
  margin-top: 5px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
}

.wp-block-quote.has-text-align-left {
  text-align: left;
}

.wp-block-quote.has-text-align-left:before {
  left: unset;
  transform: none;
}

.wp-block-quote {
  text-align: center;
}

.wp-block-quote.has-text-align-right {
  text-align: right;
}

.wp-block-quote.has-text-align-right:before {
  left: unset;
  right: -28px;
}

.wp-block-quote.has-text-align-center:before {
  left: 50%;
  transform: translateX(-50%);
}

.wp-block-quote.is-style-borocco-electronics-pro-block-quote cite,
.wp-block-quote.is-style-borocco-electronics-pro-block-quote footer,
.wp-block-quote.is-style-borocco-electronics-block-quote cite,
.wp-block-quote.is-style-borocco-electronics-block-quote footer {
  font-size: var(--wp--preset--font-size--small);
}

.wp-block-quote.is-style-borocco-electronics-pro-block-quote.is-style-large,
.wp-block-quote.is-style-borocco-electronics-pro-block-quote.is-large,
.wp-block-quote.is-style-borocco-electronics-block-quote.is-style-large,
.wp-block-quote.is-style-borocco-electronics-block-quote.is-large {
  color: var(--wp--preset--color--foreground);
}

/* --- WP Block Seperator Style
-------------------------------------------------------- */
.wp-block-separator {
  border-bottom: 1px solid;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  opacity: 1;
  width: 80px;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots).is-style-default {
  width: 80px;
}

.section-heading .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  margin-left: 0;
}

.section-heading .wp-block-separator:not(.is-style-wide):not(.is-style-dots).is-style-default {
  margin-left: 0;
}

/* --- WP Block Pullquote Style
-------------------------------------------------------- */
.wp-block-pullquote {
  border-bottom-color: var(--wp--preset--color--border-color);
  border-top-color: var(--wp--preset--color--border-color);
  padding: 1.75em 0;
}

.wp-block-pullquote p {
  color: var(--wp--preset--color--foreground);
  line-height: var(--wp--custom--typography--line-height--paragraph);
  font-style: italic;
  margin-top: 0;
  margin-bottom: 0;
}

.wp-block-pullquote cite,
.wp-block-pullquote footer,
.wp-block-pullquote .wp-block-pullquote__citation {
  font-size: var(--wp--preset--font-size--small);
  text-transform: none;
}

.wp-block-pullquote.alignleft,
.wp-block-pullquote.alignright,
.wp-block[data-align="left"] .wp-block-pullquote,
.wp-block[data-align="right"] .wp-block-pullquote {
  border-bottom: 0;
  border-top: 0;
}

.wp-block-pullquote.alignleft,
.wp-block-pullquote.has-text-align-left,
.wp-block[data-align="left"] .wp-block-pullquote {
  border-left: 0.25em solid var(--wp--preset--color--border-color);
  padding: 0 0 0 1.75em;
  margin-right: 0;
}

.wp-block-pullquote.alignleft.has-text-align-center,
.wp-block-pullquote.alignright.has-text-align-center {
  border: 0;
  padding: 0;
  border-bottom: 4px solid;
  border-top: 4px solid;
}

.wp-block-pullquote.alignright,
.wp-block-pullquote.has-text-align-right,
.wp-block[data-align="right"] .wp-block-pullquote {
  border-right: 0.25em solid var(--wp--preset--color--border-color);
  padding: 0 1.75em 0 0;
  margin-left: 0;
}

/* --- WP Block Table Style
-------------------------------------------------------- */
.wp-block-table.is-style-borocco-electronics-pro-wp-table td,
.wp-block-table.is-style-borocco-electronics-pro-wp-table th,
.wp-block-table.is-style-borocco-electronics-wp-table td,
.wp-block-table.is-style-borocco-electronics-wp-table th {
  border-color: var(--wp--preset--color--border-color);
  padding: 0.5em 1.4em;
}

.wp-block-table.is-style-borocco-electronics-pro-wp-table th:not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center),
.wp-block-table.is-style-borocco-electronics-wp-table th:not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center) {
  text-align: left;
}

.wp-block-table thead,
.wp-block-table.is-style-borocco-electronics-pro-wp-table thead,
.wp-block-table.is-style-borocco-electronics-wp-table thead {
  border-bottom: 1px solid;
  border-bottom-color: var(--wp--preset--color--border-color);
}

.wp-block-table tfoot {
  border-top: 1px solid;
  border-top-color: var(--wp--preset--color--border-color);
}

.wp-block-table.is-style-borocco-electronics-pro-wp-table th,
.wp-block-table.is-style-borocco-electronics-wp-table th {
  font-weight: var(--wp--custom--typography--font-weight--semi-bold);
  color: var(--wp--preset--color--foreground);
}

.wp-block-table.is-style-borocco-electronics-pro-wp-table table,
.wp-block-table.is-style-borocco-electronics-wp-table table {
  border: 1px solid var(--wp--preset--color--border-color);
}

/* --- WP Column Block Style
-------------------------------------------------------- */
.wp-block-column {
  box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* --- WP Block Search Style
-------------------------------------------------------- */
.wp-block-navigation__submenu-container {
  display: none;
}

button[aria-expandd="true"] .wp-block-navigation__submenu-container {
  display: block;
}

.wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
  width: 100%;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.wp-site-blocks>*+* {
  margin-block-start: 0;
}

.wp-block-post-meta>div:not(:first-child),
.entry-meta>div:not(:first-child) {
  padding-left: 22px;
  position: relative;
}

.wp-block-post-meta>div:not(:first-child):before,
.entry-meta>div:not(:first-child):before {
  content: "";
  height: 5px;
  border-radius: 50%;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  width: 5px;
}

.wp-block-sidebar .wp-block-widget .wp-block-categories li,
.wp-block-sidebar .wp-block-archives li {
  position: relative;
  padding-left: 36px;
}

.wp-block-sidebar .wp-block-archives li:before {
  position: absolute;
  left: 0;
  top: 7px;
  content: '';
  background-image: url(assets/images/archieve.svg);
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  background-size: 100%;
}

.wp-block-sidebar .wp-block-widget .wp-block-categories li:before {
  position: absolute;
  left: 0;
  top: 7px;
  content: '';
  background-image: url(assets/images/folder.svg);
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
  background-size: 100%;
}

/* --- Block Theme
-------------------------------------------------------- */
/* --- Theme Style
-------------------------------------------------------- */
a,
.content>.video-play:hover span,
.content>.video-play svg,
a svg.icon,
.team-section .wp-block-column:before,
#myBtn:after,
.contact-right-layout a:after,
ins,
.woocommerce #respond input#submit.alt,
.woocommerce a.button,
.woocommerce button,
.team-section .wp-block-column .wp-block-cover__inner-container,
.swiper-pagination-bullet,
.wc-block-mini-cart__button,
.wc-block-components-pagination__page,
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor,
.wp-block-post-featured-image img {
  transition: all 0.5s ease;
}

.wp-block-image img {
  vertical-align: middle;
}

pre {
  background-color: var(--wp--preset--color--primary);
}

.wp-block-group.wp-block-section .wp-block-group-heading {
  margin-bottom: var(--wp--custom--spacing--wp-comment-vertical);
}

.wp-block-image {
  margin-bottom: 1.5em;
  margin-top: var(--wp--style--block-gap, 2em);
}

footer .wp-block-image {
  margin-top: 0;
}

.header .wp-block-columns>.site-title-col {
  margin-bottom: 0;
}

.site-section {
  gap: 21px;
}

.wp-block-columns>.wp-block-column:last-child {
  margin-bottom: 0;
}

/*body:not(.home) .wp-site-blocks main {
  padding-top: var(--wp--custom--spacing--main-block-gap);
  padding-bottom: var(--wp--custom--spacing--main-block-gap); }
*/
body.home .wp-site-blocks main {
  margin-top: 0;
}

.wp-block-table,
.wp-block-audio,
.wp-block-pullquote {
  margin-top: var(--wp--style--block-gap);
}

.wp-block-latest-posts li a {
  text-decoration: none;
  font-size: 18px;
  font-size: 1.125rem;
}

.wp-block-latest-posts.is-grid li {
  margin-bottom: 0;
}

.wp-block-categories__list a,
.wp-block-categories-list a,
.wp-block-archives-list a {
  text-decoration: none;
}

.wp-block-section .wp-block-columns .wp-block-columns {
  margin-bottom: 0;
}

.no-margin-top {
  margin-top: 0;
}

.is-stacked-on-mobile .wp-block-media-text__media {
  margin-bottom: 28px;
}

body.page-template-blank .wp-site-blocks main {
  margin-top: 0;
  padding-bottom: 0;
  padding-top: 0;
}

.page-template-default .wp-site-blocks main {
  margin-bottom: 1.5rem;
}

.page-content .wp-block-quote:not(.is-style-plain):before {
  content: none;
}

.page-content .wp-block-quote {
  text-align: left;
}

.page-content blockquote {
  padding-top: 0 !important;
}

.page-content blockquote p,
.page-content p {
  font-size: var(--wp--preset--font-size--normal);
  color: var(--wp--preset--color--heading) !important;
}

/* For case study mobile view */
@media (min-width: 600px) and (max-width: 781px) {
  .wp-block-columns.case-study-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:only-child) {
    flex-basis: 50% !important;
  }
}

/* --- WP Block Site title Style
-------------------------------------------------------- */
.wp-block-site-title {
  margin-bottom: 0;
  font-size: clamp(20px, 6vw, 32px);
}

.wp-block-site-title a {
  text-decoration: none;
}

.site-title-col .wp-block-site-tagline {
  margin: 0;
}

.section-title {
  font-size: var(--wp--custom--typography--font-size--section-title);
  line-height: 1.5;
}


/* --- WP Block Navigation Main
-------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
  text-decoration: none;
}

.wp-block-buttons-header .wp-block-buttons .wp-block-button .wp-block-button__link {
  margin-top: 0;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
  border: 0;
}

.wp-block-centered-menu .wp-block-navigation {
  text-align: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
  padding: 8px 0;
}

.admin-bar .wp-block-navigation__responsive-container-close {
  top: 30px;
}

.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container,
.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container,
.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container,
.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container {
  left: 0;
  right: auto;
}

.wp-site-header .wp-block-page-list,
.wp-site-header .wp-block-navigation__container {
  justify-content: flex-start;
}

.wp-block-navigation.is-responsive .is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container {
  border: 1px solid hsla(0, 0%, 57%, .231);
  border-bottom: none;
  gap: 0 !important;
  width: 100%;
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
}

.wp-block-navigation.is-responsive .is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container li.wp-block-navigation-item a {
  border-bottom: 1px solid hsla(0, 0%, 57%, .231);
  padding: 15px 20px 15px 20px;
  width: 100%;
  text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
  padding: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container a {
  padding: 15px 20px 15px 40px !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container a:before {
  font-family: dashicons;
  content: "\f12a";
  height: 10px;
  width: 16px;
  position: relative;
  color: var(--wp--preset--color--heading);
  font-size: 10px;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  left: auto;
  bottom: auto;
  top: 3px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container ul li a:before {
  content: "\f159";
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container ul li a {
  padding: 15px 20px 15px 60px !important;
}

.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
  stroke: var(--wp--preset--color--heading);
}

.page-content .wp-block-quote:not(.is-style-plain):before {
  content: none;
}

.page-content .wp-block-quote {
  text-align: left;
}

.page-content blockquote {
  padding-top: 0 !important;
}

.page-content blockquote p {
  font-size: var(--wp--preset--font-size--normal);
  color: var(--wp--preset--color--body-text);
}

/* --- Block Navigation Footer
-------------------------------------------------------- */
.wp-block-footer.wp-block-site-generator .wp-block-navigation {
  font-size: var(--wp--preset--font-size--extra-small);
  font-weight: var(--wp--custom--typography--font-weight--normal);
  line-height: var(--wp--custom--typography--line-height--heading-four);
  text-transform: inherit;
}

.wp-block-footer .wp-block-navigation .wp-block-navigation-item__content {
  text-transform: capitalize;
}

/* --- WP Block Button
-------------------------------------------------------- */
.comment-content,
.reply {
  padding-left: clamp(82px, 6vw, 90px);
}

.wp-block-post-comments .commentlist .depth-1.parent {
  padding-left: 0;
}

.wp-block-post-comments input[type="submit"] {
  margin-top: clamp(18px, 3.5vw, 24px);
  border: 0;
  background-color: var(--wp--preset--color--primary);
  color: #fff;
  border-radius: 8px;
}

.wp-block-post-comments input[type="submit"]:focus,
.wp-block-post-comments input[type="submit"]:hover {
  outline-color: transparent;
}

.wp-block-tnp-minimal {
  margin: 0 !important;
  padding: 0 !important;
}

.is-style-outline>.wp-block-button__link:not(.has-text-color) {
  /*  border: 2px solid;*/
  overflow: hidden;
  position: relative;
  border-radius: 0;
}

.tnp.tnp-subscription-minimal form {
  border-bottom: 1px solid;
}

.tnp.tnp-subscription .tnp-field input[type="submit"] {
  border: none;
  padding: 0;
}

input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: transparent;
  border: 2px solid;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: var(--wp--custom--typography--font-weight--bold);
  line-height: var(--wp--custom--typography--line-height--paragraph);
  position: relative;
  padding-top: clamp(10px, 3vw, 15px);
  padding-right: clamp(24px, 3vw, 42px);
  padding-bottom: clamp(10px, 3vw, 15px);
  padding-left: clamp(24px, 3vw, 42px);
  text-transform: uppercase;
  text-decoration: none;
}

.wp-block-post-comments-form input[type="submit"],
.wp-block-post-comments-form input[type="reset"],
.wp-block-post-comments-form input[type="button"] {
  background-color: var(--wp--preset--color--tertiary-bg-color);
  border: 1px solid var(--wp--preset--color--border-color);
  font-weight: 500;
  border-radius: 0;
  color: var(--wp--preset--color--foreground);
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-post-excerpt__more-link,
.tnp.tnp-subscription .tnp-field input[type="submit"] {
  border: 0;
  border-radius: 0px;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--typography--font-weight--extra-bold);
  line-height: var(--wp--custom--typography--line-height--paragraph);
  position: relative;
  padding: clamp(10px, 3vw, 15px) clamp(24px, 3vw, 42px);
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
}

.archieve-post .wp-block-post-excerpt__more-link {
  font-weight: normal;
}

.tnp-subscription-minimal form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.tnp.tnp-subscription .tnp-field input[type="submit"] {
  border: 2px solid;
}

.tnp.tnp-subscription .tnp-field input[type="submit"]:hover,
.tnp.tnp-subscription .tnp-field input[type="submit"]:focus {
  border-color: transparent;
}

.tnp.tnp-subscription-minimal input.tnp-email:focus {
  outline: none;
}

.tnp.tnp-subscription-minimal input.tnp-submit {
  border: 0;
  height: 50px;
  position: relative;
  padding: 0;
  z-index: 1;
  background-color: transparent;
  color: var(--wp--preset--color--foreground);
  font-size: 16px;
  font-size: 1rem;
  width: auto;
}

.tnp.tnp-subscription-minimal input.tnp-submit[type="submit"]:hover {
  background-color: transparent;
  color: var(--wp--preset--color--body-text);
}

.tnp.tnp-subscription-minimal input.tnp-email {
  background-color: transparent;
  border: 0;
  height: 50px;
  position: relative;
  z-index: 1;
  padding: 0 14px 0 0;
  font-size: 18px;
  font-size: 1.125rem;
}

.wp-block-button__link,
.woocommerce ul.products li.product .button,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-post-excerpt__more-link,
input[type="button"],
.tnp.tnp-subscription .tnp-field input[type="submit"],
input[type="reset"],
input[type="submit"],
.wp-block-fse-pro-header-search svg,
.wp-block-fse-pro-header-social svg,
header svg,
.header svg,
.wp-block-search__button,
.wc-block-product-search .wc-block-product-search__button,
.wc-block-components-button:not(.is-link).outlined,
.woocommerce ul.products li.product a h2,
.wp-block-navigation__responsive-container,
.services .wp-block-columns .wp-block-column:not(.section-heading),
.servicess .wp-block-columns .wp-block-column:not(.section-heading) {
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
}

.wp-block-fse-pro-header-social .wp-block-social-link-anchor svg {
  transition: none;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:focus,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus,
.wp-block-post-excerpt__more-link:hover,
.wp-block-post-excerpt__more-link:focus,
form .wpcf7-submit:hover,
form .wpcf7-submit:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
form.wpcf7-form input[type="submit"]:hover,
form.wpcf7-form input[type="submit"]:focus,
.wp-block-button:not(.is-style-borocco-electronics-button) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-borocco-electronics-button) .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
  transform: translateY(-4px);
  -webkit-transform: translateY(-4px);
  -webkit-transform: translateY(-4px);
}

.wp-block-button.is-style-fill .wp-block-button__link,
.woocommerce ul.products li.product .button {
  border: 1px solid transparent;
}

.wp-block-button.is-style-fill .wp-block-button__link,
.woocommerce ul.products li.product .button {
  position: relative;
}

.header-light .wp-block-button__link:hover:after,
.header-light .wp-block-button__link:focus:after,
.wp-block-button__link:hover:after,
.wp-block-button__link:focus:after {
  outline-color: transparent;
}

/* --- WP Block Query Pagination
-------------------------------------------------------- */
.wp-block-query-pagination>.wp-block-query-pagination-numbers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  flex-wrap: wrap;
}

.wp-block-query-pagination-numbers .page-numbers {
  background-color: var(--wp--preset--color--primary);
  box-sizing: border-box;
  display: inline-block;
  border: 0;
  color: #fff;
  border-radius: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: var(--wp--preset--font-size--upper-heading);
  height: var(--wp--custom--spacing--wp-block-page-numbers);
  line-height: var(--wp--custom--typography--line-height--heading-four);
  margin-right: 7px;
  margin-bottom: 7px;
  text-decoration: none;
  text-align: center;
  width: var(--wp--custom--spacing--wp-block-page-numbers);
}

.wp-block-query-pagination-numbers .page-numbers:not(.dots):hover,
.wp-block-query-pagination-numbers .page-numbers:not(.dots):focus,
.wp-block-query-pagination-numbers .page-numbers:not(.dots).current {
  color: var(--wp--preset--color--foreground);
}

/* --- WP Block Post Terms( WP Block Post Meta)
-------------------------------------------------------- */
.taxonomy-category.wp-block-post-terms>a,
.taxonomy-post_tag.wp-block-post-terms>a,
.wp-block-post-date a,
.wp-block-post-author__name a {
  text-decoration: none;
}

.single .taxonomy-category.wp-block-post-terms>a,
.single .taxonomy-post_tag.wp-block-post-terms>a {
  background-color: transparent;
  border: 1px solid var(--wp--preset--color--border-color);
  color: var(--wp--preset--color--tertiary);
  display: inline-block;
  font-size: var(--wp--preset--font-size--extra-small);
  margin-right: 7px;
  margin-bottom: 7px;
  padding: 4px 14px;
  text-transform: capitalize;
}

.single .taxonomy-category.wp-block-post-terms>a:hover,
.single .taxonomy-category.wp-block-post-terms>a:focus,
.single .taxonomy-post_tag.wp-block-post-terms>a:hover,
.single .taxonomy-post_tag.wp-block-post-terms>a:focus {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
}

.single .taxonomy-category.wp-block-post-terms>.wp-block-post-terms__separator,
.single .taxonomy-post_tag.wp-block-post-terms>.wp-block-post-terms__separator {
  display: none;
}

.single .single-post-meta .wp-block-post-date time,
.single .single-post-meta .wp-block-post-author__name,
.page .single-post-meta .wp-block-post-date time,
.page .single-post-meta .wp-block-post-author__name,
.archieve-post .wp-block-post-author__name a,
.archieve-post .taxonomy-category.wp-block-post-terms>a {
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--typography--font-weight--medium);
  color: var(--wp--preset--color--heading);
  text-transform: uppercase;
}

/* --- single post content
-------------------------------------------------------- */
body .page-with-sidebar .wp-block-post-content.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.single .wp-block-post-content.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100%;
}

/* --- WP Block Post Navigation Link
-------------------------------------------------------- */
.wp-block-post-navigation-link .post-navigation-link__label {
  display: block;
  font-size: var(--wp--preset--font-size--extra-small);
  font-weight: var(--wp--custom--typography--font-weight--bold);
  line-height: var(--wp--custom--typography--line-height--extra-small);
  text-transform: uppercase;
}

.wp-block-post-navigation-link .post-navigation-link__label svg {
  width: 7px;
}

.post-navigation-link-next {
  margin-top: 21px;
}

.wp-block-post-navigation-link a {
  text-decoration: none;
}

.wp-block-navigation .wp-block-navigation__submenu-icon {
  margin-right: 7px;
  position: relative;
  top: -2px;
}

.header-nav .wp-block-navigation__submenu-icon {
  display: none !important;
}

.wp-block-site-logo .components-resizable-box__container {
  margin: 0 auto;
}

/* --- WP Block Post Template(wp-block-post)
-------------------------------------------------------- */
.archieve-post {
  position: relative;
}

.wp-block-post-featured-image .wp-post-image {
  max-width: 350px;
  max-height: 350px;
}

.blog-date-box {
  position: absolute;
  left: 15px;
  top: 13px;
  z-index: 99;
}

.archieve-post .wp-block-post-meta>div:not(:first-child):before {
  background: transparent;
}

.blog-date-mon {
  border-bottom: 4px solid var(--wp--preset--color--border-color);
}

.wp-block-post-title {
  margin-bottom: 0;
}

.wp-block-post-title a {
  text-decoration: none;
}

.wp-block-post-template>li .wp-block-post-container {
  margin-top: var(--wp--custom--spacing--extra-small);
}

.wp-block-post-template .wp-block-post-meta>* {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

svg.icon {
  fill: var(--wp--preset--color--body-text);
  height: 14px;
  margin-right: 7px;
  width: 14px;
  position: relative;
  top: 2px;
}

.post-navigation-link-next svg.icon {
  padding-left: 7px;
  padding-right: 0;
}

a svg.icon {
  fill: var(--wp--preset--color--foreground);
}

.archieve-post svg.icon,
.search-results svg.icon,
.single .single-post-meta svg.icon,
.page .single-post-meta svg.icon {
  fill: var(--wp--preset--color--primary);
}

.wp-block-post-excerpt>*:last-child {
  margin-bottom: 0;
}

p.wp-block-post-excerpt__excerpt {
  overflow: hidden;
  display: block;
  -webkit-line-clamp: 3;
  display: box;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}

.wp-block-post-excerpt__more-text {
  margin-top: 28px;
}

.wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link {
  padding: 0 0 5px;
  background: transparent;
  text-transform: capitalize;
  position: relative;
  font-size: 18px;
  font-size: 1.125rem;
}

.wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link::before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  content: "";
  transition: all 0.4s;
}

.wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link:hover,
.wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link:focus {
  box-shadow: none;
  background-color: transparent;
  transform: none;
  text-decoration: none;
}

.wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link:hover::before {
  width: 0px;
}

.wp-block-query-pagination {
  padding-top: var(--wp--custom--spacing--main-block-gap);
  margin-top: var(--wp--custom--spacing--main-block-gap) !important;
  border-top: 1px solid;
}

.wp-block-post-featured-image,
.slide2 .wp-block-image,
.event-1-box .wp-block-image {
  overflow: hidden;
}

.wp-block-post-featured-image:hover img {
  transform: scale(1.05);
}

.wp-block-borocco-electronics-pro-featured-content .wp-block-image .wp-block-image,
.wp-block-borocco-electronics-featured-content .wp-block-image,
.slide2 .wp-block-image,
.event-1-box .wp-block-image {
  position: relative;
}

.wp-block-borocco-electronics-pro-featured-content .wp-block-image .wp-block-image:before,
.wp-block-borocco-electronics-featured-content .wp-block-image:before,
.slide2 .wp-block-image:before,
.event-1-box .wp-block-image:before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}

.wp-block-borocco-electronics-pro-featured-content .wp-block-image .wp-block-image:hover:before,
.wp-block-borocco-electronics-featured-content .wp-block-image:hover:before,
.slide2:hover .wp-block-image:before,
.event-1-box:hover .wp-block-image:before {
  -webkit-animation: shine 0.75s;
  animation: shine 0.75s;
}

figure.wp-block-post-featured-image {
  position: relative;
  overflow: hidden;
  margin-bottom: 35px;
}
figure.wp-block-post-featured-image img {
  transition: transform 0.5s ease;
}
figure.wp-block-post-featured-image:hover img {
  transform: scale(1.1);
}
figure.wp-block-post-featured-image::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: 0.4s;
}
figure.wp-block-post-featured-image:hover::after {
  opacity: 1;
}


.wp-block-post-author {
  text-transform: capitalize;
}

/* --- WP Block Quote
-------------------------------------------------------- */
.wp-block-quote.is-style-large cite,
.wp-block-quote.is-style-large footer,
.wp-block-quote.is-large cite,
.wp-block-quote.is-large footer {
  text-align: left;
}

.wp-block-quote.has-text-align-left.is-style-large cite,
.wp-block-quote.has-text-align-left.is-style-large footer,
.wp-block-quote.has-text-align-left.is-large cite,
.wp-block-quote.has-text-align-left.is-large footer {
  text-align: left;
}

.wp-block-quote.has-text-align-right.is-style-large cite,
.wp-block-quote.has-text-align-right.is-style-large footer,
.wp-block-quote.has-text-align-right.is-large cite,
.wp-block-quote.has-text-align-right.is-large footer {
  text-align: right;
}

.wp-block-quote.has-text-align-center.is-style-large cite,
.wp-block-quote.has-text-align-center.is-style-large footer,
.wp-block-quote.has-text-align-center.is-large cite,
.wp-block-quote.has-text-align-center.is-large footer {
  text-align: center;
}

.wp-block-quote.is-style-plain,
.wp-block-quote.is-style-large,
.wp-block-quote.is-large {
  padding: 0;
}

.wp-block-quote.is-style-large p,
.wp-block-quote p,
.wp-block-pullquote.is-style-solid-color blockquote p,
.wp-block-pullquote p,
.wp-block-pullquote.alignleft p,
.wp-block-pullquote.alignright p,
.wp-block-pullquote.has-text-align-left p,
.wp-block-pullquote.has-text-align-right p,
.wp-block-quote.is-large p {
  font-size: var(--wp--preset--font-size--content-heading);
  font-weight: var(--wp--custom--typography--font-weight--normal);
}

.wp-block-quote cite,
.wp-block-pullquote cite,
.wp-block-quote footer,
.wp-block-quote.is-style-large cite {
  font-weight: var(--wp--custom--typography--font-weight--bold);
  font-size: var(--wp--preset--font-size--upper-heading);
  margin-top: 28px;
  display: block;
}

.wp-block-quote.is-style-plain {
  color: var(--wp--preset--color--foreground);
}

/* --- WP Block Table
-------------------------------------------------------- */
.wp-block-table td,
.wp-block-table th {
  padding: 14px 35px;
  text-align: left;
  vertical-align: top;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(2n + 1) {
  background-color: var(--wp--preset--color--primary);
}

.wp-block-table.is-style-stripes {
  border-bottom: 0;
}

.wp-block-table.is-style-stripes thead {
  border: 0;
  color: var(--wp--preset--color--foreground);
}

.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
  padding: 0.5em 1.4em;
}

.wp-block-table.is-style-stripe th:not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center) {
  text-align: left;
}

/* --- WP Block Search
-------------------------------------------------------- */
.wp-block-search {
  background-color: transparent;
  padding: 0;
}

.wp-block-search .wp-block-search__inside-wrapper,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  box-sizing: border-box;
  padding: 20px 30px;
}

.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
  padding: 0 20px;
  height: 55px;
}

.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input:focus,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
  outline: none;
}

.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
  cursor: pointer;
  margin: 0;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

/* --- WP Block Form and Input Fields
-------------------------------------------------------- */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="week"],
input[type="month"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea {
  padding: calc(0.667em + 2px);
  font-size: var(--wp--preset--font-size--upper-heading);
  line-height: var(--wp--custom--typography--line-height--heading-six);
  font-weight: var(--wp--custom--typography--font-weight--normal);
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="week"],
input[type="month"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea {
  transition: 0.5s ease-in-out;
  border: 1px solid;
}

input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="month"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus {
  border-color: var(--wp--preset--color--border-color);
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
  padding: 10px 20px;
}

textarea {
  max-height: 165px;
}

/* --- WP Block Embed
-------------------------------------------------------- */
.wp-block-embed {
  margin-top: var(--wp--style--block-gap);
}

/* --- WP Block Image
-------------------------------------------------------- */
.wp-block-image .alignleft {
  margin-right: 2em;
}

.wp-block-image .alignright {
  margin-left: 2em;
}

/* --- Block Widget
-------------------------------------------------------- */
.wp-block-widget-area a {
  text-decoration: none;
}

.wp-block-widget-area h2 {
  font-size: var(--wp--preset--font-size--content-heading);
  line-height: var(--wp--custom--typography--line-height--paragraph);
  font-weight: var(--wp--custom--typography--font-weight--normal);
}

.wp-block-tag-cloud>a {
  display: inline-block;
  padding: 3px 15px;
  margin: 5px 3px;
  text-decoration: none;
  font-size: 15px !important;
  background: var(--wp--preset--color--primary);
  color: #fff;
  border-radius: 6px;
}

.wp-block-widget-area ul {
  list-style: none;
  padding-left: 0 !important;
}

.wp-block-widget-area li {
  margin-bottom: 14px;
}

.wp-block-widget-area li:before,
.wp-block-widget-area li:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.wp-block-widget-area li:after {
  clear: both;
}

.wp-block-column-sidebar .wp-block-archives-list>li,
.wp-block-column-sidebar .wp-block-categories-list>li {
  text-align: right;
}

.wp-block-archives-list>li>a,
.wp-block-categories-list>li>a {
  float: left;
}

ul.wp-block-archives,
.wp-block-categories {
  padding-left: 1em;
}

/* --- Block Widget Sidebar
-------------------------------------------------------- */
.wp-block-sidebar>* h2 {
  font-weight: bold
}

.wp-block-sidebar .wp-block-latest-posts__list>li:not(:last-child) {
  border-bottom: 1px solid;
  margin-bottom: 21px;
  padding-bottom: 21px;
}

.wp-block-widget-area .wp-block-latest-posts__list>li>a {
  font-weight: var(--wp--custom--typography--font-weight--normal);
}

.wp-block-widget-area .wp-block-latest-posts__post-author,
.wp-block-widget-area .wp-block-latest-posts__post-date {
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.62;
  margin-top: 5px;
}

/* --- Block Widget Footer
-------------------------------------------------------- */
.wp-block-footer-widget-area-columns {
  margin-bottom: 0;
  padding-bottom: var(--wp--custom--spacing--wp-footer-vertical);
  padding-top: var(--wp--custom--spacing--wp-footer-vertical);
}

.wp-block-footer.wp-block-site-generator {
  font-size: var(--wp--preset--font-size--extra-small);
  margin-top: 0;
  padding-bottom: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--wp--preset--color--border-color);
}

.wp-block-footer.wp-block-site-generator a {
  text-decoration: none;
}

.wp-block-footer .wp-block-widget:not(:last-child),
.wp-block-footer .wp-block-widget>*:not(:last-child),
.wp-block-footer .wp-block-latest-posts__list>li:not(:last-child) {
  margin-bottom: var(--wp--custom--spacing--extra-small);
}

.wp-block-widget-area .wp-block-widget figure {
  line-height: 0;
  margin-bottom: 0;
}

/* --- WP Block Sections
-------------------------------------------------------- */
.wp-block-section {
  padding-bottom: var(--wp--custom--spacing--section-block-bottom);
  padding-top: var(--wp--custom--spacing--section-block-top);
}

@media screen and (max-width: 767px) {
  .wp-block-section {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

[class*="wp-container-"].slider {
  margin-bottom: var(--wp--custom--spacing--section-block-bottom);
}

.wp-block-section.is-style-borocco-electronics-pro-padding-0,
.wp-block-section.is-style-borocco-electronics-padding-0 {
  padding-bottom: 0;
  padding-top: 0;
}

/* --- Drop Cap
-------------------------------------------------------- */
.has-drop-cap:not(:focus)::first-letter {
  color: var(--wp--preset--color--foreground);
  font-weight: var(--wp--custom--typography--font-weight--bold);
  margin: 0.15em 0.15em 0 -0.07em;
  font-size: 5em;
}

/* --- WP Block Image
-------------------------------------------------------- */
.wp-block-image figure.alignright,
.wp-block-image figure.alignleft,
.wp-block[data-align="left"] .wp-block-image,
.wp-block[data-align="right"] .wp-block-image,
.wp-block-cover.alignleft,
.wp-block-cover.alignright,
.wp-block-pullquote.alignleft,
.wp-block-pullquote.alignright,
.wp-block[data-align="left"]>.wp-block-pullquote,
.wp-block[data-align="right"]>.wp-block-pullquote,
[data-align="left"]>.wp-block-cover,
[data-align="right"]>.wp-block-cover,
.wp-block-embed.alignleft,
.wp-block-embed.alignright,
.wp-block[data-align="left"]>.wp-block-embed,
.wp-block[data-align="right"]>.wp-block-embed {
  max-width: 320px;
  width: 100%;
}

.wp-block-cover.alignleft,
[data-align="left"]>.wp-block-cover,
.wp-block-embed.alignleft,
.wp-block[data-align="left"]>.wp-block-embed {
  margin-right: 2em !important;
  margin-bottom: 1.5em;
}

.wp-block-cover.alignright,
[data-align="right"]>.wp-block-cover,
.wp-block-embed.alignright,
.wp-block[data-align="right"]>.wp-block-embed {
  margin-left: 2em !important;
  margin-bottom: 1.5em;
}

/* --- WP Block Code
-------------------------------------------------------- */
.wp-block-code>code {
  border-color: var(--wp--preset--color--border-color);
}

/* --- WP Block Firgcaption
-------------------------------------------------------- */
.wp-site-blocks figure figcaption,
figure figcaption {
  font-size: var(--wp--preset--font-size--medium);
  line-height: var(--wp--custom--typography--line-height--paragraph);
  font-style: italic;
  margin-top: 14px;
}

/* --- WP Block Calendar
-------------------------------------------------------- */
.wp-block-calendar table th {
  border-color: var(--wp--preset--color--border-color);
  background-color: var(--wp--preset--color--ternary-bg-color);
}

.wp-block-calendar th,
.wp-block-calendar tbody td {
  border-color: var(--wp--preset--color--border-color);
}

.wp-block-calendar tbody td#today {
  color: var(--wp--preset--color--foreground);
  font-weight: var(--wp--custom--typography--font-weight--medium);
}

.wp-block-calendar table caption {
  color: var(--wp--preset--color--foreground);
  margin-bottom: 7px;
}

.wp-block-group.section-heading {
  margin-bottom: var(--wp--custom--spacing--section-heading);
  position: relative;
  z-index: 1;
}

.section-heading hr {
  color: var(--wp--preset--color--alternate-bg-color);
}

.header .wp-block-columns {
  padding-left: var(--wp--custom--spacing--outer);
  padding-right: var(--wp--custom--spacing--outer);
}

.wp-block-categories a,
.wp-block-archives a {
  font-size: var(--wp--preset--font-size--medium);
}

.wp-site-blocks main {
  margin-top: 0;
}

.wp-block-post-title {
  font-size: var(--wp--preset--font-size--post-title);
}

h1.wp-block-query-title,
h1.wp-block-post-title {
  font-size: var(--wp--custom--typography--font-size--heading-one);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.38;
  font-weight: normal;
}

footer.wp-block-latest-comments__comment-meta a {
  text-decoration: none;
}

.wp-block-latest-comments__comment-excerpt {
  margin-top: 14px;
}

body:not(.wp-admin) .wp-block-section.newsletter-section {
  margin-top: var(--wp--custom--spacing--section-block-top);
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .commentlist>li:last-child>article,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .commentlist>li:last-child>article {
  border-bottom: 0;
}

.wp-block-group.banner-without-bg {
  padding-top: var(--wp--custom--spacing--section-block-top);
}

ins {
  text-decoration: none;
}

main.wp-block-group>*+*,
.wp-block-section+.wp-block-section,
footer.wp-block-template-part {
  margin-top: 0;
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* --- Header
-------------------------------------------------------- */
/* --- WP Block Header
-------------------------------------------------------- */

/* header is an ELEMENT selector, not a class - WooCommerce's own archive
   title/breadcrumb wrapper (.woocommerce-products-header) is also a real
   <header> tag, so without excluding it here, it was inheriting the site
   nav's sticky/max-z-index/shadow treatment too. */
header:not(.woocommerce-products-header),
.header {
  position: sticky;
  top: 0;
  z-index: 9999;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header:not(.absolute-header) {
  padding-top: clamp(10px, 2vw, 35px);
  padding-bottom: clamp(10px, 2vw, 35px);
}

header .wp-block-buttons .wp-block-button__link {
  margin-top: 0;
}

/* Footer stays in normal flow (not fixed), but on a page short enough that
   content doesn't fill the viewport, that left a gap of blank page below
   it instead of the footer sitting flush at the bottom. Making the site's
   root wrapper a full-height flex column and letting <main> grow to fill
   whatever space is left pushes the footer down to the bottom edge on
   short pages, while long pages just push everything down naturally,
   scrolling as normal - no min-height/flex growth involved for those. */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wp-site-blocks main {
  flex: 1 0 auto;
}

.wp-site-header {
  padding: 18px 0;
}

.wp-site-header .wp-header-row {
  gap: 0;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 0;
  padding: 0 !important;
  margin: 0 !important;
}

.wp-header-row .wp-block-group.site-section {
  display: block;
  text-align: center;
}

.site-section .wp-block-site-logo {
  margin-bottom: 14px;
}

.wp-header-row .wp-block-social-links {
  display: none;
}

.wp-block-fse-pro-header-social .social-container {
  border-radius: 45px;
  -webkit-border-radius: 45px;
  -moz-border-radius: 45px;
}

.wp-block-fse-pro-header-search .search-container,
.wp-block-fse-pro-header-social .social-container {
  position: absolute;
  right: 0;
  top: 100%;
}

.wp-block-fse-pro-header-search button,
.wp-block-fse-pro-header-social button {
  transition: 0.3s ease-in-out;
}

.wp-block-fse-pro-header-search .search-container,
.wp-block-fse-pro-header-search .social-container,
.wp-block-fse-pro-header-social .search-container,
.wp-block-fse-pro-header-social .social-container {
  padding: 0;
  left: 50%;
  transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: calc(100% + 60px);
}

.wp-block-fse-pro-header-social .social-container {
  border: 1px solid;
  display: block;
  padding: 10px;
}

.wp-block-navigation__responsive-container-open:not(.always-shown) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 42px;
  height: 42px;
  justify-content: center;
  align-items: center;
}

.wp-block-fse-pro-header-search .search-controller {
  height: 42px;
  width: 42px;
}

.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
  display: none;
}

html.has-modal-open {
  overflow: auto;
}

.nav-row>.wp-block-group {
  gap: 10px;
}

.wp-block-group.nav-row {
  gap: 5px;
}

.wp-block-group.site-title-section,
.wp-block.site-title-section {
  gap: 0;
  align-items: center;
}




nav .wp-block-navigation__submenu-container>.wp-block-navigation-item a:before {
  content: none;
}

svg {
  width: 24px;
  height: 24px;
}

.wp-block-social-link:hover,
button.search-controller:hover {
  transform: scale(1.1);
  transition: all 0.4s;
}

/* --- Header Media
-------------------------------------------------------- */
/* --- Header Media
-------------------------------------------------------- */
.header-media .wp-block-cover {
  height: calc(100vh - 95px);
}

.header-media .wp-block-cover .wp-block-button__link {
  display: block;
}

.has-huge-font-size {
  line-height: 1.08;
  margin: 0;
}

.wp-site-date {
  font-weight: 700;
}

/* --- Featured Content
-------------------------------------------------------- */
.wp-block-borocco-electronics-pro-featured-content .wp-block-image,
.wp-block-borocco-electronics-featured-content .wp-block-image {
  overflow: hidden;
}

.wp-block-borocco-electronics-pro-featured-content .wp-block-image img,
.wp-block-borocco-electronics-featured-content .wp-block-image img {
  transition: all 0.5s ease;
}

.wp-block-borocco-electronics-pro-featured-content .wp-block-image:hover img,
.wp-block-borocco-electronics-featured-content .wp-block-image:hover img {
  filter: blur(0);
  transform: scale(1.05);
}

.wp-block-group.entry-meta {
  gap: 14px;
}

.wp-block-post-template li h2 {
  font-size: 30px;
  margin-top: 14px;
  font-weight: 700;
}

.wp-block-post-template .alignfull.wp-block-post-container {
  padding: 0 !important;
}

.wp-block-post-excerpt {
  margin-top: var(--wp--custom--spacing--extra-small);
}

.blog-section .wp-block-post-template,
.wp-block-post-template.alignfull {
  gap: var(--wp--custom--spacing--column-gap);
}

.wp-block-post-template figure {
  margin-bottom: var(--wp--custom--spacing--normal);
}

figure a,
.wp-block-post-title a {
  padding: 0;
}

/* --- Logo section
-------------------------------------------------------- */
.wp-block-section:not(:nth-of-type(even)).wp-block-logo {
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.wp-block-section:last-child.wp-block-logo {
  border-bottom: none;
}

/* --- CTA with Video Section
-------------------------------------------------------- */
/* --- Block CTA
-------------------------------------------------------- */
.wp-block-cta .wp-block-button__link {
  margin-top: 0;
}

.wp-block-cta-with-video .wp-block-group-heading,
.wp-block-cta-just-video .wp-block-group-heading,
.wp-block-cta .wp-block-group-heading {
  border-left: 0;
  padding-left: 0;
}

/* --- Woo
-------------------------------------------------------- */
.woocommerce-ordering select {
  padding: 6px 8px;
}

.woocommerce button.button,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  border-radius: 45px;
  font-size: var(--wp--preset--font-size--small);
  padding: clamp(10px, 8vw, 20px) clamp(32px, 8vw, 42px);
  text-transform: uppercase;
}

.woocommerce span.onsale {
  border: 1px solid;
  z-index: 1;
  /* Core's circle math (em-based min-height/min-width) assumes short text
     like "Sale!" - "Giảm giá!" is wider than that box, so it was stretching
     the badge into an oval to fit the text on one line. A fixed, equal
     width/height can't stretch, and the woocommerce_sale_flash filter now
     breaks the label after each word, so every line is only ever one word
     wide - letting the circle stay small and still a true circle. */
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 1px !important;
  border-radius: 50% !important;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1 !important;
  font-size: 9px !important;
}

.woocommerce ul.products li.product .button,
.woocommerce .wc-proceed-to-checkout a.checkout-button.alt {
  border-radius: 45px;
  text-transform: uppercase;
  padding: clamp(10px, 8vw, 20px) clamp(32px, 8vw, 42px);
}

/* Loop "Thêm vào giỏ hàng" button only - the shared .button rule further
   down (background-color/color/padding, also used by the cart, checkout
   and single-product add-to-cart buttons) sets padding:12px 30px for all of
   those at once, so this needs its own more specific-context override
   rather than editing that shared one, or every other button on the site
   would shrink along with it. Roughly half the previous height, everywhere
   this classic product grid renders (shop, category archives, related
   products). */
.woocommerce ul.products li.product .button {
  font-size: 12px;
  padding: 5px 16px !important;
}

.woocommerce .added_to_cart.wc-forward {
  margin-left: 5px;
}

.woocommerce nav.woocommerce-pagination ul {
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a {
  border-radius: 8px;
  padding: 15px;
}

.woocommerce nav.woocommerce-pagination ul li:not(:last-child) {
  margin-right: 10px;
}

.woocommerce table.variations select {
  padding: 15px;
  margin-bottom: 5px;
}

.woocommerce .single_variation_wrap input[type="number"],
.woocommerce .quantity .qty,
.woocommerce table.cart td.actions .coupon .input-text {
  padding: 12px;
  border-radius: 0;
}

.woocommerce div.product span.price {
  font-size: var(--wp--preset--font-size--extra-large);
}

.woocommerce #respond input#submit,
.woocommerce .woocommerce-message a {
  border-radius: 45px;
  font-size: var(--wp--preset--font-size--small);
  padding: clamp(10px, 3vw, 15px) clamp(32px, 3vw, 42px);
  text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: 0;
  margin: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 15px;
}

.woocommerce .woocommerce-input-wrapper textarea {
  border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-weight: var(--wp--custom--typography--font-weight--bold);
  font-size: var(--wp--preset--font-size--content-heading);
}

.woocommerce .comment-form-comment textarea {
  border-radius: 0;
  min-height: 250px;
}

.select2-container--default .select2-selection--single {
  height: 55px;
  border-radius: 45px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 55px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
}

.wc-block-mini-cart__button {
  cursor: pointer;
  opacity: 1;
  padding: 0;
}

.wc-block-mini-cart__button .wc-block-mini-cart__amount {
  font-size: var(--wp--preset--font-size--medium);
  margin: 0;
}

.wc-block-mini-cart__button span.wc-block-mini-cart__badge {
  font-size: var(--wp--preset--font-size--medium);
  border: 0;
}

.wc-block-mini-cart__button svg.wc-block-mini-cart__icon {
  font-size: 12px;
}

.woocommerce-cart .wc-block-mini-cart.wp-block-woocommerce-mini-cart {
  display: none;
}

ul.wc-block-grid__products {
  margin: 0;
  gap: var(--wp--custom--spacing--column-gap);
}

ul.wc-block-grid__products a,
ul.wc-block-grid__products ins {
  text-decoration: none;
}

ul.wc-block-grid__products .wc-block-grid__product {
  text-align: left;
  flex: auto;
}

ul.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-image img {
  width: 100%;
}

.wc-block-grid.has-3-columns .wc-block-grid__product {
  flex: auto;
}

.wc-block-grid__product {
  border: 0;
}

.wc-block-sort-select__select {
  margin-bottom: 20px;
  padding: 12px;
}

.wc-block-sort-select {
  display: flex;
  justify-content: flex-end;
}

a.wc-block-components-product-name {
  font-weight: var(--wp--custom--typography--font-weight--bold);
  font-size: var(--wp--preset--font-size--content-heading);
  text-decoration: none;
}

button.wc-block-pagination-page {
  border-radius: 8px;
  cursor: pointer;
  padding: 15px 20px;
}

.wc-block-components-button:not(.is-link).outlined:hover,
.wc-block-components-button:not(.is-link).outlined:focus {
  border-color: transparent;
}

.woocommerce ul.products li.product .onsale,
.wc-block-components-product-sale-badge span,
.wc-block-components-product-image .wc-block-components-product-sale-badge--align-right {
  border-radius: 0;
  min-height: auto;
  min-width: auto;
  text-transform: capitalize;
  top: 20px;
  line-height: 1;
  right: 20px;
  padding: 5px 10px;
}

.wc-block-components-product-sale-badge,
.wc-block-components-product-image .wc-block-components-product-sale-badge--align-right {
  background-color: transparent;
  border: 0;
  padding: 0;
}

.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button {
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--typography--font-weight--bold);
  padding-top: clamp(10px, 3vw, 15px);
  padding-right: clamp(32px, 3vw, 42px);
  padding-bottom: clamp(10px, 3vw, 15px);
  padding-left: clamp(32px, 3vw, 42px);
}

.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart.wc-block-components-button {
  box-shadow: none;
}

.wc-block-product-search .wc-block-product-search__button {
  margin: 0;
  border-radius: 0 45px 45px 0;
  padding: 15px;
}

.wc-block-product-search .wc-block-product-search__field {
  border-radius: 45px 0 0 45px;
  padding: 10px;
}

.wc-block-product-search .wc-block-product-search__field input {
  border-radius: 45px 0 0 45px;
}

.components-base-control.wc-block-product-search__field.input-control {
  padding: 0;
}

.wc-block-components-pagination {
  margin-top: 35px;
}

.wc-block-components-pagination__page:not(:last-child) {
  margin-right: 10px;
}

/* --- Footer
-------------------------------------------------------- */
.footer {
  padding-top: var(--wp--custom--spacing--footer-gap);
  padding-bottom: var(--wp--custom--spacing--footer-gap);
}

.footer .bottom-footer {
  padding-top: var(--wp--custom--spacing--footer-gap);
}

.upper-footer .wp-block-latest-posts__list li:not(:last-child) {
  padding-bottom: 21px;
  margin-bottom: 21px;
  border-bottom: 1px solid;
}

.upper-footer * {
  display: block;
  text-decoration: none;
}

.upper-footer time {
  font-size: 12px;
}

.wp-block-tnp-minimal p {
  margin-bottom: 20px;
}


.footer-title+p a {
  text-decoration: none;
}

.wp-block-latest-posts__list li {
  overflow: hidden;
}

.wp-block-latest-posts__list li .wp-block-latest-posts__featured-image {
  max-width: 60px;
  float: left;
  margin-right: 15px;
}

.wp-block-latest-posts__list li .wp-block-latest-posts__featured-image img {
  width: 100%;
}

.footer .wp-block-page-list .wp-block-pages-list__item .wp-block-pages-list__item__link,
.footer .wp-block-navigation__container>.wp-block-navigation-item a {
  font-size: 18px;
  font-weight: normal;
  text-transform: capitalize;
  text-decoration: none;
  padding: 0;
  margin: 0;
  display: block;
  width: 100%;
}

.footer ul.wp-block-page-list {
  padding: 0;
}

.footer .wp-block-page-list .wp-block-pages-list__item:not(:last-child),
.footer .wp-block-navigation .wp-block-navigation-item:not(:last-child) {
  margin-bottom: 7px;
}

.footer ul.wp-block-social-links {
  margin-left: -9px;
}

.wp-block-widget .wp-info-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-top: 14px;
}

.wp-block-widget .wp-info-group figure img {
  position: relative;
  top: 8px;
}

.featured-post-section .section-heading .is-content-justification-space-between .wp-block-button__link {
  margin: 0;
  padding: 0;
}

.featured-post-section .section-heading .is-content-justification-space-between .wp-block-button__link::before {
  display: none;
}

.wp-block-tnp-minimal {
  margin-top: var(--wp--style--block-gap) !important;
}

/* --- Block Media Quries
-------------------------------------------------------- */
/* --- > Media Queries
-------------------------------------------------------- */
/* --- > 600px
-------------------------------------------------------- */
@media screen and (min-width: 37.5em) {
  .post-navigation-link-next {
    margin-top: 0;
  }

  .wp-group-author figure.wp-block-image {
    margin-bottom: 0;
  }

  .header .wp-block-navigation .wp-block-navigation__container>li>.wp-block-navigation-item__content,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
    padding: 10px 5px;
  }

  .wp-block-columns.testimonial-columns.testimonial-three-columns>.wp-block-column:not(:last-child) {
    margin-bottom: 0px;
  }

  .testimonial-two-columns .wp-block-borocco-electronics-pro-testimonial .wp-group-author,
  .testimonial-two-columns .wp-block-borocco-electronics-testimonial .wp-group-author {
    margin-left: 0;
  }

  .wp-block-columns.testimonial-two-columns .wp-block-borocco-electronics-pro-testimonial .wp-group-content:after,
  .wp-block-columns.testimonial-two-columns .wp-block-borocco-electronics-testimonial .wp-group-content:after {
    left: 35px;
  }

  .wp-block-centered-menu .wp-block-navigation {
    text-align: left;
  }
}

/* --- > 601px
-------------------------------------------------------- */
@media screen and (min-width: 37.5625em) {
  footer .wp-block-site-generator p {
    text-align: left;
  }

  footer .wp-block-site-generator nav ul {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .hero-title {
    padding-left: 15%;
  }

  .wp-block-fse-pro-header-search .search-container,
  .wp-block-fse-pro-header-social .social-container {
    right: 0;
    width: 400px;
    left: auto;
    transform: none;
  }

  .wc-block-grid.has-3-columns .wc-block-grid__product {
    width: calc(33.33333% - 1.6em);
  }

  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
    padding: 0 8% 0 8%;
  }

  .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__content {
    padding-left: 0;
  }

  .wp-block-media-text.is-stacked-on-mobile:not(.has-media-on-the-right) .wp-block-media-text__content {
    padding-right: 0;
  }

  .is-stacked-on-mobile .wp-block-media-text__media {
    margin-bottom: 0;
  }

  .fse-slider-wrapper:hover .tns-control>button.tns-prev,
  .fse-slider-wrapper:focus .tns-control>button.tns-prev {
    left: 30px;
  }

  .fse-slider-wrapper:hover .tns-control>button.tns-next,
  .fse-slider-wrapper:focus .tns-control>button.tns-next {
    right: 30px;
  }
}

/* --- > 768px
-------------------------------------------------------- */
@media screen and (min-width: 48em) {

  .wp-block-search .wp-block-search__inside-wrapper,
  .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
    padding: 14px 21px;
  }

  .wp-site-header {
    padding: 28px 0;
  }

  .hero-content .wp-block-columns {
    gap: 20px;
  }

  .hero-content .section-title {
    padding-right: 8%;
  }

  .wp-block-navigation__responsive-container-open+.wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
    right: 0;
  }
}

/* --- > 782px
-------------------------------------------------------- */
@media screen and (min-width: 48.875em) {
  .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    left: 100%;
    right: auto;
  }

  .wp-block-sidebar-on-right .wp-block-column-sidebar {
    padding-left: var(--wp--custom--spacing--wp-block-sidebar);
  }

  .wc-block-grid.has-3-columns .wc-block-grid__product {
    width: calc(33.33333% - 1.8em);
  }

  .wp-block-sidebar-on-left .wp-block-column-sidebar {
    padding-right: var(--wp--custom--spacing--wp-block-sidebar);
  }

  .wp-block-footer .wp-block-widget,
  .wp-block-footer .wp-block-widget:not(:last-child),
  .wp-block-columns>.wp-block-column {
    margin-bottom: 0;
  }

  .hero-content .hero-title h2 {
    font-size: 220px;
  }

  .hero-content .hero-title h2 mark {
    font-size: 120px;
  }

  .wp-block-columns>.wp-block-column {
    margin-bottom: 0;
  }

  .wp-block-footer .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) {
    bottom: 100%;
    top: unset;
  }

  .wp-block-footer .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    bottom: 0;
  }

  .wp-block-footer .wp-block-navigation .wp-block-navigation__submenu-icon svg {
    margin-bottom: 3px;
    transform: rotate(180deg);
  }
}

/* --- > 1024px
-------------------------------------------------------- */
@media screen and (min-width: 64em) {

  .wp-block-navigation .wp-block-navigation__submenu-container {
    opacity: 0;
    visibility: hidden;
  }

  .wp-block-navigation-item:hover .wp-block-navigation__submenu-container,
  .wp-block-navigation-item:focus .wp-block-navigation__submenu-container {
    transform: translateY(0);
  }

  .footer .wp-block-navigation .wp-block-navigation__submenu-container {
    color: inherit;
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: normal;
    opacity: 0;
    transition: opacity 0.1s linear;
    visibility: hidden;
    width: auto;
    height: auto;
    overflow: hidden;
    bottom: 0%;
    padding: 14px;
    left: 100%;
    max-height: max-content;
    top: unset;
  }
}

/* --- > 1200px
-------------------------------------------------------- */
@media screen and (min-width: 75em) {

  .wp-block-navigation__container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    gap: inherit;
  }

  .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content {
    margin: 0;
    padding: 5px 20px;
  }

  ul.wp-block-navigation__container>.wp-block-navigation-item.current-menu-item a:before,
  .wp-block-page-list>.wp-block-navigation-item.current-menu-item a:before,
  ul.wp-block-navigation__container>.wp-block-navigation-item a:hover:before,
  .wp-block-page-list>.wp-block-navigation-item a:hover:before {
    opacity: 1;
    visibility: visible;
    background-color: var(--wp--preset--color--heading);
  }

  .wp-block-navigation__container>.wp-block-navigation-item a,
  .wp-block-page-list>.wp-block-navigation-item a {
    padding: 3px 0;
    margin: 0 5px;
  }

  .wp-block-page-list>.wp-block-navigation-item a:hover,
  .wp-block-page-list>.wp-block-navigation-item a:hover,
  .wp-block-navigation__container>.wp-block-navigation-item a:hover,
  .wp-block-navigation__container>.wp-block-navigation-item a:focus {
    color: var(--wp--preset--color--primary);
  }


  .wp-block-navigation ul li.open-on-hover-click:hover>ul,
  .wp-block-navigation ul li.open-on-hover-click:focus>ul,
  .wp-block-navigation ul li.open-on-hover-click:active>ul {
    opacity: 1;
    display: block;
    transform: translateX(0px);
    transition: all .25s linear;
    visibility: visible;
    width: 20rem;
  }

  .wp-block-navigation ul li.open-on-hover-click ul {
    position: absolute;
    float: left;
    width: 0rem;
    display: inline;
    opacity: 0;
    box-shadow: 0 7px 15px #ccc;
    transition: all .25s linear;
    transform: translateX(-20px);
    visibility: hidden;
    top: 3.3rem;
    background-color: var(--wp--preset--color--background) !important;
    color: var(--wp--preset--color--heading) !important;
  }

  .wp-block-navigation ul li.open-on-hover-click ul li {
    width: 100%;
    position: relative;
    border-bottom: 1px solid #ccc;
  }

  .wp-block-navigation ul li.open-on-hover-click ul li:last-child {
    border: none;
  }

  .wp-block-navigation ul li.open-on-hover-click ul li a {
    border-left: 7px solid transparent;
  }

  .wp-block-navigation ul li.open-on-hover-click ul li a:hover {
    border-left: 7px solid var(--wp--preset--color--primary);
    background-color: #eee;
  }

  .wp-block-navigation ul li.open-on-hover-click ul li:hover {
    background-color: #eee;
  }

  .header-media .wp-block-cover {
    height: calc(100vh - 132px);
  }

  .wp-block-cover.wp-block-cta-with-video {
    min-height: 560px;
  }

  .video-section .wp-block-section {
    padding-top: 185px;
    padding-bottom: 185px;
  }

  .wp-block-stats-content p {
    font-size: 20px;
  }

  .wp-site-header .wp-header-row>.wp-block-group.site-section {
    width: 30%;
    padding: 0 21px;
  }

  .wp-site-header .wp-header-row>.wp-block-group {
    width: 35%;
    gap: 0;
  }

  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none;
  }

  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block;
  }

  .wp-site-header .wp-header-row .wp-header-search-social {
    display: flex;
    justify-content: end;
  }

  .wp-site-header {
    padding: 35px 0;
    margin: 0 -35px;
  }

  .wp-block-cover.cta-section {
    min-height: 500px;
  }
}

/* --- > 1366px
-------------------------------------------------------- */
@media screen and (min-width: 85.375em) {
  .wp-block-cover.wp-block-cta-with-video {
    min-height: 600px;
  }
}

/* --- > 1400px
-------------------------------------------------------- */
@media screen and (min-width: 87.5em) {
  .wp-block-cover.cta-section {
    min-height: 650px;
  }
}

/* --- > 1600px
-------------------------------------------------------- */
@media screen and (min-width: 100em) {
  .wp-block-cover.wp-block-cta-with-video {
    min-height: 700px;
  }
}

@media screen and (max-width: 37.5em) {

  .wp-container-3.wp-container-3,
  .wp-container-5.wp-container-5,
  .wp-container-51.wp-container-51 {
    justify-content: center;
  }

  .header-logo h1 {
    text-align: center;
  }
}

@media screen and (max-width:781px) {
  .single .post-navigation-link-container .wp-block-columns {
    flex-wrap: nowrap !important;
  }
}

@media screen and (max-width:660px) {
  .error-heading {
    font-size: 250px !important;
  }

  .woocommerce ul.products[class*=columns-] li.product,
  .woocommerce-page ul.products[class*=columns-] li.product {
    width: 100%;
  }
}

@media screen and (max-width: 550px) {
  .error-heading {
    font-size: 185px !important;
  }

  .single .post-navigation-link-container .post-navigation-link__title {
    display: none;
  }

  .comment-respond {
    padding: 15px 20px !important;
  }
}

@media screen and (max-width: 375px) {
  .error-heading {
    font-size: 120px !important;
  }

  .single .single-post-meta .wp-block-post-date time,
  .single .single-post-meta .wp-block-post-author__name,
  .page .single-post-meta .wp-block-post-date time,
  .page .single-post-meta .wp-block-post-author__name {
    font-size: 12px !important;
  }

}

/* --- Block Color
-------------------------------------------------------- */
/* Foreground color */
.wc-block-components-pagination__page:hover,
.wc-block-components-pagination__page:focus,
.woocommerce ul.products li.product .onsale,
.wc-block-components-product-sale-badge span,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link).outlined,
.wc-block-components-button:not(.is-link).outlined span,
.wc-block-components-pagination__page--active[disabled]:focus,
.wc-block-components-pagination__page--active[disabled]:hover,
.wp-block-post-excerpt__more-link,
.wc-block-pagination-page--active.wc-block-components-pagination__page--active,
.woocommerce button.button,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce .woocommerce-message a,
.tnp.tnp-subscription .tnp-field input[type="submit"],
.wc-block-product-search .wc-block-product-search__button,
.wp-block-navigation__responsive-container-open,
.wp-block-section.contact-section .wp-block-button.is-style-outline,
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce ul.products li.product .button,
.wp-block-navigation__responsive-container-close,
.testimonial-section .content:before,
.testimonial-section .author-desc .author-name,
.slider .swiper-pagination span,
.fse-slider-wrapper .swiper-button,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-previous:focus,
.testimonial-three-columns .wp-block-borocco-electronics-pro-testimonial .wp-group-content:before,
.testimonial-three-columns .wp-block-borocco-electronics-testimonial .wp-group-content:before,
.contact-section .wp-block-cover__inner-container h2,
.contact-section .wp-block-button.is-style-borocco-electronics-button .wp-block-button__link,
.contact-right-layout a:hover,
.contact-right-layout a:focus,
.wp-block-footer.wp-block-site-generator a,
.wp-block-post-excerpt__more-link,
.wp-block-button.is-style-borocco-electronics-button .wp-block-button__link,
.wp-block-button__link.is-style-outline:not(.has-background):hover,
.footer .wp-block-page-list .wp-block-pages-list__item .wp-block-pages-list__item__link:hover,
.footer .wp-block-page-list .wp-block-pages-list__item .wp-block-pages-list__item__link:focus,
.footer .wp-block-navigation__container>.wp-block-navigation-item a:hover,
.footer .wp-block-navigation__container>.wp-block-navigation-item a:focus,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-next:focus {
  color: var(--wp--preset--color--foreground);
}

.nav-row .social-container .wp-block-social-links:not(.is-style-logos-only) .wp-block-social-link .wp-block-social-link-anchor svg:hover svg,
.nav-row .social-container .wp-block-social-links:not(.is-style-logos-only) .wp-block-social-link .wp-block-social-link-anchor svg:focus svg,
.nav-row .social-container .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:hover svg,
.nav-row .social-container .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:focus svg {
  fill: var(--wp--preset--color--foreground);
}

.wp-block-social-links.is-style-logos-only .wp-social-link svg {
  fill: var(--wp--preset--background);
}

.wp-block-search__button,
.wp-block-tag-cloud a:hover,
.wp-block-tag-cloud a:focus,
.wp-block-query-pagination-numbers .page-numbers:not(.dots):hover,
.wp-block-query-pagination-numbers .page-numbers:not(.dots):focus,
.wp-block-query-pagination-numbers .page-numbers:not(.dots).current,
.is-style-outline>.wp-block-button__link:not(.has-text-color):hover,
.is-style-outline>.wp-block-button__link:not(.has-text-color):focus,
.wp-block-button.is-style-borocco-electronics-button .wp-block-button__link::before,
.wp-block-post-excerpt__more-text .wp-block-post-excerpt__more-link::before {
  background-color: var(--wp--preset--color--foreground);
}

.is-style-outline>.wp-block-button__link:not(.has-text-color):hover,
.is-style-outline>.wp-block-button__link:not(.has-text-color):focus {
  border-color: var(--wp--preset--color--foreground);
}

/* Background color */
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.swiper-pagination-bullet:after,
.wp-block-post-meta>div:not(:first-child):before,
.entry-meta>div:not(:first-child):before,
.woocommerce ul.products li.product .button,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
[class*="horizontal-outside-slider-"] .woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.button.alt.disabled,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-message a,
.wc-block-components-button:not(.is-link).outlined,
.woocommerce button.button,
.wc-block-components-pagination__page--active[disabled]:focus,
.wc-block-components-pagination__page--active[disabled]:hover,
.woocommerce ul.products li.product .onsale,
.wc-block-components-product-sale-badge span,
.wc-block-product-search .wc-block-product-search__button,
.wc-block-components-pagination__page:hover,
.wc-block-components-pagination__page:focus,
.wp-service-icon::before,
.wc-block-pagination-page--active.wc-block-components-pagination__page--active,
.wp-block-section.wp-block-logo,
.wp-block-section:not(:nth-of-type(even)).wp-block-logo,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
  background-color: var(--wp--preset--color--background);
}

.wp-block-tag-cloud a:hover,
.wp-block-tag-cloud a:focus,
.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
  color: var(--wp--preset--color--background);
}

/* Primary Color */
.footer,
.woocommerce span.onsale,
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wc-block-grid__product-onsale,
.wp-block-search .wp-block-search__inside-wrapper,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.wp-block-fse-pro-header-search .search-container,
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.wc-block-mini-cart__button span.wc-block-mini-cart__badge,
.wp-block-fse-pro-header-social .wp-block-social-links {
  background-color: var(--wp--preset--color--primary);
}

a:hover,
a:focus {
  color: var(--wp--preset--color--primary);
}

.wp-block-button a:hover,
.wp-block-button a:focus {
  color: var(--wp--preset--color--background);
}

/* Tertiary Background Color */
.newsletter-section .is-style-outline>.wp-block-button__link:not(.has-background):hover,
.newsletter-section .is-style-outline>.wp-block-button__link:not(.has-background):focus,
.newsletter-section .is-style-fill .wp-block-button__link {
  background-color: var(--wp--preset--color--tertiary-bg-color);
}

.newsletter-section .is-style-borocco-electronics-button .wp-block-button__link:hover,
.newsletter-section .is-style-borocco-electronics-button .wp-block-button__link:focus,
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--wp--preset--color--tertiary-bg-color);
}

/* Body Color */
.wp-site-blocks figure figcaption,
figure figcaption,
.wp-block-code>code,
.footer .wp-block-navigation__container>.wp-block-navigation-item a,
.wp-block-navigation .wp-block-navigation__submenu-icon,
.wp-block-page-list>.wp-block-navigation-item a,
.wp-block-navigation__container>.wp-block-navigation-item a,
.wp-block-widget-area .wp-block-latest-posts__post-date,
.wp-block-widget-area .wp-block-latest-posts__list>li>a:hover,
.wp-block-widget-area .wp-block-latest-posts__list>li>a:focus,
.wp-block-post-title a:hover,
.wp-block-post-title a:focus {
  color: var(--wp--preset--color--body-text);
}

.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-metadata a:hover,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-metadata a:focus,
a.comment-reply-link:hover,
a.comment-reply-link:focus,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-metadata a:hover,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-metadata a:focus,
.wp-block-post-comments .comment-metadata a:hover,
.wp-block-post-comments .comment-metadata a:focus,
.tnp.tnp-subscription-minimal input.tnp-submit:hover,
.tnp.tnp-subscription-minimal input.tnp-submit:focus,
.wp-block-footer.wp-block-site-generator a:hover,
.wp-block-footer.wp-block-site-generator a:focus,
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:hover,
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:focus {
  color: var(--wp--preset--color--body-text);
}

.search-controller svg {
  fill: var(--wp--preset--color--foreground);
}

.wp-block-quote cite,
.wp-block-pullquote cite {
  color: var(--wp--preset--color--foreground);
}

.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:hover,
.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:focus,
ins,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background-color: var(--wp--preset--color--foreground);
}

/* Tertiary color */
.tnp.tnp-subscription-minimal form,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus,
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:focus,
.wp-block-quote footer {
  color: var(--wp--preset--color--tertiary-text-color);
}

/* Border Color */
.wc-block-grid__product-onsale,
.woocommerce-info,
.wp-block-post-comments input[type="submit"],
.wc-block-product-search .wc-block-product-search__field input,
.wc-block-product-search .wc-block-product-search__field,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments textarea,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments.is-style-borocco-electronics-post-comments textarea,
.wp-block-post-comments.is-style-borocco-electronics-post-comments input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments textarea,
.woocommerce-billing-fields__field-wrapper input,
.woocommerce-billing-fields__field-wrapper select,
textarea,
select,
.select2-container--default .select2-selection--single,
.woocommerce .quantity .qty,
.woocommerce table.variations select,
.woocommerce-message,
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce span.onsale,
form.woocommerce-ordering select,
.wp-block-table td,
.wp-block-table th,
.wp-block-table thead,
.wp-block-section.contact-section .wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-section:last-child:not(:nth-child(odd)),
.upper-footer .wp-block-latest-posts__list li:not(:last-child),
.tnp.tnp-subscription .tnp-field input[type="submit"],
.tnp.tnp-subscription-minimal form,
.hero-content h3,
.event-section .wp-block-columns .wp-block-column,
.event-section .wp-block-columns .wp-block-column:not(:last-child),
.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input,
.wp-block-pullquote.alignleft.has-text-align-center,
.wp-block-pullquote.alignright.has-text-align-center,
figure.wp-block-pullquote.has-text-align-left,
figure.wp-block-pullquote.has-text-align-right,
.wp-block-fse-pro-popup-video #myBtn,
.wp-block-pullquote,
.wp-block-table .has-fixed-layout *,
.wp-block-borocco-electronics-pro-testimonial .wp-block-separator,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-borocco-electronics-testimonial .wp-block-separator,
.wp-block-sidebar .wp-block-latest-posts__list>li:not(:last-child),
.wp-block-tag-cloud a,
.wp-block-search .wp-block-search__inside-wrapper,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.is-style-borocco-electronics-pro-post-author-card,
.wp-block-post-comments.is-style-borocco-electronics-pro-post-comments .comment-respond,
.wpcf7 form,
.wp-block-post-comments.is-style-borocco-electronics-post-comments .comment-respond,
.is-style-borocco-electronics-post-author-card,
.wpcf7 textarea,
body:not(.home) .wp-block-post-template>li,
.wp-block-query-pagination,
.is-style-outline>.wp-block-button__link:not(.has-text-color),
.wpcf7 input:not([type="submit"]):not([type="checkbox"]),
.wp-block-section:not(:nth-of-type(even)).wp-block-logo,
.wp-block-fse-pro-header-social .social-container,
.wp-block-sidebar>* h2 {
  border-color: var(--wp--preset--color--border-color);
}

.header-light .wp-block-button__link:after {
  outline-color: var(--wp--preset--color--border-color);
}

/* Button Background hover color */
.wp-block-search__button:hover,
.wp-block-search__button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.wc-block-components-button:not(.is-link).outlined:hover,
.wc-block-components-button:not(.is-link).outlined:focus,
.woocommerce .woocommerce-message a:hover,
.woocommerce .woocommerce-message a:focus,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt.disabled:focus,
.woocommerce #respond input#submit.alt:hover,
.woocommerce #respond input#submit.alt:focus,
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:focus,
.woocommerce input.button.alt:hover,
.woocommerce input.button.alt:focus,
.single_variation_wrap button:hover,
.single_variation_wrap button:focus,
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:focus,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus,
.hero-content.wp-block-section:first-child .wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:hover,
.hero-content.wp-block-section:first-child .wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:focus,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:focus,
.tnp.tnp-subscription .tnp-field input[type="submit"]:hover,
.tnp.tnp-subscription .tnp-field input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-previous:focus,
.form-submit .wp-block-button__link:hover,
.form-submit .wp-block-button__link:focus,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-next:focus,
.wp-block-section.contact-section .wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-section.contact-section .wp-block-button.is-style-outline .wp-block-button__link:focus,
.wc-block-product-search .wc-block-product-search__button:hover,
.wc-block-product-search .wc-block-product-search__button:focus,
.contact-section .wp-block-button.is-style-fill .wp-block-button__link:hover,
.contact-section .wp-block-button.is-style-fill .wp-block-button__link:focus,
.tnp.tnp-subscription-minimal input.tnp-submit:hover,
.tnp.tnp-subscription-minimal input.tnp-submit:focus,
.wp-block-button__link.is-style-outline:not(.has-background):hover,
.wp-block-button__link.is-style-outline:not(.has-background):focus {
  border-color: var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--background);
  background-color: var(--wp--preset--color--foreground);
}

.wc-block-components-button:not(.is-link).outlined:hover span,
.wc-block-components-button:not(.is-link).outlined:focus span {
  color: var(--wp--preset--color--tertiary);
}


.archieve-post .wp-block-post-author__name a:hover,
.archieve-post .taxonomy-category.wp-block-post-terms>a,
.archieve-post .taxonomy-post_tag.wp-block-post-terms>a,
.archieve-post .wp-block-post-date.blog-date-mon a,
.single .single-post-meta .wp-block-post-date,
.single .taxonomy-category.wp-block-post-terms>a,
.page .single-post-meta .wp-block-post-date,
.contact-section .wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-post-navigation-link .post-navigation-link__label,
.wp-block-table th,
.wp-block-post-title a,
.is-style-outline .wp-block-button__link,
.tnp.tnp-subscription .tnp-field input[type="submit"],
.is-style-outline>.wp-block-button__link:not(.has-text-color),
.wc-block-components-product-title a,
.wp-block-widget-area .wp-block-latest-posts__list>li>a,
.comment-author .says,
.wp-block-post-author__content .wp-block-post-author__name,
.wp-block-button.is-style-borocco-electronics-button .wp-block-button__link:hover,
.wp-block-button.is-style-borocco-electronics-button .wp-block-button__link:focus,
.wp-block-post-navigation-link a,
a.comment-reply-link,
.wp-block-quote.is-style-large p,
.wp-block-quote p,
.wp-block-quote.is-large p,
.wp-block-pullquote p,
.taxonomy-category.wp-block-post-terms>a:hover,
.taxonomy-category.wp-block-post-terms>a:focus,
.footer p a:hover,
.footer p a:focus,
.swiper-slide-active h6 {
  color: var(--wp--preset--color--heading);
}

.wp-block-post-navigation-link .post-navigation-link__label svg {
  fill: var(--wp--preset--color--heading);
}

/* Color White */
.archieve-post .wp-block-post-date a,
.topbar-menu .wp-block-navigation__responsive-container-open {
  color: var(--wp--preset--color--white)
}

.wp-block-query-pagination-numbers .page-numbers:not(.dots):hover,
.wp-block-query-pagination-numbers .page-numbers:not(.dots):focus,
.wp-block-query-pagination-numbers .page-numbers:not(.dots).current,
.is-style-outline>.wp-block-button__link:not(.has-background):hover,
.is-style-outline>.wp-block-button__link:not(.has-background):focus,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  color: var(--wp--preset--color--background);
}

/*Woocommerce Css*/

ins.wc-block-components-product-price__value.is-discounted,
ins {
  background: transparent !important;
}

h1.product_title.entry-title,
.woocommerce .price ins,
.woocommerce bdi {
  color: var(--wp--preset--color--foreground);
}

.woocommerce-page .woocommerce-form-coupon .button,
.woocommerce .woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce ul.products li.product .button,
.woocommerce .wc-proceed-to-checkout a.checkout-button.alt,
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce #review_form #respond .form-submit input,
button.single_add_to_cart_button.button.alt.wp-element-button,
.woocommerce ul.products li.product .button,
.woocommerce a.added_to_cart {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  padding: 12px 30px;
  border-radius: 8px;
}

.is-large.wc-block-cart .wc-block-cart-items td,
.wc-block-components-totals-wrapper {
  border-top: 1px solid var(--wp--preset--color--foreground);
}

.is-large.wc-block-cart .wc-block-cart-items {
  border-bottom: 1px solid var(--wp--preset--color--foreground);
}

/* Core sets a fixed width on this container in some contexts. That's a
   guess at how much space the minus/number/plus need, and it doesn't hold
   for every context this theme uses it in (e.g. the mini-cart drawer) -
   when the real content is wider than that guessed width, something has
   to overflow, which is what was pushing the "+" button outside the
   visible border. width:auto (sized from its own children, via the flex
   layout core already puts on this element) can never be narrower than
   its content, so nothing can spill out regardless of context. */
.wc-block-components-quantity-selector {
  border: 1px solid var(--wp--preset--color--foreground) !important;
  box-sizing: border-box !important;
  width: auto !important;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button,
h1.wp-block-query-title,
h1.wp-block-post-title {
  color: var(--wp--preset--color--foreground);
}

/* Buttons keep their natural core sizing (no forced width) but must not
   shrink below it - only the number input (which already has flex-grow)
   should ever give up space. */
.wc-block-components-quantity-selector__button {
  flex-shrink: 0;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* The minus button is disabled once quantity hits the minimum (e.g. 1) -
   some browsers render a disabled <button> with different native chrome
   (padding/border) than an enabled one even with appearance:none, making
   the pair look mismatched even though their CSS box is otherwise
   identical. Force the same look either way, just dimmed and
   non-interactive. */
.wc-block-components-quantity-selector__button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

a.wc-block-components-product-name {
  color: var(--wp--preset--color--foreground);
}

a.added_to_cart {
  margin-top: 0px;
}

body:not(.home) .wp-block-post-template>li {
  border: none;
}

.woocommerce-MyAccount-navigation ul li {
  background-color: var(--wp--preset--color--primary);
  padding: 12px 25px !important;
  color: var(--wp--preset--color--white);
  text-decoration: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  text-decoration: none;
  color: rgb(246, 244, 249);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  padding: 0px;
  margin-bottom: 25px;
}

/* Plain page content (the returns policy page, and the bare "Login"/
   "Register" headings, which live in the same .page-content wrapper since
   My Account has no special template either) was still on the default body/
   heading sizes - never scaled down like everything else on the site. */
.page-content h2 {
  font-size: 22px;
}
.page-content h3 {
  font-size: 18px;
}
.page-content p,
.page-content li {
  font-size: 14px;
}

.woocommerce-form-login label,
.woocommerce-form-register label,
.woocommerce-form-track-order label,
.woocommerce-form-track-order p {
  font-size: 13px;
}

.woocommerce-form-login .woocommerce-Input,
.woocommerce-form-register .woocommerce-Input,
.woocommerce-form-track-order .input-text {
  font-size: 14px;
  padding: 8px 10px;
}

.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-form-track-order button.button {
  font-size: 13px !important;
  padding: 10px 24px !important;
}

.woocommerce-page .select2-container .select2-selection {
  border-radius: 0px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 28px;
}

.woocommerce-page .select2-container .select2-selection .select2-selection__arrow {
  top: 28px;
}

.woocommerce-page .woocommerce-form-coupon .button {
  margin-top: 30px;
}

.single-product.woocommerce {
  margin-top: 0px !important;
}

.single-product .borocco-product-gallery {
  float: left;
  width: 45% !important;
}

.single-product div.summary.entry-summary {
  float: right;
  width: 55% !important;
}

/* Below tablet width, 55%/45% side-by-side leaves too little room for the
   gallery and summary text - stack them full-width instead. */
@media screen and (max-width: 767px) {
  .single-product .borocco-product-gallery,
  .single-product div.summary.entry-summary {
    float: none;
    width: 100% !important;
  }
}

/* Custom product gallery carousel (woocommerce/single-product/product-image.php
   override) - one big active image (2x the 196px per-image box the old
   4-column grid rendered at, measured via getBoundingClientRect at 1440px
   width) with prev/next nav + an "x/y" counter, and a clickable thumbnail
   strip below driven by Swiper's thumbs module (assets/js/product-gallery.js). */
.borocco-product-gallery__main-frame {
  display: flex;
  align-items: stretch;
  /* Left-aligned (not centered) so its top-left corner always lines up
     with the sale badge (.onsale), which is absolutely positioned
     relative to this column's own edge, not this element's. !important
     is required - swiper-bundle.css's base .swiper rule (applied to the
     nested .swiper element, but margin:0 auto on a flex child would
     still center it within this frame) sets margin-left/right:auto and
     loads after this stylesheet (see functions.php enqueue order),
     winning at equal specificity for those two longhand properties. */
  margin: 0 0 16px !important;
  max-width: 100%;
}

.borocco-product-gallery__main {
  position: relative;
  width: 392px;
  max-width: 100%;
  /* Height is 80% of the previous 392px (1:1) box - 313.6px - expressed
     as a ratio (392:313.6 simplifies to 5:4) rather than a fixed height
     so it keeps scaling proportionally with width when max-width:100%
     shrinks it on narrower screens, same as the old 1:1 did. */
  aspect-ratio: 5 / 4;
  /* Fixed size, never grows to soak up the side bars' space - but can
     still shrink (together with the bars) if the column itself is
     narrower than 392px + both bars, so this never overflows on small
     screens. */
  flex: 0 1 392px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.06);
  /* This element still carries swiper-bundle.css's own ".swiper" class,
     whose base rule sets margin-left/right:auto - it loads after this
     stylesheet and otherwise wins at equal specificity, centering this
     flex item (with 154px auto margins) inside .main-frame instead of
     sitting snug against .borocco-product-gallery__side--prev. */
  margin: 0 !important;
}

/* Blank white bars flanking the main image, holding the prev/next nav -
   same idea as the homepage slider, but there the arrows overlay the
   photo directly since it's full-bleed; here the image is a fixed-size
   card, so the arrows get their own dedicated zone instead of sitting on
   top of the image. flex-grow:1 so they stretch to fill whatever width
   is left in the column (rather than a fixed 60px with dead space to
   the right of it); min-width keeps the 44px button comfortably padded
   even as the column narrows. */
.borocco-product-gallery__side {
  flex: 1 1 60px;
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
/* On wide screens the column has plenty of leftover width beyond the
   image's fixed 392px - flex-grow:1 above was letting these bars soak
   all of it up, stranding the arrows far out from the image instead of
   sitting snug against it. Capped at their own flex-basis (60px) here;
   mobile (where the column itself shrinks to fit) is unaffected.

   Capping flex-grow alone left the whole (bar+image+bar) cluster flush
   at the frame's left edge, with all the leftover column width trailing
   unused on the right - .borocco-product-gallery__thumbs below still
   centers itself independently within that same column, so it no longer
   lined up with the now off-center image. justify-content:center on the
   frame re-centers that cluster (bars stay their own fixed 60px width,
   snug against the image either way) so both go back to matching. */
@media screen and (min-width: 768px) {
  .borocco-product-gallery__side {
    flex-grow: 0;
  }
  .borocco-product-gallery__main-frame {
    justify-content: center;
  }
}

/* .onsale (theme-wide rule sets z-index:1) and .borocco-product-gallery__main
   (also z-index:1, needed for its own nav/counter) now sit at equal
   stacking level - main comes later in DOM order so it was painting over
   the badge. Scoped to single-product only, so the shared .onsale rule
   used elsewhere (shop grid, related products) is untouched. !important
   is required - ".woocommerce span.onsale" is actually MORE specific
   than ".single-product .onsale" (the "span" type selector plus ".onsale"
   itself both count, putting it ahead on tie-broken class count). */
.single-product .onsale {
  z-index: 4 !important;
}

/* !important on height is required - WooCommerce's own
   ".woocommerce img, .woocommerce-page img { height:auto; max-width:100% }"
   (woocommerce-layout.css) is actually MORE specific than the single
   class here (that selector's extra "img" type selector wins the
   tiebreak once class counts are equal), so height:auto was winning and
   letting the browser's automatic width/height-attribute aspect-ratio
   stretch this image's box past its container instead of filling it. */
.borocco-product-gallery__image {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Same look as the homepage slider's arrows (.borocco-electronics-slider-button-prev/next,
   style.css ~line 6115) - frosted-glass squircle, copied property for
   property. Positioning differs on purpose: those overlay a full-bleed
   photo via position:absolute; these sit centered in their own
   .borocco-product-gallery__side flex bar instead, so no absolute/top/
   left/right/margin-top is needed here.

   Selector combines .swiper-button-prev/next with .borocco-product-gallery__nav
   (not just the latter alone) for the same reason as the homepage arrows -
   swiper-bundle.css's own .swiper-button-prev/next width/height rule loads
   after this stylesheet and would otherwise win at equal specificity. */
.swiper-button-prev.borocco-product-gallery__nav,
.swiper-button-next.borocco-product-gallery__nav {
  /* swiper-bundle.css's base rule makes these position:absolute with a
     negative margin-top (for overlaying full-bleed slides) - an
     absolutely-positioned element ignores its flex parent's
     align-items/justify-content entirely, so .borocco-product-gallery__side
     couldn't center it without these two resets. */
  position: static;
  margin-top: 0;
  width: 44px;
  height: 44px;
  border: none;
  padding: 0;
  /* Dark tone (not the homepage's light frosted-glass fill) - those
     arrows sit on a photo and need to read as light-on-dark; these sit
     on the plain white side bars, where a light-on-white fill is nearly
     invisible, so the fill flips dark to keep the white icon readable. */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.swiper-button-prev.borocco-product-gallery__nav:hover,
.swiper-button-next.borocco-product-gallery__nav:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
}

.swiper-button-prev.borocco-product-gallery__nav:after,
.swiper-button-next.borocco-product-gallery__nav:after {
  font-size: 18px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Swiper's pagination module adds .swiper-pagination-fraction to this
   element (type:'fraction' in product-gallery.js) - swiper-bundle.css's
   base rule for that class sets left:0/width:100%/bottom:8px, which is
   what was stretching this into a full-width bar instead of a small
   pill. !important reclaims the compact pill; loads after this
   stylesheet so it otherwise wins at equal specificity, same as the
   other swiper-bundle conflicts on this page. */
.borocco-product-gallery__counter {
  position: absolute;
  left: 12px !important;
  bottom: 12px !important;
  width: auto !important;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  z-index: 3;
}

.borocco-product-gallery__thumbs {
  width: 392px;
  max-width: 100%;
  /* Centered (not left-aligned) to match .borocco-product-gallery__main,
     which now sits centered between the two flex-grown side bars rather
     than flush against the column's left edge. */
  margin: 0 auto !important;
}

.borocco-product-gallery__thumbs .swiper-slide {
  width: 70px;
  height: 70px;
  opacity: 0.55;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  box-sizing: border-box;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.borocco-product-gallery__thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: var(--wp--preset--color--primary);
}

.borocco-product-gallery__thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Core sets this to z-index:99, presumably to clear the gallery image
   sitting right under it - it doesn't need to compete with anything outside
   its own small corner of the page, and 99 was overlapping unrelated
   overlays elsewhere (e.g. the header's mega-menu). It only has to clear
   the image beneath it, so a small value is plenty. */
.woocommerce-product-gallery__trigger {
  z-index: 2 !important;
}

h1.product_title.entry-title {
  font-size: 22px !important;
}

.woocommerce div.product span.price {
  font-size: 18px !important;
}

.single-product .product_meta,
.single-product .stock,
.single-product .woocommerce-variation-price,
.single-product .quantity .qty {
  font-size: 13px !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  padding: 0 0.7em !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: 12px !important;
  padding: 0.5em 0 !important;
}

.woocommerce-tabs .panel,
.woocommerce-Tabs-panel--description,
.woocommerce-Tabs-panel--additional_information,
#reviews.woocommerce-Reviews {
  font-size: 13px !important;
}

.woocommerce-tabs .panel h2 {
  font-size: 18px !important;
}

.related.products > h2 {
  font-size: 18px !important;
}

.single-product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Quantity input, "Thêm vào giỏ hàng" and "Mua ngay" all end up different
   heights by default (mismatched line-height/box-sizing/padding combos
   from WooCommerce core + this theme's own button styles) - pin all
   three to the same explicit height so they line up.

   The original padding (14.4px/17.6px, inherited from a WC/theme rule
   elsewhere) plus this fixed 41px height and box-sizing:border-box left
   only ~10px of vertical room for the text - less than its own
   line-height, so the number was being clipped out of view entirely.
   !important on padding/line-height/border-radius is needed since
   ".woocommerce .quantity .qty { padding:12px; border-radius:0; }"
   elsewhere in this file otherwise wins or partially applies. */
.single-product .quantity .qty {
  height: 41px;
  width: 120px;
  box-sizing: border-box;
  padding: 0 12px !important;
  line-height: 39px !important;
  border-radius: 10px !important;
}

/* !important on display is required - WooCommerce's own
   ".woocommerce div.product form.cart button.single_add_to_cart_button"
   (woocommerce-blocktheme.css) is more specific (one extra class,
   ".product", plus an extra "div" type selector) and sets
   display:inline-block, which wins over this rule's plain inline-flex.
   Confirmed via Chrome DevTools Protocol's CSS.getMatchedStylesForNode -
   both rules are genuinely being matched, WC's wins on specificity.
   That alone wouldn't just misalign the text - this button is a flex
   item of ".single-product form.cart" (display:flex), and per the CSS
   Display spec a flex item's outer display gets "blockified": WC's
   winning inline-block computes to plain "block", which isn't a flex
   container at all, so align-items/justify-content below were never
   doing anything - the text was purely relying on line-height/padding,
   which don't fit in the fixed 41px height, hence the visible
   off-center label. */
.single-product form.cart button.single_add_to_cart_button {
  height: 41px;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* "Mua ngay" (buy now - skips to checkout) is the more decisive action, so
   it gets the solid primary treatment; the default "add to cart" becomes
   the secondary outlined button next to it. Scoped to the single-product
   buy box specifically - ul.products li.product .button (the loop/grid
   add-to-cart) is a different selector, untouched by this. */
.single-product form.cart button.single_add_to_cart_button:not(.buy-now-button) {
  background: none !important;
  color: var(--wp--preset--color--heading) !important;
  border: 1px solid var(--wp--preset--color--heading);
}
.single-product form.cart button.single_add_to_cart_button:not(.buy-now-button):hover {
  background: var(--wp--preset--color--heading) !important;
  color: #fff !important;
}
.single-product form.cart .buy-now-button {
  background-color: var(--wp--preset--color--primary);
  color: #fff;
  padding: 12px 30px;
  border-radius: 8px;
  border: none;
}
.single-product form.cart .buy-now-button:hover {
  opacity: 0.9;
}

/* Related products as a Swiper carousel (assets/js/related-products-carousel.js)
   instead of a static wrapped grid - reuses the same ul.products/li.product
   markup WooCommerce already renders, just fed to Swiper via wrapperClass/
   slideClass instead of adding swiper-wrapper/swiper-slide markup. */
.related-products-carousel {
  position: relative;
  overflow: hidden;
  padding: 0 8px;
}
.related-products-carousel ul.products {
  flex-wrap: nowrap !important;
}
.related-products-carousel ul.products li.product {
  flex-shrink: 0;
}
.related-products-prev,
.related-products-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  margin-top: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  color: #fff;
  z-index: 3;
}
.related-products-prev {
  left: -8px;
}
.related-products-next {
  right: -8px;
}
.related-products-prev:after,
.related-products-next:after {
  font-size: 14px;
}

/* ==========================================================================
   Checkout flow step indicator (cart -> checkout -> order received). Active
   step and "done" state are worked out in PHP from real WC conditional
   tags - see patterns/checkout-flow-steps.php.
   ========================================================================== */
.checkout-steps {
  align-items: center;
  gap: 0 !important;
  margin: 0 auto 32px;
  padding: 24px 0;
}
.checkout-steps__step {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.45;
}
.checkout-steps__step.is-current,
.checkout-steps__step.is-done {
  opacity: 1;
}
.checkout-steps__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--wp--preset--color--heading);
  font-size: 13px;
  font-weight: 600;
}
.checkout-steps__step.is-current .checkout-steps__circle,
.checkout-steps__step.is-done .checkout-steps__circle {
  background: var(--wp--preset--color--heading);
  color: #fff;
  border-color: var(--wp--preset--color--heading);
}
.checkout-steps__label {
  font-size: 14px;
  font-weight: 600;
}
.checkout-steps__connector {
  width: 60px;
  height: 1px;
  background: var(--wp--preset--color--border-color, #dcdcdc);
  margin: 0 16px;
}
.checkout-steps__connector.is-done {
  background: var(--wp--preset--color--heading);
}
@media screen and (max-width: 480px) {
  .checkout-steps__connector {
    width: 24px;
    margin: 0 8px;
  }
  .checkout-steps__label {
    display: none;
  }
}

/* Order-summary sidebar stays in view while scrolling a long cart/checkout
   form - real class names from the WooCommerce Blocks package itself.
   Content inside .wc-block-cart__sidebar / __checkout__sidebar is rendered
   client-side (React), so this couldn't be checked by fetching the page's
   raw HTML the way everything else this session was verified - worth
   confirming visually. */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
  position: sticky;
  top: 24px;
}

/* ==========================================================================
   Trust panel ("why buy from us"), collapsible via trust-panel.js. Open by
   default (no .is-collapsed class present on load).
   ========================================================================== */
.trust-panel {
  max-width: 420px;
  margin: 40px auto 0;
  padding: 20px 24px;
  border: 1px solid var(--wp--preset--color--border-color, #e5e5e5);
  border-radius: 8px;
}
.trust-panel__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--wp--preset--color--heading);
}
.trust-panel__chevron {
  transition: transform 0.2s ease;
}
.trust-panel.is-collapsed .trust-panel__chevron {
  transform: rotate(-90deg);
}
.trust-panel__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}
.trust-panel.is-collapsed .trust-panel__content {
  display: none;
}
.trust-panel__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.trust-panel__icon {
  flex-shrink: 0;
  color: var(--wp--preset--color--primary);
}
.trust-panel__icon svg {
  width: 24px;
  height: 24px;
}
.trust-panel__item strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}
.trust-panel__item p {
  font-size: 12px;
  opacity: 0.75;
  margin: 0;
}

.lower-right .wp-block-columns {
  gap: 10px !important;
}

/* search-box/cart-box each carry a fixed 15% flex-basis (an inline style
   from the block's own width attribute), and WP core forces flex-grow:0
   on any column with an inline flex-basis - so a fixed 15% never grows to
   fit its actual content. That's invisible while the cart shows "0 đ",
   but once logged in with real items the mini-cart button
   ("2 · 24.950.000 ₫") is far wider than 15% and just overflows past its
   column instead of pushing it aside. Sizing each to its own content
   (shrink-to-fit) instead of a fixed share fixes this for any cart total
   length, not just the ones that happen to fit in 15%. */
.lower-right .search-box,
.lower-right .cart-box {
  flex-basis: auto !important;
  flex-shrink: 0 !important;
  width: auto !important;
}

/* .lower-right is an 18%-wide column but its actual content (this pair
   of icons) only fills a fraction of it, left-aligned - leaving dead
   space between the icons and the column's own right edge (which sits
   flush with the page's true right margin). That leaves the icons with
   a bigger visual gap to the right than the logo has to the left (150px,
   see .logo-box's own position:relative shift). Measured via
   getBoundingClientRect: shifting this group right closes that gap to
   match the logo's 150px. Re-measured and bumped from 67px to 98px after
   removing the mini-cart's price text (hasHiddenPrice, main-header.php)
   shrank the group's own width, which had reopened the gap to 181px.

   Scoped to >=768px - below that, .lower-header's compact single-row
   mobile layout (max-width:767px rule elsewhere) has much less spare
   width, and this same shift was pushing the cart icon ~3.5px past the
   viewport edge at 375px (confirmed via a real overflow check, not the
   off-canvas-drawer false positives seen elsewhere at this width). */
@media screen and (min-width: 768px) {
  .lower-right .search-box {
    margin-left: 98px;
  }
}

.cart-box .wc-block-mini-cart__button span.wc-block-mini-cart__badge {
  font-size: 7px;
  height: 13px;
  width: 13px;
  min-width: 13px;
  line-height: 13px;
  padding: 0;
  margin-top: -6px;
  color: #fff !important;
}

.cart-box .wc-block-mini-cart__button svg.wc-block-mini-cart__icon {
  font-size: 18px;
}

.cart-box .wc-block-mini-cart__button .wc-block-mini-cart__amount {
  font-size: 14px;
}

/* The header row's 3 top-level columns (logo 6% + nav 45% + right cluster
   32%) only add up to 83% of the row's width. Core's own columns.css
   already forces flex-grow:0 on any column with an inline flex-basis style
   (which all of ours have), so that leftover 17% was never being absorbed
   by any column - it was just sitting there as dead space after the last
   column, which is why the right cluster never actually reached the row's
   true right edge. margin-left:auto on the last column makes the flexbox
   algorithm dump ALL of that leftover space into its own left margin
   instead, pushing it flush to the end - matching the logo's flush-left
   placement - without disturbing the gap between the logo and the nav
   next to it. */
.lower-header > .lower-right {
  margin-left: auto;
}

/* Move the logo itself toward the nav, not the nav toward the logo -
   .lower-nav's flow position (and the mega-menu dropdowns anchored to
   its nav items) must stay exactly where they are. .logo-box keeps its
   normal 6% column width/position reserved in the flex flow; position:
   relative + left only shifts the logo's own rendered pixels into the
   unused space at the right of that column, which doesn't affect
   sibling layout. Baseline measured at 1440px width via
   getBoundingClientRect: logo's right edge at 100px, .lower-nav starts
   at 189.75px - a 78px shift lands the logo's edge at 178px, 11.75px
   clear of the nav. Scoped to >=1200px (matching the 1199px breakpoint
   above where .lower-nav itself switches to an off-canvas drawer) -
   below that the logo sits next to the hamburger toggle instead, not
   the inline nav, so shifting it here would pull it away from the
   toggle instead of closer to anything. */
@media screen and (min-width: 1200px) {
  .logo-box {
    position: relative;
    left: 78px;
  }
}


.cart-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-social .wp-block-social-link-anchor,
.top-social .wp-block-social-link-anchor {
  transition: none !important;
}

.footer-box .wp-block-navigation__container>.wp-block-navigation-item a:hover,
.footer-box .wp-block-navigation__container>.wp-block-navigation-item a:focus,
.top-social .wp-block-social-link-anchor:hover,
.top-social .wp-block-social-link-anchor:focus {
  color: var(--wp--preset--color--primary) !important;
}

/*slider*/
.slider-shot-heading {
  display: inline-block;
}

.banner-text {
  width: 80%;
}

.banner-sec .wp-block-button__link {
  margin-top: 15px !important;
}

/*cat*/
.cat-main-img {
  margin-bottom: 0;
}

.cat-main-img img {
  width: 100%;
}

@media screen and (max-width:1399px) {
  .banner-text {
    width: 90%;
  }

  .cat-wrap h6 {
    font-size: 16px !important;
  }

  .footer-contact-box p,
  .footer-box nav li a {
    font-size: 12px !important;
  }

  .footer-box h3 {
    font-size: 14px !important;
  }
}

@media screen and (max-width:1199px) {
  .header-text {
    flex-basis: 55% !important;
  }

  .topbar-menu,
  .lower-nav {
    flex-basis: 10% !important;
  }

  .top-social,
  .lower-right {
    flex-basis: 35% !important;
  }

  .logo-box {
    flex-basis: 27.5% !important;
  }

  .cat-wrap {
    gap: 15px !important;
  }

  .cat-wrap h6 {
    font-size: 14px !important;
  }

  .lower-nav nav,
  .topbar-menu nav {
    justify-content: center !important;
  }

  .banner-sec h2 {
    font-size: 25px !important;
  }

  .banner-text {
    width: 100%;
  }
}

@media screen and (max-width:991px) {
  .header-text p {
    font-size: 10px !important;
  }

  .work-main .wp-block-columns {
    display: block !important;
    text-align: center;
  }

  .work-main .wp-block-buttons {
    justify-content: center !important;
  }
}

@media screen and (max-width:781px) {

  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.header-text,
  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.lower-right {
    flex-basis: 50% !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.topbar-menu,
  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.lower-nav {
    flex-basis: 10% !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.top-social {
    flex-basis: 25% !important;
  }

  .logo-box h1 {
    text-align: center !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.search-box {
    flex-basis: 60% !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.cart-box {
    flex-basis: 20% !important;
  }

  .cat-wrap {
    gap: 24px !important;
  }

  .cat-wrap.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column,
  .footer-box.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis: 45% !important;
  }
}

@media screen and (max-width:599px) {

  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.header-text,
  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.lower-right,
  .cat-wrap.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column,
  .footer-box.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
    flex-basis: 100% !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.top-social {
    flex-basis: 70% !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.search-box {
    flex-basis: 60% !important;
  }

  .header-text,
  .footer-box {
    text-align: center;
  }

  .upper-header {
    gap: 10px !important;
  }

  .work-main .wp-block-cover {
    border-radius: 25px;
  }

  .footer-box nav ul {
    align-items: center !important;
  }

  .rights-box,
  .rights-box .is-layout-flex,
  .footer-contact-box .is-layout-flex {
    display: block !important;
    text-align: center;
  }
}

/*back to top*/
.wp-block-button.back-to-top .wp-block-button__link.wp-element-button {
  width: 40px;
  height: 40px;
  position: fixed;
  right: 25px;
  bottom: 25px;
  display: inline-block;
  z-index: 1;
  text-indent: -5000px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.089);
  display: none;
  padding: 0;
  margin-top: 0;
}

.wp-block-button.back-to-top .wp-block-button__link.wp-element-button:after {
  content: "";
  width: 40px;
  height: 40px;
  background-color: #fff;
  -webkit-mask-image: url(assets/images/up-arrow.svg);
  mask-image: url(assets/images/up-arrow.svg);
  mask-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
}

.wp-block-navigation__container>.wp-block-navigation-item.buypro a {
  padding: 5px 15px;
  background-color: var(--wp--preset--color--primary);
  color: #fff;
}

.wp-block-navigation__container>.wp-block-navigation-item.buypro a:hover {
  padding: 5px 15px;
  background-color: #fff;
  color: var(--wp--preset--color--primary);
}

/*homepage slider css start*/
.wp-block-group.borocco-electronics-slider {
  overflow: hidden;
  position: relative;
}

.borocco-electronics-slider .swiper-slide .wp-block-cover {
  width: 100%;
  height: 100%;
}

.borocco-electronics-slider .swiper-wrapper {
  gap: 0;
}

.borocco-electronics-slider .swiper-slide {
  display: flex;
  transition: all 0.6s ease;
  margin-block-start: 0 !important;
}

.wp-block-group.borocco-electronics-slider-controls {
  position: unset;
}

.borocco-electronics-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
  position: absolute;
  bottom: 20px;
  z-index: 1;
  width: 100%;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}

.borocco-electronics-pagination.swiper-pagination-clickable.swiper-pagination-bullets span.swiper-pagination-bullet {
  width: 60px;
  height: 2px;
  border-radius: 1px;
  background-color: #979595;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

/* The active bar's own background stays the plain track color (same as
   an inactive bar) - the ::after fill sweeping left-to-right on top of it
   is what shows progress. Duration must match custom-script.js's
   autoplay delay (3000ms) so the fill finishes exactly as the slide
   advances, whether that's from autoplay or a manual nav/pagination
   click (both restart this element's animation, since it only runs
   while -active is present on this specific bullet). */
.borocco-electronics-pagination.swiper-pagination-clickable.swiper-pagination-bullets span.swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--wp--preset--color--primary);
  transform: scaleX(0);
  transform-origin: left center;
  animation: borocco-electronics-slide-progress 3000ms linear forwards;
}

@keyframes borocco-electronics-slide-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@media screen and (min-width: 1200px) {
  .borocco-electronics-slider .swiper-wrapper {
    gap: 0;
  }

  .borocco-electronics-slider .swiper-slide {
    width: 100% !important;
  }

  /* Active (center) slide */
  .borocco-electronics-slider .swiper-slide.swiper-slide-active {
    width: 100% !important;
    z-index: 2;
  }

  .borocco-electronics-slider .swiper-slide .slide-box {
    transition: all 1s ease;
    display: none;
  }

  .borocco-electronics-slider .swiper-slide.swiper-slide-active .slide-box {
    display: block;
  }

  .borocco-electronics-pagination.swiper-pagination-clickable.swiper-pagination-bullets span.swiper-pagination-bullet {
    background-color: #fff;
    opacity: 1;
  }
}

.borocco-electronics-slider-controls.wp-block-group.block-editor-block-list__layout .wp-block.wp-block-html {
  display: none;
}

.borocco-electronics-slider-controls.wp-block-group.block-editor-block-list__layout .wp-block.is-selected.wp-block-html {
  display: block !important;
}

/*homepage slider css end*/

/*testimonial-css start*/
.testimonial-box {
  box-shadow: 0px 1px 8px 0px #00000040;
  position: relative;
}

.star-img {
  margin-bottom: 10px !important;
}

.testimonial-comas {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
}

.testimonial-img img {
  height: 50px;
  width: 50px;
}

@media screen and (max-width: 1399px) {
  .testimonial-box p {
    font-size: 12px !important;
  }

  .testimonial-box h4 {
    font-size: 16px !important;
  }

  .testimonial-img img {
    height: 35px;
    width: 35px;
  }
}

@media screen and (max-width: 1199px) {
  .testimonial-cols {
    gap: 10px !important;
  }
}

@media screen and (max-width: 781px) {
  .testimonial-cols {
    flex-wrap: nowrap !important;
  }
}

@media screen and (max-width: 767px) {
  .testimonial-cols {
    flex-wrap: wrap !important;
    text-align: center;
  }

  .testimonial-cols .is-layout-flex {
    justify-content: center !important;
    text-align: left;
  }
}

/*testimonial-css end*/

/*projects slider start*/
.projects-slider {
  overflow: hidden;
  position: relative;
}

.projects-slider .swiper-wrapper {
  /* Leftover flex `gap` from an earlier layout - Swiper positions slides
     itself via transform now (spaceBetween:0), so this was adding 50px
     of extra spacing on top of that and throwing off every slide's
     position, which is what actually caused the overlap/overflow chase. */
  margin-top: 60px;
}

.project-section .projects-slider {
  /* Break out of the section's 80%-wide constrained content area to run
     edge-to-edge, overlapping the white margins on both sides. Bleeding
     just .swiper-wrapper wasn't enough - .projects-slider itself (this
     element) is overflow:hidden and was still boxed to the 80% width,
     clipping the wrapper's bleed and throwing off Swiper's own centering
     math (which measures this element, not the wrapper).
     padding keeps a small, equal inset on both sides instead of running
     flush to the true viewport edge - the controls (right:0, positioned
     against this element's padding box) automatically inset by the same
     amount. */
  box-sizing: border-box;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.projects-slider .swiper-slide {
  margin-block-start: 0 !important;
  transition: all 0.4s ease;
}

.projects-slider-controls {
  position: absolute;
  /* Matches the heading h3's vertical center (its own margin/line-height
     pushes its text down from the section's top edge by this much). */
  top: 13px;
  /* Aligned with the gap between the centered (active) slide and the
     slide to its right, not the section's outer edge. That gap isn't at
     the 1/3 slot boundary - the active .project-card visually spills to
     140% width/-20% margin and the next one shrinks to 70%/30% margin
     (see the swiper-slide-active/-next rules below), which together push
     the actual visual seam out to 1/4 of the padded content area in from
     the right edge, plus the 24px right padding itself. */
  right: calc(24px + (100% - 48px) / 4);
  display: flex;
  gap: 10px;
  width: 15%;
  justify-content: flex-end;
}

.projects-heading {
  /* Center the heading text within the full section width - the controls
     stay pinned to the far right via their own absolute positioning
     above, independent of this. */
  text-align: center;
  padding-right: 0 !important;
}

.wp-block-group.projects-slider .projects-swiper-button-prev,
.wp-block-group.projects-slider .projects-swiper-button-next {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.25);
  color: var(--wp--preset--color--white);
  transition: all ease 0.23s;
  opacity: 1;
  margin: 0;
  margin-right: 0 !important;
  margin-left: 0 !important;
  position: static;
}

.wp-block-group.projects-slider .projects-swiper-button-prev:after,
.wp-block-group.projects-slider .projects-swiper-button-next:after {
  font-size: 12px;
}

.wp-block-group.projects-slider .projects-swiper-button-prev:hover,
.wp-block-group.projects-slider .projects-swiper-button-next:hover {
  background: var(--wp--preset--color--foreground);
  color: var(--wp--preset--color--background);
}

.projects-slider .swiper-slide .wp-block-cover {
  position: relative;
}

/* The white caption zone now lives below the image as its own sibling,
   not overlaid on top of it - a plain static box, not the absolutely
   positioned/fixed-height flex-end overlay it used to be. */
.project-content-box {
  background: #fff;
  padding: 16px 20px;
  border-radius: 0 0 7px 7px;
  text-align: center;
}

.projects-slider .swiper-slide .project-content-box-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.projects-slider .swiper-slide > a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Swiper's own grid/loop math still treats every .swiper-slide as equal
   width (reliable native looping/centering, untouched) - only the visible
   .project-card (image + white caption box together) inside the active
   one is widened past its slot via negative margins, overlapping into
   the gap on both sides. This changes width only, never height, so it
   can't grow into the heading/buttons. */
.wp-block-group.projects-slider .swiper-slide {
  overflow: visible;
}
.wp-block-group.projects-slider .swiper-slide.swiper-slide-active {
  z-index: 2;
}

/* Desktop-only (see the mobile breakpoint below): Swiper's own 3-equal-
   slot layout is stretched here so the active slide dominates. Below
   768px, Swiper itself is already in a ~1.15-slidesPerView peek layout
   (custom-script.js) that does that job via slot sizing instead - these
   percentages would fight it (they're tuned for 3 equal-width slots),
   so they're switched off there rather than combined with it. */
@media screen and (min-width: 768px) {
  .wp-block-group.projects-slider .swiper-slide .project-card {
    /* Side slides give up 30% of their slot's width, all of it on the
       edge facing the active slide (not split 15/15) - that's what the
       active slide's overflow actually spills into, so a symmetric
       shrink only ever provided half the clearance it needed and
       visibly overlapped. */
    width: 70%;
    transition: width 0.4s ease, margin-left 0.4s ease;
  }
  .wp-block-group.projects-slider .swiper-slide-prev .project-card {
    margin-left: 0%; /* flush left, buffer is on the right (inner) side */
  }
  .wp-block-group.projects-slider .swiper-slide-next .project-card {
    margin-left: 30%; /* flush right, buffer is on the left (inner) side */
  }
  .wp-block-group.projects-slider .swiper-slide.swiper-slide-active .project-card {
    /* Slightly less than the full 160%/-30% so a visible gap remains on
       both sides instead of touching prev/next edge-to-edge. */
    width: 140%;
    margin-left: -20%;
  }
}

@media screen and (max-width:991px) {
  .wp-block-group.projects-slider .wp-block-cover {
    min-height: 200px !important;
  }
}

@media screen and (max-width:767px) {
  .projects-heading {
    padding-right: 0 !important;
    text-align: center;
  }
  /* The desktop "right" formula targets the gap between two of the 3
     equal slides in that layout - meaningless here (single peek slide,
     see custom-script.js) and it was landing on top of the centered
     heading text. Just inset from the row's own right padding edge
     instead, same as everything else in this row - not flush against
     the screen edge. */
  .projects-slider-controls {
    right: 24px;
  }
  .wp-block-group.projects-slider .swiper-slide .project-card {
    width: 100%;
    margin-left: 0;
  }
}

@media screen and (min-width: 991px) and (max-width: 1999px) {
  .wp-block-site-title {
    font-size: 20px !important;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .lower-header .wp-block-site-title {
    font-size: 16px !important;
  }
}
/*projects slider end*/

/* testimonial section */
.testimonial-box:hover {
 background-color: var(--wp--preset--color--primary) !important;
  color: white;
}

/* Add post page button css */
.single-post .taxonomy-category a {
 background: var(--wp--preset--color--primary) !important;
 color: #fff !important;
 font-weight: 600;
}
/* woocommerce pages css */
/* cart page css */
.wc-block-cart-items {
  border: 2px solid #d1d1d1 !important;
  padding: 20px !important;
  border-radius: 10px;
  background: #fff;
}
.wc-block-components-sidebar {
  border: 2px solid #d1d1d1 !important;
  padding: 20px !important;
  border-radius: 10px;
}
/* checkout page css */
.wc-block-components-checkout-return-to-cart-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--wp--preset--color--primary) !important;
  color: #fff !important;
  height: auto;
  padding: 0.5em 1em 0.5em 2em;
}
.wc-block-components-checkout-return-to-cart-button svg {
  left: 6px !important;
}
.wc-block-checkout__actions .wc-block-checkout__actions_row {
    font-size: inherit !important;
}
.wc-block-components-checkout-return-to-cart-button:hover {
    background-color: #000000 !important;  
    color: #ffffff !important;            
}
.wc-block-components-checkout-place-order-button {
   background: var(--wp--preset--color--primary) !important;
}
input#submit,
input.submit.wp-block-button__link {
    border: none;
}
.wc-block-components-checkout-place-order-button:hover {
    background-color: #000000 !important; 
    color: #ffffff !important;             
}
.wc-block-grid__product {
  border: 2px solid #d1d1d1 !important;
  padding: 10px !important;
  border-radius: 12px;
  overflow: hidden;
}
.wc-block-grid__product-image img {
  border-radius: 8px;
}
.wc-block-grid__products {
  display: flex !important;
  justify-content: center;
}
/* product page css */
.woocommerce-notices-wrapper.woocommerce .products ul,.woocommerce ul.products {
  max-width: 80% !important;
  align-items: center !important;
  margin: auto;
}
.wc-block-components-sidebar {
  height: 100% !important;
  padding: 0px !important;
}
@media (max-width: 991px) and (min-width: 768px) {
  .woocommerce-notices-wrapper.woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    width: 48% !important;
    float: left;
    margin: 1% !important;
    clear: none !important;
    box-sizing: border-box;
  }
}
/* related product page css */
.woocommerce-Tabs-panel--description {
  max-width: 100% !important;
  margin: 0 auto !important;
}
.product_cat-uncategorized {
  max-width: 90% !important;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
@media (max-width: 991px) and (min-width: 768px) {
  .related ul.products li.product {
    width: 48% !important;
    margin-right: 1% !important;
    padding: 10px;
  }
}
/* cart page css */
.wc-block-grid.has-4-columns .wc-block-grid__products {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}
.wc-block-grid.has-4-columns .wc-block-grid__product {
  flex: 1 0 23% !important;
  max-width: 23% !important;
}
@media (max-width: 991px) and (min-width: 768px) {
  .wc-block-grid.has-4-columns .wc-block-grid__product {
    flex: 1 0 48% !important;
    max-width: 48% !important;
  }
  .wc-block-grid__product-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }
}
@media (max-width: 767px) {
  .wc-block-grid.has-4-columns .wc-block-grid__product {
    flex: 1 0 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center;
  }
  .wc-block-grid__product-image img {
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .wc-block-components-checkout-place-order-button {
    width: auto !important;
  }
}
/* shop page css */
.woocommerce-shop .woocommerce-notices-wrapper.woocommerce .products ul,.woocommerce ul.products {
  max-width: 90% !important;
  align-items: center !important;
  margin: auto;
}
.woocommerce .added_to_cart.wc-forward {
    margin-top: 5px;
}
@media (max-width: 767px) {
  ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
  }
  ul.products li.product {
    float: none;
    width: 100% !important;
    max-width: 320px;
    margin: 0 auto 20px;
    text-align: center;
  }
  ul.products li.product img {
    margin: 0 auto;
    display: block;
  }
  ul.products li.product .button {
    display: inline-block;
    float: none;
  }
}
/* single product page css */
.single-product.woocommerce .related .products {
  max-width: 100% !important;
  align-items: center !important;
  margin: auto;
}
@media (max-width: 767px) {
  .single_add_to_cart_button {
    display: block;
    width: 100%;
    max-width: 260px;
    margin: 10px !important;
}
  form.cart {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
/* cart page table css */
.wc-block-cart-items {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
}
.wc-block-cart-items td,.wc-block-cart-items th {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}
.wc-block-components-product-name,.wc-block-components-product-price {
    display: block;
    max-width: 100%;
    white-space: normal;
}
.woocommerce a.add_to_cart_button,.woocommerce .button.add_to_cart_button {
    white-space: nowrap !important;
}
@media (max-width: 767px) {
.wc-block-cart-items,.wc-block-cart-items tbody,.wc-block-cart-items tr,.wc-block-cart-items td {
        display: block;
        width: 100%;
    }
    .wc-block-cart-item__image,.wc-block-cart-item__total {
        text-align: center;
        margin-bottom: 10px;
    }
    .wc-block-cart-item__quantity {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
}
@media (max-width: 320px) {
    .wc-block-cart-item__total-price-and-sale-badge-wrapper {
        display: none !important;
    }
}
/*  woocommerce pages css */
.woocommerce-cart .woocommerce,.woocommerce-cart .woocommerce-cart-form,.woocommerce-cart .shop_table_responsive {
    width: 80% !important;
    max-width: 80% !important;
}
.woocommerce-page table.shop_table_responsive {
  width: 100% !important;
  max-width: 100% !important;
}
.cart-collaterals{
  width: 20% !important;
  max-width: 20% !important; 
}
.wp-block-group.alignfull.is-layout-constrained .woocommerce {
    display: flex;
    gap: 30px;
    margin: auto !important;
}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-page .cart-collaterals .cart_totals {
    float: none !important;
    width: 100% !important; 
}
@media (max-width: 992px) and (min-width: 320px) {
    .wp-block-group.alignfull.is-layout-constrained .woocommerce {
        display: block !important;
        margin: auto !important;
        padding-left: 35px !important;
    }
    .woocommerce-cart .woocommerce,.woocommerce-cart .woocommerce-cart-form, .woocommerce-cart .shop_table_responsive {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .cart-collaterals {
        width: 100% !important;
        max-width: 100% !important;
        margin: 30px auto 0 !important;
    }
    .woocommerce .cart-collaterals .cart_totals {
        float: none !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    .woocommerce #content table.cart td.actions .button, .woocommerce table.cart td.actions .button, .woocommerce-page #content table.cart td.actions .button, .woocommerce-page table.cart td.actions .button {
      width: auto !important;
    }
}
.woocommerce-cart .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.woocommerce-cart .coupon input.input-text {
    flex: 1;
    min-width: 200px;
}
.woocommerce-cart .coupon button {
    white-space: nowrap;
    padding: 10px 20px;
}
@media (max-width: 480px) {
    .shop_table.coupon {
       align-items: stretch;
      width: 100%;
    }
    .shop_table.coupon input.input-text {
        width: 100% !important;
    }
    .shop_table .coupon button {
        width: 100% !important;
        text-align: center;
    }
  }
/* cart page css */
.woocommerce-cart .button.wp-element-button {
  padding: 10px 22px !important;
	border-radius: 6px !important;
	border: none !important;
	font-size: 15px !important;
	cursor: pointer !important;
}
.wp-block-woocommerce-checkout {
  width: 80% !important;
  margin: auto !important;
}
.wc-proceed-to-checkout {
	text-align: center;
	margin: initial;
  width: max-content;
}
.wc-proceed-to-checkout .checkout-button {
	display: inline-block;
	width: 100%;
	max-width: 320px;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 8px;
	text-align: center;
	color: #fff;
}
@media (max-width: 768px) {
	.wc-proceed-to-checkout .checkout-button {
		max-width: 100%;
		font-size: 15px;
		padding: 14px;
	}
}
.woocommerce-cart .wp-block-group.alignfull {
	padding-left: 0 !important;
}
@media (max-width: 320px) {
  .wc-block-components-formatted-money-amount {
  display: none;
}
}
@media (max-width: 1024px) {
 .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
  margin-left: -20px !important;
}
}
/* Core lays this grid out with plain floats (ul.products{float:none} +
   li.product{float:left}), which never equalizes row height - a product
   whose title wraps to 2 lines instead of 1 just ends up taller than its
   neighbors, so the visible card borders zigzag up and down across a row
   depending on each product's own title length. Flex + wrap fixes the
   *row*: default align-items:stretch makes every card in that row match
   the tallest one's height, regardless of how much text it has. */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: flex !important;
  flex-wrap: wrap !important;
}

.woocommerce ul.products li.first, .woocommerce-page ul.products li {
    border: 1px solid #b3aaaa !important;
    padding: 8px !important;
    /* Without this, the border+padding above add on top of the column
       width core already computes as a percentage, instead of fitting
       inside it - inflating every card past its assigned column share,
       which is what was making cards different widths and overflowing
       past where the grid math expected them to end. */
    box-sizing: border-box !important;
    /* display:flex is set separately further down, now that the
       add-to-cart button is a small positioned icon (not a centered
       inline-block) and no longer depends on this element's own
       text-align for its placement. */
}

/* Product titles wrapping to 1 line for a short name and 2-3 for a long one
   was the actual source of the uneven card heights (not just card width) -
   pin every title to exactly one line, truncated with an ellipsis, so
   title length can no longer affect a card's height at all. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.featured-tabs__card-name,
.mega-tab-card span {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}
@media (max-width: 1200px) and (min-width: 991px) {
 ul.products li.product .add_to_cart_button {
  padding: 5px 10px !important;
 }
 .woocommerce .added_to_cart.wc-forward {
    margin-top: 5px;
    font-size: 16px;
    padding: 12px 15px !important;
}
}
.woocommerce button.button:disabled[disabled] {
  opacity: 1 !important;
}
/* animation woocommerce pages */
.woocommerce ul.products li.product{
  animation: zoomInUp 0.6s ease-out both;
  overflow: hidden;
  animation-delay: 0.8s;
}
@keyframes zoomInUp {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(100px);
  }
  60% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
/* single post page animation */
.entry-content,.wp-block-comments,.single-post-meta,.taxonomy-category, .single .wp-block-post-featured-image {
  animation: zoomInUp 0.6s ease-out both;
  overflow: hidden;
  animation-delay: 0.8s;
}
@keyframes zoomInUp {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(100px);
  }
  60% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
/* Added css */
.woocommerce .woocommerce-breadcrumb {
  padding-left: 85px !important;
  width: 90% !important;
  font-size: 13px !important;
}
.woocommerce-products-header__title.page-title {
  padding-left: 80px !important;
  width: 90% !important;
}
.woocommerce .woocommerce-result-count {
  padding-left: 80px;
  width: 90% !important;
  font-size: 13px !important;
}
.woocommerce .woocommerce-ordering {
  padding-right: 89px;
}
.woocommerce-ordering select {
  font-size: 13px !important;
}
@media (max-width: 1400px) and (min-width: 991px) {
   .woocommerce .woocommerce-breadcrumb,
  .woocommerce-products-header__title.page-title,
  .woocommerce .woocommerce-result-count {
    padding-left: 60px !important;
    width: 100% !important;
  }
  .woocommerce .woocommerce-ordering {
    padding-right: 70px;
  }
}
@media (max-width: 990px) and (min-width: 768px) {
  .woocommerce .woocommerce-breadcrumb,
  .woocommerce-products-header__title.page-title,
  .woocommerce .woocommerce-result-count {
    padding-left: 40px !important;
    width: 100% !important;
  }
  .woocommerce .woocommerce-ordering {
    padding-right: 55px;
  }
}
@media (max-width: 767px){
  .woocommerce .woocommerce-breadcrumb,
  .woocommerce-products-header__title.page-title,
  .woocommerce .woocommerce-result-count {
    padding-left: 50px !important;
    width: 100% !important;
  }
  .woocommerce .woocommerce-ordering {
    padding-right: 70px;
  }
  /* The 50px above is tuned for the shop archive header - on a single
     product page it just pushes the breadcrumb way off to the right of
     everything below it (title, gallery, etc., which start flush at the
     page's normal content edge). Realign it to match those instead. */
  .single-product .woocommerce-breadcrumb {
    padding-left: 0 !important;
    text-align: left;
  }
}
@media (max-width: 425px) and (min-width: 320px){
 .woocommerce .woocommerce-ordering {
    padding-right: 30px !important;
  }
}
/* my account page css */
.woocommerce-account .wp-site-blocks main .woocommerce {
  max-width: 90% !important;
  margin: 0 auto;
}
/* Category section image shine animation */
.category-sec figure.cat-main-img {
  position: relative;
  overflow: hidden;
}
.category-sec figure.cat-main-img::after {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.4) 100%
  );
  transform: skewX(-25deg);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.category-sec figure.cat-main-img:hover::after {
  animation: shine 1s ease;
  opacity: 1;
}
@keyframes shine {
  100% {
    left: 130%;
  }
}
/* footer css */
.copyright-text {
  text-decoration: none;
}
/* sidebar block css */
.wp-block-sidebar .wp-block-group.has-background {
  transition: 
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}
/* Hover effect */
.wp-block-sidebar .wp-block-group.has-background:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 10px #5e5e5e;
  border: 1px solid #0000;
}
/* shop page breadcrumb css */
.woocommerce-products-header .woocommerce-products-header__title.page-title {
  margin: -5px 0px 7px 0px;
  font-size: 24px;
}
/* Add to cart & View cart in one line */
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart {
	display: inline-flex !important;
	align-items: center !important;
	margin: 5px 6px 0 0 !important;
	vertical-align: middle !important;
}
.woocommerce ul.products li.product {
	text-align: center !important;
}
/* single post page css */
.single-postpage {
   transition: 
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.single-postpage:hover {
   transform: translateY(-10px);
  box-shadow: 0 0 10px #5e5e5e;
  border: 1px solid #0000;
}

/* Header nav mega menu: dropdown always spans the full page width */
.header-nav .has-child .wp-block-navigation__submenu-container {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--borocco-header-height, 140px) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  /* With overflow:visible (previously), content taller than the viewport
     just spilled silently past the bottom edge - unreachable, since fixed
     positioning takes it out of the page's own scroll flow entirely. Capping
     height to whatever room is actually left below the header and scrolling
     that internally fixes both that and the wheel-scroll bug: overscroll-
     behavior:contain stops the scroll from chaining through to the page
     once this reaches its own top/bottom edge, instead of the wheel action
     falling through to move the main scrollbar. */
  max-height: calc(100vh - var(--borocco-header-height, 140px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  margin: 0 !important;
  box-sizing: border-box;
  padding: 24px 5% 136px;
  z-index: 9999;
  visibility: visible !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
/* .lower-header centers its columns vertically (align-items:center), which
   sizes each column - including .lower-nav - to its own content height
   rather than the row's full height. mega-menu.js tracks mouseleave on
   .lower-nav to decide when the pointer has truly left the bar, so if that
   box is shorter than the visible row, moving the mouse into the blank
   space above/below the link text (still inside the visibly white bar)
   already counts as "left" and closes the dropdown early. Stretching this
   column to the row's full height - then re-centering its own content -
   makes its hit area match what's actually visible. */
.lower-header .lower-nav {
  align-self: stretch;
  display: flex;
  align-items: center;
}
/* .mega-open (set by mega-menu.js) is the only thing that opens/closes the
   dropdown now - native hover/aria-expanded state is ignored, since the
   fixed-position panel no longer overlaps the trigger's own hover box.
   Anchored scaleY (not width/height) so it draws out top-to-bottom instead
   of a horizontal left-to-right reveal. */
.header-nav .has-child:not(.mega-open) > .wp-block-navigation__submenu-container {
  transform: scaleY(0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.header-nav .has-child.mega-open > .wp-block-navigation__submenu-container {
  transform: scaleY(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Every dropdown shares the exact same fixed position/size (see the
   full-width rule below), so switching straight to another item while one
   is open doesn't need the grow/collapse transform at all - both the
   outgoing and incoming panel can just stay pinned at full scale and
   crossfade opacity, which reads as the SAME panel's content changing
   instead of one panel closing and a different one opening. mega-menu.js
   adds/removes these two classes together, in the same tick, so both
   transitions run concurrently. Placed after the rules above so equal
   specificity resolves in this pair's favor while either class is present. */
.header-nav .has-child.is-switching-out > .wp-block-navigation__submenu-container {
  transform: scaleY(1) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.12s ease !important;
}
.header-nav .has-child.is-switching-in > .wp-block-navigation__submenu-container {
  transform: scaleY(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.12s ease !important;
}
/* Marks which top-level item its dropdown currently belongs to, since the
   arrow icon (which used to serve that purpose) is gone and the trigger's
   own text stays unchanged otherwise, hover or not. */
.header-nav .has-child.mega-open > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--primary) !important;
  font-weight: 600 !important;
}
.header-nav .has-child .wp-block-navigation__submenu-container {
  transform-origin: top !important;
  transition: transform 0.15s ease, opacity 0.12s ease !important;
}
.header-nav .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item {
  width: 100%;
}

/* Dropdown content (headings/lists/columns) inherits the nav's own small,
   compressed font context by default, so headings and links end up nearly
   the same size with no visual hierarchy - style them explicitly instead. */
.header-nav .wp-block-navigation__submenu-container .wp-block-columns {
  gap: 40px;
  align-items: flex-start;
}
.header-nav .wp-block-navigation__submenu-container .wp-block-heading {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 0 4px !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.header-nav .wp-block-navigation__submenu-container .wp-block-list {
  /* Overrides the theme's own ".wp-block-navigation ul li.open-on-hover-click ul"
     rule, which hides ANY nested <ul> inside an open-on-hover-click trigger
     (its matching "show" rule only targets the direct-child ul, never a
     ul nested this deep) - without !important this list stays invisible. */
  position: static !important;
  width: auto !important;
  float: none !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
  transform: none !important;
}
.header-nav .wp-block-navigation__submenu-container .wp-block-list li {
  margin: 0 !important;
  width: auto !important;
  position: static !important;
  /* theme's own open-on-hover-click li rule adds a border-bottom divider */
  border: none !important;
  background: none !important;
}
.header-nav .wp-block-navigation__submenu-container .wp-block-list a {
  font-size: 14px;
  text-decoration: none;
  opacity: 0.85;
  border: none !important;
  background: none !important;
}
.header-nav .wp-block-navigation__submenu-container .wp-block-list a:hover {
  opacity: 1;
  text-decoration: underline;
  border: none !important;
  background: none !important;
}
.header-nav .wp-block-navigation__submenu-container p {
  font-size: 14px;
  opacity: 0.75;
  margin: 0 0 12px;
}

/* The theme's own ".wp-block-navigation ul li.open-on-hover-click ul" rule
   (no !important) hides ANY nested <ul> inside an open-on-hover-click
   trigger regardless of class - already worked around once for
   .wp-block-list above, needed again here since the mega-links/mega-tabs
   markup uses its own plain <ul>s. */
.header-nav .mega-links-col ul,
.header-nav .mega-tabs-list ul {
  position: static !important;
  width: auto !important;
  float: none !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
  transform: none !important;
  background: none !important;
}
/* Same override, but display stays none by default here - this nested
   list (one level down, under its own parent trigger) only reveals once
   that parent is .is-active, further down this file. */
.header-nav .mega-subtabs-list {
  position: static !important;
  width: auto !important;
  float: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
  transform: none !important;
  background: none !important;
}
.header-nav .mega-links-col li,
.header-nav .mega-tabs-list li,
.header-nav .mega-subtabs-list li {
  width: auto !important;
  position: static !important;
  border: none !important;
  background: none !important;
}
.header-nav .mega-links-col li a,
.header-nav .mega-tabs-list li a {
  border: none !important;
  background: none !important;
}
.header-nav .mega-links-col li:hover,
.header-nav .mega-tabs-list li:hover {
  background: none !important;
}
.header-nav .mega-subtabs-trigger {
  border: none !important;
  background: none !important;
}

/* Mega menu, layout "links": 5 equal columns, each an optional label plus
   up to 5 links - fully configured per nav item via the Inspector. */
.mega-links-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  justify-content: start;
  gap: 32px;
  width: 100%;
}
.mega-links-col {
  min-width: 0;
}
.mega-links-col h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mega-links-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mega-links-col a {
  text-decoration: none;
  font-size: 14px;
  opacity: 0.85;
}
.mega-links-col a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Mega menu, layout "tabs": column 1 lists configurable trigger buttons,
   columns 2-6 show up to 5 image+name+url cards, swapped by mega-menu.js
   based on which trigger in col 1 is hovered. */
.mega-tabs-grid {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}
.mega-tabs-list {
  flex: 0 0 180px;
  border-right: 1px solid rgba(127, 127, 127, 0.25);
  padding-right: 24px;
}
.mega-tabs-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mega-tabs-list a {
  text-decoration: none;
  font-size: 14px;
  opacity: 0.75;
  display: block;
}
.mega-tabs-trigger.is-active a,
.mega-tabs-list a:hover {
  opacity: 1;
  font-weight: 600;
}
.mega-tabs-panels {
  display: none;
  flex: 1;
  grid-template-columns: repeat(5, 1fr);
  justify-content: start;
  gap: 20px;
}
.mega-tabs-panels.is-active {
  display: grid;
}
.mega-tab-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  gap: 8px;
  opacity: 0.85;
}
.mega-tab-card:hover {
  opacity: 1;
}
.mega-tab-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
}
.mega-tab-card__image--placeholder {
  display: block;
  background: rgba(127, 127, 127, 0.12);
  border: 1px dashed rgba(127, 127, 127, 0.35);
}

/* Second tab level: a nested list under its own parent trigger in column
   1 (only present when that tab has subTabs configured - see
   borocco_electronics_render_mega_menu_tabs() in functions.php). Hidden
   until the parent .mega-tabs-trigger is .is-active, so hovering a
   level-1 item with sub-tabs unfurls them directly beneath it. */
.mega-tabs-list .mega-subtabs-list {
  display: none;
  list-style: none;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0 0 0 24px;
}
.mega-tabs-trigger.has-subtabs.is-active > .mega-subtabs-list {
  display: flex;
}
.mega-subtabs-trigger {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: inherit;
  opacity: 0.7;
  padding: 0;
  cursor: pointer;
}
.mega-subtabs-trigger.is-active,
.mega-subtabs-trigger:hover {
  opacity: 1;
  color: var(--wp--preset--color--primary);
  font-weight: 600;
}
/* The card panel this trigger switches lives one level up, in
   .mega-tabs-panels (column 2-6) - spans that panel's full width
   regardless of its 5-column grid, since only one sub-tab's panel is
   ever visible at a time. */
.mega-subtabs-panel {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.mega-subtabs-panel.is-active {
  display: grid;
}

/* Featured Products tabs (homepage section replacing Testimonials): a
   heading, a row of click-switched tabs, and per-tab a hero item plus a
   grid of product cards - all configured via the block's Inspector. */
.home-quick-links .wp-block-column:empty {
  /* The 3 unused placeholder columns still ate flex `gap` space when
     stacked on mobile, padding the row out with dead vertical space. */
  display: none;
}
@media screen and (max-width: 767px) {
  .home-quick-links .wp-block-button__link {
    font-size: 12px;
  }
}
.featured-tabs {
  padding: 32px 3.3333%;
  text-align: center;
}
.featured-tabs__heading {
  /* Matches the "Khám phá" / "Hỗ trợ khách hàng" section heading size,
     weight, and color exactly. */
  font-size: 28px;
  font-weight: 700;
  color: #222222;
  margin: 0 0 18.6667px;
}
.featured-tabs__nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 21.3333px;
  border-bottom: 1px solid rgba(127, 127, 127, 0.2);
  padding-bottom: 10.6667px;
  margin-bottom: 21.3333px;
  /* Match .featured-tabs__panel's zone width above, so this row's
     border-bottom divider lines up with the hero/grid content instead of
     spanning the full (wider) section padding box. */
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.featured-tabs__tab {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: inherit;
  opacity: 0.6;
  padding: 2.6667px 0;
  position: relative;
}
.featured-tabs__tab:hover {
  opacity: 0.85;
}
.featured-tabs__tab.is-active {
  opacity: 1;
  color: var(--wp--preset--color--primary);
}
.featured-tabs__tab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -11.3333px;
  height: 4px;
  border-radius: 2px;
  background: var(--wp--preset--color--primary);
}
.featured-tabs__panel {
  display: none;
  text-align: left;
  /* Matches mi.com/vn's featured-tab section content width at desktop
     (their --max-width-1400 var resolves to 1180px at a 1440px viewport). */
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.featured-tabs__panel.is-active {
  display: block;
}
.featured-tabs__hero {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 348px;
  background: rgba(127, 127, 127, 0.06);
  margin-bottom: 24px;
  border-radius: 16px;
  overflow: hidden;
}
.featured-tabs__hero-image {
  flex: 1 1 50%;
  min-width: 0;
  background: #000;
  position: relative;
}
/* Absolutely positioned instead of a height:100% chain - a height:100%
   on this a/img can't resolve once the container's own height comes from
   aspect-ratio (mobile, below) rather than a definite pixel value, and
   silently falls back to the photo's own near-square intrinsic size. */
.featured-tabs__hero-image a {
  position: absolute;
  inset: 0;
}
.featured-tabs__hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-tabs__hero-content {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 26.6667px;
  gap: 8px;
  overflow: auto;
}
.featured-tabs__hero-tagline {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}
.featured-tabs__hero-heading {
  /* Matches mi.com/vn's .item-info__title at a 1440px viewport. */
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}
.featured-tabs__hero-price {
  font-size: 12px;
  margin: 0;
}
.featured-tabs__hero-price .label {
  opacity: 0.7;
  margin-right: 4px;
}
.featured-tabs__hero-price .amount {
  font-weight: 700;
}
.featured-tabs__hero-price del {
  opacity: 0.5;
  margin-left: 5.3333px;
  font-size: 10px;
}
.featured-tabs__hero-cta {
  display: inline-block;
  margin-top: 5.3333px;
  padding: 8px 18.6667px;
  background: var(--wp--preset--color--primary);
  color: #fff;
  text-decoration: none;
  border-radius: 2.6667px;
  font-size: 9.3333px;
  font-weight: 600;
}
.featured-tabs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.featured-tabs__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  gap: 6.6667px;
  aspect-ratio: 6 / 4;
  background: rgba(127, 127, 127, 0.06);
  border-radius: 16px;
  padding: 16px;
}
.featured-tabs__card-image {
  /* Small enough that image + name + price actually fit inside the
     card's 6:4 box - at 55%/120px the stack needed more height than
     that ratio allows, so the card just grew taller (square) instead. */
  width: 36%;
  max-width: 90px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 8px;
}
.featured-tabs__card-image--placeholder {
  display: block;
  border: 1px dashed rgba(127, 127, 127, 0.35);
}
.featured-tabs__card-name {
  /* Kept proportionally smaller than .featured-tabs__hero-heading (the
     small grid cards are a fraction of the hero's width) - copying
     mi.com's own px value here ignored that its card at this breakpoint
     isn't the same size relative to its hero as ours is. */
  font-size: 14px;
  font-weight: 600;
}
.featured-tabs__card-price {
  font-size: 12px;
}
.featured-tabs__card-price .amount {
  font-weight: 700;
}
.featured-tabs__card-price del {
  opacity: 0.5;
  margin-left: 4px;
  font-size: 8.6667px;
}

@media screen and (max-width: 781px) {
  .featured-tabs {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .featured-tabs__heading {
    font-size: 21px;
  }
  /* Matches .featured-tabs__heading at both sizes - inline style (block
     editor's own font-size attribute) needs !important to be beaten here. */
  .bestsellers-sec h2.wp-block-heading {
    font-size: 21px !important;
  }
  .featured-tabs__hero {
    /* No longer a fixed 348px split 50/50 with the image - that squeezed
       the content area down to almost nothing. Height now just follows
       the image's own 2:1 aspect-ratio plus the content's natural height. */
    height: auto;
    flex-direction: column;
  }
  .featured-tabs__hero-image {
    flex: none;
    aspect-ratio: 2 / 1;
  }
  .featured-tabs__hero-heading {
    font-size: 16px;
  }
  /* Button hidden - the whole content area becomes the tap target instead
     (see featured-tabs.js), still going to the same ctaUrl. */
  .featured-tabs__hero-cta {
    display: none;
  }
  .featured-tabs__hero-content {
    flex: none;
    cursor: pointer;
  }
  .featured-tabs__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .featured-tabs__card-name {
    font-size: 12px;
  }
}

/* ==========================================================================
   Mobile navigation: hamburger toggle + slide-in drawer for .header-nav.
   That block has "overlayMenu":"never" set in main-header.php, so core
   never renders its own responsive-container/hamburger for it - this is
   the only system driving the mobile menu, instead of two fighting over
   the same submenu markup.
   ========================================================================== */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--wp--preset--color--heading);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
body.mobile-nav-open .mobile-nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.mobile-nav-open .mobile-nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
body.mobile-nav-open .mobile-nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.mobile-nav-backdrop {
  display: none;
}

@media screen and (max-width: 1199px) {
  .mobile-nav-toggle {
    display: flex;
    order: -1;
  }

  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 10000;
  }
  body.mobile-nav-open .mobile-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  body.mobile-nav-open {
    overflow: hidden;
  }

  /* The nav becomes a fixed slide-in panel instead of an inline bar - its
     column (.lower-nav) is left alone here, since with .header-nav taken
     out of flow via position:fixed, that column's own width no longer
     affects anything visible. */
  .header-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(320px, 85vw) !important;
    height: 100vh !important;
    max-width: none !important;
    background: var(--wp--preset--color--background) !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 10001;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 72px 24px 24px !important;
    box-sizing: border-box;
    /* Core's own navigation CSS defaults flex-wrap to "wrap" (this block's
       layout config never set it to nowrap). Combined with flex-direction:
       column below, that means "wrap" wraps along the CROSS axis - i.e.
       horizontally, into a second column - the instant one item's expanded
       content makes the column's total height taller than the drawer.
       That's the exact bug: tapping "Phong cách sống" made its <li> tall
       enough to overflow, so it wrapped into a new column starting back at
       the top instead of just growing the single column downward. */
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.mobile-nav-open .header-nav {
    transform: translateX(0);
  }
  .header-nav .wp-block-navigation-item {
    width: 100%;
  }
  .header-nav .wp-block-navigation-item__content {
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--wp--preset--color--border-color, rgba(127, 127, 127, 0.2));
  }

  /* Inside the drawer, a tapped item's panel expands in place (an
     accordion) instead of the desktop full-viewport fixed dropdown - these
     rules sit after the desktop ones earlier in this file, so on equal
     specificity they win here. */
  .header-nav .has-child .wp-block-navigation__submenu-container {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    padding: 12px 0 20px !important;
    box-shadow: none !important;
  }
  .header-nav .has-child:not(.mega-open) > .wp-block-navigation__submenu-container {
    display: none !important;
    transform: none !important;
  }
  .header-nav .has-child.mega-open > .wp-block-navigation__submenu-container,
  .header-nav .has-child.is-switching-in > .wp-block-navigation__submenu-container,
  .header-nav .has-child.is-switching-out > .wp-block-navigation__submenu-container {
    display: block !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .header-nav .wp-block-navigation__submenu-container .wp-block-columns,
  .mega-links-grid {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .mega-tabs-grid {
    flex-direction: column !important;
  }
  .mega-tabs-list {
    flex: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(127, 127, 127, 0.25);
    padding-right: 0 !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px;
  }
  .mega-tabs-list ul {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 16px !important;
  }
  /* Level-1 triggers wrap into a horizontal row at this width (rule
     above) - one with a nested sub-tabs list needs the full row to
     itself once it unfurls, or the reveal fights for space next to its
     siblings instead of dropping cleanly below its own label. */
  .mega-tabs-list li.mega-tabs-trigger.has-subtabs {
    flex: 1 1 100%;
  }
  .mega-tabs-panels {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .mega-subtabs-panel {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media screen and (max-width: 480px) {
  .mega-tabs-panels {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .mega-subtabs-panel {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

/* ==========================================================================
   Hero banner: per-product slide content (name/tagline/price/2 CTAs)
   replacing the old single generic heading+paragraph+button. .slide-box
   keeps its existing name (the 1200px+ "only the active slide's box is
   visible" rule in the section above keys off it) - .hero-slide is an
   additional class on the same element for this content's own styling.
   ========================================================================== */
.hero-slide__price {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.hero-slide__price .woocommerce-Price-amount {
  color: #fff;
}
.hero-slide__actions {
  align-items: center;
}
.hero-slide__cta .wp-block-button__link {
  background: #fff;
  color: var(--wp--preset--color--heading, #111) !important;
}
.hero-slide__cta .wp-block-button__link:hover {
  background: var(--wp--preset--color--primary);
  color: #fff !important;
}
.hero-slide__more .wp-block-button__link {
  background: none;
  padding: 0 !important;
  color: #fff;
  text-decoration: underline;
}
.hero-slide__more .wp-block-button__link:after {
  content: '\2192';
  margin-left: 6px;
}

/* Prev/next arrows on the slide edges, vertically centered - frosted-glass
   squircle buttons (semi-transparent light background, blurred, rounded
   square) matching the reference screenshot, a distinct look from the
   projects-slider's own top-right square buttons above.

   Selectors combine both classes (.swiper-button-prev.borocco-...) rather
   than relying on the single .borocco-... class alone - swiper-bundle.css
   is enqueued AFTER this stylesheet (see functions.php), so at equal
   specificity its own .swiper-button-prev width/height/margin-top rule
   otherwise wins in the cascade and silently overrides this one. */
.swiper-button-prev.borocco-electronics-slider-button-prev,
.swiper-button-next.borocco-electronics-slider-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  margin-top: 0;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  color: #fff;
  z-index: 3;
  opacity: 0.85;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.swiper-button-prev.borocco-electronics-slider-button-prev {
  left: 20px;
}
.swiper-button-next.borocco-electronics-slider-button-next {
  right: 20px;
}
.swiper-button-prev.borocco-electronics-slider-button-prev:after,
.swiper-button-next.borocco-electronics-slider-button-next:after {
  font-size: 18px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.swiper-button-prev.borocco-electronics-slider-button-prev:hover,
.swiper-button-next.borocco-electronics-slider-button-next:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.35);
}

@media screen and (max-width: 767px) {
  .hero-slide {
    max-width: 100% !important;
  }
  .borocco-electronics-slider-button-prev,
  .borocco-electronics-slider-button-next {
    display: none;
  }
}

/* ==========================================================================
   Support strip: 4-column trust/service row (icon + heading + short text).
   ========================================================================== */
.support-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.support-strip__icon {
  display: inline-flex;
  color: var(--wp--preset--color--primary);
}
.support-strip__icon svg {
  width: 32px;
  height: 32px;
}
.support-strip__link {
  display: contents;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.support-strip__link:hover h6 {
  text-decoration: underline;
}
.support-strip .support-strip__row {
  /* Matches mi.com/vn's support section width (--support-max-width: 960px
     at a 1440px viewport) and its 4-column grid gap. */
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  gap: 14px;
}
.support-strip__item {
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .projects-heading h3 {
    font-size: 21px !important;
  }
  .support-strip > h3 {
    font-size: 21px !important;
  }
  .support-strip .support-strip__row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 24px 14px;
    max-width: 100%;
  }
  .support-strip__item {
    max-width: none;
  }
}

/* ==========================================================================
   Blog post items (blog-listing / blog-page-*-sidebar templates): rounded
   corners to match the product card treatment (ul.products li.product,
   .wc-block-grid__product above) instead of the sharp-edged bar look.
   ========================================================================== */
.archieve-post {
  border-radius: 12px;
  overflow: hidden;
}
.archieve-post .wp-block-post-featured-image img {
  border-radius: 8px;
}

/* Tile the post cards side by side (blog-post-grid, set on the
   wp:post-template block in blog-page-no-sidebar.html), the same way
   product cards wrap in a grid instead of stacking full-width. The
   left padding below was sized for the old full-width bar layout, where
   it made room next to the date badge - too wide once each card is only
   ~1/3 of the row, so it's cut down to match the other sides. */
.blog-post-grid {
  gap: var(--wp--custom--spacing--column-gap);
}
@media (max-width: 991px) {
  .blog-post-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .blog-post-grid {
    grid-template-columns: 1fr !important;
  }
}

/* The date badge is sized/positioned for the old full-width bar, where
   its footprint barely registered against the row's width - at ~1/3 the
   width per tile it needs to shrink too, or it eats a third of the card
   just as empty gutter. Padding-left is cut down to match the smaller
   badge instead of the original spacing|80 (~81px) reserved for it. */
.blog-post-grid .archieve-post {
  padding-left: 56px !important;
  height: 100%;
  box-sizing: border-box;
}
.blog-post-grid .blog-date-box {
  left: 10px;
  top: 10px;
}
.blog-post-grid .blog-date-box .wp-block-post-date {
  font-size: 1.1rem !important;
  padding-top: 8px !important;
}
.blog-post-grid .blog-date-box .blog-date-mon {
  font-size: 0.6rem !important;
  letter-spacing: 2px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Title/excerpt were sized for a wide single-column row; clamped and
   scaled down so a long headline can't wrap into the badge or blow the
   card taller than its row neighbours. Category/author meta row was
   removed from the template entirely (blog-page-no-sidebar.html), so
   the title is now the card's first normal-flow element. */
.blog-post-grid .wp-block-post-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  line-height: 1.3;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-post-grid p.wp-block-post-excerpt__excerpt {
  margin-top: 8px;
  font-size: 13px;
  -webkit-line-clamp: 2;
}
.blog-post-grid .wp-block-post-excerpt__more-text {
  margin-top: 10px;
}
.blog-post-grid .wp-block-post-excerpt__more-link {
  font-size: 12px;
}
/* archive.html's card (unlike blog-page-no-sidebar.html) includes a
   featured image between the title and excerpt - sized/cropped like a
   product card's image instead of running at whatever size the source
   photo happens to be. */
.blog-post-grid .wp-block-post-featured-image {
  margin: 8px 0 0;
}
.blog-post-grid .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ==========================================================================
   Shop archive: left filter sidebar (category tree + price filter), added
   back via sidebar-shop.php since the block-theme "Legacy Template"
   renderer doesn't fire woocommerce_sidebar (see functions.php). Scoped by
   body class so it only affects product listing pages, not single-product/
   cart/checkout, which share the same #content wrapper markup.
   ========================================================================== */
body.post-type-archive-product #content,
body.tax-product_cat #content,
body.tax-product_tag #content {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
body.post-type-archive-product #content > #primary,
body.tax-product_cat #content > #primary,
body.tax-product_tag #content > #primary {
  flex: 1;
  min-width: 0;
}
.shop-sidebar {
  flex: 0 0 260px;
  width: 260px;
}
.shop-sidebar__widget {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--wp--preset--color--border-color, #e5e5e5);
}
.shop-sidebar__widget:last-child {
  border-bottom: none;
}
.shop-sidebar__widget .widgettitle {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 16px;
}

/* Category tree accordion: children collapsed by default, expanded for the
   branch containing the current category, or once toggled open. */
.widget_product_categories ul.product-categories,
.widget_product_categories ul.children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget_product_categories ul.children {
  margin-left: 14px;
  max-height: 0;
  overflow: hidden;
}
.widget_product_categories li.current-cat-parent > ul.children,
.widget_product_categories li.is-expanded > ul.children {
  max-height: none;
}
.widget_product_categories li.cat-item {
  position: relative;
}
.widget_product_categories li.cat-item > a {
  display: inline-block;
  padding: 7px 0;
  font-size: 13px;
  text-decoration: none;
}
.widget_product_categories li.cat-item > a:hover,
.widget_product_categories li.current-cat > a {
  color: var(--wp--preset--color--primary);
}
.widget_product_categories .count {
  font-size: 12px;
  opacity: 0.6;
}
.widget_product_categories .cat-tree-toggle {
  position: absolute;
  right: 0;
  top: 4px;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  transition: transform 0.2s ease;
}
.widget_product_categories .cat-tree-toggle:hover {
  opacity: 1;
}
.widget_product_categories li.is-expanded > .cat-tree-toggle {
  transform: rotate(90deg);
}

/* Price filter widget */
.widget_price_filter input[type="text"] {
  width: 90px;
  border: 1px solid var(--wp--preset--color--border-color, #dcdcdc);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
}

/* Once the slider JS initializes, it hides the two min/max text inputs and
   un-hides .price_label instead - the visible result is just the slider,
   the price range text, and the submit button, in that order. Reordering
   .price_label ahead of the button (it's after it in the actual markup)
   needs a flex container; right-aligning only the button is then a plain
   align-self, not a second axis of layout. */
.widget_price_filter .price_slider_amount {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.widget_price_filter .price_label {
  order: 1;
  display: block !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  opacity: 0.75;
}
.widget_price_filter button[type="submit"] {
  order: 2;
  align-self: flex-end;
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  background: var(--wp--preset--color--heading, #222) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
}
.widget_price_filter button[type="submit"]:hover {
  background: var(--wp--preset--color--primary) !important;
}

.widget_price_filter .ui-slider {
  position: relative;
  height: 4px;
  margin: 10px 7px 6px;
  background: var(--wp--preset--color--border-color, #dcdcdc);
  border-radius: 2px;
}
.widget_price_filter .ui-slider-range {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
  background: var(--wp--preset--color--primary) !important;
  border-radius: 2px;
}
.widget_price_filter .ui-slider-handle {
  position: absolute !important;
  top: 50% !important;
  left: 0;
  width: 12px !important;
  height: 12px !important;
  margin-left: -6px !important;
  margin-top: -6px !important;
  transform: none !important;
  background: var(--wp--preset--color--primary) !important;
  border: 2px solid #fff !important;
  /* Without this, the border adds on top of the 12px box (16px true
     rendered size) while the margin offsets above still assume 12px -
     the handle's real center then sits a couple px below the track's
     top:50% line instead of on it. */
  box-sizing: border-box !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer;
  outline: none !important;
}

@media screen and (max-width: 991px) {
  body.post-type-archive-product #content,
  body.tax-product_cat #content,
  body.tax-product_tag #content {
    flex-direction: column;
  }
  .shop-sidebar {
    width: 100%;
    flex-basis: auto;
    order: 2;
  }
}

/* ==========================================================================
   Header search: icon button (search-box column) toggles a full-width
   dropdown panel (assets/js/search-panel.js) - reuses the same
   --borocco-header-height var the mega-menu dropdown lines up against.
   ========================================================================== */
.search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--wp--preset--color--foreground);
}
.search-toggle svg {
  width: 20px;
  height: 20px;
}

.search-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 9997;
}
body.search-panel-open .search-panel-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.search-panel {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--borocco-header-height, 90px);
  background: var(--wp--preset--color--background, #fff);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  z-index: 9998;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
body.search-panel-open .search-panel {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.search-panel__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px;
}
.search-panel__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--wp--preset--color--body-text);
}
.search-panel__form {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--wp--preset--color--heading);
  padding-bottom: 12px;
}
.search-panel__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--wp--preset--color--body-text);
}
.search-panel__input {
  flex: 1;
  border: none;
  background: none;
  margin-left: 14px;
  font-size: 22px;
  color: var(--wp--preset--color--heading);
}
.search-panel__input:focus {
  outline: none;
}
.search-panel__input::placeholder {
  color: var(--wp--preset--color--body-text);
  opacity: 0.6;
}
.search-panel__submit {
  flex-shrink: 0;
  border: none;
  background: var(--wp--preset--color--primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 12px;
}
.search-panel__submit:hover {
  opacity: 0.9;
}
.search-panel__quicklinks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}
.search-panel__quicklinks-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--wp--preset--color--body-text);
}
.search-panel__quicklinks a {
  font-size: 13px;
  text-decoration: none;
  color: var(--wp--preset--color--heading);
  opacity: 0.8;
}
.search-panel__quicklinks a:hover {
  opacity: 1;
  color: var(--wp--preset--color--primary);
}

@media screen and (max-width: 599px) {
  .search-panel__inner {
    padding: 32px 20px;
  }
  .search-panel__input {
    font-size: 17px;
  }
  .search-panel__submit {
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* ==========================================================================
   Product-loop add-to-cart button: icon only, right-aligned in the card.
   The "View cart" link (.added_to_cart.wc-forward) that appears after a
   successful AJAX add isn't rendered by any template - core's own
   add-to-cart.js builds it client-side (anchor.className =
   'added_to_cart wc-forward'), so there's no PHP hook to remove it from;
   hiding it here is the only way to keep it from ever showing.
   ========================================================================== */
.woocommerce ul.products li.product .added_to_cart {
  display: none !important;
}
/* The image/title/price are all wrapped in one <a>, and the add-to-cart
   button is a separate sibling AFTER that whole link inside li.product -
   not a descendant of .price. That's why sizing .price alone never moved
   the button: its vertical position depends on li.product's own layout,
   not on anything inside the link. Making li.product a flex column and
   giving the button margin-top:auto pins it to the bottom of the card
   (li.product is already stretched to match its tallest row-sibling via
   the ul.products flex+wrap rule elsewhere in this file), regardless of
   whether the price above happens to be one line or two. */
.woocommerce ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 12px;
  overflow: hidden;
}
.woocommerce ul.products li.product img {
  border-radius: 8px;
}
.woocommerce ul.products li.product .add_to_cart_button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  margin: auto 0 0 auto !important;
  flex-shrink: 0;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  background: var(--wp--preset--color--primary) !important;
}
.woocommerce ul.products li.product .add_to_cart_button:before {
  font-family: dashicons;
  content: "\f174";
  font-size: 15px;
  color: #fff;
}
.woocommerce ul.products li.product .add_to_cart_button.loading:before {
  content: "\f463";
  animation: borocco-electronics-spin 1s linear infinite;
}
@keyframes borocco-electronics-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Product-loop price, on-sale case: WooCommerce always renders <del> (old
   price) before <ins> (new price) in the markup - reordering visually with
   flex, since del/ins are inline elements and can't take an order property
   otherwise. Current price on top and prominent, old price below it and
   smaller/muted. */
.woocommerce ul.products li.product .price {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 700;
}
.woocommerce ul.products li.product .price ins {
  order: 1;
  /* No font-size here on purpose - it inherits the same 14px/700 as a
     regular (non-sale) price above, instead of redeclaring a value that
     could drift out of sync with it. */
  text-decoration: none;
}
.woocommerce ul.products li.product .price del {
  order: 2;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.6;
}

/* ==========================================================================
   Mobile header: one compact row - logo at the left end, hamburger grouped
   with search/cart at the right end - instead of every column stacking to
   its own full-width line (WP core's default columns-on-mobile behavior -
   the "is-not-stacked-on-mobile" class added to .lower-header and the
   search/cart/account row in main-header.php opts both out of that).

   Deliberately a narrower breakpoint (767px, phone-sized) than the
   1199px one the nav drawer itself uses above - tablets still get the
   drawer/hamburger (the desktop mega-menu genuinely doesn't fit there
   either), but keep the fuller column proportions; only small phones get
   this more aggressive one-line compaction.
   ========================================================================== */
@media screen and (max-width: 767px) {
  .lower-header.is-not-stacked-on-mobile {
    position: relative;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  /* .mobile-nav-toggle (core/html) renders as a direct flex child of
     .lower-header, ahead of .logo-box in the markup - reordered here so
     it lands after .lower-right (search + cart) instead, grouping all
     three icons together at the row's right end. .lower-right's own
     margin-left:auto below still pushes that whole trailing group (itself
     + the reordered hamburger after it) flush to the right edge. */
  .lower-header.is-not-stacked-on-mobile > .mobile-nav-toggle {
    order: 1;
  }
  .lower-header.is-not-stacked-on-mobile > .logo-box {
    flex-basis: auto !important;
    /* .wp-block-column.is-vertically-aligned-center sets width:100%
       (core column-alignment CSS), which would otherwise claim the row's
       full remaining width instead of shrinking to the logo image's own
       size. */
    width: auto;
  }
  .lower-header.is-not-stacked-on-mobile > .logo-box img {
    width: 32px !important;
    height: auto !important;
  }
  /* .header-nav itself is position:fixed (see the drawer rules above), so
     this column's own width no longer affects anything visible - collapse
     it instead of leaving a wide empty gap where the desktop nav used to
     sit inline. */
  .lower-header.is-not-stacked-on-mobile > .lower-nav {
    flex-basis: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .lower-header.is-not-stacked-on-mobile > .lower-right {
    flex-basis: auto !important;
    /* Same is-vertically-aligned-center width:100% issue as .logo-box
       above - flex-basis:auto falls back to the width property for
       sizing, so without this the column claimed the full row width
       and margin-left:auto had no free space left to push against,
       leaving the icons flush after the logo instead of at the row's
       right edge. */
    width: auto !important;
    margin-left: auto !important;
  }
  .lower-right .is-not-stacked-on-mobile {
    gap: 14px !important;
  }
  .lower-right .is-not-stacked-on-mobile > .wp-block-column {
    flex-basis: auto !important;
    width: auto !important;
  }
}

/* Left-aligned to match the other 3 footer nav columns (footer-accordion),
   which are plain left-aligned by default with no override of their own. */
.footer-follow {
  text-align: left;
}
@media screen and (min-width: 768px) {
  /* This column and the 3 .footer-accordion ones all share the same
     flex-grow:1/flex-basis:0 split of the row's remaining width (after
     .footer-contact-box's fixed 30%) - bumping just this one's grow
     factor gives it a somewhat bigger slice than its siblings.
     !important: core's own per-block generated class (.wp-container-
     core-column-is-layout-xxxx) sets flex-grow:1 at the same one-class
     specificity, via a <style> tag that lands after this stylesheet. */
  .footer-follow {
    flex-grow: 1.3 !important;
  }
}
.footer-follow .wp-block-social-links {
  display: inline-flex !important;
  margin-left: 0 !important;
}

/* Each icon's own brand color instead of the block's shared iconColor/
   customIconBackgroundColor attributes - those never actually reach the
   rendered HTML (core/social-links has no PHP render callback, so the
   editor would need to have baked an inline style into the pattern's
   static markup itself, and it didn't), so core's own per-service
   :where() defaults were already winning; these plain-specificity rules
   just replace that default gray with each platform's real color. */
.footer-follow .wp-block-social-links .wp-social-link {
  color: #fff !important;
}
.footer-follow .wp-block-social-links .wp-social-link-facebook {
  background-color: #1877f2 !important;
}
.footer-follow .wp-block-social-links .wp-social-link-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%) !important;
}
.footer-follow .wp-block-social-links .wp-social-link-youtube {
  background-color: #ff0000 !important;
}
.footer-follow .wp-block-social-links .wp-social-link-tiktok {
  background-color: #000 !important;
}
.footer-follow .wp-block-social-links .wp-social-link-shopee {
  background-color: #ee4d2d !important;
}

/* Zalo/phone quick-contact row (footer-columns.php), sat between the
   social icons and the subscribe form. */
.footer-contact-actions {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 10px;
}
.footer-contact-actions__item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 12px;
}
.footer-contact-actions__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.footer-contact-actions__icon svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

/* Footer first column (footer-contact-box) on phone screens: logo on the
   left, the 3 contact rows stacked to its right, each row still
   icon+text on one line (like every screen size above 767px already
   does) - not the "everything centered, icon above its own text" stack
   that the shared max-width:991px rule further up (".footer-contact-box
   .is-layout-flex") forces for tablets too. Phone gets its own, narrower
   override here instead of changing that tablet behavior. */
@media screen and (max-width: 767px) {
  .footer-contact-box__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
  }
  .footer-contact-box__rows {
    flex: 1;
    min-width: 0;
  }
  .footer-contact-box .is-layout-flex {
    display: flex !important;
    text-align: left !important;
  }
}
.footer-contact-actions__item:hover .footer-contact-actions__icon {
  color: var(--wp--preset--color--primary);
}

/* Footer email subscribe input (footer-columns.php, reuses the theme's
   otherwise-unused .tnp minimal-newsletter classes) - shrunk down from
   the default 50px/18px sizing and given an actual visible border
   instead of just a bottom-line-under-the-whole-form, so it reads as
   a defined field rather than a bare underline. */
.footer-subscribe form {
  border-bottom: none !important;
}
.footer-subscribe__label {
  text-align: left;
  font-size: 12px;
  color: var(--wp--preset--color--body-text, inherit);
  margin: 0 0 10px;
}
/* Element-UI-style joined input group: always a single row (no wrap) at
   every screen size, adjacent borders collapsed into one shared line,
   rounding only on the group's outer corners. */
.footer-subscribe__group {
  display: flex;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 0 !important;
}
.footer-subscribe__group input {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
  height: 34px !important;
  font-size: 11px !important;
  padding: 0 6px !important;
  border: 1px solid var(--wp--preset--color--border-color, rgba(127, 127, 127, 0.3)) !important;
  border-radius: 0;
  margin-left: -1px;
}
.footer-subscribe__group input.tnp-email {
  /* Phone field - twice as wide as the name field. */
  flex: 2 1 0;
}
.footer-subscribe__group input:first-child {
  margin-left: 0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.footer-subscribe__group input:focus {
  position: relative;
  z-index: 1;
}
.footer-subscribe__group .tnp-submit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px !important;
  padding: 0 !important;
  margin-left: -1px;
  border: 1px solid var(--wp--preset--color--primary);
  border-radius: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  background: var(--wp--preset--color--primary);
  color: #fff;
}

/* Same joined-input-group look, applied to the real WPForms markup
   (wpforms_display()) instead of the static fallback's own classes -
   the form's own field-container/submit-container split is flattened
   into one flex row via display:contents, labels are visually hidden
   (WPForms fields have no placeholder-only mode), and the submit
   button's text is swapped for the same arrow icon used before. */
.footer-subscribe .wpforms-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
}
.footer-subscribe .wpforms-error-noscript {
  display: none;
}
.footer-subscribe .wpforms-field-container {
  display: contents;
}
.footer-subscribe .wpforms-field {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}
.footer-subscribe .wpforms-field[data-field-id="2"] {
  /* Phone field - twice as wide as the name field. */
  flex: 2 1 0;
}
.footer-subscribe .wpforms-field[data-field-id="3"] {
  /* Antispam honeypot field - already hidden by WPForms' own injected
     style once its script runs; this is just a safety net for the
     brief window before that script executes. */
  flex: 0 0 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}
.footer-subscribe .wpforms-field-label,
.footer-subscribe .wpforms-required-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.footer-subscribe .wpforms-field-medium {
  width: 100% !important;
  max-width: 100% !important;
  height: 34px !important;
  font-size: 11px !important;
  padding: 0 6px !important;
  border: 1px solid var(--wp--preset--color--border-color, rgba(127, 127, 127, 0.3)) !important;
  border-radius: 0 !important;
  margin-left: -1px !important;
  box-sizing: border-box;
}
.footer-subscribe .wpforms-field[data-field-id="1"] .wpforms-field-medium {
  margin-left: 0 !important;
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}
.footer-subscribe .wpforms-field-medium:focus {
  position: relative;
  z-index: 1;
}
.footer-subscribe .wpforms-submit-container {
  display: flex;
  flex: 0 0 auto;
  align-self: stretch;
  margin: 0 !important;
}
.footer-subscribe .wpforms-submit {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin-left: -1px;
  border: 1px solid var(--wp--preset--color--primary) !important;
  border-radius: 0 !important;
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  background-color: var(--wp--preset--color--primary) !important;
  color: #fff !important;
  font-size: 0 !important;
  line-height: 0;
  position: relative;
}
.footer-subscribe .wpforms-submit::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.footer-subscribe .wpforms-confirmation-container-full {
  font-size: 12px !important;
}

@media screen and (max-width: 767px) {
  footer h3.wp-block-heading {
    font-size: 12px !important;
  }
  footer p {
    font-size: 11px !important;
  }
  footer .wp-block-navigation-item__content,
  footer .wp-block-navigation-item__label {
    font-size: 11px !important;
  }
  .footer-subscribe__group input {
    font-size: 10px !important;
    padding: 0 4px !important;
  }
  .footer-subscribe .wpforms-field-medium {
    font-size: 10px !important;
    padding: 0 4px !important;
  }
}

/* ==========================================================================
   Mobile nav drawer: 2-column layout instead of a full-width accordion -
   narrow column 1 (the top-level labels, always visible), wide column 2
   (the tapped item's mega-menu content, appearing beside its own label
   instead of stacked full-width below it). Each .has-child row becomes its
   own little 2-column flex line; since only one is expanded (.mega-open)
   at a time and the rest sit collapsed at content-column width:0, the
   overall effect reads as "labels list on the left, content pane on the
   right" even though there's no single persistent shared pane element.
   These rules come after the accordion rules earlier in this file, so on
   equal specificity they win.
   ========================================================================== */
@media screen and (max-width: 1199px) {
  .header-nav .has-child {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    border-bottom: 1px solid var(--wp--preset--color--border-color, rgba(127, 127, 127, 0.2));
  }
  .header-nav .has-child > .wp-block-navigation-item__content {
    flex: 0 0 100px !important;
    width: 100px !important;
    padding: 12px 8px 12px 0 !important;
    border-bottom: none !important;
    box-sizing: border-box;
  }
  .header-nav .has-child .wp-block-navigation__submenu-container {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 12px 0 16px 12px !important;
    border-left: 1px solid var(--wp--preset--color--border-color, rgba(127, 127, 127, 0.2));
  }
  .header-nav .has-child:not(.mega-open) .wp-block-navigation__submenu-container {
    border-left: none !important;
  }

  /* The content column is now much narrower than the full drawer width -
     the tab-card image grid needs to drop to a single column here too,
     same reasoning as the existing 480px-and-below override elsewhere. */
  .mega-tabs-panels {
    grid-template-columns: 1fr !important;
  }
  .mega-tab-card {
    flex-direction: row !important;
    text-align: left !important;
    gap: 10px !important;
  }
  .mega-tab-card__image {
    width: 44px !important;
    flex-shrink: 0;
  }

  /* "Phong cách sống" (and "Cửa hàng") use the "links" layout, whose
     columns are grid-positioned via an inline style (so leaving empty
     columns in the Inspector leaves a real gap on desktop - see
     borocco_electronics_render_mega_menu_links()). Rather than trying to
     neutralize that grid positioning property by property, dropping to
     plain display:block removes grid/flex sizing from the equation
     entirely - a column can't be pushed wide by its content or by a
     leftover inline grid-column when it isn't a grid/flex item at all.
     overflow-x:hidden at every level in the chain, down to the drawer
     itself, is the hard backstop in case anything still miscalculates. */
  .header-nav {
    overflow-x: hidden !important;
  }
  .header-nav .has-child {
    max-width: 100%;
  }
  .header-nav .has-child .wp-block-navigation__submenu-container {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .mega-links-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .mega-links-col {
    display: block !important;
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-bottom: 20px;
  }
  .mega-links-col:last-child {
    margin-bottom: 0;
  }
  .mega-links-col ul {
    max-width: 100%;
  }
  .mega-links-col a {
    word-break: break-word;
  }
}

/* ==========================================================================
   Footer link columns (Điều khoản pháp lý / Liên kết nhanh / Hỗ trợ khách
   hàng) collapse into an accordion on small screens only - the heading
   becomes the toggle (assets/js/footer-accordion.js adds/removes
   .is-expanded on click), content hidden until expanded. Above the
   breakpoint this is all inert - nav stays visible, heading isn't
   click-styled - same 767px phone-only cutover as the header compaction.
   ========================================================================== */
@media screen and (max-width: 767px) {
  .footer-accordion > .wp-block-heading {
    position: relative;
    margin: 0 !important;
    padding: 14px 28px 14px 0 !important;
    cursor: pointer;
    border-bottom: 1px solid var(--wp--preset--color--border-color, rgba(127, 127, 127, 0.2));
  }
  .footer-accordion > .wp-block-heading:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 4px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .footer-accordion.is-expanded > .wp-block-heading:after {
    transform: translateY(-30%) rotate(-135deg);
  }
  .footer-accordion > .wp-block-navigation {
    display: none;
    padding-top: 16px;
  }
  .footer-accordion.is-expanded > .wp-block-navigation {
    display: flex;
  }

  /* All 4 footer nav columns (this one plus the 3 .footer-accordion ones)
     left-aligned instead of the .footer-box/nav-ul centering set further
     up this file for very narrow phones - and nudged in from the true
     edge (.footer-box's own 15px inline padding reads as too tight once
     text is flush left instead of centered). */
  .footer-box {
    text-align: left;
    padding-left: 24px !important;
  }
  .footer-box nav ul {
    align-items: flex-start !important;
  }
}

/* ==========================================================================
   Single post detail page: category moved from the post-footer into the
   author/date line (post-content.html), pushed to the right of it, and
   restyled from the solid-fill badge (.single-post .taxonomy-category a,
   further up this file) into a plain text button - just colored text,
   no background box. Scoped to .single-post-meta so the untouched
   post-footer/tag-cloud usage of the same classes elsewhere is unaffected.
   ========================================================================== */
.single .single-post-meta .post-category-button {
  margin-left: auto;
}
.single .single-post-meta .post-category-button > a {
  background: transparent !important;
  border: none !important;
  color: var(--wp--preset--color--primary) !important;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.single .single-post-meta .post-category-button > a:hover {
  text-decoration: underline;
}

/* Post body copy, sized down to 13px per request. */
.single .entry-content {
  font-size: 13px;
}

/* Comments section: header and body text sized down; scoped to
   .wp-block-comments (the class this specific comments block renders
   with) so WooCommerce's separate review form is untouched. */
.single .wp-block-comments {
  font-size: 13px;
}
.single .wp-block-comments .wp-block-comments-title {
  font-size: 20px !important;
}

/* "Để lại một bình luận" reply form: same treatment - smaller header,
   13px body/label/input text. */
.single .wp-block-comments .comment-reply-title {
  font-size: 20px;
}
.single .wp-block-comments .comment-respond,
.single .wp-block-comments .comment-form {
  font-size: 13px;
}

/* ==========================================================================
   Best Sellers page carousel (patterns/bestsellers.php): a Swiper "main +
   thumbs" pair, same linkage technique as the product detail gallery
   (assets/js/product-gallery.js) - one big hero card up top (whichever
   product is "current"), a strip of up to 6 scaled-down tiles below that
   both drives and mirrors which one that is.
   ========================================================================== */
.bestsellers-carousel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bestsellers-hero-swiper {
  width: 100%;
  overflow: hidden;
}
.bestsellers-hero-card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--wp--preset--color--tertiary-bg-color);
  border-radius: 14px;
  overflow: hidden;
  padding: 28px;
}
.bestsellers-hero-card__image {
  /* 60% of the previous 36% - height follows automatically since the
     img inside is a 1:1 square (width determines height). */
  flex: 0 0 21.6%;
  display: block;
}
.bestsellers-hero-card__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
.bestsellers-hero-card__body {
  flex: 1;
  min-width: 0;
}
.bestsellers-hero-card__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.3;
}
.bestsellers-hero-card__title a {
  text-decoration: none;
  color: inherit;
}
.bestsellers-hero-card__price {
  font-size: 19px;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
  margin-bottom: 12px;
}
.bestsellers-hero-card__price ins {
  text-decoration: none;
}
.bestsellers-hero-card__desc {
  font-size: 14px;
  color: var(--wp--preset--color--body-text);
  margin: 0 0 20px;
}
/* woocommerce_template_loop_add_to_cart() renders a plain WooCommerce-core
   styled .button here (this card isn't inside ul.products li.product, so
   the theme's own loop-button styling elsewhere in this file doesn't
   reach it) - restyled explicitly to match that same look. */
.bestsellers-hero-card__body .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--primary);
  color: #fff;
  padding: 12px 30px;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.bestsellers-hero-card__body .button:hover,
.bestsellers-hero-card__body .button:focus {
  opacity: 0.9;
  color: #fff;
}

.bestsellers-thumbs-swiper {
  width: 100%;
  padding: 4px 2px;
}
.bestsellers-thumbs-swiper .swiper-slide {
  height: auto;
}
.bestsellers-thumb {
  display: flex;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(127, 127, 127, 0.2);
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.75;
}
.bestsellers-thumb:hover,
.swiper-slide-thumb-active .bestsellers-thumb {
  opacity: 1;
  border-color: var(--wp--preset--color--primary);
}
.bestsellers-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.bestsellers-thumb__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--wp--preset--color--heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.bestsellers-thumb__price {
  font-size: 12px;
  color: var(--wp--preset--color--primary);
}

@media (max-width: 767px) {
  .bestsellers-hero-card {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 16px;
  }
  .bestsellers-hero-card__image {
    flex-basis: auto;
  }
  .bestsellers-hero-card__body .button {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 22px;
    font-size: 13px;
  }

  /* Thumbs strip: images only, no name/price - and square, not the
     taller image+two-lines-of-text card used above 767px. */
  .bestsellers-thumb__name,
  .bestsellers-thumb__price {
    display: none;
  }
  .bestsellers-thumb {
    padding: 0;
    gap: 0;
    aspect-ratio: 1 / 1;
  }
  .bestsellers-thumb img {
    width: 100%;
    height: 100%;
  }
}

/* ==========================================================================
   "Đơn hàng đã nhận" (order-received / order confirmation) - this page has
   no theme customization of its own, so it was falling back to the raw
   theme.json defaults: an 18-20px base body size and a 28-32px "large"
   preset on the status heading, both far bigger than the 13-14px used
   everywhere else in this theme.
   ========================================================================== */
.woocommerce-order-received .wc-block-order-confirmation-status {
  /* Sits below the actual page title (also 28px now), so this one steps
     down a bit rather than matching it exactly. */
  font-size: 20px !important;
  line-height: 1.28 !important;
  color: #222222 !important;
}
.woocommerce-order-received .wc-block-order-confirmation-additional-information p {
  /* The payment-method note (e.g. "Trả tiền mặt khi giao hàng.") -
     matches the status message above. */
  font-size: 20px !important;
  color: #222222 !important;
}
.woocommerce-order-received .wc-block-order-confirmation-status-description,
.woocommerce-order-received .wc-block-order-confirmation-summary,
.woocommerce-order-received .wc-block-order-confirmation-totals,
.woocommerce-order-received .wc-block-order-confirmation-downloads,
.woocommerce-order-received .wc-block-order-confirmation-address-wrapper,
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-summary,
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-totals,
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-downloads,
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-billing-address,
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-shipping-address {
  font-size: 13px;
}
.woocommerce-order-received .wc-block-order-confirmation-address-wrapper h2,
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-billing-address h2,
.woocommerce-order-received .wp-block-woocommerce-order-confirmation-shipping-address h2 {
  font-size: 16px !important;
}
.woocommerce-order-received table.woocommerce-table,
.woocommerce-order-received table.woocommerce-table th,
.woocommerce-order-received table.woocommerce-table td {
  font-size: 13px;
}

/* The actual page title - a bare, class-less <h1> ("Đơn hàng đã nhận")
   was never touched by any of the rules above, which all target the
   WooCommerce block markup below it. This is the one that was genuinely
   huge (42px). */
.woocommerce-order-received h1 {
  font-size: 28px !important;
  color: #222222 !important;
}
/* "Chi tiết đơn hàng" / "Địa chỉ giao hàng" / "Địa chỉ thanh toán" (24px)
   and the guest "Tạo tài khoản với Borocco" prompt (28px) - matched to
   the checkout page's own step-heading size (16px) for consistency. */
.woocommerce-order-received h2.wp-block-heading,
.woocommerce-order-received h3.wp-block-heading:not(.has-primary-color) {
  font-size: 16px !important;
}

/* ==========================================================================
   Floating Zalo/call contact buttons (functions.php, wp_footer) - fixed
   bottom-right on every page. Stacked below anything that opens as a
   fixed overlay (mobile nav drawer/backdrop, z-index 10000+) so this
   never floats on top of those.
   ========================================================================== */
.borocco-floating-contact {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.borocco-floating-contact__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: borocco-floating-contact-shake 3s ease-in-out infinite;
}
.borocco-floating-contact__btn:hover {
  animation-play-state: paused;
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  color: #fff;
}
/* A quick wiggle in the first ~1s of every 3s loop, then still for the
   rest - draws the eye without shaking constantly. */
@keyframes borocco-floating-contact-shake {
  0%, 28%, 100% {
    transform: rotate(0deg);
  }
  4% {
    transform: rotate(-18deg);
  }
  8% {
    transform: rotate(18deg);
  }
  12% {
    transform: rotate(-14deg);
  }
  16% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  24% {
    transform: rotate(8deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .borocco-floating-contact__btn {
    animation: none;
  }
}
.borocco-floating-contact__btn svg {
  fill: currentColor;
}
.borocco-floating-contact__btn--zalo {
  background-image: url(assets/images/zalo.png);
  background-size: cover;
  background-position: center;
}
/* Phone-screen only - on desktop, Zalo alone covers instant contact and
   a "call" button isn't as natural an action from a mouse-driven visit. */
.borocco-floating-contact__btn--call {
  display: none;
  background: var(--wp--preset--color--primary);
}
@media screen and (max-width: 767px) {
  .borocco-floating-contact__btn--call {
    display: flex;
  }
}