:root {
    --page: #ffffff;
    --ink: #070707;
    --muted: #d2d2d2;
    --soft: #f4f4f4;
    --header-height: 126px;
    --tile-min-height: 238px;
    --safe-top: env(safe-area-inset-top, 0px);
}

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--page);
    color: var(--ink);
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-size: 12px;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
    background: var(--page);
}

.product-detail-page {
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

.checkout-page {
    overflow-x: hidden;
}

button,
a {
    color: inherit;
    font: inherit;
}

.store-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 78px;
    align-items: start;
    gap: 4px;
    width: 100%;
    min-height: var(--header-height);
    padding: 32px 18px 12px;
    background: rgba(255, 255, 255, 0.96);
}

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}

.zoom-button {
    align-self: start;
    justify-self: start;
    font-size: 52px;
    font-weight: 300;
    line-height: 1;
}

.zoom-button[aria-pressed="true"] {
    transform: rotate(45deg);
}

.cart-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    min-width: 64px;
    align-self: start;
    justify-self: end;
    font-size: 37px;
    line-height: 1;
}

.cart-button .bx {
    display: block;
}

.category-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    row-gap: 10px;
    column-gap: 22px;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 4px;
    text-align: center;
}

.category-link {
    color: var(--muted);
    cursor: pointer;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.04;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.category-link.active {
    color: #242424;
}

.storefront {
    width: 100%;
    max-width: 100vw;
    padding: 24px 0 70px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    width: min(100%, 920px);
    margin: 0 auto;
    padding: 0 24px;
    row-gap: 54px;
    column-gap: 18px;
    transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1), gap 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.empty-products {
    grid-column: 1 / -1;
    margin: 84px 0 0;
    color: var(--muted);
    font-size: 26px;
    line-height: 1;
    text-align: center;
}

.detail-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 72px;
    padding: calc(16px + var(--safe-top)) 20px 8px;
    background: rgba(255, 255, 255, 0.96);
}

.back-button {
    justify-self: start;
    width: 38px;
    height: 38px;
    font-size: 34px;
    line-height: 1;
}

.back-button .bx {
    display: block;
}

.detail-cart {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
}

.fixed-cart {
    position: fixed;
    top: calc(16px + var(--safe-top));
    right: 20px;
    z-index: 30;
    min-width: 42px;
    height: 38px;
    justify-content: flex-end;
    padding: 0;
}

.detail-cart .fa-solid {
    display: block;
    font-size: 22px;
}

.cart-count {
    min-width: 14px;
    text-align: right;
}

.product-detail {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    justify-items: center;
    gap: clamp(14px, 3.4svh, 42px);
    width: 100%;
    max-width: 100vw;
    height: calc(100svh - 72px);
    min-height: 0;
    overflow: hidden;
    padding: clamp(12px, 3svh, 38px) 24px clamp(18px, 4svh, 54px);
    touch-action: none;
    will-change: opacity, transform;
}

.product-detail.is-leaving,
.product-detail.is-entering {
    transition: opacity 180ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-detail.is-leaving {
    opacity: 0;
}

.product-detail[data-swipe-direction="left"].is-leaving,
.product-detail[data-swipe-direction="right"].is-entering {
    transform: translateX(42px);
}

.product-detail[data-swipe-direction="right"].is-leaving,
.product-detail[data-swipe-direction="left"].is-entering {
    transform: translateX(-42px);
}

.product-detail.is-entering {
    animation: detail-enter 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes detail-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-detail.is-leaving,
    .product-detail.is-entering {
        animation: none;
        transition: none;
    }
}

.detail-media {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: clamp(6px, 2vw, 18px);
    place-items: center;
    width: min(100%, 680px);
    height: 100%;
    max-height: 390px;
    min-height: 0;
}

.detail-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 7px rgba(0, 0, 0, 0.16));
}

.detail-nav-button {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: 46px;
    line-height: 1;
}

.detail-nav-button:disabled {
    cursor: default;
    opacity: 0.2;
}

.detail-nav-button .bx {
    display: block;
}

.detail-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: clamp(70px, 12vh, 140px);
}

.detail-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d7d7d7;
}

.detail-dots .active {
    background: var(--ink);
}

.detail-info {
    display: grid;
    justify-items: center;
    width: min(100%, 720px);
    gap: clamp(18px, 3.8vh, 42px);
    margin-top: 0;
    text-align: center;
}

.detail-info h1,
.detail-price {
    max-width: 100%;
    margin: 0;
    font-size: clamp(18px, 4.2svh, 34px);
    font-weight: 400;
    line-height: 1;
    overflow-wrap: anywhere;
}

.detail-price {
    margin-top: 0;
}

.stock-tag {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-top: 0;
    padding: 7px 16px;
    border: 1px solid currentColor;
    color: #545454;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.stock-tag-in-stock {
    color: #4f8f63;
}

.stock-tag-few-items {
    color: #b08a2a;
}

.stock-tag-low-stock {
    color: #b45f5f;
}

.size-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.8svh, 16px);
}

.size-button {
    display: inline-grid;
    place-items: center;
    width: clamp(34px, 6.4svh, 48px);
    height: clamp(34px, 6.4svh, 48px);
    border: 1px solid #cfcfcf;
    border-radius: 0;
    background: #ffffff;
    color: #777777;
    cursor: pointer;
    font-size: clamp(14px, 2.8svh, 20px);
    font-weight: 600;
    line-height: 1;
}

.size-button.selected {
    border-color: var(--ink);
    color: var(--ink);
}

.quantity-controls {
    display: grid;
    grid-template-columns: clamp(36px, 7svh, 52px) minmax(28px, auto) clamp(36px, 7svh, 52px);
    align-items: center;
    justify-items: center;
    column-gap: 8px;
    margin-top: clamp(6px, 1.6vh, 18px);
}

.quantity-button {
    display: grid;
    place-items: center;
    width: clamp(36px, 7svh, 52px);
    height: clamp(36px, 7svh, 52px);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: clamp(36px, 7svh, 52px);
    font-weight: 300;
    line-height: 1;
}

.quantity-button:disabled,
.checkout-quantity button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.minus-button {
    font-size: clamp(42px, 8svh, 60px);
}

.quantity-value {
    min-width: 32px;
    font-size: clamp(18px, 4.2svh, 34px);
    line-height: 1;
    text-align: center;
}

.checkout-summary {
    display: grid;
    align-content: start;
    gap: clamp(14px, 2.6svh, 28px);
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    min-height: calc(100svh - 72px);
    padding: clamp(24px, 5svh, 48px) 32px clamp(30px, 6svh, 68px);
}

.checkout-summary h1 {
    margin: 0;
    font-size: clamp(22px, 4svh, 34px);
    font-weight: 700;
    line-height: 1.08;
    overflow-wrap: anywhere;
    text-align: center;
}

.checkout-items {
    display: grid;
    gap: clamp(10px, 2svh, 18px);
    max-height: min(42svh, 430px);
    margin-top: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
}

.checkout-item {
    display: grid;
    grid-template-columns: minmax(64px, 150px) minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(12px, 2.6vw, 24px);
    min-width: 0;
    padding: clamp(12px, 2.4vw, 22px);
    border: 1px solid #d8d8d8;
    background: #ffffff;
}

.checkout-item-image {
    display: grid;
    place-items: center;
    min-width: 0;
    max-height: 100px;
}

.checkout-item-image img {
    display: block;
    width: 100%;
    height:auto;
    max-height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.14));
}

.checkout-item-details,
.checkout-item-values {
    display: grid;
    gap: clamp(8px, 1.8svh, 16px);
    min-width: 0;
}

.checkout-item-details p,
.checkout-item-values p,
.cost-summary span {
    margin: 0;
    font-size: clamp(18px, 3.6svh, 34px);
    font-weight: 400;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.checkout-item-values {
    justify-items: end;
    text-align: right;
}

.checkout-quantity {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(8px, 1.8svh, 18px);
    height: clamp(24px, 4.2svh, 34px);
}

.checkout-quantity button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(24px, 4.2svh, 34px);
    height: clamp(24px, 4.2svh, 34px);
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: clamp(24px, 4.2svh, 34px);
    line-height: 1;
    padding: 0;
}

.checkout-quantity [data-quantity-minus] {
    transform: translateY(-2px);
}

.checkout-quantity span {
    min-width: 34px;
    font-size: clamp(18px, 3.6svh, 34px);
    line-height: 1;
    text-align: center;
}

.cost-summary {
    display: grid;
    gap: 0;
    margin-top: 0;
    padding: clamp(4px, 1.2svh, 8px) clamp(12px, 2.6vw, 22px);
    border: 1px solid #d8d8d8;
    background: #ffffff;
}

.cost-summary div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: clamp(8px, 2vw, 16px);
    min-width: 0;
    padding: clamp(8px, 1.8svh, 18px) 0;
    border-bottom: 1px solid #e7e7e7;
}

.cost-summary .line-items-summary {
    align-items: start;
}

.line-items-summary div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.line-items-summary div span {
    justify-self: end;
    text-align: right;
}

.cost-summary div span:last-child {
    justify-self: end;
    text-align: right;
}

.cost-summary .total-row {
    margin-top: 0;
    border-bottom: 0;
}

.cost-summary .total-row span {
    font-weight: 700;
}

.coupon-button {
    margin-top: 48px;
    padding: 0 0 4px;
    border: 0;
    border-bottom: 1px solid #8a8a8a;
    background: transparent;
    color: #7b7b7b;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
}

.empty-cart-button {
    justify-self: center;
    margin-top: 0;
    padding: 0 0 4px;
    border: 0;
    border-bottom: 1px solid #8a8a8a;
    background: transparent;
    color: #7b7b7b;
    cursor: pointer;
    font-size: clamp(16px, 2.8svh, 24px);
    line-height: 1;
    text-transform: uppercase;
}

.payment-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(52px, 9svh, 96px);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    color: #ffffff;
    font-size: clamp(24px, 5.4svh, 46px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.paystack-pay {
    background: #000000;
}

.paystack-checkout {
    display: grid;
    gap: clamp(8px, 1.8svh, 16px);
    margin-top: 0;
}

.cost-summary .paystack-checkout {
    margin-top: clamp(8px, 1.6svh, 16px);
    padding-top: clamp(10px, 2svh, 18px);
    border-top: 1px solid #e7e7e7;
}

.paystack-checkout label {
    color: var(--ink);
    font-size: clamp(16px, 2.8svh, 24px);
    font-weight: 700;
    line-height: 1;
}

.paystack-checkout input,
.paystack-checkout textarea {
    width: 100%;
    min-height: clamp(42px, 7svh, 58px);
    border: 1px solid #b8b8b8;
    border-radius: 0;
    padding: 0 16px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    font-size: clamp(16px, 2.8svh, 24px);
}

.paystack-checkout textarea {
    min-height: clamp(58px, 10svh, 86px);
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 1.2;
    resize: vertical;
}

.payment-error {
    min-height: clamp(16px, 3svh, 24px);
    margin: 0;
    color: #b00020;
    font-size: clamp(13px, 2.4svh, 18px);
    line-height: 1.3;
}

.payment-status {
    display: grid;
    justify-items: center;
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 96px 24px 70px;
    text-align: center;
}

.payment-status h1,
.payment-status p {
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
}

.payment-status h1 {
    font-size: 34px;
    line-height: 1.08;
}

.payment-status p {
    margin-top: 34px;
    font-size: 24px;
    line-height: 1.25;
}

.payment-reference {
    color: #777777;
}

.payment-status-link {
    margin-top: 54px;
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.empty-checkout {
    margin: 88px 0 0;
    color: var(--muted);
    font-size: 34px;
    line-height: 1;
}

.storefront.zoomed .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 760px);
    row-gap: 68px;
}

.product-tile {
    min-width: 0;
    min-height: var(--tile-min-height);
}

.product-link {
    display: grid;
    grid-template-rows: 146px auto;
    align-items: end;
    justify-items: center;
    min-height: var(--tile-min-height);
    color: var(--ink);
    text-decoration: none;
    transition: grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1), min-height 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.storefront.zoomed .product-link {
    grid-template-rows: 192px auto;
    min-height: 300px;
}

.product-code {
    display: block;
    max-width: 100%;
    padding-top: 28px;
    overflow-wrap: anywhere;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.08;
    text-align: center;
}

.product-image {
    position: relative;
    display: block;
    width: min(100%, 150px);
    height: auto;
    aspect-ratio: 5 / 4;
    filter: drop-shadow(0 7px 6px rgba(0, 0, 0, 0.18));
    transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-image.real-product {
    display: grid;
    place-items: end center;
    filter: none;
}

.product-image.real-product img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 7px 6px rgba(0, 0, 0, 0.15));
}

.storefront.zoomed .product-image {
    width: min(100%, 196px);
}

.product-image::before,
.product-image::after,
.detail {
    content: "";
    position: absolute;
    display: block;
}

.dark {
    --fabric: #141414;
    --fabric-2: #2c2c2c;
}

.black {
    --fabric: #050505;
    --fabric-2: #232323;
}

.charcoal {
    --fabric: #3b3b3b;
    --fabric-2: #151515;
}

.grey {
    --fabric: #8a8a85;
    --fabric-2: #c2c2ba;
}

.pale {
    --fabric: #eeeeee;
    --fabric-2: #d9d9d9;
}

.white {
    --fabric: #f8f8f8;
    --fabric-2: #e1e1e1;
}

.brown {
    --fabric: #493223;
    --fabric-2: #241712;
}

.olive {
    --fabric: #667259;
    --fabric-2: #293024;
}

.glossy {
    filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.22)) contrast(1.08);
}

.slide::before {
    left: 12%;
    top: 58%;
    width: 76%;
    height: 18%;
    border-radius: 60% 32% 26% 18%;
    background: linear-gradient(90deg, var(--fabric), var(--fabric-2));
    transform: skewX(-12deg);
}

.slide::after {
    left: 31%;
    top: 40%;
    width: 36%;
    height: 29%;
    border-radius: 60% 60% 20% 20%;
    background: linear-gradient(145deg, var(--fabric-2), var(--fabric));
    transform: rotate(17deg);
}

.boot::before {
    left: 28%;
    top: 15%;
    width: 36%;
    height: 60%;
    border-radius: 28% 22% 10% 8%;
    background: linear-gradient(135deg, var(--fabric-2), var(--fabric));
}

.boot::after {
    left: 34%;
    top: 63%;
    width: 52%;
    height: 27%;
    border-radius: 10px 35px 20px 12px;
    background: linear-gradient(170deg, var(--fabric), var(--fabric-2));
}

.glasses::before {
    left: 15%;
    top: 45%;
    width: 31%;
    height: 24%;
    border: 7px solid var(--fabric);
    border-radius: 12px 8px 15px 13px;
    background: #4b4b4b;
    transform: skewX(8deg);
}

.glasses::after {
    right: 15%;
    top: 45%;
    width: 31%;
    height: 24%;
    border: 7px solid var(--fabric);
    border-radius: 8px 12px 13px 15px;
    background: #4b4b4b;
    transform: skewX(-8deg);
}

.glasses .detail-one {
    left: 44%;
    top: 53%;
    width: 14%;
    height: 7px;
    background: var(--fabric);
}

.slipper::before {
    left: 10%;
    top: 58%;
    width: 78%;
    height: 22%;
    border-radius: 70% 28% 20% 22%;
    background: linear-gradient(90deg, var(--fabric), var(--fabric-2));
    transform: skewX(8deg);
}

.slipper::after {
    left: 22%;
    top: 46%;
    width: 43%;
    height: 20%;
    border-radius: 54% 42% 10% 12%;
    background: linear-gradient(145deg, var(--fabric-2), var(--fabric));
    transform: rotate(10deg);
}

.tee::before {
    left: 22%;
    top: 24%;
    width: 56%;
    height: 58%;
    clip-path: polygon(18% 0, 82% 0, 100% 17%, 82% 32%, 82% 100%, 18% 100%, 18% 32%, 0 17%);
    background: linear-gradient(160deg, var(--fabric), var(--fabric-2));
}

.longsleeve::before {
    left: 22%;
    top: 22%;
    width: 56%;
    height: 63%;
    clip-path: polygon(18% 0, 82% 0, 100% 14%, 91% 86%, 75% 86%, 78% 34%, 78% 100%, 22% 100%, 22% 34%, 25% 86%, 9% 86%, 0 14%);
    background: linear-gradient(160deg, var(--fabric), var(--fabric-2));
}

.jacket::before,
.hoodie::before,
.zip::before,
.bomber::before {
    left: 16%;
    top: 12%;
    width: 68%;
    height: 79%;
    clip-path: polygon(30% 0, 70% 0, 92% 18%, 100% 88%, 83% 94%, 76% 47%, 76% 100%, 24% 100%, 24% 47%, 17% 94%, 0 88%, 8% 18%);
    background: linear-gradient(130deg, var(--fabric-2), var(--fabric) 48%, var(--fabric-2));
}

.hoodie::after,
.jacket::after {
    left: 39%;
    top: 3%;
    width: 22%;
    height: 25%;
    border-radius: 50% 50% 36% 36%;
    background: radial-gradient(circle at 50% 55%, #080808 0 36%, var(--fabric-2) 38% 100%);
}

.zip::after,
.bomber::after {
    left: 49%;
    top: 20%;
    width: 2px;
    height: 67%;
    background: rgba(255, 255, 255, 0.22);
}

.pants::before {
    left: 29%;
    top: 12%;
    width: 42%;
    height: 82%;
    clip-path: polygon(3% 0, 97% 0, 92% 100%, 58% 100%, 52% 26%, 48% 26%, 42% 100%, 8% 100%);
    background: linear-gradient(95deg, var(--fabric), var(--fabric-2));
}

.box::before {
    left: 27%;
    top: 28%;
    width: 46%;
    height: 46%;
    background: linear-gradient(145deg, var(--fabric), var(--fabric-2));
}

@media (max-width: 720px) {
    :root {
        --header-height: 154px;
        --tile-min-height: 205px;
    }

    .store-header {
        grid-template-columns: 56px minmax(0, 1fr) 72px;
        min-height: var(--header-height);
        padding: 30px 16px 8px;
    }

    .zoom-button {
        font-size: 46px;
    }

    .category-nav {
        column-gap: 20px;
        row-gap: 15px;
        max-width: 100%;
    }

    .category-link {
        font-size: 23px;
    }

    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: min(100%, 560px);
        padding: 0 18px;
        row-gap: 34px;
        column-gap: 10px;
    }

    .product-link {
        grid-template-rows: 88px auto;
        min-height: 150px;
    }

    .product-image {
        width: min(100%, 88px);
    }

    .product-code {
        padding-top: 16px;
        font-size: 16px;
    }

    .storefront.zoomed .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(100%, 560px);
        row-gap: 43px;
        column-gap: 12px;
    }

    .storefront.zoomed .product-link {
        grid-template-rows: 158px auto;
        min-height: 255px;
    }

    .storefront.zoomed .product-image {
        width: min(100%, 164px);
    }

    .storefront.zoomed .product-code {
        padding-top: 22px;
        font-size: 22px;
    }

    .product-detail {
        grid-template-rows: minmax(0, 1fr) auto;
        gap: clamp(12px, 3svh, 34px);
        height: calc(100svh - 72px);
        min-height: 0;
        padding-top: clamp(10px, 2.6svh, 28px);
        padding-bottom: clamp(16px, 3.6svh, 42px);
    }

    .detail-media {
        height: 100%;
        max-height: 330px;
    }

    .detail-dots {
        margin-top: clamp(66px, 11vh, 110px);
        gap: 14px;
    }

    .detail-info {
        gap: clamp(12px, 2.7svh, 28px);
        margin-top: 0;
    }

    .checkout-summary {
        gap: clamp(12px, 2.4svh, 24px);
        min-height: calc(100svh - 72px);
        padding: clamp(20px, 4.4svh, 42px) 24px clamp(24px, 5svh, 56px);
    }

    .checkout-items {
        max-height: min(40svh, 360px);
    }

    .checkout-item {
        grid-template-columns: minmax(70px, 150px) minmax(0, 1fr) auto;
        gap: clamp(10px, 2.4vw, 18px);
        margin-top: 0;
    }

    .checkout-summary h1,
    .checkout-item-details p,
    .checkout-item-values p,
    .checkout-quantity span,
    .cost-summary span {
        font-size: 26px;
    }

    .checkout-quantity {
        gap: clamp(8px, 1.8svh, 14px);
        height: clamp(24px, 4svh, 31px);
    }

    .checkout-quantity button {
        width: clamp(24px, 4svh, 31px);
        height: clamp(24px, 4svh, 31px);
        font-size: clamp(24px, 4svh, 29px);
    }

    .payment-button {
        min-height: clamp(50px, 8.4svh, 84px);
        font-size: clamp(23px, 5svh, 38px);
    }
}

@media (max-width: 430px) {
    :root {
        --header-height: 148px;
    }

    .store-header {
        grid-template-columns: 46px minmax(0, 1fr) 64px;
        padding: 28px 12px 8px;
    }

    .icon-button {
        width: 36px;
        height: 36px;
    }

    .zoom-button {
        font-size: 42px;
    }

    .cart-button {
        font-size: 34px;
        min-width: 58px;
    }

    .detail-header {
        min-height: 62px;
        padding: calc(13px + var(--safe-top)) 16px 8px;
    }

    .back-button {
        width: 34px;
        height: 34px;
        font-size: 30px;
    }

    .detail-cart {
        font-size: 14px;
    }

    .fixed-cart {
        top: calc(12px + var(--safe-top));
        right: 16px;
        min-width: 38px;
        height: 34px;
    }

    .detail-cart .fa-solid {
        font-size: 20px;
    }

    .category-nav {
        column-gap: 15px;
        row-gap: 13px;
    }

    .category-link {
        font-size: 20px;
    }

    .product-grid {
        padding: 0 14px;
        row-gap: 30px;
        column-gap: 8px;
    }

    .product-link {
        grid-template-rows: 76px auto;
        min-height: 132px;
    }

    .product-image {
        width: min(100%, 76px);
    }

    .product-code {
        padding-top: 14px;
        font-size: 14px;
    }

    .storefront.zoomed .product-grid {
        padding: 0 14px;
        row-gap: 52px;
        column-gap: 10px;
    }

    .storefront.zoomed .product-link {
        grid-template-rows: 138px auto;
        min-height: 230px;
    }

    .storefront.zoomed .product-image {
        width: min(100%, 136px);
    }

    .storefront.zoomed .product-code {
        padding-top: 20px;
        font-size: 21px;
    }

    .product-detail {
        grid-template-rows: minmax(0, 1fr) auto;
        gap: clamp(10px, 2.8svh, 28px);
        height: calc(100svh - 62px);
        min-height: 0;
        padding: clamp(8px, 2.4svh, 24px) 20px clamp(14px, 3.2svh, 34px);
    }

    .detail-media {
        height: 100%;
        max-height: 280px;
        width: min(100%, 360px);
    }

    .detail-dots {
        gap: 13px;
        margin-top: clamp(62px, 11vh, 96px);
    }

    .detail-dots span {
        width: 8px;
        height: 8px;
    }

    .detail-info {
        gap: clamp(10px, 2.6svh, 24px);
        margin-top: 0;
    }

    .detail-info h1,
    .detail-price,
    .quantity-value {
        font-size: clamp(17px, 4svh, 25px);
    }

    .detail-price {
        margin-top: 0;
    }

    .quantity-controls {
        margin-top: clamp(4px, 1.2vh, 12px);
        grid-template-columns: clamp(34px, 7svh, 48px) minmax(28px, auto) clamp(34px, 7svh, 48px);
    }

    .quantity-button {
        width: clamp(34px, 7svh, 48px);
        height: clamp(34px, 7svh, 48px);
        font-size: clamp(34px, 7svh, 48px);
    }

    .minus-button {
        font-size: clamp(39px, 8svh, 56px);
    }

    .checkout-header {
        margin-bottom: 0;
    }

    .checkout-summary {
        max-width: 100%;
        gap: clamp(10px, 2.2svh, 20px);
        min-height: calc(100svh - 62px);
        padding: clamp(16px, 3.8svh, 34px) 16px clamp(20px, 4.5svh, 52px);
    }

    .checkout-summary h1 {
        font-size: clamp(20px, 3.8svh, 25px);
    }

    .checkout-items {
        gap: 14px;
        max-height: min(38svh, 300px);
        margin-top: 0;
    }

    .checkout-item {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 14px;
        padding: 14px;
    }

    .checkout-item-image {
        grid-row: span 2;
        height: 78px;
    }

    .checkout-item-details,
    .checkout-item-values {
        gap: 10px;
    }

    .checkout-item-values {
        justify-items: start;
        text-align: left;
    }

    .checkout-item-details p,
    .checkout-item-values p,
    .checkout-quantity span,
    .cost-summary span {
        font-size: clamp(16px, 3.4svh, 22px);
    }

    .checkout-quantity {
        gap: clamp(7px, 1.6svh, 13px);
        height: clamp(22px, 3.8svh, 28px);
    }

    .checkout-quantity button {
        width: clamp(22px, 3.8svh, 28px);
        height: clamp(22px, 3.8svh, 28px);
        font-size: clamp(22px, 3.8svh, 30px);
    }

    .cost-summary {
        margin-top: 0;
        padding: 4px 14px;
    }

    .cost-summary div {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px 0;
    }

    .cost-summary div span:last-child {
        justify-self: start;
        text-align: left;
    }

    .line-items-summary div span {
        justify-self: start;
        text-align: left;
    }

    .coupon-button {
        margin-top: 0;
        font-size: 24px;
    }

    .empty-cart-button {
        margin-top: 0;
        font-size: clamp(15px, 2.8svh, 21px);
    }

    .paystack-checkout {
        gap: 16px;
        margin-top: 0;
    }

    .paystack-checkout label,
    .paystack-checkout input,
    .paystack-checkout textarea {
        font-size: 20px;
    }

    .paystack-checkout input,
    .paystack-checkout textarea {
        min-height: clamp(38px, 6.4svh, 50px);
    }

    .paystack-checkout textarea {
        min-height: clamp(50px, 8.6svh, 68px);
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .payment-button {
        min-height: clamp(46px, 8svh, 72px);
        font-size: clamp(22px, 4.8svh, 34px);
    }

    .payment-status {
        padding-top: 74px;
    }

    .payment-status h1 {
        font-size: 28px;
    }

    .payment-status p,
    .payment-status-link {
        font-size: 20px;
    }
}

@media (max-width: 360px) {
    .store-header {
        grid-template-columns: 40px minmax(0, 1fr) 58px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .category-nav {
        column-gap: 12px;
    }

    .category-link {
        font-size: 18px;
    }

    .product-code {
        font-size: 13px;
    }

    .storefront.zoomed .product-code {
        font-size: 19px;
    }

    .detail-header {
        min-height: 58px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .fixed-cart {
        right: 12px;
    }

    .product-detail {
        grid-template-rows: minmax(0, 1fr) auto;
        gap: clamp(8px, 2.4svh, 20px);
        height: calc(100svh - 58px);
        min-height: 0;
        padding: clamp(6px, 2svh, 14px) 16px clamp(10px, 2.8svh, 28px);
    }

    .detail-media {
        width: min(100%, 320px);
        height: 100%;
        max-height: 230px;
    }

    .detail-info {
        gap: clamp(8px, 2.2svh, 14px);
    }

    .detail-info h1,
    .detail-price,
    .quantity-value {
        font-size: clamp(16px, 3.9svh, 22px);
        line-height: 1.08;
    }

    .stock-tag {
        min-height: 30px;
        padding: 6px 12px;
        font-size: 12px;
    }

    .quantity-controls {
        grid-template-columns: clamp(32px, 7svh, 42px) minmax(26px, auto) clamp(32px, 7svh, 42px);
        column-gap: 6px;
    }

    .quantity-button {
        width: clamp(32px, 7svh, 42px);
        height: clamp(32px, 7svh, 42px);
        font-size: clamp(32px, 7svh, 42px);
    }

    .minus-button {
        font-size: clamp(37px, 8svh, 49px);
    }

    .checkout-summary {
        gap: clamp(8px, 2svh, 16px);
        min-height: calc(100svh - 58px);
        padding-right: 12px;
        padding-left: 12px;
    }

    .checkout-items {
        max-height: min(36svh, 250px);
    }

    .checkout-item {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .checkout-item-image {
        height: 66px;
    }

    .checkout-item-details p,
    .checkout-item-values p,
    .checkout-quantity span,
    .cost-summary span {
        font-size: clamp(14px, 3.3svh, 19px);
    }

    .checkout-quantity {
        gap: 8px;
        height: 24px;
    }

    .checkout-quantity button {
        width: 24px;
        height: 24px;
        font-size: clamp(22px, 3.8svh, 27px);
    }

    .payment-button {
        min-height: clamp(42px, 7.6svh, 66px);
        font-size: clamp(20px, 4.6svh, 30px);
    }

    .payment-status h1 {
        font-size: 24px;
    }

    .payment-status p,
    .payment-status-link {
        font-size: 18px;
    }

}

@media (max-height: 700px) {
    .detail-header {
        min-height: 56px;
        padding-top: calc(10px + var(--safe-top));
        padding-bottom: 6px;
    }

    .back-button {
        width: 30px;
        height: 30px;
        font-size: 27px;
    }

    .fixed-cart {
        top: calc(9px + var(--safe-top));
        height: 30px;
        min-width: 34px;
    }

    .detail-cart {
        font-size: 12px;
    }

    .detail-cart .fa-solid {
        font-size: 18px;
    }

    .product-detail {
        height: calc(100svh - 56px);
        gap: 9px;
        padding-top: 8px;
        padding-bottom: 12px;
    }

    .detail-media {
        max-height: 250px;
    }

    .detail-info {
        gap: 9px;
    }

    .detail-info h1,
    .detail-price,
    .quantity-value {
        font-size: clamp(15px, 3.8svh, 22px);
        line-height: 1.04;
    }

    .stock-tag {
        min-height: 26px;
        padding: 5px 10px;
        font-size: 11px;
    }

    .quantity-controls {
        grid-template-columns: clamp(28px, 6.8svh, 40px) minmax(24px, auto) clamp(28px, 6.8svh, 40px);
        margin-top: 0;
    }

    .quantity-button {
        width: clamp(28px, 6.8svh, 40px);
        height: clamp(28px, 6.8svh, 40px);
        font-size: clamp(28px, 6.8svh, 40px);
    }

    .minus-button {
        font-size: clamp(32px, 7.6svh, 46px);
    }

    .checkout-summary {
        gap: 8px;
        min-height: calc(100svh - 56px);
        padding-top: 10px;
        padding-bottom: 12px;
    }

    .checkout-summary h1 {
        font-size: clamp(18px, 3.6svh, 24px);
    }

    .checkout-items {
        gap: 8px;
        max-height: 32svh;
    }

    .checkout-item {
        gap: 10px;
        padding: 10px;
    }

    .checkout-item-image {
        height: clamp(48px, 10svh, 74px);
    }

    .checkout-item-details,
    .checkout-item-values {
        gap: 6px;
    }

    .checkout-item-details p,
    .checkout-item-values p,
    .checkout-quantity span,
    .cost-summary span {
        font-size: clamp(13px, 3svh, 19px);
    }

    .checkout-quantity {
        height: 22px;
    }

    .checkout-quantity button {
        width: 22px;
        height: 22px;
        font-size: 22px;
    }

    .cost-summary {
        padding: 3px 10px;
    }

    .cost-summary div {
        gap: 5px;
        padding: 7px 0;
    }

    .empty-cart-button {
        font-size: 14px;
    }

    .paystack-checkout {
        gap: 7px;
    }

    .paystack-checkout label,
    .paystack-checkout input,
    .paystack-checkout textarea {
        font-size: 14px;
    }

    .paystack-checkout input,
    .paystack-checkout textarea {
        min-height: 34px;
    }

    .paystack-checkout textarea {
        min-height: 46px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .payment-button {
        min-height: 42px;
        font-size: 21px;
    }

    .payment-error {
        min-height: 14px;
        font-size: 12px;
    }
}

@media (max-height: 560px) {
    .detail-header {
        min-height: 46px;
        padding-top: calc(7px + var(--safe-top));
        padding-bottom: 4px;
    }

    .back-button {
        width: 26px;
        height: 26px;
        font-size: 23px;
    }

    .fixed-cart {
        top: calc(6px + var(--safe-top));
        height: 26px;
        min-width: 30px;
    }

    .detail-cart .fa-solid {
        font-size: 16px;
    }

    .product-detail {
        height: calc(100svh - 46px);
        gap: 6px;
        padding: 5px 14px 8px;
    }

    .detail-media {
        max-height: 185px;
    }

    .detail-info {
        gap: 6px;
    }

    .detail-info h1,
    .detail-price,
    .quantity-value {
        font-size: clamp(13px, 3.6svh, 18px);
    }

    .stock-tag {
        min-height: 22px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .quantity-controls {
        grid-template-columns: 30px minmax(22px, auto) 30px;
        column-gap: 4px;
    }

    .quantity-button {
        width: 30px;
        height: 30px;
        font-size: 30px;
    }

    .minus-button {
        font-size: 35px;
    }

    .checkout-summary {
        gap: 5px;
        min-height: calc(100svh - 46px);
        padding: 6px 12px 8px;
    }

    .checkout-summary h1 {
        font-size: clamp(15px, 3.4svh, 19px);
    }

    .checkout-items {
        gap: 6px;
        max-height: 27svh;
    }

    .checkout-item {
        gap: 8px;
        padding: 8px;
    }

    .checkout-item-image {
        height: clamp(38px, 9svh, 56px);
    }

    .checkout-item-details,
    .checkout-item-values {
        gap: 4px;
    }

    .checkout-item-details p,
    .checkout-item-values p,
    .checkout-quantity span,
    .cost-summary span {
        font-size: clamp(11px, 2.8svh, 15px);
    }

    .checkout-quantity {
        gap: 5px;
        height: 18px;
    }

    .checkout-quantity button {
        width: 18px;
        height: 18px;
        font-size: 18px;
    }

    .cost-summary {
        padding: 2px 8px;
    }

    .cost-summary div {
        gap: 4px;
        padding: 5px 0;
    }

    .empty-cart-button {
        font-size: 12px;
    }

    .paystack-checkout {
        gap: 5px;
    }

    .paystack-checkout label,
    .paystack-checkout input,
    .paystack-checkout textarea {
        font-size: 12px;
    }

    .paystack-checkout input,
    .paystack-checkout textarea {
        min-height: 28px;
        padding: 0 10px;
    }

    .paystack-checkout textarea {
        min-height: 34px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .payment-button {
        min-height: 34px;
        font-size: 17px;
    }

    .payment-error {
        min-height: 12px;
        font-size: 10px;
    }
}

@media (max-height: 460px) {
    .detail-header {
        min-height: 38px;
        padding-top: calc(5px + var(--safe-top));
        padding-bottom: 3px;
    }

    .back-button {
        width: 22px;
        height: 22px;
        font-size: 20px;
    }

    .fixed-cart {
        top: calc(4px + var(--safe-top));
        height: 22px;
        min-width: 28px;
    }

    .detail-cart {
        font-size: 10px;
    }

    .detail-cart .fa-solid {
        font-size: 14px;
    }

    .product-detail {
        height: calc(100svh - 38px);
        gap: 4px;
        padding: 3px 10px 5px;
    }

    .detail-media {
        max-height: 130px;
    }

    .detail-info {
        gap: 4px;
    }

    .detail-info h1,
    .detail-price,
    .quantity-value {
        font-size: 12px;
        line-height: 1.02;
    }

    .stock-tag {
        min-height: 18px;
        padding: 3px 6px;
        font-size: 9px;
    }

    .quantity-controls {
        grid-template-columns: 24px minmax(18px, auto) 24px;
    }

    .quantity-button {
        width: 24px;
        height: 24px;
        font-size: 24px;
    }

    .minus-button {
        font-size: 28px;
    }

    .checkout-summary {
        gap: 4px;
        min-height: calc(100svh - 38px);
        padding: 4px 10px 5px;
    }

    .checkout-summary h1 {
        font-size: 13px;
    }

    .checkout-items {
        gap: 4px;
        max-height: 22svh;
    }

    .checkout-item {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        gap: 6px;
        padding: 6px;
    }

    .checkout-item-image {
        height: 34px;
    }

    .checkout-item-details,
    .checkout-item-values {
        gap: 3px;
    }

    .checkout-item-details p,
    .checkout-item-values p,
    .checkout-quantity span,
    .cost-summary span {
        font-size: 10px;
        line-height: 1.03;
    }

    .checkout-quantity {
        gap: 3px;
        height: 16px;
    }

    .checkout-quantity button {
        width: 16px;
        height: 16px;
        font-size: 16px;
    }

    .cost-summary div {
        padding: 4px 0;
    }

    .empty-cart-button {
        font-size: 10px;
    }

    .paystack-checkout {
        gap: 4px;
    }

    .paystack-checkout label,
    .paystack-checkout input,
    .paystack-checkout textarea {
        font-size: 10px;
    }

    .paystack-checkout input,
    .paystack-checkout textarea {
        min-height: 24px;
    }

    .paystack-checkout textarea {
        min-height: 30px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .payment-button {
        min-height: 28px;
        font-size: 14px;
    }

    .payment-error {
        min-height: 10px;
        font-size: 9px;
    }
}

body,
button,
input,
textarea,
select {
    font-family: "Poppins", Arial, Helvetica, sans-serif;
}

body,
button,
input,
textarea,
select,
p,
span,
a,
label,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: min(12px, 1em) !important;
}

.bx,
.fa-solid {
    font-size: revert-layer;
}

@media (min-width: 721px) and (orientation: landscape) {
    .checkout-page {
        overflow: hidden;
    }

    .product-detail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, auto) auto;
        align-content: center;
        align-items: end;
        justify-content: center;
        justify-items: center;
        gap: clamp(10px, 2.2svh, 24px);
        height: calc(100svh - 72px);
        padding: clamp(10px, 2.2svh, 22px) clamp(48px, 8vw, 120px) clamp(16px, 3svh, 32px);
    }

    .detail-media {
        width: min(100%, 40vh);
        height: 40vh;
        max-height: 40vh;
    }

    .detail-info {
        justify-items: center;
        width: min(100%, 520px);
        max-width: 520px;
        gap: clamp(10px, 2svh, 22px);
        text-align: center;
    }

    .detail-info h1,
    .detail-price {
        font-size: clamp(18px, 3.2svh, 26px) !important;
        line-height: 1.05;
    }

    .quantity-controls {
        justify-items: center;
        margin-top: clamp(2px, 0.8svh, 8px);
    }

    .checkout-summary {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        align-items: flex-start;
        justify-content: center;
        column-gap: clamp(24px, 4vw, 56px);
        row-gap: clamp(12px, 2.2svh, 24px);
        width: 100%;
        max-width: 1180px;
        height: calc(100svh - 72px);
        min-height: 0;
        overflow: hidden;
        padding: clamp(14px, 3svh, 28px) clamp(28px, 5vw, 72px);
    }

    .checkout-summary h1 {
        flex: 0 0 100%;
    }

    .cost-summary {
        order: 1;
        flex: 0 1 380px;
        max-width: 420px;
        width: 100%;
    }

    .checkout-items {
        order: 2;
        flex: 1 1 520px;
        max-height: calc(100svh - 178px);
        min-width: 0;
        padding-right: 4px;
    }

    .empty-cart-button {
        order: 3;
        flex: 0 0 100%;
    }

    .checkout-item {
        min-height: 160px;
    }

    .product-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: 85vw;
        padding: 0;
        row-gap: clamp(24px, 5svh, 54px);
        column-gap: clamp(14px, 1.8vw, 26px);
    }

    .product-link {
        grid-template-rows: clamp(82px, 10vw, 146px) auto;
        min-height: clamp(134px, 16vw, 220px);
    }

    .product-image {
        width: min(100%, 9.5vw, 150px);
    }

    .storefront.zoomed .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 85vw;
        row-gap: clamp(36px, 6svh, 68px);
        column-gap: clamp(18px, 3vw, 40px);
    }

    .storefront.zoomed .product-link {
        grid-template-rows: clamp(126px, 16vw, 192px) auto;
        min-height: clamp(210px, 24vw, 300px);
    }

    .storefront.zoomed .product-image {
        width: min(100%, 15vw, 196px);
    }
}