/*==========================================================================
  PaceX — Shopify-style storefront layer
  Sits on top of main.css. Keeps the existing brand palette:
  black / white, #717fe0 accent, #ff5a36 sale accent.
==========================================================================*/

:root {
    --px-black: #000;
    --px-white: #fff;
    --px-ink: #121212;
    --px-muted: #6f6f6f;
    --px-line: #e6e6e6;
    --px-soft: #f5f5f5;
    --px-accent: #717fe0;
    --px-sale: #ff5a36;
    --px-radius: 12px;
    --px-radius-lg: 18px;
}

/*--------------------------------------------------------------------------
  1. Typography & section rhythm
--------------------------------------------------------------------------*/
.px-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.px-section-head h3,
.px-section-title {
    margin: 0;
    color: var(--px-ink);
    font-size: clamp(1.35rem, 4.4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-transform: uppercase;
}

.px-section-sub {
    margin: 6px 0 0;
    color: var(--px-muted);
    font-size: 13px;
    letter-spacing: 0.02em;
}

.px-section-link {
    flex: none;
    color: var(--px-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: underline;
    text-transform: uppercase;
    white-space: nowrap;
}

.px-section-link:hover {
    color: var(--px-accent);
}

/*--------------------------------------------------------------------------
  2. Product cards — uniform tiles, 2-up on mobile
--------------------------------------------------------------------------*/
.isotope-grid {
    margin-left: -6px;
    margin-right: -6px;
}

@media (max-width: 767px) {
    .isotope-grid > [class*="col-"] {
        padding-left: 6px;
        padding-right: 6px;
        padding-bottom: 22px !important;
    }
}

.block2 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.block2-pic {
    display: block !important;
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--px-soft);
    border-radius: var(--px-radius);
}

/* Square-ish tile keeps every card the same height, like a Shopify grid. */
.block2-pic::before {
    content: "";
    display: block;
    padding-top: 125%;
}

.block2-pic > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s ease;
}

.block2-pic:hover > img {
    transform: scale(1.05);
}

/* Sale badge as a flat pill in the brand accent */
.label-onsale::after {
    top: 10px !important;
    left: 10px !important;
    padding: 5px 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    background-color: var(--px-sale) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    z-index: 3;
}

/* Quick-view / quick-add button: hover reveal on desktop, always-on bar on touch */
.block2-btn {
    z-index: 4;
    height: 42px;
    min-width: 150px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background-color: var(--px-white) !important;
    border: 1px solid var(--px-black) !important;
    color: var(--px-ink) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    transition: bottom 0.35s ease, background-color 0.25s ease, color 0.25s ease;
}

.block2-btn:hover {
    background-color: var(--px-black) !important;
    color: var(--px-white) !important;
}

.block2-txt {
    padding-top: 12px !important;
}

.block2-txt .js-name-b2 {
    display: block;
    color: var(--px-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.block2-txt .stext-105 {
    font-size: 14px;
    font-weight: 700;
    color: var(--px-ink);
}

.block2-txt .text-decoration-line-through {
    font-size: 12px;
    font-weight: 500;
    color: var(--px-muted) !important;
    opacity: 0.9;
}

.block2-txt .text-success {
    color: var(--px-sale) !important;
}

/* Price line reads as one row: was-price then now-price */
.px-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}

@media (max-width: 767px) {
    .block2-pic {
        border-radius: 10px;
    }

    /* Touch devices get a permanent add affordance instead of hover-reveal. */
    .block2-btn {
        bottom: 10px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto;
        min-width: 0;
        transform: none !important;
        height: 38px;
        font-size: 10px;
        letter-spacing: 0.1em;
        opacity: 1 !important;
        background-color: rgba(255, 255, 255, 0.94) !important;
    }

    .block2-txt .js-name-b2 {
        font-size: 12px;
    }

    .block2-txt .stext-105 {
        font-size: 13px;
    }

    .block2-txt-child2 {
        width: 18px;
    }

    .block2-txt-child1 {
        width: calc(100% - 18px);
    }
}

/* Category banner tiles */
.block1 {
    overflow: hidden;
    border-radius: var(--px-radius-lg);
}

.block1 img {
    transition: transform 0.6s ease;
}

.block1:hover img {
    transform: scale(1.04);
}

/*--------------------------------------------------------------------------
  3. Trust strip
--------------------------------------------------------------------------*/
.px-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    background-color: var(--px-line);
    border-top: 1px solid var(--px-line);
    border-bottom: 1px solid var(--px-line);
    list-style: none;
}

.px-trust li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 22px 10px;
    background-color: var(--px-white);
    text-align: center;
}

.px-trust i {
    font-size: 20px;
    color: var(--px-ink);
}

.px-trust strong {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--px-ink);
}

.px-trust span {
    font-size: 11px;
    color: var(--px-muted);
    line-height: 1.4;
}

@media (max-width: 575px) {
    .px-trust li {
        padding: 16px 6px;
    }

    .px-trust strong {
        font-size: 10px;
        letter-spacing: 0.05em;
    }

    .px-trust span {
        display: none;
    }
}

/*--------------------------------------------------------------------------
  4. Cart drawer — the Shopify slide-out
--------------------------------------------------------------------------*/
.header-cart {
    padding-left: 28px !important;
    padding-right: 28px !important;
}

@media (max-width: 575px) {
    .header-cart {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

.header-cart-title {
    align-items: center;
    padding-top: 26px;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--px-line);
}

.header-cart-title .mtext-103 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.px-drawer-count {
    display: inline-block;
    margin-left: 8px;
    color: var(--px-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.header-cart-item {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--px-line);
}

.header-cart-item-img {
    border-radius: 8px;
    overflow: hidden;
}

.header-cart-item-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px !important;
    color: var(--px-ink);
}

.header-cart-item-info {
    font-size: 12px;
    color: var(--px-muted);
}

.header-cart-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 22px 0 6px !important;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    border-top: 1px solid var(--px-line);
}

.px-drawer-note {
    margin: 0 0 16px;
    color: var(--px-muted);
    font-size: 11px;
    letter-spacing: 0.04em;
}

.px-drawer-empty {
    padding: 40px 0;
    color: var(--px-muted);
    font-size: 13px;
    text-align: center;
}

/* Primary drawer CTA — the whole point of the drawer */
.px-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid var(--px-black);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.px-btn-primary {
    color: var(--px-white);
    background-color: var(--px-black);
}

.px-btn-primary:hover,
.px-btn-primary:focus {
    color: var(--px-black);
    background-color: var(--px-white);
    text-decoration: none;
}

.px-btn-ghost {
    margin-top: 10px;
    color: var(--px-ink);
    background-color: transparent;
    border-color: transparent;
    text-decoration: underline;
    letter-spacing: 0.1em;
    min-height: 44px;
}

.px-btn-ghost:hover {
    color: var(--px-accent);
    text-decoration: underline;
}

.header-cart-buttons {
    display: block !important;
    padding-bottom: 30px;
}

/*--------------------------------------------------------------------------
  5. Toast + sticky mobile checkout bar
--------------------------------------------------------------------------*/
.px-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    z-index: 100001;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    color: var(--px-white);
    font-size: 13px;
    font-weight: 600;
    background-color: var(--px-black);
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 14px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.px-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.px-toast i {
    font-size: 16px;
}

.px-sticky-cart {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1098;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background-color: var(--px-white);
    border-top: 1px solid var(--px-line);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.1);
    transform: translateY(120%);
    transition: transform 0.3s ease;
}

.px-sticky-cart.is-visible {
    transform: translateY(0);
}

.px-sticky-cart__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.px-sticky-cart__label {
    color: var(--px-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.px-sticky-cart__total {
    color: var(--px-ink);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
}

.px-sticky-cart .px-btn {
    width: auto;
    flex: 1;
    min-height: 48px;
    font-size: 11px;
    letter-spacing: 0.14em;
}

/* Keep the WhatsApp bubble clear of the sticky bar */
body.px-has-sticky-cart .btn-whatsapp-chat {
    bottom: 88px;
}

@media (min-width: 992px) {
    .px-sticky-cart {
        display: none;
    }
}

/*--------------------------------------------------------------------------
  6. Checkout page
--------------------------------------------------------------------------*/
.px-checkout {
    padding: 26px 0 40px;
}

.px-checkout-head {
    margin-bottom: 22px;
    text-align: center;
}

.px-checkout-head h1 {
    margin: 0;
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.px-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--px-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.px-steps span.is-active {
    color: var(--px-ink);
    text-decoration: underline;
}

.px-card {
    padding: 24px;
    background-color: var(--px-white);
    border: 1px solid var(--px-line);
    border-radius: var(--px-radius-lg);
}

.px-card + .px-card {
    margin-top: 18px;
}

.px-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--px-ink);
}

.px-card__title .px-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    color: var(--px-white);
    font-size: 11px;
    background-color: var(--px-black);
    border-radius: 50%;
    letter-spacing: 0;
}

/* Order summary — collapsible on mobile, always open on desktop */
.px-summary {
    background-color: var(--px-soft);
    border: 1px solid var(--px-line);
    border-radius: var(--px-radius-lg);
    overflow: hidden;
}

.px-summary__toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    color: var(--px-ink);
    font-size: 13px;
    font-weight: 700;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.px-summary__toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.06em;
}

.px-summary__toggle .zmdi-chevron-down {
    transition: transform 0.25s ease;
}

.px-summary.is-open .px-summary__toggle .zmdi-chevron-down {
    transform: rotate(180deg);
}

.px-summary__body {
    padding: 18px;
}

.px-line-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--px-line);
}

.px-line-item:first-child {
    padding-top: 0;
}

.px-line-item__media {
    position: relative;
    flex: none;
    width: 64px;
    height: 64px;
    background-color: var(--px-white);
    border: 1px solid var(--px-line);
    border-radius: 10px;
    overflow: hidden;
}

.px-line-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.px-line-item__info {
    flex: 1;
    min-width: 0;
}

.px-line-item__name {
    display: block;
    color: var(--px-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.px-line-item__unit {
    display: block;
    margin-top: 2px;
    color: var(--px-muted);
    font-size: 12px;
}

.px-line-item__total {
    flex: none;
    color: var(--px-ink);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.px-qty {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    background-color: var(--px-white);
    border: 1px solid var(--px-line);
    border-radius: 999px;
    overflow: hidden;
}

.px-qty .btn-num-product-down1,
.px-qty .btn-num-product-up1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--px-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.px-qty .btn-num-product-down1:hover,
.px-qty .btn-num-product-up1:hover {
    background-color: var(--px-soft);
}

.px-qty input {
    width: 36px;
    height: 34px;
    padding: 0;
    color: var(--px-ink);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    background: transparent;
    border: 0;
    outline: none;
}

.px-line-remove {
    margin-left: 10px;
    padding: 0;
    color: var(--px-muted);
    font-size: 12px;
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.px-line-remove:hover {
    color: var(--px-sale);
}

.px-totals {
    padding-top: 14px;
}

.px-totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    color: var(--px-muted);
    font-size: 13px;
}

.px-totals__row strong {
    color: var(--px-ink);
    font-weight: 600;
}

.px-totals__row--grand {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--px-line);
    color: var(--px-ink);
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.px-totals__row--grand span:last-child {
    font-size: 20px;
}

/* Promo code row */
.px-promo {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.px-promo input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    color: var(--px-ink);
    font-size: 13px;
    background-color: var(--px-white);
    border: 1px solid var(--px-line);
    border-radius: 999px;
    outline: none;
}

.px-promo input[type="text"]:focus {
    border-color: var(--px-ink);
}

.px-promo button {
    flex: none;
    height: 46px;
    padding: 0 20px;
    color: var(--px-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid var(--px-ink);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.px-promo button:hover:not(:disabled) {
    color: var(--px-white);
    background-color: var(--px-ink);
}

.px-promo button:disabled {
    opacity: 0.45;
    cursor: default;
}

#promo_error {
    margin-top: 8px;
    font-size: 12px;
}

/* Form fields */
.px-field {
    margin-bottom: 14px;
}

.px-field > label,
.px-label {
    display: block;
    margin-bottom: 6px;
    color: var(--px-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.px-input,
#checkout .form-control {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    color: var(--px-ink);
    font-size: 15px;
    background-color: var(--px-white);
    border: 1px solid var(--px-line);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.px-input:focus,
#checkout .form-control:focus {
    border-color: var(--px-ink);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

#checkout textarea.form-control {
    min-height: 92px !important;
    resize: vertical;
}

.px-help {
    display: block;
    margin-top: 5px;
    color: var(--px-muted);
    font-size: 11px;
}

.px-field .text-danger,
#checkout .text-danger {
    display: block;
    margin: 4px 0 0;
    font-size: 12px;
}

.px-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
}

@media (max-width: 480px) {
    .px-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* select2 needs to match the plain field styling */
#checkout .rs1-select2 {
    border: 1px solid var(--px-line) !important;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--px-white);
}

#checkout .rs1-select2 .select2-container {
    width: 100% !important;
}

#checkout .select2-container .select2-selection--single {
    height: 50px !important;
    border: 0 !important;
    background: transparent !important;
}

#checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 16px !important;
    line-height: 50px !important;
    font-size: 15px;
    color: var(--px-ink);
}

#checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    height: 50px !important;
    right: 10px;
}

/* Optional map, folded away by default so it never blocks the order */
.px-optional {
    margin-bottom: 14px;
    border: 1px solid var(--px-line);
    border-radius: 10px;
    overflow: hidden;
}

.px-optional__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    color: var(--px-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    background-color: var(--px-white);
    border: 0;
    cursor: pointer;
}

.px-optional__toggle small {
    color: var(--px-muted);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
}

.px-optional__body {
    display: none;
    padding: 0 16px 16px;
}

.px-optional.is-open .px-optional__body {
    display: block;
}

.px-optional.is-open .px-optional__toggle .zmdi-chevron-down {
    transform: rotate(180deg);
}

.px-optional__toggle .zmdi-chevron-down {
    transition: transform 0.25s ease;
}

/* Add-ons as tappable cards */
.px-addon {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background-color: var(--px-white);
    border: 1px solid var(--px-line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.px-addon:hover {
    border-color: var(--px-ink);
}

.px-addon.is-checked {
    background-color: var(--px-soft);
    border-color: var(--px-ink);
}

.px-addon input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--px-black);
}

.px-addon__img {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--px-line);
}

.px-addon__text {
    flex: 1;
    min-width: 0;
    color: var(--px-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.px-addon__price {
    flex: none;
    color: var(--px-ink);
    font-size: 13px;
    font-weight: 700;
}

/* Payment note */
.px-payment {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: var(--px-soft);
    border: 1px solid var(--px-line);
    border-radius: 12px;
}

.px-payment i {
    font-size: 22px;
    color: var(--px-ink);
}

.px-payment strong {
    display: block;
    color: var(--px-ink);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.px-payment span {
    color: var(--px-muted);
    font-size: 12px;
}

.px-reassure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.px-reassure li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--px-muted);
    font-size: 11px;
    letter-spacing: 0.04em;
}

.px-reassure i {
    color: var(--px-ink);
}

.px-submit {
    margin-top: 20px;
    min-height: 58px;
    font-size: 13px;
}

.px-empty-cart {
    max-width: 460px;
    margin: 40px auto;
    padding: 44px 26px;
    text-align: center;
    border: 1px solid var(--px-line);
    border-radius: var(--px-radius-lg);
}

.px-empty-cart i {
    font-size: 46px;
    color: var(--px-line);
}

.px-empty-cart h3 {
    margin: 14px 0 8px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.px-empty-cart p {
    margin: 0 0 22px;
    color: var(--px-muted);
    font-size: 14px;
}

/* Mobile: summary collapses, checkout button sticks to the bottom */
@media (max-width: 991px) {
    .px-summary__toggle {
        display: flex;
    }

    .px-summary__body {
        display: none;
    }

    .px-summary.is-open .px-summary__body {
        display: block;
    }

    .px-summary {
        margin-bottom: 18px;
    }

    .px-card {
        padding: 18px 16px;
    }

    .px-checkout {
        padding-bottom: 110px;
    }
}

@media (min-width: 992px) {
    .px-checkout-cols {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: 32px;
        align-items: start;
    }

    /* Summary is first in the DOM so mobile sees it up top; on desktop it
       moves to the right-hand rail, Shopify-style. */
    .px-checkout-main {
        order: 1;
    }

    .px-checkout-aside {
        order: 2;
        position: sticky;
        top: 110px;
    }
}

/* Sticky submit bar on the checkout page (mobile only) */
.px-checkout-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1099;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background-color: var(--px-white);
    border-top: 1px solid var(--px-line);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.1);
}

.px-checkout-bar__meta {
    display: flex;
    flex-direction: column;
}

.px-checkout-bar__label {
    color: var(--px-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.px-checkout-bar__total {
    color: var(--px-ink);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
}

.px-checkout-bar .px-btn {
    flex: 1;
    width: auto;
    min-height: 50px;
}

@media (min-width: 992px) {
    .px-checkout-bar {
        display: none;
    }
}

/*--------------------------------------------------------------------------
  7. Collection page spacing — the desktop rhythm is far too airy on a phone
--------------------------------------------------------------------------*/
@media (max-width: 991px) {
    .px-collection {
        margin-top: 30px !important;
        padding-bottom: 60px !important;
    }

    .px-collection-head {
        padding-bottom: 18px !important;
    }
}

/*--------------------------------------------------------------------------
  8. Collection rail — a slow, always-moving marquee of categories
     Every card carries a permanently visible "Shop now" button; the theme's
     original block1 hid it behind :hover, which never fires on touch.
--------------------------------------------------------------------------*/
.px-cat-section {
    padding: 54px 0 46px;
}

.px-cat-marquee {
    position: relative;
    overflow: hidden;
}

/* Soft edges so cards drift in and out rather than being chopped off */
.px-cat-marquee::before,
.px-cat-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 90px;
    pointer-events: none;
}

.px-cat-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--px-white), rgba(255, 255, 255, 0));
}

.px-cat-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--px-white), rgba(255, 255, 255, 0));
}

.px-cat-track {
    display: flex;
    width: max-content;
    animation: px-cat-scroll var(--px-cat-duration, 60s) linear infinite;
    will-change: transform;
}

/* Hold still whenever someone is aiming at a card */
.px-cat-marquee:hover .px-cat-track,
.px-cat-marquee:focus-within .px-cat-track,
.px-cat-marquee.is-paused .px-cat-track {
    animation-play-state: paused;
}

@keyframes px-cat-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.px-cat-card {
    position: relative;
    flex: none;
    /* margin (not gap) on every card, so the two halves are exactly equal
       and translating by 50% lands on an identical frame */
    /* Square, matching the 1:1 collection artwork, so object-fit: cover
       never crops the branding baked into the image. */
    width: 340px;
    height: 340px;
    margin-right: 20px;
    overflow: hidden;
    background-color: var(--px-soft);
    border-radius: var(--px-radius-lg);
    text-decoration: none;
}

.px-cat-card:hover,
.px-cat-card:focus {
    text-decoration: none;
}

.px-cat-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.px-cat-card:hover .px-cat-card__img {
    transform: scale(1.05);
}

.px-cat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.16) 38%, rgba(0, 0, 0, 0) 62%);
}

.px-cat-card__body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 24px;
}

.px-cat-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 28px;
    color: var(--px-ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background-color: var(--px-white);
    border: 1px solid var(--px-white);
    border-radius: 999px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.px-cat-card:hover .px-cat-card__cta {
    color: var(--px-white);
    background-color: transparent;
}

@media (max-width: 767px) {
    .px-cat-section {
        padding: 34px 0 30px;
    }

    .px-cat-marquee::before,
    .px-cat-marquee::after {
        width: 40px;
    }

    .px-cat-card {
        width: 250px;
        height: 250px;
        margin-right: 14px;
    }

    .px-cat-card__body {
        padding: 18px;
    }

    .px-cat-card__cta {
        min-height: 40px;
        padding: 0 22px;
        font-size: 10px;
    }
}

/* Motion-sensitive visitors get a normal swipeable row instead */
@media (prefers-reduced-motion: reduce) {
    .px-cat-marquee {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .px-cat-track {
        animation: none;
    }
}

/*--------------------------------------------------------------------------
  9. Hero CTA — the slider's "Shop Now", doubling as a scroll cue
--------------------------------------------------------------------------*/
/* Sit the button low in the hero: clear of the artwork's own baked-in
   wordmark, and reading as an invitation to scroll. The slide is taller than
   the viewport on desktop (height: 100vh - 40px, pushed down by the header),
   so the bottom padding is scaled in vh to keep the CTA above the fold at any
   window height rather than hanging off the bottom of the slide. */
.px-hero-cta-layer {
    margin-top: auto;
    padding-bottom: 5vh;
}

/* On desktop the slide runs past the fold by exactly (header height - 40px),
   a constant, so a fixed px pad cancels that overflow at every window height
   and parks the CTA just above the fold - clear of the wordmark baked into
   the artwork, which sits around the middle of the slide. */
@media (min-width: 992px) {
    .px-hero-cta-layer {
        padding-bottom: 150px;
    }
}

.px-hero-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    padding: 0 8px 0 32px;
    color: var(--px-hero-cta-fg, #000);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-decoration: none;
    text-transform: uppercase;
    background-color: var(--px-hero-cta-bg, #fff);
    border: 1px solid var(--px-hero-cta-bg, #fff);
    border-radius: 999px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* Pulsing halo, so the CTA reads as live against a still hero image */
.px-hero-cta::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid var(--px-hero-cta-bg, #fff);
    border-radius: 999px;
    animation: px-hero-ring 2.8s ease-out infinite;
    pointer-events: none;
}

@keyframes px-hero-ring {
    0%        { opacity: 0.8; transform: scale(1); }
    70%, 100% { opacity: 0;   transform: scale(1.24); }
}

.px-hero-cta__label {
    line-height: 1;
    white-space: nowrap;
}

.px-hero-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    color: var(--px-hero-cta-bg, #fff);
    font-size: 18px;
    background-color: var(--px-hero-cta-fg, #000);
    border-radius: 50%;
    animation: px-hero-bob 1.9s ease-in-out infinite;
}

@keyframes px-hero-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

/* Hover/focus: invert to the outlined state and settle the motion */
.px-hero-cta:hover,
.px-hero-cta:focus {
    color: var(--px-hero-cta-bg, #fff);
    text-decoration: none;
    background-color: transparent;
    transform: translateY(-2px);
}

.px-hero-cta:hover .px-hero-cta__icon,
.px-hero-cta:focus .px-hero-cta__icon {
    color: var(--px-hero-cta-fg, #000);
    background-color: var(--px-hero-cta-bg, #fff);
    animation-play-state: paused;
}

.px-hero-cta:hover::after,
.px-hero-cta:focus::after {
    animation: none;
    opacity: 0;
}

@media (max-width: 575px) {
    .px-hero-cta-layer {
        padding-bottom: 4vh;
    }

    .px-hero-cta {
        min-height: 54px;
        padding: 0 7px 0 24px;
        gap: 12px;
        font-size: 11px;
        letter-spacing: 0.16em;
    }

    .px-hero-cta__icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .px-hero-cta::after,
    .px-hero-cta__icon {
        animation: none;
    }

    .px-hero-cta::after {
        opacity: 0;
    }
}