/* ═══════════════════════════════════════════════════════════════════════
   Audioengine – Custom CSS
   ═══════════════════════════════════════════════════════════════════════ */
.inr-cat-list .ae-product-filter {
    background: none;
}
/* ═══════════════════════════════════════════════════════════════════════
   Explore Single Post — Blog Detail Content
   Targets Oxygen (.ct-inner-content) and theme (.ae-single-content__inner)
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Merch Category Filter Bar ─────────────────────────────────────── */
body.ae-checkout{
    
}
.fpg-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 1.5rem;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.fpg-filter-bar label {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: #2c2c2c;
  white-space: nowrap;
  margin: 0;
}

.fpg-filter-bar .product-category-filter {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.5rem 2.25rem 0.5rem 0.875rem;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.875rem;
  color: #333;
  cursor: pointer;
  min-width: 180px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  line-height: 1.4;
}

.fpg-filter-bar .product-category-filter:hover {
  border-color: #aaa;
}

.fpg-filter-bar .product-category-filter:focus {
  outline: none;
  border-color: var(--color-primary, #b22222);
  box-shadow: 0 0 0 3px rgba(178, 34, 34, 0.12);
}
.checkout-form-inner-wrapper .shipping-details-col{
    position: sticky !important;
    top: 25px !important;
    margin: 0 0 25px 0 !important;
    background-color: #fff!important;
    padding: 20px!important;
    border-radius: 10px!important;
    border: 1px solid #e5e5e5!important;

}
.shop_table.woocommerce-checkout-review-order-table tr{
    visibility: visible !important;
    display: revert!important;
}
/* ── No-results message ─────────────────────────────────────────────── */

.no-products-message {
  grid-column: 1 / -1;
  padding: 2.5rem 1rem;
  text-align: center;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
  color: #888;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .fpg-filter-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .fpg-filter-bar .product-category-filter {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Video Learning — Detail Page  (.ae-vld)
   ═══════════════════════════════════════════════════════════════════════ */

.ae-vld {
  padding: 3rem 1rem 5rem;
  background: #fff;
}

.ae-vld__container {
  max-width: 900px;
  margin: 0 auto;
}

/* ── Back link ──────────────────────────────────────────────────────── */

.ae-vld__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  margin-bottom: 1.75rem;
  transition: color 0.2s ease;
}

.ae-vld__back svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ae-vld__back:hover {
  color: var(--color-primary, #b22222);
}

/* ── Video embed ────────────────────────────────────────────────────── */

.ae-vld__video-wrap {
  margin-bottom: 1.75rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  background: #111;
}

.ae-vld__video-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.ae-vld__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.ae-vld__video-ratio--thumb {
  background: #1a1a1a;
}

.ae-vld__fallback-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Title ──────────────────────────────────────────────────────────── */

.ae-vld__title {
  font-family: 'Nunito Sans', sans-serif;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  color: #111;
  line-height: 1.25;
  margin: 0 0 1rem;
}

/* ── Divider ────────────────────────────────────────────────────────── */

.ae-vld__divider {
  border: none;
  border-top: 1px solid #e5e5e5;
  margin: 0 0 1.75rem;
}

/* ── Content / description ──────────────────────────────────────────── */

.ae-vld__content {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: #333;
}

.ae-vld__content p {
  margin: 0 0 1.25rem;
}

.ae-vld__content p:last-child {
  margin-bottom: 0;
}

.ae-vld__content a {
  color: var(--color-primary, #b22222);
  text-decoration: underline;
}

.ae-vld__content ul,
.ae-vld__content ol {
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}

.ae-vld__content li {
  margin-bottom: 0.375rem;
}

/* ── Prev / Next navigation ─────────────────────────────────────────── */

.ae-vld__nav {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid #e5e5e5;
}

.ae-vld__nav-prev,
.ae-vld__nav-next {
  flex: 1;
}

.ae-vld__nav-next {
  display: flex;
  justify-content: flex-end;
}

.ae-vld__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
  max-width: 340px;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ae-vld__nav-link:hover {
  border-color: var(--color-primary, #b22222);
  box-shadow: 0 2px 10px rgba(178, 34, 34, 0.1);
}

.ae-vld__nav-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-primary, #b22222);
}

.ae-vld__nav-arrow svg {
  width: 20px;
  height: 20px;
}

.ae-vld__nav-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ae-vld__nav-label {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
}

.ae-vld__nav-post-title {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ae-vld__nav-link--next .ae-vld__nav-meta {
  text-align: right;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .ae-vld {
    padding: 2rem 1rem 3.5rem;
  }

  .ae-vld__nav {
    flex-direction: column;
  }

  .ae-vld__nav-next {
    justify-content: flex-start;
  }

  .ae-vld__nav-link {
    max-width: 100%;
    width: 100%;
  }

  .ae-vld__nav-link--next .ae-vld__nav-meta {
    text-align: left;
  }
}

/* Support Enquiry 30-05-2026 */
:root {
    --action-link: #b22222;
    --action-hover: #cf2727;
    --white: #FFFFFF;
    --gray-drk: #333333;
    --gray-md: #404040;
    --white-lght: #f4f4f4;
    --gray-lght: #d9d9d9;
}

.support-inquiry .inr-hero-banner h2 {
    font-size: 76px;
    line-height: 1.2;
}
.support-inquiry main .inr-hero-banner p {
    font-size: 16px;
    line-height: 1.5;
}
.support-inquiry main .inr-hero-banner p a {
    color: var(--action-link);
}
.support-inquiry main .inr-hero-banner p a:hover,
.support-inquiry main .inr-hero-banner p a:focus {
    color: var(--action-hover);
}
.support-inquiry main .inr-hero-banner .support-search {
    border-radius: 6px;
}
.support-inquiry main .inr-hero-banner .support-search__input {
    padding-top: 10.5px!important;
    padding-bottom: 10.36px!important;
    font-size: 12px !important;
    line-height: 1.15;
}
.support-inquiry main .inr-hero-banner button.support-search__btn {
    width: 40px;
    height: 40px;
    max-width: 40px;
    padding: 0;
    border: none;
}
.support-inquiry main .inr-hero-banner button.support-search__btn:hover {
    background-color: transparent;
    box-shadow: none;
}
.support-inquiry main .inr-hero-banner button.support-search__btn svg {
    width: 20px;
    height: 20px;
}
.support-inquiry main .inr-hero-banner button.support-search__btn svg {
    display: none !important;
}
.support-inquiry main .inr-hero-banner button.support-search__btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat center / contain;
}
.support-inquiry main .order-returns {
    gap: 30px;
    background-color: var(--white-lght);
}
.support-inquiry main .order-returns h3,
.support-inquiry main .find-help-prod-cat h3,
.support-inquiry main .find-help-by-topic h3 {
    line-height: 1.2;
}
.support-inquiry main .order-returns a {
    background-color: var(--action-link)!important;
    box-shadow: none!important;
    border-color: var(--action-link)!important;
    white-space: nowrap;
}
.support-inquiry main .order-returns a:hover,
.support-inquiry main .order-returns a:focus {
    background-color: var(--action-hover)!important;
    border-color: var(--action-hover)!important;
}
.support-inquiry main .find-help-prod-cat .e-con-inner,
.support-inquiry main .find-help-by-topic .e-con-inner,
.support-inquiry main .ae-additional-suprt .e-con-inner,
.support-inquiry main .ae-support-ph .e-con-inner {
    max-width: 1320px;
    gap: 30px;
    padding-left: 30px;
    padding-right: 30px;
}
.support-inquiry main .find-help-prod-cat .e-con-inner {
    padding-bottom: .5rem;
    padding-left: 2px;
    padding-right: 2px;
}
.support-inquiry main .find-help-prod-cat .cpw-cat-nav-wrap {
    background-color: transparent!important;
    background: transparent;
    border: none;
    padding-bottom: 4.5rem;
    padding-left: 28px;
    padding-right: 28px;
}
.support-inquiry main .find-help-prod-cat .cpw-cat-nav {
    gap: 20px;
}
.support-inquiry main .find-help-prod-cat .cpw-cat-item {
    /* border-bottom: none; */
    border-radius: 6px;
}
.support-inquiry main .find-help-prod-cat .cpw-cat-item:hover {
    border-bottom-color: transparent;
}
.support-inquiry main .find-help-prod-cat .cpw-cat-item.is-active {
    border-bottom-color: var(--action-link);
}
.support-inquiry main .find-help-prod-cat .cpw-cat-item .cpw-cat-card {
    background-color: var(--white);
    padding: 14px;
    gap: 18px;
    border-radius: 6px;
    border: 1px solid var(--white-lght);
    transition-duration: .25s;
    transition-timing-function: ease;
    transition-property: box-shadow;
}
.support-inquiry main .find-help-prod-cat .cpw-cat-item .cpw-cat-card:hover {
    box-shadow: 0 4px 4px -10px rgba(0, 0, 0, 0.04), 0 13px 13px -10px rgba(0, 0, 0, 0.06), 0 40px 60px -10px rgba(0, 0, 0, 0.08);
}
.support-inquiry main .find-help-prod-cat .cpw-cat-item.is-active .cpw-cat-card {
    box-shadow: 0 4px 4px -10px rgba(0, 0, 0, 0.04), 0 13px 13px -10px rgba(0, 0, 0, 0.06), 0 40px 60px -10px rgba(0, 0, 0, 0.08);
}
.support-inquiry main .find-help-prod-cat .cpw-cat-card .cpw-cat-thumb {
    width: 60px;
}
.support-inquiry main .find-help-prod-cat .cpw-cat-card .cpw-cat-name {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: var(--gray-md);
}
.support-inquiry main .find-help-prod-cat .cpw-cat-item.is-active .cpw-cat-card .cpw-cat-name {
    font-weight: 400;
    color: var(--gray-md);
}
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap {
    padding-left: 0;
    padding-right: 0;
}
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-grid {
    gap: 20px;
}
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-product-card {
    padding: 45px 30px;
    border-radius: 6px;
    border-color: var(--white-lght);
    gap: 0px;
}
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-card-header {
    flex-direction: row;
    align-items: center;
    gap: 13px;
    font-weight: 600;
}
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-thumb {
    width: 60px;
    height: 60px;
    background: transparent;
}
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-product-name {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-drk);
    padding-top: 0;
}
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-links {
    margin-top: 1rem;
    margin-bottom: 1rem;
    gap: 0px;
}
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-link-item {
    font-family: "Montserrat", sans-serif;
    display: list-item;
    font-size: 12px;
    margin-bottom: 13.9px;
    font-weight: 400;
    color: var(--gray-drk);
}
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-link-item:last-child {
    margin-bottom: 0px;
}
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-link-item a {
    color: var(--gray-drk);
}
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-link-item a:hover,
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-link-item a:focus {
    color: var(--action-hover);
    text-decoration: none;
}
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-product-btn {
    font-family: "Montserrat", sans-serif;
    background-color: transparent;
    border: 2px solid var(--action-link);
    border-radius: 5px;
    color: var(--action-link);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-product-btn:hover,
.support-inquiry main .find-help-prod-cat .find-help-prod-listing .cpw-grid-wrap .cpw-product-btn:focus {
    background-color: var(--action-hover);
    border: 2px solid var(--action-hover);
    color: var(--white);
    text-decoration: none;
}

.support-inquiry main .find-help-by-topic .find-help-by-topic-grid .find-help-by-topic-grid-block {
    padding: 30px;
    box-shadow: none;
    gap: 14.5px;
    border: 1px solid var(--white-lght);
}
.support-inquiry main .find-help-by-topic .find-help-by-topic-grid .find-help-by-topic-grid-block:hover {
    box-shadow: 0 4px 4px -10px rgba(0, 0, 0, 0.04), 0 13px 13px -10px rgba(0, 0, 0, 0.06), 0 40px 60px -10px rgba(0, 0, 0, 0.08)
}
.support-inquiry main .find-help-by-topic .find-help-by-topic-grid .find-help-by-topic-grid-block h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--gray-md);
}
.support-inquiry main .find-help-by-topic .find-help-by-topic-grid .find-help-by-topic-grid-block p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-md);
    font-style: normal;
}
.support-inquiry main .find-help-by-topic .find-help-by-topic-grid .find-help-by-topic-grid-block a {
    height: 44px!important;
    max-width: 200px!important;
    background-color: transparent!important;
    border-color: var(--action-link)!important;
    color: var(--action-link);
    box-shadow: none;
    padding: 12px 15px;
    line-height: 1;
    font-size: 16px;
}
.support-inquiry main .find-help-by-topic .find-help-by-topic-grid .find-help-by-topic-grid-block a:hover,
.support-inquiry main .find-help-by-topic .find-help-by-topic-grid .find-help-by-topic-grid-block a:focus {
    background-color: var(--action-hover)!important;
    border-color: var(--action-hover)!important;
    color: var(--white);
}

.support-inquiry main .ae-additional-suprt {
    margin-bottom: 115px;
}
.support-inquiry main .ae-additional-suprt .ae-support-frm-wrapper {
    gap: 30px;
}
.support-inquiry main .ae-additional-suprt .ct-text-block {
    font-size: 21.3px;
    color: var(--gray-drk);
    line-height: 1.5;
}
.support-inquiry main .ae-additional-suprt .support-form-notice {
    width: 80%;
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(252, 133, 30, .05);
    color: #884002;
    font-size: 16px;
    line-height: 1.5;
    text-shadow: none;
    margin-right: auto;
    margin-left: auto;
}
.support-inquiry main .ae-additional-suprt .support-form-notice b {
    font-weight: bolder;
}
.support-inquiry main .ae-additional-suprt .support-form-container {
    padding: 30px!important;
    width: 80%;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 4px 4px -10px rgba(0, 0, 0, 0.04), 0 13px 13px -10px rgba(0, 0, 0, 0.06), 0 40px 60px -10px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--white-lght);
    margin-right: auto;
    margin-left: auto;
}
.support-inquiry main .ae-additional-suprt .support-form-container h2 {
    margin: 10px 0 6px 0;
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1.2;
}
.support-inquiry main .ae-additional-suprt .support-form-container p {
    font-size: 12px;
    line-height: 1.5;
    color: var(--gray-md);
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.support-inquiry main .ae-additional-suprt .support-form-container form label {
    display: inline-block;
    line-height: 1.3;
    clear: both;
    font-size: 16px;
    font-weight: 600;
    margin-top: 0.5em !important;
    margin-bottom: 0;
    font-family: "Montserrat", sans-serif;
}
.zd-article-list li{
    padding: 8px 0!important;
}
.support-inquiry main .ae-additional-suprt .support-form-container form .support-question-selection label .gfield_required {
    color: #790000;
    margin-left: 4px;
}
.support-inquiry main .ae-additional-suprt .support-form-container form .ginput_container {
    margin-top: 8px;
}
.support-inquiry main .ae-additional-suprt .support-form-container form #more-help-wrapper-presale a,
.support-inquiry main .ae-additional-suprt .support-form-container form #more-help-wrapper a,
.support-inquiry main .ae-additional-suprt .support-form-container form #more-help-wrapper-order-status a {
    background-color: transparent!important;
    border: 2px solid var(--action-link)!important;
    border-radius: 5px;
    color: var(--action-link);
    box-shadow: none;
    padding: 12px 24px;
    line-height: 1;
    font-size: 16px;
    
    margin-right: 0;
}
.woocommerce .form-row input[type="text"],
.woocommerce .form-row input[type="email"],
.woocommerce .form-row input[type="tel"]{
    height: 55px!important;
    border-radius: 6px!important;
}
.support-inquiry main .ae-additional-suprt .support-form-container form #more-help-wrapper-presale a:hover,
.support-inquiry main .ae-additional-suprt .support-form-container form #more-help-wrapper-presale a:focus,
.support-inquiry main .ae-additional-suprt .support-form-container form #more-help-wrapper a:hover,
.support-inquiry main .ae-additional-suprt .support-form-container form #more-help-wrapper a:focus,
.support-inquiry main .ae-additional-suprt .support-form-container form #more-help-wrapper-order-status a:hover,
.support-inquiry main .ae-additional-suprt .support-form-container form #more-help-wrapper-order-status a:focus   {
    background-color: var(--action-hover)!important;
    border-color: var(--action-hover)!important;
    color: var(--white);
}

.ae-support-frm-wrapper form #more-help-wrapper a,
.ae-support-frm-wrapper form #more-help-wrapper-order-status a {
    background-color: transparent!important;
    border: 2px solid var(--action-link)!important;
    border-radius: 5px;
    color: var(--action-link);
    box-shadow: none;
    padding: 12px 24px;
    line-height: 1;
    font-size: 16px;
    margin-right: 0;
}
.ae-support-frm-wrapper form #more-help-wrapper a:hover,
.ae-support-frm-wrapper form #more-help-wrapper a:focus,
.ae-support-frm-wrapper form #more-help-wrapper-order-status a:hover,
.ae-support-frm-wrapper form #more-help-wrapper-order-status a:focus {
    background-color: var(--action-hover)!important;
    border-color: var(--action-hover)!important;
    color: var(--white);
}
.chosen-container.chosen-container-multi .chosen-choices .search-choice{
    background-color: #fc851e!important;
}
.chosen-container.chosen-container-multi{
    width: 100%!important;
}
.gform_wrapper .chosen-container-single .chosen-single {
    height: 50px!important;
    display: flex!important;
    align-items: center!important;
}
.support-inquiry main .ae-additional-suprt .support-form-container form #start-over-btn {
    font-size: 8px;
    color: var(--action-link);
}

.support-inquiry main .ae-support-ph .e-con-inner {
    padding-top: 0;
    padding-bottom: 0;
}
.support-inquiry main .ae-support-ph p {
    text-align: center;
    font-size: 20px;
    font-weight: 900!important;
    line-height: 1.5;
    color: var(--gray-md)!important;
}
.order-status .order-title > .e-con-inner {
    gap: 30px;
    padding-top: 60px;
    padding-bottom: 40px;
}
.order-status .order-title > .e-con-inner .elementor-widget-text-editor {
    max-width: 60%!important;
    margin-left: auto;
    margin-right: auto;
}
.order-status .order-title > .e-con-inner .elementor-widget-text-editor p {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-md);
}
.order-description > .e-con-inner .elementor-widget-shortcode {
    border-radius: 10px!important;
    border: 1px solid var(--gray-lght);
    padding: 30px!important;
    box-shadow: 0 4px 4px -10px rgba(0, 0, 0, 0.04), 0 13px 13px -10px rgba(0, 0, 0, 0.06), 0 40px 60px -10px rgba(0, 0, 0, 0.08)!important;
}
.order-description > .e-con-inner .elementor-widget-shortcode form > p {
    font-size: 12px;
    color: var(--gray-drk);
    font-weight: 400;
    line-height: 1.6;
    margin-top: 1em;
    margin-bottom: 1em;
}
.order-description > .e-con-inner .elementor-widget-shortcode form p label {
    font-weight: 600;
    color: var(--gray-drk);
    font-size: 12px;
}
.order-description > .e-con-inner .elementor-widget-shortcode form .form-row .input-text {
    font-size: 14px;
    border: 1px solid #d3ced2;
    background: #ffffff;
    color: #000000;
    outline: none;
    padding: 8px 12px;
    border-radius: 4px;
    line-height: 1.15;
}
.order-description > .e-con-inner .elementor-widget-shortcode form .form-row  button {
    background-color: transparent;
    cursor: pointer;
    color: var(--action-link);
    padding: 0.75em 1.5em;
    border-radius: 0.25em;
    font-weight: 400;
    border: 2px solid var(--action-link);
    line-height: 1;
    min-width: 12.5rem;
    font-size: 18px;
    box-shadow: none;
}
.order-description > .e-con-inner .elementor-widget-shortcode form .form-row  button:hover {
    background-color: var(--action-hover);
    color: var(--white);
    border-color: var(--action-link);
}
/* Support Enquiry - 30-05-2026 */

/* Newsroom - 03-06-2026 */
.page .n2-newsroom-wrap {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 30px;
    padding-right: 30px;
    gap: 30px;
    max-width: 1320px;
}
.n2-newsroom-main,
.n2-newsroom-sidebar {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
}
.page .n2-newsroom-wrap .n2-newsroom-main {
    width: 80%;
}
.page .n2-newsroom-wrap .n2-newsroom-sidebar {
    width: 20%;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}
.page .n2-newsroom-wrap .n2-newsroom-sidebar div {
    width: 100%;
}
.page .n2-newsroom-wrap .n2-newsroom-sidebar .n2-newsroom-filter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.page .n2-newsroom-wrap .n2-newsroom-sidebar #filter-newsroom li {
    display: list-item;
    margin: 0 !important;
    padding: 13px 0 13.5px;
    border-bottom: 1px solid #ddd !important;
    font-size: 12px;
    color: var(--gray-md);
}
.page .n2-newsroom-wrap .n2-newsroom-sidebar .n2-newsroom-filter-list li.active {
    color: var(--gray-md);
    font-weight: 400;
}
.page .n2-newsroom-wrap .n2-newsroom-main .n2-newsroom-grid {
    gap: 30px;
}
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: 20px;
    text-decoration: none;
}
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card__img-link {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
}
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card__img-link .n2-card__img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
    transition-property: transform;
    will-change: transform;
}
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card__img-link:hover .n2-card__img,
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card__img-link:focus .n2-card__img {
    transform: scale(1.05);
}
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0;
    align-items: flex-start;
}
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card__tag--press-releases,
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card__tag--archive {
    color: var(--action-link);
}
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card__tag {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    text-transform: capitalize;
}
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    line-height: 1.2;
    margin: 0;
    text-align: left;
}
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card__title a {
    color: #000;
    text-decoration: none;
}
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card__title a:hover,
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card__title a:focus {
    color: var(--action-hover);
    text-decoration: none;
}
.page .n2-newsroom-wrap .n2-newsroom-main .n2-card__excerpt {
    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    color: var(--gray-drk);
    line-height: 1.5;
    font-weight: 400;
    overflow: hidden;
    margin: 0;
}
/* Newsroom - 03-06-2026 */

/* ═══════════════════════════════════════════════════════════════════════
   Return Page — Progress Step Tabs  (#form-tabs)
   ═══════════════════════════════════════════════════════════════════════ */

/* Utility classes used by the HTML */
.flex       { display: flex; }
.flex-row   { flex-direction: row; }
.flex-top   { align-items: flex-start; }

/* Container */
#form-tabs {
    display: flex;
    flex-direction: row;
    background: #fff;
    /* border: 1px solid #e2e2e2; */
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}

/* Each step column */
.form-tabs__col {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    /* border-right: 1px solid #e2e2e2; */
    position: relative;
}

.form-tabs__col:last-child {
    border-right: none;
}

/* Step number */
.form-tabs__num {
    font-size: 58px;
    font-weight: 800;
    line-height: 1;
    color: #1a1a1a;
    flex-shrink: 0;
    letter-spacing: -0.02em;
    font-family: inherit;
    transition: color 0.2s ease;
}

/* Active / completed step — red number */
.form-tabs__col.done .form-tabs__num {
    color: var(--action-link, #b22222);
}

/* Step label text */
.form-tabs__txt {
    font-size: 13.5px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.4;
}

.form-tabs__txt span {
    display: block;
    color: #555;
}

.form-tabs__col.done .form-tabs__txt {
    color: #1a1a1a;
}

.form-tabs__col.done .form-tabs__txt span {
    color: var(--action-link, #b22222);
}

/* ── Orange progress bar at the bottom ─────────────────────────────── */
#form-tabs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: #f97316;
    width: 0%;
    transition: width 0.35s ease;
    border-radius: 0 2px 0 0;
}

/* Width based on which step is "done" — uses :has() (93%+ browser support) */
#form-tabs:has(.form-tabs__col:nth-child(1).done)::after { width: 25%; }
#form-tabs:has(.form-tabs__col:nth-child(2).done)::after { width: 50%; }
#form-tabs:has(.form-tabs__col:nth-child(3).done)::after { width: 75%; }
#form-tabs:has(.form-tabs__col:nth-child(4).done)::after { width: 100%; }

.form-tabs__num {
    font-weight: 600;
    font-size: 4em !important;
    margin-right: 10px !important;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    #form-tabs {
        flex-wrap: wrap;
    }

    .form-tabs__col {
        flex: 1 1 50%;
        border-right: none;
        border-bottom: 1px solid #e2e2e2;
        padding: 14px 16px;
    }

    .form-tabs__col:nth-child(odd) {
        border-right: 1px solid #e2e2e2;
    }

    .form-tabs__col:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .form-tabs__num {
        font-size: 42px;
    }
}

@media (max-width: 480px) {
    .form-tabs__col {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid #e2e2e2;
    }

    .form-tabs__col:last-child {
        border-bottom: none;
    }

    .form-tabs__num {
        font-size: 36px;
    }

    #form-tabs::after {
        height: 3px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Return Page — Order Lookup Form  (.get-order-form)
   ═══════════════════════════════════════════════════════════════════════ */

.get-order-form,.store-credit-form,.resend-store-credit-form {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px !important;
    margin-top: 1.5rem !important;
}

/* Inputs */
.get-order-form input[type="text"], .store-credit-form input[type="text"],.resend-store-credit-form input[type="text"]{
    flex: 1;
    min-width: 0;
    padding: 12px 16px !important;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    background: #fff;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
  border-right: 0px;
  border-left: 0px;
    /* border-radius: 5px; */
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
}

.get-order-form input[type="text"]::placeholder {
    color: #6b8eae;
    opacity: 1;
}

.get-order-form input[type="text"]:focus {
    border-color: var(--color-primary, #b22222);
    box-shadow: 0 0 0 3px rgba(178, 34, 34, 0.1);
}

/* Next / submit button */
.get-order-form .check-order-info,
.get-order-form .btn--action,.store-credit-form a, .resend-store-credit-form a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    white-space: nowrap;
    background: #fff;
    color: var(--color-primary, #b22222);
    border: 2px solid var(--color-primary, #b22222);
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    line-height: 1.4;
    text-align: center;
}
h4.credit-forms__title{
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.get-order-form .check-order-info:hover,
.get-order-form .btn--action:hover {
    background: var(--color-primary, #b22222);
    color: #fff;
}

/* Error message */
.get-order-form .order-error {
    display: none;
    width: 100%;
    font-size: 13px;
    color: var(--color-primary, #b22222);
    margin-bottom: 0.5rem;
}

.get-order-form .order-error:not(:empty) {
    display: block;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .get-order-form {
        flex-direction: column;
        gap: 10px;
    }

    .get-order-form input[type="text"],
    .get-order-form .check-order-info,
    .get-order-form .btn--action {
        width: 100%;
        flex: none;
    }
}

/* ── Content column: narrow & centered ───────────────────────────────── */
/* 04-06-2026 */
.ct-inner-content,
.ae-single-content__inner {
    max-width: 1260px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

/* ── Paragraphs ──────────────────────────────────────────────────────── */
.ct-inner-content p,
.ae-single-content__inner p {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--gray-md);
    margin-bottom: 16px;
}
.ae-single-content__inner p strong,
.ae-single-content__inner p b {
    font-weight: bolder;
}
.ae-single-content__inner p:empty,
.ae-single-content__inner p:contains(" ") {
    display: none;
}
.single .ae-newsletter .ae-newsletter__inner a img {
    width: 100%;
    max-width: 600px !important;
    align-self: center;
    position: static;
}
#more-articles-section > .elementor-containerm,
.single #more-articles-section > .elementor-container {
    max-width: 1320px;
    width: 100%;
    padding: 100px 30px;
}
#more-articles-section > .elementor-container .ae-more-articles {
    padding: 0;
}
#more-articles-section > .elementor-container .ae-more-articles .ae-more-articles__grid {
    gap: 45px;
}
#more-articles-section > .elementor-container .ae-more-articles .ae-more-articles__grid .ae-more-articles__card {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    text-align: left;
    text-decoration: none;
    flex-direction: column;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}
#more-articles-section > .elementor-container .ae-more-articles .ae-more-articles__grid .ae-more-articles__card .ae-more-articles__img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 7px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    line-height: normal;
    margin: 0;
    aspect-ratio: 4 / 3;
}
#more-articles-section > .elementor-container .ae-more-articles .ae-more-articles__grid .ae-more-articles__card .ae-more-articles__img-wrap .ae-more-articles__img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
    transition-property: transform;
    will-change: transform;
}
#more-articles-section > .elementor-container .ae-more-articles .ae-more-articles__grid .ae-more-articles__card .ae-more-articles__img-wrap:hover .ae-more-articles__img {
    transform: scale(1.05);
}
#more-articles-section > .elementor-container .ae-more-articles .ae-more-articles__grid .ae-more-articles__card .ae-more-articles__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
    flex-wrap: nowrap;
}
#more-articles-section > .elementor-container .ae-more-articles .ae-more-articles__grid .ae-more-articles__card .ae-more-articles__body .ae-more-articles__title {
    font-size: 18px;
    color: #000;
    text-align: left;
    font-weight: 700;
    font-family: "Lato", Sans-serif;
    line-height: 1.2;
    max-inline-size: 100%;
}
#more-articles-section > .elementor-container .ae-more-articles .ae-more-articles__grid .ae-more-articles__card .ae-more-articles__body .ae-more-articles__title a {
    color: #000;
}
#more-articles-section > .elementor-container .ae-more-articles .ae-more-articles__grid .ae-more-articles__card .ae-more-articles__body .ae-more-articles__title a:hover,
#more-articles-section > .elementor-container .ae-more-articles .ae-more-articles__grid .ae-more-articles__card .ae-more-articles__body .ae-more-articles__title a:focus {
    color: var(--action-hover);
}
.single .elementor-section-boxed .elementor-widget-heading .elementor-heading-title {
    color: #000;
    font-size: 30px;
}
/* 04-06-2026 */
/* ── H2 headings ─────────────────────────────────────────────────────── */
.ct-inner-content h2,
.ae-single-content__inner h2 {
   
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #111111 !important;
    margin: 24px 0 8px !important;
    padding: 0 !important;
    border: none !important;
}

.ct-inner-content h2 strong,
.ae-single-content__inner h2 strong {
    font-weight: 700;
    font-size: inherit;
}

/* ── H3 headings ─────────────────────────────────────────────────────── */
.ct-inner-content h3,
.ae-single-content__inner h3 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #111111 !important;
    margin: 24px 0 8px !important;
}

/* ── Inline images ───────────────────────────────────────────────────── */
.ct-inner-content p img,
.ae-single-content__inner p img {
    display: block;
    width: 100%;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
    margin: 24px auto !important;
}

/* ── Links in content ────────────────────────────────────────────────── */
.ct-inner-content a,
.ae-single-content__inner a {
    color: #b71c1c;
    text-decoration: none;
}

.ct-inner-content a:hover,
.ae-single-content__inner a:hover {
    text-decoration: underline;
}

/* ── Playlist icons row ──────────────────────────────────────────────── */
.ct-inner-content div[style*="repeat(5"],
.ae-single-content__inner div[style*="repeat(5"] {
    max-width: 320px !important;
    margin: 16px auto !important;
}

/* ── Newsletter footer image (Oxygen .ct-link img) ──────────────────── */
.ct-section .ct-link > img.ct-image {
    display: block;
    max-width: 400px;
    width: 100%;
    margin: 32px auto 0;
    border-radius: 6px;
}

/* ── Section wrapper ─────────────────────────────────────────────────── */
.ct-section.site-main {
    background: #ffffff;
    padding-top: 40px !important;
    padding-bottom: 48px !important;
}

.ct-section.site-main .ct-section-inner-wrap {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px;
}

/* ── ae-single-wrap (theme template) ────────────────────────────────── */
.ae-single-wrap {
    background: #ffffff;
    padding: 40px 24px 48px;
}
/* 04-06-2026 */
.ae-single-content {
    max-width: 1260px;
    padding-left:10px!important;
    padding-right: 10px!important;
    width: 100%!important;
    margin: 0 auto;
}
.ae-single-content > .ae-single-content__inner > .elementor > .elementor-element.e-con-boxed.e-parent {
    padding: 0;
}
.ae-single-content > .ae-single-content__inner > .elementor > .elementor-element.e-con-boxed.e-parent > .e-con-inner {
    padding-top: 45px;
    padding-bottom: 45px;
}
body.single-explore_posts .ae-single-content{
    padding-top:70px ;
}
.ae-newsletter{
    padding: 0 10px!important;
}
/* 04-06-2026 */

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ct-inner-content,
    .ae-single-content__inner {
        padding: 0 16px;
    }

    .ct-inner-content p,
    .ae-single-content__inner p {
        font-size: 14px !important;
    }

    .ct-inner-content h2,
    .ae-single-content__inner h2 {
        font-size: 17px !important;
    }
}

/* #cpg-1 .fpg-card__btn,.product-actions-wrapper a.button.product-buy-now{
    display: none !important;
} */
#also-bought #cpg-1 .fpg-card__btn,#also-bought #cpg-1 .fpg-card__foot{
    display: none !important;
 }
.product-actions-wrapper a.button.product-buy-now{
    display: none !important;
}

/* ── Shop Auto-Load Spinner ──────────────────────────────────────────── */
.ae-load-more-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 0 16px;
    width: 100%;
    min-height: 60px;
}

.ae-load-more-sentinel {
    position: absolute;
    width: 1px;
    height: 1px;
    visibility: hidden;
}

.ae-load-more-spinner {
    display: none;
    width: 28px;
    height: 28px;
    border: 3px solid #dddddd;
    border-top-color: #111111;
    border-radius: 50%;
    animation: ae-spin 0.7s linear infinite;
}

.ae-load-more-wrap.is-loading .ae-load-more-spinner {
    display: block;
}

@keyframes ae-spin {
    to { transform: rotate(360deg); }
}

/* ── Shop Stock Summary Bar ──────────────────────────────────────────── */
.ae-stock-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    background: #f7f7f7;
    border-radius: 6px;
    font-size: 13px;
    color: #444;
}

.ae-stock-summary__sep {
    color: #ccc;
}

.ae-stock-summary__item strong {
    font-weight: 700;
    color: #111;
}

.ae-stock-summary__item--in strong {
    color: #2e7d32;
}

.ae-stock-summary__item--out strong {
    color: #b71c1c;
}

.single-newsroom_posts .ae-single-wrap{
    margin-top:3rem;
}

/* ── 2026-06-19 | Product grid — responsive breakpoints ─────────────────── */

/* ── Product grid base: force grid, kill WooCommerce floats ─────────────── */
/* .woocommerce ul.products,
ul.products {
    display: grid !important;
    float: none !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
}
.woocommerce ul.products li.product,
ul.products li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-4 li.product {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    margin: 0 !important;
} */

/* Tablet landscape (≤ 1199px): 3 columns */
/* @media (max-width: 1199px) {
    .woocommerce ul.products,
    ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
} */

/* Tablet portrait (≤ 900px): 2 columns, shorter image */
@media (max-width: 1024px) {
    .inr-cat-list ul.products,
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    .products .product {
        padding: 24px !important;
    }
    .products .product .product-image-wrapper,
    .products .product .product-image-wrapper a {
        height: 260px !important;
    }
}

/* Mobile (≤ 767px): 1 column product grid + stacked filter ─────────── */
@media (max-width: 767px) {

    /* Product grid */
    .inr-cat-list ul.products,
    ul.products {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .inr-cat-list ul.products li.product,
    ul.products li.product {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .products .product {
        padding: 16px !important;
    }
    .products .product .product-image-wrapper,
    .products .product .product-image-wrapper a {
        height: 240px !important;
    }
    .product-info-wrapper a .product-title-wrapper .woocommerce-loop-product__title {
        font-size: 14px !important;
    }
    .product-info-wrapper .product-price-wrapper .price {
        font-size: 14px !important;
    }
    .product-actions-wrapper .button,
    .product-actions-wrapper .add_to_cart_button,
    .product-actions-wrapper .product_type_variable {
        font-size: 13px !important;
        height: 36px !important;
    }

    /* Filter: stack dropdowns vertically */
   
}

/* ── 2026-06-19 | Sale: Color of the Year — Column order fixes ───────────
   Body class ae-page-coty is added via PHP body_class filter (slug-based).
   Two editorial 2-col sections have image/text swapped vs the reference.
   Target: .ae-page-coty scopes to this page only — no element IDs used.
──────────────────────────────────────────────────────────────────────────── */

/* "An Audioengine Tradition": image is currently the LAST column — pull it first */
.ae-page-coty .elementor-section:nth-of-type(3) > .elementor-container > .elementor-column:last-child {
    order: -1;
}
.ae-page-coty .elementor-section:nth-of-type(3) > .elementor-container > .elementor-column:first-child {
    --padding-left: 126px !important;
    --padding-right: 0px !important;
}

/* "Your Votes, Your Color": image is currently the FIRST column — push it last */
.ae-page-coty .elementor-section:nth-of-type(5) > .elementor-container > .elementor-column:first-child {
    order: 1;
}
.ae-page-coty .elementor-section:nth-of-type(5) > .elementor-container > .elementor-column:last-child {
    order: -1;
    --padding-left: 0px !important;
    --padding-right: 126px !important;
}

/* Mobile: reset stacked layout */
@media (max-width: 767px) {
    .ae-page-coty .elementor-section:nth-of-type(3) > .elementor-container > .elementor-column,
    .ae-page-coty .elementor-section:nth-of-type(5) > .elementor-container > .elementor-column {
        order: unset;
        --padding-left: 0px !important;
        --padding-right: 0px !important;
    }
}

/* ==========================================================
   BEGIN: CATEGORY PRODUCTS RESPONSIVE REFACTOR - 2026-06-19
   Shortcode: [category_products category="speakers" filter="true"]
   Scope root: .cpg-section  (unique to category_products — not shared with featured_products)

   CSS source load order:
     1. frontend.min.css (Elementor) — global resets
     2. theme.css        — filter overrides with !important (READ-ONLY, other developer)
     3. product-filter.css — filter base styles, no !important
     4. fpg_print_styles() inline <style> — #cpg-1 ID-scoped card/grid base styles (1,x,x)
     5. custom-css.css   — this file, loaded last

   !important is used ONLY where required by the above sources:
     A) Where theme.css uses !important → must counter with higher-spec !important
     B) Where fpg_print_styles() uses ID selectors → class selectors cannot beat (1,x,x) without !important
     All other rules use plain specificity.

   Specificity wins per critical property:
     flex-wrap:  .cpg-section .ae-product-filter .ae-product-filter__inner (0,3,0) > theme.css (0,2,0)
     min-width:  .cpg-section .ae-product-filter .ae-filter-dropdown .ae-filter-dropdown__toggle (0,4,0) > theme.css (0,3,0)
     max-width:  same (0,4,0) > theme.css (0,3,0)
     :hover/:focus min/max-width: explicit (0,5,0) rule > theme.css (0,4,0)
     nth-child(5): (0,5,0) > theme.css (0,4,0)
     grid columns: class + !important > inline #cpg-1 (1,1,0) without !important

   Layout targets:
     ≤1260px:           filter 3-col [F1][F2][F3] / [F4][F5][Reset] / [Price—full]
     ≤991px:            filter 2-col [F1][F2] / [F3][F4] / [F5][Reset] / [Price—full]
     768px–425px:       filter stays 2-col; product grid switches to 1-col at ≤767px
     ≤424px:            filter 1-col full-width stacked, 44px touch targets
========================================================== */
@media (max-width: 1650px) {
    .inr-cat-list .child-category-hero__col {
        padding-right: 4rem;
    }
    .inr-cat-list .inr-hero-banner {
        min-height: auto;
        padding-left: 0px;
        padding-right: 0px;
        gap: 0;
    }
    .inr-cat-list .inr-hero-banner > .e-con-boxed {
        padding: 80px 30px;
    }
    .inr-cat-list .inr-hero-banner .elementor-widget-heading h1,
    .inr-cat-list .inr-hero-banner .elementor-widget-heading .elementor-heading-title,
    .inr-cat-list .inr-hero-banner .child-category-hero__title,
    .inr-cat-list .inr-hero-banner .child-category-hero__title h1 {
        font-size: 55px!important;
        line-height: 1.2;
    }
    .inr-cat-list .inr-hero-banner .elementor-widget-heading {
        padding-bottom: 0!important;
    }
}

@media (max-width: 1400px) {
    .inr-cat-list .elementor-102562 > .e-con.e-parent {
        margin-top: 12em;
    }
    .inr-cat-list .site-main {
        overflow-x: hidden;
    }
}
@media (max-width: 1160px) {
   .inr-cat-list .inr-hero-banner.fifty-fifty-banner-wrapper {
        flex-direction: column-reverse;
        gap: 0;
        min-height: fit-content!important;
        justify-content: flex-end;
    }
    .inr-cat-list .inr-hero-banner.fifty-fifty-banner-wrapper .fifty-fifty-banner-right-video {
        width: 100% !important;
        min-height: fit-content !important;
    }
    .inr-cat-list .inr-hero-banner.fifty-fifty-banner-wrapper .fifty-fifty-banner-right-video .banner-right-video-block {
        position: relative!important;
    }
    .inr-cat-list .inr-hero-banner.fifty-fifty-banner-wrapper .fifty-fifty-banner-right-video .banner-right-video-block iframe {
        position: relative!important;
        top: 0 !important;
        left: 0 !important;
        transform: none!important;
        width: 100% !important;
        height: 100% !important;
    }
    .inr-cat-list .inr-hero-banner.fifty-fifty-banner-wrapper .fifty-fifty-banner-left-content {
        width: 100% !important;
        padding-top: 60px;
    }
    .inr-cat-list .inr-hero-banner.fifty-fifty-banner-wrapper .fifty-fifty-banner-left-content .floating-banner-title {
        padding-bottom: 20px;
    }
    .inr-cat-list .inr-hero-banner.fifty-fifty-banner-wrapper .fifty-fifty-banner-left-content h1 {
        font-size: 50px;
        line-height: 1.2;
    }
}
/* ══════════════════════════════════════════════════════════
   WIDE TABLET / SMALL DESKTOP — max-width: 1260px
   Filter switches to 3-col wrap to prevent overflow below 1260px.
══════════════════════════════════════════════════════════ */

@media (max-width: 1260px) {

    .inr-cat-list .product-listing-wrapper {
        padding: 20px 0;
    }

    /* ── Filter Area ──────────────────────────────────────────────────── */
    .cpg-section .ae-product-filter {
        overflow-x: visible!important;
        max-width: 100%;
    }

    /* CORE FIX — (0,3,0) beats theme.css (0,2,0) flex-wrap: nowrap !important */
    .cpg-section .ae-product-filter .ae-product-filter__inner {
        flex-wrap: wrap !important;
        gap: 0.5rem;
        max-width: 100%;
    }

    /* Filter label — full-width row */
    .cpg-section .ae-product-filter .ae-product-filter__label {
        flex: 1 1 100%;
    }

    /* Dropdowns — 3-column grid */
    .cpg-section .ae-product-filter .ae-filter-dropdown {
        flex: 1 1 calc(33.333% - 0.5rem);
        min-width: 0;
    }

    /* Toggle width fix — (0,4,0) beats theme.css (0,3,0) min-width/max-width !important */
    .cpg-section .ae-product-filter .ae-filter-dropdown .ae-filter-dropdown__toggle {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* :hover/:focus — (0,5,0) beats theme.css (0,4,0) */
    .cpg-section .ae-product-filter .ae-filter-dropdown .ae-filter-dropdown__toggle:hover,
    .cpg-section .ae-product-filter .ae-filter-dropdown .ae-filter-dropdown__toggle:focus {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* nth-child(5) — Ideal Listening Space — (0,5,0) beats theme.css (0,4,0) */
    .cpg-section .ae-product-filter .ae-filter-dropdown:nth-child(5) .ae-filter-dropdown__toggle {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Reset — same width as one dropdown column */
    .cpg-section .ae-product-filter .ae-product-filter__reset {
        flex: 1 1 calc(33.333% - 0.5rem);
        min-width: 0;
    }

    /* ── Price Slider — full-width row below all dropdowns ───────────── */
    .cpg-section .ae-filter-price {
        flex: 1 1 100%;
        order: 10;
        margin-left: 0;
    }

    .cpg-section .ae-filter-price__slider {
        flex: 1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .cpg-section .ae-filter-price__label {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ── Filter Area ──────────────────────────────────────────────────── */
    .cpg-section .ae-product-filter {
        padding-left: 16px!important;
        padding-right: 16px!important;
    }

    /* ── Product Grid ─────────────────────────────────────────────────── */
    .cpg-section .fpg-grid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .home-cs-slider-wrapper > .e-con-inner,
    .comp-serv-info > .e-con-inner {
        padding-left: 0!important;
        padding-right: 0!important;
    }
}

/* ── Color of the Year — 1024px ──────────────────────────────────────── */

@media (max-width: 1024px) {

    /* ── Section headings ──────────────────────────────────────────────── */
    /* .inr-cat-list .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important;
    } */

    /* ── Container inner padding ───────────────────────────────────────── */
    .inr-cat-list .e-con > .e-con-inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .inr-cat-list .e-con > .e-con-inner .e-con > .e-con-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .inr-cat-list .e-con > .e-con-inner .e-con > .e-con-inner .e-con > .e-con-inner {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .inr-cat-list .swiper-slide.blog-slide {
        padding-left: 3rem;
        padding-right: 3rem;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }
    .inr-cat-list .swiper-slide.blog-slide h3 {
        font-size: 23px;
        line-height: 1.3;
    }
    .inr-cat-list .swiper-slide.blog-slide .blog-excerpt {
        margin-bottom: 10px;
    }
    .inr-cat-list .swiper-slide.blog-slide .read-more {
        margin-bottom: 15px;
    }
}

/* ==========================================================
   BEGIN: CATEGORY PRODUCTS RESPONSIVE REFACTOR - 2026-06-19

   TABLET — max-width: 1023px & max-width: 991px
   Overrides 1260px 3-col → 2-col at this breakpoint.
========================================================== */

@media (max-width: 1023px) {
    .inr-cat-list .inr-hero-banner {
        height: 55vh!important;
    }
    .inr-cat-list .inr-hero-banner .elementor-widget-heading h1,
    .inr-cat-list .inr-hero-banner .elementor-widget-heading .elementor-heading-title,
    .inr-cat-list .elementor-widget-heading h1,
    .inr-cat-list .inr-hero-banner .elementor-widget-heading h1 {
        font-size: 45px!important;
    }
}

@media (max-width: 991px) {

    /* ── Section ──────────────────────────────────────────────────────── */
    /* !important required: fpg_print_styles() sets #cpg-1.fpg-section { padding: 48px 0 } (1,1,0) */
    .cpg-section {
        padding: 32px 0 !important;
    }

    /* ── Filter Area ──────────────────────────────────────────────────── */
    .cpg-section .ae-product-filter {
        overflow-x: visible;
        max-width: 100%;
    }

    /* CORE FIX — (0,3,0) beats theme.css (0,2,0) flex-wrap: nowrap !important */
    .cpg-section .ae-product-filter .ae-product-filter__inner {
        flex-wrap: wrap !important;
        gap: 0.5rem;
        max-width: 100%;
    }

    /* Filter label — full-width row before the 2-col grid */
    .cpg-section .ae-product-filter .ae-product-filter__label {
        flex: 1 1 100%;
    }

    /* Dropdowns — 2-column grid (50% each) */
    .cpg-section .ae-product-filter .ae-filter-dropdown {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
    }

    /* Toggle width fix — (0,4,0) beats theme.css (0,3,0) min-width/max-width !important */
    .cpg-section .ae-product-filter .ae-filter-dropdown .ae-filter-dropdown__toggle {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Explicit :hover/:focus — (0,5,0) beats theme.css (0,4,0) min-width/max-width !important */
    .cpg-section .ae-product-filter .ae-filter-dropdown .ae-filter-dropdown__toggle:hover,
    .cpg-section .ae-product-filter .ae-filter-dropdown .ae-filter-dropdown__toggle:focus {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* nth-child(5) — Ideal Listening Space — (0,5,0) beats theme.css (0,4,0) min-width: 214px !important */
    .cpg-section .ae-product-filter .ae-filter-dropdown:nth-child(5) .ae-filter-dropdown__toggle {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Reset — pairs with last dropdown in the 2-col grid */
    .cpg-section .ae-product-filter .ae-product-filter__reset {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
        height: 60px !important;
    }

    /* ── Price Slider ─────────────────────────────────────────────────── */
    /* Pushes to its own full-width row below the 2-col filter grid */
    .cpg-section .ae-filter-price {
        flex: 1 1 100%;
        order: 10;
        margin-left: 0;
    }

    .cpg-section .ae-filter-price__slider {
        flex: 1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .cpg-section .ae-filter-price__label {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .inr-cat-list .inr-hero-banner.child-category-hero {
        width: 100%;
        background-color: #333;
        position: relative;
        min-height: fit-content!important;
        height: auto!important;
        border-bottom: 1px solid #cecece;
        display: flex;
        flex-direction: column;
    }
    .inr-cat-list .inr-hero-banner.child-category-hero.ae-product-banner-rt-img-lt-cnt {
        flex-direction: column-reverse;
    }
    .inr-cat-list .child-category-hero__media-col {
        width: 100%!important;
        position: relative;
        background-position: 0 100%!important;
        background-size: 82%;
    }
    .inr-cat-list .inr-hero-banner.ae-product-banner-rt-img-lt-cnt .child-category-hero__media-col {
        background-position: 100% 100%!important;
        background-size: 75%;
    }
    .inr-cat-list .child-category-hero__img-container {
        transform: translate(-50%, 5%);
        position: relative;
        width: 70%;
        padding: 0;
        right: auto;
        bottom: 0px;
        left: 50%;
        z-index: 20;
    }    
    .inr-cat-list .inr-hero-banner.ae-product-banner-rt-img-lt-cnt .child-category-hero__img-container {
        transform: translate(-50%, 15%);
    }
    .inr-cat-list .inr-hero-banner.ae-product-banner-lt-img-rt-cnt .child-category-hero__img-container {
        transform: translate(-50%, 30%);
        width: 100%;
    }
    .inr-cat-list .inr-hero-banner.ae-product-banner-lt-img-rt-cnt.ae-product-banner-left-img-r-cnt .child-category-hero__img-container {
        transform: translate(-50%, 20%);
        width: 70%!important;
    }
    .inr-cat-list .child-category-hero__img img {
        max-width: 100%;
        background-size: contain;
        width: 100%;
        object-fit: contain;
        aspect-ratio: 4 / 3;
    }
    .inr-cat-list .child-category-hero__col {
        display: flex;
        flex-direction: row !important;
        justify-content: center;
        width: 100%;
        background-color: #f4f4f4;
        padding: 60px 0 0;
        text-align: left;
        flex-grow: 1;
        position: relative;
        z-index: 10;
        flex-wrap: nowrap;
        line-height: 1.5;
    }
    .inr-cat-list .child-category-hero__intro {
        text-align: left;
        max-width: 560px;
        width: 100%;
        padding: 25px 25px 35px;
        gap: 1rem;
    }
    .inr-cat-list .inr-hero-banner .child-category-hero__title,
    .inr-cat-list .inr-hero-banner .child-category-hero__title h1 {
        font-size: 45px!important;
        color: #333!important;
        transition-duration: .25s;
        transition-timing-function: ease;
        transition-property: color;
    }
    .inr-cat-list .inr-hero-banner .child-category-hero__title h1 br {
        display: none;
    }
    .inr-cat-list .child-category-hero__text {
        color: #333!important;
        transition-duration: .25s!important;
        transition-timing-function: ease!important;
        transition-property: color!important;
        font-weight: 300;
        font-size: 14.7px;
        line-height: 1.5;
    }
    .inr-cat-list .inr-hero-banner.ae-product-banner-rt-img-lt-cnt .child-category-hero__img-container {
        width: 80%;
    }
    .inr-cat-list .inr-hero-banner.ae-product-banner-left-img-r-cnt .child-category-hero__img-container {
        width: 100%;
    }
    .inr-cat-list .inr-hero-banner.child-category-hero.ae-product-banner-sm-size .child-category-hero__img-container {
        width: 70%;
    }
    .inr-cat-list .inr-hero-banner .shop-hero-desc p,
    .inr-cat-list .inr-hero-banner .shop-hero-desc {
        font-size: 17px!important;
        line-height: 1.7em!important;
    }
}

/* ==========================================================
   END: CATEGORY PRODUCTS RESPONSIVE REFACTOR - 2026-06-19
========================================================== */

@media (max-width: 768px) {
    .inr-cat-list .e-con > .e-con-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ==========================================================
   BEGIN: CATEGORY PRODUCTS RESPONSIVE REFACTOR - 2026-06-19

   SMALL TABLET / LARGE MOBILE — max-width: 767px
   Filter stays 2-col (inherits 991px rule). Only layout/card
   changes that should kick in below 768px live here.
========================================================== */

@media (max-width: 767px) {

    /* ── Section ──────────────────────────────────────────────────────── */
    /* !important required: fpg_print_styles() inline #cpg-1.fpg-section (1,1,0) */
    .cpg-section {
        padding: 24px 0 !important;
    }

    /* ── Price Slider ─────────────────────────────────────────────────── */
    /* !important insurance: product-filter.css may re-declare at this breakpoint */
    .cpg-section .ae-filter-price {
        flex: 1 1 100% !important;
        order: 10;
        margin-left: 0;
    }

    .cpg-section .ae-filter-price__slider {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* ── Product Grid ─────────────────────────────────────────────────── */
    .inr-cat-list #cpg-1 .fpg-grid {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    /* !important required: fpg_print_styles() inline #cpg-1 .fpg-grid { grid-template-columns: repeat(2,1fr) } (1,1,0) */
    .cpg-section .fpg-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* ── Product Card ─────────────────────────────────────────────────── */
    /* !important required: fpg_print_styles() inline #cpg-1 .fpg-card__body { padding: 16px 18px 8px } (1,1,0) */
    .cpg-section .fpg-card__body {
        padding: 12px 14px 8px !important;
    }

    /* !important required: fpg_print_styles() inline #cpg-1 .fpg-card__foot { padding: 8px 18px 18px } (1,1,0) */
    .cpg-section .fpg-card__foot {
        padding: 6px 14px 14px !important;
    }

    /* ── Product Price ────────────────────────────────────────────────── */
    .cpg-section .fpg-card__price-wrap {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    /* ── Compare Button (.woosc-btn inside .fpg-card__img-wrap) ─────────── */
    /* No override needed — compare button is positioned absolutely, renders fine at mobile */

    /* ── Product Action Button ────────────────────────────────────────── */
    /* !important required: fpg_print_styles() inline #cpg-1 .fpg-card__btn { display: inline-block } (1,1,0) */
    .cpg-section .fpg-card__btn {
        display: block !important;
        width: 100%;
        text-align: center;
    }

    /* ── Color Swatches ───────────────────────────────────────────────── */
    /* !important required: fpg_print_styles() inline #cpg-1 .fpg-swatch { width: 18px; height: 18px } (1,1,0) */
    .cpg-section .fpg-swatch {
        width: 22px !important;
        height: 22px !important;
    }
    .single-product .product.type-product .prod-hero > .e-con-boxed,
    .single-product .product.type-product .prod-hero > .e-con-boxed > .e-con-inner {
        padding-left: 0;
        padding-right: 0;
    }
    .single-product .product.type-product .prod-hero .product-details-right-content > .e-con-inner {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .single-product .woo-variation-gallery-container .woo-variation-gallery-slider-wrapper .slick-slider .slick-list,
    .single-product .woo-variation-gallery-container .woo-variation-gallery-slider-wrapper .slick-slider .slick-list .slick-slide,
    .single-product .slick-slider .slick-slide,
    .single-product .woo-variation-gallery-container .woo-variation-gallery-slider-wrapper .slick-slider .slick-list .slick-slide > div,
    .single-product .woo-variation-gallery-container .woo-variation-gallery-slider-wrapper .slick-slider .slick-list .slick-slide .wvg-gallery-image,
    .single-product .woo-variation-gallery-container .woo-variation-gallery-slider-wrapper .slick-slider .slick-list .slick-slide .wvg-gallery-image > div,
    .single-product .woo-variation-gallery-container .woo-variation-gallery-slider-wrapper .slick-slider .slick-list .slick-slide .wvg-gallery-image > div > .wvg-single-gallery-image-container {
        height: auto!important;
    }
    body.single-product .elementor-widget-woocommerce-product-title .product_title, body.single-product .elementor-page-title .product_title, body.single-product .elementor-widget-heading .product_title {
        font-size: 28px !important;
        line-height: 1.1;
    }
    .single-product .prod-mod-intro-sec .prod-mod-intro__l-col {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .single-product .prod-mod-intro-sec .prod-mod-info__group {
        gap: 0!important;
        padding: 0;
    }
    .single-product .prod-mod-intro-sec > .e-con-inner {
        padding: 50px 0!important;
    }
    .single-product .prod-mod-intro-sec .prod-mod-intro {
        padding-top: 0px!important;
        padding-bottom: 50px!important;
    }
    .single-product .prod-mod-sec .elementor-widget-html .prod-mod:nth-child(even) .prod-mod__l-col {
        padding: 0 10px;
    }
    .single-product .shop-owner-left {
        padding-left: 0;
        padding-right: 0;
    }
    .single-product .shop-owner-left h3 br {
        display: none;
    }
    .inr-cat-list .elementor-102562 > .e-con.e-parent {
        margin-top: 10em;
    }
    .inr-cat-list .prod-mod-sec .elementor-widget-html .prod-mod {
        gap: 20px;
        flex-direction: column!important;
    }

    .inr-cat-list .child-category-hero__img-container {
        transform: translate(-50%, 7%);
    }
    .inr-cat-list .child-category-hero__img-container {
        width: 80%;
    }
    .inr-cat-list .inr-hero-banner .elementor-widget-heading h1,
    .inr-cat-list .inr-hero-banner .elementor-widget-heading .elementor-heading-title,
    .inr-cat-list .elementor-widget-heading h1 {
        font-size: 35px!important;
    }
    .inr-cat-list .inr-hero-banner > .e-con-boxed {
        padding: 50px 25px;
    }
    .inr-cat-list .inr-hero-banner .shop-arrow-wrap {
        width: 150px;
        height: 37px;
    }
    .inr-cat-list .inr-hero-banner .shop-arrow-link svg:first-child {
        height: 37px;
    }
    .inr-cat-list .inr-hero-banner .shop-arrow-wrap .animated-arrow svg {
        width: 25px !important;
        height: 25px !important;
    }
}

@media (max-width: 540px) {
    .inr-cat-list #cpg-1 .fpg-grid {
        width: 100%;
    }
    /* .inr-cat-list .inr-hero-banner h1 {
        font-size: 32px!important;
    } */
    .inr-cat-list .swiper-slide.blog-slide {
        padding-right: 2rem;
        padding-left: 2rem;
    }
    .inr-cat-list .child-category-hero__img-container {
        transform: translate(-50%, 15%);
    }
    .inr-cat-list .child-category-hero__col {
        padding-top: 40px;
    }
    .inr-cat-list .inr-hero-banner .elementor-widget-heading h1,
    .inr-cat-list .inr-hero-banner .elementor-widget-heading .elementor-heading-title,
    .inr-cat-list .inr-hero-banner .child-category-hero__title,
    .inr-cat-list .inr-hero-banner .child-category-hero__title h1 {
        font-size: 30px!important;
    }
    .inr-cat-list .child-category-hero__intro {
        gap: .8rem;
    }
    .inr-cat-list .inr-hero-banner .shop-hero-desc,
    .inr-cat-list .inr-hero-banner .shop-hero-desc p {
        font-size: 15px!important;
        line-height: 1.5em!important;
    }
    .inr-cat-list .inr-hero-banner.ae-product-banner-lt-img-rt-cnt.ae-product-banner-left-img-r-cnt .child-category-hero__img-container {
        transform: translate(-50%, 30%);
        width: 100%!important;
    }
}

/* ==========================================================
   END: CATEGORY PRODUCTS RESPONSIVE REFACTOR - 2026-06-19
========================================================== */


/* ==========================================================
   BEGIN: CATEGORY PRODUCTS RESPONSIVE REFACTOR - 2026-06-19

   SMALL MOBILE — max-width: 419px
   Filter switches from 2-col to 1-col full-width stack.
   product-filter.css sets .ae-filter-dropdown { flex: 1 1 calc(50% - 0.5rem) }
   at 767px — overridden here with !important at (0,4,0).
========================================================== */

@media (max-width: 419px) {

    /* ── Filter Area ──────────────────────────────────────────────────── */
    .cpg-section .ae-product-filter .ae-product-filter__inner {
        flex-wrap: wrap !important;
        gap: 0.5rem;
    }

    .cpg-section .ae-product-filter .ae-product-filter__label {
        flex: 1 1 100%;
    }

    /* 1-col stack — overrides 991px 50% rule and product-filter.css 767px 2-col rule */
    .cpg-section .ae-product-filter .ae-filter-dropdown {
        flex: 1 1 100% !important;
        min-width: 0;
    }

    /* Toggle — 44px min-height meets touch target standard */
    .cpg-section .ae-product-filter .ae-filter-dropdown .ae-filter-dropdown__toggle {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
        min-height: 44px;
    }

    /* :hover/:focus — (0,5,0) beats theme.css (0,4,0) */
    .cpg-section .ae-product-filter .ae-filter-dropdown .ae-filter-dropdown__toggle:hover,
    .cpg-section .ae-product-filter .ae-filter-dropdown .ae-filter-dropdown__toggle:focus {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* nth-child(5) — Ideal Listening Space — (0,5,0) beats theme.css (0,4,0) */
    .cpg-section .ae-product-filter .ae-filter-dropdown:nth-child(5) .ae-filter-dropdown__toggle {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Reset — full-width, touch-friendly */
    .cpg-section .ae-product-filter .ae-product-filter__reset {
        flex: 1 1 100% !important;
        min-height: 44px;
        min-width: 0;
    }
}

/* ==========================================================
   END: CATEGORY PRODUCTS RESPONSIVE REFACTOR - 2026-06-19
========================================================== */


/* ==========================================================
   BEGIN: COLOR OF THE YEAR PAGE — inr-cat-list fpg-grid responsive
   Scope: body.inr-cat-list
   Product grid: .fpg-grid (same CSS Grid architecture as .cpg-section)
   Shortcodes on this page:
     [featured_products]  → .fpg-section .fpg-grid (no .cpg-section)
     [category_products]  → .fpg-section.cpg-section .fpg-grid
   fpg_print_styles() inline styles ALREADY handle:
     base grid (display:grid, gap:1.5rem, repeat(N,1fr))
     ≤1024px → repeat(2,1fr)  (1,1,0 specificity)
     ≤600px  → 1fr            (1,1,0 specificity)
   This block adds what fpg_print_styles() does NOT provide for
   [featured_products] sections (which lack .cpg-section):
     ≤767px  → 1fr + card padding + button + swatches
   !important is required to beat fpg_print_styles() ID-scoped
   rules (1,x,x) — same reason as .cpg-section block above.
   2026-06-19
========================================================== */

@media (max-width: 767px) {

    /* ── Section padding ────────────────────────────────────────────────── */
    /* !important beats fpg_print_styles() #uid.fpg-section { padding: 48px 0 } (1,1,0) */
    .inr-cat-list .fpg-section {
        padding: 24px 0 !important;
    }

    /* ── Product Grid — 1-col ──────────────────────────────────────────── */
    /* !important beats fpg_print_styles() #uid .fpg-grid { grid-template-columns: repeat(2,1fr) } (1,1,0) */
    .inr-cat-list .fpg-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* ── Product Card ──────────────────────────────────────────────────── */
    /* !important beats fpg_print_styles() #uid .fpg-card__body { padding: 16px 18px 8px } (1,1,0) */
    .inr-cat-list .fpg-card__body {
        padding: 12px 14px 8px !important;
    }

    /* !important beats fpg_print_styles() #uid .fpg-card__foot { padding: 8px 18px 18px } (1,1,0) */
    .inr-cat-list .fpg-card__foot {
        padding: 6px 14px 14px !important;
    }

    /* ── Product Price ──────────────────────────────────────────────────── */
    .inr-cat-list .fpg-card__price-wrap {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    /* ── Product Action Button ──────────────────────────────────────────── */
    /* !important beats fpg_print_styles() #uid .fpg-card__btn { display: inline-block } (1,1,0) */
    .inr-cat-list .fpg-card__btn {
        display: block !important;
        width: 100%;
        text-align: center;
    }

    /* ── Color Swatches ──────────────────────────────────────────────────── */
    /* !important beats fpg_print_styles() #uid .fpg-swatch { width: 18px; height: 18px } (1,1,0) */
    .inr-cat-list .fpg-swatch {
        width: 22px !important;
        height: 22px !important;
    }
}

/* ==========================================================
   END: COLOR OF THE YEAR PAGE — inr-cat-list fpg-grid responsive
========================================================== */
/* ═══════════════════════════════════════════════════════════════════════
   CHECKOUT — full-width order block over a two-column layout
   Body class `ae-checkout` is injected by a plugin on the checkout page.

   Top   : .ae-order-items, spanning both columns — #order_review_heading, the cart
           listing, the totals, and the coupon and gift card boxes placed after them
           by the script in functions-additions.php.
   Left  : payment mode selector + billing / shipping (#customer_details)
   Right : #order_review — the payment section and its button (sticky)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Layout grid ──────────────────────────────────────────────────────── */
@media (min-width: 1025px) {

    body.ae-checkout form.checkout.woocommerce-checkout .checkout-form-inner-wrapper {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        column-gap: 25px;
        row-gap: 24px;
        align-items: start;
    }

    /*
     * TWO COLUMNS, ONE ROW
     *
     *   [ .ae-checkout-main            ] [ .shipping-details-col ]
     *     cart listing                     mode selector
     *     billing / shipping               payment section
     *
     * The cart and the address form are nested together in .ae-checkout-main, so the grid
     * holds two items rather than four. That is what lets the sidebar be a single item
     * running the full height of the left column: as two items on two rows, the selector
     * sat level with the cart and the payment section level with the form, leaving a
     * cart's height of empty column between them.
     *
     * It also means no row arithmetic. The update-order-review notice checkout-us.js
     * prepends into the wrapper is simply a third item that takes the row above, and
     * nothing below it has to know whether it is there.
     */
    body.ae-checkout form.checkout.woocommerce-checkout .checkout-form-inner-wrapper > .woocommerce-NoticeGroup {
        grid-column: 1 / -1;
    }

    /*
     * Pinned to their tracks rather than auto-placed, because in Bolt mode the address
     * form is hidden outright (aecb-checkout.css, "Hidden address form"). It is nested
     * now, so hiding it can no longer strand the sidebar — but pinning states the
     * intended pairing rather than leaving it to the order children happen to be in.
     */
    body.ae-checkout form.checkout.woocommerce-checkout .checkout-form-inner-wrapper .ae-checkout-main {
        grid-column: 1;
        min-width: 0;
    }

    body.ae-checkout form.checkout.woocommerce-checkout .checkout-form-inner-wrapper .shipping-details-col {
        grid-column: 2;
    }

    /* The cart's own bottom margin is what separates it from the address form beneath it
       in the stacked layout; here the flex gap on .ae-checkout-main does that. */
    body.ae-checkout form.checkout.woocommerce-checkout .checkout-form-inner-wrapper .ae-order-items {
        margin-bottom: 0;
    }

    /* Stacks the cart above the form and spaces them by the same 24px the grid uses
       between rows, so the left column reads as evenly spaced as the sidebar. */
    body.ae-checkout form.checkout.woocommerce-checkout .ae-checkout-main {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
body.ae-checkout form.checkout.woocommerce-checkout .checkout-form-inner-wrapper .shipping-form-col .col2-set {
    display: flex!important;
    flex-direction: column!important;
    column-gap: 20px!important;
    row-gap: 0px!important;
    width: 100%!important;
        float: none!important;

}
body.ae-checkout form.checkout.woocommerce-checkout .checkout-form-inner-wrapper .shipping-form-col .col2-set .col-1{
    margin-bottom: 25px!important;
}
body.ae-checkout form.checkout.woocommerce-checkout .checkout-form-inner-wrapper .shipping-form-col .col2-set .col-1,
body.ae-checkout form.checkout.woocommerce-checkout .checkout-form-inner-wrapper .shipping-form-col .col2-set .col-2{
    width: 100%!important;
    float: none!important;
}

   
    /* body.ae-checkout #customer_details {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 100%;
        float: none;
    }

  
    body.ae-checkout #order_review_heading {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    body.ae-checkout #order_review {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        float: none;
        position: sticky;
        top: 24px;
    }

 
    body.ae-checkout #customer_details .col2-set {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        float: none !important;
    }

    body.ae-checkout #customer_details .col2-set .col-1,
    body.ae-checkout #customer_details .col2-set .col-2 {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        float: none !important;
    }

    body.ae-checkout #customer_details .col2-set .col-2 {
        margin-top: 28px;
    } */
}

/* ── Left column: billing / shipping panels ───────────────────────────── */
body.ae-checkout #customer_details .col-1,
body.ae-checkout #customer_details .col-2 {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-lighter, #e8e8e8);
    border-radius: 10px;
    padding: 28px 28px 8px;
}

body.ae-checkout #customer_details h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #D4D4D4;
    color: var(--color-dark, #1a1a1a);
}

/* Form fields */
body.ae-checkout .woocommerce-billing-fields .form-row,
body.ae-checkout .woocommerce-shipping-fields .form-row,
body.ae-checkout .woocommerce-additional-fields .form-row {
    margin-bottom: 16px;
}

body.ae-checkout .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-gray-dark, #555);
}

body.ae-checkout .form-row input.input-text,
body.ae-checkout .form-row textarea,
body.ae-checkout .select2-container .select2-selection,
body.ae-checkout .form-row .select2-selection__rendered {
    width: 100%;
    min-height: 53px;
    line-height: 48px;
    border: 1px solid var(--color-gray-light, #ccc);
    border-radius: 8px;
    padding: 0 14px;
    font-size: 15px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.ae-checkout .form-row .select2-selection__rendered{
    border: none!important;
}

body.ae-checkout .form-row textarea {
    line-height: 1.5;
    padding: 12px 14px;
    min-height: 90px;
}

body.ae-checkout .form-row input.input-text:focus,
body.ae-checkout .form-row textarea:focus,
body.ae-checkout .select2-container--open .select2-selection {
    border-color: var(--color-primary, #b22222);
    box-shadow: 0 0 0 3px rgba(178, 34, 34, .12);
    outline: none;
}

/* ── Order block heading and payment card ─────────────────────────────────
   The heading sits at the top of .ae-order-items now, not in the right column. The
   selector is an id, so it follows without needing to change. */
body.ae-checkout #order_review_heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-dark, #1a1a1a);
    margin: 0 0 12px;
}

/* No background of its own. #order_review sits inside .shipping-details-col, which is
   already the white card — a second fill here painted a grey band (--color-gray-bg is
   #f4f4f4) behind the gateway rows and the Affirm line, so the panel read as two stacked
   surfaces instead of one. The border is 0 and the padding 0, so the radius has nothing
   left to round; all three go with it. */
body.ae-checkout #order_review {
    background: none;
}

/* Product / totals table
   ---------------------------------------------------------------------------
   The cart listing lives in .ae-order-items now (full width, above the columns) and
   only the totals are left inside #order_review, so the rules covering the item rows
   have to reach both. :is() rather than a second selector line because it keeps the
   specificity identical to the plain #order_review version these rules had before —
   nothing else in the cascade shifts. */
body.ae-checkout :is( #order_review, .ae-order-items ) .woocommerce-checkout-review-order-table {
    width: 100%;
    border: none;
    margin: 0 0 18px;
    background: transparent;
}

body.ae-checkout :is( #order_review, .ae-order-items ) .woocommerce-checkout-review-order-table thead th {
    border: none;
    border-bottom: 2px solid var(--color-gray-lighter, #e8e8e8);
    padding: 20px 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-gray, #888);
}

body.ae-checkout :is( #order_review, .ae-order-items ) .woocommerce-checkout-review-order-table tbody td {
    border: none;
    border-bottom: 1px solid var(--color-gray-lighter, #e8e8e8);
    padding: 14px 12px;
    font-size: 14px;
    vertical-align: middle;
    background: transparent;
}

/* ── Cart listing: one column each ────────────────────────────────────────
   Thumbnail, product, price, quantity, subtotal — the same columns the cart page
   uses, so the customer reads one table twice rather than two arrangements of the
   same numbers.

   Only the product column is given no width: everything else shrink-wraps its
   contents (width:1% plus nowrap is the shrink-to-fit idiom for a table cell), which
   leaves the name all the slack and keeps the money columns from drifting apart on a
   wide screen.
   ------------------------------------------------------------------------ */

/* The containing block for the remove control, which aecb-checkout.css draws over this
   cell's top-left corner. No left padding, so the image sits flush with the table edge
   and the control lands on the image rather than beside it. */
/* position:relative is load-bearing, not cosmetic: it is the containing block the
   remove control is positioned against. Without it that control is absolute against
   the page instead of this cell and lands in the top-left corner of the document,
   which reads as "the remove button has disappeared". !important because losing this
   one silently breaks a control rather than a colour. */
body.ae-checkout .ae-order-items .product-thumbnail {
    position: relative !important;
    width: 1%;
    /* A gutter for the remove control, which sits in it rather than on the image: 20px
       for the disc and 10px of clear space before the thumbnail starts. Absolutely
       positioned boxes are placed against the padding box, so left:0 on the control
       lands at the start of this padding while the image begins after it. */
    padding-left: 30px !important;
    white-space: nowrap;
    /* Both the image and the control centre on the row, so they stay level with each
       other however tall the row grows — a product name wrapping to three lines moves
       neither out of line with the other. */
    vertical-align: middle;
}

/* The thumbnail is a woocommerce_thumbnail, whose intrinsic size is a few hundred
   pixels. Nothing else constrains it now that the old .ae-order-item__thumb rules are
   gone, so if this loses the image renders at full size and drags the column with it —
   hence !important on the width, and a max-width as a second line of defence. */
body.ae-checkout .ae-order-items .product-thumbnail img {
    display: block;
    width: 56px !important;
    max-width: 56px !important;
    height: auto !important;
    border-radius: 6px;
    box-shadow: none;
}

/* The one column that takes the slack. min-width:0 and the wrap rules are what stop a
   long unbroken product name setting the table's minimum width and pushing the money
   columns off the edge. */
body.ae-checkout .ae-order-items .product-name {
    width: auto;
    min-width: 0;
    color: var(--color-dark, #1a1a1a);
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.ae-checkout .ae-order-items .product-price,
body.ae-checkout .ae-order-items .product-quantity,
body.ae-checkout .ae-order-items .product-subtotal {
    width: 1%;
    white-space: nowrap;
}

body.ae-checkout .ae-order-items .product-price,
body.ae-checkout .ae-order-items .product-subtotal {
    text-align: right;
}

body.ae-checkout .ae-order-items .product-quantity {
    text-align: center;
}

body.ae-checkout .ae-order-items .product-subtotal {
    font-weight: 600;
}

/* The plain "× 2" fallback, shown when cart editing is off or a line is not editable. */
body.ae-checkout :is( #order_review, .ae-order-items ) .product-quantity > .product-quantity {
    color: var(--color-gray, #888);
    font-weight: 400;
}

/* Anything hooked to woocommerce_review_order_before/after_cart_contents predates the
   extra columns and emits a narrower row. Letting its cells span the table keeps them
   from pulling the real columns out of alignment. */
body.ae-checkout .ae-order-items tbody tr:not( .cart_item ) > td:only-child {
    text-align: left;
}

/* ── Cart listing: one card per item below 768px ──────────────────────────
   Five columns will not hold their shape on a phone. A thumbnail, a product name that
   wants to wrap and three money columns add up to more minimum width than the viewport
   has, and the table either overflows its card or squeezes the name into a
   one-word-per-line ribbon.

   So each row becomes a bordered card and each cell a line inside it, label on the left
   and value on the right — the pattern WooCommerce uses for its own responsive cart, so
   a customer meets the same shape here as everywhere else on the site.

   The labels are the data-title attributes review-order-items.php sets on the four
   content cells, which is what lets the header row be hidden without the numbers losing
   their meaning. ::before is applied to those four by name rather than to every cell:
   the thumbnail has no data-title, and attr() on a missing attribute yields an empty
   string, so a blanket rule would print a bare colon above every card.

   EVERY display switch carries !important, and that is not defensive habit. Three
   separate places pin this table's parts to table display, all of them !important or
   near it: theme.css ~6285, custom-css.css ~73, and the inline footer style in
   functions-additions.php ~3042. They exist to stop the totals vanishing after a coupon
   is applied, so they are not safe to delete — these selectors are simply specific
   enough to outrank them.

   768px rather than the 992px the columns stack at: between the two the panel already
   has the full viewport to itself, which is room enough for five columns.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {

    body.ae-checkout .ae-order-items {
        padding: 14px;
    }

    body.ae-checkout .ae-order-items .ae-order-items__table thead {
        display: none !important;
    }

    body.ae-checkout .ae-order-items .ae-order-items__table tbody {
        display: block !important;
        width: 100% !important;
    }

    /* ONE continuous block, not a card per item. The frame belongs to the table so the
       items read as a single list divided into rows; giving each <tr> its own border and
       a margin instead would draw a stack of separate boxes with gaps between them. */
    body.ae-checkout .ae-order-items .ae-order-items__table {
        display: block !important;
        width: 100% !important;
        border: 1px solid var(--color-gray-lighter, #e8e8e8);
    }

    /* Nothing of its own: the row is just a grouping here. The cells draw the dividing
       lines and the table draws the frame. */
    body.ae-checkout .ae-order-items .ae-order-items__table tbody tr {
        display: block !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    /* Label left, value right, on one line each. flex rather than a float so a long
       product name wraps within its own half instead of running under the label. */
    body.ae-checkout .ae-order-items .ae-order-items__table tbody td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: auto !important;
        padding: 13px 14px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--color-gray-lighter, #e8e8e8) !important;
        text-align: right !important;
        white-space: normal !important;
    }

    /* Only the very last line drops its divider — the table's own border closes the block
       there. Every other cell keeps one, including the last of each item, which is what
       separates one product from the next. */
    body.ae-checkout .ae-order-items .ae-order-items__table tbody tr:last-child td:last-child {
        border-bottom: 0 !important;
    }

    body.ae-checkout .ae-order-items .ae-order-items__table tbody td.product-name,
    body.ae-checkout .ae-order-items .ae-order-items__table tbody td.product-price,
    body.ae-checkout .ae-order-items .ae-order-items__table tbody td.product-quantity,
    body.ae-checkout .ae-order-items .ae-order-items__table tbody td.product-subtotal {
        /* min-width:0 lets the value shrink and wrap; without it a long name forces the
           row wider than the card. */
        min-width: 0;
    }

    body.ae-checkout .ae-order-items .ae-order-items__table tbody td.product-name::before,
    body.ae-checkout .ae-order-items .ae-order-items__table tbody td.product-price::before,
    body.ae-checkout .ae-order-items .ae-order-items__table tbody td.product-quantity::before,
    body.ae-checkout .ae-order-items .ae-order-items__table tbody td.product-subtotal::before {
        content: attr(data-title) ":";
        flex: 0 0 auto;
        color: var(--color-dark, #1a1a1a);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-align: left;
    }

    /* Both amounts carry weight, the way they do in the reference — they are the two
       numbers a customer checks, and at this size a normal-weight price disappears next
       to its bold label. */
    body.ae-checkout .ae-order-items .ae-order-items__table tbody td.product-price,
    body.ae-checkout .ae-order-items .ae-order-items__table tbody td.product-subtotal {
        font-weight: 700;
    }

    /* Each item opens with a tinted band holding the remove control on its own. That band
       is also what separates one product from the next in a continuous list — it reads as
       the start of a new entry without needing a gap between them.

       The image goes, as it does in WooCommerce's responsive cart — there is no column
       left to hold it beside the text, and stacked above the name it would push every
       item a thumbnail's height taller for something the product name already says. */
    body.ae-checkout .ae-order-items .ae-order-items__table tbody td.product-thumbnail {
        display: block !important;
        padding: 10px 14px !important;
        background: #f7f7f7;
        text-align: left !important;
    }

    body.ae-checkout .ae-order-items .ae-order-items__table tbody td.product-thumbnail img {
        /* display: none !important; */
        margin-left: 20px;
    }

    /* Back into the flow. It is absolutely positioned on wider screens so it can sit in
       the gutter beside the thumbnail; here the band IS its place, so the offsets and the
       centring transform have to be undone or it would hang off the top-left corner. */
    body.ae-checkout .ae-order-items .ae-order-items__table tbody td.product-thumbnail .aecb-qty__remove {
        position: static !important;
        transform: none !important;
    }

    /* The totals keep their two columns — a label and an amount fit any screen — but not
       20px of cell padding inside a 14px card. !important because the rule it overrides
       is scoped through :is( #order_review, … ), which carries an id's specificity. */
    body.ae-checkout .ae-order-items .ae-order-totals__table tfoot th,
    body.ae-checkout .ae-order-items .ae-order-totals__table tfoot td {
        padding: 10px 0 !important;
    }
}

/* ── Totals: the table spans the card, every amount sits on its right edge ──
   This replaces two per-row rules that named .cart-subtotal and .order-total only.
   The rows they missed are exactly the ones reported: the coupon discount
   (.cart-discount), the shipping choice (.shipping), the gift card row PW Gift
   Cards adds, and the tax row — which had a right-align of its own further down
   this file, one row patched in isolation.

   Two things were wrong, and the alignment was only the visible half.

   WIDTH. Without width:100% the table shrinks to its content, so it ended around
   half way across the card and the "amount" column sat in the middle of the row
   with dead space to its right. Right-aligning cells inside a table that is not
   full width just moves them to the middle — the table has to span the card
   first, which is why this rule leads with the width rather than the alignment.

   ONE RULE FOR EVERY ROW. tfoot td, not a list of row classes: WooCommerce and
   its extensions add rows here (fees, taxes per rate, gift cards, shipping) and
   any list of classes is a list that falls behind. th stays left so the labels
   keep their edge.
   ------------------------------------------------------------------------- */
/* !important on the width, and it is earned rather than habitual. An identical
   width:100% already sits on this table further up this file (~2644, via the bare
   .woocommerce-checkout-review-order-table class) and was NOT winning — the table
   still measured about half the card. Nothing in this theme's stylesheets sets a
   competing width, max-width or display on it, so whatever is holding it narrow is
   outside them: a plugin stylesheet, or an inline style. !important settles it
   without needing to find out which. If it turns out to be an inline style, this
   still wins; if it is a later stylesheet, this wins on weight.

   max-width:none guards the other half of the same problem — a width of 100% is
   capped by any max-width in force, which would leave the table narrow with the
   width apparently set correctly. */
body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table {
    width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
}

/* Alignment, and deliberately NO column widths.
   Once the table spans the card, the amount cell is the LAST column, so its right
   edge IS the card's right edge — right-aligning the text is all that is needed to
   put every figure there. Pinning the column narrow (the width:1% trick) would
   work for the figures and ruin the shipping row, which is a radio list in that
   same column: three long labels squeezed into a column sized for "$0.00". So the
   browser sizes the columns to their content and the alignment does the work. */
body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot th {
    text-align: left !important;
}

body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot td {
    text-align: right !important;
    white-space: nowrap;
}

/* The shipping cell is a radio list, not a figure, so the alignment has to reach
   the list items too — text-align on the cell alone leaves each <li> laid out
   from the left inside a right-aligned block. nowrap is dropped here on purpose:
   "Next Day Air (UPS): $170.36" is long enough to need wrapping room on a narrow
   card, where an amount never is. */
body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot .shipping td {
    white-space: normal;
}

body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot .shipping td ul#shipping_method,
body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot .shipping td ul#shipping_method li {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    text-align: right;
}

/* ── Cart listing card ────────────────────────────────────────────────────
   Same card as .shipping-details-col (~line 63) — white, 10px radius, 20px of
   padding — because the listing used to sit inside that card and should still read
   as the same surface, just wider and in its own block. */
body.ae-checkout .ae-order-items {
    margin: 0 0 25px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
}

/* The listing keeps the 18px that separates it from the totals below; the totals are the
   last table in the block, so theirs would only double up the card's own padding. The
   coupon and gift card boxes are placed after them by the script in
   functions-additions.php and bring their own top margin. */
body.ae-checkout .ae-order-items .ae-order-totals__table {
    margin-bottom: 0;
}

/* The gift card box is moved here from the payment section, where its own spacing was
   tuned for a different context. It sits INSIDE .ae-coupon-after-totals, under the coupon
   form, so this is the gap between the two within that panel rather than between two
   separate blocks. */
body.ae-checkout .ae-order-items #pwgc-redeem-gift-card-form {
    margin-top: 20px;
}

/* ── Coupon feedback, matched to the gift card's ──────────────────────────
   The two boxes sit in one panel now, so their feedback should not look like it
   came from two different sites. The gift card's treatment is the reference:
   a green-tinted strip with a heavy left rule for success
   (.pwgc-applied-message, theme.css ~6255), and small red text for failure
   (#pwgc-redeem-error, theme.css ~6784). These give the coupon the same two.

   CSS only, on purpose. The obvious alternative — intercept the response in JS and
   render our own message — has to race WooCommerce, which inserts the success notice
   from inside a 400ms slideUp callback (checkout.js ~1278) and fires
   applied_coupon_in_checkout well before the element exists. Styling what it
   inserts, wherever it inserts it, has no timing to get wrong.

   !important throughout because the rules being overridden use it: the generic
   notice styling at theme.css ~5444 is what draws the wide box with the dark red
   top border. Its ::before and ::after are already suppressed there (~6121). */

/* Success. WooCommerce puts this before form.checkout_coupon, which our wrapper
   encloses, so it lands inside the panel already — only its looks need changing. */
body.ae-checkout .ae-coupon-after-totals .woocommerce-message {
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-left: 5px solid #90da37 !important;
    border-radius: 1px !important;
    background-color: #efffdc !important;
    box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .12) !important;
    color: #5f5e5e !important;
    font-size: 14px !important;
}

/* Failure. A <span class="coupon-error-notice"> WooCommerce appends beside the
   field (checkout.js ~1200) — matched to #pwgc-redeem-error rather than made into
   a second banner, since it belongs to the input it sits under.

   Position is set further down, with the gift card's, so the two land in the same
   place as each other. Only the type is set here. */
body.ae-checkout .ae-coupon-after-totals .coupon-error-notice,
body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-error {
    display: block;
    color: #b22222 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* The gift card's error box is printed empty and stays in the markup between tries
   (pwgc-checkout-fix.js clears it with .text('') rather than removing it), so without
   this it would hold open a line's worth of margin under the button with nothing in
   it. The coupon's span is inserted and removed, so it needs no equivalent. */
body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-error:empty {
    display: none !important;
}

/* The success notice reads as the ANSWER to the button, so it belongs after the form
   rather than above it — which is where the gift card's sits, and where WooCommerce's
   $form.before() does not put this one.

   Only the two elements whose position matters carry an order. Everything else keeps
   the default 0 and therefore its DOM order ahead of them, so a child that turns up
   here unannounced lands somewhere sensible instead of being flung to the bottom. */
body.ae-checkout .ae-coupon-after-totals {
    display: flex;
    flex-direction: column;
}

body.ae-checkout .ae-coupon-after-totals > .woocommerce-message {
    order: 1;
}

body.ae-checkout .ae-coupon-after-totals > #pwgc-redeem-gift-card-form {
    order: 2;
}

/* ── Coupon and gift card: one block style for both ───────────────────────
   The two sit in the same panel, so one set of rules dresses both rather than each
   inheriting whatever its own origin left it with. They started far apart: the coupon
   came with WooCommerce's bordered box and a near-black button, the gift card with no
   box at all and a red outline button, and their fields differed in width and radius.

   Unified on the GIFT CARD's look, for two reasons rather than taste. The theme
   already intended the coupon to lose its box in this column — the rule that did it
   (theme.css ~6224) was scoped to .shipping-details-col and went dead when the totals
   moved, which is the only reason the box came back. And the checkout's primary button
   is var(--color-primary) (#place_order, ~line 2865), so an outline in that colour is
   the theme's own secondary treatment; the near-black was the odd one out.

   SHAPE: a label on its own line, then field and button side by side beneath it —
   [ ————— field ————— ][ button ] — with the same track sizes and gap on both, so the
   two blocks line up column for column when they sit next to each other.

   Two mechanisms for that one shape, because the markup differs. The coupon's label
   and both controls are direct children of its <form>, so the form is the grid and the
   label spans it. The gift card's label sits a level ABOVE its control row, so the row
   is the grid and the label is simply a block above it.

   Grid, not flex, and that is the fix for what the flex version got wrong: WooCommerce
   wraps the coupon's controls in <p class="form-row"> elements, so THOSE were the flex
   items, not the field and the button. Sizing the controls did nothing to the row — the
   field never grew and the button collapsed narrower than its own label. Grid tracks
   size the cells regardless of what is nested in them.

   Specificity notes, since almost everything here overrides an !important:
     - The coupon form is matched by ID. functions-additions.php prints
       `#woocommerce-checkout-form-coupon { display: block !important }` in the footer
       to undo WooCommerce's slideUp, and a class-only selector loses to it — the form
       would stay a block and the grid would never apply.
     - The gift card rules in theme.css (~6247) are three classes deep, so these carry
       enough weight to win and restate every property they set. Anything left out
       would keep its old value on the gift card only, and the two would drift apart.
   ------------------------------------------------------------------------ */

/* Coupon: the form is the grid. */
body.ae-checkout .ae-coupon-after-totals form#woocommerce-checkout-form-coupon {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 150px !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.ae-checkout .ae-coupon-after-totals form#woocommerce-checkout-form-coupon > label {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* The <p> around #coupon_code is dissolved rather than placed, so the field and the
   error notice WooCommerce appends next to it become grid items in their own right.
   See the error-placement note below for why. */
body.ae-checkout .ae-coupon-after-totals form#woocommerce-checkout-form-coupon > p.form-row-first {
    display: contents;
}

body.ae-checkout .ae-coupon-after-totals form#woocommerce-checkout-form-coupon input#coupon_code {
    grid-column: 1;
    grid-row: 2;
}

body.ae-checkout .ae-coupon-after-totals form#woocommerce-checkout-form-coupon > p.form-row-last {
    grid-column: 2;
    grid-row: 2;
}

/* ── Both error messages in one place ─────────────────────────────────────
   Under the field and button, spanning the panel, in both blocks. They used to sit
   on opposite sides of their fields: the coupon's below, the gift card's ABOVE —
   the plugin prints #pwgc-redeem-error between its label and its input
   (payment-method-pw-gift-card.php ~15) — so one message pushed the field down and
   the other did not, and neither read as an answer to the button just pressed.

   Rows are numbered explicitly here rather than left to auto-placement. Once the <p>
   is dissolved the error notice precedes the button in DOM order (it is appended
   INSIDE that <p>, beside the field — checkout.js ~1200 passes $coupon_field.parent()
   as its target), and auto-placement follows DOM order: a full-width item at that
   point closes row 2 and strands the button alone on row 3.

   Nothing is moved in JS, on purpose. WooCommerce owns the insertion and removal of
   its notice (remove_coupon_error finds it with $coupon_field.next(), ~1218), and the
   gift card's box is a fixture of the plugin's template that both its script and ours
   write into by ID. Placing what they maintain, where they put it, has no timing or
   ownership to get wrong. */
body.ae-checkout .ae-coupon-after-totals form#woocommerce-checkout-form-coupon .coupon-error-notice {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0 !important;
}

/* The <p> wrappers carry WooCommerce's float-based first/last widths, which fight the
   tracks. Flattened to pass their cell's width straight through to the control. */
body.ae-checkout .ae-coupon-after-totals form#woocommerce-checkout-form-coupon p.form-row {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Gift card: the control row is the grid, the label sits above it.

   The form itself is a flex column purely to carry `order`, which is what moves the
   error box from between the label and the field to below the button — matching the
   coupon, and without touching the plugin's template.

   The input and the submit carry the same order as the wrapper because they are only
   inside it after theme.js has run (initGiftCardForm, ~1337). Ordering the wrapper
   alone would let a reload paint the two controls above the label in the moment
   before that script builds it. */
/* The form is the grid, and .gift_coupon_field_wrapper is a SECOND grid inside it.
   The wrapper is not in the plugin's template -- theme.js builds it at runtime
   (initGiftCardForm, ~1337) and moves the input and submit into it, on DOMContentLoaded
   and again from a MutationObserver. So both grids exist and the wrapper must span
   both of the form's tracks, or it is auto-placed into the 1fr one and the controls
   are squeezed into two thirds of the panel with the 150px track left empty. */
body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 150px !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
}

/* Placement mirrors the coupon form exactly: label across the top, input and button
   side by side beneath it, any error across the bottom. */
body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form > label {
    grid-column: 1 / -1;
    grid-row: 1;
}

/* Column only, no grid-row. Row 2 was pinned here while the form was assumed to be the
   controls' direct grid parent; once theme.js wraps them, row 2 is a row of the WRAPPER
   and row 1 of it is empty, which opens a stray gap above the field. */
body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form input#pwgc-redeem-gift-card-number {
    grid-column: 1;
}

/* margin:0 !important is doing real work: the plugin ships this submit with an inline
   style="display: block; margin-bottom: 24px; margin-top: 4px;", which is what pushed
   the button onto its own full-width row under the field. An inline style is only
   beaten by !important. */
body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form input#pwgc-redeem-button {
    grid-column: 2;
    margin: 0 !important;
}

body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form > #pwgc-redeem-error {
    grid-column: 1 / -1;
    grid-row: 3;
}

body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form > label {
    display: block !important;
    order: 1;
    margin: 0 0 10px !important;
}

body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form > .gift_coupon_field_wrapper,
body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form > input {
    order: 2;
}

body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form > #pwgc-redeem-error {
    order: 3;
    margin: 10px 0 0 !important;
}

body.ae-checkout .ae-coupon-after-totals .gift_coupon_field_wrapper {
    /* Span both of the form's tracks. Without this the wrapper auto-places into the 1fr
       one and its own 1fr+150px grid is squeezed into two thirds of the panel, so the
       gift card field never lines up with the coupon field above it. */
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 150px !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* pwgc-checkout-fix.js appends this after the button, making it a third cell in that
   row. Full width, on its own line under both. */
body.ae-checkout .ae-coupon-after-totals .gift_coupon_field_wrapper .pwgc-applied-message {
    grid-column: 1 / -1;
}

/* Both labels — the gift card's is the plugin's, the coupon's is added in this theme's
   checkout/form-coupon.php override precisely so there is one to match. */
body.ae-checkout .ae-coupon-after-totals form#woocommerce-checkout-form-coupon > label,
body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form > label {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--color-dark, #1a1a1a) !important;
}

/* Fields fill their track, so no max-width of their own: the track is the width. */
body.ae-checkout .ae-coupon-after-totals form#woocommerce-checkout-form-coupon input#coupon_code,
body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form input#pwgc-redeem-gift-card-number {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid var(--color-gray-light, #ccc) !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    color: var(--color-dark, #1a1a1a) !important;
    font-size: 15px !important;
    line-height: normal !important;
    box-shadow: none !important;
    transition: border-color .15s ease !important;
}

body.ae-checkout .ae-coupon-after-totals form#woocommerce-checkout-form-coupon input#coupon_code:focus,
body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form input#pwgc-redeem-gift-card-number:focus {
    border-color: var(--color-primary, #b22222) !important;
    outline: none !important;
}

/* Buttons fill their 150px track. nowrap because "Apply Gift Card" is the longer of the
   two labels and a wrap would make one button taller than the other. */
body.ae-checkout .ae-coupon-after-totals form#woocommerce-checkout-form-coupon button,
body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form input#pwgc-redeem-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 1px solid var(--color-primary, #b22222) !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    color: var(--color-primary, #b22222) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    white-space: nowrap !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease !important;
}

body.ae-checkout .ae-coupon-after-totals form#woocommerce-checkout-form-coupon button:hover,
body.ae-checkout .ae-coupon-after-totals #pwgc-redeem-form input#pwgc-redeem-button:hover {
    border-color: var(--color-primary, #b22222) !important;
    background-color: var(--color-primary, #b22222) !important;
    color: var(--color-white, #fff) !important;
}

/* The two blocks are full width and stacked at EVERY width — there is deliberately no
   two-up breakpoint here.

   There was one: a 992px media query put them side by side at half the panel each. It
   is withdrawn. Half a panel is a cramped home for a label, a field and a button, and
   the pair never sat comfortably next to each other — the coupon's success notice is a
   sibling of its form rather than a child (WooCommerce inserts it with $form.before()),
   so it had to be placed by hand into the left half, and any change in either block's
   height pulled the two out of line. Full width each is what the panel actually has
   room for.

   Stacking order comes from the flex rules above: coupon, its notice, then the gift
   card. Each block keeps its own internal grid, so its field and button stay together
   on one line with the field taking all the width the button does not.
   ------------------------------------------------------------------------ */

/* Totals (tfoot) */
body.ae-checkout :is( #order_review, .ae-order-items ) .woocommerce-checkout-review-order-table tfoot th,
body.ae-checkout :is( #order_review, .ae-order-items ) .woocommerce-checkout-review-order-table tfoot td {
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    background: transparent;
}

body.ae-checkout :is( #order_review, .ae-order-items ) tfoot .cart-subtotal th,
body.ae-checkout :is( #order_review, .ae-order-items ) tfoot .shipping th,
body.ae-checkout :is( #order_review, .ae-order-items ) tfoot .cart-discount th {
    font-weight: 500;
    color: var(--color-gray-dark, #555);
}

/* ── The coupon row's "Remove" control ─────────────────────────────────────
   The one element in the totals block with no styling of its own. WooCommerce
   prints it inside the amount cell from wc_cart_totals_coupon_html():

       -$10.00 <a class="woocommerce-remove-coupon">[Remove]</a>

   Untouched, it inherits the row's 14px and the link colour, so it read as a
   second figure sitting against the discount with square brackets round it —
   the only bracketed text anywhere on the checkout, and the only control in
   this block that did not look like one.

   The brackets themselves are part of the translated string, not markup, so
   they cannot be removed in CSS. ae_strip_coupon_remove_brackets() in
   functions-additions.php filters them out; this styles what is left.

   Kept deliberately quiet: smaller than the amount, in the muted grey the row
   labels use rather than brand red, and separated by a real margin instead of
   the bare space in WooCommerce's markup. Removing a discount is a correction,
   not an action to invite — red would give it more pull than "Apply coupon"
   below it, which is the thing a customer actually wants to reach.
   ------------------------------------------------------------------------- */
body.ae-checkout :is( #order_review, .ae-order-items ) tfoot .cart-discount .woocommerce-remove-coupon {
    margin-left: 8px;
    color: var(--color-gray, #6a6a6a);
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

body.ae-checkout :is( #order_review, .ae-order-items ) tfoot .cart-discount .woocommerce-remove-coupon:hover,
body.ae-checkout :is( #order_review, .ae-order-items ) tfoot .cart-discount .woocommerce-remove-coupon:focus {
    color: var(--color-primary, #b22222);
    text-decoration: underline;
}

/* The applied gift card's number and remaining balance, under the "Gift card" label.
   PW Gift Cards ships this as font-size:80% at font-weight:300 in an inline <style>
   inside its own template — light enough on a light background that the card number,
   the one part a customer might need to read back or check, was the hardest thing in
   the totals to make out. Same grey as the labels beside it, at a normal weight and a
   fixed size rather than a percentage of whatever it inherits.

   Needs no !important: the plugin's selector is a single class and this outweighs it
   comfortably. */
body.ae-checkout :is( #order_review, .ae-order-items ) .pwgc-checkout-subtitle {
    margin-top: 4px;
    color: var(--color-gray-dark, #555);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

/* Affirm's "See if you qualify" trigger, in the promo row ae_affirm_checkout_promo()
   prints under the total (functions-additions.php ~3814).

   Affirm's script fills that placeholder in and brings its own styling with it, hence
   !important — and hence targeting both a bare <a> and .affirm-modal-trigger, since
   which of the two carries the link is Affirm's decision, not ours, and has changed
   between versions of their widget.

   Colour only. The underline is left to Affirm: it is what marks the text as something
   to click, and this row is the one place on the page where a red word is NOT already
   obviously a control. */
body.ae-checkout .ae-affirm-promo a,
body.ae-checkout .ae-affirm-promo .affirm-modal-trigger {
    color: var(--color-primary, #b22222) !important;
}

body.ae-checkout .ae-affirm-promo a:hover,
body.ae-checkout .ae-affirm-promo .affirm-modal-trigger:hover {
    color: var(--color-primary-dark, #8e1b1b) !important;
}

body.ae-checkout :is( #order_review, .ae-order-items ) tfoot .order-total th,
body.ae-checkout :is( #order_review, .ae-order-items ) tfoot .order-total td {
     padding: 10px 20px;
    border-top: 2px solid var(--color-gray-lighter, #e8e8e8);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark, #1a1a1a);
}
body.ae-checkout :is( #order_review, .ae-order-items ) .woocommerce-checkout-review-order-table tfoot tr.tax-total td{
    text-align: right!important;
}
.woocommerce-checkout-payment form{
    margin:12px 0!important;
}
.woocommerce-checkout-payment form input[type="text"]{
    width: 100%!important;
    height: 45px!important;
    padding: 10px!important;
    border-radius: 6px!important;
    border: 1px solid #d4d4d4!important;
}
.woocommerce-checkout-payment form input[type="submit"]{
   width: 100% !important;
    min-height: 50px !important;
    margin-top: 12px !important;
    margin-bottom: 25px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #fff !important;
    border: 2px solid #b22222 !important;
    border-radius: 8px !important;
    color: #b22222 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: background .15s ease, transform .05s ease !important;
    max-width: 180px!important;
}
.woocommerce-checkout-payment form input[type="submit"]:hover{
    background: #b22222!important;
    color: #fff!important;
    transition: background .15s ease, transform .05s ease!important;
}
body.ae-checkout :is( #order_review, .ae-order-items ) tfoot .order-total .amount {
    color: #333!important;
}

/* ── Payment box ──────────────────────────────────────────────────────── */
body.ae-checkout #order_review #payment,
body.ae-checkout #order_review .woocommerce-checkout-payment {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-lighter, #e8e8e8);
    border-radius: 10px;
    padding: 6px 18px;
    margin-top: 4px;
}

body.ae-checkout #order_review #payment ul.payment_methods {
    border: none;
    padding: 8px 0;
    margin: 0;
}

body.ae-checkout #order_review #payment ul.payment_methods li {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-gray-lighter, #e8e8e8);
    list-style: none;
}

body.ae-checkout #order_review #payment ul.payment_methods li:last-child {
    border-bottom: none;
}

body.ae-checkout #order_review #payment div.payment_box {
    background: var(--color-gray-bg, #f4f4f4);
    border-radius: 8px;
    margin: 10px 0 4px;
    font-size: 13px;
}

body.ae-checkout #order_review #payment div.payment_box::before {
    display: none;
}

/* Place order button — full width */
body.ae-checkout #order_review #payment #place_order,
body.ae-checkout #order_review #place_order {
    display: block;
    width: 100%;
    min-height: 56px;
    margin-top: 12px;
    border: none;
    border-radius: 8px;
    background: var(--color-primary, #b22222);
    color: var(--color-white, #fff);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
}

body.ae-checkout #order_review #payment #place_order:hover {
    background: var(--color-primary-dark, #8e1b1b);
}

body.ae-checkout #order_review #payment #place_order:active {
    transform: translateY(1px);
}

/* ── Mobile: summary moves below the form ─────────────────────────────── */
@media (max-width: 991px) {
    body.ae-checkout #order_review {
        margin-top: 24px;
    }
    body.ae-checkout #customer_details .col-1 {
        margin-bottom: 24px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   END: CHECKOUT — Two-column layout
   ═══════════════════════════════════════════════════════════════════════ */
:where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button.alt{
    background-color:  #b22222 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Gravity Forms — press-inquiry list markers (::marker)
   The li's ::marker is empty because a reset sets list-style:none.
   Re-enable the list style + add padding so the bullet is visible.
   ═══════════════════════════════════════════════════════════════════════ */
.zd-article-list {
    list-style: disc outside;
    padding-left: 1.25em;
    margin: 0 0 1rem;
}
.zd-article-list li {
    display: list-item;
    list-style: disc outside;
    margin-bottom: 0.5em;
}
.zd-article-list li::marker  {
    font-size: 1em;
}
.zd-article-list li a {
    color: #b22222; 
}
.woocommerce-NoticeGroup.woocommerce-NoticeGroup-updateOrderReview{
    display: none !important;
}

/* 25-07-2026 */
.woocommerce .cuw-fbt-products .cuw-form .cuw-buy-section .blockUI.blockOverlay::before {
    display: none;
}
.woocommerce .cuw-fbt-products .cuw-form .cuw-column.cuw-buy-section .blockUI.blockOverlay::before {
    display: block;
}
.elementor a {
    color: #b22222;
    text-decoration: none;
}
*:focus,
button:focus {
    outline-offset: 0.25em;
    outline-style: solid !important;
    outline-color: #b22222!important;
}
*:focus:not(:focus-visible),
button:focus:not(:focus-visible),
:focus:not(:focus-visible) {
    outline: none;
}
.pro-reviews-sec .pro-review-sec__outline {
    /* transform: translateY(-70%);
    position: absolute; */
    transform: translateY(32%);
    position: relative;
    left: 0px;
    max-width: 131rem;
    margin-right: 20%;
    margin-top: -12%;
    top: 0px;
    opacity: 1;
}
.pro-reviews-sec .pro-review-sec__outline img {
    margin-left: 100px;
    margin-top: 0px;
}
.fpg-section .products .fpg-card .fpg-card__body .fpg-card__title-wrap a {
    display: flex;
}
.qs-support-wrapper .qs-support-section .qs-post-content ul {
    list-style: disc;
    padding-left: 40px;
}
.qs-support-wrapper .qs-support-section .qs-post-content ul li ul {
    padding-left: 0px;
}
.qs-support-wrapper .qs-support-section .qs-post-content ol {
    list-style: decimal-leading-zero;
    padding-left: 50px;
}
.qs-support-wrapper .qs-support-section .qs-post-content ol li ol {
    padding-left: 0;
}
#page-content-wrapper .site-main .elementor-widget-ae_product_tech_spec {
    padding-top: 2.5rem;
}
/* 26-07-2026 */
/* 27-07-2026 */
body.wp-singular.product_tech_specs-template-default.single.single-product_tech_specs {
    background-image: linear-gradient(#fff, #fff) !important;
}
.ae-pts-desc ul {
    list-style: disc;
    padding-left: 40px;
    padding-top: 15px;
}
.ae-pts-desc ul li {
    margin-top: .4rem;
    margin-bottom: .4rem;
}

/* 27-07-2026 */
/* 28-07-2026 */
body.cat-swag .prod-mod-sec, body.cat-swag .prod-specs-sec, body.cat-swag .witb-sec {
    display:none !important;
}
.wca-section .wca-heading {
    text-align: center;
    margin-bottom: 40px;
    transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s);
}
.wca-section .wca-title {
    font-family: "Lato", Sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2em;
    color: #1a1a1a;
}
.wca-section .wca__text-span {
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}
.wca-section .wca__card-txt {
    font-size: 1rem;
    line-height: 1.5;
    line-height: 1.5;
}
.coupon label[for="pwgc-redeem-gift-card-number"] {
    display: none !important;
}
/* =========================================================================
   ae-totals-final-override
   -------------------------------------------------------------------------
   LAST IN THE FILE ON PURPOSE. Identical rules already exist earlier in this
   stylesheet (~line 2907) and are correct, but the live copy of this file is
   about 9 KB longer than the one in the repo -- content that only exists on
   the server. Anything in that gap carrying !important on a selector of equal
   or higher specificity would beat the earlier block and would not show up in
   a search for totals-related selectors. Appending here removes the question:
   at the end of the last-loaded theme stylesheet, these win on source order.

   Safe to delete once the earlier block is confirmed to be taking effect --
   the two are byte-identical in behaviour, so nothing changes either way.

   1. The table spans the card. It carried a plain width:100% that was not
      being honoured, leaving it about half the card's width with the amounts
      stranded mid-row. max-width:none covers the width being capped rather
      than ignored.
   2. Every amount sits on the right edge -- one rule on tfoot td rather than
      a list of row classes, so the coupon, shipping, gift card and tax rows
      are all included, and rows added by future extensions are too.
   3. The shipping cell is a radio list, so the alignment has to reach the
      list items; its nowrap is released because the method labels are long.
   ========================================================================= */
/* table-layout:fixed is what makes the 50/50 real.
   Under the default `auto`, a percentage column width is only a hint — the
   browser sizes columns to their content and overrides it, which is why the
   amounts kept sitting wherever the figures happened to end rather than at the
   halfway mark. `fixed` makes the declared widths binding: the first row's
   widths set the columns and content is laid out inside them.

   The trade-off is deliberate. Under `fixed`, content that does not fit WRAPS
   instead of widening its column — so a long label ("Coupon: SUMMER2026") or a
   shipping method name breaks onto a second line rather than eating into the
   other half. That is the cost of an exact half-and-half split, and it is why
   the cells below allow wrapping rather than carrying nowrap. */
body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table,
body.ae-checkout .ae-order-items table.ae-order-totals__table {
    width: 100% !important;
    max-width: none !important;
    table-layout: fixed !important;
}

/* Left half: the labels. */
body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot th {
    width: 50% !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: break-word;
}

/* Right half: the amounts, on the outer edge of their own 50%. */
body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot td {
    width: 50% !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: break-word;
}

body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot .shipping td {
    white-space: normal !important;
}

body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot .shipping td ul#shipping_method,
body.ae-checkout :is( #order_review, .ae-order-items ) .ae-order-totals__table tfoot .shipping td ul#shipping_method li {
    margin-left: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    text-align: right !important;
}