/* ==========================================================================
   Michele McLeod Art — site styles
   Palette and type taken from the live Shopify "Artistic" theme so the new
   site feels like the same brand, with extra nature touches (sage washes,
   botanical SVG dividers, generous breathing room).
   ========================================================================== */

:root {
  /* Colour tokens — pulled from the Shopify theme */
  --bg:        #ffffff;
  --bg-alt:    #f0f0f0;     /* card / banner background */
  --bg-soft:   #f7f6f1;     /* warm cream wash */
  --ink:       #1e1e1e;     /* near-black */
  --body:      #666666;     /* body grey */
  --line:      #e5e5e5;
  --sage:      #9ea18e;     /* primary brand accent */
  --sage-deep: #7a7d6a;
  --sage-soft: #d8dccd;     /* light sage tint */
  --gold:      #c8a35a;
  --shadow:    0 2px 12px rgba(30, 30, 30, 0.06);

  /* Type */
  --serif-display: "Asul", "Cormorant Garamond", Georgia, serif;
  --serif-body:    "Lora", Georgia, serif;
  --maxw:    1240px;
  --header-h: 100px;
  --radius: 0;              /* Shopify theme uses 0 corner radius */
}

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

body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--serif-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* belt-and-braces against any rogue horizontal scroll */
}
html { overflow-x: hidden; }

a { color: var(--ink); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--sage-deep); }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif-display);
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0 0 0.6em;
  line-height: 1.2;
}
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ----- Botanical decorative divider (used between sections) ----- */
.divider {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; margin: 50px auto;
  color: var(--sage);
}
.divider::before, .divider::after {
  content: ''; flex: 0 0 60px; height: 1px; background: var(--sage); opacity: 0.6;
}
.divider svg { width: 28px; height: 28px; opacity: 0.8; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
  height: var(--header-h);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
}
.brand {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--ink);
}
.brand img { height: 76px; width: auto; }
.brand .wordmark {
  display: none;             /* logo image carries the wordmark */
  font-family: var(--serif-display);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
}
.nav {
  display: flex; gap: 32px; align-items: center;
  font-family: var(--serif-body);
  font-size: 0.92rem; letter-spacing: 0.06em;
}
.nav a { color: var(--ink); position: relative; padding: 4px 0; }
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--sage); transition: right .25s ease;
}
.nav a:hover::after, .nav a.active::after { right: 0; }
.cart-btn {
  position: relative;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  font: inherit; font-size: 0.85rem; letter-spacing: 0.1em;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s, color .2s;
}
.cart-btn:hover { background: var(--ink); color: white; }
.cart-count {
  background: var(--sage);
  color: white;
  font-family: var(--serif-body);
  font-size: 0.7rem;
  border-radius: 999px;
  padding: 0 6px;
  min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-btn:hover .cart-count { background: white; color: var(--ink); }
.menu-toggle {
  display: none; background: none; border: 0; font-size: 1.5rem; cursor: pointer;
  color: var(--ink); padding: 4px 8px;
}

/* ==========================================================================
   Hero (cinematic banner like Shopify slideshow)
   ========================================================================== */

/* ==========================================================================
   Hero — two-column gallery with rotating featured original
   ========================================================================== */

.hero {
  position: relative;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  padding: 90px 0 110px;
  overflow: hidden;
}
/* Soft sage wash bleeding in from the left for warmth */
.hero::before {
  content: ''; position: absolute; left: -10%; top: 0; bottom: 0; width: 60%;
  background: radial-gradient(ellipse at left center, rgba(158,161,142,0.22), transparent 65%);
  pointer-events: none;
}
/* Atmospheric backdrop — a heavily blurred, tinted version of the
   currently-featured painting. Adds depth without competing. */
.hero-backdrop {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(60px) saturate(0.7);
  opacity: 0.18;
  transition: background-image 1.2s ease, opacity 1.2s ease;
  pointer-events: none;
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 80px; align-items: center;
  min-height: 540px;
}

/* Left column — text */
.hero-text { padding-right: 10px; }
.hero-text .hero-logo {
  display: block;
  height: 110px; width: auto;
  margin: 0 0 18px;
}
.hero-text .leaf {
  color: var(--sage); margin-bottom: 22px; opacity: 0.85;
}
.hero-text .eyebrow {
  font-family: var(--serif-body); font-style: italic;
  color: var(--sage-deep);
  font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-text h1 {
  font-size: clamp(2.1rem, 4.8vw, 3.6rem);
  margin: 0 0 26px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.hero-text p.sub {
  color: var(--body); font-style: italic;
  font-size: 1.08rem; line-height: 1.7;
  margin-bottom: 36px; max-width: 480px;
}
.hero-actions {
  display: inline-flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.hero-text .hero-cta {
  background: var(--ink); color: white; border-color: var(--ink);
  padding: 16px 34px;
}
.hero-text .hero-cta:hover {
  background: var(--sage-deep); border-color: var(--sage-deep);
}
/* Secondary CTA — matches the .hero-cta shape, but outlined instead of filled */
.hero-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 30px;
  font-family: var(--serif-body);
  font-size: 0.85rem; letter-spacing: 0.18em; text-transform: lowercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  transition: background .25s ease, color .25s ease;
}
.hero-link:hover {
  background: var(--ink); color: white;
}

/* Right column — gallery-framed featured artwork */
.hero-artwork {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.art-frame {
  display: block; position: relative;
  width: 100%; max-width: 440px;
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, #fafaf6 0%, #efeae1 100%);
  /* mat-board look with a subtle inner gold rule */
  padding: 22px;
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 14px 40px -8px rgba(60, 50, 35, 0.22),
    0 4px 14px rgba(60, 50, 35, 0.08);
  transition: transform .4s ease, box-shadow .4s ease;
}
.art-frame:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 22px 48px -10px rgba(60, 50, 35, 0.28),
    0 6px 18px rgba(60, 50, 35, 0.10);
}
/* Inner mat with thin gold rule */
.art-mat {
  position: absolute; inset: 22px;
  outline: 1px solid var(--gold);
  outline-offset: -7px;
  overflow: hidden;
  background: var(--bg-alt);
}
.art-mat::after {
  /* tiny inner shadow line at the painting edge */
  content: ''; position: absolute; inset: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset;
  pointer-events: none;
}
.art-mat .art-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s ease;
}
.art-mat .art-slide.active { opacity: 1; }

/* Caption row — label/title on the left, price on the right */
.art-caption {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 440px;
  gap: 16px;
  padding: 4px 4px 0;
}
.art-caption .art-meta {
  display: flex; flex-direction: column; gap: 4px;
}
.art-caption .art-label {
  font-family: var(--serif-body); font-style: italic;
  color: var(--sage-deep);
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
}
.art-caption .art-title {
  font-family: var(--serif-display);
  font-size: 1.15rem; color: var(--ink);
}
.art-caption .art-price {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.1rem; color: var(--ink);
  border-left: 1px solid var(--line);
  padding-left: 16px;
}

/* Dot indicators below the caption */
.art-dots {
  display: flex; gap: 8px; margin-top: 6px;
}
.art-dots button {
  width: 7px; height: 7px; border-radius: 50%;
  border: 0; padding: 0;
  background: var(--line);
  cursor: pointer; transition: background .25s, transform .25s;
}
.art-dots button:hover { background: var(--sage); }
.art-dots button.active {
  background: var(--sage-deep);
  transform: scale(1.4);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn, .hero-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 30px;
  border-radius: var(--radius);
  font-family: var(--serif-body);
  font-size: 0.85rem; letter-spacing: 0.18em; text-transform: lowercase;
  cursor: pointer; border: 1px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-primary, .hero-cta {
  background: white; color: var(--ink); border-color: white;
}
.btn-primary:hover, .hero-cta:hover {
  background: var(--ink); color: white; border-color: var(--ink);
}
.btn-dark {
  background: var(--ink); color: white; border-color: var(--ink); width: 100%;
}
.btn-dark:hover { background: var(--sage-deep); border-color: var(--sage-deep); }
.btn-dark:disabled { background: #aaa; border-color: #aaa; cursor: not-allowed; }
.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: white; }
.btn .arrow { transition: transform .25s ease; }
.btn:hover .arrow, .hero-cta:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   Section primitives
   ========================================================================== */

section { padding: 70px 0; }
section.tight { padding: 40px 0; }
.section-head {
  text-align: center; margin-bottom: 48px;
}
.section-head .eyebrow {
  font-family: var(--serif-body); font-style: italic;
  color: var(--sage-deep); font-size: 0.85rem;
  letter-spacing: 0.25em; text-transform: uppercase;
  margin-bottom: 12px;
}
.section-head h2 { margin: 0 0 8px; }
.section-head p { color: var(--body); max-width: 560px; margin: 0 auto; }
.section-head .more-link {
  display: inline-block; margin-top: 18px;
  color: var(--ink); border-bottom: 1px solid var(--sage);
  font-style: italic; padding-bottom: 2px;
  font-size: 0.95rem;
}

/* ==========================================================================
   Category cards (homepage)
   ========================================================================== */

.cats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.cat-card {
  position: relative; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 4/5;
  background: var(--bg-alt);
  display: block;
}
.cat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.cat-card:hover img { transform: scale(1.04); }
.cat-card .label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: white;
  text-align: center;
}
.cat-card .label h3 { color: white; margin: 0 0 6px; font-size: 1.5rem; }
.cat-card .label span {
  font-family: var(--serif-body); font-style: italic;
  font-size: 0.85rem; letter-spacing: 0.15em; text-transform: lowercase;
  opacity: 0.92;
}

/* ==========================================================================
   Product grid + cards
   ========================================================================== */

.product-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px;
}
.product-card { display: block; color: var(--ink); }
.product-card .thumb {
  aspect-ratio: 4/5;
  background: var(--bg-alt);
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
}
.product-card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.product-card:hover .thumb img { transform: scale(1.04); }
.product-card .meta {
  padding: 18px 4px 4px;
  text-align: center;
}
.product-card .meta h3 {
  font-size: 1.05rem; margin: 0 0 4px;
  font-family: var(--serif-display); font-weight: 500;
  color: var(--ink);
}
.product-card .meta .price {
  color: var(--body); font-size: 0.95rem;
  font-style: italic;
}
.product-card .badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,0.95); color: var(--ink);
  padding: 5px 12px; font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: var(--radius);
}
.product-card .badge.sold { background: var(--ink); color: white; }

/* ==========================================================================
   Filter bar (shop page)
   ========================================================================== */

.filters {
  display: flex; gap: 0; margin-bottom: 40px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 0;
  justify-content: center;
}
.filter-btn {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 14px 24px;
  font: inherit; font-family: var(--serif-display); font-size: 0.95rem;
  cursor: pointer; color: var(--body);
  letter-spacing: 0.06em;
  transition: color .2s, border-color .2s;
}
.filter-btn:hover { color: var(--ink); }
.filter-btn.active {
  color: var(--ink);
  border-bottom-color: var(--sage);
}
.result-count {
  margin-left: auto; align-self: center; font-size: 0.85rem;
  color: var(--body); font-style: italic;
  padding: 0 16px;
}

/* ==========================================================================
   Product detail
   ========================================================================== */

.product-detail {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px;
  padding: 50px 0 90px;
}
.gallery .main {
  aspect-ratio: 1/1.1;
  background: var(--bg-alt);
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.gallery .thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px;
}
.gallery .thumbs button {
  padding: 0; background: var(--bg-alt); border: 1px solid transparent;
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  aspect-ratio: 1/1;
}
.gallery .thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery .thumbs button.active { border-color: var(--sage); }

.product-info .breadcrumb {
  font-size: 0.85rem; color: var(--body); margin-bottom: 18px;
  letter-spacing: 0.05em; font-style: italic;
}
.product-info h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 12px;
}
.product-info .price-line {
  font-size: 1.4rem; color: var(--ink); margin: 8px 0 30px;
  font-family: var(--serif-display); font-style: italic;
}
.product-info .description {
  color: var(--body); line-height: 1.8;
  border-top: 1px solid var(--line); padding-top: 26px; margin-top: 30px;
  font-size: 1rem;
}
.product-info .description p {
  margin: 0 0 1.1em;
  /* Hyphenation prevents awkward overflow on long technical words */
  hyphens: auto;
}
.product-info .description p:last-child { margin-bottom: 0; }
.product-info .description strong {
  color: var(--ink);
  font-weight: 500;
  font-family: var(--serif-display);
  letter-spacing: 0.005em;
}
.product-info .description em { color: var(--ink); }
.product-info .description ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2em;
}
.product-info .description li {
  position: relative;
  padding: 4px 0 4px 22px;
  line-height: 1.7;
}
.product-info .description li::before {
  content: '';
  position: absolute; left: 6px; top: 16px;
  width: 6px; height: 1px;
  background: var(--sage);
}
.product-info .description br + strong,
.product-info .description br + br {
  margin-top: 4px;
}
.variant-select { display: block; margin-bottom: 22px; }
.variant-select label {
  display: block; font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--body); margin-bottom: 10px;
}
.variant-select select {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: white; font: inherit; font-family: var(--serif-body);
  font-size: 0.95rem; cursor: pointer; color: var(--ink);
}
.notice {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border-left: 3px solid var(--sage);
  font-size: 0.9rem;
  color: var(--body);
  font-style: italic;
}

/* ==========================================================================
   Cart
   ========================================================================== */

.cart-page { padding: 60px 0 100px; }
.cart-page > h1 { margin-bottom: 36px; text-align: center; }
.cart-table { width: 100%; }
.cart-line {
  display: grid; grid-template-columns: 130px 1fr auto auto;
  gap: 24px; align-items: center;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.cart-line:first-child { border-top: 1px solid var(--line); }
.cart-line .img {
  aspect-ratio: 1/1; background: var(--bg-alt);
  border-radius: var(--radius); overflow: hidden;
}
.cart-line .img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line .info h3 {
  font-size: 1.15rem; margin: 0 0 4px;
  font-family: var(--serif-display);
}
.cart-line .info p { margin: 0; color: var(--body); font-size: 0.9rem; }
.qty-ctrl {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.qty-ctrl button {
  background: none; border: 0; width: 36px; height: 36px;
  font-size: 1.1rem; cursor: pointer; color: var(--body);
}
.qty-ctrl button:hover { color: var(--ink); }
.qty-ctrl span { min-width: 32px; text-align: center; font-size: 0.95rem; color: var(--ink); }
.cart-line .line-total {
  font-family: var(--serif-display); font-size: 1.15rem;
  min-width: 100px; text-align: right; color: var(--ink);
}
.cart-line .remove {
  background: none; border: 0; color: var(--body);
  cursor: pointer; font-size: 0.8rem; text-decoration: underline;
  margin-top: 8px; padding: 0; font-family: inherit; font-style: italic;
}
.cart-line .remove:hover { color: var(--sage-deep); }

.cart-summary {
  margin-top: 40px;
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
  align-items: center;
  border-top: 2px solid var(--ink); padding-top: 28px;
}
.cart-summary .totals { text-align: right; }
.cart-summary .totals .row {
  display: flex; justify-content: space-between; gap: 80px;
  margin-bottom: 8px; font-size: 0.95rem; color: var(--body);
}
.cart-summary .totals .row.total {
  font-family: var(--serif-display); font-size: 1.5rem; color: var(--ink);
  border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px;
}

.empty-cart {
  text-align: center; padding: 100px 20px;
  color: var(--body);
}
.empty-cart h2 { color: var(--ink); }
.empty-cart svg { color: var(--sage); margin: 0 auto 24px; }

.checkout-actions {
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: flex-end; margin-top: 28px;
}
.checkout-actions .btn-dark { width: auto; }
.secure-note {
  font-size: 0.8rem; color: var(--body); text-align: right;
  margin-top: 14px; font-style: italic;
}

/* ==========================================================================
   About page
   ========================================================================== */

.about-hero {
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  padding: 70px 0 60px;
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 50%;
  background: radial-gradient(ellipse at right center, rgba(158,161,142,0.18), transparent 65%);
  pointer-events: none;
}
.about-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 80px; align-items: center;
}

.about-portrait { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.portrait-frame {
  width: 100%; max-width: 480px;
  background: linear-gradient(160deg, #fafaf6 0%, #efeae1 100%);
  padding: 18px;
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 18px 44px -12px rgba(60, 50, 35, 0.25),
    0 5px 16px rgba(60, 50, 35, 0.08);
  position: relative;
}
.portrait-frame::after {
  content: ''; position: absolute; inset: 18px;
  outline: 1px solid var(--gold);
  outline-offset: -6px;
  pointer-events: none;
}
.portrait-frame img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16/10; object-fit: cover;
  background: var(--bg-alt);
}
.portrait-caption {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 4px 6px;
  width: 100%; max-width: 460px;
  text-align: center;
}
.portrait-caption .cap-eye {
  font-family: var(--serif-body); font-style: italic;
  color: var(--sage-deep);
  font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
}
.portrait-caption .cap-loc {
  font-family: var(--serif-display);
  font-size: 0.95rem; color: var(--ink);
}

.about-intro .leaf { color: var(--sage); opacity: 0.85; margin-bottom: 16px; }
.about-intro .eyebrow {
  font-family: var(--serif-body); font-style: italic;
  color: var(--sage-deep);
  font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase;
  margin-bottom: 20px;
}
.about-intro h1 {
  font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 0 0 22px;
}
.about-intro h1::after {
  content: ''; display: block; width: 50px; height: 1px;
  background: var(--sage); margin-top: 22px;
}
.about-intro p.lede {
  color: var(--body); font-style: italic;
  font-size: 1.1rem; line-height: 1.75;
  max-width: 480px; margin: 0 0 32px;
}

.about-quote {
  background: var(--sage-soft);
  padding: 60px 0;
  text-align: center;
  position: relative;
}
.about-quote blockquote {
  margin: 0 auto;
  max-width: 720px;
  font-family: var(--serif-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  position: relative;
  padding: 0 30px;
  text-align: center;
}
/* Decorative quote mark sits ON ITS OWN LINE above the text — it never
   interferes with how the first line wraps */
.about-quote blockquote .qmark {
  display: block;
  font-family: var(--serif-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--sage);
  margin: 0 0 14px;
  opacity: 0.7;
}
.about-quote cite {
  display: inline-block; margin-top: 18px;
  font-family: var(--serif-body); font-style: italic;
  color: var(--sage-deep);
  font-size: 0.95rem; letter-spacing: 0.05em;
}

.about-bio { padding: 80px 0 50px; }
.about-bio-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 70px; align-items: start;
}
.bio-text {
  font-size: 1.05rem; line-height: 1.85; color: var(--body);
}
.bio-text p { margin-bottom: 1.3em; }
.bio-text a { color: var(--ink); border-bottom: 1px solid var(--sage); }
.bio-facts {
  background: var(--bg-soft);
  border-left: 3px solid var(--sage);
  padding: 28px 28px 22px;
}
.bio-facts h4 {
  font-family: var(--serif-display);
  font-size: 1.1rem; font-weight: 500;
  margin: 0 0 18px; color: var(--ink);
}
.bio-facts ul {
  list-style: none; padding: 0; margin: 0;
}
.bio-facts li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 90px 1fr;
  gap: 14px;
  font-size: 0.9rem; color: var(--body);
  line-height: 1.4;
}
.bio-facts li:first-child { border-top: 0; }
.bio-facts li span {
  font-family: var(--serif-body); font-style: italic;
  color: var(--sage-deep);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  align-self: center;
}

.about-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.gallery-tile {
  display: block;
  position: relative; overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-alt);
}
.gallery-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.gallery-tile:hover img { transform: scale(1.04); }
.gallery-tile .tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: white; font-family: var(--serif-display);
  font-size: 1rem; letter-spacing: 0.02em;
}

@media (max-width: 980px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-bio-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-intro h1::after { margin-left: auto; margin-right: auto; }
  /* .about-gallery stays 2x2 — defined in the base rule */
}

/* ==========================================================================
   Shop page hero (dynamic by category)
   ========================================================================== */

.shop-hero {
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  padding: 70px 0 50px;
  position: relative;
  overflow: hidden;
}
/* Sage wash on the right edge for warmth */
.shop-hero::before {
  content: ''; position: absolute; right: -10%; top: 0; bottom: 0; width: 55%;
  background: radial-gradient(ellipse at right center, rgba(158,161,142,0.22), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
/* Watercolour wash backdrop — a piece from the active category, blurred and
   faded, becomes pure colour and texture behind the catalog title.
   The image URL is set in JS via the --shop-backdrop CSS variable. */
.shop-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--shop-backdrop, url('https://cdn.shopify.com/s/files/1/0960/1869/4420/files/IMG_0721.jpg?v=1764391720'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(60px) saturate(0.9);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  transition: opacity .6s ease;
}
.shop-hero-inner { position: relative; z-index: 1; }
.shop-hero-inner {
  position: relative; z-index: 1;
  text-align: center; max-width: 720px;
}
.shop-hero .leaf {
  color: var(--sage); opacity: 0.85; margin: 0 auto 14px;
}
.shop-hero .eyebrow {
  font-family: var(--serif-body); font-style: italic;
  color: var(--sage-deep);
  font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase;
  margin-bottom: 14px;
}
.shop-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
}
.shop-hero h1::after {
  content: ''; display: block; width: 50px; height: 1px;
  background: var(--sage); margin: 18px auto 0;
}
.shop-hero .lede {
  color: var(--body); font-style: italic;
  font-size: 1.05rem; max-width: 580px; margin: 0 auto;
  line-height: 1.7;
}
.shop-results { padding-top: 30px; }

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-hero {
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  padding: 70px 0 50px;
  position: relative;
  overflow: hidden;
}
.contact-hero::before {
  content: ''; position: absolute; left: -10%; top: 0; bottom: 0; width: 50%;
  background: radial-gradient(ellipse at left center, rgba(158,161,142,0.18), transparent 65%);
  pointer-events: none;
}
.contact-hero-inner {
  position: relative; z-index: 1;
  text-align: center; max-width: 700px;
}
.contact-hero .leaf {
  color: var(--sage); opacity: 0.85; margin: 0 auto 14px;
}
.contact-hero .eyebrow {
  font-family: var(--serif-body); font-style: italic;
  color: var(--sage-deep);
  font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase;
  margin-bottom: 14px;
}
.contact-hero h1 { margin: 0 0 18px; }
.contact-hero h1::after {
  content: ''; display: block; width: 50px; height: 1px;
  background: var(--sage); margin: 18px auto 0;
}
.contact-hero .lede {
  color: var(--body); font-style: italic;
  font-size: 1.05rem; max-width: 540px; margin: 0 auto;
}

.contact-grid-section { padding: 60px 0 30px; }
.contact-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 50px; align-items: start;
}

/* ---- The form, as a card ---- */
.contact-form-card {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 36px 36px 30px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 8px 28px -10px rgba(60,50,35,0.10);
}
.contact-form-card .field { display: flex; flex-direction: column; gap: 8px; }
.contact-form-card label {
  font-family: var(--serif-body); font-style: italic;
  color: var(--sage-deep);
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.contact-form-card input,
.contact-form-card textarea,
.contact-form-card select {
  padding: 13px 16px; border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft); color: var(--ink);
  font: inherit; font-family: var(--serif-body); font-size: 0.98rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.contact-form-card textarea { min-height: 160px; resize: vertical; }
.contact-form-card input:focus,
.contact-form-card textarea:focus,
.contact-form-card select:focus {
  outline: none; border-color: var(--sage);
  background: white;
  box-shadow: 0 0 0 3px rgba(158,161,142,0.18);
}
.contact-form-card select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%237a7d6a' stroke-width='1.5'><polyline points='1,1.5 6,6.5 11,1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}

/* ---- Side info column ---- */
.contact-side {
  display: flex; flex-direction: column; gap: 18px;
}
.side-block {
  padding: 26px 28px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.side-block.soft {
  background: var(--bg-soft);
  border-color: var(--bg-soft);
  border-left: 3px solid var(--sage);
}
.side-block h4 {
  font-family: var(--serif-display); font-weight: 500;
  font-size: 1.05rem; margin: 0 0 14px; color: var(--ink);
}
.side-block p {
  font-size: 0.95rem; color: var(--body); margin: 0;
  line-height: 1.7;
}
.side-list { list-style: none; padding: 0; margin: 0; }
.side-list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.side-list li:first-child { border-top: 0; padding-top: 0; }
.side-list .ico {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sage);
  border-radius: 50%;
  color: var(--sage-deep);
  flex-shrink: 0;
}
.side-list .lbl {
  display: block;
  font-family: var(--serif-body); font-style: italic;
  color: var(--sage-deep);
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 2px;
}
.side-list a, .side-list span:not(.lbl) {
  color: var(--ink); font-size: 0.95rem;
}
.side-list a:hover { color: var(--sage-deep); }

/* ---- FAQ accordion ---- */
.faq {
  max-width: 760px; margin: 0 auto;
}
.faq details {
  border-top: 1px solid var(--line);
  padding: 18px 6px;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  font-family: var(--serif-display);
  font-size: 1.1rem;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--serif-body);
  color: var(--sage-deep);
  font-size: 1.4rem; line-height: 1;
  transition: transform .25s ease;
}
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--sage-deep); }
.faq details p {
  margin: 14px 0 4px;
  color: var(--body);
  font-size: 0.98rem; line-height: 1.75;
  max-width: 640px;
}

@media (max-width: 980px) {
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-form-card { padding: 28px 22px 22px; }
}

/* ==========================================================================
   Prose pages (success / cancel / thanks)
   ========================================================================== */

.prose {
  max-width: 720px; margin: 0 auto;
  font-size: 1.05rem; color: var(--ink); line-height: 1.85;
}
.prose h1 { margin-bottom: 28px; text-align: center; }
.prose h1::after {
  content: ''; display: block; width: 60px; height: 1px;
  background: var(--sage); margin: 20px auto 0;
}
.prose p { margin-bottom: 1.3em; color: var(--body); }
.prose a { color: var(--ink); border-bottom: 1px solid var(--sage); }

.contact-form {
  display: grid; gap: 18px; max-width: 520px; margin: 30px auto 0;
}
.contact-form input, .contact-form textarea {
  padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius); font: inherit; font-family: var(--serif-body);
  font-size: 0.95rem; background: var(--bg-soft); color: var(--ink);
}
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--sage); background: white;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--sage);     /* matches the Shopify footer band */
  color: white;
  padding: 60px 0 30px;
  margin-top: 80px;
}
.site-footer a { color: white; }
.site-footer a:hover { color: var(--bg-soft); }
.site-footer .grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 60px;
  margin-bottom: 40px;
}
.site-footer h4 {
  font-family: var(--serif-display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: white; margin-bottom: 16px;
  font-weight: 500;
}
.site-footer p { color: rgba(255,255,255,0.92); font-size: 0.92rem; margin: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; font-size: 0.92rem; }
.site-footer .socials {
  display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap;
}
.site-footer .socials a,
.site-footer .socials .soon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.5); border-radius: 50%;
  transition: background .2s, border-color .2s, opacity .2s;
}
.site-footer .socials a:hover {
  background: white; color: var(--sage); border-color: white;
}
.site-footer .socials svg { width: 16px; height: 16px; }
/* "Coming soon" placeholders — visually present but inactive */
.site-footer .socials .soon {
  opacity: 0.45;
  cursor: not-allowed;
  border-style: dashed;
}
.site-footer .socials .soon em {
  position: absolute; top: -10px; right: -8px;
  font-style: normal; font-family: var(--serif-body);
  background: var(--ink); color: white;
  font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 999px;
  line-height: 1;
}
.site-footer .copyright {
  border-top: 1px solid rgba(255,255,255,0.25); padding-top: 22px;
  font-size: 0.82rem; color: rgba(255,255,255,0.85); text-align: center;
}

/* ==========================================================================
   Newsletter band (homepage)
   ========================================================================== */

.newsletter {
  background: var(--bg-soft);
  padding: 70px 0;
  text-align: center;
}
.newsletter h2 { margin-bottom: 12px; }
.newsletter p { color: var(--body); margin-bottom: 28px; }
.newsletter form {
  display: flex; gap: 0; width: 100%; max-width: 480px; margin: 0 auto;
  border: 1px solid var(--ink);
}
.newsletter input {
  flex: 1 1 auto;            /* allow it to shrink */
  min-width: 0;              /* CRITICAL: lets the input get smaller than its content width */
  padding: 14px 18px; border: 0; background: white;
  font: inherit; font-family: var(--serif-body); font-size: 0.95rem;
  color: var(--ink);
}
.newsletter input:focus { outline: none; }
.newsletter button {
  flex: 0 0 auto;            /* never shrink the button */
  padding: 14px 22px;
  background: var(--ink); color: white; border: 0;
  font: inherit; font-family: var(--serif-body); font-size: 0.85rem;
  letter-spacing: 0.16em; text-transform: lowercase;
  cursor: pointer; transition: background .2s;
  white-space: nowrap;       /* "subscribe" never wraps */
}
.newsletter button:hover { background: var(--sage-deep); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ==========================================================================
   Responsive — tablet (≤980px) + phone (≤640px) + touch
   ========================================================================== */

@media (max-width: 980px) {
  /* Layout collapse */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .product-detail { grid-template-columns: 1fr; gap: 36px; }
  .cats { grid-template-columns: 1fr; }
  .site-footer .grid { grid-template-columns: 1fr 1fr; gap: 30px; }

  /* Header — shrink so it doesn't dominate */
  :root { --header-h: 80px; }
  .brand img { height: 56px; }
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: white; border-bottom: 1px solid var(--line);
    padding: 24px 28px; gap: 18px;
  }
  .menu-toggle { display: inline-flex; }

  /* Homepage hero */
  .hero { padding: 50px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; min-height: auto; }
  .hero-text { padding: 0; }
  .hero-text .leaf { margin-left: auto; margin-right: auto; }
  .hero-text .hero-logo { margin-left: auto; margin-right: auto; }
  .hero-text p.sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .art-frame { max-width: 360px; margin: 0 auto; }

  /* About / Contact / Shop heroes — already collapsed but tighten padding */
  .about-hero { padding: 50px 0 30px; }
  .about-portrait { align-items: center; }
  .portrait-frame { max-width: 460px; margin: 0 auto; }
  .contact-hero { padding: 50px 0 30px; }
  .shop-hero { padding: 50px 0 30px; }

  /* Filter bar — keep all pills on one row, push result count to its own line below */
  .filters {
    flex-wrap: nowrap;
    justify-content: space-around;
    gap: 0;
  }
  .filter-btn {
    flex: 0 1 auto;
    padding: 12px 10px;
    font-size: 0.88rem;
    white-space: nowrap;
  }
  .result-count { width: 100%; margin: 8px 0 0; padding: 0; text-align: center; flex-basis: 100%; }

  /* Cart */
  .cart-line { grid-template-columns: 90px 1fr; }
  .cart-line .line-total, .cart-line .qty-ctrl { grid-column: 2; justify-self: start; }
  .cart-summary { grid-template-columns: 1fr; }
  .cart-summary .totals { text-align: left; }
  .cart-summary .totals .row { gap: 40px; }

  /* General section padding */
  section { padding: 50px 0; }
}

@media (max-width: 640px) {
  /* Phone: tighter container, gallery-wall grids, prominent logo */
  :root { --header-h: 84px; }
  .container { padding: 0 16px; }
  .brand img { height: 68px; }              /* much bigger — was 48 */
  .brand .wordmark { display: none; }

  /* Product grid: TWO columns so the featured wall + shop feel browseable
     instead of one card per scroll. Tighter caption type to suit the smaller card. */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .product-card .meta { padding: 10px 2px 0; }
  .product-card .meta h3 { font-size: 0.92rem; line-height: 1.3; }
  .product-card .meta .price { font-size: 0.85rem; }
  .product-card .badge { font-size: 0.6rem; padding: 3px 8px; top: 8px; left: 8px; }

  /* Categories: a tight 3-up triptych rather than 3 stacked full-width cards */
  .cats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cat-card { aspect-ratio: 3/4; }
  .cat-card .label { padding: 12px 8px; }
  .cat-card .label h3 { font-size: 0.95rem; margin-bottom: 2px; }
  .cat-card .label span { font-size: 0.6rem; letter-spacing: 0.1em; }

  /* About page mini-gallery: tighter spacing on phone, still 2-up */
  .about-gallery { gap: 10px; }
  .gallery-tile .tile-cap { padding: 12px 12px; font-size: 0.85rem; }

  /* Tighter section rhythm so the whole page feels less endless */
  section { padding: 36px 0; }

  /* Newsletter on phone — make sure form never overflows */
  .newsletter { padding: 44px 0; }
  .newsletter h2 { font-size: 1.4rem; }
  .newsletter p { font-size: 0.92rem; }
  .newsletter form { max-width: 100%; }
  .newsletter input { padding: 12px 14px; font-size: 0.9rem; }
  .newsletter button { padding: 12px 16px; font-size: 0.78rem; letter-spacing: 0.12em; }
  .section-head { margin-bottom: 26px; }
  .section-head h2 { font-size: 1.4rem; }
  .section-head .eyebrow { font-size: 0.7rem; margin-bottom: 8px; letter-spacing: 0.22em; }
  .section-head p { font-size: 0.95rem; }

  .site-footer { padding: 40px 0 24px; margin-top: 50px; }
  .site-footer .grid { grid-template-columns: 1fr; }

  /* ---- Homepage hero on phone ---- */
  /* Text greets the visitor; the painting sits quietly underneath as a single
     visual punctuation — no price tag, no "featured" badge, no dots.
     Tight spacing so the painting comes up close to the fold. */
  .hero { padding: 20px 0 36px; }
  .hero-grid { gap: 22px; }
  .hero-text { order: 1; padding: 0; }
  .hero-artwork { order: 2; gap: 10px; }

  .hero-text h1 {
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 14px;
    padding: 0 4px;
  }
  .hero-text h1 br { display: none; }
  .hero-text .leaf { width: 24px; height: 24px; margin-bottom: 10px; }
  .hero-text .eyebrow { font-size: 0.7rem; letter-spacing: 0.24em; margin-bottom: 10px; }
  .hero-text .hero-logo {
    height: 90px;
    margin: 0 auto 14px;
  }
  .hero-text p.sub {
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 0 8px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Painting frame, mobile: simpler, no commerce chrome */
  .art-frame { max-width: 280px; padding: 12px; }
  .art-mat { inset: 12px; outline-offset: -5px; }

  /* Caption: title only, italic, like a museum label */
  .art-caption { display: block; max-width: 280px; text-align: center; padding: 0; }
  .art-caption .art-label,
  .art-caption .art-price { display: none; }
  .art-caption .art-meta { display: block; }
  .art-caption .art-title {
    font-family: var(--serif-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--body);
  }
  /* Hide the slide indicators on phone — auto-rotation alone is enough */
  .art-dots { display: none; }

  /* Buttons: auto-width pill rather than a heavy full-width banner */
  .hero-actions {
    gap: 14px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .hero-text .hero-cta,
  .hero-link {
    width: auto;
    padding: 13px 24px;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
  }

  /* About */
  .about-hero { padding: 36px 0 20px; }
  .portrait-frame { padding: 12px; }
  .portrait-frame::after { inset: 12px; outline-offset: -4px; }
  .about-quote { padding: 40px 0; }
  .about-quote blockquote { padding: 0 16px; }
  .about-quote blockquote .qmark { font-size: 2.2rem; }
  .about-bio { padding: 50px 0 30px; }
  .bio-facts { padding: 22px; }
  .bio-facts li { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .about-gallery { gap: 8px; }

  /* Contact */
  .contact-hero { padding: 40px 0 20px; }
  .contact-form-card { padding: 24px 20px 20px; }
  .side-block { padding: 22px; }
  .side-list .ico { width: 32px; height: 32px; }

  /* Shop */
  .shop-hero { padding: 40px 0 20px; }
  .shop-results { padding-top: 16px; }
  .filter-btn { padding: 12px 8px; font-size: 0.82rem; }

  /* FAQ */
  .faq summary { font-size: 1rem; gap: 12px; }

  /* Product detail */
  .product-info h1 { font-size: 1.7rem; }
  .gallery .thumbs { grid-template-columns: repeat(4, 1fr); }
  .product-info .price-line { font-size: 1.2rem; }

  /* Cart line */
  .cart-line { gap: 14px; padding: 18px 0; }
  .cart-line .info h3 { font-size: 1rem; }

  /* Section padding */
  section { padding: 40px 0; }
}

/* Touch device — guarantee tap targets are ≥44px */
@media (hover: none) and (pointer: coarse) {
  .filter-btn { min-height: 44px; }
  .qty-ctrl button { min-width: 44px; min-height: 44px; }
  .nav.open a { padding: 10px 0; }
  .cart-btn { min-height: 40px; }
  .menu-toggle { min-width: 44px; min-height: 44px; }
}