/* flowerboutique.uk — pure HTML + CSS replacements for the original JavaScript widgets (2026-11-04) */

/* mobile menu: <details class="fb-menu"><summary class="menu-toggle"> replaces the JS toggle button */
details.fb-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
details.fb-menu > summary::-webkit-details-marker { display: none; }
details.fb-menu[open] > summary .ast-mobile-svg { display: none; }
details.fb-menu[open] > summary .ast-close-svg { display: block; }
.ast-mobile-header-wrap:has(details.fb-menu[open]) .ast-mobile-header-content { display: block !important; }
/* Astra's JS adds .ast-header-break-point on small screens; without it the open menu must be stacked here */
.ast-mobile-header-content .main-header-menu { display: block !important; width: 100%; }
.ast-mobile-header-content .main-header-menu > .menu-item { display: block; width: 100%; border-bottom: 1px solid var(--ast-global-color-6, #E5D7D1); }
.ast-mobile-header-content .main-header-menu > .menu-item > .menu-link { display: block; padding: 12px 20px; line-height: 1.5; }
.ast-mobile-header-content { background: var(--ast-global-color-5, #fff); }

/* scroll-to-top: always-present in-page link (JS used to reveal it on scroll) */
a#ast-scroll-top { display: block; text-decoration: none; }
a#ast-scroll-top svg { fill: currentColor; }

/* product tabs: first panel by default, the :target panel when a tab link is followed */
/* (!important on the show rules: the :has() hide rule is more specific than a plain :target selector) */
.woocommerce-tabs .wc-tab { display: none; }
.woocommerce-tabs .wc-tab:first-of-type { display: block; }
.woocommerce-tabs:has(.wc-tab:target, .wc-tab :target) .wc-tab { display: none; }
.woocommerce-tabs .wc-tab:target, .woocommerce-tabs .wc-tab:has(:target) { display: block !important; }

/* product gallery: one large image, thumbnails switch via :target */
.woocommerce-product-gallery { opacity: 1 !important; }
/* (WooCommerce's no-JS CSS shows images 2..n as an inline thumbnail row, so these need !important) */
.woocommerce-product-gallery .woocommerce-product-gallery__image { display: none !important; width: 100% !important; }
.woocommerce-product-gallery .woocommerce-product-gallery__image:first-child { display: block !important; }
.woocommerce-product-gallery:has(.woocommerce-product-gallery__image:target) .woocommerce-product-gallery__image:first-child:not(:target) { display: none !important; }
.woocommerce-product-gallery .woocommerce-product-gallery__image:target { display: block !important; }
.woocommerce-product-gallery .flex-control-thumbs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 10px; }
.woocommerce-product-gallery .flex-control-thumbs li { width: 100px; margin: 0; }
.woocommerce-product-gallery .flex-control-thumbs img { opacity: .5; display: block; width: 100%; height: auto; cursor: pointer; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs a:hover img { opacity: 1; }
.woocommerce-product-gallery:has(.woocommerce-product-gallery__image:target) .flex-control-thumbs img.flex-active { opacity: .5; }

/* contact + review calls to action (replace the forms) */
.fb-contact-cta p { margin: 0 0 1em; }
.fb-contact-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fb-contact-cta .fb-btn, .fb-contact-cta .fb-btn-outline {
  display: inline-block; padding: 12px 24px; border-radius: 50px; font-weight: 700; text-decoration: none !important; line-height: 1.2;
}
.fb-contact-cta .fb-btn { background: var(--ast-global-color-1, #F15808); color: #fff; }
.fb-contact-cta .fb-btn:hover { background: var(--ast-global-color-0, #FF6210); color: #fff; }
.fb-contact-cta .fb-btn-outline { border: 2px solid var(--ast-global-color-1, #F15808); color: var(--ast-global-color-2, #1C0D0A); }
.fb-review-cta { margin: 1em 0 0; }