/* =====================================================================
   Shop page — new design (Steven Saldana wireframe, Oct 2026).
   Depends on home-v2.css (header, footer, .hv2-wrap, .hv2-btn tokens).
   Behaviour is untouched: groceries.js still loads the products and runs
   the cart; shop-v2.js only draws the cards in the new look and turns the
   old cart sidebar into a slide-in drawer. Prefix sv2- keeps this page's
   rules away from the rest of the store.
   ===================================================================== */

/* ---------- title bar ---------- */
.sv2-title { background: #F3F2F0; overflow: hidden; }
.sv2-title__row { display: grid; grid-template-columns: 1fr; align-items: center; min-height: 292px; }
.sv2-title__copy { padding: 44px 0; }
.sv2-title h1 { margin: 0 0 14px; font-family: var(--hv2-font); font-size: clamp(38px, 4.5vw, 56px); font-weight: 800; line-height: 1.15; color: var(--hv2-ink); letter-spacing: -0.01em; }
.sv2-title p { margin: 0; max-width: 380px; font-family: var(--hv2-font); font-size: 18px; line-height: 1.65; font-weight: 500; color: var(--hv2-body); }
.sv2-title__img { position: relative; height: 292px; margin: 0 -20px; }
.sv2-title__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.sv2-title__img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #F3F2F0 0%, rgba(243,242,240,0) 35%); z-index: 1; }
@media (min-width: 900px) {
    .sv2-title__row { grid-template-columns: 400px 1fr; gap: 40px; }
    .sv2-title__img { margin: 0; margin-right: calc((min(100vw, 1440px) - var(--hv2-wrap)) / -2 + 0px); }
}

/* ---------- collection layout (old Bootstrap row becomes a plain grid) ---------- */
.sv2-shop { padding: 32px 0 72px; }
.sv2-shop .shoplist { display: block; margin: 0; }
.sv2-shop .shoplist > .col-sm-8 { width: 100%; max-width: none; flex: none; padding: 0; }
.sv2-shop #product_combo_main > h3 { display: none; }           /* old "Combo Packs" heading */
.sv2-shop .item_not_found { font-family: var(--hv2-font); }
.sv2-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.sv2-toolbar__count { font-family: var(--hv2-font); font-size: 15px; font-weight: 600; color: var(--hv2-body); }
.sv2-cart-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--hv2-teal); background: #fff; color: var(--hv2-teal); font-family: var(--hv2-font); font-size: 15px; font-weight: 700; cursor: pointer; }
.sv2-cart-btn:hover { background: var(--hv2-teal-wash); }
.sv2-cart-btn b { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--hv2-teal); color: #fff; display: inline-grid; place-items: center; font-size: 12px; }

/* the grid: products, then combos, then the quiz tile, all in one flow */
.sv2-shop #product_main, .sv2-shop #product_combo_main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
.sv2-shop #product_combo_main { margin-top: 20px; }
.sv2-shop #product_main:empty, .sv2-shop #product_combo_main:empty { display: none; }
@media (min-width: 700px) { .sv2-shop #product_main, .sv2-shop #product_combo_main { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sv2-shop #product_main, .sv2-shop #product_combo_main { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

/* ---------- product card ---------- */
.sv2-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #E5E5E5; border-radius: 16px; padding: 16px; font-family: var(--hv2-font); color: var(--hv2-body); min-height: 533px; transition: box-shadow .15s ease, transform .15s ease; }
.sv2-card:hover { box-shadow: 0 16px 40px rgba(20,33,31,.10); transform: translateY(-2px); }
.sv2-card__img { position: relative; display: flex; align-items: center; justify-content: center; height: 250px; border-radius: 12px; background: var(--hv2-teal-pale); overflow: hidden; }
.sv2-card__img img { max-height: 228px; max-width: 86%; width: auto; height: auto; object-fit: contain; display: block; filter: drop-shadow(0 10px 16px rgba(26,64,77,.18)); transition: transform .2s ease; }
.sv2-card:hover .sv2-card__img img { transform: scale(1.03); }
.sv2-card__img--duo img { max-height: 200px; max-width: 48%; }
.sv2-card__img--duo img + img { margin-left: -24px; margin-top: 50px; }
.sv2-badge { position: absolute; top: 12px; left: 12px; z-index: 2; height: 25px; padding: 0 10px; border-radius: 6px; background: var(--hv2-teal); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; display: inline-flex; align-items: center; }
.sv2-badge--green { background: #1BAD23; }
.sv2-card__body { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; padding-top: 14px; }
.sv2-card__sold { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--hv2-body); }
.sv2-card__sold::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1BAD23; }
.sv2-card__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--hv2-ink); }
.sv2-card__title a { color: inherit; text-decoration: none; }
.sv2-card__title a:hover { color: var(--hv2-teal); text-decoration: none; }
.sv2-card__desc { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 500; flex: 1; color: var(--hv2-body) !important; }
.sv2-card .shop-grid-rating { margin: 6px 0 2px; font-size: 13px; }
.sv2-card .shop-grid-rating .fa-star { color: #d9d9d9; font-size: 13px; }
.sv2-card .shop-grid-rating .fa-star.checked { color: var(--hv2-star); }
.sv2-card .set_pvt_mem_price { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--hv2-teal); text-transform: uppercase; letter-spacing: .04em; }
.sv2-card .select-wrapper { width: 100%; margin-top: 10px; }
.sv2-card .select { position: relative; width: 100%; }
.sv2-card .select__trigger { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 14px; border: 1px solid var(--hv2-line); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--hv2-ink); cursor: pointer; background: #fff; }
.sv2-card .select__trigger .arrow { width: 8px; height: 8px; border-right: 1.5px solid var(--hv2-ink); border-bottom: 1.5px solid var(--hv2-ink); transform: rotate(45deg) translateY(-2px); }
.sv2-card .custom-options { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; background: #fff; border: 1px solid var(--hv2-line); border-radius: 8px; box-shadow: 0 10px 24px rgba(20,33,31,.12); overflow: hidden; }
.sv2-card .select.open .custom-options { display: block; }
.sv2-card .custom-option { display: block; padding: 10px 14px; font-size: 14px; text-align: left; cursor: pointer; }
.sv2-card .custom-option:hover, .sv2-card .custom-option.selected { background: var(--hv2-teal-wash); color: var(--hv2-teal); }
.sv2-card__price { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 14px 0 12px; font-size: 24px; font-weight: 700; color: var(--hv2-ink); }
.sv2-card__price a, .sv2-card__price .price { color: var(--hv2-ink) !important; text-decoration: none; font-size: 24px; font-weight: 700; }
.sv2-card__price del { font-size: 15px; font-weight: 500; color: var(--hv2-body); }
.sv2-card .quantity_cart_main { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.sv2-card .quantity { display: flex; align-items: stretch; height: 40px; border: 1px solid var(--hv2-line); border-radius: 8px; overflow: hidden; background: #fff; }
.sv2-card .quantity button { flex: 1; border: 0; background: none; font-size: 18px; color: var(--hv2-ink); cursor: pointer; font-family: var(--hv2-font); }
.sv2-card .quantity button:hover { background: var(--hv2-teal-wash); }
.sv2-card .quantity input { width: 56px; border: 0; border-left: 1px solid var(--hv2-line); border-right: 1px solid var(--hv2-line); text-align: center; font-size: 16px; font-weight: 600; color: var(--hv2-ink); font-family: var(--hv2-font); }
.sv2-card .cart_btn { width: 100%; }
.sv2-card .cart-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; border-radius: 9px; background: var(--hv2-teal); color: #fff !important; font-size: 16px; font-weight: 600; text-decoration: none !important; position: relative; overflow: hidden; transition: background .15s ease; }
.sv2-card .cart-button:hover { background: var(--hv2-teal-deep); }
.sv2-card .cart-button .fa-box, .sv2-card .cart-button span.added { display: none; }
.sv2-card .cart-button .fa-shopping-cart { font-size: 14px; }
.sv2-card .cart-button.clicked { background: #1BAD23; }
.sv2-card .cart-button.clicked span.add-to-cart, .sv2-card .cart-button.clicked .fa-shopping-cart { display: none; }
.sv2-card .cart-button.clicked span.added { display: inline; }
.sv2-card .p_ca_not_allow { font-size: 14px; font-weight: 700; color: var(--hv2-ink); padding: 14px 0; }

/* quiz tile */
.sv2-quiz { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 28px; border-radius: 16px; background: var(--hv2-ink); color: #fff; font-family: var(--hv2-font); min-height: 533px; }
.sv2-quiz__kicker { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hv2-teal); margin-bottom: 18px; }
.sv2-quiz h3 { margin: 0 0 16px; font-size: 28px; font-weight: 800; line-height: 1.3; color: #fff; }
.sv2-quiz p { margin: 0 0 28px; font-size: 15px; line-height: 1.6; font-weight: 500; color: #D9D9D9; }
.sv2-quiz .hv2-btn { height: 50px; width: 100%; border-radius: 9px; }

.sv2-note { margin: 44px auto 0; max-width: var(--hv2-wrap); font-family: var(--hv2-font); font-size: 13px; line-height: 1.6; color: var(--hv2-body); text-align: center; }

/* ---------- cart drawer (the old sidebar, same markup and script) ---------- */
.sv2-shop .shoplist > .sticky_sidebar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1060; width: min(440px, 100vw); max-width: none; flex: none; padding: 0; margin: 0; background: #fff; box-shadow: -20px 0 60px rgba(20,33,31,.18); transform: translateX(105%); transition: transform .28s ease; overflow-y: auto; }
.sv2-shop.is-cart-open .shoplist > .sticky_sidebar { transform: translateX(0); }
.sv2-shop .sidebar, .sv2-shop #sidebar { position: static !important; top: auto !important; width: 100% !important; margin: 0 !important; padding: 22px 22px 32px !important; background: #fff !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; font-family: var(--hv2-font); }
.sv2-shop .sidebarspace_remove { margin: 0 !important; }
.sv2-drawer-overlay { position: fixed; inset: 0; z-index: 1059; background: rgba(20,33,31,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.sv2-shop.is-cart-open ~ .sv2-drawer-overlay, body.sv2-cart-open .sv2-drawer-overlay { opacity: 1; pointer-events: auto; }
body.sv2-cart-open { overflow: hidden; }
.sv2-drawer-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--hv2-teal-wash); color: var(--hv2-ink); font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; }
.sv2-drawer-close:hover { background: var(--hv2-teal-pale); }
.sv2-shop .cart-sidebar-header { padding-right: 52px; margin-bottom: 14px; }
.sv2-shop .cart-sidebar-header .sidebar_title, .sv2-shop h3.sidebar_title { font-family: var(--hv2-font); font-size: 22px; font-weight: 800; color: var(--hv2-ink); margin: 0; padding: 0; }
.sv2-shop h3.sidebar_title:before, .sv2-shop .total_cost h3.sidebar_title:before { display: none; }
.sv2-shop .cart-item-count { font-size: 14px; font-weight: 600; color: var(--hv2-body); margin-left: 6px; }
.sv2-shop .shopping_for_others { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--hv2-teal); }
.sv2-shop .sidebar_single_product.null_qty { padding: 28px 0; text-align: center; font-size: 16px !important; color: var(--hv2-body); }
.sv2-shop .sidebar_single_product.null_qty span { font-size: 16px !important; }
.sv2-shop .cart-item-block { padding: 14px 0; border-bottom: 1px solid #EEF2F3; }
.sv2-shop .sidebar_single_product { display: flex; gap: 14px; align-items: flex-start; padding: 0; margin: 0; border: 0; }
.sv2-shop .sidebar_single_product .product_img { flex: none; width: 64px; height: 64px; border-radius: 10px; background: var(--hv2-teal-pale); display: grid; place-items: center; overflow: hidden; padding: 0; margin: 0; }
.sv2-shop .sidebar_single_product .product_img img { width: 56px !important; height: 56px !important; object-fit: contain !important; border-radius: 0 !important; }
.sv2-shop .post_content { flex: 1; min-width: 0; }
.sv2-shop .cart-item-name { font-size: 15px; font-weight: 700; color: var(--hv2-ink); margin: 0 0 4px; line-height: 1.3; }
.sv2-shop .cart-item-controls-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.sv2-shop .cart-qty-wrap .qty-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--hv2-body); margin-right: 6px; }
.sv2-shop .qty-input-wrap input { width: 60px; height: 34px; border: 1px solid var(--hv2-line); border-radius: 8px; text-align: center; font-weight: 600; font-family: var(--hv2-font); }
.sv2-shop .cart-item-price { margin-left: auto; font-weight: 700; color: var(--hv2-ink); font-size: 15px; }
.sv2-shop .cart-item-price del { font-size: 13px !important; color: #999 !important; margin-right: 6px !important; }
.sv2-shop .cart-delete-btn { color: #B33; font-size: 15px; }
.sv2-shop .total_cost { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 14px; border-top: 2px solid var(--hv2-ink); margin-top: 10px; }
.sv2-shop .total_cost .sidebar_title { font-size: 16px; font-weight: 700; }
.sv2-shop .cart-total-value { font-size: 22px; font-weight: 800; color: var(--hv2-ink); }
.sv2-shop a.continue_shopping { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; margin: 6px 0 0; border-radius: 9px; background: var(--hv2-teal); color: #fff !important; font-family: var(--hv2-font); font-size: 16px; font-weight: 700; text-decoration: none !important; text-transform: none; letter-spacing: 0; border: 0; }
.sv2-shop a.continue_shopping:hover { background: var(--hv2-teal-deep); }
.sv2-shop .cpn_applied_cls { margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: var(--hv2-green-pale); color: var(--hv2-green-deep); font-size: 13px; font-weight: 700; }
.sv2-shop .autoship-notice, .sv2-shop .cart-control-notice { margin-top: 14px; font-size: 13px; }
.sv2-shop .checkout_btn.dis_none_desk a { font-family: var(--hv2-font); }

/* ---------- Oct 2026 (Ollie): match Steven's Shop (Desktop) frame exactly ---------- */
/* one grid: four products, then Pets, the two bundles and the quiz tile (row 2 as drawn) */
.sv2-shop .shoplist > .col-sm-8 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sv2-shop .shoplist > .col-sm-8 > #product_main, .sv2-shop .shoplist > .col-sm-8 > #product_combo_main { display: contents; }
.sv2-shop .item_not_found, .sv2-shop .sv2-note { grid-column: 1 / -1; }
@media (min-width: 700px) { .sv2-shop .shoplist > .col-sm-8 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sv2-shop .shoplist > .col-sm-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* no toolbar row in the design (the cart still slides in after Add to Cart; the header Cart link opens the cart) */
.sv2-shop .sv2-toolbar { display: none; }
/* cards as drawn: no quantity box (one per click, as before with quantity 1), pale panel, $ prices */
.sv2-card { padding: 17px; }
.sv2-card .quantity { display: none; }
.sv2-card__img { background: #EEF7F9; }
.sv2-card__price { margin: 14px 0 14px; align-items: baseline; }
.sv2-card__price .price del { font-size: 15px; font-weight: 500; color: var(--hv2-body); margin-right: 4px; }
.sv2-card__was { font-size: 15px; font-weight: 500; color: var(--hv2-body); }
/* quiz tile: copy centred, button level with the cards' buttons */
.sv2-quiz { justify-content: flex-start; padding: 17px 28px; min-height: 0; }
.sv2-quiz .sv2-quiz__kicker { margin-top: auto; }
.sv2-quiz p { margin-bottom: 0; }
.sv2-quiz .hv2-btn { margin-top: auto; }
.sv2-note { margin-top: 28px; }

/* the old store stylesheet still won on these (measured in the rendered page) */
.sv2-shop .sv2-card.single_product_main { padding: 17px !important; border: 1px solid #E5E5E5 !important; box-shadow: none !important; min-height: 533px; }
.sv2-shop .sv2-card.single_product_main:hover { box-shadow: 0 16px 40px rgba(20,33,31,.10) !important; }
.sv2-shop .sv2-card .sv2-card__price, .sv2-shop .sv2-card .sv2-card__price a, .sv2-shop .sv2-card .sv2-card__price .price { font-size: 24px !important; font-weight: 700 !important; line-height: 29px !important; }
.sv2-shop .sv2-card .sv2-card__price .price del, .sv2-shop .sv2-card .sv2-card__was { font-size: 15px !important; font-weight: 500 !important; line-height: 18px !important; }
.sv2-shop .sv2-card .cart-button { border: 0 !important; padding: 0 16px !important; }
.sv2-shop .sv2-card .cart-button .add-to-cart, .sv2-shop .sv2-card .cart-button .added { font-size: 16px !important; font-weight: 600 !important; line-height: 20px !important; }
.sv2-shop .sv2-card .cart-button .fa-shopping-cart { display: none !important; }
.sv2-shop .sv2-card .sv2-card__body { padding-top: 14px; }
.sv2-shop .sv2-card .sv2-card__sold { margin-bottom: 8px; line-height: 16px; }
.sv2-shop .sv2-card .sv2-card__title { margin-bottom: 8px; }
.sv2-shop .sv2-card .sv2-card__desc { line-height: 22px !important; }
.sv2-shop .sv2-quiz .hv2-btn { width: 100%; padding: 0 12px; }

/* more old-store spacing that beat ours (measured): section padding, card margins, empty variation slot, price block height */
section.sv2-shop { padding: 32px 0 56px !important; }
.sv2-shop .sv2-card.single_product_main { margin: 0 !important; }
.sv2-shop .sv2-card .select-wrapper:empty { margin: 0 !important; }
.sv2-shop .sv2-card .sv2-card__price { height: 29px; align-items: center; margin: 14px 0 !important; }
.sv2-shop .sv2-card .sv2-card__price a, .sv2-shop .sv2-card .sv2-card__price .price { display: inline-block; margin: 0 !important; padding: 0 !important; }

.sv2-shop .sv2-note { margin-top: 8px !important; } /* the grid already adds its 20px gap: 28px as drawn */

/* ---------- phones = Steven's Shop (Mobile) frame ---------- */
.sv2-m { display: none; }
@media (max-width: 699px) {
    .sv2-d { display: none; }
    .sv2-m { display: inline; }
    .sv2-title__row { min-height: 0; }
    .sv2-title__copy { padding: 28px 0 8px; text-align: center; }
    .sv2-title h1 { font-size: 36px; line-height: 44px; margin-bottom: 8px; }
    .sv2-title p { max-width: none; font-size: 16px; line-height: 24px; }
    .sv2-title__img { height: 143px; }
    .sv2-title__img::before { display: none; }
    section.sv2-shop { padding: 24px 0 48px !important; }
    .sv2-shop .shoplist > .col-sm-8 { gap: 12px; }
    .sv2-shop .sv2-card.single_product_main { padding: 13px !important; border-radius: 14px; min-height: 0; }
    .sv2-shop .sv2-card .sv2-card__img { height: 170px; border-radius: 10px; }
    .sv2-shop .sv2-card .sv2-card__img img { max-height: 154px; }
    .sv2-shop .sv2-card .sv2-card__img--duo img { max-height: 130px; }
    .sv2-shop .sv2-badge { top: 8px; left: 8px; height: 19px; padding: 0 7px; border-radius: 5px; font-size: 9px; }
    .sv2-shop .sv2-card .sv2-card__body { padding-top: 10px; }
    .sv2-shop .sv2-card .sv2-card__sold { font-size: 11px; line-height: 13px; gap: 5px; margin-bottom: 6px; }
    .sv2-shop .sv2-card .sv2-card__sold::before { width: 6px; height: 6px; }
    .sv2-shop .sv2-card .sv2-card__title { font-size: 16px; line-height: 21px; margin-bottom: 6px; }
    .sv2-shop .sv2-card .sv2-card__desc { font-size: 13px !important; line-height: 19px !important; }
    .sv2-shop .sv2-card .sv2-card__price { height: 24px; margin: 10px 0 !important; }
    .sv2-shop .sv2-card .sv2-card__price, .sv2-shop .sv2-card .sv2-card__price a, .sv2-shop .sv2-card .sv2-card__price .price { font-size: 20px !important; line-height: 24px !important; }
    .sv2-shop .sv2-card .sv2-card__price .price del, .sv2-shop .sv2-card .sv2-card__was { font-size: 12px !important; }
    .sv2-shop .sv2-card .quantity_cart_main { padding: 0 !important; margin: 0 !important; }
    .sv2-shop .sv2-card .cart_btn { width: 100% !important; }
    .sv2-shop .sv2-card .cart-button { min-width: 0 !important; width: 100% !important; height: 41px !important; border-radius: 8px !important; padding: 0 6px !important; }
    .sv2-shop .sv2-card .cart-button .add-to-cart, .sv2-shop .sv2-card .cart-button .added { font-size: 14px !important; line-height: 17px !important; }
    .sv2-shop .sv2-quiz { padding: 14px; border-radius: 14px; }
    .sv2-shop .sv2-quiz .sv2-quiz__kicker { font-size: 11px; margin-bottom: 10px; }
    .sv2-shop .sv2-quiz h3 { font-size: 21px; line-height: 27px; margin-bottom: 10px; }
    .sv2-shop .sv2-quiz p { font-size: 13px; line-height: 19px; }
    .sv2-shop .sv2-quiz .hv2-btn { height: 41px; border-radius: 8px; font-size: 14px; }
    .sv2-shop .sv2-note { font-size: 13px; line-height: 17px; }
}

/* cards in a row are the same height, buttons level (as drawn) */
.sv2-shop .sv2-card.single_product_main { align-self: stretch !important; height: auto !important; }

.sv2-shop #product_main .sv2-card.single_product_main, .sv2-shop #product_combo_main .sv2-card.single_product_main { margin: 0 !important; } /* an old #id rule gave the last card a 20px bottom margin */

/* the old stylesheet sets cards to 31% width on very wide screens (Ollie's monitor): the grid cell decides */
.sv2-shop .shoplist .product_main .single_product_main.sv2-card { width: auto !important; max-width: none !important; margin: 0 !important; }
/* bundles have no sold count: keep the line's height so titles stay level, without the green dot */
.sv2-card__sold--none { visibility: hidden; }
.sv2-badge .sv2-d { margin-right: .3em; }
@media (max-width: 699px) { .sv2-badge .sv2-d { display: none; } }

/* Steven's batch 4 frame G8 (19 Oct 2026), bundle cards: the bottle stands in front of the jar, so the
   'for Pets' label shows (the jar used to cover it). Positions are his, as shares of the 225 x 250 picture:
   bottle 64 x 198 at 28,40; jar 170 x 155 at 46,78. Same on the shop page and the 'Pairs well with' cards. */
.sv2-shop .sv2-card .sv2-card__img--duo img,
.pv2-pairs .pv2-pair .sv2-card__img--duo img { position: absolute; max-width: none; max-height: none; margin: 0; }
.sv2-shop .sv2-card .sv2-card__img--duo img:first-of-type,
.pv2-pairs .pv2-pair .sv2-card__img--duo img:first-of-type { z-index: 1; left: 12.4%; bottom: 4.8%; width: auto; height: 79.2%; }
.sv2-shop .sv2-card .sv2-card__img--duo img + img,
.pv2-pairs .pv2-pair .sv2-card__img--duo img + img { z-index: 0; left: 20.4%; bottom: 6.8%; width: 75.6%; height: auto; max-height: 62%; object-fit: contain; object-position: left bottom; }
.sv2-card__img--duo .sv2-badge { z-index: 3; }

/* Steven's batch 4 frame G1 (19 Oct 2026): the empty cart in the drawer (shop.php) - cart icon in a pale circle,
   'Your cart is empty', one line, 'Shop MasterPeace' and 'Continue shopping'. */
.sv2-shop .sidebar_single_product.null_qty.sv2-empty { display: block; padding: 64px 4px 24px; text-align: center; }
.sv2-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: 0 0 16px; border-radius: 50%; background: #EAF5F9; color: #3FA7C2; }
.sv2-empty__icon svg { width: 44px; height: 44px; }
.sv2-shop .sv2-empty .sv2-empty__title { margin: 0 0 16px; font: 800 26px/1.2 Montserrat, sans-serif; color: #383838; letter-spacing: 0; text-transform: none; }
.sv2-shop .sv2-empty .sv2-empty__text { max-width: 420px; margin: 0 auto 16px; font: 500 16px/1.55 Montserrat, sans-serif !important; color: #6B7A82; }
.sv2-shop .sv2-empty .sv2-empty__btn { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 420px; height: 55px; margin: 0 auto 16px; border-radius: 12px; background: #3FA7C2; color: #fff !important; font: 800 16px/1.2 Montserrat, sans-serif; text-decoration: none !important; }
.sv2-shop .sv2-empty .sv2-empty__btn:hover { background: #3596AF; }
.sv2-shop .sv2-empty .sv2-empty__btn svg { flex: none; width: 18px; height: 18px; }
.sv2-shop .sv2-empty .sv2-empty__link { padding: 0; border: 0; background: none; color: #3FA7C2; font: 700 15px/1.3 Montserrat, sans-serif; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
@media (max-width: 599px) {
    .sv2-shop .sidebar_single_product.null_qty.sv2-empty { padding-top: 48px; }
    .sv2-shop .sv2-empty .sv2-empty__title { font-size: 24px; margin-bottom: 14px; }
    .sv2-shop .sv2-empty .sv2-empty__text { font-size: 15px !important; margin-bottom: 14px; }
}
/* G1: while the empty block shows (server-rendered empty, or emptied by groceries.js which sets display:none / '' on
   it), the drawer has no total, no Continue and no autoship note, as Steven drew it. */
.sv2-shop .sticky_sidebar:has(.sv2-empty:not([style*="none"])) .total_cost,
.sv2-shop .sticky_sidebar:has(.sv2-empty:not([style*="none"])) .continue_shopping,
.sv2-shop .sticky_sidebar:has(.sv2-empty:not([style*="none"])) .cart-control-notice,
.sv2-shop .sticky_sidebar:has(.sv2-empty:not([style*="none"])) .cpn_applied_cls { display: none !important; }

/* Steven's batch 4 frame G6 (19 Oct 2026): an out-of-stock shop card (shop-v2.js: the product's out_of_stock is 1,
   or the look-only preview /shop?oos-preview=<slug>). */
.sv2-badge.sv2-badge--oos { gap: 6px; height: 28px; padding: 0 13px; border-radius: 999px; background: #FDECEC; color: #D64545; font-size: 13px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.sv2-badge--oos::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #D64545; }
.sv2-card--oos .sv2-card__img img { opacity: .5; }
.sv2-card--oos .sv2-card__price .price { color: #8C989E !important; }
.sv2-shop .sv2-card .quantity_cart_main.sv2-oos { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.sv2-oos__btn { width: 100%; height: 50px; border: 0; border-radius: 9px; background: #E6ECEF; color: #8C989E; font: 600 16px/1 Montserrat, sans-serif; cursor: not-allowed; }
.sv2-oos__notify { color: #3FA7C2 !important; font: 700 13px/1.3 Montserrat, sans-serif; text-decoration: underline !important; text-underline-offset: 2px; text-align: left; }
@media (max-width: 599px) {
    .sv2-shop .sv2-badge.sv2-badge--oos { height: 22px; padding: 0 8px; font-size: 10px; }
    .sv2-oos__btn { height: 40px; font-size: 13px; }
    .sv2-oos__notify { font-size: 11px; }
}
/* Device check 19 Oct 2026: the closed drawer's shadow showed as a grey strip down the right edge of the shop page
   (most visible on phones); the shadow now only appears while the drawer is open. */
.sv2-shop .shoplist > .sticky_sidebar { box-shadow: none; }
.sv2-shop.is-cart-open .shoplist > .sticky_sidebar { box-shadow: -20px 0 60px rgba(20,33,31,.18); }

/* Device check 19 Oct 2026: the cart drawer is the same width on every device (up to 440px), but below 980px an old
   rule stacked each item (picture above the name) and the quantity box shrank until its number ran into the price.
   Same row layout as on a computer, quantity box kept at its size. */
.sv2-shop .groceries_page_myorder .sidebar_single_product:not(.null_qty) { flex-flow: row nowrap !important; align-items: flex-start; gap: 14px; }
.sv2-shop .groceries_page_myorder .sidebar_single_product:not(.null_qty) .product_img { flex: none; width: auto; }
.sv2-shop .groceries_page_myorder .sidebar_single_product:not(.null_qty) .post_content { flex: 1 1 auto; min-width: 0; }
.sv2-shop .cart-item-controls-row { flex-wrap: nowrap; align-items: center; gap: 12px; }
.sv2-shop .cart-item-controls-row .cart-qty-wrap { flex: none; width: auto !important; min-width: max-content; }
.sv2-shop .cart-item-controls-row .cart-item-price { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.sv2-shop .cart-item-controls-row .cart-delete-btn { flex: none; }