/*
Theme Name: Quotesframe
Theme URI: https://quotesframe.com
Author: CodeArt
Author URI: https://codeart.co.in
Description: Premium minimalist WooCommerce theme for framed quote art and original photography prints. Editorial, Apple-inspired, gallery-style presentation. Built for quotesframe.com.
Version: 2.0.9
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
WC requires at least: 8.0
WC tested up to: 9.0
Text Domain: quotesframe
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================
   QUOTESFRAME — Design Tokens
   ============================================ */

:root {
  /* Color */
  --ink: #0a0a0a;
  --ink-soft: #2b2b2b;
  --gray: #6b6b6b;
  --gray-light: #9a9893;
  --line: #e5e3df;
  --line-soft: #efedea;
  --paper: #ffffff;
  --wall: #f7f6f4;
  --wall-deep: #f1efeb;
  --accent-gold: #b8915f;

  /* Type */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --container: 1280px;
  --section-pad: clamp(64px, 10vw, 152px);
  --gutter: clamp(20px, 4vw, 40px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}

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

a { color: inherit; text-decoration: none; }

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

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

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 500;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.serif-italic {
  font-style: italic;
  font-weight: 400;
}

/* ============================================
   HEADER
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.logo {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 0.01em;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.logo img {
  /* height is set directly via the HTML height="" attribute, driven by
     Theme Options → Header/Footer Logo Height — width:auto here is
     what keeps the image's natural proportions correct at that height. */
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

.logo span {
  color: var(--gray-light);
}

.main-nav {
  display: flex;
  gap: 40px;
}

.main-nav a {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 4px;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--ink);
  transition: width 0.3s ease;
}

.main-nav a:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.icon-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.cart-icon-link {
  position: relative;
}

.cart-count {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 500;
}

.cart-count.is-zero {
  display: none;
}

.menu-toggle {
  display: none;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-top: 1px solid transparent;
}

.mobile-nav.open {
  max-height: 280px;
  border-top: 1px solid var(--line);
}

.mobile-nav a {
  padding: 16px var(--gutter);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}

.mobile-nav a:last-child {
  border-bottom: none;
}

/* ============================================
   HERO
   ============================================ */

.hero {
  padding-top: clamp(72px, 12vw, 140px);
  padding-bottom: clamp(56px, 8vw, 100px);
  text-align: center;
}

.hero-eyebrow {
  margin-bottom: 28px;
}

.hero h1 {
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 1.06;
  max-width: 16ch;
  margin: 0 auto 28px;
}

.hero-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--gray);
  max-width: 46ch;
  margin: 0 auto 44px;
  font-weight: 400;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 17px 36px;
  transition: all 0.25s ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}

.btn-primary:hover {
  background: var(--ink-soft);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-arrow {
  transition: transform 0.25s ease;
}

.btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* Hero visual strip — gallery wall preview */
.hero-strip {
  margin-top: clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: var(--gutter);
  align-items: end;
  padding: 0 var(--gutter);
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.hero-strip .frame-wrap {
  opacity: 0.94;
}

.hero-strip .frame-wrap:nth-child(1),
.hero-strip .frame-wrap:nth-child(3) {
  transform: translateY(28px);
}

/* Hero frames as clickable featured products */
a.hero-frame-link {
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  opacity: 1;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

a.hero-frame-link:hover {
  transform: scale(1.035);
}

.hero-strip a.hero-frame-link:nth-child(1):hover,
.hero-strip a.hero-frame-link:nth-child(3):hover {
  transform: translateY(28px) scale(1.035);
}

a.hero-frame-link:hover .frame {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.05),
    0 32px 56px -16px rgba(0,0,0,0.22),
    0 10px 20px -8px rgba(0,0,0,0.12);
}

a.hero-frame-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

.hero-frame-label {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-align: center;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

a.hero-frame-link:hover .hero-frame-label,
a.hero-frame-link:focus-visible .hero-frame-label {
  opacity: 1;
  transform: translateY(0);
}

.hero-frame-label span {
  color: var(--gray-light);
  margin-left: 6px;
}

/* ============================================
   FRAME MOCKUP — signature element
   ============================================ */

.frame-wrap {
  position: relative;
  background: var(--wall);
  padding: clamp(28px, 6%, 56px) clamp(20px, 5%, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.frame {
  position: relative;
  background: var(--paper);
  padding: 14px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 24px 48px -16px rgba(0,0,0,0.16),
    0 8px 16px -8px rgba(0,0,0,0.08);
  width: 100%;
}

.frame-inner {
  border: 1px solid #d8d6d1;
  padding: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.frame-art {
  width: 100%;
  aspect-ratio: 5 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.frame-art.a4 {
  aspect-ratio: 210 / 297;
}

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

/* Quote-card art styles (CSS-painted placeholders standing in for real photography) */
.art-quote {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11%;
  text-align: center;
}

.art-quote p {
  font-family: var(--serif);
  font-style: italic;
  line-height: 1.35;
}

.art-bloom { background: linear-gradient(165deg, #f3ead9 0%, #e8d4b0 45%, #c9a25f 100%); }
.art-bloom p { color: #4a3a1f; font-size: clamp(13px, 1.6vw, 17px); }

.art-face { background: linear-gradient(170deg, #f6efe6 0%, #ead9bd 55%, #d9b878 100%); }
.art-face p { color: #3d2f17; font-size: clamp(13px, 1.6vw, 17px); }

.art-golden { background: linear-gradient(180deg, #eef0ea 0%, #cdd6c2 55%, #8da17e 100%); }
.art-golden p { color: #2f3a26; font-size: clamp(13px, 1.6vw, 17px); }

.art-lookup { background: linear-gradient(180deg, #e9eef2 0%, #c3d2dd 55%, #7f9aab 100%); }
.art-lookup p { color: #25333d; font-size: clamp(13px, 1.6vw, 17px); }

.art-kerala { background: linear-gradient(180deg, #ece7da 0%, #c9b888 40%, #8a6a45 100%); }
.art-kerala p { color: #ffffff; font-size: clamp(13px, 1.6vw, 17px); text-shadow: 0 1px 12px rgba(0,0,0,0.25); }

.art-sunset { background: linear-gradient(180deg, #f7e3d0 0%, #ecb08a 45%, #b96b51 100%); }
.art-sunset p { color: #3d1f12; font-size: clamp(13px, 1.6vw, 17px); }

.art-minimal { background: linear-gradient(180deg, #f5f5f3 0%, #e2e0db 100%); }
.art-minimal p { color: #2a2a2a; font-size: clamp(13px, 1.6vw, 17px); }

.art-nature { background: linear-gradient(180deg, #eef1e6 0%, #b9c79e 50%, #6f8156 100%); }
.art-nature p { color: #20290f; font-size: clamp(13px, 1.6vw, 17px); }

.art-gift { background: linear-gradient(180deg, #f6ecec 0%, #e3c8c4 55%, #b98e8a 100%); }
.art-gift p { color: #3a201d; font-size: clamp(13px, 1.6vw, 17px); }

.art-sunflower { background: linear-gradient(180deg, #fbf2cf 0%, #f0cf57 55%, #c99a1f 100%); }
.art-sunflower p { color: #3d2c05; font-size: clamp(13px, 1.6vw, 17px); }

.frame-mat-label {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.32);
}

/* Real-photo frame art (replaces CSS-gradient placeholders) */
.frame-art.has-photo {
  background: var(--wall);
}

.frame-art.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Quote / Photo-only type badge, shown on product cards + PDP */
.type-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  background: rgba(255,255,255,0.88);
  padding: 5px 10px;
  z-index: 2;
}

/* ============================================
   SECTION HEADERS
   ============================================ */

.section {
  padding: var(--section-pad) 0;
}

.section-tight {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.section-tight-bottom {
  padding-bottom: clamp(32px, 4vw, 56px);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(40px, 6vw, 64px);
  gap: 24px;
}

.section-header h2 {
  font-size: clamp(28px, 3.6vw, 44px);
}

.section-header .section-link {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}

.section-divider {
  border: none;
  border-top: 1px solid var(--line);
}

.section-intro {
  max-width: 56ch;
  color: var(--gray);
  font-size: 17px;
  margin-top: -36px;
  margin-bottom: clamp(40px, 6vw, 64px);
}

/* ============================================
   PRODUCT GRID
   ============================================ */

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter) calc(var(--gutter) * 0.8);
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card .frame-wrap {
  margin-bottom: 24px;
  transition: background 0.3s ease;
}

.product-card:hover .frame-wrap {
  background: var(--wall-deep);
}

.product-card:hover .frame {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 32px 56px -16px rgba(0,0,0,0.20),
    0 10px 20px -8px rgba(0,0,0,0.10);
  transform: translateY(-3px);
}

.frame {
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.product-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.product-collection {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 8px;
}

.product-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 8px;
}

.product-price {
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 18px;
}

.product-card .btn-view {
  margin-top: auto;
  align-self: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--ink);
}

/* ============================================
   COLLECTIONS STRIP
   ============================================ */

.collections-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
}

.collection-tile {
  background: var(--paper);
  padding: 44px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.25s ease;
  min-height: 150px;
  justify-content: space-between;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Remove double borders on the right and bottom edges */
.collection-tile:nth-child(4n) {
  border-right: none;
}

.collection-tile:hover {
  background: var(--wall);
}

.collection-tile .ct-name {
  font-family: var(--serif);
  font-size: 19px;
}

.collection-tile .ct-count {
  font-size: 12px;
  color: var(--gray-light);
}

.collection-tile .ct-arrow {
  font-size: 13px;
  color: var(--gray);
  align-self: flex-end;
  transition: transform 0.25s ease;
}

.collection-tile:hover .ct-arrow {
  transform: translateX(4px);
  color: var(--ink);
}

/* ============================================
   WHY CHOOSE US STRIP
   ============================================ */

.why-choose-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.why-tile {
  background: var(--paper);
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  min-height: 156px;
  justify-content: center;
  transition: background 0.25s ease;
}

.why-tile:hover {
  background: var(--wall);
}

.why-tile .why-icon {
  color: var(--ink-soft);
  transition: transform 0.3s ease;
}

.why-tile:hover .why-icon {
  transform: translateY(-2px);
}

.why-tile p {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  line-height: 1.4;
  max-width: 13ch;
}

/* ============================================
   EDITORIAL / STORY BLOCK
   ============================================ */

.story-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 100px);
  align-items: center;
}

.story-text .eyebrow {
  margin-bottom: 20px;
}

.story-text h2 {
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.15;
  margin-bottom: 24px;
}

.story-text p {
  color: var(--gray);
  font-size: 16px;
  max-width: 46ch;
  margin-bottom: 16px;
}

.story-text .signature-line {
  margin-top: 28px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(56px, 8vw, 96px) 0 36px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: clamp(48px, 6vw, 72px);
}

.footer-brand .logo {
  margin-bottom: 16px;
  display: block;
}

.footer-brand p {
  color: var(--gray);
  font-size: 14px;
  max-width: 32ch;
}

.footer-col h4 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 20px;
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 12px;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--ink);
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--gray-light);
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.qf-currency-footer .yay-currency-switcher,
.qf-currency-footer select,
.qf-currency-footer .wccs-switcher,
.qf-currency-footer * {
  background: transparent !important;
  border: none !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  color: var(--gray-light) !important;
  cursor: pointer !important;
  padding: 0 !important;
  outline: none !important;
}

/* Force footer currency always visible — no hiding */
.qf-currency-footer {
  display: flex !important;
  align-items: center !important;
}

.footer-payments {
  display: flex;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ============================================
   PRODUCT DETAIL PAGE
   ============================================ */

.breadcrumb {
  font-size: 12px;
  color: var(--gray-light);
  letter-spacing: 0.03em;
  padding: 28px 0 0;
}

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

.pdp {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: var(--section-pad);
}

.pdp-gallery .frame-wrap {
  background: var(--wall);
  padding: clamp(40px, 7%, 80px);
}

.pdp-gallery .frame {
  max-width: 420px;
  margin: 0 auto;
}

.pdp-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.pdp-thumb {
  flex: 1;
  background: var(--wall);
  padding: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.pdp-thumb.active {
  border-color: var(--ink);
}

.pdp-thumb-art {
  aspect-ratio: 1;
  overflow: hidden;
}

.pdp-info .product-collection {
  text-align: left;
  margin-bottom: 14px;
}

.pdp-info h1 {
  font-size: clamp(30px, 3.6vw, 42px);
  margin-bottom: 14px;
  line-height: 1.15;
}

.pdp-photographer {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.pdp-photographer span {
  font-style: normal;
  font-weight: 500;
}

.pdp-price {
  font-size: 20px;
  margin-bottom: 14px;
  color: var(--ink-soft);
}

.pdp-price .pdp-price-note {
  font-size: 13px;
  color: var(--gray-light);
  margin-left: 8px;
}

/* Made to Order badge */
.made-to-order-badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 6px 12px;
  margin-bottom: 4px;
}

/* Product details meta block */
.product-details-block {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
  margin-bottom: 10px;
}

.pd-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.pd-row:last-child {
  border-bottom: none;
}

.pd-label {
  color: var(--gray);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-top: 1px;
}

.pd-row span:last-child {
  color: var(--ink-soft);
  text-align: right;
}

.pd-secondary-note {
  font-size: 12px;
  color: var(--gray-light);
  margin-bottom: 32px;
  letter-spacing: 0.01em;
}

.size-select-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 14px;
  display: block;
}

.size-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}

.size-option {
  border: 1px solid var(--line);
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.size-option:hover {
  border-color: var(--gray-light);
}

.size-option.selected {
  border-color: var(--ink);
  background: var(--wall);
}

.size-option .so-name {
  font-family: var(--serif);
  font-size: 15px;
  margin-bottom: 4px;
}

.size-option .so-dims {
  font-size: 12px;
  color: var(--gray-light);
  min-height: 16px;
}

/*
 * .pdp-actions now wraps the ENTIRE WooCommerce add-to-cart form
 * (size buttons + hidden variations table + the actual action
 * buttons), not just two flat buttons like the original static
 * prototype. It should stack its children vertically — the size
 * buttons on their own row, then the action buttons below — rather
 * than flexing everything into a single horizontal row. The actual
 * Order Now / Add to Cart side-by-side layout is handled separately,
 * scoped to .woocommerce-variation-add-to-cart / form.cart below.
 */
.pdp-actions {
  display: block;
  margin-bottom: 36px;
}

.pdp-actions .btn {
  justify-content: center;
  padding: 18px 24px;
}

.pdp-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.pdp-trust div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pdp-accordion {
  border-top: 1px solid var(--line);
}

.acc-item {
  border-bottom: 1px solid var(--line);
}

.acc-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  font-family: var(--serif);
  font-size: 16px;
  text-align: left;
}

.acc-trigger .acc-icon {
  font-size: 18px;
  font-weight: 300;
  color: var(--gray);
  transition: transform 0.25s ease;
}

.acc-item.open .acc-icon {
  transform: rotate(45deg);
}

.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.acc-item.open .acc-panel {
  max-height: 400px;
}

.acc-panel-inner {
  padding-bottom: 22px;
  color: var(--gray);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 52ch;
}

.acc-panel-inner .meta-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.acc-panel-inner .meta-label {
  color: var(--gray-light);
  min-width: 110px;
}

/* Original photograph showcase on PDP */
.original-photo-block {
  border-top: 1px solid var(--line);
}

.original-photo-block .section-header {
  margin-bottom: clamp(32px, 5vw, 48px);
}

.op-content {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 6vw, 64px);
  align-items: center;
}

.op-photo {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--wall);
}

.op-text p {
  color: var(--gray);
  font-size: 15.5px;
  margin-bottom: 14px;
}

.op-text .op-photog {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin-top: 18px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .collections-strip { grid-template-columns: repeat(2, 1fr); }
  .why-choose-strip { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col:nth-child(4) { display: none; }
  .pdp { grid-template-columns: 1fr; }
  .op-content { grid-template-columns: 1fr; }
  .hero-strip { grid-template-columns: 1fr 1.3fr 1fr; }
}

@media (max-width: 720px) {
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .mobile-nav { display: flex; }
  .product-grid { grid-template-columns: 1fr; gap: 40px; }
  .collections-strip { grid-template-columns: 1fr; }
  .why-choose-strip { grid-template-columns: 1fr 1fr; }
  .story-block { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
  .hero-strip { grid-template-columns: 1fr; gap: 24px; }
  .hero-strip .frame-wrap:nth-child(1),
  .hero-strip .frame-wrap:nth-child(3) { transform: none; }
  .hero-strip .frame-wrap:nth-child(2) { order: -1; }
  .hero-strip a.hero-frame-link:nth-child(1):hover,
  .hero-strip a.hero-frame-link:nth-child(3):hover { transform: scale(1.035); }
  .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pdp-actions { flex-direction: column; }
  .size-options { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .header-actions { gap: 16px; }
  .logo img { height: 28px; }
}

/* ============================================
   WOOCOMMERCE OVERRIDES
   Restyle default WooCommerce markup to match
   the site's premium minimalist design system.
   ============================================ */

.woocommerce-notices-wrapper { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  background: var(--wall);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ink);
  padding: 16px 20px;
  font-size: 14px;
  color: var(--ink-soft);
  list-style: none;
  margin: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
  text-decoration: underline;
}

/* Variation form (size selector) — WooCommerce renders the size <select>
   inside <table class="variations">. The table class is on the <table>
   element itself, not a wrapper around one, so we target it directly. */
table.variations {
  display: none !important;
}

.variations label {
  display: none !important;
}

.variations select {
  display: none !important;
}

/* WooCommerce's default "Clear" link for resetting the variation
   selection — unnecessary with our always-one-selected button design,
   and was showing as a stray unstyled link in the layout. */
.reset_variations {
  display: none;
}

.wc-size-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 32px;
}

.wc-color-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.wc-color-buttons .size-option {
  padding: 14px 16px;
}

.wc-color-buttons .size-option .so-name {
  margin-bottom: 0;
}

.wc-style-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.wc-style-buttons .size-option {
  padding: 14px 16px;
}

.wc-style-buttons .size-option .so-name {
  margin-bottom: 0;
}

.wc-size-buttons .size-option.disabled,
.wc-color-buttons .size-option.disabled,
.wc-style-buttons .size-option.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.single_variation_wrap {
  margin-bottom: 0;
}

/* Hidden — the per-size price already shows under each size button
   (.so-dims), so WooCommerce's own price echo here would duplicate it. */
.woocommerce-variation-price {
  display: none;
}

.woocommerce-variation-availability {
  display: none;
}

/* Quantity input */
.quantity {
  display: none;
}

/*
 * Order Now (our injected primary button) + Add to Cart (WooCommerce's
 * native, relabeled, secondary button) sit side by side, matching the
 * .pdp-actions two-button layout from the approved design.
 *
 * For a SIMPLE product, both buttons render as direct children inside
 * <form class="cart">.
 *
 * For a VARIABLE product, WooCommerce nests them one level deeper,
 * inside <div class="woocommerce-variation-add-to-cart"> within
 * <div class="single_variation_wrap"> — so the flex layout has to
 * target that specific wrapper, not the outer form, or the buttons
 * never actually sit side by side for variable products.
 */
.pdp-actions form.cart {
  width: 100%;
}

.pdp-actions form.cart:not(.variations_form) {
  display: flex;
  gap: 14px;
}

.pdp-actions form.cart:not(.variations_form) > * {
  flex: 1;
}

.pdp-actions .woocommerce-variation-add-to-cart {
  display: flex;
  gap: 14px;
  width: 100%;
  align-items: stretch;
}

.pdp-actions .woocommerce-variation-add-to-cart > * {
  flex: 1;
  margin: 0;
}

/* WooCommerce wraps the hidden quantity/add-to-cart inputs in their own
   markup alongside the button — those aren't visible (quantity is
   hidden via CSS elsewhere) but stretching every child 1:1 with flex:1
   would otherwise squash the visible button next to an invisible
   sibling taking equal width. Only stretch actual buttons. */
.pdp-actions .woocommerce-variation-add-to-cart > *:not(.qf-order-now-btn):not(.single_add_to_cart_button) {
  flex: 0 0 auto;
  width: auto;
}

.qf-order-now-btn {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 17px 36px;
  width: 100%;
  cursor: pointer;
  transition: all 0.25s ease;
}

.qf-order-now-btn:hover {
  background: var(--ink-soft);
}

/* Add to cart button (WooCommerce default, relabeled, secondary/outline) */
.single_add_to_cart_button {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  padding: 17px 36px !important;
  width: 100%;
  transition: all 0.25s ease;
}

.single_add_to_cart_button:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

.single_add_to_cart_button.disabled {
  background: transparent !important;
  border-color: var(--gray-light) !important;
  color: var(--gray-light) !important;
  cursor: not-allowed;
}

/* Price display */
.price {
  font-family: var(--sans);
}

.price del {
  color: var(--gray-light);
  text-decoration: line-through;
  margin-right: 8px;
  font-size: 0.85em;
}

.price ins {
  text-decoration: none;
}

/* Stock status */
.stock {
  font-size: 13px;
  color: var(--gray);
}

.stock.out-of-stock {
  color: var(--ink);
}

/* Cart page table */
.woocommerce-cart-form table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 40px;
}

.woocommerce-cart-form th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 16px 12px;
  border-bottom: 1px solid var(--line);
}

.woocommerce-cart-form td {
  padding: 20px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}

.woocommerce-cart-form .product-thumbnail img {
  width: 80px;
  height: auto;
}

.woocommerce-cart-form .qty {
  width: 60px;
  border: 1px solid var(--line);
  padding: 8px;
  text-align: center;
  font-family: var(--sans);
}

.woocommerce-cart-form .remove {
  color: var(--gray-light);
  font-size: 18px;
}

/* Checkout */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 15px;
  background: transparent;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  outline: none;
  border-color: var(--ink);
}

.woocommerce-checkout label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  display: block;
  margin-bottom: 8px;
}

.woocommerce-checkout .form-row {
  margin-bottom: 22px;
}

#payment {
  background: var(--wall);
  padding: 24px;
  margin-top: 32px;
}

#payment ul.payment_methods {
  list-style: none;
}

#payment li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

#payment li:last-child {
  border-bottom: none;
}

#place_order {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 17px 36px;
  width: 100%;
  margin-top: 24px;
}

#place_order:hover {
  background: var(--ink-soft);
}

/* Star rating (hide — not used in this brand's minimal aesthetic) */
.woocommerce-product-rating,
.star-rating {
  display: none;
}

/* Sale badge */
.onsale {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(255,255,255,0.88);
  padding: 5px 10px;
  z-index: 2;
}

/* Breadcrumb (WooCommerce default) */
.woocommerce-breadcrumb {
  font-size: 12px;
  color: var(--gray-light);
  letter-spacing: 0.03em;
  padding: 28px 0 0;
}

.woocommerce-breadcrumb a:hover {
  color: var(--ink);
}

/* Pagination */
.woocommerce-pagination ul {
  display: flex;
  gap: 8px;
  list-style: none;
  justify-content: center;
  margin-top: 56px;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 13px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

.woocommerce-pagination .current {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Result count / ordering bar on shop page */
.woocommerce-result-count,
.woocommerce-ordering {
  font-size: 13px;
  color: var(--gray);
}

.woocommerce-ordering select {
  border: 1px solid var(--line);
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 13px;
  background: transparent;
}

/* ============================================
   GENERIC PAGE CONTENT (Terms, Privacy, etc.)
   ============================================ */

.qf-page-content h2 {
  font-size: 24px;
  margin: 36px 0 16px;
}

.qf-page-content h3 {
  font-size: 19px;
  margin: 28px 0 12px;
}

.qf-page-content p {
  margin-bottom: 18px;
}

.qf-page-content ul,
.qf-page-content ol {
  margin: 0 0 18px 20px;
}

.qf-page-content li {
  margin-bottom: 8px;
}

.qf-page-content a {
  text-decoration: underline;
}

.qf-empty-state {
  color: var(--gray);
  font-size: 15px;
  padding: 40px 0;
}

.qf-empty-state a {
  text-decoration: underline;
  color: var(--ink-soft);
}

/* ============================================
   CONTACT FORM
   ============================================ */

.contact-form { display: flex; flex-direction: column; gap: 22px; max-width: 480px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); }
.field input, .field textarea {
  border: none; border-bottom: 1px solid var(--line); padding: 10px 0; font-family: var(--sans);
  font-size: 15px; color: var(--ink); background: transparent; resize: none;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }

/* ============================================
   DIGITAL GRID — masonry layout
   The ONLY masonry/varied-height grid in the theme, deliberately
   scoped to the separate Digital page (wallpapers/stories). Every
   other product grid on the site (Shop, Collections, homepage)
   stays equal-height, no masonry — see qf_product_card() /
   .product-grid for that. Digital content has genuinely different
   (mostly tall, phone-shaped) aspect ratios per image, so a varied-
   height layout is the right fit here specifically.
   ============================================ */

.digital-grid {
  column-count: 4;
  column-gap: 24px;
}

.digital-card {
  display: block;
  break-inside: avoid;
  margin-bottom: 24px;
  background: var(--wall);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.digital-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -12px rgba(0,0,0,0.18);
}

.digital-card-image {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  position: relative;
  background: var(--wall);
}

.digital-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
}

.digital-card-meta {
  padding: 16px 18px 20px;
  text-align: left;
}

.digital-card-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}

.digital-card-price {
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 10px;
}

.digital-card-cta {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

/* Homepage digital section — uses CSS Grid (not masonry) since all
   cards are the same 4:5 height. Responsive columns below. */
.qf-digital-home .digital-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  column-count: unset !important;
}

@media (max-width: 1024px) {
  .digital-grid { column-count: 2; }
  .qf-digital-home .digital-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
  .digital-grid { column-count: 1; }
  .qf-digital-home .digital-grid { grid-template-columns: repeat(1, 1fr) !important; }
}

/* ============================================
   DIGITAL PRODUCT PAGE — frame-free image presentation
   Used only on the single-product page for products in the Digital
   category. No wall backdrop, no frame border, no drop shadow — a
   digital download has no physical frame, so showing one would be
   misleading. Just the image itself, cleanly presented.
   ============================================ */

.digital-pdp-image {
  background: var(--wall);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
}

.digital-pdp-image img {
  max-width: 100%;
  max-height: 640px;
  width: auto;
  height: auto;
  display: block;
}

/* ============================================
   ACCOUNT MODAL — Login / Register popup
   ============================================ */

.qf-account-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.45);
  z-index: 9998;
  backdrop-filter: blur(2px);
}

.qf-account-modal {
  position: fixed;
  top: 84px; /* sit just below the header, never cut off */
  left: 50%;
  transform: translateX(-50%) scale(0.97);
  z-index: 9999;
  background: var(--paper);
  width: min(440px, 94vw);
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  padding: 40px 40px 48px;
  box-shadow: 0 24px 56px -12px rgba(0,0,0,0.22);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.qf-account-modal:not([hidden]) {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.qf-account-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s ease;
}

.qf-account-modal-close:hover {
  color: var(--ink);
}

.qf-account-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.qf-account-tab {
  background: none;
  border: none;
  padding: 0 0 14px;
  margin-right: 28px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.qf-account-tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* WooCommerce form fields inside our modal */
.qf-account-panel .woocommerce-form__label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  display: block;
  margin-bottom: 6px;
}

.qf-account-panel .woocommerce-Input,
.qf-account-panel input[type="text"],
.qf-account-panel input[type="email"],
.qf-account-panel input[type="password"] {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  margin-bottom: 20px;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.qf-account-panel input[type="text"]:focus,
.qf-account-panel input[type="email"]:focus,
.qf-account-panel input[type="password"]:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.qf-account-panel .woocommerce-form-login__submit,
.qf-account-panel .woocommerce-form-register__submit,
.qf-account-panel button[type="submit"] {
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 16px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s ease;
}

.qf-account-panel .woocommerce-form-login__submit:hover,
.qf-account-panel .woocommerce-form-register__submit:hover,
.qf-account-panel button[type="submit"]:hover {
  background: var(--ink-soft);
}

.qf-account-panel .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 16px;
}

.qf-account-panel .lost_password {
  font-size: 12px;
  color: var(--gray);
  margin-top: 14px;
  display: block;
  text-align: center;
}

.qf-account-panel .lost_password a {
  color: var(--gray);
  text-decoration: underline;
}

.qf-account-panel .woocommerce-privacy-policy-text {
  font-size: 12px;
  color: var(--gray-light);
  margin-top: 12px;
}

/* ============================================
   MY ACCOUNT PAGE
   ============================================ */

.qf-myaccount-page {
  padding: clamp(48px, 8vw, 96px) 0;
  min-height: 60vh;
}

.qf-myaccount-header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.qf-myaccount-header h1 {
  font-size: clamp(28px, 4vw, 42px);
  margin-top: 8px;
}

/* WooCommerce My Account two-column layout */
.qf-myaccount-wrap .woocommerce {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* Account navigation sidebar */
.qf-myaccount-wrap .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-right: 1px solid var(--line);
  padding-right: 32px;
}

.qf-myaccount-wrap .woocommerce-MyAccount-navigation li {
  margin-bottom: 4px;
}

.qf-myaccount-wrap .woocommerce-MyAccount-navigation li a {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
  padding: 10px 0;
  border-bottom: none;
  transition: color 0.15s ease;
}

.qf-myaccount-wrap .woocommerce-MyAccount-navigation li a:hover,
.qf-myaccount-wrap .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--ink);
}

.qf-myaccount-wrap .woocommerce-MyAccount-navigation li.is-active a {
  font-weight: 600;
}

/* Account content area */
.qf-myaccount-wrap .woocommerce-MyAccount-content {
  min-width: 0; /* prevent grid blowout */
}

.qf-myaccount-wrap .woocommerce-MyAccount-content h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

/* Orders table */
.qf-myaccount-wrap .woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.qf-myaccount-wrap .woocommerce-orders-table th {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-light);
  font-weight: 500;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.qf-myaccount-wrap .woocommerce-orders-table td {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  vertical-align: middle;
}

/* Downloads table */
.qf-myaccount-wrap .woocommerce-table--order-downloads td,
.qf-myaccount-wrap .woocommerce-table--order-downloads th {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}

/* Address forms */
.qf-myaccount-wrap .woocommerce-address-fields input,
.qf-myaccount-wrap .woocommerce-address-fields select,
.qf-myaccount-wrap .woocommerce-EditAccountForm input,
.qf-myaccount-wrap .woocommerce-EditAccountForm select {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  margin-bottom: 6px;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.qf-myaccount-wrap .woocommerce-address-fields input:focus,
.qf-myaccount-wrap .woocommerce-address-fields select:focus,
.qf-myaccount-wrap .woocommerce-EditAccountForm input:focus,
.qf-myaccount-wrap .woocommerce-EditAccountForm select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.qf-myaccount-wrap .woocommerce-address-fields label,
.qf-myaccount-wrap .woocommerce-EditAccountForm label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray);
  display: block;
  margin-bottom: 6px;
  margin-top: 16px;
}

/* Form submit buttons — filled black */
.qf-myaccount-wrap button[type="submit"] {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 14px 32px;
  cursor: pointer;
  margin-top: 16px;
  transition: background 0.2s ease;
}

.qf-myaccount-wrap button[type="submit"]:hover {
  background: var(--ink-soft);
}

/* All link-style buttons (View order, Download file, etc.)
   — outline style so text is always visible */
.qf-myaccount-wrap a.button,
.qf-myaccount-wrap .woocommerce-Button {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  padding: 8px 18px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.qf-myaccount-wrap a.button:hover,
.qf-myaccount-wrap .woocommerce-Button:hover {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

/* Login/Register forms on the /my-account/ page for logged-out users
   WooCommerce renders these as a two-column layout by default.
   We restyle them to match the theme's underline-input design. */

.qf-myaccount-wrap .woocommerce-MyAccount-content .u-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.qf-myaccount-wrap .woocommerce-MyAccount-content h2 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 24px;
}

.qf-myaccount-wrap .woocommerce-MyAccount-content .woocommerce-form p {
  margin-bottom: 16px;
}

.qf-myaccount-wrap .woocommerce-MyAccount-content .woocommerce-form label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 6px;
}

.qf-myaccount-wrap .woocommerce-MyAccount-content .woocommerce-form input[type="text"],
.qf-myaccount-wrap .woocommerce-MyAccount-content .woocommerce-form input[type="email"],
.qf-myaccount-wrap .woocommerce-MyAccount-content .woocommerce-form input[type="password"] {
  width: 100%;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 0 !important;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: transparent !important;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
  outline: none;
}

.qf-myaccount-wrap .woocommerce-MyAccount-content .woocommerce-form input:focus {
  border-bottom-color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
}

.qf-myaccount-wrap .woocommerce-MyAccount-content .woocommerce-form .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray);
  margin: 12px 0;
}

.qf-myaccount-wrap .woocommerce-MyAccount-content .woocommerce-form .lost_password {
  font-size: 12px;
  color: var(--gray);
  margin-top: 8px;
}

.qf-myaccount-wrap .woocommerce-MyAccount-content .woocommerce-form .lost_password a {
  color: var(--gray);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.qf-myaccount-wrap .woocommerce-MyAccount-content .woocommerce-privacy-policy-text {
  font-size: 12px;
  color: var(--gray-light);
  line-height: 1.6;
  margin-bottom: 12px;
}

@media (max-width: 680px) {
  .qf-myaccount-wrap .woocommerce-MyAccount-content .u-columns {
    grid-template-columns: 1fr;
  }
}

/* Dashboard welcome message */
.qf-myaccount-wrap .woocommerce-MyAccount-content p {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 16px;
}

.qf-myaccount-wrap .woocommerce-MyAccount-content a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Notices */
.qf-myaccount-wrap .woocommerce-message,
.qf-myaccount-wrap .woocommerce-error,
.qf-myaccount-wrap .woocommerce-info {
  font-size: 14px;
  padding: 14px 18px;
  margin-bottom: 24px;
  list-style: none;
  border-left: 3px solid var(--ink);
  background: var(--wall);
}

.qf-myaccount-wrap .woocommerce-error {
  border-left-color: #c0392b;
  background: #fff5f5;
}

/* Mobile: stack the two-column layout */
@media (max-width: 768px) {
  .qf-myaccount-wrap .woocommerce {
    grid-template-columns: 1fr;
  }

  .qf-myaccount-wrap .woocommerce-MyAccount-navigation ul {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 20px;
    margin-bottom: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
  }

  .qf-myaccount-wrap .woocommerce-MyAccount-navigation li a {
    padding: 8px 0;
  }
}

/* ============================================
   ACCOUNT MODAL — Form field styles
   ============================================ */

.qf-form-field {
  margin-bottom: 20px;
}

.qf-form-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 6px;
}

.qf-form-field input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.qf-form-field input:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.qf-form-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 16px;
  cursor: pointer;
}

.qf-btn-full {
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 16px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.qf-btn-full:hover {
  background: var(--ink-soft);
}

.qf-lost-password {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 12px;
  color: var(--gray);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================
   THANK YOU / ORDER CONFIRMATION PAGE
   ============================================ */

.qf-thankyou {
  padding: clamp(56px, 10vw, 120px) 0;
  min-height: 60vh;
}

.qf-thankyou-hero {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 64px;
}

.qf-thankyou-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--wall);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: var(--ink);
}

.qf-thankyou-hero h1 {
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 12px;
}

.qf-thankyou-sub {
  font-size: 15px;
  color: var(--gray);
}

.qf-thankyou-sub a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Download section */
.qf-download-section {
  max-width: 640px;
  margin: 0 auto 56px;
}

.qf-download-section h2 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.qf-download-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
}

.qf-download-name {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 4px;
}

.qf-download-meta {
  font-size: 12px;
  color: var(--gray-light);
}

.qf-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 12px 22px;
  white-space: nowrap;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.qf-download-btn:hover {
  background: var(--ink-soft);
  color: var(--paper);
}

/* Social sharing section */
.qf-share-section {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
  padding: 48px;
  background: var(--wall);
}

.qf-share-section h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin: 8px 0 10px;
}

.qf-share-sub {
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 28px;
}

.qf-share-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.qf-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 24px;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: all 0.2s ease;
}

.qf-share-btn:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Order summary (physical prints) */
.qf-order-summary {
  max-width: 640px;
  margin: 0 auto 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.qf-order-details {
  border: 1px solid var(--line);
  padding: 24px;
}

.qf-order-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  gap: 16px;
}

.qf-order-detail-row:last-child {
  border-bottom: none;
}

.qf-order-detail-row span:first-child {
  color: var(--gray);
}

.qf-order-items h2 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.qf-order-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.qf-order-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  flex-shrink: 0;
}

.qf-order-item-info {
  flex: 1;
  min-width: 0;
}

.qf-order-item-name {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 3px;
}

.qf-order-item-meta {
  font-size: 12px;
  color: var(--gray);
}

.qf-order-item-price {
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}

.qf-thankyou-next {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding-top: 16px;
}

.qf-thankyou-next p {
  font-size: 15px;
  color: var(--gray);
  margin-bottom: 24px;
  font-family: var(--serif);
  font-style: italic;
}

@media (max-width: 640px) {
  .qf-order-summary {
    grid-template-columns: 1fr;
  }

  .qf-share-section {
    padding: 32px 24px;
  }
}

/* ============================================
   CURRENCY SWITCHER (YayCurrency)
   Placed in header-actions between account
   icon and cart icon — minimal text style
   matching the header's clean aesthetic.
   ============================================ */

.qf-currency-switcher {
  display: flex;
  align-items: center;
}

/* Override YayCurrency's default styles to match our header */
.qf-currency-switcher .yay-currency-switcher,
.qf-currency-switcher select,
.qf-currency-switcher .wccs-switcher {
  background: transparent !important;
  border: none !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  padding: 4px 2px !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.qf-currency-switcher .yay-currency-switcher:hover,
.qf-currency-switcher select:hover {
  color: var(--gray) !important;
}

/* Hide YayCurrency flag icons if any — keep it text only */
.qf-currency-switcher .yay-flag,
.qf-currency-switcher img {
  display: none !important;
}

/* Mobile — hide currency switcher text in header to save space,
   footer switcher always visible */
@media (max-width: 768px) {
  .qf-currency-switcher:not(.qf-currency-footer):not(.qf-currency-pdp) {
    display: none;
  }
}

/* Currency switcher inside mobile nav */
.qf-currency-mobile {
  display: none;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

@media (max-width: 768px) {
  .qf-currency-mobile {
    display: flex;
  }
}

/* Price row with currency switcher on product page */
.pdp-price-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Currency switcher on product page — visible on all sizes */
.qf-currency-pdp {
  display: flex;
  align-items: center;
}

/* Digital product full description */
.qf-digital-description {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--gray);
  line-height: 1.8;
  max-width: 52ch;
}

.qf-digital-description p {
  margin-bottom: 14px;
}

.qf-digital-description strong {
  color: var(--ink);
  font-weight: 600;
}

.qf-digital-description ul,
.qf-digital-description ol {
  padding-left: 18px;
  margin-bottom: 14px;
}

.qf-digital-description li {
  margin-bottom: 6px;
}