/*
Theme Name: Rosaries by Anna
Author: digitalmurph.co.uk
Description: Your description goes here
Version: 1.0
Template: hello-elementor

This is the child theme for Hello Elementor theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/

/* Woocommerce */

/* === Product Images Gallery === */
.single-product .woocommerce-product-gallery {
  margin-bottom: 0;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  border-radius: 0;
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
}
/* Thumbnail row.
   Selectors are deliberately one level deeper than WooCommerce core's
   (.woocommerce div.product div.images .flex-control-thumbs li), which sets
   width:25%; float:left. That 25% is correct for core's float layout, but once
   the <ol> becomes a grid it resolves against the li's own grid cell instead of
   the row — rendering 25px thumbs stranded in 148px columns. Hence the reset. */
.single-product .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.single-product.woocommerce div.product div.images .flex-control-thumbs li {
  width: 100%;
  float: none;
  margin: 0;
  padding: 0;
  list-style: none;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #f5f4f2;
  border: 1.5px solid transparent;
  cursor: pointer;
  opacity: 0.7;
  transition: border-color 200ms ease, opacity 200ms ease;
}
.single-product.woocommerce div.product div.images .flex-control-thumbs li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.single-product.woocommerce div.product div.images .flex-control-thumbs li:hover {
  opacity: 1;
}
/* Core flags the active thumb on the <img>, but the dimming lives on the <li> —
   opacity multiplies down the tree, so the highlight must target the parent. */
.single-product.woocommerce div.product div.images .flex-control-thumbs li:has(img.flex-active) {
  opacity: 1;
  border-color: #0e3a80;
}

/* === Product Title === */
.single-product .product_title {
  color: #1a1a1a;
  margin-bottom: 12px;
}

/* === Product Rating === */
.single-product .star-rating {
  color: #c14953;
  margin-bottom: 8px;
}

/* === Product Price === */
.single-product .price {
  color: #0e3a80;
  margin-bottom: 12px;
}
.single-product .price del {
  color: #6b6b6b;
}

/* === Short Description === */
.single-product .woocommerce-product-details__short-description {
  color: #1a1a1a;
  max-width: 480px;
  margin-bottom: 24px;
}
.single-product .woocommerce-product-details__short-description:empty {
  display: none;
}

/* === Add to Cart === */
.single-product .cart {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 16px;
}
.single-product .cart .quantity {
  display: flex;
  align-items: center;
  border: 1px solid #e2ddd6;
  border-radius: 2px;
  background: #fcfaf5;
}
/* WooCommerce renders the quantity input as type="hidden" when min == max (i.e.
   only one in stock — most of this catalogue is one-off pieces). The wrapper still
   renders, and since the border/background sit on the wrapper rather than the input,
   it paints a 2px sliver beside the Add to Basket button. Keyed off WooCommerce's own
   signal so it stays correct as stock changes. */
.single-product .cart .quantity:has(input[name="quantity"][type="hidden"]) {
  display: none;
}
.single-product .cart .quantity .qty {
  width: 44px;
  height: 48px;
  border: none;
  text-align: center;
  background: transparent;
  color: #1a1a1a;
  -moz-appearance: textfield;
}
.single-product .cart .quantity .qty::-webkit-outer-spin-button,
.single-product .cart .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.single-product .cart .single_add_to_cart_button,
.single-product .cart .button {
  flex: 1;
  height: 48px;
  border: none;
  background: #0e3a80 !important;
  color: #fcfaf5 !important;
  border-radius: 2px;
  cursor: pointer;
  transition: background 200ms ease;
  padding: 12px 32px;
}
.single-product .cart .single_add_to_cart_button:hover,
.single-product .cart .button:hover {
  background: #c14953 !important;
}

/* === Product Meta === */
.single-product .product_meta {
  color: #6b6b6b;
  padding-top: 24px;
  border-top: 1px solid #e2ddd6;
}
.single-product .product_meta a {
  color: #0e3a80;
  text-decoration: none;
  transition: color 200ms ease;
}
.single-product .product_meta a:hover {
  color: #c14953;
}

/* === Product Content / Story === */
.single-product .woocommerce-Tabs-panel,
.single-product .woocommerce-tabs {
  color: #1a1a1a;
}

/* === Additional Information / Specs === */
.single-product .woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
}
.single-product .woocommerce-product-attributes th {
  color: #6b6b6b;
  padding: 12px 24px 12px 0;
  border-bottom: 1px solid #e2ddd6;
  text-align: left;
  vertical-align: top;
}
.single-product .woocommerce-product-attributes td {
  color: #1a1a1a;
  padding: 12px 0;
  border-bottom: 1px solid #e2ddd6;
}
.single-product .woocommerce-product-attributes td p {
  margin: 0;
}

/* === Related Products === */
.single-product .related.products .products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 24px;
}
.single-product .related.products .product {
  text-align: left;
}
.single-product .related.products .product .woocommerce-loop-product__title {
  color: #1a1a1a;
  margin-bottom: 4px;
  padding: 0;
}
.single-product .related.products .product .price {
  color: #0e3a80;
}
.single-product .related.products .product img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform 500ms ease;
  margin-bottom: 16px;
}
.single-product .related.products .product:hover img {
  transform: scale(1.04);
}
.single-product .related.products .product .button {
  display: none;
}

/* === Shop Loop Card Hover (loop template 2136) === */
/* Only the parts Elementor's panel cannot express live here: absolute positioning,
   the slide transform, and parent-hover-drives-child. The button's own colours,
   typography and padding are set on the Add to Basket widget itself. */

/* Image zoom. The wrap already has overflow:hidden set on the container in Elementor. */
.e-loop-item .elementor-element-img0001 img {
  transition: transform 500ms ease;
}
.e-loop-item .elementor-element-crd0001:hover .elementor-element-img0001 img {
  transform: scale(1.04);
}

/* Quick-add bar slides up from the bottom of the image on card hover.
   The doubled .elementor-element class is deliberate: Elementor's frontend.min.css
   sets a transform transition on widgets at equal specificity and loads after this
   stylesheet, so it would otherwise win and force its own 0.4s duration. */
.e-loop-item .elementor-element.elementor-element-qad0001 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  transform: translateY(100%);
  transition: transform 300ms ease;
}
.e-loop-item .elementor-element-crd0001:hover .elementor-element.elementor-element-qad0001 {
  transform: translateY(0);
}
/* Elementor wraps the loop button in a flex container plus a <form>, both of which
   shrink to their content. Without stretching them the button's width:100% resolves
   against the form's ~137px rather than the card, leaving a part-width bar. */
.e-loop-item .elementor-element-qad0001 .e-loop-add-to-cart-form-container,
.e-loop-item .elementor-element-qad0001 form.cart {
  width: 100%;
}
/* Stack the form's children. After an AJAX add WooCommerce appends a "View basket"
   link as a second child of the form; while the form is a flex row that link steals
   width from the button (373px -> 305px). Column keeps both full width. */
.e-loop-item .elementor-element-qad0001 form.cart {
  flex-direction: column;
}
.e-loop-item .elementor-element-qad0001 .button {
  display: block;
  width: 100%;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

/* The appended "View basket" link ships unstyled — pink text on a transparent
   background, sitting over the product photo. Give it its own bar below the button.
   Doubled .elementor-element again: Elementor's widget CSS sets padding:0 / display:flex
   on this link at equal specificity and loads after the theme. */
/* Elementor already sets display:flex and padding:0 on this link at a specificity
   we cannot beat without !important, so rather than fight it we lean on the flex box
   it gives us: min-height matches the button's 40px, and centring replaces padding. */
.e-loop-item .elementor-element.elementor-element-qad0001 .added_to_cart {
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  background: #c14953;
  color: #fcfaf5;
  text-decoration: none;
  transition: background 200ms ease;
}
.e-loop-item .elementor-element.elementor-element-qad0001 .added_to_cart:hover {
  background: #0e3a80;
}

/* Keyboard users get the bar too, since it is a focusable control. */
.e-loop-item .elementor-element.elementor-element-qad0001:focus-within {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .e-loop-item .elementor-element-img0001 img,
  .e-loop-item .elementor-element.elementor-element-qad0001 {
    transition: none;
  }
  .e-loop-item .elementor-element-crd0001:hover .elementor-element-img0001 img {
    transform: none;
  }
}

/* === Responsive === */
@media (max-width: 768px) {
  .single-product .related.products .products {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
  }
}
@media (max-width: 480px) {
  .single-product .related.products .products {
    grid-template-columns: 1fr;
  }
}

/* === Homepage: frosted-glass header (homepage only) ============================
   The header is a single global template applied site-wide, so it cannot be
   styled per-page from Elementor's panel without duplicating the whole template.
   Scoping to body.home keeps every other page on the solid navy header.

   - Translucent navy (not fully clear) so the white logo/links stay legible over
     the busy hero photo — this IS the "frosted glass" tint.
   - backdrop-filter blurs whatever scrolls under the sticky header.
   - The negative margin pulls the header out of flow so it overlays the hero
     (hero then runs edge-to-edge from y:0 behind it) instead of sitting above it;
     the header stays position:sticky, so it still blurs content on scroll. */
body.home .nav-outer-s {
  /* Clear frosted glass: no colour tint, just a faint white film so the blurred
     surface reads as glass rather than a plain blur. */
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: rgba(255, 255, 255, 0.18);
  margin-bottom: -72px;
  /* The negative margin makes the hero overlap the header. The hero is
     position:relative and comes later in the DOM, so without an explicit z-index
     it paints OVER the header and hides the logo/menu. Lift the header above it. */
  position: sticky;
  z-index: 100;
}
/* Fallback for browsers without backdrop-filter: without the blur a clear film is
   invisible, so drop in a neutral (non-blue) dark scrim to keep the white logo and
   menu legible. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.home .nav-outer-s {
    background: rgba(0, 0, 0, 0.3);
  }
}

/* ==========================================
   Cross-sells — stacked horizontal rows
   ========================================== */

/* Stack products vertically (one per row) */
.cross-sells {
	border-top: 1px solid lightgrey;
	margin-top: 20px;
	padding-top: 20px;
}
.cross-sells h3 {
	font-size: 1.5rem;
}
.cross-sells ul.products {
    display: flex !important;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

/* Each product as a horizontal row */
.cross-sells ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
}

/* Image + title + price grid — image left, title/price stacked right */
.cross-sells ul.products li.product a:first-child {
    display: grid;
    grid-template-columns: 90px 1fr;
    grid-template-areas:
        "img title"
        "img price";
    column-gap: 10px;
    row-gap: 0.15rem;
    align-items: center;
    width: 70%;
}

.cross-sells ul.products li.product a img {
    grid-area: img;
    align-self: center;
    max-width: 90px;
    width: 90px;
    height: auto;
    margin: 0;
    border-radius: 2px;
    display: block;
}

/* Details (title, price, button) */
.cross-sells ul.products li.product .woocommerce-loop-product__title,
.cross-sells ul.products li.product .price,
.cross-sells ul.products li.product .button,
.cross-sells ul.products li.product .added_to_cart {
    display: block;
    width: auto;
}

.cross-sells ul.products li.product .woocommerce-loop-product__title {
    grid-area: title;
    align-self: end;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem !important;
    font-weight: 500;
    color: #1E3A5F;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3;
}

.cross-sells ul.products li.product .price {
    grid-area: price;
    align-self: start;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    color: #1E3A5F;
    opacity: 0.75;
    margin: 0 !important;
}

.cross-sells ul.products li.product .button {
    display: inline-block;
    margin: 0;
	font-weight: normal;
    background: #235292;
    color: white;
	font-size: 14px;
}
.cross-sells ul.products li.product .button:hover {
	background: #c14953
;
}

/* Mobile — keep the row layout, tighten spacing */
@media (max-width: 480px) {
    .cross-sells ul.products li.product {
        gap: 1rem;
		flex-direction: column;
    	align-items: baseline;
    }

    .cross-sells ul.products li.product a:first-child {
        grid-template-columns: 72px 1fr;
        width: 70%;
    }

    .cross-sells ul.products li.product a img {
        width: 72px;
        max-width: 72px;
    }

    .cross-sells ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.95rem !important;
    }
}

/* Conditional items in ingle product template */

.product_cat-pouches #specs-list,
.product_cat-pouches #care-list {
	display: none;
}

/* Woocommerce Notices */

/* 'View basket' banner */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error {
	margin-bottom: 0 !important;
}

.woocommerce-notices-wrapper .button.wc-forward {
	background: #c14953;
	color: #ffffff;
}
.woocommerce-notices-wrapper .button.wc-forward:hover {
	background:#235292;
}