/* Product pages for the normal 3-paks. No JavaScript: the chosen tier is read with :has(). */
.single-product .wp-block-post-title { font-weight: 800; letter-spacing: -0.02em; }
.single-product .wp-block-woocommerce-product-meta { display: none; }
.single-product .woocommerce-product-gallery__wrapper { background: #F6F5EF; border-radius: 16px; overflow: hidden; }

.sl-rating { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; color: inherit; text-decoration: none; }
.sl-rating:hover span:last-child { text-decoration: underline; }
.sl-stars { position: relative; display: inline-block; font-size: 18px; line-height: 1; letter-spacing: 1px; color: #CFCDBD; white-space: nowrap; }
.sl-stars::before { content: "★★★★★"; }
.sl-stars span { position: absolute; left: 0; top: 0; overflow: hidden; color: #111111; }
.sl-stars span::before { content: "★★★★★"; }

.sl-buy { box-sizing: border-box; display: block; margin-top: 16px; padding: 20px; background: #F1F0E8; border-radius: 16px; }
.sl-buy__row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sl-buy__label { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5d6466; }
.sl-buy__row .sl-buy__label { margin: 0; }
.sl-buy > .sl-buy__label { margin-bottom: 18px; }
.sl-colours { display: flex; gap: 8px; }
.sl-colour { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: #fff; border: 2px solid #DDDBCD; border-radius: 4px; font-size: 14px; font-weight: 600; color: #111111; text-decoration: none; }
.sl-colour:hover { border-color: #568185; }
.sl-colour.is-current { border-color: #568185; box-shadow: 0 0 0 1px #568185; }
.sl-colour i { display: block; width: 16px; height: 16px; border-radius: 50%; }

.sl-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sl-tier { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 6px 14px; background: #fff; border: 2px solid #DDDBCD; border-radius: 12px; text-align: center; cursor: pointer; transition: border-color .12s, background-color .12s; }
.sl-tier:hover { border-color: #568185; }
.sl-tier input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sl-tier:has(input:focus-visible) { outline: 2px solid #568185; outline-offset: 2px; }
.sl-tier__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 3px 10px; background: #5F7858; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff; white-space: nowrap; }
.sl-tier__bags { position: relative; display: block; width: 100%; height: 116px; margin-bottom: 12px; }
.sl-tier .sl-tier__bags img { position: absolute; top: 0; left: 50%; display: block; width: auto; max-width: none; height: 100%; margin: 0; border-radius: 3px; box-shadow: 0 2px 7px rgba(17, 17, 17, .28); transform: translateX(-50%); }
.sl-tier__bags[data-bags="2"] img:nth-child(1) { transform: translateX(-74%) rotate(-7deg); }
.sl-tier__bags[data-bags="2"] img:nth-child(2) { transform: translateX(-26%) rotate(7deg); }
.sl-tier__bags[data-bags="3"] img:nth-child(1) { transform: translateX(-96%) rotate(-11deg); }
.sl-tier__bags[data-bags="3"] img:nth-child(2) { z-index: 1; transform: translateX(-50%); }
.sl-tier__bags[data-bags="3"] img:nth-child(3) { transform: translateX(-4%) rotate(11deg); }
.sl-tier__packs { font-size: 34px; font-weight: 800; line-height: 1; }
.sl-tier__name { margin-top: 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5d6466; }
.sl-tier__was { margin-top: 10px; min-height: 18px; font-size: 13px; color: #5d6466; }
.sl-tier__price { font-size: 19px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.sl-tier__save { margin-top: 4px; min-height: 18px; font-size: 13px; font-weight: 800; color: #5F7858; }
.sl-tier:has(input:checked) .sl-tier__save { color: #fff; }
.sl-tier:has(input:checked) { background: #24393B; border-color: #24393B; }
.sl-tier:has(input:checked) :is(.sl-tier__packs, .sl-tier__price) { color: #fff; }
.sl-tier:has(input:checked) :is(.sl-tier__name, .sl-tier__was) { color: #DDDBCD; }

.sl-buy__note { margin: 12px 0 0; font-size: 13px; color: #5d6466; }
.sl-buy .sl-buy__button { display: none !important; box-sizing: border-box; width: 100%; margin-top: 14px; padding: 18px 16px; background: #5F7858; border: 0; border-radius: 6px; font: inherit; font-size: 16px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; cursor: pointer; transition: background-color .12s; }
.sl-buy .sl-buy__button:hover { background: #4d6347; }
.sl-buy__button:focus-visible { outline: 2px solid #568185; outline-offset: 2px; }
.sl-buy:has(input[value="1"]:checked) [data-tier="1"],
.sl-buy:has(input[value="2"]:checked) [data-tier="2"],
.sl-buy:has(input[value="3"]:checked) [data-tier="3"] { display: block !important; }

@media (max-width: 480px) {
	.sl-buy { padding: 14px; }
	.sl-tiers { gap: 6px; }
	.sl-tier__bags { height: 82px; margin-bottom: 8px; }
	.sl-tier__packs { font-size: 28px; }
	.sl-tier__price { font-size: 15px; }
	.sl-tier__badge { font-size: 9.5px; padding: 2px 6px; letter-spacing: 0; }
	.sl-tier__save { font-size: 12px; }
}

/* Phone: the title must not break inside "3-pak", and the intro is a size smaller. */
.sl-nowrap { white-space: nowrap; }
@media (max-width: 600px) {
	.single-product .wp-block-post-title { font-size: 34px; line-height: 1.12; }
	.single-product .wp-block-post-excerpt { font-size: 18px; }
}

/* Review form, on the product pages and the custom page: same fields and buttons as the shop. */
#review_form .comment-reply-title { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 800; }
#review_form .snaplock-review-who { margin: 0 0 14px; padding: 12px 14px; background: #F1F0E8; border-radius: 10px; font-size: 15px; }
#review_form label { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 600; }
#review_form :is(input[type=text], input[type=email], textarea) { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 2px solid #DDDBCD; border-radius: 6px; font: inherit; font-size: 16px; background: #fff; }
#review_form :is(input[type=text], input[type=email], textarea):focus { border-color: #568185; outline: none; }
#review_form textarea { min-height: 120px; }
#review_form .comment-form-author, #review_form .comment-form-email, #review_form .comment-form-comment, #review_form .comment-form-rating, #review_form .comment-form-snaplock-photos { margin: 0 0 16px; }
#review_form input[type=file] { display: block; width: 100%; padding: 12px; border: 2px dashed #DDDBCD; border-radius: 6px; background: #fff; font-size: 14px; box-sizing: border-box; }
#review_form .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
#review_form .comment-form-cookies-consent label { font-weight: 300; }
#review_form .form-submit input[type=submit] { width: 100%; padding: 16px; border: 0; border-radius: 6px; background: #5F7858; color: #fff; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
#review_form .form-submit input[type=submit]:hover { background: #4d6347; }
/* Rating stars as text, so they don't depend on WooCommerce's icon font. */
.woocommerce #review_form p.stars { margin: 0; line-height: 1; }
.woocommerce #review_form p.stars a { position: relative; display: inline-block; width: 36px; height: 36px; text-indent: -9999px; overflow: hidden; vertical-align: middle; }
.woocommerce #review_form p.stars a::before { content: "★" !important; font-family: Manrope, sans-serif !important; position: absolute; inset: 0; text-indent: 0; font-size: 32px; line-height: 36px; text-align: center; color: #CFCDBD; }
.woocommerce #review_form p.stars:hover a::before { color: #111; }
.woocommerce #review_form p.stars:hover a:hover ~ a::before { color: #CFCDBD; }
.woocommerce #review_form p.stars.selected a::before { color: #111; }
.woocommerce #review_form p.stars.selected a.active ~ a::before { color: #CFCDBD; }

/* Account page: brand buttons and comfortable fields on a phone. */
.woocommerce-account .woocommerce-form :is(input.input-text, input[type=email], input[type=password], input[type=text]) { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 2px solid #DDDBCD; border-radius: 6px; font-size: 16px; }
.woocommerce-account .woocommerce-form :is(.woocommerce-form-login__submit, .woocommerce-form-register__submit),
.woocommerce-account .woocommerce-EditAccountForm button[type=submit] { width: 100%; margin-top: 8px; padding: 16px; border: 0; border-radius: 6px; background: #5F7858; color: #fff; font-size: 16px; font-weight: 800; }
.woocommerce-account .woocommerce-form :is(.woocommerce-form-login__submit, .woocommerce-form-register__submit):hover { background: #4d6347; }
.woocommerce-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) { display: flex; flex-direction: column-reverse; gap: 8px; }