/* Dimitri Gudgenov Fine Art — shared site styles (nav, footer, forms, cart, checkout, FAQ) */

:root{
  --limestone:#FFFFFF;
  --card:#F6F6F4;
  --graphite:#201F1D;
  --graphite-soft:#7A7975;
  --verdigris:#B8B7B2;
  --verdigris-deep:#201F1D;
  --bronze:#A9A8A3;
  --bronze-deep:#201F1D;
  --charcoal:#232220;
  --charcoal-text:#F6F6F4;
  --rule:rgba(32,31,29,0.12);
  --shadow:0 20px 45px -28px rgba(32,31,29,0.22);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }

body{
  margin:0;
  background:var(--limestone);
  color:var(--graphite);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.55;
}
a{color:inherit;}
.mono{font-family:'IBM Plex Mono',monospace; letter-spacing:0.02em;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:11.5px;
  color:var(--graphite-soft);
}
h1,h2,h3{font-family:'Fraunces',serif; margin:0; font-weight:500; letter-spacing:-0.01em;}
.wrap{max-width:1240px; margin:0 auto; padding:0 40px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }
:focus-visible{outline:2px solid var(--bronze); outline-offset:3px;}

/* ---------- NAV ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(237,234,226,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 40px;
}
@media (max-width:640px){ .nav{padding:16px 20px;} }
.mark{display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--graphite);}
.mark-glyph{width:30px; height:auto; flex-shrink:0;}
.mark-glyph img{display:block; width:100%; height:auto;}
.mark-name{font-family:'Fraunces',serif; font-size:16.5px; letter-spacing:0.01em;}
.mark-name .sm{display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--graphite-soft); margin-top:1px;}

.nav-right{display:flex; align-items:center; gap:28px;}
nav.links{display:flex; gap:34px; font-size:14px;}
nav.links a{text-decoration:none; color:var(--graphite-soft); transition:color .25s;}
nav.links a:hover{color:var(--bronze-deep);}
@media (max-width:800px){ nav.links{display:none;} }

.cart-link{position:relative; display:flex; align-items:center; text-decoration:none; color:var(--graphite);}
.cart-link svg{width:20px; height:20px;}
.cart-badge{
  display:none; align-items:center; justify-content:center;
  position:absolute; top:-8px; right:-10px;
  min-width:16px; height:16px; padding:0 4px; border-radius:50%;
  background:var(--graphite); color:var(--limestone);
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:600;
}

.menu-btn{
  display:none; background:none; border:none; cursor:pointer; padding:6px;
  flex-direction:column; gap:5px; width:28px;
}
.menu-btn span{display:block; height:2px; width:100%; background:var(--graphite);}
@media (max-width:800px){ .menu-btn{display:flex;} }

.mobile-menu{
  display:none; flex-direction:column;
  padding:6px 40px 22px; border-top:1px solid var(--rule);
}
@media (max-width:640px){ .mobile-menu{padding:6px 20px 20px;} }
.mobile-menu.open{display:flex;}
.mobile-menu a{
  text-decoration:none; color:var(--graphite); font-size:15.5px;
  padding:13px 0; border-bottom:1px solid var(--rule);
}
.mobile-menu a:last-child{border-bottom:none;}

/* ---------- PAGE HEADER (cart/checkout) ---------- */
.page-header{padding:70px 0 40px;}
@media (max-width:640px){ .page-header{padding:44px 0 28px;} }
.page-header h1{font-size:clamp(32px,4.4vw,52px);}
.page-header p{color:var(--graphite-soft); margin-top:12px; max-width:520px;}

/* ---------- BUTTONS ---------- */
.btn{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
  border-radius:2px; padding:13px 24px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; transition:background .25s, color .25s, border-color .25s;
}
.btn-primary{background:var(--graphite); color:var(--limestone);}
.btn-primary:hover{background:var(--bronze-deep);}
.btn-secondary{background:transparent; color:var(--graphite); border-color:var(--graphite);}
.btn-secondary:hover{background:var(--graphite); color:var(--limestone);}
.btn:disabled{opacity:0.4; cursor:not-allowed;}
.btn-block{width:100%;}

/* ---------- FORMS ---------- */
label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--graphite-soft); display:block; margin-bottom:7px;}
input, select, textarea{
  width:100%; padding:12px 13px; border:1px solid var(--rule); background:var(--limestone);
  color:var(--graphite); font-family:'Inter',sans-serif; font-size:14px; border-radius:2px;
}
input:focus, select:focus, textarea:focus{border-color:var(--graphite);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:480px){ .field-row{grid-template-columns:1fr;} }
.field{margin-bottom:16px;}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--rule); padding:30px 0 40px;
}
footer .mono{font-size:11px; color:var(--graphite-soft);}
footer .flinks{display:flex; gap:22px; font-size:12px;}
footer .flinks a{text-decoration:none; color:var(--graphite-soft);}
footer .flinks a:hover{color:var(--graphite);}

/* ---------- TOAST ---------- */
.dg-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--graphite); color:var(--limestone);
  font-family:'Inter',sans-serif; font-size:13.5px;
  padding:14px 20px; border-radius:3px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
  z-index:300; white-space:nowrap;
}
.dg-toast span{font-family:'Fraunces',serif; font-style:italic;}
.dg-toast a{color:var(--limestone); text-decoration:underline; margin-left:8px;}
.dg-toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
@media (max-width:480px){ .dg-toast{left:16px; right:16px; transform:translateY(20px); white-space:normal; text-align:center;} .dg-toast.show{transform:translateY(0);} }

/* ---------- CART PAGE ---------- */
.cart-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:60px; align-items:start; padding-bottom:100px;}
@media (max-width:860px){ .cart-layout{grid-template-columns:1fr; gap:40px;} }

.cart-row{
  display:grid; grid-template-columns:96px 1fr auto; gap:20px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--rule);
}
.cart-row img{width:96px; height:96px; object-fit:cover; border-radius:2px; background:var(--card);}
.cart-row .ci-title{font-family:'Fraunces',serif; font-style:italic; font-size:18px;}
.cart-row .ci-meta{font-size:12.5px; color:var(--graphite-soft); margin-top:4px;}
.cart-row .ci-price{font-family:'IBM Plex Mono',monospace; font-size:14px; text-align:right;}
.cart-row .ci-remove{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--graphite-soft); background:none; border:none; cursor:pointer; padding:0; margin-top:8px;
  text-decoration:underline; text-underline-offset:3px;
}
.cart-row .ci-remove:hover{color:var(--graphite);}
@media (max-width:560px){
  .cart-row{grid-template-columns:64px 1fr; row-gap:10px;}
  .cart-row img{width:64px; height:64px;}
  .cart-row .ci-price{grid-column:2; text-align:left;}
}

.cart-empty{padding:60px 0; text-align:left;}
.cart-empty p{color:var(--graphite-soft); margin:14px 0 26px; max-width:420px;}

.order-summary{
  background:var(--card); border-radius:2px; padding:32px; box-shadow:var(--shadow);
  position:sticky; top:110px;
}
.order-summary h3{font-size:19px; margin-bottom:20px;}
.summary-line{display:flex; justify-content:space-between; font-size:14px; padding:8px 0; color:var(--graphite-soft);}
.summary-line.total{
  border-top:1px solid var(--rule); margin-top:8px; padding-top:16px;
  color:var(--graphite); font-family:'IBM Plex Mono',monospace; font-size:17px;
}
.summary-note{font-size:12px; color:var(--graphite-soft); margin-top:18px; line-height:1.6;}

/* ---------- CHECKOUT PAGE ---------- */
.checkout-layout{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; padding-bottom:100px;}
@media (max-width:900px){ .checkout-layout{grid-template-columns:1fr; gap:44px;} }

.checkout-note{
  background:var(--card); border-radius:2px; padding:24px 26px; margin-bottom:32px;
  font-size:13.5px; color:var(--graphite-soft); line-height:1.7;
}
.checkout-note strong{color:var(--graphite); font-weight:600;}

.pay-row{
  display:grid; grid-template-columns:72px 1fr auto; gap:18px; align-items:center;
  padding:20px 0; border-bottom:1px solid var(--rule);
}
.pay-row img{width:72px; height:72px; object-fit:cover; border-radius:2px; background:var(--card);}
.pay-row .pi-title{font-family:'Fraunces',serif; font-style:italic; font-size:16.5px;}
.pay-row .pi-price{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--graphite-soft); margin-top:4px;}
.pay-row .pay-btn{white-space:nowrap;}
@media (max-width:520px){
  .pay-row{grid-template-columns:56px 1fr; row-gap:12px;}
  .pay-row img{width:56px; height:56px;}
  .pay-row .pay-btn{grid-column:1/-1;}
}

.checkout-aside{
  background:var(--charcoal); color:var(--charcoal-text); border-radius:2px; padding:32px;
}
.checkout-aside h3{color:var(--charcoal-text); font-size:19px; margin-bottom:14px;}
.checkout-aside p{color:rgba(237,234,226,0.72); font-size:14px; line-height:1.7;}
.checkout-aside ol{margin:18px 0 0; padding-left:20px; color:rgba(237,234,226,0.85); font-size:13.5px; line-height:1.9;}

/* ---------- FAQ / SHIPPING SECTION ---------- */
.faq-section{padding:100px 0; background:var(--card);}
@media (max-width:640px){ .faq-section{padding:60px 0;} }

.faq-photo-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:48px 0 56px;
}
@media (max-width:860px){ .faq-photo-grid{grid-template-columns:repeat(2,1fr);} }
.faq-photo-placeholder{
  aspect-ratio:4/3; border:1.5px dashed var(--rule); border-radius:2px;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:16px;
  background:var(--limestone);
}
.faq-photo-placeholder span{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.04em;
  color:var(--graphite-soft); text-transform:uppercase; line-height:1.6;
}

.faq-list{max-width:760px;}
.faq-item{border-bottom:1px solid var(--rule);}
.faq-question{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  background:none; border:none; text-align:left; cursor:pointer;
  padding:22px 0; font-family:'Fraunces',serif; font-size:19px; font-style:italic; color:var(--graphite);
}
.faq-question .q-icon{
  font-family:'IBM Plex Mono',monospace; font-size:18px; color:var(--graphite-soft);
  flex-shrink:0; transition:transform .3s;
}
.faq-item.open .faq-question .q-icon{transform:rotate(45deg);}
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .35s ease;
}
.faq-answer-inner{padding:0 0 24px; color:var(--graphite-soft); font-size:14.5px; line-height:1.75; max-width:620px;}
.faq-answer-inner p + p{margin-top:12px;}

/* ---------- THANK YOU PAGE ---------- */
.thankyou{padding:120px 0; text-align:center;}
@media (max-width:640px){ .thankyou{padding:70px 0;} }
.thankyou h1{font-size:clamp(32px,4.6vw,52px); font-style:italic;}
.thankyou p{color:var(--graphite-soft); max-width:480px; margin:18px auto 34px;}