/* ========================= Global Styling ========================= */

html,
body {
overflow-x: hidden;
}

.dropdown-menu .nav-item a {
color: var(--bs-secondary) !important;
}

.dropdown-menu {
width: 203px;
font-size: 1rem !important;
}

.pagination .current {
background-color: var(--bs-secondary) !important;
color: white !important;
border-color: var(--bs-secondary) !important;
}

/* Continuous subtle pulse for all Bootstrap buttons except those with .no-pulse */
.btn:not(.no-pulse) {
animation: btn-pulse 1s ease-in-out infinite;
}

/* Keyframes for the pulse */
@keyframes btn-pulse {

0%,
100% {
transform: scale(1);
}

50% {
transform: scale(1.03);
}
}



.tooltip {
z-index: 9999 !important;
}

:root {
--color-brand-red: #D00F0F;
--color-brand-dark: #2C2C2C;
--color-light-2: #FAF4F4;
}

.hover-primary:hover {
color: var(--bs-primary) !important;
}

.tangible-paginator-button.active {
background-color: var(--bs-primary) !important;
border-color: var(--bs-primary) !important;
color: white !important;
}

a {
text-decoration: none !important;
}


.not-round {
border-radius: 0 !important;
}


.color-brand-red {
color: #D00F0F;
}

.bg-brand-red {
background-color: #D00F0F;
}

.color-brand-dark {
color: #2C2C2C;
}

.bg-brand-dark {
background-color: #2C2C2C;
}

.color-light-2 {
color: #FAF4F4;
}

.bg-light-2 {
background-color: #FAF4F4;
}

.text-16px {
font-size: 16px !important;
}

.woocommerce-loop-product__title {
font-size: 16px;
}

/* Reusable pulse animation */
.pulse-cta {
position: relative;
animation: pulse 2s infinite;
}

@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 111, 97, 0.6);
/* Adjust colour */
}

70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(255, 111, 97, 0);
}

100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 111, 97, 0);
}
}


/* ========================= WooCommerce Styling ========================= */

/* Force product prices to use Bootstrap primary colour and semi-bold weight */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: var(--bs-dark) !important;
font-weight: 600;
/* semi-bold */
}



/* ========================= Header Styling ========================= */

.account {
/* existing styles */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
.account {
margin-right: 10px;
}
}


.mobile-header-section {
/* default styles (desktop/tablet) */
padding-top: 0 !important;
padding-bottom: 0 !important;
}

/* Apply only on mobile (max-width 768px for example) */
@media (max-width: 768px) {
.mobile-header-section {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
}


.search-bar {
width: 400px;
}

#menu-categories-mega-menu li .active {
color: var(--bs-primary) !important;
}

#menu-main-menu li .active {
color: var(--bs-primary) !important;
}

.navigation-section .navbar-nav .nav-link {
color: #fff !important;
font-size: 14px !important;
}

.navigation-section .navbar-nav .nav-link:hover {
text-decoration: none !important;
color: var(--bs-primary) !important;
}

.navigation-section .navbar-nav {
flex-direction: row !important;
/* Forces horizontal layout */
}

.navigation-section .nav-item {
margin: 0 1rem;
/* Spacing between menu items */
}


.navbar-nav a:hover {
color: #CF0F0E !important;
}

.woocommerce-product-search-mobile {
margin: 20px !important;
}

.header-search-btn {
background-color: #CF0F0E !important;
}

/* Force centring on mobile only */
@media (max-width: 991.98px) {
.navbar .container-fluid {
display: flex;
justify-content: center;
}
}


#lc-header>div>header>div.top-bar.bg-primary.py-3>div>div.search-bar.d-flex.justify-content-center.flex-grow-1.mx-4>form>div.input-group.position-relative.w-100>div.input-group-append>button {
background-color: #2C2C2C !important;
}

@media screen and (min-width: 1024px) {
.header-search-input {
max-width: 550px !important;
width: 200px !important;
}
}

.navbar-nav a {
color: white !important;
}

.account-link,
.basket-link {
display: flex;
flex-direction: column;
align-items: center;
font-weight: 600;
text-decoration: none;
}

.account-link i,
.basket-link i {
font-size: 28px;
margin-bottom: 4px;
}

.basket-link {
position: relative;
}

.basket-count {
position: absolute;
top: -5px;
right: -15px;
background: #00CFFF;
color: #fff;
font-size: 14px;
font-weight: bold;
border-radius: 50%;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
}

/* Force nav links white */

/* Make sure menu items are centred */
.navbar-nav {
display: flex;
justify-content: center;
width: 100%;
}

@media (max-width: 576px) {
.logo img {
max-height: 70px;
}
}

@media (max-width: 768px) {
.account .bi {
font-size: 2rem !important;
/* Bootstrap "me-4" equivalent */
margin-right: 1rem !important;
}

.bi-basket {
font-size: 2rem !important;
/* tweak spacing as needed */
}
}

/* ========================= Top Bar Styling ========================= */

/* Shrink text and icons on mobile */
@media (max-width: 576px) {
.top-bar span {
font-size: 0.75rem;
/* smaller text */
}

.top-bar i {
font-size: 1rem;
/* smaller icons */
}
}

@media (max-width: 576px) {
.top-bar {
padding: 0.25rem 0;
/* ~4px top & bottom padding */
}

.top-bar span {
font-size: 0.8rem;
}

.top-bar i {
font-size: 1.2rem;
}
}


/* ========================= Footer Styling ========================= */

.demon-footer a:hover {
color: var(--bs-secondary) !important;
}

/* Hover effect for popular categories links */
.popular-categories a {
transition: color 0.2s ease-in-out !important;
}

.popular-categories a:hover {
color: var(--bs-secondary) !important;
}


.demon-footer {
background-image: url(https://www.demongraphics.co.uk/wp-content/uploads/2025/09/demon-footer-2.png);
background-size: cover;
background-repeat: no-repeat;
font-size: 1rem !important;
line-height: 1.7rem;
}

footer {
background: #CF0F0E !important;
}

/* ========================= Homepage Styling ========================= */

.hero {
height: 50vh !important;
}

/* Keep everything else the same, just add this */
.reviews-splide .splide__pagination {
position: static;
/* no absolute positioning */
margin-top: 1rem;
/* space below the slider */
display: flex;
justify-content: center;
/* centre the bullets */
gap: 6px;
/* space between bullets */
}

.reviews-splide .splide__pagination__page {
background: #e11d48;
/* match your accent colour */
opacity: 0.4;
}

.reviews-splide .splide__pagination__page.is-active {
opacity: 1;
}


.home .review-card {
height: 100%;
border: 2px solid #e11d48;
border-radius: 14px;
padding: 1.25rem;
background: #fff;
display: flex;
/* flex container */
flex-direction: column;
/* stack children vertically */
justify-content: center;
/* vertical centring */
align-items: center;
/* horizontal centring */
text-align: center;
/* centre review text + author */
}

.home .review-stars {
display: flex;
justify-content: center;
/* centre the star row */
gap: 4px;
margin-bottom: .75rem;
}


#sc-article-loop-suyo .post img {
display: block;
margin-left: auto;
margin-right: auto;
transition: .5s;
}

#sc-article-loop-suyo .post:hover img {
transform: scale(1.05);
transition: .5s;
}

.blog-post-content a {
color: var(--bs-primary) !important;
}


/* Tablet and Desktop only */
@media (min-width: 768px) {
#actionSelect {
max-width: 220px !important;
}
}

.homepage-product-carousel .add_to_cart_button {
margin-top: 0.5em !important;
background: var(--bs-primary) !important;
color: white !important;
text-decoration: none !important;
}

.homepage-product-carousel .added_to_cart {
margin-top: 0.5em !important;
background: var(--bs-primary) !important;
color: white !important;
text-decoration: none !important;
}

/* ========================= Shop Page Styling ========================= */

@media (min-width: 992px) {
aside.col-lg-3 {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 4rem;
/* distance from top of viewport */
align-self: flex-start;
/* works with Bootstrap grid */
height: fit-content;
/* stops full column stretching */
}
}

@media (min-width: 992px) {
section.pt-3 aside.col-md-3 {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 4rem;
/* adjust to your header/navbar height */
align-self: flex-start;
/* works with Bootstrap grid */
height: fit-content;
/* prevents full column stretching */
}
}




.category-card {
position: relative;
cursor: pointer;
overflow: hidden;
max-height: 5rem !important;
}

.category-card img {
transition: transform 0.4s ease;
width: 100%;
height: auto;
display: block;
}

.category-overlay {
position: absolute;
inset: 0;
background-color: rgba(33, 33, 33, 0.85);
/* #212121 */
transition: background-color 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.category-card:hover img {
transform: scale(1.05);
}

.category-card:hover .category-overlay {
background-color: rgba(207, 15, 14, 0.85);
/* #CF0F0E */
}


/* ========================= Single Product Styling ========================= */

/* === Perfect alignment for Quantity & Add to Basket === */
form.cart {
display: flex;
align-items: center;
/* vertically centre both */
gap: 12px;
/* spacing between elements */
flex-wrap: wrap;
}

/* Quantity box */
form.cart .quantity {
display: flex;
align-items: center;
margin: 0;
}

/* Quantity input */
form.cart .quantity input.qty {
height: 50px;
line-height: 50px;
padding: 0 12px;
font-size: 16px;
box-sizing: border-box;
margin: 0;
}

/* Add to Basket button */
form.cart .single_add_to_cart_button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 50px;
line-height: 50px;
padding: 0 40px;
font-size: 16px;
border-radius: 30px;
width: auto !important;
min-width: 200px;
margin: 0 !important;
/* ← nukes theme margins like mt-4 */
box-sizing: border-box;
}

/* Keep add-ons above unaffected */
form.cart .wc-pao-addons-container {
display: block;
width: 100%;
}

/* Add Bootstrap Icon before text */
form.cart .single_add_to_cart_button::before {
font-family: "bootstrap-icons";
/* must match your icon font */
content: "\f23b";
/* Unicode for bi-cart2 */
display: inline-block;
font-size: 1.1em;
margin-right: 0.5rem;
vertical-align: middle;
}


/* Make breadcrumb text smaller */
.breadcrumb {
font-size: 1rem !important;
}

.breadcrumb a {
font-size: inherit !important;
}


.wc-pao-addon-name {
font-size: 20px !important;
margin-bottom: 5px !important;
}

.woocommerce .bootstrap-wc-related img {
height: 15vh !important;
object-fit: cover !important;
}

.woocommerce .lc_wc_related ul.products,
.woocommerce .lc_wc_related {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
/* adjust spacing between items */
}

.woocommerce .lc_wc_related ul.products li.product {
float: none !important;
/* override Woo default floats */
width: auto !important;
/* let grid control widths */
}



/* Sticky image for tablets & desktops */
@media (min-width: 576px) {
.sticky-image {
position: sticky;
top: 2rem;
/* adjust offset from top */
max-height: 80vh;
/* cap image height */
overflow: hidden;
}

.sticky-image img {
width: 100%;
height: auto;
object-fit: contain;
}
}


.single-product .product-benefits {
color: white !important;
background-color: var(--color-brand-red) !important;
}

.product-benefit-row {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.product-benefit-row .benefit-icon {
margin-right: 8px;
font-size: 18px;
/* adjust Dashicon size */
}

.product-benefit-row .dashicons {
vertical-align: middle;
}

.return-to-shop {
margin-top: 20px !important;
}

/* ========================= Contact page ========================= */

.ff-btn-submit {
background-color: var(--bs-primary) !important;
}

/* ========================= Cart page ========================= */

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
float: none;
width: 100%;
}

/* ========================= Vinyl Lettering page ========================= */

.page-template-vinyl-lettering #qtyBox {
border-radius: 0px !important;
}

.page-template-vinyl-lettering #add-to-cart-btn {
margin-left: 2rem !important;
/* or whatever spacing feels right */
}

.page-template-vinyl-lettering .price {
margin-right: 2rem !important;
color: white !important;
}

.page-template-vinyl-lettering #base_price,
#disc_price {
color: #fff;
/* white text */
}

.badge-step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
font-size: 14px;
font-weight: 600;
padding: 0 !important;
line-height: 1;
background-color: var(--bs-primary);
color: #fff;
}

.osLabel {
padding: 0.7rem
}

.page-template-vinyl-lettering #vl_text {
border-radius: 0px !important;
}

.page-template-vinyl-lettering #main>div>div.col-12.col-lg-6.col-xl-5>div>div:nth-child(1)>span {
text-align: right !important;
}

/* ========================= Vinyl Icons page ========================= */

.page-template-vinyl-icons #qtyBox {
border-radius: 0px !important;
}

.page-template-vinyl-icons #add-to-cart-btn {
margin-left: 2rem !important;
/* or whatever spacing feels right */
}

.page-template-vinyl-icons .price {
margin-right: 2rem !important;
color: white !important;
}

.page-template-vinyl-icons #base_price,
#disc_price {
color: #fff;
/* white text */
}

.page-template-vinyl-icons #vl_text {
border-radius: 0px !important;
}

.page-template-vinyl-icons #main>div>div.col-12.col-lg-6.col-xl-5>div>div:nth-child(1)>span {
text-align: right !important;
}

/* ========================= Cart Styling ========================= */

.product-preview .vinyl-cart-item svg {
height: 50px !important;
}

.product-preview .vinyl-data-img {
height: auto !important;
width: 180px !important;
}

/* Toggle row */
.custom-coupon-toggle {
display: flex;
align-items: center;
cursor: pointer;
margin-bottom: 1em;
margin-top: 2em;
/* extra padding above the toggle */
font-size: 15px;
}

.custom-coupon-toggle .coupon-icon {
margin-right: 8px;
color: #888;
font-size: 18px;
}

.custom-coupon-toggle a {
color: #444;
font-weight: 600;
text-decoration: none;
}

.custom-coupon-toggle a:hover {
text-decoration: underline;
}

/* Coupon form */
.custom-coupon-form {
display: none;
/* hidden by default */
flex-wrap: nowrap;
align-items: center;
gap: 10px;
margin-bottom: 1.5em;
max-width: 400px;
}

.custom-coupon-form input.input-text {
flex: 1;
min-width: 200px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
}

.custom-coupon-form .apply-coupon-btn {
background: #2c7be5;
color: #fff;
border: none;
border-radius: 6px;
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}

.custom-coupon-form .apply-coupon-btn:hover {
background: #1a68d1;
}

// Cart Designs

input[name='update_cart'] {
display: none !important;
}

/* OR TRY THIS */

button[name='update_cart'] {
display: none !important;
}

/* ========================= Wishlist Styling ========================= */

#yith-wcwl-form .add_to_cart_button {
background-color: var(--bs-primary) !important;
color: white;
padding: 0.5rem;
}

.wishlist-title-container {
display: none !important;
}

/* ==========================================================
   DEMON GRAPHICS — FINAL MEGA MENU CSS (HOVER + FULL WIDTH)
   ========================================================== */

/* ===== Navigation Layout ===== */
.navbar-nav {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: 1rem;
}

.navbar-nav>.nav-item {
position: relative;
flex-shrink: 0;
}

.navbar-nav>.nav-item>.nav-link {
display: inline-block;
padding: 0.75rem 1rem;
font-weight: 500;
color: #fff;
text-decoration: none;
transition: color 0.25s ease-in-out;
}

.bg-dark .navbar-nav>.nav-item>.nav-link:hover,
.bg-dark .navbar-nav>.nav-item>.nav-link:focus {
color: var(--bs-primary);
}

/* Remove Bootstrap caret for custom icon */
.navbar-nav .dropdown-toggle::after {
display: none !important;
}

/* ==========================================================
   BASIC MEGA MENU FUNCTIONALITY
   ========================================================== */

/* Ensure mega menu positions relative to viewport */
.menu-mega {
position: static !important;
}

/* Full-width dropdown layer */
.menu-mega .mega-menu-content {
position: absolute;
top: 100%;
left: 0;
width: 100vw;
/* Full viewport width */
background: #F8F9FA;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
z-index: 9999;
}

/* Hover or show (Bootstrap JS toggle) */
.menu-mega:hover .mega-menu-content,
.menu-mega .mega-menu-content.show {
opacity: 1;
visibility: visible;
}

/* Inner content — full width too */
.mega-menu-inner {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}

/* ==========================================================
   MEGA MENU CONTENT LAYOUT / ALIGNMENT
   ========================================================== */

.mega-menu-content .mega-menu-inner .row {
justify-content: center;
/* centre columns horizontally */
text-align: center;
/* centre text */
}

.mega-menu-content .mega-menu-inner ul {
text-align: left;
/* keep list text readable */
}

/* ==========================================================
   LINK COLOURS / HOVER STATES
   ========================================================== */
.mega-menu-content a {
color: var(--bs-secondary) !important;
text-decoration: none;
transition: color 0.2s ease-in-out;
font-size: 1rem !important;
font-weight: 400 !important;
}

.mega-menu-content a:hover {
color: var(--bs-primary) !important;
}

/* ==========================================================
   CATEGORY NAV REFINEMENTS
   ========================================================== */
.category-nav-section .navbar-nav .nav-link {
padding-top: 0;
padding-bottom: 0;
font-weight: 500;
}

.dropdown-menu {
margin-top: 9px !important;
}

/* Apply padding to .dropdown-menu unless it's inside .menu-item-has-children */
:not(.menu-item-has-children)>.dropdown-menu {
padding-top: 25px !important;
padding-bottom: 25px !important;
}

/* ==========================================================
   CHECKOUT
   ========================================================== */

#cfw-header {
background-color: #CF0F0E !important;
}

.wc-block-components-checkout-place-order-button {
background-color: var(--bs-primary) !important;
color: white !important;
border-color: var(--bs-primary) !important;
}

/* Default logo height */
.sticky-header .logo img,
.sticky-header .logo picture img {
max-height: 49px !important;
width: 90%;
transition: height 0.3s ease !important;
}

/* When JS adds .fixed-top → shrink the logo */
.sticky-header.fixed-top .logo img,
.sticky-header.fixed-top .logo picture img {
/*height: 60px !important;*/
}

.sticky-header.fixed-top .header-row {
padding-top: 0px !important;
padding-bottom: 0px !important;
}