/*
 *  ,d88b.d88b,
 *  88888888888
 *  `Y8888888Y'
 *    `Y888Y'
 *      `Y'
 *     mano
 *
 *  WooCommerce-specific styles.
 *  Loaded only on shop/product/cart/checkout pages.
 */

/* ═══ Shop toolbar ═══════════════════════════════════════════════════════ */

.ocean-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3);
    padding: var(--s-4) 0;
    border-block-end: 1px solid var(--c-border);
    margin-block-end: var(--s-8);
}
.woocommerce-result-count {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}
.woocommerce-ordering select {
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-bg);
    color: var(--c-text);
    font-family: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: border-color var(--d-fast) var(--e-out);
}
.woocommerce-ordering select:hover { border-color: var(--c-primary-l); }
.woocommerce-ordering select:focus-visible { outline-color: var(--c-accent); }

/* ═══ Product loop (WC's default container .products) ════════════════════ */

.woocommerce ul.products,
ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: var(--s-6) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 var(--s-12) 0 !important;
}
.woocommerce ul.products li.product,
ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
    display: flex;
    flex-direction: column;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
    border-color: transparent;
}
.woocommerce ul.products li.product a img,
ul.products li.product a img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    padding: var(--s-4);
    background: var(--c-surface);
    mix-blend-mode: multiply;
    margin: 0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
    padding: var(--s-3) var(--s-4) 0 !important;
    font-family: var(--ff-display);
    font-size: var(--fs-base) !important;
    font-weight: 600 !important;
    color: var(--c-text);
    line-height: 1.35;
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.woocommerce ul.products li.product .price,
ul.products li.product .price {
    padding: 0 var(--s-4) !important;
    color: var(--c-primary) !important;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-md) !important;
    margin-block: var(--s-2) 0 !important;
}
.woocommerce ul.products li.product .button,
ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: var(--s-3) var(--s-4) var(--s-4) !important;
    padding: var(--s-2) var(--s-4) !important;
    background: var(--c-primary) !important;
    color: #fff !important;
    border-radius: var(--r-pill) !important;
    font-family: var(--ff-display);
    font-weight: 600 !important;
    font-size: var(--fs-sm) !important;
    text-decoration: none !important;
    transition: background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-spring);
}
.woocommerce ul.products li.product .button:hover {
    background: var(--c-primary-d) !important;
    transform: translateY(-2px);
}

/* Hide the default star ratings on cards (often misleading for B2B) */
.woocommerce ul.products li.product .star-rating { display: none; }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul {
    display: flex; gap: var(--s-1); justify-content: center;
    list-style: none; padding: 0; margin: var(--s-8) 0;
    border: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li,
nav.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 var(--s-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-text);
    font-family: var(--ff-display);
    background: var(--c-bg) !important;
    transition: all var(--d-fast) var(--e-out);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--c-primary) !important;
    color: #fff;
    border-color: var(--c-primary);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--c-primary) !important;
    color: #fff !important;
    border-color: var(--c-primary);
}

/* ═══ Empty state ════════════════════════════════════════════════════════ */

.ocean-empty-state {
    text-align: center;
    padding: var(--s-16) 0;
}
.ocean-empty-state h2 { margin-block-end: var(--s-3); }

/* ═══ Single product (bulletproof grid — important for dual-render) ════ */

.ocean-product-top {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(var(--s-6), 4vw, var(--s-16)) !important;
    align-items: start !important;
}
@media (max-width: 900px) {
    .ocean-product-top {
        grid-template-columns: 1fr !important;
    }
}
.ocean-product-top__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin-block-end: var(--s-4);
}
.ocean-product-top__short-desc {
    color: var(--c-text-muted);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    margin-block-end: var(--s-6);
}
.ocean-product-top__short-desc p { margin-block-end: var(--s-3); }
.ocean-product-top__price {
    font-family: var(--ff-display);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--c-primary);
    line-height: 1;
    margin-block-end: var(--s-6);
}
.ocean-product-top__price .woocommerce-Price-amount {
    font-size: inherit;
    color: inherit;
}
.ocean-product-top__price del {
    font-size: var(--fs-lg);
    color: var(--c-text-soft);
    margin-inline-end: var(--s-2);
}
.ocean-price-suffix {
    display: inline-block;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    font-weight: 400;
    margin-inline-start: var(--s-2);
}

.ocean-product-top__b2b-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-block-end: var(--s-6);
}
.ocean-b2b-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--c-accent-soft);
    color: var(--c-primary);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.ocean-branding-block {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-5);
    margin-block-end: var(--s-6);
    transition: border-color var(--d-base) var(--e-out);
}
.ocean-branding-block:hover { border-color: var(--c-border-strong); }
.ocean-branding-block summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: var(--fs-base);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ocean-branding-block summary::-webkit-details-marker { display: none; }
.ocean-branding-block summary::after {
    content: "+";
    color: var(--c-primary);
    font-size: 1.5em;
    line-height: 1;
    transition: transform var(--d-base) var(--e-out);
}
.ocean-branding-block[open] summary::after { content: "−"; }
.ocean-branding-list {
    list-style: none;
    padding: 0;
    margin: var(--s-4) 0 0;
}
.ocean-branding-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-3) 0;
    border-block-end: 1px dashed var(--c-border);
    font-size: var(--fs-sm);
}
.ocean-branding-list li:last-child { border-block-end: 0; }
.ocean-branding-list li strong { color: var(--c-text); }
.ocean-branding-list li span { color: var(--c-text-muted); }

.ocean-product-top__actions {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding-block: var(--s-6);
    border-block: 1px solid var(--c-border);
}
/* Force the WC cart form (which holds quantity + add-to-cart) into a clean
   vertical stack so the two CTAs sit one above the other at matching width. */
.ocean-product-top__actions form.cart {
    display: flex !important;
    flex-direction: column;
    gap: var(--s-3);
    margin: 0 !important;
}
.ocean-product-top__actions .quantity {
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.ocean-product-top__actions input[type="number"],
.ocean-product-top__actions .qty {
    width: 88px;
    height: 52px;
    padding: 0 var(--s-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    font-family: var(--ff-display);
    font-size: var(--fs-md);
    text-align: center;
}

/* Add-to-Cart and WhatsApp buttons — identical size, same shape, full-width,
   stacked vertically. Both use --s-3 vertical padding and --s-6 horizontal. */
.ocean-product-top__actions .single_add_to_cart_button,
.ocean-product-whatsapp {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    width: 100% !important;
    min-height: 56px;
    padding: var(--s-3) var(--s-6) !important;
    border-radius: var(--r-pill) !important;
    font-family: var(--ff-display);
    font-weight: 600 !important;
    font-size: var(--fs-md) !important;
    border: 0 !important;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-spring), box-shadow var(--d-fast) var(--e-out) !important;
}
.ocean-product-top__actions .single_add_to_cart_button {
    background: var(--c-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(14, 77, 140, 0.3);
}
.ocean-product-top__actions .single_add_to_cart_button:hover {
    background: var(--c-primary-d) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(14, 77, 140, 0.45);
}
.ocean-product-whatsapp {
    background: var(--c-whatsapp) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}
.ocean-product-whatsapp:hover {
    background: var(--c-whatsapp-d) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5);
}
.ocean-product-top__quick-contact {
    margin-block-start: var(--s-4);
    text-align: center;
}
.ocean-quick-contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}
.ocean-quick-contact-link:hover { color: var(--c-primary); }

/* ═══ Gallery overrides ════════════════════════════════════════════════ */

.woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
}
.woocommerce-product-gallery__image {
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--c-surface);
}

/* ═══ Tabs ═════════════════════════════════════════════════════════════ */

.woocommerce-tabs {
    background: var(--c-bg);
    border-radius: var(--r-lg);
    padding: var(--s-6);
}
.woocommerce-tabs ul.tabs {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 var(--s-6) 0 !important;
    display: flex !important;
    gap: var(--s-2) !important;
    border-block-end: 1px solid var(--c-border) !important;
    flex-wrap: wrap;
}
.woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs::after { display: none !important; }
.woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.woocommerce-tabs ul.tabs li a {
    display: block;
    padding: var(--s-3) var(--s-5) !important;
    color: var(--c-text-muted);
    font-family: var(--ff-display);
    font-weight: 600;
    border-block-end: 2px solid transparent;
    transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
    text-decoration: none !important;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
    color: var(--c-primary);
    border-block-end-color: var(--c-primary);
}
.woocommerce-Tabs-panel h2 { display: none; } /* WC's auto "Description" h2 — redundant */

/* ═══ Cart ═════════════════════════════════════════════════════════════ */

.woocommerce-cart .ocean-page-header { padding-block-end: var(--s-6); }
.woocommerce-cart table.shop_table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: var(--c-card);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    border: 1px solid var(--c-border);
}
.woocommerce-cart table.shop_table th {
    background: var(--c-surface);
    font-family: var(--ff-display);
    color: var(--c-text);
    padding: var(--s-4) var(--s-5);
    font-weight: 600;
    border-block-end: 1px solid var(--c-border);
}
.woocommerce-cart table.shop_table td {
    padding: var(--s-4) var(--s-5);
    border-block-end: 1px solid var(--c-border);
    vertical-align: middle;
}
.woocommerce-cart table.shop_table td.product-thumbnail img { width: 80px; height: 80px; object-fit: contain; }
.woocommerce-cart table.shop_table td.product-name a {
    color: var(--c-text);
    font-family: var(--ff-display);
    font-weight: 600;
}
.woocommerce-cart table.shop_table .product-remove a.remove {
    color: var(--c-danger) !important;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.06);
    display: inline-flex !important;
    align-items: center; justify-content: center;
    transition: background var(--d-fast) var(--e-out);
}
.woocommerce-cart table.shop_table .product-remove a.remove:hover {
    background: var(--c-danger) !important;
    color: #fff !important;
}

.ocean-cart-checkout {
    margin-block-start: var(--s-6);
    padding: var(--s-6);
    background: var(--c-accent-soft);
    border-radius: var(--r-lg);
}
.ocean-cart-checkout__note {
    display: flex;
    gap: var(--s-3);
    margin-block-end: var(--s-5);
}
.ocean-cart-checkout__note svg {
    flex-shrink: 0;
    color: var(--c-primary);
    margin-block-start: 4px;
}
.ocean-cart-checkout__note strong {
    display: block;
    font-family: var(--ff-display);
    color: var(--c-primary);
    margin-block-end: var(--s-1);
    font-size: var(--fs-md);
}
.ocean-cart-checkout__note p {
    font-size: var(--fs-sm);
    color: var(--c-text);
    margin: 0;
}
.ocean-cart-checkout__alt {
    text-align: center;
    margin-block-start: var(--s-3);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.ocean-cart-checkout__alt a {
    color: var(--c-primary);
    font-weight: 700;
}

.ocean-empty-cart {
    text-align: center;
    padding: var(--s-16) var(--s-4);
    max-width: 560px;
    margin-inline: auto;
}
.ocean-empty-cart__icon {
    color: var(--c-text-soft);
    margin-inline: auto;
    margin-block-end: var(--s-4);
}
.ocean-empty-cart__title {
    margin-block-end: var(--s-3);
}
.ocean-empty-cart__copy {
    color: var(--c-text-muted);
    line-height: var(--lh-loose);
    margin-block-end: var(--s-6);
}
.ocean-empty-cart__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    justify-content: center;
}

/* ═══ Contact form fields ══════════════════════════════════════════════ */

.ocean-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-6);
    margin-block-end: var(--s-12);
}
.ocean-contact-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    text-align: center;
    transition: transform var(--d-base) var(--e-spring), box-shadow var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.ocean-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
    border-color: transparent;
}
.ocean-contact-card__icon {
    width: 64px; height: 64px;
    margin-inline: auto;
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    margin-block-end: var(--s-4);
}
.ocean-contact-card h3 { font-family: var(--ff-display); margin-block-end: var(--s-3); }
.ocean-contact-card p { color: var(--c-text-muted); margin-block-end: var(--s-2); font-size: var(--fs-sm); }
.ocean-contact-card .ocean-btn { margin-block-start: var(--s-3); }

.ocean-contact-form-wrap {
    max-width: 640px;
    margin: 0 auto;
    background: var(--c-card);
    border-radius: var(--r-xl);
    padding: clamp(var(--s-6), 4vw, var(--s-12));
    box-shadow: var(--sh-md);
    border: 1px solid var(--c-border);
}
.ocean-contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    margin-block-start: var(--s-6);
}
.ocean-field { display: flex; flex-direction: column; gap: var(--s-2); }
.ocean-field label {
    font-family: var(--ff-display);
    font-weight: 600;
    color: var(--c-text);
    font-size: var(--fs-sm);
}
.ocean-field input, .ocean-field textarea {
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-bg);
    font-family: inherit;
    font-size: var(--fs-base);
    transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.ocean-field input:focus, .ocean-field textarea:focus {
    border-color: var(--c-primary);
    outline: 0;
    box-shadow: 0 0 0 4px rgba(31, 168, 221, 0.15);
}
.ocean-contact-form button[type="submit"] {
    align-self: flex-start;
    margin-block-start: var(--s-2);
}

/* ═══ Catalog quick-nav strip (horizontal pill row) ══════════════════════ */

.ocean-cat-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 50;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(1.6) blur(12px);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    border-block: 1px solid var(--c-border);
    padding-block: var(--s-3);
}
.ocean-cat-nav__inner {
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--c-accent) transparent;
    scroll-snap-type: x proximity;
    padding-block-end: 2px;
    /* Soft fade at the start/end edges to hint scroll */
    mask-image: linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to left, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.ocean-cat-nav__inner::-webkit-scrollbar { height: 4px; }
.ocean-cat-nav__inner::-webkit-scrollbar-thumb { background: var(--c-accent); border-radius: 4px; }
.ocean-cat-nav__inner::-webkit-scrollbar-track { background: transparent; }

.ocean-cat-nav__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    flex-shrink: 0;
    padding: var(--s-2) var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    color: var(--c-text);
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: all var(--d-fast) var(--e-out);
}
.ocean-cat-nav__pill:hover {
    background: var(--c-accent-soft);
    border-color: var(--c-primary-l);
    color: var(--c-primary);
    transform: translateY(-1px);
}
.ocean-cat-nav__pill.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(14, 77, 140, 0.25);
}
.ocean-cat-nav__pill.is-active:hover {
    background: var(--c-primary-d);
    color: #fff;
}
.ocean-cat-nav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: rgba(14, 77, 140, 0.1);
    color: var(--c-primary);
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--r-pill);
    line-height: 1;
}
.ocean-cat-nav__pill.is-active .ocean-cat-nav__count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.ocean-cat-nav__pill svg { color: var(--c-primary); }
.ocean-cat-nav__pill.is-active svg { color: #fff; }

@media (max-width: 768px) {
    .ocean-cat-nav { top: var(--header-h-mobile); padding-block: var(--s-2); }
    .ocean-cat-nav__pill { padding: var(--s-2) var(--s-3); font-size: var(--fs-xs); }
}

/* ═══ Shop page search bar (under page-header title) ═══════════════════ */

.ocean-shop-search {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 640px;
    margin: var(--s-6) auto 0;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-pill);
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.ocean-shop-search:focus-within {
    border-color: var(--c-primary);
    box-shadow: 0 12px 32px rgba(14, 77, 140, 0.12), 0 0 0 4px rgba(31, 168, 221, 0.15);
}
.ocean-shop-search__icon {
    color: var(--c-text-muted);
    display: flex; align-items: center; justify-content: center;
    margin-inline-end: var(--s-3);
    flex-shrink: 0;
}
.ocean-shop-search input[type="search"] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: var(--ff-body);
    font-size: var(--fs-base);
    color: var(--c-text);
    padding: var(--s-2) 0;
    outline: 0;
}
.ocean-shop-search input[type="search"]::placeholder {
    color: var(--c-text-soft);
}
.ocean-shop-search__btn {
    flex-shrink: 0;
    padding: var(--s-3) var(--s-6);
    background: var(--c-primary);
    color: #fff;
    border-radius: var(--r-pill);
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: var(--fs-sm);
    transition: background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-spring);
    cursor: pointer;
}
.ocean-shop-search__btn:hover {
    background: var(--c-primary-d);
    transform: translateY(-1px);
}
@media (max-width: 600px) {
    .ocean-shop-search { padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); }
    .ocean-shop-search__btn { padding: var(--s-2) var(--s-4); font-size: var(--fs-xs); }
}

/* ═══ Loop product card — stacked Add-to-Cart + WhatsApp buttons ═════════ */

/* Make sure the Add to Cart button takes full width as a block, with margin */
.woocommerce ul.products li.product .button,
ul.products li.product .button {
    margin: var(--s-3) var(--s-4) var(--s-1) !important; /* tighter bottom — WA button comes next */
    width: calc(100% - 2 * var(--s-4));
}

.ocean-loop-whatsapp {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    margin: 0 var(--s-4) var(--s-4) !important;
    padding: var(--s-2) var(--s-4) !important;
    background: var(--c-whatsapp) !important;
    color: #fff !important;
    border-radius: var(--r-pill) !important;
    font-family: var(--ff-display);
    font-weight: 600 !important;
    font-size: var(--fs-sm) !important;
    text-decoration: none !important;
    transition: background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-spring), box-shadow var(--d-fast) var(--e-out) !important;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}
.ocean-loop-whatsapp:hover {
    background: var(--c-whatsapp-d) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45);
}
.ocean-loop-whatsapp svg {
    flex-shrink: 0;
}

/* ═══ Mobile breakpoint for WC product loop ═════════════════════════════
   2 product cards per row on phone (was 1 because minmax 240px is wider
   than a 360px phone screen). */

@media (max-width: 600px) {
    .woocommerce ul.products,
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--s-3) !important;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    ul.products li.product .woocommerce-loop-product__title {
        font-size: var(--fs-sm) !important;
        padding: var(--s-2) var(--s-3) 0 !important;
    }
    .woocommerce ul.products li.product .price,
    ul.products li.product .price {
        padding: 0 var(--s-3) !important;
        font-size: var(--fs-sm) !important;
    }
    .woocommerce ul.products li.product .button,
    ul.products li.product .button,
    .ocean-loop-whatsapp {
        margin: var(--s-2) var(--s-3) !important;
        padding: var(--s-2) var(--s-3) !important;
        font-size: var(--fs-xs) !important;
    }
}

/* ═══ Cart-checkout: WhatsApp-as-checkout UI (replaces "proceed to payment") */

.ocean-cart-checkout__how {
    display: flex;
    gap: var(--s-3);
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--s-4);
    margin-block-end: var(--s-5);
}
.ocean-cart-checkout__how-icon {
    width: 40px; height: 40px;
    flex-shrink: 0;
    background: var(--c-whatsapp);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.ocean-cart-checkout__how strong {
    display: block;
    font-family: var(--ff-display);
    font-size: var(--fs-md);
    color: var(--c-primary);
    margin-block-end: var(--s-1);
}
.ocean-cart-checkout__how p {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    margin: 0;
}

/* 3-step process strip */
.ocean-cart-checkout__steps {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-5);
    display: grid;
    gap: var(--s-2);
}
.ocean-cart-checkout__steps li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3);
    background: var(--c-accent-soft);
    border-radius: var(--r-md);
    font-family: var(--ff-display);
    font-weight: 500;
    color: var(--c-text);
    font-size: var(--fs-sm);
}
.ocean-cart-checkout__steps li > span {
    flex-shrink: 0;
    width: 28px; height: 28px;
    background: var(--c-primary);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: var(--fs-sm);
}

/* The big WhatsApp button — two-line: title + small subtitle */
.ocean-cart-whatsapp {
    min-height: 72px !important;
    padding: var(--s-3) var(--s-6) !important;
    gap: var(--s-3) !important;
    font-size: var(--fs-md) !important;
}
.ocean-cart-whatsapp__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}
.ocean-cart-whatsapp__title {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.2;
}
.ocean-cart-whatsapp__sub {
    font-size: var(--fs-xs);
    font-weight: 500;
    opacity: 0.92;
}

/* ═══════════════════════════════════════════════════════════════════════
   Cart page: full-width quote-only layout + mobile card view
   ═══════════════════════════════════════════════════════════════════════ */

/* Quote-only model: hide ₪0.00 price + subtotal columns on the cart table.
   We only need image · name · qty · remove. */
.woocommerce-cart table.shop_table th.product-price,
.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table th.product-subtotal,
.woocommerce-cart table.shop_table td.product-subtotal {
    display: none !important;
}

/* Force .cart-collaterals (our WhatsApp checkout block container) to full
   width — WC defaults it to 48% with a float, which leaves dead space. */
.woocommerce-cart .cart-collaterals {
    width: 100% !important;
    float: none !important;
    margin-block-start: var(--s-6);
    max-width: 720px;
    margin-inline-start: auto;
    margin-inline-end: auto;
}
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .shipping-calculator-button,
.woocommerce-cart .cart-collaterals .cross-sells {
    display: none !important;
}

/* The cart-added success notice: when ON the cart page, the "מעבר לסל"
   button is redundant — hide it. The text message itself stays. */
.woocommerce-cart .woocommerce-message a.button,
.woocommerce-cart .woocommerce-info a.button {
    display: none !important;
}
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info {
    background: var(--c-accent-soft);
    border: 1px solid var(--c-border);
    border-inline-start: 4px solid var(--c-primary);
    border-radius: var(--r-md);
    padding: var(--s-4) var(--s-5);
    margin-block-end: var(--s-5);
    color: var(--c-text);
    font-size: var(--fs-sm);
}

/* "לעדכן סל קניות" update cart button — quiet outline style */
.woocommerce-cart .actions button[name="update_cart"],
.woocommerce-cart .actions input[name="update_cart"] {
    background: transparent !important;
    color: var(--c-primary) !important;
    border: 1px solid var(--c-primary) !important;
    padding: var(--s-2) var(--s-5) !important;
    border-radius: var(--r-pill) !important;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: var(--fs-sm) !important;
    cursor: pointer;
    transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.woocommerce-cart .actions button[name="update_cart"]:hover,
.woocommerce-cart .actions input[name="update_cart"]:hover {
    background: var(--c-primary) !important;
    color: #fff !important;
}
.woocommerce-cart .actions {
    text-align: end;
    padding: var(--s-3) var(--s-4);
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
}
.woocommerce-cart .actions .coupon { display: none !important; }

/* Cart table cell tightening for medium widths */
.woocommerce-cart table.shop_table td.product-quantity .qty {
    width: 64px;
    padding: var(--s-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    text-align: center;
    font-family: var(--ff-display);
    font-weight: 600;
}

/* ─── Mobile: stack the cart table as cards (≤768px) ─────────────────── */
@media (max-width: 768px) {
    .woocommerce-cart table.shop_table.shop_table_responsive {
        border: none;
        box-shadow: none;
        background: transparent;
        display: block;
    }
    .woocommerce-cart table.shop_table.shop_table_responsive thead { display: none; }
    .woocommerce-cart table.shop_table.shop_table_responsive tbody { display: block; }
    .woocommerce-cart table.shop_table.shop_table_responsive tbody tr.cart_item {
        display: grid;
        grid-template-columns: 80px 1fr auto;
        grid-template-areas:
            "thumb name   remove"
            "thumb qty    qty";
        gap: var(--s-2) var(--s-3);
        align-items: center;
        background: var(--c-card);
        border: 1px solid var(--c-border);
        border-radius: var(--r-md);
        padding: var(--s-4);
        margin-block-end: var(--s-3);
    }
    .woocommerce-cart table.shop_table.shop_table_responsive tbody tr.cart_item td {
        display: block;
        padding: 0;
        border: none;
        text-align: start;
    }
    .woocommerce-cart table.shop_table.shop_table_responsive tbody tr.cart_item td.product-thumbnail {
        grid-area: thumb;
    }
    .woocommerce-cart table.shop_table.shop_table_responsive tbody tr.cart_item td.product-thumbnail img {
        width: 80px; height: 80px;
        object-fit: contain;
        background: var(--c-surface);
        border-radius: var(--r-md);
        padding: var(--s-2);
    }
    .woocommerce-cart table.shop_table.shop_table_responsive tbody tr.cart_item td.product-name {
        grid-area: name;
    }
    .woocommerce-cart table.shop_table.shop_table_responsive tbody tr.cart_item td.product-name a {
        font-size: var(--fs-base);
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .woocommerce-cart table.shop_table.shop_table_responsive tbody tr.cart_item td.product-quantity {
        grid-area: qty;
        display: flex;
        align-items: center;
        gap: var(--s-2);
    }
    .woocommerce-cart table.shop_table.shop_table_responsive tbody tr.cart_item td.product-quantity::before {
        content: "כמות:";
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
        font-family: var(--ff-display);
    }
    .woocommerce-cart table.shop_table.shop_table_responsive tbody tr.cart_item td.product-remove {
        grid-area: remove;
        align-self: start;
    }

    /* Update-cart action row on mobile — full width pill */
    .woocommerce-cart .actions {
        text-align: center;
        background: transparent;
        border-top: none;
        padding: 0;
        margin-block: var(--s-3);
    }
    .woocommerce-cart .actions button[name="update_cart"],
    .woocommerce-cart .actions input[name="update_cart"] {
        width: 100%;
        padding: var(--s-3) var(--s-5) !important;
    }

    /* Cart-checkout block tightening */
    .ocean-cart-checkout {
        padding: var(--s-4) !important;
        margin-block-start: var(--s-3);
    }
    .ocean-cart-checkout__how {
        flex-direction: column;
        gap: var(--s-3);
        padding: var(--s-3);
    }
    .ocean-cart-checkout__how-icon {
        width: 36px; height: 36px;
    }
    .ocean-cart-checkout__steps li {
        font-size: var(--fs-xs);
        padding: var(--s-2) var(--s-3);
    }
    .ocean-cart-whatsapp {
        min-height: 64px !important;
        padding: var(--s-3) var(--s-4) !important;
    }
    .ocean-cart-whatsapp__title {
        font-size: var(--fs-base);
    }
}