/*
Theme Name:   Sally Antiques Child
Theme URI:    https://sallyantiques.co.uk/
Description:  Astra child theme for Sally Antiques
Author:       Chico
Template:     astra
Version:      1.0.0
Text Domain:  sallyantiques-child
*/

/* ============ PRODUCT GALLERY THUMBNAILS ============ */

/* DESKTOP: square thumbs in a column LEFT of main image, ~4 visible */
@media (min-width: 993px) {
    .woocommerce div.product .woocommerce-product-gallery {
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
        gap: 16px;
    }
    .woocommerce div.product .woocommerce-product-gallery__wrapper {
        flex: 1 1 auto;
        margin: 0;
    }
    .thumb-strip-wrap {
        flex: 0 0 90px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .woocommerce div.product .flex-control-thumbs {
        flex: 0 0 90px;
        width: 90px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: 384px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        list-style: none;
        scroll-behavior: smooth;
    }
    .thumb-strip-wrap .flex-control-thumbs {
        flex: 1 1 auto;
        height: auto;
        max-height: 384px;
    }
}

/* TABLET + MOBILE: square thumbs in a row UNDER main image, ~4 visible */
@media (max-width: 992px) {
    .thumb-strip-wrap {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
    }
    .woocommerce div.product .flex-control-thumbs {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        list-style: none;
        scroll-behavior: smooth;
    }
}

/* SQUARE THUMBS (both layouts) */
.woocommerce div.product .flex-control-thumbs li {
    flex: 0 0 auto;
    width: 90px;
    margin: 0 !important;
    padding: 0;
    float: none !important;
}
@media (max-width: 992px) {
    .woocommerce div.product .flex-control-thumbs li {
        width: 80px;
    }
}
.woocommerce div.product .flex-control-thumbs li img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s;
    border-radius: 4px;
}
.woocommerce div.product .flex-control-thumbs li img.flex-active,
.woocommerce div.product .flex-control-thumbs li img:hover {
    opacity: 1;
}

/* ARROW BUTTONS */
.thumb-nav {
    flex: 0 0 auto;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.thumb-nav:disabled {
    opacity: 0.3;
    cursor: default;
}
@media (min-width: 993px) {
    .thumb-nav { width: 90px; height: 24px; }
}
@media (max-width: 992px) {
    .thumb-nav { width: 24px; height: 80px; }
}


/* =========================================================================
 * HEADER & FOOTER + SIDE CART  (classic masthead)
 * cream #FEF8ED (logo bg) · teal #3E9183 (rgb 62,145,131)
 * ========================================================================= */

:root { --sa-cream: #FEF8ED; --sa-teal: #3E9183; --sa-ink: #2b2b2b; }

/* Header main bar = cream (matches logo bg) */
.main-header-bar-wrap, .main-header-bar, .ast-primary-header-bar .main-header-bar { background-color: var(--sa-cream) !important; }

/* Teal top bar */
.sa-topbar { background: var(--sa-teal); color: #fff; font-size: 13px; }
.sa-topbar-inner { max-width: 1240px; margin: 0 auto; padding: 6px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sa-topbar a { color: #fff; text-decoration: none; }
.sa-topbar a:hover { text-decoration: underline; }
.sa-topbar-label { opacity: .9; margin-right: 4px; }
.sa-topbar .sa-sep { opacity: .6; }
.sa-topbar-socials { display: inline-flex; align-items: center; gap: 12px; }
.sa-topbar-socials a { display: inline-flex; }

/* Header tools */
.main-header-menu .sa-tool > a, .main-header-menu .sa-tool .sa-wl-header, .main-header-menu .sa-tool .sa-cart-link { display: inline-flex; align-items: center; gap: 5px; color: var(--sa-ink); text-decoration: none; white-space: nowrap; }
.sa-tool-cart .sa-cart-count { background: var(--sa-teal); color: #fff; border-radius: 9px; min-width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 11px; padding: 0 5px; }
.sa-tool-cart .sa-cart-total { font-weight: 600; }
.sa-header-logo { max-height: 64px; width: auto; height: auto; display: block; }
span.sa-wl-header-count {
    position: absolute;
    top: -10px;
    right: -10px;
}
a.sa-wl-header {
    margin-right: 10px;
    margin-left: 10px;
}
.ast-site-identity {
    padding: 5px;
}
span.ksa-search-label {
    display: none;
}
/* Side cart drawer */
.sa-cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 99998; }
.sa-cart-overlay[hidden] { display: none; }
.sa-cart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 380px; max-width: 90vw; background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,.15); z-index: 99999; transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; }
.sa-cart-drawer.is-open { transform: translateX(0); }
.sa-cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--sa-teal); color: #fff; }
.sa-cart-drawer-title { font-weight: 700; font-size: 16px; }
.sa-cart-drawer-close { background: none; border: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0; }
.sa-cart-drawer-body { padding: 20px; overflow-y: auto; flex: 1; }
.sa-cart-drawer-body .woocommerce-mini-cart__buttons .button { display: inline-block; margin-bottom: 8px; }
.sa-cart-drawer-body .woocommerce-mini-cart__buttons .checkout { background: var(--sa-teal); border-color: var(--sa-teal); }

/* Footer */
.sa-footer { font-size: 14px; color: var(--sa-ink); }
.sa-footer a { color: var(--sa-ink); text-decoration: none; }
.sa-footer a:hover { text-decoration: underline; }
.sa-footer-scrolltop { background: var(--sa-teal); text-align: right; padding: 10px 30px; }
.sa-scrolltop-btn { display: inline-flex; color: #fff; }
.sa-footer-social { background: var(--sa-cream); text-align: center; padding: 30px 20px 40px; }
.sa-footer-social-title { font-weight: 700; margin: 0 0 24px; }
.sa-footer-embeds { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; }
.sa-embed { flex: 0 1 320px; }
.sa-embed img { width: 100%; height: auto; display: block; }
.sa-footer-menu-row { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 22px 20px; flex-wrap: wrap; }
.sa-footer-menu { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.sa-footer-menu li { position: relative; }
.sa-footer-menu li:not(:last-child)::after { content: "·"; position: absolute; right: -9px; color: #999; }
.sa-footer-search-toggle { background: none; border: none; cursor: pointer; color: var(--sa-ink); display: inline-flex; padding: 0; }
.sa-footer-info {     color: var(--sa-ink); text-align: center; }
.sa-footer-info a { color: var(--sa-ink); }
.sa-footer-copyright { margin: 0 0 14px; }
.sa-footer-address p { margin: 0 0 12px; line-height: 1.5; }
.sa-footer-payments { margin-top: 16px; }
.sa-footer-payments img { max-width: 320px; height: auto; display: inline-block; }

/* Wishlist count badge in header */
.sa-wl-header { display: inline-flex; align-items: center; gap: 4px; position: relative; }
.sa-wl-header-count { min-width: 18px; height: 18px; padding: 0 5px; background: var(--sa-teal); color: #fff; border-radius: 9px; font-size: 11px; line-height: 18px; text-align: center; }
.widget_shopping_cart_content {
    padding: 16px 20px;
}
.woocommerce-mini-cart__buttons.buttons {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 921px) {
	.sa-topbar-inner { flex-direction: column; gap: 6px; text-align: center; }
	.sa-footer-embeds { gap: 20px; }
}

/* Account tool: login/register + user-icon dropdown */
.sa-account-loggedout .sa-account-sep { margin: 0 6px; opacity: .5; }
.sa-tool-account .sa-account-link { display: inline-flex; align-items: center; }
.sa-tool-account.sa-account-loggedin,
.sa-tool-account.sa-account-loggedout-dropdown { position: relative; }
.sa-account-menu { list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; right: 0; min-width: 200px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.12); border-radius: 4px; z-index: 9999; display: none; }
.sa-tool-account.sa-account-loggedin:hover .sa-account-menu,
.sa-tool-account.sa-account-loggedin:focus-within .sa-account-menu,
.sa-tool-account.sa-account-loggedin.is-open .sa-account-menu,
.sa-tool-account.sa-account-loggedout-dropdown:hover .sa-account-menu,
.sa-tool-account.sa-account-loggedout-dropdown:focus-within .sa-account-menu,
.sa-tool-account.sa-account-loggedout-dropdown.is-open .sa-account-menu { display: block; }
.sa-account-menu li { width: 100%; }
.sa-account-menu li a { display: block; padding: 8px 18px; color: var(--sa-ink); white-space: nowrap; }
.sa-account-menu li a:hover { background: var(--sa-cream); color: var(--sa-teal); text-decoration: none; }
.sa-account-menu .woocommerce-MyAccount-navigation-link--customer-logout a { border-top: 1px solid #eee; }

/* =========================================================================
 * MOBILE HEADER LAYOUT (<= 921px): burger LEFT · logo CENTER · tools RIGHT
 * Cart + search stay visible (not hidden behind the burger).
 * ========================================================================= */

/* Mobile tools group hidden on desktop, shown on mobile */
.sa-mobile-tools { display: none; }

@media (max-width: 921px) {
	/* Make the header container a flex row we can order */
	.main-header-bar .ast-flex.main-header-container {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
	/* Burger LEFT */
	.main-header-bar .ast-mobile-menu-buttons { order: 1; flex: 0 0 auto; margin: 0; }
	/* Logo CENTER */
	.main-header-bar .site-branding { order: 2; flex: 1 1 auto; text-align: center; }
	.main-header-bar .site-branding .site-logo-img,
	.main-header-bar .site-branding .ast-site-identity { display: inline-block; }
	/* Tools RIGHT */
	.sa-mobile-tools { order: 3; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 14px; }
	/* The desktop nav alignment wrapper stays hidden (Astra hides nav anyway) */
	.main-header-bar .ast-main-header-bar-alignment { display: none; }

	.sa-mtool { background: none; border: none; padding: 0; cursor: pointer; color: var(--sa-ink, #2b2b2b); display: inline-flex; align-items: center; position: relative; text-decoration: none; }
	.sa-mtool .sa-cart-count { position: absolute; top: -8px; right: -10px; background: var(--sa-teal, #3E9183); color: #fff; border-radius: 9px; min-width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 10px; padding: 0 4px; }
	.sa-header-logo { max-height: 48px; }
}

/* Mobile search slide-down panel */
.sa-search-panel { position: fixed; left: 0; right: 0; top: 0; z-index: 99999; background: var(--sa-cream, #FEF8ED); box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 14px 16px; }
.sa-search-panel[hidden] { display: none; }
.sa-search-form { display: flex; max-width: 1240px; margin: 0 auto; gap: 8px; }
.sa-search-input { flex: 1; padding: 12px 14px; border: 1px solid #ccc; border-radius: 4px; }
.sa-search-submit { background: var(--sa-teal, #3E9183); border: none; color: #fff; padding: 0 16px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; }
/* =========================================================================
 * HOMEPAGE LAYOUT  (hero · featured · in-page social)
 * Reuses existing :root vars (--sa-cream #FEF8ED · --sa-teal #3E9183 · --sa-ink)
 * Adds one new var: --sa-green for the shop/read-more accent.
 * ========================================================================= */

:root { --sa-green: #99cc00; }

.sa-home { width: 100%; }

/* ---------- HERO ---------- */
.sa-hero { background: var(--sa-cream); padding: 48px 20px 64px; }
.sa-hero__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.sa-hero__logo { text-align: center; }
.sa-hero__logo img { max-width: 100%; height: auto; }
.sa-hero__content { text-align: center; }
.sa-hero__eyebrow { margin: 0; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; color: var(--sa-ink); }
.sa-hero__brand { margin: 4px 0 0; font-style: italic; font-weight: 800; font-size: 40px; color: var(--sa-ink); }
.sa-hero__tagline { margin: 8px 0 24px; font-size: 22px; font-weight: 600; color: var(--sa-ink); }
@media (max-width:900px){
	.sa-hero__logo img{
		max-width:65vw;
	}
}
/* hero product search (distinct from mobile .sa-search-* header family) */
.sa-hero-search { position: relative; max-width: 460px; margin: 0 auto 12px; }
.sa-hero-search input[type="search"] { width: 100%; padding: 12px 44px 12px 14px; border: 2px solid var(--sa-teal); border-radius: 4px; background: #fff; font-size: 15px; }
.sa-hero-search .dgwt-wcas-search-submit { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: none; border: 0; cursor: pointer; padding: 4px; line-height: 0; }
.sa-hero-search .dgwt-wcas-search-submit svg path { fill: var(--sa-ink); }

.sa-hero__shoplink { margin: 4px 0 28px; }
.sa-hero__shoplink a { font-size: 24px; font-weight: 700; color: var(--sa-ink); text-decoration: none; }
.sa-hero__shoplink a:hover { color: var(--sa-teal); }

.sa-hero__contact-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--sa-teal); }
.sa-hero__contact-sub { margin: 4px 0 16px; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; color: var(--sa-ink); }

.sa-btn { display: inline-block; background: var(--sa-teal); color: #fff; padding: 12px 26px; border-radius: 4px; font-weight: 700; text-decoration: none; }
.sa-btn:hover { background: #2f6f66; color: #fff; }

/* ---------- TEAL BANDS ---------- */
.sa-band { background: var(--sa-teal); height: 56px; width: 100%; }

/* ---------- FEATURED ---------- */
.sa-featured { background: #fff; padding: 48px 20px; max-width: 1100px; margin: 0 auto; }
.sa-section-title { text-align: center; font-size: 24px; font-weight: 700; color: var(--sa-ink); margin: 0 0 36px; }
.sa-featured__grid ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 0; padding: 0; list-style: none; }
.sa-featured__grid ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; text-align: center; }
.sa-featured__grid ul.products li.product img { margin: 0 auto 12px; }

/* ---------- IN-PAGE SOCIAL (not the footer .sa-footer-social) ---------- */
.sa-social { background: var(--sa-cream); padding: 48px 20px 64px; }
.sa-social__title { text-align: center; font-size: 24px; font-weight: 700; color: var(--sa-ink); margin: 0 0 40px; }
.sa-social__grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: center; }
.sa-social__card { display: block; }
.sa-social__card img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease; }
.sa-social__card:hover img { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.15); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .sa-hero__inner { grid-template-columns: 1fr; }
    .sa-featured__grid ul.products { grid-template-columns: repeat(2, 1fr); }
    .sa-social__grid { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 560px) {
    .sa-hero__brand { font-size: 32px; }
    .sa-featured__grid ul.products { grid-template-columns: 1fr; }
}
.k-credit-cards {
    width: 210px;
    display: flex;
	margin:0 auto;
}
.k-credit-cards img {
    flex: 0 0 30px !important;
    width: 30px !important;
    padding: 2px;
}
#woocommerce_product_categories-2 li.cat-item {
    margin-bottom: 0;
}
.sa-wl-btn {
    width: 30px;
    height: 30px;
    padding: 5px 4px;
    border-radius: 100px;
    text-align: center;
    position: absolute;
    left: 10px;
    top: 10px;
	background: #fff;
}
span.ksa-toggle {
    float: right;
    padding-top: 4px;
}
.widget_product_categories a {
    color: #777;
}
.widget_product_categories a:hover {
    color: #357E72;
}
.woocommerce ul.product-categories > li ul li:before{
	top:15px;
}