/*
Theme Name: Megha Art
Theme URI: https://example.com/megha-art
Author: OpenAI Codex
Description: Custom WooCommerce theme for Megha Art, converted from the supplied HTML with editable homepage media and WooCommerce-managed product listings.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: megha-art
Woo: 1
*/


    /* =====================================================
       DESIGN SYSTEM
    ===================================================== */

    :root {

      --cream: #f5f2ec;
      --paper: #faf9f6;
      --soft: #ebe7df;

      --ink: #24231f;
      --muted: #77736b;

      --earth: #8b806d;
      --earth-light: #c9c0b2;

      --line: rgba(36, 35, 31, 0.15);

      --max-width: 1440px;

    }



    /* =====================================================
       RESET
    ===================================================== */

    * {

      box-sizing: border-box;

      margin: 0;

      padding: 0;

    }


    html {

      scroll-behavior: smooth;

    }


    body {

      background: var(--paper);

      color: var(--ink);

      font-family: "DM Sans", sans-serif;

      font-weight: 300;

      line-height: 1.6;

    }


    body.shop-open {

      overflow-x: hidden;

    }


    img {

      display: block;

      width: 100%;

      height: auto;

    }


    a {

      color: inherit;

      text-decoration: none;

    }


    button {

      font: inherit;

      cursor: pointer;

    }



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

    .header {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      z-index: 100;

      padding: 24px 5vw;

      display: grid;

      grid-template-columns: 1fr auto 1fr;

      align-items: center;

      background: var(--paper);

      color: var(--ink);

      transition:
        background 0.4s ease,
        color 0.4s ease,
        border 0.4s ease;

    }


    .header.scrolled,
    .header.shop-header {

      background: var(--paper);

      color: var(--ink);

      border-bottom: 1px solid var(--line);

      backdrop-filter: blur(12px);

    }


    .logo {

      grid-column: 2;

      font-family: "Playfair Display", serif;

      font-size: 25px;

      font-weight: 400;

      letter-spacing: -0.02em;

      white-space: nowrap;

      cursor: pointer;

    }


    .nav-right {

      grid-column: 3;

      justify-self: end;

      display: flex;

      align-items: center;

      gap: 30px;

      font-size: 12px;

      letter-spacing: 0.04em;

    }


    .nav-right a {

      position: relative;

    }


    .nav-right > a:not(.bag-link)::after {

      content: "";

      position: absolute;

      left: 0;

      bottom: -5px;

      width: 0;

      height: 1px;

      background: currentColor;

      transition: width 0.3s ease;

    }


    .nav-right > a:not(.bag-link):hover::after {

      width: 100%;

    }



    /* SHOPPING BAG */

    .bag-link {

      position: relative;

      width: 24px;

      height: 27px;

      display: flex;

      align-items: center;

      justify-content: center;

    }


    .bag-icon {

      width: 18px;

      height: 20px;

      position: relative;

      border: 1px solid currentColor;

      border-radius: 1px 1px 3px 3px;

    }


    .bag-icon::before {

      content: "";

      position: absolute;

      width: 8px;

      height: 7px;

      border: 1px solid currentColor;

      border-bottom: 0;

      border-radius: 8px 8px 0 0;

      left: 50%;

      top: -7px;

      transform: translateX(-50%);

    }


    .bag-count {

      position: absolute;

      right: -7px;

      top: -7px;

      min-width: 15px;

      height: 15px;

      padding: 0 3px;

      border-radius: 50%;

      background: var(--ink);

      color: white;

      display: flex;

      align-items: center;

      justify-content: center;

      font-size: 8px;

      line-height: 1;

    }



    /* =====================================================
       PAGE VIEWS
    ===================================================== */

    .page-view {

      display: none;

    }


    .page-view.active {

      display: block;

    }



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

    .hero {

      height: 100vh;

      min-height: 650px;

      position: relative;

      overflow: hidden;

      color: white;

      background: #b7b0a5;

    }


    .hero video {

      z-index: -1;

      position: absolute;

      inset: 0;

      width: 100%;

      height: 100%;

      object-fit: cover;

    }


    .hero-placeholder {

      z-index: 0;

      position: absolute;

      inset: 0;

      background-image: var(--megha-hero-background, none);

      background-size: cover;

      background-position: center center;

      background-repeat: no-repeat;

    }


    .hero::after {

      content: "";

      position: absolute;

      inset: 0;

      background:
        linear-gradient(
          to top,
          rgba(0,0,0,0.52),
          rgba(0,0,0,0.02) 65%
        );

    }


    .hero-content {

      position: absolute;

      z-index: 2;

      left: 5vw;

      bottom: 9vh;

      max-width: 650px;

    }


    .eyebrow {

      font-size: 10px;

      text-transform: uppercase;

      letter-spacing: 0.22em;

      margin-bottom: 16px;

    }


    .hero h1 {

      font-family: "Playfair Display", serif;

      font-size: clamp(44px, 6vw, 82px);

      font-weight: 400;

      line-height: 1.02;

      margin-bottom: 20px;

    }


    .hero p {

      max-width: 520px;

      font-size: 15px;

    }



    /* =====================================================
       GENERAL SECTIONS
    ===================================================== */

    .section {

      padding: 130px 5vw;

      max-width: var(--max-width);

      margin: auto;

    }


    .section-heading {

      display: flex;

      justify-content: space-between;

      align-items: baseline;

      margin-bottom: 65px;

    }


    .section-heading h2 {

      font-family: "Playfair Display", serif;

      font-weight: 400;

      font-size: clamp(34px, 4vw, 52px);

    }


    .section-number {

      font-size: 10px;

      color: var(--muted);

      letter-spacing: 0.14em;

    }



    /* =====================================================
       HOMEPAGE ABOUT PREVIEW
    ===================================================== */

    .home-about {

      background: var(--cream);

      padding: 130px 5vw;

    }


    .home-about-inner {

      max-width: var(--max-width);

      margin: auto;

      display: grid;

      grid-template-columns: 0.85fr 1.15fr;

      gap: 9vw;

      align-items: center;

    }


    .home-about-image {

      background: var(--soft);

      overflow: hidden;

    }


    .home-about-image img {

      aspect-ratio: 4 / 5;

      object-fit: cover;

    }


    .home-about-content {

      max-width: 650px;

    }


    .home-about-content h2 {

      font-family: "Playfair Display", serif;

      font-size: clamp(40px, 5vw, 65px);

      font-weight: 400;

      line-height: 1.05;

      margin-bottom: 25px;

    }


    .home-about-content p {

      color: #646159;

      font-size: 15px;

      max-width: 570px;

      margin-bottom: 20px;

    }


    .text-link {

      display: inline-block;

      margin-top: 5px;

      color: var(--earth);

      font-size: 11px;

      text-transform: uppercase;

      letter-spacing: 0.10em;

      border-bottom: 1px solid var(--earth-light);

      padding-bottom: 4px;

    }



    /* =====================================================
       DETAILED SHOP PAGE
    ===================================================== */

    .shop-page {

      padding-top: 150px;

    }


    .shop-intro {

      max-width: var(--max-width);

      margin: auto;

      padding: 0 5vw 90px;

    }


    .shop-intro h1 {

      font-family: "Playfair Display", serif;

      font-weight: 400;

      font-size: clamp(48px, 7vw, 90px);

      line-height: 1;

      max-width: 900px;

      margin-bottom: 25px;

    }


    .shop-intro p {

      max-width: 600px;

      color: var(--muted);

      font-size: 14px;

    }



    /* =====================================================
       PRODUCT GROUPS
    ===================================================== */

    .product-section {

      padding: 120px 5vw;

      max-width: var(--max-width);

      margin: auto;

    }


    .product-section:nth-child(even) {

      background: var(--cream);

      max-width: none;

    }


    .product-section-inner {

      max-width: var(--max-width);

      margin: auto;

    }


    .product-section-header {

      margin-bottom: 55px;

    }


    .product-section-header h2 {

      font-family: "Playfair Display", serif;

      font-size: clamp(36px, 5vw, 58px);

      font-weight: 400;

      margin-bottom: 10px;

    }


    .product-section-header p {

      color: var(--muted);

      font-size: 13px;

      max-width: 650px;

    }


    .series-header {

      margin-bottom: 35px;

    }


    .series-header h3 {

      font-family: "Playfair Display", serif;

      font-size: 32px;

      font-weight: 400;

      margin-bottom: 5px;

    }


    .series-header p {

      color: var(--earth);

      font-size: 12px;

    }



    /* =====================================================
       DETAILED ARTWORK GRID
    ===================================================== */

    .detailed-art-grid {

      display: grid;

      grid-template-columns: repeat(2, 1fr);

      gap: 100px 7vw;

    }


    .detailed-art-card {

      min-width: 0;

    }


    .detailed-art-card:nth-child(even) {

      margin-top: 0;

    }


    .art-gallery {

      display: flex;

      gap: 10px;

      overflow-x: auto;

      scroll-snap-type: x mandatory;

      scrollbar-width: none;

      -webkit-overflow-scrolling: touch;

      margin-bottom: 25px;

      padding-bottom: 5px;

    }


    .art-gallery::-webkit-scrollbar {

      display: none;

    }


    .art-gallery img {

      flex: 0 0 82%;

      aspect-ratio: 4 / 5;

      object-fit: cover;

      scroll-snap-align: start;

      background: var(--soft);

    }


    .art-gallery-hint {

      color: var(--muted);

      font-size: 9px;

      text-transform: uppercase;

      letter-spacing: 0.12em;

      margin-top: -15px;

      margin-bottom: 18px;

    }


    .detailed-art-info h4 {

      font-family: "Playfair Display", serif;

      font-size: 27px;

      font-weight: 400;

      margin-bottom: 4px;

    }


    .art-description {

      color: #5e5b55;

      font-size: 13px;

      max-width: 540px;

      margin: 15px 0 20px;

    }


    .art-meta {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 7px 25px;

      color: var(--muted);

      font-size: 11px;

      margin-bottom: 20px;

    }


    .art-price {

      font-size: 15px;

      margin-bottom: 5px;

    }


    .art-price-secondary {

      color: var(--muted);

      font-size: 13px;

      margin-top: 4px;

    }


    .art-frame {

      color: var(--muted);

      font-size: 11px;

      margin-bottom: 5px;

    }


    .art-coa {

      color: var(--earth);

      font-size: 11px;

      margin: 12px 0 22px;

    }



    /* =====================================================
       PRICE / FRAME SELECTOR
    ===================================================== */

    .product-options {

      margin: 20px 0 22px;

    }


    .option-label {

      color: var(--muted);

      font-size: 9px;

      text-transform: uppercase;

      letter-spacing: 0.10em;

      margin-bottom: 9px;

    }


    .option-row {

      display: flex;

      flex-wrap: wrap;

      gap: 8px;

    }


    .option-button {

      background: transparent;

      border: 1px solid var(--earth-light);

      color: var(--earth);

      padding: 9px 14px;

      font-size: 9px;

      text-transform: uppercase;

      letter-spacing: 0.08em;

      transition: 0.3s ease;

    }


    .option-button:hover,

    .option-button.selected {

      background: var(--earth);

      color: white;

      border-color: var(--earth);

    }



    /* =====================================================
       CTA BUTTONS
    ===================================================== */

    .actions {

      display: flex;

      gap: 10px;

      flex-wrap: wrap;

    }


    .button {

      min-width: 125px;

      padding: 12px 21px;

      display: inline-flex;

      justify-content: center;

      align-items: center;

      font-size: 10px;

      text-transform: uppercase;

      letter-spacing: 0.10em;

      border: 1px solid var(--ink);

      transition: 0.3s ease;

    }


    .button-primary {

      background: var(--ink);

      color: white;

      border-color: var(--ink);

    }


    .button-primary:hover {

      background: var(--earth);

      border-color: var(--earth);

    }


    .button-secondary {

      background: #f7f5f0;

      color: var(--ink);

      border-color: #bdb8ae;

    }


    .button-secondary:hover {

      background: #ebe7df;

      border-color: var(--ink);

    }



    /* =====================================================
       PRINTS
    ===================================================== */

    .prints-shop-section {

      background: var(--cream);

      padding: 130px 5vw;

    }


    .prints-shop-inner {

      max-width: var(--max-width);

      margin: auto;

    }


    .print-category {

      margin-bottom: 110px;

    }


    .print-category:last-child {

      margin-bottom: 0;

    }


    .print-category h3 {

      font-family: "Playfair Display", serif;

      font-size: 34px;

      font-weight: 400;

      margin-bottom: 7px;

    }


    .print-category > p {

      color: var(--muted);

      font-size: 12px;

      margin-bottom: 35px;

    }



    /* =====================================================
       A3 — 15 PRINTS
    ===================================================== */

    .a3-gallery {

      display: flex;

      gap: 12px;

      overflow-x: auto;

      scroll-snap-type: x mandatory;

      scrollbar-width: none;

      -webkit-overflow-scrolling: touch;

      margin-bottom: 25px;

      padding-bottom: 5px;

    }


    .a3-gallery::-webkit-scrollbar {

      display: none;

    }


    .a3-gallery img {

      flex: 0 0 30%;

      aspect-ratio: 4 / 5;

      object-fit: cover;

      scroll-snap-align: start;

      background: var(--soft);

    }


    .print-price-large {

      font-size: 17px;

      margin-bottom: 6px;

    }


    .print-note {

      color: var(--muted);

      font-size: 11px;

      margin-bottom: 22px;

    }



    /* =====================================================
       A4
    ===================================================== */

    .a4-products {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 30px;

    }


    .a4-card {

      background: var(--paper);

      overflow: hidden;

      padding-bottom: 30px;

    }


    .a4-card-image {

      overflow: hidden;

      margin-bottom: 23px;

    }


    .a4-card-image img {

      aspect-ratio: 4 / 5;

      object-fit: cover;

      transition: transform 0.7s ease;

    }


    .a4-card:hover .a4-card-image img {

      transform: scale(1.025);

    }


    .a4-card-info {

      padding: 0 22px;

    }


    .a4-card-info h4 {

      font-family: "Playfair Display", serif;

      font-size: 25px;

      font-weight: 400;

      margin-bottom: 5px;

    }


    .a4-size {

      color: var(--muted);

      font-size: 11px;

      margin-bottom: 13px;

    }


    .a4-price {

      font-size: 15px;

      margin-bottom: 20px;

    }


    .frame-label {

      color: var(--muted);

      font-size: 9px;

      text-transform: uppercase;

      letter-spacing: 0.10em;

      margin-bottom: 9px;

    }


    .frame-options {

      display: flex;

      gap: 8px;

      margin-bottom: 22px;

    }


    .frame-option {

      background: transparent;

      border: 1px solid var(--earth-light);

      color: var(--earth);

      padding: 8px 14px;

      font-size: 9px;

      text-transform: uppercase;

      letter-spacing: 0.08em;

      transition: 0.3s ease;

    }


    .frame-option:hover,

    .frame-option.selected {

      background: var(--earth);

      color: white;

      border-color: var(--earth);

    }



    /* =====================================================
       COMMISSIONS
    ===================================================== */

    .commission {

      padding: 130px 5vw;

      max-width: var(--max-width);

      margin: auto;

    }


    .commission-image {

      height: min(70vh, 760px);

      overflow: hidden;

      background: var(--soft);

    }


    .commission-image img {

      width: 100%;

      height: 100%;

      object-fit: cover;

    }


    .commission-content {

      padding: 45px 0;

      max-width: 700px;

    }


    .commission-content h2 {

      font-family: "Playfair Display", serif;

      font-size: clamp(35px, 5vw, 60px);

      font-weight: 400;

      line-height: 1.05;

      margin-bottom: 20px;

    }


    .commission-content p {

      max-width: 520px;

      color: var(--muted);

      margin-bottom: 25px;

      font-size: 14px;

    }


    .commission-links {

      display: flex;

      flex-wrap: wrap;

      gap: 25px;

      font-size: 11px;

      text-transform: uppercase;

      letter-spacing: 0.10em;

    }


    .commission-links a {

      color: var(--earth);

      border-bottom: 1px solid var(--earth-light);

      padding-bottom: 4px;

    }



    /* =====================================================
       INSTAGRAM
    ===================================================== */

    .instagram {

      padding: 130px 5vw 90px;

      max-width: var(--max-width);

      margin: auto;

      text-align: center;

    }


    .instagram h2 {

      font-family: "Playfair Display", serif;

      font-size: 45px;

      font-weight: 400;

      margin-bottom: 12px;

    }


    .instagram-handle {

      color: var(--earth);

      font-size: 13px;

      margin-bottom: 45px;

    }


    .instagram-grid {

      display: flex;

      gap: 8px;

      overflow-x: auto;

      scroll-snap-type: x mandatory;

      scrollbar-width: none;

      margin-bottom: 35px;

      -webkit-overflow-scrolling: touch;

    }


    .instagram-grid::-webkit-scrollbar {

      display: none;

    }


    .instagram-grid img {

      flex: 0 0 23%;

      aspect-ratio: 1;

      object-fit: cover;

      scroll-snap-align: start;

    }



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

    footer {

      border-top: 1px solid var(--line);

      padding: 45px 5vw 30px;

    }


    .footer-top {

      max-width: var(--max-width);

      margin: auto;

      display: flex;

      justify-content: space-between;

      gap: 30px;

      padding-bottom: 60px;

    }


    .footer-logo {

      font-family: "Playfair Display", serif;

      font-size: 30px;

    }


    .footer-links {

      display: flex;

      gap: 30px;

      font-size: 12px;

    }


    .footer-bottom {

      max-width: var(--max-width);

      margin: auto;

      padding-top: 20px;

      border-top: 1px solid var(--line);

      display: flex;

      justify-content: space-between;

      font-size: 10px;

      color: var(--muted);

    }




    /* =====================================================
       WORKING SHOPPING BAG
    ===================================================== */

    .bag-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.28);
      opacity: 0;
      visibility: hidden;
      transition: 0.3s ease;
      z-index: 190;
    }

    .bag-overlay.open {
      opacity: 1;
      visibility: visible;
    }

    .bag-drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: min(440px, 92vw);
      height: 100vh;
      background: var(--paper);
      z-index: 200;
      transform: translateX(100%);
      transition: transform 0.35s ease;
      display: flex;
      flex-direction: column;
      box-shadow: -15px 0 45px rgba(0,0,0,0.08);
    }

    .bag-drawer.open {
      transform: translateX(0);
    }

    .bag-drawer-header {
      padding: 28px 28px 22px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .bag-drawer-header h2 {
      font-family: "Playfair Display", serif;
      font-weight: 400;
      font-size: 30px;
    }

    .bag-close {
      border: 0;
      background: transparent;
      color: var(--ink);
      font-size: 28px;
      line-height: 1;
      padding: 4px;
    }

    .bag-items {
      flex: 1;
      overflow-y: auto;
      padding: 10px 28px 20px;
    }

    .bag-item {
      display: grid;
      grid-template-columns: 82px 1fr auto;
      gap: 15px;
      padding: 20px 0;
      border-bottom: 1px solid var(--line);
    }

    .bag-item-image {
      width: 82px;
      height: 104px;
      object-fit: cover;
      background: var(--soft);
    }

    .bag-item-info h3 {
      font-family: "Playfair Display", serif;
      font-size: 19px;
      font-weight: 400;
      margin-bottom: 3px;
    }

    .bag-item-meta {
      color: var(--muted);
      font-size: 10px;
      margin-bottom: 10px;
    }

    .bag-item-price {
      font-size: 12px;
      margin-bottom: 10px;
    }

    .bag-item-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .qty-button {
      width: 25px;
      height: 25px;
      border: 1px solid var(--earth-light);
      background: transparent;
      color: var(--ink);
    }

    .qty-value {
      min-width: 18px;
      text-align: center;
      font-size: 11px;
    }

    .bag-remove {
      align-self: start;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .bag-empty {
      display: none;
      padding: 45px 28px;
      color: var(--muted);
      font-size: 13px;
    }

    .bag-empty.show {
      display: block;
    }

    .bag-summary {
      border-top: 1px solid var(--line);
      padding: 22px 28px 28px;
      background: var(--cream);
    }

    .bag-summary > div {
      display: flex;
      justify-content: space-between;
      margin-bottom: 18px;
      font-size: 13px;
    }

    .bag-summary strong {
      font-weight: 500;
    }

    .bag-checkout {
      width: 100%;
      padding: 14px 20px;
      border: 1px solid var(--ink);
      background: var(--ink);
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.10em;
      font-size: 10px;
    }

    .bag-checkout:hover {
      background: var(--earth);
      border-color: var(--earth);
    }

    body.bag-open {
      overflow: hidden;
    }



    /* =====================================================
       GLOBAL SHOP ALIGNMENT
    ===================================================== */

    .shop-page,
    .shop-page > *,
    .product-section-inner,
    .prints-shop-inner,
    .shop-intro {
      width: 100%;
    }

    .shop-page .product-section-inner,
    .shop-page .prints-shop-inner,
    .shop-page .shop-intro {
      max-width: var(--max-width);
      margin-left: auto;
      margin-right: auto;
    }

    .product-section:nth-child(even) {
      width: 100%;
      max-width: none;
    }

    .detailed-art-grid {
      align-items: start;
    }

    .detailed-art-card,
    .a4-card,
    .print-category {
      min-width: 0;
      text-align: left;
    }

    .detailed-art-card > *,
    .a4-card > *,
    .a4-card-info,
    .detailed-art-info {
      margin-left: 0;
      margin-right: 0;
    }

    .art-gallery,
    .a3-gallery {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
    }

    .a4-products {
      align-items: start;
    }

    /* Empty image areas ready for your artwork files */
    .image-placeholder {
      width: 100%;
      aspect-ratio: 4 / 5;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--soft);
      color: var(--muted);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    .a3-placeholder {
      flex: 0 0 30%;
      aspect-ratio: 4 / 5;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--soft);
      color: var(--muted);
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.10em;
      scroll-snap-align: start;
    }

    /* =====================================================
       MOBILE
    ===================================================== */

    @media (max-width: 800px) {


      .header {

        grid-template-columns: 1fr auto;

        padding: 19px 5vw;

      }


      .logo {

        grid-column: 1;

        justify-self: start;

        font-size: 22px;

      }


      .nav-right {

        grid-column: 2;

        gap: 17px;

        font-size: 10px;

      }


      .nav-right > a:nth-child(2) {

        display: none;

      }


      .section {

        padding-top: 90px;

        padding-bottom: 90px;

      }


      .home-about {

        padding-top: 90px;

        padding-bottom: 90px;

      }


      .home-about-inner {

        grid-template-columns: 1fr;

        gap: 45px;

      }


      .shop-page {

        padding-top: 115px;

      }


      .shop-intro {

        padding-bottom: 65px;

      }


      .shop-intro h1 {

        font-size: clamp(45px, 13vw, 65px);

      }


      .product-section {

        padding-top: 90px;

        padding-bottom: 90px;

      }


      .product-section-header {

        margin-bottom: 40px;

      }


      .detailed-art-grid {

        grid-template-columns: 1fr;

        gap: 70px;

      }


      .detailed-art-card:nth-child(even) {

        margin-top: 0;

      }


      .art-gallery img {

        flex-basis: 84%;

      }


      .a3-gallery img {

        flex-basis: 78%;

      }


      .a4-products {

        display: flex;

        overflow-x: auto;

        scroll-snap-type: x mandatory;

        gap: 18px;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

      }


      .a4-products::-webkit-scrollbar {

        display: none;

      }


      .a4-card {

        flex: 0 0 86%;

        scroll-snap-align: start;

      }


      .commission {

        padding-top: 90px;

        padding-bottom: 90px;

      }


      .commission-image {

        height: 55vh;

      }


      .instagram {

        padding-top: 90px;

        padding-bottom: 70px;

      }


      .instagram-grid img {

        flex-basis: 45%;

        width: 45%;

      }


      .footer-top,

      .footer-bottom {

        flex-direction: column;

      }


      .footer-links {

        flex-wrap: wrap;

        gap: 18px;

      }


      .hero-content {

        left: 6vw;

        right: 6vw;

        bottom: 7vh;

      }


      .hero h1 {

        font-size: clamp(40px, 12vw, 58px);

      }


      .actions {

        width: 100%;

      }


      .button {

        flex: 1;

      }

    }


    /* =====================================================
       GLOBAL CONTENT ALIGNMENT — ONE CONSISTENT LEFT EDGE
       All page content uses the same horizontal gutter.
       Full-width backgrounds keep their inner content aligned.
       ===================================================== */

    :root {
      --page-gutter: 5vw;
      --content-width: min(var(--max-width), calc(100% - (2 * var(--page-gutter))));
    }

    /* Shared content rail */
    .section,
    .home-about-inner,
    .commission,
    .instagram,
    .footer-top,
    .footer-bottom,
    .shop-intro,
    .product-section-inner,
    .prints-shop-inner {
      width: var(--content-width);
      max-width: var(--max-width);
      margin-left: auto;
      margin-right: auto;
      padding-left: 0;
      padding-right: 0;
    }

    /* Homepage hero text starts on the exact same vertical line */
    .hero-content {
      left: var(--page-gutter);
    }

    /* Full-width sections: background spans the viewport,
       content is positioned on the shared rail above. */
    .home-about,
    .prints-shop-section {
      padding-left: 0;
      padding-right: 0;
    }

    .home-about {
      width: 100%;
      max-width: none;
    }

    .prints-shop-section {
      width: 100%;
      max-width: none;
    }

    .product-section {
      width: 100%;
      max-width: none;
      padding-left: 0;
      padding-right: 0;
    }

    /* Homepage artwork/text cards share the same left edge
       and never introduce their own horizontal offset. */
    .originals-grid,
    .detailed-art-grid,
    .art-gallery,
    .a3-gallery,
    .a4-products,
    .commission-image,
    .commission-content,
    .instagram-grid {
      margin-left: 0;
      margin-right: 0;
    }

    .a4-card-info {
      padding-left: 22px;
      padding-right: 22px;
    }

    /* Footer content follows the same rail */
    footer {
      padding-left: 0;
      padding-right: 0;
    }

    /* Mobile: use the same 5vw rail everywhere, including hero text */
    @media (max-width: 800px) {
      :root {
        --page-gutter: 5vw;
        --content-width: calc(100% - (2 * var(--page-gutter)));
      }

      .hero-content {
        left: var(--page-gutter);
        right: var(--page-gutter);
      }

      .section,
      .home-about-inner,
      .commission,
      .instagram,
      .footer-top,
      .footer-bottom,
      .shop-intro,
      .product-section-inner,
      .prints-shop-inner {
        width: var(--content-width);
        padding-left: 0;
        padding-right: 0;
      }
    }

  

    /* =====================================================
       A4 FRAME IMAGE SWIPE + FRAME SELECTION
       Two images per product: Black frame / White frame.
    ===================================================== */

    .a4-card-image.a4-gallery {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 23px;
      padding-bottom: 2px;
    }

    .a4-card-image.a4-gallery::-webkit-scrollbar {
      display: none;
    }

    .a4-card-image.a4-gallery img {
      flex: 0 0 100%;
      width: 100%;
      aspect-ratio: 4 / 5;
      object-fit: cover;
      scroll-snap-align: start;
      background: var(--soft);
      transition: transform 0.5s ease;
    }

    .a4-card-image.a4-gallery img:hover {
      transform: scale(1.01);
    }

    @media (max-width: 800px) {
      .a4-card-image.a4-gallery {
        gap: 10px;
      }

      .a4-card-image.a4-gallery img {
        flex-basis: 100%;
      }
    }

  

    /* =====================================================
       RESPONSIVE SYSTEM — DESKTOP / TABLET / MOBILE
       ===================================================== */
    html, body { max-width: 100%; overflow-x: hidden; }
    .hero, .section, .home-about, .shop-page, .product-section,
    .prints-shop-section, .commission, .instagram, footer { min-width: 0; }
    .section-heading, .product-section-header, .footer-top, .footer-bottom,
    .home-about-inner, .actions, .commission-links { min-width: 0; }
    .section-heading > *, .product-section-header > *, .home-about-content,
    .detailed-art-info, .a4-card-info, .commission-content { min-width: 0; }
    .art-gallery, .a3-gallery, .instagram-grid, .a4-products { touch-action: pan-x; overscroll-behavior-x: contain; }
    .button, .option-button, .frame-option, .bag-close, .qty-button, .bag-remove { min-height: 42px; }
    .a3-gallery, .art-gallery, .a4-gallery, .instagram-grid { scroll-padding-inline: 0; }
    .hero-placeholder { background-color: var(--soft); }
    .hero video { pointer-events: none; }
    [data-editable-text] { outline: none; }
    [data-editable-text]:focus { outline: 1px dashed var(--earth-light); outline-offset: 3px; }

    @media (max-width: 1100px) and (min-width: 801px) {
      :root { --page-gutter: 4vw; }
      .header { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
      .detailed-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 65px 5vw; }
      .home-about-inner { gap: 6vw; }
      .a4-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .a3-gallery img, .a3-placeholder { flex-basis: 38%; }
      .instagram-grid img { flex-basis: 30%; }
    }

    @media (max-width: 800px) {
      :root { --page-gutter: 5vw; }
      .header { min-height: 64px; padding: 17px var(--page-gutter); }
      .nav-right { gap: 14px; }
      .hero { min-height: 620px; height: 100svh; }
      .hero-content { left: var(--page-gutter); right: var(--page-gutter); bottom: max(6vh, 34px); max-width: none; }
      .hero p { font-size: 14px; max-width: 100%; }
      .section-heading { gap: 20px; align-items: flex-end; }
      .section-heading h2 { max-width: 70%; }
      .home-about-inner { grid-template-columns: 1fr; gap: 38px; }
      .home-about-image img { max-height: 72svh; }
      .detailed-art-grid { grid-template-columns: 1fr; gap: 58px; }
      .art-gallery img { flex-basis: 88%; }
      .a3-gallery img, .a3-placeholder { flex-basis: 78%; }
      .a4-products { display: flex; width: 100%; overflow-x: auto; }
      .a4-card { flex: 0 0 min(88vw, 430px); width: min(88vw, 430px); }
      .a4-card-image.a4-gallery img { flex-basis: 100%; }
      .commission-image { height: min(62svh, 560px); }
      .instagram-grid img { flex-basis: 62%; width: 62%; }
      .footer-top, .footer-bottom { gap: 24px; }
      .footer-links { row-gap: 12px; }
      .actions { gap: 8px; }
      .button { min-width: 0; flex: 1 1 140px; }
      .bag-drawer { width: min(100vw, 440px); }
      .bag-drawer-header { padding: 22px 20px 18px; }
      .bag-items { padding-left: 20px; padding-right: 20px; }
      .bag-summary { padding-left: 20px; padding-right: 20px; }
    }

    @media (max-width: 480px) {
      .logo { font-size: 21px; }
      .nav-right { gap: 11px; font-size: 9px; }
      .bag-link { width: 22px; }
      .section, .home-about, .product-section, .prints-shop-section, .commission, .instagram { padding-top: 76px; padding-bottom: 76px; }
      .section-heading { margin-bottom: 42px; }
      .section-heading h2 { max-width: 100%; }
      .section-heading .section-number { display: none; }
      .shop-page { padding-top: 100px; }
      .shop-intro { padding-bottom: 54px; }
      .shop-intro h1 { font-size: clamp(42px, 14vw, 58px); }
      .product-section-header { margin-bottom: 34px; }
      .series-header { margin-bottom: 28px; }
      .series-header h3 { font-size: 28px; }
      .detailed-art-grid { gap: 52px; }
      .art-gallery { gap: 8px; }
      .art-gallery img { flex-basis: 92%; }
      .art-meta { grid-template-columns: 1fr 1fr; gap: 6px 16px; }
      .a3-gallery { gap: 10px; }
      .a3-gallery img, .a3-placeholder { flex-basis: 84%; }
      .a4-products { gap: 14px; }
      .a4-card { flex-basis: 88vw; width: 88vw; }
      .a4-card-info { padding-left: 18px; padding-right: 18px; }
      .a4-card-info h4 { font-size: 23px; }
      .commission-links { gap: 16px; }
      .instagram h2 { font-size: 38px; }
      .instagram-grid img { flex-basis: 72%; width: 72%; }
      .bag-item { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
      .bag-item-image { width: 68px; height: 88px; }
      .bag-remove { grid-column: 2; justify-self: start; margin-top: -5px; }
      .bag-item-info h3 { font-size: 17px; }
    }

    /* Keyboard/touch accessibility for swipe galleries */
    .art-gallery:focus-visible, .a3-gallery:focus-visible,
    .a4-gallery:focus-visible, .instagram-grid:focus-visible { outline: 1px solid var(--earth); outline-offset: 4px; }

  

/* =====================================================
   FRAMED / UNFRAMED PRICING — MATCH OTHER ARTWORKS
   The active price is displayed as the same large,
   black artwork price used throughout the shop.
   ===================================================== */
.selected-option-price {
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  margin: 0 0 12px;
}
.product-options .option-row {
  gap: 8px;
}
.product-options .option-button {
  color: var(--earth);
}
.product-options .option-button.selected {
  background: var(--earth);
  color: white;
}
@media (max-width: 480px) {
  .selected-option-price {
    font-size: 15px;
  }
}

  
/* =====================================================
   PRODUCT IMAGE LIGHTBOX / ZOOM VIEW
   Click any product artwork image to open a large,
   swipeable view over the page.
   ===================================================== */
.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 72px;
  background: rgba(20, 19, 17, 0.92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.product-lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.product-lightbox-stage {
  width: min(92vw, 1250px);
  height: min(88vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  touch-action: pan-y;
}

.product-lightbox-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-out;
}

.product-lightbox-close,
.product-lightbox-prev,
.product-lightbox-next {
  position: absolute;
  z-index: 2;
  border: 0;
  background: rgba(250, 249, 246, 0.94);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.product-lightbox-close:hover,
.product-lightbox-prev:hover,
.product-lightbox-next:hover {
  background: white;
}

.product-lightbox-close {
  top: 22px;
  right: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 25px;
  line-height: 1;
}

.product-lightbox-prev,
.product-lightbox-next {
  top: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  line-height: 1;
}

.product-lightbox-prev:hover,
.product-lightbox-next:hover {
  transform: translateY(-50%) scale(1.04);
}

.product-lightbox-prev {
  left: 22px;
}

.product-lightbox-next {
  right: 22px;
}

.product-lightbox-counter {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.82);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.product-lightbox-hint {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.68);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

body.lightbox-open {
  overflow: hidden;
}

.product-lightbox-trigger {
  cursor: zoom-in;
}

@media (max-width: 800px) {
  .product-lightbox {
    padding: 58px 14px 48px;
  }

  .product-lightbox-stage {
    width: 100%;
    height: 82svh;
  }

  .product-lightbox-image {
    max-width: 100%;
    max-height: 100%;
  }

  .product-lightbox-close {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
  }

  .product-lightbox-prev,
  .product-lightbox-next {
    width: 40px;
    height: 40px;
    top: auto;
    bottom: 15px;
    transform: none;
  }

  .product-lightbox-prev:hover,
  .product-lightbox-next:hover {
    transform: none;
  }

  .product-lightbox-prev {
    left: 18px;
  }

  .product-lightbox-next {
    right: 18px;
  }

  .product-lightbox-counter {
    bottom: 28px;
  }

  .product-lightbox-hint {
    top: 22px;
  }
}



/* WordPress/WooCommerce production wiring */
.header { background: #fff !important; color: #000 !important; }
.header a, .header .logo, .bag-icon::before, .bag-icon::after { color: #000 !important; }
.page-view { display: none; }
.page-view.active { display: block; }
.admin-bar .header { top: 32px; }
.art-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--soft); }
.a3-placeholder { display: flex; align-items: center; justify-content: center; flex: 0 0 30%; aspect-ratio: 4 / 5; background: var(--soft); color: var(--muted); font-family: "Playfair Display", serif; font-size: 24px; }
.product-unavailable { opacity: .72; }
.woocommerce-message, .woocommerce-error, .woocommerce-info { margin: 110px var(--page-gutter) 20px !important; border-radius: 0 !important; }
.quantity .qty { border: 1px solid var(--line); background: transparent; padding: 10px; }
.bag-item-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bag-actions { display: grid; gap: 10px; margin-top: 18px; }
.bag-actions a { width: 100%; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }