/*
Theme Name: Halden Gray v3
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: A custom dark-mode e-commerce theme for fine art photography prints. Black background with dark green accents, side-by-side hero carousel, EXIF-styled print gallery, and PayPal / Apple Pay checkout. Built for use with the theme's own built-in Prints catalog + cart/checkout. No WooCommerce, no membership/video section, no homepage "Direct support" section. (v3: renamed again to force a clean install — delete any older "Halden Gray" versions once this one is confirmed working.)
Version: 3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: halden-gray-v3
*/

/* ====================================================================
   Design tokens: --bg near-black, --forest/--forest-bright dark green
   accents, --sage secondary accent, --ivory text, --brass premium accent
   (currently unused since the paid-video tier was removed — kept in case
   a future premium tier needs it), Fraunces (display) + Inter (body) +
   JetBrains Mono (EXIF captions / utility) fonts.
   ==================================================================== */

  :root{
    --bg: #0B0D0C;
    --bg-raised: #10130F;
    --forest: #1C3B2A;
    --forest-bright: #2F5233;
    --sage: #8FA891;
    --ivory: #EDEAE3;
    --ivory-dim: #A8A69E;
    --brass: #A98B4E;
    --hairline: rgba(237,234,227,0.12);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  html{ background: var(--bg); }
  body{
    background: var(--bg);
    color: var(--ivory);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
  }
  a{color:inherit; text-decoration:none;}
  .mono{font-family:'JetBrains Mono', monospace;}

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline: 1px solid var(--sage);
    outline-offset: 3px;
  }

  /* ===== NAV ===== */
  header{
    position: fixed; top:0; left:0; right:0; z-index: 100;
    display:flex; align-items:center; justify-content:space-between;
    padding: 22px 5vw;
    background: linear-gradient(to bottom, rgba(11,13,12,0.95), transparent);
    backdrop-filter: blur(2px);
  }
  .logo{
    font-family:'Fraunces', serif; font-weight:400; font-size:1.3rem;
    letter-spacing: 0.02em;
  }
  .logo span{color: var(--sage); font-style:italic;}
  nav ul{list-style:none; display:flex; gap:2.4rem;}
  nav a{
    font-size:0.78rem; text-transform:uppercase; letter-spacing:0.12em;
    color: var(--ivory-dim); transition: color 0.25s;
    position:relative;
  }
  nav a:hover{color: var(--ivory);}
  nav a::after{
    content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0;
    background: var(--forest-bright); transition: width 0.3s;
  }
  nav a:hover::after{width:100%;}
  .nav-icons{display:flex; gap:1.4rem; align-items:center;}
  .nav-icons a{font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ivory-dim);}
  .cart-count{
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:50%; background: var(--forest-bright);
    color:var(--ivory); font-size:0.6rem; margin-left:4px;
  }
  .menu-toggle{display:none;}

  @media (max-width: 860px){
    nav ul{display:none;}
    .menu-toggle{display:block; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em;}
  }

  /* ===== HERO / CAROUSEL ===== */
  .hero{
    background: var(--bg);
    padding: 8.5rem 5vw 4.5rem;
    display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items:center;
  }
  @media (max-width: 900px){
    .hero{ grid-template-columns: 1fr; padding-top:7rem; gap:2.2rem; }
  }
  .hero-content{ max-width: 560px; animation: fadeUp 1s ease both; }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
  .eyebrow-mono{
    font-size:0.72rem; color:var(--sage); letter-spacing:0.18em; text-transform:uppercase;
    display:flex; align-items:center; gap:0.6rem; margin-bottom:1.1rem;
  }
  .eyebrow-mono::before{content:'●'; color:var(--forest-bright); font-size:0.5rem;}
  .hero h1{
    font-family:'Fraunces', serif; font-weight:300; font-size: clamp(2.1rem, 3.6vw, 3.2rem);
    line-height: 1.08; letter-spacing: -0.01em; color: var(--ivory);
  }
  .hero h1 em{font-style:italic; color: var(--sage); font-weight:300;}
  .hero p{
    margin-top:1.2rem; color: var(--ivory-dim); font-size:0.98rem; max-width:440px; line-height:1.6;
  }
  .hero-actions{ margin-top:1.8rem; display:flex; gap:1rem; flex-wrap:wrap;}

  /* carousel */
  .carousel{
    position:relative; width:100%; height: 38vh; min-height:280px; max-height:400px;
    overflow:hidden; background: var(--bg-raised);
    border: 1px solid var(--hairline);
  }
  @media (max-width: 900px){ .carousel{ height:44vh; } }
  .carousel-track{
    display:flex; height:100%; width:100%;
    transition: transform 0.9s cubic-bezier(.65,0,.35,1);
  }
  .carousel-slide{
    flex: 0 0 100%; height:100%; position:relative;
  }
  .carousel-slide img{
    width:100%; height:100%; object-fit:cover;
    filter: saturate(0.85) contrast(1.04) brightness(0.82);
  }
  .carousel-slide::after{
    content:''; position:absolute; inset:0;
    background: linear-gradient(to top, rgba(11,13,12,0.55) 0%, rgba(11,13,12,0) 32%);
  }
  .slide-caption{
    position:absolute; bottom:0.9rem; left:1rem; z-index:2;
    font-family:'JetBrains Mono', monospace; font-size:0.62rem; color: var(--ivory);
    letter-spacing:0.04em; background: rgba(11,13,12,0.6); padding:0.35rem 0.65rem;
  }
  .carousel-arrows{
    position:absolute; top:50%; transform:translateY(-50%); width:100%;
    display:flex; justify-content:space-between; padding:0 0.8rem; z-index:3;
    pointer-events:none;
  }
  .carousel-arrow{
    pointer-events:all; width:34px; height:34px; border-radius:50%;
    border:1px solid var(--hairline); background: rgba(11,13,12,0.55);
    color: var(--ivory); display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:0.9rem; transition: border-color 0.25s, background 0.25s;
  }
  .carousel-arrow:hover{ border-color: var(--sage); background: rgba(47,82,51,0.35); }
  .carousel-dots{
    position:absolute; bottom:0.9rem; right:1rem; z-index:3;
    display:flex; gap:0.4rem;
  }
  .carousel-dot{
    width:16px; height:2px; background: rgba(237,234,227,0.35); border:none; cursor:pointer;
    transition: background 0.25s;
  }
  .carousel-dot.active{ background: var(--sage); }

  .btn{
    display:inline-flex; align-items:center; gap:0.5rem;
    padding: 0.95rem 1.8rem; font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
    border:1px solid var(--hairline); transition: all 0.3s;
    cursor:pointer; background:transparent; color:var(--ivory); font-family:'Inter';
  }
  .btn-primary{ background: var(--forest); border-color: var(--forest); }
  .btn-primary:hover{ background: var(--forest-bright); }
  .btn-ghost:hover{ border-color: var(--ivory-dim); background: rgba(237,234,227,0.04); }

  /* nav underline handled above */

  /* ===== SECTION SHELL ===== */
  section{ padding: 6.5rem 5vw; background: var(--bg); }
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom: 3rem; flex-wrap:wrap; gap:1rem;
    border-bottom: 1px solid var(--hairline); padding-bottom:1.6rem;
  }
  .section-head h2{
    font-family:'Fraunces', serif; font-weight:300; font-size:2.1rem;
  }
  .section-head .tag{
    font-size:0.72rem; color: var(--sage); text-transform:uppercase; letter-spacing:0.14em;
  }

  /* ===== GALLERY / SHOP GRID ===== */
  .grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem 1.6rem;
  }
  @media (max-width: 900px){ .grid{ grid-template-columns: repeat(2,1fr);} }
  @media (max-width: 560px){ .grid{ grid-template-columns: 1fr;} }

  .print-card{ position:relative; }
  .print-frame{
    position:relative; overflow:hidden; background: var(--bg-raised);
    aspect-ratio: 4/5;
  }
  .print-frame img{
    width:100%; height:100%; object-fit:cover;
    filter: saturate(0.85) contrast(1.03);
    transition: transform 0.7s cubic-bezier(.16,1,.3,1), filter 0.5s;
  }
  .print-card:hover .print-frame img{ transform: scale(1.045); filter: saturate(1) contrast(1.05); }
  .print-frame::before{
    content:''; position:absolute; inset:0; border:1px solid rgba(237,234,227,0.08);
    z-index:2; pointer-events:none;
  }
  .quick-add{
    position:absolute; bottom:0.8rem; left:0.8rem; right:0.8rem; z-index:3;
    display:flex; gap:0.5rem;
    opacity:0; transform: translateY(6px); transition: all 0.3s;
  }
  .print-card:hover .quick-add{ opacity:1; transform:translateY(0); }
  .qa-btn{
    flex:1; text-align:center;
    background: rgba(11,13,12,0.9); border:1px solid var(--hairline);
    padding: 0.55rem 0.6rem; font-size:0.64rem; letter-spacing:0.06em; text-transform:uppercase;
    transition: border-color 0.25s, background 0.25s;
  }
  .qa-btn:first-child:hover{ border-color: var(--forest-bright); background: rgba(47,82,51,0.25); }
  .qa-applepay{ flex:0 0 auto; padding-left:0.9rem; padding-right:0.9rem; }
  .qa-applepay:hover{ border-color: var(--ivory-dim); background: rgba(237,234,227,0.08); }

  .print-meta{ margin-top:0.9rem; display:flex; justify-content:space-between; align-items:flex-start; gap:0.5rem;}
  .print-title{ font-family:'Fraunces', serif; font-size:1.05rem; font-weight:400; }
  .print-loc{ color:var(--ivory-dim); font-size:0.82rem; margin-top:0.2rem; }
  .print-price{ font-family:'Fraunces', serif; font-size:1.05rem; color: var(--sage); white-space:nowrap;}
  .exif{
    margin-top:0.5rem; font-size:0.68rem; color: rgba(168,166,158,0.7);
    letter-spacing:0.02em; display:flex; gap:0.7rem; flex-wrap:wrap;
  }
  .exif span{ border-right:1px solid var(--hairline); padding-right:0.7rem; }
  .exif span:last-child{ border-right:none; }

  /* ===== SUPPORT / MONTHLY CONTRIBUTION ===== */
  .support{
    background: var(--bg-raised);
    border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
    display:grid; grid-template-columns: 1.1fr 1fr; gap:4rem; align-items:center;
  }
  @media (max-width:860px){ .support{ grid-template-columns:1fr; } }
  .support h2{ font-family:'Fraunces', serif; font-weight:300; font-size:2rem; line-height:1.2; }
  .support p{ color:var(--ivory-dim); margin-top:1.1rem; line-height:1.7; max-width:480px; }
  .tier-list{ display:flex; flex-direction:column; gap: 0.9rem; margin-top:2rem; }
  .tier{
    display:flex; justify-content:space-between; align-items:center;
    padding: 1.1rem 1.4rem; border:1px solid var(--hairline);
    transition: border-color 0.3s, background 0.3s;
  }
  .tier:hover{ border-color: var(--forest-bright); background: rgba(47,82,51,0.08); }
  .tier-name{ font-family:'Fraunces', serif; font-size:1rem; }
  .tier-sub{ font-size:0.75rem; color:var(--ivory-dim); margin-top:0.2rem; }
  .tier-price{ font-family:'JetBrains Mono', monospace; font-size:0.95rem; color:var(--sage); }
  .paypal-note{
    margin-top:1.6rem; display:flex; align-items:center; gap:0.6rem;
    font-size:0.72rem; color: var(--ivory-dim); letter-spacing:0.03em;
  }
  .paypal-pill{
    font-family:'JetBrains Mono'; font-size:0.65rem; letter-spacing:0.08em;
    border:1px solid var(--hairline); padding:0.25rem 0.6rem; text-transform:uppercase;
  }

  /* ===== FOOTER ===== */
  footer{
    padding: 3.5rem 5vw 2.5rem; border-top:1px solid var(--hairline);
    display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:2rem;
    background: var(--bg);
  }
  footer .logo{ margin-bottom:0.8rem; }
  footer .col h4{
    font-size:0.7rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--ivory-dim); margin-bottom:0.9rem;
  }
  footer .col a{ display:block; font-size:0.85rem; color:var(--ivory-dim); margin-bottom:0.55rem; transition:color 0.25s; }
  footer .col a:hover{ color:var(--ivory); }
  .payment-marks{ display:flex; gap:0.7rem; margin-top:1rem; }
  .payment-marks span{
    font-family:'JetBrains Mono'; font-size:0.62rem; border:1px solid var(--hairline);
    padding:0.3rem 0.55rem; color:var(--ivory-dim);
  }
  .fine{ font-size:0.72rem; color: rgba(168,166,158,0.55); margin-top:2.5rem; width:100%; }

  /* ===== CART / CHECKOUT ===== */
  .hg-empty-cart{ text-align:center; padding:5rem 1rem; color:var(--ivory-dim); }
  .hg-empty-cart h2{ font-family:'Fraunces', serif; font-weight:300; color:var(--ivory); margin-bottom:0.8rem; }

  .hg-cart-layout{ display:none; }
  .hg-cart-head, .hg-cart-row{
    display:grid; grid-template-columns: 2.5fr 1fr 0.8fr 1fr; gap:1rem; align-items:center;
    padding:1rem 0; border-bottom:1px solid var(--hairline);
  }
  .hg-cart-head{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ivory-dim); }
  .hg-cart-item{ display:flex; gap:0.9rem; align-items:center; }
  .hg-cart-item img{ width:60px; height:70px; object-fit:cover; }
  .hg-cart-item-name{ font-family:'Fraunces', serif; font-size:0.95rem; }
  .hg-cart-remove{
    background:none; border:none; color:var(--ivory-dim); font-size:0.7rem; text-transform:uppercase;
    letter-spacing:0.06em; cursor:pointer; padding:0; margin-top:0.3rem;
  }
  .hg-cart-remove:hover{ color:var(--sage); }
  .hg-cart-qty{
    width:56px; background:var(--bg); border:1px solid var(--hairline); color:var(--ivory); padding:0.5rem;
    font-family:'Inter';
  }
  .hg-cart-summary{
    margin-top:2rem; margin-left:auto; max-width:320px; padding-top:1rem; border-top:1px solid var(--hairline);
  }
  .hg-cart-summary-row{ display:flex; justify-content:space-between; margin-bottom:0.6rem; color:var(--ivory-dim); font-size:0.9rem; }
  .hg-cart-summary-row.total{ color:var(--ivory); font-family:'Fraunces', serif; font-size:1.2rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--hairline); }

  .hg-checkout-layout{ display:grid; grid-template-columns: 1.3fr 1fr; gap:3.5rem; }
  @media (max-width: 860px){ .hg-checkout-layout{ grid-template-columns:1fr; } }
  .hg-checkout-layout h3{ font-family:'Fraunces', serif; font-weight:400; font-size:1.15rem; margin-bottom:1.2rem; }
  .hg-form-group{ margin-bottom:1rem; }
  .hg-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .hg-form-group label{ display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ivory-dim); margin-bottom:0.4rem; }
  .hg-form-group input, .hg-form-group select{
    width:100%; background:var(--bg-raised); border:1px solid var(--hairline); color:var(--ivory);
    padding:0.75rem 0.9rem; font-family:'Inter'; font-size:0.9rem;
  }
  .hg-form-group input:focus, .hg-form-group select:focus{ outline:none; border-color:var(--forest-bright); }
  .hg-checkout-status{
    margin-top:1rem; font-size:0.85rem; padding:0.8rem 1rem; display:none;
  }
  .hg-checkout-status.show{ display:block; }
  .hg-checkout-status.error{ background:rgba(180,60,60,0.15); color:#e59a9a; border:1px solid rgba(180,60,60,0.3); }
  .hg-checkout-status.success{ background:rgba(47,82,51,0.2); color:var(--sage); border:1px solid var(--forest-bright); }
  .hg-checkout-note{ font-size:0.75rem; color:var(--ivory-dim); margin-top:1rem; }
  .hg-summary{ background:var(--bg-raised); border:1px solid var(--hairline); padding:1.6rem; align-self:start; }

  .hg-toast{
    position:fixed; bottom:1.6rem; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--forest-bright); color:var(--ivory); padding:0.8rem 1.4rem; font-size:0.85rem;
    opacity:0; transition: all 0.3s; z-index:999; pointer-events:none;
  }
  .hg-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  ::selection{ background: var(--forest-bright); color: var(--ivory); }