/* WooCommerce pages (product, shop lists, cart, account) in the site's look. WooCommerce's own stylesheet paints
   every .button purple and resizes them everywhere, the header included; this puts ours back and lays the product
   page out for a phone first. */

/* The header keeps its own buttons on store pages. */
.woocommerce .site-header a.button,
.woocommerce-page .site-header a.button {
	/* No display here: the header decides when its call to action shows (it hides on narrow phones). */
	align-items: center; justify-content: center;
	min-block-size: 44px; padding: 0 18px; line-height: normal; border-radius: var(--radius-m);
	font: 800 15px var(--font); white-space: nowrap;
}
/* WooCommerce's ".woocommerce a.button" would show the header's call to action on phones too; it shows from 1024px, as elsewhere. */
.woocommerce .site-header a.site-header__cta, .woocommerce-page .site-header a.site-header__cta { display: none; }
@media (min-width: 1024px) { .woocommerce .site-header a.site-header__cta, .woocommerce-page .site-header a.site-header__cta { display: inline-flex; } }
.woocommerce .site-header a.button.button--primary { background: var(--c-accent); color: var(--c-accent-ink); }
.woocommerce .site-header a.button.button--ghost { background: var(--c-chip); color: var(--c-ink); }

/* The site's own buttons anywhere on a store page (the chef in your pocket, the menus, the moments) keep their colours. */
.woocommerce :is(a, button).button.button--primary, .woocommerce-page :is(a, button).button.button--primary { background: var(--c-accent) !important; color: var(--c-accent-ink) !important; border: 0; border-radius: var(--radius-m); font: 800 16px var(--font); padding: 0 20px; min-block-size: 50px; line-height: normal; }
.woocommerce :is(a, button).button.button--primary:hover { background: #BD1F26 !important; }
.woocommerce :is(a, button).button.button--ghost, .woocommerce-page :is(a, button).button.button--ghost { background: var(--c-chip) !important; color: var(--c-ink) !important; border: 0; border-radius: var(--radius-m); font: 800 16px var(--font); padding: 0 20px; min-block-size: 50px; line-height: normal; }

/* Buttons in the page: ours. The main action is red, the rest quiet. */
.woocommerce .site-main :is(a.button, button.button, input.button, #respond input#submit),
.woocommerce-page .site-main :is(a.button, button.button, input.button) {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-block-size: 48px; padding: 0 20px; border: 0; border-radius: 999px;
	background: var(--c-chip); color: var(--c-ink); font: 800 15px var(--font); line-height: normal; text-decoration: none;
}
.woocommerce .site-main :is(a.button, button.button, input.button).alt,
.woocommerce .site-main .single_add_to_cart_button,
.woocommerce .site-main .add_to_cart_button,
.woocommerce-page .site-main .checkout-button {
	background: var(--c-accent) !important; color: var(--c-accent-ink) !important;
	box-shadow: 0 8px 20px rgb(217 38 46 / 0.22);
}
.woocommerce .site-main :is(a.button, button.button).alt:hover,
.woocommerce .site-main .single_add_to_cart_button:hover { background: #BD1F26 !important; }

/* WooCommerce's own templates (product, cart, account) come without the site's side margins: the same gutter as the header. */
.single-product .site-main,
.woocommerce-cart .site-main,
.woocommerce-account .site-main { padding-inline: var(--gutter); max-inline-size: 1200px; margin-inline: auto; box-sizing: border-box; }

/* Product page */
.woocommerce div.product { display: flex; flex-direction: column; gap: 18px; margin-block: 12px 32px; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary { float: none !important; inline-size: 100% !important; margin: 0 !important; }
.woocommerce div.product div.images img { border-radius: var(--radius-l, 20px); background: #F7F6F3; }
.woocommerce div.product .flex-control-thumbs { display: flex; gap: 8px; margin-block-start: 8px !important; overflow-x: auto; }
.woocommerce div.product .flex-control-thumbs li { flex: 0 0 64px; inline-size: 64px !important; }
.woocommerce div.product .flex-control-thumbs img { border-radius: 10px; }

.woocommerce div.product .product_title { font-size: 22px; line-height: 1.3; font-weight: 800; margin: 0 0 6px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--c-ink) !important; font-size: 24px !important; font-weight: 800; margin: 4px 0 10px; }
.woocommerce div.product p.price del { opacity: .5; font-size: 16px; font-weight: 500; }
.woocommerce div.product .stock { color: #1F6F5C; font-weight: 700; font-size: 14px; }
.woocommerce-product-details__short-description { color: var(--c-muted); line-height: 1.7; }

/* Long title / long text: a few lines, then "עוד" (the button is added by app.js). */
.is-folded { display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; }
.product_title.is-folded { -webkit-line-clamp: 2; }
.woocommerce-product-details__short-description.is-folded { -webkit-line-clamp: 5; }
.fold-more { margin: 2px 0 10px; padding: 2px 12px; border: 1px solid var(--c-line, #E6E2DC); border-radius: 999px; background: #fff; color: var(--c-ink); font: 700 13px var(--font); cursor: pointer; }

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 !important; }
.woocommerce div.product form.cart .quantity { margin: 0 !important; }
.woocommerce div.product form.cart .qty { inline-size: 72px; min-block-size: 48px; border: 1px solid #DDD9D3; border-radius: 14px; font-size: 16px; text-align: center; }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 180px; min-block-size: 54px; font-size: 17px; }
.woocommerce div.product .fkwcs_stripe_smart_button_wrapper { flex-basis: 100%; }
.woocommerce div.product .product_meta { font-size: 13px; color: var(--c-muted); display: flex; flex-direction: column; gap: 4px; }

/* Tabs as quiet chips, the panel as a card. */
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 8px; padding: 0 !important; margin: 0 0 10px !important; border: 0 !important; overflow-x: auto; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: var(--c-chip) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 8px 16px !important; font-weight: 700; color: var(--c-ink) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--c-ink) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #fff !important; }
.woocommerce div.product .woocommerce-tabs .panel { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--c-line, #EFECE7); line-height: 1.75; }
.woocommerce div.product .woocommerce-tabs .panel h2:first-child { font-size: 18px; }

/* Product lists (related, shop categories): cards, two across on a phone. */
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 !important; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product { float: none !important; inline-size: auto !important; margin: 0 !important; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--c-line, #EFECE7); display: flex; flex-direction: column; }
.woocommerce ul.products li.product img { border-radius: 12px; margin-block-end: 8px !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px !important; line-height: 1.4; font-weight: 700; padding: 0 !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.woocommerce ul.products li.product .price { color: var(--c-ink) !important; font-weight: 800; font-size: 15px !important; }
.woocommerce ul.products li.product .button { margin-block-start: auto !important; min-block-size: 42px !important; font-size: 14px !important; }
.related.products > h2, .upsells.products > h2 { font-size: 20px; margin-block: 24px 12px; }

/* Notices */
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { border-radius: 14px; border-top: 0 !important; background: #F7F6F3; padding: 14px 16px 14px 16px !important; }
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { display: none; }

@media (min-width: 900px) {
	.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells { grid-column: 1 / -1; }
	.woocommerce div.product .product_title { font-size: 28px; }
	.woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}