/*
Theme Name: Frameity Prints
Description: A clean, light WooCommerce theme for print-on-demand stores. Bold wordmark, breadcrumbed category pages, hero banners per collection, and a friendly product card grid with wishlist support.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: frameity
Tags: e-commerce, woocommerce, print-on-demand, minimal, custom-header, custom-menu, featured-images, full-width-template
*/

/* ==========================================================================
   CSS Variables / Design Tokens
   ========================================================================== */
:root {
  /* Typography — single clean sans across the UI */
  --heading-font-family: 'Inter', 'Archivo', system-ui, -apple-system, sans-serif;
  --heading-font-weight: 700;
  --heading-font-style: normal;
  --text-font-family: 'Inter', 'Outfit', system-ui, -apple-system, sans-serif;
  --text-font-weight: 400;
  --text-font-style: normal;
  --base-text-font-size: 14px;
  --default-text-font-size: 15px;

  /* Colors — clean light palette */
  --background: #ffffff;
  --background-rgb: 255, 255, 255;
  --light-background: #f8f8f8;
  --card-bg: #f5f5f5;
  --hero-bg: #f8e6d3;          /* peach / cream accent for collection heroes */
  --hero-bg-alt: #fde9d0;
  --heading-color: #111111;
  --text-color: #111111;
  --text-color-rgb: 17, 17, 17;
  --text-color-light: #6b6b6b;
  --text-color-light-rgb: 107, 107, 107;
  --text-color-muted: #9a9a9a;
  --link-color: #111111;
  --link-color-rgb: 17, 17, 17;
  --border-color: #ececec;
  --border-color-rgb: 236, 236, 236;
  --border-color-strong: #d8d8d8;

  /* Buttons */
  --button-background: #111111;
  --button-background-rgb: 17, 17, 17;
  --button-text-color: #ffffff;
  --button-radius: 4px;
  --button-radius-pill: 999px;

  /* Header */
  --header-background: #ffffff;
  --header-heading-color: #111111;
  --header-light-text-color: #6b6b6b;
  --header-border-color: #ececec;
  --header-base-height: 72px;

  /* Footer */
  --footer-background: #ffffff;
  --footer-text-color: #6b6b6b;
  --footer-heading-color: #111111;
  --footer-border-color: #ececec;
  --trust-bg: #f8f8f8;

  /* Navigation */
  --navigation-background: #ffffff;
  --navigation-background-rgb: 255, 255, 255;
  --navigation-text-color: #111111;

  /* Product */
  --product-sale-price-color: #d63a30;
  --product-star-rating: #f5a623;
  --product-image-bg: #f5f5f5;

  /* Announcement */
  --announcement-bg: #000000;
  --announcement-color: #ffffff;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Spacing */
  --product-grid-gap: 24px;
  --container-max-width: 1320px;
  --container-padding: 20px;

  /* Animation */
  --drawer-transition: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-base: 0.2s ease;
  --transition-slow: 0.4s ease;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--text-font-family);
  font-weight: var(--text-font-weight);
  font-style: var(--text-font-style);
  font-size: var(--default-text-font-size);
  line-height: 1.65;
  color: var(--text-color);
  background-color: var(--background);
  overflow-x: hidden;
}

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

a {
  color: var(--link-color);
  text-decoration: none;
  transition: opacity var(--transition-base);
}

a:hover {
  opacity: 0.7;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  line-height: 1.2;
  letter-spacing: 0.05em;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.u-h1 { font-size: clamp(2rem, 5vw, 3.5rem); text-transform: uppercase; letter-spacing: 0.08em; }
.u-h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); text-transform: uppercase; letter-spacing: 0.06em; }
.u-h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); text-transform: uppercase; letter-spacing: 0.06em; }
.u-h4 { font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.06em; }
.u-h5 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.u-h6 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; }
.u-h7 { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; }
.u-h8 { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; }

.Heading {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
}

.Text--subdued {
  color: var(--text-color-light);
}

.Container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.u-visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

/* ==========================================================================
   Announcement Bar
   ========================================================================== */
.AnnouncementBar {
  background: var(--announcement-bg);
  color: var(--announcement-color);
  text-align: center;
  padding: 10px 20px;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--heading-font-family);
  position: relative;
  z-index: 100;
}

.AnnouncementBar__Content {
  margin: 0;
  font-size: inherit;
  letter-spacing: inherit;
}

/* ==========================================================================
   Header
   ========================================================================== */
.SiteHeader {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--header-background);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.SiteHeader--transparent {
  background: transparent;
  color: #ffffff;
  margin-bottom: calc(-1 * var(--header-base-height));
}

.SiteHeader--transparent.is-scrolled {
  background: var(--header-background);
  color: var(--heading-color);
  box-shadow: 0 1px 0 var(--border-color);
}

.SiteHeader--transparent .Header__Logo svg {
  fill: #ffffff;
  transition: fill var(--transition-base);
}

.SiteHeader--transparent.is-scrolled .Header__Logo svg {
  fill: var(--heading-color);
}

.Header__Wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-base-height);
  padding: 0 var(--container-padding);
}

.Header__FlexItem {
  display: flex;
  align-items: center;
  flex: 1;
}

.Header__FlexItem--logo {
  flex: 0 0 auto;
  justify-content: center;
}

.Header__FlexItem:last-child {
  justify-content: flex-end;
}

.Header__Logo a {
  display: inline-flex;
  align-items: center;
}

.Header__Logo svg {
  width: 105px;
  height: auto;
  fill: var(--heading-color);
  transition: fill var(--transition-base);
}

/* Main Navigation */
.Header__MainNav ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.Header__MainNav a {
  font-family: var(--heading-font-family);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: inherit;
  position: relative;
  padding: 4px 0;
}

.Header__MainNav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--transition-base);
}

.Header__MainNav a:hover::after {
  width: 100%;
}

.Header__MainNav a:hover {
  opacity: 1;
}

/* Dropdown Menu */
.Header__NavItem {
  position: relative;
}

.DropdownMenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navigation-background);
  min-width: 220px;
  padding: 1.5rem 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  z-index: 100;
}

.Header__NavItem:hover .DropdownMenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.DropdownMenu a {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.8125rem;
  color: var(--text-color-light);
  text-transform: none;
  letter-spacing: 0.04em;
}

.DropdownMenu a:hover {
  color: var(--heading-color);
  opacity: 1;
}

/* Secondary Nav */
.Header__SecondaryNav ul {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.Header__SecondaryNav a {
  font-family: var(--heading-font-family);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: inherit;
}

.Header__CartCount {
  font-family: var(--heading-font-family);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: inherit;
}

/* Mobile Menu Toggle */
.Header__MobileToggle {
  display: none;
  align-items: center;
  gap: 8px;
  color: inherit;
  background: none;
  border: none;
  font-family: var(--heading-font-family);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.Header__MobileToggle svg {
  width: 20px;
  height: 14px;
}

.Header__CartIcon {
  display: none;
  position: relative;
}

.Header__CartIcon svg {
  width: 17px;
  height: 20px;
}

.Header__CartDot {
  display: none;
  position: absolute;
  top: -2px;
  right: -4px;
  width: 6px;
  height: 6px;
  background: var(--heading-color);
  border-radius: 50%;
}

.Header__CartDot.has-items {
  display: block;
}

.Header__SearchIcon {
  display: none;
}

.Header__SearchIcon svg {
  width: 18px;
  height: 17px;
}

/* ==========================================================================
   Slideshow / Hero
   ========================================================================== */
.Slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.Slideshow--fullscreen {
  height: 100vh;
  min-height: 500px;
}

.Slideshow__Carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.Slideshow__Slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
}

.Slideshow__Slide.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.Slideshow__ImageContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.Slideshow__ImageContainer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 50%, transparent 100%);
}

.Slideshow__ImageContainer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Slideshow__ImageContainer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Slideshow__Content {
  position: absolute;
  z-index: 10;
  color: #ffffff;
  padding: 60px;
}

.Slideshow__Content--bottomLeft {
  bottom: 0;
  left: 0;
}

.Slideshow__Content--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.SectionHeader__SubHeading {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  opacity: 0.85;
}

.SectionHeader__Heading {
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.SectionHeader__Heading--emphasize {
  font-style: italic;
}

/* Slideshow Dots */
.Slideshow__Dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 12px;
}

.Slideshow__Dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  transition: background var(--transition-base);
}

.Slideshow__Dot.is-active {
  background: #ffffff;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.Button {
  display: inline-block;
  padding: 12px 28px;
  font-family: var(--heading-font-family);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: color var(--transition-base);
  cursor: pointer;
  z-index: 1;
}

.Button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  transform: translateY(100%);
  transition: transform var(--transition-base);
  z-index: -1;
}

.Button:hover {
  opacity: 1;
}

.Button:hover::before {
  transform: translateY(0);
}

/* White button on dark backgrounds */
.Slideshow .Button {
  color: #ffffff;
  border-color: #ffffff;
}

.Slideshow .Button:hover {
  color: #363636;
}

.Slideshow .Button::before {
  background: #ffffff;
}

.Button--primary {
  background: var(--button-background);
  color: var(--button-text-color);
  border-color: var(--button-background);
}

.Button--primary::before {
  background: var(--heading-color);
}

.Button--primary:hover {
  color: #ffffff;
  border-color: var(--heading-color);
}

/* ==========================================================================
   Section Styling
   ========================================================================== */
.Section {
  padding: 60px 0;
}

.Section--spacingNormal {
  padding: 80px 0;
}

.Section--bordered {
  border-top: 1px solid var(--border-color);
}

.SectionHeader--center {
  text-align: center;
  margin-bottom: 50px;
}

.SectionHeader--center .SectionHeader__SubHeading {
  color: var(--text-color-light);
  margin-bottom: 0.5rem;
  opacity: 1;
}

.SectionHeader--center .SectionHeader__Heading {
  margin-bottom: 0;
  font-style: italic;
}

/* ==========================================================================
   Product Grid
   ========================================================================== */
.ProductList--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--product-grid-gap);
  padding: 0 var(--container-padding);
  max-width: calc(var(--container-max-width) + var(--container-padding) * 2);
  margin: 0 auto;
}

.ProductItem {
  position: relative;
}

.ProductItem__ImageWrapper {
  position: relative;
  display: block;
  background: var(--product-image-bg);
  overflow: hidden;
}

.ProductItem__ImageWrapper .AspectRatio {
  position: relative;
  padding-bottom: 100%;
}

.ProductItem__ImageWrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.ProductItem__Image--alternate {
  opacity: 0;
}

.ProductItem__ImageWrapper:hover .ProductItem__Image--alternate {
  opacity: 1;
}

.ProductItem__ImageWrapper:hover .ProductItem__Image--primary {
  opacity: 0;
}

.ProductItem__LabelList {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}

.ProductItem__Label {
  display: inline-block;
  font-family: var(--heading-font-family);
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-color-light);
  background: #ffffff;
  padding: 4px 8px;
}

.ProductItem__Label--onSale {
  color: var(--product-sale-price-color);
}

.ProductItem__Info {
  padding: 1rem 0;
}

.ProductItem__Info--center {
  text-align: center;
}

.ProductItem__Title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.ProductItem__Title a {
  color: inherit;
}

.ProductItem__PriceList {
  font-size: 0.6875rem;
  font-weight: 700;
}

.ProductItem__Price {
  color: var(--text-color-light);
}

.ProductItem__Price--sale {
  color: var(--product-sale-price-color);
}

.ProductItem__Price--compare {
  text-decoration: line-through;
  opacity: 0.6;
  margin-left: 0.5rem;
}

/* Section Footer */
.SectionFooter {
  text-align: center;
  margin-top: 50px;
  padding-top: 30px;
}

/* ==========================================================================
   Image with Text
   ========================================================================== */
.ImageWithText {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
}

.ImageWithText--reverse {
  direction: rtl;
}

.ImageWithText--reverse > * {
  direction: ltr;
}

.ImageWithText__ImageWrapper {
  position: relative;
  overflow: hidden;
}

.ImageWithText__ImageWrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ImageWithText__Content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px;
}

.ImageWithText__Content .SectionHeader__SubHeading {
  opacity: 1;
  color: var(--text-color-light);
}

.ImageWithText__Content .SectionHeader__Heading {
  font-style: italic;
}

.ImageWithText__Content .Rte {
  margin-top: 1rem;
  color: var(--text-color-light);
  line-height: 1.8;
}

.ImageWithText__Content .ButtonGroup {
  margin-top: 2rem;
}

/* ==========================================================================
   Collection List / Image Grid
   ========================================================================== */
.CollectionList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 var(--container-padding);
  max-width: calc(var(--container-max-width) + var(--container-padding) * 2);
  margin: 0 auto;
}

.CollectionItem {
  position: relative;
  overflow: hidden;
}

.CollectionItem__ImageWrapper {
  position: relative;
  padding-bottom: 120%;
  overflow: hidden;
}

.CollectionItem__ImageWrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.CollectionItem:hover img {
  transform: scale(1.05);
}

.CollectionItem__Content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  color: #ffffff;
}

.CollectionItem__Title {
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.SiteFooter {
  border-top: 1px solid var(--footer-border-color);
  background: var(--footer-background);
  padding: 60px 0 40px;
}

.SiteFooter__Inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  text-align: center;
}

.SiteFooter__Title {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: var(--footer-heading-color);
}

.SiteFooter__Content {
  color: var(--footer-text-color);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}

.SiteFooter__Newsletter {
  display: flex;
  max-width: 500px;
  margin: 0 auto 3rem;
}

.SiteFooter__Newsletter input[type="email"] {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  background: transparent;
  font-size: 0.8125rem;
  outline: none;
  transition: border-color var(--transition-base);
}

.SiteFooter__Newsletter input[type="email"]:focus {
  border-color: var(--heading-color);
}

.SiteFooter__Newsletter button {
  padding: 12px 24px;
  background: var(--button-background);
  color: var(--button-text-color);
  border: 1px solid var(--button-background);
  font-family: var(--heading-font-family);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}

.SiteFooter__Newsletter button:hover {
  background: var(--heading-color);
  color: #ffffff;
  border-color: var(--heading-color);
}

.SiteFooter__Aside {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--footer-border-color);
}

.SiteFooter__Copyright {
  font-family: var(--heading-font-family);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--footer-text-color);
}

.SiteFooter__Copyright a {
  color: inherit;
}

.SiteFooter__PaymentIcons {
  display: flex;
  gap: 8px;
}

.SiteFooter__PaymentIcons svg {
  width: 38px;
  height: 24px;
}

/* ==========================================================================
   Mobile Sidebar / Drawer
   ========================================================================== */
.Drawer {
  position: fixed;
  top: 0;
  z-index: 200;
  width: 360px;
  max-width: 85vw;
  height: 100%;
  background: var(--background);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.4s var(--drawer-transition);
  box-shadow: 4px 0 20px rgba(0,0,0,0.1);
}

.Drawer--fromLeft {
  left: 0;
  transform: translateX(-100%);
}

.Drawer--fromRight {
  right: 0;
  transform: translateX(100%);
}

.Drawer.is-open {
  transform: translateX(0);
}

.Drawer__Header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 25px;
  border-bottom: 1px solid var(--border-color);
}

.Drawer__Title {
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.Drawer__Close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.Drawer__Close svg {
  width: 16px;
  height: 14px;
  stroke: currentColor;
}

.Drawer__Content {
  padding: 25px;
}

/* Sidebar Navigation */
.SidebarMenu__Nav a {
  display: block;
  padding: 0.75rem 0;
  font-family: var(--heading-font-family);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--heading-color);
  border-bottom: 1px solid var(--border-color);
}

.SidebarMenu__SubNav a {
  padding-left: 1rem;
  font-size: 0.6875rem;
  color: var(--text-color-light);
  letter-spacing: 0.15em;
}

.Collapsible__Button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 0;
  font-family: var(--heading-font-family);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--heading-color);
  border: none;
  border-bottom: 1px solid var(--border-color);
  background: none;
  cursor: pointer;
  text-align: left;
}

.Collapsible__Plus::before {
  content: '+';
  font-size: 1rem;
}

.Collapsible.is-open .Collapsible__Plus::before {
  content: '−';
}

.Collapsible__Inner {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.Collapsible.is-open .Collapsible__Inner {
  max-height: 500px;
}

/* Page Overlay */
.PageOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.PageOverlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   Cart Drawer
   ========================================================================== */
.Cart__Empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-color-light);
}

/* ==========================================================================
   Search Overlay
   ========================================================================== */
.SearchOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--background);
  padding: 30px 40px;
  transform: translateY(-100%);
  transition: transform 0.4s var(--drawer-transition);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.SearchOverlay.is-open {
  transform: translateY(0);
}

.SearchOverlay__Inner {
  display: flex;
  align-items: center;
  max-width: var(--container-max-width);
  margin: 0 auto;
  gap: 1rem;
}

.SearchOverlay__Input {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-bottom: 2px solid var(--heading-color);
  font-family: var(--heading-font-family);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  background: transparent;
  outline: none;
}

.SearchOverlay__Close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.SearchOverlay__Close svg {
  width: 16px;
  height: 14px;
}

/* ==========================================================================
   WooCommerce Overrides
   ========================================================================== */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--product-grid-gap);
}

.woocommerce ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: block;
}

.woocommerce ul.products li.product img {
  background: var(--product-image-bg);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--heading-font-family);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding-top: 1rem;
}

.woocommerce ul.products li.product .price {
  font-family: var(--heading-font-family);
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-color-light);
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: var(--heading-font-family) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  border-radius: 0 !important;
  background: var(--button-background) !important;
  color: var(--button-text-color) !important;
}

/* Single Product */
.woocommerce div.product .product_title {
  font-family: var(--heading-font-family);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.woocommerce div.product p.price {
  font-family: var(--heading-font-family);
  font-size: 0.875rem;
  font-weight: 700;
}

.woocommerce div.product .woocommerce-product-gallery {
  background: var(--product-image-bg);
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.6s ease forwards;
}

.animate-fadeInUp {
  animation: fadeInUp 0.8s ease forwards;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

/* Element staggering on scroll */
[data-stagger] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-stagger].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 1200px) {
  :root {
    --product-grid-gap: 40px;
    --container-padding: 30px;
  }

  .ProductList--grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 999px) {
  .Header__MainNav,
  .Header__SecondaryNav ul li:not(:last-child):not(:nth-last-child(2)) {
    display: none;
  }

  .Header__MobileToggle,
  .Header__CartIcon,
  .Header__SearchIcon {
    display: flex;
  }

  .Header__SecondaryNav {
    display: none;
  }

  .Header__FlexItem:last-child {
    gap: 16px;
  }

  .ProductList--grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .ImageWithText {
    grid-template-columns: 1fr;
  }

  .ImageWithText__Content {
    padding: 50px 30px;
  }

  .CollectionList {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .Slideshow__Content {
    padding: 30px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --container-padding: 20px;
    --header-base-height: 60px;
  }

  .u-h1 { font-size: 1.75rem; }

  .Slideshow--fullscreen {
    height: 100svh;
  }

  .CollectionList {
    grid-template-columns: 1fr;
  }

  .SiteFooter__Newsletter {
    flex-direction: column;
    gap: 10px;
  }

  .SiteFooter__Aside {
    flex-direction: column;
    gap: 1rem;
  }
}

/* ==========================================================================
   Skip Link
   ========================================================================== */
.SkipLink {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--heading-color);
  color: #ffffff;
  padding: 12px 24px;
  font-size: 0.875rem;
  transition: top 0.3s;
}

.SkipLink:focus {
  top: 10px;
}

/* ==========================================================================
   Page Transition
   ========================================================================== */
.LoadingBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--button-background);
  z-index: 999;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.LoadingBar.is-loading {
  transform: scaleX(0.7);
}

.LoadingBar.is-done {
  transform: scaleX(1);
  transition: transform 0.2s ease;
}

/* ==========================================================================
   Frameity Prints v1.1 — Overrides + new components
   ========================================================================== */

/* --- Typography overrides for new components --- */
body {
  font-size: var(--default-text-font-size);
  color: var(--text-color);
}

.u-textCaps {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.u-textMuted { color: var(--text-color-light); }
.u-textSm    { font-size: 0.875rem; }
.u-textXs    { font-size: 0.75rem; }
.u-fwBold    { font-weight: 700; }

/* --- Container --- */
.Container { max-width: var(--container-max-width); padding: 0 var(--container-padding); }

/* --- Announcement bar (truck icon + text) --- */
.AnnouncementBar {
  background: var(--announcement-bg);
  color: var(--announcement-color);
  padding: 10px 16px;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.AnnouncementBar__Wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.AnnouncementBar__Icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.AnnouncementBar__Icon svg { width: 100%; height: 100%; }
.AnnouncementBar__Content {
  margin: 0;
  font-weight: 600;
  font-family: var(--text-font-family);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Site header (override) --- */
.SiteHeader {
  background: var(--header-background);
  border-bottom: 1px solid var(--header-border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}
.SiteHeader--transparent,
.SiteHeader--transparent.is-scrolled {
  background: var(--header-background);
  border-bottom-color: var(--header-border-color);
}

.Header__Wrapper {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  height: var(--header-base-height);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

.Header__Brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--heading-color);
}
.Header__Wordmark {
  font-family: var(--heading-font-family);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--heading-color);
  line-height: 1;
  white-space: nowrap;
}

/* Reset old multi-flex header layout to play nice with new grid */
.Header__FlexItem { display: contents; }
.Header__FlexItem--logo { display: contents; }

/* --- Primary nav (desktop) --- */
.Header__PrimaryNav {
  display: none;
  min-width: 0;
}
.Header__PrimaryNav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.Header__PrimaryNav a {
  font-family: var(--text-font-family);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--heading-color);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 0;
  transition: color var(--transition-base);
}
.Header__PrimaryNav a:hover { color: var(--text-color-light); opacity: 1; }

/* --- Inline search (desktop) --- */
.Header__SearchBar {
  display: none;
  position: relative;
  flex: 1;
  max-width: 340px;
  margin: 0 16px;
}
.Header__SearchBar input {
  width: 100%;
  height: 40px;
  padding: 0 44px 0 16px;
  border-radius: var(--button-radius-pill);
  border: 1px solid var(--border-color-strong);
  background: var(--light-background);
  font-family: var(--text-font-family);
  font-size: 0.875rem;
  color: var(--text-color);
}
.Header__SearchBar input:focus {
  outline: 2px solid var(--button-background);
  outline-offset: 2px;
}
.Header__SearchBar button {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.Header__SearchBar svg { width: 18px; height: 18px; }

/* --- Right icon cluster --- */
.Header__Icons {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.Header__IconButton {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--heading-color);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.Header__IconButton svg { width: 22px; height: 22px; }
.Header__IconButton:hover { opacity: 1; color: var(--text-color-light); }
.Header__IconBadge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--button-background);
  color: var(--button-text-color);
  font-size: 0.6875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.Header__MobileToggle {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--heading-color);
}
.Header__MobileToggle svg { width: 24px; height: 24px; }
.Header__MobileToggle span { display: none; }

/* hide old/legacy header bits that we replaced */
.Header__MainNav,
.Header__SecondaryNav,
.Header__SearchIcon,
.Header__CartIcon { display: none !important; }

/* Desktop: show primary nav + search; collapse hamburger */
@media (min-width: 960px) {
  .Header__Wrapper {
    grid-template-columns: auto 1fr auto auto;
    gap: 24px;
  }
  .Header__MobileToggle { display: none; }
  .Header__PrimaryNav { display: flex; }
  .Header__SearchBar { display: block; }
}

/* --- Breadcrumb --- */
.Breadcrumb {
  font-size: 0.875rem;
  color: var(--text-color-light);
  padding: 16px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.Breadcrumb a { color: var(--text-color-light); text-decoration: none; }
.Breadcrumb a:hover { color: var(--heading-color); opacity: 1; }
.Breadcrumb__Sep {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--text-color-muted);
}
.Breadcrumb__Sep svg { width: 100%; height: 100%; }
.Breadcrumb__Current { color: var(--heading-color); font-weight: 600; }

/* --- Archive hero banner --- */
.ArchiveHero {
  background: var(--hero-bg);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  margin: 8px 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.ArchiveHero__Body {
  max-width: 480px;
}
.ArchiveHero__Title {
  font-family: var(--heading-font-family);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--heading-color);
  text-transform: uppercase;
}
.ArchiveHero__Copy {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #2a2a2a;
  margin: 0;
}
.ArchiveHero__Media {
  display: none; /* image is optional on mobile; design shows it inline */
  text-align: right;
}
.ArchiveHero__Media img {
  max-height: 200px;
  width: auto;
  margin-left: auto;
}
.ArchiveHero__Dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 6px;
}
.ArchiveHero__Dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  border: 0;
  padding: 0;
}
.ArchiveHero__Dot.is-active { background: #111; }
@media (min-width: 720px) {
  .ArchiveHero {
    grid-template-columns: 1.1fr 1fr;
    padding: 40px 36px;
    gap: 24px;
    min-height: 240px;
  }
  .ArchiveHero__Media { display: block; }
  .ArchiveHero__Media img { max-height: 240px; }
}

/* --- Results bar (count + filter) --- */
.ResultsBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 20px;
}
.ResultsBar__Count {
  font-size: 0.9375rem;
  color: var(--text-color-light);
}
.ResultsBar__Filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--button-radius-pill);
  background: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--heading-color);
}
.ResultsBar__Filter svg { width: 18px; height: 18px; }

/* --- Product grid (Frameity Prints) --- */
.ProductGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--product-grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 720px) { .ProductGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .ProductGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ProductCard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
}
.ProductCard__Media {
  position: relative;
  display: block;
  background: var(--card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
}
.ProductCard__Media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.ProductCard:hover .ProductCard__Media img { transform: scale(1.03); }
.ProductCard__Wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--heading-color);
  cursor: pointer;
  z-index: 2;
}
.ProductCard__Wishlist svg { width: 22px; height: 22px; }
.ProductCard__Wishlist:hover { color: var(--product-sale-price-color); }

.ProductCard__Label {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--button-radius-pill);
  background: #111;
  color: #fff;
  z-index: 2;
}
.ProductCard__Label--sale  { background: var(--product-sale-price-color); }
.ProductCard__Label--soldOut { background: #6b6b6b; }

.ProductCard__Title {
  font-family: var(--text-font-family);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--heading-color);
  margin: 0 0 4px;
}
.ProductCard__Title a { color: inherit; text-decoration: none; }
.ProductCard__Price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--heading-color);
  margin: 0 0 2px;
}
.ProductCard__Price del { color: var(--text-color-muted); font-weight: 400; margin-right: 6px; }
.ProductCard__Subtitle {
  font-size: 0.8125rem;
  color: var(--text-color-light);
  margin: 0;
}

/* hide legacy ProductItem visual styling on archive */
.products.columns-4 .ProductItem,
.products .ProductItem { background: transparent; }

/* --- Trust badges row (footer top) --- */
.TrustBadges {
  background: var(--trust-bg);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 720px) { .TrustBadges { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.TrustBadge {
  display: flex;
  align-items: center;
  gap: 12px;
}
.TrustBadge__Icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--heading-color);
  flex: 0 0 auto;
}
.TrustBadge__Icon svg { width: 100%; height: 100%; }
.TrustBadge__Body { display: flex; flex-direction: column; gap: 2px; }
.TrustBadge__Title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.2;
}
.TrustBadge__Subtitle {
  font-size: 0.75rem;
  color: var(--text-color-light);
  line-height: 1.2;
}

/* --- Footer (minimal restyle) --- */
.SiteFooter {
  background: var(--footer-background);
  border-top: 1px solid var(--footer-border-color);
  padding: 40px 0 28px;
  margin-top: 60px;
}
.SiteFooter__Inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.SiteFooter__Block--newsletter,
.SiteFooter__PaymentIcons,
.SiteFooter__Aside { all: revert; }
.SiteFooter__Bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0 0;
  border-top: 1px solid var(--footer-border-color);
  margin-top: 24px;
}
.SiteFooter__Nav ul {
  display: flex; flex-wrap: wrap; gap: 16px;
  list-style: none; margin: 0; padding: 0;
}
.SiteFooter__Nav a {
  font-size: 0.8125rem;
  color: var(--footer-text-color);
  text-decoration: none;
}
.SiteFooter__Nav a:hover { color: var(--heading-color); opacity: 1; }
.SiteFooter__Copy {
  font-size: 0.75rem;
  color: var(--text-color-light);
}

/* Hide legacy footer chrome we replaced */
.SiteFooter .SiteFooter__Block--newsletter,
.SiteFooter .SiteFooter__PaymentIcons,
.SiteFooter > .SiteFooter__Inner > .SiteFooter__Aside { display: none; }

/* ==========================================================================
   Frameity Prints v1.2 — Single product page
   ========================================================================== */
.ProductPage { padding-bottom: 40px; }

.ProductPage__Top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 8px;
}
@media (min-width: 960px) {
  .ProductPage__Top {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
  }
}

/* --- Gallery --- */
.ProductGallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  position: relative;
}
.ProductGallery__Thumbs {
  display: none;
  list-style: none; margin: 0; padding: 0;
}
.ProductGallery__Main {
  position: relative;
  background: var(--card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.ProductGallery__Image {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.ProductGallery__Image.is-active { opacity: 1; }
.ProductGallery__Wishlist {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px;
  background: #fff;
  border: 0;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 4;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  cursor: pointer;
  color: var(--heading-color);
}
.ProductGallery__Wishlist svg { width: 20px; height: 20px; }
.ProductGallery__Wishlist:hover { color: var(--product-sale-price-color); }

.ProductGallery__Nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  background: #fff;
  border: 0; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--heading-color);
  z-index: 3;
}
.ProductGallery__Nav svg { width: 18px; height: 18px; }
.ProductGallery__Nav--prev { left: 10px; }
.ProductGallery__Nav--next { right: 10px; }

@media (min-width: 720px) {
  .ProductGallery {
    grid-template-columns: 84px 1fr;
    gap: 16px;
  }
  .ProductGallery__Thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ProductGallery__Thumb {
    width: 84px; height: 84px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    overflow: hidden;
    cursor: pointer;
  }
  .ProductGallery__Thumb img { width: 100%; height: 100%; object-fit: cover; }
  .ProductGallery__Thumb.is-active { border-color: #111; }
  .ProductGallery__Main { aspect-ratio: 4 / 5; }
}

/* --- Summary --- */
.ProductSummary { display: flex; flex-direction: column; gap: 18px; }
.ProductSummary__Title {
  font-family: var(--heading-font-family);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--heading-color);
}
.ProductSummary__Rating {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.875rem;
  color: var(--text-color-light);
}
.ProductSummary__Rating .star-rating { color: var(--product-star-rating); font-size: 1rem; }
.ProductSummary__ReviewCount { color: var(--text-color-light); }
.ProductSummary__Price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--heading-color);
  margin: 0;
}
.ProductSummary__Price del { color: var(--text-color-muted); font-weight: 400; margin-right: 8px; }
.ProductSummary__Price ins { text-decoration: none; }

/* --- Variations --- */
.VariationGroup { display: flex; flex-direction: column; gap: 10px; }
.VariationGroup__Header {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--heading-color);
}
.VariationGroup__Selected {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-color-light);
}
.VariationGroup__Options {
  display: flex; flex-wrap: wrap;
  gap: 10px;
}

.Swatch {
  display: inline-flex;
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 2px solid transparent;
  padding: 2px;
  transition: border-color var(--transition-base);
}
.Swatch.is-selected { border-color: #111; }
.Swatch__Color {
  width: 100%; height: 100%;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  display: block;
}

.Pill {
  display: inline-flex;
  cursor: pointer;
  padding: 0;
}
.Pill__Label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 56px; height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--heading-color);
  transition: border-color var(--transition-base), background var(--transition-base);
}
.Pill.is-selected .Pill__Label {
  border-color: #111;
  background: #fff;
  font-weight: 700;
}

/* --- Quantity stepper --- */
.QtyStepper { display: flex; flex-direction: column; gap: 8px; }
.QtyStepper__Label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--heading-color);
}
.QtyStepper__Group {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: max-content;
}
.QtyStepper__Btn {
  width: 38px; height: 38px;
  background: #fff;
  border: 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--heading-color);
  cursor: pointer;
}
.QtyStepper__Input {
  width: 56px; height: 38px;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  font-family: var(--text-font-family);
  font-size: 0.9375rem;
  font-weight: 500;
  -moz-appearance: textfield;
  appearance: textfield;
}
.QtyStepper__Input::-webkit-outer-spin-button,
.QtyStepper__Input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Buy buttons --- */
.BuyButtons { display: flex; flex-direction: column; gap: 10px; }
.Button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--heading-font-family);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transition-base), background var(--transition-base);
}
.Button--primary {
  background: #111;
  color: #fff;
  border-color: #111;
}
.Button--primary:hover { opacity: 0.88; }
.Button--secondary {
  background: #fff;
  color: #111;
  border-color: #111;
}
.Button--secondary:hover { background: #f7f7f7; }
.BuyButtons__Add,
.BuyButtons__Now { width: 100%; }

/* --- Inline trust row --- */
.ProductSummary__InlineTrust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.InlineTrust__Item {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.75rem;
}
.InlineTrust__Icon { width: 28px; height: 28px; color: var(--heading-color); flex: 0 0 auto; }
.InlineTrust__Icon svg { width: 100%; height: 100%; }
.InlineTrust__Body { display: flex; flex-direction: column; line-height: 1.2; }
.InlineTrust__Title { font-weight: 700; color: var(--heading-color); }
.InlineTrust__Sub   { color: var(--text-color-light); }

/* --- Feature icons box --- */
.FeatureGrid {
  margin: 28px 0;
  padding: 18px 16px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (min-width: 720px) { .FeatureGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.FeatureGrid__Item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.75rem;
}
.FeatureGrid__Icon {
  width: 28px; height: 28px;
  color: var(--heading-color);
  flex: 0 0 auto;
}
.FeatureGrid__Icon svg { width: 100%; height: 100%; }
.FeatureGrid__Body { display: flex; flex-direction: column; line-height: 1.25; }
.FeatureGrid__Title { font-weight: 700; color: var(--heading-color); font-size: 0.8125rem; }
.FeatureGrid__Sub   { color: var(--text-color-light); }

/* --- Description + Video two-up --- */
.ProductBlocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 28px 0 32px;
}
@media (min-width: 960px) {
  .ProductBlocks--two { grid-template-columns: 1fr 1fr; }
}
.ProductBlock {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
}
.ProductBlock__Title,
.VideoBlock__Title {
  font-family: var(--heading-font-family);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.ProductBlock__Body { font-size: 0.9375rem; line-height: 1.6; color: var(--text-color); }
.ProductBlock__Body ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ProductBlock__Body ul li {
  position: relative;
  padding-left: 22px;
  font-size: 0.875rem;
  color: var(--text-color);
}
.ProductBlock__Body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}
.VideoBlock__Player,
.VideoBlock__Embed iframe {
  width: 100%;
  border-radius: var(--radius-sm);
  display: block;
  background: #000;
}
.VideoBlock__Embed { aspect-ratio: 16 / 10; overflow: hidden; }
.VideoBlock__Embed iframe { width: 100%; height: 100%; border: 0; }
.VideoBlock__Player { aspect-ratio: 16 / 10; }

/* --- Related --- */
.RelatedProducts { margin-top: 32px; }
.RelatedProducts__Title {
  font-family: var(--heading-font-family);
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 18px;
  color: var(--heading-color);
}

/* --- Archive hero: image positioning + bleed --- */
.ArchiveHero {
  background: var(--hero-bg);
  background-image: linear-gradient(135deg, var(--hero-bg) 0%, var(--hero-bg-alt) 100%);
}
.ArchiveHero__Media img {
  max-height: 280px;
  object-fit: contain;
  margin-left: auto;
}

/* ==========================================================================
   Frameity Prints v1.3 — Front page
   ========================================================================== */
.HomeHero {
  padding: 16px 0 0;
}
.HomeHero__Stage {
  position: relative;
  background: var(--hero-bg);
  background-image: linear-gradient(135deg, var(--hero-bg) 0%, var(--hero-bg-alt) 100%);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 320px;
}
.HomeHero__Slide {
  display: none;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 16px;
  padding: 32px 24px;
}
.HomeHero__Slide.is-active { display: grid; }
.HomeHero__Body { max-width: 540px; }
.HomeHero__Sub {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-color);
  margin: 0 0 10px;
}
.HomeHero__Title {
  font-family: var(--heading-font-family);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--heading-color);
}
.HomeHero__Btn { display: inline-flex; }
.HomeHero__Media { display: none; }
.HomeHero__Media img { max-height: 360px; object-fit: contain; margin-left: auto; }
.HomeHero__Dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 8px;
}
.HomeHero__Dot {
  width: 9px; height: 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.HomeHero__Dot.is-active { background: #111; }
@media (min-width: 720px) {
  .HomeHero__Slide {
    grid-template-columns: 1fr 1fr;
    padding: 56px 48px;
    min-height: 380px;
  }
  .HomeHero__Media { display: block; }
}

/* --- Home sections --- */
.HomeSection {
  padding: 48px 0;
}
.HomeSection__Header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin-bottom: 24px;
}
.HomeSection__Eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-color-light);
}
.HomeSection__Title {
  font-family: var(--heading-font-family);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--heading-color);
  margin: 0 0 24px;
  text-align: center;
}
.HomeSection__Footer {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* --- Shop by Category --- */
.ShopByCategory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 720px) { .ShopByCategory { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.CategoryCard { margin: 0; }
.CategoryCard__Link {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-decoration: none;
  background: var(--card-bg);
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  transition: transform var(--transition-base);
}
.CategoryCard__Link:hover { opacity: 1; transform: translateY(-2px); }
.CategoryCard__Image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.CategoryCard__Label {
  position: relative;
  z-index: 2;
  padding: 8px 14px;
  margin: 0 0 14px;
  background: rgba(255,255,255,0.92);
  color: var(--heading-color);
  font-family: var(--heading-font-family);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--button-radius-pill);
  backdrop-filter: blur(4px);
}

/* ==========================================================================
   Frameity Prints v1.3 — Cart page
   ========================================================================== */
.CartPage { padding: 16px 0 48px; }
.CartPage__Header {
  text-align: center;
  margin: 16px 0 24px;
}
.CartPage__Title {
  font-family: var(--heading-font-family);
  font-weight: 800;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.CartPage__Subtitle {
  color: var(--text-color-light);
  font-size: 0.9375rem;
  margin: 0;
}

/* --- Cart items (mobile: stack, desktop: table-like) --- */
.CartItems { display: flex; flex-direction: column; gap: 16px; }
.CartItems__Head {
  display: none;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-color-light);
}
.CartItems__HeadProduct { text-align: left; }
.CartItems__HeadQty,
.CartItems__HeadTotal { text-align: center; }

.CartItem {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-areas:
    "thumb info"
    "thumb qty"
    "thumb total";
  gap: 6px 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
}
.CartItem__Product {
  grid-area: info;
  display: contents;
}
.CartItem__Thumb {
  grid-area: thumb;
  width: 96px;
  height: 96px;
  background: var(--card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  align-self: start;
}
.CartItem__Thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.CartItem__Info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.CartItem__Name {
  font-family: var(--text-font-family);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--heading-color);
  text-decoration: none;
  line-height: 1.3;
}
.CartItem__Meta {
  font-size: 0.8125rem;
  color: var(--text-color-light);
}
.CartItem__Meta dl { margin: 0; display: flex; flex-wrap: wrap; gap: 0 12px; }
.CartItem__Meta dt { display: inline; margin: 0; font-weight: 500; }
.CartItem__Meta dt::after { content: ": "; }
.CartItem__Meta dd { display: inline; margin: 0; }
.CartItem__Remove {
  font-size: 0.8125rem;
  color: var(--text-color-light);
  text-decoration: underline;
  margin-top: 4px;
  align-self: flex-start;
}
.CartItem__Remove:hover { color: var(--heading-color); opacity: 1; }
.CartItem__Qty   { grid-area: qty;   justify-self: start; }
.CartItem__Total { grid-area: total; justify-self: start; font-weight: 700; font-size: 0.9375rem; }

.QtyStepper--cart .QtyStepper__Group { height: 36px; }
.QtyStepper--cart .QtyStepper__Btn  { width: 32px; height: 36px; }
.QtyStepper--cart .QtyStepper__Input { width: 42px; height: 36px; font-size: 0.875rem; }

@media (min-width: 720px) {
  .CartItems__Head {
    display: grid;
    grid-template-columns: 1fr 160px 140px;
    gap: 16px;
    align-items: center;
  }
  .CartItem {
    grid-template-columns: 96px 1fr 160px 140px;
    grid-template-areas: "thumb info qty total";
    padding: 20px 0;
  }
  .CartItem__Qty   { justify-self: center; }
  .CartItem__Total { justify-self: end; }
}

.CartItems__Foot {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
}
.CartItems__Update {
  background: transparent;
  border: 1px solid var(--border-color-strong);
  padding: 8px 16px;
  border-radius: var(--button-radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--heading-color);
}

/* --- Aside (order note + totals) --- */
.CartPage__Aside {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 16px;
}
@media (min-width: 960px) {
  .CartPage__Aside {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
    gap: 32px;
  }
}

.CartOrderNote {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 12px 0;
}
.CartOrderNote__Summary {
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--heading-color);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.CartOrderNote__Summary::-webkit-details-marker { display: none; }
.CartOrderNote__Summary::after {
  content: "›";
  font-size: 1.5rem;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform var(--transition-base);
  color: var(--text-color-light);
}
.CartOrderNote[open] .CartOrderNote__Summary::after { transform: rotate(270deg); }
.CartOrderNote__Field {
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9375rem;
  resize: vertical;
}
.CartOrderNote__Hint {
  font-size: 0.75rem;
  color: var(--text-color-light);
  margin: 6px 0 0;
}

.CartTotals {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.CartTotals__Card {
  background: var(--light-background);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.CartTotals__Row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  font-size: 0.9375rem;
  color: var(--text-color);
  border-bottom: 1px solid var(--border-color);
}
.CartTotals__Row:last-child { border-bottom: 0; }
.CartTotals__Row--total {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--heading-color);
  padding-top: 14px;
}
.CartTotals__Shipping small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-color-light);
  text-align: right;
}
.CartTotals__Actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.CartTotals__Checkout,
.CartTotals__Continue { width: 100%; }

/* ==========================================================================
   Frameity Prints v1.4 — Homepage Spec
   ========================================================================== */

/* --- Hero (fallback layout when no slider plugin is active) --- */
.HomeHero { padding: 16px 0 0; }
.HomeHero__Plugin .metaslider,
.HomeHero__Plugin .n2-ss-slider { border-radius: var(--radius-md); overflow: hidden; }

.HomeHero__Stage {
  position: relative;
  background: #1a2b4d;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 340px;
}
.HomeHero__Slide {
  display: none;
  background-color: #1a2b4d;
  background-size: cover;
  background-position: center;
  padding: 48px 32px;
  min-height: 340px;
  position: relative;
}
.HomeHero__Slide.is-active { display: block; }
.HomeHero__Slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 60%, transparent 100%);
  pointer-events: none;
}
.HomeHero__Body {
  position: relative;
  z-index: 1;
  max-width: 460px;
  color: #fff;
}
.HomeHero__Sub {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
  opacity: 0.85;
}
.HomeHero__Title {
  font-family: var(--heading-font-family);
  font-weight: 800;
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #fff;
}
.HomeHero__Arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 0;
  z-index: 3;
  cursor: pointer;
  color: #111;
  display: inline-flex; align-items: center; justify-content: center;
}
.HomeHero__Arrow svg { width: 22px; height: 22px; }
.HomeHero__Arrow--prev { left: 14px; }
.HomeHero__Arrow--next { right: 14px; }
.HomeHero__Dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: inline-flex; gap: 8px; z-index: 3;
}
.HomeHero__Dot {
  width: 9px; height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.4);
  border: 0; padding: 0;
}
.HomeHero__Dot.is-active { background: #fff; }
@media (min-width: 720px) {
  .HomeHero__Slide { padding: 80px 64px; min-height: 420px; }
}

/* --- Section heads (left-aligned variant + view-all link) --- */
.HomeSection { padding: 56px 0; }
.HomeSection__Head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.HomeSection__HeadCopy { display: flex; flex-direction: column; gap: 4px; }
.HomeSection__Title--left {
  text-align: left;
  margin: 0;
}
.HomeSection__Sub {
  font-size: 0.9375rem;
  color: var(--text-color-light);
  margin: 0;
}
.HomeSection__ViewAll {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.HomeSection__ViewAll svg { width: 16px; height: 16px; }
.HomeSection__ViewAll:hover { opacity: 1; color: var(--text-color-light); }

/* --- Shop By Category (new card layout: image bg + name + count + arrow chip) --- */
.ShopByCategory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 720px) { .ShopByCategory { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.CategoryCard__Link {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card-bg);
  text-decoration: none;
  transition: transform var(--transition-base);
}
.CategoryCard__Link:hover { transform: translateY(-2px); opacity: 1; }
.CategoryCard__Image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.CategoryCard__Body {
  position: absolute;
  left: 16px; bottom: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.CategoryCard__Name {
  font-size: 1.0625rem;
  font-weight: 700;
}
.CategoryCard__Count {
  font-size: 0.8125rem;
  opacity: 0.9;
}
.CategoryCard__Arrow {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.CategoryCard__Arrow svg { width: 18px; height: 18px; }
.CategoryCard__Label { /* hide old pill label from earlier version */ display: none; }

/* --- Why Shop From Frameity --- */
.HomeSection--whyShop { padding: 36px 0; }
.WhyShop {
  background: var(--hero-bg);
  background-image: linear-gradient(135deg, var(--hero-bg) 0%, var(--hero-bg-alt) 100%);
  border-radius: var(--radius-md);
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}
.WhyShop__Title {
  font-family: var(--heading-font-family);
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  color: var(--heading-color);
}
.WhyShop__Badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 720px) {
  .WhyShop { grid-template-columns: auto 1fr; padding: 28px 32px; gap: 32px; }
  .WhyShop__Badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Best Sellers — rating row on cards --- */
.ProductCard__Rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--text-color-light);
}
.ProductCard__Rating .star-rating { color: var(--product-star-rating); font-size: 0.875rem; }
.ProductCard__RatingCount { color: var(--text-color-light); }

/* --- Carousel (New Arrivals) --- */
.Carousel { position: relative; }
.Carousel__Track {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  display: flex;
  gap: var(--product-grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.Carousel__Track::-webkit-scrollbar { display: none; }
.Carousel__Item {
  flex: 0 0 calc((100% - var(--product-grid-gap)) / 2);
  scroll-snap-align: start;
}
@media (min-width: 720px) { .Carousel__Item { flex-basis: calc((100% - 3 * var(--product-grid-gap)) / 4); } }
@media (min-width: 1100px) { .Carousel__Item { flex-basis: calc((100% - 5 * var(--product-grid-gap)) / 6); } }
.Carousel__Arrow {
  position: absolute;
  top: 36%;
  right: -8px;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  background: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--heading-color);
  z-index: 2;
}
.Carousel__Arrow svg { width: 20px; height: 20px; }

/* --- Watch & Discover --- */
.HomeSection--watch {
  background: #e9ecdf;
  border-radius: var(--radius-md);
}
.HomeSection--watch .Container { padding-top: 40px; padding-bottom: 40px; }
.VideoGrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 720px) { .VideoGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.VideoCard__Media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card-bg);
}
.VideoCard__Media img { width: 100%; height: 100%; object-fit: cover; }
.VideoCard__Play {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.VideoCard__Play::before {
  content: "";
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
}
.VideoCard__Play svg {
  position: relative;
  width: 18px;
  height: 18px;
  color: #111;
  margin-left: 3px;
}
.VideoCard__Title {
  margin: 10px 0 2px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--heading-color);
}
.VideoCard__Title a { color: inherit; text-decoration: none; }
.VideoCard__Sub {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-color-light);
}

/* ==========================================================================
   Frameity Prints v1.4 — Dark Footer
   ========================================================================== */
.SiteFooter--dark {
  background: #0d0d0d;
  color: #cfcfcf;
  border-top: 0;
  margin-top: 80px;
  padding: 48px 0 24px;
}
.SiteFooter--dark .SiteFooter__Inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
.SiteFooter__Grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 720px) {
  .SiteFooter__Grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr;
    gap: 40px;
  }
}
.SiteFooter__Brand { display: flex; flex-direction: column; gap: 14px; }
.SiteFooter__Logo  { text-decoration: none; }
.Header__Wordmark--light { color: #fff; }
.SiteFooter__Tagline {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #b5b5b5;
  margin: 0;
  max-width: 280px;
}
.SiteFooter__Socials {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 8px;
}
.SiteFooter__Socials a {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,0.08);
  transition: background var(--transition-base);
}
.SiteFooter__Socials a:hover { background: rgba(255,255,255,0.18); opacity: 1; }
.SiteFooter__Socials svg { width: 18px; height: 18px; }

.SiteFooter__ColTitle {
  font-family: var(--heading-font-family);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
}
.SiteFooter__List {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.SiteFooter__List a {
  font-size: 0.875rem;
  color: #bfbfbf;
  text-decoration: none;
}
.SiteFooter__List a:hover { color: #fff; opacity: 1; }
.SiteFooter__Hint {
  font-size: 0.75rem;
  color: #6b6b6b;
  margin: 0;
}

.SiteFooter__Col--newsletter .SiteFooter__Copy {
  font-size: 0.8125rem;
  color: #b5b5b5;
  margin: 0 0 12px;
}
.NewsletterForm {
  display: flex;
  align-items: stretch;
  background: rgba(255,255,255,0.08);
  border-radius: var(--button-radius-pill);
  padding: 4px 4px 4px 16px;
  max-width: 300px;
}
.NewsletterForm input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 0.875rem;
}
.NewsletterForm input::placeholder { color: #8a8a8a; }
.NewsletterForm button {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.NewsletterForm button svg { width: 16px; height: 16px; }

.SiteFooter__Pay {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.SiteFooter__Pay svg { display: block; height: 22px; width: auto; }

.SiteFooter__Bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 40px;
  padding-top: 20px;
}
.SiteFooter__Bottom .SiteFooter__Copy { color: #6b6b6b; font-size: 0.75rem; margin: 0; }
.SiteFooter__BottomNav ul { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; }
.SiteFooter__BottomNav a { color: #bfbfbf; font-size: 0.75rem; text-decoration: none; }

/* ==========================================================================
   Frameity Prints v1.5 — Category / Listing page
   ========================================================================== */

/* --- Layout: hero + 2-col grid (sidebar | main) --- */
.ArchiveHero--full {
  padding: 28px 24px;
  min-height: 200px;
  margin: 8px 0 28px;
}
@media (min-width: 720px) { .ArchiveHero--full { padding: 44px 40px; min-height: 240px; } }

.ArchiveLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-bottom: 48px;
}
@media (min-width: 960px) {
  .ArchiveLayout {
    grid-template-columns: 260px 1fr;
    gap: 40px;
  }
}
.ArchiveLayout__Sidebar { display: none; }
@media (min-width: 960px) { .ArchiveLayout__Sidebar { display: block; } }

/* --- Results bar (with sort) --- */
.ResultsBar { gap: 16px; }
.ResultsBar__Right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.SortSelect {
  display: none;
  align-items: center;
  gap: 8px;
}
@media (min-width: 720px) { .SortSelect { display: inline-flex; } }
.SortSelect__Label {
  font-size: 0.875rem;
  color: var(--text-color-light);
}
.SortSelect__Field {
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111' stroke-width='1.5'><path d='M1 1l5 5 5-5'/></svg>") no-repeat right 12px center / 10px;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--button-radius-pill);
  padding: 0 36px 0 16px;
  height: 40px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--heading-color);
  cursor: pointer;
}

/* Filter button: visible on mobile only */
.ResultsBar__Filter { display: inline-flex; }
@media (min-width: 960px) { .ResultsBar__Filter { display: none; } }

/* --- Filter sidebar --- */
.FilterSidebar { font-size: 0.9375rem; }
.FilterSidebar__Header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
}
.FilterSidebar__Title {
  font-family: var(--heading-font-family);
  font-weight: 800;
  font-size: 1rem;
  margin: 0;
  color: var(--heading-color);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.FilterSidebar__Title::after {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M6 12h12M10 18h4'/></svg>") no-repeat center / contain;
}
.FilterSidebar__Close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 0; background: transparent;
  color: var(--heading-color);
}
@media (min-width: 960px) { .FilterSidebar__Close { display: none; } }

.FilterGroup {
  border-bottom: 1px solid var(--border-color);
  padding: 12px 0;
}
.FilterGroup[open] .FilterGroup__Summary::after { transform: rotate(180deg); }
.FilterGroup__Summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--heading-color);
  padding: 6px 22px 6px 0;
}
.FilterGroup__Summary::-webkit-details-marker { display: none; }
.FilterGroup__Summary::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23111' stroke-width='1.5'><path d='M1 1l5 5 5-5'/></svg>") no-repeat center / contain;
  transition: transform var(--transition-base);
}

.FilterGroup__List {
  list-style: none;
  margin: 10px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.FilterOption {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-color);
  text-decoration: none;
}
.FilterOption input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.FilterOption__Check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-color-strong);
  border-radius: 3px;
  background: #fff;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.FilterOption input[type="checkbox"]:checked + .FilterOption__Check,
.FilterOption.is-active .FilterOption__Check {
  background: #111;
  border-color: #111;
}
.FilterOption input[type="checkbox"]:checked + .FilterOption__Check::after,
.FilterOption.is-active .FilterOption__Check::after {
  content: "";
  width: 8px; height: 5px;
  border-left: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.FilterOption__Label { flex: 1; }
.FilterOption__Count { color: var(--text-color-light); font-size: 0.8125rem; }

/* --- Price range (dual slider) --- */
.PriceRange { padding: 12px 4px 4px; }
.PriceRange__Labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--text-color);
  margin-bottom: 12px;
}
.PriceRange__Slider {
  position: relative;
  height: 24px;
}
.PriceRange__Slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  margin: 0;
}
.PriceRange__Slider::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: var(--border-color);
  border-radius: 999px;
}
.PriceRange__Slider input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.PriceRange__Slider input[type="range"]::-moz-range-track { background: transparent; }
.PriceRange__Slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #111;
  cursor: pointer;
  margin-top: -7px;
}
.PriceRange__Slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #111;
  cursor: pointer;
}
.PriceRange__Range {
  font-size: 0.8125rem;
  color: var(--text-color-light);
  margin: 14px 0 0;
  text-align: center;
}

/* --- Swatch + size filter groups --- */
.FilterGroup__Swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
  align-items: center;
}
.SwatchOption {
  cursor: pointer;
  position: relative;
}
.SwatchOption.is-hidden { display: none; }
.SwatchOption input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.SwatchOption__Color {
  display: block;
  width: 26px; height: 26px;
  border-radius: 999px;
  border: 2px solid #fff;
  outline: 1px solid var(--border-color-strong);
  outline-offset: -1px;
  transition: outline-color var(--transition-base);
}
.SwatchOption input:checked + .SwatchOption__Color,
.SwatchOption.is-checked .SwatchOption__Color {
  outline: 2px solid #111;
  outline-offset: 1px;
}
.SwatchOption__More {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-color-light);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0 4px;
}

/* --- Sidebar actions --- */
.FilterSidebar__Actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.FilterSidebar__Apply { width: 100%; }
.FilterSidebar__Clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-color);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--button-radius-pill);
  background: #fff;
}
.FilterSidebar__Clear svg { width: 14px; height: 14px; }

/* --- Drawer for filters (mobile) --- */
#filter-drawer .Drawer__Content { padding: 16px; }
#filter-drawer .FilterSidebar__Header { display: none; } /* drawer has its own header */

/* --- Product card listing variant (Price → Title → Category) --- */
.ProductCard--listing .ProductCard__Price { order: 1; margin: 0 0 4px; }
.ProductCard--listing .ProductCard__Title { order: 2; margin: 0 0 4px; font-weight: 500; }
.ProductCard--listing .ProductCard__Subtitle { order: 3; }
/* Reset flex order for the gallery + wishlist (must stay in DOM order) */
.ProductCard--listing { display: flex; flex-direction: column; }
.ProductCard--listing .ProductCard__Media { order: -2; }
.ProductCard--listing .ProductCard__Wishlist { order: -1; }

/* ==========================================================================
   Frameity Prints v1.6 — Search Results page
   ========================================================================== */
.SearchHero { padding: 24px 0 8px; }
.SearchHero__Eyebrow {
  font-size: 1.125rem;
  color: var(--text-color);
  margin: 0 0 4px;
}
.SearchHero__Title {
  font-family: var(--heading-font-family);
  font-weight: 800;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--heading-color);
}
.SearchHero__Count {
  font-size: 0.9375rem;
  color: var(--text-color-light);
  margin: 0 0 20px;
}

/* --- Search autocomplete dropdown --- */
.Header__SearchBar { position: relative; }
.SearchSuggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  z-index: 50;
  max-height: 420px;
  overflow-y: auto;
}
.SearchSuggest[hidden] { display: none !important; }
.SearchSuggest__List { list-style: none; margin: 0; padding: 6px; }
.SearchSuggest__Item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-color);
}
.SearchSuggest__Item:hover { background: var(--light-background); opacity: 1; }
.SearchSuggest__Thumb {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  object-fit: cover;
  flex: 0 0 auto;
}
.SearchSuggest__Title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1.2;
  margin: 0;
}
.SearchSuggest__Meta {
  font-size: 0.75rem;
  color: var(--text-color-light);
  margin: 2px 0 0;
}
.SearchSuggest__Empty {
  padding: 14px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-color-light);
}

/* --- No results state --- */
.NoResults {
  text-align: center;
  padding: 48px 16px;
  max-width: 560px;
  margin: 0 auto;
}
.NoResults__Illustration { width: 96px; margin: 0 auto 18px; opacity: 0.7; }
.NoResults__Illustration svg { width: 100%; height: auto; }
.NoResults__Title {
  font-family: var(--heading-font-family);
  font-weight: 800;
  font-size: 1.5rem;
  margin: 0 0 8px;
  color: var(--heading-color);
}
.NoResults__Copy {
  font-size: 0.9375rem;
  color: var(--text-color-light);
  margin: 0 0 20px;
}
.NoResults__Form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 380px;
  margin: 0 auto;
  background: var(--light-background);
  border: 1px solid var(--border-color-strong);
  border-radius: var(--button-radius-pill);
  padding: 4px 4px 4px 16px;
}
.NoResults__Form input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  font-size: 0.9375rem;
}
.NoResults__Form button {
  height: 36px;
  padding: 0 18px;
  background: #111;
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* --- Trust strip (above dark footer on non-homepage) --- */
.TrustStrip {
  background: var(--trust-bg);
  padding: 24px 0;
}
.TrustStrip__Inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (min-width: 720px) { .TrustStrip__Inner { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.TrustStrip + .SiteFooter--dark { margin-top: 0; }

/* --- WP-pagination styling (search uses the_posts_pagination) --- */
.pagination,
.navigation.pagination,
.woocommerce-pagination {
  margin: 32px 0;
  display: flex;
  justify-content: center;
}
.nav-links,
.woocommerce-pagination ul,
.page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0; padding: 0;
}
.page-numbers {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--heading-color);
  background: transparent;
}
.page-numbers.current { background: #111; color: #fff; }
.page-numbers:hover { background: var(--card-bg); opacity: 1; }
.page-numbers.prev,
.page-numbers.next { color: var(--text-color-light); }
.page-numbers.prev svg,
.page-numbers.next svg { width: 16px; height: 16px; }