/* =====================================================
   STORAGE PRICING PAGE
   Card vocabulary is lifted from box-options.css so the
   published price grid looks like the rest of the site.
   ====================================================== */

/* =====================================================
   BRANCH SWITCH
   ====================================================== */
.sp-page {
    background: #fffdf8;
}

/* Without JS there is nothing to switch, so both prices stay on the card. */
.sp-switch-wrap {
    display: none;
}

.sp-has-js .sp-switch-wrap {
    display: block;
    position: sticky;
    /* Clears the navbar plus the contact strip above it. */
    top: calc(56px + var(--topbar-h, 36px));
    z-index: 500;
    background: rgba(255, 253, 248, .92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid #f0eade;
    border-bottom: 1px solid #f0eade;
    padding: 16px 24px;
}

.sp-switch-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* The switch was drawn for exactly two branches. Branches are CMS content now, so the column
   count and the sliding thumb follow --sp-branch-count / --sp-branch-index, which the component
   sets. At two branches every value below resolves to what the design specified: two columns of
   at least 132px, a thumb half the inner width, sitting left or one width across. A third branch
   used to wrap under the first and disappear behind the thumb. */
.sp-switch {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--sp-branch-count, 2), minmax(var(--sp-branch-min, 132px), 1fr));
    padding: 4px;
    border: 1px solid #e8e2d6;
    border-radius: 100px;
    background: #ffffff;
}

.sp-switch-thumb {
    position: absolute;
    inset: 4px auto 4px 4px;
    width: calc((100% - 8px) / var(--sp-branch-count, 2));
    border-radius: 100px;
    background: var(--black, #171714);
    z-index: 0;
    transform: translateX(calc(var(--sp-branch-index, 0) * 100%));
    transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
}

.sp-loc {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    padding: 9px 18px;
    border-radius: 100px;
    color: #56524a;
    font-size: 13px;
    font-weight: 700;
    transition: color 280ms ease;
}

.sp-loc.is-active {
    color: #ffffff;
}

.sp-loc:focus-visible {
    outline: 2px solid var(--orange, #fe6f01);
    outline-offset: 2px;
}

.sp-switch-note {
    font-size: 13px;
    color: var(--gray, #706b61);
}

/* Announces the swap once instead of letting 38 prices change silently. */
.sp-live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =====================================================
   TIERS
   ====================================================== */
.sp-tier {
    padding: var(--section-pad) 24px 0;
}

.sp-tier:last-of-type {
    padding-bottom: var(--section-pad);
}

.sp-tier-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* The tier heading is the dropdown control: one full-width button per size
   band that reveals that band's cards, so the page opens as four rows instead
   of 19 stacked units. Panels are open when JS is off, which leaves the
   heading reading as a plain row and every price still crawlable. */
.sp-tier-head {
    margin: 0;
}

.sp-tier-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 18px 20px;
    border: 1px solid #e8e3da;
    border-radius: 18px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 280ms ease,
        box-shadow 280ms ease,
        background 280ms ease;
}

.sp-tier-toggle:hover {
    border-color: rgba(254, 111, 1, .45);
    box-shadow: 0 10px 26px rgba(23, 23, 20, .07);
}

.sp-tier-toggle:focus-visible {
    outline: 2px solid var(--orange, #fe6f01);
    outline-offset: 3px;
}

.sp-tier-toggle[aria-expanded="true"] {
    border-color: rgba(254, 111, 1, .45);
    background: #fffdf8;
}

.sp-tier-count {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #a8a294;
}

.sp-tier-chevron,
.sp-tier-toggle > svg.sp-tier-chevron {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--orange-dark, #cb5901);
    transition: transform 280ms cubic-bezier(.2, .8, .2, 1);
}

.sp-tier-toggle[aria-expanded="true"] .sp-tier-chevron {
    transform: rotate(180deg);
}

.sp-tier-panel {
    padding-top: var(--header-gap);
}

.sp-has-js .sp-tier-panel {
    display: none;
}

.sp-has-js .sp-tier-panel.is-open {
    display: block;
    animation: sp-tier-open 320ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes sp-tier-open {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Collapsed bands sit close together; only the run's top and tail keep the
   full section rhythm. */
.sp-has-js .sp-tier {
    padding-top: 16px;
}

.sp-has-js .sp-tier:first-of-type {
    padding-top: var(--section-pad);
}

.sp-tier-name {
    font-family: "Manrope", sans-serif;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -.8px;
    color: var(--black, #171714);
}

.sp-tier-range {
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(254, 111, 1, .09);
    color: var(--orange-dark, #cb5901);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.sp-tier-rule {
    flex: 1;
    min-width: 40px;
    height: 1px;
    background: #e8e3da;
}

/* Now the first line inside the panel rather than a flex child of the head. */
.sp-tier-blurb {
    margin: 0 0 18px;
    max-width: 70ch;
    font-size: 14px;
    color: var(--gray, #706b61);
}

/* =====================================================
   CARD GRID
   One grid for every tier. Equal card widths are what make
   the shared ground line an honest comparison — a wide
   Lockers card next to a narrow Large one would defeat it.
   ====================================================== */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px 16px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e8e3da;
    border-radius: 20px;
    transition: all 350ms cubic-bezier(.2, .8, .2, 1);
}

/* ---- The unit drawing ---- */
.sp-figure {
    width: 100%;
    aspect-ratio: 104 / 76;
    color: #9b9384;
    transition: color 350ms ease;
}

.sp-figure svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---- Head ---- */
.sp-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.sp-tag {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 100px;
    background: #f0ebe3;
    color: var(--gray, #706b61);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: all 350ms ease;
}

.sp-tag.short {
    background: #ffe9db;
    color: var(--orange-dark, #cb5901);
}

.sp-size {
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.5px;
    color: var(--black, #171714);
    transition: color 350ms ease;
}

.sp-size small {
    font-size: .5em;
    font-weight: 700;
    color: var(--gray, #706b61);
    margin-left: 3px;
    transition: color 350ms ease;
}

.sp-desc {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--gray, #706b61);
    transition: color 350ms ease;
}

/* ---- Dimensions ----
   One line per card: width x depth x ceiling, then the volume it works out
   to. It replaces the old Area / Footprint / Volume list, which said the same
   thing three times over. */
.sp-dims {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 2px 6px;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid #f1ece3;
    border-bottom: 1px solid #f1ece3;
    font-size: 13px;
    font-weight: 700;
    color: var(--black, #171714);
    transition: border-color 350ms ease, color 350ms ease;
}

.sp-dims-vol {
    color: var(--orange-dark, #cb5901);
    transition: color 350ms ease;
}

/* ---- Price ---- */
.sp-price-stack {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-price-loc {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--orange-dark, #cb5901);
    transition: color 350ms ease;
}

.sp-amount {
    font-family: "Manrope", sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--black, #171714);
    transition: color 350ms ease;
}

.sp-amount small {
    font-size: .46em;
    font-weight: 700;
    color: var(--gray, #706b61);
    margin-right: 4px;
    vertical-align: .35em;
    transition: color 350ms ease;
}

.sp-amount em {
    font-style: normal;
    font-size: .42em;
    font-weight: 700;
    color: var(--gray, #706b61);
    transition: color 350ms ease;
}

/* Published prices are exclusive of VAT; this rides alongside the figure at
   the same scale as the /mo suffix rather than taking a line of its own. */
.sp-vat {
    margin-left: 6px;
    font-size: .36em;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--orange-dark, #cb5901);
    white-space: nowrap;
    transition: color 350ms ease;
}

/* Reserve is a button now — it opens the quote form rather than walking the
   visitor to another page — so it needs the shape an anchor gets for free. */
button.sp-cta {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.sp-cta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 100px;
    background: #f6f1e8;
    color: var(--black, #171714);
    font-size: 12px;
    font-weight: 700;
    transition: all 300ms cubic-bezier(.2, .8, .2, 1);
}

.sp-cta i,
.sp-cta svg {
    width: 14px;
    height: 14px;
    font-size: 14px;
}

/* ---- Hover: inverted black state, same as box-options ---- */
.sp-card:hover {
    background: var(--black, #171714);
    border-color: var(--black, #171714);
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
}

.sp-card:hover .sp-figure {
    color: #6d675c;
}

.sp-card:hover .sp-fig-floor,
.sp-card:hover .sp-fig-door {
    color: var(--orange, #fe6f01);
}

.sp-card:hover .sp-size {
    color: #ffffff;
}

.sp-card:hover .sp-size small,
.sp-card:hover .sp-desc {
    color: #b0aaa0;
}

.sp-card:hover .sp-tag {
    background: rgba(255, 255, 255, .12);
    color: #b0aaa0;
}

.sp-card:hover .sp-tag.short {
    background: rgba(254, 111, 1, .20);
    color: var(--orange, #fe6f01);
}

.sp-card:hover .sp-dims {
    border-color: rgba(255, 255, 255, .10);
    color: #e6e1d8;
}

.sp-card:hover .sp-dims-vol {
    color: var(--orange-light, #ff9445);
}

.sp-card:hover .sp-price-loc {
    color: var(--orange-light, #ff9445);
}

.sp-card:hover .sp-amount {
    color: #ffffff;
}

.sp-card:hover .sp-amount small,
.sp-card:hover .sp-amount em {
    color: #b0aaa0;
}

.sp-card:hover .sp-cta {
    background: var(--orange, #fe6f01);
    color: var(--black, #171714);
}

/* =====================================================
   THE SWITCH ITSELF
   Both prices are always in the DOM. Stacking them in one
   grid cell means the card height is set by the taller of
   the two, so flipping branch never reflows the page.
   ====================================================== */
/* =====================================================
   BRANCH SETS
   Al Quoz and DIP each carry their own run of size cards,
   because the two sites do not stock identical sizes. The
   switch shows one set and hides the other outright.
   ====================================================== */
.sp-branch {
    display: none;
}

/* No JS means no switch, so both runs stay on the page. */
.sp-page:not([data-location]) .sp-branch,
.sp-page[data-location="alquoz"] .sp-branch[data-branch="alquoz"],
.sp-page[data-location="dip"] .sp-branch[data-branch="dip"],
/* The two selectors above name the branches the design shipped with. A branch added in the CMS
   matches neither, so selecting it used to hide every run and leave the page empty; the component
   marks whichever run is selected instead. */
.sp-page[data-location] .sp-branch.is-current {
    display: block;
}

/* Which site this run belongs to, next to the tier name. */
.sp-tier-badge {
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(254, 111, 1, .1);
    border: 1px solid rgba(254, 111, 1, .22);
    color: var(--orange-dark, #cb5901);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* The category illustration, one per size band. */
.sp-card-img {
    border-radius: 14px;
    overflow: hidden;
    background: #fffdf8;
    border: 1px solid #f1ece3;
}

.sp-card-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 104 / 76;
    object-fit: cover;
}

.sp-card .sp-price {
    margin-top: auto;
}

.sp-card .sp-cat-actions {
    justify-content: center;
}

.sp-page[data-location] .sp-price-stack {
    display: grid;
}

.sp-page[data-location] .sp-price {
    grid-area: 1 / 1;
    transition:
        opacity 260ms cubic-bezier(.2, .8, .2, 1),
        transform 260ms cubic-bezier(.2, .8, .2, 1),
        visibility 0s;
}

.sp-page[data-location="alquoz"] .sp-price[data-loc="dip"],
.sp-page[data-location="dip"] .sp-price[data-loc="alquoz"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(.97);
    transition:
        opacity 260ms cubic-bezier(.2, .8, .2, 1),
        transform 260ms cubic-bezier(.2, .8, .2, 1),
        visibility 0s linear 260ms;
}

@media (prefers-reduced-motion: reduce) {
    .sp-page[data-location] .sp-price,
    .sp-switch-thumb {
        transition: none;
    }

    .sp-has-js .sp-tier-panel.is-open {
        animation: none;
    }

    .sp-tier-chevron,
    .sp-tier-toggle {
        transition: none;
    }
}

/* =====================================================
   UNIT CATEGORY CARDS
   Four size bands replacing the per-unit grid. Same
   shell as .sp-card (white, 20px radius, #e8e3da border)
   laid out horizontally: drawing left, detail right.
   ====================================================== */
.sp-cats {
    display: grid;
    gap: 20px;
}

.sp-cat {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;
    align-items: center;
    padding: 22px;
    background: #ffffff;
    border: 1px solid #e8e3da;
    border-radius: 20px;
    transition: all 350ms cubic-bezier(.2, .8, .2, 1);
}

.sp-cat:hover {
    border-color: rgba(254, 111, 1, .38);
    box-shadow: 0 24px 48px rgba(23, 23, 20, .1);
    transform: translateY(-4px);
}

/* Holds the generated unit drawing, or the supplied category image. */
.sp-cat-figure {
    border-radius: 14px;
    background: #fffdf8;
    border: 1px solid #f1ece3;
    padding: 10px;
}

.sp-cat-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 104 / 76;
    object-fit: cover;
    border-radius: 8px;
}

.sp-cat-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-cat-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.sp-cat-name {
    font-family: "Manrope", sans-serif;
    font-size: clamp(19px, 2.2vw, 23px);
    font-weight: 800;
    letter-spacing: -.7px;
    color: var(--black, #171714);
}

.sp-cat-range {
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(254, 111, 1, .1);
    border: 1px solid rgba(254, 111, 1, .22);
    color: var(--orange-dark, #cb5901);
    font-size: 12px;
    font-weight: 700;
}

.sp-cat-desc {
    max-width: 62ch;
    color: var(--gray, #706b61);
    font-size: 14px;
    line-height: 1.65;
}

/* ---- "What's suitable" disclosure ---- */
.sp-suit {
    border-top: 1px solid #f1ece3;
    border-bottom: 1px solid #f1ece3;
    padding: 4px 0;
}

.sp-suit summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    list-style: none;
    color: var(--black, #171714);
    font-size: 13px;
    font-weight: 700;
    transition: color 260ms ease;
}

.sp-suit summary::-webkit-details-marker {
    display: none;
}

.sp-suit summary:hover {
    color: var(--orange-dark, #cb5901);
}

.sp-suit summary:focus-visible {
    outline: 2px solid var(--orange, #fe6f01);
    outline-offset: 3px;
    border-radius: 6px;
}

.sp-suit summary i,
.sp-suit summary svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
}

.sp-suit[open] summary svg {
    transform: rotate(180deg);
}

.sp-suit-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 20px;
    padding: 4px 0 12px;
    list-style: none;
}

.sp-suit-list li {
    display: flex;
    align-items: baseline;
    gap: 9px;
    color: var(--gray, #706b61);
    font-size: 13px;
}

.sp-suit-size {
    flex-shrink: 0;
    min-width: 62px;
    color: var(--black, #171714);
    font-weight: 700;
}

/* Second disclosure: a few lines of context, same shell as the first. */
.sp-suit-note {
    border-top: 0;
}

.sp-suit-text {
    padding: 2px 0 12px;
    max-width: 62ch;
    color: var(--gray, #706b61);
    font-size: 13px;
    line-height: 1.65;
}

/* Two branch prices share one grid cell, as on the old cards. */
.sp-cat .sp-price-stack {
    margin-top: 2px;
}

/* Form route and WhatsApp chat, side by side. */
.sp-cat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.sp-cat-actions .sp-cta {
    margin-top: 0;
}

/* Same green as .sv-wa and .ct-btn-wa. */
.sp-cta-wa {
    background: #25d366;
    color: #06331a;
}

.sp-cta-wa:hover {
    background: #1fbb59;
    color: #06331a;
    box-shadow: 0 14px 28px rgba(37, 211, 102, .3);
}

@media (max-width: 900px) {
    .sp-cat {
        grid-template-columns: 220px 1fr;
        gap: 20px;
    }
}

@media (max-width: 760px) {
    .sp-cat {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .sp-cat-figure {
        max-width: 280px;
    }
}

@media (max-width: 560px) {
    .sp-cat {
        padding: 16px;
    }
    .sp-cat-figure {
        max-width: none;
    }
    .sp-suit-list {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   PAGE-LOCAL FACILITY SUMMARY
   ====================================================== */
.sp-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
    margin-top: 14px;
    list-style: none;
}

.sp-facts li {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 100px;
    background: #f6f1e8;
    border: 1px solid #e8e3da;
    color: var(--gray, #706b61);
    font-size: 12px;
    font-weight: 600;
}

.sp-facts strong {
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: var(--orange-dark, #cb5901);
}

/* =====================================================
   PAGE CTA
   ====================================================== */
.sp-page-cta {
    padding: 0 24px var(--section-pad);
    background: #fffdf8;
}

.sp-page-cta-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 46px 48px;
    border-radius: 28px;
    background: linear-gradient(120deg, #1b1a16 0%, #2b2822 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    flex-wrap: wrap;
}

.sp-page-cta-inner::after {
    content: "";
    position: absolute;
    top: -90px;
    right: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(254, 111, 1, .28), transparent 68%);
    pointer-events: none;
}

.sp-page-cta-text {
    position: relative;
    max-width: 620px;
}

.sp-page-cta-text span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--orange-light, #ff9445);
}

.sp-page-cta-text h2 {
    margin-top: 12px;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1.1px;
    color: #ffffff;
}

.sp-page-cta-text p {
    margin-top: 12px;
    color: rgba(255, 255, 255, .68);
    font-size: 15px;
    line-height: 1.65;
}

.sp-page-cta-actions {
    position: relative;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sp-page-cta-primary,
.sp-page-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    transition: all 320ms cubic-bezier(.2, .8, .2, 1);
}

.sp-page-cta-primary {
    background: var(--orange, #fe6f01);
    color: var(--black, #171714);
}

.sp-page-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(254, 111, 1, .36);
}

.sp-page-cta-secondary {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #ffffff;
}

.sp-page-cta-secondary:hover {
    background: rgba(255, 255, 255, .16);
    transform: translateY(-2px);
}

.sp-page-cta-primary i,
.sp-page-cta-secondary i,
.sp-page-cta-primary svg,
.sp-page-cta-secondary svg {
    width: 17px;
    height: 17px;
    font-size: 16px;
}

/* =====================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1000px) {

    .sp-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 900px) {
    .sp-has-js .sp-switch-wrap {
        top: 82px;
    }
}

@media (max-width: 760px) {

    .sp-tier {
        padding-inline: 16px;
    }

    .sp-tier-toggle {
        padding: 14px 16px;
        gap: 6px 12px;
    }

    .sp-tier-rule {
        display: none;
    }

    .sp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .sp-card {
        padding: 16px 12px 14px;
    }

    .sp-size {
        font-size: 20px;
    }

    .sp-amount {
        font-size: 22px;
    }

    .sp-page-cta-inner {
        padding: 34px 26px;
    }
}

@media (max-width: 600px) {
    .sp-has-js .sp-switch-wrap {
        top: 76px;
        padding: 14px 16px;
    }

    .sp-switch-note {
        flex: 1 0 100%;
        text-align: center;
        font-size: 12px;
    }

}

@media (max-width: 560px) {
    .sp-card {
        padding: 12px 10px 12px;
        border-radius: 16px;
        gap: 10px;
    }

    .sp-size {
        font-size: 17px;
    }

    .sp-desc {
        font-size: 11px;
    }

    .sp-amount {
        font-size: 18px;
    }

    .sp-dims {
        padding: 8px 0;
        font-size: 12px;
    }

    .sp-cta {
        padding: 9px 12px;
        font-size: 11px;
    }

    .sp-card:hover {
        transform: translateY(-4px);
    }
}