/* PT Watercraft */
/* Shop Components */

/* ================================
   CART BUTTON
   ================================ */

.cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0.38rem var(--spacing-sm);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    color: var(--color-dark);
    margin: 0;
    min-width: 60px;
}

.cart:hover {
    scale: 1;
    filter: none;
}

.cart-badge {
    display: inline-flex;
    width: 0;
    height: 16px;
    align-items: center;
    justify-content: center;
    background: var(--color-orange);
    color: var(--color-white);
    border-radius: 50%;
    font-family: var(--font-family-mono);
    font-size: 9px;
    font-weight: var(--font-weight-bold);
    text-align: center;
    line-height: 1;
    overflow: hidden;
}

/* ================================
   CARDS VARIANTS
   ================================ */

/* Product card */
.product-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: fit-content;
    background-color: var(--color-white);
    text-decoration: none;
    text-align: left;
    border: 1px solid #F9F2EA;
    padding-top: var(--spacing-xl);
}

.product-card img {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: contain;
}

.product-card .product-info {
    width: 100%;
    padding-top: var(--spacing-xl);
}

.product-card h4 {
    color: var(--color-dark);
}

.product-card p {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    color: var(--color-dark);
}

.product-card .btn {
    margin-top: var(--spacing-xl);
}

/* Card title row: listing title left, Sale/Sold-out badge right */
.product-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}

.card-badge.sale {
    background: var(--color-orange);
    color: var(--color-white);
}

.card-badge.sale img {
    width: 14px;
    height: 14px;
    /* sale.svg is orange — render it white on the orange badge */
    filter: brightness(0) invert(1);
}

.card-badge.sold-out {
    background: var(--color-dark);
    color: var(--color-white);
}

/* ================================
   LISTING PAGE
   ================================ */

/* Category link back to its storefront section (.subtitle supplies the
   orange mono treatment) */
.listing-category {
    display: inline-block;
    text-decoration: none;
}

@media (hover: hover) {
    .listing-category:hover {
        text-decoration: underline;
    }
}

/* Narrow info column left, image gallery right */
.listing-grid {
    display: grid;
    grid-template-columns: minmax(0, 360px) 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

.purchase-options {
    margin-top: var(--spacing-xl);
}

/* Visually matches h3 (main.css) without being one — these are purchase-form
   labels, not document headings, so they stay out of the heading outline. */
.options-label,
.quantity-label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    color: var(--color-blue);
}

.options-label {
    margin-bottom: var(--spacing-sm);
}

.variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.variant-option {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-peachy);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    color: var(--color-dark);
    cursor: pointer;
}

.variant-option.selected {
    background: var(--color-teal);
    border-color: var(--color-teal);
}

.variant-option:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* "Ships to …" / "Delivered via email." — follows the selected variant */
.options-caption {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-dark);
}

.quantity-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block: var(--spacing-lg);
}

.quantity-stepper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.quantity-stepper button {
    padding: 0 var(--spacing-sm);
    background: none;
    border: none;
    font-size: var(--font-size-md);
    color: var(--color-dark);
    cursor: pointer;
}

.quantity-stepper button:disabled {
    opacity: 0.3;
    cursor: default;
}

.quantity-stepper span {
    min-width: 1.5rem;
    text-align: center;
}

/* Add to Cart: label left, mono price right (price tracks quantity) */
.add-to-cart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    letter-spacing: normal;
    /* Base .btn compresses to line-height 0.95 — match the variant
       buttons' normal text height so equal padding reads equal */
    line-height: var(--line-height-normal);
}

.add-to-cart .add-to-cart-price {
    font-family: var(--font-family-mono);
}

/* Struck base price when a discount reduces the line total */
.add-to-cart-price s {
    margin-right: var(--spacing-sm);
    color: rgb(255 255 255 / 0.55);
}

.add-to-cart:disabled {
    background: #333333; /* sold out */
    cursor: not-allowed;
}

.add-to-cart:disabled:hover {
    scale: 1;
    filter: none;
}

/* Discount callout under the Add to Cart button; .unmet = condition not
   yet satisfied (grey icon, condition copy) */
.discount-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--color-dark);
}

.discount-note-corner {
    width: 13px;
    height: 13px;
    /* The corner stroke hangs above the text baseline */
    margin-top: -4px;
}

.discount-note-icon {
    width: 18px;
    height: 18px;
}

.discount-note.unmet .discount-note-icon {
    filter: grayscale(1) opacity(0.6);
}

/* Simple visibility utility (shop pages) */
.hidden {
    display: none;
}

/* ================================
   CART MODAL
   ================================ */

#modal-bg {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(40 0 0 / 0.3);
    z-index: 1000;
    color: var(--color-dark);
    animation: fadeIn 0.3s ease;
}

#modal-bg.closing {
    animation: fadeOut 0.3s ease forwards;
}

#cart-modal {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 475px;
    height: 100vh;
    top: 0;
    right: 0;
    padding: var(--spacing-lg);
    background: white;
    box-shadow: var(--shadow);
    animation: slideInRight 0.3s ease;
}

#cart-modal.closing {
    animation: slideOutRight 0.3s ease forwards;
}

.cart-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
}

.cart-header p {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-badge {
    color: var(--color-orange);
}

.cart-content {
    flex: 1;
    overflow-y: auto;
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
}

#cart-modal .cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-lg);
    background-color: var(--color-peachy);
    border-radius: var(--border-radius-sm);
}

#cart-modal .cart-item s {
    color: var(--color-gray);
}

.cart-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
}

.cart-actions .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--color-white);
    border-radius: var(--border-radius-sm);
}

.cart-actions span {
    min-width: 1.5rem;
    text-align: center;
}

/* Discount callout under a cart item (shares .discount-note styles,
   centered like the listing page's) */
.cart-item-note {
    margin: calc(-1 * var(--spacing-xs)) 0 var(--spacing-md);
}

/* ================================
   CART SUMMARY & COUPON
   ================================ */

.cart-summary {
    margin-bottom: var(--spacing-md);
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.cart-summary-row .summary-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.cart-summary-row .summary-amount {
    font-family: var(--font-family-mono);
}

.cart-summary-row.cart-total {
    margin-top: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
}

.discount-row-icon {
    width: 16px;
    height: 16px;
}

.cart-summary-row.unmet .discount-row-icon {
    filter: grayscale(1) opacity(0.6);
}

.cart-summary-row.unmet .summary-label {
    color: var(--color-gray);
}

/* Collapsed "Discount code" label → entry field → applied chip */
.coupon-toggle {
    padding: 0;
    margin-bottom: var(--spacing-md);
    background: none;
    border: none;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    cursor: pointer;
}

@media (hover: hover) {
    .coupon-toggle:hover {
        color: var(--color-dark);
        text-decoration: underline;
    }
}

.coupon-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.coupon-input {
    flex: 1;
    max-width: 220px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-peachy);
    border: none;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--color-dark);
    text-transform: uppercase;
}

.coupon-input:focus {
    outline: 2px solid var(--color-teal);
}

.coupon-apply {
    background: none;
    border: none;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--color-dark);
    cursor: pointer;
}

@media (hover: hover) {
    .coupon-apply:hover {
        text-decoration: underline;
    }
}

.coupon-error {
    margin: calc(-1 * var(--spacing-sm)) 0 var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-orange);
}

.cart-empty {
    margin: auto;
    transform: translateY(-50px);
    text-align: center;
}

.cart-warnings {
    justify-self: start;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgb(203 85 33 / 0.2);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgb(203 85 33 / 0.3);
    font-size: var(--font-size-xs);
    color: var(--color-dark);
    text-align: left;
}

.cart-warnings p { margin-bottom: 0; }

.cart-subtotal {
    margin-top: auto;
}

/* ================================
   ANIMATIONS
   ================================ */

@keyframes fadeIn {
    from {
        background: rgb(40 0 0 / 0);
    }
    to {
        background: rgb(40 0 0 / 0.3);
    }
}

@keyframes fadeOut {
    from {
        background: rgb(40 0 0 / 0.3);
    }
    to {
        background: rgb(40 0 0 / 0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

@media (max-width: 768px) {
    #cart-modal {
        width: 100%;
    }

    /* Under 16px, mobile Safari zooms the page when the field is focused */
    .coupon-input {
        font-size: 16px;
    }

    /* Product page: stack + reorder columns (images first) */
    .listing-grid {
        grid-template-columns: 1fr;
        row-gap: var(--spacing-lg);
    }

    .page-column-grid section:first-child,
    .listing-grid section:first-child {
        order: 2;
    }

    .page-column-grid section:last-child,
    .listing-grid section:last-child {
        order: 1;
    }

    /* Product page: horizontal image gallery */
    .product-images {
        display: flex;
        overflow-x: auto;
        gap: var(--spacing-md);
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0;
    }

    .product-images .card {
        flex: 0 0 85%;
        scroll-snap-align: start;
    }
}