/* ==========================================================================
   Security Seller store styles
   Colours/fonts come from theme.json (var(--wp--preset--color--…)).
   ========================================================================== */

:root {
	--ss-red: var(--wp--preset--color--accent-1, #C2021B);
	--ss-red-dark: var(--wp--preset--color--accent-2, #9E0116);
	--ss-ink: var(--wp--preset--color--accent-3, #0B0B0B);
	--ss-text: var(--wp--preset--color--contrast, #1F1F1F);
	--ss-grey: var(--wp--preset--color--accent-4, #6B6B6B);
	--ss-soft: var(--wp--preset--color--accent-5, #F5F5F4);
	--ss-line: var(--wp--preset--color--accent-6, #E6E6E6);
	--ss-radius: 10px;
}

body { -webkit-font-smoothing: antialiased; }
.ss-red { color: var(--ss-red); }
*, *::before, *::after { box-sizing: border-box; }

/* Header, main and footer sit flush against each other */
.wp-site-blocks > * { margin-block-start: 0 !important; }

/* ---------- Top bar ---------- */
.ss-topbar p { margin: 0; letter-spacing: .01em; }
.ss-topbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ss-topbar a:hover { color: #fff; opacity: .85; }

/* ---------- Header ---------- */
.ss-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .ss-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ss-header { top: 0; } }
.ss-header__row { gap: 1.5rem; }
.ss-header__tools { gap: .75rem; }
.ss-nav .wp-block-navigation-item__content { padding: .35rem .15rem; }
.ss-nav .wp-block-navigation-item__content:hover { color: var(--ss-red); }
.ss-nav .wp-block-navigation__container { gap: 1.75rem; }

/* Logo (assets/img, see README) */
.ss-logo { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
.ss-logo img { display: block; height: 44px; width: auto; }
.ss-footer .ss-logo img { height: 40px; }

/* Search */
.ss-search { margin: 0; }
.ss-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--ss-line) !important; border-radius: 999px; padding: 2px 2px 2px 14px; background: var(--ss-soft);
}
.ss-search .wp-block-search__input { border: 0; background: transparent; font-size: .9rem; min-width: 180px; padding: .45rem 0; }
.ss-search .wp-block-search__input:focus { outline: none; }
.ss-search .wp-block-search__button {
	border-radius: 999px; padding: .45rem .6rem; margin: 0; background: transparent; color: var(--ss-ink);
}
.ss-search .wp-block-search__button:hover { background: var(--ss-red); color: #fff; }
.ss-search .wp-block-search__inside-wrapper:focus-within { border-color: var(--ss-red) !important; background: #fff; }

.ss-header .wc-block-mini-cart__button,
.ss-header .wc-block-customer-account__account-icon { color: var(--ss-ink); }
.ss-header .wc-block-mini-cart__badge { background: var(--ss-red) !important; color: #fff !important; border: 2px solid #fff; min-width: 1.15rem; height: 1.15rem; font-size: .68rem; font-weight: 700; border-radius: 999px; }

.ss-nav .wp-block-navigation__container { flex-wrap: nowrap; white-space: nowrap; }

@media (max-width: 1100px) {
	.ss-search .wp-block-search__input { min-width: 0; width: 140px; }
	.ss-nav .wp-block-navigation__container { gap: 1.1rem; }
}
.ss-search-mobile { display: none; margin: 0; }
@media (max-width: 900px) {
	.ss-search { display: none; }
	.ss-search-mobile { display: block; }
}
.ss-search-mobile .wp-block-search__button { background: transparent; color: var(--ss-ink); padding: .35rem; margin: 0; border: 0; }
.ss-search-mobile .wp-block-search__button:hover { color: var(--ss-red); background: transparent; }
.ss-search-mobile .wp-block-search__inside-wrapper { border: 0 !important; padding: 0; }
.ss-search-mobile:not(.wp-block-search__searchfield-hidden) {
	position: absolute; left: 0; right: 0; top: 100%; background: #fff; padding: .75rem clamp(1rem, 4vw, 2rem);
	border-bottom: 1px solid var(--ss-line); box-shadow: 0 10px 20px rgba(0,0,0,.06);
}
.ss-search-mobile:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
	border: 1px solid var(--ss-line) !important; border-radius: 999px; padding: 2px 4px 2px 14px; background: var(--ss-soft);
}
.ss-search-mobile .wp-block-search__input { border: 0; background: transparent; font-size: 1rem; }
.ss-header { position: sticky; }
@media (max-width: 600px) {
	.ss-logo img { height: 34px; }
	.ss-header__row { gap: .5rem; }
	.ss-header__tools { gap: .35rem; }
}
@media (max-width: 380px) { .ss-logo img { height: 29px; } }

/* Checkout header */
.ss-header--checkout { position: static; }
.ss-secure { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .85rem; color: var(--ss-grey); }
.ss-secure svg { width: 16px; height: 16px; stroke: var(--ss-red); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-secure a { color: var(--ss-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .ss-secure { font-size: .78rem; } }

/* ---------- Hero ---------- */
.ss-hero { position: relative; overflow: hidden; }
.ss-hero::before {
	content: ""; position: absolute; right: -140px; top: 50%; transform: translateY(-50%);
	width: 620px; height: 620px; border-radius: 50%;
	background: radial-gradient(circle, rgba(194,2,27,.09) 0%, rgba(194,2,27,0) 68%);
	pointer-events: none;
}
.ss-hero__inner { position: relative; z-index: 1; }
.ss-eyebrow {
	display: inline-block; margin: 0 0 1rem; font-size: .78rem; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--ss-red);
}
.ss-hero__title { margin: 0; max-width: 16ch; }
.ss-hero__lead { color: #444; max-width: 52ch; margin-top: 1.25rem; line-height: 1.55; }

.ss-btn-ghost .wp-block-button__link {
	background: transparent; color: var(--ss-ink); border: 1.5px solid var(--ss-ink); padding: calc(.8rem - 1.5px) calc(1.4rem - 1.5px);
}
.ss-btn-ghost .wp-block-button__link:hover { background: var(--ss-ink); color: #fff; }
.ss-btn-white .wp-block-button__link { background: #fff; color: var(--ss-red); }
.ss-btn-white .wp-block-button__link:hover { background: var(--ss-ink); color: #fff; }

/* ---------- Perks strip ---------- */
.ss-perks__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.ss-perks__list li { display: flex; align-items: center; gap: .85rem; }
.ss-perks__list svg {
	flex: 0 0 42px; width: 42px; height: 42px; padding: 10px; border-radius: 50%;
	background: rgba(194,2,27,.08); stroke: var(--ss-red); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ss-perks__list span { display: flex; flex-direction: column; font-size: .85rem; color: var(--ss-grey); line-height: 1.35; }
.ss-perks__list strong { color: var(--ss-ink); font-size: .92rem; font-weight: 600; }
@media (max-width: 900px) { .ss-perks__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ss-perks__list { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------- Section headings ---------- */
.ss-section__head { margin-bottom: 1.75rem; }
.ss-title { margin: 0; position: relative; padding-bottom: .6rem; }
.ss-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; border-radius: 2px; background: var(--ss-red); }
.ss-link-arrow { margin: 0; font-weight: 600; font-size: .92rem; }
.ss-link-arrow a { color: var(--ss-red); }
.ss-link-arrow a:hover { color: var(--ss-red-dark); }

/* ---------- Install band ---------- */
.ss-install__title { margin-top: 0; }
.ss-install p { opacity: .92; max-width: 60ch; }
@media (max-width: 781px) { .ss-install__actions { justify-content: flex-start !important; } }

/* ---------- Footer ---------- */
.ss-footer a { color: #fff; }
.ss-footer a:hover { color: #fff; opacity: .75; }
.ss-footer .ss-muted { color: rgba(255,255,255,.62); }
.ss-footer__title { color: #fff; font-size: .8rem !important; text-transform: uppercase; letter-spacing: .12em; font-family: var(--wp--preset--font-family--inter) !important; font-weight: 600 !important; margin-bottom: 1rem; }
.ss-footer__links { list-style: none; padding: 0; margin: 0; font-size: .92rem; }
.ss-footer__links li { margin: 0 0 .55rem; }
.ss-footer__rule { border-color: rgba(255,255,255,.12) !important; opacity: 1; }
.ss-footer .wp-block-group p { margin: 0; }

/* ==========================================================================
   WooCommerce — product grids (shortcodes + classic loop)
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 0 !important; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important; display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--ss-line); border-radius: var(--ss-radius); padding: 1rem;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product:hover {
	border-color: transparent; box-shadow: 0 10px 30px rgba(0,0,0,.08); transform: translateY(-2px);
}
.woocommerce ul.products li.product a img {
	aspect-ratio: 1; object-fit: contain; background: var(--ss-soft); border-radius: 8px; margin: 0 0 .9rem; padding: .75rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
	font-family: var(--wp--preset--font-family--inter) !important; font-size: .95rem !important; font-weight: 600 !important;
	color: var(--ss-ink); padding: 0 !important; margin: 0 0 .4rem; line-height: 1.35;
}
.woocommerce ul.products li.product .price { color: var(--ss-ink) !important; font-weight: 700; font-size: 1rem !important; margin-bottom: .9rem; }
.woocommerce ul.products li.product .price del { color: var(--ss-grey); font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--ss-red); }
.woocommerce ul.products li.product .button {
	margin-top: auto !important; width: 100%; text-align: center; background: var(--ss-ink); color: #fff;
	border-radius: 6px; font-weight: 600; font-size: .88rem; padding: .7rem 1rem;
}
.woocommerce ul.products li.product .button:hover { background: var(--ss-red); color: #fff; }
.woocommerce ul.products li.product .added_to_cart { margin-top: .5rem; font-size: .85rem; text-align: center; color: var(--ss-red); }
.woocommerce ul.products li.product-category mark.count { background: none; color: var(--ss-grey); font-weight: 500; }
.woocommerce span.onsale {
	background: var(--ss-red); border-radius: 999px; min-height: 0; min-width: 0; line-height: 1; padding: .4rem .7rem;
	font-size: .75rem; top: 1.4rem !important; left: 1.4rem !important; right: auto !important; margin: 0;
}
@media (max-width: 1024px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; } .woocommerce ul.products li.product { padding: .75rem; } }

/* ==========================================================================
   WooCommerce — block templates (shop, product, cart, checkout)
   ========================================================================== */
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image-gallery img,
.wc-block-product-gallery-large-image img { background: var(--ss-soft); border-radius: var(--ss-radius); }

.wp-block-woocommerce-product-collection .wc-block-product,
.wc-block-product-template .wc-block-product {
	border: 1px solid var(--ss-line); border-radius: var(--ss-radius); padding: 1rem; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.wc-block-product-template .wc-block-product:hover { border-color: transparent; box-shadow: 0 10px 30px rgba(0,0,0,.08); transform: translateY(-2px); }
.wc-block-product-template .wp-block-post-title { font-family: var(--wp--preset--font-family--inter); font-weight: 600; font-size: .95rem !important; }
.wc-block-product-template .wp-block-post-title a { color: var(--ss-ink); }
.wc-block-product-template .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link { background: var(--ss-ink); width: 100%; }
.wc-block-product-template .wp-block-button__link:hover,
.wc-block-components-product-button .wp-block-button__link:hover { background: var(--ss-red); }

/* Single product */
.single-product .wp-block-post-title { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.single-product .wc-block-components-product-price,
.single-product .wp-block-woocommerce-product-price { font-size: 1.5rem !important; color: var(--ss-ink); }
.single-product form.cart .quantity input,
.wc-block-components-quantity-selector { border-radius: 6px; }
.woocommerce div.product form.cart .button,
.single_add_to_cart_button { background: var(--ss-red) !important; color: #fff !important; border-radius: 6px !important; padding: .9rem 1.6rem !important; font-weight: 600 !important; }
.woocommerce div.product form.cart .button:hover { background: var(--ss-red-dark) !important; }
.woocommerce-tabs .tabs li.active a, .wc-tabs li.active a { color: var(--ss-red) !important; }

/* Cart & checkout */
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--ss-red) !important; color: #fff !important; border-radius: 6px !important; font-weight: 600;
}
.wc-block-components-button:not(.is-link):hover { background: var(--ss-red-dark) !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--ss-ink); }
.wc-block-components-text-input input:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input:focus { border-color: var(--ss-red) !important; box-shadow: 0 0 0 1px var(--ss-red) !important; }
.wc-block-components-radio-control__input:checked { border-color: var(--ss-red) !important; }
.wc-block-components-radio-control__input:checked::before { background: var(--ss-red) !important; }
.wc-block-components-checkbox .wc-block-components-checkbox__input:checked { background: var(--ss-red); border-color: var(--ss-red); }

/* Notices & breadcrumbs */
.woocommerce-message, .woocommerce-info { border-top-color: var(--ss-red) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--ss-red) !important; }
.woocommerce-breadcrumb, .wc-block-breadcrumbs { font-size: .85rem; color: var(--ss-grey); }
.woocommerce-breadcrumb a, .wc-block-breadcrumbs a { color: var(--ss-grey); }

/* Focus ring for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--ss-red); outline-offset: 2px; }

/* ---------- Product page reassurance list ---------- */
.ss-buybox { list-style: none; margin: 1.5rem 0 0; padding: 1rem 1.1rem; border: 1px solid var(--ss-line); border-radius: var(--ss-radius); background: var(--ss-soft); display: grid; gap: .6rem; font-size: .88rem; color: var(--ss-text); }
.ss-buybox li { display: flex; align-items: center; gap: .6rem; margin: 0; }
.ss-buybox svg { flex: 0 0 18px; width: 18px; height: 18px; stroke: var(--ss-red); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ss-buybox a { color: var(--ss-red); font-weight: 600; }

/* ---------- Shop / archive pages ---------- */
.woocommerce-products-header__title, .wp-block-query-title { margin-bottom: .25rem; }
.woocommerce-result-count, .wc-block-product-results-count { color: var(--ss-grey); font-size: .88rem; }
.woocommerce-ordering select, .wc-block-catalog-sorting select {
	border: 1px solid var(--ss-line); border-radius: 6px; padding: .5rem 2rem .5rem .75rem; font-size: .88rem; background-color: #fff;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.wp-block-query-pagination-numbers .current { background: var(--ss-ink); color: #fff; border-radius: 6px; }

/* Category cards: tidy placeholder when a category has no picture yet */
.woocommerce ul.products li.product-category img[src*="placeholder"] { opacity: .35; }