/*
Theme Name: GeneratePress Child
Description: Custom child theme based on GeneratePress
Author: Site Administrator
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-child
*/

/* Child theme custom styles go below */

/* ============================================
   PRODUCT PAGES - FULL WIDTH (no sidebar)
   ============================================ */
.single-product .site-content .content-area,
.woocommerce-page.single-product #primary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

.single-product .site-content .widget-area,
.single-product #secondary {
    display: none !important;
}

.single-product .site-content {
    display: block !important;
}

/* ============================================
   NAVIGATION - HIDE SITE TITLE TEXT
   ============================================ */
.site-title,
.site-description,
p.site-title,
h1.site-title,
.main-title,
.main-title a,
.site-description {
    display: none !important;
}

/* ============================================
   NAVIGATION - SHOP ONLINE BUTTON
   ============================================ */
li.shop-now,
#top-menu li.shop-now {
    background-color: #E02B20 !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin-left: 12px !important;
    transition: background-color 0.25s ease !important;
    height: auto !important;
}

li.shop-now:hover,
#top-menu li.shop-now:hover {
    background-color: #b81f16 !important;
}

li.shop-now > a,
#top-menu li.shop-now > a {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 10px 22px !important;
    display: block !important;
    border-radius: 6px !important;
}

li.shop-now > a:hover,
#top-menu li.shop-now > a:hover,
#top-menu li.shop-now.current-menu-item > a:hover,
#top-menu li.shop-now.current-page-ancestor > a:hover {
    color: #ffffff !important;
    background-color: #020617 !important;
}



/* ============================================
   HIDE SITE TITLE TEXT IN HEADER
   ============================================ */

/* GeneratePress site title */
.site-header .site-title,
.site-header .site-description,
#masthead .site-title,
#masthead .site-description,
.site-branding .site-title,
.site-branding .site-description,
.main-title, .main-title a,
p.site-title, h1.site-title,
.header-branding .site-title,
.inside-header .site-title,
.inside-header .site-description {
    display: none !important;
}



/* ============================================
   SHOP ONLINE BUTTON - NO PADDING
   ============================================ */
li.shop-now > a,
#top-menu li.shop-now > a {
    padding: 0 10px !important;
}

/* ============================================
   AGGRESSIVE SITE TITLE HIDING
   ============================================ */



/* Hide any text node that follows the logo link */
#logo + * {
    display: none !important;
}

/* Make Shop Online button narrower */
li.shop-now,
#top-menu li.shop-now {
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

li.shop-now > a,
#top-menu li.shop-now > a {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    padding: 12px !important;
    line-height: 1 !important;
}

/* ============================================
   STICKY NAVIGATION
   ============================================ */

/* Make header sticky */
#main-header,
header#main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
}

/* Add padding to body to prevent content from hiding behind sticky header */
body {
    padding-top: 60px !important;
}

/* Ensure GP header is also sticky if it renders */
.site-header,
#masthead,
.main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
}

/* Admin bar offset handled in reset block below */

/* ============================================
   HIDE FEATURED IMAGE ON ALL PAGES
   ============================================ */

/* GeneratePress featured image */
.page .featured-image,
.page .post-image,
.page .post-thumbnail,
.page img.wp-post-image,
.page .wp-post-image,
.page .generate-featured-image,
.single-page .featured-image,

/* WooCommerce pages */
.woocommerce-page .page .featured-image {
    display: none !important;
}

/* ============================================
   SITEWIDE TYPOGRAPHY — Poppins
   ============================================ */

body,
p,
li,
td,
th,
div,
span,
input,
textarea,
select,
button,
a {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 18px !important;
}

/* Keep small utility text from blowing up */
.wp-block-code,
code,
pre {
    font-family: monospace !important;
    font-size: 14px !important;
}

/* Navigation — keep nav text proportional */
#top-menu a,
nav a {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 14px !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.mp-hero h1,
.mp-section-title,
.mp-benefits-content h2 {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
}

/* ============================================
   TYPOGRAPHY — PRODUCT PAGES & BLOG POSTS
   ============================================ */

/* WooCommerce product pages */
.single-product .entry-content,
.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-tabs .panel,
.single-product .product_meta,
.single-product p,
.single-product li,
.single-product td,
.single-product th,
.woocommerce div.product p,
.woocommerce div.product li,
.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-tabs p,
.woocommerce-page p,
.woocommerce-page li {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 18px !important;
}

/* Product titles */
.single-product h1.product_title,
.woocommerce div.product h1,
.woocommerce div.product h2,
.woocommerce div.product h3 {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
}

/* Blog posts */
.single .entry-content,
.single .entry-content p,
.single .entry-content li,
.single .entry-content td,
.single .entry-content blockquote,
.blog .entry-content p,
.blog .entry-content li,
.post p,
.post li {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 18px !important;
}

/* Blog post headings */
.single .entry-title,
.single h1, .single h2, .single h3,
.single h4, .single h5, .single h6,
.blog h2.entry-title {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
}

/* Small UI elements — keep proportional */
.woocommerce .price,
.woocommerce-Price-amount,
.product_meta span,
.woocommerce .onsale,
.woocommerce nav.woocommerce-pagination a,
.comment-meta,
.post-meta,
.entry-meta {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
}

/* ============================================
   WHITE BACKGROUND SITEWIDE
   ============================================ */

body,
#page,
#content,
.site-content,
.grid-container,
.entry-content,
.post-content,
.page-content {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* ============================================
   REDUCE PARAGRAPH SPACING — SITEWIDE
   ============================================ */

p,
.entry-content p,
.woocommerce-product-details__short-description p,
.woocommerce-tabs p,
.mp-hero-body p {
    margin-bottom: 0.5em !important;
    margin-top: 0 !important;
}

/* ============================================
   PAGE TITLE — Always H1, Red, 15px
   ============================================ */

h1,
.page h1,
.single h1,
.entry-title,
h1.entry-title,
.woocommerce h1,
.woocommerce div.product h1,
h1.product_title,
.page-title,
h1.page-title {
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 15px !important;
    color: #e02b20 !important;
    font-weight: 700 !important;
}



/* ── Navigation hover colour — red ── */
#main-nav .main-nav ul li a:hover,
#main-nav .main-nav ul li:hover > a,
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
#main-menu li a:hover,
#top-menu li a:hover,
nav.main-navigation a:hover {
    color: #e02b20 !important;
}

/* ── Hide GP default footer credits ── */
.site-info,
.site-footer .site-info,
.generated-footer .site-info,
p.site-info,
.wp-site-blocks .site-info {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   PRODUCT CARDS — Global (mp-product-*)
   Used on front page, about page, and any future page templates
   ══════════════════════════════════════════════════════════════ */
.mp-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
}
.mp-product-card {
    background: #fff;
    border: 1px solid #E4E4E7;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
    display: block;
}
.mp-product-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.mp-sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #e53935;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    z-index: 1;
}
.mp-product-img {
    aspect-ratio: 1;
    background: #F4F4F5;
    overflow: hidden;
}
.mp-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block !important;
    transition: transform 0.3s;
    margin: 0 !important;
    border-radius: 0 !important;
}
.mp-product-card:hover .mp-product-img img { transform: scale(1.04); }
.mp-product-info { padding: 16px; }
.mp-product-info h3 {
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.45;
    margin-bottom: 8px;
    color: #020617;
}
.mp-product-price {
    font-weight: 700;
    font-size: 22px !important;
    color: #e02b20 !important;
}
.mp-product-price del {
    font-weight: 400;
    color: #52525C;
    font-size: 24px !important;
    margin-right: 4px;
}
.mp-product-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    background: #e02b20;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 6px;
    transition: background 0.2s;
    text-decoration: none !important;
}
.mp-product-cta:hover { background: #c0392b !important; color: #ffffff !important; }
@media (max-width: 640px) {
    .mp-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ── Hero badge font-size — all page templates ── */
.sp-header-badge,
.ct-hero-badge,
.ab-hero-badge,
.ws-hero-badge,
.mp-hero-badge {
  font-size: 16px !important;
}

/* ── Active nav item — red, excluding SHOP ONLINE button ── */
#main-nav .main-nav ul li.current-menu-item:not(.shop-now) > a,
#main-nav .main-nav ul li.current-menu-ancestor:not(.shop-now) > a,
#main-nav .main-nav ul li.current_page_item:not(.shop-now) > a,
#main-nav .main-nav ul li.current_page_ancestor:not(.shop-now) > a,
.main-navigation ul li.current-menu-item:not(.shop-now) > a,
.main-navigation ul li.current-menu-ancestor:not(.shop-now) > a,
.main-navigation ul li.current_page_item:not(.shop-now) > a,
.main-navigation ul li.current_page_ancestor:not(.shop-now) > a,
#top-menu li.current-menu-item:not(.shop-now) > a,
#top-menu li.current-menu-ancestor:not(.shop-now) > a,
#top-menu li.current_page_item:not(.shop-now) > a,
#top-menu li.current_page_ancestor:not(.shop-now) > a,
#main-menu li.current-menu-item:not(.shop-now) > a,
#main-menu li.current-menu-ancestor:not(.shop-now) > a {
  color: #e02b20 !important;
}

/* ── WooNotification popup — hard reset at end of sheet (beats global 18px rule) ── */
body [class*="vi-wbn"],
body [class*="vi-wbn"] div,
body [class*="vi-wbn"] p,
body [class*="vi-wbn"] span,
body [class*="vi-wbn"] a,
body [class*="vi-wbn"] strong,
body [class*="vi-wbn"] em,
body [class*="vi-wbn"] li,
body [class*="vi-wbn"] ul,
body [class*="vi-wbn"] button {
    font-size: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    line-height: 1.4 !important;
}

/* ── WooNotification popup — hard reset at end of sheet (beats global 18px rule) ── */
body [class*="vi-wbn"],
body [class*="vi-wbn"] div,
body [class*="vi-wbn"] p,
body [class*="vi-wbn"] span,
body [class*="vi-wbn"] a,
body [class*="vi-wbn"] strong,
body [class*="vi-wbn"] em,
body [class*="vi-wbn"] li,
body [class*="vi-wbn"] ul,
body [class*="vi-wbn"] button {
    font-size: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    line-height: 1.4 !important;
}

/* ════════════════════════════════════════════════════════════
   CART & CHECKOUT — Site Styling + Ecommerce Best Practices
   ════════════════════════════════════════════════════════════ */

/* ── Shared variables ── */
.woocommerce-cart,
.woocommerce-checkout {
  background: #ffffff;
}

/* ── Progress steps bar ── */
.mpau-checkout-steps {
  background: #F4F4F5;
  border-bottom: 1px solid #E4E4E7;
  padding: 14px 0;
}
.mpau-checkout-steps-inner {
  max-width: 1350px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.mpau-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px !important; font-weight: 600; color: #9ca3af;
  letter-spacing: .04em; text-transform: uppercase;
}
.mpau-step.active { color: #020617; }
.mpau-step.done   { color: #e02b20; }
.mpau-step-num {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #E4E4E7; color: #9ca3af;
  font-size: 12px !important; font-weight: 700;
}
.mpau-step.active .mpau-step-num { background: #020617; color: #fff; }
.mpau-step.done   .mpau-step-num { background: #e02b20; color: #fff; }
.mpau-step-sep {
  width: 40px; height: 2px; background: #E4E4E7; margin: 0 4px;
}
.mpau-step-sep.done { background: #e02b20; }

/* ── Page wrapper ── */
.woocommerce-cart   .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-cart   .site-content,
.woocommerce-checkout .site-content {
  max-width: 1350px !important; margin: 0 auto !important; padding: 40px 24px 80px !important;
}
.woocommerce-cart   .content-area,
.woocommerce-checkout .content-area { width: 100% !important; float: none !important; }
.woocommerce-cart   .widget-area,
.woocommerce-checkout .widget-area { display: none !important; }

/* ── Section headings ── */
.woocommerce-cart h2,
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  font-size: 1.1rem !important; font-weight: 700 !important;
  color: #020617 !important; letter-spacing: -.01em;
  padding-bottom: 10px; border-bottom: 2px solid #E4E4E7;
  margin-bottom: 20px !important; margin-top: 0 !important;
}

/* ── CART TABLE ── */
.woocommerce-cart-form { margin-bottom: 40px; }

table.shop_table {
  width: 100%; border-collapse: collapse;
  border: 1.5px solid #E4E4E7; border-radius: 12px; overflow: hidden;
}
table.shop_table thead th {
  background: #020617; color: #fff !important;
  font-size: .8rem !important; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 14px 16px; text-align: left;
}
table.shop_table thead th.product-remove { width: 40px; }
table.shop_table thead th.product-thumbnail { width: 80px; }

table.shop_table tbody tr { border-bottom: 1px solid #E4E4E7; }
table.shop_table tbody tr:last-child { border-bottom: none; }
table.shop_table tbody td {
  padding: 18px 16px; vertical-align: middle;
  font-size: 1rem !important; color: #2f3b48;
}

/* Product image */
table.shop_table td.product-thumbnail img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 8px; border: 1px solid #E4E4E7; display: block;
}

/* Product name */
table.shop_table td.product-name a {
  font-weight: 600; color: #020617 !important; font-size: 1rem !important;
  text-decoration: none;
}
table.shop_table td.product-name a:hover { color: #e02b20 !important; }
table.shop_table td.product-name .variation { font-size: .85rem !important; color: #52525C; margin-top: 4px; }

/* Price & subtotal */
table.shop_table td.product-price,
table.shop_table td.product-subtotal {
  font-size: 1rem !important; font-weight: 600; color: #020617;
}
table.shop_table tfoot td,
table.shop_table tfoot th { padding: 12px 16px; font-size: .95rem !important; }
table.shop_table tfoot tr.order-total td,
table.shop_table tfoot tr.order-total th {
  font-size: 1.05rem !important; font-weight: 700; color: #020617;
  border-top: 2px solid #E4E4E7;
}

/* Quantity input */
.woocommerce-cart-form .qty,
.quantity input.qty {
  width: 64px !important; padding: 8px 10px !important;
  border: 1.5px solid #E4E4E7 !important; border-radius: 6px !important;
  font-size: .95rem !important; font-weight: 600; text-align: center;
  color: #020617 !important; background: #fff !important;
}
.woocommerce-cart-form .qty:focus,
.quantity input.qty:focus { border-color: #e02b20 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(224,43,32,.1) !important; }

/* Remove button */
a.remove {
  font-size: 1.2rem !important; color: #9ca3af !important;
  font-weight: 700; line-height: 1; transition: color .2s;
  text-decoration: none;
}
a.remove:hover { color: #e02b20 !important; background: none !important; }

/* Coupon / update cart row */
.cart-collaterals .wc-proceed-to-checkout,
.actions { padding: 20px 0; }
.coupon input[type="text"] {
  padding: 11px 14px !important; border: 1.5px solid #E4E4E7 !important;
  border-radius: 6px !important; font-size: .92rem !important; color: #020617;
  margin-right: 8px; width: 220px !important; min-width: 220px !important;
}
.coupon .button,
.woocommerce-cart-form .button[name="update_cart"] {
  background: #020617 !important; color: #fff !important;
  border: none !important; border-radius: 6px !important;
  padding: 11px 20px !important; font-size: .88rem !important;
  font-weight: 700 !important; cursor: pointer; transition: background .2s;
}
.coupon .button:hover,
.woocommerce-cart-form .button[name="update_cart"]:hover { background: #1a1a2e !important; }

/* ── CART TOTALS ── */
.cart-collaterals { margin-top: 0; }
.cart_totals {
  border: 1.5px solid #E4E4E7; border-radius: 12px;
  overflow: hidden; background: #fff;
  float: none !important; width: 100% !important; max-width: 480px;
  margin-left: auto;
}
.cart_totals h2 { padding: 18px 22px 12px !important; margin: 0 !important; border-bottom: none !important; }
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals table th,
.cart_totals table td { padding: 12px 22px; font-size: .95rem !important; border-bottom: 1px solid #F4F4F5; }
.cart_totals table tr:last-child th,
.cart_totals table tr:last-child td { border-bottom: none; }
.cart_totals table .order-total th,
.cart_totals table .order-total td {
  font-weight: 700; font-size: 1.1rem !important; color: #020617;
  background: #F4F4F5; border-top: 2px solid #E4E4E7;
}
.wc-proceed-to-checkout { padding: 16px 22px 22px !important; }
.wc-proceed-to-checkout a.checkout-button,
a.checkout-button {
  display: block; width: 100%;
  background: #e02b20 !important; color: #fff !important;
  border: none !important; border-radius: 8px !important;
  padding: 15px 24px !important; text-align: center;
  font-size: 1rem !important; font-weight: 700 !important; letter-spacing: .03em;
  text-transform: uppercase; transition: background .2s, transform .15s;
  text-decoration: none;
}
a.checkout-button:hover { background: #c0392b !important; transform: translateY(-1px); }

/* ── Cart trust strip ── */
.mpau-cart-trust {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  padding: 14px 22px 18px; border-top: 1px solid #F4F4F5;
}
.mpau-cart-trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px !important; color: #52525C; font-weight: 500;
}
.mpau-cart-trust-item svg { flex-shrink: 0; }

/* ── CHECKOUT ── */
.woocommerce-checkout .woocommerce { padding: 40px 24px 80px; max-width: 1350px; margin: 0 auto; box-sizing: border-box; }

/* 2-column grid on the form itself */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: start;
}

/* Notices, errors injected at top of form — span full width */
.woocommerce-checkout form.checkout .woocommerce-NoticeGroup,
.woocommerce-checkout form.checkout > .woocommerce-error,
.woocommerce-checkout form.checkout > .woocommerce-message,
.woocommerce-checkout form.checkout > .woocommerce-info { grid-column: 1 / -1; }

/* Hide WC's default "Your order" h3 — we add a styled one ourselves */
.woocommerce-checkout h3#order_review_heading { display: none !important; }

/* Left column: customer details */
.woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1; }

/* col-1 (billing) and col-2 (shipping) — both full width, no WC floats */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { float: none !important; width: 100% !important; }
.woocommerce-checkout #customer_details .col-2 { margin-top: 4px; }

/* Right column: order review (contains order table + payment) */
.woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 1; }

/* #payment is nested inside #order_review — not a separate grid item */

/* ── Card shells ── */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
  background: #fff; border: 1.5px solid #E4E4E7; border-radius: 12px;
  padding: 0; overflow: hidden;
}

/* Card headers */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3 {
  background: #020617; color: #fff !important;
  font-size: .92rem !important; font-weight: 700 !important;
  margin: 0 !important; padding: 16px 24px !important;
  border-bottom: none !important; letter-spacing: .03em;
  text-transform: uppercase;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { padding: 22px 24px; }

/* "Order summary" label for right card */
.woocommerce-checkout #order_review::before {
  content: 'Order Summary';
  display: block; background: #020617; color: #fff;
  font-size: .92rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 16px 24px;
}

/* Order table inside right card */
.woocommerce-checkout #order_review table.shop_table { width: 100%; border-collapse: collapse; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  padding: 11px 24px; font-size: .9rem !important;
  border-bottom: 1px solid #F4F4F5; color: #2f3b48; text-align: left;
}
.woocommerce-checkout #order_review table.shop_table thead th {
  font-size: .72rem !important; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: #52525C; background: #F9F9FA; padding: 10px 24px;
}
.woocommerce-checkout #order_review .cart-subtotal td,
.woocommerce-checkout #order_review .cart-subtotal th { color: #52525C; font-size: .88rem !important; }
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
  font-weight: 800 !important; font-size: 1.05rem !important; color: #020617;
  border-top: 2px solid #E4E4E7; border-bottom: none;
  background: #F9F9FA; padding: 14px 24px;
}
.woocommerce-checkout #order_review .cart-discount td { color: #e02b20; font-weight: 600; }

/* ── Payment section ── */
.woocommerce-checkout #payment {
  border-top: 2px solid #E4E4E7; background: #fff; padding: 22px 24px 24px;
}
.woocommerce-checkout #payment .wc_payment_methods {
  list-style: none !important; padding: 0 !important; margin: 0 0 18px !important;
}
.woocommerce-checkout #payment .wc_payment_methods > li {
  border: 1.5px solid #E4E4E7; border-radius: 8px;
  margin-bottom: 8px; padding: 12px 16px; background: #fff; transition: border-color .2s;
}
.woocommerce-checkout #payment .wc_payment_methods > li:hover { border-color: #9ca3af; }
.woocommerce-checkout #payment .wc_payment_methods > li label {
  display: flex; align-items: center; gap: 10px;
  font-size: .95rem !important; font-weight: 500; cursor: pointer;
  color: #020617; margin: 0;
}
.woocommerce-checkout #payment .wc_payment_methods > li label img { max-height: 22px; }
.woocommerce-checkout #payment .wc_payment_methods > li .payment_box {
  background: #F4F4F5; border-radius: 6px; padding: 12px 14px; margin-top: 10px;
  font-size: .86rem !important; color: #52525C; line-height: 1.6;
}
.woocommerce-checkout #payment div.form-row { margin: 0; }

/* Place order button */
.woocommerce-checkout #place_order,
.woocommerce-checkout #payment #place_order {
  display: block !important; width: 100% !important;
  background: #e02b20 !important; color: #fff !important;
  border: none !important; border-radius: 8px !important;
  padding: 16px 24px !important; font-size: 1rem !important;
  font-weight: 700 !important; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; font-family: 'Poppins', sans-serif !important;
  transition: background .2s, transform .15s; margin-top: 4px;
}
.woocommerce-checkout #place_order:hover { background: #c0392b !important; transform: translateY(-1px); }

/* Checkout trust badges */
.mpau-checkout-trust {
  display: flex !important; flex-direction: row !important;
  justify-content: center; align-items: center; gap: 14px;
  width: 100% !important; clear: both;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #E4E4E7;
}
.mpau-checkout-trust-item {
  display: flex !important; align-items: center; justify-content: center;
  width: 34px !important; height: 34px !important; border-radius: 50%;
  background: #F4F4F5; flex-shrink: 0;
}
.mpau-checkout-trust-item svg {
  width: 17px !important; height: 17px !important;
  display: block !important; flex-shrink: 0;
}
.mpau-checkout-trust-item span { display: none !important; }

/* Force payment form-row to stack vertically */
.woocommerce-checkout #payment div.form-row {
  display: flex !important; flex-direction: column !important;
  align-items: stretch !important; gap: 0 !important;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-cart .woocommerce-cart-form { grid-column: 1; grid-row: 1; }
  .woocommerce-cart .cart-collaterals      { grid-column: 1; grid-row: 2; }
  .woocommerce-cart .cart_totals { position: static; max-width: 460px; }
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  .woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1; }
  .woocommerce-checkout form.checkout #order_review     { grid-column: 1; grid-row: 2; }
}
@media (max-width: 600px) {
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout .woocommerce { padding: 20px 16px 60px; }
  .woocommerce-cart table.shop_table thead th.product-thumbnail,
  .woocommerce-cart table.shop_table td.product-thumbnail { display: none; }
}

/* ── WooNotification popup — hard reset at end of sheet (beats global 18px rule) ── */
body [class*="vi-wbn"],
body [class*="vi-wbn"] div,
body [class*="vi-wbn"] p,
body [class*="vi-wbn"] span,
body [class*="vi-wbn"] a,
body [class*="vi-wbn"] strong,
body [class*="vi-wbn"] em,
body [class*="vi-wbn"] li,
body [class*="vi-wbn"] ul,
body [class*="vi-wbn"] button {
    font-size: 14px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    line-height: 1.4 !important;
}

/* ── Nav Cart Icon ── */
.mpau-cart-nav-item { display: flex; align-items: center; }
.mpau-cart-nav {
  display: flex; align-items: center; position: relative;
  padding: 0 10px !important; color: #020617 !important;
  text-decoration: none; transition: color .2s;
}
.mpau-cart-nav:hover { color: #e02b20 !important; }
.mpau-cart-icon { display: block; width: 22px; height: 22px; flex-shrink: 0; }

.mpau-cart-count {
  position: absolute; top: -7px; right: 0;
  min-width: 18px; height: 18px; border-radius: 100px;
  background: #E4E4E7; color: #9ca3af !important;
  font-size: 10px !important; font-weight: 700; line-height: 18px;
  text-align: center; padding: 0 4px;
  transition: background .2s, color .2s;
}
.mpau-cart-count.has-items {
  background: #e02b20; color: #fff !important;
}

/* ── Hide GP entry-header on cart/checkout (causes large gap) ── */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.woocommerce-cart .page-header,
.woocommerce-checkout .page-header,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title { display: none !important; }

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content { padding-top: 0 !important; margin-top: 0 !important; }

.woocommerce-cart .content-area,
.woocommerce-checkout .content-area { padding-top: 0 !important; }

.woocommerce-cart .site-content,
.woocommerce-checkout .site-content { padding-top: 0 !important; }

/* ── Cart & Checkout — match sitewide 1350px container ── */
.woocommerce-cart .inside-site-content,
.woocommerce-checkout .inside-site-content {
  max-width: 1350px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  width: 100%;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* ── Cart & Checkout — correct full-width fix (targets actual GP selectors) ── */
.woocommerce-cart  #primary,
.woocommerce-checkout #primary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
}
.woocommerce-cart  #right-sidebar,
.woocommerce-checkout #right-sidebar,
.woocommerce-cart  .sidebar,
.woocommerce-checkout .sidebar { display: none !important; }

.woocommerce-cart  #page,
.woocommerce-checkout #page { max-width: 1350px !important; }

/* ── Cart & Checkout — remove inside-article padding (separate-containers adds 40px) ── */
.woocommerce-cart .inside-article,
.woocommerce-checkout .inside-article {
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* ── Cart page — intro text (from WP page editor) ── */
.woocommerce-cart .entry-content > p {
  text-align: center !important;
  padding: 6px 24px !important;
  margin-bottom: 4px !important;
  font-size: 18px !important;
  color: #52525C;
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── Custom page templates — full-width, no inside-article padding ── */
.page-template-page-reviews .inside-article,
.page-template-page-1-3-star-review .inside-article,
.page-template-page-4-5-star-review .inside-article,
.page-template-page-track-your-parcel .inside-article,
.page-template-page-policy .inside-article,
.page-template-page-wholesale-mattress-protectors .inside-article,
.page-template-page-mattress-protector-company .inside-article,
.page-template-page-mattress-cover-company .inside-article,
.page-template-page-waterproof-mattress-protector .inside-article {
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.page-template-page-reviews .entry-content,
.page-template-page-1-3-star-review .entry-content,
.page-template-page-4-5-star-review .entry-content,
.page-template-page-track-your-parcel .entry-content,
.page-template-page-policy .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* ── Custom page templates — make site-content full-width (overrides GP cached layout CSS) ── */
.page-template-page-mattress-protector-news #content,
.page-template-page-reviews #content,
.page-template-page-1-3-star-review #content,
.page-template-page-4-5-star-review #content,
.page-template-page-track-your-parcel #content,
.page-template-page-policy #content,
.page-template-page-wholesale-mattress-protectors #content,
.page-template-page-mattress-protector-company #content,
.page-template-page-mattress-cover-company #content,
.page-template-page-waterproof-mattress-protector #content {
  width: 100% !important;
  float: none !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Also suppress any sidebar that still renders */
.page-template-page-mattress-protector-news #right-sidebar,
.page-template-page-reviews #right-sidebar,
.page-template-page-1-3-star-review #right-sidebar,
.page-template-page-4-5-star-review #right-sidebar,
.page-template-page-track-your-parcel #right-sidebar,
.page-template-page-policy #right-sidebar { display: none !important; }

/* ── Custom page templates — fix GP's display:flex on .site-content ── */
.page-template-page-mattress-protector-news #content,
.page-template-page-reviews #content,
.page-template-page-1-3-star-review #content,
.page-template-page-4-5-star-review #content,
.page-template-page-track-your-parcel #content,
.page-template-page-policy #content {
  display: block !important;
}

/* Also ensure the template root divs fill full width */
.rvn-page, .rvp-page, .rv-page, .tp-page, .pl-page {
  width: 100%;
}

/* ── Footer trust badges — force small font ── */
.mpau-trust-badges .mpau-badge,
.mpau-trust-badges span.mpau-badge {
  font-size: 14px !important;
  padding: 3px 5px !important;
}

/* ── SHOP ONLINE nav button — force white text (default + hover) ── */
#site-navigation li.shop-now > a,
.main-navigation li.shop-now > a,
nav li.shop-now > a,
li.shop-now > a,
#site-navigation li.shop-now > a:visited,
.main-navigation li.shop-now > a:visited,
#site-navigation li.shop-now > a:hover,
.main-navigation li.shop-now > a:hover,
nav li.shop-now > a:hover,
li.shop-now > a:hover,
#site-navigation li.shop-now > a:focus,
.main-navigation li.shop-now > a:focus,
#site-navigation li.shop-now > a:active,
.main-navigation li.shop-now > a:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#site-navigation li.shop-now > a:hover,
.main-navigation li.shop-now > a:hover,
nav li.shop-now > a:hover,
li.shop-now > a:hover {
  background-color: #020617 !important;
}

/* ── WooNotification popup — correct selector (#message-purchased) ── */
#message-purchased,
#message-purchased *,
#message-purchased p,
#message-purchased p a,
#message-purchased p span,
#message-purchased p small,
#message-purchased .wn-popup-product-title,
#message-purchased .message-purchase-main,
#message-purchased .wn-notification-message-container {
  font-size: 14px !important;
  font-family: 'Poppins', sans-serif !important;
  line-height: 1.4 !important;
}
#message-purchased p small {
  font-size: 11px !important;
}

/* ── Product page main heading — ultra bold override ── */
.rp-main-heading p {
  font-size: 35px !important;
  font-weight: 900 !important;
}

/* ── Variable product price — 40px override ── */
.rp-buy-box .woocommerce-variation-price .price,
.rp-buy-box .woocommerce-variation-price .price .woocommerce-Price-amount,
.rp-buy-box .woocommerce-variation-price .price bdi,
.rp-buy-box .woocommerce-variation-price ins .woocommerce-Price-amount,
.rp-buy-box .woocommerce-variation-price ins bdi {
  font-size: 40px !important;
  font-weight: 700 !important;
  color: #e02b20 !important;
  line-height: 1.1 !important;
}

/* ── Strikethrough (del) in top price — grey ── */
.rp-wc-price del,
.rp-wc-price del span,
.rp-wc-price del bdi,
.rp-wc-price del .woocommerce-Price-amount {
  color: #888888 !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  opacity: 0.7;
}

/* ── Price span override — beats global span { 18px !important } ── */
.rp-wc-price span,
.rp-wc-price bdi,
.rp-wc-price .woocommerce-Price-amount,
.woocommerce-variation-price span,
.woocommerce-variation-price bdi,
.woocommerce-variation-price .woocommerce-Price-amount,
.woocommerce-variation-price .price,
.single_variation span,
.single_variation bdi,
.single_variation .woocommerce-Price-amount,
.rp-price-repeat span,
.rp-price-repeat bdi,
.rp-price-repeat .woocommerce-Price-amount,
.rp-price-repeat .rp-sale-price,
.rp-price-repeat .rp-sale-price span,
.rp-price-repeat .rp-sale-price bdi {
  font-size: 40px !important;
  font-weight: 700 !important;
  color: #e02b20 !important;
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
}

.rp-price-repeat del,
.rp-price-repeat del span,
.rp-price-repeat del bdi {
  font-size: 42px !important;
  font-weight: 700 !important;
  color: #000000 !important;
}

/* ── Top Customer Review badge — smaller ── */
.rp-review-badge {
  font-size: 15px !important;
  padding: 3px 10px !important;
  letter-spacing: .08em !important;
  margin-bottom: 10px !important;
}

/* ── Add to Cart button — capitalised ── */
.rp-buy-box .single_add_to_cart_button,
.single-product .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button {
  text-transform: uppercase !important;
}

/* ── Single Blog Post H1 Headline ── */
.single .entry-title,
.single h1.entry-title,
.single-post h1.entry-title,
.single-post .entry-title,
.single h1.al-post-title,
h1.al-post-title {
    font-size: 35px !important;
    color: #000000 !important;
}



/* ─────────────────────────────────────────────
   MOBILE HEADER/NAV — clean app-style layout (≤768px)
   Logo left, hamburger + cart right, dropdown on toggle
   ───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hide duplicate GP mobile toggle wrapper */
  #mobile-menu-control-wrapper { display: none !important; }

  /* Header row */
  .inside-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 10px 14px !important;
  }

  .site-branding-container {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Hide text title/tagline on mobile; keep logo only */
  .site-branding { display: none !important; }

  .header-image.is-logo-image {
    display: block !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 220px !important;
    max-height: 56px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Right side controls container */
  #site-navigation {
    width: auto !important;
    margin-left: auto !important;
    background: transparent !important;
  }

  #site-navigation .inside-navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  /* Show only cart item + hamburger in collapsed state */
  #site-navigation .main-nav > ul {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  #site-navigation .main-nav > ul > li { display: none !important; }
  #site-navigation .main-nav > ul > li.mpau-cart-nav-item { display: flex !important; }

  /* Keep cart icon visible and compact */
  .mpau-cart-nav-item { margin: 0 !important; }
  .mpau-cart-nav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
  }

  /* Hamburger button style like reference */
  #site-navigation .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #020617 !important;
    box-shadow: none !important;
    order: 2 !important;
  }

  #site-navigation .menu-toggle .mobile-menu,
  #site-navigation .menu-toggle .screen-reader-text { display: none !important; }

  #site-navigation .menu-toggle svg {
    fill: #020617 !important;
    width: 34px !important;
    height: 34px !important;
  }

  /* Dropdown menu panel when toggled open */
  #site-navigation .main-nav {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 14px !important;
    left: 14px !important;
    z-index: 9999 !important;
  }

  #site-navigation:not(.toggled) .main-nav > ul > li:not(.mpau-cart-nav-item) {
    display: none !important;
  }

  #site-navigation.toggled .main-nav > ul {
    display: block !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 24px rgba(2, 6, 23, .12) !important;
    overflow: hidden !important;
    padding: 6px 0 !important;
  }

  #site-navigation.toggled .main-nav > ul > li {
    display: block !important;
  }

  /* Don't duplicate cart inside open dropdown */
  #site-navigation.toggled .main-nav > ul > li.mpau-cart-nav-item {
    display: none !important;
  }

  #site-navigation .main-nav ul li a {
    display: block !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  #site-navigation .main-nav ul li:last-child > a { border-bottom: 0 !important; }

  /* Hide inline helper nav links under search if present */
  .mp-nav-links { display: none !important; }

  /* Keep hero tidy */
  .mp-hero-image { display: none !important; }
  .mp-hero-inner {
    grid-template-columns: 1fr !important;
    padding: 40px 14px 48px !important;
    gap: 0 !important;
  }

  .mp-hero-cta-row a,
  .mp-hero-cta-row button {
    width: 100% !important;
    text-align: center !important;
    min-height: 50px !important;
    display: block !important;
  }
}

/* ─────────────────────────────────────────────────────────
   MOBILE CONTENT WIDTH — strip GP outer container padding
   ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #page,
  #content,
  #primary,
  #main,
  .site-content,
  .content-area,
  .site-main,
  .grid-container,
  .container,
  .one-container .site-content,
  .inside-article,
  .entry-content,
  .page-content,
  .woocommerce,
  .woocommerce-page .entry-content,
  .wc-cart,
  .woocommerce-checkout {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mp-section,
  .mp-hero,
  .sp-section,
  .mp-hero-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .mp-section-inner,
  .sp-inner { max-width: 100% !important; }
}

/* ── Mobile: footer bottom text wrapping ── */
@media (max-width: 768px) {
    .mpau-footer-bottom {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        font-size: 11px !important;
        text-align: center !important;
    }
    .mpau-footer-nav {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .mpau-footer-wrap {
        overflow-x: hidden !important;
    }
}



.mpau-cart-notices-top .woocommerce-notices-wrapper {
    max-width: 1350px;
    margin: 0 auto;
    padding: 12px 24px;
}
.mpau-cart-notices-top .woocommerce-notices-wrapper:empty {
    display: none;
}
.mpau-cart-notices-top .woocommerce-message,
.mpau-cart-notices-top .woocommerce-error,
.mpau-cart-notices-top .woocommerce-info {
    margin: 0 !important;
}
@media (max-width: 768px) {
    .mpau-cart-notices-top .woocommerce-notices-wrapper {
        padding: 10px 14px;
    }
}



/* HOTFIX — mobile header alignment + logo clipping */
@media (max-width: 768px) {
  .site-header .inside-header.grid-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .site-header .site-branding-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    overflow: visible !important;
  }

  .site-header .site-logo,
  .site-header .site-logo a {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .site-header .header-image.is-logo-image {
    width: min(66vw, 300px) !important;
    max-width: min(66vw, 300px) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  #site-navigation {
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  #site-navigation .inside-navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  #site-navigation .main-nav {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    order: 1 !important;
  }

  #site-navigation .main-nav > ul {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #site-navigation .main-nav > ul > li { display: none !important; }
  #site-navigation .main-nav > ul > li.mpau-cart-nav-item { display: flex !important; }

  .mpau-cart-nav {
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  #site-navigation .menu-toggle {
    order: 2 !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Open state menu panel */
  #site-navigation.toggled .main-nav > ul {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 12px !important;
    right: 12px !important;
    display: block !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 24px rgba(2,6,23,.12) !important;
    z-index: 9999 !important;
    padding: 6px 0 !important;
  }

  #site-navigation.toggled .main-nav > ul > li { display: block !important; }
  #site-navigation.toggled .main-nav > ul > li.mpau-cart-nav-item { display: none !important; }
}
/* HOTFIX — mobile opened menu full-width */
@media (max-width: 768px) {
  /* Use viewport-wide panel when hamburger is opened */
  #site-navigation.toggled .main-nav {
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    margin: 0 !important;
    z-index: 99999 !important;
  }

  #site-navigation.toggled .main-nav > ul {
    position: static !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: 0 10px 24px rgba(2,6,23,.12) !important;
    max-height: calc(100vh - 72px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #site-navigation.toggled .main-nav > ul > li > a {
    width: 100% !important;
  }
}