/*!
Theme Name: PremierWireless
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: premierwireless
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, 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.

PremierWireless is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 :root {
	--yellow: #fce17d;
	--gold: #f0c14b;    
 }
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 100px; /* Adjust based on header height */
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 3em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: 'Proxima Soft', sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}
a.wc-block-components-product-name:visited {
	color: #800080 !important;
}
a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}
:root{
	--blue: #004990;
	--red: #ec2a80;
	--proxima-soft: 'Proxima Soft', sans-serif;
}
/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */

.main-navigation {
	display: block;
	width: auto;
}
.custom-logo-link img {
	height: 75px;
	object-fit: contain;
}
#site-navigation ul {
  display: flex;
  gap: 25px;
}
#site-navigation ul li a {
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: 0.3s ease all;
}
#site-navigation ul li a:hover {
  color: var(--red);
}
.custom-header {
  display: flex;
  justify-content: space-between;
}

/* Top Bar
--------------------------------------------- */
.top-bar {
    background: var(--blue);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1001;
    transition: box-shadow 0.3s ease;
}
.top-bar.scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.top-bar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 6px 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#top-bar-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 24px;
}
#top-bar-menu li {
    margin: 0;
}
#top-bar-menu li a {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: opacity 0.2s ease;
}
#top-bar-menu li a:hover,
#top-bar-menu li a:focus {
    color: #fff;
    opacity: 0.75;
    text-decoration: underline;
}
#top-bar-menu li a:visited {
    color: #fff;
}
@media (max-width: 600px) {
    .top-bar {
        display: none;
    }
}

.acf-header-logos {

  display: flex;
  gap: 12px;
}
.acf-header-logos img {
  max-width: ;
  max-width: 140px;
  height: 55px;
  object-fit: contain;
}

.heading-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#site-navigation {
	display: flex;
	justify-content: end;
	align-items: center;
}
.custom-header {
	display: flex;
	justify-content: space-between;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	border-bottom: 2px solid var(--red);
	position: sticky;
	top: var(--top-bar-height, 33px);
	z-index: 1000;
	background: #fff;
	transition: box-shadow 0.3s ease, top 0.3s ease;
}
.custom-header.scrolled {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
.heading-wrapper {
	max-width: 1400px;
	margin: auto;
	width: 100%;
	text-align: center;
	padding: 20px;
	height: 110px;
	position: relative;
	transition: height 0.3s ease, padding 0.3s ease;
}
.custom-header.scrolled .heading-wrapper {
	height: 75px;
	padding: 10px 20px;
}
/* .site-branding {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
} */
.custom-header {
  display: flex;
  justify-content: space-between;
}
.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

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

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}



.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/* =========================================
   Homepage Template Styles
   ========================================= */

.hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 150px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    min-height: 600px;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}

.hero-content {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.9);
	padding: 30px;
	border-radius: 12px;
	color: #333;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	width: 100%;
	border-radius: 30px;
}

.hero-content h1 {
	color: var(--red);
}
.hero-content h2 {
	margin-bottom: 20px;
	color: #004990;
	font-size: 30px;
}
.hero-content h3 {
	font-size: 24px;
}
.hero-content div strong {
	color: var(--red);
	padding: 20px 0 0;
	display: block;
    font-size: 24px;
}
.hero-content em {
	padding: 20px 0 0;
	display: inline-block;
}
.hero-content h1{
	margin-bottom: 0;
}
.hero-content h2{
	margin-top: 8pxs;
}
/* Sections Common */
.pw-section {
    padding: 60px 0;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    color: #333;
    font-size: 2rem;
    font-weight: 700;
}

/* Category Grid */
.category-grid {
	display: flex;
	grid-template-columns: repeat(4,1fr);
	gap: 15px;
	margin-top: 40px;
	flex-wrap: wrap;
	justify-content: center;
}
.category-card.product-card {
	width: calc(25% - 15px);
}
.category-grid.top-cat-grid {
	grid-template-columns: repeat(3,1fr);
}
.category-card {
    position: relative; /* Ensure card is a positioning context */
    border: 1px solid var(--red);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
}
.card-overlay-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.product-action {
    position: relative;
    z-index: 2; /* Sit above the card link */
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: var(--red, #e2383f);
}

.cat-thumb {
    width: 100%;
    height: 220px !important;
    object-fit: contain;
    margin-bottom: 15px;
}

.category-products-section .cat-title {
  margin-bottom: 20px;
}
.product-price {
  font-size: 20px;
  padding: 10px 0 15px 0;
}
.cat-title {
	font-size: 20px;
	color: var(--red, #e2383f);
	font-weight: 600;
	margin-bottom: 35px;
	line-height: 1.25;
}
.category-products-section .category-card {
	border: none;
}

.btn-cat {
    display: inline-block;
    padding: 10px 25px;
    background-color: var(--blue, #004990);
    color: #fff;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: background 0.3s;
	width: 100%;
}

.btn-cat:hover ,.btn-cat:focus{
    background-color: var(--red, #e2383f);
	color: #fff;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Shop Control Bar */
.shop-control-bar {
	margin-bottom: 30px;
	display: flex;
	align-items: flex-end;
	flex-direction: row-reverse;
}

.shop-ordering {
    margin-bottom: 10px;
    width: 100%;
    text-align: right;
}

.shop-result-count {
    width: 100%;
    text-align: right; /* User said "underneath", assuming aligned with ordering form */
    color: #666;
    font-size: 0.9em;
}

/* Responsive Grid */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .products-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .shop-ordering, .shop-result-count {
        text-align: left;
    }
}

.product-card {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    outline: none;
    transition: 0.3s;
}

#category-warranty {
  display: none;
}
#category-byod-sim-only {
  display: none;
}
.product-card:hover {
	background: #fff;
	box-shadow: 0 5px 15px rgba(0,0,0,0.05);
	border: 1px solid #d5d6d7;
}

/* Product Card Title Styles */
.product-card-title {
	position: absolute;
	top: -45px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	color: #004990;
	padding: 10px 15px;
	background: #fff;
	border: 2px solid #f0c14b;
	border-radius: 8px;
	margin: 0 0 10px 0;
	z-index: 1;
}

/* The single shared banner that spans all "other" product cards */
.shared-other-product-title {
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	color: #004990;
	padding: 10px 15px;
	background: #fff;
	border: 2px solid #f0c14b;
	border-radius: 8px;
	z-index: 2;
	pointer-events: none; /* don't interfere with card clicks */
}

.product-card.has-card-title {
	position: relative;
	margin-top: 50px;
}

.product-card.has-card-title:not([data-product-index="1"]) {
	margin-top: 50px;
}

.product-price.special-note {
	font-size: 16px;
	line-height: 1.25;
	padding-top: 0;
}


@media (max-width: 768px) {

	.product-card-title.other-product-title {
		display: none;
	}

	.product-card.has-card-title[data-product-index="1"] {
		margin-top: 50px;
	}

.hero-content h2,.hero-content h3,.hero-content div strong {
	
	font-size: 18px;
}

	.product-card.has-card-title:not([data-product-index="1"]):not([data-product-index="2"]) {
		margin-top: 0;
	}
}


.product-image img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.product-title {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #333;
}

.product-price {
    color: var(--blue, #004990);
    font-weight: bold;
    margin-bottom: 15px;
    display: block;
}

.btn-product {
    display: inline-block;
    padding: 10px 30px;
    background-color: var(--blue, #004990);
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.95rem;
}

.btn-product:hover {
    background-color: var(--red, #e2383f);
}

.site-footer {
  background-color: #f8f8f8;
  padding: 65px 20px;
}
.footer-content-wrapper.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-text p {
  margin: 0;
  color: #888e96;
  font-size: 26px;
  font-weight: 700;
}
.footer-social-links i {
  color: #888888;
  font-size: 35px;
}
.footer-social-links {
  display: flex;
  gap: 25px;
}

/* ---------------------------------------------------------
   Single Product Custom Styles
--------------------------------------------------------- */


.product-top-section {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    
    align-items: flex-start;
}

/* Left Column: Gallery */
.product-gallery-wrapper {
    flex: 1;
    min-width: 300px;
    max-width: 600px;
}

.product-top-section-outer {
  background-color: #f7f7f7;
  padding: 60px 20px;
}
.single-product-explore-more {
	padding: 60px 20px;
	background-color: #f7f7f7;
}
.main-image-frame {
  background-color: #fff;
}
.product-thumbnails {
  justify-content: center;
}
.product-details-wrapper {
  padding: 40px;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid var(--red);
}
.product-title {
  font-size: 34px;
}
.product-short-desc ul {
  margin: 0;
  padding-left: 14px;
 
}
.product-short-desc {
  padding: 10px 0 0 0;
}
.product-price {
  margin-top: 0;
  margin-bottom: 0 !important;
}
.main-image-frame {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    padding: 20px;
}

.main-product-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-height: 500px;
}

.product-thumbnails {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 2px;
}

.thumb-item {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #fff;
    padding: 5px;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumb-item:hover,
.thumb-item.active {
    border-color: var(--blue, #004990);
    opacity: 1;
}

/* Right Column: Details */
.product-details-wrapper {
    flex: 1;
    min-width: 300px;
}

.product-title {
  
    color: var(--blue, #004990);
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.product-short-desc {
 
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
}
.hero-content div {
	max-width: 850px;
	margin: auto;
}
.product-details-wrapper .product-price {
    font-size: 26px;
    color: var(--blue, #004990);
    font-weight: 700;
    margin-bottom: 20px;
    display: block;
}

/* Custom Price Message for Products 121 & 130 */
.custom-price-message {
	padding: 4px 0;
	margin-bottom: 20px;
	border-radius: 4px;
}

.custom-price-message .naia-plan-message {
    margin: 0;
    color: #333;
    font-size: 15px;
    line-height: 1.6;
}

.custom-price-message .naia-plan-message strong {
    color: var(--blue);
    font-size: 16px;
    display: block;
    margin-bottom: 8px;
}

/* Add to Cart Area */
.product-actions .cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

/* Quantity Buttons Style */
.qty-btn {
    border: none;
    background: transparent;
    font-size: 1.2rem;
    color: #666;
    padding: 0 10px;
    cursor: pointer;
    font-weight: 700;
    transition: color 0.3s;
    line-height: 1;
}

.qty-btn:hover {
    color: var(--blue, #004990);
}

.product-actions .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 5px 5px;
    background: #fff;
}

/* Hide Spinners (Chrome, Safari, Edge, Opera) */
.product-actions .quantity input::-webkit-outer-spin-button,
.product-actions .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.single_add_to_cart_button.button {
	background-color: var(--red) !important;
}
/* Hide Spinners (Firefox) */
.product-actions .quantity input[type=number],.woocommerce .quantity .qty {
    -moz-appearance: textfield;
}

.product-actions .quantity input {
    border: none;
    width: 40px;
    text-align: center;
    font-size: 1rem;
    padding: 0;
    margin: 0;
    background: transparent;
}

.product-actions button.single_add_to_cart_button {
    background-color: var(--red, #e1383f);
    color: #fff;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.product-actions button.single_add_to_cart_button:hover {
    background-color: #c01c23;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(225, 56, 63, 0.3);
}

/* Flexible Payment Note */
.flexible-payment-note {
    font-size: 13px;
    color: #888;
    margin-top: 20px;
    margin-bottom: 0;
    text-align: left;
    font-style: italic;
}

/* Section 2: Features & Details */
.product-kf-section {
    margin-bottom: 80px;
    padding-top: 60px;
    border-top: 1px solid #eee;
}

.kf-row {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}

.kf-col {
    flex: 1;
    min-width: 300px;
}

.kf-title {
	font-size: 20px;
	color: var(--blue);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 25px;
	border-bottom: 1px solid var(--red);
	padding-bottom: 15px;
	display: block;
	font-weight: 700;
}
.kf-content ul {
	margin: 0;
	padding-left: 15px;
}
.kf-content {
    font-size: 1rem;
    color: #444;
    line-height: 1.8;
}

.kf-content ul {
    margin-left: 20px;
    margin-bottom: 20px;
}

.single-product-explore-more .category-grid {
	display: grid;
}
.archive .category-card.product-card {
	width: 100%;
}
/* Associated Products & Categories */
.associated-products-section {
    margin-bottom: 80px;
}
.wc-block-cart__main .wc-block-cart-items td,.wc-block-cart__main .wc-block-cart-items {
	border-color: var(--red) !important;

}
.woocommerce-cart .entry-title {
	margin-top: 93px;
	color: var(--red);
}
.wc-block-components-quantity-selector {
	border-color: var(--yellow);
	border-radius: 12px;
}
/* Fix product card height in grid to align */
.category-card.product-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--yellow);
}
.category-card.product-card .cat-title {
    flex-grow: 1;
}
.btn-cat.button:visited {
	color: #fff !important;
}
/* Responsive */
@media (max-width: 900px) {
    .product-top-section {
        flex-direction: column;
    }
    .product-gallery-wrapper, 
    .product-details-wrapper {
        max-width: 100%;
    }
}

/* =========================================
   WooCommerce Pages Styling (Modern & Premium)
   ========================================= */

/* Ensure content is full width on pages where sidebar is removed */
.woocommerce-cart #primary,
.woocommerce-checkout #primary,
.woocommerce-account #primary,
.page-template-default.woocommerce-page #primary,
.tax-product_cat #primary,
.post-type-archive-product #primary {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/* Global Form Styles & Inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    padding: 12px 15px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    font-family: var(--proxima-soft);
    font-size: 1rem;
    color: #444;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    width: 100%;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 73, 144, 0.1);
    outline: none;
}

.woocommerce form .form-row label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

/* Buttons */
.woocommerce button.button, 
.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt, 
.woocommerce #respond input#submit.alt {
    background-color: var(--red);
    color: #fff;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(225, 56, 63, 0.3);
    cursor: pointer;
    font-size: 1rem;
}

.woocommerce button.button:hover, 
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover, 
.woocommerce input.button.alt:hover, 
.woocommerce #respond input#submit.alt:hover {
    background-color: #c4262d;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(225, 56, 63, 0.4);
    color: #fff;
}

/* Login / Register / Lost Password Forms */
.woocommerce-account .u-column1, 
.woocommerce-account .u-column2,
.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle,
.woocommerce-form-login, 
.woocommerce-form-register,
.woocommerce-ResetPassword {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Soft premium shadow */
    border: 1px solid rgba(0,0,0,0.03);
    margin-bottom: 30px;
}

.woocommerce-account h2 {
    font-size: 1.8rem;
    color: var(--blue);
    margin-bottom: 25px;
    font-weight: 800;
    position: relative;
    padding-bottom: 10px;
}

/* .woocommerce-account h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--red);
    border-radius: 2px;
} */

#customer_login h2 {
  margin-top: 0;

}

#customer_login .u-column1.col-1,#customer_login .u-column2.col-2 {
  border: 2px solid var(--yellow);
}

.page.type-page {
  max-width: 1280px;
  margin: auto;
  padding: 0 20px;
}
.entry-title {
  text-align: center;
}
.entry-content .woocommerce h2 {
  text-align: center;
}
.woocommerce-account h2::after {
  left: 50%;
  transform: translateX(-50%);
}
.woocommerce-form.woocommerce-form-login.login {
  max-width: 650px;
  margin: auto;
  margin-bottom: 100px;
}
.woocommerce form .form-row label {
  font-size: 16px !important;
}
.woocommerce-form.woocommerce-form-login.login .form-row {
  display: flex;
  flex-direction: column;
}
.woocommerce-error,.woocommerce-info {
	padding-left: 60px !important;
}
.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name, table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-size: 16px;
}
.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices, table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices{
	font-size: 16px;

}
.price.wc-block-components-product-price,.wc-block-formatted-money-amount.wc-block-components-formatted-money-amount.wc-block-components-totals-footer-item-tax-value {
	font-weight: 700;
}
.wc-block-components-button.wp-element-button.wc-block-components-totals-coupon__button.contained {
	background-color: var(--red);
	color: #fff;
	font-weight: 700;
	border-radius: 8px;
	text-transform: uppercase;
}
/* Split Login/Register on Desktop */
@media (min-width: 768px) {
    .woocommerce-account .u-columns {
        display: flex;
        gap: 40px;
    }
    .woocommerce-account .u-column1, 
    .woocommerce-account .u-column2 {
        flex: 1;
        width: 100%;
    }
}

/* Cart Styling */
.woocommerce-cart .woocommerce {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    padding: 30px;
}

.woocommerce-cart table.cart {
    border-collapse: separate;
    border-spacing: 0 10px;
    width: 100%;
}

.woocommerce-cart table.cart thead th {
    background: var(--blue);
    color: #fff;
    padding: 15px;
    border: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    font-weight: 700;
}

.woocommerce-cart table.cart thead th:first-child { border-radius: 8px 0 0 8px; }
.woocommerce-cart table.cart thead th:last-child { border-radius: 0 8px 8px 0; }

.woocommerce-cart table.cart tbody td {
    background: #fdfdfd;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 15px;
}
.woocommerce-cart table.cart tbody td.actions {
    background: transparent;
    border: none;
    padding: 20px 0;
}

.woocommerce-cart table.cart tbody tr td:first-child { border-left: 1px solid #f0f0f0; border-radius: 8px 0 0 8px; }
.woocommerce-cart table.cart tbody tr td:last-child { border-right: 1px solid #f0f0f0; border-radius: 0 8px 8px 0; }

.woocommerce-cart .cart-collaterals .cart_totals {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eaeaea;
    width: 100%; /* Full width for better look */
    float: none;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
    font-size: 1.5rem;
    color: var(--blue);
    border-bottom: 2px solid var(--red);
    padding-bottom: 10px;
    display: inline-block;
    margin-bottom: 20px;
}

/* Empty Cart Custom Styling */
.woocommerce-cart .wc-block-grid__products,
.woocommerce-cart .wc-block-grid,
.woocommerce-cart .wp-block-woocommerce-product-new {
    display: none !important;
}

.empty-cart-custom-content {
    padding: 40px 0;
}

.empty-cart-custom-content .cart-empty {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 40px;
}

.empty-cart-products {
    background: #f7f7f7;
    padding: 60px 20px;
}

/* My Account Navigation */
.woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 30px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    border: 1px solid #eee;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #f5f5f5;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 18px 25px;
    color: #555;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 1.05rem;
    position: relative;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--blue);
    color: #fff;
    padding-left: 35px; /* Slide effect */
}

/* Icon indicators for active state if supported or just the slide effect */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before {
    content: '→'; /* Simple indicator */
    position: absolute;
    left: 15px;
    color: #fff;
    opacity: 1;
}

/* My Account Content */
.woocommerce-Account .woocommerce-MyAccount-content {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.woocommerce-Account .woocommerce-MyAccount-content p {
    font-size: 1.05rem;
    color: #555;
}

.woocommerce-Account .woocommerce-MyAccount-content mark {
    background: #eef4fa;
    color: var(--blue);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
}

/* Password Strength Meter */
.woocommerce-password-strength {
    padding: 5px;
    margin: 10px 0;
    text-align: center;
    font-weight: 600;
    border-radius: 5px;
}
.woocommerce-password-strength.short { background-color: #ffdddd; color: #a00; }
.woocommerce-password-strength.bad { background-color: #ffdddd; color: #a00; }
.woocommerce-password-strength.good { background-color: #ffffcc; color: #cc9900; }
.woocommerce-password-strength.strong { background-color: #ddffdd; color: #00a000; }

/* Messages */
.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error {
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-top: 3px solid var(--blue);
    background: #fff;
}

.woocommerce-error {
    border-top-color: var(--red);
}

.woocommerce-info {
    border-top-color: var(--blue);
}

.woocommerce-message {
    border-top-color: #8fae1b;
}

/* =========================================
   Subscription Plans & Warranty Styling
   ========================================= */f

/* Subscription & Warranty Section Container */
.subscription-warranty-section-outer {
    background: #fff;
    padding: 60px 0;
    margin-top: 0;
    border-top: 1px solid #e0e0e0;
}

.subscription-warranty-section {
    max-width: 1280px;
    margin: 0 auto;
}
.woocommerce-message {
	padding-left: 60px;
}
/* Subscription Plan Section */
.subscription-plan-section {
    margin-bottom: 40px;
    padding: 35px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.subscription-title {
    font-size: 24px;
    color: var(--blue);
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.subscription-title .required {
    color: var(--red);
    font-size: 28px;
    margin-left: 5px;
}

.subscription-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.subscription-plan-card {
    position: relative;
    cursor: pointer;
    display: block;
}

.subscription-plan-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plan-card-content {
    background: #fff;
    border: 3px solid #ddd;
    border-radius: 15px;
    padding: 30px 25px;
    transition: all 0.3s ease;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 200px;
}

.plan-check-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 26px;
    color: #ddd;
    transition: all 0.3s ease;
}

/* Info Icon with Tooltip */
.plan-info-icon {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 20px;
    color: var(--blue);
    cursor: help;
    z-index: 10;
}

.plan-info-tooltip {
    position: absolute;
    top: 35px;
    left: 0;
    background: #333;
    color: #fff;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    width: 250px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 100;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
}

.plan-info-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 15px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #333;
}

.plan-info-icon:hover .plan-info-tooltip {
    opacity: 1;
    visibility: visible;
    top: 40px;
}

.subscription-plan-card:hover .plan-card-content {
    border-color: var(--blue);
    box-shadow: 0 10px 30px rgba(0, 73, 144, 0.15);
    transform: translateY(-5px);
}

.subscription-plan-card input[type="radio"]:checked + .plan-card-content {
    border-color: var(--blue);
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
    box-shadow: 0 10px 35px rgba(0, 73, 144, 0.25);
}

.subscription-plan-card input[type="radio"]:checked + .plan-card-content .plan-check-icon {
    color: var(--blue);
    transform: scale(1.2);
}

.plan-name {
    font-size: 22px;
    color: var(--blue);
    font-weight: 700;
    margin: 15px 0 20px;
}

.plan-price {
    font-size: 32px;
    color: var(--red);
    font-weight: 700;
    margin-bottom: 0;
}

/* Warranty Addon Section */
.warranty-addon-section {
    padding: 35px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.warranty-title {
    font-size: 24px;
    color: var(--blue);
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.warranty-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.warranty-option {
    position: relative;
    cursor: pointer;
    display: block;
}

.warranty-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.warranty-card-content {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 20px 25px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-direction: column;
}

.warranty-check-icon {
    font-size: 22px;
    color: #28a745;
    min-width: 26px;
}
.kf-col.plan-payment h4 {
  margin-bottom: 0;
}
.kf-col.plan-payment h4 + p {
  margin-top: 5px;
}
.warranty-name {
    flex: 1;
    font-size: 17px;
    color: #333;
    text-align: center;
    font-weight: 600;
}

.warranty-price {
    font-size: 20px;
    color: var(--red);
    font-weight: 700;
}

.warranty-option:hover .warranty-card-content {
    border-color: var(--blue);
    box-shadow: 0 5px 15px rgba(0, 73, 144, 0.12);
    /* transform: translateX(5px); */
}

.warranty-option input[type="radio"]:checked + .warranty-card-content {
    border-color: var(--blue);
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
    box-shadow: 0 5px 20px rgba(0, 73, 144, 0.18);
}

.warranty-option.no-warranty .warranty-card-content {
    border-style: dashed;
}

.warranty-option.no-warranty input[type="radio"]:checked + .warranty-card-content {
    background: #fff;
    border-color: #999;
    box-shadow: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .subscription-warranty-section-outer {
        padding: 40px 0;
    }
    .kf-row {
	
	gap: 0px;
}
.single-product-explore-more .category-grid .btn-cat {
	font-size: 10px;
}
.single-product-explore-more .category-grid .cat-title {
	font-size: 16px;
	margin-top: 0;
}
.single-product-explore-more .category-grid {
	grid-template-columns: repeat(2,1fr);
}
.single-product-explore-more .category-grid .category-card {
	padding: 20px 12px;
}
    .subscription-plans-grid {
        grid-template-columns: 1fr;
    }
    
    .subscription-plan-section,
    .warranty-addon-section {
        padding: 25px 20px;
    }
    
    .plan-card-content {
        padding: 25px 20px;
    }
    
    .plan-info-tooltip {
        width: 200px;
        font-size: 12px;
    }
    
    .subscription-title,
    .warranty-title {
        font-size: 20px;
    }
}

/* Product Addons Section */
.product-addons-section {
    margin-bottom: 40px;
    padding: 35px;
    background: #fff;
    border-radius: 15px;
   
}

.addons-title {
    font-size: 24px;
    color: var(--blue);
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.addons-product-grid {
    /* Inherits from .category-grid */
}

.addon-product-card {
    cursor: pointer;
    position: relative;
}

.addon-product-card:hover {
    transform: translateY(-5px);
}

.addon-product-card .product-action {
    position: relative;
    z-index: 10;
}

.addon-product-card .product-action .btn-cat {
    pointer-events: all;
}

@media (max-width: 768px) {
    .product-addons-section {
        padding: 25px 20px;
    }
    
    .addons-title {
        font-size: 20px;
    }
}

/* Warranty Grid Layout */
.warranty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}

@media (min-width: 1200px) {
    .warranty-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.warranty-grid .warranty-option {
    margin-bottom: 0;
    width: 100%;
}

.warranty-grid .warranty-card-content {
    flex-direction: column;
    text-align: center;
    padding: 20px 15px;
    height: 100%;
    justify-content: center;
}

.warranty-grid .warranty-name {
    margin-bottom: 8px;
    font-size: 14px;
}

.warranty-grid .warranty-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--blue);
}

.warranty-grid .warranty-check-icon {
    margin-right: 0;
    margin-bottom: 10px;
    font-size: 24px;
}

/* Addon Details Popup */
.addon-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.addon-popup-content {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: popupFadeIn 0.3s ease;
}

@keyframes popupFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.addon-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    z-index: 10;
    padding: 5px;
    line-height: 1;
}

.addon-popup-close:hover {
    color: #333;
}

.addon-popup-body {
    padding: 30px;
}

.addon-popup-loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

.addon-popup-image {
    text-align: center;
    margin-bottom: 20px;
}

.addon-popup-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    max-height: 300px;
    object-fit: contain;
}

.addon-popup-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
    line-height: 1.3;
}

.addon-popup-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 20px;
}

.addon-popup-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
}

/*--------------------------------------------------------------
# Billing Information Page
--------------------------------------------------------------*/

/* Billing Page Container */
.billing-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    min-height: 100vh;
}

.billing-page .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Section */
.billing-hero {
    background: linear-gradient(135deg, var(--blue) 0%, #003875 100%);
    color: white;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.billing-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.05)" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,138.7C960,139,1056,117,1152,101.3C1248,85,1344,75,1392,69.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
    background-size: cover;
    opacity: 0.3;
}

.billing-hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin: 0 0 20px 0;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.billing-hero-subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0;
    position: relative;
    z-index: 1;
    opacity: 0.95;
}

/* Billing Sections */
.billing-section {
    padding: 60px 20px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--red);
    text-align: center;
    margin-bottom: 15px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #666;
    text-align: center;
    margin-bottom: 50px;
}

/* Credit Section */
.credit-section {
    background: transparent;
}

.credit-card {
    background: white;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.credit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.12);
}

.credit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--blue), var(--red));
}

.credit-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, var(--blue), #0066cc);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.credit-icon svg {
    width: 40px;
    height: 40px;
}

.credit-card h2 {
    font-size: 2.2rem;
    color: var(--blue);
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
}

.credit-amounts {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.credit-item {
    text-align: center;
    flex: 1;
    min-width: 200px;
}

.credit-value {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--blue), var(--red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.credit-label {
    display: block;
    font-size: 1.1rem;
    color: #666;
    font-weight: 600;
}

.credit-divider {
    width: 2px;
    height: 80px;
    background: linear-gradient(180deg, transparent, #ddd, transparent);
}

.credit-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.credit-details li {
    padding: 15px 20px 15px 50px;
    position: relative;
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    background: #f8f9fa;
    margin-bottom: 10px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.credit-details li:hover {
    background: #e8f4ff;
    transform: translateX(5px);
}

.credit-details li::before {
    content: '✓';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--blue);
    font-weight: bold;
    font-size: 1.3rem;
}

/* Overview Section */
.overview-section {
    background: white;
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.overview-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.overview-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    border-color: var(--blue);
}

.overview-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.overview-card h3 {
    font-size: 1.5rem;
    color: var(--blue);
    margin-bottom: 15px;
    font-weight: 700;
}

.overview-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--red);
    margin-bottom: 15px;
}

.overview-desc {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Examples Section */
.examples-section {
    background: transparent;
}

.example-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.example-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.example-header {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 2px solid #f0f0f0;
}
.example-number {
	display: inline-block;
	background: var(--red);
	color: #fff;
	padding: 8px 20px;
	border-radius: 25px;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 15px;
}

.example-header h3 {
    font-size: 1.8rem;
    color: var(--blue);
    margin: 15px 0 10px 0;
    font-weight: 700;
}

.example-date {
    color: #666;
    font-size: 1.1rem;
    margin: 0;
    font-style: italic;
}

/* Billing Tables */
.billing-table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.billing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
}

.billing-table thead {
    background: linear-gradient(135deg, var(--blue), #003875);
    color: white;
}

.billing-table th {
    padding: 20px;
    text-align: left;
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.billing-table th:first-child {
    border-top-left-radius: 12px;
}

.billing-table th:last-child {
    border-top-right-radius: 12px;
    text-align: right;
}

.billing-table tbody tr {
    transition: all 0.3s ease;
}

.billing-table tbody tr:hover {
    background: #f8f9fa;
}

.billing-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1rem;
    color: #555;
}

.billing-table td:last-child {
    text-align: right;
}

.billing-table .highlight-row {
    background: #fff9e6;
}

.billing-table .highlight-row:hover {
    background: #fff3cc;
}

.billing-table .amount {
    font-weight: 700;
    color: var(--blue);
    font-size: 1.15rem;
}

/* Example Note */
.example-note {
    margin-top: 25px;
    padding: 20px 25px;
    background: linear-gradient(135deg, #e8f4ff 0%, #d4e9ff 100%);
    border-left: 4px solid var(--blue);
    border-radius: 10px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.example-note svg {
    width: 24px;
    height: 24px;
    color: var(--blue);
    flex-shrink: 0;
    margin-top: 2px;
}

.example-note p {
    margin: 0;
    color: #333;
    font-size: 1rem;
    line-height: 1.6;
}

/* Checkout Section */
.checkout-section {
    background: white;
}

.checkout-card {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.checkout-card h2 {
    font-size: 2.2rem;
    color: var(--blue);
    margin-bottom: 35px;
    text-align: center;
    font-weight: 700;
}

.checkout-points {
    display: grid;
    gap: 20px;
}

.checkout-point {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: white;
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.checkout-point:hover {
    transform: translateX(10px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.point-icon {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, var(--blue), var(--red));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.checkout-point p {
    margin: 0;
    color: #333;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* FAQ Section */
.faq-section {
    background: transparent;
    padding-bottom: 100px;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.faq-item {
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    border-top: 4px solid var(--blue);
}
.kf-content h5 {
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 0 !important;
}
.kf-content h5 + p {
  margin-top: 5px;
}
.faq-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    border-top-color: var(--red);
}

.faq-question {
    font-size: 1.3rem;
    color: var(--blue);
    background: transparent !important;
    margin-bottom: 15px;
    font-weight: 700;
    line-height: 1.4;
    padding: 0;
  margin: 0;
}

.faq-answer {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 1024px){
    .category-grid.top-cat-grid {
	grid-template-columns: repeat(1,1fr);
}
}
/* Responsive Design */
@media (max-width: 768px) {
    .billing-hero-title {
        font-size: 2.5rem;
    }
.category-grid.top-cat-grid {
	grid-template-columns: repeat(1,1fr);
}
    .billing-hero-subtitle {
        font-size: 1.2rem;
    }

    .billing-hero {
        padding: 60px 20px;
    }

    .credit-card {
        padding: 30px 20px;
    }

    .credit-amounts {
        flex-direction: column;
        gap: 30px;
    }

    .credit-divider {
        width: 80px;
        height: 2px;
    }

    .credit-value {
        font-size: 2.8rem;
    }

    .section-title {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .overview-grid {
        grid-template-columns: 1fr;
    }

    .example-card {
        padding: 25px 15px;
    }

    .example-header h3 {
        font-size: 1.5rem;
    }

    .billing-table th,
    .billing-table td {
        padding: 12px 10px;
        font-size: 0.9rem;
    }

    .checkout-card {
        padding: 30px 20px;
    }

    .checkout-card h2 {
        font-size: 1.8rem;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }

    .billing-section {
        padding: 40px 15px;
    }
}

@media (max-width: 480px) {
    .billing-hero-title {
        font-size: 2rem;
    }

    .credit-card h2 {
        font-size: 1.8rem;
    }

    .credit-value {
        font-size: 2.2rem;
    }

    .billing-table {
        font-size: 0.85rem;
    }

    .example-note {
        flex-direction: column;
    }
}

/*--------------------------------------------------------------
# Custom Registration Form Styling
--------------------------------------------------------------*/

/* Registration Section Titles */
.registration-section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--blue);
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--red);
}

/* Registration Form Container */
.woocommerce-form-register {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Form Row Styling */
.woocommerce-form-row {
    margin-bottom: 1.5rem;
}

.woocommerce-form-row label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.woocommerce-form-row label .required {
    color: var(--red);
    margin-left: 3px;
}

.woocommerce-form-row label .optional {
    color: #999;
    font-weight: 400;
    font-size: 0.85rem;
}

/* Input Fields */
.woocommerce-Input,
.woocommerce-form-row input[type="text"],
.woocommerce-form-row input[type="email"],
.woocommerce-form-row input[type="tel"],
.woocommerce-form-row input[type="password"],
.woocommerce-form-row select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #fafafa;
}

.woocommerce-Input:focus,
.woocommerce-form-row input:focus,
.woocommerce-form-row select:focus {
    outline: none;
    border-color: var(--blue);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 73, 144, 0.1);
}

/* Select Dropdown */
.woocommerce-form-row select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Checkbox Styling */
.woocommerce-form-row input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
    cursor: pointer;
    transform: scale(1.2);
}

.woocommerce-form-row label[for="reg_same_as_shipping"] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
}

/* Two Column Layout for City/State and ZIP/Country */
.form-row-first {
    width: 48%;
    float: left;
    clear: both;
}

.form-row-last {
    width: 48%;
    float: right;
}

.form-row-first::after,
.form-row-last::after {
    content: "";
    display: table;
    clear: both;
}

/* Submit Button */
.woocommerce-Button {
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--blue) 0%, #003366 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1.5rem;
}

.woocommerce-Button:hover {
    background: linear-gradient(135deg, #003366 0%, var(--blue) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 73, 144, 0.3);
}

.woocommerce-Button:active {
    transform: translateY(0);
}

/* Billing Address Toggle */
#billing-address-fields {
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Error Messages */
.woocommerce-error {
    background-color: #fff3f3;
    border-left: 4px solid var(--red);
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    color: #d8000c;
}

.woocommerce-error li {
    list-style: none;
    margin: 0.5rem 0;
}

/* Success Messages */
.woocommerce-message {
    background-color: #f0f9ff;
    border-left: 4px solid var(--blue);
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    color: var(--blue);
}

/* Account Page Container */
.woocommerce-account .woocommerce {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .woocommerce-form-register {
        padding: 1.5rem;
    }

    .form-row-first,
    .form-row-last {
        width: 100%;
        float: none;
    }

    .registration-section-title {
        font-size: 1.2rem;
    }
}

.woocommerce-account .u-columns {
  display: grid;
}
#customer_login::before {
  display: none;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
  width: 100%;
}
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
  width: 100%;
}
/*--------------------------------------------------------------
# Checkout Registration Requirement Styling
--------------------------------------------------------------*/

/* Account Benefits Notice */
.account-benefits-notice {
	border: 2px solid var(--yellow);
	border-radius: 12px;
	padding: 2rem;
	margin-bottom: 2rem;
	box-shadow: 0 4px 15px rgba(0, 73, 144, 0.1);
}
.btn-cat.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:visited {
	color: #fff !important;
}
.account-benefits-notice h3 {
    color: var(--blue);
    font-size: 1.8rem;
    margin: 0 0 1rem 0;
    font-weight: 700;
}

.account-benefits-notice > p {
	color: var(--blue);
	font-size: 1.05rem;
	margin-bottom: 1rem;
	line-height: 1.6;
	font-weight: 700;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.benefits-list li {
    display: flex;
    align-items: center;
    color: #333;
    font-size: 1rem;
    font-weight: 500;
}

.benefits-list li i {
    color: var(--red);
    margin-right: 0.75rem;
    font-size: 1.2rem;
}

/* Cart Summary Before Registration */
.cart-summary-before-registration {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.cart-summary-before-registration h3 {
    color: var(--blue);
    font-size: 1.5rem;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--red);
}

.mini-cart-items {
    margin-bottom: 1.5rem;
}

.mini-cart-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #fafafa;
    border-radius: 8px;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.mini-cart-item:hover {
    background: #f0f0f0;
    transform: translateX(5px);
}

.mini-cart-item .item-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
}

.mini-cart-item .item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.mini-cart-item .item-details {
    flex: 1;
}

.mini-cart-item .item-details h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: #333;
    font-weight: 600;
}

.mini-cart-item .item-details .quantity {
    margin: 0.25rem 0;
    color: #666;
    font-size: 0.9rem;
}

.mini-cart-item .item-details .price {
    margin: 0.25rem 0;
    color: var(--blue);
    font-size: 1.1rem;
    font-weight: 700;
}

.cart-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: linear-gradient(135deg, var(--blue) 0%, #003366 100%);
    color: #fff;
    border-radius: 8px;
    font-size: 1.2rem;
}

.cart-summary-total .total-amount {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Checkout Login Link */
.checkout-login-link {
    color: var(--blue);
    font-weight: 700;
    text-decoration: underline;
    transition: all 0.3s ease;
}

.checkout-login-link:hover {
    color: var(--red);
}

/* WooCommerce Notice Styling */
.woocommerce-info,
.woocommerce-notice {
    background-color: #f0f7ff;
    border-left: 4px solid var(--blue);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 6px;
    color: var(--blue);
    font-size: 1.05rem;
}

.woocommerce-info::before,
.woocommerce-notice::before {
    color: var(--blue);
}

/* My Account Page Layout */
.woocommerce-account .woocommerce-MyAccount-content {
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
}

/* Login/Register Form Container */
.u-columns.col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.u-column1,
.u-column2 {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.u-column1 h2,
.u-column2 h2 {
    color: var(--blue);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--red);
}

/* Responsive Design */
@media (max-width: 768px) {
    .benefits-list {
        grid-template-columns: 1fr;
    }

    .u-columns.col2-set {
        grid-template-columns: 1fr;
    }

    .account-benefits-notice {
        padding: 1.5rem;
    }

    .account-benefits-notice h3 {
        font-size: 1.5rem;
    }

    .mini-cart-item {
        flex-direction: column;
        text-align: center;
    }

    .mini-cart-item .item-image {
        width: 100%;
        height: auto;
    }
}

/* Switch to Register Button Styling */
.switch-to-register-notice {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(225, 56, 63, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(225, 56, 63, 0);
    }
}

.switch-to-register-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(225, 56, 63, 0.3);
}

/* Make registration column more prominent when redirected from checkout */
.u-column2.register-highlighted {
    animation: highlight-fade 2s ease-in-out;
}

@keyframes highlight-fade {
    0% {
        background-color: #f0f7ff;
    }
    50% {
        background-color: #e6f2ff;
    }
    100% {
        background-color: #fff;
    }
}

/* Ensure both columns are visible side by side */
.woocommerce-account .u-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
}

/* Mobile: Stack columns */
@media (max-width: 768px) {
    .woocommerce-account .u-columns {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   Popup Flow Styles for Category 17 & 19
   ============================================ */

/* Popup Base Styles */
.pw-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pw-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.pw-popup-content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: popupSlideIn 0.3s ease-out;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pw-popup-header {
    padding: 30px 30px 20px;
    border-bottom: 2px solid #f0f0f0;
}

.pw-popup-header h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--blue);
    text-align: center;
}

.pw-popup-body {
    padding: 30px;
}

.popup-subtitle {
    text-align: center;
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
}

.pw-popup-footer {
    padding: 20px 30px 30px;
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Button Styles */
.btn-primary,
.btn-secondary {
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary {
    background: var(--red);
    color: #fff;
}

.btn-primary:hover {
    background: #f0c14b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(225, 56, 63, 0.3);
}

.btn-secondary {
    background: #f0f0f0;
    color: #333;
}

.btn-secondary:hover {
    background: #e0e0e0;
}

.btn-primary.loading,
.btn-secondary.loading {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.btn-primary.loading::after,
.btn-secondary.loading::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Plan Popup Specific */
.plan-popup-message {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    border-left: 4px solid var(--red);
}

.plan-popup-message p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.plan-details-box {
    background: #fff;
    border: 2px solid var(--blue);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.plan-details-box h4 {
    margin: 0 0 10px;
    font-size: 22px;
    color: var(--blue);
}

.plan-details-box .plan-price {
    font-size: 32px;
    font-weight: 700;
    color: var(--red);
    justify-content: center;
    margin-bottom: 15px;
}

.plan-details-box .plan-description {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Warranty Grid */
.warranty-grid {
    display: grid;
    gap: 15px;
}

.warranty-option {
    display: block;
    cursor: pointer;
    position: relative;
}

.warranty-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.warranty-card-content {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #fff;
}

.warranty-option:hover .warranty-card-content {
    border-color: var(--blue);
    background: #f8f9fa;
}

.warranty-option input[type="radio"]:checked ~ .warranty-card-content {
    border-color: var(--red);
    background: #fff5f5;
}

.warranty-check-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blue);
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    flex-shrink: 0;
}

.warranty-option input[type="radio"]:checked ~ .warranty-card-content .warranty-check-icon {
    background: var(--red);
}

.warranty-name {
    flex: 1;
    font-weight: 600;
    font-size: 16px;
    color: #333;
}

.warranty-price {
    font-weight: 700;
    font-size: 18px;
    color: var(--red);
}

/* Addons Grid */
.addons-popup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.addon-card {
    position: relative;
}

.addon-checkbox-wrapper {
    display: block;
    cursor: pointer;
}

.addon-checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.addon-card-content {
    padding: 20px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #fff;
    text-align: center;
}

.addon-checkbox-wrapper:hover .addon-card-content {
    border-color: var(--blue);
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.addon-checkbox-wrapper input[type="checkbox"]:checked ~ .addon-card-content {
    border-color: var(--red);
    background: #fff5f5;
}

.addon-card-content h4 {
    margin: 0 0 10px;
    font-size: 16px;
    color: #333;
}

.addon-price {
    font-weight: 700;
    font-size: 18px;
    color: var(--red);
}

/* Final Popup */
.pw-final-popup-content {
    max-width: 450px;
}

.pw-final-popup-content .pw-popup-header h3 {
    color: var(--red);
}

/* Responsive */
@media (max-width: 768px) {
    .pw-popup-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .pw-popup-header {
        padding: 20px 20px 15px;
    }
    
    .pw-popup-header h3 {
        font-size: 22px;
    }
    
    .pw-popup-body {
        padding: 20px;
    }
    
    .pw-popup-footer {
        padding: 15px 20px 20px;
        flex-direction: column;
    }
    
    .btn-primary,
    .btn-secondary {
        width: 100%;
    }
    
    .addons-popup-grid {
        grid-template-columns: 1fr;
    }
}


/* Close Button for Popups */
.pw-popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10;
}

.pw-popup-close:hover {
    background: #f0f0f0;
    color: var(--red);
    transform: rotate(90deg);
}

/* Warranty Grid 2x2 */
.warranty-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

@media (max-width: 768px) {
    .warranty-grid-2x2 {
        grid-template-columns: 1fr;
    }
}

/* Addon Images in Popup */
.addon-image {
    width: 100%;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.addon-image img {
    width: 100%;
    height: auto;
    display: block;
}

.addon-card-content h4 {
    min-height: 40px;
}

@media (max-width: 1024px){
    .category-grid {
	grid-template-columns: repeat(2,1fr);
}
.footer-text p {

	font-size: 20px;

}
}

@media (max-width: 768px){
    .category-grid {
	grid-template-columns: repeat(1,1fr);
}
.single-product-explore-more {
	padding: 40px 0px;
}
.product-kf-section.pw-section.container {
	padding-top: 40px;
	padding-bottom: 40px;
}
.product-top-section.container {
	padding: 0;
}
.category-card.product-card {
	width: calc(50% - 15px);
}
.product-details-wrapper {
	padding: 30px 18px;
}
.product-title {
	font-size: 28px;
}
.footer-content-wrapper.container {
	flex-direction: column;
	gap: 20px;
}
#colophon {
	padding: 35px 20px;
}
.product-kf-section {
	margin-bottom: 0;
}
}

/* =========================================
   Responsive Header Styles
   ========================================= */

/* Mobile Menu Toggle (Hamburger) - Hidden on Desktop */
.mobile-menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
	z-index: 1001;
	position: relative;
}

.hamburger-icon {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 28px;
	height: 20px;
}

.hamburger-icon span {
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--blue);
	border-radius: 2px;
	transition: all 0.3s ease;
	transform-origin: center;
}

/* Hamburger Animation when Active */
.mobile-menu-toggle.active .hamburger-icon span:nth-child(1) {
	transform: translateY(8.5px) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-icon span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.mobile-menu-toggle.active .hamburger-icon span:nth-child(3) {
	transform: translateY(-8.5px) rotate(-45deg);
}

/* Cart Icon Styles */
.header-cart-icon {
	position: relative;
	z-index: 1001;
}

.cart-icon-link {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--blue);
	font-size: 24px;
	text-decoration: none;
	position: relative;
	padding: 10px;
	transition: color 0.3s ease;
}

.cart-icon-link:hover {
	color: var(--red);
}

.cart-count {
	position: absolute;
	top: 2px;
	right: 2px;
	background-color: var(--red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
	line-height: 1;
}
.cart-icon-link:visited {
	color: var(--red);
}
/* Mobile Navigation - Hidden by Default */
.mobile-navigation {
	display: none;
	position: fixed;
	top: 109px;
	left: 0;
	right: 0;
	width: 100%;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 998;
	max-height: calc(100vh - 130px);
	overflow-y: auto;
	border-top: 2px solid var(--red);
}

.mobile-navigation.active {
	display: block;
	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.mobile-menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-menu-list li {
	border-bottom: 1px solid #f0f0f0;
}

.mobile-menu-list li:last-child {
	border-bottom: none;
}

.mobile-menu-list li a {
	display: block;
	padding: 18px 20px;
	color: var(--blue);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	transition: all 0.3s ease;
}

.mobile-menu-list li a:hover,
.mobile-menu-list li.current-menu-item a {
	background-color: var(--blue);
	color: #fff;
	padding-left: 30px;
}
@media (min-width: 1024px){
    .header-cart-icon {
	display: none;
}
}
/* Responsive Breakpoint - Below 1024px */
@media (max-width: 1024px) {
	/* Show Mobile Menu Toggle */
	.mobile-menu-toggle {
		display: block;
		order: 2;
	}
	
	/* Hide Desktop Navigation */
	#site-navigation {
		display: none !important;
	}
	
	/* Adjust Heading Wrapper for Mobile Layout */
	.heading-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px 20px;
		height: auto;
		position: relative;
	}
	
	/* Logo stays centered */
	.site-branding {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		order: 1;
	}
	
	/* Cart Icon on the right */
	.header-cart-icon {
		order: 3;
		margin-left: auto;
	}
	
	/* Adjust logo size for mobile */
	.custom-logo-link img {
		height: 55px;
	}
	
	/* Ensure header has proper z-index */
	.custom-header {
		position: relative;
		z-index: 1000;
	}
	
	/* Adjust header height for mobile */
	.heading-wrapper {
		height: auto;
	}
}

/* Extra Small Screens - Below 480px */
@media (max-width: 480px) {
	.custom-logo-link img {
		height: 55px;
	}
	
	.heading-wrapper {
		padding: 12px 15px;
	}
	
	.cart-icon-link {
		font-size: 20px;
	}
	
	.hamburger-icon {
		width: 24px;
		height: 17px;
	}
}

/* ============================================
   Choose Your Plan Section
   ============================================ */

.choose-plan-section {
	background: #f7f7f7;
	padding: 80px 20px;
	position: relative;
	border-radius: 20px 20px 0 0;
}
.choose-plan-section .section-title {
	text-align: center;
	font-size: 2.5rem;
	color: #333;
	margin-bottom: 50px;
	font-weight: 700;
	letter-spacing: -0.5px;
}

.plan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	max-width: 1200px;
	margin: 0 auto 40px;
}

.plan-card {
	background: #fff;
	border: 2px solid #f0c14b;
	border-radius: 12px;
	padding: 30px 25px;
	text-align: center;
	transition: all 0.3s ease;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	overflow: hidden;
}




.plan-image {
	width: 100%;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	padding: 0;
}

.plan-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.plan-card:hover .plan-image img {
	transform: scale(1.05);
}
.plan-title {
	font-size: 1.5rem;
	margin-bottom: 0;
	font-weight: 700;
	letter-spacing: 0.3px;
	color: #004990;
}
.woocommerce-account #primary {
	padding: 46px 0 0;
}
.woocommerce-account #primary .entry-title {
	color: var(--red);
	padding-bottom: 20px;
}
.account-banner-notice-in {
	padding: 25px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	background-color: var(--red);
	font-weight: 700;
	border-radius: 15px;
	margin-bottom: 20px;
}
.plan-price {
	margin: 15px 0 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.plan-price .price-amount {
	font-size: 2rem;
	color: var(--red);
	font-weight: 800;
	line-height: 1;
}

.plan-price .price-period {
	font-size: 0.875rem;
	color: var(--red);
	font-weight: 500;
}

.plan-description {
	flex: 1;
	margin-bottom: 10px;
	font-size: 0.95rem;
	line-height: 1.6;
}

.plan-description p {
	margin-bottom: 10px;
}

.plan-description ul {
	list-style: none;
	padding: 0;
	margin: 15px 0;
	text-align: left;
}

.plan-description ul li {
	padding: 8px 0;
	position: relative;
	padding-left: 25px;
}

.plan-description ul li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #28a745;
	font-weight: bold;
	font-size: 1.1rem;
}

.btn-plan {
	background: var(--red);
	color: #fff !important;
	padding: 11px 40px;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.5px;
	transition: all 0.3s ease;
	display: inline-block;

	border: none;
	cursor: pointer;
	text-transform: capitalize;
}
.btn-plan:visited{
    color: #fff;
}



.btn-plan:active {
	transform: translateY(0);
}

.plan-bottom-action {
	text-align: center;
	margin-top: 30px;
}

.btn-secondary {
	background: transparent;
	color: var(--blue);
	padding: 12px 35px;
	border: 2px solid var(--blue);
	border-radius: 50px;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: all 0.3s ease;
	display: inline-block;
}

.btn-secondary:hover {
	background: var(--blue);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(0, 73, 144, 0.3);
}
    
.accessories-btn {
  padding: 25px 0 0;
  text-align: center;
}
.accessories-btn a {
  color: #004990;
  font-weight: 700;
  font-size: 22px;
  text-decoration: none;
  transition: 0.3s ease all;
}
.accessories-btn i {
  color: var(--red);
  margin-left: 10px;
}

#category-accessories .accessories-btn {
  display: none;
}

/* Responsive Design */
@media (max-width: 1024px) {
	.plan-grid {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 25px;
	}
	
	.choose-plan-section {
		padding: 60px 20px;
	}
	
	.choose-plan-section .section-title {
		font-size: 2rem;
		margin-bottom: 40px;
	}
}

@media (max-width: 768px) {
	.plan-grid {
		grid-template-columns: 1fr;
		max-width: 400px;
		gap: 20px;
	}
    .hero-content h1 {
	margin-bottom: 0;
	font-size: 33px;
	line-height: 1.25;
}
.hero-section {
	min-height: 51vh;
	padding: 80px 20px;
}
	.category-card.product-card {
	width: 100%;
}
	.choose-plan-section {
		padding: 50px 15px;
	}
	
	.choose-plan-section .section-title {
		font-size: 1.75rem;
		margin-bottom: 30px;
	}
	
	.plan-card {
		padding: 25px 20px;
	}
	
	.plan-title {
		font-size: 1.3rem;
	}
	
	.plan-price .price-amount {
		font-size: 1.75rem;
	}
}

@media (max-width: 480px) {
	.choose-plan-section .section-title {
		font-size: 1.5rem;
	}
	
	.plan-image {
		max-width: 150px;
		height: 150px;
	}
	
	.btn-plan {
		padding: 12px 30px;
		font-size: 0.9rem;
	}
	
	.btn-secondary {
		padding: 10px 25px;
		font-size: 0.9rem;
	}
}
.account-cart-summary h3 {
  margin-top: 0;
  color: var(--blue);
  border-bottom: 1px solid var(--red);
  padding-bottom: 14px;
}
/* Account Cart Summary Styles */
.account-cart-summary {
	margin-top: 30px;
	padding-top: 30px;
	background-color: #f7f7f7;
	border-radius: 12px;
	padding: 35px;
}

.account-cart-summary h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 20px;
}

.account-cart-items {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 20px;
}

.account-cart-item {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 15px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
}

.account-cart-item-image {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	overflow: hidden;
	border-radius: 6px;
}

.account-cart-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.account-cart-item-details {
	flex: 1;
}

.account-cart-item-details h4 {
	font-size: 1rem;
	font-weight: 600;
	color: #333;
	margin: 0 0 5px 0;
}

.account-cart-item-qty {
	font-size: 0.875rem;
	color: #666;
	margin: 0;
}

.account-cart-item-meta {
	font-size: 0.8125rem;
	color: #555;
	margin: 8px 0 0 0;
	padding: 8px 12px;
	background-color: #f9f9f9;
	border-left: 3px solid var(--blue);
	border-radius: 4px;
}

.account-cart-item-meta strong {
	color: var(--blue);
	font-size: 0.875rem;
}

.account-cart-item-price {
	flex-shrink: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--red);
}

.account-cart-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: var(--blue);
	border-radius: 8px;
	color: #fff;
}

.account-cart-total-label {
	font-size: 1.25rem;
	font-weight: 600;
}

.account-cart-total-amount {
	font-size: 1.5rem;
	font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.account-cart-item {
		flex-wrap: wrap;
	}
	.acf-header-logos {
	display: none;
}
	.account-cart-item-price {
		width: 100%;
		text-align: right;
		margin-top: 10px;
	}
	
	.account-cart-total {
		padding: 15px;
	}
	
	.account-cart-total-label {
		font-size: 1.125rem;
	}
	
	.account-cart-total-amount {
		font-size: 1.25rem;
	}
}

/* New Customer Box Above Login Form */
.new-customer-box {
	background: var(--red);
	padding: 25px 30px;
	border-radius: 12px;
	text-align: center;
	margin-bottom: 20px;
}

.new-customer-box h3 {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 15px 0;
}

.new-customer-box .btn-create-account {
	background: #fff;
	color: var(--red);
	border: none;
	padding: 12px 30px;
	border-radius: 50px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.new-customer-box .btn-create-account:hover {
	background: #f0f0f0;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.new-customer-box .btn-create-account i {
	font-size: 0.9rem;
	transition: transform 0.3s ease;
}

.new-customer-box .btn-create-account:hover i {
	transform: translateX(5px);
}

/* Cart Item Payment Breakdown Styling */
.woocommerce-cart-form__cart-item .wc-item-meta {
	margin-top: 12px;
	border-top: 1px solid #e5e5e5;
	padding-top: 12px;
}

.woocommerce-cart-form__cart-item .wc-item-meta p {
	margin: 8px 0;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Device payment styling */
.woocommerce-cart-form__cart-item .wc-item-meta p:has(strong:contains("Device payment")) {
	font-weight: 600;
	color: #333;
}

/* Plan payment styling */
.woocommerce-cart-form__cart-item .wc-item-meta p:has(strong:contains("Plan payment")) {
	color: #666;
}

/* Make the labels stand out */
.woocommerce-cart-form__cart-item .wc-item-meta strong {
	display: inline-block;
	min-width: 140px;
	color: #000;
	font-weight: 600;
}

/* Price values */
.woocommerce-cart-form__cart-item .wc-item-meta .woocommerce-Price-amount {
	font-weight: 700;
	color: var(--blue, #004990);
}

/* Warranty remove link */
.woocommerce-cart-form__cart-item .pw-remove-warranty {
	font-size: 0.85rem;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.woocommerce-cart-form__cart-item .pw-remove-warranty:hover {
	opacity: 0.8;
	text-decoration: underline;
}

/*--------------------------------------------------------------
# Proration Billing — Cart & Checkout Display
--------------------------------------------------------------*/

/* Checkout billing summary block */
#pw-billing-summary {
    background: #f0f7ff;
    border: 1px solid #c7dff7;
    border-left: 4px solid var(--blue, #004990);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

#pw-billing-summary h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--blue, #004990);
    border-bottom: 1px solid #c7dff7;
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.pw-billing-table td {
    font-size: 0.9rem;
    color: #444;
}

.pw-billing-table caption {
    font-size: 0.95rem;
    font-weight: 600;
    color: #222;
}

/* Autopay / recurring note inside cart item meta */
.pw-autopay-note {
    display: block;
    font-size: 0.85rem;
    color: #555;
    margin-top: 4px;
    line-height: 1.5;
}

/* Highlight the autopay row in the checkout summary */
.pw-billing-table tr:last-child td {
    color: #555;
    font-size: 0.85rem;
}
.hero-button {
  margin: 30px 0 0 !important;
  display: block !important;
  max-width: 100% !important;
}
.hero-button .btn-secondary {
  background-color: var(--blue) !important;
  color: #fff !important;
}
@media (min-width: 1024px) {

.acf-header-logos {
  width: 40%;
}
#site-navigation {
  width: 40%;
}
.site-branding {
  width: 20%;
}
}
@media (min-width: 1300px){
    #site-navigation ul li a {
  font-size: 14px;
    }
}
@media (max-width: 768px){
    .woocommerce-MyAccount-content {
	padding: 0 !important;
}
}