/* Shared styles for the product pages in /products (loads after site.css). */

  /* On the product pages the header Donate button kept its compact padding between 481px and 560px wide
     (the main pages let the phone-size button padding win there). These two lines keep that difference. */
  @media (max-width:560px){ .btn-donate{padding:9px 18px;} }
  @media (max-width:480px){ .btn-donate{padding:8px 12px;} }
  :root{
    --navy-950:#111a2e; --navy-900:#152040; --navy-800:#1d2c4f; --navy-700:#28395f;
    --gold-700:#86621f; --gold-600:#a97e34; --gold-500:#c69a44; --gold-400:#d7ae5e; --gold-300:#e6c886;
    --cream-50:#faf7f0; --cream-100:#f5f0e4; --cream-200:#ece3ce; --cream-300:#e0d3b3;
    --ink-900:#20242c; --ink-700:#3c414c; --ink-500:#666c78; --ink-on-navy:#c9cedc;
    --line:rgba(32,36,44,0.12); --line-navy:rgba(230,200,134,0.22);
    --shadow:0 18px 40px -22px rgba(17,26,46,0.35); --bg:var(--cream-50); --fg:var(--ink-900);
  }
  .btn-gold[disabled]{opacity:0.55;cursor:not-allowed;transform:none;}
  .btn-gold[disabled]:hover{background:var(--gold-500);}
  .btn-line-light{border-color:rgba(255,255,255,0.4);color:#fff;}
  .btn-line-light:hover{border-color:#fff;background:rgba(255,255,255,0.08);}

  section{padding:64px 0;}

  .breadcrumb{font-size:0.78rem;letter-spacing:0.06em;color:var(--ink-500);display:flex;align-items:center;gap:8px;padding:22px 0 0;}
  .breadcrumb a:hover{color:var(--navy-900);}
  .breadcrumb .cur{color:var(--gold-600);}

  .product-detail{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-top:24px;}
  .pd-media{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:var(--cream-200);box-shadow:var(--shadow);}
  .pd-media img{width:100%;height:100%;object-fit:cover;}
  .pd-info .eyebrow{display:block;}
  .pd-info h1{font-family:"Playfair Display",serif;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;color:var(--navy-900);margin-top:10px;}
  .pd-info .price{font-family:"Playfair Display",serif;font-weight:700;color:var(--navy-900);font-size:1.3rem;margin-top:14px;}
  .pd-info p.desc{margin-top:18px;color:var(--ink-500);font-size:0.98rem;max-width:48ch;}

  .pd-colors{margin-top:26px;}
  .pd-colors .label{font-size:0.76rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-700);margin-bottom:10px;}
  .pd-swatch-row{display:flex;align-items:center;gap:12px;}
  .pd-swatch{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(32,36,44,0.18);display:inline-flex;padding:0;}
  .pd-swatch.active{border-color:var(--gold-500);}
  .pd-swatch[disabled]{opacity:0.4;cursor:not-allowed;}
  .pd-swatch-note{font-size:0.76rem;color:var(--ink-500);margin-top:8px;}
  /* Touch: extend the colour-swatch hit area past the dot, without changing how it looks */
  @media (hover:none){
    .pd-swatch{position:relative;}
    .pd-swatch::after{content:"";position:absolute;left:-5px;right:-5px;top:-6px;bottom:-6px;}
  }

  .pd-qty{margin-top:26px;}
  .pd-qty .label{font-size:0.76rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-700);margin-bottom:10px;}
  .pd-qty-row{display:flex;align-items:center;border:1px solid var(--line);border-radius:2px;width:fit-content;}
  .pd-qty-row button{width:36px;height:36px;background:none;border:none;cursor:pointer;font-size:1rem;}
  .pd-qty-row button:hover{background:var(--cream-100);}
  .pd-qty-row input{width:44px;text-align:center;border:none;background:none;font-family:inherit;font-size:0.95rem;}
  .pd-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
  .pd-note{margin-top:14px;font-size:0.82rem;color:var(--ink-500);}
  .pd-added{margin-top:14px;font-size:0.86rem;color:var(--gold-600);font-weight:600;display:none;}

  @media (max-width:860px){
    .product-detail{grid-template-columns:1fr;gap:32px;}
  }
  .footer-col .social-row{display:flex;gap:10px;margin-top:4px;}
  .footer-col .social-row a{width:34px;height:34px;border-radius:50%;background:var(--gold-500);color:var(--navy-950);display:flex;align-items:center;justify-content:center;}
  .footer-col .social-row a:hover{background:var(--gold-400);}
  .footer-col .social-row svg{width:15px;height:15px;}
  .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:18px;padding-bottom:18px;font-size:0.78rem;color:#8891a3;}