/*
Theme Name:   Weekly Flowers
Theme URI:    https://weeklyflowers.com
Description:  Weekly Flowers WooCommerce theme — pixel-close port of weeklyflowers.com (Magento Sm/shoppystore). Child of Storefront.
Author:       Weekly Flowers Ottawa
Author URI:   https://weeklyflowers.com
Template:     storefront
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  weeklyflowers
Tags:         woocommerce, florist, custom
*/

/* ============================================================
   DESIGN TOKENS — extracted from live weeklyflowers.com
   ============================================================ */
:root {
  /* Brand colours */
  --wf-pink:          #F05978;   /* Primary CTA, phones, search btn, accents */
  --wf-red:           #A8102E;   /* CATEGORIES header block */
  --wf-green:         #2A5C45;   /* Subscription banner */
  --wf-gold:          #65490B;   /* Customer reviews header */
  --wf-orange-badge:  #E07518;   /* Sale/discount badge */

  /* Neutrals */
  --wf-body-text:     #444444;
  --wf-dark:          #333333;
  --wf-mid-gray:      #666666;
  --wf-light-gray:    #F6F6F6;   /* Utility bar, header bg */
  --wf-section-bg:    #F9F9F9;   /* Section block backgrounds */
  --wf-border:        #E0E0E0;
  --wf-white:         #FFFFFF;

  /* Typography */
  --wf-font:          'Open Sans', sans-serif;
  --wf-font-size:     14px;
  --wf-line-height:   1.6;

  /* Layout */
  --wf-sidebar-width: 240px;
  --wf-left-col:      240px;   /* logo + CATEGORIES column = sidebar + container left padding */
  --wf-max-width:     1200px;  /* matches original site container */
  --wf-header-height: 90px;

  /* Transitions */
  --wf-transition:    all 0.2s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: var(--wf-font-size);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--wf-font);
  font-size: var(--wf-font-size);
  line-height: var(--wf-line-height);
  color: var(--wf-body-text);
  background: var(--wf-white);
  margin: 0;
  padding: 0;
}

a {
  color: var(--wf-body-text);
  text-decoration: none;
  transition: var(--wf-transition);
}

a:hover {
  color: var(--wf-pink);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wf-font);
  color: var(--wf-dark);
  font-weight: 700;
  margin: 0 0 0.75em;
  line-height: 1.3;
}

/* ============================================================
   LAYOUT WRAPPER
   ============================================================ */
.wf-container {
  max-width: var(--wf-max-width);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  flex: 1;
}

/* ============================================================
   TOP ANNOUNCEMENT BAR
   ============================================================ */
.wf-topbar {
  background: #fff;
  color: var(--wf-body-text);
  border-bottom: 1px solid #F8C8D4;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 6px 20px;
  line-height: 1.4;
}

.wf-topbar span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wf-topbar .wf-flower-icon {
  font-size: 14px;
  opacity: 0.9;
}

/* ============================================================
   UTILITY BAR (address / phones / login)
   ============================================================ */
.wf-utility-bar {
  background: #fff;
  border-bottom: 1px solid #F8C8D4;
  font-size: 12px;
  color: var(--wf-body-text);
  padding: 6px 0;
}

.wf-utility-bar .wf-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.wf-utility-bar__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wf-utility-bar__address {
  display: flex;
  align-items: center;
  gap: 5px;
}

.wf-utility-bar__address .dashicons,
.wf-utility-bar__address svg {
  color: var(--wf-pink);
  font-size: 14px;
  width: 14px;
  height: 14px;
}

.wf-utility-bar__phones {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wf-utility-bar__phones a {
  color: var(--wf-pink);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wf-utility-bar__phones a:hover {
  color: var(--wf-red);
}

.wf-utility-bar__phones .wf-phone-icon {
  font-size: 13px;
}

.wf-utility-bar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wf-utility-bar__right a {
  color: var(--wf-body-text);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wf-utility-bar__right a:hover {
  color: var(--wf-pink);
}

.wf-utility-bar__right .wf-separator {
  color: var(--wf-border);
}

/* ============================================================
   MAIN HEADER (logo + banner + cart)
   ============================================================ */

/* Header: fixed height, banner is absolute background */
.wf-header {
  position: relative;
  height: var(--wf-header-height);
  overflow: hidden;
  background: var(--wf-white);
  padding: 0;
}

/* Banner: full-width absolute background behind logo + cart */
.wf-header__banner {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
}

.wf-header__banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Inner row: logo on left, cart on right */
.wf-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

/* Logo — transparent so flower banner shows through */
.wf-header__logo {
  flex-shrink: 0;
  padding: 10px 0px;
  background: transparent;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.wf-header__logo a {
  display: block;
}

.wf-header__logo img {
  max-width: none;
  height: auto;
}

.wf-header__logo .site-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--wf-pink);
  line-height: 1;
}

.wf-header__logo .site-tagline {
  font-size: 11px;
  color: var(--wf-mid-gray);
  font-style: italic;
  margin-top: 2px;
}

/* Cart — white button, right-aligned */
.wf-header__cart {
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.wf-header__cart a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--wf-white);
  border: 2px solid var(--wf-border);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wf-body-text);
  transition: var(--wf-transition);
  white-space: nowrap;
}

.wf-header__cart a:hover {
  border-color: var(--wf-pink);
  color: var(--wf-pink);
}

.wf-header__cart .cart-icon {
  color: var(--wf-pink);
  font-size: 18px;
}

/* ============================================================
   NAV BAR (CATEGORIES button + search)
   ============================================================ */
.wf-navbar {
  background: var(--wf-white);
  border-top: 1px solid var(--wf-border);
  padding: 0;
  overflow: visible;
}

.wf-navbar__inner {
  display: flex;
  align-items: stretch;
  height: 46px;
  overflow: visible;
}

/* CATEGORIES toggle button — same width as logo column so they align */
.wf-navbar__categories-btn {
  width: var(--wf-left-col);
  flex-shrink: 0;
  background: var(--wf-red);
  color: var(--wf-white);
  border: none;
  padding: 0 20px;
  font-family: var(--wf-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: var(--wf-transition);
  justify-content: flex-start;
  box-sizing: border-box;
}

.wf-navbar__categories-btn:hover {
  background: #8a0d24;
  color: #ddd;
}

/* ── CATEGORIES wrapper (button + dropdown) ── */
.wf-categories-wrap {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
}

/* Dropdown — hidden by default, JS moves to <body> and positions via fixed */
.wf-categories-dropdown {
  display: none;
  position: fixed; /* JS sets top/left/width at open time */
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  z-index: 99999;
  min-width: var(--wf-sidebar-width);
}

.wf-categories-dropdown.open {
  display: block !important;
}

/* Nav list inside dropdown — reuse sidebar styling */
.wf-categories-dropdown ul {
  list-style: none;
  padding: 6px 0;
  margin: 0;
}

.wf-categories-dropdown ul li a {
  display: flex;
  align-items: center;
  padding: 7px 16px;
  font-size: 13px;
  color: var(--wf-body-text);
  transition: var(--wf-transition);
}

.wf-categories-dropdown ul li a::before {
  content: '\25AA';
  color: var(--wf-dark);
  margin-right: 8px;
  font-size: 10px;
  flex-shrink: 0;
}

.wf-categories-dropdown ul li a:hover {
  color: var(--wf-pink);
  background: var(--wf-section-bg);
}

/* Virtual tour button inside dropdown */
.wf-categories-dropdown .wf-virtual-tour-btn {
  display: block;
  background: var(--wf-pink);
  color: var(--wf-white);
  text-align: center;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: var(--wf-transition);
  border-top: 1px solid var(--wf-border);
}

.wf-categories-dropdown .wf-virtual-tour-btn:hover {
  background: var(--wf-red);
  color: var(--wf-white);
}

.wf-navbar__categories-btn .wf-hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 18px;
}

.wf-navbar__categories-btn .wf-hamburger span {
  display: block;
  height: 2px;
  background: var(--wf-white);
  border-radius: 2px;
}

/* Search form */
.wf-navbar__search {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0;
}

.wf-navbar__search form {
  display: flex;
  width: 100%;
  height: 100%;
  margin-bottom: 0 !important; /* override Storefront's form { margin-bottom: 1.618em } */
}

.wf-navbar__search input[type="search"],
.wf-navbar__search input[type="text"] {
  flex: 1;
  border: none !important;
  border-left: 1px solid var(--wf-border) !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  border-radius: 0;
  padding: 0 16px;
  font-family: var(--wf-font);
  font-size: 14px;
  color: var(--wf-body-text);
  outline: none;
  background: var(--wf-white);
}

.wf-navbar__search input::placeholder {
  color: #aaa;
}

.wf-navbar__search button[type="submit"] {
  background: var(--wf-pink);
  color: var(--wf-white);
  border: none;
  padding: 0 20px;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--wf-transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-navbar__search button[type="submit"] .dashicons,
.wf-navbar__search button[type="submit"] svg,
.wf-navbar__search button[type="submit"] span {
  font-size: 22px;
  width: 22px;
  height: 22px;
  line-height: 22px;
}

.wf-navbar__search button[type="submit"]:hover {
  background: var(--wf-red);
}

/* ============================================================
   SIDEBAR CATEGORIES NAV
   ============================================================ */
.wf-sidebar-cats {
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  width: var(--wf-sidebar-width);
  flex-shrink: 0;
}

/* Sidebar CATEGORIES header — hidden on desktop (navbar btn is the visual header) */
.wf-sidebar-cats__header {
  display: none;
}

.wf-sidebar-cats ul {
  padding: 6px 0;
}

.wf-sidebar-cats ul li a {
  display: flex;
  align-items: center;
  padding: 7px 16px;
  font-size: 13px;
  color: var(--wf-body-text);
  border-bottom: 1px solid #f5f5f5;
  transition: var(--wf-transition);
}

.wf-sidebar-cats ul li a::before {
  content: '\25AA';
  color: var(--wf-dark);
  margin-right: 8px;
  font-size: 10px;
}

.wf-sidebar-cats ul li a:hover {
  color: var(--wf-pink);
  background: var(--wf-section-bg);
}

.wf-sidebar-cats ul li.has-children > a::after {
  content: '›';
  margin-left: auto;
  font-size: 16px;
  color: var(--wf-mid-gray);
}

/* ============================================================
   MAIN CONTENT AREA (sidebar + content)
   ============================================================ */
.wf-content-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 0px 20px 0;
  max-width: var(--wf-max-width);
  margin: 0 auto;
  width: 100%;
}

/* Full-width variant — used on category/product/cart pages (no sidebar) */
.wf-content-wrapper.wf-full-width {
  display: block;
  padding-top: 16px;
}

.wf-content-wrapper .wf-sidebar-cats {
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.wf-main-content {
  flex: 1;
  min-width: 0;
  padding-left: 20px;
  padding-top: 10px;
}

.wf-full-width .wf-main-content {
  padding-left: 0;
}

/* ============================================================
   PRODUCT CAROUSEL SECTION
   ============================================================ */
.wf-carousel-section {
  background: var(--wf-section-bg);
  border: 1px solid var(--wf-border);
  margin-bottom: 20px;
}

.wf-carousel-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--wf-border);
  flex-wrap: wrap;
  gap: 8px;
}

.wf-carousel-section__title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wf-carousel-section__icon {
  background: #999;
  color: var(--wf-white);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.wf-carousel-section__title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--wf-dark);
  margin: 0;
}

.wf-carousel-section__view-all {
  font-size: 12px;
  color: var(--wf-pink);
  font-weight: 600;
  margin-left: 8px;
}

.wf-carousel-section__phones {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  margin-right: 12px;
}

.wf-carousel-section__phones a {
  font-size: 12px;
  color: var(--wf-pink);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wf-carousel-section__arrows {
  display: flex;
  gap: 4px;
}

.wf-carousel-section__arrows button {
  background: #999;
  color: var(--wf-white);
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--wf-transition);
}

.wf-carousel-section__arrows button:hover {
  background: #555;
}

/* Carousel grid */
.wf-carousel-section__body {
  padding: 16px;
  overflow: hidden;
}

.wf-product-carousel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.wf-product-card {
  text-align: center;
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  padding: 10px;
  transition: var(--wf-transition);
  position: relative;
  overflow: hidden;
}

.wf-product-card:hover {
  border-color: var(--wf-pink);
  box-shadow: 0 2px 12px rgba(240,89,120,0.12);
}

.wf-product-card__badge {
  position: absolute;
  top: 10px;
  right: -22px;
  left: auto;
  width: 90px;
  text-align: center;
  background: var(--wf-orange-badge);
  color: var(--wf-white);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 0;
  z-index: 2;
  transform: rotate(45deg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wf-product-card__image {
  margin-bottom: 10px;
  overflow: hidden;
}

.wf-product-card__image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  transition: transform 0.3s ease;
  margin: 0 auto;
}

.wf-product-card:hover .wf-product-card__image img {
  transform: scale(1.04);
}

.wf-product-card__stars {
  color: #f5a623;
  font-size: 13px;
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.wf-product-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--wf-dark);
  margin-bottom: 6px;
  line-height: 1.4;
}

.wf-product-card__name a {
  color: var(--wf-dark);
}

.wf-product-card__name a:hover {
  color: var(--wf-pink);
}

.wf-product-card__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--wf-dark);
  margin-bottom: 8px;
}

.wf-product-card__price del {
  color: var(--wf-mid-gray);
  font-weight: 400;
  font-size: 12px;
  margin-right: 4px;
}

.wf-product-card__btn {
  display: inline-block;
  background: var(--wf-pink);
  color: var(--wf-white);
  border: 1px solid var(--wf-pink);
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--wf-transition);
  font-family: var(--wf-font);
  width: 100%;
}

.wf-product-card__btn:hover,
.wf-product-card__btn:focus {
  background: var(--wf-red);
  border-color: var(--wf-red);
  color: var(--wf-white);
}

/* ============================================================
   HERO SECTION (homepage)
   ============================================================ */
.wf-hero-section {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  margin-bottom: 20px;
  align-items: start;
}

.wf-hero-section__main {
  background: var(--wf-section-bg);
  border: 1px solid var(--wf-border);
  padding: 24px;
}

.wf-hero-section__headline {
  font-size: 22px;
  font-weight: 800;
  color: var(--wf-dark);
  margin-bottom: 16px;
}

.wf-hero-section__inner {
  display: block;
  position: relative;
}

/* Gradient scrim on photo for button readability — desktop only */
.wf-hero-section__photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 0 0 4px 4px;
}

.wf-hero-section__photo {
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.wf-hero-section__photo > img:not(.wf-hero-section__badge) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}

.wf-hero-section__badge {
  /* Badge is embedded in the staff photo — hide the overlay */
  display: none;
}

.wf-hero-section__bullets {
  flex: 1;
}

.wf-hero-section__bullets li {
  font-size: 15px;
  font-weight: 600;
  color: var(--wf-dark);
  padding: 8px 0;
  border-bottom: 1px solid var(--wf-border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.wf-hero-section__bullets li:last-child {
  border-bottom: none;
}

.wf-hero-section__bullets li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--wf-pink);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 10px; /* optical alignment with first line of text at 15px/1.4 */
}

/* Customer reviews panel */
.wf-reviews-panel {
  width: 220px;
  flex-shrink: 0;
  border: 1px solid var(--wf-border);
  overflow: hidden;
}

.wf-reviews-panel__header {
  background: var(--wf-dark);
  color: var(--wf-white);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wf-reviews-panel__rating {
  background: var(--wf-section-bg);
  padding: 8px 10px;
  border-bottom: 1px solid var(--wf-border);
  font-size: 12px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  white-space: nowrap;
}

.wf-reviews-panel__rating .stars {
  color: #f5a623;
  font-size: 13px;
}

.wf-reviews-panel__body {
  max-height: 380px;
  overflow-y: auto;
  padding: 0;
}

.wf-review-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--wf-border);
  font-size: 11px;
}

.wf-review-item__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.wf-review-item__name {
  font-weight: 700;
  color: var(--wf-dark);
}

.wf-review-item__date {
  color: var(--wf-mid-gray);
  font-size: 10px;
}

.wf-review-item__stars {
  color: #f5a623;
  font-size: 12px;
  margin-bottom: 4px;
}

.wf-review-item__text {
  color: var(--wf-body-text);
  font-size: 11px;
  line-height: 1.5;
}

/* ============================================================
   CATEGORY BANNER BLOCKS
   ============================================================ */
.wf-category-banners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.wf-category-banner {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}

.wf-category-banner img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}

.wf-category-banner:hover img {
  transform: scale(1.04);
}

/* CSS gradient fallback when no image is available */
.wf-category-banner__bg {
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, var(--wf-dark) 0%, #555 100%);
}
.wf-category-banner--wedding-flowers-ottawa .wf-category-banner__bg {
  background: linear-gradient(135deg, #7b4f6e 0%, #c49a9a 100%);
}
.wf-category-banner--funeral-flowers-ottawa .wf-category-banner__bg {
  background: linear-gradient(135deg, #2a3d2e 0%, #4a6741 100%);
}

.wf-category-banner__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.1) 30%, transparent 100%);
  padding: 40px 20px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.wf-category-banner__label {
  color: var(--wf-dark);
  font-size: 20px;
  font-weight: 700;
  text-shadow: none;
  line-height: 1.2;
}

.wf-category-banner__cta {
  flex-shrink: 0;
  display: inline-block;
  background: var(--wf-pink);
  color: var(--wf-white) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 2px;
  white-space: nowrap;
  transition: var(--wf-transition);
}

.wf-category-banner:hover .wf-category-banner__cta {
  background: var(--wf-red);
}

/* Carousel View All footer */
.wf-carousel-section__footer {
  text-align: right;
  padding: 4px 16px 16px;
}

.wf-carousel-section__view-all {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--wf-dark) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.3px;
  transition: color 0.2s;
}

.wf-carousel-section__view-all:hover {
  color: var(--wf-pink) !important;
}

/* ============================================================
   VIRTUAL TOUR BUTTON (sticky left sidebar)
   ============================================================ */
.wf-virtual-tour-btn {
  display: block;
  background: var(--wf-pink);
  color: var(--wf-white);
  text-align: center;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 0 0 4px 4px;
  transition: var(--wf-transition);
  margin-top: 2px;
}

.wf-virtual-tour-btn:hover {
  background: var(--wf-red);
  color: var(--wf-white);
}

/* ============================================================
   FOOTER
   ============================================================ */
.wf-footer {
  background: #f2f2f2;
  margin-top: 0;
}

.wf-footer__main {
  padding: 30px 0 20px;
}

/* Footer col-full: remove Storefront's em-based max-width, let footer fill the container */
.site-footer .col-full {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.wf-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.wf-footer__col-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--wf-dark);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--wf-pink);
}

.wf-footer__col ul li {
  margin-bottom: 6px;
}

.wf-footer__col ul li a {
  font-size: 13px;
  color: var(--wf-body-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wf-footer__col ul li a::before {
  content: '\203A';
  color: var(--wf-pink);
  font-size: 16px;
  line-height: 1;
}

.wf-footer__col ul li a:hover {
  color: var(--wf-pink);
  padding-left: 4px;
}

/* Contact Us column */
.wf-footer__contact p {
  font-size: 12px;
  color: var(--wf-mid-gray);
  line-height: 1.6;
  margin-bottom: 10px;
}

.wf-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--wf-body-text);
}

.wf-footer__contact-item .icon {
  color: var(--wf-pink);
  flex-shrink: 0;
  margin-top: 1px;
}

.wf-footer__contact-item a {
  color: var(--wf-pink);
  font-weight: 600;
  text-decoration: none;
}

/* Footer bottom bar */
.wf-footer__bottom {
  background: #e8e8e8;
  border-top: 1px solid var(--wf-border);
  padding: 12px 0;
}

.wf-footer__bottom .wf-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.wf-footer__copyright {
  font-size: 12px;
  color: var(--wf-mid-gray);
}

.wf-footer__badges {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wf-footer__badges img {
  height: 36px;
  width: auto;
  opacity: 0.85;
  transition: var(--wf-transition);
}

.wf-footer__badges img:hover {
  opacity: 1;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.wf-breadcrumb {
  font-size: 12px;
  color: var(--wf-mid-gray);
  padding: 8px 0;
  margin-bottom: 16px;
}

.wf-breadcrumb a {
  color: var(--wf-mid-gray);
}

.wf-breadcrumb a:hover {
  color: var(--wf-pink);
}

.wf-breadcrumb .separator {
  margin: 0 6px;
  color: var(--wf-border);
}

.wf-breadcrumb .current {
  color: var(--wf-pink);
  font-weight: 600;
}

/* ============================================================
   CATEGORY / SHOP ARCHIVE PAGE
   ============================================================ */
.wf-archive-page {
  padding: 20px 0;
}

.wf-archive-page--no-sidebar .wf-main-content {
  padding-left: 0;
}

/* Category description block */
.wf-cat-description {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--wf-section-bg);
  border: 1px solid var(--wf-border);
}

.wf-cat-description__image {
  width: 80px;
  flex-shrink: 0;
}

.wf-cat-description__image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.wf-cat-description__text {
  font-size: 13px;
  color: var(--wf-body-text);
  line-height: 1.6;
}

/* Toolbar (sort / grid-list / per-page) */
.wf-archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--wf-section-bg);
  border: 1px solid var(--wf-border);
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.wf-archive-toolbar__view {
  display: flex;
  gap: 4px;
}

.wf-view-btn {
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--wf-transition);
  color: var(--wf-mid-gray);
  font-size: 14px;
}

.wf-view-btn.active,
.wf-view-btn:hover {
  background: var(--wf-pink);
  border-color: var(--wf-pink);
  color: var(--wf-white);
}

.wf-archive-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.wf-archive-toolbar__sort select {
  border: 1px solid var(--wf-border);
  padding: 4px 8px;
  font-family: var(--wf-font);
  font-size: 13px;
  color: var(--wf-body-text);
  background: var(--wf-white);
}

.wf-archive-toolbar__sort .wf-sort-dir {
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--wf-body-text);
  font-size: 12px;
}

/* Product grid — archive */
.wf-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */
.wf-single-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 20px 0;
  align-items: start;
}

/* Gallery */
.wf-product-gallery {
  position: relative;
}

.wf-product-gallery__main {
  border: 1px solid var(--wf-border);
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
}

.wf-product-gallery__main img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.wf-product-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--wf-border);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--wf-mid-gray);
  transition: var(--wf-transition);
}

.wf-product-gallery__nav:hover {
  background: var(--wf-pink);
  color: var(--wf-white);
  border-color: var(--wf-pink);
}

.wf-product-gallery__nav--prev { left: 8px; }
.wf-product-gallery__nav--next { right: 8px; }

.wf-product-gallery__thumbs {
  display: flex;
  gap: 8px;
  align-items: center;
}

.wf-product-gallery__thumb-nav {
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  width: 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: var(--wf-mid-gray);
  flex-shrink: 0;
  transition: var(--wf-transition);
}

.wf-product-gallery__thumb-nav:hover {
  background: var(--wf-pink);
  color: var(--wf-white);
  border-color: var(--wf-pink);
}

.wf-product-gallery__thumb-list {
  display: flex;
  gap: 6px;
  overflow: hidden;
  flex: 1;
}

.wf-product-gallery__thumb {
  width: 60px;
  height: 60px;
  border: 2px solid var(--wf-border);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: var(--wf-transition);
}

.wf-product-gallery__thumb img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.wf-product-gallery__thumb.active,
.wf-product-gallery__thumb:hover {
  border-color: var(--wf-pink);
}

/* Product details (right column) */
.wf-product-details h1.product_title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.wf-product-details .price {
  font-size: 22px;
  font-weight: 700;
  color: var(--wf-pink);
  margin-bottom: 10px;
  display: block;
}

.wf-product-details .stock {
  font-size: 13px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wf-product-details .in-stock {
  color: #2e8b57;
}

.wf-product-details .in-stock::before {
  content: '\2713';
  font-weight: 700;
}

.wf-product-details .sku_wrapper {
  font-size: 12px;
  color: var(--wf-mid-gray);
  margin-bottom: 12px;
}

.wf-product-details .woocommerce-product-details__short-description {
  font-size: 13px;
  color: var(--wf-body-text);
  line-height: 1.6;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wf-border);
}

/* Restore bullet/number lists inside product descriptions and tab content
   (global reset at top of file strips list-style from all ul/ol) */
.woocommerce-product-details__short-description ul,
.woocommerce-Tabs-panel--description ul,
.woocommerce-Tabs-panel ul {
  list-style: disc !important;
  padding-left: 1.5em !important;
  margin: 0.5em 0 1em !important;
}
.woocommerce-product-details__short-description ol,
.woocommerce-Tabs-panel--description ol,
.woocommerce-Tabs-panel ol {
  list-style: decimal !important;
  padding-left: 1.5em !important;
  margin: 0.5em 0 1em !important;
}
.woocommerce-product-details__short-description li,
.woocommerce-Tabs-panel--description li,
.woocommerce-Tabs-panel li {
  margin-bottom: 4px;
}

/* Size / variation radio buttons */
.wf-product-details .variations .label label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
}

.wf-product-details .wf-size-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.wf-product-details .wf-size-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 5px 0;
}

.wf-product-details .wf-size-options input[type="radio"] {
  accent-color: var(--wf-pink);
}

/* Quantity + ATC */
.wf-product-details .quantity-atc {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.wf-qty-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wf-qty-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--wf-border);
}

.wf-qty-wrap input[type="number"] {
  width: 50px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--wf-border);
  border-right: 1px solid var(--wf-border);
  padding: 6px 4px;
  font-family: var(--wf-font);
  font-size: 14px;
  -moz-appearance: textfield;
}

.wf-qty-wrap input[type="number"]::-webkit-inner-spin-button,
.wf-qty-wrap input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.wf-qty-btn {
  background: var(--wf-section-bg);
  border: none;
  width: 30px;
  height: 34px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wf-mid-gray);
  transition: var(--wf-transition);
}

.wf-qty-btn:hover {
  background: var(--wf-pink);
  color: var(--wf-white);
}

.single_add_to_cart_button,
.wf-atc-btn {
  background: var(--wf-pink);
  color: var(--wf-white) !important;
  border: none;
  padding: 10px 24px;
  font-family: var(--wf-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--wf-transition);
  border-radius: 2px;
}

.single_add_to_cart_button:hover,
.wf-atc-btn:hover {
  background: var(--wf-red);
}

/* Product tabs */
.wf-product-tabs {
  margin-top: 30px;
  border-top: 2px solid var(--wf-border);
}

.wf-product-tabs__nav {
  display: flex;
  gap: 0;
  margin-bottom: 0;
}

.wf-product-tabs__tab {
  background: var(--wf-section-bg);
  border: 1px solid var(--wf-border);
  border-bottom: none;
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--wf-mid-gray);
  transition: var(--wf-transition);
  margin-right: 4px;
}

.wf-product-tabs__tab.active,
.wf-product-tabs__tab:hover {
  background: var(--wf-white);
  color: var(--wf-dark);
  border-color: var(--wf-border);
}

.wf-product-tabs__content {
  border: 1px solid var(--wf-border);
  padding: 20px;
  font-size: 13px;
  line-height: 1.7;
}

/* ============================================================
   WooCommerce OVERRIDES — global
   ============================================================ */

/* Storefront parent overrides */
.storefront-primary-navigation,
.site-header-cart,
.storefront-handheld-footer-bar {
  display: none !important;
}

/* Storefront sets min-height: 100vh on #page which creates dead space
   because #content is a sibling of #page, not a child */
#page.site {
  min-height: 0 !important;
  display: block !important;
}

/* Remove Storefront's col-full padding that adds extra whitespace */
#content .col-full {
  padding: 0 !important;
  max-width: none !important;
}

/* WC notices */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--wf-pink) !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--wf-pink) !important;
}

/* WC buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--wf-pink);
  color: var(--wf-white);
  font-family: var(--wf-font);
  font-weight: 700;
  border-radius: 2px;
  transition: var(--wf-transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--wf-red);
  color: var(--wf-white);
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-color: var(--wf-border);
  color: var(--wf-body-text);
}

.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--wf-pink);
  color: var(--wf-white);
  border-color: var(--wf-pink);
}

/* ============================================================
   CHECKOUT — 3-COLUMN LAYOUT
   ============================================================ */
.wf-checkout-page {
  padding: 20px 0 40px;
}

.wf-checkout-page h1 {
  font-size: 20px;
  margin-bottom: 20px;
}

.wf-checkout-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  border: 0;
}

.wf-checkout-col {
  border-right: 1px solid var(--wf-border);
  display: flex;
  flex-direction: column;
}


/* Column header */
.wf-checkout-col__header {
  background: #1a2340;
  color: var(--wf-white);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wf-checkout-col__step {
  background: var(--wf-pink);
  color: var(--wf-white);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.wf-checkout-col__icon {
  font-size: 18px;
  opacity: 0.85;
}

.wf-checkout-col__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.wf-checkout-col__subtitle {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.75;
}

/* Column body */
.wf-checkout-col__body {
  padding: 16px;
  flex: 1;
  background: var(--wf-white);
}

/* Checkout fields */
.wf-checkout-col__body .form-row {
  margin-bottom: 12px;
}

.wf-checkout-col__body label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--wf-mid-gray);
  margin-bottom: 4px;
}

.wf-checkout-col__body label .required {
  color: var(--wf-pink);
  margin-left: 2px;
}

.wf-checkout-col__body input[type="text"],
.wf-checkout-col__body input[type="email"],
.wf-checkout-col__body input[type="tel"],
.wf-checkout-col__body input[type="number"],
.wf-checkout-col__body select,
.wf-checkout-col__body textarea {
  width: 100%;
  border: 1px solid var(--wf-border);
  padding: 8px 10px;
  font-family: var(--wf-font);
  font-size: 13px;
  color: var(--wf-body-text);
  background: var(--wf-white);
  transition: var(--wf-transition);
  border-radius: 2px;
}

.wf-checkout-col__body input:focus,
.wf-checkout-col__body select:focus,
.wf-checkout-col__body textarea:focus {
  border-color: var(--wf-pink);
  outline: none;
  box-shadow: 0 0 0 2px rgba(240,89,120,0.12);
}

.wf-checkout-col__body textarea {
  min-height: 80px;
  resize: vertical;
}

/* Shipping method radios */
.wf-shipping-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.wf-shipping-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--wf-border);
  cursor: pointer;
  transition: var(--wf-transition);
  background: var(--wf-white);
}

.wf-shipping-method:hover,
.wf-shipping-method.selected {
  border-color: var(--wf-pink);
  background: #fff5f7;
}

.wf-shipping-method input[type="radio"] {
  accent-color: var(--wf-pink);
  flex-shrink: 0;
}

.wf-shipping-method__icon {
  font-size: 18px;
  color: var(--wf-pink);
}

.wf-shipping-method__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--wf-dark);
}

/* Checkout order summary + submit */
.wf-checkout-bottom {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: start;
}

.wf-order-summary {
  border: 1px solid var(--wf-border);
  padding: 16px;
}

.wf-order-summary h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--wf-pink);
}

.wf-checkout-submit {
  text-align: right;
}

#place_order,
.wf-place-order-btn {
  background: var(--wf-red) !important;
  color: var(--wf-white) !important;
  border: none;
  padding: 14px 32px;
  font-family: var(--wf-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--wf-transition);
  border-radius: 2px;
  width: 100%;
}

#place_order:hover,
.wf-place-order-btn:hover {
  background: #8a0d24 !important;
}

/* Create account checkbox */
.wf-create-account {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--wf-border);
  font-size: 12px;
  color: var(--wf-body-text);
}

.wf-create-account input[type="checkbox"] {
  accent-color: var(--wf-pink);
  margin-top: 1px;
  flex-shrink: 0;
}

/* ============================================================
   SCROLL TO TOP BUTTON
   ============================================================ */
.wf-scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--wf-pink);
  color: var(--wf-white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: var(--wf-transition);
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 999;
}

.wf-scroll-top.visible {
  opacity: 1;
  visibility: visible;
}

.wf-scroll-top:hover {
  background: var(--wf-red);
}

/* ============================================================
   404 PAGE
   ============================================================ */

.wf-404 {
  padding: 40px 20px 60px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Hero */
.wf-404__hero {
  text-align: center;
  padding: 40px 20px 36px;
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
}

.wf-404__code {
  font-size: 100px;
  font-weight: 900;
  line-height: 1;
  color: var(--wf-red);
  opacity: .15;
  margin-bottom: -10px;
}

.wf-404__title {
  font-size: 26px;
  font-weight: 700;
  color: var(--wf-dark);
  margin: 0 0 12px;
}

.wf-404__sub {
  font-size: 15px;
  color: #666;
  max-width: 560px;
  margin: 0 auto 24px;
  line-height: 1.7;
}

/* Search bar */
.wf-404__search {
  display: flex;
  max-width: 460px;
  margin: 0 auto;
  border: 1px solid var(--wf-border);
  border-radius: 3px;
  overflow: hidden;
}

.wf-404__search input[type="search"] {
  flex: 1;
  border: none;
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

.wf-404__search button {
  background: var(--wf-red);
  color: #fff;
  border: none;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}

.wf-404__search button:hover { background: var(--wf-dark-red, #6e0a1c); }

/* Section headings */
.wf-404__section {
  margin-bottom: 44px;
}

.wf-404__section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--wf-dark);
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--wf-red);
  display: inline-block;
}

/* Categories pill list */
.wf-404__cats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wf-404__cats li a {
  display: inline-block;
  padding: 7px 16px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  font-size: 14px;
  color: var(--wf-dark);
  text-decoration: none;
  transition: all .2s;
}

.wf-404__cats li a:hover {
  background: var(--wf-red);
  border-color: var(--wf-red);
  color: #fff;
}

.wf-404__cats-count {
  color: #999;
  font-size: 12px;
  margin-left: 2px;
}

.wf-404__cats li a:hover .wf-404__cats-count { color: rgba(255,255,255,.75); }

/* Popular products grid */
.wf-404__products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) { .wf-404__products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .wf-404__products { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   TRUST STRIP (Fix #3) — sitewide bar below navbar
   ============================================================ */
.wf-trust-strip {
  background: var(--wf-dark);
  color: var(--wf-white);
  padding: 8px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.wf-trust-strip__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wf-trust-strip__item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.wf-trust-strip__item svg {
  flex-shrink: 0;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .wf-trust-strip__inner {
    justify-content: center;
    gap: 10px 20px;
  }
  .wf-trust-strip__item:last-child {
    display: none; /* hide 4th item on small screens to prevent wrapping */
  }
}

@media (max-width: 480px) {
  .wf-trust-strip {
    font-size: 11px;
  }
  .wf-trust-strip__inner {
    gap: 6px 14px;
  }
}

/* ============================================================
   HERO CTA BUTTONS (Fix #4)
   ============================================================ */
.wf-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* Overlay: absolute inside .wf-hero-section__inner, over the photo */
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: none; /* gradient lives on .wf-hero-section__photo::after */
  margin-top: 0;
  padding: 0;
}

.wf-hero-ctas .wf-btn {
  display: inline-block;
  padding: 11px 24px;
  font-family: var(--wf-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--wf-transition);
  border: 2px solid transparent;
  white-space: nowrap;
}

.wf-hero-ctas .wf-btn--primary {
  background: var(--wf-pink);
  color: var(--wf-white);
  border-color: var(--wf-pink);
}

.wf-hero-ctas .wf-btn--primary:hover,
.wf-hero-ctas .wf-btn--primary:focus {
  background: var(--wf-red);
  border-color: var(--wf-red);
  color: var(--wf-white);
}

.wf-hero-ctas .wf-btn--secondary {
  background: transparent;
  color: var(--wf-dark) !important;
  border-color: var(--wf-dark);
}

.wf-hero-ctas .wf-btn--secondary:hover,
.wf-hero-ctas .wf-btn--secondary:focus {
  background: var(--wf-dark);
  color: var(--wf-white) !important;
}

@media (max-width: 600px) {
  .wf-hero-ctas {
    flex-direction: column;
    gap: 8px;
  }
  .wf-hero-ctas .wf-btn {
    text-align: center;
    width: 100%;
  }
}

/* ============================================================
   MONTHLY GIFT PLAN BANNER (Bonus)
   ============================================================ */
.wf-subscription-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:
    linear-gradient(to right, #2a5c45 38%, rgba(42,92,69,0.82) 55%, rgba(42,92,69,0.1) 75%, transparent 88%),
    url('https://weeklyflowers.com/wp-content/uploads/2026/05/monthly-hero-1.jpg') center right / cover no-repeat;
  background-color: #2a5c45;
  border: none;
  border-radius: 4px;
  padding: 24px 32px;
  margin: 24px 0;
  gap: 20px;
  min-height: 110px;
  overflow: hidden;
}

.wf-subscription-banner__content {
  flex: 1;
}

.wf-subscription-banner__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}

.wf-subscription-banner__headline {
  font-size: 22px;
  font-weight: 700;
  color: var(--wf-white);
  margin: 0 0 8px;
  line-height: 1.2;
}

.wf-subscription-banner__sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  line-height: 1.5;
}

.wf-subscription-banner__cta {
  flex-shrink: 0;
}

.wf-subscription-banner__btn {
  display: inline-block;
  background: var(--wf-white);
  color: var(--wf-green) !important;
  border: 2px solid var(--wf-white);
  padding: 12px 28px;
  font-family: var(--wf-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: var(--wf-transition);
  white-space: nowrap;
}

.wf-subscription-banner__btn:hover,
.wf-subscription-banner__btn:focus {
  background: #1a3d2b;
  border-color: #1a3d2b;
  color: var(--wf-white) !important;
}

@media (max-width: 640px) {
  .wf-subscription-banner {
    flex-direction: column;
    text-align: center;
    padding: 20px 20px;
    background: var(--wf-green);
  }
  .wf-subscription-banner__btn {
    width: 100%;
    text-align: center;
  }
}

/* Quick-link buttons */
.wf-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.wf-btn {
  display: inline-block;
  padding: 11px 24px;
  background: var(--wf-red);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  border-radius: 3px;
  text-decoration: none !important;
  transition: background .2s;
}

.wf-btn:hover { background: var(--wf-dark-red, #6e0a1c); }

.wf-btn--outline {
  background: transparent;
  color: var(--wf-red) !important;
  border: 2px solid var(--wf-red);
}

.wf-btn--outline:hover {
  background: var(--wf-red);
  color: #fff !important;
}

/* ============================================================
   LOCAL DELIVERY LANDING PAGES
   ============================================================ */

/* Hero */
.wf-local-hero {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-left: 5px solid var(--wf-red);
  border-radius: 4px;
  padding: 36px 40px;
  margin-bottom: 40px;
}
.wf-local-hero h1 {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--wf-dark);
}
.wf-local-hero p {
  font-size: 15px;
  line-height: 1.75;
  max-width: 720px;
  margin: 0 0 24px;
  color: #555;
}
.wf-local-hero .wf-btn {
  font-size: 15px;
  padding: 12px 28px;
}
.wf-local-hero .wf-btn:hover {
  background: #a0102a;
}

/* Occasions grid */
.wf-local-occasions {
  margin-bottom: 40px;
}
.wf-local-occasions > h2,
.wf-local-areas > h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--wf-dark);
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--wf-red);
  display: inline-block;
}
.wf-local-occasions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) { .wf-local-occasions__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wf-local-occasions__grid { grid-template-columns: 1fr; } }

.wf-local-occasion {
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  padding: 18px 20px;
  transition: border-color .2s, box-shadow .2s;
}
.wf-local-occasion:hover {
  border-color: var(--wf-pink);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.wf-local-occasion h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--wf-red);
  margin: 0 0 8px;
}
.wf-local-occasion p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* Delivery areas */
.wf-local-areas {
  margin-bottom: 40px;
}
.wf-local-areas__list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wf-local-areas__list li {
  background: #f0f0f0;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 14px;
  color: #444;
}
.wf-local-areas__note {
  font-size: 13px;
  color: #888;
  margin: 8px 0 0;
}

/* Trust / CTA block */
.wf-local-trust {
  background: #fff8f9;
  border: 1px solid #f0dde1;
  border-radius: 4px;
  padding: 30px 28px;
  text-align: center;
}
.wf-local-trust__stars {
  font-size: 22px;
  color: #f5a623;
  margin-bottom: 8px;
  letter-spacing: 2px;
}
.wf-local-trust__headline {
  font-size: 18px;
  font-weight: 700;
  color: var(--wf-dark);
  margin: 0 0 10px;
}
.wf-local-trust p {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  max-width: 680px;
  margin: 0 auto 20px;
}
.wf-local-trust__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   FULL WIDTH PAGE TEMPLATE
   ============================================================ */

.wf-fullwidth-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 20px 60px;
}

.wf-fullwidth-page .entry-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--wf-dark);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--wf-red);
}

.wf-fullwidth-page .entry-content h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--wf-dark);
  margin: 32px 0 12px;
}

.wf-fullwidth-page .entry-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--wf-dark);
  margin: 20px 0 8px;
}

.wf-fullwidth-page .entry-content p,
.wf-fullwidth-page .entry-content li {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
}

.wf-fullwidth-page .entry-content ul,
.wf-fullwidth-page .entry-content ol {
  padding-left: 24px;
  margin: 12px 0;
}

.wf-fullwidth-page .entry-content address {
  font-style: normal;
  line-height: 1.8;
  color: #444;
  margin: 12px 0;
}

.wf-fullwidth-page .entry-content hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 32px 0;
}

/* ============================================================
   STATIC PAGE CONTENT (About, Contact, Delivery, Privacy)
   ============================================================ */

/* Hours / policy tables */
.wf-hours-table,
.wf-policy-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}
.wf-hours-table th,
.wf-hours-table td,
.wf-policy-table th,
.wf-policy-table td {
  padding: 9px 14px;
  border: 1px solid #e0e0e0;
  text-align: left;
  vertical-align: top;
}
.wf-hours-table thead th,
.wf-policy-table thead th {
  background: var(--wf-red);
  color: #fff;
  font-weight: 600;
}
.wf-hours-table tbody tr:nth-child(even),
.wf-policy-table tbody tr:nth-child(even) {
  background: #fafafa;
}

/* Contact info list */
.wf-contact-list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}
.wf-contact-list li {
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
}
.wf-contact-list li:last-child { border-bottom: none; }
.wf-contact-list a { color: var(--wf-red); }

/* Map embed */
.wf-map-embed {
  margin: 24px 0;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
}
.wf-map-embed iframe { display: block; }

/* Contact / hours side-by-side on wide screens */
@media (min-width: 768px) {
  .wf-contact-block,
  .wf-hours-block {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    margin-right: 2%;
  }
  .wf-hours-block { margin-right: 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .wf-product-grid,
  .wf-product-carousel {
    grid-template-columns: repeat(3, 1fr);
  }

  .wf-checkout-columns {
    grid-template-columns: 1fr;
  }

  .wf-checkout-col {
    border-right: none;
    border-bottom: 1px solid var(--wf-border);
  }


  .wf-single-product {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .wf-header__inner {
    flex-direction: row;
  }

  .wf-header__banner {
    display: none;
  }

  .wf-content-wrapper {
    flex-direction: column;
    padding: 0 12px;
  }

  .wf-sidebar-cats {
    width: 100%;
    display: none; /* toggled by JS */
  }

  .wf-sidebar-cats.open {
    display: block;
  }

  .wf-main-content {
    padding-left: 0;
  }

  .wf-product-grid,
  .wf-product-carousel {
    grid-template-columns: repeat(2, 1fr);
  }

  .wf-hero-section {
    grid-template-columns: 1fr;
  }

  .wf-reviews-panel {
    width: 100%;
  }

  .wf-hero-section__inner {
    flex-direction: column;
  }

  .wf-hero-section__photo {
    width: 100%;
  }

  .wf-category-banners {
    grid-template-columns: 1fr;
  }

  .wf-footer__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .wf-utility-bar {
    display: none;
  }

  .wf-navbar__categories-btn {
    min-width: auto;
    padding: 0 14px;
  }
}

@media (max-width: 480px) {
  .wf-product-grid,
  .wf-product-carousel {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .wf-product-card {
    padding: 2px !important;
  }

  .wf-checkout-bottom {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   WooCommerce ARCHIVE / SHOP / CATEGORY PAGES
   ============================================================ */

/* Kill Storefront's sidebar widget area on WC pages (belt + suspenders) */
.woocommerce .widget-area,
.woocommerce-page .widget-area,
.woocommerce #secondary,
.woocommerce-page #secondary {
  display: none !important;
}

/* Hide subcategory items WooCommerce injects into the product grid loop */
.woocommerce ul.products li.product-category {
  display: none !important;
}

/* Product loop grid — 3-column layout */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  float: none !important;
  clear: both !important;
}

/* Reset the li that WC wraps each card in */
.woocommerce ul.products li.wf-product-list-item {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  clear: none !important;
}

/* Archive breadcrumb */
.wf-breadcrumb {
  font-size: 13px;
  color: var(--wf-mid-gray);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.wf-breadcrumb a {
  color: var(--wf-pink);
  text-decoration: none;
}

.wf-breadcrumb a:hover {
  text-decoration: underline;
}

.wf-breadcrumb .separator {
  color: var(--wf-mid-gray);
  font-size: 11px;
}

/* Archive page heading */
.woocommerce-products-header__title,
.woocommerce .woocommerce-loop-category__title,
.page-title,
.wf-archive-heading {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--wf-dark);
  letter-spacing: 0.5px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--wf-pink);
}

/* Results count + sort toolbar */
.woocommerce-result-count {
  font-size: 13px;
  color: var(--wf-mid-gray);
  margin: 0;
}

.woocommerce-ordering select {
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--wf-border);
  border-radius: 2px;
  background: var(--wf-white);
  color: var(--wf-body-text);
  cursor: pointer;
}

.woocommerce .woocommerce-ordering {
  margin: 0 0 16px;
  float: right;
}

.woocommerce .woocommerce-result-count {
  margin: 0 0 16px;
  float: left;
  line-height: 2.4;
}

/* Category description block */
.term-description {
  font-size: 13px;
  color: var(--wf-body-text);
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--wf-section-bg);
  border: 1px solid var(--wf-border);
  border-radius: 2px;
}

/* ============================================================
   WooCommerce SINGLE PRODUCT PAGE
   ============================================================ */

/* Overall product summary region */
.woocommerce div.product {
  padding: 0;
}

/* 2-column: image left, summary right */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images {
  width: 45% !important;
  float: left !important;
  padding-right: 24px !important;
}

.woocommerce div.product div.summary {
  width: 52% !important;
  float: right !important;
}

.woocommerce div.product::after {
  content: '';
  display: table;
  clear: both;
}

/* Product title */
.woocommerce div.product .product_title {
  font-size: 24px;
  font-weight: 700;
  color: var(--wf-dark);
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 22px;
  font-weight: 700;
  color: var(--wf-pink) !important;
  margin-bottom: 14px;
}

/* Add to cart button — keep brand style */
.woocommerce div.product .single_add_to_cart_button {
  background: var(--wf-pink) !important;
  color: var(--wf-white) !important;
  font-family: var(--wf-font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  border-radius: 2px !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--wf-transition) !important;
}

.woocommerce div.product .single_add_to_cart_button:hover {
  background: var(--wf-red) !important;
}

/* Product meta (categories, tags) */
.woocommerce div.product .product_meta {
  font-size: 12px;
  color: var(--wf-mid-gray);
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--wf-border);
}

.woocommerce div.product .product_meta a {
  color: var(--wf-pink);
}

/* ── Tabs (Details / Reviews) ── */
/* Override WC/Storefront float-based layout: tabs on top, panel below */
.woocommerce div.product .woocommerce-tabs {
  clear: both;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  float: none !important;
  width: 100% !important;
  overflow: visible !important;
  border-bottom: 2px solid var(--wf-pink);
  padding: 0;
  margin: 0 0 0 0;
  list-style: none;
  display: flex;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: 1px solid var(--wf-border);
  border-bottom: none;
  background: var(--wf-section-bg);
  margin-right: 4px;
  border-radius: 2px 2px 0 0;
}

/* Active tab: pink background + white text (matching original) */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--wf-pink) !important;
  border-color: var(--wf-pink) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: 13px;
  font-weight: 700;
  color: var(--wf-body-text);
  padding: 8px 20px !important;
  margin: 0 10px 0 0;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
  right: 12px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--wf-white) !important;
}

/* Panel: full-width block BELOW the tab row */
.woocommerce div.product .woocommerce-tabs .panel {
  float: none !important;
  margin: 0 !important;
  width: 100% !important;
  border: 1px solid var(--wf-border);
  border-top: none;
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.7;
  box-sizing: border-box;
}

/* ── SKU display ── */
.woocommerce div.product .product_meta .sku_wrapper {
  display: block;
  font-size: 12px;
  color: var(--wf-mid-gray);
  margin-bottom: 4px;
}

.woocommerce div.product .product_meta .sku_wrapper .sku {
  font-weight: 600;
  color: var(--wf-dark);
}

/* Related products */
.related.products h2,
.upsells.products h2 {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--wf-dark);
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--wf-pink);
  padding-bottom: 8px;
}

.related.products ul.products,
.upsells.products ul.products {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* ============================================================
   RESPONSIVE — archive & single product
   ============================================================ */

@media (max-width: 900px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product div.images {
    width: 100% !important;
    float: none !important;
    padding-right: 0 !important;
    margin-bottom: 20px !important;
  }

  .woocommerce div.product div.summary {
    width: 100% !important;
    float: none !important;
  }
}

/* ============================================================
   LAYOUT FIXES — 2026-05
   ============================================================ */

/* ── #7  Header: full-width banner, constrained logo+cart ── */
/* Storefront adds ~60px margin-bottom to site-header — kill it */
/* Storefront's site-header must NOT clip the categories dropdown */
.site-header { margin-bottom: 0 !important; padding: 0 !important; overflow: visible !important; }

.wf-header .wf-container {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

/* ── #7  Search bar: visible border ── */
.wf-navbar__search input[type="search"],
.wf-navbar__search input[type="text"] {
  border: 1px solid var(--wf-border) !important;
}

/* ── #7  Search bar: give the input a proper visible border ── */
.wf-navbar__search input[type="search"],
.wf-navbar__search input[type="text"] {
  border: 1px solid var(--wf-border) !important;
}

/* ── #8  Category archive heading — show it, styled to match original ── */
.woocommerce-products-header {
  margin-bottom: 12px;
}
.woocommerce-products-header__title.page-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--wf-dark) !important;
  letter-spacing: 0.5px !important;
  margin: 0 0 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--wf-pink) !important;
}

/* ── #9  Virtual tour button: flex-push to bottom of sidebar ── */
.wf-sidebar-cats {
  display: flex !important;
  flex-direction: column !important;
  min-height: 420px;
}
.wf-sidebar-cats ul {
  flex: 1;
}
.wf-virtual-tour-btn {
  margin-top: auto;
  border-radius: 0 !important;
  flex-shrink: 0;
}

/* ── #10  Carousel: sliding animation via CSS transform ── */
.wf-carousel-section__body {
  overflow: hidden !important;
}
/* Switch carousel track from grid to flex so JS can slide it */
.wf-product-carousel {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  /* these only apply to grid; harmless on flex but prevent any grid bleed */
  grid-template-columns: none !important;
}
/* Card widths are now set dynamically by JS; reset any grid-based sizing */
.wf-product-carousel .wf-product-card {
  flex-shrink: 0;
}
/* Responsive overrides from the earlier grid rules no longer apply to flex,
   but keep them from fighting the flex display */
@media (max-width: 1024px) {
  .wf-product-carousel { grid-template-columns: none !important; }
}
@media (max-width: 768px) {
  .wf-product-carousel { grid-template-columns: none !important; }
}
@media (max-width: 480px) {
  .wf-product-carousel { grid-template-columns: none !important; }
}

/* ── Mobile carousel: 2×2 page blocks ───────────────────── */
/* JS wraps every 4 cards in .wf-carousel-mobile-page on mobile.
   Each page is a 2-column grid; the carousel slides through pages. */
.wf-carousel-mobile-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  flex-shrink: 0;
  box-sizing: border-box;
}
.wf-carousel-mobile-page > .wf-product-card {
  min-width: 0;
  overflow: hidden;
}

/* ── #11  Single product: CSS Grid 2-column (gallery left, summary right) ── */
/* Replace floats with grid so it's bulletproof regardless of Storefront wrappers */
.woocommerce div.product {
  display: grid !important;
  grid-template-columns: 45% 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 0 30px !important;
  align-items: start !important;
  overflow: visible !important;
}

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.images {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  float: none !important;
  padding-right: 0 !important;
  clear: none !important;
}

.woocommerce div.product div.summary {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  float: none !important;
  clear: none !important;
}

/* Tabs, related, upsells span both columns */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells.products,
.woocommerce div.product > .woocommerce-notices-wrapper {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  float: none !important;
  clear: both;
}

/* Ensure clearfix pseudo-element doesn't create an extra grid cell */
.woocommerce div.product::after {
  display: none !important;
}

/* Mobile: stack gallery above summary */
@media (max-width: 600px) {
  .woocommerce div.product {
    grid-template-columns: 1fr !important;
  }
  .woocommerce div.product .woocommerce-product-gallery,
  .woocommerce div.product div.images {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .woocommerce div.product div.summary {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
}

/* ── Cart page heading ── */
.woocommerce-cart .woocommerce h1,
.woocommerce-cart .woocommerce-cart-form__cart-item h2 {
  font-size: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 2px solid var(--wf-pink);
  padding-bottom: 8px;
  margin-bottom: 20px !important;
}

/* Cart table header row */
.woocommerce-cart table.cart thead th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--wf-mid-gray);
  background: var(--wf-section-bg);
  border-bottom: 2px solid var(--wf-border);
  padding: 10px 12px;
}

/* Cart product row */
.woocommerce-cart table.cart td {
  vertical-align: middle;
  padding: 12px;
  border-bottom: 1px solid var(--wf-border);
}

/* Cart thumbnail size override (Storefront default is 4em) */
.woocommerce-cart table.cart .product-thumbnail img,
table.cart .product-thumbnail img {
  max-width: 7em;
  width: 7em;
  height: auto;
}

/* Cart collaterals: trust badges left, totals right */
.woocommerce-cart .cart-collaterals {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* Trust badges */
.wf-cart-trust {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 8px;
}
.wf-trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wf-trust-item__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: #e8f5ee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wf-trust-item__icon svg {
  width: 24px;
  height: 24px;
  stroke: #2d7a4f;
}
.wf-trust-item__text strong {
  display: block;
  font-family: var(--wf-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--wf-heading);
  margin-bottom: 2px;
}
.wf-trust-item__text p {
  font-family: var(--wf-font);
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.45;
}

/* ── Cart totals box ── */
.woocommerce-cart .cart-collaterals .cart_totals {
  flex: 0 0 500px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  box-sizing: border-box;
}
/* Force uniform grey: kill any per-row backgrounds Storefront sets */
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-cart .cart_totals table.shop_table tbody,
.woocommerce-cart .cart_totals table.shop_table tr,
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  background: transparent !important;
}

.woocommerce-cart .cart_totals h2 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--wf-heading);
  border-bottom: 2px solid var(--wf-pink);
  padding-bottom: 12px;
  margin-bottom: 0 !important;
}

/* Cart totals table */
.woocommerce-cart .cart_totals table.shop_table {
  width: 100% !important;
  border-collapse: collapse;
  table-layout: fixed;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  padding: 14px 0 !important;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  color: #444;
}
.woocommerce-cart .cart_totals table.shop_table th {
  text-align: left !important;
  font-weight: 500;
  width: 40%;
  padding-right: 12px !important;
}
.woocommerce-cart .cart_totals table.shop_table td {
  text-align: left !important;
  width: 60%;
}
/* Price columns: right-align */
.woocommerce-cart .cart_totals table.shop_table tr.cart-subtotal td,
.woocommerce-cart .cart_totals table.shop_table tr.tax-rate td,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  text-align: right !important;
}
/* Total row: larger, bold, pink price */
.woocommerce-cart .cart_totals table.shop_table tr.order-total th,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
  border-bottom: none;
  padding-top: 16px !important;
  padding-bottom: 20px !important;
  font-size: 16px;
  font-weight: 700;
  color: var(--wf-heading);
}
.woocommerce-cart .cart_totals table.shop_table tr.order-total td,
.woocommerce-cart .cart_totals table.shop_table tr.order-total td .woocommerce-Price-amount {
  color: var(--wf-pink) !important;
  font-size: 20px;
}

/* Shipping row: stack vertically */
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals th,
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
  display: block !important;
  width: 100% !important;
}
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals th {
  padding-bottom: 4px !important;
  border-bottom: none !important;
}
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
  padding-top: 0 !important;
}
.woocommerce-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td::before {
  display: none !important;
}
.woocommerce-cart .cart_totals ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-cart .cart_totals ul#shipping_method li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 5px;
}
.woocommerce-cart .cart_totals ul#shipping_method li:last-child { margin-bottom: 0; }
.woocommerce-cart .cart_totals ul#shipping_method li input[type="radio"] {
  flex-shrink: 0;
  margin: 0;
}
.woocommerce-cart .cart_totals p.woocommerce-shipping-destination {
  font-size: 12px;
  color: #888;
  margin: 6px 0 0;
  text-align: left !important;
  line-height: 1.4;
}

/* Proceed to checkout button */
.woocommerce-cart .checkout-button {
  background: var(--wf-pink) !important;
  color: #fff !important;
  font-family: var(--wf-font) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 15px 24px !important;
  border-radius: 6px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: background .18s !important;
  border: none !important;
}
.woocommerce-cart .checkout-button:hover {
  background: #d4496a !important;
  color: #fff !important;
}
.wf-lock-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.wf-checkout-trust {
  text-align: center;
  font-size: 13px;
  color: #888;
  margin: 12px 0 0;
  line-height: 1.5;
}
.wf-checkout-stars {
  color: #f5a623;
  letter-spacing: 2px;
  margin-right: 4px;
}

/* ── #13 + #14  Reset all structural containers on WC pages ── */
/* Storefront's .right-sidebar/.left-sidebar/.col-full CSS constrains #primary
   width and adds floats/margins. Wipe them all out so our .wf-content-wrapper
   controls the layout. Cart/checkout get their own padding inside the wrapper. */

/* All WooCommerce pages: full-width #primary, no floats */
.woocommerce #primary,
.woocommerce-page #primary,
.woocommerce #secondary,
.woocommerce-page #secondary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: both !important;
}

/* Reset Storefront's site-content / #content padding — scoped to the content
   region only so the footer col-full is not affected */
.woocommerce-page #content .col-full,
.woocommerce-page .site-content,
.woocommerce-page #content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Cart, checkout, account pages use shortcodes — woocommerce_before_main_content
   never fires so wf_wc_content_open() doesn't run. Apply container width here. */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-account .site-main {
  max-width: var(--wf-max-width) !important;
  margin: 20px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* ── #15  Hide Storefront prev/next product pagination ── */
/* Storefront renders .storefront-product-pagination with floating prev/next
   product thumbnails on the edges of single product pages. We don't want these. */
.storefront-product-pagination {
  display: none !important;
}

/* ── #16  Hide Storefront sticky add-to-cart bar ── */
.storefront-sticky-add-to-cart {
  display: none !important;
}

/* ── #17  Category archive: thumbnail + description ── */
.wf-category-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.wf-category-intro__thumb {
  flex-shrink: 0;
  width: 110px;
}

.wf-category-intro__thumb img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--wf-border);
}

.wf-category-intro__text {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: var(--wf-body-text);
}

.wf-category-intro__text p {
  margin: 0 0 8px;
}

.wf-category-intro__text p:last-child {
  margin-bottom: 0;
}

/* ── #18  Kill the ::before pseudo-element that WooCommerce/Storefront injects
         into ul.products — it is one column wide and pushes all products right ── */
ul.products::before,
ul.products::after {
  display: none !important;
  content: none !important;
}

.storefront-sorting {
  margin-bottom: 0 !important;
}

.site-header .site-logo-anchor img,
.site-header .site-logo-link img,
.site-header .custom-logo-link img {
  max-width: none !important;
}

/* ============================================================
   MOBILE / RESPONSIVE — comprehensive pass 2026-05
   ============================================================ */

/* ── 0. Global box-sizing + container padding on mobile ──── */
@media (max-width: 768px) {
  *, *::before, *::after { box-sizing: border-box; }

  .wf-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ── 1. Topbar: hide on phones (save vertical space) ──────── */
@media (max-width: 600px) {
  .wf-topbar { display: none; }
}

/* ── 2. Header ───────────────────────────────────────────── */

/* Cart badge — hidden on desktop */
.wf-cart-badge {
  display: none;
  position: absolute;
  top: -7px;
  right: -8px;
  background: var(--wf-pink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 3px;
}

/* Icon wrapper must be relative so badge positions against it */
.cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 768px) {
  /* Constrain logo width — override the max-width:none rule at sheet bottom */
  .wf-header__logo img,
  .wf-header__logo .custom-logo,
  .site-header .site-logo-anchor img,
  .site-header .site-logo-link img,
  .site-header .custom-logo-link img {
    max-width: 160px !important;
    height: auto !important;
  }

  /* Header inner: logo left, cart right, tighter padding */
  .wf-header {
    min-height: 64px;
  }
  .wf-header__inner {
    justify-content: space-between;
    padding: 8px 0;
    min-height: 64px;
  }

  /* Cart: hide text label, show icon + badge */
  .wf-cart-text { display: none; }
  .wf-cart-badge { display: inline-flex; }

  /* Cart link: icon only — give it adequate tap target */
  .wf-header__cart a.cart-contents {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── 3. Navbar ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .wf-navbar__inner {
    gap: 8px;
    padding: 6px 0;
  }

  /* Search expands to fill remaining space */
  .wf-navbar__search {
    flex: 1;
    min-width: 0;
  }

  .wf-navbar__search form {
    display: flex;
    width: 100%;
  }


  .wf-navbar__search input[type="search"],
  .wf-navbar__search input[type="text"] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    padding: 8px 10px;
    height: 40px;
  }

  .wf-navbar__search button[type="submit"] {
    padding: 0 12px;
    min-width: 44px;
    height: 40px;
    font-size: 18px;
  }

  /* Categories button: compact on mobile */
  .wf-navbar__categories-btn {
    font-size: 11px;
    padding: 0 10px;
    letter-spacing: 0;
    white-space: nowrap;
    height: 40px;
    min-height: 40px;
  }

  /* Categories dropdown: use more of the screen width on mobile */
  .wf-categories-dropdown.open {
    width: calc(100vw - 28px) !important;
    min-width: 0 !important;
    max-width: 360px;
  }
}

/* ── 4. Sidebar on category/product pages ────────────────── */

/* Show a visible "Filter / Categories" toggle bar on mobile */
.wf-sidebar-cats__header {
  cursor: pointer;
}

@media (max-width: 768px) {
  /* Sidebar collapses by default (already in base CSS), but
     give the header bar a button-like appearance so users know to tap it */
  .wf-sidebar-cats__header {
    background: var(--wf-section-bg);
    border: 1px solid var(--wf-border);
    border-radius: 2px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    width: 100%;
  }

  /* Show collapsed sidebar header as a button even when sidebar is closed */
  .wf-sidebar-cats {
    display: block !important; /* override base hidden rule */
    width: 100%;
    margin-bottom: 12px;
  }

  /* The nav + virtual tour button inside: hide until open */
  .wf-sidebar-cats > ul,
  .wf-sidebar-cats > nav,
  .wf-virtual-tour-btn {
    display: none;
  }

  .wf-sidebar-cats.open > ul,
  .wf-sidebar-cats.open > nav,
  .wf-sidebar-cats.open .wf-virtual-tour-btn {
    display: block;
  }
}

/* ── 5. Product cards ─────────────────────────────────────── */
@media (max-width: 480px) {
  .wf-product-card {
    padding: 2px !important;
  }
  .wf-product-card__title {
    font-size: 12px;
    line-height: 1.3;
    margin-bottom: 6px;
  }
  .wf-product-card__price {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .wf-product-card__btn {
    width: 100%;
    text-align: center;
    padding: 8px;
    font-size: 11px;
    letter-spacing: 0;
    display: block;
  }
}

/* ── 6. Homepage sections ────────────────────────────────── */
@media (max-width: 768px) {
  .wf-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 12px;
  }

  .wf-section-header__title {
    font-size: 15px;
  }

  .wf-carousel-section {
    padding: 16px 0;
  }

  /* Carousel arrow buttons: larger tap target on mobile */
  .wf-carousel-prev,
  .wf-carousel-next {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  /* Hero section text */
  .wf-hero-section__text h2 {
    font-size: 18px;
  }
  .wf-hero-section__text p {
    font-size: 13px;
  }

  /* Review panel */
  .wf-review-card {
    padding: 14px;
  }
}

@media (max-width: 480px) {
  /* Category banners */
  .wf-category-banners {
    grid-template-columns: 1fr !important;
  }
}

/* ── 7. WooCommerce cart table — responsive ──────────────── */
@media (max-width: 640px) {
  /* Convert table to block layout */
  .woocommerce-cart table.cart,
  .woocommerce-cart table.cart tbody,
  .woocommerce-cart table.cart tfoot {
    display: block;
    width: 100% !important;
  }

  .woocommerce-cart table.cart thead {
    display: none !important;
  }

  .woocommerce-cart table.cart tr.cart_item {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 12px;
    row-gap: 4px;
    padding: 14px 0;
    border-bottom: 2px solid var(--wf-border) !important;
    position: relative;
  }

  /* Thumbnail spans rows 1–4 in column 1 */
  .woocommerce-cart table.cart td.product-thumbnail {
    grid-column: 1;
    grid-row: 1 / 5;
    border: none !important;
    padding: 0 !important;
    vertical-align: top;
  }

  .woocommerce-cart table.cart td.product-thumbnail img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
  }

  /* Name row */
  .woocommerce-cart table.cart td.product-name {
    grid-column: 2;
    grid-row: 1;
    border: none !important;
    padding: 0 24px 0 0 !important;
    font-size: 13px;
    font-weight: 700;
    text-align: left !important;
  }
  /* Hide Storefront's auto-generated "Product:" data-title prefix */
  .woocommerce-cart table.cart td.product-name::before {
    display: none !important;
  }
  /* Left-align and clean up the variation (Size: ...) */
  .woocommerce-cart table.cart td.product-name dl.variation {
    text-align: left !important;
    font-size: 12px;
    font-weight: 400;
    color: #666;
    margin: 3px 0 0;
  }
  .woocommerce-cart table.cart td.product-name dl.variation dt {
    display: inline;
    font-weight: 600;
  }
  .woocommerce-cart table.cart td.product-name dl.variation dd,
  .woocommerce-cart table.cart td.product-name dl.variation p {
    display: inline;
    margin: 0;
  }

  /* Price, qty, subtotal — flex row: label left, value right */
  .woocommerce-cart table.cart td.product-price,
  .woocommerce-cart table.cart td.product-quantity,
  .woocommerce-cart table.cart td.product-subtotal {
    grid-column: 2;
    border: none !important;
    padding: 3px 0 !important;
    font-size: 13px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  .woocommerce-cart table.cart td.product-price { grid-row: 2; }
  .woocommerce-cart table.cart td.product-quantity { grid-row: 3; }
  .woocommerce-cart table.cart td.product-subtotal {
    grid-row: 4;
    font-weight: 700;
    color: var(--wf-pink);
  }

  /* Column labels — flex items pushed left, values pushed right */
  .woocommerce-cart table.cart td.product-price::before    { content: 'Price'; font-weight: 600; font-size: 11px; color: var(--wf-mid-gray); text-transform: uppercase; letter-spacing: 0.4px; }
  .woocommerce-cart table.cart td.product-quantity::before { content: 'Qty';   font-weight: 600; font-size: 11px; color: var(--wf-mid-gray); text-transform: uppercase; letter-spacing: 0.4px; }
  .woocommerce-cart table.cart td.product-subtotal::before { content: 'Total'; font-weight: 600; font-size: 11px; color: var(--wf-mid-gray); text-transform: uppercase; letter-spacing: 0.4px; }

  /* Quantity input: smaller on mobile */
  .woocommerce-cart table.cart .qty {
    width: 56px !important;
    padding: 4px 6px !important;
    font-size: 14px !important;
  }

  /* Remove (×) button: absolute top-right */
  .woocommerce-cart table.cart td.product-remove {
    position: absolute;
    top: 14px;
    right: 0;
    grid-column: unset;
    grid-row: unset;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
  }

  .woocommerce-cart table.cart td.product-remove a {
    font-size: 20px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    display: block;
  }

  /* Actions row (coupon + update cart) */
  .woocommerce-cart table.cart tr.actions {
    display: block;
    padding: 12px 0;
    border-top: 2px solid var(--wf-border);
  }

  .woocommerce-cart table.cart tr.actions td {
    display: block;
    padding: 0 !important;
    border: none !important;
  }

  .woocommerce-cart table.cart .coupon {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .woocommerce-cart table.cart .coupon label {
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--wf-mid-gray);
  }

  .woocommerce-cart table.cart .coupon input[name="coupon_code"] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    padding: 8px 10px;
    height: 40px;
  }

  .woocommerce-cart table.cart .coupon button {
    height: 40px;
    padding: 0 16px;
    white-space: nowrap;
  }

  /* Update cart button */
  .woocommerce-cart table.cart button[name="update_cart"] {
    width: 100%;
    padding: 10px;
    font-size: 13px;
  }

  /* Cart collaterals: stack on mobile */
  .woocommerce-cart .cart-collaterals {
    flex-direction: column;
    margin-top: 20px;
    gap: 24px;
  }
  .wf-cart-trust {
    order: 2;
  }
  .woocommerce-cart .cart-collaterals .cart_totals {
    flex: 1 1 auto !important;
    width: 100% !important;
    order: 1;
  }

  /* Proceed to checkout: big tap target */
  .woocommerce-cart .checkout-button {
    padding: 14px !important;
    font-size: 15px !important;
  }
}

/* ── 8. WooCommerce checkout ─────────────────────────────── */
@media (max-width: 640px) {
  .woocommerce-checkout #payment {
    padding: 16px;
  }

  .woocommerce-checkout #payment .place-order .button {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
    min-height: 52px;
  }

  .woocommerce-checkout .woocommerce-billing-fields h3,
  .woocommerce-checkout .woocommerce-shipping-fields h3 {
    font-size: 15px;
  }

  /* Checkout order review table */
  .woocommerce-checkout .shop_table th,
  .woocommerce-checkout .shop_table td {
    padding: 8px !important;
    font-size: 13px !important;
  }
}

/* ── 9. Single product page ──────────────────────────────── */
@media (max-width: 600px) {
  .woocommerce div.product .single_add_to_cart_button {
    width: 100% !important;
    padding: 14px !important;
    font-size: 15px !important;
    min-height: 52px;
  }

  .woocommerce div.product .product_title {
    font-size: 20px !important;
  }

  .woocommerce div.product p.price,
  .woocommerce div.product span.price {
    font-size: 18px !important;
  }

  /* Tabs: allow wrapping on very small screens */
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    flex-wrap: wrap;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 8px 14px;
    font-size: 12px;
  }

  /* Quantity input */
  .woocommerce div.product .quantity input.qty {
    width: 64px !important;
    height: 44px;
    font-size: 15px;
    padding: 6px 10px;
  }

  /* Related products: 2 columns */
  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── 10. Category intro (thumbnail + description) ─────────── */
@media (max-width: 480px) {
  .wf-category-intro {
    flex-direction: column;
    gap: 10px;
  }

  .wf-category-intro__thumb {
    width: 100%;
  }

  .wf-category-intro__thumb img {
    width: 100% !important;
    height: 140px !important;
    object-fit: cover;
    border-radius: 2px;
  }
}

/* ── 11. Archive sort bar ─────────────────────────────────── */
@media (max-width: 640px) {
  .woocommerce .woocommerce-ordering,
  .woocommerce .woocommerce-result-count {
    float: none !important;
    display: block;
    width: 100%;
    margin-bottom: 8px !important;
  }

  .woocommerce-ordering select {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    height: 40px;
  }
}

/* ── 12. Local delivery landing pages ───────────────────── */
@media (max-width: 640px) {
  .wf-local-hero {
    padding: 20px 16px;
    margin-bottom: 24px;
  }

  .wf-local-hero h1 {
    font-size: 22px !important;
    line-height: 1.3;
  }

  .wf-local-hero p {
    font-size: 14px;
  }

  .wf-local-trust {
    flex-direction: column;
    gap: 10px;
  }

  .wf-local-trust__item {
    text-align: center;
  }

  .wf-contact-list li {
    font-size: 14px;
    padding: 6px 0;
  }

  .wf-hours-table td,
  .wf-hours-table th {
    font-size: 13px;
    padding: 8px;
  }
}

/* ── 13. Full-width pages (About, Privacy, Delivery) ──────── */
@media (max-width: 640px) {
  .wf-fullwidth-page .entry-title {
    font-size: 22px;
    padding-bottom: 10px;
  }

  .wf-fullwidth-page .entry-content {
    font-size: 14px;
  }

  /* Contact / hours: stack on mobile (override the side-by-side rule) */
  .wf-contact-block,
  .wf-hours-block {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 20px;
  }
}

/* ── 14. Footer ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .wf-footer__main {
    padding: 24px 0;
  }

  .wf-footer__col-title {
    font-size: 13px;
  }

  /* Phone links — easy tap target */
  .wf-footer a[href^="tel:"] {
    font-size: 16px;
    font-weight: 700;
    color: var(--wf-pink);
    display: inline-block;
    padding: 2px 0;
  }

  /* Bottom bar: stack copyright + badges */
  .wf-footer__bottom .wf-container {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .wf-footer__copyright {
    text-align: center;
  }

  .wf-footer__badges {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── 15. 404 page ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .wf-404__hero {
    padding: 24px 16px;
  }

  .wf-404__code {
    font-size: 80px;
  }

  .wf-404__title {
    font-size: 20px;
  }

  .wf-404__search input[type="search"] {
    font-size: 15px;
    padding: 10px 12px;
  }

  .wf-404__links {
    flex-direction: column;
    gap: 8px;
  }

  .wf-404__links .wf-btn {
    width: 100%;
    text-align: center;
  }

  .wf-404__products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
}

/* ── 16. General tap-target minimums ─────────────────────── */
@media (max-width: 768px) {
  .wf-btn,
  .wf-product-card__btn,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  input[type="submit"],
  button[type="submit"] {
    min-height: 44px;
  }

  /* Phone numbers everywhere: easy tap */
  a[href^="tel:"] {
    white-space: nowrap;
  }

  /* WC notice dismissal */
  .woocommerce-message,
  .woocommerce-error,
  .woocommerce-info {
    font-size: 13px;
    padding: 12px 14px;
  }
}

/* ── 17. WC cart/checkout: full-width site-main already set,
         but ensure no horizontal overflow on phones ─────── */
@media (max-width: 480px) {
  /* Checkout and account get a little breathing room on phones */
  .woocommerce-checkout .site-main,
  .woocommerce-account .site-main {
    padding: 0 14px !important;
  }
  /* Cart manages its own internal spacing — keep site-main flush */
  .woocommerce-cart .site-main {
    padding: 0 !important;
  }
}

/* ============================================================
   MOBILE FIXES — pass 2 (2026-05)
   Corrects bugs introduced in mobile pass 1
   ============================================================ */

/* ── Fix 1: Categories button — was inheriting width:240px ── */
@media (max-width: 768px) {
  .wf-navbar__categories-btn {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }
}

/* ── Fix 2: Sidebar — revert the forced display:block that
   created a giant empty box on homepage + all pages ────────── */
@media (max-width: 768px) {

  /* Default: hidden (navbar CATEGORIES dropdown handles mobile nav) */
  .wf-sidebar-cats {
    display: none !important;
    min-height: 0 !important;
  }

  /* When opened by the CATEGORIES button on product/category pages */
  .wf-sidebar-cats.open {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--wf-border);
  }

  /* Make all children visible when open */
  .wf-sidebar-cats.open > ul,
  .wf-sidebar-cats.open > nav,
  .wf-sidebar-cats.open > div,
  .wf-sidebar-cats.open .wf-virtual-tour-btn {
    display: block !important;
  }

  /* Show the header bar in both states — it's the visual toggle indicator */
  .wf-sidebar-cats__header {
    display: flex !important;
    background: var(--wf-section-bg);
    border: 1px solid var(--wf-border);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
  }

  /* But the whole sidebar (including header) is still hidden when not open:
     show only on product/category pages where JS adds .open class */
  /* --- EXCEPT on product/category pages the sidebar header acts as the
         toggle button, so we need it visible even when sidebar is closed ---

     Solution: The JS now fires on .wf-sidebar-cats__header click too,
     so we still rely on .open class to show everything. The header itself
     is fine being inside the hidden sidebar since the NAVBAR button is the
     real trigger on mobile. */
}

/* ── Fix 3: Content wrapper on mobile — no gap/padding left
   (sidebar is gone, so main content gets full width) ─────── */
@media (max-width: 768px) {
  .wf-content-wrapper {
    padding-left: 14px !important;
    padding-right: 14px !important;
    display: block !important;
  }

  .wf-main-content {
    padding-left: 0 !important;
    width: 100% !important;
  }
}

/* ── Fix 4: Carousel visible on mobile — make sure body and
   track are not constrained by leftover sidebar width ──────── */
@media (max-width: 768px) {
  .wf-carousel-section__body {
    width: 100%;
    overflow: hidden !important;
  }

  .wf-product-carousel {
    width: 100%;
  }
}

/* ── Fix 5: Hero section on mobile ───────────────────────── */
@media (max-width: 768px) {
  .wf-hero-section {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .wf-hero-section__main {
    width: 100%;
    margin-bottom: 16px;
  }

  .wf-hero-section__photo {
    width: 100%;
  }

  .wf-hero-section__photo img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .wf-reviews-panel {
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
  }
}

/* ============================================================
   MOBILE FIXES — pass 3 (2026-05)
   Targeted fixes from live browser audit
   ============================================================ */

/* ── 1. Hero section — more compact on mobile ─────────────── */
@media (max-width: 768px) {

  /* Inner was only 296px wide; make it use the full content width */
  .wf-hero-section__inner {
    width: 100% !important;
    align-items: center !important;
  }

  /* Landscape hero photo — full width, shorter on mobile */
  .wf-hero-section__photo {
    width: 100% !important;
    height: 200px !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .wf-hero-section__photo img:first-child {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .wf-hero-section__badge {
    width: 56px !important;
    height: 56px !important;
  }

  /* Headline: compact */
  .wf-hero-section__headline {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }

  /* Bullet list: full width, tight spacing */
  .wf-hero-section__bullets {
    width: 100% !important;
    margin-top: 12px !important;
    padding-left: 0 !important;
    list-style: none !important;
  }

  .wf-hero-section__bullets li {
    padding: 7px 0 7px 20px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid var(--wf-border);
    position: relative;
  }

  .wf-hero-section__bullets li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--wf-pink);
    font-weight: 700;
  }

  /* Fix the <small> sub-note on last bullet */
  .wf-hero-section__bullets li small {
    display: inline !important;
    font-size: 11px;
    color: var(--wf-mid-gray);
  }

  /* Reviews panel: compact, scrollable, less height on mobile */
  .wf-reviews-panel {
    margin-top: 12px;
    max-height: 220px !important;
  }

  /* Hero section total: squeeze padding so carousels appear faster */
  .wf-hero-section__main {
    padding: 0 !important;
  }
}

/* ── 2. Carousel section — hide phone numbers on mobile ───── */
@media (max-width: 768px) {
  .wf-carousel-section__phones {
    display: none !important;
  }

  /* Header: allow title + view-all to wrap on small screens */
  .wf-carousel-section__header {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    padding: 10px 12px !important;
  }

  .wf-carousel-section__title {
    font-size: 13px !important;
  }

  .wf-carousel-section__view-all {
    font-size: 11px !important;
  }

  /* Carousel arrows: ensure they're visible below the title row */
  .wf-carousel-section__nav {
    width: 100%;
    display: flex;
    gap: 6px;
    padding: 0 12px 8px;
  }

  /* Carousel body: ensure full width */
  .wf-carousel-section__body {
    padding: 0 12px !important;
  }
}

/* ── 3. Cart text — hide label on mobile via font-size trick
   (fallback if header-main.php php change wasn't uploaded) ─ */
@media (max-width: 768px) {
  /* If the new .wf-cart-text span exists, hide it */
  .wf-cart-text {
    display: none !important;
  }

  /* Fallback: if the old format is still there (bare text node),
     make the whole cart link show only the icon by shrinking font */
  .wf-header__cart a.cart-contents {
    font-size: 0 !important;
    color: transparent !important;
    gap: 0 !important;
  }

  /* But restore size for the SVG icon inside */
  .wf-header__cart .cart-icon {
    font-size: 14px !important;
    color: var(--wf-dark) !important;
  }

  /* And for the badge if it exists */
  .wf-header__cart .wf-cart-badge {
    font-size: 10px !important;
  }
}

/* ============================================================
   MOBILE FIXES — pass 4 (2026-05)
   Homepage polish + product page cleanup
   ============================================================ */

/* ── 1. Logo — bigger on mobile ───────────────────────────── */
@media (max-width: 768px) {
  .wf-header__logo img,
  .wf-header__logo .custom-logo,
  .wf-header__logo a img,
  .site-header .custom-logo-link img {
    max-width: 220px !important;
    height: auto !important;
  }
}

/* ── 2. Hero — strip to image-only; remove box chrome ──────── */
@media (max-width: 768px) {

  /* Kill the text */
  .wf-hero-section__headline { display: none !important; }
  .wf-hero-section__bullets  { display: none !important; }

  /* Remove the card-box look; let it bleed edge-to-edge */
  .wf-hero-section__main {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
  }

  .wf-hero-section__inner {
    justify-content: center !important;
  }

  /* Photo fills the full content column */
  .wf-hero-section__photo {
    max-width: 100% !important;
    margin: 0 !important;
  }

  .wf-hero-section__photo img:first-child {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 4px;
  }
}

/* ── 3. Reviews panel — hide entirely on mobile ──────────── */
@media (max-width: 768px) {
  .wf-reviews-panel {
    display: none !important;
  }
}

/* ── 4. Carousel cards — cleaner & more compact on mobile ─── */
@media (max-width: 768px) {

  /* Star ratings are usually empty — remove the gap they leave */
  .wf-product-card__stars { display: none !important; }

  /* Tighter card */
  .wf-product-card {
    padding: 2px !important;
  }

  .wf-product-card__image {
    margin-bottom: 5px !important;
  }

  .wf-product-card__name {
    font-size: 11px !important;
    margin-bottom: 3px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .wf-product-card__price {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }

  /* Button: full-width, shorter height */
  .wf-product-card__btn {
    padding: 0 6px !important;
    font-size: 10px !important;
    min-height: 34px !important;
    letter-spacing: 0 !important;
  }
}

/* ── 5. Sidebar grey header — hide on mobile (navbar btn
   handles open/close, so the in-panel header is redundant) ── */
@media (max-width: 768px) {
  .wf-sidebar-cats__header {
    display: none !important;
  }
}

/* ── 6. Product tabs — more breathing room ──────────────── */

/* Desktop: slightly more padding */
.woocommerce div.product .woocommerce-tabs .panel {
  padding: 28px 32px !important;
}

/* Mobile: keep side padding modest */
@media (max-width: 768px) {
  .woocommerce div.product .woocommerce-tabs .panel {
    padding: 20px 16px !important;
  }
}

/* ── 7. Quantity field — hide on single product pages ──────
   (always adding 1; quantity adjustable from cart) ──────── */
.single-product .wf-qty-label,
.single-product .wf-qty-wrap,
.single-product .quantity {
  display: none !important;
}

/* ============================================================
   MOBILE FIXES — pass 5 (2026-05)
   Specific value tweaks + homepage container width
   ============================================================ */

/* ── 1. Hero photo — fixed 180px height on mobile ─────────── */
@media (max-width: 768px) {
  .wf-hero-section__photo {
    height: 180px !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  .wf-hero-section__photo img:first-child {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}

/* ── 2. Product card button — remove min-height override ──── */
@media (max-width: 768px) {
  .wf-product-card__btn {
    min-height: 20px !important;
  }
}

/* ── 3. Carousel body padding ─────────────────────────────── */
@media (max-width: 768px) {
  .wf-carousel-section__body {
    padding: 12px 12px 0 !important;
  }
}

/* ── 4. Carousel section margin ───────────────────────────── */
@media (max-width: 768px) {
  .wf-carousel-section {
    margin: 0 0 16px 0 !important;
  }
}

/* ── 6. Carousel header — arrows inline, no second row ───────
   On mobile the long title + view-all link causes the arrows
   div to wrap onto its own line. Fix: nowrap header, title-group
   takes remaining space and clips, view-all hidden, arrows pin right. */
@media (max-width: 768px) {

  .wf-carousel-section__header {
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  /* Title group: elastic, clips when too narrow */
  .wf-carousel-section__title-group {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }

  /* Truncate title text cleanly */
  .wf-carousel-section__title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13px !important;
  }

  /* Hide "view all" link — saves horizontal space; not needed on mobile */
  .wf-carousel-section__view-all {
    display: none !important;
  }

  /* Arrows: always at the right, never wrap */
  .wf-carousel-section__arrows {
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 4px !important;
  }

  /* Body: symmetric padding top/sides + a little bottom breathing room */
  .wf-carousel-section__body {
    padding: 12px 12px 10px !important;
  }
}

/* ── 5. Homepage container — match full width of other pages ─
   WC pages reset #primary padding via the global rule at the
   top of this sheet; homepage is not a WC page so it inherits
   Storefront's default #primary padding, making it appear
   narrower. Strip it here. ──────────────────────────────── */
@media (max-width: 768px) {
  body.home .site-content,
  body.home #content,
  body.home .col-full,
  body.home #primary,
  body.home #main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
  }
}

/* ============================================================
   MOBILE FIXES — pass 7 (2026-05)
   Tweaks
   ============================================================ */

/* Hero photo height */
@media (max-width: 768px) {
  .wf-hero-section__photo {
    height: 200px !important;
  }
}

/* Carousel section padding + margin */
@media (max-width: 768px) {
  .wf-carousel-section {
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
  }
}

/* Carousel title as link — inherits the title style, pink on hover */
a.wf-carousel-section__title {
  color: var(--wf-dark);
  text-decoration: none;
}
a.wf-carousel-section__title:hover {
  color: var(--wf-pink);
  text-decoration: underline;
}

/* ============================================================
   FULL-WIDTH LANDING PAGE TEMPLATE
   page-templates/full-width-landing.php
   Used for: Monthly Flower Delivery subscription page
   ============================================================ */

/* Stretch to full content width — no sidebar column */
.wf-landing-page {
  width: 100%;
  max-width: none;
  float: none;
  padding: 0;
}

/* Subscription page — constrain #primary directly to 1160px and centre it.
   Covers both the full-width-landing template and the default template. */
.page-template-full-width-landing #primary,
.page-id-5842 #primary {
  max-width: 1160px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 20px 0 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

.page-template-full-width-landing .entry-content,
.page-id-5842 .entry-content {
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.page-template-full-width-landing #secondary,
.page-id-5842 #secondary {
  display: none !important;
}

/* Remove sidebar entirely when using this template */
.page-template-full-width-landing #secondary {
  display: none !important;
}

/* Remove the auto-generated entry-title above the hero */
.page-template-full-width-landing .entry-title {
  display: none !important;
}

/* Tighten the outer page wrapper so hero bleeds nicely */
.page-template-full-width-landing.postid-5842 .site-content {
  padding-top: 0;
}

/* ---- Landing page inner sections ---- */

/* Constrain readable text sections to site width, let hero bleed full */
.wf-landing-page .entry-content > div {
  box-sizing: border-box;
}

/* Product cards within the landing page — match site card style */
.page-template-full-width-landing .woocommerce ul.products li.product {
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  border-radius: 2px;
  transition: var(--wf-transition);
}

.page-template-full-width-landing .woocommerce ul.products li.product:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-color: #d0d0d0;
}

.page-template-full-width-landing .woocommerce ul.products .price {
  color: var(--wf-pink);
  font-weight: 700;
}

/* "ORDER NOW" button in embedded products */
.page-template-full-width-landing .woocommerce ul.products li.product a.button {
  background: var(--wf-pink);
  color: var(--wf-white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 2px;
  width: 100%;
  text-align: center;
}

.page-template-full-width-landing .woocommerce ul.products li.product a.button:hover {
  background: var(--wf-red);
}

/* ---- Responsive tweaks ---- */
@media (max-width: 768px) {
  .page-template-full-width-landing .wf-landing-page section,
  .page-template-full-width-landing .wf-landing-page > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   PRODUCT CUSTOM OPTIONS (wf-pco plugin)
   ============================================================ */

/* Each radio button choice on its own line.
   The plugin renders choice labels as inline-flex by default;
   switching to flex (block-level flex) stacks them vertically
   while keeping the radio + label text side-by-side. */
.wf-pco-field label:not(:first-child) {
  display: flex !important;
  width: 100%;
}

/* ============================================================
   FUNERAL FLOWERS — HERO + SUBCATEGORY SPLASH
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────────── */
.wf-funeral-hero {
  margin: 0 0 48px;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}

.wf-funeral-hero__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ============================================================
   PROM FLOWERS HERO
   ============================================================ */

.wf-prom-hero {
  position: relative;
  margin: 0 0 48px;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}

.wf-prom-hero__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Text panel — overlaid on the left bokeh area */
.wf-prom-hero__content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 48px 40px 44px;
  line-height: 1.4;
}

.wf-prom-hero__eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #b8896e; /* warm dusty rose — matches reference */
  margin-bottom: 18px;
}

.wf-prom-hero__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.08;
  color: #1a1a1a;
  margin: 0 0 24px;
}

.wf-prom-hero__rule {
  width: 48px;
  height: 2px;
  background: #b8896e;
  margin-bottom: 22px;
  border-radius: 1px;
}

.wf-prom-hero__text {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.7;
  color: #2a2a2a;
  margin: 0 0 30px;
}

.wf-prom-hero__badges {
  display: flex;
  gap: 28px;
}

.wf-prom-hero__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}

.wf-prom-hero__badge svg {
  width: 30px;
  height: 30px;
  color: var(--wf-dark);
  flex-shrink: 0;
}

.wf-prom-hero__badge span {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wf-dark);
  line-height: 1.5;
}

/* Mobile — stack image above a plain content block */
@media (max-width: 680px) {
  .wf-prom-hero__content {
    position: static;
    width: 100%;
    padding: 28px 20px 24px;
    background: #fdf9f5;
  }
  .wf-prom-hero__title {
    font-size: 28px;
  }
}

/* ============================================================
   PRODUCT CARD — IMAGE CONTAIN
   Shows the full image without cropping, regardless of aspect ratio.
   ============================================================ */

.wf-product-card__image {
  background: #fff;
  overflow: hidden;
  line-height: 0;
}

.wf-product-card__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #fff;
}


/* Hide category thumbnail/description on the funeral landing page */
.tax-product_cat.term-funeral-flowers-ottawa .woocommerce-products-header__title,
.tax-product_cat.term-funeral-flowers-ottawa .term-description,
.tax-product_cat.term-funeral-flowers-ottawa .woocommerce-archive-description,
.tax-product_cat.term-funeral-flowers-ottawa .wf-main-content > .woocommerce-products-header > img,
.tax-product_cat.term-funeral-flowers-ottawa .wf-main-content > img,
.tax-product_cat.term-funeral-flowers-ottawa .woocommerce-loop-product__link > img:first-child:only-child {
  display: none !important;
}

/* ── Section heading ────────────────────────────────────────── */
.wf-funeral-section-heading {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: #1c2b24;
  margin: 0 0 28px;
}

/* ── Subcategory tile grid ──────────────────────────────────── */
.wf-funeral-subcats {
  margin: 0 0 56px;
}

.wf-funeral-subcats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.wf-funeral-subcat-tile {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: box-shadow .25s ease, transform .25s ease;
}
.wf-funeral-subcat-tile:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.13);
  transform: translateY(-2px);
}

.wf-funeral-subcat-tile__bg {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: #f0ede8;
  transition: transform .4s ease;
  flex-shrink: 0;
}
.wf-funeral-subcat-tile:hover .wf-funeral-subcat-tile__bg {
  transform: scale(1.04);
}

/* Caption strip — sits below the photo, always white */
.wf-funeral-subcat-tile__caption {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
}

/* Keep old overlay class harmless if it still appears anywhere */
.wf-funeral-subcat-tile__overlay {
  display: none;
}

.wf-funeral-subcat-tile__name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--wf-dark);
  line-height: 1.3;
  text-shadow: none;
  font-family: Georgia, 'Times New Roman', serif;
}

.wf-funeral-subcat-tile__cta {
  display: inline-block;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.35);
  color: #666;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 0 2px;
  align-self: flex-start;
  transition: color .2s, border-color .2s;
}
.wf-funeral-subcat-tile:hover .wf-funeral-subcat-tile__cta {
  color: var(--wf-pink);
  border-bottom-color: var(--wf-pink);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .wf-funeral-subcats__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .wf-funeral-subcats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .wf-funeral-subcat-tile {
    aspect-ratio: 1 / 1;
  }
}

/* ── Funeral info section ───────────────────────────────────── */
.wf-funeral-info {
  margin: 8px 0 48px;
  border-top: 1px solid #e0dbd5;
  padding-top: 40px;
}

/* Free delivery banner */
.wf-funeral-info__delivery {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #f7f4f0;
  border-left: 4px solid #2A5C45;
  border-radius: 0 5px 5px 0;
  padding: 24px 28px;
  margin-bottom: 40px;
}

.wf-funeral-info__delivery-icon {
  flex-shrink: 0;
  color: #2A5C45;
  margin-top: 2px;
}

.wf-funeral-info__delivery-title {
  font-size: 16px;
  font-weight: 700;
  color: #1c2b24;
  margin: 0 0 10px;
}

.wf-funeral-info__delivery-body {
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  margin: 0 0 10px;
}

.wf-funeral-info__coupon {
  display: inline-block;
  font-size: 13px;
  color: #2A5C45;
  background: #e8f2ec;
  border: 1px dashed #2A5C45;
  border-radius: 4px;
  padding: 6px 14px;
  margin: 0;
}

/* Two-column text block */
.wf-funeral-info__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.wf-funeral-info__col-heading {
  font-size: 16px;
  font-weight: 700;
  color: #1c2b24;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e0dbd5;
}

.wf-funeral-info__col p {
  font-size: 14px;
  line-height: 1.75;
  color: #555;
  margin: 0 0 12px;
}

@media (max-width: 700px) {
  .wf-funeral-info__delivery {
    flex-direction: column;
    gap: 12px;
  }
  .wf-funeral-info__columns {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ============================================================
   FUNERAL FLOWERS — DESIGN REFINEMENT PASS
   ============================================================ */

/* Hero: sits within the container */

/* Section heading: elegant centred rule treatment */
.wf-funeral-section-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6b6560;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 32px;
}
.wf-funeral-section-heading::before,
.wf-funeral-section-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #d8d3ce;
}

/* Subcategory tiles — refined typography + interaction */
.wf-funeral-subcat-tile {
  border-radius: 3px;
}
.wf-funeral-subcat-tile__name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--wf-dark);
  font-family: Georgia, 'Times New Roman', serif;
  text-shadow: none;
  margin-bottom: 10px;
}
/* Replace boxy "SHOP NOW" with a refined text link */
.wf-funeral-subcat-tile__cta {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.4);
  border-radius: 0;
  color: var(--wf-dark);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 0 3px;
}
.wf-funeral-subcat-tile:hover .wf-funeral-subcat-tile__cta {
  background: transparent;
  color: var(--wf-pink);
  border-bottom-color: var(--wf-pink);
}
/* Overlay hidden — caption is now below the image */
.wf-funeral-subcat-tile__overlay {
  display: none;
}

/* All tiles uniform — no orphan stretching */
.wf-funeral-subcats__grid {
  grid-template-columns: repeat(5, 1fr);
}

/* Info section — more refined palette */
.wf-funeral-info {
  border-top-color: #e8e3de;
}
.wf-funeral-info__delivery {
  background: #f9f7f5;
  border-left-color: #7a9e8e; /* sage, not bright green */
  border-radius: 0 4px 4px 0;
}
.wf-funeral-info__delivery-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .01em;
}
.wf-funeral-info__delivery-icon { color: #7a9e8e; }
.wf-funeral-info__coupon {
  color: #4a7a64;
  background: #eef4f1;
  border-color: #7a9e8e;
  border-style: solid;
  font-size: 13px;
  letter-spacing: .04em;
}
.wf-funeral-info__col-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .01em;
  border-bottom-color: #e8e3de;
  color: #2a2522;
}
.wf-funeral-info__col p { color: #5a5450; }

/* ── Funeral tiles — mobile fixes ───────────────────────────── */
@media (max-width: 600px) {

  .wf-funeral-subcats__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }


  .wf-funeral-subcat-tile {
    aspect-ratio: 3 / 4;
  }

  .wf-funeral-subcat-tile__name {
    font-size: 13px;
    margin-bottom: 8px;
    white-space: normal;
  }

  /* Hide "Shop Now" on mobile — tile tap is the action */
  .wf-funeral-subcat-tile__cta {
    display: none;
  }

  .wf-funeral-subcat-tile__overlay {
    padding: 10px 10px 12px;
  }

  .wf-funeral-section-heading {
    gap: 10px;
  }

  /* Info section */
  .wf-funeral-info__delivery {
    padding: 18px 16px;
  }
  .wf-funeral-info__delivery-title {
    font-size: 15px;
  }
  .wf-funeral-info__col-heading {
    font-size: 15px;
  }
}

/* ============================================================
   CATEGORY-SPECIFIC OVERRIDES
   ============================================================ */

/* Hide category image + description on specific subcategories */
.term-classic-funeral-flowers-ottawa .wf-category-intro,
.term-funeral-wreaths-ottawa .wf-category-intro,
.term-sympathy-gifts-ottawa .wf-category-intro,
.term-sympathy-baskets-ottawa .wf-category-intro,
.term-casket-sprays-ottawa .wf-category-intro,
.term-urn-arrangements-ottawa .wf-category-intro,
.term-sympathy-keepsakes-ottawa .wf-category-intro,
.term-funeral-standing-sprays-ottawa .wf-category-intro,
.term-blue-funeral-flowers-ottawa .wf-category-intro,
.term-bright-funeral-flowers-ottawa .wf-category-intro,
.term-jewelled-funeral-flowers-ottawa .wf-category-intro,
.term-pink-funeral-flowers-ottawa .wf-category-intro,
.term-purple-funeral-flowers-ottawa .wf-category-intro,
.term-red-white-funeral-flowers-ottawa .wf-category-intro,
.term-red-funeral-flowers-ottawa .wf-category-intro,
.term-rustic-funeral-flowers-ottawa .wf-category-intro,
.term-white-funeral-flowers-ottawa .wf-category-intro {
  display: none !important;
}

@media (min-width: 768px) {
  .woocommerce-pagination {
    padding: 7px 7px 0 0;
  }
}

/* ============================================================
   FLOWERS BY COLOUR — header banner
   ============================================================ */

.wf-colour-header {
  margin-bottom: 32px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--wf-border);
}

.wf-colour-header__swatches {
  display: flex;
  height: 10px;
}

.wf-colour-header__swatch {
  flex: 1;
}

.wf-colour-header__text {
  padding: 28px 32px 26px;
  background: #f9f7f5;
  text-align: center;
}

.wf-colour-header__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .06em;
  color: #2a2522;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.wf-colour-header__sub {
  font-size: 14px;
  color: #5a5450;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Tighten spacing on the colour tiles section */
.wf-colour-subcats {
  margin-top: 0;
}

/* Hide the default WooCommerce title, category image, products & pagination */
.term-flowers-by-colour .woocommerce-products-header,
.term-flowers-by-colour .wf-category-intro,
.term-flowers-by-colour .woocommerce-result-count,
.term-flowers-by-colour .woocommerce-ordering,
.term-flowers-by-colour ul.products,
.term-flowers-by-colour .woocommerce-pagination {
  display: none !important;
}

/* 9th tile: same size as the others — override the orphan-span rule */
.wf-colour-subcats .wf-funeral-subcat-tile:last-child:nth-child(4n+1) {
  grid-column: span 1 !important;
  aspect-ratio: 3 / 4 !important;
}

/* ============================================================
   HOMEPAGE v2 — NEW COMPONENTS
   ============================================================ */

/* ── Hero: dynamic order deadline ─────────────────────────── */
.wf-hero-deadline {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 3px;
  margin-bottom: 14px;
  width: fit-content;
}

.wf-hero-deadline--open {
  background: #e8f5ee;
  color: #1a6b3c;
  border: 1px solid #a8d9bc;
}

.wf-hero-deadline--closed {
  background: var(--wf-light-gray);
  color: var(--wf-mid-gray);
  border: 1px solid var(--wf-border);
}

.wf-hero-deadline svg {
  flex-shrink: 0;
}

/* ── Hero: trust stat blocks ──────────────────────────────── */
.wf-hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 18px;
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  border-radius: 3px;
  overflow: hidden;
}

.wf-hero-stats__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px;
  text-align: center;
}

.wf-hero-stats__divider {
  width: 1px;
  height: 36px;
  background: var(--wf-border);
  flex-shrink: 0;
}

.wf-hero-stats__num {
  font-size: 20px;
  font-weight: 800;
  color: var(--wf-pink);
  line-height: 1.1;
}

.wf-hero-stats__label {
  font-size: 11px;
  color: var(--wf-mid-gray);
  margin-top: 2px;
  line-height: 1.3;
}

@media (max-width: 540px) {
  .wf-hero-stats {
    flex-direction: column;
    gap: 0;
  }
  .wf-hero-stats__divider {
    width: 100%;
    height: 1px;
  }
}

/* ── Hero: phone CTA button ───────────────────────────────── */
.wf-hero-ctas .wf-btn--phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.2);
  color: var(--wf-white) !important;
  border: 2px solid rgba(255,255,255,0.75);
  padding: 11px 22px;
  font-family: var(--wf-font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  border-radius: 2px;
  transition: var(--wf-transition);
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.wf-hero-ctas .wf-btn--phone:hover,
.wf-hero-ctas .wf-btn--phone:focus {
  background: var(--wf-pink);
  border-color: var(--wf-pink);
  color: var(--wf-white) !important;
}

/* ── Ottawa delivery coverage strip ──────────────────────── */
.wf-delivery-strip {
  display: none; /* TODO: re-enable when ready to activate */
  align-items: center;
  gap: 10px;
  background: var(--wf-dark);
  color: var(--wf-white);
  padding: 10px 16px;
  font-size: 12px;
  border-radius: 3px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.wf-delivery-strip__icon {
  flex-shrink: 0;
  opacity: 0.85;
  display: flex;
  align-items: center;
}

.wf-delivery-strip__text {
  flex: 1;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}

.wf-delivery-strip__text strong {
  color: var(--wf-white);
  font-weight: 600;
}

.wf-delivery-strip__link {
  color: var(--wf-pink);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}

.wf-delivery-strip__link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .wf-delivery-strip__link {
    width: 100%;
    margin-top: 4px;
  }
}

/* ── Sympathy / funeral urgent callout ───────────────────── */
.wf-sympathy-callout {
  background:
    linear-gradient(to right, rgba(248,244,240,0.82) 42%, rgba(248,244,240,0.05) 100%),
    url('https://weeklyflowers.com/wp-content/uploads/2026/05/ChatGPT-Image-May-26-2026-01_10_31-PM.png') center center / cover no-repeat;
  border: 1px solid #d9cfc7;
  border-left: 4px solid #7a6050;
  border-radius: 3px;
  margin-bottom: 20px;
  padding: 0;
  overflow: hidden;
}

.wf-sympathy-callout__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  flex-wrap: wrap;
}

.wf-sympathy-callout__icon {
  flex-shrink: 0;
  color: #7a6050;
  opacity: 0.8;
}

.wf-sympathy-callout__body {
  flex: 1;
  min-width: 200px;
}

.wf-sympathy-callout__heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--wf-dark);
  margin: 0 0 4px;
}

.wf-sympathy-callout__text {
  font-size: 13px;
  color: var(--wf-mid-gray);
  margin: 0;
  line-height: 1.5;
}

.wf-sympathy-callout__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.wf-sympathy-callout__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-family: var(--wf-font);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 2px;
  white-space: nowrap;
  transition: var(--wf-transition);
  letter-spacing: 0.3px;
}

.wf-sympathy-callout__btn--shop {
  background: #7a6050;
  color: var(--wf-white) !important;
  border: 2px solid #7a6050;
}

.wf-sympathy-callout__btn--shop:hover,
.wf-sympathy-callout__btn--shop:focus {
  background: #5e4a3c;
  border-color: #5e4a3c;
}

.wf-sympathy-callout__btn--call {
  background: #fff;
  color: #7a6050 !important;
  border: 2px solid #7a6050;
}

.wf-sympathy-callout__btn--call:hover,
.wf-sympathy-callout__btn--call:focus {
  background: #7a6050;
  color: var(--wf-white) !important;
}

@media (max-width: 680px) {
  .wf-sympathy-callout__inner {
    gap: 12px;
    padding: 14px 16px;
  }
  .wf-sympathy-callout__icon {
    display: none;
  }
  .wf-sympathy-callout__actions {
    width: 100%;
  }
  .wf-sympathy-callout__btn {
    flex: 1;
    justify-content: center;
  }
}

/* ── Deal of the Day block ────────────────────────────────── */
.wf-dotd {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--wf-white);
  border: 2px solid var(--wf-pink);
  border-radius: 4px;
  padding: 16px 20px;
  margin: 20px 0;
  position: relative;
  flex-wrap: wrap;
}

.wf-dotd__label {
  position: absolute;
  top: -1px;
  left: 16px;
  transform: translateY(-50%);
  background: var(--wf-pink);
  color: var(--wf-white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.wf-dotd__image-wrap {
  flex-shrink: 0;
  width: 130px;
  height: 130px;
  overflow: hidden;
  border-radius: 3px;
  display: block;
}

.wf-dotd__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

.wf-dotd__image-wrap:hover img {
  transform: scale(1.04);
}

.wf-dotd__content {
  flex: 1;
  min-width: 180px;
}

.wf-dotd__name {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
}

.wf-dotd__name a {
  color: var(--wf-dark);
  text-decoration: none;
}

.wf-dotd__name a:hover {
  color: var(--wf-pink);
}

.wf-dotd__desc {
  font-size: 13px;
  color: var(--wf-mid-gray);
  margin: 0 0 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wf-dotd__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.wf-dotd__price-was {
  font-size: 14px;
  color: var(--wf-mid-gray);
  text-decoration: line-through;
}

.wf-dotd__price-was .woocommerce-Price-amount { color: var(--wf-mid-gray); }

.wf-dotd__price-now {
  font-size: 20px;
  font-weight: 800;
  color: var(--wf-pink);
}

.wf-dotd__price-now .woocommerce-Price-amount { color: var(--wf-pink); }

.wf-dotd__cta {
  display: inline-block;
  background: var(--wf-pink);
  color: var(--wf-white) !important;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: var(--wf-transition);
}

.wf-dotd__cta:hover,
.wf-dotd__cta:focus {
  background: var(--wf-red);
  color: var(--wf-white) !important;
}

@media (max-width: 500px) {
  .wf-dotd {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 24px;
  }
  .wf-dotd__image-wrap {
    width: 100%;
    height: 180px;
  }
}

/* ── Wedding banner — full-width single variant ───────────── */
.wf-category-banners--full {
  grid-template-columns: 1fr;
}

.wf-category-banners--full .wf-category-banner {
  height: 200px;
}

.wf-category-banners--full .wf-category-banner img {
  object-position: center 30%;
}

/* ============================================================
   HOMEPAGE v2 — NEW COMPONENTS
   ============================================================ */

/* ── Hero: dynamic order deadline ─────────────────────────── */
.wf-hero-deadline {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 3px;
  margin-bottom: 14px;
  width: fit-content;
}
.wf-hero-deadline--open {
  background: #e8f5ee;
  color: #1a6b3c;
  border: 1px solid #a8d9bc;
}
.wf-hero-deadline--closed {
  background: var(--wf-light-gray);
  color: var(--wf-mid-gray);
  border: 1px solid var(--wf-border);
}
.wf-hero-deadline svg { flex-shrink: 0; }

/* ── Hero: trust stat blocks ──────────────────────────────── */
.wf-hero-stats {
  display: flex;
  align-items: center;
  background: var(--wf-white);
  border: 1px solid var(--wf-border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 18px;
}
.wf-hero-stats__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px;
  text-align: center;
}
.wf-hero-stats__divider {
  width: 1px;
  height: 36px;
  background: var(--wf-border);
  flex-shrink: 0;
}
.wf-hero-stats__num {
  font-size: 20px;
  font-weight: 800;
  color: var(--wf-pink);
  line-height: 1.1;
}
.wf-hero-stats__label {
  font-size: 11px;
  color: var(--wf-mid-gray);
  margin-top: 2px;
  line-height: 1.3;
}
@media (max-width: 540px) {
  .wf-hero-stats { flex-direction: column; }
  .wf-hero-stats__divider { width: 100%; height: 1px; }
}

/* ── Hero: phone CTA button (duplicate removed — see earlier block) ─── */

/* ── Ottawa delivery coverage strip ──────────────────────── */
.wf-delivery-strip {
  display: none; /* TODO: re-enable when ready to activate */
  align-items: center;
  gap: 10px;
  background: var(--wf-dark);
  color: var(--wf-white);
  padding: 10px 16px;
  font-size: 12px;
  border-radius: 3px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.wf-delivery-strip__icon {
  flex-shrink: 0;
  opacity: 0.85;
  display: flex;
  align-items: center;
}
.wf-delivery-strip__text {
  flex: 1;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}
.wf-delivery-strip__text strong { color: var(--wf-white); font-weight: 600; }
.wf-delivery-strip__link {
  color: var(--wf-pink);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}
.wf-delivery-strip__link:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .wf-delivery-strip__link { width: 100%; margin-top: 4px; }
}

/* ── Sympathy / funeral urgent callout ───────────────────── */
.wf-sympathy-callout {
  background:
    linear-gradient(to right, rgba(248,244,240,0.82) 42%, rgba(248,244,240,0.05) 100%),
    url('https://weeklyflowers.com/wp-content/uploads/2026/05/ChatGPT-Image-May-26-2026-01_10_31-PM.png') center center / cover no-repeat;
  border: 1px solid #d9cfc7;
  border-left: 4px solid #7a6050;
  border-radius: 3px;
  margin-bottom: 20px;
  overflow: hidden;
}
.wf-sympathy-callout__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  flex-wrap: wrap;
}
.wf-sympathy-callout__icon { flex-shrink: 0; color: #7a6050; opacity: 0.8; }
.wf-sympathy-callout__body { flex: 1; min-width: 200px; }
.wf-sympathy-callout__heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--wf-dark);
  margin: 0 0 4px;
}
.wf-sympathy-callout__text {
  font-size: 13px;
  color: var(--wf-mid-gray);
  margin: 0;
  line-height: 1.5;
}
.wf-sympathy-callout__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.wf-sympathy-callout__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-family: var(--wf-font);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 2px;
  white-space: nowrap;
  transition: var(--wf-transition);
  letter-spacing: 0.3px;
}
.wf-sympathy-callout__btn--shop {
  background: #7a6050;
  color: var(--wf-white) !important;
  border: 2px solid #7a6050;
}
.wf-sympathy-callout__btn--shop:hover,
.wf-sympathy-callout__btn--shop:focus { background: #5e4a3c; border-color: #5e4a3c; }
.wf-sympathy-callout__btn--call {
  background: #fff;
  color: #7a6050 !important;
  border: 2px solid #7a6050;
}
.wf-sympathy-callout__btn--call:hover,
.wf-sympathy-callout__btn--call:focus { background: #7a6050; color: var(--wf-white) !important; }
@media (max-width: 680px) {
  .wf-sympathy-callout__inner { gap: 12px; padding: 14px 16px; }
  .wf-sympathy-callout__icon { display: none; }
  .wf-sympathy-callout__actions { width: 100%; }
  .wf-sympathy-callout__btn { flex: 1; justify-content: center; }
}

/* ── Deal of the Day block ────────────────────────────────── */
.wf-dotd {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--wf-white);
  border: 2px solid var(--wf-pink);
  border-radius: 4px;
  padding: 16px 20px;
  margin: 20px 0;
  position: relative;
  flex-wrap: wrap;
}
.wf-dotd__label {
  position: absolute;
  top: 0;
  left: 16px;
  transform: translateY(-50%);
  background: var(--wf-pink);
  color: var(--wf-white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.wf-dotd__image-wrap {
  flex-shrink: 0;
  width: 130px;
  height: 130px;
  overflow: hidden;
  border-radius: 3px;
  display: block;
}
.wf-dotd__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}
.wf-dotd__image-wrap:hover img { transform: scale(1.04); }
.wf-dotd__content { flex: 1; min-width: 180px; }
.wf-dotd__name {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
}
.wf-dotd__name a { color: var(--wf-dark); text-decoration: none; }
.wf-dotd__name a:hover { color: var(--wf-pink); }
.wf-dotd__desc {
  font-size: 13px;
  color: var(--wf-mid-gray);
  margin: 0 0 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wf-dotd__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.wf-dotd__price-was { font-size: 14px; color: var(--wf-mid-gray); text-decoration: line-through; }
.wf-dotd__price-was .woocommerce-Price-amount { color: var(--wf-mid-gray); }
.wf-dotd__price-now { font-size: 20px; font-weight: 800; color: var(--wf-pink); }
.wf-dotd__price-now .woocommerce-Price-amount { color: var(--wf-pink); }
.wf-dotd__cta {
  display: inline-block;
  background: var(--wf-pink);
  color: var(--wf-white) !important;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: var(--wf-transition);
}
.wf-dotd__cta:hover,
.wf-dotd__cta:focus { background: var(--wf-red); color: var(--wf-white) !important; }
@media (max-width: 500px) {
  .wf-dotd { flex-direction: column; align-items: flex-start; padding-top: 24px; }
  .wf-dotd__image-wrap { width: 100%; height: 180px; }
}

/* ── Wedding banner — full-width single variant ───────────── */
.wf-category-banners--full { grid-template-columns: 1fr; }
.wf-category-banners--full .wf-category-banner { height: 200px; }
.wf-category-banners--full .wf-category-banner img { object-position: center 30%; }

/* ============================================================
   HOMEPAGE v2 — REFINEMENTS (round 2)
   ============================================================ */

/* ── Deadline banner: softer, sentence-case, not all-caps ─── */
.wf-hero-deadline {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 600;
  border-radius: 4px;
}

/* ── Stats block: remove box, breathe more, larger numbers ─── */
.wf-hero-stats {
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  border-top: 1px solid var(--wf-border);
  border-bottom: 1px solid var(--wf-border);
  padding: 2px 0;
  margin-bottom: 16px;
}

.wf-hero-stats__item {
  padding: 12px 16px;
}

.wf-hero-stats__divider {
  height: 28px;
}

.wf-hero-stats__num {
  font-size: 24px;
  letter-spacing: -0.5px;
}

.wf-hero-stats__label {
  font-size: 12px;
  margin-top: 3px;
}

/* ── Delivery strip: always single line ───────────────────── */
.wf-delivery-strip {
  flex-wrap: nowrap;
  overflow: hidden;
}

.wf-delivery-strip__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Hero: eyebrow + headline redesign (Option 1) ────────── */
.wf-hero-section__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--wf-mid-gray);
  margin: 0 0 6px;
}

/* Headline now carries only the delivery promise — bigger, fills space */
.wf-hero-section__headline {
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.15;
  margin-bottom: 14px;
}

/* ── Hero headline: single compact line ──────────────────── */
.wf-hero-section__headline {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--wf-mid-gray);
  margin: 0 0 14px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Hero headline: stretch to full width ────────────────── */
.wf-hero-section__headline {
  text-align: justify;
  text-align-last: justify;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* ── Hero headline: tighten word-spacing, spread letter-spacing ── */
.wf-hero-section__headline {
  letter-spacing: 2.5px;
  word-spacing: -2px;
}

/* ── Hero headline: letter-spacing fine-tune ─────────────── */
.wf-hero-section__headline { letter-spacing: 1.5px; }

/* ── Reviews panel: match hero box height ────────────────── */
.wf-hero-section {
  align-items: stretch;
}

.wf-reviews-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wf-reviews-panel__body {
  flex: 1;
  max-height: none;
  overflow-y: auto;
}

/* ── Reviews panel: match hero height (not the other way round) ── */
.wf-reviews-panel {
  min-height: 0;       /* stop panel content from inflating the grid row */
}

.wf-reviews-panel__body {
  min-height: 0;       /* allow flex shrink inside the panel */
}

/* ── Reviews panel height: JS sets max-height to match hero ─ */
/* Revert grid stretch — JS handles the height matching now    */
.wf-hero-section        { align-items: start !important; }
.wf-reviews-panel       { height: auto !important; min-height: 0 !important; overflow: hidden !important; }
.wf-reviews-panel__body { max-height: none !important; overflow-y: auto !important; }

/* ── Uniform 20px spacing throughout homepage ────────────── */
.wf-main-content        { padding-top: 20px; }
.wf-delivery-strip      { margin-bottom: 20px; }

/* ── Hero CTA overlay — mobile adjustments ────────────────── */
@media (max-width: 768px) {
  .wf-hero-ctas {
    padding: 20px 12px 14px;
    gap: 8px;
  }
  .wf-hero-ctas .wf-btn {
    font-size: 13px !important;
    padding: 9px 16px !important;
  }
}

/* ============================================================
   HOMEPAGE MOBILE / DESKTOP TRUST STRIP SWAP
   Desktop homepage: hero stats cover same content — hide strip
   Mobile homepage: strip replaces stats block (which is hidden)
   ============================================================ */

/* Hide trust strip on desktop homepage */
.home .wf-trust-strip { display: none; }

/* Show trust strip on mobile homepage */
@media (max-width: 768px) {
  .home .wf-trust-strip { display: flex; }
}

/* Hide stats block on mobile (trust strip takes over) */
@media (max-width: 768px) {
  .wf-hero-stats { display: none !important; }
}

/* ── Hero CTA buttons — static flow on mobile (below image) ── */
@media (max-width: 768px) {
  .wf-hero-ctas {
    position: static !important;
    background: none !important;
    padding: 10px 0 0 !important;
    justify-content: stretch !important;
    backdrop-filter: none !important;
  }
  .wf-hero-ctas .wf-btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .wf-hero-section__photo img:first-child {
    object-position: right top !important;
  }
}

/* ── Mobile hero: allow buttons to flow below image ──────────
   Photo overflow:hidden clips the statically-positioned CTAs.
   Make photo overflow visible on mobile; keep image height explicit.  */
@media (max-width: 768px) {
  .wf-hero-section__photo {
    overflow: visible !important;
  }
  .wf-hero-section__photo img:first-child {
    display: block;
    height: 200px !important;
    overflow: hidden;
    border-radius: 4px;
  }
}

/* ── Hide delivery strip on mobile ───────────────────────── */
@media (max-width: 768px) {
  .wf-delivery-strip {
    display: none !important;
  }
}

/* ── Mobile: buttons flow below image, not overlaid ──────────
   .wf-hero-ctas is now outside .wf-hero-section__photo in the DOM,
   so no overflow clipping. Just reset the absolute positioning. */
@media (max-width: 768px) {
  .wf-hero-section__photo::after {
    display: none; /* gradient not needed — buttons are below image */
  }
  .wf-hero-ctas {
    position: static !important;
    padding: 10px 0 0 !important;
    justify-content: stretch !important;
    background: none !important;
  }
  .wf-hero-ctas .wf-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ── Mobile: phone button — solid dark (not glass overlay style) */
@media (max-width: 768px) {
  .wf-hero-ctas .wf-btn--phone {
    background: var(--wf-dark) !important;
    color: var(--wf-white) !important;
    border-color: var(--wf-dark) !important;
    backdrop-filter: none !important;
  }
}

/* ================================================================
   SEARCH AUTOCOMPLETE DROPDOWN
   ================================================================ */

.wf-search-form {
  position: relative;
}

.wf-search-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99999;
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 380px;
  overflow-y: auto;
}

.wf-search-dropdown.open {
  display: block;
}

.wf-search-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f4f4f4;
  font-size: 13px;
  line-height: 1.35;
  outline: none;
  text-decoration: none;
  color: inherit;
}

.wf-search-dropdown__item:last-child {
  border-bottom: none;
}

.wf-search-dropdown__item:hover,
.wf-search-dropdown__item:focus {
  background: #fdf5f7;
}

/* Pink dot for products */
.wf-search-dropdown__item--product::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wf-pink, #F05978);
  flex-shrink: 0;
}

.wf-search-dropdown__label {
  flex: 1;
  color: #222;
  font-weight: 500;
}

.wf-search-dropdown__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.wf-search-dropdown__sku {
  font-size: 11px;
  color: #aaa;
  font-family: monospace;
}

.wf-search-dropdown__price {
  font-size: 12px;
  color: var(--wf-green, #2A5C45);
  font-weight: 600;
}

/* Green badge for categories */
.wf-search-dropdown__type-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--wf-green, #2A5C45);
  color: #fff;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
}

@media (max-width: 568px) {
  .col-full {
    margin-left: 0;
    margin-right: 0;
  }

  /* Subscription page: add side padding on mobile so content doesn't touch screen edges */
  .page-template-full-width-landing #primary,
  .page-id-5842 #primary {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}