/* ~~~~~~~~~~ Product cards: one look on the home page and the category pages ~~~~~~~~~~ */
/* template-parts/components/product-card.php. Loaded after site.css. */

.mobilka-product {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: .75rem .75rem 1rem;
    border: 1px solid #dfe4ec;
    border-radius: 1rem;
    background: #fff;
    text-align: left;
    box-shadow: 0 2px 4px rgba(20, 33, 61, .06), 0 10px 28px rgba(20, 33, 61, .1);
    transition: transform .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {
    .mobilka-product:hover {
        transform: translateY(-3px);
        box-shadow: 0 3px 6px rgba(20, 33, 61, .08), 0 16px 36px rgba(20, 33, 61, .14);
    }
}

/* The card image as a real plastic card */
.mobilka-product__image {
    padding: .5rem .5rem .25rem;
}

.mobilka-product__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 85.6 / 54;
    object-fit: cover;
    border-radius: .5rem;
    box-shadow: 0 4px 12px rgba(20, 33, 61, .15);
}

.mobilka-product__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: .75rem;
    padding: 0 .375rem;
}

/* Name | price */
.mobilka-product__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .125rem;
    text-align: center;
}

@media (min-width: 576px) {
    .mobilka-product__head {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: .5rem;
        text-align: left;
    }
}

.mobilka-product__title {
    min-width: 0;
    margin: 0 !important;
    color: #14213d;
    font-size: 1.125rem;
    font-weight: 900;
    line-height: 1.2;
}

.mobilka-product__price {
    flex: none;
    margin: 0;
    color: #d20e0e;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.05;
    white-space: nowrap;
}

.mobilka-product__price .amount,
.mobilka-product__price .woocommerce-Price-amount {
    color: inherit;
}

/* Short info line: VAT, delivery, price list - small lines under name and price */
.mobilka-product__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .125rem;
    margin: .375rem 0 .875rem;
    color: #8a94a6;
    font-size: .8125rem;
    line-height: 1.35;
}

@media (min-width: 576px) {
    .mobilka-product__meta {
        align-items: flex-start;
    }
}

.mobilka-product__meta a {
    color: #0a7fb0;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mobilka-product__meta a::after {
    content: " ↗";
}

.mobilka-product__excerpt {
    margin: 0 0 .875rem;
    color: #4a5568;
    font-size: .875rem;
    line-height: 1.45;
}

/* Actions */
.mobilka-product__cta {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: auto;
}

.mobilka-product__row {
    display: flex;
    gap: .5rem;
}

.mobilka-product .mobilka-cta__button {
    flex: none;
    width: 100%;
    min-height: 2.5rem;
    padding: .5rem .75rem;
    border-radius: .625rem;
    box-shadow: none;
    font-size: .9375rem;
}

/* Quantity stepper */
.mobilka-product__quantity {
    display: flex;
    flex: none;
    align-items: stretch;
    margin: 0 !important;
}

.mobilka-product__quantity .product__button--quantity {
    width: 2rem;
    padding: 0;
    border: 1px solid #cfd6e0;
    background: #f5f7fa;
    color: #14213d;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.mobilka-product__quantity .product__button--quantity:first-child {
    border-radius: .625rem 0 0 .625rem;
}

.mobilka-product__quantity .product__button--quantity:last-child {
    border-radius: 0 .625rem .625rem 0;
}

.mobilka-product__quantity .quantity {
    margin: 0 !important;
}

.mobilka-product__quantity input[type=number] {
    width: 2.25rem;
    height: 2.5rem;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #cfd6e0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    color: #14213d;
    font-size: .9375rem !important;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
}

.mobilka-product__quantity input[type=number]::-webkit-outer-spin-button,
.mobilka-product__quantity input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mobilka-product__unavailable {
    margin-top: auto;
    color: #4a5568;
    font-size: .875rem;
    font-weight: 700;
}


/* ~~~~~~~~~~ SIM card: hero treatment ~~~~~~~~~~ */

.mobilka-product__bonus {
    margin: .25rem 0 0;
    color: #4a5568;
    font-size: .875rem;
    text-align: center;
}

.mobilka-product__bonus strong {
    color: #14213d;
    font-weight: 900;
}

@media (min-width: 576px) {
    .mobilka-product__bonus {
        text-align: right;
    }
}

.mobilka-product__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin: 1rem 0 .25rem;
    padding: 0;
    list-style: none;
}

.mobilka-product__chips li {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: .5rem .75rem;
    border-radius: .625rem;
    background: #f3f5f8;
    color: #14213d;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.2;
}

.mobilka-product__chips .mobilka-icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: #0a7fb0;
}

/* The only product of a category (SIM card page): big horizontal card like the home hero */
.mobilka-products > .mobilka-product--sim:only-of-type {
    grid-column: 1 / -1;
    max-width: 60rem;
    width: 100%;
    margin: 0 auto;
    padding: 1.25rem;
}

.mobilka-products > .mobilka-product--sim:only-of-type .mobilka-product__image img {
    aspect-ratio: auto;
    object-fit: contain;
    box-shadow: none;
    filter: drop-shadow(0 10px 20px rgba(20, 33, 61, .2));
}

@media (min-width: 768px) {
    .mobilka-products > .mobilka-product--sim:only-of-type {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        align-items: center;
        gap: 2rem;
        padding: 2rem;
    }

    .mobilka-products > .mobilka-product--sim:only-of-type .mobilka-product__body {
        margin-top: 0;
    }

    .mobilka-products > .mobilka-product--sim:only-of-type .mobilka-product__title {
        font-size: 1.75rem;
    }

    .mobilka-products > .mobilka-product--sim:only-of-type .mobilka-product__price {
        font-size: 2.375rem;
    }

    .mobilka-products > .mobilka-product--sim:only-of-type .mobilka-product__cta {
        flex-direction: row;
        margin-top: .5rem;
    }

    .mobilka-products > .mobilka-product--sim:only-of-type .mobilka-cta__button {
        flex: 1;
        width: auto;
    }
}

@media (hover: hover) {
    .mobilka-products > .mobilka-product--sim:only-of-type:hover {
        transform: none;
    }
}


/* ~~~~~~~~~~ Category page layout: cards on the light page, description as a side card ~~~~~~~~~~ */

#main .woocommerce-product-archive > .container > .row.c-shadow {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#main .woocommerce-product-archive__grid-col {
    border: 0 !important;
    background: transparent !important;
}

.woocommerce-product-archive__grid-col .mobilka-products {
    padding: 0 !important;
}

@media (min-width: 992px) {
    .woocommerce-product-archive__grid-col .mobilka-products {
        padding: 0 0 0 1.5rem !important;
    }
}

.woocommerce-product-archive__sidebar-col {
    border: 0 !important;
}

.woocommerce-product-archive__sidebar-col .woocommerce-sidebar {
    margin-top: 1.5rem;
    padding: 1.25rem !important;
    border: 1px solid #e6eaf0;
    border-radius: 1rem;
    background: #fff;
    color: #4a5568;
    box-shadow: 0 8px 24px rgba(20, 33, 61, .06);
}

@media (min-width: 768px) {
    .woocommerce-product-archive__sidebar-col .woocommerce-sidebar {
        position: sticky;
        top: calc(var(--mobilka-header-height, 76px) + 1rem);
        margin-top: 0;
    }
}

.woocommerce-product-archive__sidebar-col .custom-widget {
    font-size: .875rem !important;
    line-height: 1.5;
}

.woocommerce-product-archive__sidebar-col .custom-widget h2 {
    color: #14213d;
    font-size: 1.125rem !important;
}

.woocommerce-product-archive__sidebar-col img {
    max-width: 9rem;
    height: auto;
}

.mobilka-products-note {
    margin: 0 0 1rem !important;
    border-left-color: #0a7fb0 !important;
    background: #fff !important;
    color: #4a5568;
    box-shadow: 0 2px 8px rgba(20, 33, 61, .05);
}

@media (min-width: 992px) {
    .mobilka-products-note {
        margin-left: 1.5rem !important;
    }
}

/* Narrow cards (2 per row on phones): smaller stepper, so stepper + cart icon fit */
@media (max-width: 575.98px) {
    .mobilka-product {
        padding: .5rem .5rem .75rem;
    }

    .mobilka-product__body {
        padding: 0 .125rem;
    }

    .mobilka-product__row {
        gap: .375rem;
    }

    .mobilka-product__quantity .product__button--quantity {
        width: 1.75rem;
    }

    .mobilka-product__quantity input[type=number] {
        width: 1.75rem;
    }
}

/* Info line from 576px: delivery note left, price list link right (under the price) */
@media (min-width: 576px) {
    .mobilka-product__meta {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        gap: .125rem .75rem;
    }

    .mobilka-product__meta a {
        margin-left: auto;
        text-align: right;
    }
}


/* ~~~~~~~~~~ "Add to cart" (client 16.10.2026: several products in one order) ~~~~~~~~~~ */
/* The red button adds and stays on the page (js/mobilka-sales.js), the cart bar leads to checkout.
   Category and home cards (client 19.10.2026: the home block like the category pages): compact quantity stepper
   and the button in one row. The button label is shown only when the card is wide enough (container query on the
   actions row), otherwise the cart icon alone. Cards without a stepper (sold individually): full-width button. */

.mobilka-product__cta {
    container-type: inline-size;
}

.mobilka-product__cta:has(.mobilka-product__quantity) {
    flex-direction: row;
    align-items: stretch;
    gap: .375rem;
}

.mobilka-product__cta .mobilka-product__quantity .product__button--quantity {
    width: 1.75rem;
}

.mobilka-product__cta .mobilka-product__quantity input[type=number] {
    width: 2rem;
}

.mobilka-product .mobilka-product__add {
    gap: .375rem;
    white-space: nowrap;
}

.mobilka-product__cta:has(.mobilka-product__quantity) .mobilka-product__add {
    flex: 1;
    width: auto;
    min-width: 0;
    padding-left: .375rem;
    padding-right: .375rem;
}

.mobilka-product__add .mobilka-cta__icon {
    width: 1.125rem;
    height: 1.125rem;
}

.mobilka-product__add-done {
    display: none;
}

/* WooCommerce adds a "View cart" link after the button on "added_to_cart"; the cart bar does that job */
.mobilka-product .added_to_cart {
    display: none !important;
}

/* next to the stepper: icon only on narrow cards, the short label from ~13rem */
.mobilka-product__cta:has(.mobilka-product__quantity) .mobilka-product__add-label,
.mobilka-product__cta:has(.mobilka-product__quantity) .mobilka-product__add-done {
    font-size: .875rem;
}

.mobilka-product__cta:has(.mobilka-product__quantity) .mobilka-product__add-label {
    display: none;
}

.mobilka-product__cta:has(.mobilka-product__quantity) .mobilka-product__add .mobilka-cta__icon {
    width: 1.375rem;
    height: 1.375rem;
}

@container (min-width: 13rem) {
    .mobilka-product__cta:has(.mobilka-product__quantity) .mobilka-product__add-label {
        display: inline;
    }

    .mobilka-product__cta:has(.mobilka-product__quantity) .mobilka-product__add .mobilka-cta__icon {
        width: 1.125rem;
        height: 1.125rem;
    }
}

.mobilka-product .mobilka-product__add.is-loading {
    opacity: .7;
    cursor: progress;
}

.mobilka-product .mobilka-product__add.is-added,
.mobilka-product .mobilka-product__add.is-added:hover,
.mobilka-product .mobilka-product__add.is-added:focus {
    background-color: #0a7fb0;
}

.mobilka-product__add.is-added .mobilka-cta__icon,
.mobilka-product__cta .mobilka-product__add.is-added .mobilka-product__add-label {
    display: none;
}

.mobilka-product__add.is-added .mobilka-product__add-done::before {
    content: "✓";
}

.mobilka-product__add.is-added .mobilka-product__add-done {
    display: inline;
    font-size: 0;
}

.mobilka-product__add.is-added .mobilka-product__add-done::before {
    font-size: 1.125rem;
}

/* the "✓ In cart" text where the label fits */
@container (min-width: 13rem) {
    .mobilka-product__add.is-added .mobilka-product__add-done {
        font-size: .875rem;
    }

    .mobilka-product__add.is-added .mobilka-product__add-done::before {
        content: "✓ ";
        font-size: inherit;
    }
}

/* showcase cards on narrow phones: the label alone */
@media (max-width: 575.98px) {
    .mobilka-product .mobilka-product__add {
        font-size: .875rem;
    }

    .mobilka-product__cta:not(:has(.mobilka-product__quantity)) .mobilka-product__add .mobilka-cta__icon {
        display: none;
    }
}

/* The only product (SIM page, wide card): stepper and button in one row with the full label */
@media (min-width: 576px) {
    .mobilka-products > .mobilka-product--sim:only-of-type .mobilka-product__quantity .product__button--quantity {
        width: 2rem;
    }

    .mobilka-products > .mobilka-product--sim:only-of-type .mobilka-product__quantity input[type=number] {
        width: 2.5rem;
    }
}