/*
Theme Name: Nature by Vestgaard
Theme URI: https://naturebyvestgaard.com
Author: Tom Vestgard
Description: Custom cinematic photography portfolio theme, WooCommerce-ready gallery, built for Nature by Vestgaard.
Version: 1.9
Requires PHP: 7.4
Text Domain: nature-vestgaard
*/

:root{
  --bg: #0a0d0c;
  --bg-raised: #121614;
  --ink: #eef2f0;
  --ink-dim: #8d9a95;
  --accent: #4fd1ae;
  --line: rgba(238,242,240,0.12);
  --ff-display: "Bebas Neue", sans-serif;
  --ff-body: "Inter", sans-serif;
  --ff-mono: "IBM Plex Mono", monospace;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--bg); }
body{
  background:var(--bg); color:var(--ink); font-family:var(--ff-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--accent); color:#0a0d0c; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }

.eyebrow{
  font-family:var(--ff-mono); font-size:12px;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--accent);
}

header.top{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:28px clamp(24px, 5vw, 64px);
  mix-blend-mode:difference;
}
header.top .brand{
  font-family:var(--ff-mono); font-size:13px;
  letter-spacing:0.14em; text-transform:uppercase;
}
header.top nav a{
  font-family:var(--ff-mono); font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase;
  margin-left:28px; opacity:0.8;
}
header.top nav a:hover{ opacity:1; }

section{ padding:min(12vw, 140px) clamp(24px, 6vw, 96px); position:relative; }
.section-inner{ max-width:1200px; margin:0 auto; }

/* HERO */
.hero{
  min-height:100vh; position:relative;
  display:flex; align-items:flex-end;
  background:#0a0d0c;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center center;
}
/* On narrow screens the sides get cropped away — steer the crop toward
   the subject instead of the middle. Set under Utseende → Tilpass → Forside. */
@media (max-width: 820px){
  .hero-img{ object-position:var(--hero-focus-mobile, 35% 60%); }
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    /* sides — soft vignette so the frame dissolves instead of ending */
    linear-gradient(90deg,
      rgba(10,13,12,0.5) 0%,
      rgba(10,13,12,0.22) 3%,
      rgba(10,13,12,0) 12%,
      rgba(10,13,12,0) 88%,
      rgba(10,13,12,0.22) 97%,
      rgba(10,13,12,0.5) 100%),
    /* top — light touch, keeps the menu legible */
    linear-gradient(180deg,
      rgba(10,13,12,0.55) 0%,
      rgba(10,13,12,0) 22%),
    /* bottom — all the way to solid, so it meets the gallery seamlessly */
    linear-gradient(180deg,
      rgba(10,13,12,0) 45%,
      rgba(10,13,12,0.75) 82%,
      var(--bg) 100%);
}
.hero-content{
  position:relative; z-index:2; padding:0 clamp(24px, 6vw, 96px) 9vh; width:100%;
}
.hero-name{
  font-family:var(--ff-display);
  font-size:clamp(48px, 11vw, 140px);
  line-height:0.88; text-transform:uppercase;
}
.hero-line{
  font-family:var(--ff-body); font-weight:500;
  font-size:clamp(15px, 1.8vw, 20px);
  color:var(--ink-dim); margin-top:16px; max-width:44ch;
}

/* GALLERY */
.gal-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:40px; flex-wrap:wrap; gap:20px;
}
.gal-title{
  font-family:var(--ff-display); font-size:clamp(36px, 5vw, 64px);
  text-transform:uppercase; line-height:0.9;
}
.filters{ display:flex; gap:10px; flex-wrap:wrap; }
.filter-btn{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; padding:10px 18px;
  border:1px solid var(--line); color:var(--ink-dim);
  cursor:pointer; transition:all 0.25s ease; background:none;
}
.filter-btn.active, .filter-btn:hover{ border-color:var(--accent); color:var(--accent); }

.gallery-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
}
.gallery-item{
  position:relative; overflow:hidden; aspect-ratio:4/5;
  transition:transform 0.5s ease, opacity 0.3s ease;
}
.gallery-item:hover{ transform:scale(1.02); }
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
}
.gallery-item.g-hidden{ display:none; }

/* small discreet corner signature watermark — CSS only, no image processing needed */
.gallery-item::after{
  content:"\00A9 Vestgaard";
  position:absolute; right:10px; bottom:8px;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:0.05em;
  color:rgba(255,255,255,0.55);
  text-shadow:0 1px 3px rgba(0,0,0,0.7);
  pointer-events:none;
}

/* ABOUT */
.about-wrap{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;
}
.about-wrap img{ aspect-ratio:4/5; object-fit:cover; width:100%; }
.about-copy p{
  font-family:var(--ff-body); font-weight:500;
  font-size:clamp(19px, 2.4vw, 27px); line-height:1.45;
}
.about-copy p + p{ margin-top:16px; color:var(--ink-dim); font-size:clamp(15px, 1.5vw, 17px); }

/* CONTACT */
.contact{ text-align:center; border-top:1px solid var(--line); }
.contact-title{
  font-family:var(--ff-display); font-size:clamp(44px, 8vw, 110px);
  line-height:0.92; text-transform:uppercase;
}
.contact-sub{ font-family:var(--ff-body); color:var(--ink-dim); margin-top:16px; }
.cta-btn{
  display:inline-flex; margin-top:32px; padding:20px 40px;
  border:1px solid var(--accent); color:var(--accent);
  font-family:var(--ff-mono); font-size:13px; letter-spacing:0.1em; text-transform:uppercase;
  transition:all 0.3s ease;
}
.cta-btn:hover{ background:var(--accent); color:#0a0d0c; }

footer.site-footer{
  padding:32px clamp(24px, 6vw, 96px) 48px;
  font-family:var(--ff-mono); font-size:11px; color:var(--ink-dim);
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:20px;
}
footer.site-footer .footer-left{
  display:flex; flex-direction:column; gap:6px;
}
.footer-credit{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ink-dim); opacity:0.55; transition:opacity 0.25s ease;
}
.footer-credit:hover{ opacity:1; }
.footer-credit span{
  font-family:var(--ff-mono); font-size:10px;
  letter-spacing:0.1em; text-transform:uppercase;
}
.footer-credit img{
  height:22px; width:auto; display:block;
}
@media (max-width: 560px){
  footer.site-footer{ align-items:flex-start; }
  .footer-credit{ margin-top:4px; }
}

@media (max-width: 780px){
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); }
  .about-wrap{ grid-template-columns:1fr; }
  header.top nav{ display:none; }
}

/* ==================================================================
   SHOP — added v1.1
   Gallery links, prices, cart, and WooCommerce pages in the dark style.
   ================================================================== */

/* --- Gallery item: link + hover overlay --- */
.gallery-link{
  display:block; width:100%; height:100%; position:relative;
}
.gi-overlay{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:flex; flex-direction:column; gap:4px;
  padding:44px 16px 16px;
  background:linear-gradient(180deg, rgba(10,13,12,0) 0%, rgba(10,13,12,0.88) 70%);
  opacity:0; transform:translateY(8px);
  transition:opacity 0.35s ease, transform 0.35s ease;
  pointer-events:none;
}
.gallery-item:hover .gi-overlay,
.gallery-item:focus-within .gi-overlay{ opacity:1; transform:translateY(0); }
.gi-title{
  font-family:var(--ff-body); font-weight:600; font-size:15px;
  line-height:1.25; color:var(--ink);
}
.gi-price{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:0.06em;
  color:var(--accent);
}
.gi-price.is-free{ color:var(--ink-dim); }

/* keep the signature above the overlay gradient */
.gallery-item::after{ z-index:3; }

/* touch devices have no hover — show the caption straight away */
@media (hover:none){
  .gi-overlay{ opacity:1; transform:none; }
}

/* --- Cart link in the header --- */
.nv-cart{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ff-mono); font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase;
  margin-left:28px; opacity:0.8;
}
.nv-cart:hover{ opacity:1; }
.nv-cart-count{
  display:inline-grid; place-items:center;
  min-width:19px; height:19px; padding:0 5px;
  border:1px solid var(--line); border-radius:999px;
  font-size:10px; letter-spacing:0;
}
.nv-cart.has-items .nv-cart-count{
  background:var(--accent); border-color:var(--accent); color:#0a0d0c;
}

/* --- WooCommerce pages --- */
.nv-shop-top{ padding:120px clamp(24px,6vw,96px) 0; }
.nv-breadcrumb{
  font-family:var(--ff-mono); font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim);
}
.nv-breadcrumb a{ color:var(--ink-dim); }
.nv-breadcrumb a:hover{ color:var(--accent); }
.nv-crumb-sep{ opacity:0.4; margin:0 4px; }

.nv-shop{ padding:32px clamp(24px,6vw,96px) min(12vw,140px); }

.woocommerce .product_title,
.woocommerce h1, .woocommerce h2{
  font-family:var(--ff-display); text-transform:uppercase;
  line-height:0.95; letter-spacing:0.01em;
}
.woocommerce .product_title{ font-size:clamp(32px,5vw,60px); }
.woocommerce h2{ font-size:clamp(22px,3vw,34px); margin-bottom:20px; }

.woocommerce div.product{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; }
.woocommerce div.product .woocommerce-product-gallery{ width:100%; float:none; margin:0; }
.woocommerce div.product .summary{ width:100%; float:none; margin:0; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related{ grid-column:1/-1; }

.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--ff-mono); font-size:22px; color:var(--accent);
}
.woocommerce div.product p.price del{ color:var(--ink-dim); }
.nv-free{ color:var(--ink-dim); font-family:var(--ff-mono); }

.woocommerce div.product .woocommerce-product-details__short-description{
  font-family:var(--ff-mono); font-size:13px; color:var(--ink-dim);
  letter-spacing:0.03em; margin:6px 0 22px;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background:none; color:var(--accent);
  border:1px solid var(--accent); border-radius:0;
  font-family:var(--ff-mono); font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:16px 30px; transition:all 0.3s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background:var(--accent); color:#0a0d0c;
}

.woocommerce .product_meta{
  font-family:var(--ff-mono); font-size:11px; color:var(--ink-dim);
  letter-spacing:0.06em; margin-top:26px;
  padding-top:18px; border-top:1px solid var(--line);
}
.woocommerce .product_meta a{ color:var(--ink-dim); }
.woocommerce .product_meta a:hover{ color:var(--accent); }

.woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0; margin:0 0 24px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border-color:var(--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none; border:1px solid var(--line); border-radius:0;
  font-family:var(--ff-mono); font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ color:var(--ink-dim); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ border-color:var(--accent); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--accent); }
.woocommerce div.product .woocommerce-tabs .panel{ color:var(--ink-dim); line-height:1.65; }

.woocommerce ul.products{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0; }
.woocommerce ul.products li.product{ width:100%; margin:0; float:none; text-align:left; }
.woocommerce ul.products li.product a img{ aspect-ratio:4/5; object-fit:cover; margin:0 0 12px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--ff-body); font-weight:600; font-size:15px;
  padding:0; color:var(--ink);
}
.woocommerce ul.products li.product .price{
  font-family:var(--ff-mono); font-size:12px; color:var(--accent);
}

.woocommerce table.shop_table{
  border:1px solid var(--line); border-radius:0;
  font-family:var(--ff-body);
}
.woocommerce table.shop_table th{
  font-family:var(--ff-mono); font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim);
}
.woocommerce table.shop_table td{ border-top:1px solid var(--line); }
.woocommerce-cart table.cart img{ width:70px; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  background:var(--bg-raised); border:1px solid var(--line);
  color:var(--ink); border-radius:0; padding:12px 14px; height:auto;
}
.woocommerce form .form-row label{
  font-family:var(--ff-mono); font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim);
}

.woocommerce .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order{
  background:var(--bg-raised); padding:26px; border:1px solid var(--line);
}

.woocommerce-message, .woocommerce-info, .woocommerce-error{
  background:var(--bg-raised); border-top:3px solid var(--accent);
  color:var(--ink); font-family:var(--ff-body);
}
.woocommerce-message::before,
.woocommerce-info::before{ color:var(--accent); }

.woocommerce .woocommerce-ordering select,
.woocommerce .woocommerce-result-count{
  font-family:var(--ff-mono); font-size:12px; color:var(--ink-dim);
}

@media (max-width: 900px){
  .woocommerce div.product{ grid-template-columns:1fr; gap:32px; }
  .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 780px){
  header.top nav{ display:flex; gap:0; }
  header.top nav a:not(.nv-cart){ display:none; }
  .nv-cart{ margin-left:0; }
}

/* ------------------------------------------------------------------
   MY ACCOUNT — dashboard, orders, downloads, addresses
   WooCommerce ships float-based layout for these pages; every rule
   below overrides it so the two columns stay put between tabs.
   ------------------------------------------------------------------ */

.woocommerce-account .section-inner{ max-width:1100px; }

/* the shortcode wrapper */
.woocommerce-account .woocommerce{
  display:flex !important;
  align-items:flex-start;
  gap:56px;
  text-align:left;
}
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after{ display:none !important; }

.woocommerce-account .woocommerce-MyAccount-navigation{
  float:none !important;
  width:210px !important;
  flex:0 0 210px;
  margin:0;
}
.woocommerce-account .woocommerce-MyAccount-content{
  float:none !important;
  width:auto !important;
  flex:1 1 auto;
  min-width:0;          /* lets wide tables shrink instead of pushing the column */
  margin:0;
  min-height:420px;     /* stops the page jumping when tabs change height */
}

/* navigation */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0; padding:0;
  border-top:1px solid var(--line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li{
  border-bottom:1px solid var(--line); margin:0; padding:0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block; padding:14px 2px;
  font-family:var(--ff-mono); font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-dim); transition:color 0.2s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ color:var(--ink); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ color:var(--accent); }

/* content */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child{
  font-size:17px; color:var(--ink);
}
.woocommerce-account .woocommerce-MyAccount-content p{
  color:var(--ink-dim); line-height:1.7;
}
.woocommerce-account .woocommerce-MyAccount-content mark,
.woocommerce-account .woocommerce-MyAccount-content strong{
  background:none; color:var(--ink); font-weight:600;
}
.woocommerce-account .woocommerce-MyAccount-content table{
  width:100%; margin:0 0 24px;
}

/* tables inside the account area */
.woocommerce table.shop_table.order_details,
.woocommerce table.shop_table.woocommerce-orders-table,
.woocommerce table.shop_table.woocommerce-MyAccount-downloads{
  background:var(--bg-raised);
}
.woocommerce-MyAccount-downloads .download-product a{
  color:var(--ink); font-weight:600;
}
.woocommerce-MyAccount-downloads .download-file a{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--accent); color:var(--accent);
  padding:11px 20px;
  font-family:var(--ff-mono); font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase;
  transition:all 0.25s ease;
}
.woocommerce-MyAccount-downloads .download-file a:hover{
  background:var(--accent); color:#0a0d0c;
}
.woocommerce-MyAccount-downloads .download-remaining,
.woocommerce-MyAccount-downloads .download-expires{
  font-family:var(--ff-mono); font-size:12px; color:var(--ink-dim);
}

.woocommerce-account .woocommerce-Message--info,
.woocommerce-account .woocommerce-info{
  background:var(--bg-raised); border-top:3px solid var(--line);
  color:var(--ink-dim); margin:0 0 20px;
}

/* order received / thank-you */
.woocommerce-order .woocommerce-thankyou-order-received{
  font-family:var(--ff-display); font-size:clamp(28px,4vw,44px);
  text-transform:uppercase; line-height:1; color:var(--ink);
  margin-bottom:26px;
}
.woocommerce ul.order_details{
  list-style:none; padding:0; margin:0 0 36px;
  display:flex; flex-wrap:wrap; gap:28px; border:none;
}
.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after{ display:none; }
.woocommerce ul.order_details li{
  border:none; padding:0; margin:0; float:none;
  font-family:var(--ff-mono); font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim);
}
.woocommerce ul.order_details li strong{
  display:block; margin-top:6px; font-size:15px;
  letter-spacing:0; text-transform:none; color:var(--ink);
}
.woocommerce .woocommerce-customer-details address{
  border:1px solid var(--line); border-radius:0;
  color:var(--ink-dim); font-style:normal;
}

/* login / register */
.woocommerce-account:not(.logged-in) .woocommerce{ display:block !important; }
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register{
  border:1px solid var(--line); border-radius:0;
  background:var(--bg-raised); padding:32px;
  max-width:460px;
}
.woocommerce-form-login__rememberme span,
.woocommerce-account .woocommerce-privacy-policy-text p{
  color:var(--ink-dim); font-size:13px;
}

@media (max-width: 780px){
  .woocommerce-account .woocommerce{ flex-direction:column; gap:28px; }
  .woocommerce-account .woocommerce-MyAccount-navigation{
    width:100% !important; flex:0 0 auto;
  }
  .woocommerce-account .woocommerce-MyAccount-content{ min-height:0; }
}