/* =========================================================================
   SAILAWAY - RESPONSIVE / TOUCH-DEVICE FIXES
   =========================================================================
   Loaded after every other stylesheet. Everything in here is additive:
   it only fills gaps the existing CSS didn't cover (mostly ":hover-only"
   UI that phones and tablets can never trigger, and a couple of missing
   breakpoints). Desktop hover behaviour is untouched.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1) Home page "QUICK VIEW" overlay (#featured-products)
   -------------------------------------------------------------------------
   .p-slant-1 / h5 default to display:none and only appear on
   ".card:hover" (see mainstyle.css). Touch devices have no hover state,
   so on a phone or tablet this button never becomes visible at all -
   Quick View / Direct Acquisition on the home page was unreachable.
   Below 992px we show it permanently, in place, instead of on hover.
---------------------------------------------------------------------------*/
@media (max-width: 991px) {
    #featured-products .p-slant-1 {
        display: block;
        position: static;
        box-shadow: none;
    }
    #featured-products h5 {
        display: block;
    }
    #featured-products .card:hover a {
        display: block;
    }
}


/* -------------------------------------------------------------------------
   2) Painting gallery hover overlay ("View Artwork")
   -------------------------------------------------------------------------
   Same problem as above: .painting-hover-overlay only reaches opacity:1
   on ".painting-card:hover" (see paintings.css), so it's invisible on
   touch devices. Below 992px it stays visible so the artwork can always
   be opened.
---------------------------------------------------------------------------*/
@media (max-width: 991px) {
    .painting-hover-overlay {
        opacity: 1;
        background: linear-gradient(180deg, rgba(13, 52, 65, 0) 55%, rgba(13, 52, 65, 0.82) 100%);
        justify-content: flex-end;
        padding-bottom: 18px;
    }
}


/* -------------------------------------------------------------------------
   3) Home page featured cards: readable 2-up layout on tablets
   -------------------------------------------------------------------------
   Bootstrap's col-sm-3 puts four cards per row starting at 768px, which
   is too cramped on a portrait tablet. This keeps four per row on
   desktop and stacks to one per row on phones (both already correct),
   and only adjusts the in-between tablet width.
---------------------------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 991px) {
    #featured-products .row > .col-sm-3 {
        width: 50%;
        float: left;
        margin-bottom: 24px;
    }
}


/* -------------------------------------------------------------------------
   4) General overflow safety net
   -------------------------------------------------------------------------
   Prevents any accidentally-oversized element (a long unbroken artwork
   title, a wide inline table, an embed) from forcing the whole page to
   scroll horizontally on a phone.
---------------------------------------------------------------------------*/
html {
    overflow-x: hidden;
}

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

table {
    max-width: 100%;
}

@media (max-width: 767px) {
    .table-responsive,
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* -------------------------------------------------------------------------
   5) Painting detail page: acquisition/spec table and frame swatches
   -------------------------------------------------------------------------
   Keeps the two-column layout from squeezing to the point of wrapping
   labels mid-word, and lets the frame-style row wrap onto a second line
   instead of overflowing on narrow phones.
---------------------------------------------------------------------------*/
@media (max-width: 480px) {
    .frame-selector-bar {
        flex-wrap: wrap;
    }
}

/* =========================================================================
   SAILAWAY HOME PAGE - FULL RESPONSIVE LAYOUT
   =========================================================================
   These rules specifically fix the home page at phone, tablet and desktop
   widths. They intentionally use the home-page classes added to
   front-page.php so other pages are not affected.
   ========================================================================= */

/* Keep every element inside the viewport. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* -------------------------------------------------------------------------
   HOME HERO
--------------------------------------------------------------------------- */
#slider-wrap {
    width: 100%;
    max-width: 100%;
}

#slider-wrap .heading {
    padding: 0 18px;
    box-sizing: border-box;
}

#slider-wrap .heading h1,
#slider-wrap .heading p {
    max-width: 100%;
    overflow-wrap: anywhere;
}

#slider-wrap .heading h1 span {
    display: inline-block;
}

@media (max-width: 767px) {
    #slider-wrap img {
        height: clamp(300px, 82vw, 350px);
    }

    #slider-wrap .heading h1 {
        font-size: clamp(22px, 7vw, 30px);
        line-height: 1.15;
        margin-bottom: 10px;
    }

    #slider-wrap .heading h1 span {
        padding-left: 0 !important;
        display: block;
    }

    #slider-wrap .heading p {
        font-size: clamp(14px, 4.5vw, 18px);
        line-height: 1.35;
        margin-bottom: 14px;
    }

    #slider-wrap .heading .btn {
        width: auto;
        max-width: 100%;
        font-size: 16px;
        padding: 9px 16px;
    }
}

/* -------------------------------------------------------------------------
   THREE SERVICE / INTRO CARDS
--------------------------------------------------------------------------- */
.home-services-row {
    display: flex;
    flex-wrap: wrap;
}

.home-service-col {
    display: flex;
    margin-bottom: 24px;
}

.home-service-col .laptop-products {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.home-service-col .laptop-products > img {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.home-service-col .slant-3 {
    box-sizing: border-box;
    overflow: hidden;
}

.home-service-col .slant-3 p {
    box-sizing: border-box;
    margin: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .home-service-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    .home-service-col .laptop-products > img {
        height: clamp(220px, 60vw, 300px);
    }

    .home-service-col .slant-1,
    .home-service-col .slant-2 {
        display: none;
    }

    .home-service-col .slant-3 {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        width: 72% !important;
        height: auto !important;
        min-height: 145px;
        margin: 0;
        padding: 20px 24px 18px;
        transform: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .home-service-col .slant-3 p {
        padding: 0 !important;
        font-size: 14px;
        line-height: 1.45;
    }

    .home-service-col .slant-3 .btn {
        align-self: flex-start;
        margin-top: 12px;
        max-width: 100%;
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .home-service-col .slant-3 {
        width: 82% !important;
        min-height: 140px;
        padding: 17px 20px 15px;
    }

    .home-service-col .slant-3 p {
        font-size: 13px;
    }
}

/* -------------------------------------------------------------------------
   FEATURED WORK SECTION HEADINGS
   Replaces the old negative-margin HR layout that caused the title and
   horizontal line to collide on narrow screens.
--------------------------------------------------------------------------- */
.home-section-heading-wrap {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.home-section-heading {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 18px;
    margin: 0;
    min-width: 0;
}

.home-section-heading-reverse {
    flex-direction: row;
}

.home-section-title {
    flex: 0 1 auto;
    min-width: 0;
}

.home-section-title h3 {
    margin: 0;
    padding: 0;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.2;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.home-section-rule {
    flex: 1 1 auto;
    min-width: 30px;
    height: 1px;
    background: #e0e0e0;
}

/* Old HR is no longer used for the home section headings. */
.home-featured-section .text-hr {
    display: none !important;
}

@media (max-width: 767px) {
    .home-section-heading,
    .home-section-heading-reverse {
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
    }

    .home-section-heading-reverse .home-section-title {
        order: 1;
        text-align: left;
    }

    .home-section-heading-reverse .home-section-rule {
        order: 2;
    }

    .home-section-title h3 {
        font-size: 19px;
        line-height: 1.25;
        text-align: left !important;
        white-space: normal;
    }

    .home-section-rule {
        width: 100%;
        min-width: 0;
    }
}

/* -------------------------------------------------------------------------
   HOME PRODUCT CARDS
--------------------------------------------------------------------------- */
.home-products-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.home-product-col {
    display: flex !important;
    flex-direction: column;
    min-width: 0;
    margin-bottom: 34px;
}

/* Bootstrap's .col-sm-3 begins at 576px. Explicitly restore the desired
   mobile-first widths so the cards can never remain 4-up on a phone. */
@media (max-width: 575.98px) {
    #featured-products .home-product-col {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    #featured-products .home-product-col {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }
}

@media (min-width: 992px) {
    #featured-products .home-product-col {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
    }
}

.home-product-card {
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
}

.home-product-card .headphone {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #eee;
}

.home-product-card .headphone > img {
    display: block;
    width: 100% !important;
    height: 260px !important;
    object-fit: cover;
}

.home-product-col .p-name {
    min-width: 0;
    min-height: 58px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.home-product-col .p-name p {
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: normal;
}

.home-product-col > h6 {
    min-width: 0;
    min-height: 42px;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

.home-product-price {
    min-height: 28px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.home-product-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    margin-top: auto;
}

.home-product-actions .btn,
.home-product-col > .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 32px;
    margin: 0 !important;
    padding: 5px 7px;
    line-height: 1.2;
    font-size: 11px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

.home-product-col > .home-product-actions:only-child {
    grid-template-columns: minmax(0, 180px);
    justify-content: center;
}

/* Make Quick View overlay safe on touch devices without changing desktop
   hover behaviour. */
@media (max-width: 991.98px) {
    .home-product-card .p-slant-1 {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 48px;
        margin: 0;
        box-shadow: none;
    }

    .home-product-card .p-slant-1 h5 {
        display: block;
        margin: 0;
        padding: 13px 5px;
        font-size: 14px;
        line-height: 1.2;
    }
}

@media (max-width: 767px) {
    .home-product-col {
        margin-bottom: 38px;
    }

    .home-product-card .headphone > img {
        height: auto !important;
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    .home-product-col .p-name {
        min-height: 0;
    }

    .home-product-col .p-name p {
        font-size: 15px;
        line-height: 1.35;
        margin-top: 9px;
    }

    .home-product-col > h6 {
        min-height: 0;
        font-size: 12px;
        line-height: 1.4 !important;
        margin-top: 4px !important;
    }

    .home-product-price {
        margin-top: 8px !important;
        margin-bottom: 10px !important;
        font-size: 14px;
    }

    .home-product-actions {
        gap: 8px;
    }

    .home-product-actions .btn,
    .home-product-col > .btn {
        min-height: 36px;
        font-size: 11px;
        padding: 6px 7px;
    }
}

@media (max-width: 360px) {
    .home-product-actions {
        grid-template-columns: 1fr;
    }

    .home-product-actions .btn,
    .home-product-col > .btn {
        min-height: 38px;
        font-size: 12px;
    }

    .home-product-col .p-name p {
        font-size: 14px;
    }
}

/* -------------------------------------------------------------------------
   HOME SECTION SPACING
--------------------------------------------------------------------------- */
.home-featured-section {
    clear: both;
    overflow: hidden;
}

.home-featured-section + .home-featured-section {
    margin-top: 8px;
}

.home-featured-section > .container:first-child {
    margin-bottom: 0;
}

.home-featured-section > .container:not(.home-section-heading-wrap) {
    padding-top: 20px !important;
}

@media (max-width: 767px) {
    .home-featured-section {
        padding-top: 26px !important;
    }

    .home-featured-section > .container:not(.home-section-heading-wrap) {
        padding-top: 18px !important;
    }
}

/* -------------------------------------------------------------------------
   VERY NARROW PHONES
--------------------------------------------------------------------------- */
@media (max-width: 360px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    #featured-products .container.home-section-heading-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    .home-product-col {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* -------------------------------------------------------------------------
   6) HOME PRODUCT CARDS - SINGLE CENTERED BUTTON FOR OUT-OF-STOCK ITEMS
   -------------------------------------------------------------------------
   In-stock products keep the two purchase actions (Quick Add + Select & Buy).
   Products that cannot currently be purchased render only one Quick View
   button. Center that single action instead of leaving it in a half-width
   grid column.
---------------------------------------------------------------------------*/
.home-product-actions:has(> .btn:only-child) {
    grid-template-columns: minmax(0, 180px) !important;
    justify-content: center !important;
}

/* Fallback for browsers where :has() is unavailable: the existing markup
   also gives the single-button container a dedicated helper class below. */
.home-product-actions.home-product-actions-single {
    grid-template-columns: minmax(0, 180px) !important;
    justify-content: center !important;
}


/* -------------------------------------------------------------------------
   7) TABLET + MOBILE HEADER NAVIGATION - WHITE MENU BAR
   -------------------------------------------------------------------------
   Desktop keeps the original dark navigation. On tablets and phones the
   navigation bar and expanded menu are white, with dark readable links.
---------------------------------------------------------------------------*/
@media (max-width: 991.98px) {
    #nav-wrapper,
    #nav-wrapper .my-nav,
    #nav-wrapper .navbar-collapse {
        background-color: #ffffff !important;
    }

    #nav-wrapper .my-nav {
        border-color: #e8e8e8 !important;
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.10);
    }

    #nav-wrapper .nav-link {
        color: #071b2a !important;
    }

    #nav-wrapper .nav-link:hover,
    #nav-wrapper .nav-link:focus {
        color: #2874f0 !important;
    }

    #nav-wrapper .navbar-toggler {
        border-color: #071b2a !important;
        background-color: #ffffff !important;
    }

    #nav-wrapper .navbar-toggler-icon {
        /* Bootstrap's navbar-light icon is kept, with a reliable dark icon
           even if another Bootstrap/theme rule changes the default. */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23071b2a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    #nav-wrapper .navbar-nav {
        background-color: #ffffff !important;
    }
}


/* =========================================================================
   SAILAWAY - SHOP / SITE-WIDE MOBILE HARDENING
   =========================================================================
   Added after the original responsive rules. These rules address the
   remaining phone/tablet issues found during the theme audit:
   - touch devices cannot use hover-only shop actions
   - shop toolbar and card controls can become cramped
   - long titles/labels can create horizontal overflow
   - framing, value-proposition and FAQ sections need mobile stacking
   - shop modals/drawer/floating cart need safe viewport spacing
   - WooCommerce tables/forms need usable small-screen layouts
   ========================================================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

iframe,
video,
embed,
object {
    max-width: 100%;
}

/* Header/search: prevent long controls from exceeding the viewport. */
#second-header .search-buttom,
#second-header .search-buttom form,
#second-header .input-group {
    max-width: 100%;
}

#second-header input,
#second-header button {
    min-width: 0;
}

@media (max-width: 575.98px) {
    #second-header .container,
    #nav-wrapper .container,
    #footer-wrapper .container,
    #power-by .container {
        width: 100%;
    }

    #second-header .logo img {
        max-width: min(250px, 82vw);
    }

    #second-header .share-on {
        gap: 6px;
        flex-wrap: wrap;
    }

    #nav-wrapper .navbar {
        padding-left: 10px;
        padding-right: 10px;
    }

    #nav-wrapper .navbar-collapse {
        max-width: 100%;
        overflow-x: hidden;
    }

    #nav-wrapper .navbar-nav {
        width: 100%;
    }

    #nav-wrapper .nav-link {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* ========================= SHOP ========================= */

.shop-body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.shop-body .container {
    max-width: 100%;
}

.shop-hero-content,
.shop-toolbar,
.shop-framing-banner,
.shop-value-grid,
.shop-products-grid,
.shop-quickview-grid {
    min-width: 0;
}

.shop-hero-title,
.shop-hero-subtitle,
.shop-card-title,
.shop-card-cat,
.shop-card-edition,
.shop-frame-pill,
.shop-framing-text,
.shop-value-info,
.shop-accordion-header span {
    overflow-wrap: anywhere;
    word-break: normal;
}

.shop-hero-badges {
    min-width: 0;
}

.shop-tabs-section {
    max-width: 100%;
}

.shop-categories-nav {
    min-width: 0;
    max-width: 100%;
    padding-left: 2px;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.shop-cat-btn {
    flex: 0 0 auto;
}

.shop-toolbar-right {
    min-width: 0;
}

.shop-search-box input,
.shop-select-filter,
.shop-cart-header-trigger {
    min-height: 42px;
}

.shop-products-grid {
    min-width: 0;
}

.shop-product-card {
    min-width: 0;
}

.shop-card-content,
.shop-card-footer,
.shop-price-wrap {
    min-width: 0;
}

.shop-card-title {
    max-width: 100%;
}

.shop-price-main,
.shop-price-compare {
    overflow-wrap: anywhere;
}

.shop-add-cart-btn,
.shop-quick-btn,
.shop-gold-btn,
.shop-outline-btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .shop-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}

@media (max-width: 991.98px) {
    /* Quick actions must be reachable without hover on tablets/phones. */
    .shop-card-overlay-actions {
        opacity: 1;
        visibility: visible;
        align-items: flex-end;
        padding: 12px;
        background: linear-gradient(
            180deg,
            rgba(19,39,67,0) 42%,
            rgba(19,39,67,.76) 100%
        );
    }

    .shop-quick-btn {
        min-height: 40px;
        padding: 9px 12px;
        box-shadow: 0 3px 10px rgba(0,0,0,.18);
    }

    /* Avoid a fake hover lift/zoom on touch layouts. */
    .shop-product-card:hover {
        transform: none;
    }

    .shop-product-card:hover .shop-card-media img {
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .shop-breadcrumb-section {
        padding: 12px 0 8px;
    }

    .shop-breadcrumb {
        font-size: 11px;
        gap: 6px;
        overflow-wrap: anywhere;
    }

    .shop-hero {
        padding: 34px 0 30px;
    }

    .shop-hero-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .shop-hero-eyebrow {
        max-width: 100%;
        font-size: 10px;
        letter-spacing: .12em;
        padding: 5px 10px;
        overflow-wrap: anywhere;
    }

    .shop-hero-title {
        font-size: clamp(24px, 7.5vw, 30px);
        line-height: 1.18;
        letter-spacing: .02em;
    }

    .shop-hero-subtitle {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .shop-hero-badges {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: 8px;
    }

    .shop-hero-badge-item {
        justify-content: flex-start;
        min-width: 0;
        font-size: 12px;
        padding: 7px 10px;
    }

    .shop-tabs-section {
        position: sticky;
        top: 0;
    }

    .shop-cat-btn {
        font-size: 13px;
        padding: 9px 13px;
    }

    .shop-toolbar {
        margin: 18px 0 18px;
        padding: 13px;
        gap: 12px;
    }

    .shop-search-box {
        width: 100%;
        flex: 1 1 100%;
        max-width: none;
    }

    .shop-toolbar-right {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        width: 100%;
        gap: 9px;
    }

    .shop-result-count {
        grid-column: 1 / -1;
        text-align: center;
        order: -1;
    }

    .shop-select-filter,
    .shop-cart-header-trigger {
        width: 100%;
        justify-content: center;
        min-width: 0;
    }

    .shop-products-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        margin-bottom: 38px;
    }

    .shop-card-media {
        padding-top: 78%;
    }

    .shop-card-content {
        padding: 15px 15px 16px;
    }

    .shop-card-footer {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .shop-price-wrap {
        flex: 1 1 110px;
    }

    .shop-add-cart-btn {
        flex: 1 1 150px;
        min-height: 42px;
    }

    .shop-value-strip {
        padding: 30px 0;
        margin: 30px 0 40px;
    }

    .shop-value-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .shop-framing-banner {
        padding: 26px 18px;
        gap: 24px;
        margin-bottom: 40px;
    }

    .shop-framing-text h3 {
        font-size: 22px;
        line-height: 1.25;
    }

    .shop-frame-options {
        gap: 8px;
    }

    .shop-frame-pill {
        width: 100%;
        font-size: 11.5px;
        padding: 7px 10px;
    }

    .shop-framing-cta {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .shop-gold-btn,
    .shop-outline-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        padding: 11px 14px;
    }

    .shop-accordion-header {
        padding: 14px 15px;
        gap: 12px;
        font-size: 14px;
        line-height: 1.4;
    }

    .shop-accordion-header i {
        flex: 0 0 auto;
    }

    .shop-accordion-body {
        padding: 0 15px 16px;
        font-size: 13px;
    }

    .shop-cart-drawer {
        width: 100%;
        max-width: 100%;
    }

    .shop-cart-header {
        padding: 15px 16px;
    }

    .shop-cart-items-list {
        padding: 15px 16px;
    }

    .shop-cart-footer {
        padding: 15px 16px;
        padding-bottom: calc(15px + env(safe-area-inset-bottom));
    }

    .shop-floating-cart-btn {
        right: 14px;
        bottom: 76px;
        width: 52px;
        height: 52px;
        font-size: 19px;
    }

    .shop-toast-container {
        left: 12px;
        right: 12px;
        bottom: 76px;
    }

    .shop-toast {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .shop-modal-backdrop {
        align-items: flex-start;
        padding: 10px;
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    .shop-modal-card {
        width: 100%;
        max-height: calc(100dvh - 20px);
        border-radius: 10px;
    }

    .shop-quickview-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px;
    }

    .shop-quickview-details h2 {
        font-size: 20px;
        line-height: 1.25;
    }
}

@media (max-width: 420px) {
    .shop-toolbar-right {
        grid-template-columns: 1fr;
    }

    .shop-result-count {
        grid-column: auto;
    }

    .shop-card-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .shop-price-wrap {
        width: 100%;
    }

    .shop-add-cart-btn {
        width: 100%;
    }

    .shop-quickview-grid {
        padding: 14px;
    }

    .shop-modal-close {
        top: 10px;
        right: 10px;
    }
}

/* ========================= WOOCOMMERCE ========================= */

.woocommerce,
.woocommerce-page {
    max-width: 100%;
    overflow-x: clip;
}

.woocommerce img,
.woocommerce-page img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 767.98px) {
    .woocommerce .quantity .qty {
        min-height: 42px;
        width: 68px;
    }

    .woocommerce table.shop_table {
        font-size: 13px;
    }

    .woocommerce table.shop_table th,
    .woocommerce table.shop_table td {
        padding: 11px 9px;
    }

    .woocommerce table.cart td.product-name {
        min-width: 150px;
    }

    .woocommerce .cart-collaterals .cart_totals,
    .woocommerce-checkout #order_review,
    .woocommerce .woocommerce-order-details,
    .woocommerce .woocommerce-customer-details {
        padding: 16px;
    }

    .woocommerce form .form-row input.input-text,
    .woocommerce form .form-row textarea,
    .woocommerce form .form-row select {
        min-height: 44px;
        font-size: 16px; /* prevents iOS Safari zoom on focused inputs */
    }

    .woocommerce .coupon {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .woocommerce .coupon input.input-text {
        flex: 1 1 160px;
        min-width: 0;
        margin-right: 0;
    }

    .woocommerce .coupon .button {
        flex: 0 1 auto;
        min-height: 44px;
    }

    .woocommerce form.checkout_coupon,
    .woocommerce form.login,
    .woocommerce form.register {
        padding: 16px;
    }
}

/* ========================= FOOTER / MEDIA ========================= */

@media (max-width: 767.98px) {
    #footer-wrapper .row > [class*="col-"] {
        min-width: 0;
    }

    #footer-wrapper .f-logo p {
        max-width: 100%;
    }

    .footer-shorts-wrapper {
        width: 100%;
    }

    .footer-shorts-frame {
        width: min(100%, 280px);
        max-width: 280px;
        min-height: 280px;
    }

    .footer-shorts-frame iframe {
        width: 100%;
        min-height: 280px;
    }

    #power-by p {
        overflow-wrap: anywhere;
    }
}

/* ========================= ACCESSIBLE TOUCH TARGETS ========================= */

@media (max-width: 767.98px) {
    button,
    input[type="button"],
    input[type="submit"],
    select,
    .nav-link {
        touch-action: manipulation;
    }

    .shop-cat-btn,
    .shop-quick-btn,
    .shop-add-cart-btn,
    .shop-cart-header-trigger,
    .shop-cart-close,
    .shop-floating-cart-btn,
    .shop-modal-close {
        min-height: 42px;
    }
}

/* Honor reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* =====================================================================
   YOUR CUSTOM CSS GOES BELOW

   This file loads AFTER every parent stylesheet, so a plain rule here
   beats the parent without needing !important. Match the parent's
   selector or be slightly more specific.

   The parent's design tokens are available to reuse:
     --shop-gold   --shop-navy   --shop-text-muted   --shop-radius
===================================================================== */

/* Example: change the gold accent used across the shop.
.shop-body {
  --shop-gold: #b8873f;
  --shop-gold-dark: #966d2e;
}
*/

.shop-hero-title {

    color: #ffffff!important;
}

/* Child-theme safety net: keep the storefront usable on narrow screens
   even when a parent theme update changes an earlier selector. */
@media (max-width: 991.98px) {
    .shop-card-overlay-actions {
        opacity: 1;
        visibility: visible;
        align-items: flex-end;
        padding: 12px;
        background: linear-gradient(180deg, rgba(19,39,67,0) 42%, rgba(19,39,67,.76) 100%);
    }
    .shop-product-card:hover {
        transform: none;
    }
    .shop-product-card:hover .shop-card-media img {
        transform: none;
    }
}
@media (max-width: 767.98px) {
    .shop-toolbar-right {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        width: 100%;
    }
    .shop-result-count {
        grid-column: 1 / -1;
        text-align: center;
        order: -1;
    }
    .shop-select-filter,
    .shop-cart-header-trigger {
        width: 100%;
        min-width: 0;
        justify-content: center;
    }
    .shop-products-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .shop-framing-banner,
    .shop-quickview-grid {
        grid-template-columns: 1fr;
    }
    .shop-floating-cart-btn {
        bottom: 76px;
        right: 14px;
    }
}
@media (max-width: 420px) {
    .shop-toolbar-right,
    .shop-card-footer {
        grid-template-columns: 1fr;
    }
    .shop-result-count {
        grid-column: auto;
    }
}

/* =====================================================================
   SAILAWAY SHOP — HARD MOBILE LAYOUT (<= 511px)
   This is intentionally scoped to the shop so the desktop/tablet design
   remains unchanged. It removes every common source of horizontal overflow
   and makes each shop control fit a 320–511px viewport.
===================================================================== */
@media screen and (max-width: 511px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .shop-body,
    .shop-body * {
        box-sizing: border-box;
    }

    .shop-body {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden !important;
    }

    .shop-body .container {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Breadcrumb */
    .shop-breadcrumb-section {
        width: 100%;
        padding: 10px 0 7px;
    }

    .shop-breadcrumb {
        width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Hero */
    .shop-hero {
        width: 100%;
        padding: 28px 0 24px;
    }

    .shop-hero::before {
        width: 280px;
        height: 280px;
        right: -150px;
        top: -100px;
    }

    .shop-hero-content {
        width: 100%;
        max-width: none;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .shop-hero-eyebrow {
        display: inline-flex;
        max-width: 100%;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 9px;
        line-height: 1.35;
        letter-spacing: .08em;
        padding: 5px 9px;
        margin-bottom: 12px;
    }

    .shop-hero-title {
        width: 100%;
        max-width: 100%;
        font-size: clamp(21px, 7.1vw, 27px) !important;
        line-height: 1.18;
        letter-spacing: 0;
        overflow-wrap: anywhere;
        word-break: normal;
        margin-bottom: 12px;
    }

    .shop-hero-subtitle {
        width: 100%;
        max-width: 100%;
        font-size: 13px;
        line-height: 1.5;
        overflow-wrap: anywhere;
        margin-bottom: 17px;
    }

    .shop-hero-badges {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 6px;
        margin-top: 0;
    }

    .shop-hero-badge-item {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 11px;
        line-height: 1.3;
        padding: 7px 9px;
    }

    .shop-hero-badge-item i {
        flex: 0 0 16px;
        text-align: center;
    }

    /* Category tabs: horizontal scroll is intentional, never page scroll. */
    .shop-tabs-section {
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
        position: sticky;
        top: 0;
    }

    .shop-tabs-section .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    .shop-categories-nav {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 5px 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .shop-cat-btn {
        flex: 0 0 auto;
        min-width: max-content;
        min-height: 40px;
        padding: 8px 11px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Toolbar: every control gets its own row at very narrow widths. */
    .shop-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        min-width: 0;
        padding: 11px;
        margin: 14px 0 16px;
        gap: 9px;
        border-radius: 7px;
    }

    .shop-search-box {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: none;
    }

    .shop-search-box input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 43px;
        padding-left: 36px;
        font-size: 16px;
    }

    .shop-toolbar-right {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        min-width: 0;
        gap: 8px;
    }

    .shop-result-count {
        display: block;
        width: 100%;
        min-width: 0;
        text-align: center;
        line-height: 1.35;
        font-size: 12px;
        order: -1;
    }

    .shop-select-filter,
    .shop-cart-header-trigger {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 43px;
        justify-content: center;
        align-items: center;
        white-space: normal;
    }

    .shop-select-filter {
        padding: 9px 34px 9px 11px;
    }

    /* Product catalogue */
    .shop-products-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        gap: 14px;
        margin-bottom: 30px;
    }

    .shop-product-card {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        transform: none !important;
    }

    .shop-card-media {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-top: 75%;
    }

    .shop-card-media img {
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none !important;
    }

    /* Touch devices have no reliable hover. Keep actions usable without
       creating a full-width overlay that can force the card wider. */
    .shop-card-overlay-actions,
    .shop-product-card:hover .shop-card-overlay-actions {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        height: auto;
        min-width: 0;
        padding: 8px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        align-items: stretch;
        justify-content: stretch;
        opacity: 1;
        visibility: visible;
        background: linear-gradient(180deg, rgba(19,39,67,0), rgba(19,39,67,.82));
    }

    .shop-quick-btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 8px 5px;
        justify-content: center;
        font-size: 10px;
        line-height: 1.15;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .shop-card-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 13px;
        overflow: hidden;
    }

    .shop-card-cat,
    .shop-card-title,
    .shop-card-edition,
    .shop-card-rating {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .shop-card-cat {
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .shop-card-title {
        min-height: 0;
        font-size: 15px;
        line-height: 1.35;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .shop-card-rating {
        flex-wrap: wrap;
        gap: 4px;
        line-height: 1.35;
    }

    .shop-card-rating .review-text {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .shop-card-edition {
        align-items: flex-start;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .shop-card-edition i {
        flex: 0 0 auto;
        margin-top: 2px;
    }

    .shop-card-footer {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        min-width: 0;
        gap: 9px;
        align-items: stretch;
    }

    .shop-price-wrap,
    .shop-price-main,
    .shop-price-compare {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .shop-price-main {
        font-size: 17px;
        line-height: 1.25;
    }

    .shop-add-cart-btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 44px;
        justify-content: center;
        padding: 10px 12px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Empty state */
    .shop-empty-state {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Value/guarantee strip */
    .shop-value-strip {
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
        padding: 27px 0;
        margin: 26px 0 34px;
    }

    .shop-value-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        min-width: 0;
        gap: 18px;
    }

    .shop-value-card {
        width: 100%;
        min-width: 0;
        gap: 11px;
    }

    .shop-value-icon {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
    }

    .shop-value-info {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Framing banner */
    .shop-framing-banner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 21px 14px;
        gap: 18px;
        margin-bottom: 32px;
        border-radius: 9px;
        overflow: hidden;
    }

    .shop-framing-text,
    .shop-framing-image {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .shop-framing-text h3 {
        font-size: 20px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .shop-framing-text p {
        font-size: 13px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .shop-frame-options {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        gap: 7px;
        margin-bottom: 18px;
    }

    .shop-frame-pill {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 7px 9px;
        font-size: 11px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .shop-framing-cta {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        min-width: 0;
        gap: 8px;
    }

    .shop-gold-btn,
    .shop-outline-btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 10px 12px;
        justify-content: center;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .shop-framing-image img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* FAQ */
    .shop-accordion-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .shop-accordion-header {
        min-width: 0;
        padding: 13px 12px;
        gap: 9px;
    }

    .shop-accordion-header span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .shop-accordion-body {
        min-width: 0;
        padding: 0 12px 14px;
        overflow-wrap: anywhere;
    }

    /* Cart drawer */
    .shop-cart-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
        right: 0;
    }

    .shop-cart-header,
    .shop-cart-items-list,
    .shop-cart-footer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .shop-cart-item {
        min-width: 0;
        gap: 10px;
    }

    .shop-cart-item-info,
    .shop-cart-item-title,
    .shop-cart-item-variant {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Quick-view modal */
    .shop-modal-backdrop {
        width: 100vw;
        max-width: 100vw;
        padding: 8px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .shop-modal-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        max-height: calc(100dvh - 16px);
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 8px;
    }

    .shop-quickview-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        min-width: 0;
        gap: 14px;
        padding: 13px;
    }

    .shop-quickview-img,
    .shop-quickview-details {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .shop-quickview-img img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .shop-quickview-details h2,
    .shop-quickview-desc,
    .shop-specs-box {
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .shop-quickview-details h2 {
        font-size: 19px;
        line-height: 1.25;
    }

    .shop-quickview-price {
        font-size: 21px;
        overflow-wrap: anywhere;
    }

    .shop-option-group,
    .shop-size-select,
    .shop-frame-select {
        min-width: 0;
        max-width: 100%;
    }

    .shop-quickview-details [style*="display:flex"] {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    .shop-quickview-details [style*="display:flex"] > .shop-gold-btn {
        flex: 1 1 100% !important;
    }

    .shop-modal-close {
        top: 8px;
        right: 8px;
        width: 34px;
        height: 34px;
    }

    /* Floating UI stays inside the viewport. */
    .shop-floating-cart-btn {
        right: 10px;
        bottom: calc(68px + env(safe-area-inset-bottom));
        width: 50px;
        height: 50px;
    }

    .shop-toast-container {
        left: 10px;
        right: 10px;
        bottom: calc(68px + env(safe-area-inset-bottom));
    }

    .shop-toast {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* Kill accidental horizontal margins/padding from third-party content
       only inside the shop main area. */
    .shop-body iframe,
    .shop-body video,
    .shop-body canvas,
    .shop-body embed,
    .shop-body object,
    .shop-body pre {
        max-width: 100% !important;
    }

    .shop-body pre {
        overflow-x: auto;
    }
}

@media screen and (max-width: 359px) {
    .shop-body .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .shop-hero-title {
        font-size: 20px !important;
    }

    .shop-hero-subtitle {
        font-size: 12.5px;
    }

    .shop-card-content {
        padding: 12px;
    }

    .shop-card-overlay-actions,
    .shop-product-card:hover .shop-card-overlay-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .shop-quick-btn {
        min-height: 38px;
    }
}


/* =====================================================================
   SAILAWAY GLOBAL CONTENT WIDTH — 1280px
   Keep the same horizontal alignment for header, navigation, page content,
   shop, WooCommerce surfaces and footer.  Mobile remains fluid.
   This is CSS-only and does not alter any functionality or markup.
===================================================================== */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1280px !important;
    }
}

/* The shop previously overrode Bootstrap's container with max-width:100%,
   which made it wider than the header/footer. Give it the same 1280px rail. */
.shop-body .container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* Keep standard gutters while allowing the 1280px content rail to breathe. */
@media (min-width: 1200px) {
    .shop-body .container {
        max-width: 1280px !important;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Fluid tablet/phone behavior: never create a horizontal scroll bar. */
@media (max-width: 1199.98px) {
    .container,
    .shop-body .container {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .container,
    .shop-body .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    #second-header .container,
    #nav-wrapper .container,
    #footer-wrapper .container,
    #power-by .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 359px) {
    .container,
    .shop-body .container,
    #second-header .container,
    #nav-wrapper .container,
    #footer-wrapper .container,
    #power-by .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Prevent common fixed/min-width children from breaking the new rail. */
.container > * {
    min-width: 0;
    max-width: 100%;
}

img,
svg,
video,
iframe,
embed,
object,
canvas {
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .row {
        max-width: 100%;
    }
}

/* ========================================================================
   HOME PAGE — FINAL MOBILE CENTERING / EDGE-TO-EDGE FIX
   Keep the existing desktop design and functionality intact. Bootstrap's
   .row negative margins and several legacy home-page offsets could make
   the home page appear shifted left/right on narrow phones. The rules below
   establish a clean mobile content rail and neutralize only those offsets.
   ======================================================================== */
@media (max-width: 767.98px) {
    body.home,
    body.front-page {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* A row must stay inside the same rail as its parent container. */
    body.home #letest-products .container,
    body.home #featured-products .container,
    body.front-page #letest-products .container,
    body.front-page #featured-products .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box;
    }

    body.home #letest-products .row,
    body.home #featured-products .row,
    body.front-page #letest-products .row,
    body.front-page #featured-products .row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* Remove Bootstrap column gutters here and give each home card its own
       controlled width. This prevents the 15px row/column compensation from
       creating an off-center card on phones. */
    body.home .home-service-col,
    body.home .home-product-col,
    body.front-page .home-service-col,
    body.front-page .home-product-col {
        box-sizing: border-box;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.home .home-service-col,
    body.front-page .home-service-col {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.home .home-product-col,
    body.front-page .home-product-col {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* The actual visual card is centered inside the mobile rail. */
    body.home .home-service-col .laptop-products,
    body.home .home-product-card,
    body.front-page .home-service-col .laptop-products,
    body.front-page .home-product-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    /* Keep the three service overlays relative to the card rather than the
       old desktop 96px/15px offsets. */
    body.home .home-service-col .slant-3,
    body.front-page .home-service-col .slant-3 {
        left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Section headings use the exact same rail as their product rows. */
    body.home .home-section-heading-wrap,
    body.front-page .home-section-heading-wrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box;
    }

    body.home .home-section-heading,
    body.front-page .home-section-heading {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    /* Hero text is centered against the viewport, never against an offset
       child element. */
    body.home #slider-wrap .heading,
    body.front-page #slider-wrap .heading {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        box-sizing: border-box;
    }

    body.home #slider-wrap .heading h1,
    body.home #slider-wrap .heading p,
    body.home #slider-wrap .heading .btn,
    body.front-page #slider-wrap .heading h1,
    body.front-page #slider-wrap .heading p,
    body.front-page #slider-wrap .heading .btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Prevent decorative/legacy transforms from increasing the visual box. */
    body.home .home-service-col .slant-1,
    body.home .home-service-col .slant-2,
    body.front-page .home-service-col .slant-1,
    body.front-page .home-service-col .slant-2 {
        max-width: 100% !important;
    }

    /* Featured image and overlay are always centered and contained. */
    body.home .home-product-card .headphone,
    body.front-page .home-product-card .headphone {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.home .home-product-card .headphone > img,
    body.front-page .home-product-card .headphone > img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 359.98px) {
    body.home #letest-products .container,
    body.home #featured-products .container,
    body.front-page #letest-products .container,
    body.front-page #featured-products .container,
    body.home .home-section-heading-wrap,
    body.front-page .home-section-heading-wrap {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}