.clear,
.clearfix:after {
	clear: both
}
a img,
img {
	height: auto;
	max-width: 100%
}
body {
	margin: 0;
	padding: 0;
}

/* Typography default.
   app.css is injected AFTER the theme stylesheets, so a plain `body` rule here
   would beat the theme's own font. `:where(body)` has ZERO specificity, so the
   theme wins where it declares a font (LUXE -> Inter), while pages with no
   theme font still need a default -- supplied by the `html` rule below, which
   Bootstrap's `body` reset does not override because it inherits down. */
:where(body) {
	font-family: Arial, sans-serif;
	font-size: 15px
}

/* Bootstrap's own `body` reset outranks the zero-specificity rule above, so
   pages that ship no theme font would fall back to Bootstrap's system stack
   rather than the framework default. `body:not(:has(*))`-style tricks are
   fragile; instead re-assert at the same specificity as Bootstrap, but only
   for the font, and only where no theme font cascade exists. Theme pages set
   --font-body, so keying on that keeps them untouched. */
body:not(:has(#luxe-theme-marker)) {
	font-family: var(--font-body, Arial, sans-serif);
	font-size: var(--font-body-size, 15px)
}

li,
ul {
	list-style-type: none
}
.left {
	float: left
}
.right {
	float: right
}
.clearfix:after,
.clearfix:before {
	content: " ";
	display: table
}
.alignRright {
	float: right;
	margin: 0 0 12px 15px
}
.alignLeft,
.float-left {
	float: left
}
.alignLeft {
	margin: 0 15px 12px 0
}
.alignCenter {
	float: none!important;
	margin: 0 auto;
	display: block
}
a img,
img {
	border: 0
}
.text-left {
	text-align: left
}
.text-right {
	text-align: right
}
.text-center {
	text-align: center
}
.text-justify {
	text-align: justify
}
.config-errors h3 {
	padding: 10px 0;
	margin: 5px
}
.config-errors ul {
	padding: 0;
	margin: 0
}
.config-errors li {
	padding: 10px;
	margin: 5px;
	background-color: #FCC;
	border: 1px solid #C00;
	color: #333;
	font: 15px/20px arial, sans-serif
}
.config-errors li strong {
	float: right
}
/* Scoped with :where() so this is a ZERO-specificity default: framework forms
   that declare nothing still get it, but any theme rule for an input or select
   wins. Previously this repainted the LUXE search field, the shop "Sort By"
   select and the cart quantity inputs as 32px white boxes with a grey border.
   Matches funnel 343, where these pages do not load this stylesheet at all. */
:where(input[type=text]:not(.ignore-style)),
:where(input[type=search]:not(.ignore-style)),
:where(input[type=number]:not(.ignore-style)),
:where(input[type=password]:not(.ignore-style)),
:where(input[type=tel]:not(.ignore-style)),
:where(input[type=email]:not(.ignore-style)),
:where(select:not(.ignore-style)),
:where(textarea:not(.ignore-style)) {
	background: #FFF;
	border: 1px solid #a7abad;
	color: #222;
	line-height: 22px;
	width: 100%;
	font-size: 14px;
	padding: 3px 8px;
	outline: 0;
	font-family: Arial, sans-serif;
	font-weight: 400;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box
}
textarea {
	padding: 6px;
	height: 150px
}
:where(select) {
	line-height: 24px;
	padding: 4px
}
input[type=text]:focus,
input[type=search]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=email]:focus,
select:focus,
textarea:focus {
	background: #fff;
	box-shadow: 0 0 5px #51cbee;
	border: 1px solid #51cbee
}

input.has-error:not([name="agree-checkbox"])
{
	background: url(../images/error-input.png) 99.5% 50% no-repeat #fff;
	border: 1px solid orange
}

select.has-error:not([name="agree-checkbox"]) {
	background: url(../images/error-input.png) 99.5% 50% no-repeat #fff;
	border: 1px solid orange
}
input.no-error:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select.no-error {
	background: url(../images/tick-input.png) 99.5% 50% no-repeat #fff;
	border: 1px solid green
}
input.loading,
select.loading {
	background: url(../images/ajax-loader.gif) 99.5% 50% no-repeat #fff;
	border: 1px solid #51cbee
}
.app-benchmark {
	position: fixed;
	width: 98%;
	left: 0;
	bottom: 0;
	padding: 5px 1%;
	background-color: #CCC;
	color: #333;
	text-align: right
}
#app_common_modal,
#error_handler_overlay {
	position: fixed;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	z-index: 2147483647;
	background: #333;
	background: rgba(255, 255, 255, .8);
	display: none;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch
}
#app_common_modal .app_modal_body,
#error_handler_overlay .error_handler_body {
	max-width: 600px;
	-webkit-background-clip: padding-box;
	font-family: Verdana, Geneva, sans-serif;
	box-sizing: border-box;
	outline: 0
}
#error_handler_overlay .error_handler_body {
	margin: 100px auto;
	width: 95%;
	padding: 20px;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #999;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 0;
	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
	box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box
}
#app_common_modal_close,
#error_handler_overlay_close {
	position: absolute;
	right: -10px;
	top: -10px;
	color: #FFF;
	background-color: #333;
	border: 2px solid #FFF;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	font-weight: 700;
	line-height: 30px;
	padding: 0;
	margin: 0
}
#app_common_modal .app_modal_body {
	margin: 100px auto;
	min-width: inherit;
	width: 95%;
	min-height: 400px;
	padding: 2.5%;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #999;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 0;
	-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
	box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box
}
#app_common_modal .app_modal_body iframe {
	min-height: 400px;
	width: 100%;
	border: 1px solid #d5d6ef
}
.exitpop-content {
	position: fixed;
	height: 400px;
	width: 708px;
	margin: -200px 0 0 -354px;
	top: 50%;
	left: 50%;
	text-align: left;
	padding: 0;
	border: none;
	z-index: 2147483647
}
.exitpopup-overlay {
	background: rgba(0, 0, 0, .6);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2147483647;
	display: none
}
.exitpop-content img {
	display: block;
	margin: 0 auto;
	position: relative;
	text-align: center;
	max-width: 100%;
	height: auto
}
.exitpop-discountbar {
	background-color: red;
	border-bottom: 4px dashed #fff;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 700;
	height: 50px;
	line-height: 50px;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 9999;
	display: none
}
.app-load-spinner {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100px;
	height: 100px;
	margin: auto;
	background-color: #333;
	border-radius: 100%
}
.clear {
	line-height: 0;
	height: 0
}
.button:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
input[type=button].button:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1),
input[type=submit].button:not(.modal-sp-btn):not(.btn-select-product):not(.button-submit):not(.send-btn):not(.qty-btn):not(.remove-all-button):not(.sec-btn1) {
	border: 0;
	width: 100%;
	display: block;
	cursor: pointer;
	position: relative;
	outline: 0;
	padding: 20px 15px;
	background: #2288D0;
	color: #fff;
	font-size: 20px
}
#loading-indicator::after,
#loading-indicator::before {
	box-sizing: border-box;
	left: 50%;
	position: absolute;
	top: 50%
}
.button:hover:not(.modal-sp-btn),
input[type=button].button:hover:not(.modal-sp-btn),
input[type=submit].button:hover:not(.modal-sp-btn) {
	background: #2791E4
}
.defult {
	padding: 10px 15px
}
.defult form label {
	width: 175px;
	display: inline-block
}
.defult input[type=text],
.defult input[type=search],
.defult input[type=number],
.defult input[type=password],
.defult input[type=tel],
.defult input[type=email],
.defult select,
.defult textarea {
	max-width: 275px
}
.defult .button,
.defult input[type=button],
.defult input[type=submit] {
	max-width: 450px
}
.all-card-types li {
	float: left;
	margin-right: 20px
}
#loading-indicator {
	background-color: rgba(0, 0, 0, .5);
	bottom: 0;
	box-sizing: border-box;
	font-size: 1px;
	height: 100%;
	left: 0;
	margin: 0!important;
	padding: 0!important;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 2147483646
}
#loading-indicator::before {
	background: url(../images/loading.gif) center center no-repeat rgba(0, 0, 0, 0);
	content: "";
	height: 70px;
	margin-left: -35px;
	margin-top: -70px;
	width: 70px;
	z-index: 2
}
#loading-indicator::after {
	background: #fff;
	border-radius: 5px;
	color: #000;
	content: "Processing, one moment please... ";
	font-family: arial;
	font-size: 17px;
	height: 110px;
	line-height: 98px;
	margin-left: -150px;
	margin-top: -75px;
	padding-top: 35px;
	text-align: center;
	width: 300px;
	z-index: 1
}
@-webkit-keyframes scaleout {
	0% {
		-webkit-transform: scale(0)
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 0
	}
}
@keyframes scaleout {
	0% {
		transform: scale(0);
		-webkit-transform: scale(0)
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
		opacity: 0
	}
}
span.cb-inline-error {
	margin-top: 10px;
	font-weight: 100;
	color: #c00;
	display: block
}
form.app-form {
	padding: 10px
}


.modal-wrap{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
	overflow-y: auto;
}
.modal-dilog-part{
	width: 500px;
	background-color: #fff;
	border-radius: 4px;
	margin: 50px auto 50px auto;
}
.transaction-modal-head{
	padding:30px 55px;
	border-bottom: 1px solid #E9ECEF;
	display: flex;
	position: relative;
}
.transaction-modal-head-img{
	width: 85px;
}
.transaction-heading{
	color: #212D3D;
	font-size: 20px;
	font-weight: 600;
	padding-left: 12px;
}
.transaction-heading span{
	display: block;
	color: #ED4C4C;
	font-size: 15px;
	font-weight: normal;
	margin-top: 12px;
}
.close-btn{
	padding: 5px;
	width: auto;
	background-color: transparent;
	position: absolute;
	right: 30px;
    top: 25px;
}
.close-btn:hover{
	background-color: transparent;
}
.padding-box{
	padding:30px;
}
.security-heading{
	color: #5E6473;
	font-size: 15px;
	margin-bottom: 20px;
	text-align: center;
}
.ask-cell{
	color: #5E6473;
	font-size: 15px;
	margin-bottom: 15px;
	cursor: pointer;
}
.form-row{
	margin-bottom: 20px;
}
input[type=text].form-input, 
input[type=search].form-input, 
input[type=number].form-input, 
input[type=password].form-input, 
input[type=tel].form-input, 
input[type=email].form-input, 
select.form-input, 
textarea.form-input{
	border: 1px solid #CED4DA;
	height: 38px;
	border-radius: 4px;
	padding: 0 15px;
}
.flex-row{
	display: flex;
	margin: 0 -10px;
}
.half-col{
	width: 50%;
	padding: 0 10px;
}
.app-d-flex{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.submit-btn{
	display: inline-block;
	width: auto;
	background-color: #5C79FF;
	padding:13px 15px;
	font-size: 16px;
	font-weight: 600;
	border-radius: 4px;
}
.thank-link{
	color: #5C79FF;
	font-size: 15px;
	margin-right: 15px;
	text-decoration: none;
}
.total-price{
	color: #212D3D;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
}
.info-wrap{
	position: relative;
}
.info-cell{
	position: absolute;
	top: 12px;
    right: 12px;
}
.select-wrap{
	position: relative;
}
.select-wrap select{
	-webkit-appearance: none;
}
.select-wrap:after{
	top: 17px;
    right: 12px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(94, 100, 115, 0);
	border-top-color: #5E6473;
	border-width: 6px;
}
.info-cell:hover .tooltip{
	display: block;
}
.tooltip{
	position: absolute;
	border: 1px solid #ddd;
	padding: 5px;
	font-size: 12px;
	background-color: #fff;
	left: 100%;
	min-width: 90px;
	max-width: 150px;
	margin-left: 10px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	display: none;
}
.tooltip:after, .tooltip:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.tooltip:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #fff;
	border-width: 6px;
	margin-top: -6px;
}
.tooltip:before {
	border-color: rgba(221, 221, 221, 0);
	border-right-color: #ddd;
	border-width: 7px;
	margin-top: -7px;
}
.submit-btn:hover{
	background-color: #849AFF;
}

/* Cart golbal CSS */
span#cart-count{
	background-color: #ccc;
    border-radius: 46%;
    width: 19px;
    text-align: center;
    margin: -10px 0px 0px -23px;
    font-size: small;
    font-weight: bold;
    position: absolute;
}

.total-text{
	border: 2px solid #343a3f;
    border-radius: 4px;
	text-decoration: none !important;
}

.cart-slider{
	width: 100%;
	position: absolute;
}
.cart-slider-body{
	margin-right: -800px;
	z-index: 9999;
	background-color: #fdfeff;
	box-shadow: rgb(136 136 136) 0px 0px 5px 5px;
}

/* The navigation bar */
.navbar.app-navbar:not(.cart-navbar) {
	overflow: hidden;
	background-color: #333;
	position: fixed !important; /* Set the navbar to fixed position */
	top: 0; /* Position the navbar at the top of the page */
	width: 100%; /* Full width */
	z-index: 999;
  }
  
  /* Links inside the navbar */
  .navbar.app-navbar:not(.cart-navbar) a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
  }
  
  /* Change background on mouse-over */
  .navbar.app-navbar:not(.cart-navbar) a:hover {
	background: #ddd;
	color: black;
  }

  .main{
	  margin-top: 86px !important;
  }

  .card-text{
	  min-height: 200px;
  }

  ul#address-suggestions {
	padding: 20px;
	border: 1px solid #b6b6b6;
	border-radius: 10px;
	margin-top: 10px;
  }
  
  ul#address-suggestions li {
	margin-bottom: 15px;
  }
  
  ul#address-suggestions li:last-child {
	margin-bottom: 0px;
  }

#commonModal .modal-header{
	justify-content: space-between;
}


/* ============================================================
   CONTRACT BEHAVIOUR — selected state
   ============================================================
   Pure contract. Lives in app.css, which every funnel ships and <unifyscript>
   always injects, so ANY theme gets this for free with no CSS of its own.

   The author writes ONLY this — no class, no id, no name anywhere:

     <div data-app="select" data-app-added="Added">     <- whole box clickable
       Add
     </div>

   or, if the clickable area and the label are different elements:

     <div data-app="select">
       <button data-app-added="Added">Add</button>
     </div>

   The runtime puts data-app-selected on the RECORD whenever anything inside is
   chosen, so the rules below key on the record and reach the element carrying
   data-app-added. The "before" text is the element's own content; the "after"
   text comes from the attribute.
   ============================================================ */

/* Hide the element's own text once selected, and print the attribute instead.
   font-size:0 collapses the original text nodes without needing a wrapper
   element around them; the ::after is restored to normal size. */
[data-app-added][data-app-selected],
product[data-app-selected] [data-app-added],
crosssellproduct[data-app-selected] [data-app-added],
shippingmethod[data-app-selected] [data-app-added],
[data-app="select"][data-app-selected] [data-app-added] {
  font-size: 0 !important;
}

[data-app-added][data-app-selected]::after,
product[data-app-selected] [data-app-added]::after,
crosssellproduct[data-app-selected] [data-app-added]::after,
shippingmethod[data-app-selected] [data-app-added]::after,
[data-app="select"][data-app-selected] [data-app-added]::after {
  content: attr(data-app-added);
  font-size: 1rem;
  font-size: initial;
}

/* An icon inside the control keeps its size — only the text collapses. */
[data-app-added][data-app-selected] > i,
product[data-app-selected] [data-app-added] > i,
crosssellproduct[data-app-selected] [data-app-added] > i,
shippingmethod[data-app-selected] [data-app-added] > i {
  font-size: initial;
}


/* ============================================================
   CONTRACT BEHAVIOUR — extended subscription disables cross-sell
   ============================================================
   "Extended subscription" tells the backend to merge EVERY cross-sell product
   into the order (InitialSell.php:25). When the customer ticks it themselves,
   choosing cross-sells one by one is meaningless, so the cards are greyed.

   The box is also ticked automatically while a cross-sell is selected — in that
   case the cards must stay usable, because several cross-sells may be picked.
   The two cases are told apart from the markup alone, with no extra attribute:

     checked + a crosssellproduct is selected  -> automatic, cards stay usable
     checked + no crosssellproduct selected    -> manual,    cards are greyed

   so the rule is "checked, and nothing selected".

   Addressed by the contract attribute and the TAG only — no class, id or name —
   so it works in any theme:

     <input type="checkbox" data-app="extended-subscription">
     <crosssellproduct> … </crosssellproduct>

   Matched with ~= , not = , because data-app holds a SPACE-SEPARATED list of
   roles: a checkbox that also opts into showing its products in the summary
   reads data-app="extended-subscription extended:show-product", and an exact
   [data-app="..."] match silently stops applying the moment a second role is
   added -- the cards stayed live while the box was ticked.
   ============================================================ */

body:has([data-app~="extended-subscription"]:checked):not(:has(crosssellproduct[data-app-selected])) crosssellproduct {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(100%);
}

/* ============================================================
   CONTRACT BEHAVIOUR — no flash of the empty cart template
   ============================================================
   A cart list ships one [data-app="cart-item"] row in the markup, carrying the
   design's placeholders ("Product name", "$0.00"). The runtime clones it per
   stored line, but cartLoad() is async — so between first paint and that call
   the customer sees a dummy row and then watches it disappear.

   Hide the list until the runtime has painted it; app.js sets
   visibility:visible on the same element the moment it has real rows. Keyed on
   the contract attribute only, so it holds in any theme, and it reserves the
   space rather than collapsing the layout.
   ============================================================ */

[data-app="cart-items"] { visibility: hidden; }

/* ============================================================
   CONTRACT BEHAVIOUR — the coupon status line must be visible
   ============================================================
   The runtime writes the applied/removed text into
   [data-app="coupon-message"] and marks it with data-app-shown for 5s. Themes
   commonly place that element inside a banner that ships hidden (.d-none), and
   nothing ever un-hides the banner — so the text is written into a box the
   customer never sees. Reveal the marked element and whatever wraps it.

   Keyed on the contract attribute only; a theme that keeps its banner visible
   is unaffected, and the element goes back to hidden when the 5s marker is
   removed. Bootstrap's .d-none is display:none with !important, hence the
   matching !important here.
   ============================================================ */

[data-app="coupon-message"][data-app-shown],
:has(> [data-app="coupon-message"][data-app-shown]) {
  display: block !important;
}
[data-app="coupon-message"][data-app-shown] { visibility: visible; opacity: 1; }